@m3e/web 2.5.4 → 2.5.5

package/dist/segmented-button.js

@@ -151,7 +151,7 @@ let M3eButtonSegmentElement = M3eButtonSegmentElement_1 = class M3eButtonSegment
 _M3eButtonSegmentElement_clickHandler = new WeakMap();
 _M3eButtonSegmentElement_instances = new WeakSet();
 _M3eButtonSegmentElement_handleIconSlotChange = function _M3eButtonSegmentElement_handleIconSlotChange(e) {
-  setCustomState(this, "-with-icon", hasAssignedNodes(e.target));
+  setCustomState(this, "--with-icon", hasAssignedNodes(e.target));
 };
 _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleClick(e) {
   if (e.defaultPrevented) return;
@@ -174,7 +174,7 @@ _M3eButtonSegmentElement_handleClick = function _M3eButtonSegmentElement_handleC
   }
 };
 /** The styles of the element. */
-M3eButtonSegmentElement.styles = css`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:state(-hide-selection))) .wrapper, :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface}); } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`;
+M3eButtonSegmentElement.styles = css`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${unsafeCSS(`background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper, :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${DesignToken.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${DesignToken.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${DesignToken.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface}); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${DesignToken.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`;
 __decorate([query(".focus-ring")], M3eButtonSegmentElement.prototype, "_focusRing", void 0);
 __decorate([query(".state-layer")], M3eButtonSegmentElement.prototype, "_stateLayer", void 0);
 __decorate([query(".ripple")], M3eButtonSegmentElement.prototype, "_ripple", void 0);
@@ -306,7 +306,7 @@ let M3eSegmentedButtonElement = class M3eSegmentedButtonElement extends Labelled
       this.ariaDisabled = this.multi && this.disabled ? "true" : null;
     }
     if (changedProperties.has("hideSelectionIndicator")) {
-      this.segments.forEach(x => setCustomState(x, "-hide-selection", this.hideSelectionIndicator));
+      this.segments.forEach(x => setCustomState(x, "--hide-selection", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -318,10 +318,10 @@ _M3eSegmentedButtonElement_handleSlotChange = function _M3eSegmentedButtonElemen
   const {
     added
   } = this[selectionManager].setItems([...this.querySelectorAll("m3e-button-segment")]);
-  added.forEach(x => setCustomState(x, "-hide-selection", this.hideSelectionIndicator));
+  added.forEach(x => setCustomState(x, "--hide-selection", this.hideSelectionIndicator));
   this[selectionManager].items.forEach((segment, i) => {
-    setCustomState(segment, "-first", i == 0);
-    setCustomState(segment, "-last", i == this[selectionManager].items.length - 1);
+    setCustomState(segment, "--first", i == 0);
+    setCustomState(segment, "--last", i == this[selectionManager].items.length - 1);
   });
 };
 _M3eSegmentedButtonElement_handleKeyDown = function _M3eSegmentedButtonElement_handleKeyDown(e) {
@@ -336,7 +336,7 @@ _M3eSegmentedButtonElement_handleChange = function _M3eSegmentedButtonElement_ha
   }));
 };
 /** The styles of the element. */
-M3eSegmentedButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:state(-first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full}); } ::slotted(:state(-last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full}); } ::slotted(:not(:state(-first))) { --_segmented-button-left-border: none; }`;
+M3eSegmentedButtonElement.styles = css`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:is(:state(--first), :--first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full}); } ::slotted(:is(:state(--last), :--last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full}); } ::slotted(:not(:is(:state(--first), :--first))) { --_segmented-button-left-border: none; }`;
 __decorate([property({
   type: Boolean
 })], M3eSegmentedButtonElement.prototype, "multi", void 0);

package/dist/segmented-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n  Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      box-sizing: border-box;\r\n      border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n      border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n      border-style: solid;\r\n      border-radius: inherit;\r\n      border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n      padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n      column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host([checked]:not(:state(-hide-selection))) .wrapper,\r\n    :host(:state(-with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n    }\r\n    :host(:not(:disabled)[checked]) .base {\r\n      background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .label {\r\n      color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .icon {\r\n      color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .label {\r\n      color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .icon {\r\n      color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:state(-with-icon))) .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n      transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n    }\r\n    .check,\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not([checked])) .check,\r\n    :host(:state(-hide-selection)) .check,\r\n    :host(:state(-hide-selection):not(:state(-with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    :host([checked]) .icon {\r\n      margin-inline-start: 0;\r\n    }\r\n    :host([checked]:not(:state(-hide-selection))) ::slotted([slot=\"icon\"]) {\r\n      display: none !important;\r\n    }\r\n    :host(:disabled) .base {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n      border-inline-end-color: var(\r\n        --_segmented-button-disabled-outline-color,\r\n        color-mix(\r\n          in srgb,\r\n          var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n            var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n          transparent\r\n        )\r\n      );\r\n    }\r\n    :host(:disabled) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .label,\r\n      :host(:not([selected]):not(:disabled)) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .base {\r\n        background-color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .label,\r\n      :host(:not(:disabled)[checked]) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n      :host {\r\n        --m3e-segmented-button-outline-color: ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * A string representing the value of the segment.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton) {\r\n      this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n    }\r\n\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\")) {\r\n      segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\")) {\r\n      if (this.disabled) {\r\n        if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (!this.nextElementSibling.disabled) {\r\n            this.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      } else {\r\n        this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n        if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (this.previousElementSibling.disabled) {\r\n            this.previousElementSibling.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n      const checked = this.checked;\r\n      this.checked = !this.checked;\r\n\r\n      if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n        this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      } else {\r\n        this.checked = checked;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-segment\": M3eButtonSegmentElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Labelled,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires input - Emitted when the checked state of a segment changes.\r\n * @fires change - Emitted when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n    }\r\n    ::slotted(:state(-first)) {\r\n      border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n      border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:state(-last)) {\r\n      border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n      border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:not(:state(-first))) {\r\n      --_segmented-button-left-border: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The segments of the button. */\r\n  get segments(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected segment(s) of the button. */\r\n  get selected(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the button. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this[selectionManager].multi = this.multi;\r\n    this[selectionManager].disableRovingTabIndex(this.multi);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.segments.forEach((x) => setCustomState(x, \"-hide-selection\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-button-segment\")]);\r\n    added.forEach((x) => setCustomState(x, \"-hide-selection\", this.hideSelectionIndicator));\r\n    this[selectionManager].items.forEach((segment, i) => {\r\n      setCustomState(segment, \"-first\", i == 0);\r\n      setCustomState(segment, \"-last\", i == this[selectionManager].items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","e","__classPrivateFieldGet","call","value","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","setProperty","DesignToken","color","outline","removeProperty","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","get","undefined","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":";;;;;;;;;;;;;;AAqBA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEG;AAEI,IAAMA,uBAAuB,GAAAC,yBAAA,GAA7B,MAAMD,uBAAwB,SAAQE,KAAK,CAChDC,OAAO,CAACC,OAAO,CAACC,QAAQ,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAC7E,CAAA;AAFMC,EAAAA,WAAAA,GAAA;;;AAsML;IAAyBC,qCAAA,CAAAC,GAAA,CAAA,IAAA,EAAiBC,CAAQ,IAAKC,sBAAA,CAAA,IAAI,gFAAa,CAAAC,IAAA,CAAjB,IAAI,EAAcF,CAAC,CAAC,CAAA;AAE3E;;;AAGG;IACS,IAAA,CAAAG,KAAK,GAAG,IAAI;AAwG1B,EAAA;AAtGE;AACSC,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;AACzB,IAAA,IAAI,CAACC,gBAAgB,CAAC,OAAO,EAAEJ,sBAAA,CAAA,IAAI,EAAAH,qCAAA,EAAA,GAAA,CAAc,CAAC;AACpD,EAAA;AAEA;AACSQ,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;AAC5B,IAAA,IAAI,CAACC,mBAAmB,CAAC,OAAO,EAAEN,sBAAA,CAAA,IAAI,EAAAH,qCAAA,EAAA,GAAA,CAAc,CAAC;AACvD,EAAA;AAEA;EACmBU,YAAYA,CAACC,kBAAwC,EAAA;AACtE,IAAA,KAAK,CAACD,YAAY,CAACC,kBAAkB,CAAC;IACtC,CAAC,IAAI,CAACC,UAAU,EAAE,IAAI,CAACC,WAAW,EAAE,IAAI,CAACC,OAAO,CAAC,CAACC,OAAO,CAAEC,CAAC,IAAKA,CAAC,EAAEC,MAAM,CAAC,IAAI,CAAC,CAAC;AACnF,EAAA;AAEA;EACmBC,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,MAAMC,eAAe,GAAG,IAAI,CAACC,OAAO,CAAC,sBAAsB,CAAC;AAC5D,IAAA,IAAID,eAAe,EAAE;MACnB,IAAI,CAACE,IAAI,GAAGF,eAAe,CAACG,KAAK,GAAG,QAAQ,GAAG,OAAO;AACxD,IAAA;AAEA,IAAA,KAAK,CAACL,MAAM,CAACC,iBAAiB,CAAC;AAE/B,IAAA,IAAIA,iBAAiB,CAACK,GAAG,CAAC,SAAS,CAAC,EAAE;AACpCJ,MAAAA,eAAe,GAAGK,gBAAgB,CAAC,CAACC,qBAAqB,CAAC,IAAI,CAAC;AACjE,IAAA;AAEA,IAAA,IAAIP,iBAAiB,CAACK,GAAG,CAAC,UAAU,CAAC,EAAE;MACrC,IAAI,IAAI,CAACG,QAAQ,EAAE;AACjB,QAAA,IAAI,IAAI,CAACC,kBAAkB,YAAYrC,yBAAuB,EAAE;AAC9D,UAAA,IAAI,CAAC,IAAI,CAACqC,kBAAkB,CAACD,QAAQ,EAAE;AACrC,YAAA,IAAI,CAACE,KAAK,CAACC,WAAW,CACpB,4CAA4C,EAC5C,CAAA,0CAAA,EAA6CC,WAAW,CAACC,KAAK,CAACC,OAAO,GAAG,CAC1E;AACH,UAAA,CAAC,MAAM;AACL,YAAA,IAAI,CAACJ,KAAK,CAACK,cAAc,CAAC,4CAA4C,CAAC;AACzE,UAAA;AACF,QAAA;AACF,MAAA,CAAC,MAAM;AACL,QAAA,IAAI,CAACL,KAAK,CAACK,cAAc,CAAC,4CAA4C,CAAC;AACvE,QAAA,IAAI,IAAI,CAACC,sBAAsB,YAAY5C,yBAAuB,EAAE;AAClE,UAAA,IAAI,IAAI,CAAC4C,sBAAsB,CAACR,QAAQ,EAAE;AACxC,YAAA,IAAI,CAACQ,sBAAsB,CAACN,KAAK,CAACC,WAAW,CAC3C,4CAA4C,EAC5C,CAAA,0CAAA,EAA6CC,WAAW,CAACC,KAAK,CAACC,OAAO,GAAG,CAC1E;AACH,UAAA,CAAC,MAAM;YACL,IAAI,CAACE,sBAAsB,CAACN,KAAK,CAACK,cAAc,CAAC,4CAA4C,CAAC;AAChG,UAAA;AACF,QAAA;AACF,MAAA;AACF,IAAA;AACF,EAAA;AAEA;AACSE,EAAAA,MAAMA,GAAA;IACb,OAAOC,IAAI,CAAA,kEAAA,EACyC,IAAI,CAACV,QAAQ,qEACf,IAAI,CAACA,QAAQ,CAAA,yDAAA,EACrB,IAAI,CAACA,QAAQ,CAAA,2RAAA,EAOhBxB,sBAAA,CAAA,IAAI,EAAAmC,kCAAA,EAAA,GAAA,EAAAC,6CAAA,CAAsB,CAAA,iEAAA,CAM1D;AACT,EAAA;;;;uGAGsBrC,CAAQ,EAAA;EAC5BsC,cAAc,CAAC,IAAI,EAAE,YAAY,EAAEC,gBAAgB,CAAkBvC,CAAC,CAACwC,MAAM,CAAC,CAAC;AACjF,CAAC;qFAGYxC,CAAQ,EAAA;EACnB,IAAIA,CAAC,CAACyC,gBAAgB,EAAE;AAExB,EAAA,MAAMvB,eAAe,GAAG,IAAI,CAACC,OAAO,CAAC,sBAAsB,CAAC;EAC5D,IAAID,eAAe,KAAKA,eAAe,CAACG,KAAK,IAAI,CAAC,IAAI,CAACqB,OAAO,CAAC,EAAE;AAC/D,IAAA,MAAMA,OAAO,GAAG,IAAI,CAACA,OAAO;AAC5B,IAAA,IAAI,CAACA,OAAO,GAAG,CAAC,IAAI,CAACA,OAAO;IAE5B,IAAI,IAAI,CAACC,aAAa,CAAC,IAAIC,KAAK,CAAC,OAAO,EAAE;AAAEC,MAAAA,OAAO,EAAE,IAAI;AAAEC,MAAAA,QAAQ,EAAE,IAAI;AAAEC,MAAAA,UAAU,EAAE;KAAM,CAAC,CAAC,EAAE;AAC/F,MAAA,IAAI,CAAC5B,OAAO,CAAC,sBAAsB,CAAC,GAAGI,gBAAgB,CAAC,CAACC,qBAAqB,CAAC,IAAI,CAAC;AACpF,MAAA,IAAI,CAACmB,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,QAAAA,OAAO,EAAE;AAAI,OAAE,CAAC,CAAC;AAC5D,IAAA,CAAC,MAAM;MACL,IAAI,CAACH,OAAO,GAAGA,OAAO;AACxB,IAAA;AACF,EAAA;AACF,CAAC;AAhTD;AACgBtD,uBAAA,CAAA4D,MAAM,GAAmBC,GAAG,CAAA,8UAAA,EAgBoBpB,WAAW,CAACqB,OAAO,CAACC,IAAI,CAAC,EAAE,CAAC,CAAA,qJAAA,EAG9BtB,WAAW,CAACC,KAAK,CAACC,OAAO,CAAA,oIAAA,EAIrEqB,SAAS,CACrB,CAAA,iBAAA,EAAoBvB,WAAW,CAACwB,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAA,CAAA,EAAI1B,WAAW,CAACwB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,CAAE,CAC/F,2ZAkBkD5B,WAAW,CAAC6B,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACC,QAAQ,CAAA,wDAAA,EAC/ChC,WAAW,CAAC6B,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACE,UAAU,CAAA,wDAAA,EACrDjC,WAAW,CAAC6B,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACG,UAAU,CAAA,wDAAA,EACrDlC,WAAW,CAAC6B,SAAS,CAACD,QAAQ,CAACE,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAA,qHAAA,EAM5FZ,SAAS,CAAC,SAASvB,WAAW,CAACwB,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAA,CAAA,EAAI1B,WAAW,CAACwB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,CAAE,CAAC,CAAA,qFAAA,EAM9FL,SAAS,CAAC,CAAA,MAAA,EAASvB,WAAW,CAACwB,MAAM,CAACC,QAAQ,CAACC,MAAM,IAAI1B,WAAW,CAACwB,MAAM,CAACG,MAAM,CAACC,QAAQ,CAAA,CAAE,CAAC,CAAA,kVAAA,EAUnC5B,WAAW,CAACC,KAAK,CAACmC,kBAAkB,CAAA,8FAAA,EAGzGpC,WAAW,CAACC,KAAK,CAACoC,oBAAoB,kGAItCrC,WAAW,CAACC,KAAK,CAACoC,oBAAoB,CAAA,0EAAA,EAE8BrC,WAAW,CAACC,KAAK,CAACoC,oBAAoB,CAAA,2GAAA,EAG/CrC,WAAW,CAACC,KAAK,CAACoC,oBAAoB,CAAA,oGAAA,EAG5CrC,WAAW,CAACC,KAAK,CAACoC,oBAAoB,CAAA,gJAAA,EAK3FrC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,iGAAA,EAI3BtC,WAAW,CAACC,KAAK,CAACqC,SAAS,+EAE2CtC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,mHAAA,EAGpCtC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,4GAAA,EAGjCtC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,2JAAA,EAIpDtC,WAAW,CAACwB,MAAM,CAACe,MAAM,CAACC,WAAW,CAAA,whBAAA,EAqBhBxC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,6NAAA,EAQzBtC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,2LAAA,EAS1BtC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,qLAAA,EAQjCtC,WAAW,CAACC,KAAK,CAACqC,SAAS,CAAA,8qBAAA,CAtJ7D;AA+LiCG,UAAA,CAAA,CAAtCC,KAAK,CAAC,aAAa,CAAC,CAAmD,EAAAnF,uBAAA,CAAAoF,SAAA,EAAA,YAAA,EAAA,MAAA,CAAA;AAChCF,UAAA,CAAA,CAAvCC,KAAK,CAAC,cAAc,CAAC,CAAqD,EAAAnF,uBAAA,CAAAoF,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AACxCF,UAAA,CAAA,CAAlCC,KAAK,CAAC,SAAS,CAAC,CAA6C,EAAAnF,uBAAA,CAAAoF,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAOlEF,UAAA,CAAA,CAAXG,QAAQ,EAAE,CAAc,EAAArF,uBAAA,CAAAoF,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AA5MdpF,uBAAuB,GAAAC,yBAAA,GAAAiF,UAAA,CAAA,CADnCI,aAAa,CAAC,oBAAoB,CAAC,CACvB,EAAAtF,uBAAuB,CAoTnC;;;AC7XD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AAEI,IAAMuF,yBAAyB,GAA/B,MAAMA,yBAA0B,SAAQC,QAAQ,CACrDtF,KAAK,CAACC,OAAO,CAACsF,cAAc,CAACpF,QAAQ,CAACC,eAAe,CAACC,IAAI,CAACC,UAAU,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC1F,CAAA;AAFMC,EAAAA,WAAAA,GAAA;;;AAuBL;AAAgBiF,IAAAA,qDAAA,CAAA/E,GAAA,CAAA,IAAA,EAAA,MAAA,CAAA;AAEhB;AACS,IAAA,IAAA,CAAAgF,EAAA,CAAkB,GAAG,IAAIC,gBAAgB,EAA2B,CAC1EC,QAAQ,EAAE,CACVC,kBAAkB,CAACC,iBAAiB,CAACC,OAAO,CAAC,CAC7CC,kBAAkB,CAAC,MAAM,IAAI,CAAC9D,gBAAgB,CAAC,CAAC+D,UAAU,EAAEC,KAAK,EAAE,CAAC;AAEvE;;;AAGG;IAC0B,IAAA,CAAAlE,KAAK,GAAG,KAAK;AAE1C;;;AAGG;IACiE,IAAA,CAAAmE,sBAAsB,GAAG,KAAK;AA8GpG,EAAA;AA5GE;EACA,IAAIC,QAAQA,GAAA;AACV,IAAA,OAAO,IAAI,CAAClE,gBAAgB,CAAC,EAAEmE,KAAK,IAAI,EAAE;AAC5C,EAAA;AAEA;EACA,IAAIC,QAAQA,GAAA;AACV,IAAA,OAAO,IAAI,CAACpE,gBAAgB,CAAC,EAAEqE,aAAa,IAAI,EAAE;AACpD,EAAA;AAEA;EACA,IAAIzF,KAAKA,GAAA;IACP,MAAM0F,MAAM,GAAG,IAAI,CAACF,QAAQ,CAACG,MAAM,CAAEhF,CAAC,IAAK,CAACA,CAAC,CAACW,QAAQ,CAAC,CAACsE,GAAG,CAAEjF,CAAC,IAAKA,CAAC,CAACX,KAAK,CAAC;IAC3E,QAAQ0F,MAAM,CAACG,MAAM;AACnB,MAAA,KAAK,CAAC;AACJ,QAAA,OAAO,IAAI;AACb,MAAA,KAAK,CAAC;QACJ,OAAOH,MAAM,CAAC,CAAC,CAAC;AAClB,MAAA;AACE,QAAA,OAAOA,MAAM;AACjB;AACF,EAAA;AAEA;AACA,EAAA,MAAaf,qDAAA,GAAA,IAAAmB,OAAA,EAAA,EAAAC,oCAAA,GAAA,IAAAC,OAAA,EAAA,EAAApB,EAAA,GAzCHxD,gBAAgB,EAyCZ6E,SAAS,EAAA,GAAC;AACtB,IAAA,MAAMP,MAAM,GAAG,IAAI,CAAC1F,KAAK;AACzB,IAAA,IAAIkG,KAAK,CAACC,OAAO,CAACT,MAAM,CAAC,EAAE;AACzB,MAAA,MAAMU,IAAI,GAAG,IAAIC,QAAQ,EAAE;AAC3B,MAAA,KAAK,MAAMrG,KAAK,IAAI0F,MAAM,EAAE;QAC1BU,IAAI,CAACE,MAAM,CAAC,IAAI,CAACC,IAAI,EAAEvG,KAAK,CAAC;AAC/B,MAAA;AACA,MAAA,OAAOoG,IAAI;AACb,IAAA;AACA,IAAA,OAAsBV,MAAM;AAC9B,EAAA;AAEA;AACSzF,EAAAA,iBAAiBA,GAAA;IACxB,KAAK,CAACA,iBAAiB,EAAE;IAEzB,IAAI,CAACmB,gBAAgB,CAAC,CAACF,KAAK,GAAG,IAAI,CAACA,KAAK;IACzC,IAAI,CAACE,gBAAgB,CAAC,CAACoF,qBAAqB,CAAC,IAAI,CAACtF,KAAK,CAAC;IACxDuF,sBAAA,CAAA,IAAI,yDAA+BzB,iBAAiB,CAAC0B,OAAO,CAC1D,MAAO,IAAI,CAACtF,gBAAgB,CAAC,CAACuF,cAAc,GAAG3B,iBAAiB,CAACC,OAAQ,CAC1E,EAAA,GAAA,CAAA;AACH,EAAA;AAEA;AACS9E,EAAAA,oBAAoBA,GAAA;IAC3B,KAAK,CAACA,oBAAoB,EAAE;IAC5BL,sBAAA,CAAA,IAAI,EAAA6E,qDAAA,EAAA,GAAA,CAA4B,EAAE5E,IAAA,CAAlC,IAAI,CAAgC;AACtC,EAAA;AAEA;EACmBc,MAAMA,CAACC,iBAAuC,EAAA;AAC/D,IAAA,KAAK,CAACD,MAAM,CAACC,iBAAiB,CAAC;IAE/B,IAAIA,iBAAiB,CAACK,GAAG,CAAC,UAAU,CAAC,KAAKL,iBAAiB,CAAC8F,GAAG,CAAC,UAAU,CAAC,KAAKC,SAAS,IAAI,IAAI,CAACvF,QAAQ,CAAC,EAAE;MAC3G,IAAI,CAACF,gBAAgB,CAAC,CAACE,QAAQ,GAAG,IAAI,CAACA,QAAQ;AACjD,IAAA;AAEA,IAAA,IAAIR,iBAAiB,CAACK,GAAG,CAAC,OAAO,CAAC,EAAE;MAClC,IAAI,CAACF,IAAI,GAAG,IAAI,CAACC,KAAK,GAAG,OAAO,GAAG,YAAY;MAC/C,IAAI,CAACE,gBAAgB,CAAC,CAACF,KAAK,GAAG,IAAI,CAACA,KAAK;MACzC,IAAI,CAACE,gBAAgB,CAAC,CAACoF,qBAAqB,CAAC,IAAI,CAACtF,KAAK,CAAC;AAC1D,IAAA;AAEA,IAAA,IAAIJ,iBAAiB,CAACK,GAAG,CAAC,OAAO,CAAC,IAAIL,iBAAiB,CAACK,GAAG,CAAC,UAAU,CAAC,EAAE;AACvE;AACA,MAAA,IAAI,CAAC2F,YAAY,GAAG,IAAI,CAAC5F,KAAK,IAAI,IAAI,CAACI,QAAQ,GAAG,MAAM,GAAG,IAAI;AACjE,IAAA;AAEA,IAAA,IAAIR,iBAAiB,CAACK,GAAG,CAAC,wBAAwB,CAAC,EAAE;AACnD,MAAA,IAAI,CAACmE,QAAQ,CAAC5E,OAAO,CAAEC,CAAC,IAAKwB,cAAc,CAACxB,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC0E,sBAAsB,CAAC,CAAC;AACjG,IAAA;AACF,EAAA;AAEA;AACmBtD,EAAAA,MAAMA,GAAA;AACvB,IAAA,OAAOC,IAAI,CAAA,mBAAA,EACMlC,sBAAA,CAAA,IAAI,EAAAiG,oCAAA,EAAA,GAAA,EAAAgB,2CAAA,CAAkB,CAAA,YAAA,EACzBjH,sBAAA,CAAA,IAAI,EAAAiG,oCAAA,EAAA,GAAA,EAAAiB,wCAAA,CAAe,cACpBlH,sBAAA,CAAA,IAAI,EAAAiG,oCAAA,EAAA,GAAA,EAAAkB,uCAAA,CAAc,CAAA,SAAA,CACtB;AACX,EAAA;;;EAIE,MAAM;AAAEC,IAAAA;AAAK,GAAE,GAAG,IAAI,CAAC9F,gBAAgB,CAAC,CAAC+F,QAAQ,CAAC,CAAC,GAAG,IAAI,CAACC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;AACnGF,EAAAA,KAAK,CAACxG,OAAO,CAAEC,CAAC,IAAKwB,cAAc,CAACxB,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC0E,sBAAsB,CAAC,CAAC;AACvF,EAAA,IAAI,CAACjE,gBAAgB,CAAC,CAACmE,KAAK,CAAC7E,OAAO,CAAC,CAAC2G,OAAO,EAAEC,CAAC,KAAI;IAClDnF,cAAc,CAACkF,OAAO,EAAE,QAAQ,EAAEC,CAAC,IAAI,CAAC,CAAC;AACzCnF,IAAAA,cAAc,CAACkF,OAAO,EAAE,OAAO,EAAEC,CAAC,IAAI,IAAI,CAAClG,gBAAgB,CAAC,CAACmE,KAAK,CAACM,MAAM,GAAG,CAAC,CAAC;AAChF,EAAA,CAAC,CAAC;AACJ,CAAC;6FAGchG,CAAgB,EAAA;AAC7B,EAAA,IAAI,CAAC,IAAI,CAACqB,KAAK,EAAE;AACf,IAAA,IAAI,CAACE,gBAAgB,CAAC,CAACmG,SAAS,CAAC1H,CAAC,CAAC;AACrC,EAAA;AACF,CAAC;2FAGaA,CAAQ,EAAA;EACpBA,CAAC,CAAC2H,eAAe,EAAE;AACnB,EAAA,IAAI,CAAChF,aAAa,CAAC,IAAIC,KAAK,CAAC,QAAQ,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAI,GAAE,CAAC,CAAC;AAC5D,CAAC;AAnJD;AACgB8B,yBAAA,CAAA3B,MAAM,GAAmBC,GAAG,CAAA,4KAAA,EAO6BpB,WAAW,CAAC+F,KAAK,CAACC,MAAM,CAACC,IAAI,CAAA,oEAAA,EAC/BjG,WAAW,CAAC+F,KAAK,CAACC,MAAM,CAACC,IAAI,kGAG/BjG,WAAW,CAAC+F,KAAK,CAACC,MAAM,CAACC,IAAI,CAAA,gEAAA,EAC/BjG,WAAW,CAAC+F,KAAK,CAACC,MAAM,CAACC,IAAI,CAAA,+EAAA,CAZ1E;AA+BOxD,UAAA,CAAA,CAA5BG,QAAQ,CAAC;AAAEsD,EAAAA,IAAI,EAAEC;CAAS,CAAC,CAAe,EAAArD,yBAAA,CAAAH,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMyBF,UAAA,CAAA,CAAnEG,QAAQ,CAAC;AAAEwD,EAAAA,SAAS,EAAE,0BAA0B;AAAEF,EAAAA,IAAI,EAAEC;AAAO,CAAE,CAAC,CAAgC,EAAArD,yBAAA,CAAAH,SAAA,EAAA,wBAAA,EAAA,MAAA,CAAA;AAzCxFG,yBAAyB,GAAAL,UAAA,CAAA,CADrCI,aAAa,CAAC,sBAAsB,CAAC,CACzB,EAAAC,yBAAyB,CAuJrC;;;;"}
+{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n  Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      box-sizing: border-box;\r\n      border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n      border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n      border-style: solid;\r\n      border-radius: inherit;\r\n      border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n      padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n      column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper,\r\n    :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n    }\r\n    :host(:not(:disabled)[checked]) .base {\r\n      background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .label {\r\n      color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .icon {\r\n      color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .label {\r\n      color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .icon {\r\n      color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n      transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n    }\r\n    .check,\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not([checked])) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    :host([checked]) .icon {\r\n      margin-inline-start: 0;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n      display: none !important;\r\n    }\r\n    :host(:disabled) .base {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n      border-inline-end-color: var(\r\n        --_segmented-button-disabled-outline-color,\r\n        color-mix(\r\n          in srgb,\r\n          var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n            var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n          transparent\r\n        )\r\n      );\r\n    }\r\n    :host(:disabled) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .label,\r\n      :host(:not([selected]):not(:disabled)) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .base {\r\n        background-color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .label,\r\n      :host(:not(:disabled)[checked]) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n      :host {\r\n        --m3e-segmented-button-outline-color: ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * A string representing the value of the segment.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton) {\r\n      this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n    }\r\n\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\")) {\r\n      segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\")) {\r\n      if (this.disabled) {\r\n        if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (!this.nextElementSibling.disabled) {\r\n            this.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      } else {\r\n        this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n        if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (this.previousElementSibling.disabled) {\r\n            this.previousElementSibling.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n      const checked = this.checked;\r\n      this.checked = !this.checked;\r\n\r\n      if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n        this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      } else {\r\n        this.checked = checked;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-segment\": M3eButtonSegmentElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Labelled,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires input - Emitted when the checked state of a segment changes.\r\n * @fires change - Emitted when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n    }\r\n    ::slotted(:is(:state(--first), :--first)) {\r\n      border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n      border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:is(:state(--last), :--last)) {\r\n      border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n      border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:not(:is(:state(--first), :--first))) {\r\n      --_segmented-button-left-border: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The segments of the button. */\r\n  get segments(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected segment(s) of the button. */\r\n  get selected(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the button. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this[selectionManager].multi = this.multi;\r\n    this[selectionManager].disableRovingTabIndex(this.multi);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.segments.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-button-segment\")]);\r\n    added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    this[selectionManager].items.forEach((segment, i) => {\r\n      setCustomState(segment, \"--first\", i == 0);\r\n      setCustomState(segment, \"--last\", i == this[selectionManager].items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","e","__classPrivateFieldGet","call","value","connectedCallback","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","setProperty","DesignToken","color","outline","removeProperty","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","get","undefined","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}

package/dist/segmented-button.min.js

@@ -3,5 +3,5 @@
  * Copyright (c) 2025–2026 matraic
  * See LICENSE file in the project root for full license text.
  */
-import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as o}from"tslib";import{LitElement as n,html as i,unsafeCSS as s,css as r}from"lit";import{query as l,property as a}from"lit/decorators.js";import{Dirty as d,Touched as c,Checked as h,Disabled as m,AttachInternals as u,Role as b,DesignToken as g,setCustomState as p,hasAssignedNodes as v,customElement as f,Labelled as y,FormAssociated as k,formValue as $}from"@m3e/web/core";import{selectionManager as w,SelectionManager as x}from"@m3e/web/core/a11y";import{M3eDirectionality as S}from"@m3e/web/core/bidi";var E,C,_,I,B;let P=B=class extends(d(c(h(m(u(b(n,"radio"),!0)))))){constructor(){super(...arguments),E.add(this),C.set(this,t=>e(this,E,"m",I).call(this,t)),this.value="on"}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,C,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,C,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){const t=this.closest("m3e-segmented-button");t&&(this.role=t.multi?"button":"radio"),super.update(e),e.has("checked")&&t?.[w].notifySelectionChange(this),e.has("disabled")&&(this.disabled?this.nextElementSibling instanceof B&&(this.nextElementSibling.disabled?this.style.removeProperty("--_segmented-button-disabled-outline-color"):this.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`)):(this.style.removeProperty("--_segmented-button-disabled-outline-color"),this.previousElementSibling instanceof B&&(this.previousElementSibling.disabled?this.previousElementSibling.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`):this.previousElementSibling.style.removeProperty("--_segmented-button-disabled-outline-color"))))}render(){return i`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${e(this,E,"m",_)}"></slot></div><div class="label"><slot></slot></div></div></div>`}};var z,T,W,j,A,D;C=new WeakMap,E=new WeakSet,_=function(e){p(this,"-with-icon",v(e.target))},I=function(e){if(e.defaultPrevented)return;const t=this.closest("m3e-segmented-button");if(t&&(t.multi||!this.checked)){const e=this.checked;this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-segmented-button")?.[w].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=e}},P.styles=r`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${g.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${g.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${s(`background-color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${g.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${g.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${g.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:state(-hide-selection))) .wrapper, :host(:state(-with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${g.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${g.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${g.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${g.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${g.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${g.color.onSurface}); } :host(:not(:state(-with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${g.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:state(-hide-selection)) .check, :host(:state(-hide-selection):not(:state(-with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:state(-hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`,t([l(".focus-ring")],P.prototype,"_focusRing",void 0),t([l(".state-layer")],P.prototype,"_stateLayer",void 0),t([l(".ripple")],P.prototype,"_ripple",void 0),t([a()],P.prototype,"value",void 0),P=B=t([f("m3e-button-segment")],P);let L=class extends(y(d(c(k(m(u(b(n,"radiogroup")))))))){constructor(){super(...arguments),z.add(this),T.set(this,void 0),this[D]=(new x).withWrap().withDirectionality(S.current).onActiveItemChange(()=>this[w].activeItem?.click()),this.multi=!1,this.hideSelectionIndicator=!1}get segments(){return this[w]?.items??[]}get selected(){return this[w]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(T=new WeakMap,z=new WeakSet,D=w,$)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const o of e)t.append(this.name,o);return t}return e}connectedCallback(){super.connectedCallback(),this[w].multi=this.multi,this[w].disableRovingTabIndex(this.multi),o(this,T,S.observe(()=>this[w].directionality=S.current),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,T,"f")?.call(this)}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[w].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",this[w].multi=this.multi,this[w].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.segments.forEach(e=>p(e,"-hide-selection",this.hideSelectionIndicator))}render(){return i`<slot @slotchange="${e(this,z,"m",W)}" @keydown="${e(this,z,"m",j)}" @change="${e(this,z,"m",A)}"></slot>`}};W=function(){const{added:e}=this[w].setItems([...this.querySelectorAll("m3e-button-segment")]);e.forEach(e=>p(e,"-hide-selection",this.hideSelectionIndicator)),this[w].items.forEach((e,t)=>{p(e,"-first",0==t),p(e,"-last",t==this[w].items.length-1)})},j=function(e){this.multi||this[w].onKeyDown(e)},A=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},L.styles=r`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:state(-first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); } ::slotted(:state(-last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); } ::slotted(:not(:state(-first))) { --_segmented-button-left-border: none; }`,t([a({type:Boolean})],L.prototype,"multi",void 0),t([a({attribute:"hide-selection-indicator",type:Boolean})],L.prototype,"hideSelectionIndicator",void 0),L=t([f("m3e-segmented-button")],L);export{P as M3eButtonSegmentElement,L as M3eSegmentedButtonElement};
+import{__classPrivateFieldGet as e,__decorate as t,__classPrivateFieldSet as o}from"tslib";import{LitElement as i,html as n,unsafeCSS as s,css as r}from"lit";import{query as l,property as a}from"lit/decorators.js";import{Dirty as d,Touched as c,Checked as h,Disabled as m,AttachInternals as u,Role as b,DesignToken as g,setCustomState as p,hasAssignedNodes as v,customElement as f,Labelled as y,FormAssociated as k,formValue as $}from"@m3e/web/core";import{selectionManager as w,SelectionManager as x}from"@m3e/web/core/a11y";import{M3eDirectionality as S}from"@m3e/web/core/bidi";var E,C,_,I,B;let P=B=class extends(d(c(h(m(u(b(i,"radio"),!0)))))){constructor(){super(...arguments),E.add(this),C.set(this,t=>e(this,E,"m",I).call(this,t)),this.value="on"}connectedCallback(){super.connectedCallback(),this.addEventListener("click",e(this,C,"f"))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",e(this,C,"f"))}firstUpdated(e){super.firstUpdated(e),[this._focusRing,this._stateLayer,this._ripple].forEach(e=>e?.attach(this))}update(e){const t=this.closest("m3e-segmented-button");t&&(this.role=t.multi?"button":"radio"),super.update(e),e.has("checked")&&t?.[w].notifySelectionChange(this),e.has("disabled")&&(this.disabled?this.nextElementSibling instanceof B&&(this.nextElementSibling.disabled?this.style.removeProperty("--_segmented-button-disabled-outline-color"):this.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`)):(this.style.removeProperty("--_segmented-button-disabled-outline-color"),this.previousElementSibling instanceof B&&(this.previousElementSibling.disabled?this.previousElementSibling.style.setProperty("--_segmented-button-disabled-outline-color",`var(--m3e-segmented-button-outline-color, ${g.color.outline})`):this.previousElementSibling.style.removeProperty("--_segmented-button-disabled-outline-color"))))}render(){return n`<div class="base"><m3e-state-layer class="state-layer" ?disabled="${this.disabled}"></m3e-state-layer><m3e-focus-ring class="focus-ring" ?disabled="${this.disabled}"></m3e-focus-ring><m3e-ripple class="ripple" ?disabled="${this.disabled}"></m3e-ripple><div class="touch" aria-hidden="true"></div><div class="wrapper"><div class="icon" aria-hidden="true"><svg class="check" viewBox="0 -960 960 960"><path fill="currentColor" d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg><slot name="icon" @slotchange="${e(this,E,"m",_)}"></slot></div><div class="label"><slot></slot></div></div></div>`}};var z,T,W,j,A,D;C=new WeakMap,E=new WeakSet,_=function(e){p(this,"--with-icon",v(e.target))},I=function(e){if(e.defaultPrevented)return;const t=this.closest("m3e-segmented-button");if(t&&(t.multi||!this.checked)){const e=this.checked;this.checked=!this.checked,this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0,cancelable:!0}))?(this.closest("m3e-segmented-button")?.[w].notifySelectionChange(this),this.dispatchEvent(new Event("change",{bubbles:!0}))):this.checked=e}},P.styles=r`:host { display: inline-block; position: relative; vertical-align: middle; outline: none; user-select: none; flex: 1 1 auto; min-width: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .base { display: inline-flex; vertical-align: middle; align-items: center; width: 100%; height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${g.density.calc(-3)}); box-sizing: border-box; border-width: var(--m3e-segmented-button-outline-thickness, 1px); border-color: var(--m3e-segmented-button-outline-color, ${g.color.outline}); border-style: solid; border-radius: inherit; border-inline-start-style: var(--_segmented-button-left-border, solid); transition: ${s(`background-color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .touch { position: absolute; height: 3rem; left: 0; right: 0; } .wrapper { width: 100%; overflow: hidden; display: inline-flex; align-items: center; padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem); padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem); column-gap: var(--m3e-segmented-button-spacing, 0.5rem); } .label { font-size: var(--m3e-segmented-button-font-size, ${g.typescale.standard.label.large.fontSize}); font-weight: var(--m3e-segmented-button-font-weight, ${g.typescale.standard.label.large.fontWeight}); line-height: var(--m3e-segmented-button-line-height, ${g.typescale.standard.label.large.lineHeight}); letter-spacing: var(--m3e-segmented-button-tracking, ${g.typescale.standard.label.large.tracking}); justify-self: center; flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } .icon { display: flex; align-items: center; justify-content: center; transition: ${s(`color ${g.motion.duration.short4} ${g.motion.easing.standard}`)}; } :host(:not(:disabled)) { cursor: pointer; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper, :host(:is(:state(--with-icon), :--with-icon)) .wrapper { padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem); } :host(:not(:disabled)[checked]) .base { background-color: var(--m3e-segmented-button-selected-container-color, ${g.color.secondaryContainer}); --m3e-state-layer-hover-color: var( --m3e-segmented-button-selected-container-hover-color, ${g.color.onSecondaryContainer} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-selected-container-focus-color, ${g.color.onSecondaryContainer} ); --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .label { color: var(--m3e-segmented-button-selected-label-text-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled)[checked]) .icon { color: var(--m3e-segmented-button-selected-icon-color, ${g.color.onSecondaryContainer}); } :host(:not(:disabled):not([checked])) .base { --m3e-state-layer-hover-color: var( --m3e-segmented-button-unselected-container-hover-color, ${g.color.onSurface} ); --m3e-state-layer-focus-color: var( --m3e-segmented-button-unselected-container-focus-color, ${g.color.onSurface} ); --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .label { color: var(--m3e-segmented-button-unselected-label-text-color, ${g.color.onSurface}); } :host(:not(:disabled):not([checked])) .icon { color: var(--m3e-segmented-button-unselected-icon-color, ${g.color.onSurface}); } :host(:not(:is(:state(--with-icon), :--with-icon))) .icon { margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem)); transition: margin-inline-start ${g.motion.spring.fastEffects}; } .check, ::slotted([slot="icon"]) { width: 1em; font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important; } :host(:not([checked])) .check, :host(:is(:state(--hide-selection), :--hide-selection)) .check, :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon { display: none; } :host([checked]) .icon { margin-inline-start: 0; } :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot="icon"]) { display: none !important; } :host(:disabled) .base { border-color: color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ); border-inline-end-color: var( --_segmented-button-disabled-outline-color, color-mix( in srgb, var(--m3e-segmented-button-disabled-outline-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-outline-opacity, 12%), transparent ) ); } :host(:disabled) .label { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-label-text-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-label-text-opacity, 38%), transparent ); } :host(:disabled) .icon { color: color-mix( in srgb, var(--m3e-segmented-button-disabled-icon-color, ${g.color.onSurface}) var(--m3e-segmented-button-disabled-icon-opacity, 38%), transparent ); } @media (prefers-reduced-motion) { .base, .icon, .label { transition: none; } } @media (forced-colors: active) { .base, .icon, .label { transition: none !important; } :host(:disabled) .label, :host(:disabled) .icon { color: GrayText; } :host(:not([selected]):not(:disabled)) .label, :host(:not([selected]):not(:disabled)) .icon { color: ButtonText; } :host(:not(:disabled)[checked]) .base { background-color: ButtonText; } :host(:not(:disabled)[checked]) .label, :host(:not(:disabled)[checked]) .icon { forced-color-adjust: none; color: ButtonFace; } :host { --m3e-segmented-button-outline-color: ButtonText; } }`,t([l(".focus-ring")],P.prototype,"_focusRing",void 0),t([l(".state-layer")],P.prototype,"_stateLayer",void 0),t([l(".ripple")],P.prototype,"_ripple",void 0),t([a()],P.prototype,"value",void 0),P=B=t([f("m3e-button-segment")],P);let L=class extends(y(d(c(k(m(u(b(i,"radiogroup")))))))){constructor(){super(...arguments),z.add(this),T.set(this,void 0),this[D]=(new x).withWrap().withDirectionality(S.current).onActiveItemChange(()=>this[w].activeItem?.click()),this.multi=!1,this.hideSelectionIndicator=!1}get segments(){return this[w]?.items??[]}get selected(){return this[w]?.selectedItems??[]}get value(){const e=this.selected.filter(e=>!e.disabled).map(e=>e.value);switch(e.length){case 0:return null;case 1:return e[0];default:return e}}get[(T=new WeakMap,z=new WeakSet,D=w,$)](){const e=this.value;if(Array.isArray(e)){const t=new FormData;for(const o of e)t.append(this.name,o);return t}return e}connectedCallback(){super.connectedCallback(),this[w].multi=this.multi,this[w].disableRovingTabIndex(this.multi),o(this,T,S.observe(()=>this[w].directionality=S.current),"f")}disconnectedCallback(){super.disconnectedCallback(),e(this,T,"f")?.call(this)}update(e){super.update(e),e.has("disabled")&&(void 0!==e.get("disabled")||this.disabled)&&(this[w].disabled=this.disabled),e.has("multi")&&(this.role=this.multi?"group":"radiogroup",this[w].multi=this.multi,this[w].disableRovingTabIndex(this.multi)),(e.has("multi")||e.has("disabled"))&&(this.ariaDisabled=this.multi&&this.disabled?"true":null),e.has("hideSelectionIndicator")&&this.segments.forEach(e=>p(e,"--hide-selection",this.hideSelectionIndicator))}render(){return n`<slot @slotchange="${e(this,z,"m",W)}" @keydown="${e(this,z,"m",j)}" @change="${e(this,z,"m",A)}"></slot>`}};W=function(){const{added:e}=this[w].setItems([...this.querySelectorAll("m3e-button-segment")]);e.forEach(e=>p(e,"--hide-selection",this.hideSelectionIndicator)),this[w].items.forEach((e,t)=>{p(e,"--first",0==t),p(e,"--last",t==this[w].items.length-1)})},j=function(e){this.multi||this[w].onKeyDown(e)},A=function(e){e.stopPropagation(),this.dispatchEvent(new Event("change",{bubbles:!0}))},L.styles=r`:host { display: inline-flex; vertical-align: middle; align-items: center; } ::slotted(:is(:state(--first), :--first)) { border-start-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); border-end-start-radius: var(--m3e-segmented-button-start-shape, ${g.shape.corner.full}); } ::slotted(:is(:state(--last), :--last)) { border-start-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); border-end-end-radius: var(--m3e-segmented-button-end-shape, ${g.shape.corner.full}); } ::slotted(:not(:is(:state(--first), :--first))) { --_segmented-button-left-border: none; }`,t([a({type:Boolean})],L.prototype,"multi",void 0),t([a({attribute:"hide-selection-indicator",type:Boolean})],L.prototype,"hideSelectionIndicator",void 0),L=t([f("m3e-segmented-button")],L);export{P as M3eButtonSegmentElement,L as M3eSegmentedButtonElement};
 //# sourceMappingURL=segmented-button.min.js.map

package/dist/segmented-button.min.js.map

@@ -1 +1 @@
-{"version":3,"file":"segmented-button.min.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n  Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      box-sizing: border-box;\r\n      border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n      border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n      border-style: solid;\r\n      border-radius: inherit;\r\n      border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n      padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n      column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host([checked]:not(:state(-hide-selection))) .wrapper,\r\n    :host(:state(-with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n    }\r\n    :host(:not(:disabled)[checked]) .base {\r\n      background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .label {\r\n      color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .icon {\r\n      color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .label {\r\n      color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .icon {\r\n      color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:state(-with-icon))) .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n      transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n    }\r\n    .check,\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not([checked])) .check,\r\n    :host(:state(-hide-selection)) .check,\r\n    :host(:state(-hide-selection):not(:state(-with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    :host([checked]) .icon {\r\n      margin-inline-start: 0;\r\n    }\r\n    :host([checked]:not(:state(-hide-selection))) ::slotted([slot=\"icon\"]) {\r\n      display: none !important;\r\n    }\r\n    :host(:disabled) .base {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n      border-inline-end-color: var(\r\n        --_segmented-button-disabled-outline-color,\r\n        color-mix(\r\n          in srgb,\r\n          var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n            var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n          transparent\r\n        )\r\n      );\r\n    }\r\n    :host(:disabled) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .label,\r\n      :host(:not([selected]):not(:disabled)) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .base {\r\n        background-color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .label,\r\n      :host(:not(:disabled)[checked]) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n      :host {\r\n        --m3e-segmented-button-outline-color: ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * A string representing the value of the segment.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton) {\r\n      this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n    }\r\n\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\")) {\r\n      segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\")) {\r\n      if (this.disabled) {\r\n        if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (!this.nextElementSibling.disabled) {\r\n            this.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      } else {\r\n        this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n        if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (this.previousElementSibling.disabled) {\r\n            this.previousElementSibling.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"-with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n      const checked = this.checked;\r\n      this.checked = !this.checked;\r\n\r\n      if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n        this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      } else {\r\n        this.checked = checked;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-segment\": M3eButtonSegmentElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Labelled,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires input - Emitted when the checked state of a segment changes.\r\n * @fires change - Emitted when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n    }\r\n    ::slotted(:state(-first)) {\r\n      border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n      border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:state(-last)) {\r\n      border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n      border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:not(:state(-first))) {\r\n      --_segmented-button-left-border: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The segments of the button. */\r\n  get segments(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected segment(s) of the button. */\r\n  get selected(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the button. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this[selectionManager].multi = this.multi;\r\n    this[selectionManager].disableRovingTabIndex(this.multi);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.segments.forEach((x) => setCustomState(x, \"-hide-selection\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-button-segment\")]);\r\n    added.forEach((x) => setCustomState(x, \"-hide-selection\", this.hideSelectionIndicator));\r\n    this[selectionManager].items.forEach((segment, i) => {\r\n      setCustomState(segment, \"-first\", i == 0);\r\n      setCustomState(segment, \"-last\", i == this[selectionManager].items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","this","e","__classPrivateFieldGet","call","value","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","removeProperty","setProperty","DesignToken","color","outline","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","undefined","get","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}
+{"version":3,"file":"segmented-button.min.js","sources":["../../src/segmented-button/ButtonSegmentElement.ts","../../src/segmented-button/SegmentedButtonElement.ts"],"sourcesContent":["import { css, CSSResultGroup, html, LitElement, PropertyValues, unsafeCSS } from \"lit\";\r\nimport { property, query } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  Checked,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  hasAssignedNodes,\r\n  M3eFocusRingElement,\r\n  M3eRippleElement,\r\n  M3eStateLayerElement,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { selectionManager } from \"@m3e/web/core/a11y\";\r\n\r\n/**\r\n * A option that can be selected within a segmented button.\r\n *\r\n * @description\r\n * The `m3e-button-segment` component represents a single selectable option within a segmented button group.\r\n * It behaves like a toggle-able button, supporting icon and label content, selection state, and accessibility\r\n * roles. Segments are visually unified but independently interactive, adapting shape, color, and ripple feedback\r\n * based on their position and state.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-button-segment\r\n *\r\n * @slot - Renders the label of the option.\r\n * @slot icon - Renders an icon before the option's label.\r\n *\r\n * @attr checked - Whether the element is checked.\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr value - A string representing the value of the segment.\r\n *\r\n * @fires input - Emitted when the checked state changes.\r\n * @fires change - Emitted when the checked state changes.\r\n * @fires click - Emitted when the element is clicked.\r\n *\r\n * @cssprop --m3e-segmented-button-height - Total height of the segmented button.\r\n * @cssprop --m3e-segmented-button-outline-thickness - Thickness of the button's border.\r\n * @cssprop --m3e-segmented-button-outline-color - Color of the button's border.\r\n * @cssprop --m3e-segmented-button-padding-start - Padding on the leading edge of the button content.\r\n * @cssprop --m3e-segmented-button-padding-end - Padding on the trailing edge of the button content.\r\n * @cssprop --m3e-segmented-button-spacing - Horizontal gap between icon and label.\r\n * @cssprop --m3e-segmented-button-font-size - Font size of the label text.\r\n * @cssprop --m3e-segmented-button-font-weight - Font weight of the label text.\r\n * @cssprop --m3e-segmented-button-line-height - Line height of the label text.\r\n * @cssprop --m3e-segmented-button-tracking - Letter spacing of the label text.\r\n * @cssprop --m3e-segmented-button-with-icon-padding-start - Leading padding when an icon is present.\r\n * @cssprop --m3e-segmented-button-selected-container-color - Background color of a selected segment.\r\n * @cssprop --m3e-segmented-button-selected-container-hover-color - Hover state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-container-focus-color - Focus state-layer color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-ripple-color - Ripple color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-label-text-color - Label text color for selected segments.\r\n * @cssprop --m3e-segmented-button-selected-icon-color - Icon color for selected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-hover-color - Hover state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-container-focus-color - Focus state-layer color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-ripple-color - Ripple color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-label-text-color - Label text color for unselected segments.\r\n * @cssprop --m3e-segmented-button-unselected-icon-color - Icon color for unselected segments.\r\n * @cssprop --m3e-segmented-button-icon-size - Font size of the icon.\r\n * @cssprop --m3e-segmented-button-disabled-outline-color - Base color for disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-outline-opacity - Opacity applied to disabled segment borders.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-color - Base color for disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-label-text-opacity - Opacity applied to disabled label text.\r\n * @cssprop --m3e-segmented-button-disabled-icon-color - Base color for disabled icons.\r\n * @cssprop --m3e-segmented-button-disabled-icon-opacity - Opacity applied to disabled icons.\r\n */\r\n@customElement(\"m3e-button-segment\")\r\nexport class M3eButtonSegmentElement extends Dirty(\r\n  Touched(Checked(Disabled(AttachInternals(Role(LitElement, \"radio\"), true)))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-block;\r\n      position: relative;\r\n      vertical-align: middle;\r\n      outline: none;\r\n      user-select: none;\r\n      flex: 1 1 auto;\r\n      min-width: 0;\r\n      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\r\n    }\r\n    .base {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n      width: 100%;\r\n      height: calc(var(--m3e-segmented-button-height, 2.5rem) + ${DesignToken.density.calc(-3)});\r\n      box-sizing: border-box;\r\n      border-width: var(--m3e-segmented-button-outline-thickness, 1px);\r\n      border-color: var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline});\r\n      border-style: solid;\r\n      border-radius: inherit;\r\n      border-inline-start-style: var(--_segmented-button-left-border, solid);\r\n      transition: ${unsafeCSS(\r\n        `background-color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`,\r\n      )};\r\n    }\r\n    .touch {\r\n      position: absolute;\r\n      height: 3rem;\r\n      left: 0;\r\n      right: 0;\r\n    }\r\n    .wrapper {\r\n      width: 100%;\r\n      overflow: hidden;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      padding-inline-start: var(--m3e-segmented-button-padding-start, 1rem);\r\n      padding-inline-end: var(--m3e-segmented-button-padding-end, 1rem);\r\n      column-gap: var(--m3e-segmented-button-spacing, 0.5rem);\r\n    }\r\n    .label {\r\n      font-size: var(--m3e-segmented-button-font-size, ${DesignToken.typescale.standard.label.large.fontSize});\r\n      font-weight: var(--m3e-segmented-button-font-weight, ${DesignToken.typescale.standard.label.large.fontWeight});\r\n      line-height: var(--m3e-segmented-button-line-height, ${DesignToken.typescale.standard.label.large.lineHeight});\r\n      letter-spacing: var(--m3e-segmented-button-tracking, ${DesignToken.typescale.standard.label.large.tracking});\r\n      justify-self: center;\r\n      flex: 1 1 auto;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    .icon {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: ${unsafeCSS(`color ${DesignToken.motion.duration.short4} ${DesignToken.motion.easing.standard}`)};\r\n    }\r\n    :host(:not(:disabled)) {\r\n      cursor: pointer;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) .wrapper,\r\n    :host(:is(:state(--with-icon), :--with-icon)) .wrapper {\r\n      padding-inline-start: var(--m3e-segmented-button-with-icon-padding-start, 0.75rem);\r\n    }\r\n    :host(:not(:disabled)[checked]) .base {\r\n      background-color: var(--m3e-segmented-button-selected-container-color, ${DesignToken.color.secondaryContainer});\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-selected-container-hover-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-selected-container-focus-color,\r\n        ${DesignToken.color.onSecondaryContainer}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-selected-ripple-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .label {\r\n      color: var(--m3e-segmented-button-selected-label-text-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled)[checked]) .icon {\r\n      color: var(--m3e-segmented-button-selected-icon-color, ${DesignToken.color.onSecondaryContainer});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .base {\r\n      --m3e-state-layer-hover-color: var(\r\n        --m3e-segmented-button-unselected-container-hover-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-state-layer-focus-color: var(\r\n        --m3e-segmented-button-unselected-container-focus-color,\r\n        ${DesignToken.color.onSurface}\r\n      );\r\n      --m3e-ripple-color: var(--m3e-segmented-button-unselected-ripple-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .label {\r\n      color: var(--m3e-segmented-button-unselected-label-text-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:disabled):not([checked])) .icon {\r\n      color: var(--m3e-segmented-button-unselected-icon-color, ${DesignToken.color.onSurface});\r\n    }\r\n    :host(:not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      margin-inline-start: calc(0px - var(--m3e-segmented-button-spacing, 0.5rem));\r\n      transition: margin-inline-start ${DesignToken.motion.spring.fastEffects};\r\n    }\r\n    .check,\r\n    ::slotted([slot=\"icon\"]) {\r\n      width: 1em;\r\n      font-size: var(--m3e-segmented-button-icon-size, 1.125rem) !important;\r\n    }\r\n    :host(:not([checked])) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection)) .check,\r\n    :host(:is(:state(--hide-selection), :--hide-selection):not(:is(:state(--with-icon), :--with-icon))) .icon {\r\n      display: none;\r\n    }\r\n    :host([checked]) .icon {\r\n      margin-inline-start: 0;\r\n    }\r\n    :host([checked]:not(:is(:state(--hide-selection), :--hide-selection))) ::slotted([slot=\"icon\"]) {\r\n      display: none !important;\r\n    }\r\n    :host(:disabled) .base {\r\n      border-color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n        transparent\r\n      );\r\n      border-inline-end-color: var(\r\n        --_segmented-button-disabled-outline-color,\r\n        color-mix(\r\n          in srgb,\r\n          var(--m3e-segmented-button-disabled-outline-color, ${DesignToken.color.onSurface})\r\n            var(--m3e-segmented-button-disabled-outline-opacity, 12%),\r\n          transparent\r\n        )\r\n      );\r\n    }\r\n    :host(:disabled) .label {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-label-text-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-label-text-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    :host(:disabled) .icon {\r\n      color: color-mix(\r\n        in srgb,\r\n        var(--m3e-segmented-button-disabled-icon-color, ${DesignToken.color.onSurface})\r\n          var(--m3e-segmented-button-disabled-icon-opacity, 38%),\r\n        transparent\r\n      );\r\n    }\r\n    @media (prefers-reduced-motion) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none;\r\n      }\r\n    }\r\n    @media (forced-colors: active) {\r\n      .base,\r\n      .icon,\r\n      .label {\r\n        transition: none !important;\r\n      }\r\n\r\n      :host(:disabled) .label,\r\n      :host(:disabled) .icon {\r\n        color: GrayText;\r\n      }\r\n      :host(:not([selected]):not(:disabled)) .label,\r\n      :host(:not([selected]):not(:disabled)) .icon {\r\n        color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .base {\r\n        background-color: ButtonText;\r\n      }\r\n      :host(:not(:disabled)[checked]) .label,\r\n      :host(:not(:disabled)[checked]) .icon {\r\n        forced-color-adjust: none;\r\n        color: ButtonFace;\r\n      }\r\n      :host {\r\n        --m3e-segmented-button-outline-color: ButtonText;\r\n      }\r\n    }\r\n  `;\r\n\r\n  /** @private */ @query(\".focus-ring\") private readonly _focusRing?: M3eFocusRingElement;\r\n  /** @private */ @query(\".state-layer\") private readonly _stateLayer?: M3eStateLayerElement;\r\n  /** @private */ @query(\".ripple\") private readonly _ripple?: M3eRippleElement;\r\n  /** @private */ readonly #clickHandler = (e: Event) => this.#handleClick(e);\r\n\r\n  /**\r\n   * A string representing the value of the segment.\r\n   * @default \"on\"\r\n   */\r\n  @property() value = \"on\";\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n    this.addEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.removeEventListener(\"click\", this.#clickHandler);\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override firstUpdated(_changedProperties: PropertyValues<this>): void {\r\n    super.firstUpdated(_changedProperties);\r\n    [this._focusRing, this._stateLayer, this._ripple].forEach((x) => x?.attach(this));\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton) {\r\n      this.role = segmentedButton.multi ? \"button\" : \"radio\";\r\n    }\r\n\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"checked\")) {\r\n      segmentedButton?.[selectionManager].notifySelectionChange(this);\r\n    }\r\n\r\n    if (changedProperties.has(\"disabled\")) {\r\n      if (this.disabled) {\r\n        if (this.nextElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (!this.nextElementSibling.disabled) {\r\n            this.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      } else {\r\n        this.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n        if (this.previousElementSibling instanceof M3eButtonSegmentElement) {\r\n          if (this.previousElementSibling.disabled) {\r\n            this.previousElementSibling.style.setProperty(\r\n              \"--_segmented-button-disabled-outline-color\",\r\n              `var(--m3e-segmented-button-outline-color, ${DesignToken.color.outline})`,\r\n            );\r\n          } else {\r\n            this.previousElementSibling.style.removeProperty(\"--_segmented-button-disabled-outline-color\");\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override render(): unknown {\r\n    return html`<div class=\"base\">\r\n      <m3e-state-layer class=\"state-layer\" ?disabled=\"${this.disabled}\"></m3e-state-layer>\r\n      <m3e-focus-ring class=\"focus-ring\" ?disabled=\"${this.disabled}\"></m3e-focus-ring>\r\n      <m3e-ripple class=\"ripple\" ?disabled=\"${this.disabled}\"></m3e-ripple>\r\n      <div class=\"touch\" aria-hidden=\"true\"></div>\r\n      <div class=\"wrapper\">\r\n        <div class=\"icon\" aria-hidden=\"true\">\r\n          <svg class=\"check\" viewBox=\"0 -960 960 960\">\r\n            <path fill=\"currentColor\" d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\r\n          </svg>\r\n          <slot name=\"icon\" @slotchange=\"${this.#handleIconSlotChange}\"></slot>\r\n        </div>\r\n        <div class=\"label\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    </div>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleIconSlotChange(e: Event): void {\r\n    setCustomState(this, \"--with-icon\", hasAssignedNodes(<HTMLSlotElement>e.target));\r\n  }\r\n\r\n  /** @private */\r\n  #handleClick(e: Event): void {\r\n    if (e.defaultPrevented) return;\r\n\r\n    const segmentedButton = this.closest(\"m3e-segmented-button\");\r\n    if (segmentedButton && (segmentedButton.multi || !this.checked)) {\r\n      const checked = this.checked;\r\n      this.checked = !this.checked;\r\n\r\n      if (this.dispatchEvent(new Event(\"input\", { bubbles: true, composed: true, cancelable: true }))) {\r\n        this.closest(\"m3e-segmented-button\")?.[selectionManager].notifySelectionChange(this);\r\n        this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n      } else {\r\n        this.checked = checked;\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-button-segment\": M3eButtonSegmentElement;\r\n  }\r\n}\r\n","import { css, CSSResultGroup, html, LitElement, PropertyValues } from \"lit\";\r\nimport { property } from \"lit/decorators.js\";\r\n\r\nimport {\r\n  AttachInternals,\r\n  customElement,\r\n  DesignToken,\r\n  Dirty,\r\n  Disabled,\r\n  FormAssociated,\r\n  formValue,\r\n  Labelled,\r\n  Role,\r\n  setCustomState,\r\n  Touched,\r\n} from \"@m3e/web/core\";\r\n\r\nimport { SelectionManager, selectionManager } from \"@m3e/web/core/a11y\";\r\nimport { M3eDirectionality } from \"@m3e/web/core/bidi\";\r\n\r\nimport { M3eButtonSegmentElement } from \"./ButtonSegmentElement\";\r\n\r\n/**\r\n * A button that allows a user to select from a limited set of options.\r\n *\r\n * @description\r\n * The `m3e-segmented-button` component allows users to select one or more options from a horizontal group.\r\n * Each segment behaves like a toggle-able button, supporting icon and label content, selection state, and\r\n * accessibility roles. Built with Material Design 3 principles, it adapts shape, color, and ripple feedback\r\n * based on interaction state and input modality. Segments are visually unified but independently interactive.\r\n *\r\n * @example\r\n * The following example illustrates a single-select segmented button with four segments.\r\n * ```html\r\n * <m3e-segmented-button>\r\n *  <m3e-button-segment checked>8 oz</m3e-button-segment>\r\n *  <m3e-button-segment>12 oz</m3e-button-segment>\r\n *  <m3e-button-segment>16 oz</m3e-button-segment>\r\n *  <m3e-button-segment>20 oz</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n * @example\r\n * The next example illustrates a multiselect segmented button designated using the `multi` attribute.\r\n * ```html\r\n * <m3e-segmented-button multi>\r\n *  <m3e-button-segment checked>$</m3e-button-segment>\r\n *  <m3e-button-segment checked>$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$</m3e-button-segment>\r\n *  <m3e-button-segment>$$$$</m3e-button-segment>\r\n * </m3e-segmented-button>\r\n * ```\r\n *\r\n * @tag m3e-segmented-button\r\n *\r\n * @slot - Renders the segments of the button.\r\n *\r\n * @attr disabled - Whether the element is disabled.\r\n * @attr hide-selection-indicator - Whether to hide the selection indicator.\r\n * @attr multi - Whether multiple options can be selected.\r\n * @attr name - The name that identifies the element when submitting the associated form.\r\n *\r\n * @fires input - Emitted when the checked state of a segment changes.\r\n * @fires change - Emitted when the checked state of a segment changes.\r\n *\r\n * @cssprop --m3e-segmented-button-start-shape - Border radius for the first segment in a segmented button.\r\n * @cssprop --m3e-segmented-button-end-shape - Border radius for the last segment in a segmented button.\r\n */\r\n@customElement(\"m3e-segmented-button\")\r\nexport class M3eSegmentedButtonElement extends Labelled(\r\n  Dirty(Touched(FormAssociated(Disabled(AttachInternals(Role(LitElement, \"radiogroup\")))))),\r\n) {\r\n  /** The styles of the element. */\r\n  static override styles: CSSResultGroup = css`\r\n    :host {\r\n      display: inline-flex;\r\n      vertical-align: middle;\r\n      align-items: center;\r\n    }\r\n    ::slotted(:is(:state(--first), :--first)) {\r\n      border-start-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n      border-end-start-radius: var(--m3e-segmented-button-start-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:is(:state(--last), :--last)) {\r\n      border-start-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n      border-end-end-radius: var(--m3e-segmented-button-end-shape, ${DesignToken.shape.corner.full});\r\n    }\r\n    ::slotted(:not(:is(:state(--first), :--first))) {\r\n      --_segmented-button-left-border: none;\r\n    }\r\n  `;\r\n\r\n  /** @private */ #directionalitySubscription?: () => void;\r\n\r\n  /** @internal */\r\n  readonly [selectionManager] = new SelectionManager<M3eButtonSegmentElement>()\r\n    .withWrap()\r\n    .withDirectionality(M3eDirectionality.current)\r\n    .onActiveItemChange(() => this[selectionManager].activeItem?.click());\r\n\r\n  /**\r\n   * Whether multiple options can be selected.\r\n   * @default false\r\n   */\r\n  @property({ type: Boolean }) multi = false;\r\n\r\n  /**\r\n   * Whether to hide the selection indicator.\r\n   * @default false\r\n   */\r\n  @property({ attribute: \"hide-selection-indicator\", type: Boolean }) hideSelectionIndicator = false;\r\n\r\n  /** The segments of the button. */\r\n  get segments(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.items ?? [];\r\n  }\r\n\r\n  /** The selected segment(s) of the button. */\r\n  get selected(): readonly M3eButtonSegmentElement[] {\r\n    return this[selectionManager]?.selectedItems ?? [];\r\n  }\r\n\r\n  /** The selected (enabled) value(s) of the button. */\r\n  get value(): string | readonly string[] | null {\r\n    const values = this.selected.filter((x) => !x.disabled).map((x) => x.value);\r\n    switch (values.length) {\r\n      case 0:\r\n        return null;\r\n      case 1:\r\n        return values[0];\r\n      default:\r\n        return values;\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc @internal */\r\n  override get [formValue]() {\r\n    const values = this.value;\r\n    if (Array.isArray(values)) {\r\n      const data = new FormData();\r\n      for (const value of values) {\r\n        data.append(this.name, value);\r\n      }\r\n      return data;\r\n    }\r\n    return <string | null>values;\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override connectedCallback(): void {\r\n    super.connectedCallback();\r\n\r\n    this[selectionManager].multi = this.multi;\r\n    this[selectionManager].disableRovingTabIndex(this.multi);\r\n    this.#directionalitySubscription = M3eDirectionality.observe(\r\n      () => (this[selectionManager].directionality = M3eDirectionality.current),\r\n    );\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  override disconnectedCallback(): void {\r\n    super.disconnectedCallback();\r\n    this.#directionalitySubscription?.();\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override update(changedProperties: PropertyValues<this>): void {\r\n    super.update(changedProperties);\r\n\r\n    if (changedProperties.has(\"disabled\") && (changedProperties.get(\"disabled\") !== undefined || this.disabled)) {\r\n      this[selectionManager].disabled = this.disabled;\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\")) {\r\n      this.role = this.multi ? \"group\" : \"radiogroup\";\r\n      this[selectionManager].multi = this.multi;\r\n      this[selectionManager].disableRovingTabIndex(this.multi);\r\n    }\r\n\r\n    if (changedProperties.has(\"multi\") || changedProperties.has(\"disabled\")) {\r\n      // aria-disabled is not supported on radiogroup roles.\r\n      this.ariaDisabled = this.multi && this.disabled ? \"true\" : null;\r\n    }\r\n\r\n    if (changedProperties.has(\"hideSelectionIndicator\")) {\r\n      this.segments.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    }\r\n  }\r\n\r\n  /** @inheritdoc */\r\n  protected override render(): unknown {\r\n    return html`<slot\r\n      @slotchange=\"${this.#handleSlotChange}\"\r\n      @keydown=\"${this.#handleKeyDown}\"\r\n      @change=\"${this.#handleChange}\"\r\n    ></slot>`;\r\n  }\r\n\r\n  /** @private */\r\n  #handleSlotChange() {\r\n    const { added } = this[selectionManager].setItems([...this.querySelectorAll(\"m3e-button-segment\")]);\r\n    added.forEach((x) => setCustomState(x, \"--hide-selection\", this.hideSelectionIndicator));\r\n    this[selectionManager].items.forEach((segment, i) => {\r\n      setCustomState(segment, \"--first\", i == 0);\r\n      setCustomState(segment, \"--last\", i == this[selectionManager].items.length - 1);\r\n    });\r\n  }\r\n\r\n  /** @private */\r\n  #handleKeyDown(e: KeyboardEvent): void {\r\n    if (!this.multi) {\r\n      this[selectionManager].onKeyDown(e);\r\n    }\r\n  }\r\n\r\n  /** @private */\r\n  #handleChange(e: Event): void {\r\n    e.stopPropagation();\r\n    this.dispatchEvent(new Event(\"change\", { bubbles: true }));\r\n  }\r\n}\r\n\r\ndeclare global {\r\n  interface HTMLElementTagNameMap {\r\n    \"m3e-segmented-button\": M3eSegmentedButtonElement;\r\n  }\r\n}\r\n"],"names":["M3eButtonSegmentElement","M3eButtonSegmentElement_1","Dirty","Touched","Checked","Disabled","AttachInternals","Role","LitElement","constructor","_M3eButtonSegmentElement_clickHandler","set","this","e","__classPrivateFieldGet","call","value","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","firstUpdated","_changedProperties","_focusRing","_stateLayer","_ripple","forEach","x","attach","update","changedProperties","segmentedButton","closest","role","multi","has","selectionManager","notifySelectionChange","disabled","nextElementSibling","style","removeProperty","setProperty","DesignToken","color","outline","previousElementSibling","render","html","_M3eButtonSegmentElement_instances","_M3eButtonSegmentElement_handleIconSlotChange","setCustomState","hasAssignedNodes","target","defaultPrevented","checked","dispatchEvent","Event","bubbles","composed","cancelable","styles","css","density","calc","unsafeCSS","motion","duration","short4","easing","standard","typescale","label","large","fontSize","fontWeight","lineHeight","tracking","secondaryContainer","onSecondaryContainer","onSurface","spring","fastEffects","__decorate","query","prototype","property","customElement","M3eSegmentedButtonElement","Labelled","FormAssociated","_M3eSegmentedButtonElement_directionalitySubscription","_a","SelectionManager","withWrap","withDirectionality","M3eDirectionality","current","onActiveItemChange","activeItem","click","hideSelectionIndicator","segments","items","selected","selectedItems","values","filter","map","length","WeakMap","_M3eSegmentedButtonElement_instances","WeakSet","formValue","Array","isArray","data","FormData","append","name","disableRovingTabIndex","__classPrivateFieldSet","observe","directionality","undefined","get","ariaDisabled","_M3eSegmentedButtonElement_handleSlotChange","_M3eSegmentedButtonElement_handleKeyDown","_M3eSegmentedButtonElement_handleChange","added","setItems","querySelectorAll","segment","i","onKeyDown","stopPropagation","shape","corner","full","type","Boolean","attribute"],"mappings":"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"}

package/dist/select.js

@@ -218,7 +218,7 @@ let M3eSelectElement = M3eSelectElement_1 = class M3eSelectElement extends Focus
   update(changedProperties) {
     super.update(changedProperties);
     if (changedProperties.has("hideSelectionIndicator")) {
-      __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).forEach(x => setCustomState(x, "-hide-selection-indicator", this.hideSelectionIndicator));
+      __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_options_get).forEach(x => setCustomState(x, "--hide-selection-indicator", this.hideSelectionIndicator));
     }
   }
   /** @inheritdoc */
@@ -244,7 +244,7 @@ _M3eSelectElement_handleMutation = function _M3eSelectElement_handleMutation() {
   } = this._listKeyManager.setItems([...__classPrivateFieldGet(this, _M3eSelectElement_clone, "f").querySelectorAll("m3e-option")]);
   added.forEach(x => {
     x.id = x.id || `${__classPrivateFieldGet(this, _M3eSelectElement_id, "f")}-option-${this._listKeyManager.items.indexOf(x)}`;
-    setCustomState(x, "-hide-selection-indicator", this.hideSelectionIndicator);
+    setCustomState(x, "--hide-selection-indicator", this.hideSelectionIndicator);
   });
   this._options = [...this.querySelectorAll("m3e-option")];
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
@@ -394,7 +394,7 @@ _M3eSelectElement_destroyMenu = function _M3eSelectElement_destroyMenu(e) {
   this.removeAttribute("aria-owns");
   this.removeAttribute("aria-activedescendant");
   this.requestUpdate();
-  deleteCustomState(this, "-open");
+  deleteCustomState(this, "--open");
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
   this.dispatchEvent(new ToggleEvent("toggle", {
     oldState: e.oldState,
@@ -436,13 +436,13 @@ _M3eSelectElement_showMenu = function _M3eSelectElement_showMenu() {
   __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.notifyControlStateChange();
   setTimeout(() => {
     __classPrivateFieldGet(this, _M3eSelectElement_menu, "f")?.show(this, __classPrivateFieldGet(this, _M3eSelectElement_instances, "a", _M3eSelectElement_formField_get)?.menuAnchor);
-    addCustomState(this, "-open");
+    addCustomState(this, "--open");
   });
 };
 _M3eSelectElement_hideMenu = function _M3eSelectElement_hideMenu() {
   if (!__classPrivateFieldGet(this, _M3eSelectElement_menu, "f")) return;
   __classPrivateFieldGet(this, _M3eSelectElement_menu, "f").hide();
-  deleteCustomState(this, "-open");
+  deleteCustomState(this, "--open");
 };
 _M3eSelectElement_activateOption = function _M3eSelectElement_activateOption(option) {
   this.setAttribute("aria-activedescendant", option.id);
@@ -497,7 +497,7 @@ _M3eSelectElement_selectOption = function _M3eSelectElement_selectOption(option)
   }
 };
 /** The styles of the element. */
-M3eSelectElement.styles = css`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking}); min-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:state(-open)) .focus-ring { display: none; }`;
+M3eSelectElement.styles = css`:host { display: inline-flex; vertical-align: middle; outline: none; position: relative; font-size: var(--m3e-form-field-font-size, ${DesignToken.typescale.standard.body.large.fontSize}); font-weight: var(--m3e-form-field-font-weight, ${DesignToken.typescale.standard.body.large.fontWeight}); line-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); letter-spacing: var(--m3e-form-field-tracking, ${DesignToken.typescale.standard.body.large.tracking}); min-height: var(--m3e-form-field-line-height, ${DesignToken.typescale.standard.body.large.lineHeight}); border-radius: var(--m3e-select-container-shape, ${DesignToken.shape.corner.extraSmall}); } :host(:not(:disabled)) { cursor: pointer; } :host(:disabled) { color: color-mix( in srgb, var(--m3e-select-disabled-color, ${DesignToken.color.onSurface}) var(--m3e-select-disabled-color-opacity, 38%), transparent ); } .options { display: none; } .base { flex: 1 1 auto; display: inline-flex; align-items: center; overflow: hidden; } .arrow-wrapper { display: flex; align-items: center; justify-content: center; margin-top: var(--_select-arrow-margin-top); } ::slotted([slot="arrow"]), .arrow { vertical-align: middle; width: 1em; height: 1em; font-size: var(--m3e-select-icon-size, 1.5rem); } :host(:is(:state(--open), :--open)) .focus-ring { display: none; }`;
 /** @private */
 M3eSelectElement.__nextId = 0;
 __decorate([query(".focus-ring")], M3eSelectElement.prototype, "_focusRing", void 0);