@sandlada/mdc/build/components/button/internal/button.style.js

@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.

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{ElevatedButtonDefinition as i,FilledButtonDefinition as a,FilledTonalButtonDefinition as o,OutlinedButtonDefinition as s,TextButtonDefinition as c}from"../../../component-definitions/button.definition.js";import{overrideComponentTokens as l}from"../../../utils/tokens/override-component-tokens.js";import{stringTokens as u}from"../../../utils/tokens/string-tokens.js";import"../../../utils/tokens/index.js";
/**
* @license
* Copyright 2025 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const d=r(i,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-button`}),f=t(n(d,!0).join(``)),p=r(a,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-button`}),m=t(n(p,!0).join(``)),h=r(o,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-button`}),g=t(n(h,!0).join(``)),_=r(s,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-button`}),v=t(n(_,!0).join(``)),y=r(c,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-button`}),b=t(n(y,!0).join(``)),x=()=>{let n=(e,n)=>t(`
        border-start-start-radius: min(var(--_${e}-${n}-start-start), calc(var(--_${e}-container-height) / 2));
        border-start-end-radius: min(var(--_${e}-${n}-start-end), calc(var(--_${e}-container-height) / 2));
        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));
    `),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.round.togglable.selected {${r(`container-shape-round-toggle-selected`)};}
        .container.square.togglable.selected {${r(`container-shape-square-toggle-selected`)};}
        .container:not(.disable-morph, .togglable):is(.round, .square):active,
        .container:not(.disable-morph).togglable:is(.selected, .unselected):has(.toggle-input:active) {${r(`container-shape-pressed-morph`)};}
    `},S=()=>{let n=(e,t)=>u(l(`--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-toggle-selected`)};}
        .container.togglable.selected.square {${r(`container-shape-square-toggle-selected`)};}
        .container:not(.disable-morph, .togglable):is(.round, .square):active,
        .container:not(.disable-morph).togglable:is(.selected, .unselected):has(.toggle-input:active) {${r(`container-shape-pressed-morph`)};}
    `},C=()=>e`
        .container.extra-small :is(::slotted([slot="icon"]), .icon) {${u(l(`--mdc-icon`,{"enabled-size":`var(--_extra-small-icon-size)`}))};}
        .container.small :is(::slotted([slot="icon"]), .icon) {${u(l(`--mdc-icon`,{"enabled-size":`var(--_small-icon-size)`}))};}
        .container.medium :is(::slotted([slot="icon"]), .icon) {${u(l(`--mdc-icon`,{"enabled-size":`var(--_medium-icon-size)`}))};}
        .container.large :is(::slotted([slot="icon"]), .icon) {${u(l(`--mdc-icon`,{"enabled-size":`var(--_large-icon-size)`}))};}
        .container.extra-large :is(::slotted([slot="icon"]), .icon) {${u(l(`--mdc-icon`,{"enabled-size":`var(--_extra-large-icon-size)`}))};}
    `,w=e`
    .container mdc-ripple {${u(l(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color)`,"enabled-focused-color":`var(--_focused-state-layer-color)`,"enabled-pressed-color":`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)`}))};}
    .container.togglable.selected mdc-ripple {${u(l(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color-toggle-selected)`,"enabled-focused-color":`var(--_focused-state-layer-color-toggle-selected)`,"enabled-pressed-color":`var(--_pressed-state-layer-color-toggle-selected)`}))};}
    .container.togglable.unselected mdc-ripple {${u(l(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color-toggle-unselected)`,"enabled-focused-color":`var(--_focused-state-layer-color-toggle-unselected)`,"enabled-pressed-color":`var(--_pressed-state-layer-color-toggle-unselected)`}))};}
`,T=e`
    .container mdc-elevation {transition-duration: 0ms;${u(l(`--mdc-elevation`,{"enabled-level":`var(--_enabled-container-elevation)`,"enabled-shadow-color":`var(--_enabled-container-shadow-color)`}))};}
    .container:hover mdc-elevation {${u(l(`--mdc-elevation`,{"enabled-level":`var(--_hovered-container-elevation)`}))};}
    .container:focus-within mdc-elevation {${u(l(`--mdc-elevation`,{"enabled-level":`var(--_focused-container-elevation)`}))};}
    .container:active mdc-elevation {${u(l(`--mdc-elevation`,{"enabled-level":`var(--_pressed-container-elevation)`}))};}
    .container.disabled mdc-elevation {transition: none;${u(l(`--mdc-elevation`,{"enabled-level":`var(--_disabled-container-elevation)`}))};}
`,E=e`
    :host {
        display: inline-flex;
        outline: none;
        vertical-align: top;
        cursor: pointer;
        contain: layout;
        -webkit-tap-highlight-color: transparent;
    }

    .container {
        all: unset;
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        outline: none;
        place-content: center;
        place-items: center;
        position: relative;
        z-index: 0;
        text-overflow: ellipsis;
        text-wrap: nowrap;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        vertical-align: top;
        transition-property: border-radius;
        transition-duration: 350ms;
        transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
    }

    :host([disabled]),
    .container.disabled {
        cursor: default;
        pointer-events: none;
    }

    /* Root Width & Height */

    .container {
        &.extra-small {
            height: var(--_extra-small-container-height);
            min-width: calc(64px - var(--_extra-small-container-inline-leading-padding-space) - var(--_extra-small-container-inline-trailing-padding-space));
        }
        &.small {
            height: var(--_small-container-height);
            min-width: calc(64px - var(--_small-container-inline-leading-padding-space) - var(--_small-container-inline-trailing-padding-space));
        }
        &.medium {
            height: var(--_medium-container-height);
            min-width: calc(64px - var(--_medium-container-inline-leading-padding-space) - var(--_medium-container-inline-trailing-padding-space));
        }
        &.large {
            height: var(--_large-container-height);
            min-width: calc(64px - var(--_large-container-inline-leading-padding-space) - var(--_large-container-inline-trailing-padding-space));
        }
        &.extra-large {
            height: var(--_extra-large-container-height);
            min-width: calc(64px - var(--_extra-large-container-inline-leading-padding-space) - var(--_extra-large-container-inline-trailing-padding-space));
        }
    }

    /* Button Size */

    .container.extra-small {
        padding-inline-start: var(--_extra-small-container-inline-leading-padding-space);
        padding-inline-end: var(--_extra-small-container-inline-trailing-padding-space);
        gap: var(--_extra-small-icon-label-padding-space);
    }
    .container.small{
        padding-inline-start: var(--_small-container-inline-leading-padding-space);
        padding-inline-end: var(--_small-container-inline-trailing-padding-space);
        gap: var(--_small-icon-label-padding-space);
    }
    .container.medium{
        padding-inline-start: var(--_medium-container-inline-leading-padding-space);
        padding-inline-end: var(--_medium-container-inline-trailing-padding-space);
        gap: var(--_medium-icon-label-padding-space);
    }
    .container.large{
        padding-inline-start: var(--_large-container-inline-leading-padding-space);
        padding-inline-end: var(--_large-container-inline-trailing-padding-space);
        gap: var(--_large-icon-label-padding-space);
    }
    .container.extra-large{
        padding-inline-start: var(--_extra-large-container-inline-leading-padding-space);
        padding-inline-end: var(--_extra-large-container-inline-trailing-padding-space);
        gap: var(--_extra-large-icon-label-padding-space);
    }

    .container:not(.has-label) .label {
        display: none;
    }

    .label {
        width: auto;
        display: inline-flex;
        box-sizing: border-box;
        will-change: width, opacity;
    }

    /* Label Size */

    .container.extra-small .label {
        font-family: var(--_extra-small-label-font);
        font-weight: var(--_extra-small-label-weight);
        line-height: var(--_extra-small-label-line-height);
        letter-spacing: var(--_extra-small-label-tracking);
        font-size: var(--_extra-small-label-size);
    }
    .container.small .label {
        font-family: var(--_small-label-font);
        font-weight: var(--_small-label-weight);
        line-height: var(--_small-label-line-height);
        letter-spacing: var(--_small-label-tracking);
        font-size: var(--_small-label-size);
    }
    .container.medium .label {
        font-family: var(--_medium-label-font);
        font-weight: var(--_medium-label-weight);
        line-height: var(--_medium-label-line-height);
        letter-spacing: var(--_medium-label-tracking);
        font-size: var(--_medium-label-size);
    }
    .container.large .label {
        font-family: var(--_large-label-font);
        font-weight: var(--_large-label-weight);
        line-height: var(--_large-label-line-height);
        letter-spacing: var(--_large-label-tracking);
        font-size: var(--_large-label-size);
    }
    .container.extra-large .label {
        font-family: var(--_extra-large-label-font);
        font-weight: var(--_extra-large-label-weight);
        line-height: var(--_extra-large-label-line-height);
        letter-spacing: var(--_extra-large-label-tracking);
        font-size: var(--_extra-large-label-size);
    }

    .toggle-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%);
    }

    /* Label Color */

    .container .label {
        overflow: hidden;
        color: var(--_label-color);
    }
    .container.togglable.selected .label {
        color: var(--_label-color-toggle-selected);
    }
    .container.togglable.unselected .label {
        color: var(--_label-color-toggle-unselected);
    }

    .container:hover .label {
        color: var(--_hovered-label-color);
    }
    .container.togglable.selected:hover .label {
        color: var(--_hovered-label-color-toggle-selected);
    }
    .container.togglable.unselected:hover .label {
        color: var(--_hovered-label-color-toggle-unselected);
    }

    .container:focus-within .label {
        color: var(--_focused-label-color);
    }
    .container.togglable.selected:focus-within .label {
        color: var(--_focused-label-color-toggle-selected);
    }
    .container.togglable.unselected:focus-within .label {
        color: var(--_focused-label-color-toggle-unselected);
    }

    .container:active .label {
        color: var(--_pressed-label-color);
    }
    .container.togglable.selected:active .label {
        color: var(--_pressed-label-color-toggle-selected);
    }
    .container.togglable.unselected:active .label {
        color: var(--_pressed-label-color-toggle-unselected);
    }

    .container.disabled .label {
        color: var(--_disabled-label-color);
        opacity: var(--_disabled-label-opacity);
    }
    .container.disabled.togglable.selected .label {
        color: var(--_disabled-label-color-toggle-selected);
    }
    .container.disabled.togglable.unselected .label {
        color: var(--_disabled-label-color-toggle-unselected);
    }

    /* Background Color */

    .container .background {
        border-radius: inherit;
        inset: 0;
        position: absolute;
        z-index: -1;
    }
    .container:not(.disabled) .background {
        background-color: var(--_container-color);
    }
    .container.togglable.selected:not(.disabled) .background {
        background-color: var(--_container-color-toggle-selected);
    }
    .container.togglable.unselected:not(.disabled) .background {
        background-color: var(--_container-color-toggle-unselected);
    }

    .container:not(.disabled):hover .background {
        background-color: var(--_hovered-container-color);
    }
    .container.togglable.selected:not(.disabled):hover .background {
        background-color: var(--_hovered-container-color-toggle-selected);
    }
    .container.togglable.unselected:not(.disabled):hover .background {
        background-color: var(--_hovered-container-color-toggle-unselected);
    }

    .container:not(.disabled):focus-within .background {
        background-color: var(--_focused-container-color);
    }
    .container.togglable.selected:not(.disabled):focus-within .background {
        background-color: var(--_focused-container-color-toggle-selected);
    }
    .container.togglable.unselected:not(.disabled):focus-within .background {
        background-color: var(--_focused-container-color-toggle-unselected);
    }

    .container:not(.disabled):active .background {
        background-color: var(--_pressed-container-color);
    }
    .container.togglable.selected:not(.disabled):active .background {
        background-color: var(--_pressed-container-color-toggle-selected);
    }
    .container.togglable.unselected:not(.disabled):active .background {
        background-color: var(--_pressed-container-color-toggle-unselected);
    }

    .container.disabled .background {
        background-color: var(--_disabled-container-color);
        opacity: var(--_disabled-container-opacity);
    }
    .container.togglable.selected.disabled .background {
        background-color: var(--_disabled-container-color-toggle-selected);
    }
    .container.togglable.unselected.disabled .background {
        background-color: var(--_disabled-container-color-toggle-unselected);
    }

    :is(.container .label, .label *) {
        text-overflow: inherit;
    }

    @media (forced-colors: active) {
        .background {
            border: 1px solid CanvasText;
        }

        :host:is([disabled], .disabled) {
            --_disabled-icon-color: GrayText;
            --_disabled-icon-opacity: 1;
            --_disabled-container-opacity: 1;
            --_disabled-label-color: GrayText;
            --_disabled-label-opacity: 1;
        }
    }

    .touch-target {
        position: absolute;
        top: 50%;
        left: 50%;
        height: 100%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

    [touch-target='wrapper'] {
        margin: max(0px, (48px - var(--_container-height)) / 2) 0;
    }

    [touch-target='none'] .touch-target {
        display: none;
    }

`,D=e`
    .container :is(::slotted([slot="icon"]), .icon) {
        display: inline-flex;
        position: relative;
        writing-mode: horizontal-tb;
        fill: currentColor;
        flex-shrink: 0;
    }

    .container:not(.has-icon) .icon {
        display: none;
    }

    .container:not(.disabled) :is(::slotted([slot="icon"]), .icon) {
        color: var(--_icon-color);
    }
    .container:not(.disabled).togglable.selected :is(::slotted([slot="icon"]), .icon) {
        color: var(--_icon-color-toggle-selected);
    }
    .container:not(.disabled).togglable.unselected :is(::slotted([slot="icon"]), .icon) {
        color: var(--_icon-color-toggle-unselected);
    }

    .container:not(.disabled):hover :is(::slotted([slot="icon"]), .icon) {
        color: var(--_hovered-icon-color);
    }
    .container:not(.disabled).togglable.selected:hover :is(::slotted([slot="icon"]), .icon) {
        color: var(--_hovered-icon-color-toggle-selected);
    }
    .container:not(.disabled).togglable.unselected:hover :is(::slotted([slot="icon"]), .icon) {
        color: var(--_hovered-icon-color-toggle-unselected);
    }

    .container:not(.disabled):focus-within :is(::slotted([slot="icon"]), .icon) {
        color: var(--_focused-icon-color);
    }
    .container:not(.disabled).togglable.selected:focus-within :is(::slotted([slot="icon"]), .icon) {
        color: var(--_focused-icon-color-toggle-selected);
    }
    .container:not(.disabled).togglable.unselected:focus-within :is(::slotted([slot="icon"]), .icon) {
        color: var(--_focused-icon-color-toggle-unselected);
    }

    .container:not(.disabled):active :is(::slotted([slot="icon"]), .icon) {
        color: var(--_pressed-icon-color);
    }
    .container:not(.disabled).togglable.selected:active :is(::slotted([slot="icon"]), .icon) {
        color: var(--_pressed-icon-color-toggle-selected);
    }
    .container:not(.disabled).togglable.unselected:active :is(::slotted([slot="icon"]), .icon) {
        color: var(--_pressed-icon-color-toggle-unselected);
    }

    .container.disabled :is(::slotted([slot="icon"]), .icon) {
        color: var(--_disabled-icon-color);
        opacity: var(--_disabled-icon-opacity);
    }
    .container.disabled.togglable.selected :is(::slotted([slot="icon"]), .icon) {
        color: var(--_disabled-icon-color-toggle-selected);
    }
    .container.disabled.togglable.unselected :is(::slotted([slot="icon"]), .icon) {
        color: var(--_disabled-icon-color-toggle-unselected);
    }

    /* Icon Size */
    .container.extra-small :is(::slotted([slot="icon"]), .icon) {
        font-size: var(--_extra-small-icon-size);
        inline-size: var(--_extra-small-icon-size);
        block-size: var(--_extra-small-icon-size);
    }
    .container.small :is(::slotted([slot="icon"]), .icon) {
        font-size: var(--_small-icon-size);
        inline-size: var(--_small-icon-size);
        block-size: var(--_small-icon-size);
    }
    .container.medium :is(::slotted([slot="icon"]), .icon) {
        font-size: var(--_medium-icon-size);
        inline-size: var(--_medium-icon-size);
        block-size: var(--_medium-icon-size);
    }
    .container.large :is(::slotted([slot="icon"]), .icon) {
        font-size: var(--_large-icon-size);
        inline-size: var(--_large-icon-size);
        block-size: var(--_large-icon-size);
    }
    .container.extra-large :is(::slotted([slot="icon"]), .icon) {
        font-size: var(--_extra-large-icon-size);
        inline-size: var(--_extra-large-icon-size);
        block-size: var(--_extra-large-icon-size);
    }

`,O=e`
    .container.extra-small .outline {
        border-width: var(--_extra-small-outline-width);
    }
    .container.small .outline {
        border-width: var(--_small-outline-width);
    }
    .container.medium .outline {
        border-width: var(--_medium-outline-width);
    }
    .container.large .outline {
        border-width: var(--_large-outline-width);
    }
    .container.extra-large .outline {
        border-width: var(--_extra-large-outline-width);
    }

    .outline {
        inset: 0;
        border-style: solid;
        position: absolute;
        box-sizing: border-box;
        border-color: var(--_outline-color);
        border-start-start-radius: inherit;
        border-start-end-radius: inherit;
        border-end-start-radius: inherit;
        border-end-end-radius: inherit;
        z-index: -1;
    }

    .container.togglable.selected .outline {
        border-color: var(--_outline-color-toggle-selected);
    }
    .container.togglable.unselected .outline {
        border-color: var(--_outline-color-toggle-unselected);
    }
    .container.disabled .outline {
        border-color: var(--_disabled-outline-color);
        opacity: var(--_disabled-outline-opacity);
    }
    .container.disabled.togglable.selected .outline {
        border-color: var(--_disabled-outline-color-toggle-selected);
    }
    .container.disabled.togglable.unselected .outline {
        border-color: var(--_disabled-outline-color-toggle-unselected);
    }

    .container:hover .outline {
        border-color: var(--_hovered-outline-color);
    }
    .container.togglable.selected:hover .outline {
        border-color: var(--_hovered-outline-color-toggle-selected);
    }
    .container.togglable.unselected:hover .outline {
        border-color: var(--_hovered-outline-color-toggle-unselected);
    }

    .container:focus-within .outline {
        border-color: var(--_focused-outline-color);
    }
    .container.togglable.selected:focus-within .outline {
        border-color: var(--_focused-outline-color-toggle-selected);
    }
    .container.togglable.unselected:focus-within .outline {
        border-color: var(--_focused-outline-color-toggle-unselected);
    }

    .container:active .outline {
        border-color: var(--_pressed-outline-color);
    }
    .container.togglable.selected:active .outline {
        border-color: var(--_pressed-outline-color-toggle-selected);
    }
    .container.togglable.unselected:active .outline {
        border-color: var(--_pressed-outline-color-toggle-unselected);
    }

    @media (forced-colors: active) {
        .container.disabled .background {
            border-color: GrayText;
        }
        .container.disabled .outline {
            opacity: 1;
        }
    }
`,k=e`
    :host:has(.container.elevated) {${f};}
    :host:has(.filled) {${m};}
    :host:has(.container.filled-tonal) {${g};}
    :host:has(.container.outlined) {${v};}
    :host:has(.container.text) {${b};}
`,A=[x(),S(),C(),w,T,E,D,O,k];export{A as buttonStyles};
//# sourceMappingURL=button.style.js.map