@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
196 lines (166 loc) • 9.04 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{ConnectedButtonGroupDefinition as i,StandardButtonGroupDefinition as a}from"../../../../../component-definitions/button-group.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const o=r(a,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-standard-button-group`}),s=t(n(o,!0).join(``)),c=r(i,{expandShapes:!0,useBaseFallback:!0,prefix:`--mdc-connected-button-group`}),l=t(n(c,!0).join(``)),u=[`extra-small`,`small`,`medium`,`large`,`extra-large`];function d(e,t,n){let r=`var(--_enabled-${e}-inner-shape-start-start)`,i=`var(--_enabled-${e}-inner-shape-start-end)`,a=`var(--_enabled-${e}-inner-shape-end-start)`,o=`var(--_enabled-${e}-inner-shape-end-end)`,s=`var(--_enabled-${e}-outer-shape-round)`,c=`var(--_enabled-${e}-outer-shape-square)`,l=s,u=s,d=s,f=s,p=c,m=c,h=c,g=c;return t===`start`?n===`horizontal`?(u=i,f=o,m=i,g=o):(d=a,f=o,h=a,g=o):t===`middle`?(l=r,u=i,d=a,f=o,p=r,m=i,h=a,g=o):t===`end`&&(n===`horizontal`?(l=r,d=a,p=r,h=a):(l=r,u=i,p=r,h=a)),`
--mdc-button-${e}-container-shape-round-start-start: ${l};
--mdc-button-${e}-container-shape-round-start-end: ${u};
--mdc-button-${e}-container-shape-round-end-start: ${d};
--mdc-button-${e}-container-shape-round-end-end: ${f};
--mdc-button-${e}-container-shape-round-toggle-selected-start-start: ${l};
--mdc-button-${e}-container-shape-round-toggle-selected-start-end: ${u};
--mdc-button-${e}-container-shape-round-toggle-selected-end-start: ${d};
--mdc-button-${e}-container-shape-round-toggle-selected-end-end: ${f};
--mdc-button-${e}-container-shape-square-start-start: ${p};
--mdc-button-${e}-container-shape-square-start-end: ${m};
--mdc-button-${e}-container-shape-square-end-start: ${h};
--mdc-button-${e}-container-shape-square-end-end: ${g};
--mdc-button-${e}-container-shape-square-toggle-selected-start-start: ${p};
--mdc-button-${e}-container-shape-square-toggle-selected-start-end: ${m};
--mdc-button-${e}-container-shape-square-toggle-selected-end-start: ${h};
--mdc-button-${e}-container-shape-square-toggle-selected-end-end: ${g};
--mdc-icon-button-${e}-container-shape-round-start-start: ${l};
--mdc-icon-button-${e}-container-shape-round-start-end: ${u};
--mdc-icon-button-${e}-container-shape-round-end-start: ${d};
--mdc-icon-button-${e}-container-shape-round-end-end: ${f};
--mdc-icon-button-${e}-container-shape-round-selected-start-start: ${l};
--mdc-icon-button-${e}-container-shape-round-selected-start-end: ${u};
--mdc-icon-button-${e}-container-shape-round-selected-end-start: ${d};
--mdc-icon-button-${e}-container-shape-round-selected-end-end: ${f};
--mdc-icon-button-${e}-container-shape-square-start-start: ${p};
--mdc-icon-button-${e}-container-shape-square-start-end: ${m};
--mdc-icon-button-${e}-container-shape-square-end-start: ${h};
--mdc-icon-button-${e}-container-shape-square-end-end: ${g};
--mdc-icon-button-${e}-container-shape-square-selected-start-start: ${p};
--mdc-icon-button-${e}-container-shape-square-selected-start-end: ${m};
--mdc-icon-button-${e}-container-shape-square-selected-end-start: ${h};
--mdc-icon-button-${e}-container-shape-square-selected-end-end: ${g};
`}function f(){let e=[];for(let t of u)e.push(`
.container.connected.horizontal.${t} ::slotted([data-group-position="single"]),
.container.connected.horizontal.${t} ::slotted(.single) {
${d(t,`single`,`horizontal`)}
}
.container.connected.horizontal.${t} ::slotted([data-group-position="start"]),
.container.connected.horizontal.${t} ::slotted(.start-side) {
${d(t,`start`,`horizontal`)}
}
.container.connected.horizontal.${t} ::slotted([data-group-position="middle"]),
.container.connected.horizontal.${t} ::slotted(.middle) {
${d(t,`middle`,`horizontal`)}
}
.container.connected.horizontal.${t} ::slotted([data-group-position="end"]),
.container.connected.horizontal.${t} ::slotted(.end-side) {
${d(t,`end`,`horizontal`)}
}
`),e.push(`
.container.connected.vertical.${t} ::slotted([data-group-position="single"]),
.container.connected.vertical.${t} ::slotted(.single) {
${d(t,`single`,`vertical`)}
}
.container.connected.vertical.${t} ::slotted([data-group-position="start"]),
.container.connected.vertical.${t} ::slotted(.start-side) {
${d(t,`start`,`vertical`)}
}
.container.connected.vertical.${t} ::slotted([data-group-position="middle"]),
.container.connected.vertical.${t} ::slotted(.middle) {
${d(t,`middle`,`vertical`)}
}
.container.connected.vertical.${t} ::slotted([data-group-position="end"]),
.container.connected.vertical.${t} ::slotted(.end-side) {
${d(t,`end`,`vertical`)}
}
`);return t(e.join(`
`))}const p=e`
:host {
${s}
${l}
display: inline-flex;
vertical-align: middle;
max-width: 100%;
}
:host([hidden]) {
display: none !important;
}
.container {
display: inline-flex;
flex-direction: row;
align-items: center;
position: relative;
box-sizing: border-box;
}
.container.vertical {
flex-direction: column;
}
/* ── Standard Variant Spacing (Accessible minimum touch target) ─ */
.container.standard {
gap: var(--_enabled-space-between);
}
.container.standard.extra-small {
gap: var(--_enabled-extra-small-space-between);
}
.container.standard.small {
gap: var(--_enabled-small-space-between);
}
.container.standard.medium {
gap: var(--_enabled-medium-space-between);
}
.container.standard.large {
gap: var(--_enabled-large-space-between);
}
.container.standard.extra-large {
gap: var(--_enabled-extra-large-space-between);
}
/* ── Connected Variant Spacing (2dp inner padding) ───────────── */
.container.connected {
gap: var(--_enabled-space-between);
}
.container.connected.extra-small {
gap: var(--_enabled-extra-small-space-between);
}
.container.connected.small {
gap: var(--_enabled-small-space-between);
}
.container.connected.medium {
gap: var(--_enabled-medium-space-between);
}
.container.connected.large {
gap: var(--_enabled-large-space-between);
}
.container.connected.extra-large {
gap: var(--_enabled-extra-large-space-between);
}
/* ── Minimum Widths for Touch Targets (48dp for XS & S) ──────── */
.container.connected.extra-small ::slotted(*) {
min-width: var(--_enabled-extra-small-min-width);
}
.container.connected.small ::slotted(*) {
min-width: var(--_enabled-small-min-width);
}
/* ── Slotted Button Transitions ─────────────────────────────── */
::slotted(*) {
transition:
border-radius 250ms cubic-bezier(0.2, 0, 0, 1),
flex-grow 250ms cubic-bezier(0.2, 0, 0, 1),
transform 200ms cubic-bezier(0.2, 0, 0, 1),
background-color 200ms ease,
color 200ms ease;
}
/* ── Expressive Width Expansion ──────────────────────────────── */
/*
The actual flex-grow morph is applied via inline style by
base-button-group.ts.applyExpandOnActiveMorph on press / selection
change. CSS rules here are a baseline that visually agrees with
inline-style overrides; the :has() pseudo-class cannot be used
with ::slotted() (silently dropped by Chromium).
*/
/* ── Connected Shape Distributions ───────────────────────────── */
${f()}
/* ── Disabled Container ──────────────────────────────────────── */
.container.disabled {
pointer-events: none;
opacity: 0.38;
}
`;export{p as buttonGroupStyles};
//# sourceMappingURL=button-group.style.js.map