@adia-ai/web-components 0.8.8 → 0.8.9

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog — @adia-ai/web-components
 
+## [0.8.9] — 2026-07-19
+
+### Added
+- **`<select-ui mark>`** (gh#339) — a first-class `mark` boolean (host-level and per-option) renders `<adia-mark-ui>` (the token-driven Adia brand mark) as the leading visual, following the existing `icon`/`avatar` precedent exactly: `mark` wins over `avatar`, which wins over `icon`. Fits the workspace/app-switcher row that represents the Adia platform itself, where a static scheme-locked logo URL can't invert with the color scheme.
+
+### Fixed
+- **`select-ui`'s `.options = [...]` setter now syncs the trigger's leading visual** — it previously only rebuilt the listbox rows (`#renderOptions()`), never reconciling the *trigger's* icon/avatar/mark to the selected option (`#syncLeading()`, only ever called from `render()`). Setting `.options` programmatically after connect — a documented, supported path — left the trigger stale even though the listbox rows were correct. Found and fixed while adding `mark` test coverage; affected the pre-existing `icon`/`avatar` props too, not just `mark`.
+
+### Maintenance
+- **`components/` touched in this release window** (7 file(s), e.g. `select/select.a2ui.json`) — carried by the entries above.
+- **`dist/` bundles rebuilt** in this cut's window (1 file(s)) — regenerated from the source changes described above, not independent edits.
+- **`patterns/` touched in this release window** (2 file(s), e.g. `permissions-matrix/permissions-matrix.examples.html`) — carried by the entries above.
+
 ## [0.8.8] — 2026-07-19
 
 ### Changed

package/components/select/select.a2ui.json

@@ -66,6 +66,11 @@
       "type": "string",
       "default": ""
     },
