@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
343 lines (325 loc) • 14.5 kB
JavaScript
import{css as e,unsafeCSS as t}from"../../node_modules/@lit/reactive-element/css-tag.js";import"../../node_modules/lit/index.js";import{defineVars as n}from"../../node_modules/@sandlada/jss/dist/define-vars.js";import{defineTokenRefsRecord as r}from"../../node_modules/@sandlada/jss/dist/define-token-refs.js";import{overrideComponentTokens as i}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as a}from"../../utils/tokens/string-tokens.js";import"../../utils/tokens/index.js";import{FilledIconButtonDefinition as o,FilledTonalIconButtonDefinition as s,OutlinedIconButtonDefinition as c,StandardIconButtonDefinition as l}from"../../component-definitions/icon-button.definition.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const u=r(o,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-icon-button`}),d=t(n(u,!0).join(``)),f=r(s,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-icon-button`}),p=t(n(f,!0).join(``)),m=r(c,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-icon-button`}),h=t(n(m,!0).join(``)),g=r(l,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-icon-button`}),_=t(n(g,!0).join(``)),v=()=>{let n=(e,n)=>t(`
border-end-start-radius: min(var(--_${e}-${n}-end-start), calc(var(--_${e}-container-height) / 2));
border-end-end-radius: min(var(--_${e}-${n}-end-end), calc(var(--_${e}-container-height) / 2));
border-start-end-radius: min(var(--_${e}-${n}-start-end), calc(var(--_${e}-container-height) / 2));
border-start-start-radius: min(var(--_${e}-${n}-start-start), calc(var(--_${e}-container-height) / 2));
`),r=t=>e`
&.extra-small {${n(`extra-small`,t)};}
&.small {${n(`small`,t)};}
&.medium {${n(`medium`,t)};}
&.large {${n(`large`,t)};}
&.extra-large {${n(`extra-large`,t)};}
`;return e`
.container.round {${r(`container-shape-round`)};}
.container.square {${r(`container-shape-square`)};}
.container.togglable.selected {
&.round {${r(`container-shape-round-selected`)};}
&.square {${r(`container-shape-square-selected`)};}
}
.container:not(.disable-morph, .togglable):is(.round, .square):active {${r(`container-shape-pressed-morph`)};}
.container:not(.disable-morph).togglable:has(input:active) {${r(`container-shape-pressed-morph`)};}
`},y=()=>{let n=(e,n)=>t(a(i(`--mdc-ripple`,{"enabled-hovered-color":e?`var(--_hovered-state-layer-color-toggle-${n?`selected`:`unselected`})`:`var(--_hovered-state-layer-color)`,"enabled-focused-color":e?`var(--_focused-state-layer-color-toggle-${n?`selected`:`unselected`})`:`var(--_focused-state-layer-color)`,"enabled-pressed-color":e?`var(--_pressed-state-layer-color-toggle-${n?`selected`:`unselected`})`:`var(--_pressed-state-layer-color)`,"enabled-hovered-opacity":`var(--_hovered-state-layer-opacity)`,"enabled-focused-opacity":`var(--_focused-state-layer-opacity)`,"enabled-pressed-opacity":`var(--_pressed-state-layer-opacity)`})));return e`
mdc-ripple { ${n(!1,!1)}; }
.togglable.selected mdc-ripple { ${n(!0,!0)}; }
.togglable.unselected mdc-ripple { ${n(!0,!1)}; }
`},b=()=>{let n=(e,t)=>a(i(`--mdc-focus-ring`,{"shape-start-start":`min(var(--_${e}-${t}-start-start), calc(var(--_${e}-container-height) / 2))`,"shape-start-end":`min(var(--_${e}-${t}-start-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-end":`min(var(--_${e}-${t}-end-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-start":`min(var(--_${e}-${t}-end-start), calc(var(--_${e}-container-height) / 2))`})),r=e=>t(`
&.extra-small mdc-focus-ring {${n(`extra-small`,e)};}
&.small mdc-focus-ring {${n(`small`,e)};}
&.medium mdc-focus-ring {${n(`medium`,e)};}
&.large mdc-focus-ring {${n(`large`,e)};}
&.extra-large mdc-focus-ring {${n(`extra-large`,e)};}
`);return e`
.container.round {${r(`container-shape-round`)};}
.container.square {${r(`container-shape-square`)};}
.container.togglable.selected.round {${r(`container-shape-round-selected`)};}
.container.togglable.selected.square {${r(`container-shape-square-selected`)};}
.container:not(.disable-morph, .togglable):is(.round, .square):active,
.container:not(.disable-morph).togglable:has(input:active) {${r(`container-shape-pressed-morph`)};}
`},x=()=>e`${(()=>{let n=e=>t(`height: var(--_${e}-container-height)`);return e`
.container {
&.extra-small {${n(`extra-small`)};}
&.small {${n(`small`)};}
&.medium {${n(`medium`)};}
&.large {${n(`large`)};}
&.extra-large {${n(`extra-large`)};}
}
`})()}${(()=>{let n=(e,n)=>t(`padding-inline-start: var(--_${e}-${n}-leading-space);padding-inline-end: var(--_${e}-${n}-trailing-space)`),r=e=>t(`
.container.${e} {
&.extra-small {${n(`extra-small`,e)};}
&.small {${n(`small`,e)};}
&.medium {${n(`medium`,e)};}
&.large {${n(`large`,e)};}
&.extra-large {${n(`extra-large`,e)};}
}
`);return e`${r(`narrow`)}${r(`default`)}${r(`wide`)}`})()}${(()=>{let n=(e,n)=>t(`min-width: calc(var(--_${e}-${n}-leading-space) + var(--_${e}-${n}-trailing-space) + var(--_${e}-icon-size))`),r=e=>t(`
.container.${e} {
&.extra-small {${n(`extra-small`,e)};}
&.small {${n(`small`,e)};}
&.medium {${n(`medium`,e)};}
&.large {${n(`large`,e)};}
&.extra-large {${n(`extra-large`,e)};}
}
`);return e`${r(`narrow`)}${r(`default`)}${r(`wide`)}`})()}`,S=e`
.container:is(.filled, .filled-tonal):not(.disabled) .background {
background: var(--_enabled-container-color);
}
.container:is(.filled, .filled-tonal):not(.disabled).togglable.unselected .background {
background: var(--_enabled-container-color-toggle-unselected);
}
.container:is(.filled, .filled-tonal):not(.disabled).togglable.selected .background {
background: var(--_enabled-container-color-toggle-selected);
}
.container:is(.filled, .filled-tonal).disabled .background {
background: var(--_disabled-container-color);
opacity: var(--_disabled-container-opacity);
}
.container.outlined:not(.disabled) .background {
background: var(--_enabled-container-color);
}
.container.outlined.togglable.unselected .background {
background: var(--_enabled-container-color-toggle-unselected);
}
.container.outlined.togglable.selected .background {
background: var(--_enabled-container-color-toggle-selected);
}
.container.outlined:not(.togglable).disabled .background {
background: var(--_disabled-container-color);
}
.container.outlined.togglable.disabled {
&.unselected .background {
background: var(--_disabled-container-color-toggle-unselected);
}
&.selected .background {
background: var(--_disabled-container-color-toggle-selected);
}
}
`,C=e`
.outline {
all: unset;
border-radius: inherit;
position: absolute;
inset: 0;
height: 100%;
width: 100%;
z-index: -1;
box-sizing: border-box;
border-style: solid;
background: transparent;
}
.container:not(.outlined) .outline {
display: none;
}
.container.outlined.extra-small .outline {
border-width: var(--_extra-small-outline-width);
}
.container.outlined.small .outline {
border-width: var(--_small-outline-width);
}
.container.outlined.medium .outline {
border-width: var(--_medium-outline-width);
}
.container.outlined.large .outline {
border-width: var(--_large-outline-width);
}
.container.outlined.extra-large .outline {
border-width: var(--_extra-large-outline-width);
}
.container.outlined:not(.disabled) .outline {
border-color: var(--_enabled-outline-color);
}
.container.outlined:not(.disabled).togglable.unselected .outline {
border-color: var(--_enabled-outline-color-toggle-unselected);
}
.container.outlined:not(.disabled).togglable.selected .outline {
border-color: var(--_enabled-outline-color-toggle-selected);
}
.container.outlined.disabled .outline {
outline-color: var(--_disabled-outline-color);
}
.container.outlined.disabled.togglable.unselected .outline {
outline-color: var(--_disabled-outline-color-toggle-unselected);
}
.container.outlined.disabled.togglable.selected .outline {
outline-color: var(--_disabled-outline-color-toggle-selected);
}
`,w=e`
:host {
display: inline-flex;
vertical-align: top;
border: none;
outline: none;
justify-content: center;
user-select: none;
}
:host([disabled]),
:host([disabled]) button,
:host([disabled]) input,
.container.disabled,
.container.disabled button,
.container.disabled input {
cursor: default;
pointer-events: none;
}
::slotted(*) {
font-weight: inherit;
fill: currentColor;
user-select: none;
}
input {
all: unset;
appearance: none;
position: absolute;
inset: 0;
height: 100%;
width: 100%;
margin: 0;
opacity: 0;
outline: none;
border: none;
z-index: 1;
cursor: inherit;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container {
padding: 0;
margin: 0;
cursor: pointer;
position: relative;
display: grid;
place-content: center;
flex-grow: 0;
flex-shrink: 0;
border: none;
text-decoration: none;
user-select: none;
outline: none;
appearance: none;
background: transparent;
user-select: none;
z-index: 0;
}
.background {
user-select: none;
border-radius: inherit;
height: 100%;
width: 100%;
z-index: -1;
position: absolute;
inset: 0px;
}
.container,
mdc-focus-ring {
/* Add border-radius so the focus ring morphs alongside the
container; preserve opacity so the closing transition still runs. */
transition-property: border-radius, opacity;
transition-duration: 350ms;
transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
}
`,T=e`
.container:not(.disabled) {
color: var(--_enabled-icon-color);
}
.container:not(.disabled).togglable.unselected {
color: var(--_enabled-icon-color-toggle-unselected);
}
.container:not(.disabled).togglable.selected {
color: var(--_enabled-icon-color-toggle-selected);
}
.container:not(.disabled):hover {
color: var(--_hovered-icon-color);
}
.container:not(.disabled).togglable.unselected:hover {
color: var(--_hovered-icon-color-toggle-unselected);
}
.container:not(.disabled).togglable.selected:hover {
color: var(--_hovered-icon-color-toggle-selected);
}
.container:not(.disabled):focus-within {
color: var(--_focused-icon-color);
}
.container:not(.disabled).togglable.unselected:focus-within {
color: var(--_focused-icon-color-toggle-unselected);
}
.container:not(.disabled).togglable.selected:focus-within {
color: var(--_focused-icon-color-toggle-selected);
}
.container:not(.disabled):active {
color: var(--_pressed-icon-color);
}
.container:not(.disabled).togglable.unselected:active {
color: var(--_pressed-icon-color-toggle-unselected);
}
.container:not(.disabled).togglable.selected:active {
color: var(--_pressed-icon-color-toggle-selected);
}
.container.disabled {
color: var(--_disabled-icon-color);
opacity: var(--_disabled-icon-opacity);
}
`,E=e`
.container.extra-small ::slotted(*) {
font-size: var(--_extra-small-icon-size);
height: var(--_extra-small-icon-size);
width: var(--_extra-small-icon-size);
}
.container.small ::slotted(*) {
font-size: var(--_small-icon-size);
height: var(--_small-icon-size);
width: var(--_small-icon-size);
}
.container.medium ::slotted(*) {
font-size: var(--_medium-icon-size);
height: var(--_medium-icon-size);
width: var(--_medium-icon-size);
}
.container.large ::slotted(*) {
font-size: var(--_large-icon-size);
height: var(--_large-icon-size);
width: var(--_large-icon-size);
}
.container.extra-large ::slotted(*) {
font-size: var(--_extra-large-icon-size);
height: var(--_extra-large-icon-size);
width: var(--_extra-large-icon-size);
}
.container.extra-small .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_extra-small-icon-size)`}))};}
.container.small .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_small-icon-size)`}))};}
.container.medium .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_medium-icon-size)`}))};}
.container.large .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_large-icon-size)`}))};}
.container.extra-large .icon {${a(i(`--mdc-icon`,{"enabled-size":`var(--_extra-large-icon-size)`}))};}
`,D=e`
.icon {
grid-row: 1/2;
grid-column: 1/2;
}
/* For Checkable IconButton */
.icon:is(.active-icon, .inactive-icon, .default-icon) {
display: none;
}
.container.togglable.selected.has-active-icon .icon.active-icon {
display: flex;
}
.container.togglable.selected:not(.has-active-icon) .icon.default-icon {
display: flex;
}
.container.togglable.unselected.has-inactive-icon .icon.inactive-icon {
display: flex;
}
.container.togglable.unselected:not(.has-inactive-icon) .icon.default-icon {
display: flex;
}
`,O=e`
:host:has(.container.filled) {${d};}
:host:has(.container.filled-tonal) {${p};}
:host:has(.container.outlined) {${h};}
:host:has(.container.standard) {${_};}
`,k=[v(),y(),b(),x(),S,C,w,T,E,D,O];export{k as iconButtonStyles};
//# sourceMappingURL=icon-button.style.js.map