luxen-ui 0.16.2 → 0.17.1

package/cdn/elements/segmented-control/segmented-control.d.ts

@@ -0,0 +1,80 @@
+import { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';
+export type SegmentedControlSize = 'sm' | 'md' | 'lg' | 'xl';
+/** Fired when the selected segment changes. Bubbles; not composed. */
+export declare class SegmentChangeEvent extends Event {
+    readonly value: string;
+    readonly index: number;
+    constructor(value: string, index: number);
+}
+interface SegmentedControlEventMap {
+    change: SegmentChangeEvent;
+}
+/**
+ * @summary A single-select segmented control: a compact, mutually-exclusive
+ * switch between a few options (radio-group semantics with a sliding pill).
+ * Progressively enhances light-DOM `<button>`s so it works before JS runs.
+ * Form-associated: give it a `name` and its selected `value` is submitted with
+ * the form (and restored on reset), like a native radio group.
+ *
+ * @example
+ * Mark the initially-selected segment with `aria-checked="true"` (or set
+ * `value` to its `value` attribute) so it is styled before the script upgrades
+ * the element.
+ * ```html
+ * <l-segmented-control label="Metric" value="cost">
+ *   <button value="volume">Volume</button>
+ *   <button value="cost" aria-checked="true">Cost</button>
+ * </l-segmented-control>
+ * ```
+ *
+ * @event change - Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.
+ *
+ * @cssproperty [--indicator-color=var(--l-color-surface)] - Background of the sliding pill behind the selected segment.
+ * @cssproperty [--border-radius=var(--l-radius-lg)] - Corner radius of the track.
+ *
+ * @customElement l-segmented-control
+ */
+export declare class SegmentedControl extends LuxenFormAssociatedElement {
+    createRenderRoot(): this;
+    private _initialized;
+    private _setupTimer;
+    private _buttons;
+    private _resizeObserver;
+    /** Value of the selected segment (its `value` attribute, else its index). */
+    value: string;
+    /** Control height, aligned with buttons and form controls at the same size. */
+    size: SegmentedControlSize;
+    /** Accessible label announced for the group. Not displayed on screen. */
+    label?: string;
+    /** Stretch segments to fill the container width. */
+    fullWidth: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @returns true when setup ran or was already done; false to schedule a retry. */
+    private _trySetup;
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string, mode: 'restore' | 'autocomplete'): void;
+    private _setup;
+    private _teardown;
+    /** Resolve the selected index from `value`, else an authored `aria-checked`, else 0. */
+    private _resolveActiveIndex;
+    private _syncValueFromIndex;
+    private _select;
+    /** Index of the next non-disabled segment from `from`, moving by `dir`, wrapping. */
+    private _nextEnabled;
+    private _isDisabled;
+    /** Reflect the host `disabled` state onto the segments (aria + tab order). */
+    private _applyDisabledState;
+    private _updateIndicator;
+    private _onClick;
+    private _onKeyDown;
+}
+export interface SegmentedControl {
+    addEventListener<K extends keyof SegmentedControlEventMap>(type: K, listener: (this: SegmentedControl, ev: SegmentedControlEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
+    addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    removeEventListener<K extends keyof SegmentedControlEventMap>(type: K, listener: (this: SegmentedControl, ev: SegmentedControlEventMap[K]) => void, options?: boolean | EventListenerOptions): void;
+    removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+}
+export {};
+//# sourceMappingURL=segmented-control.d.ts.map

package/cdn/elements/segmented-control/segmented-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.d.ts","sourceRoot":"","sources":["../../../src/html/elements/segmented-control/segmented-control.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,0BAA0B,EAAE,MAAM,+CAA+C,CAAC;AAE3F,MAAM,MAAM,oBAAoB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE7D,sEAAsE;AACtE,qBAAa,kBAAmB,SAAQ,KAAK;IAC3C,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;gBACX,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;CAKzC;AAED,UAAU,wBAAwB;IAChC,MAAM,EAAE,kBAAkB,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,qBAAa,gBAAiB,SAAQ,0BAA0B;IACrD,gBAAgB;IAIzB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,QAAQ,CAA2B;IAC3C,OAAO,CAAC,eAAe,CAA+B;IAEtD,6EAA6E;IAE7E,KAAK,SAAM;IAEX,+EAA+E;IAE/E,IAAI,EAAE,oBAAoB,CAAQ;IAElC,yEAAyE;IAEzE,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,oDAAoD;IAEpD,SAAS,UAAS;IAIT,iBAAiB;IAUjB,oBAAoB;IAM7B,mFAAmF;IACnF,OAAO,CAAC,SAAS;IAOR,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAsBrC,iBAAiB;IAMjB,wBAAwB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,GAAG,cAAc;IAOjF,OAAO,CAAC,MAAM;IAoDd,OAAO,CAAC,SAAS;IAUjB,wFAAwF;IACxF,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,OAAO;IAuBf,qFAAqF;IACrF,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAInB,8EAA8E;IAC9E,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,QAAQ,CAQd;IAKF,OAAO,CAAC,UAAU,CAkChB;CACH;AAQD,MAAM,WAAW,gBAAgB;IAC/B,gBAAgB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EACvD,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,gBAAgB,CACd,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,uBAAuB,GAC1C,IAAI,CAAC;IACR,mBAAmB,CAAC,CAAC,SAAS,MAAM,wBAAwB,EAC1D,IAAI,EAAE,CAAC,EACP,QAAQ,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,EAAE,EAAE,wBAAwB,CAAC,CAAC,CAAC,KAAK,IAAI,EAC3E,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;IACR,mBAAmB,CACjB,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,kCAAkC,EAC5C,OAAO,CAAC,EAAE,OAAO,GAAG,oBAAoB,GACvC,IAAI,CAAC;CACT"}

package/cdn/elements/segmented-control/segmented-control.js

@@ -0,0 +1,2 @@
+import{i as e,t}from"../../chunks/decorate.js";import{LuxenFormAssociatedElement as n}from"../../shared/luxen-form-associated-element.js";var r=class extends Event{constructor(e,t){super(`change`,{bubbles:!0,composed:!1,cancelable:!1}),this.value=e,this.index=t}},i=class extends n{constructor(...e){super(...e),this._initialized=!1,this._setupTimer=0,this._buttons=[],this._resizeObserver=null,this.value=``,this.size=`md`,this.fullWidth=!1,this._onClick=e=>{if(this.disabled)return;let t=e.target.closest(`button`);if(!t)return;let n=this._buttons.indexOf(t);n<0||this._isDisabled(t)||(this._select(n),t.focus())},this._onKeyDown=e=>{if(this.disabled)return;let t=e,n=e.target;if(n.getAttribute(`role`)!==`radio`)return;let r=this._buttons.indexOf(n);if(r<0)return;let i=r;switch(t.key){case`ArrowRight`:case`ArrowDown`:i=this._nextEnabled(r,1);break;case`ArrowLeft`:case`ArrowUp`:i=this._nextEnabled(r,-1);break;case`Home`:i=this._nextEnabled(-1,1);break;case`End`:i=this._nextEnabled(this._buttons.length,-1);break;case` `:break;default:return}e.preventDefault(),this._select(i),this._buttons[i].focus()}}createRenderRoot(){return this}connectedCallback(){super.connectedCallback(),this._trySetup()||(this._setupTimer=window.setTimeout(()=>this._trySetup(),0))}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this._setupTimer),this._teardown()}_trySetup(){return this._initialized||!this.isConnected?!0:this.querySelectorAll(`button`).length<2?!1:(this._setup(),!0)}updated(e){this._initialized&&(e.has(`value`)&&this._select(this._resolveActiveIndex(),!1),e.has(`size`)&&this._updateIndicator(),e.has(`label`)&&(this.label?this.setAttribute(`aria-label`,this.label):this.removeAttribute(`aria-label`)),e.has(`disabled`)&&this._applyDisabledState())}formResetCallback(){this.value=this._defaultFormValue,super.formResetCallback()}formStateRestoreCallback(e,t){this.value=e,super.formStateRestoreCallback(e,t)}_setup(){if(this._buttons=Array.from(this.querySelectorAll(`button`)),this._buttons.length<2)return;this._initialized=!0,this.setAttribute(`role`,`radiogroup`),this.label&&this.setAttribute(`aria-label`,this.label);let e=this._resolveActiveIndex();for(let t=0;t<this._buttons.length;t++){let n=this._buttons[t];n.type=`button`,n.setAttribute(`role`,`radio`),n.setAttribute(`aria-checked`,String(t===e)),n.setAttribute(`tabindex`,t===e?`0`:`-1`),(n.textContent??``).trim()===``&&(n.setAttribute(`data-icon-only`,``),!n.hasAttribute(`aria-label`)&&!n.hasAttribute(`aria-labelledby`)&&console.warn(`<${this.localName}>: icon-only segment #${t} has no accessible name; add aria-label.`))}this.addEventListener(`click`,this._onClick),this.addEventListener(`keydown`,this._onKeyDown),this._applyDisabledState(),this._syncValueFromIndex(e),this._defaultFormValue=this.value,this._syncFormValue(this.value),this._updateIndicator(),this._resizeObserver=new ResizeObserver(()=>this._updateIndicator()),this._resizeObserver.observe(this)}_teardown(){this.removeEventListener(`click`,this._onClick),this.removeEventListener(`keydown`,this._onKeyDown),this._resizeObserver?.disconnect(),this._resizeObserver=null,this._initialized=!1}_resolveActiveIndex(){let{_buttons:e}=this;if(this.value!==``){let t=e.findIndex(e=>(e.getAttribute(`value`)??``)===this.value);if(t>=0)return t;let n=Number(this.value);if(Number.isInteger(n)&&n>=0&&n<e.length)return n}let t=e.findIndex(e=>e.getAttribute(`aria-checked`)===`true`);if(t>=0)return t;let n=e.findIndex(e=>!this._isDisabled(e));return n>=0?n:0}_syncValueFromIndex(e){this.value=this._buttons[e]?.getAttribute(`value`)??String(e)}_select(e,t=!0){if(e<0||e>=this._buttons.length)return;let n=this._buttons[e].getAttribute(`aria-checked`)!==`true`;for(let t=0;t<this._buttons.length;t++){let n=t===e;this._buttons[t].setAttribute(`aria-checked`,String(n)),this._buttons[t].setAttribute(`tabindex`,n&&!this.disabled?`0`:`-1`)}this._syncValueFromIndex(e),this._syncFormValue(this.value),this._updateIndicator(),t&&n&&(this.hasInteracted=!0,this.dispatchEvent(new r(this.value,e)))}_nextEnabled(e,t){let n=this._buttons.length;for(let r=1;r<=n;r++){let i=(e+t*r+n*r)%n;if(!this._isDisabled(this._buttons[i]))return i}return e}_isDisabled(e){return e.disabled||e.getAttribute(`aria-disabled`)===`true`}_applyDisabledState(){for(let e of this._buttons)this.disabled?(e.setAttribute(`aria-disabled`,`true`),e.setAttribute(`tabindex`,`-1`)):(e.removeAttribute(`aria-disabled`),e.setAttribute(`tabindex`,e.getAttribute(`aria-checked`)===`true`?`0`:`-1`))}_updateIndicator(){let e=this._buttons.find(e=>e.getAttribute(`aria-checked`)===`true`);e&&(this.style.setProperty(`--_indicator-left`,`${e.offsetLeft}px`),this.style.setProperty(`--_indicator-width`,`${e.offsetWidth}px`))}};t([e({reflect:!0})],i.prototype,`value`,void 0),t([e({reflect:!0})],i.prototype,`size`,void 0),t([e({reflect:!0})],i.prototype,`label`,void 0),t([e({type:Boolean,reflect:!0,attribute:`full-width`})],i.prototype,`fullWidth`,void 0);export{r as SegmentChangeEvent,i as SegmentedControl};
+//# sourceMappingURL=segmented-control.js.map

