@sandlada/mdc
Version:
@sandlada/mdc is an open source component library that follows the Material Design 3 design specifications.
252 lines (236 loc) • 9.91 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{Duration as i}from"../../../node_modules/@sandlada/mdk/build/domain/duration.js";import{Easing as a}from"../../../node_modules/@sandlada/mdk/build/domain/easing.js";import"../../../node_modules/@sandlada/mdk/build/index.js";import{overrideComponentTokens as o}from"../../../utils/tokens/override-component-tokens.js";import{stringTokens as s}from"../../../utils/tokens/string-tokens.js";import"../../../utils/tokens/index.js";import{OutlinedSegmentedButtonDefinition as c}from"../../../component-definitions/segmented-button.definition.js";
/**
* @license
* Copyright 2026 Kai-Orion & Sandlada
* SPDX-License-Identifier: MIT
*/
const l=r(c,{expandShapes:!1,useBaseFallback:!0,prefix:`--mdc-segmented-button`}),u=t(n(l,!0).join(``)),d=29.7833385,f=t(i.Short1.ToCSSVariable()),p=t(i.Short3.ToCSSVariable()),m=t(a.Emphasized.ToCSSVariable()),h=[e`
.container mdc-ripple {
border-radius: inherit;
z-index: 0;
${s(o(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color-unselected)`,"enabled-focused-color":`var(--_focused-state-layer-color-unselected)`,"enabled-pressed-color":`var(--_pressed-state-layer-color-unselected)`,"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.selected mdc-ripple {
${s(o(`--mdc-ripple`,{"enabled-hovered-color":`var(--_hovered-state-layer-color-selected)`,"enabled-focused-color":`var(--_focused-state-layer-color-selected)`,"enabled-pressed-color":`var(--_pressed-state-layer-color-selected)`}))};
}
`,e`
.container mdc-focus-ring {
z-index: 1;
}
`,e`
.icon {
align-items: center;
display: inline-flex;
justify-content: center;
${s(o(`--mdc-icon`,{"enabled-size":`var(--_icon-size)`}))};
}
`,e`
:host {
display: inline-flex;
flex: 1;
min-inline-size: 0;
outline: none;
-webkit-tap-highlight-color: transparent;
}
.container {
${u};
align-items: center;
background: var(--_enabled-container-color-unselected);
border: none;
border-radius: inherit;
box-sizing: border-box;
color: inherit;
cursor: pointer;
display: flex;
/* Fill the segment host so adjacent buttons touch edge-to-edge and the
overlapping outlines read as a single group border. */
flex: 1;
font: inherit;
justify-content: center;
min-inline-size: 0;
outline: none;
padding-inline-end: var(--_spacing-trailing);
padding-inline-start: var(--_spacing-leading);
position: relative;
text-transform: inherit;
z-index: 0;
-webkit-tap-highlight-color: transparent;
}
.container.selected {
background: var(--_enabled-container-color-selected);
}
.container.disabled {
cursor: default;
pointer-events: none;
}
/* Label — label-large. */
.label {
font-family: var(--_label-font);
font-size: var(--_label-size);
font-weight: var(--_label-weight);
letter-spacing: var(--_label-tracking);
line-height: var(--_label-line-height);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.container.unselected:enabled .label { color: var(--_enabled-label-color-unselected); }
.container.unselected:enabled:hover .label { color: var(--_hovered-label-color-unselected); }
.container.unselected:enabled:focus-visible .label { color: var(--_focused-label-color-unselected); }
.container.unselected:enabled:active .label { color: var(--_pressed-label-color-unselected); }
.container.selected:enabled .label { color: var(--_enabled-label-color-selected); }
.container.selected:enabled:hover .label { color: var(--_hovered-label-color-selected); }
.container.selected:enabled:focus-visible .label { color: var(--_focused-label-color-selected); }
.container.selected:enabled:active .label { color: var(--_pressed-label-color-selected); }
.container.disabled .label {
color: var(--_disabled-label-color);
opacity: var(--_disabled-label-opacity);
}
/* Leading icon / checkmark */
.leading,
.graphic {
align-items: center;
display: inline-flex;
justify-content: flex-start;
}
.leading {
position: relative;
}
.graphic {
overflow: hidden;
position: relative;
transition: inline-size ${p} ${m};
}
.graphic,
.checkmark,
.icon,
.icon ::slotted([slot='icon']) {
block-size: var(--_icon-size);
font-size: var(--_icon-size);
inline-size: var(--_icon-size);
}
/* Reserve graphic space only when an icon accompanies a label, or when a
checkmark is shown. The 8px gutter is not yet an MD3 token
(b/198759625) — it is hardcoded here to match the reference. */
.graphic {
inline-size: 0;
}
.container.with-label.with-icon .graphic,
.container.selected.with-checkmark .graphic {
inline-size: calc(var(--_icon-size) + 8px);
}
/* Icon / checkmark visibility. A selected label segment swaps its icon for
the checkmark; an icon-only segment keeps its icon and shows the
checkmark beside it (see the .leading structure in the base class). */
.icon {
opacity: 1;
}
.container.selected.with-checkmark.with-label .icon {
opacity: 0;
}
.checkmark {
opacity: 1;
position: absolute;
}
.container.unselected .checkmark,
.container.without-checkmark .checkmark {
opacity: 0;
}
/* Icon colors */
.container.unselected:enabled .icon { color: var(--_enabled-icon-color-unselected); }
.container.unselected:enabled:hover .icon { color: var(--_hovered-icon-color-unselected); }
.container.unselected:enabled:focus-visible .icon { color: var(--_focused-icon-color-unselected); }
.container.unselected:enabled:active .icon { color: var(--_pressed-icon-color-unselected); }
.container.selected:enabled .icon { color: var(--_enabled-icon-color-selected); }
.container.selected.without-label:enabled .icon { color: var(--_enabled-with-icon-icon-color-selected); }
.container.selected:enabled:hover .icon { color: var(--_hovered-icon-color-selected); }
.container.selected:enabled:focus-visible .icon { color: var(--_focused-icon-color-selected); }
.container.selected:enabled:active .icon { color: var(--_pressed-icon-color-selected); }
.container.disabled .icon {
color: var(--_disabled-icon-color);
opacity: var(--_disabled-icon-opacity);
}
/* Checkmark */
.checkmark-path {
stroke: var(--_enabled-icon-color-selected);
stroke-dasharray: ${d};
stroke-width: 2px;
}
.container.selected:enabled:hover .checkmark-path { stroke: var(--_hovered-icon-color-selected); }
.container.selected:enabled:focus-visible .checkmark-path { stroke: var(--_focused-icon-color-selected); }
.container.selected:enabled:active .checkmark-path { stroke: var(--_pressed-icon-color-selected); }
.container.disabled .checkmark-path { stroke: var(--_disabled-icon-color); }
.container.selecting .checkmark-path {
stroke-dashoffset: ${d};
animation: checkmark-draw-in ${p} ${f} ${m} forwards;
}
.container.selecting.with-label .icon {
animation: simple-fade-out 75ms linear forwards;
}
.container.deselecting .checkmark {
animation: simple-fade-out ${f} linear forwards;
}
.container.deselecting.with-label .icon {
opacity: 0;
animation: simple-fade-in ${p} ${f} linear forwards;
}
@keyframes checkmark-draw-in {
from { stroke-dashoffset: ${d}; }
to { stroke-dashoffset: 0; }
}
@keyframes simple-fade-out {
from { opacity: 1; }
to { opacity: 0; }
}
@keyframes simple-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Touch target — extends the 40px hit area up to the 48px minimum. */
.touch-target {
height: 48px;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.graphic {
transition: none;
}
.container.selecting .checkmark-path,
.container.selecting .icon,
.container.deselecting .checkmark,
.container.deselecting .icon {
animation: none;
}
}
@media (forced-colors: active) {
.container.disabled {
--_disabled-label-opacity: 1;
--_disabled-icon-opacity: 1;
--_disabled-outline-opacity: 1;
}
}
`,e`
.outline {
border-color: var(--_enabled-outline-color);
border-radius: inherit;
border-style: solid;
border-width: var(--_outline-width);
inset: 0 -0.5px;
pointer-events: none;
position: absolute;
}
.container.disabled .outline {
border-color: var(--_disabled-outline-color);
opacity: var(--_disabled-outline-opacity);
}
@media (forced-colors: active) {
.outline {
border-color: CanvasText;
}
}
`];export{h as SegmentedButtonStyles};
//# sourceMappingURL=segmented-button.style.js.map