@adia-ai/web-components 0.8.37 → 0.8.39

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.'