package/cdn/elements/segmented-control/segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-control.js","names":[],"sources":["../../../src/html/elements/segmented-control/segmented-control.ts"],"sourcesContent":["import { property } from 'lit/decorators.js';\nimport { LuxenFormAssociatedElement } from '../../shared/luxen-form-associated-element.js';\n\nexport type SegmentedControlSize = 'sm' | 'md' | 'lg' | 'xl';\n\n/** Fired when the selected segment changes. Bubbles; not composed. */\nexport class SegmentChangeEvent extends Event {\n  readonly value: string;\n  readonly index: number;\n  constructor(value: string, index: number) {\n    super('change', { bubbles: true, composed: false, cancelable: false });\n    this.value = value;\n    this.index = index;\n  }\n}\n\ninterface SegmentedControlEventMap {\n  change: SegmentChangeEvent;\n}\n\n/**\n * @summary A single-select segmented control: a compact, mutually-exclusive\n * switch between a few options (radio-group semantics with a sliding pill).\n * Progressively enhances light-DOM `<button>`s so it works before JS runs.\n * Form-associated: give it a `name` and its selected `value` is submitted with\n * the form (and restored on reset), like a native radio group.\n *\n * @example\n * Mark the initially-selected segment with `aria-checked=\"true\"` (or set\n * `value` to its `value` attribute) so it is styled before the script upgrades\n * the element.\n * ```html\n * <l-segmented-control label=\"Metric\" value=\"cost\">\n *   <button value=\"volume\">Volume</button>\n *   <button value=\"cost\" aria-checked=\"true\">Cost</button>\n * </l-segmented-control>\n * ```\n *\n * @event change - Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.\n *\n * @cssproperty [--indicator-color=var(--l-color-surface)] - Background of the sliding pill behind the selected segment.\n * @cssproperty [--border-radius=var(--l-radius-lg)] - Corner radius of the track.\n *\n * @customElement l-segmented-control\n */\n// oxlint-disable-next-line typescript/no-unsafe-declaration-merging -- typed addEventListener overloads merged below; no uninitialized properties.\nexport class SegmentedControl extends LuxenFormAssociatedElement {\n  override createRenderRoot() {\n    return this;\n  }\n\n  private _initialized = false;\n  private _setupTimer = 0;\n  private _buttons: HTMLButtonElement[] = [];\n  private _resizeObserver: ResizeObserver | null = null;\n\n  /** Value of the selected segment (its `value` attribute, else its index). */\n  @property({ reflect: true })\n  value = '';\n\n  /** Control height, aligned with buttons and form controls at the same size. */\n  @property({ reflect: true })\n  size: SegmentedControlSize = 'md';\n\n  /** Accessible label announced for the group. Not displayed on screen. */\n  @property({ reflect: true })\n  label?: string;\n\n  /** Stretch segments to fill the container width. */\n  @property({ type: Boolean, reflect: true, attribute: 'full-width' })\n  fullWidth = false;\n\n  // --- Lifecycle ---\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // Children may not be parsed yet when the element upgrades mid-parse: try\n    // synchronously, then retry once on a macrotask. setTimeout, not rAF — rAF\n    // is suspended in hidden documents, so the element would stay inert there.\n    if (!this._trySetup()) {\n      this._setupTimer = window.setTimeout(() => this._trySetup(), 0);\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    clearTimeout(this._setupTimer);\n    this._teardown();\n  }\n\n  /** @returns true when setup ran or was already done; false to schedule a retry. */\n  private _trySetup(): boolean {\n    if (this._initialized || !this.isConnected) return true;\n    if (this.querySelectorAll('button').length < 2) return false;\n    this._setup();\n    return true;\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (!this._initialized) return;\n    if (changed.has('value')) {\n      this._select(this._resolveActiveIndex(), false);\n    }\n    if (changed.has('size')) {\n      this._updateIndicator();\n    }\n    if (changed.has('label')) {\n      if (this.label) {\n        this.setAttribute('aria-label', this.label);\n      } else {\n        this.removeAttribute('aria-label');\n      }\n    }\n    if (changed.has('disabled')) {\n      this._applyDisabledState();\n    }\n  }\n\n  // --- Form lifecycle ---\n\n  override formResetCallback() {\n    // Restoring `value` re-selects the default segment via `updated()`.\n    this.value = this._defaultFormValue;\n    super.formResetCallback();\n  }\n\n  override formStateRestoreCallback(state: string, mode: 'restore' | 'autocomplete') {\n    this.value = state;\n    super.formStateRestoreCallback(state, mode);\n  }\n\n  // --- Setup / Teardown ---\n\n  private _setup() {\n    this._buttons = Array.from(this.querySelectorAll('button'));\n    if (this._buttons.length < 2) return;\n    this._initialized = true;\n\n    this.setAttribute('role', 'radiogroup');\n    if (this.label) this.setAttribute('aria-label', this.label);\n\n    const activeIndex = this._resolveActiveIndex();\n\n    for (let i = 0; i < this._buttons.length; i++) {\n      const btn = this._buttons[i];\n      // Force type=button so a segment never submits the enclosing form.\n      btn.type = 'button';\n      btn.setAttribute('role', 'radio');\n      btn.setAttribute('aria-checked', String(i === activeIndex));\n      btn.setAttribute('tabindex', i === activeIndex ? '0' : '-1');\n\n      // A segment with no visible text is icon-only: square it and require an\n      // accessible name (the icon itself is decorative to assistive tech).\n      if ((btn.textContent ?? '').trim() === '') {\n        btn.setAttribute('data-icon-only', '');\n        if (!btn.hasAttribute('aria-label') && !btn.hasAttribute('aria-labelledby')) {\n          // eslint-disable-next-line no-console\n          console.warn(\n            `<${this.localName}>: icon-only segment #${i} has no accessible name; add aria-label.`,\n          );\n        }\n      }\n    }\n\n    this.addEventListener('click', this._onClick);\n    this.addEventListener('keydown', this._onKeyDown);\n\n    // Reflect a whole-control `disabled` onto the segments (aria + tab order).\n    this._applyDisabledState();\n\n    // Canonicalize `value` to the active segment now that roles are set, and\n    // seed the form value (the value a form reset restores to).\n    this._syncValueFromIndex(activeIndex);\n    this._defaultFormValue = this.value;\n    this._syncFormValue(this.value);\n\n    // Initial pill position. Synchronous first (offset reads force layout),\n    // then a ResizeObserver keeps it correct across hidden→visible transitions\n    // and size changes — rAF is suspended in hidden documents, so it must not\n    // be the only scheduling mechanism.\n    this._updateIndicator();\n    this._resizeObserver = new ResizeObserver(() => this._updateIndicator());\n    this._resizeObserver.observe(this);\n  }\n\n  private _teardown() {\n    this.removeEventListener('click', this._onClick);\n    this.removeEventListener('keydown', this._onKeyDown);\n    this._resizeObserver?.disconnect();\n    this._resizeObserver = null;\n    this._initialized = false;\n  }\n\n  // --- Selection ---\n\n  /** Resolve the selected index from `value`, else an authored `aria-checked`, else 0. */\n  private _resolveActiveIndex(): number {\n    const { _buttons } = this;\n    if (this.value !== '') {\n      const byValue = _buttons.findIndex((b) => (b.getAttribute('value') ?? '') === this.value);\n      if (byValue >= 0) return byValue;\n      const asIndex = Number(this.value);\n      if (Number.isInteger(asIndex) && asIndex >= 0 && asIndex < _buttons.length) return asIndex;\n    }\n    const checked = _buttons.findIndex((b) => b.getAttribute('aria-checked') === 'true');\n    if (checked >= 0) return checked;\n    // No explicit selection: default to the first enabled segment (else 0).\n    const firstEnabled = _buttons.findIndex((b) => !this._isDisabled(b));\n    return firstEnabled >= 0 ? firstEnabled : 0;\n  }\n\n  private _syncValueFromIndex(index: number) {\n    this.value = this._buttons[index]?.getAttribute('value') ?? String(index);\n  }\n\n  private _select(index: number, emitEvent = true) {\n    if (index < 0 || index >= this._buttons.length) return;\n    // Whether this is an actual change — re-selecting the current segment must\n    // not re-fire `change` (matches native radio / `<select>`).\n    const changed = this._buttons[index].getAttribute('aria-checked') !== 'true';\n\n    for (let i = 0; i < this._buttons.length; i++) {\n      const isActive = i === index;\n      this._buttons[i].setAttribute('aria-checked', String(isActive));\n      // Disabled control keeps every segment out of the tab order.\n      this._buttons[i].setAttribute('tabindex', isActive && !this.disabled ? '0' : '-1');\n    }\n\n    this._syncValueFromIndex(index);\n    this._syncFormValue(this.value);\n    this._updateIndicator();\n\n    if (emitEvent && changed) {\n      this.hasInteracted = true;\n      this.dispatchEvent(new SegmentChangeEvent(this.value, index));\n    }\n  }\n\n  /** Index of the next non-disabled segment from `from`, moving by `dir`, wrapping. */\n  private _nextEnabled(from: number, dir: 1 | -1): number {\n    const len = this._buttons.length;\n    for (let step = 1; step <= len; step++) {\n      const i = (from + dir * step + len * step) % len;\n      if (!this._isDisabled(this._buttons[i])) return i;\n    }\n    return from;\n  }\n\n  private _isDisabled(btn: HTMLButtonElement): boolean {\n    return btn.disabled || btn.getAttribute('aria-disabled') === 'true';\n  }\n\n  /** Reflect the host `disabled` state onto the segments (aria + tab order). */\n  private _applyDisabledState() {\n    for (const btn of this._buttons) {\n      if (this.disabled) {\n        btn.setAttribute('aria-disabled', 'true');\n        btn.setAttribute('tabindex', '-1');\n      } else {\n        btn.removeAttribute('aria-disabled');\n        // Restore the roving tabindex (only the selected segment is tabbable).\n        btn.setAttribute('tabindex', btn.getAttribute('aria-checked') === 'true' ? '0' : '-1');\n      }\n    }\n  }\n\n  // --- Indicator ---\n\n  private _updateIndicator() {\n    const active = this._buttons.find((b) => b.getAttribute('aria-checked') === 'true');\n    if (!active) return;\n    this.style.setProperty('--_indicator-left', `${active.offsetLeft}px`);\n    this.style.setProperty('--_indicator-width', `${active.offsetWidth}px`);\n  }\n\n  // --- Event handlers ---\n\n  private _onClick = (e: Event) => {\n    if (this.disabled) return;\n    const btn = (e.target as HTMLElement).closest<HTMLButtonElement>('button');\n    if (!btn) return;\n    const index = this._buttons.indexOf(btn);\n    if (index < 0 || this._isDisabled(btn)) return;\n    this._select(index);\n    btn.focus();\n  };\n\n  // Typed `Event` (not `KeyboardEvent`): the listener is attached to `this`,\n  // whose merged addEventListener overloads (see the interface below) fall back\n  // to the platform `EventListener` signature for non-map events like `keydown`.\n  private _onKeyDown = (e: Event) => {\n    if (this.disabled) return;\n    const ke = e as KeyboardEvent;\n    const target = e.target as HTMLElement;\n    if (target.getAttribute('role') !== 'radio') return;\n\n    const current = this._buttons.indexOf(target as HTMLButtonElement);\n    if (current < 0) return;\n\n    let next = current;\n    switch (ke.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        next = this._nextEnabled(current, 1);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        next = this._nextEnabled(current, -1);\n        break;\n      case 'Home':\n        next = this._nextEnabled(-1, 1);\n        break;\n      case 'End':\n        next = this._nextEnabled(this._buttons.length, -1);\n        break;\n      case ' ':\n        // Space (re)selects the focused segment (APG radio group).\n        break;\n      default:\n        return;\n    }\n    e.preventDefault();\n    this._select(next);\n    this._buttons[next].focus();\n  };\n}\n\n// Type `addEventListener('change', …)` so listeners receive a `SegmentChangeEvent`\n// (with `.value`/`.index`) instead of a bare `Event`. `change` collides with\n// lib.dom's `GlobalEventHandlersEventMap`, so it can't be augmented globally —\n// the overloads are declaration-merged onto this element's interface instead.\n// The interface MUST come after the class (the CEM analyzer dedups on the first\n// declaration of the name). See `tabs.ts` for the fully-annotated reference.\nexport interface SegmentedControl {\n  addEventListener<K extends keyof SegmentedControlEventMap>(\n    type: K,\n    listener: (this: SegmentedControl, ev: SegmentedControlEventMap[K]) => void,\n    options?: boolean | AddEventListenerOptions,\n  ): void;\n  addEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | AddEventListenerOptions,\n  ): void;\n  removeEventListener<K extends keyof SegmentedControlEventMap>(\n    type: K,\n    listener: (this: SegmentedControl, ev: SegmentedControlEventMap[K]) => void,\n    options?: boolean | EventListenerOptions,\n  ): void;\n  removeEventListener(\n    type: string,\n    listener: EventListenerOrEventListenerObject,\n    options?: boolean | EventListenerOptions,\n  ): void;\n}\n"],"mappings":"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"}