+    "mark": {
+      "description": "Renders the Adia brand mark (`<adia-mark-ui>`) as the leading visual — takes precedence over avatar and icon. Token-driven (light/dark handled internally), so it fits a scheme-switching workspace/app switcher where a static logo URL can't invert. Per-option `mark` on an `<option>`/options-array entry works the same way, scoped to that row.",
+      "type": "boolean",
+      "default": false
+    },
     "max": {
       "description": "Multi-select only. Maximum allowed selections. Toggling past the\ncap is suppressed; the `invalid` event fires with reason=\"max\".\n`0` (default) = unlimited.\n",
       "type": "number",
@@ -107,7 +112,7 @@
       "default": false
     },
     "options": {
-      "description": "Option list. Array of {value, label, disabled?, icon?, avatar?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar render in the list AND reflect in the trigger's selected state.",
+      "description": "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon).",
       "$ref": "common_types.json#/$defs/DynamicStringList"
     },
     "pattern": {

package/components/select/select.class.js

@@ -48,6 +48,7 @@ export class UISelect extends UIFormElement {
     label:       { type: String,  default: '', reflect: true },
     icon:        { type: String,  default: '', reflect: true },
     avatar:      { type: String,  default: '', reflect: true },
+    mark:        { type: Boolean, default: false, reflect: true },
     multiple:    { type: Boolean, default: false, reflect: true },
     searchable:  { type: Boolean, default: false, reflect: true },
     freeText:    { type: Boolean, default: false, reflect: true, attribute: 'free-text' },
@@ -417,14 +418,17 @@ export class UISelect extends UIFormElement {
       const lb = this.#listbox;
       if (lb?.parentNode === this) this.removeChild(lb);
 
-      // Initial leading reflects the host [avatar]/[icon]; #syncLeading() then
-      // reconciles it to the SELECTED option's icon/avatar on every render. The
-      // `data-select-leading` marker scopes that reconciliation to our element.
-      const leading = this.avatar
-        ? `<img slot="leading" data-select-leading src="${escapeHTML(this.avatar)}" alt="" />`
-        : this.icon
-          ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
-          : '';
+      // Initial leading reflects the host [mark]/[avatar]/[icon]; #syncLeading()
+      // then reconciles it to the SELECTED option's mark/avatar/icon on every
+      // render. The `data-select-leading` marker scopes that reconciliation to
+      // our element. mark wins over avatar, which wins over icon (gh#339).
+      const leading = this.mark
+        ? `<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>`
+        : this.avatar
+          ? `<img slot="leading" data-select-leading src="${escapeHTML(this.avatar)}" alt="" />`
+          : this.icon
+            ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
+            : '';
       const displayMarkup = this.searchable
         ? `<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${escapeHTML(this.placeholder || '')}" value="${escapeHTML(this.#displayText() === this.placeholder ? '' : this.#displayText())}" />`
         : `<span slot="display">${escapeHTML(this.#displayText())}</span>`;
@@ -498,7 +502,7 @@ export class UISelect extends UIFormElement {
       }
     }
 
-    // Reflect the selected option's icon/avatar in the trigger leading.
+    // Reflect the selected option's mark/avatar/icon in the trigger leading.
     this.#syncLeading();
 
     // SPEC-040 — stamp / reconcile chips + "+N more" pill on every render.
@@ -599,12 +603,12 @@ export class UISelect extends UIFormElement {
       if (child.tagName === 'OPTGROUP') {
         const group = { label: child.label || child.getAttribute('label') || '', options: [] };
         for (const opt of child.querySelectorAll('option')) {
-          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled, icon: opt.getAttribute('icon') || '', avatar: opt.getAttribute('avatar') || '' });
+          group.options.push({ value: opt.value, label: opt.textContent.trim(), disabled: opt.disabled, icon: opt.getAttribute('icon') || '', avatar: opt.getAttribute('avatar') || '', mark: opt.hasAttribute('mark') });
           if (opt.hasAttribute('selected')) preSelectedArr.push(opt.value);
         }
         this.#options.push(group);
       } else if (child.tagName === 'OPTION') {
-        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled, icon: child.getAttribute('icon') || '', avatar: child.getAttribute('avatar') || '' });
+        this.#options.push({ value: child.value, label: child.textContent.trim(), disabled: child.disabled, icon: child.getAttribute('icon') || '', avatar: child.getAttribute('avatar') || '', mark: child.hasAttribute('mark') });
         if (child.hasAttribute('selected')) preSelectedArr.push(child.value);
       } else if (
         // §225: skip [slot="display"] / [slot="listbox"] / [slot="action"] etc. — these are
@@ -660,26 +664,38 @@ export class UISelect extends UIFormElement {
       this.#renderOptions();
       const display = this.querySelector('[slot="display"]');
       if (display) display.textContent = this.#displayText();
+      // Pre-existing gap surfaced while adding mark (gh#339): #renderOptions()
+      // only rebuilds the LISTBOX rows — the trigger's leading visual
+      // (icon/avatar/mark) was only ever reconciled from render()'s call to
+      // #syncLeading(), never from this setter. So setting `.options = [...]`
+      // programmatically after connect (a documented, supported path) left a
+      // stale or missing leading on the trigger even though the listbox rows
+      // were correct. #syncLeading() already self-guards (multi-select /
+      // consumer-custom-trigger), so calling it here is safe.
+      this.#syncLeading();
     });
   }
 
   get options() { return this.#options; }
 
-  // Per-option leading markup: avatar (img) beats icon (icon-ui). Shared by
-  // the listbox rows AND the trigger (resolved against the selected option).
+  // Per-option leading markup: mark (adia-mark-ui) beats avatar (img) beats
+  // icon (icon-ui) — gh#339. Shared by the listbox rows AND the trigger
+  // (resolved against the selected option).
   static #optionLeadHTML(opt) {
     if (!opt) return '';
+    if (opt.mark) return `<adia-mark-ui size="xs"></adia-mark-ui>`;
     if (opt.avatar) return `<img data-option-avatar src="${escapeHTML(opt.avatar)}" alt="" />`;
     if (opt.icon) return `<icon-ui name="${escapeHTML(opt.icon)}"></icon-ui>`;
     return '';
   }
 
   /**
-   * Reflect the SELECTED option's icon/avatar in the trigger's leading slot.
-   * Single-select only (multi-select shows chips). Falls back to the host
-   * [avatar]/[icon] when the selected option carries neither. Only manages the
-   * leading WE stamped (`[data-select-leading]`) — a consumer-custom trigger
-   * owns its own leading.
+   * Reflect the SELECTED option's mark/avatar/icon in the trigger's leading
+   * slot. Single-select only (multi-select shows chips). Falls back to the
+   * host [mark]/[avatar]/[icon] when the selected option carries none of the
+   * three (mark wins over avatar, which wins over icon — gh#339). Only
+   * manages the leading WE stamped (`[data-select-leading]`) — a
+   * consumer-custom trigger owns its own leading.
    */
   #syncLeading() {
     if (this.multiple || !this.#ownTrigger) return;
@@ -687,11 +703,13 @@ export class UISelect extends UIFormElement {
     if (!trigger) return;
     const flat = this.#options.flatMap((o) => o.options || [o]);
     const sel = flat.find((o) => !o.header && !o.separator && o.value === this.value);
+    const mark = (sel && sel.mark) || this.mark || false;
     const avatar = (sel && sel.avatar) || this.avatar || '';
     const icon = (sel && sel.icon) || this.icon || '';
     const existing = trigger.querySelector(':scope > [data-select-leading]');
     let html = '';
-    if (avatar) html = `<img slot="leading" data-select-leading src="${escapeHTML(avatar)}" alt="" />`;
+    if (mark) html = `<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>`;
+    else if (avatar) html = `<img slot="leading" data-select-leading src="${escapeHTML(avatar)}" alt="" />`;
     else if (icon) html = `<icon-ui slot="leading" data-select-leading name="${escapeHTML(icon)}"></icon-ui>`;
     if (!html) { existing?.remove(); return; }
     const tmp = document.createElement('template');
@@ -751,7 +769,8 @@ export class UISelect extends UIFormElement {
       // SPEC-040 — multi-select option rows render a leading checkbox
       // indicator (CSS-driven via [data-multi-option]); the `check` icon
       // shows when aria-selected="true".
-      // Per-option leading glyph — avatar (img) wins over icon (icon-ui).
+      // Per-option leading glyph — mark (adia-mark-ui) wins over avatar
+      // (img), which wins over icon (icon-ui).
       const lead = UISelect.#optionLeadHTML(opt);
       if (this.multiple) {
         el.setAttribute('data-multi-option', '');

package/components/select/select.d.ts

@@ -11,6 +11,8 @@ export interface SelectOption {
   label?: string;
   icon?: string;
   avatar?: string;
+  /** Renders the Adia brand mark as this option's leading visual. Takes precedence over avatar/icon. */
+  mark?: boolean;
   disabled?: boolean;
   action?: string;
   divider?: boolean;
@@ -47,6 +49,8 @@ export class UISelect extends UIFormElement {
   icon: string;
   /** Leading avatar URL or name. */
   avatar: string;
+  /** Renders the Adia brand mark as the leading visual — takes precedence over avatar and icon (gh#339). */
+  mark: boolean;
   multiple: boolean;
   searchable: boolean;
   /** Allow values not in the option list (combobox mode). */

package/components/select/select.examples.md

@@ -13,37 +13,26 @@
 </field-ui>
 ```
 
-## size
+## variant
 
 ```html
-<field-ui label="Small">
-  <select-ui size="sm" placeholder="Pick a fruit">
-    <option value="apple">Apple</option>
-    <option value="banana">Banana</option>
-    <option value="cherry">Cherry</option>
+<field-ui label="Sort by">
+  <select-ui variant="ghost" value="recent">
+    <option value="recent">Most recent</option>
+    <option value="popular">Most popular</option>
+    <option value="name">Name (A–Z)</option>
   </select-ui>
 </field-ui>
 ```
 
-## grouped options
+## size
 
 ```html
-<field-ui label="Location">
-  <select-ui placeholder="Choose a city">
-    <optgroup label="North America">
-      <option value="nyc">New York</option>
-      <option value="sf">San Francisco</option>
-      <option value="toronto">Toronto</option>
-    </optgroup>
-    <optgroup label="Europe">
-      <option value="london">London</option>
-      <option value="paris">Paris</option>
-      <option value="berlin">Berlin</option>
-    </optgroup>
-    <optgroup label="Asia">
-      <option value="tokyo">Tokyo</option>
-      <option value="singapore">Singapore</option>
-    </optgroup>
+<field-ui label="Small">
+  <select-ui size="sm" placeholder="Pick a fruit">
+    <option value="apple">Apple</option>
+    <option value="banana">Banana</option>
+    <option value="cherry">Cherry</option>
   </select-ui>
 </field-ui>
 ```

package/components/select/select.test.js

@@ -359,4 +359,95 @@ describe('select-ui', () => {
       expect(s.hasAttribute('aria-label')).toBe(false);
     });
   });
+
+  // gh#339 — mark (adia-mark-ui) as a leading visual, alongside icon/avatar.
+  describe('mark (gh#339)', () => {
+    it('renders <adia-mark-ui> in the listbox row for a declarative <option mark>', async () => {
+      const s = mount(`
+        <select-ui placeholder="Choose…">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      const row = s.querySelector('[role="option"][data-value="adia"]');
+      expect(row.querySelector('adia-mark-ui')).not.toBeNull();
+      expect(s.options.find((o) => o.value === 'adia').mark).toBe(true);
+    });
+
+    it('reflects the SELECTED option\'s mark in the trigger leading slot', async () => {
+      const s = mount(`
+        <select-ui value="adia">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+
+    it('mark wins over avatar and icon when more than one is set on the same option', async () => {
+      const s = mount(`<select-ui value="a"></select-ui>`);
+      await tick();
+      s.options = [{ value: 'a', label: 'A', mark: true, avatar: 'https://example.test/a.png', icon: 'star' }];
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+
+    it('switching the SELECTED option from mark to avatar swaps the trigger leading element (not just its attributes)', async () => {
+      const s = mount(`
+        <select-ui value="adia">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      expect(s.querySelector('[slot="trigger"] > [data-select-leading]').tagName).toBe('ADIA-MARK-UI');
+      s.value = 'acme';
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('IMG');
+      expect(leading.getAttribute('src')).toBe('https://example.test/acme.png');
+    });
+
+    it('a host-level [mark] renders the brand mark as a static leading visual when no option overrides it', async () => {
+      const s = mount(`
+        <select-ui mark value="adia">
+          <option value="adia">Adia</option>
+        </select-ui>
+      `);
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+
+    it('renders <adia-mark-ui> in a listbox ROW under [multiple] mode too (shares #optionLeadHTML with single-select)', async () => {
+      const s = mount(`
+        <select-ui multiple value="adia">
+          <option value="adia" mark>Adia</option>
+          <option value="acme" avatar="https://example.test/acme.png">Acme</option>
+        </select-ui>
+      `);
+      await tick();
+      const row = s.querySelector('[role="option"][data-value="adia"]');
+      expect(row.querySelector('adia-mark-ui')).not.toBeNull();
+      // Multi-select shows chips, not a leading visual, in the TRIGGER — mark
+      // is a correct no-op there (#syncLeading's `if (this.multiple) return`).
+      expect(s.querySelector('[slot="trigger"] > [data-select-leading]')).toBeNull();
+    });
+
+    it('mark set via the .options property (not just the declarative attribute) is honoured', async () => {
+      const s = mount(`<select-ui value="adia"></select-ui>`);
+      await tick();
+      s.options = [
+        { value: 'adia', label: 'Adia', mark: true },
+        { value: 'acme', label: 'Acme', avatar: 'https://example.test/acme.png' },
+      ];
+      await tick();
+      const leading = s.querySelector('[slot="trigger"] > [data-select-leading]');
+      expect(leading.tagName).toBe('ADIA-MARK-UI');
+    });
+  });
 });

package/components/select/select.yaml

@@ -56,6 +56,11 @@ props:
     description: URL for leading avatar image (takes precedence over icon)
     type: string
     default: ""
+  mark:
+    description: Renders the Adia brand mark (`<adia-mark-ui>`) as the leading visual — takes precedence over avatar and icon. Token-driven (light/dark handled internally), so it fits a scheme-switching workspace/app switcher where a static logo URL can't invert. Per-option `mark` on an `<option>`/options-array entry works the same way, scoped to that row.
+    type: boolean
+    default: false
+    reflect: true
   disabled:
     description: Disables interaction and dims the control
     type: boolean
@@ -153,7 +158,7 @@ props:
     default: false
     reflect: true
   options:
-    description: "Option list. Array of {value, label, disabled?, icon?, avatar?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar render in the list AND reflect in the trigger's selected state."
+    description: "Option list. Array of {value, label, disabled?, icon?, avatar?, mark?} or grouped {label, options: [...]}. Alternative to declarative <option> / <optgroup> children. Per-option icon/avatar/mark render in the list AND reflect in the trigger's selected state (mark takes precedence over avatar, which takes precedence over icon)."
     type: array
     default: []
     dynamic: true  # JS-set collection prop with a custom setter — deliberately not in static properties
@@ -253,12 +258,16 @@ a2ui:
       at runtime. Or set `.options` programmatically as an array of
       `{value, label, disabled?}` (grouped form: `{label, options:[…]}`).
     - >-
-      Per-option visuals: give each <option> an `icon` (Phosphor name) or
-      `avatar` (image URL) — `<option value="light" icon="sun">`. Each row
-      renders its glyph in the list AND the trigger reflects the SELECTED
-      option's icon/avatar (theme pickers, assignee/account switchers).
-      `avatar` wins over `icon`; a host-level [icon]/[avatar] is the
-      fallback when the selected option carries neither.
+      Per-option visuals: give each <option> an `icon` (Phosphor name),
+      `avatar` (image URL), or `mark` (Adia brand mark) —
+      `<option value="light" icon="sun">`. Each row renders its glyph in
+      the list AND the trigger reflects the SELECTED option's icon/avatar/mark
+      (theme pickers, assignee/account switchers, workspace switchers).
+      `mark` wins over `avatar`, which wins over `icon`; a host-level
+      [mark]/[icon]/[avatar] is the fallback when the selected option
+      carries none of the three. `mark` renders `<adia-mark-ui>` — a
+      token-driven brand mark that inverts with the color scheme, so a
+      workspace/app switcher doesn't need a static, scheme-locked logo URL.
     - >-
       For dynamic option lists rendered inside <editor-shell>, set the
       JSON via the [data-options] attribute — <editor-shell>'s

package/dist/web-components.min.js

@@ -128,7 +128,7 @@ See the JSDoc header of icons-phosphor.js for the full recipe.`),jl(_u)):import(
   .value=\${signal.value}     \u2190 read the signal's current value
 Functions are not auto-invoked at render time; the slider reads
 .value synchronously. See USAGE.md "Reactive binding" for the
-parent-template-re-read pattern that works across frameworks.`);return}if(this.dual){if(this.lowerValue>this.upperValue){let a=!Number.isNaN(this.#l)&&this.lowerValue!==this.#l;!Number.isNaN(this.#c)&&this.upperValue!==this.#c&&!a?this.upperValue=this.lowerValue:this.lowerValue=this.upperValue}this.#l=this.lowerValue,this.#c=this.upperValue;let i=this.#h(this.lowerValue),n=this.#h(this.upperValue);this.style.setProperty("--slider-pct-lower",String(i)),this.style.setProperty("--slider-pct-upper",String(n));let r=this.querySelector('[slot="value-lower"]'),o=this.querySelector('[slot="value-upper"]');r&&(r.textContent=this.#u(this.lowerValue)),o&&(o.textContent=this.#u(this.upperValue)),this.#s&&(this.#s.setAttribute("aria-valuenow",this.lowerValue),this.#s.setAttribute("aria-valuetext",`${this.#u(this.lowerValue)}${this.suffix?" "+this.suffix:""}`)),this.#n&&(this.#n.setAttribute("aria-valuenow",this.upperValue),this.#n.setAttribute("aria-valuetext",`${this.#u(this.upperValue)}${this.suffix?" "+this.suffix:""}`)),this.syncValue(`${this.lowerValue},${this.upperValue}`)}else{let i=this.#h(this.value);this.style.setProperty("--slider-pct",String(i));let n=this.querySelector('[slot="value"]');n&&(n.textContent=this.#u(this.value)),this.setAttribute("aria-valuenow",this.value),this.setAttribute("aria-valuetext",`${this.#u(this.value)}${this.suffix?" "+this.suffix:""}`),this.syncValue(String(this.value))}let t=this.querySelector('[slot="label"]');if(t)t.textContent=this.label;else if(this.label){let i=this.querySelector('[slot="header"]');if(i){let n=document.createElement("span");n.slot="label",n.textContent=this.label,i.prepend(n)}}this.label&&this.setAttribute("aria-label",this.label);let e=this.querySelector('[slot="suffix"]');e&&(e.textContent=this.suffix)}#d(t,e=null){let i=this.#i||this.#s||this.#n;if(!this.#e||!i)return this.min;let n=this.#e.getBoundingClientRect(),r=i.getBoundingClientRect().width,o=n.width,a,l;if(this.dual?(a=o-2*r,l=e==="upper"?1.5*r:.5*r):(a=o-r,l=.5*r),a<=0)return this.min;let h=t-n.left,c=Math.max(0,Math.min(1,(h-l)/a)),u=this.min+c*(this.max-this.min);return this.#p(u)}#f(t){if(!this.#e)return 0;let e=this.#i||this.#s||this.#n;if(!e)return 0;let i=this.#e.getBoundingClientRect(),n=e.getBoundingClientRect().width,r=i.width;if(this.dual){let o=r-2*n,a=t==="upper"?this.#h(this.upperValue):this.#h(this.lowerValue),l=t==="upper"?1.5*n:.5*n;return i.left+l+a*o}else return i.left+.5*n+this.#h(this.value)*(r-n)}#p(t){let e=Math.round((t-this.min)/this.step)*this.step+this.min;return Math.max(this.min,Math.min(this.max,parseFloat(e.toFixed(10))))}#m(t){t!==this.value&&(this.value=t,this.scheduleThrottledInput())}#g(t){let e=Math.min(Math.max(t,this.min),this.upperValue);e!==this.lowerValue&&(this.lowerValue=e,this.scheduleThrottledInput())}#b(t){let e=Math.max(Math.min(t,this.max),this.lowerValue);e!==this.upperValue&&(this.upperValue=e,this.scheduleThrottledInput())}#y(){let t=this.dual?{lower:this.lowerValue,upper:this.upperValue}:{value:this.value};this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t}))}#O=t=>{if(this.disabled)return;t.preventDefault(),this.#r=!0,this.setAttribute("data-dragging","");let e;if(this.dual){let i=t.currentTarget?.dataset?.thumb;this.#a=i==="upper"?"upper":"lower",e=this.#a==="lower"?this.#s:this.#n,e?.setAttribute("data-active","")}else e=this.#i;if(this.#e&&e){let i=this.dual?this.#a:null;this.#o=t.clientX-this.#f(i)}else this.#o=0;e.setPointerCapture(t.pointerId),e.addEventListener("pointermove",this.#S),e.addEventListener("pointerup",this.#x)};#S=t=>{if(!this.#r)return;let e=t.clientX-this.#o;if(this.dual){let i=this.#d(e,this.#a);this.#a==="lower"?this.#g(i):this.#b(i)}else this.#m(this.#d(e))};#x=t=>{this.#r=!1,this.#o=0,this.removeAttribute("data-dragging");let e=this.dual?this.#a==="lower"?this.#s:this.#n:this.#i;e?.releasePointerCapture(t.pointerId),e?.removeEventListener("pointermove",this.#S),e?.removeEventListener("pointerup",this.#x),e?.removeAttribute("data-active"),this.flushPendingInput(),this.#y(),this.#a=null};#v=t=>{if(!this.disabled){if(this.dual){if(t.target===this.#s||t.target===this.#n)return;let e=Math.abs(t.clientX-this.#f("lower")),i=Math.abs(t.clientX-this.#f("upper"));e<=i?this.#g(this.#d(t.clientX,"lower")):this.#b(this.#d(t.clientX,"upper"))}else{if(t.target===this.#i)return;this.#m(this.#d(t.clientX))}this.flushPendingInput(),this.#y()}};#w=t=>{if(this.disabled)return;let e=0,i=null;switch(t.key){case"ArrowRight":case"ArrowUp":e=this.step;break;case"ArrowLeft":case"ArrowDown":e=-this.step;break;case"Home":i=this.min;break;case"End":i=this.max;break;case"PageUp":e=this.step*10;break;case"PageDown":e=-this.step*10;break;default:return}if(t.preventDefault(),this.dual){let r=this.ownerDocument?.activeElement===this.#n?"upper":"lower",o=r==="lower"?this.lowerValue:this.upperValue,a=i!==null?i:o+e;a=this.#p(a),r==="lower"?this.#g(a):this.#b(a)}else{let n=i!==null?i:this.value+e;this.#m(this.#p(n))}this.flushPendingInput(),this.#y()};disconnected(){super.disconnected(),this.#i?.removeEventListener("pointerdown",this.#O),this.#s?.removeEventListener("pointerdown",this.#O),this.#n?.removeEventListener("pointerdown",this.#O),this.#e?.removeEventListener("click",this.#v),this.removeEventListener("keydown",this.#w),this.#e=null,this.#i=null,this.#s=null,this.#n=null}};x("slider-ui",un);var RA=typeof CSS<"u"?(CSS.supports?.("anchor-name: --x")??!1)&&(CSS.supports?.("position-area: bottom")??!1):!1,IA=0;function lt(s,t,e={}){let{placement:i="bottom-start",gap:n=4,matchWidth:r=!1}=e;return RA?DA(s,t,{placement:i,gap:n,matchWidth:r}):NA(s,t,{placement:i,gap:n,matchWidth:r})}function DA(s,t,{placement:e,gap:i,matchWidth:n}){let r=`--a-anchor-${++IA}`,o=s.style.anchorName,a={position:t.style.position,positionAnchor:t.style.positionAnchor,positionArea:t.style.positionArea,positionTryFallbacks:t.style.positionTryFallbacks,margin:t.style.margin,width:t.style.width,maxWidth:t.style.maxWidth,maxHeight:t.style.maxHeight,overflowY:t.style.overflowY,top:t.style.top,left:t.style.left};s.style.anchorName=r;let l=e;if(e.startsWith("bottom")||e.startsWith("top")){let h=s.getBoundingClientRect(),u=window.innerHeight-h.bottom-i*2,d=h.top-i*2,f=XA(getComputedStyle(t).getPropertyValue("--popover-max-height")),p=Number.isFinite(f)?f:t.scrollHeight||0,m=e.startsWith("bottom"),O=p<=u,g=p<=d,y=m;m&&!O?y=g?!1:u>=d:!m&&!g&&(y=O?!0:u>d),l=e.replace(/^(bottom|top)/,y?"bottom":"top");let v=Math.max(40,Math.floor(y?u:d));t.style.maxHeight=`${Number.isFinite(f)?Math.min(f,v):v}px`}return t.style.position="fixed",t.style.positionAnchor=r,t.style.positionArea=qA(l),t.style.margin=ZA(l,i),t.style.positionTryFallbacks="flip-block, flip-inline, flip-block flip-inline",t.style.width=n?`anchor-size(${r} width)`:"max-content",t.style.maxWidth="min(calc(100vw - 1rem), var(--popover-max-width, 32rem))",!l.startsWith("bottom")&&!l.startsWith("top")&&(t.style.maxHeight="calc(100vh - 3rem)"),t.style.overflowY="auto",t.style.top="",t.style.left="",()=>{s.style.anchorName=o;for(let[h,c]of Object.entries(a))t.style[h]=c}}function XA(s){let t=String(s||"").trim();if(!t)return NaN;let e=/^(-?\d+(?:\.\d+)?)(px|rem)$/.exec(t);if(!e)return NaN;let i=parseFloat(e[1]);if(e[2]==="px")return i;let n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return i*n}function ZA(s,t){return s.startsWith("bottom")?`${t}px 0 0 0`:s.startsWith("top")?`0 0 ${t}px 0`:s.startsWith("left")?`0 ${t}px 0 0`:s.startsWith("right")?`0 0 0 ${t}px`:`${t}px`}function qA(s){switch(s){case"bottom":return"bottom span-all";case"bottom-start":return"bottom span-right";case"bottom-end":return"bottom span-left";case"top":return"top span-all";case"top-start":return"top span-right";case"top-end":return"top span-left";case"left":return"left span-all";case"left-start":return"left span-bottom";case"left-end":return"left span-top";case"right":return"right span-all";case"right-start":return"right span-bottom";case"right-end":return"right span-top";default:return"bottom span-right"}}function NA(s,t,{placement:e,gap:i,matchWidth:n}){let r=t.style.maxHeight,o=t.style.overflowY;function a(){if(!s||!t)return;t.style.maxHeight=r,t.style.overflowY=o;let h=s.getBoundingClientRect(),c=t.getBoundingClientRect(),u=window.innerWidth,d=window.innerHeight,f=e;if(f.startsWith("bottom")||f.startsWith("top")){let O=d-h.bottom-i*2,g=h.top-i*2,y=f.startsWith("bottom"),v=c.height<=O,S=c.height<=g,k=y;y&&!v?k=S?!1:O>=g:!y&&!S&&(k=v?!0:O>g),f=f.replace(/^(bottom|top)/,k?"bottom":"top");let $=Math.max(0,Math.floor(k?O:g));c.height>$&&(t.style.maxHeight=`${$}px`,t.style.overflowY="auto",c=t.getBoundingClientRect())}let p,m;f.startsWith("top")?p=h.top-c.height-i:f.startsWith("bottom")?p=h.bottom+i:f.startsWith("left")?(m=h.left-c.width-i,f==="left-start"?p=h.top:f==="left-end"?p=h.bottom-c.height:p=h.top+(h.height-c.height)/2):f.startsWith("right")&&(m=h.right+i,f==="right-start"?p=h.top:f==="right-end"?p=h.bottom-c.height:p=h.top+(h.height-c.height)/2),m===void 0&&(f.endsWith("-start")?m=h.left:f.endsWith("-end")?m=h.right-c.width:m=h.left+(h.width-c.width)/2),m+c.width>u-i&&(m=h.right-c.width),m<i&&(m=h.left),(f.startsWith("left")||f.startsWith("right"))&&(p=Math.max(i,Math.min(p,d-c.height-i))),m=Math.max(i,Math.min(m,u-c.width-i)),t.style.position="fixed",t.style.top=`${p}px`,t.style.left=`${m}px`,n&&(t.style.width=`${h.width}px`)}t.style.opacity="0",requestAnimationFrame(()=>{a(),t.style.opacity=""});let l=BA(s);for(let h of l)h.addEventListener("scroll",a,{passive:!0});return window.addEventListener("resize",a,{passive:!0}),()=>{for(let h of l)h.removeEventListener("scroll",a);window.removeEventListener("resize",a),t.style.maxHeight=r,t.style.overflowY=o}}function BA(s){let t=[document],e=s?.parentElement;for(;e;){let i=getComputedStyle(e);/auto|scroll/.test(i.overflow+i.overflowX+i.overflowY)&&t.push(e),e=e.parentElement}return t}_e();function Rt(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var dn=class s extends Z{static labelDeprecated=!1;static requiredIcons=["caret-down","check","x","magnifying-glass"];static#t=new WeakSet;static properties={...Z.properties,placeholder:{type:String,default:"Select...",reflect:!0},size:{type:String,default:"md",reflect:!0},open:{type:Boolean,default:!1,reflect:!0},label:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},avatar:{type:String,default:"",reflect:!0},multiple:{type:Boolean,default:!1,reflect:!0},searchable:{type:Boolean,default:!1,reflect:!0},freeText:{type:Boolean,default:!1,reflect:!0,attribute:"free-text"},divider:{type:Boolean,default:!1,reflect:!0},hint:{type:String,default:"",reflect:!0},maxChips:{type:Number,default:0,reflect:!0,attribute:"max-chips"},min:{type:Number,default:0,reflect:!0},max:{type:Number,default:0,reflect:!0},selectAll:{type:Boolean,default:!1,reflect:!0,attribute:"select-all"},clearable:{type:Boolean,default:!1,reflect:!0}};static#e=0;static template=()=>null;#i=[];#s=!1;#n=null;#r=null;#a="";#o=null;#l=null;#c=null;#h=()=>{this.disabled||(this.open=!0)};#u=t=>{t.stopPropagation(),this.disabled||(this.open=!0)};#d=t=>{let e=t.currentTarget;t.stopPropagation();let i=e.__adiaOption;if(i&&!i.disabled){if(i.action){this.open=!1,this.dispatchEvent(new CustomEvent("action",{bubbles:!0,detail:{action:i.action}}));return}if(this.multiple){this.toggle(i.value);return}this.value=i.value,this.open=!1,this.#a="",this.syncValue(i.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))}};syncValue(t){if(!this.multiple)return super.syncValue(t);let e=t??this.value??"";this.internals.setFormValue(e);let i=String(e).split(",").map(n=>n.trim()).filter(Boolean);if(this.min>0&&i.length<this.min){this.internals.setValidity({tooShort:!0},this.getAttribute("data-msg-min")||`Please select at least ${this.min}.`,this);return}if(this.max>0&&i.length>this.max){this.internals.setValidity({tooLong:!0},this.getAttribute("data-msg-max")||`Please select no more than ${this.max}.`,this);return}if(this.required&&i.length===0){this.internals.setValidity({valueMissing:!0},this.getAttribute("data-msg-required")||"This field is required.",this);return}this.internals.setValidity({})}#f(){return this.value?String(this.value).split(",").map(t=>t.trim()).filter(Boolean):[]}#p(t){let e=new Set,i=[];for(let n of t){if(n==null||n==="")continue;let r=String(n);e.has(r)||(e.add(r),i.push(r))}return i.join(",")}toggle(t){if(!this.multiple){this.value=t,this.syncValue(t),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}));return}let e=this.#f(),i=e.indexOf(String(t)),n=e.slice(),r=[],o=[];if(i>=0)e.splice(i,1),o=[String(t)];else{if(this.max>0&&e.length>=this.max){this.dispatchEvent(new CustomEvent("invalid",{bubbles:!0,detail:{value:n,reason:"max"}}));return}e.push(String(t)),r=[String(t)]}let a=this.#p(e);this.value=a,this.syncValue(a),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e,added:r,removed:o}}))}selectAllOptions(){if(!this.multiple)return;let t=this.#i.flatMap(o=>o.options||[o]).filter(o=>!o.disabled&&!o.separator&&!o.header&&o.value!=null),e=this.#p(t.map(o=>o.value));if(e===this.value)return;let i=this.#f();this.value=e,this.syncValue(e),this.render();let n=this.#f(),r=n.filter(o=>!i.includes(o));this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:n,added:r,removed:[]}}))}clear(){if(!this.multiple){this.value="",this.syncValue(""),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:""}}));return}let t=this.#f();t.length!==0&&(this.value="",this.syncValue(""),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:[],added:[],removed:t}})))}#m(){let t=this.#f();if(t.length===0)return;let e=t.pop(),i=this.#p(t);this.value=i,this.syncValue(i),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:t,added:[],removed:[e]}}))}#g=t=>{if(!this.multiple)return;let e=t.target;if(!e||e.tagName!=="TAG-UI")return;let i=e.dataset.chipValue;if(!i)return;t.stopPropagation();let n=this.#f().filter(o=>o!==i),r=this.#p(n);this.value=r,this.syncValue(r),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:n,added:[],removed:[i]}}))};#b=t=>{t.stopPropagation(),!this.disabled&&(this.open=!0)};#y=t=>{t.stopPropagation(),!(this.disabled||this.readonly)&&this.clear()};#O=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;let i=this.#i.flatMap(o=>o.options||[o]).filter(o=>!o.disabled&&!o.separator&&!o.header&&o.value!=null).map(o=>String(o.value)),n=new Set(this.#f());i.length>0&&i.every(o=>n.has(o))?this.clear():this.selectAllOptions()};#S=!1;#x(){let t="Select...",e=this.hasAttribute("aria-label")&&!this.#S,i=!!this.label||this.hasAttribute("aria-labelledby");!e&&!i&&this.placeholder&&this.placeholder!==t?(this.setAttribute("aria-label",this.placeholder),this.#S=!0):this.#S&&(this.removeAttribute("aria-label"),this.#S=!1)}connected(){super.connected(),this.setAttribute("role","combobox"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.#P),this.addEventListener("keydown",this.#L),this.addEventListener("remove",this.#g),this.#i.length===0&&this.#w(),!this.#c&&typeof MutationObserver<"u"&&(this.#c=new MutationObserver(()=>{if(!(this.#i.length||!this.#v().some(e=>e.tagName==="OPTION"||e.tagName==="OPTGROUP"))&&(this.#w(),this.#i.length)){this.#$();let e=this.querySelector('[slot="display"]');e&&(e.textContent=this.#E())}})),this.#c?.observe(this,{childList:!0,subtree:!0})}render(){if(this.multiple?this.setAttribute("data-multi-chips",""):this.removeAttribute("data-multi-chips"),this.#x(),this.querySelector('[slot="trigger"]')){let e=this.querySelector('[slot="display"]');if(e&&!this.multiple)e.tagName==="INPUT"?this.#a||(e.value=this.#E()===this.placeholder?"":this.#E()):e.textContent=this.#E();else if(e&&this.multiple){let i=this.#f().length>0;e.tagName==="INPUT"?(e.placeholder=i?"":this.placeholder||"",this.#a||(e.value="")):e.textContent=i?"":this.placeholder||""}}else{this.#s=!0;let e=this.#n;e?.parentNode===this&&this.removeChild(e);let i=this.avatar?`<img slot="leading" data-select-leading src="${Rt(this.avatar)}" alt="" />`:this.icon?`<icon-ui slot="leading" data-select-leading name="${Rt(this.icon)}"></icon-ui>`:"",n=this.searchable?`<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${Rt(this.placeholder||"")}" value="${Rt(this.#E()===this.placeholder?"":this.#E())}" />`:`<span slot="display">${Rt(this.#E())}</span>`,r=this.hint?`select-hint-${++s.#e}`:"",o=this.hint?`<span slot="hint" id="${r}">${Rt(this.hint)}</span>`:"";this.innerHTML=`
+parent-template-re-read pattern that works across frameworks.`);return}if(this.dual){if(this.lowerValue>this.upperValue){let a=!Number.isNaN(this.#l)&&this.lowerValue!==this.#l;!Number.isNaN(this.#c)&&this.upperValue!==this.#c&&!a?this.upperValue=this.lowerValue:this.lowerValue=this.upperValue}this.#l=this.lowerValue,this.#c=this.upperValue;let i=this.#h(this.lowerValue),n=this.#h(this.upperValue);this.style.setProperty("--slider-pct-lower",String(i)),this.style.setProperty("--slider-pct-upper",String(n));let r=this.querySelector('[slot="value-lower"]'),o=this.querySelector('[slot="value-upper"]');r&&(r.textContent=this.#u(this.lowerValue)),o&&(o.textContent=this.#u(this.upperValue)),this.#s&&(this.#s.setAttribute("aria-valuenow",this.lowerValue),this.#s.setAttribute("aria-valuetext",`${this.#u(this.lowerValue)}${this.suffix?" "+this.suffix:""}`)),this.#n&&(this.#n.setAttribute("aria-valuenow",this.upperValue),this.#n.setAttribute("aria-valuetext",`${this.#u(this.upperValue)}${this.suffix?" "+this.suffix:""}`)),this.syncValue(`${this.lowerValue},${this.upperValue}`)}else{let i=this.#h(this.value);this.style.setProperty("--slider-pct",String(i));let n=this.querySelector('[slot="value"]');n&&(n.textContent=this.#u(this.value)),this.setAttribute("aria-valuenow",this.value),this.setAttribute("aria-valuetext",`${this.#u(this.value)}${this.suffix?" "+this.suffix:""}`),this.syncValue(String(this.value))}let t=this.querySelector('[slot="label"]');if(t)t.textContent=this.label;else if(this.label){let i=this.querySelector('[slot="header"]');if(i){let n=document.createElement("span");n.slot="label",n.textContent=this.label,i.prepend(n)}}this.label&&this.setAttribute("aria-label",this.label);let e=this.querySelector('[slot="suffix"]');e&&(e.textContent=this.suffix)}#d(t,e=null){let i=this.#i||this.#s||this.#n;if(!this.#e||!i)return this.min;let n=this.#e.getBoundingClientRect(),r=i.getBoundingClientRect().width,o=n.width,a,l;if(this.dual?(a=o-2*r,l=e==="upper"?1.5*r:.5*r):(a=o-r,l=.5*r),a<=0)return this.min;let h=t-n.left,c=Math.max(0,Math.min(1,(h-l)/a)),u=this.min+c*(this.max-this.min);return this.#p(u)}#f(t){if(!this.#e)return 0;let e=this.#i||this.#s||this.#n;if(!e)return 0;let i=this.#e.getBoundingClientRect(),n=e.getBoundingClientRect().width,r=i.width;if(this.dual){let o=r-2*n,a=t==="upper"?this.#h(this.upperValue):this.#h(this.lowerValue),l=t==="upper"?1.5*n:.5*n;return i.left+l+a*o}else return i.left+.5*n+this.#h(this.value)*(r-n)}#p(t){let e=Math.round((t-this.min)/this.step)*this.step+this.min;return Math.max(this.min,Math.min(this.max,parseFloat(e.toFixed(10))))}#m(t){t!==this.value&&(this.value=t,this.scheduleThrottledInput())}#g(t){let e=Math.min(Math.max(t,this.min),this.upperValue);e!==this.lowerValue&&(this.lowerValue=e,this.scheduleThrottledInput())}#b(t){let e=Math.max(Math.min(t,this.max),this.lowerValue);e!==this.upperValue&&(this.upperValue=e,this.scheduleThrottledInput())}#y(){let t=this.dual?{lower:this.lowerValue,upper:this.upperValue}:{value:this.value};this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:t}))}#O=t=>{if(this.disabled)return;t.preventDefault(),this.#r=!0,this.setAttribute("data-dragging","");let e;if(this.dual){let i=t.currentTarget?.dataset?.thumb;this.#a=i==="upper"?"upper":"lower",e=this.#a==="lower"?this.#s:this.#n,e?.setAttribute("data-active","")}else e=this.#i;if(this.#e&&e){let i=this.dual?this.#a:null;this.#o=t.clientX-this.#f(i)}else this.#o=0;e.setPointerCapture(t.pointerId),e.addEventListener("pointermove",this.#S),e.addEventListener("pointerup",this.#x)};#S=t=>{if(!this.#r)return;let e=t.clientX-this.#o;if(this.dual){let i=this.#d(e,this.#a);this.#a==="lower"?this.#g(i):this.#b(i)}else this.#m(this.#d(e))};#x=t=>{this.#r=!1,this.#o=0,this.removeAttribute("data-dragging");let e=this.dual?this.#a==="lower"?this.#s:this.#n:this.#i;e?.releasePointerCapture(t.pointerId),e?.removeEventListener("pointermove",this.#S),e?.removeEventListener("pointerup",this.#x),e?.removeAttribute("data-active"),this.flushPendingInput(),this.#y(),this.#a=null};#v=t=>{if(!this.disabled){if(this.dual){if(t.target===this.#s||t.target===this.#n)return;let e=Math.abs(t.clientX-this.#f("lower")),i=Math.abs(t.clientX-this.#f("upper"));e<=i?this.#g(this.#d(t.clientX,"lower")):this.#b(this.#d(t.clientX,"upper"))}else{if(t.target===this.#i)return;this.#m(this.#d(t.clientX))}this.flushPendingInput(),this.#y()}};#w=t=>{if(this.disabled)return;let e=0,i=null;switch(t.key){case"ArrowRight":case"ArrowUp":e=this.step;break;case"ArrowLeft":case"ArrowDown":e=-this.step;break;case"Home":i=this.min;break;case"End":i=this.max;break;case"PageUp":e=this.step*10;break;case"PageDown":e=-this.step*10;break;default:return}if(t.preventDefault(),this.dual){let r=this.ownerDocument?.activeElement===this.#n?"upper":"lower",o=r==="lower"?this.lowerValue:this.upperValue,a=i!==null?i:o+e;a=this.#p(a),r==="lower"?this.#g(a):this.#b(a)}else{let n=i!==null?i:this.value+e;this.#m(this.#p(n))}this.flushPendingInput(),this.#y()};disconnected(){super.disconnected(),this.#i?.removeEventListener("pointerdown",this.#O),this.#s?.removeEventListener("pointerdown",this.#O),this.#n?.removeEventListener("pointerdown",this.#O),this.#e?.removeEventListener("click",this.#v),this.removeEventListener("keydown",this.#w),this.#e=null,this.#i=null,this.#s=null,this.#n=null}};x("slider-ui",un);var RA=typeof CSS<"u"?(CSS.supports?.("anchor-name: --x")??!1)&&(CSS.supports?.("position-area: bottom")??!1):!1,IA=0;function lt(s,t,e={}){let{placement:i="bottom-start",gap:n=4,matchWidth:r=!1}=e;return RA?DA(s,t,{placement:i,gap:n,matchWidth:r}):NA(s,t,{placement:i,gap:n,matchWidth:r})}function DA(s,t,{placement:e,gap:i,matchWidth:n}){let r=`--a-anchor-${++IA}`,o=s.style.anchorName,a={position:t.style.position,positionAnchor:t.style.positionAnchor,positionArea:t.style.positionArea,positionTryFallbacks:t.style.positionTryFallbacks,margin:t.style.margin,width:t.style.width,maxWidth:t.style.maxWidth,maxHeight:t.style.maxHeight,overflowY:t.style.overflowY,top:t.style.top,left:t.style.left};s.style.anchorName=r;let l=e;if(e.startsWith("bottom")||e.startsWith("top")){let h=s.getBoundingClientRect(),u=window.innerHeight-h.bottom-i*2,d=h.top-i*2,f=XA(getComputedStyle(t).getPropertyValue("--popover-max-height")),p=Number.isFinite(f)?f:t.scrollHeight||0,m=e.startsWith("bottom"),O=p<=u,g=p<=d,y=m;m&&!O?y=g?!1:u>=d:!m&&!g&&(y=O?!0:u>d),l=e.replace(/^(bottom|top)/,y?"bottom":"top");let v=Math.max(40,Math.floor(y?u:d));t.style.maxHeight=`${Number.isFinite(f)?Math.min(f,v):v}px`}return t.style.position="fixed",t.style.positionAnchor=r,t.style.positionArea=qA(l),t.style.margin=ZA(l,i),t.style.positionTryFallbacks="flip-block, flip-inline, flip-block flip-inline",t.style.width=n?`anchor-size(${r} width)`:"max-content",t.style.maxWidth="min(calc(100vw - 1rem), var(--popover-max-width, 32rem))",!l.startsWith("bottom")&&!l.startsWith("top")&&(t.style.maxHeight="calc(100vh - 3rem)"),t.style.overflowY="auto",t.style.top="",t.style.left="",()=>{s.style.anchorName=o;for(let[h,c]of Object.entries(a))t.style[h]=c}}function XA(s){let t=String(s||"").trim();if(!t)return NaN;let e=/^(-?\d+(?:\.\d+)?)(px|rem)$/.exec(t);if(!e)return NaN;let i=parseFloat(e[1]);if(e[2]==="px")return i;let n=parseFloat(getComputedStyle(document.documentElement).fontSize)||16;return i*n}function ZA(s,t){return s.startsWith("bottom")?`${t}px 0 0 0`:s.startsWith("top")?`0 0 ${t}px 0`:s.startsWith("left")?`0 ${t}px 0 0`:s.startsWith("right")?`0 0 0 ${t}px`:`${t}px`}function qA(s){switch(s){case"bottom":return"bottom span-all";case"bottom-start":return"bottom span-right";case"bottom-end":return"bottom span-left";case"top":return"top span-all";case"top-start":return"top span-right";case"top-end":return"top span-left";case"left":return"left span-all";case"left-start":return"left span-bottom";case"left-end":return"left span-top";case"right":return"right span-all";case"right-start":return"right span-bottom";case"right-end":return"right span-top";default:return"bottom span-right"}}function NA(s,t,{placement:e,gap:i,matchWidth:n}){let r=t.style.maxHeight,o=t.style.overflowY;function a(){if(!s||!t)return;t.style.maxHeight=r,t.style.overflowY=o;let h=s.getBoundingClientRect(),c=t.getBoundingClientRect(),u=window.innerWidth,d=window.innerHeight,f=e;if(f.startsWith("bottom")||f.startsWith("top")){let O=d-h.bottom-i*2,g=h.top-i*2,y=f.startsWith("bottom"),v=c.height<=O,S=c.height<=g,k=y;y&&!v?k=S?!1:O>=g:!y&&!S&&(k=v?!0:O>g),f=f.replace(/^(bottom|top)/,k?"bottom":"top");let $=Math.max(0,Math.floor(k?O:g));c.height>$&&(t.style.maxHeight=`${$}px`,t.style.overflowY="auto",c=t.getBoundingClientRect())}let p,m;f.startsWith("top")?p=h.top-c.height-i:f.startsWith("bottom")?p=h.bottom+i:f.startsWith("left")?(m=h.left-c.width-i,f==="left-start"?p=h.top:f==="left-end"?p=h.bottom-c.height:p=h.top+(h.height-c.height)/2):f.startsWith("right")&&(m=h.right+i,f==="right-start"?p=h.top:f==="right-end"?p=h.bottom-c.height:p=h.top+(h.height-c.height)/2),m===void 0&&(f.endsWith("-start")?m=h.left:f.endsWith("-end")?m=h.right-c.width:m=h.left+(h.width-c.width)/2),m+c.width>u-i&&(m=h.right-c.width),m<i&&(m=h.left),(f.startsWith("left")||f.startsWith("right"))&&(p=Math.max(i,Math.min(p,d-c.height-i))),m=Math.max(i,Math.min(m,u-c.width-i)),t.style.position="fixed",t.style.top=`${p}px`,t.style.left=`${m}px`,n&&(t.style.width=`${h.width}px`)}t.style.opacity="0",requestAnimationFrame(()=>{a(),t.style.opacity=""});let l=BA(s);for(let h of l)h.addEventListener("scroll",a,{passive:!0});return window.addEventListener("resize",a,{passive:!0}),()=>{for(let h of l)h.removeEventListener("scroll",a);window.removeEventListener("resize",a),t.style.maxHeight=r,t.style.overflowY=o}}function BA(s){let t=[document],e=s?.parentElement;for(;e;){let i=getComputedStyle(e);/auto|scroll/.test(i.overflow+i.overflowX+i.overflowY)&&t.push(e),e=e.parentElement}return t}_e();function Rt(s){return s.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;")}var dn=class s extends Z{static labelDeprecated=!1;static requiredIcons=["caret-down","check","x","magnifying-glass"];static#t=new WeakSet;static properties={...Z.properties,placeholder:{type:String,default:"Select...",reflect:!0},size:{type:String,default:"md",reflect:!0},open:{type:Boolean,default:!1,reflect:!0},label:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},avatar:{type:String,default:"",reflect:!0},mark:{type:Boolean,default:!1,reflect:!0},multiple:{type:Boolean,default:!1,reflect:!0},searchable:{type:Boolean,default:!1,reflect:!0},freeText:{type:Boolean,default:!1,reflect:!0,attribute:"free-text"},divider:{type:Boolean,default:!1,reflect:!0},hint:{type:String,default:"",reflect:!0},maxChips:{type:Number,default:0,reflect:!0,attribute:"max-chips"},min:{type:Number,default:0,reflect:!0},max:{type:Number,default:0,reflect:!0},selectAll:{type:Boolean,default:!1,reflect:!0,attribute:"select-all"},clearable:{type:Boolean,default:!1,reflect:!0}};static#e=0;static template=()=>null;#i=[];#s=!1;#n=null;#r=null;#a="";#o=null;#l=null;#c=null;#h=()=>{this.disabled||(this.open=!0)};#u=t=>{t.stopPropagation(),this.disabled||(this.open=!0)};#d=t=>{let e=t.currentTarget;t.stopPropagation();let i=e.__adiaOption;if(i&&!i.disabled){if(i.action){this.open=!1,this.dispatchEvent(new CustomEvent("action",{bubbles:!0,detail:{action:i.action}}));return}if(this.multiple){this.toggle(i.value);return}this.value=i.value,this.open=!1,this.#a="",this.syncValue(i.value),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))}};syncValue(t){if(!this.multiple)return super.syncValue(t);let e=t??this.value??"";this.internals.setFormValue(e);let i=String(e).split(",").map(n=>n.trim()).filter(Boolean);if(this.min>0&&i.length<this.min){this.internals.setValidity({tooShort:!0},this.getAttribute("data-msg-min")||`Please select at least ${this.min}.`,this);return}if(this.max>0&&i.length>this.max){this.internals.setValidity({tooLong:!0},this.getAttribute("data-msg-max")||`Please select no more than ${this.max}.`,this);return}if(this.required&&i.length===0){this.internals.setValidity({valueMissing:!0},this.getAttribute("data-msg-required")||"This field is required.",this);return}this.internals.setValidity({})}#f(){return this.value?String(this.value).split(",").map(t=>t.trim()).filter(Boolean):[]}#p(t){let e=new Set,i=[];for(let n of t){if(n==null||n==="")continue;let r=String(n);e.has(r)||(e.add(r),i.push(r))}return i.join(",")}toggle(t){if(!this.multiple){this.value=t,this.syncValue(t),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}));return}let e=this.#f(),i=e.indexOf(String(t)),n=e.slice(),r=[],o=[];if(i>=0)e.splice(i,1),o=[String(t)];else{if(this.max>0&&e.length>=this.max){this.dispatchEvent(new CustomEvent("invalid",{bubbles:!0,detail:{value:n,reason:"max"}}));return}e.push(String(t)),r=[String(t)]}let a=this.#p(e);this.value=a,this.syncValue(a),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:e,added:r,removed:o}}))}selectAllOptions(){if(!this.multiple)return;let t=this.#i.flatMap(o=>o.options||[o]).filter(o=>!o.disabled&&!o.separator&&!o.header&&o.value!=null),e=this.#p(t.map(o=>o.value));if(e===this.value)return;let i=this.#f();this.value=e,this.syncValue(e),this.render();let n=this.#f(),r=n.filter(o=>!i.includes(o));this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:n,added:r,removed:[]}}))}clear(){if(!this.multiple){this.value="",this.syncValue(""),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:""}}));return}let t=this.#f();t.length!==0&&(this.value="",this.syncValue(""),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:[],added:[],removed:t}})))}#m(){let t=this.#f();if(t.length===0)return;let e=t.pop(),i=this.#p(t);this.value=i,this.syncValue(i),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:t,added:[],removed:[e]}}))}#g=t=>{if(!this.multiple)return;let e=t.target;if(!e||e.tagName!=="TAG-UI")return;let i=e.dataset.chipValue;if(!i)return;t.stopPropagation();let n=this.#f().filter(o=>o!==i),r=this.#p(n);this.value=r,this.syncValue(r),this.render(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:n,added:[],removed:[i]}}))};#b=t=>{t.stopPropagation(),!this.disabled&&(this.open=!0)};#y=t=>{t.stopPropagation(),!(this.disabled||this.readonly)&&this.clear()};#O=t=>{if(t.stopPropagation(),this.disabled||this.readonly)return;let i=this.#i.flatMap(o=>o.options||[o]).filter(o=>!o.disabled&&!o.separator&&!o.header&&o.value!=null).map(o=>String(o.value)),n=new Set(this.#f());i.length>0&&i.every(o=>n.has(o))?this.clear():this.selectAllOptions()};#S=!1;#x(){let t="Select...",e=this.hasAttribute("aria-label")&&!this.#S,i=!!this.label||this.hasAttribute("aria-labelledby");!e&&!i&&this.placeholder&&this.placeholder!==t?(this.setAttribute("aria-label",this.placeholder),this.#S=!0):this.#S&&(this.removeAttribute("aria-label"),this.#S=!1)}connected(){super.connected(),this.setAttribute("role","combobox"),this.setAttribute("tabindex","0"),this.addEventListener("click",this.#P),this.addEventListener("keydown",this.#L),this.addEventListener("remove",this.#g),this.#i.length===0&&this.#w(),!this.#c&&typeof MutationObserver<"u"&&(this.#c=new MutationObserver(()=>{if(!(this.#i.length||!this.#v().some(e=>e.tagName==="OPTION"||e.tagName==="OPTGROUP"))&&(this.#w(),this.#i.length)){this.#$();let e=this.querySelector('[slot="display"]');e&&(e.textContent=this.#E())}})),this.#c?.observe(this,{childList:!0,subtree:!0})}render(){if(this.multiple?this.setAttribute("data-multi-chips",""):this.removeAttribute("data-multi-chips"),this.#x(),this.querySelector('[slot="trigger"]')){let e=this.querySelector('[slot="display"]');if(e&&!this.multiple)e.tagName==="INPUT"?this.#a||(e.value=this.#E()===this.placeholder?"":this.#E()):e.textContent=this.#E();else if(e&&this.multiple){let i=this.#f().length>0;e.tagName==="INPUT"?(e.placeholder=i?"":this.placeholder||"",this.#a||(e.value="")):e.textContent=i?"":this.placeholder||""}}else{this.#s=!0;let e=this.#n;e?.parentNode===this&&this.removeChild(e);let i=this.mark?'<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>':this.avatar?`<img slot="leading" data-select-leading src="${Rt(this.avatar)}" alt="" />`:this.icon?`<icon-ui slot="leading" data-select-leading name="${Rt(this.icon)}"></icon-ui>`:"",n=this.searchable?`<input slot="display" type="text" role="combobox" aria-autocomplete="list" autocomplete="off" placeholder="${Rt(this.placeholder||"")}" value="${Rt(this.#E()===this.placeholder?"":this.#E())}" />`:`<span slot="display">${Rt(this.#E())}</span>`,r=this.hint?`select-hint-${++s.#e}`:"",o=this.hint?`<span slot="hint" id="${r}">${Rt(this.hint)}</span>`:"";this.innerHTML=`
         <span slot="trigger">
           ${i}
           <span data-chips></span>
@@ -137,7 +137,7 @@ parent-template-re-read pattern that works across frameworks.`);return}if(this.d
           <icon-ui name="caret-down" slot="caret"></icon-ui>
         </span>
         ${o}
-      `,this.hint&&this.setAttribute("aria-describedby",r);let a=this.querySelector("[data-clear-all]");a&&(a.removeEventListener("click",this.#y),a.addEventListener("click",this.#y)),this.searchable&&(this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u)),this.#o=this.querySelector('input[slot="display"]'),this.#o&&(this.#o.addEventListener("input",this.#T),this.#o.addEventListener("focus",this.#h),this.#o.addEventListener("click",this.#u))),e&&this.appendChild(e)}this.#A(),this.multiple&&this.#M();let t=this.querySelector("[data-clear-all]");if(t&&(this.multiple&&this.clearable&&this.#f().length>0&&!this.disabled&&!this.readonly?t.removeAttribute("hidden"):t.setAttribute("hidden","")),this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n)),this.#$()),this.#n){let e=this.multiple?new Set(this.value.split(",").map(i=>i.trim()).filter(Boolean)):null;for(let i of this.#n.querySelectorAll('[role="option"]')){let n=i.getAttribute("data-value");(e?e.has(n):n===this.value)?i.setAttribute("aria-selected","true"):i.removeAttribute("aria-selected")}}if(this.setAttribute("aria-expanded",String(this.open)),this.open){this.#n?.showPopover?.();let e=this.querySelector('[slot="trigger"]')||this;this.#n.style.minWidth=`${e.getBoundingClientRect().width}px`,this.#n.style.width="max-content",this.#r=lt(e,this.#n,{placement:this.getAttribute("placement")||"bottom-start",gap:4,matchWidth:!1}),this.#l=requestAnimationFrame(()=>{this.#l=null,document.addEventListener("pointerdown",this.#R,{once:!0})})}else this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R)}#v(){let t=[],e=i=>{for(let n of i.children)if(!n.hasAttribute("slot")){if(n.tagName==="OPTION"||n.tagName==="OPTGROUP"){t.push(n);continue}if(n.matches('[role="presentation"]')||n.style?.display==="contents"){e(n);continue}t.push(n)}};return e(this),t}#w(){this.#i=[];let t=new Set,e=[];for(let i of this.#v())if(i.tagName==="OPTGROUP"){let n={label:i.label||i.getAttribute("label")||"",options:[]};for(let r of i.querySelectorAll("option"))n.options.push({value:r.value,label:r.textContent.trim(),disabled:r.disabled,icon:r.getAttribute("icon")||"",avatar:r.getAttribute("avatar")||""}),r.hasAttribute("selected")&&e.push(r.value);this.#i.push(n)}else i.tagName==="OPTION"?(this.#i.push({value:i.value,label:i.textContent.trim(),disabled:i.disabled,icon:i.getAttribute("icon")||"",avatar:i.getAttribute("avatar")||""}),i.hasAttribute("selected")&&e.push(i.value)):i.hasAttribute("slot")||t.add(i.tagName.toLowerCase());for(let i of[...this.querySelectorAll("option, optgroup")])i.remove();!this.value&&e.length&&(this.value=this.multiple?e.join(","):e[0]),t.size>0&&!s.#t.has(this)&&(s.#t.add(this),console.warn(`<select-ui>: ignoring unrecognized child element(s) [${[...t].join(", ")}]. Consumer-authored children must be native <option> or <optgroup>, NOT <select-option> or other <*-ui> shapes. Or set element.options = [...] programmatically. (Once-per-element warn; see select.yaml usage: for details.)`))}set options(t){Mt(()=>{this.#i=t,this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n))),this.#$();let e=this.querySelector('[slot="display"]');e&&(e.textContent=this.#E())})}get options(){return this.#i}static#k(t){return t?t.avatar?`<img data-option-avatar src="${Rt(t.avatar)}" alt="" />`:t.icon?`<icon-ui name="${Rt(t.icon)}"></icon-ui>`:"":""}#A(){if(this.multiple||!this.#s)return;let t=this.querySelector('[slot="trigger"]');if(!t)return;let i=this.#i.flatMap(c=>c.options||[c]).find(c=>!c.header&&!c.separator&&c.value===this.value),n=i&&i.avatar||this.avatar||"",r=i&&i.icon||this.icon||"",o=t.querySelector(":scope > [data-select-leading]"),a="";if(n?a=`<img slot="leading" data-select-leading src="${Rt(n)}" alt="" />`:r&&(a=`<icon-ui slot="leading" data-select-leading name="${Rt(r)}"></icon-ui>`),!a){o?.remove();return}let l=document.createElement("template");l.innerHTML=a;let h=l.content.firstElementChild;o?o.tagName===h.tagName?h.tagName==="IMG"?o.getAttribute("src")!==h.getAttribute("src")&&o.setAttribute("src",h.getAttribute("src")):o.getAttribute("name")!==h.getAttribute("name")&&o.setAttribute("name",h.getAttribute("name")):o.replaceWith(h):t.insertBefore(h,t.firstChild)}#$(){if(!this.#n)return;if(this.#n.innerHTML="",this.multiple?this.#n.setAttribute("aria-multiselectable","true"):this.#n.removeAttribute("aria-multiselectable"),this.multiple&&this.selectAll){let e=document.createElement("div");e.setAttribute("data-select-all","");let i=document.createElement("button-ui");i.setAttribute("variant","ghost"),i.setAttribute("size","xs"),i.dataset.selectAllBtn="",i.setAttribute("text",this.#C()?"Clear":"Select all"),i.addEventListener("click",this.#O),e.appendChild(i),this.#n.appendChild(e)}let t=e=>{if(e.separator){let a=document.createElement("hr");return a.setAttribute("data-separator",""),a}let i=document.createElement("div");i.setAttribute("role","option"),i.setAttribute("data-value",e.value||"");let n=this.multiple?new Set(this.value.split(",").map(a=>a.trim()).filter(Boolean)):null,r=n?n.has(e.value):e.value===this.value,o=s.#k(e);if(this.multiple){i.setAttribute("data-multi-option","");let a=document.createElement("span");a.setAttribute("data-checkbox",""),a.innerHTML='<icon-ui name="check" aria-hidden="true"></icon-ui>',i.appendChild(a);let l=document.createElement("span");l.setAttribute("data-option-label",""),o?l.innerHTML=`${o}${Rt(e.label)}`:l.textContent=e.label,i.appendChild(l)}else o?i.innerHTML=`${o}${Rt(e.label)}`:i.textContent=e.label;return r&&i.setAttribute("aria-selected","true"),e.disabled&&i.setAttribute("aria-disabled","true"),e.action&&(i.dataset.action=e.action),i.__adiaOption=e,i.addEventListener("click",this.#d),i};for(let e of this.#i)if(e.separator)this.#n.appendChild(t(e));else if(e.header){let i=document.createElement("div");i.setAttribute("data-menu-header",""),i.innerHTML=e.avatar?`<img src="${e.avatar}" alt="" /><div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`:`<div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`,this.#n.appendChild(i)}else if(e.options){let i=document.createElement("div");i.setAttribute("role","group"),i.innerHTML=`<div slot="group-label">${Rt(e.label)}</div>`;for(let n of e.options)i.appendChild(t(n));this.#n.appendChild(i)}else this.#n.appendChild(t(e));if(this.#i.length===0){let e=document.createElement("div");e.setAttribute("data-empty",""),e.textContent="No options",this.#n.appendChild(e)}this.#a&&this.#I()}#C(){if(!this.multiple)return!1;let t=this.#i.flatMap(i=>i.options||[i]).filter(i=>!i.disabled&&!i.separator&&!i.header&&i.value!=null);if(t.length===0)return!1;let e=new Set(this.#f());return t.every(i=>e.has(String(i.value)))}#M(){let t=this.querySelector('[slot="trigger"] [data-chips]');if(!t)return;let e=this.#f(),i=Number(this.maxChips)||0,n=i>0&&e.length>i?e.slice(0,i):e,r=i>0&&e.length>i?e.length-i:0,o=this.#i.flatMap(l=>l.options||[l]).filter(l=>!l.separator&&!l.header&&l.value!=null),a=l=>{let h=o.find(c=>String(c.value)===String(l));return h?h.label:String(l)};for(;t.firstChild;)t.removeChild(t.firstChild);for(let l of n){let h=document.createElement("tag-ui");h.setAttribute("size","sm"),!this.disabled&&!this.readonly&&h.setAttribute("removable",""),h.dataset.chipValue=String(l),h.setAttribute("text",a(l)),t.appendChild(h)}if(r>0){let l=document.createElement("button-ui");l.setAttribute("variant","ghost"),l.setAttribute("size","xs"),l.dataset.more="",l.setAttribute("text",`+${r} more`),l.addEventListener("click",this.#b),t.appendChild(l)}}#E(){return this.multiple?this.value?"":this.placeholder:this.#i.flatMap(i=>i.options||[i]).find(i=>i.value===this.value||i.header&&i.label===this.value)?.label||this.value||this.placeholder}#P=t=>{this.disabled||this.#n&&t.composedPath().includes(this.#n)||(this.open=!this.open)};#R=t=>{!this.contains(t.target)&&!(this.#n&&t.composedPath().includes(this.#n))&&(this.open=!1)};#L=t=>{if(t.key==="Backspace"&&this.multiple&&!this.disabled&&!this.readonly){let e=t.target,i=e&&e.tagName==="INPUT"&&e.getAttribute("slot")==="display",n=!this.#a||this.#a.length===0;if((!i||n)&&this.#f().length>0){t.preventDefault(),this.#m();return}}if(t.key==="Escape"){if(this.searchable&&this.#a){this.#a="";let e=this.querySelector('input[slot="display"]');e&&(e.value=""),this.#I();return}this.open=!1;return}if(t.key==="Enter"){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]:not([data-filtered-out])');if(e)e.click(),this.multiple&&(this.open=!1);else if(this.searchable&&this.freeText&&this.#a){let i=this.#a;this.value=i,this.#a="",this.open=!1,this.syncValue?.(i),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))}else this.open=!1}else this.open=!0;return}if(t.key===" "&&!this.searchable){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]');e?e.click():this.multiple||(this.open=!1)}else this.open=!0;return}t.key==="ArrowDown"&&this.open&&(t.preventDefault(),this.#Q(1)),t.key==="ArrowUp"&&this.open&&(t.preventDefault(),this.#Q(-1))};#T=t=>{this.#a=t.target.value||"",this.open||(this.open=!0),this.#I()};#I(){if(!this.#n)return;let t=this.#a.toLowerCase(),e=this.#n.querySelectorAll('[role="option"]'),i=!1;for(let r of e){let o=(r.textContent||"").toLowerCase();!t||o.includes(t)?(r.removeAttribute("data-filtered-out"),r.style.display="",i=!0):(r.setAttribute("data-filtered-out",""),r.style.display="none")}for(let r of this.#n.querySelectorAll('[role="group"]')){let o=r.querySelectorAll('[role="option"]:not([data-filtered-out])').length;r.style.display=o?"":"none"}let n=this.#n.querySelector('[role="option"][data-focused]');n&&n.hasAttribute("data-filtered-out")&&n.removeAttribute("data-focused")}#Q(t){if(!this.#n)return;let e=[...this.#n.querySelectorAll('[role="option"]:not([aria-disabled]):not([data-filtered-out])')];if(!e.length)return;let i=this.#n.querySelector('[role="option"][data-focused]'),n=i?e.indexOf(i):-1,r=e[(n+t+e.length)%e.length];i&&i.removeAttribute("data-focused"),r&&(r.setAttribute("data-focused",""),r.scrollIntoView({block:"nearest"}))}disconnected(){super.disconnected(),this.removeEventListener("click",this.#P),this.removeEventListener("keydown",this.#L),this.removeEventListener("remove",this.#g),this.#c?.disconnect(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R),this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u),this.#o=null),this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#n=null}};x("select-ui",dn);P();var fn=class extends w{static properties={value:{type:String,default:"",reflect:!0},text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},selected:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;connected(){this.setAttribute("role","radio"),this.getAttribute("tabindex")||this.setAttribute("tabindex","-1")}render(){if(this.text&&this.setAttribute("aria-label",this.text),this.setAttribute("aria-checked",this.selected?"true":"false"),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.icon){let t=this.querySelector(":scope > icon-ui");if(!t||t.getAttribute("name")!==this.icon){t?.remove();let e=document.createElement("icon-ui");e.setAttribute("name",this.icon),e.setAttribute("aria-hidden","true"),this.prepend(e)}}else this.querySelector(":scope > icon-ui")?.remove()}};x("segment-ui",fn);var pn=class s extends Z{static properties={...Z.properties,value:{type:String,default:"",reflect:!0}};static template=()=>null;static#t=new WeakSet;#e=null;#i=!1;#s=null;#n=null;#r=null;connected(){if(super.connected(),this.setAttribute("role","radiogroup"),this.#i||(this.#i=!0,this.addEventListener("click",this.#h),this.addEventListener("keydown",this.#u)),!this.value){let t=this.querySelector("segment-ui:not([disabled])");t&&(this.value=t.value||t.getAttribute("value")||"")}typeof ResizeObserver<"u"&&(this.#n=new ResizeObserver(()=>this.#l(this.#a)),this.#n.observe(this)),document.fonts?.ready&&(this.#r=document.fonts.ready.then(()=>{this.#r=null,this.#l(this.#a)}))}disconnected(){super.disconnected(),this.#s!=null&&(cancelAnimationFrame(this.#s),this.#s=null),this.#n?.disconnect(),this.#n=null,this.#r&&(this.#r=null),this.removeEventListener("click",this.#h),this.removeEventListener("keydown",this.#u),this.#e=null,this.#i=!1}get#a(){return[...this.querySelectorAll("segment-ui")]}get#o(){return this.#a.filter(t=>!t.disabled)}render(){if(!s.#t.has(this)){let e=[...this.children].find(i=>i.tagName!=="SEGMENT-UI"&&!i.hasAttribute("data-indicator")&&!(i.tagName==="SPAN"&&i.style.display==="contents"));e&&(s.#t.add(this),console.warn(`[segmented-ui] child <${e.tagName.toLowerCase()}> is not <segment-ui> \u2014 bare <segment> tags render text but receive no sliding indicator or aria-checked state. Use <segment-ui>.`))}let t=this.#a;if(t.length){for(let e of t){let n=(e.value||e.getAttribute("value")||"")===this.value;n?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("tabindex",n?"0":"-1")}this.label&&this.setAttribute("aria-label",this.label),this.#l(t)}}#l(t){let e=t.findIndex(n=>(n.value||n.getAttribute("value")||"")===this.value);if(e<0){this.removeAttribute("data-indicator-ready");return}let i=!this.#e||!this.contains(this.#e);if(i){for(let n of this.querySelectorAll(":scope > [data-indicator]"))n.remove();this.#e=document.createElement("span"),this.#e.setAttribute("data-indicator",""),this.prepend(this.#e)}this.style.setProperty("--_segment-count",`${t.length}`),i?(this.#e.style.transition="none",this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""),this.#s=requestAnimationFrame(()=>{this.#s=null,this.#e&&(this.#e.style.transition="")})):(this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""))}#c(t){t.disabled||(this.value=t.value,this.syncValue(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})))}#h=t=>{let e=t.target.closest("segment-ui");e&&this.contains(e)&&this.#c(e)};#u=t=>{let e=t.target;if(e.tagName!=="SEGMENT-UI")return;let i=this.#o,n=i.indexOf(e);if(n<0)return;let r;switch(t.key){case"ArrowRight":case"ArrowDown":r=n<i.length-1?n+1:0;break;case"ArrowLeft":case"ArrowUp":r=n>0?n-1:i.length-1;break;case"Home":r=0;break;case"End":r=i.length-1;break;default:return}t.preventDefault(),i[r].focus(),this.#c(i[r])}};x("segmented-ui",pn);var mn=class extends Z{static labelDeprecated=!1;static properties={...Z.properties,value:{type:Number,default:0,reflect:!0},min:{type:Number,default:0,reflect:!0},max:{type:Number,default:100,reflect:!0},step:{type:Number,default:1,reflect:!0},label:{type:String,default:"",reflect:!0},suffix:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;#i=!1;#s=0;#n=0;connected(){if(super.connected(),this.setAttribute("role","spinbutton"),this.setAttribute("tabindex","0"),!this.querySelector('[slot="field"]')){let t=`
+      `,this.hint&&this.setAttribute("aria-describedby",r);let a=this.querySelector("[data-clear-all]");a&&(a.removeEventListener("click",this.#y),a.addEventListener("click",this.#y)),this.searchable&&(this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u)),this.#o=this.querySelector('input[slot="display"]'),this.#o&&(this.#o.addEventListener("input",this.#T),this.#o.addEventListener("focus",this.#h),this.#o.addEventListener("click",this.#u))),e&&this.appendChild(e)}this.#A(),this.multiple&&this.#M();let t=this.querySelector("[data-clear-all]");if(t&&(this.multiple&&this.clearable&&this.#f().length>0&&!this.disabled&&!this.readonly?t.removeAttribute("hidden"):t.setAttribute("hidden","")),this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n)),this.#$()),this.#n){let e=this.multiple?new Set(this.value.split(",").map(i=>i.trim()).filter(Boolean)):null;for(let i of this.#n.querySelectorAll('[role="option"]')){let n=i.getAttribute("data-value");(e?e.has(n):n===this.value)?i.setAttribute("aria-selected","true"):i.removeAttribute("aria-selected")}}if(this.setAttribute("aria-expanded",String(this.open)),this.open){this.#n?.showPopover?.();let e=this.querySelector('[slot="trigger"]')||this;this.#n.style.minWidth=`${e.getBoundingClientRect().width}px`,this.#n.style.width="max-content",this.#r=lt(e,this.#n,{placement:this.getAttribute("placement")||"bottom-start",gap:4,matchWidth:!1}),this.#l=requestAnimationFrame(()=>{this.#l=null,document.addEventListener("pointerdown",this.#R,{once:!0})})}else this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R)}#v(){let t=[],e=i=>{for(let n of i.children)if(!n.hasAttribute("slot")){if(n.tagName==="OPTION"||n.tagName==="OPTGROUP"){t.push(n);continue}if(n.matches('[role="presentation"]')||n.style?.display==="contents"){e(n);continue}t.push(n)}};return e(this),t}#w(){this.#i=[];let t=new Set,e=[];for(let i of this.#v())if(i.tagName==="OPTGROUP"){let n={label:i.label||i.getAttribute("label")||"",options:[]};for(let r of i.querySelectorAll("option"))n.options.push({value:r.value,label:r.textContent.trim(),disabled:r.disabled,icon:r.getAttribute("icon")||"",avatar:r.getAttribute("avatar")||"",mark:r.hasAttribute("mark")}),r.hasAttribute("selected")&&e.push(r.value);this.#i.push(n)}else i.tagName==="OPTION"?(this.#i.push({value:i.value,label:i.textContent.trim(),disabled:i.disabled,icon:i.getAttribute("icon")||"",avatar:i.getAttribute("avatar")||"",mark:i.hasAttribute("mark")}),i.hasAttribute("selected")&&e.push(i.value)):i.hasAttribute("slot")||t.add(i.tagName.toLowerCase());for(let i of[...this.querySelectorAll("option, optgroup")])i.remove();!this.value&&e.length&&(this.value=this.multiple?e.join(","):e[0]),t.size>0&&!s.#t.has(this)&&(s.#t.add(this),console.warn(`<select-ui>: ignoring unrecognized child element(s) [${[...t].join(", ")}]. Consumer-authored children must be native <option> or <optgroup>, NOT <select-option> or other <*-ui> shapes. Or set element.options = [...] programmatically. (Once-per-element warn; see select.yaml usage: for details.)`))}set options(t){Mt(()=>{this.#i=t,this.#n||(this.#n=this.querySelector('[slot="listbox"]'),this.#n||(this.#n=document.createElement("div"),this.#n.setAttribute("slot","listbox"),this.#n.setAttribute("role","listbox"),this.#n.setAttribute("popover","manual"),this.appendChild(this.#n))),this.#$();let e=this.querySelector('[slot="display"]');e&&(e.textContent=this.#E()),this.#A()})}get options(){return this.#i}static#k(t){return t?t.mark?'<adia-mark-ui size="xs"></adia-mark-ui>':t.avatar?`<img data-option-avatar src="${Rt(t.avatar)}" alt="" />`:t.icon?`<icon-ui name="${Rt(t.icon)}"></icon-ui>`:"":""}#A(){if(this.multiple||!this.#s)return;let t=this.querySelector('[slot="trigger"]');if(!t)return;let i=this.#i.flatMap(u=>u.options||[u]).find(u=>!u.header&&!u.separator&&u.value===this.value),n=i&&i.mark||this.mark||!1,r=i&&i.avatar||this.avatar||"",o=i&&i.icon||this.icon||"",a=t.querySelector(":scope > [data-select-leading]"),l="";if(n?l='<adia-mark-ui slot="leading" data-select-leading size="xs"></adia-mark-ui>':r?l=`<img slot="leading" data-select-leading src="${Rt(r)}" alt="" />`:o&&(l=`<icon-ui slot="leading" data-select-leading name="${Rt(o)}"></icon-ui>`),!l){a?.remove();return}let h=document.createElement("template");h.innerHTML=l;let c=h.content.firstElementChild;a?a.tagName===c.tagName?c.tagName==="IMG"?a.getAttribute("src")!==c.getAttribute("src")&&a.setAttribute("src",c.getAttribute("src")):a.getAttribute("name")!==c.getAttribute("name")&&a.setAttribute("name",c.getAttribute("name")):a.replaceWith(c):t.insertBefore(c,t.firstChild)}#$(){if(!this.#n)return;if(this.#n.innerHTML="",this.multiple?this.#n.setAttribute("aria-multiselectable","true"):this.#n.removeAttribute("aria-multiselectable"),this.multiple&&this.selectAll){let e=document.createElement("div");e.setAttribute("data-select-all","");let i=document.createElement("button-ui");i.setAttribute("variant","ghost"),i.setAttribute("size","xs"),i.dataset.selectAllBtn="",i.setAttribute("text",this.#C()?"Clear":"Select all"),i.addEventListener("click",this.#O),e.appendChild(i),this.#n.appendChild(e)}let t=e=>{if(e.separator){let a=document.createElement("hr");return a.setAttribute("data-separator",""),a}let i=document.createElement("div");i.setAttribute("role","option"),i.setAttribute("data-value",e.value||"");let n=this.multiple?new Set(this.value.split(",").map(a=>a.trim()).filter(Boolean)):null,r=n?n.has(e.value):e.value===this.value,o=s.#k(e);if(this.multiple){i.setAttribute("data-multi-option","");let a=document.createElement("span");a.setAttribute("data-checkbox",""),a.innerHTML='<icon-ui name="check" aria-hidden="true"></icon-ui>',i.appendChild(a);let l=document.createElement("span");l.setAttribute("data-option-label",""),o?l.innerHTML=`${o}${Rt(e.label)}`:l.textContent=e.label,i.appendChild(l)}else o?i.innerHTML=`${o}${Rt(e.label)}`:i.textContent=e.label;return r&&i.setAttribute("aria-selected","true"),e.disabled&&i.setAttribute("aria-disabled","true"),e.action&&(i.dataset.action=e.action),i.__adiaOption=e,i.addEventListener("click",this.#d),i};for(let e of this.#i)if(e.separator)this.#n.appendChild(t(e));else if(e.header){let i=document.createElement("div");i.setAttribute("data-menu-header",""),i.innerHTML=e.avatar?`<img src="${e.avatar}" alt="" /><div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`:`<div><strong>${Rt(e.label)}</strong><span>${Rt(e.description||"")}</span></div>`,this.#n.appendChild(i)}else if(e.options){let i=document.createElement("div");i.setAttribute("role","group"),i.innerHTML=`<div slot="group-label">${Rt(e.label)}</div>`;for(let n of e.options)i.appendChild(t(n));this.#n.appendChild(i)}else this.#n.appendChild(t(e));if(this.#i.length===0){let e=document.createElement("div");e.setAttribute("data-empty",""),e.textContent="No options",this.#n.appendChild(e)}this.#a&&this.#I()}#C(){if(!this.multiple)return!1;let t=this.#i.flatMap(i=>i.options||[i]).filter(i=>!i.disabled&&!i.separator&&!i.header&&i.value!=null);if(t.length===0)return!1;let e=new Set(this.#f());return t.every(i=>e.has(String(i.value)))}#M(){let t=this.querySelector('[slot="trigger"] [data-chips]');if(!t)return;let e=this.#f(),i=Number(this.maxChips)||0,n=i>0&&e.length>i?e.slice(0,i):e,r=i>0&&e.length>i?e.length-i:0,o=this.#i.flatMap(l=>l.options||[l]).filter(l=>!l.separator&&!l.header&&l.value!=null),a=l=>{let h=o.find(c=>String(c.value)===String(l));return h?h.label:String(l)};for(;t.firstChild;)t.removeChild(t.firstChild);for(let l of n){let h=document.createElement("tag-ui");h.setAttribute("size","sm"),!this.disabled&&!this.readonly&&h.setAttribute("removable",""),h.dataset.chipValue=String(l),h.setAttribute("text",a(l)),t.appendChild(h)}if(r>0){let l=document.createElement("button-ui");l.setAttribute("variant","ghost"),l.setAttribute("size","xs"),l.dataset.more="",l.setAttribute("text",`+${r} more`),l.addEventListener("click",this.#b),t.appendChild(l)}}#E(){return this.multiple?this.value?"":this.placeholder:this.#i.flatMap(i=>i.options||[i]).find(i=>i.value===this.value||i.header&&i.label===this.value)?.label||this.value||this.placeholder}#P=t=>{this.disabled||this.#n&&t.composedPath().includes(this.#n)||(this.open=!this.open)};#R=t=>{!this.contains(t.target)&&!(this.#n&&t.composedPath().includes(this.#n))&&(this.open=!1)};#L=t=>{if(t.key==="Backspace"&&this.multiple&&!this.disabled&&!this.readonly){let e=t.target,i=e&&e.tagName==="INPUT"&&e.getAttribute("slot")==="display",n=!this.#a||this.#a.length===0;if((!i||n)&&this.#f().length>0){t.preventDefault(),this.#m();return}}if(t.key==="Escape"){if(this.searchable&&this.#a){this.#a="";let e=this.querySelector('input[slot="display"]');e&&(e.value=""),this.#I();return}this.open=!1;return}if(t.key==="Enter"){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]:not([data-filtered-out])');if(e)e.click(),this.multiple&&(this.open=!1);else if(this.searchable&&this.freeText&&this.#a){let i=this.#a;this.value=i,this.#a="",this.open=!1,this.syncValue?.(i),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}}))}else this.open=!1}else this.open=!0;return}if(t.key===" "&&!this.searchable){if(t.preventDefault(),this.open){let e=this.#n?.querySelector('[role="option"][data-focused]');e?e.click():this.multiple||(this.open=!1)}else this.open=!0;return}t.key==="ArrowDown"&&this.open&&(t.preventDefault(),this.#Q(1)),t.key==="ArrowUp"&&this.open&&(t.preventDefault(),this.#Q(-1))};#T=t=>{this.#a=t.target.value||"",this.open||(this.open=!0),this.#I()};#I(){if(!this.#n)return;let t=this.#a.toLowerCase(),e=this.#n.querySelectorAll('[role="option"]'),i=!1;for(let r of e){let o=(r.textContent||"").toLowerCase();!t||o.includes(t)?(r.removeAttribute("data-filtered-out"),r.style.display="",i=!0):(r.setAttribute("data-filtered-out",""),r.style.display="none")}for(let r of this.#n.querySelectorAll('[role="group"]')){let o=r.querySelectorAll('[role="option"]:not([data-filtered-out])').length;r.style.display=o?"":"none"}let n=this.#n.querySelector('[role="option"][data-focused]');n&&n.hasAttribute("data-filtered-out")&&n.removeAttribute("data-focused")}#Q(t){if(!this.#n)return;let e=[...this.#n.querySelectorAll('[role="option"]:not([aria-disabled]):not([data-filtered-out])')];if(!e.length)return;let i=this.#n.querySelector('[role="option"][data-focused]'),n=i?e.indexOf(i):-1,r=e[(n+t+e.length)%e.length];i&&i.removeAttribute("data-focused"),r&&(r.setAttribute("data-focused",""),r.scrollIntoView({block:"nearest"}))}disconnected(){super.disconnected(),this.removeEventListener("click",this.#P),this.removeEventListener("keydown",this.#L),this.removeEventListener("remove",this.#g),this.#c?.disconnect(),this.#l!=null&&(cancelAnimationFrame(this.#l),this.#l=null),document.removeEventListener("pointerdown",this.#R),this.#o&&(this.#o.removeEventListener("input",this.#T),this.#o.removeEventListener("focus",this.#h),this.#o.removeEventListener("click",this.#u),this.#o=null),this.#r?.(),this.#r=null,this.#n?.hidePopover?.(),this.#n=null}};x("select-ui",dn);P();var fn=class extends w{static properties={value:{type:String,default:"",reflect:!0},text:{type:String,default:"",reflect:!0},icon:{type:String,default:"",reflect:!0},disabled:{type:Boolean,default:!1,reflect:!0},selected:{type:Boolean,default:!1,reflect:!0}};static template=()=>null;connected(){this.setAttribute("role","radio"),this.getAttribute("tabindex")||this.setAttribute("tabindex","-1")}render(){if(this.text&&this.setAttribute("aria-label",this.text),this.setAttribute("aria-checked",this.selected?"true":"false"),this.disabled?this.setAttribute("aria-disabled","true"):this.removeAttribute("aria-disabled"),this.icon){let t=this.querySelector(":scope > icon-ui");if(!t||t.getAttribute("name")!==this.icon){t?.remove();let e=document.createElement("icon-ui");e.setAttribute("name",this.icon),e.setAttribute("aria-hidden","true"),this.prepend(e)}}else this.querySelector(":scope > icon-ui")?.remove()}};x("segment-ui",fn);var pn=class s extends Z{static properties={...Z.properties,value:{type:String,default:"",reflect:!0}};static template=()=>null;static#t=new WeakSet;#e=null;#i=!1;#s=null;#n=null;#r=null;connected(){if(super.connected(),this.setAttribute("role","radiogroup"),this.#i||(this.#i=!0,this.addEventListener("click",this.#h),this.addEventListener("keydown",this.#u)),!this.value){let t=this.querySelector("segment-ui:not([disabled])");t&&(this.value=t.value||t.getAttribute("value")||"")}typeof ResizeObserver<"u"&&(this.#n=new ResizeObserver(()=>this.#l(this.#a)),this.#n.observe(this)),document.fonts?.ready&&(this.#r=document.fonts.ready.then(()=>{this.#r=null,this.#l(this.#a)}))}disconnected(){super.disconnected(),this.#s!=null&&(cancelAnimationFrame(this.#s),this.#s=null),this.#n?.disconnect(),this.#n=null,this.#r&&(this.#r=null),this.removeEventListener("click",this.#h),this.removeEventListener("keydown",this.#u),this.#e=null,this.#i=!1}get#a(){return[...this.querySelectorAll("segment-ui")]}get#o(){return this.#a.filter(t=>!t.disabled)}render(){if(!s.#t.has(this)){let e=[...this.children].find(i=>i.tagName!=="SEGMENT-UI"&&!i.hasAttribute("data-indicator")&&!(i.tagName==="SPAN"&&i.style.display==="contents"));e&&(s.#t.add(this),console.warn(`[segmented-ui] child <${e.tagName.toLowerCase()}> is not <segment-ui> \u2014 bare <segment> tags render text but receive no sliding indicator or aria-checked state. Use <segment-ui>.`))}let t=this.#a;if(t.length){for(let e of t){let n=(e.value||e.getAttribute("value")||"")===this.value;n?e.setAttribute("selected",""):e.removeAttribute("selected"),e.setAttribute("tabindex",n?"0":"-1")}this.label&&this.setAttribute("aria-label",this.label),this.#l(t)}}#l(t){let e=t.findIndex(n=>(n.value||n.getAttribute("value")||"")===this.value);if(e<0){this.removeAttribute("data-indicator-ready");return}let i=!this.#e||!this.contains(this.#e);if(i){for(let n of this.querySelectorAll(":scope > [data-indicator]"))n.remove();this.#e=document.createElement("span"),this.#e.setAttribute("data-indicator",""),this.prepend(this.#e)}this.style.setProperty("--_segment-count",`${t.length}`),i?(this.#e.style.transition="none",this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""),this.#s=requestAnimationFrame(()=>{this.#s=null,this.#e&&(this.#e.style.transition="")})):(this.#e.style.transform=`translateX(${e*100}%)`,this.setAttribute("data-indicator-ready",""))}#c(t){t.disabled||(this.value=t.value,this.syncValue(),this.dispatchEvent(new CustomEvent("change",{bubbles:!0,detail:{value:this.value}})))}#h=t=>{let e=t.target.closest("segment-ui");e&&this.contains(e)&&this.#c(e)};#u=t=>{let e=t.target;if(e.tagName!=="SEGMENT-UI")return;let i=this.#o,n=i.indexOf(e);if(n<0)return;let r;switch(t.key){case"ArrowRight":case"ArrowDown":r=n<i.length-1?n+1:0;break;case"ArrowLeft":case"ArrowUp":r=n>0?n-1:i.length-1;break;case"Home":r=0;break;case"End":r=i.length-1;break;default:return}t.preventDefault(),i[r].focus(),this.#c(i[r])}};x("segmented-ui",pn);var mn=class extends Z{static labelDeprecated=!1;static properties={...Z.properties,value:{type:Number,default:0,reflect:!0},min:{type:Number,default:0,reflect:!0},max:{type:Number,default:100,reflect:!0},step:{type:Number,default:1,reflect:!0},label:{type:String,default:"",reflect:!0},suffix:{type:String,default:"",reflect:!0}};static template=()=>null;#t=null;#e=null;#i=!1;#s=0;#n=0;connected(){if(super.connected(),this.setAttribute("role","spinbutton"),this.setAttribute("tabindex","0"),!this.querySelector('[slot="field"]')){let t=`
         <span slot="label">${this.label}</span>
         <span slot="value">${this.#r(this.value)}</span>
         ${this.suffix?`<span slot="suffix">${this.suffix}</span>`:""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",

package/patterns/permissions-matrix/permissions-matrix.examples.html

@@ -1,6 +1,6 @@
 <header>
   <div>
-    <h1>Permission Matrix</h1>
+    <h1>Permissions Matrix</h1>
     <div data-actions>
       <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">table-ui</tag-ui> <tag-ui size="sm">check-ui</tag-ui> <tag-ui size="sm">description-list-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
     </div>

package/patterns/permissions-matrix/permissions-matrix.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Permission Matrix (pattern) — AdiaUI</title>
+  <title>Permissions Matrix (pattern) — AdiaUI</title>
 
   <!-- Token base -->
   <link rel="stylesheet" href="../../styles/resets.css">