@adia-ai/web-components 0.8.40 → 0.8.41

package/components/radio-group/radio-group.a2ui.json

@@ -63,6 +63,11 @@
       "aria-labelledby"
     ],
     "name": "UIRadioGroup",
+    "parts": {
+      "label": {
+        "description": "Auto-minted label element (mounted by radio-group-ui from the [label] prop) — do not author this slot directly; template-owned anatomy part, not a light-DOM insertion point (gh#1454). `#ensureLabelElement()` only recognizes its own `[data-radio-group-label]` marker, never a bare consumer-authored `[slot=\"label\"]` element."
+      }
+    },
     "related": [
       "radio",
       "field"
@@ -70,9 +75,6 @@
     "slots": {
       "default": {
         "description": "radio-ui children sharing one [name=] — exclusivity and arrow-key navigation are unchanged; they still resolve via closest('fieldset, [role=radiogroup]'), which now matches this host."
-      },
-      "label": {
-        "description": "Auto-minted label element (mounted by radio-group-ui from the [label] prop) — do not author this slot directly."
       }
     },
     "states": [

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

@@ -28,6 +28,17 @@
  *
  * Not a form-associated element itself — it carries no value; each child
  * radio-ui is its own form participant per the existing [name=] contract.
+ *
+ * ADR-0056 scope note (#1363 B7 flagged "radio-group exposes no value
+ * surface at all" against segmented/tabs/select's parent [value]):
+ * evaluated and NOT adopted here. ADR-0056 itself governs only a
+ * selection-item CHILD's own state surface (segment-ui/toggle-option-ui's
+ * [selected]) — radio-ui already conforms via its native [checked]
+ * (radio.class.js, same exemption class as option-card-ui/
+ * accordion-item-ui). A parent-level [value] on this host would
+ * contradict the "not form-associated" design documented above and has
+ * no ratifying ADR of its own; left as a named rejected alternative
+ * (gh#1379) pending a future naming-convention ruling (B5/B9-shaped).
  */
 import { UIElement } from '../../core/element.js';
 

package/components/radio-group/radio-group.yaml

@@ -37,8 +37,14 @@ events: {}
 slots:
   default:
     description: "radio-ui children sharing one [name=] — exclusivity and arrow-key navigation are unchanged; they still resolve via closest('fieldset, [role=radiogroup]'), which now matches this host."
+parts:
   label:
-    description: Auto-minted label element (mounted by radio-group-ui from the [label] prop) — do not author this slot directly.
+    description: >-
+      Auto-minted label element (mounted by radio-group-ui from the [label]
+      prop) — do not author this slot directly; template-owned anatomy part,
+      not a light-DOM insertion point (gh#1454).
+      `#ensureLabelElement()` only recognizes its own `[data-radio-group-label]`
+      marker, never a bare consumer-authored `[slot="label"]` element.
 states:
   - name: idle
     description: Default, ready for interaction.

package/components/range/range.a2ui.json

@@ -95,6 +95,7 @@
       "volume"
     ],
     "name": "UIRange",
+    "parts": {},
     "related": [
       "input",
       "button"
@@ -105,6 +106,11 @@
         "description": "Default, ready for interaction.",
         "name": "idle"
       },
+      {
+        "description": "The field is mid-drag (pointer down through pointerup).",
+        "attribute": "dragging",
+        "name": "dragging"
+      },
       {
         "description": "Non-interactive; dimmed.",
         "attribute": "disabled",

package/components/range/range.class.js

@@ -138,7 +138,7 @@ export class UIRange extends UIFormElement {
     this.#dragging = true;
     this.#startX = e.clientX;
     this.#startVal = this.value;
-    this.setAttribute('data-dragging', '');
+    this.setAttribute('dragging', '');
     this.#fieldEl.setPointerCapture(e.pointerId);
     this.#fieldEl.addEventListener('pointermove', this.#onPointerMove);
     this.#fieldEl.addEventListener('pointerup', this.#onPointerUp);
@@ -156,7 +156,7 @@ export class UIRange extends UIFormElement {
 
   #onPointerUp = (e) => {
     this.#dragging = false;
-    this.removeAttribute('data-dragging');
+    this.removeAttribute('dragging');
     this.#fieldEl.releasePointerCapture(e.pointerId);
     this.#fieldEl.removeEventListener('pointermove', this.#onPointerMove);
     this.#fieldEl.removeEventListener('pointerup', this.#onPointerUp);

package/components/range/range.css

@@ -147,10 +147,10 @@ range-ui:not([disabled]) [slot="field"]:hover [data-layer="fill"] {
   /* Hover-fill brighten moved outside @scope — see Safari 17.x bug note at top. */
 
   /* Dragging: deepest fill, sharper border, instant (no transition lag on the clip) */
-  :scope[data-dragging] [slot="field"] {
+  :scope[dragging] [slot="field"] {
     border-color: var(--range-border-dragging);
   }
-  :scope[data-dragging] [data-layer="fill"] {
+  :scope[dragging] [data-layer="fill"] {
     background: var(--range-fill-bg-active);
     transition: none;
   }

package/components/range/range.yaml

@@ -61,6 +61,9 @@ slots: {}
 states:
   - name: idle
     description: Default, ready for interaction.
+  - name: dragging
+    description: The field is mid-drag (pointer down through pointerup).
+    attribute: dragging
   - name: disabled
     description: Non-interactive; dimmed.
     attribute: disabled

package/components/rating/rating.a2ui.json

@@ -93,6 +93,7 @@
       "like"
     ],
     "name": "UIRating",
+    "parts": {},
     "related": [
       "Field",
       "AgentFeedbackBar"

package/components/relative-time/relative-time.a2ui.json

@@ -88,6 +88,7 @@
       "duration"
     ],
     "name": "UIRelativeTime",
+    "parts": {},
     "related": [
       "text",
       "badge",

package/components/richtext/richtext.a2ui.json

@@ -38,7 +38,7 @@
   "unevaluatedProperties": false,
   "x-adiaui": {
     "anti_patterns": [],
-    "category": "forms",
+    "category": "display",
     "composes": [],
     "events": {},
     "examples": [
@@ -67,6 +67,7 @@
       "richtext"
     ],
     "name": "UIRichText",
+    "parts": {},
     "related": [
       "Code",
       "Text",

package/components/richtext/richtext.yaml

@@ -3,7 +3,7 @@ name: UIRichText
 tag: richtext-ui
 status: stable
 component: RichText
-category: forms
+category: display
 version: 1
 description: |
   Markdown-to-HTML rendering primitive — converts the [markdown] prop

package/components/row/row.a2ui.json

@@ -77,6 +77,7 @@
       "row"
     ],
     "name": "UIRow",
+    "parts": {},
     "related": [
       "avatar",
       "input",

package/components/search/search.a2ui.json

@@ -94,6 +94,7 @@
       "combobox"
     ],
     "name": "UISearch",
+    "parts": {},
     "related": [
       "Input",
       "Command",

package/components/search/search.class.js

@@ -41,8 +41,11 @@ export class UISearch extends UIFormElement {
 
     if (!this.querySelector('input-ui')) {
       const size = this.getAttribute('size');
+      // No `type` attribute here — input-ui's `type` enum no longer
+      // includes "search" (gh#1381, gh#1363 B10); it was always
+      // decorative on this primitive (input.class.js never branched on
+      // it), so dropping it is a no-op on rendered behavior.
       this.innerHTML = `<input-ui
-        type="search"
         prefix="magnifying-glass"
         suffix="x-circle"
         placeholder="${this.placeholder}"

package/components/section/section.a2ui.json

@@ -52,6 +52,7 @@
       "section"
     ],
     "name": "UISection",
+    "parts": {},
     "related": [
       "avatar",
       "input",

package/components/segment/segment.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Segment.json",
   "title": "Segment",
-  "description": "Individual segment child of <segmented-ui> — carries the [value],\n[text], optional [icon], and [selected] state for one option in\na horizontal segmented selector. Distinct from <tab-ui> (a view\nswitcher's child) and <option> (native option for <select-ui>).\nUse segment-ui only as a direct child of <segmented-ui>; never\nstandalone.\n",
+  "description": "Individual segment child of <segmented-ui> — carries the [value],\n[text], optional [icon], and [selected] state for one option in\na horizontal segmented selector, single- or multi-select\n(<segmented-ui multiple>, gh#1369). Distinct from <tab-ui> (a view\nswitcher's child) and <option> (native option for <select-ui>).\nUse segment-ui only as a direct child of <segmented-ui>; never\nstandalone.\n",
   "type": "object",
   "allOf": [
     {
@@ -47,6 +47,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedParents": [
+      "Segmented"
+    ],
     "anti_patterns": [],
     "category": "navigation",
     "composes": [
@@ -56,36 +59,39 @@
     "examples": [
       {
         "description": "Segmented control with 3 segment options for tab-like switching.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"text\": \"Overview\",\n    \"active\": true\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"text\": \"Features\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"text\": \"Pricing\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Segmented\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"text\": \"Overview\",\n    \"selected\": true\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"text\": \"Features\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"text\": \"Pricing\"\n  }\n]",
         "name": "segmented-control"
       },
       {
         "description": "Three segments inside a segmented control for view switching.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"overview\",\n    \"text\": \"Overview\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"features\",\n    \"text\": \"Features\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"pricing\",\n    \"text\": \"Pricing\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Segmented\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"overview\",\n    \"text\": \"Overview\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"features\",\n    \"text\": \"Features\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"pricing\",\n    \"text\": \"Pricing\"\n  }\n]",
         "name": "basic"
       },
       {
         "description": "Segmented control showing four time-range segments labeled via text attribute.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\",\n      \"s4\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"d\",\n    \"text\": \"Daily\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"w\",\n    \"text\": \"Weekly\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"m\",\n    \"text\": \"Monthly\"\n  },\n  {\n    \"id\": \"s4\",\n    \"component\": \"Segment\",\n    \"value\": \"y\",\n    \"text\": \"Yearly\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Segmented\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\",\n      \"s4\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"d\",\n    \"text\": \"Daily\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"w\",\n    \"text\": \"Weekly\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"m\",\n    \"text\": \"Monthly\"\n  },\n  {\n    \"id\": \"s4\",\n    \"component\": \"Segment\",\n    \"value\": \"y\",\n    \"text\": \"Yearly\"\n  }\n]",
         "name": "text"
       },
       {
         "description": "Segmented control with one disabled segment that cannot be selected.",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"free\",\n    \"text\": \"Free\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"pro\",\n    \"text\": \"Pro\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"enterprise\",\n    \"text\": \"Enterprise\",\n    \"disabled\": true\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Segmented\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"free\",\n    \"text\": \"Free\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"pro\",\n    \"text\": \"Pro\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"enterprise\",\n    \"text\": \"Enterprise\",\n    \"disabled\": true\n  }\n]",
         "name": "disabled"
       },
       {
         "description": "Segmented control with icon+text segments for view-mode toggles (list, grid, board).",
-        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"SegmentedControl\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"list\",\n    \"text\": \"List\",\n    \"icon\": \"list\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"grid\",\n    \"text\": \"Grid\",\n    \"icon\": \"squares-four\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"board\",\n    \"text\": \"Board\",\n    \"icon\": \"kanban\"\n  }\n]",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Segmented\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"list\",\n    \"text\": \"List\",\n    \"icon\": \"list\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"grid\",\n    \"text\": \"Grid\",\n    \"icon\": \"squares-four\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"board\",\n    \"text\": \"Board\",\n    \"icon\": \"kanban\"\n  }\n]",
         "name": "icons"
       }
     ],
     "keywords": [
-      "segment"
+      "segment",
+      "toggle-option"
     ],
     "name": "UISegment",
+    "parts": {},
     "related": [
-      "segmented-control"
+      "segmented-control",
+      "ToggleOption"
     ],
     "slots": {},
     "states": [
@@ -104,11 +110,16 @@
       "segment": [
         "segment-button",
         "segmented-option",
-        "option-button"
+        "option-button",
+        "toggle-option"
       ]
     },
     "tag": "segment-ui",
-    "tokens": {},
+    "tokens": {
+      "--segment-bg-selected": {
+        "description": "Background color of a selected segment under the parent's [multiple] mode (no sliding indicator in that mode)."
+      }
+    },
     "traits": [],
     "version": 1
   }

package/components/segment/segment.css

@@ -8,6 +8,16 @@ segment-ui[selected] {
   color: var(--segment-fg-selected);
 }
 
+/* [multiple] (gh#1369, #1363 C1): the parent segmented-ui[multiple] never
+   creates a sliding indicator (segmented.class.js render()), so each
+   selected segment paints its own background instead — mirrors the
+   deprecated toggle-option-ui[selected] treatment it replaces. Scoped to
+   the multiple ancestor so single-select's indicator-driven look is
+   unchanged. */
+segmented-ui[multiple] > segment-ui[selected] {
+  background: var(--segment-bg-selected);
+}
+
 @scope (segment-ui) {
   :where(:scope) {
     /* ── Layout ── */
@@ -33,6 +43,11 @@ segment-ui[selected] {
     --segment-fg-hover:        var(--a-ui-text-hover);
     --segment-fg-selected:     var(--a-chrome-dark);
     --segment-fg-disabled:     var(--a-ui-text-disabled);
+    /* [multiple] only — see the moved-out selector above (Safari 17.x bug
+       note at top of file). Same default the deprecated
+       toggle-option-ui[selected] background used, for visual continuity
+       across the merge (gh#1369). */
+    --segment-bg-selected:     var(--md-sys-color-primary-container);
 
     /* ── Transition ── */
     --segment-duration:        var(--a-duration-fast);

package/components/segment/segment.d.ts

@@ -1,7 +1,8 @@
 /**
  * `<segment-ui>` — Individual segment child of <segmented-ui> — carries the [value],
 [text], optional [icon], and [selected] state for one option in
-a horizontal segmented selector. Distinct from <tab-ui> (a view
+a horizontal segmented selector, single- or multi-select
+(<segmented-ui multiple>, gh#1369). Distinct from <tab-ui> (a view
 switcher's child) and <option> (native option for <select-ui>).
 Use segment-ui only as a direct child of <segmented-ui>; never
 standalone.

package/components/segment/segment.yaml

@@ -10,7 +10,8 @@ version: 1
 description: |
   Individual segment child of <segmented-ui> — carries the [value],
   [text], optional [icon], and [selected] state for one option in
-  a horizontal segmented selector. Distinct from <tab-ui> (a view
+  a horizontal segmented selector, single- or multi-select
+  (<segmented-ui multiple>, gh#1369). Distinct from <tab-ui> (a view
   switcher's child) and <option> (native option for <select-ui>).
   Use segment-ui only as a direct child of <segmented-ui>; never
   standalone.
@@ -51,14 +52,18 @@ states:
     description: Non-interactive; dimmed.
     attribute: disabled
 traits: []
-tokens: {}
+tokens:
+  --segment-bg-selected:
+    description: Background color of a selected segment under the parent's [multiple] mode (no sliding indicator in that mode).
 a2ui:
+  allowedParents:
+    - Segmented
   rules:
-    - rule: 'Child of <segmented-ui> — one selectable option button in a single-select group.'
+    - rule: 'Child of <segmented-ui> — one selectable option button; the parent''s [multiple] axis decides single- or multi-select, segment-ui itself is unchanged either way.'
       reason: 'Cluster contract.'
-    - rule: 'Different from <toggle-option-ui> (which is multi-select inside <toggle-group-ui>).'
-      reason: 'Single vs multi-select sibling distinction.'
-    - rule: 'Selected state managed by parent <segmented-ui> via active attribute; do not set selected directly on segment.'
+    - rule: '<toggle-option-ui> (deprecated, gh#1369) is the same concept — use segment-ui inside <segmented-ui multiple> instead.'
+      reason: 'Deprecation redirect.'
+    - rule: 'Selected state managed by the parent <segmented-ui> — it syncs the selected attribute onto every child whose value is in its own value (single value, or the [multiple] comma-separated set); do not set selected directly on segment.'
       reason: 'Parent owns selection state.'
 anti_patterns: []
 examples:
@@ -68,7 +73,7 @@ examples:
       [
         {
           "id": "root",
-          "component": "SegmentedControl",
+          "component": "Segmented",
           "children": [
             "s1",
             "s2",
@@ -79,7 +84,7 @@ examples:
           "id": "s1",
           "component": "Segment",
           "text": "Overview",
-          "active": true
+          "selected": true
         },
         {
           "id": "s2",
@@ -98,7 +103,7 @@ examples:
       [
         {
           "id": "root",
-          "component": "SegmentedControl",
+          "component": "Segmented",
           "children": [
             "s1",
             "s2",
@@ -130,7 +135,7 @@ examples:
       [
         {
           "id": "root",
-          "component": "SegmentedControl",
+          "component": "Segmented",
           "children": [
             "s1",
             "s2",
@@ -169,7 +174,7 @@ examples:
       [
         {
           "id": "root",
-          "component": "SegmentedControl",
+          "component": "Segmented",
           "children": [
             "s1",
             "s2",
@@ -202,7 +207,7 @@ examples:
       [
         {
           "id": "root",
-          "component": "SegmentedControl",
+          "component": "Segmented",
           "children": [
             "s1",
             "s2",
@@ -233,7 +238,9 @@ examples:
       ]
 keywords:
   - segment
+  - toggle-option
 synonyms:
-  segment: [segment-button, segmented-option, option-button]
+  segment: [segment-button, segmented-option, option-button, toggle-option]
 related:
   - segmented-control
+  - ToggleOption

package/components/segmented/segmented.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Segmented.json",
   "title": "Segmented",
-  "description": "Single-select toggle group with an animated sliding indicator. Children must be segment-ui elements.",
+  "description": "Toggle group with an animated sliding indicator (single-select) or independently-toggleable segments (multi-select via [multiple]). Children must be segment-ui elements.",
   "type": "object",
   "allOf": [
     {
@@ -14,15 +14,20 @@
   ],
   "properties": {
     "allowEmpty": {
-      "description": "Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state.",
+      "description": "Suppresses the connect-time self-select of the first enabled segment when value is falsy. Without it, an empty value silently selects the first segment; with it, a falsy value renders every segment unselected until a real value arrives — for path-bound consumers whose bound value can be a genuine empty state. No effect under [multiple] — multi-select never self-selects (empty value already means \"nothing chosen\").",
       "type": "boolean",
       "default": false
     },
     "component": {
       "const": "Segmented"
     },
+    "multiple": {
+      "description": "Enables multi-select — value becomes a comma-separated set, the sliding indicator is suppressed (each selected segment carries its own background instead), and Space/Enter toggles a focused segment instead of arrow-move selecting it. Positive polarity, matching select-ui[multiple]. Absorbs the role of the deprecated <toggle-group-ui> + <toggle-option-ui> pair (gh#1369, #1363 C1). Unlike <toggle-group-ui single>, re-clicking an already-selected segment does NOT clear the selection — segmented-ui's single-select is standard radiogroup semantics (always exactly one selected once a value is set).",
+      "type": "boolean",
+      "default": false
+    },
     "value": {
-      "description": "Value of the currently selected segment.",
+      "description": "Value of the currently selected segment. Under [multiple], a comma-separated set of selected values (same encoding as select-ui[multiple]).",
       "type": "string",
       "default": ""
     }
@@ -32,6 +37,9 @@
   ],
   "unevaluatedProperties": false,
   "x-adiaui": {
+    "allowedChildren": [
+      "Segment"
+    ],
     "anti_patterns": [],
     "category": "navigation",
     "composes": [],
@@ -45,6 +53,11 @@
         "description": "Segmented control with three segment-ui children for view switching.",
         "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Segmented\",\n    \"value\": \"daily\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"daily\",\n    \"text\": \"Daily\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"weekly\",\n    \"text\": \"Weekly\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"monthly\",\n    \"text\": \"Monthly\"\n  }\n]",
         "name": "basic-segmented"
+      },
+      {
+        "description": "Multi-select segmented control (gh#1369) for filter chips — [multiple] set, value is a comma-separated set of active segments.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Segmented\",\n    \"multiple\": true,\n    \"value\": \"bold,italic\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ]\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Segment\",\n    \"value\": \"bold\",\n    \"text\": \"Bold\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Segment\",\n    \"value\": \"italic\",\n    \"text\": \"Italic\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Segment\",\n    \"value\": \"underline\",\n    \"text\": \"Underline\"\n  }\n]",
+        "name": "multi-select-filter-chips"
       }
     ],
     "keywords": [
@@ -55,21 +68,27 @@
       "switch",
       "tab",
       "tabs",
-      "button-group"
+      "button-group",
+      "filter",
+      "multi-select",
+      "filter-chips"
     ],
     "name": "UISegmented",
+    "parts": {
+      "indicator": {
+        "description": "Auto-created sliding indicator element prepended on first render — template-owned anatomy part, not a light-DOM insertion point (gh#1454). Lazily created once via an internal-field guard, never adopted from a consumer-authored element."
+      }
+    },
     "related": [
       "Segment",
       "ToggleGroup",
+      "ToggleOption",
       "Tabs",
       "Radio"
     ],
     "slots": {
       "default": {
         "description": "Child segment-ui elements that form the toggle group. Children MUST be segment-ui — bare segment tags render text but are silently ignored for the sliding indicator and role/aria-checked state."
-      },
-      "indicator": {
-        "description": "Auto-created sliding indicator element prepended on first render."
       }
     },
     "states": [
@@ -85,6 +104,16 @@
         "button",
         "segmented"
       ],
+      "filter": [
+        "segmented",
+        "toggle-group",
+        "filter-chips"
+      ],
+      "multi-select": [
+        "segmented",
+        "toggle-group",
+        "select"
+      ],
       "options": [
         "settings",
         "radio",