package/cdn/registry.d.ts

@@ -1,5 +1,5 @@
 /** Every component base name the library ships. */
-export type ElementBaseName = 'alert' | 'alert-dialog' | 'avatar' | 'badge' | 'button-group' | 'carousel' | 'carousel-item' | 'combobox' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'dropdown-label' | 'form-field' | 'icon' | 'input-group' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'slider' | 'spinner' | 'rating' | 'select' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'tag' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
+export type ElementBaseName = 'alert' | 'alert-dialog' | 'avatar' | 'badge' | 'button-group' | 'carousel' | 'carousel-item' | 'combobox' | 'dialog' | 'divider' | 'drawer' | 'dropdown' | 'dropdown-item' | 'dropdown-label' | 'form-field' | 'icon' | 'input-group' | 'input-otp' | 'input-stepper' | 'popover' | 'prose-editor' | 'skeleton' | 'slider' | 'spinner' | 'rating' | 'segmented-control' | 'select' | 'sticky-bar' | 'stories' | 'story' | 'stories-viewer' | 'tabs' | 'tag' | 'toast' | 'toast-item' | 'tooltip' | 'tree' | 'tree-item';
 /** Set the global prefix. Must be called before defining elements. */
 export declare function setPrefix(prefix: {
     element: string;

package/cdn/registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,eAAe,GACf,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,aAAa,GACb,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}
+{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["../src/html/registry.ts"],"names":[],"mappings":"AAAA,mDAAmD;AACnD,MAAM,MAAM,eAAe,GACvB,OAAO,GACP,cAAc,GACd,QAAQ,GACR,OAAO,GACP,cAAc,GACd,UAAU,GACV,eAAe,GACf,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,UAAU,GACV,eAAe,GACf,gBAAgB,GAChB,YAAY,GACZ,MAAM,GACN,aAAa,GACb,WAAW,GACX,eAAe,GACf,SAAS,GACT,cAAc,GACd,UAAU,GACV,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,mBAAmB,GACnB,QAAQ,GACR,YAAY,GACZ,SAAS,GACT,OAAO,GACP,gBAAgB,GAChB,MAAM,GACN,KAAK,GACL,OAAO,GACP,YAAY,GACZ,SAAS,GACT,MAAM,GACN,WAAW,CAAC;AAMhB,sEAAsE;AACtE,wBAAgB,SAAS,CAAC,MAAM,EAAE;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAGxE;AAED,gCAAgC;AAChC,wBAAgB,SAAS,IAAI;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAE5D;AAED,gEAAgE;AAChE,wBAAgB,OAAO,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,CAEzD;AAED,sEAAsE;AACtE,wBAAgB,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAExC;AAID,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE7C;AAED,kDAAkD;AAClD,wBAAgB,YAAY,CAAC,QAAQ,EAAE,eAAe,GAAG,OAAO,CAE/D;AAED,qEAAqE;AACrE,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,IAAI,CAE9D"}

package/cdn/registry.js.map

@@ -1 +1 @@
-{"version":3,"file":"registry.js","names":[],"sources":["../src/html/registry.ts"],"sourcesContent":["/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":"AAwCA,IAAI,EAAiB,IACjB,EAAa,IACX,EAAc,IAAI,IAcxB,SAAgB,EAAQ,EAAmC,CACzD,MAAO,GAAG,EAAe,GAAG,GAC9B,CAGA,SAAgB,EAAI,EAAsB,CACxC,MAAO,GAAG,EAAW,GAAG,GAC1B,CAGA,IAAI,EAAO,EACX,SAAgB,EAAS,EAAsB,CAC7C,MAAO,GAAG,EAAW,GAAG,EAAK,GAAG,EAAE,GACpC,CAGA,SAAgB,EAAa,EAAoC,CAC/D,OAAO,EAAY,IAAI,CAAQ,CACjC,CAGA,SAAgB,EAAe,EAAiC,CAC9D,EAAY,IAAI,CAAQ,CAC1B"}
+{"version":3,"file":"registry.js","names":[],"sources":["../src/html/registry.ts"],"sourcesContent":["/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":"AAyCA,IAAI,EAAiB,IACjB,EAAa,IACX,EAAc,IAAI,IAcxB,SAAgB,EAAQ,EAAmC,CACzD,MAAO,GAAG,EAAe,GAAG,GAC9B,CAGA,SAAgB,EAAI,EAAsB,CACxC,MAAO,GAAG,EAAW,GAAG,GAC1B,CAGA,IAAI,EAAO,EACX,SAAgB,EAAS,EAAsB,CAC7C,MAAO,GAAG,EAAW,GAAG,EAAK,GAAG,EAAE,GACpC,CAGA,SAAgB,EAAa,EAAoC,CAC/D,OAAO,EAAY,IAAI,CAAQ,CACjC,CAGA,SAAgB,EAAe,EAAiC,CAC9D,EAAY,IAAI,CAAQ,CAC1B"}

package/cdn/standalone.css

@@ -4047,6 +4047,173 @@ In dark mode, mixes the base color with black (default 15% black).
   }
 }
 
+/* segmented-control.css */
+@layer components {
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segmented control
+   A single-select switch: a muted track with a sliding pill behind the
+   selected segment. Shares its visual language with l-tabs[variant='enclosed']
+   (same neutral-subtle track + surface pill), but carries radio-group
+   semantics instead of tabs.
+
+   Structural selectors (not [role='…']) so the control is styled from plain
+   light DOM — it is progressive, so it must look right before JS adds ARIA.
+   The host is the flex track; its `<button>` children are the segments. JS
+   only enhances (roles, keyboard, and the sliding pill offsets).
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control {
+    --_height: var(--l-size-control-md);
+    --_pad: 0.1875rem;
+    --_duration: 150ms;
+    --_easing: cubic-bezier(0.25, 0.1, 0.25, 1);
+
+    display: inline-flex;
+    position: relative;
+    align-items: stretch;
+    height: var(--_height);
+    padding: var(--_pad);
+    gap: calc(var(--spacing) * 0.5);
+    background: var(--l-color-bg-fill-neutral-subtle);
+    border-radius: var(--border-radius, var(--l-radius-lg));
+    /* Match the form-control border (--l-color-border, as used by .l-button,
+       l-select, and l-input) so the track lines up with dropdowns in a toolbar
+       — not the lighter --l-color-divider that enclosed tabs use. */
+    box-shadow: inset 0 0 0 1px var(--l-color-border);
+
+    /* Sliding pill behind the selected segment. Positioned by JS via
+       --_indicator-left / --_indicator-width (button offsetLeft / offsetWidth);
+       width 0 until JS runs, so it stays invisible in the no-JS fallback. */
+    &::before {
+      content: '';
+      position: absolute;
+      top: var(--_pad);
+      bottom: var(--_pad);
+      left: 0;
+      width: var(--_indicator-width, 0);
+      transform: translateX(var(--_indicator-left, 0));
+      background: var(--indicator-color, var(--l-color-surface));
+      border-radius: var(--l-radius-md);
+      box-shadow:
+        0 1px 3px 0 rgb(0 0 0 / 0.08),
+        0 1px 2px -1px rgb(0 0 0 / 0.08);
+      pointer-events: none;
+      will-change: transform, width;
+      transition:
+        transform var(--_duration) var(--_easing),
+        width var(--_duration) var(--_easing);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Sizes — align with .l-button and form controls at the same size.
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[size='sm'] {
+    --_height: var(--l-size-control-sm);
+  }
+
+  l-segmented-control[size='lg'] {
+    --_height: var(--l-size-control-lg);
+  }
+
+  l-segmented-control[size='xl'] {
+    --_height: var(--l-size-control-xl);
+  }
+
+  /* Whole-control disabled (host `disabled` attribute, form-associated). */
+  l-segmented-control[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Segments
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control button {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 1.5);
+    padding-inline: calc(var(--spacing) * 3);
+    margin: 0;
+    appearance: none;
+    border: none;
+    background: none;
+    border-radius: var(--l-radius-md);
+    color: var(--l-color-text-secondary);
+    font-family: inherit;
+    font-size: var(--l-text-sm);
+    font-weight: 500;
+    line-height: 1;
+    white-space: nowrap;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+    transition: color 150ms;
+
+    /* Icon-only segments (JS-detected, no visible text): square them. */
+    &[data-icon-only] {
+      padding-inline: 0;
+      width: calc(var(--_height) - 2 * var(--_pad));
+    }
+
+    &[aria-checked='true'] {
+      color: var(--l-color-text-primary);
+    }
+
+    @media (hover: hover) {
+      &:hover:not([aria-checked='true']):not(:disabled):not([aria-disabled='true']) {
+        color: var(--l-color-text-primary);
+      }
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--l-focus-ring);
+      outline-offset: -2px;
+      border-radius: var(--l-radius-sm);
+    }
+  }
+
+  /*
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+   Full width
+  ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
+  */
+
+  l-segmented-control[full-width] {
+    display: flex;
+  }
+
+  l-segmented-control[full-width] button {
+    flex: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    l-segmented-control::before {
+      transition-duration: 0ms;
+    }
+
+    l-segmented-control button {
+      transition-duration: 0ms;
+    }
+  }
+}
+
 /* select.css */
 /* Select — `.l-select` on a native <select> using the customizable
    `base-select` appearance (the Customizable Select API).

package/cdn/standalone.js

@@ -1,68 +1,71 @@
 //#region src/html/elements/alert/index.ts
-define$32("alert", Alert);
+define$33("alert", Alert);
 //#endregion
 //#region src/html/elements/alert-dialog/index.ts
-define$31("alert-dialog", AlertDialog);
+define$32("alert-dialog", AlertDialog);
 //#endregion
 //#region src/html/elements/avatar/index.ts
-define$30("avatar", Avatar);
+define$31("avatar", Avatar);
 //#endregion
 //#region src/html/elements/badge/index.ts
-define$29("badge", Badge);
+define$30("badge", Badge);
 //#endregion
 //#region src/html/elements/button-group/index.ts
-define$28("button-group", ButtonGroup);
+define$29("button-group", ButtonGroup);
 //#endregion
 //#region src/html/elements/carousel/index.ts
-define$27("carousel", Carousel);
+define$28("carousel", Carousel);
 //#endregion
 //#region src/html/elements/carousel-item/index.ts
-define$26("carousel-item", CarouselItem);
+define$27("carousel-item", CarouselItem);
 //#endregion
 //#region src/html/elements/combobox/index.ts
-define$25("combobox", Combobox);
+define$26("combobox", Combobox);
 //#endregion
 //#region src/html/elements/dialog/index.ts
-define$24("dialog", Dialog);
+define$25("dialog", Dialog);
 //#endregion
 //#region src/html/elements/divider/index.ts
-define$23("divider", Divider);
+define$24("divider", Divider);
 //#endregion
 //#region src/html/elements/drawer/index.ts
-define$22("drawer", Drawer);
+define$23("drawer", Drawer);
 //#endregion
 //#region src/html/elements/dropdown/index.ts
-define$21("dropdown", Dropdown);
+define$22("dropdown", Dropdown);
 //#endregion
 //#region src/html/elements/dropdown-item/index.ts
-define$20("dropdown-item", DropdownItem);
+define$21("dropdown-item", DropdownItem);
 //#endregion
 //#region src/html/elements/dropdown-label/index.ts
-define$19("dropdown-label", DropdownLabel);
+define$20("dropdown-label", DropdownLabel);
 //#endregion
 //#region src/html/elements/form-field/index.ts
-define$18("form-field", FormField);
+define$19("form-field", FormField);
 //#endregion
 //#region src/html/elements/icon/index.ts
-define$17("icon", Icon);
+define$18("icon", Icon);
 //#endregion
 //#region src/html/elements/input-group/index.ts
-define$16("input-group", InputGroup);
+define$17("input-group", InputGroup);
 //#endregion
 //#region src/html/elements/input-otp/index.ts
-define$15("input-otp", InputOtp);
+define$16("input-otp", InputOtp);
 //#endregion
 //#region src/html/elements/input-stepper/index.ts
-define$14("input-stepper", InputStepper);
+define$15("input-stepper", InputStepper);
 //#endregion
 //#region src/html/elements/popover/index.ts
-define$13("popover", Popover);
+define$14("popover", Popover);
 //#endregion
 //#region src/html/elements/prose-editor/index.ts
-define$12("prose-editor", ProseEditor);
+define$13("prose-editor", ProseEditor);
 //#endregion
 //#region src/html/elements/rating/index.ts
-define$11("rating", Rating);
+define$12("rating", Rating);
+//#endregion
+//#region src/html/elements/segmented-control/index.ts
+define$11("segmented-control", SegmentedControl);
 //#endregion
 //#region src/html/elements/select/index.ts
 define$10("select", Select);

package/cdn/standalone.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACqC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}
+{"version":3,"file":"standalone.js","names":[],"sources":["../src/html/elements/alert/index.ts","../src/html/elements/alert-dialog/index.ts","../src/html/elements/avatar/index.ts","../src/html/elements/badge/index.ts","../src/html/elements/button-group/index.ts","../src/html/elements/carousel/index.ts","../src/html/elements/carousel-item/index.ts","../src/html/elements/combobox/index.ts","../src/html/elements/dialog/index.ts","../src/html/elements/divider/index.ts","../src/html/elements/drawer/index.ts","../src/html/elements/dropdown/index.ts","../src/html/elements/dropdown-item/index.ts","../src/html/elements/dropdown-label/index.ts","../src/html/elements/form-field/index.ts","../src/html/elements/icon/index.ts","../src/html/elements/input-group/index.ts","../src/html/elements/input-otp/index.ts","../src/html/elements/input-stepper/index.ts","../src/html/elements/popover/index.ts","../src/html/elements/prose-editor/index.ts","../src/html/elements/rating/index.ts","../src/html/elements/segmented-control/index.ts","../src/html/elements/select/index.ts","../src/html/elements/skeleton/index.ts","../src/html/elements/slider/index.ts","../src/html/elements/spinner/index.ts","../src/html/elements/sticky-bar/index.ts","../src/html/elements/tabs/index.ts","../src/html/elements/tag/index.ts","../src/html/elements/toast/index.ts","../src/html/elements/tooltip/index.ts","../src/html/elements/tree/index.ts","../src/html/elements/tree-item/index.ts","../src/html/registry.ts"],"sourcesContent":["import { define } from '../../define.js';\nimport { Alert } from './alert.js';\nexport * from './alert.js';\ndefine('alert', Alert);\n","import { define } from '../../define.js';\nimport { AlertDialog } from './alert-dialog.js';\nexport * from './alert-dialog.js';\ndefine('alert-dialog', AlertDialog);\n","import { define } from '../../define.js';\nimport { Avatar } from './avatar.js';\nexport * from './avatar.js';\ndefine('avatar', Avatar);\n","import { define } from '../../define.js';\nimport { Badge } from './badge.js';\nexport * from './badge.js';\ndefine('badge', Badge);\n","import { define } from '../../define.js';\nimport { ButtonGroup } from './button-group.js';\nexport * from './button-group.js';\ndefine('button-group', ButtonGroup);\n","import { define } from '../../define.js';\nimport { Carousel } from './carousel.js';\nexport * from './carousel.js';\ndefine('carousel', Carousel);\n","import { define } from '../../define.js';\nimport { CarouselItem } from './carousel-item.js';\nexport * from './carousel-item.js';\ndefine('carousel-item', CarouselItem);\n","import { define } from '../../define.js';\nimport { Combobox } from './combobox.js';\nexport * from './combobox.js';\ndefine('combobox', Combobox);\n","import { define } from '../../define.js';\nimport { Dialog } from './dialog.js';\nexport * from './dialog.js';\ndefine('dialog', Dialog);\n","import { define } from '../../define.js';\nimport { Divider } from './divider.js';\nexport * from './divider.js';\ndefine('divider', Divider);\n","import { define } from '../../define.js';\nimport { Drawer } from './drawer.js';\nexport * from './drawer.js';\ndefine('drawer', Drawer);\n","import { define } from '../../define.js';\nimport { Dropdown } from './dropdown.js';\nexport * from './dropdown.js';\ndefine('dropdown', Dropdown);\n","import { define } from '../../define.js';\nimport { DropdownItem } from './dropdown-item.js';\nexport * from './dropdown-item.js';\ndefine('dropdown-item', DropdownItem);\n","import { define } from '../../define.js';\nimport { DropdownLabel } from './dropdown-label.js';\nexport * from './dropdown-label.js';\ndefine('dropdown-label', DropdownLabel);\n","import { define } from '../../define.js';\nimport { FormField } from './form-field.js';\nexport * from './form-field.js';\ndefine('form-field', FormField);\n","import { define } from '../../define.js';\nimport { Icon } from './icon.js';\nexport * from './icon.js';\ndefine('icon', Icon);\n","import { define } from '../../define.js';\nimport { InputGroup } from './input-group.js';\nexport * from './input-group.js';\ndefine('input-group', InputGroup);\n","import { define } from '../../define.js';\nimport { InputOtp } from './input-otp.js';\nexport * from './input-otp.js';\ndefine('input-otp', InputOtp);\n","import { define } from '../../define.js';\nimport { InputStepper } from './input-stepper.js';\nexport * from './input-stepper.js';\ndefine('input-stepper', InputStepper);\n","import { define } from '../../define.js';\nimport { Popover } from './popover.js';\nexport * from './popover.js';\ndefine('popover', Popover);\n","import { define } from '../../define.js';\nimport { ProseEditor } from './prose-editor.js';\nexport * from './prose-editor.js';\ndefine('prose-editor', ProseEditor);\n","import { define } from '../../define.js';\nimport { Rating } from './rating.js';\nexport * from './rating.js';\ndefine('rating', Rating);\n","import { define } from '../../define.js';\nimport { SegmentedControl } from './segmented-control.js';\nexport * from './segmented-control.js';\ndefine('segmented-control', SegmentedControl);\n","import { define } from '../../define.js';\nimport { Select } from './select.js';\nexport * from './select.js';\ndefine('select', Select);\n","import { define } from '../../define.js';\nimport { Skeleton } from './skeleton.js';\nexport * from './skeleton.js';\ndefine('skeleton', Skeleton);\n","import { define } from '../../define.js';\nimport { Slider } from './slider.js';\nexport * from './slider.js';\ndefine('slider', Slider);\n","import { define } from '../../define.js';\nimport { Spinner } from './spinner.js';\nexport * from './spinner.js';\ndefine('spinner', Spinner);\n","import { define } from '../../define.js';\nimport { StickyBar } from './sticky-bar.js';\nexport * from './sticky-bar.js';\ndefine('sticky-bar', StickyBar);\n","import { define } from '../../define.js';\nimport { Tabs } from './tabs.js';\nexport * from './tabs.js';\ndefine('tabs', Tabs);\n","import { define } from '../../define.js';\nimport { Tag } from './tag.js';\nexport * from './tag.js';\ndefine('tag', Tag);\n","import { define } from '../../define.js';\nimport { Toast, ToastItem } from './toast.js';\nexport * from './toast.js';\ndefine('toast', Toast);\ndefine('toast-item', ToastItem);\n","import { define } from '../../define.js';\nimport { Tooltip } from './tooltip.js';\nexport * from './tooltip.js';\ndefine('tooltip', Tooltip);\n","import { define } from '../../define.js';\nimport { Tree } from './tree.js';\nexport * from './tree.js';\ndefine('tree', Tree);\n","import { define } from '../../define.js';\nimport { TreeItem } from './tree-item.js';\nexport * from './tree-item.js';\ndefine('tree-item', TreeItem);\n","/** Every component base name the library ships. */\nexport type ElementBaseName =\n  | 'alert'\n  | 'alert-dialog'\n  | 'avatar'\n  | 'badge'\n  | 'button-group'\n  | 'carousel'\n  | 'carousel-item'\n  | 'combobox'\n  | 'dialog'\n  | 'divider'\n  | 'drawer'\n  | 'dropdown'\n  | 'dropdown-item'\n  | 'dropdown-label'\n  | 'form-field'\n  | 'icon'\n  | 'input-group'\n  | 'input-otp'\n  | 'input-stepper'\n  | 'popover'\n  | 'prose-editor'\n  | 'skeleton'\n  | 'slider'\n  | 'spinner'\n  | 'rating'\n  | 'segmented-control'\n  | 'select'\n  | 'sticky-bar'\n  | 'stories'\n  | 'story'\n  | 'stories-viewer'\n  | 'tabs'\n  | 'tag'\n  | 'toast'\n  | 'toast-item'\n  | 'tooltip'\n  | 'tree'\n  | 'tree-item';\n\nlet _elementPrefix = 'l';\nlet _cssPrefix = 'l';\nconst _registered = new Set<ElementBaseName>();\n\n/** Set the global prefix. Must be called before defining elements. */\nexport function setPrefix(prefix: { element: string; css: string }): void {\n  _elementPrefix = prefix.element;\n  _cssPrefix = prefix.css;\n}\n\n/** Get the current prefixes. */\nexport function getPrefix(): { element: string; css: string } {\n  return { element: _elementPrefix, css: _cssPrefix };\n}\n\n/** Derive the full tag name from element prefix + base name. */\nexport function tagName(baseName: ElementBaseName): string {\n  return `${_elementPrefix}-${baseName}`;\n}\n\n/** Prefix a CSS class name. `cls('toast-icon')` → `'l-toast-icon'` */\nexport function cls(name: string): string {\n  return `${_cssPrefix}-${name}`;\n}\n\n/** Generate a globally unique prefixed ID. `uniqueId('toast')` → `'l:toast:1'` */\nlet _uid = 0;\nexport function uniqueId(base: string): string {\n  return `${_cssPrefix}:${base}:${++_uid}`;\n}\n\n/** Check if a base name is already registered. */\nexport function isRegistered(baseName: ElementBaseName): boolean {\n  return _registered.has(baseName);\n}\n\n/** Mark a base name as registered. Called internally by define(). */\nexport function markRegistered(baseName: ElementBaseName): void {\n  _registered.add(baseName);\n}\n"],"mappings":";AAGA,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,SAAS,KAAK;;;ACArB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,UAAU,MAAM;;;ACAvB,UAAO,WAAW,OAAO;;;ACAzB,UAAO,UAAU,MAAM;;;ACAvB,UAAO,YAAY,QAAQ;;;ACA3B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,kBAAkB,aAAa;;;ACAtC,UAAO,cAAc,SAAS;;;ACA9B,UAAO,QAAQ,IAAI;;;ACAnB,UAAO,eAAe,UAAU;;;ACAhC,UAAO,aAAa,QAAQ;;;ACA5B,UAAO,iBAAiB,YAAY;;;ACApC,UAAO,WAAW,OAAO;;;ACAzB,UAAO,gBAAgB,WAAW;;;ACAlC,UAAO,UAAU,MAAM;;;ACAvB,UAAO,qBAAqB,gBAAgB;;;ACA5C,UAAO,UAAU,MAAM;;;ACAvB,SAAO,YAAY,QAAQ;;;ACA3B,SAAO,UAAU,MAAM;;;ACAvB,SAAO,WAAW,OAAO;;;ACAzB,SAAO,cAAc,SAAS;;;ACA9B,SAAO,QAAQ,IAAI;;;ACAnB,SAAO,OAAO,GAAG;;;ACAjB,SAAO,SAAS,KAAK;AACrB,SAAO,cAAc,SAAS;;;ACD9B,SAAO,WAAW,OAAO;;;ACAzB,SAAO,QAAQ,IAAI;;;ACAnB,OAAO,aAAa,QAAQ;;;ACsC5B,IAAI,iBAAiB;AACrB,IAAI,aAAa;;AAIjB,SAAgB,UAAU,QAAgD;CACxE,iBAAiB,OAAO;CACxB,aAAa,OAAO;AACtB;;AAGA,SAAgB,YAA8C;CAC5D,OAAO;EAAE,SAAS;EAAgB,KAAK;CAAW;AACpD"}