@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
358 lines (342 loc) • 14.8 kB
JavaScript
import{a as e,r as a}from"../../lit-element-Ho-VPzO1.js";import{FilledIconButtonDefinition as n,FilledTonalIconButtonDefinition as t,OutlinedIconButtonDefinition as r,StandardIconButtonDefinition as i}from"../../component-definitions/icon-button.definition.js";import{createWrappedTokens as o}from"../../utils/tokens/create-wrapped-tokens.js";import{overrideComponentTokens as l}from"../../utils/tokens/override-component-tokens.js";import{stringTokens as d}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 s=o("--mdc-icon-button",n),c=o("--mdc-icon-button",t),g=o("--mdc-icon-button",r),u=o("--mdc-icon-button",i),m=d(s),p=d(c),v=d(g),b=d(u),h=e`
.container {
&.extra-small {
height: var(--_extra-small-container-height);
}
&.small {
height: var(--_small-container-height);
}
&.medium {
height: var(--_medium-container-height);
}
&.large {
height: var(--_large-container-height);
}
&.extra-large {
height: var(--_extra-large-container-height);
}
}
.container.narrow {
&.extra-small {
padding-inline-start: var(--_extra-small-narrow-leading-space);
padding-inline-end: var(--_extra-small-narrow-trailing-space);
}
&.small {
padding-inline-start: var(--_small-narrow-leading-space);
padding-inline-end: var(--_small-narrow-trailing-space);
}
&.medium {
padding-inline-start: var(--_medium-narrow-leading-space);
padding-inline-end: var(--_medium-narrow-trailing-space);
}
&.large {
padding-inline-start: var(--_large-narrow-leading-space);
padding-inline-end: var(--_large-narrow-trailing-space);
}
&.extra-large {
padding-inline-start: var(--_extra-large-narrow-leading-space);
padding-inline-end: var(--_extra-large-narrow-trailing-space);
}
}
.container.default {
&.extra-small {
padding-inline-start: var(--_extra-small-default-leading-space);
padding-inline-end: var(--_extra-small-default-trailing-space);
}
&.small {
padding-inline-start: var(--_small-default-leading-space);
padding-inline-end: var(--_small-default-trailing-space);
}
&.medium {
padding-inline-start: var(--_medium-default-leading-space);
padding-inline-end: var(--_medium-default-trailing-space);
}
&.large {
padding-inline-start: var(--_large-default-leading-space);
padding-inline-end: var(--_large-default-trailing-space);
}
&.extra-large {
padding-inline-start: var(--_extra-large-default-leading-space);
padding-inline-end: var(--_extra-large-default-trailing-space);
}
}
.container.wide {
&.extra-small {
padding-inline-start: var(--_extra-small-wide-leading-space);
padding-inline-end: var(--_extra-small-wide-trailing-space);
}
&.small {
padding-inline-start: var(--_small-wide-leading-space);
padding-inline-end: var(--_small-wide-trailing-space);
}
&.medium {
padding-inline-start: var(--_medium-wide-leading-space);
padding-inline-end: var(--_medium-wide-trailing-space);
}
&.large {
padding-inline-start: var(--_large-wide-leading-space);
padding-inline-end: var(--_large-wide-trailing-space);
}
&.extra-large {
padding-inline-start: var(--_extra-large-wide-leading-space);
padding-inline-end: var(--_extra-large-wide-trailing-space);
}
}
`,_=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);
}
`,f=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);
}
`,x=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);
}
`,w=e`
.button.extra-small ::slotted(*) {
font-size: var(--_extra-small-icon-size);
height: var(--_extra-small-icon-size);
width: var(--_extra-small-icon-size);
}
.button.small ::slotted(*) {
font-size: var(--_small-icon-size);
height: var(--_small-icon-size);
width: var(--_small-icon-size);
}
.button.medium ::slotted(*) {
font-size: var(--_medium-icon-size);
height: var(--_medium-icon-size);
width: var(--_medium-icon-size);
}
.button.large ::slotted(*) {
font-size: var(--_large-icon-size);
height: var(--_large-icon-size);
width: var(--_large-icon-size);
}
.button.extra-large ::slotted(*) {
font-size: var(--_extra-large-icon-size);
height: var(--_extra-large-icon-size);
width: var(--_extra-large-icon-size);
}
.button.extra-small mdc-icon {${a(d(l("--mdc-icon",{size:"var(--_extra-small-icon-size)"})))};}
.button.small mdc-icon {${a(d(l("--mdc-icon",{size:"var(: var(--_small-icon-size)"})))};}
.button.medium mdc-icon {${a(d(l("--mdc-icon",{size:"var(: var(--_medium-icon-size)"})))};}
.button.large mdc-icon {${a(d(l("--mdc-icon",{size:"var(: var(--_large-icon-size)"})))};}
.button.extra-large mdc-icon {${a(d(l("--mdc-icon",{size:"var(--_extra-large-icon-size)"})))};}
`,z=e`
:host([variant="filled"]) {${m};}
:host([variant="filled-tonal"]) {${p};}
:host([variant="outlined"]) {${v};}
:host([variant="standard"]) {${b};}
`,k=[(()=>{const n=(e,n)=>a(`\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=a=>e`
&.extra-small {${n("extra-small",a)};}
&.small {${n("small",a)};}
&.medium {${n("medium",a)};}
&.large {${n("large",a)};}
&.extra-large {${n("extra-large",a)};}
`;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)=>a(d(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,a)=>d(l("--mdc-focus-ring",{"shape-start-start":`min(var(--_${e}-${a}-start-start), calc(var(--_${e}-container-height) / 2))`,"shape-start-end":`min(var(--_${e}-${a}-start-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-end":`min(var(--_${e}-${a}-end-end), calc(var(--_${e}-container-height) / 2))`,"shape-end-start":`min(var(--_${e}-${a}-end-start), calc(var(--_${e}-container-height) / 2))`})),t=e=>a(`\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")};}
`})(),h,_,$,f,x,w,z];export{k as iconButtonStyles};