@adia-ai/web-components 0.8.38 → 0.8.39

package/components/select/select.class.js

@@ -439,8 +439,14 @@ export class UISelect extends UIFormElement {
           : this.icon
             ? `<icon-ui slot="leading" data-select-leading name="${escapeHTML(this.icon)}"></icon-ui>`
             : '';
+      // No native <input> wrap (per ADR-0055 / ADR-0025): the searchable
+      // trigger is a `contenteditable="plaintext-only"` surface carrying
+      // `role="combobox"`, mirroring combobox-ui's editable-surface pattern.
+      // Placeholder text renders via the [data-empty]::before pseudo (see
+      // select.css), same mechanism as input-ui / combobox-ui.
+      const initialDisplayText = this.#displayText() === this.placeholder ? '' : this.#displayText();
       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" contenteditable="plaintext-only" role="combobox" aria-autocomplete="list" tabindex="0" data-placeholder="${escapeHTML(this.placeholder || '')}"${initialDisplayText ? '' : ' data-empty'}>${escapeHTML(initialDisplayText)}</span>`
         : `<span slot="display">${escapeHTML(this.#displayText())}</span>`;
       // §184 (v0.5.5, FEEDBACK-08 §7): optional hint slot beneath the
       // trigger. Mirrors slider-ui's hint pattern + matches the
@@ -478,7 +484,7 @@ export class UISelect extends UIFormElement {
           this.#searchInput.removeEventListener('focus', this.#onSearchFocus);
           this.#searchInput.removeEventListener('click', this.#onSearchClick);
         }
-        this.#searchInput = this.querySelector('input[slot="display"]');
+        this.#searchInput = this.querySelector('[slot="display"][contenteditable]');
         if (this.#searchInput) {
           this.#searchInput.addEventListener('input', this.#onSearchInput);
           this.#searchInput.addEventListener('focus', this.#onSearchFocus);
@@ -492,9 +498,13 @@ export class UISelect extends UIFormElement {
       const display = this.querySelector('[slot="display"]');
       if (display && !this.multiple) {
         // Single-select: keep the canonical text-rendering path.
-        if (display.tagName === 'INPUT') {
-          // Only update value when not actively editing (no active query)
-          if (!this.#query) display.value = this.#displayText() === this.placeholder ? '' : this.#displayText();
+        if (display.hasAttribute('contenteditable')) {
+          // Only update text when not actively editing (no active query)
+          if (!this.#query) {
+            const text = this.#displayText() === this.placeholder ? '' : this.#displayText();
+            display.textContent = text;
+            display.toggleAttribute('data-empty', !text);
+          }
         } else {
           display.textContent = this.#displayText();
         }
@@ -502,10 +512,13 @@ export class UISelect extends UIFormElement {
         // Multi-select: display element holds the placeholder ONLY when
         // no chips are present (otherwise the chip row IS the display).
         const hasChips = this.#values().length > 0;
-        if (display.tagName === 'INPUT') {
+        if (display.hasAttribute('contenteditable')) {
           // search input — keep placeholder; never inject the value text.
-          display.placeholder = hasChips ? '' : (this.placeholder || '');
-          if (!this.#query) display.value = '';
+          display.setAttribute('data-placeholder', hasChips ? '' : (this.placeholder || ''));
+          if (!this.#query) {
+            display.textContent = '';
+            display.toggleAttribute('data-empty', true);
+          }
         } else {
           display.textContent = hasChips ? '' : (this.placeholder || '');
         }
@@ -991,7 +1004,7 @@ export class UISelect extends UIFormElement {
     // before it would start removing query characters.
     if (e.key === 'Backspace' && this.multiple && !this.disabled && !this.readonly) {
       const target = e.target;
-      const fromInput = target && target.tagName === 'INPUT' && target.getAttribute('slot') === 'display';
+      const fromInput = target && target.hasAttribute?.('contenteditable') && target.getAttribute('slot') === 'display';
       const queryEmpty = !this.#query || this.#query.length === 0;
       if (!fromInput || queryEmpty) {
         if (this.#values().length > 0) {
@@ -1005,8 +1018,11 @@ export class UISelect extends UIFormElement {
       if (this.searchable && this.#query) {
         // First Escape: clear query
         this.#query = '';
-        const input = this.querySelector('input[slot="display"]');
-        if (input) input.value = '';
+        const input = this.querySelector('[slot="display"][contenteditable]');
+        if (input) {
+          input.textContent = '';
+          input.toggleAttribute('data-empty', true);
+        }
         this.#applyFilter();
         return;
       }
@@ -1061,7 +1077,9 @@ export class UISelect extends UIFormElement {
   };
 
   #onSearchInput = (e) => {
-    this.#query = e.target.value || '';
+    const text = e.target.textContent || '';
+    this.#query = text;
+    e.target.toggleAttribute('data-empty', !text);
     if (!this.open) this.open = true;
     this.#applyFilter();
   };

package/components/select/select.css

@@ -149,7 +149,7 @@
     white-space: nowrap;
     color: var(--select-fg);
   }
-  input[slot="display"] {
+  [slot="display"][contenteditable] {
     border: none;
     outline: none;
     background: transparent;
@@ -159,9 +159,18 @@
     color: var(--select-fg);
     min-width: 0;
     width: 100%;
+    /* Positioning context for the [data-empty]::before placeholder pseudo
+       below — out-of-flow, same rationale as input-ui/combobox-ui: an
+       in-flow pseudo would render the caret after the placeholder text
+       instead of at content-start. */
+    position: relative;
   }
-  input[slot="display"]::placeholder {
+  [slot="display"][contenteditable][data-empty]::before {
+    content: attr(data-placeholder);
     color: var(--select-placeholder-fg);
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
   }
   :scope:not([value]) [slot="display"],
   :scope[value=""] [slot="display"] {

package/components/swatch/swatch.css

@@ -274,20 +274,22 @@
     z-index: 1;
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-dark] {
-    color: var(--a-chrome-light, #fafafa);
+    color: var(--a-chrome-light);
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-light] {
-    color: var(--a-chrome-dark, #111);
+    color: var(--a-chrome-dark);
   }
   /* Detail line follows the same auto-contrast choice. */
   :scope[shape="block"][auto-contrast] > [data-detail] {
     z-index: 1;
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-dark] ~ [data-detail] {
-    color: color-mix(in oklab, var(--a-chrome-light, #fafafa) 80%, transparent);
+    color: var(--a-chrome-light);
+    opacity: 0.8;
   }
   :scope[shape="block"][auto-contrast] > [data-label][data-on-light] ~ [data-detail] {
-    color: color-mix(in oklab, var(--a-chrome-dark, #111) 70%, transparent);
+    color: var(--a-chrome-dark);
+    opacity: 0.7;
   }
 
   /* ═══════ Copy button — a stamped <button-ui variant="ghost" size="sm">

package/components/toggle-group/toggle-group.class.js

@@ -30,10 +30,15 @@ import { UIElement } from '../../core/element.js';
 // ── Toggle Option ──
 //
 // Parent-managed. Selection state flows through `toggle-group-ui`'s `value`
-// (and `single` mode flag). Items don't expose `checked` — parent applies
-// `data-selected` on the DOM element when the item's `value` is part of the
-// group's comma-separated `value` list. Consistent with native `<option>`
-// inside `<select>`.
+// (and `single` mode flag) — the group's `value` stays the single source of
+// truth. ADR-0056 (gh#1303): the child's current-state surface is the
+// declared, reflected `selected` prop below, converging onto <segment-ui>'s
+// mechanism (yaml → catalog → generative grammar) instead of a private
+// stamp. `toggle-group-ui` also stamps the legacy `data-selected` attribute
+// on the same element in parallel — DEPRECATED, kept only because external
+// CSS may already target it as an undocumented hook; its removal rides the
+// 0.9.0 breaking wave. Don't set `selected` directly on an option; drive
+// the group's `value` instead.
 
 export class UIToggleOption extends UIElement {
   static properties = {
@@ -41,6 +46,7 @@ export class UIToggleOption extends UIElement {
     text:     { type: String,  default: '', reflect: true },
     icon:     { type: String,  default: '', reflect: true },
     disabled: { type: Boolean, default: false, reflect: true },
+    selected: { type: Boolean, default: false, reflect: true },
   };
 
   static template = () => null;
@@ -59,6 +65,7 @@ export class UIToggleOption extends UIElement {
     }
     if (this.disabled) this.setAttribute('aria-disabled', 'true');
     else this.removeAttribute('aria-disabled');
+    this.setAttribute('aria-pressed', this.selected ? 'true' : 'false');
   }
 
   #stamp() {
@@ -100,13 +107,16 @@ export class UIToggleGroup extends UIElement {
     const selected = this.#valueSet;
     for (const opt of this.querySelectorAll('toggle-option-ui')) {
       const optVal = opt.value || opt.getAttribute('value') || '';
-      if (selected.has(optVal)) {
-        opt.setAttribute('data-selected', '');
-        opt.setAttribute('aria-pressed', 'true');
-      } else {
-        opt.removeAttribute('data-selected');
-        opt.setAttribute('aria-pressed', 'false');
-      }
+      const isSelected = selected.has(optVal);
+      // ADR-0056 (gh#1303): `selected` is the declared, reflected mechanism —
+      // converges onto <segment-ui>'s convention (opt's own render() stamps
+      // aria-pressed from it). `data-selected` is stamped alongside it only
+      // as a DEPRECATED parallel hook for pre-existing external CSS; it no
+      // longer drives styling (toggle-group.css) and its removal rides the
+      // 0.9.0 breaking wave.
+      opt.selected = isSelected;
+      if (isSelected) opt.setAttribute('data-selected', '');
+      else opt.removeAttribute('data-selected');
     }
   }
 

package/components/toggle-group/toggle-group.css

@@ -1,12 +1,23 @@
-/* Safari 17.x bug: `:scope:not(...):hover` inside `@scope` doesn't match
-   the scope root. Plain selector outside works. The @scope is
-   `(toggle-option-ui)` — NOT `(toggle-group-ui)` — so the moved-out
-   selector targets `toggle-option-ui:hover`. See docs/BROWSER-COMPAT.md §3a. */
+/* Safari 17.x bug: `:scope:not(...):hover` (Flavor A) and `:scope[selected]`
+   (Flavor B — attribute-removal restyle) both fail inside `@scope`.
+   Selectors moved out. The @scope is `(toggle-option-ui)` — NOT
+   `(toggle-group-ui)` — so the moved-out selectors target
+   `toggle-option-ui:hover` / `toggle-option-ui[selected]`. See
+   docs/BROWSER-COMPAT.md §3a; mirrors segment.css. */
 toggle-option-ui:not([disabled]):hover {
   --toggle-option-bg: var(--toggle-option-bg-hover);
   --toggle-option-fg: var(--toggle-option-fg-hover);
 }
 
+/* ADR-0056 (gh#1303): converged onto <segment-ui>'s declared, reflected
+   [selected] prop, set by <toggle-group-ui> (toggle-group.class.js). The
+   parent also stamps the legacy `data-selected` attribute in parallel —
+   DEPRECATED, no longer styled here; removal rides the 0.9.0 breaking wave. */
+toggle-option-ui[selected] {
+  --toggle-option-bg: var(--toggle-option-selected-bg);
+  --toggle-option-fg: var(--toggle-option-selected-fg);
+}
+
 @scope (toggle-group-ui) {
   :where(:scope) {
     /* ── Tokens ── */
@@ -94,10 +105,7 @@ toggle-option-ui:not([disabled]):hover {
     z-index: 1;
   }
 
-  :scope[data-selected] {
-    --toggle-option-bg: var(--toggle-option-selected-bg);
-    --toggle-option-fg: var(--toggle-option-selected-fg);
-  }
+  /* [selected] state rule moved outside @scope — see Safari 17.x bug note at top. */
 
   :scope[disabled] {
     --toggle-option-fg: var(--toggle-option-fg-disabled);

package/components/toggle-group/toggle-group.d.ts

@@ -38,6 +38,12 @@ export class UIToggleOption extends UIElement {
   disabled: boolean;
   /** Optional Phosphor icon name; renders as a leading icon. */
   icon: string;
+  /** Whether this option is currently selected. Managed by the parent
+<toggle-group-ui> container (ADR-0056) — don't set directly; the group's
+`value` is the single source of truth. Converges onto <segment-ui>'s
+declared reflected-prop mechanism (was previously a private
+`data-selected` stamp with no declared API surface). */
+  selected: boolean;
   /** Visible label text. */
   text: string;
   /** Stable identifier matched against the parent group's `value`. */

package/components/toggle-group/toggle-group.yaml

@@ -1,5 +1,13 @@
 # Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
 # Edit this file; run `npm run build:components` to regenerate a2ui.json.
+#
+# ADR-0056 (gh#1303): <toggle-option-ui>'s current-state surface converges
+# onto <segment-ui>'s declared, reflected `[selected]` prop (see
+# toggle-option.yaml). This container sets that prop, keeping `value` as the
+# single source of truth. It also stamps the legacy `data-selected`
+# attribute on each option in parallel — DEPRECATED (undocumented external
+# CSS may target it); its removal rides the 0.9.0 breaking wave, not this
+# change.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
 name: UIToggleGroup
 tag: toggle-group-ui
@@ -80,6 +88,8 @@ a2ui:
       reason: 'Selection model distinction.'
     - rule: 'Use for filter chips, multi-flag toggles, day-of-week pickers; for binary on/off use <switch-ui>.'
       reason: 'Capacity guidance.'
+    - rule: 'Sets the child <toggle-option-ui>''s declared [selected] prop to reflect the group value (ADR-0056) — do not author [selected] directly in generated markup; author the group''s value instead.'
+      reason: 'Parent-managed declared state — group value stays the single source of truth.'
 anti_patterns: []
 examples:
   - name: basic-toggle-group

package/components/toggle-group/toggle-option.a2ui.json

@@ -26,6 +26,11 @@
       "type": "string",
       "default": ""
     },
+    "selected": {
+      "description": "Whether this option is currently selected. Managed by the parent\n<toggle-group-ui> container (ADR-0056) — don't set directly; the group's\n`value` is the single source of truth. Converges onto <segment-ui>'s\ndeclared reflected-prop mechanism (was previously a private\n`data-selected` stamp with no declared API surface).",
+      "type": "boolean",
+      "default": false
+    },
     "text": {
       "description": "Visible label text.",
       "type": "string",

package/components/toggle-group/toggle-option.yaml

@@ -3,6 +3,12 @@
 # §228 (v0.5.9): authored to close the §229 baseline class-export-undeclared
 # drift for UIToggleOption. Ships as a sibling class in toggle-group/toggle-group.class.js
 # + is registered alongside UIToggleGroup.
+#
+# ADR-0056 (gh#1303): `selected` converges onto <segment-ui>'s declared,
+# parent-managed, reflected-prop convention. `<toggle-group-ui>` also stamps
+# the legacy `data-selected` attribute in parallel — DEPRECATED, kept only
+# because it was an undocumented hook external CSS may already target;
+# removal rides the 0.9.0 breaking wave (see toggle-group.yaml + CHANGELOG).
 
 # Child component of <toggle-group-ui>. Surface only inside that parent.
 $schema: ../../../../scripts/schemas/component.yaml.schema.json
@@ -32,6 +38,16 @@ props:
     description: Disabled state — blocks pointer + keyboard activation.
     type: boolean
     default: false
+  selected:
+    description: |-
+      Whether this option is currently selected. Managed by the parent
+      <toggle-group-ui> container (ADR-0056) — don't set directly; the group's
+      `value` is the single source of truth. Converges onto <segment-ui>'s
+      declared reflected-prop mechanism (was previously a private
+      `data-selected` stamp with no declared API surface).
+    type: boolean
+    default: false
+    reflect: true
 
 keywords:
   - toggle-option
@@ -53,5 +69,5 @@ a2ui:
       reason: 'Multi-select cluster contract.'
     - rule: 'Different from <segment-ui> (which is single-select inside <segmented-ui>).'
       reason: 'Selection model boundary.'
-    - rule: 'Active state controlled via the toggle-option''s own active attribute (independent of siblings).'
-      reason: 'Parent does not own state in multi-select.'
+    - rule: 'Selected state exposed via its own declared [selected] reflected prop, set by the parent <toggle-group-ui> (ADR-0056) — mirrors <segment-ui>''s convention. Do not set [selected] directly; drive the group''s value instead.'
+      reason: 'Parent-managed declared state — group value stays the single source of truth.'