@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
299 lines (289 loc) • 11.8 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{ElevatedSplitButtonDefinition as o,FilledSplitButtonDefinition as s,FilledTonalSplitButtonDefinition as c,OutlinedSplitButtonDefinition as l}from"../../../component-definitions/split-button.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const u=r(s,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-split-button`}),d=t(n(u,!0).join(``)),f=r(c,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-split-button`}),p=t(n(f,!0).join(``)),m=r(o,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-split-button`}),h=t(n(m,!0).join(``)),g=r(l,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-split-button`}),_=t(n(g,!0).join(``)),v=(e,n,r)=>t(`
border-start-start-radius: min(var(--_${e}-${n}-${r}-start-start), calc(var(--_${e}-container-height) / 2));
border-start-end-radius: min(var(--_${e}-${n}-${r}-start-end), calc(var(--_${e}-container-height) / 2));
border-end-start-radius: min(var(--_${e}-${n}-${r}-end-start), calc(var(--_${e}-container-height) / 2));
border-end-end-radius: min(var(--_${e}-${n}-${r}-end-end), calc(var(--_${e}-container-height) / 2));
`),y=(e,n,r=``)=>t(`
&.extra-small .${e}${r} {${v(`extra-small`,e,n)};}
&.small .${e}${r} {${v(`small`,e,n)};}
&.medium .${e}${r} {${v(`medium`,e,n)};}
&.large .${e}${r} {${v(`large`,e,n)};}
&.extra-large .${e}${r} {${v(`extra-large`,e,n)};}
`),b=()=>e`
.container {${y(`leading-button`,`container-shape`)};}
.container {${y(`trailing-button`,`container-shape`)};}
.container:not(.disable-morph) {${y(`leading-button`,`container-shape-pressed`,`:active`)};}
.container:not(.disable-morph) {${y(`trailing-button`,`container-shape-pressed`,`:active`)};}
.container {${y(`trailing-button`,`container-shape-expanded`,`.expanded`)};}
`,x=()=>e`
.container.extra-small { height: var(--_extra-small-container-height); gap: var(--_extra-small-between-space); }
.container.small { height: var(--_small-container-height); gap: var(--_small-between-space); }
.container.medium { height: var(--_medium-container-height); gap: var(--_medium-between-space); }
.container.large { height: var(--_large-container-height); gap: var(--_large-between-space); }
.container.extra-large { height: var(--_extra-large-container-height); gap: var(--_extra-large-between-space); }
`,S=()=>{let n=e=>t(`
.container.${e} .leading-button {
gap: var(--_${e}-between-icon-label-space);
min-inline-size: var(--_${e}-leading-button-min-width);
padding-inline-end: var(--_${e}-leading-button-inline-trailing-padding-space);
padding-inline-start: var(--_${e}-leading-button-inline-leading-padding-space);
}
.container.${e} .trailing-button {
gap: var(--_${e}-between-icon-label-space);
min-inline-size: var(--_${e}-trailing-button-min-width);
padding-inline-end: var(--_${e}-trailing-button-inline-trailing-padding-space);
padding-inline-start: var(--_${e}-trailing-button-inline-leading-padding-space);
}
`);return e`
${n(`extra-small`)}
${n(`small`)}
${n(`medium`)}
${n(`large`)}
${n(`extra-large`)}
`},C=()=>{let n=e=>t(`
.container.${e} :is(.leading-button, .trailing-button) .label {
font-family: var(--_${e}-label-font);
font-size: var(--_${e}-label-size);
font-weight: var(--_${e}-label-weight);
letter-spacing: var(--_${e}-label-tracking);
line-height: var(--_${e}-label-line-height);
}
`);return e`
${n(`extra-small`)}
${n(`small`)}
${n(`medium`)}
${n(`large`)}
${n(`extra-large`)}
`},w=()=>{let n=e=>t(`
.container.${e} .leading-button :is(::slotted([slot="icon"]), .icon) {
block-size: var(--_${e}-leading-icon-size);
font-size: var(--_${e}-leading-icon-size);
inline-size: var(--_${e}-leading-icon-size);
${a(i(`--mdc-icon`,{"enabled-size":`var(--_${e}-leading-icon-size)`}))}
}
`);return e`
${n(`extra-small`)}
${n(`small`)}
${n(`medium`)}
${n(`large`)}
${n(`extra-large`)}
`},T=()=>{let n=e=>t(`
.container.${e} .trailing-button :is(::slotted([slot="trailing-icon"]), .icon) {
block-size: var(--_${e}-trailing-icon-size);
font-size: var(--_${e}-trailing-icon-size);
inline-size: var(--_${e}-trailing-icon-size);
${a(i(`--mdc-icon`,{"enabled-size":`var(--_${e}-trailing-icon-size)`}))}
}
.container.${e} .trailing-button:not(.has-label):not(.expanded) .icon {
translate: var(--_${e}-trailing-icon-optical-offset) 0;
}
`);return e`
${n(`extra-small`)}
${n(`small`)}
${n(`medium`)}
${n(`large`)}
${n(`extra-large`)}
`},E=()=>{let n=e=>t(`
.container.${e} :is(.leading-button, .trailing-button) .outline {
border-width: var(--_${e}-outline-width);
}
`);return e`
${n(`extra-small`)}
${n(`small`)}
${n(`medium`)}
${n(`large`)}
${n(`extra-large`)}
`},D=()=>{let n=e=>t(`
.container.${e} .touch-target {
margin: max(0px, (48px - var(--_${e}-container-height)) / 2) 0;
}
`);return e`
${n(`extra-small`)}
${n(`small`)}
${n(`medium`)}
${n(`large`)}
${n(`extra-large`)}
`},O=()=>e`
.container.medium .trailing-button.expanded:not(.has-label) {
inline-size: var(--_medium-container-height);
padding-inline: 0;
}
.container.large .trailing-button.expanded:not(.has-label) {
inline-size: var(--_large-container-height);
padding-inline: 0;
}
.container.extra-large .trailing-button.expanded:not(.has-label) {
inline-size: var(--_extra-large-container-height);
padding-inline: 0;
}
.trailing-button.expanded .icon {
translate: 0;
}
`,k=e`
.leading-button mdc-ripple,
.trailing-button mdc-ripple {
border-radius: inherit;
z-index: 0;
${a(i(`--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)`}))};
}
`,A=e`
.leading-button mdc-elevation,
.trailing-button mdc-elevation {
transition-duration: 0ms;
${a(i(`--mdc-elevation`,{"enabled-level":`var(--_enabled-container-elevation)`,"enabled-shadow-color":`var(--_enabled-container-shadow-color)`}))};
}
.leading-button.disabled mdc-elevation,
.trailing-button.disabled mdc-elevation {
${a(i(`--mdc-elevation`,{"enabled-level":`var(--_disabled-container-elevation)`,"enabled-shadow-color":`var(--_disabled-container-shadow-color)`}))};
}
`,j=e`
.leading-button mdc-focus-ring,
.trailing-button mdc-focus-ring {
z-index: 1;
}
`,M=e`
:host {
display: inline-flex;
outline: none;
vertical-align: top;
-webkit-tap-highlight-color: transparent;
}
.container {
box-sizing: border-box;
display: flex;
position: relative;
z-index: 0;
-webkit-tap-highlight-color: transparent;
}
.leading-button,
.trailing-button {
all: unset;
align-items: center;
box-sizing: border-box;
cursor: pointer;
display: flex;
flex: 0 1 auto;
font: inherit;
justify-content: center;
outline: none;
position: relative;
text-overflow: ellipsis;
text-transform: inherit;
text-wrap: nowrap;
user-select: none;
white-space: nowrap;
z-index: 0;
-webkit-tap-highlight-color: transparent;
transition-property: border-radius, inline-size, translate;
transition-duration: 350ms;
transition-timing-function: cubic-bezier(0.42, 1.67, 0.21, 0.9);
}
.container.disabled,
.leading-button.disabled,
.trailing-button.disabled {
cursor: default;
}
.leading-button.disabled,
.trailing-button.disabled {
pointer-events: none;
}
/* Background — the shared container color of the two buttons. */
.background {
background-color: var(--_enabled-container-color);
border-radius: inherit;
inset: 0;
position: absolute;
z-index: -1;
}
.disabled .background {
background-color: var(--_disabled-container-color);
opacity: var(--_disabled-container-opacity);
}
/* Outline — painted by the outlined variant only. */
.outline {
border-color: var(--_enabled-outline-color);
border-radius: inherit;
border-style: solid;
box-sizing: border-box;
inset: 0;
pointer-events: none;
position: absolute;
z-index: -1;
}
.disabled .outline {
border-color: var(--_disabled-outline-color);
opacity: var(--_disabled-outline-opacity);
}
/* Label */
.label {
color: var(--_enabled-label-color);
overflow: hidden;
text-overflow: ellipsis;
}
.disabled .label {
color: var(--_disabled-label-color);
opacity: var(--_disabled-label-opacity);
}
:is(.leading-button, .trailing-button):not(.has-label) .label {
display: none;
}
/* Icon */
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
flex-shrink: 0;
position: relative;
writing-mode: horizontal-tb;
fill: currentColor;
}
:is(.leading-button, .trailing-button):not(.has-icon) .icon {
display: none;
}
.icon {
color: var(--_enabled-icon-color);
}
.disabled .icon {
color: var(--_disabled-icon-color);
opacity: var(--_disabled-icon-opacity);
}
/* Touch target */
.touch-target {
height: 100%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
.leading-button,
.trailing-button {
transition: none;
}
}
@media (forced-colors: active) {
.background {
border: 1px solid CanvasText;
}
.leading-button.disabled,
.trailing-button.disabled {
--_disabled-container-opacity: 1;
--_disabled-label-opacity: 1;
--_disabled-icon-opacity: 1;
--_disabled-outline-opacity: 1;
}
}
`,N=e`
:host:has(.container.filled) {${d};}
:host:has(.container.filled-tonal) {${p};}
:host:has(.container.elevated) {${h};}
:host:has(.container.outlined) {${_};}
`,P=[b(),x(),S(),C(),w(),T(),E(),D(),O(),k,A,j,M,N];export{P as SplitButtonStyles};
//# sourceMappingURL=split-button.style.js.map