@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
306 lines (286 loc) • 13.7 kB
JavaScript
import{a as e,r as o}from"../../lit-element-Ho-VPzO1.js";import{FilledIconButtonDefinition as n,FilledTonalIconButtonDefinition as t,OutlinedIconButtonDefinition as a,StandardIconButtonDefinition as r}from"../../component-definitions/icon-button.definition.js";import{createWrappedTokens as i}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as l}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as c}from"../../utils/tokens/string-tokens.js";import"../../color-CigMJnjV.js";import"../../shape-CrZ0CLVJ.js";import"../../state-C-haZXan.js";import"../../utils/tokens/create-logic-shape-tokens.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/const d=i("--mdc-icon-button",n),s=i("--mdc-icon-button",t),g=i("--mdc-icon-button",a),u=i("--mdc-icon-button",r),b=c(d),m=c(s),v=c(g),h=c(u),p=e`
.container:is(.filled, .filled-tonal):not(.disabled) .background {
background: var(--_container-color);
}
.container:is(.filled, .filled-tonal):not(.disabled).togglable.unselected .background {
background: var(--_container-color-toggle-unselected);
}
.container:is(.filled, .filled-tonal):not(.disabled).togglable.selected .background {
background: var(--_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(--_container-color);
}
.container.outlined.togglable.unselected .background {
background: var(--_container-color-toggle-unselected);
}
.container.outlined.togglable.selected .background {
background: var(--_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);
}
}
`,$=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(--_outline-color);
}
.container.outlined:not(.disabled).togglable.unselected .outline {
border-color: var(--_outline-color-toggle-unselected);
}
.container.outlined:not(.disabled).togglable.selected .outline {
border-color: var(--_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);
}
`,_=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;
position: absolute;
inset: 0px;
border: none;
outline: none;
padding: 0;
margin: 0;
z-index: 1;
user-select: none;
}
.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;
}
.background {
user-select: none;
border-radius: inherit;
height: 100%;
width: 100%;
z-index: -1;
position: absolute;
inset: 0px;
}
.container,
mdc-focus-ring {
transition-property: border-radius;
transition-duration: 350ms;
transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
}
`,f=e`
.container:not(.disabled) {
color: var(--_icon-color);
}
.container:not(.disabled).togglable.unselected {
color: var(--_icon-color-toggle-unselected);
}
.container:not(.disabled).togglable.selected {
color: var(--_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);
}
`,x=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 mdc-icon {${o(c(l("--mdc-icon",{size:"var(--_extra-small-icon-size)"})))};}
.container.small mdc-icon {${o(c(l("--mdc-icon",{size:"var(: var(--_small-icon-size)"})))};}
.container.medium mdc-icon {${o(c(l("--mdc-icon",{size:"var(: var(--_medium-icon-size)"})))};}
.container.large mdc-icon {${o(c(l("--mdc-icon",{size:"var(: var(--_large-icon-size)"})))};}
.container.extra-large mdc-icon {${o(c(l("--mdc-icon",{size:"var(--_extra-large-icon-size)"})))};}
`,k=e`
.icon {
grid-row: 1/2;
grid-column: 1/2;
}
.icon:is(.active-icon, .inactive-icon, .default-icon) {
display: none;
}
.container.togglable.selected.has-active-icon .icon.active-icon {
display: block;
}
.container.togglable.selected:not(.has-active-icon) .icon.default-icon {
display: block;
}
.container.togglable.unselected.has-inactive-icon .icon.inactive-icon {
display: block;
}
.container.togglable.unselected:not(.has-inactive-icon) .icon.default-icon {
display: block;
}
`,z=e`
:host:has(.container.filled) {${b};}
:host:has(.container.filled-tonal) {${m};}
:host:has(.container.outlined) {${v};}
:host:has(.container.standard) {${h};}
`,y=[(()=>{const n=(e,n)=>o(`\n border-end-start-radius: min(var(--_${e}-${n}-end-start), calc(var(--_${e}-container-height) / 2));\n border-end-end-radius: min(var(--_${e}-${n}-end-end), calc(var(--_${e}-container-height) / 2));\n border-start-end-radius: min(var(--_${e}-${n}-start-end), calc(var(--_${e}-container-height) / 2));\n border-start-start-radius: min(var(--_${e}-${n}-start-start), calc(var(--_${e}-container-height) / 2));\n `),t=o=>e`
&.extra-small {${n("extra-small",o)};}
&.small {${n("small",o)};}
&.medium {${n("medium",o)};}
&.large {${n("large",o)};}
&.extra-large {${n("extra-large",o)};}
`;return e`
.container.round {${t("container-shape-round")};}
.container.square {${t("container-shape-square")};}
.container.togglable.selected {
&.round {${t("selected-container-shape-round")};}
&.square {${t("selected-container-shape-square")};}
}
.container:not(.disable-morph, .togglable):is(.round, .square):active {${t("shape-pressed-morph")};}
.container:not(.disable-morph).togglable:has(input:active) {${t("shape-pressed-morph")};}
`})(),(()=>{const n=(e,n)=>o(c(l("--mdc-ripple",{"hovered-color":e?`var(--_hovered-state-layer-color-toggle-${n?"selected":"unselected"})`:"var(--_hovered-state-layer-color)","focused-color":e?`var(--_focused-state-layer-color-toggle-${n?"selected":"unselected"})`:"var(--_focused-state-layer-color)","pressed-color":e?`var(--_pressed-state-layer-color-toggle-${n?"selected":"unselected"})`:"var(--_pressed-state-layer-color)","hovered-opacity":"var(--_hovered-state-layer-opacity)","focused-opacity":"var(--_focused-state-layer-opacity)","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)}; }
`})(),(()=>{const n=(e,o)=>c(l("--mdc-focus-ring",{"shape-start-start":`min(var(--_${e}-${o}-start-start), calc(var(--_${e}-container-height) / 2))`,"shape-start-end":`min(var(--_${e}-${o}-start-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-end":`min(var(--_${e}-${o}-end-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-start":`min(var(--_${e}-${o}-end-start), calc(var(--_${e}-container-height) / 2))`})),t=e=>o(`\n &.extra-small mdc-focus-ring {${n("extra-small",e)};}\n &.small mdc-focus-ring {${n("small",e)};}\n &.medium mdc-focus-ring {${n("medium",e)};}\n &.large mdc-focus-ring {${n("large",e)};}\n &.extra-large mdc-focus-ring {${n("extra-large",e)};}\n `);return e`
.container.round {${t("container-shape-round")};}
.container.square {${t("container-shape-square")};}
.container.togglable.selected.round {${t("selected-container-shape-round")};}
.container.togglable.selected.square {${t("selected-container-shape-square")};}
.container:not(.disable-morph, .togglable):is(.round, .square):active,
.container:not(.disable-morph).togglable:has(input:active) {${t("shape-pressed-morph")};}
`})(),e`${(()=>{const n=e=>o(`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")};}
}
`})()}${(()=>{const n=(e,n)=>o(`padding-inline-start: var(--_${e}-${n}-leading-space);padding-inline-end: var(--_${e}-${n}-trailing-space)`),t=e=>o(`\n .container.${e} {\n &.extra-small {${n("extra-small",e)};}\n &.small {${n("small",e)};}\n &.medium {${n("medium",e)};}\n &.large {${n("large",e)};}\n &.extra-large {${n("extra-large",e)};}\n }\n `);return e`${t("narrow")}${t("default")}${t("wide")}`})()}${(()=>{const n=(e,n)=>o(`min-width: calc(var(--_${e}-${n}-leading-space) + var(--_${e}-${n}-trailing-space) + var(--_${e}-icon-size))`),t=e=>o(`\n .container.${e} {\n &.extra-small {${n("extra-small",e)};}\n &.small {${n("small",e)};}\n &.medium {${n("medium",e)};}\n &.large {${n("large",e)};}\n &.extra-large {${n("extra-large",e)};}\n } \n `);return e`${t("narrow")}${t("default")}${t("wide")}`})()}`,p,$,_,f,x,k,z];export{y as iconButtonStyles};