@vectoriox/iox-ui 5.40.0 → 5.41.1

package/fesm2022/vectoriox-iox-ui-composite-core.mjs

@@ -128,8 +128,9 @@ function removeFromComposite(root, node) {
  * The composites' kinds and roles. Two families:
  * - OPEN/CLOSE (CC2 Accordion, CC2.1 Disclosure — composite plan T9 / T21): a Disclosure is a one-item accordion whose
  *   ROOT is its item, so both run the same state machine, attribute planners and runtime (`accordion-runtime.ts`);
- * - EXCLUSIVE (CC4 Tabs — composite T17; the Segmented control joins in CC4b): exactly one item is on, a trigger and
- *   its panel paired by `itemKey` (`tabs.ts`, `exclusive-runtime.ts`).
+ * - EXCLUSIVE (CC4 Tabs — composite T17; CC4b the Segmented control — T32): exactly one item is on; a Tabs' trigger
+ *   and its panel pair by `itemKey` (`tabs.ts`), a Segmented control's options have no panel (`segmented.ts`); both run
+ *   `exclusive-runtime.ts`.
  * Every consumer that treats "an item", "a trigger" or "a panel" alike asks these predicates, never a role literal.
  */
 var CompositeKind;
@@ -137,6 +138,7 @@ var CompositeKind;
     CompositeKind["Accordion"] = "accordion";
     CompositeKind["Disclosure"] = "disclosure";
     CompositeKind["Tabs"] = "tabs";
+    CompositeKind["Segmented"] = "segmented";
 })(CompositeKind || (CompositeKind = {}));
 var AccordionRole;
 (function (AccordionRole) {
@@ -173,12 +175,24 @@ var TabsRole;
     TabsRole["Panels"] = "tabs.panels";
     TabsRole["Panel"] = "tabs.panel";
 })(TabsRole || (TabsRole = {}));
+/**
+ * SEGMENTED (CC4b — composite T32; complex-components board 10). One of a few, always one on, FIXED options (R3): the
+ * root IS the radio group and holds the options directly — no list, no panels. An option may hold the optional saving
+ * badge (inside it, so its words join the option's accessible name).
+ */
+var SegmentedRole;
+(function (SegmentedRole) {
+    SegmentedRole["Segmented"] = "segmented";
+    SegmentedRole["Option"] = "segmented.option";
+    SegmentedRole["Badge"] = "segmented.badge";
+})(SegmentedRole || (SegmentedRole = {}));
 const COMPOSITE_KIND_ROLES = {
     [CompositeKind.Accordion]: { root: AccordionRole.Accordion, item: AccordionRole.Item, trigger: AccordionRole.Trigger, panel: AccordionRole.Panel, icon: AccordionRole.Icon },
     [CompositeKind.Disclosure]: { root: DisclosureRole.Disclosure, item: DisclosureRole.Disclosure, trigger: DisclosureRole.Trigger, panel: DisclosureRole.Panel, icon: DisclosureRole.Icon },
 };
 const EXCLUSIVE_KIND_ROLES = {
     [CompositeKind.Tabs]: { root: TabsRole.Tabs, list: TabsRole.List, trigger: TabsRole.Trigger, panels: TabsRole.Panels, panel: TabsRole.Panel },
+    [CompositeKind.Segmented]: { root: SegmentedRole.Segmented, list: null, trigger: SegmentedRole.Option, panels: null, panel: null },
 };
 const KINDS = Object.values(CompositeKind);
 const TOGGLE_KINDS = Object.keys(COMPOSITE_KIND_ROLES);
@@ -282,6 +296,23 @@ function isExclusiveItemPart(node) {
 function isTabsPart(node) {
     return compositeKindOfRole(node?.role) === CompositeKind.Tabs;
 }
+/** True for any part of a Segmented control (its root included). */
+function isSegmentedPart(node) {
+    return compositeKindOfRole(node?.role) === CompositeKind.Segmented;
+}
+/** The exclusive kind a node's role belongs to (`segmented.option` → Segmented), or null. */
+function exclusiveKindOf(node) {
+    const kind = compositeKindOfRole(node?.role);
+    return isExclusiveKind(kind) ? kind : null;
+}
+/** True when an exclusive root holds its triggers itself (a Segmented control), not in a list part. */
+function exclusiveRootHoldsTriggers(kind) {
+    return EXCLUSIVE_KIND_ROLES[kind].list === null;
+}
+/** True when an exclusive kind's items show a panel (Tabs), so a trigger and its panel are a pair. */
+function exclusiveKindHasPanels(kind) {
+    return !!kind && EXCLUSIVE_KIND_ROLES[kind].panel !== null;
+}
 /** A root of either family — anything that runs a composite runtime. */
 function isAnyCompositeRoot(node) {
     return isCompositeRoot(node) || isExclusiveRoot(node);
@@ -368,7 +399,7 @@ const ACCORDION_WORDS = [
     { question: 'Write the third question', answer: 'Answer it plainly, in two or three short sentences.' },
 ];
 const ACCORDION_NEW_ITEM_WORDS = { question: 'Write a new question', answer: 'Answer it plainly, in two or three short sentences.' };
-var Type$4;
+var Type$5;
 (function (Type) {
     Type["Container"] = "Container";
     Type["LinkedContainer"] = "LinkedContainer";
@@ -376,8 +407,8 @@ var Type$4;
     Type["Text"] = "Text";
     Type["Icon"] = "Icon";
     Type["Repeater"] = "Repeater";
-})(Type$4 || (Type$4 = {}));
-var Style$4;
+})(Type$5 || (Type$5 = {}));
+var Style$5;
 (function (Style) {
     Style["Root"] = "box";
     Style["Item"] = "accordion-item";
@@ -386,14 +417,14 @@ var Style$4;
     Style["Icon"] = "icon";
     Style["Panel"] = "accordion-panel";
     Style["Answer"] = "body";
-})(Style$4 || (Style$4 = {}));
-const ZERO_BOX$3 = '0px 0px 0px 0px';
+})(Style$5 || (Style$5 = {}));
+const ZERO_BOX$4 = '0px 0px 0px 0px';
 const HEADING_LEVELS = ['h2', 'h3', 'h4', 'h5', 'h6'];
 const DEFAULT_LEVEL = 'h3';
 /** A linked trait the header must never carry: it is a button, not a link. */
 const LINK_TYPE$1 = 'linkType';
 /** What each part holds in the recipe — layout only; its LOOK is its element style. */
-const PART_BASE$2 = {
+const PART_BASE$3 = {
     // The items are a column a token apart (`accordion-gap`: 0 for a divider list, 12px for cards).
     [AccordionRole.Accordion]: { display: 'flex', flexDirection: 'column', gap: 'var(--iox-accordion-gap)', width: '100%', minHeight: 'auto', height: 'auto' },
     [AccordionRole.Item]: { display: 'block', width: '100%', minHeight: 'auto', height: 'auto' },
@@ -404,16 +435,16 @@ const PART_BASE$2 = {
 };
 /** The question INHERITS the header's ink (board 4's wears table: the Question reads no colour token), so the
  *  header's hover ink reaches the words; and it sits in the row with no margin of its own. */
-const QUESTION_BASE = { color: 'inherit', margin: ZERO_BOX$3, flexGrow: '1', minWidth: '0px' };
-const ANSWER_BASE = { margin: ZERO_BOX$3, padding: ZERO_BOX$3, minHeight: 'auto' };
-function make$3(create, key, type, role, style, props = {}, label) {
-    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE$2[role] : undefined);
+const QUESTION_BASE = { color: 'inherit', margin: ZERO_BOX$4, flexGrow: '1', minWidth: '0px' };
+const ANSWER_BASE = { margin: ZERO_BOX$4, padding: ZERO_BOX$4, minHeight: 'auto' };
+function make$4(create, key, type, role, style, props = {}, label) {
+    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE$3[role] : undefined);
 }
 /** The icon of an item (an accordion's, or a disclosure's — `role`); its Item-open state (the turn) is driven by
  *  ITS item (`stateTriggers`). ONE builder for both kinds. */
 function buildCompositeIcon(create, key, icon, itemId, role = AccordionRole.Icon) {
     const glyph = ACCORDION_ICON_GLYPH[icon];
-    const node = makeCompositePart(create, { key, type: Type$4.Icon, props: { iconClass: glyph.iconClass }, elementStyle: Style$4.Icon }, role, 'Icon', PART_BASE$2[AccordionRole.Icon]);
+    const node = makeCompositePart(create, { key, type: Type$5.Icon, props: { iconClass: glyph.iconClass }, elementStyle: Style$5.Icon }, role, 'Icon', PART_BASE$3[AccordionRole.Icon]);
     node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { rotate: glyph.turn } };
     if (itemId)
         node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: itemId };
@@ -421,14 +452,14 @@ function buildCompositeIcon(create, key, icon, itemId, role = AccordionRole.Icon
 }
 /** One item: header (question + icon) and panel (answer). `key` makes every part's recipe key unique. */
 function buildAccordionItem(create, words, itemKey, icon = AccordionIcon.Chevron) {
-    const item = make$3(create, `${itemKey}`, Type$4.Container, AccordionRole.Item, Style$4.Item, {}, 'Item');
+    const item = make$4(create, `${itemKey}`, Type$5.Container, AccordionRole.Item, Style$5.Item, {}, 'Item');
     item.itemKey = itemKey;
-    const trigger = make$3(create, `${itemKey}-trigger`, Type$4.LinkedContainer, AccordionRole.Trigger, Style$4.Trigger, {}, 'Header');
-    const question = make$3(create, `${itemKey}-question`, Type$4.Heading, null, Style$4.Question, { content: words.question, level: DEFAULT_LEVEL }, 'Heading');
+    const trigger = make$4(create, `${itemKey}-trigger`, Type$5.LinkedContainer, AccordionRole.Trigger, Style$5.Trigger, {}, 'Header');
+    const question = make$4(create, `${itemKey}-question`, Type$5.Heading, null, Style$5.Question, { content: words.question, level: DEFAULT_LEVEL }, 'Heading');
     writeStyles(question, QUESTION_BASE);
     trigger.children = [question, ...(icon === AccordionIcon.None ? [] : [buildCompositeIcon(create, `${itemKey}-icon`, icon, item.id)])];
-    const panel = make$3(create, `${itemKey}-panel`, Type$4.Container, AccordionRole.Panel, Style$4.Panel, {}, 'Panel');
-    const answer = make$3(create, `${itemKey}-answer`, Type$4.Text, null, Style$4.Answer, { content: words.answer, tag: 'p' }, 'Text');
+    const panel = make$4(create, `${itemKey}-panel`, Type$5.Container, AccordionRole.Panel, Style$5.Panel, {}, 'Panel');
+    const answer = make$4(create, `${itemKey}-answer`, Type$5.Text, null, Style$5.Answer, { content: words.answer, tag: 'p' }, 'Text');
     writeStyles(answer, ANSWER_BASE);
     panel.children = [answer];
     item.children = [trigger, panel];
@@ -436,7 +467,7 @@ function buildAccordionItem(create, words, itemKey, icon = AccordionIcon.Chevron
 }
 /** A fresh Accordion: three items, one open at a time, the first open by default (board 4). */
 function buildAccordionRecipe(create, options = {}) {
-    const root = make$3(create, 'accordion', Type$4.Container, AccordionRole.Accordion, Style$4.Root, {}, 'Accordion');
+    const root = make$4(create, 'accordion', Type$5.Container, AccordionRole.Accordion, Style$5.Root, {}, 'Accordion');
     writeProp(root, CompositeBehaviourTrait.Multiple, options.multiple ?? false);
     writeProp(root, CompositeBehaviourTrait.DefaultOn, options.defaultOn ?? AccordionDefaultOn.First);
     const words = options.items ?? ACCORDION_WORDS;
@@ -475,7 +506,7 @@ function accordionItemOf(node, path) {
 }
 /** True when the root takes its items from content (a Repeater bound to a list, R3). */
 function isAccordionFromContent(root) {
-    return !!root && root.type === Type$4.Repeater;
+    return !!root && root.type === Type$5.Repeater;
 }
 /** The root's items in order — every item (Manual), or the one template item (From content). */
 function accordionItems(root) {
@@ -522,9 +553,9 @@ function accordionQuestionOf(item) {
     let text;
     if (trigger)
         walkComposite(trigger, n => {
-            if (!hit && n.type === Type$4.Heading)
+            if (!hit && n.type === Type$5.Heading)
                 hit = n;
-            if (!text && n.type === Type$4.Text)
+            if (!text && n.type === Type$5.Text)
                 text = n;
         });
     return hit ?? text;
@@ -534,15 +565,15 @@ function accordionAnswerOf(item) {
     const panel = accordionPanelOf(item);
     let hit;
     if (panel)
-        walkComposite(panel, n => { if (!hit && n.type === Type$4.Text)
+        walkComposite(panel, n => { if (!hit && n.type === Type$5.Text)
             hit = n; });
     return hit;
 }
-const stripTags$1 = (v) => String(v ?? '').replace(/<[^>]*>/g, '').trim();
+const stripTags$2 = (v) => String(v ?? '').replace(/<[^>]*>/g, '').trim();
 /** An item's name in the Items list and the layer tree: its question's words. */
 function accordionItemLabel(item) {
     const q = accordionQuestionOf(item);
-    return q ? stripTags$1(readProp(q, 'content')) : '';
+    return q ? stripTags$2(readProp(q, 'content')) : '';
 }
 /** Items ▸ rename: the question's words. */
 function renameAccordionItem(item, question) {
@@ -555,7 +586,7 @@ function accordionHeadingLevel(trigger) {
     const visit = (n) => {
         if (level !== undefined)
             return;
-        if (n.type === Type$4.Heading) {
+        if (n.type === Type$5.Heading) {
             level = readProp(n, 'level');
             return;
         }
@@ -736,6 +767,7 @@ const DOM_ID_PREFIX = {
     [CompositeKind.Accordion]: 'iox-acc',
     [CompositeKind.Disclosure]: 'iox-dis',
     [CompositeKind.Tabs]: 'iox-tab',
+    [CompositeKind.Segmented]: 'iox-seg',
 };
 /** The ARIA pairing ids of an item: unique per composite (its SCOPE id — `compositeScopeId`) and per item (its key). */
 function accordionDomIds(rootId, itemKey, kind = CompositeKind.Accordion) {
@@ -1306,21 +1338,21 @@ const DISCLOSURE_WORDS = {
 };
 /** A disclosure's one item key — its root IS its item. */
 const DISCLOSURE_ITEM_KEY = 'k1';
-var Type$3;
+var Type$4;
 (function (Type) {
     Type["Container"] = "Container";
     Type["LinkedContainer"] = "LinkedContainer";
     Type["Text"] = "Text";
-})(Type$3 || (Type$3 = {}));
-var Style$3;
+})(Type$4 || (Type$4 = {}));
+var Style$4;
 (function (Style) {
     Style["Root"] = "box";
     Style["Trigger"] = "accordion-trigger";
     Style["Word"] = "body";
     Style["Panel"] = "accordion-panel";
     Style["Body"] = "body";
-})(Style$3 || (Style$3 = {}));
-const ZERO_BOX$2 = '0px 0px 0px 0px';
+})(Style$4 || (Style$4 = {}));
+const ZERO_BOX$3 = '0px 0px 0px 0px';
 const HIDDEN = 'none';
 const INHERIT = 'inherit';
 /** A word is a flex item of the toggle — `block` (never `inline`: the compiler drops a value equal to the CSS initial,
@@ -1329,7 +1361,7 @@ const SHOWN = 'block';
 /** What each part holds — layout only; its LOOK is its element style. The trigger sizes to its words (a button in
  *  the flow, not a full-width header row — `fit-content` keeps it from stretching) and the panel spans the root. The
  *  trigger is `flex`, not `inline-flex`: it is a flex item of the root, which blockifies it on the site anyway. */
-const PART_BASE$1 = {
+const PART_BASE$2 = {
     [DisclosureRole.Disclosure]: { display: 'flex', flexDirection: 'column', width: '100%', minHeight: 'auto', height: 'auto' },
     // The toggle reads the text around it (the page's body type, through the root) — a LinkedContainer is born with
     // its own literal font, which an accordion's heading masks and a disclosure's words would show.
@@ -1339,17 +1371,17 @@ const PART_BASE$1 = {
     },
     // A word is just its words: none of a Text's own box (its type's 10px padding, its full width) — the toggle's
     // padding is the click target.
-    [DisclosureRole.More]: { display: SHOWN, margin: ZERO_BOX$2, padding: ZERO_BOX$2, width: 'auto' },
-    [DisclosureRole.Less]: { display: HIDDEN, margin: ZERO_BOX$2, padding: ZERO_BOX$2, width: 'auto' },
+    [DisclosureRole.More]: { display: SHOWN, margin: ZERO_BOX$3, padding: ZERO_BOX$3, width: 'auto' },
+    [DisclosureRole.Less]: { display: HIDDEN, margin: ZERO_BOX$3, padding: ZERO_BOX$3, width: 'auto' },
     [DisclosureRole.Panel]: { display: 'block', width: '100%', minHeight: 'auto', height: 'auto' },
 };
-const BODY_BASE$1 = { margin: ZERO_BOX$2, padding: ZERO_BOX$2, minHeight: 'auto' };
-function make$2(create, key, type, role, style, props, label) {
-    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE$1[role] : undefined);
+const BODY_BASE$1 = { margin: ZERO_BOX$3, padding: ZERO_BOX$3, minHeight: 'auto' };
+function make$3(create, key, type, role, style, props, label) {
+    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE$2[role] : undefined);
 }
 /** One of the trigger's two words: shown while the disclosure is closed (`more`) or open (`less`). */
 function buildWord(create, role, words, rootId) {
-    const node = make$2(create, role === DisclosureRole.More ? 'more' : 'less', Type$3.Text, role, Style$3.Word, { content: words, tag: 'span' }, 'Text');
+    const node = make$3(create, role === DisclosureRole.More ? 'more' : 'less', Type$4.Text, role, Style$4.Word, { content: words, tag: 'span' }, 'Text');
     node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { display: role === DisclosureRole.More ? HIDDEN : SHOWN } };
     if (rootId)
         node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: rootId };
@@ -1358,18 +1390,18 @@ function buildWord(create, role, words, rootId) {
 /** A fresh Disclosure: "Read more" opens the text below and reads "Read less" while it is open; closed by default. */
 function buildDisclosureRecipe(create, options = {}) {
     const words = { ...DISCLOSURE_WORDS, ...(options.words ?? {}) };
-    const root = make$2(create, 'disclosure', Type$3.Container, DisclosureRole.Disclosure, Style$3.Root, {}, 'Disclosure');
+    const root = make$3(create, 'disclosure', Type$4.Container, DisclosureRole.Disclosure, Style$4.Root, {}, 'Disclosure');
     root.itemKey = DISCLOSURE_ITEM_KEY;
     writeProp(root, CompositeBehaviourTrait.DefaultOn, options.open ? AccordionDefaultOn.First : AccordionDefaultOn.None);
     const icon = options.icon ?? AccordionIcon.Chevron;
-    const trigger = make$2(create, 'trigger', Type$3.LinkedContainer, DisclosureRole.Trigger, Style$3.Trigger, {}, 'Toggle');
+    const trigger = make$3(create, 'trigger', Type$4.LinkedContainer, DisclosureRole.Trigger, Style$4.Trigger, {}, 'Toggle');
     trigger.children = [
         buildWord(create, DisclosureRole.More, words.more, root.id),
         buildWord(create, DisclosureRole.Less, words.less, root.id),
         ...(icon === AccordionIcon.None ? [] : [buildCompositeIcon(create, 'icon', icon, root.id, DisclosureRole.Icon)]),
     ];
-    const panel = make$2(create, 'panel', Type$3.Container, DisclosureRole.Panel, Style$3.Panel, {}, 'Panel');
-    const body = make$2(create, 'body', Type$3.Text, null, Style$3.Body, { content: words.body, tag: 'p' }, 'Text');
+    const panel = make$3(create, 'panel', Type$4.Container, DisclosureRole.Panel, Style$4.Panel, {}, 'Panel');
+    const body = make$3(create, 'body', Type$4.Text, null, Style$4.Body, { content: words.body, tag: 'p' }, 'Text');
     writeStyles(body, BODY_BASE$1);
     panel.children = [body];
     root.children = [trigger, panel];
@@ -1532,7 +1564,7 @@ const CARD_WORDS = {
 };
 /** The breakpoint whose layer stacks an "Image side" card (Breakpoint.Mobile, ≤767px). */
 const CARD_STACK_BREAKPOINT = 'mobile';
-var Type$2;
+var Type$3;
 (function (Type) {
     Type["Container"] = "Container";
     Type["Image"] = "Image";
@@ -1540,8 +1572,8 @@ var Type$2;
     Type["Text"] = "Text";
     Type["Icon"] = "Icon";
     Type["ButtonBlock"] = "ButtonBlock";
-})(Type$2 || (Type$2 = {}));
-var Style$2;
+})(Type$3 || (Type$3 = {}));
+var Style$3;
 (function (Style) {
     Style["Card"] = "card";
     Style["Box"] = "box";
@@ -1554,7 +1586,7 @@ var Style$2;
     Style["Ghost"] = "button-ghost";
     Style["Icon"] = "icon";
     Style["Scrim"] = "media-scrim";
-})(Style$2 || (Style$2 = {}));
+})(Style$3 || (Style$3 = {}));
 var Scheme;
 (function (Scheme) {
     Scheme["Default"] = "default";
@@ -1564,11 +1596,11 @@ const LINK_TYPE = 'linkType';
 const SAVE_ICON = 'ph ph-bookmark-simple';
 /** A value an element style writes — read from the contract, never retyped. */
 const styleValue = (style, trait) => String(elementStyleById(style)?.base[trait] ?? '');
-const CARD_PAD = styleValue(Style$2.Card, 'padding');
-const IMAGE_RADIUS = styleValue(Style$2.Media, 'borderRadius');
-const TITLE_SIZE = styleValue(Style$2.Title, 'fontSize');
+const CARD_PAD = styleValue(Style$3.Card, 'padding');
+const IMAGE_RADIUS = styleValue(Style$3.Media, 'borderRadius');
+const TITLE_SIZE = styleValue(Style$3.Title, 'fontSize');
 const LEAD_SIZE = 'var(--iox-size-lead)';
-const ZERO_BOX$1 = '0px 0px 0px 0px';
+const ZERO_BOX$2 = '0px 0px 0px 0px';
 /** What every card part holds in every layout — the recipe's box. */
 const CARD_BASE = {
     // No height: a card is a grid or flex item, and the cell's stretch is what makes a row's cards equal.
@@ -1576,25 +1608,25 @@ const CARD_BASE = {
     [CardRole.Card]: { display: 'flex', gap: '14px', width: '100%', minWidth: '0px', overflow: 'hidden', position: 'relative' },
     [CardRole.Media]: { display: 'block', width: '100%', minHeight: 'auto', flexGrow: '0', flexShrink: '0' },
     [CardRole.Content]: { display: 'flex', flexDirection: 'column', gap: '8px', width: '100%', minWidth: '0px', minHeight: 'auto' },
-    [CardRole.Eyebrow]: { margin: ZERO_BOX$1, padding: ZERO_BOX$1, minHeight: 'auto' },
-    [CardRole.Title]: { margin: ZERO_BOX$1 },
-    [CardRole.Text]: { margin: ZERO_BOX$1, padding: ZERO_BOX$1, minHeight: 'auto' },
+    [CardRole.Eyebrow]: { margin: ZERO_BOX$2, padding: ZERO_BOX$2, minHeight: 'auto' },
+    [CardRole.Title]: { margin: ZERO_BOX$2 },
+    [CardRole.Text]: { margin: ZERO_BOX$2, padding: ZERO_BOX$2, minHeight: 'auto' },
     // Buttons pinned to the bottom (board 8 Q: equal heights + buttons pinned): the content column grows,
     // and the row's auto top margin takes the slack.
     [CardRole.Actions]: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '8px', margin: 'auto 0px 0px 0px', padding: '6px 0px 0px 0px', width: '100%', minHeight: 'auto' },
 };
 const IMAGE_BASE$2 = { display: 'block', width: '100%', maxWidth: '100%' };
 /** A button's label and a pill's words: inherit the type and ink of what holds them. */
-const LABEL_BASE$1 = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX$1, margin: ZERO_BOX$1 };
+const LABEL_BASE$2 = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX$2, margin: ZERO_BOX$2 };
 const INLINE_ICON = { fontSize: '1em' };
 const IN_FLOW = { position: 'relative', top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' };
-const GROWING_CONTENT = { position: 'static', flexGrow: '1', flexShrink: '1', flexBasis: '0%', padding: ZERO_BOX$1 };
+const GROWING_CONTENT = { position: 'static', flexGrow: '1', flexShrink: '1', flexBasis: '0%', padding: ZERO_BOX$2 };
 const LAYOUTS = {
     [CardLayout.Top]: {
         card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-start', minHeight: 'auto', padding: CARD_PAD },
         media: { ...IN_FLOW, flexBasis: 'auto' },
         image: { aspectRatio: '4 / 3', height: 'auto', minHeight: 'auto', borderRadius: IMAGE_RADIUS },
-        content: GROWING_CONTENT, contentStyle: Style$2.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$3.Box, contentScheme: Scheme.Default,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: true,
     },
@@ -1602,7 +1634,7 @@ const LAYOUTS = {
         card: { flexDirection: 'row', alignItems: 'stretch', justifyContent: 'flex-start', minHeight: 'auto', padding: CARD_PAD },
         media: { ...IN_FLOW, flexBasis: '42%' },
         image: { aspectRatio: 'auto', height: '100%', minHeight: '180px', borderRadius: IMAGE_RADIUS },
-        content: GROWING_CONTENT, contentStyle: Style$2.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$3.Box, contentScheme: Scheme.Default,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: true,
         stack: {
@@ -1612,11 +1644,11 @@ const LAYOUTS = {
         },
     },
     [CardLayout.Overlay]: {
-        card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-end', minHeight: '340px', padding: ZERO_BOX$1 },
+        card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-end', minHeight: '340px', padding: ZERO_BOX$2 },
         media: { position: 'absolute', top: '0px', right: '0px', bottom: '0px', left: '0px', flexBasis: 'auto' },
         image: { aspectRatio: 'auto', height: '100%', minHeight: 'auto', borderRadius: '0px' },
         content: { position: 'relative', flexGrow: '0', flexShrink: '0', flexBasis: 'auto', padding: `72px ${CARD_PAD} ${CARD_PAD} ${CARD_PAD}` },
-        contentStyle: Style$2.Scrim, contentScheme: Scheme.Inverse,
+        contentStyle: Style$3.Scrim, contentScheme: Scheme.Inverse,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: false,
     },
@@ -1624,7 +1656,7 @@ const LAYOUTS = {
         card: { flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-start', minHeight: 'auto', padding: CARD_PAD },
         media: { ...IN_FLOW, flexBasis: '72px' },
         image: { aspectRatio: '1 / 1', height: 'auto', minHeight: 'auto', borderRadius: IMAGE_RADIUS },
-        content: GROWING_CONTENT, contentStyle: Style$2.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$3.Box, contentScheme: Scheme.Default,
         title: { fontSize: LEAD_SIZE },
         badgeOnMedia: false,
         partsOff: [CardPart.Text, CardPart.Actions],
@@ -1635,7 +1667,7 @@ const STACK_KEYS = {
     media: Object.keys(LAYOUTS[CardLayout.Side].stack.media),
     image: Object.keys(LAYOUTS[CardLayout.Side].stack.image),
 };
-function make$1(create, key, type, role, elementStyle, props = {}, label) {
+function make$2(create, key, type, role, elementStyle, props = {}, label) {
     const node = create({ key, type, props, elementStyle });
     if (role)
         node.role = role;
@@ -1645,33 +1677,33 @@ function make$1(create, key, type, role, elementStyle, props = {}, label) {
     return node;
 }
 function buttonLabel(create, key, words) {
-    const label = make$1(create, key, Type$2.Text, null, Style$2.Label, { content: words, tag: 'span' });
-    writeStyles(label, LABEL_BASE$1);
+    const label = make$2(create, key, Type$3.Text, null, Style$3.Label, { content: words, tag: 'span' });
+    writeStyles(label, LABEL_BASE$2);
     return label;
 }
 /** Each optional part (and the locked title) as the recipe builds it. */
 const PART_BUILDERS = {
     [CardPart.Media]: (create) => {
-        const media = make$1(create, 'media', Type$2.Container, CardRole.Media, Style$2.Box, {}, 'Media');
-        const image = make$1(create, 'image', Type$2.Image, null, Style$2.Media, { src: '', alt: '' });
+        const media = make$2(create, 'media', Type$3.Container, CardRole.Media, Style$3.Box, {}, 'Media');
+        const image = make$2(create, 'image', Type$3.Image, null, Style$3.Media, { src: '', alt: '' });
         writeStyles(image, IMAGE_BASE$2);
         media.children = [image];
         return media;
     },
-    [CardPart.Badge]: (create, words, tone) => {
-        const badge = buildBadge(create, { tone, text: words.badge, key: 'badge' });
+    [CardPart.Badge]: (create, words, tone, badgeIcon) => {
+        const badge = buildBadge(create, { tone, text: words.badge, key: 'badge', ...(badgeIcon ? { icon: badgeIcon } : {}) });
         badge.role = CardRole.Badge;
         badge.label = 'Badge';
         return badge;
     },
-    [CardPart.Eyebrow]: (create, words) => make$1(create, 'eyebrow', Type$2.Text, CardRole.Eyebrow, Style$2.Eyebrow, { content: words.eyebrow, tag: 'p' }, 'Eyebrow'),
-    [CardPart.Text]: (create, words) => make$1(create, 'text', Type$2.Text, CardRole.Text, Style$2.Body, { content: words.text, tag: 'p' }, 'Text'),
+    [CardPart.Eyebrow]: (create, words) => make$2(create, 'eyebrow', Type$3.Text, CardRole.Eyebrow, Style$3.Eyebrow, { content: words.eyebrow, tag: 'p' }, 'Eyebrow'),
+    [CardPart.Text]: (create, words) => make$2(create, 'text', Type$3.Text, CardRole.Text, Style$3.Body, { content: words.text, tag: 'p' }, 'Text'),
     [CardPart.Actions]: (create, words) => {
-        const actions = make$1(create, 'actions', Type$2.Container, CardRole.Actions, Style$2.Box, {}, 'Buttons');
-        const primary = make$1(create, 'primary', Type$2.ButtonBlock, null, Style$2.Primary);
+        const actions = make$2(create, 'actions', Type$3.Container, CardRole.Actions, Style$3.Box, {}, 'Buttons');
+        const primary = make$2(create, 'primary', Type$3.ButtonBlock, null, Style$3.Primary);
         primary.children = [buttonLabel(create, 'primary-label', words.primary)];
-        const ghost = make$1(create, 'secondary', Type$2.ButtonBlock, null, Style$2.Ghost);
-        const icon = make$1(create, 'secondary-icon', Type$2.Icon, null, Style$2.Icon, { iconClass: SAVE_ICON });
+        const ghost = make$2(create, 'secondary', Type$3.ButtonBlock, null, Style$3.Ghost);
+        const icon = make$2(create, 'secondary-icon', Type$3.Icon, null, Style$3.Icon, { iconClass: SAVE_ICON });
         writeStyles(icon, INLINE_ICON);
         ghost.children = [icon, buttonLabel(create, 'secondary-label', words.secondary)];
         actions.children = [primary, ghost];
@@ -1679,15 +1711,15 @@ const PART_BUILDERS = {
     },
 };
 function buildTitle(create, words) {
-    return make$1(create, 'title', Type$2.Heading, CardRole.Title, Style$2.Title, { content: words.title, level: 'h3', [LINK_TYPE]: LinkType.None }, 'Title');
+    return make$2(create, 'title', Type$3.Heading, CardRole.Title, Style$3.Title, { content: words.title, level: 'h3', [LINK_TYPE]: LinkType.None }, 'Title');
 }
 /** A fresh Card v2: every part a node with its role and element style, laid out by `options.layout`. */
 function buildCardRecipe(create, options = {}) {
     const words = { ...CARD_WORDS, ...(options.words ?? {}) };
     const tone = options.badgeTone ?? BadgeTone.Accent;
     const on = (part) => options.parts?.[part] !== false;
-    const card = make$1(create, 'card', Type$2.Container, CardRole.Card, Style$2.Card, {}, 'Card');
-    const content = make$1(create, 'content', Type$2.Container, CardRole.Content, Style$2.Box, {}, 'Content');
+    const card = make$2(create, 'card', Type$3.Container, CardRole.Card, Style$3.Card, {}, 'Card');
+    const content = make$2(create, 'content', Type$3.Container, CardRole.Content, Style$3.Box, {}, 'Content');
     content.children = [
         ...(on(CardPart.Eyebrow) ? [PART_BUILDERS[CardPart.Eyebrow](create, words, tone)] : []),
         buildTitle(create, words),
@@ -1696,7 +1728,7 @@ function buildCardRecipe(create, options = {}) {
     ];
     card.children = [...(on(CardPart.Media) ? [PART_BUILDERS[CardPart.Media](create, words, tone)] : []), content];
     if (on(CardPart.Badge))
-        placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone), true);
+        placeBadge(card, PART_BUILDERS[CardPart.Badge](create, words, tone, options.badgeIcon), true);
     applyCardLayout(card, options.layout ?? CardLayout.Top, options);
     return card;
 }
@@ -1718,7 +1750,7 @@ function cardRootOf(node, path) {
 function cardPartsOf(card) {
     return Object.fromEntries(CARD_PARTS.map(part => [part, !!findByRole(card, CARD_PART_ROLE[part])]));
 }
-const imageOf = (media) => media?.children?.find(c => c.type === Type$2.Image);
+const imageOf = (media) => media?.children?.find(c => c.type === Type$3.Image);
 /** Put the badge where the layout says: the Media's top corner, or the head of the content column
  *  (Image behind text, Compact, or no Media at all). The corner's insets are logical, in iox-design.css
  *  (mirrored in RTL); `position` is the node's own, because the editing canvas forces every node's
@@ -2001,17 +2033,17 @@ function sliderSlides(children) {
     return (children ?? []).filter(c => !isSliderPart(c));
 }
 // ── the parts' recipe ───────────────────────────────────────────────────────────────────────────────
-var Type$1;
+var Type$2;
 (function (Type) {
     Type["ButtonBlock"] = "ButtonBlock";
     Type["Icon"] = "Icon";
     Type["Container"] = "Container";
-})(Type$1 || (Type$1 = {}));
-var Style$1;
+})(Type$2 || (Type$2 = {}));
+var Style$2;
 (function (Style) {
     Style["Control"] = "button-secondary";
     Style["Icon"] = "icon";
-})(Style$1 || (Style$1 = {}));
+})(Style$2 || (Style$2 = {}));
 /** Each part's glyph (Phosphor) and its default accessible name. */
 const SLIDER_PART_GLYPH = {
     [SliderRole.Pause]: 'ph ph-pause',
@@ -2053,7 +2085,7 @@ function legacyLookOf(slider) {
 /** One part, from the recipe (board 6: `button-secondary` controls, token dots) or in a migrated slider's legacy look. */
 function buildSliderPart(create, role, legacy) {
     if (role === SliderRole.Pagination) {
-        const dots = makeCompositePart(create, { key: 'pagination', type: Type$1.Container, props: {}, elementStyle: NO_ELEMENT_STYLE }, role, PART_LABEL[role], legacy?.paginationColor ? { ...PAGINATION_BASE, color: legacy.paginationColor } : PAGINATION_BASE);
+        const dots = makeCompositePart(create, { key: 'pagination', type: Type$2.Container, props: {}, elementStyle: NO_ELEMENT_STYLE }, role, PART_LABEL[role], legacy?.paginationColor ? { ...PAGINATION_BASE, color: legacy.paginationColor } : PAGINATION_BASE);
         dots.children = [];
         return dots;
     }
@@ -2069,9 +2101,9 @@ function buildSliderPart(create, role, legacy) {
     const props = { tag: 'button', type: 'button' };
     if (role !== SliderRole.Pause)
         props[SLIDER_NAME_TRAIT] = role === SliderRole.Prev ? SLIDER_WORDS.en.prev : SLIDER_WORDS.en.next;
-    const button = makeCompositePart(create, { key, type: Type$1.ButtonBlock, props, elementStyle: legacy ? NO_ELEMENT_STYLE : Style$1.Control }, role, PART_LABEL[role], base);
+    const button = makeCompositePart(create, { key, type: Type$2.ButtonBlock, props, elementStyle: legacy ? NO_ELEMENT_STYLE : Style$2.Control }, role, PART_LABEL[role], base);
     const iconBase = legacy ? { ...ICON_BASE, fontSize: `${Math.round((legacy.navigationSize ?? 44) * 0.6)}px` } : ICON_BASE;
-    const icon = makeCompositePart(create, { key: `${key}-icon`, type: Type$1.Icon, props: { iconClass: SLIDER_PART_GLYPH[role] }, elementStyle: legacy ? NO_ELEMENT_STYLE : Style$1.Icon }, null, 'Icon', iconBase);
+    const icon = makeCompositePart(create, { key: `${key}-icon`, type: Type$2.Icon, props: { iconClass: SLIDER_PART_GLYPH[role] }, elementStyle: legacy ? NO_ELEMENT_STYLE : Style$2.Icon }, null, 'Icon', iconBase);
     button.children = [icon];
     return button;
 }
@@ -2263,6 +2295,11 @@ const COMPOSITE_ROLE_SPECS = {
     [TabsRole.Panels]: { parent: TabsRole.Tabs, locked: true, accepts: [TabsRole.Panel] },
     [TabsRole.Trigger]: { parent: TabsRole.List, pinned: true },
     [TabsRole.Panel]: { parent: TabsRole.Panels, pinned: true },
+    // CC4b — a Segmented control holds only its options (each may be deleted — two stay — but never moved out); an
+    // option's saving badge is optional (Option ▸ Saving badge) and stays in its option.
+    [SegmentedRole.Segmented]: { parent: null, accepts: [SegmentedRole.Option] },
+    [SegmentedRole.Option]: { parent: SegmentedRole.Segmented, pinned: true },
+    [SegmentedRole.Badge]: { parent: SegmentedRole.Option, pinned: true },
     // CC3 — a Slider's controls are its own direct children (Swiper is handed them). The pause control stays while
     // Autoplay is on (WCAG 2.2.2): the Autoplay switch removes it, never Delete. The arrows and the dots follow
     // their switches and may be deleted.
@@ -2480,7 +2517,7 @@ const SLIDE_TO_ROW = 'row';
 const ROW_INDEX_ATTRIBUTE = 'data-iox-row-idx';
 const LIGHTBOX_LABEL = 'Lightbox';
 const DIALOG = 'Dialog';
-const REPEATER = 'Repeater';
+const REPEATER$1 = 'Repeater';
 const SOURCE = 'source';
 const SOURCE_PATH = 'sourcePath';
 const ZERO = '0px 0px 0px 0px';
@@ -2573,7 +2610,7 @@ function buildLightboxRecipe(create, options = {}) {
 const lastSegment = (path) => (path ? String(path).split('.').filter(Boolean).pop() ?? '' : '');
 /** What a Repeater (its `source` binding) or a bound Slider (its `source` / `sourcePath` traits) repeats over. */
 function repeatSourceOf(node) {
-    if (!node || (node.type !== REPEATER && node.type !== SLIDER_TYPE))
+    if (!node || (node.type !== REPEATER$1 && node.type !== SLIDER_TYPE))
         return null;
     const binding = (node.bindings ?? []).find(b => b?.prop === SOURCE);
     if (binding?.source)
@@ -2674,15 +2711,15 @@ const TABS_WORDS = [
     { label: 'Third tab', text: 'Say what this tab is about in a sentence or two. Its picture sits beside it.' },
 ];
 const TABS_NEW_TAB_WORDS = { label: 'New tab', text: 'Say what this tab is about in a sentence or two. Its picture sits beside it.' };
-var Type;
+var Type$1;
 (function (Type) {
     Type["Container"] = "Container";
     Type["ButtonBlock"] = "ButtonBlock";
     Type["Text"] = "Text";
     Type["Image"] = "Image";
     Type["Repeater"] = "Repeater";
-})(Type || (Type = {}));
-var Style;
+})(Type$1 || (Type$1 = {}));
+var Style$1;
 (function (Style) {
     Style["Root"] = "box";
     Style["List"] = "tab-list";
@@ -2692,12 +2729,12 @@ var Style;
     Style["Panel"] = "box";
     Style["Media"] = "media";
     Style["Body"] = "body";
-})(Style || (Style = {}));
-const ZERO_BOX = '0px 0px 0px 0px';
+})(Style$1 || (Style$1 = {}));
+const ZERO_BOX$1 = '0px 0px 0px 0px';
 /** The list's hairline, as its element style writes it — read from the contract, never retyped. */
-const LIST_EDGE = String(elementStyleById(Style.List)?.base['borderWidth'] ?? ZERO_BOX);
+const LIST_EDGE = String(elementStyleById(Style$1.List)?.base['borderWidth'] ?? ZERO_BOX$1);
 /** What each part holds — layout only; its LOOK is its element style. The list WRAPS at narrow widths (board 3). */
-const PART_BASE = {
+const PART_BASE$1 = {
     [TabsRole.Tabs]: { display: 'flex', width: '100%', minHeight: 'auto', height: 'auto' },
     [TabsRole.List]: { display: 'flex', gap: '4px', minHeight: 'auto', height: 'auto' },
     [TabsRole.Trigger]: { width: 'auto', minHeight: 'auto', height: 'auto', cursor: 'pointer' },
@@ -2705,9 +2742,9 @@ const PART_BASE = {
     // Board 3: a panel is any nodes at all — the recipe's is a picture beside its words.
     [TabsRole.Panel]: { display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: '24px', alignItems: 'center', width: '100%', minHeight: 'auto', height: 'auto' },
 };
-const LABEL_BASE = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX, margin: ZERO_BOX };
+const LABEL_BASE$1 = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX$1, margin: ZERO_BOX$1 };
 const IMAGE_BASE = { display: 'block', width: '100%', maxWidth: '100%', aspectRatio: '4 / 3', height: 'auto', minHeight: 'auto' };
-const BODY_BASE = { margin: ZERO_BOX, padding: ZERO_BOX, minHeight: 'auto' };
+const BODY_BASE = { margin: ZERO_BOX$1, padding: ZERO_BOX$1, minHeight: 'auto' };
 /** On a phone a panel's picture sits above its words. */
 const PANEL_STACK = { gridTemplateColumns: '1fr' };
 const ORIENTATION_LAYOUT = {
@@ -2717,42 +2754,42 @@ const ORIENTATION_LAYOUT = {
     },
     [TabsOrientation.Vertical]: {
         root: { flexDirection: 'row', alignItems: 'flex-start', gap: '24px' },
-        list: { flexDirection: 'column', flexWrap: 'nowrap', width: 'auto', flexShrink: '0', borderWidth: ZERO_BOX },
+        list: { flexDirection: 'column', flexWrap: 'nowrap', width: 'auto', flexShrink: '0', borderWidth: ZERO_BOX$1 },
         rootStack: { flexDirection: 'column', alignItems: 'stretch', gap: '20px' },
         listStack: { width: '100%' },
     },
 };
 const ROOT_STACK_KEYS = ['flexDirection', 'alignItems', 'gap'];
 const LIST_STACK_KEYS = ['width'];
-function make(create, key, type, role, style, props = {}, label) {
-    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE[role] : undefined);
+function make$1(create, key, type, role, style, props = {}, label) {
+    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE$1[role] : undefined);
 }
 /** One tab and its panel, sharing `itemKey`. */
 function buildTabPair(create, words, itemKey) {
-    const tab = make(create, `${itemKey}-tab`, Type.ButtonBlock, TabsRole.Trigger, Style.Tab, {}, 'Tab');
+    const tab = make$1(create, `${itemKey}-tab`, Type$1.ButtonBlock, TabsRole.Trigger, Style$1.Tab, {}, 'Tab');
     tab.itemKey = itemKey;
-    const label = make(create, `${itemKey}-label`, Type.Text, null, Style.Label, { content: words.label, tag: 'span' }, 'Text');
-    writeStyles(label, LABEL_BASE);
+    const label = make$1(create, `${itemKey}-label`, Type$1.Text, null, Style$1.Label, { content: words.label, tag: 'span' }, 'Text');
+    writeStyles(label, LABEL_BASE$1);
     tab.children = [label];
-    const panel = make(create, `${itemKey}-panel`, Type.Container, TabsRole.Panel, Style.Panel, {}, 'Panel');
+    const panel = make$1(create, `${itemKey}-panel`, Type$1.Container, TabsRole.Panel, Style$1.Panel, {}, 'Panel');
     panel.itemKey = itemKey;
     writeLayerStyles(panel, TABS_STACK_BREAKPOINT, PANEL_STACK);
-    const image = make(create, `${itemKey}-image`, Type.Image, null, Style.Media, { src: '', alt: '' }, 'Image');
+    const image = make$1(create, `${itemKey}-image`, Type$1.Image, null, Style$1.Media, { src: '', alt: '' }, 'Image');
     writeStyles(image, IMAGE_BASE);
-    const text = make(create, `${itemKey}-text`, Type.Text, null, Style.Body, { content: words.text, tag: 'p' }, 'Text');
+    const text = make$1(create, `${itemKey}-text`, Type$1.Text, null, Style$1.Body, { content: words.text, tag: 'p' }, 'Text');
     writeStyles(text, BODY_BASE);
     panel.children = [image, text];
     return { tab, panel };
 }
 /** A fresh Tabs: three tabs, the first on, activated by a click, the list across the top (board 3). */
 function buildTabsRecipe(create, options = {}) {
-    const root = make(create, 'tabs', Type.Container, TabsRole.Tabs, Style.Root, {}, 'Tabs');
+    const root = make$1(create, 'tabs', Type$1.Container, TabsRole.Tabs, Style$1.Root, {}, 'Tabs');
     writeProp(root, TabsBehaviourTrait.ActivateOn, options.activateOn ?? TabsActivateOn.Click);
     writeProp(root, TabsBehaviourTrait.Orientation, options.orientation ?? TabsOrientation.Horizontal);
     if (options.label)
         writeProp(root, TabsBehaviourTrait.Label, options.label);
-    const list = make(create, 'list', Type.Container, TabsRole.List, Style.List, {}, 'Tab list');
-    const panels = make(create, 'panels', Type.Container, TabsRole.Panels, Style.Panels, {}, 'Panels');
+    const list = make$1(create, 'list', Type$1.Container, TabsRole.List, Style$1.List, {}, 'Tab list');
+    const panels = make$1(create, 'panels', Type$1.Container, TabsRole.Panels, Style$1.Panels, {}, 'Panels');
     const pairs = (options.tabs ?? TABS_WORDS).map((w, i) => buildTabPair(create, w, `k${i + 1}`));
     list.children = pairs.map(p => p.tab);
     panels.children = pairs.map(p => p.panel);
@@ -2782,7 +2819,7 @@ function tabsPanels(root) {
 }
 /** True when the Tabs takes its tabs from content (its list is a Repeater, R3). */
 function isTabsFromContent(root) {
-    return !!root && tabsListOf(root)?.type === Type.Repeater;
+    return !!root && tabsListOf(root)?.type === Type$1.Repeater;
 }
 /** The panel paired with `tab` (the same key), or undefined. From content the one template panel pairs the template tab. */
 function tabPanelOf(root, tab) {
@@ -2807,15 +2844,15 @@ function tabsPartnerOf(root, node) {
 /** The words a tab shows: its first Text's. */
 function tabLabelNodeOf(tab) {
     let hit;
-    walkComposite(tab, n => { if (!hit && n !== tab && n.type === Type.Text)
+    walkComposite(tab, n => { if (!hit && n !== tab && n.type === Type$1.Text)
         hit = n; });
     return hit;
 }
-const stripTags = (v) => String(v ?? '').replace(/<[^>]*>/g, '').trim();
+const stripTags$1 = (v) => String(v ?? '').replace(/<[^>]*>/g, '').trim();
 /** A tab's name in the Items list, the layer tree and the item-action picker: its words. */
 function tabLabel(tab) {
     const label = tabLabelNodeOf(tab);
-    return label ? stripTags(readProp(label, 'content')) : '';
+    return label ? stripTags$1(readProp(label, 'content')) : '';
 }
 /** Items ▸ rename: the tab's words. */
 function renameTab(tab, words) {
@@ -2825,14 +2862,14 @@ function renameTab(tab, words) {
 /** The first Text inside a panel (the words From content binds to). */
 function tabPanelTextOf(panel) {
     let hit;
-    walkComposite(panel, n => { if (!hit && n !== panel && n.type === Type.Text)
+    walkComposite(panel, n => { if (!hit && n !== panel && n.type === Type$1.Text)
         hit = n; });
     return hit;
 }
 /** The first Image inside a panel. */
 function tabPanelImageOf(panel) {
     let hit;
-    walkComposite(panel, n => { if (!hit && n.type === Type.Image)
+    walkComposite(panel, n => { if (!hit && n.type === Type$1.Image)
         hit = n; });
     return hit;
 }
@@ -2970,7 +3007,7 @@ function tabsItemTriggerIds(root) {
     }
 }
 function tabsScope(rootId, behaviour, keys, label = '') {
-    return { rootId, behaviour, keys, active: keys[0] ?? null, label };
+    return { kind: CompositeKind.Tabs, rootId, behaviour, keys, active: keys[0] ?? null, label };
 }
 /** The item keys a manual Tabs pairs by — its tabs' own keys, in order (a tab with none by its index). */
 function manualTabKeys(root) {
@@ -3148,6 +3185,351 @@ function tabsToManual(root, list, panels, rows, clone, resolve) {
     return pairs;
 }
 
+/**
+ * THE SEGMENTED CONTROL (CC4b — composite K4 T32, pulled forward; complex-components board 10, APPROVED 2026-10-23 with
+ * Q31–Q40 as recommended). One of a few, always one on, FIXED options (R3 / Q36). Not a component: a recipe of
+ * ordinary nodes, each part carrying a role, so every option, its words and its optional badge are selectable on the
+ * canvas, in the layer tree and the breadcrumb, and wear their own element styles (R2).
+ *
+ *   Container `segmented`            role segmented          traits defaultOn (an option's key) · ariaLabel (its name)
+ *   └─ ButtonBlock `segmented-option` ×2–4   role segmented.option   itemKey monthly · yearly …  → <button role=radio>
+ *       ├─ Text `button-label`       the words
+ *       └─ Container `badge-success` role segmented.badge (optional, off) › Icon + Text — a placeholder (a price claim)
+ *
+ * The ARIA shape is the APG RADIO GROUP (Q31): `role=radiogroup` + its accessible name on the root, `<button role=radio
+ * aria-checked>` per option with a roving tabindex — one Tab stop; ← → follow the reading direction (mirrored under
+ * RTL), ↑ ↓ the DOM order, every move wraps and turns the option on. It runs the EXCLUSIVE runtime the Tabs run
+ * (`exclusive-runtime.ts`), on the builder canvas and both engine paths, from the attribute planners below. What follows
+ * the control (a price) is an ordinary node OUTSIDE it styled "when its option is on" — the targeted `trigger-on`.
+ */
+var SegmentedTrait;
+(function (SegmentedTrait) {
+    /** The option on at first paint — an option's key. */
+    SegmentedTrait["DefaultOn"] = "defaultOn";
+    /** The radio group's accessible name (`aria-label` on the root). Empty → an audit finding. */
+    SegmentedTrait["Label"] = "ariaLabel";
+})(SegmentedTrait || (SegmentedTrait = {}));
+/** Q40: two options at least, four at most (past four the words no longer fit a phone row — a Select or Tabs then). */
+const SEGMENTED_MIN_OPTIONS = 2;
+const SEGMENTED_MAX_OPTIONS = 4;
+/** A fresh Segmented control's options (board 10: a billing period) — generic words, the author's to rename. */
+const SEGMENTED_WORDS = [
+    { key: 'monthly', label: 'Monthly' },
+    { key: 'yearly', label: 'Yearly' },
+];
+const SEGMENTED_NEW_OPTION_WORDS = 'New option';
+/** The name a fresh control carries (board 10). */
+const SEGMENTED_NAME = 'Billing period';
+/** Q33: the saving badge's words start as a PLACEHOLDER — a saving is a price claim, never invented. */
+const SEGMENTED_BADGE_WORDS = 'Yearly saving';
+const SEGMENTED_BADGE_TONE = BadgeTone.Success;
+var Type;
+(function (Type) {
+    Type["Container"] = "Container";
+    Type["ButtonBlock"] = "ButtonBlock";
+    Type["Text"] = "Text";
+})(Type || (Type = {}));
+var Style;
+(function (Style) {
+    Style["Root"] = "segmented";
+    Style["Option"] = "segmented-option";
+    Style["Label"] = "button-label";
+})(Style || (Style = {}));
+const ZERO_BOX = '0px 0px 0px 0px';
+/** What each part holds — layout only; its LOOK is its element style (the track's fill, border, radius and pad; the
+ *  option's ink, pad, radius and 44px target). The options sit in a flex row a gap token apart (board 10); each GROWS,
+ *  which changes nothing while the track hugs them and shares the row when the track is stretched (the pricing
+ *  pattern's phone layer: board 10's full-width control). */
+const PART_BASE = {
+    [SegmentedRole.Segmented]: { display: 'inline-flex', flexDirection: 'row', alignItems: 'stretch', gap: 'var(--iox-segmented-gap)', width: 'auto', maxWidth: '100%', height: 'auto' },
+    [SegmentedRole.Option]: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: '8px', width: 'auto', height: 'auto', cursor: 'pointer', flexGrow: '1' },
+};
+const LABEL_BASE = { width: 'auto', minHeight: 'auto', padding: ZERO_BOX, margin: ZERO_BOX };
+/** The badge inside an option keeps to the option's row (never its own line). */
+const BADGE_IN_OPTION = { alignSelf: 'center' };
+function make(create, key, type, role, style, props = {}, label) {
+    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE[role] : undefined);
+}
+/** One option: a ButtonBlock carrying its key, holding its words. */
+function buildSegmentedOption(create, words) {
+    const option = make(create, `${words.key}-option`, Type.ButtonBlock, SegmentedRole.Option, Style.Option, {}, 'Option');
+    option.itemKey = words.key;
+    const label = make(create, `${words.key}-label`, Type.Text, null, Style.Label, { content: words.label, tag: 'span' }, 'Text');
+    writeStyles(label, LABEL_BASE);
+    option.children = [label];
+    return option;
+}
+/** A fresh Segmented control: Monthly · Yearly, Monthly on, named "Billing period" (board 10 ▸ Palette). */
+function buildSegmentedRecipe(create, options = {}) {
+    const words = options.options ?? SEGMENTED_WORDS;
+    const root = make(create, 'segmented', Type.Container, SegmentedRole.Segmented, Style.Root, {}, 'Segmented');
+    root.children = words.map(w => buildSegmentedOption(create, w));
+    writeProp(root, SegmentedTrait.DefaultOn, options.defaultOn && words.some(w => w.key === options.defaultOn) ? options.defaultOn : words[0]?.key ?? '');
+    writeProp(root, SegmentedTrait.Label, options.label ?? SEGMENTED_NAME);
+    return root;
+}
+// ── reading a tree ──────────────────────────────────────────────────────────────────────────────
+function isSegmentedRoot(node) {
+    return node?.role === SegmentedRole.Segmented;
+}
+/** The options in order. */
+function segmentedOptions(root) {
+    return (root?.children ?? []).filter(c => c.role === SegmentedRole.Option);
+}
+/** The key an option renders with: its own key, else its index among the options. */
+function segmentedOptionKey(option, index) {
+    return option.itemKey || `item-${index}`;
+}
+/** Every option's key, in order. */
+function segmentedKeys(root) {
+    return segmentedOptions(root).map((o, i) => segmentedOptionKey(o, i));
+}
+/** The words an option shows: its first Text that is not inside its badge. */
+function segmentedOptionLabelNodeOf(option) {
+    for (const child of option.children ?? []) {
+        if (child.role === SegmentedRole.Badge)
+            continue;
+        if (child.type === Type.Text)
+            return child;
+        let hit;
+        walkComposite(child, n => { if (!hit && n.type === Type.Text)
+            hit = n; });
+        if (hit)
+            return hit;
+    }
+    return undefined;
+}
+const stripTags = (v) => String(v ?? '').replace(/<[^>]*>/g, '').trim();
+/** An option's name in the Options list, the layer tree, the item pickers and "Showing on canvas": its words. */
+function segmentedOptionLabel(option) {
+    const label = segmentedOptionLabelNodeOf(option);
+    return label ? stripTags(readProp(label, 'content')) : '';
+}
+/** Options ▸ rename: the option's words. */
+function renameSegmentedOption(option, words) {
+    const label = segmentedOptionLabelNodeOf(option);
+    return !!label && writeProp(label, 'content', words);
+}
+/** The radio group's accessible name (empty when unnamed). */
+function segmentedLabel(root) {
+    return root ? String(readProp(root, SegmentedTrait.Label) ?? '').trim() : '';
+}
+/** The option on by default: the stored key when it still names an option, else the first option. */
+function segmentedDefaultOn(root) {
+    const keys = segmentedKeys(root);
+    const stored = root ? String(readProp(root, SegmentedTrait.DefaultOn) ?? '') : '';
+    return keys.includes(stored) ? stored : keys[0] ?? null;
+}
+/** Behaviour ▸ On by default and Accessibility ▸ Name. False when the root has no such trait. */
+function setSegmentedBehaviour(root, patch) {
+    let ok = true;
+    if (patch.defaultOn !== undefined)
+        ok = writeProp(root, SegmentedTrait.DefaultOn, patch.defaultOn) && ok;
+    if (patch.label !== undefined)
+        ok = writeProp(root, SegmentedTrait.Label, patch.label) && ok;
+    return ok;
+}
+// ── editing (Options list, toolbar ▸ Add option, the structure guard) ───────────────────────────
+var SegmentedEditRefusal;
+(function (SegmentedEditRefusal) {
+    /** Q40: a Segmented control keeps at least two options. */
+    SegmentedEditRefusal["MinOptions"] = "min-options";
+    /** Q40: a Segmented control holds four options at most. */
+    SegmentedEditRefusal["MaxOptions"] = "max-options";
+})(SegmentedEditRefusal || (SegmentedEditRefusal = {}));
+/** Why adding an option to `root` is refused (four already), or null. */
+function segmentedAddRefusal(root) {
+    return root && segmentedOptions(root).length >= SEGMENTED_MAX_OPTIONS ? SegmentedEditRefusal.MaxOptions : null;
+}
+/** Why removing an option from `root` is refused (two left), or null. */
+function segmentedRemovalRefusal(root, node) {
+    if (!root || (node && node.role !== SegmentedRole.Option))
+        return null;
+    return segmentedOptions(root).length <= SEGMENTED_MIN_OPTIONS ? SegmentedEditRefusal.MinOptions : null;
+}
+/** A key no option of `root` holds yet (`k3`…). */
+function nextSegmentedKey(root) {
+    const taken = new Set(segmentedOptions(root).map(o => o.itemKey).filter(Boolean));
+    let n = segmentedOptions(root).length + 1;
+    while (taken.has(`k${n}`))
+        n++;
+    return `k${n}`;
+}
+/** Options ▸ Add option (and the toolbar's "Add option"): a fresh option after `after` (or at the end). Null when
+ *  refused (four already). */
+function addSegmentedOption(root, create, after, words = SEGMENTED_NEW_OPTION_WORDS) {
+    if (segmentedAddRefusal(root))
+        return null;
+    const option = buildSegmentedOption(create, { key: nextSegmentedKey(root), label: words });
+    const children = [...(root.children ?? [])];
+    const at = after ? children.indexOf(after) : -1;
+    children.splice(at < 0 ? children.length : at + 1, 0, option);
+    root.children = children;
+    return option;
+}
+/** Options ▸ ✕: remove an option. False when refused (two left) or `option` is not one of the root's. A removed
+ *  default hands "On by default" to the first option left. */
+function removeSegmentedOption(root, option) {
+    if (segmentedRemovalRefusal(root, option) || !segmentedOptions(root).includes(option))
+        return false;
+    const wasDefault = segmentedDefaultOn(root) === option.itemKey;
+    root.children = (root.children ?? []).filter(c => c !== option);
+    if (wasDefault)
+        writeProp(root, SegmentedTrait.DefaultOn, segmentedKeys(root)[0] ?? '');
+    return true;
+}
+/** Options ▸ drag to reorder: move an option to `toIndex` among the options. */
+function moveSegmentedOption(root, option, toIndex) {
+    const children = [...(root.children ?? [])];
+    const from = children.indexOf(option);
+    if (from < 0 || option.role !== SegmentedRole.Option)
+        return false;
+    children.splice(from, 1);
+    const options = children.filter(c => c.role === SegmentedRole.Option);
+    const anchor = options[Math.max(0, Math.min(toIndex, options.length))];
+    children.splice(anchor ? children.indexOf(anchor) : children.length, 0, option);
+    root.children = children;
+    return true;
+}
+/** The saving badge inside an option, or undefined. */
+function segmentedBadgeOf(option) {
+    return (option?.children ?? []).find(c => c.role === SegmentedRole.Badge);
+}
+/** Option ▸ Saving badge (Q33): stamp the badge (`badge-success` › Icon + Text, the placeholder words) inside the
+ *  option, after its words — or remove it. Returns the badge stamped, or null (removed / nothing changed). */
+function setSegmentedBadge(option, on, create) {
+    const existing = segmentedBadgeOf(option);
+    if (!on) {
+        if (existing)
+            option.children = (option.children ?? []).filter(c => c !== existing);
+        return null;
+    }
+    if (existing || !create)
+        return null;
+    const badge = buildBadge(create, { tone: SEGMENTED_BADGE_TONE, text: SEGMENTED_BADGE_WORDS, key: `${option.itemKey ?? 'option'}-badge` });
+    badge.role = SegmentedRole.Badge;
+    badge.label = 'Badge';
+    writeStyles(badge, BADGE_IN_OPTION);
+    option.children = [...(option.children ?? []), badge];
+    return badge;
+}
+/** Every "Option on" (`trigger-on`) state inside an option points at ITS option — the part that carries
+ *  `data-iox-on` while it is on. */
+function segmentedItemTriggerIds(root) {
+    for (const option of segmentedOptions(root)) {
+        if (!option.id)
+            continue;
+        walkComposite(option, n => {
+            if (n === option || !n.stateStyles?.[ITEM_OPEN_STATE])
+                return;
+            n.stateTriggers = { ...(n.stateTriggers ?? {}), [ITEM_OPEN_STATE]: option.id };
+        });
+    }
+}
+// ── state and attributes (both renderers, SSR included) ────────────────────────────────────────
+/** A Segmented control behaves like a horizontal Tabs activated by a click — only its keys and markup differ. */
+const SEGMENTED_BEHAVIOUR = { activateOn: TabsActivateOn.Click, orientation: TabsOrientation.Horizontal };
+/** The render scope of one Segmented control: its scope id, every option key in order, the one on at first paint (its
+ *  default) and its name — ONE decision for both engine paths. */
+function segmentedScopeFor(root, rootCssId, rowKeys = []) {
+    const keys = segmentedKeys(root);
+    return {
+        kind: CompositeKind.Segmented,
+        rootId: compositeScopeId(rootCssId, rowKeys),
+        behaviour: SEGMENTED_BEHAVIOUR,
+        keys,
+        active: segmentedDefaultOn(root),
+        label: segmentedLabel(root),
+    };
+}
+/** The root: the radio group, named; its default and (inside repeated rows) its scope id ride on it. */
+function segmentedRootAttributes(label, defaultOn, scopeId) {
+    return {
+        [COMPOSITE_ATTRIBUTE]: CompositeKind.Segmented,
+        role: 'radiogroup',
+        ...(label ? { 'aria-label': label } : {}),
+        ...(defaultOn ? { [DEFAULT_ON_ATTRIBUTE]: defaultOn } : {}),
+        ...(scopeId ? { [SCOPE_ATTRIBUTE]: scopeId } : {}),
+    };
+}
+/** The root's attributes read off the node itself (the engine writes a root's own attributes from its parent's scope). */
+function segmentedRootAttributesOf(root, scopeId) {
+    return segmentedRootAttributes(segmentedLabel(root), segmentedDefaultOn(root), scopeId);
+}
+/** An option: a real button announced as a radio — checked = the one option in the Tab order (roving tabindex). */
+function segmentedOptionAttributes(key, on) {
+    return {
+        type: 'button',
+        role: 'radio',
+        'aria-checked': on ? 'true' : 'false',
+        tabindex: on ? '0' : '-1',
+        [ITEM_KEY_ATTRIBUTE]: key,
+        ...(on ? { [ON_ATTRIBUTE]: '' } : {}),
+    };
+}
+/** The attributes a part of a Segmented control writes on its own element (both engine paths, SSR included). */
+function segmentedPartAttributes(node, scope, key, rowScoped = false) {
+    switch (node.role) {
+        case SegmentedRole.Segmented: return segmentedRootAttributes(scope.label, scope.active, rowScoped ? scope.rootId : undefined);
+        case SegmentedRole.Option: return key ? segmentedOptionAttributes(key, scope.active === key) : {};
+        default: return {};
+    }
+}
+/**
+ * The APG radio group's keys on an option: → / ↓ the next option, ← / ↑ the previous — ← and → follow the reading
+ * direction (mirrored under RTL: ← is the next option), ↑ ↓ always the DOM order. Every move wraps and turns the option
+ * on. Space / Enter are the button's own (a click: it turns on).
+ */
+function segmentedKeyAction(key, rtl = false) {
+    switch (key) {
+        case 'ArrowDown': return AccordionKeyAction.Next;
+        case 'ArrowUp': return AccordionKeyAction.Previous;
+        case 'ArrowRight': return rtl ? AccordionKeyAction.Previous : AccordionKeyAction.Next;
+        case 'ArrowLeft': return rtl ? AccordionKeyAction.Next : AccordionKeyAction.Previous;
+        default: return null;
+    }
+}
+
+const REPEATER = 'Repeater';
+/** The scope an exclusive root renders its parts with: a Segmented control's options and default, or a Tabs' keys —
+ *  From content, the rows its list's Repeater resolved (`rowsOf`). `rowKeys` = the repeated rows around the root. */
+function exclusiveScopeFor(root, rootCssId, rowsOf, rowKeys = []) {
+    if (isSegmentedRoot(root))
+        return segmentedScopeFor(root, rootCssId, rowKeys);
+    const list = tabsListOf(root);
+    return tabsScopeFor(root, rootCssId, list?.type === REPEATER ? rowsOf(list) : null, rowKeys);
+}
+/** The attributes an exclusive ROOT writes on its own element, read off the node (its scope id when it sits in
+ *  repeated rows). */
+function exclusiveRootAttributesOf(root, scopeId) {
+    return isSegmentedRoot(root) ? segmentedRootAttributesOf(root, scopeId) : tabsRootAttributes(tabsBehaviour(root), scopeId);
+}
+/** True when `node` is a part of the kind `scope` renders (a tab inside a Tabs' scope; an option inside a Segmented's). */
+function isPartOfExclusiveScope(node, scope) {
+    const kind = exclusiveKindOf(node);
+    return !!kind && kind === (scope.kind ?? CompositeKind.Tabs);
+}
+/** The attributes a part of an exclusive composite writes on its own element (both engine paths, SSR included). */
+function exclusivePartAttributes(node, scope, key, rowScoped = false) {
+    return scope.kind === CompositeKind.Segmented ? segmentedPartAttributes(node, scope, key, rowScoped) : tabsPartAttributes(node, scope, key, rowScoped);
+}
+/** The behaviour an exclusive root runs with (a Segmented control: a click, a row — it has no Behaviour traits). */
+function exclusiveBehaviourOf(root) {
+    return isSegmentedRoot(root) ? { ...SEGMENTED_BEHAVIOUR } : tabsBehaviour(root);
+}
+/** The accessible name an exclusive root gives its group (a Tabs' list, a Segmented control's radio group). */
+function exclusiveLabelOf(root) {
+    return isSegmentedRoot(root) ? segmentedLabel(root) : tabsLabel(root);
+}
+/** The item an exclusive root shows with no other say (a Segmented control's On by default), or null (a Tabs: its first). */
+function exclusiveDefaultOf(root) {
+    return isSegmentedRoot(root) ? segmentedDefaultOn(root) : null;
+}
+/** An exclusive item's words — a tab's, an option's (never its badge's) — for the pickers, the tree and the switchers. */
+function exclusiveItemLabel(part) {
+    return exclusiveKindOf(part) === CompositeKind.Segmented ? segmentedOptionLabel(part) : tabLabel(part);
+}
+
 const KIND_ROOT = (kind) => `[${COMPOSITE_ATTRIBUTE}="${kind}"]`;
 const EXCLUSIVE_KINDS = Object.keys(EXCLUSIVE_KIND_ROLES);
 const ROOT_SELECTOR = EXCLUSIVE_KINDS.map(KIND_ROOT).join(', ');
@@ -3226,7 +3608,7 @@ class ExclusiveRuntime {
             if (!trigger)
                 return;
             const rtl = isRtl(trigger);
-            const action = tabsKeyAction(e.key, this.behaviourValue.orientation, rtl);
+            const action = this.holdsTriggers ? segmentedKeyAction(e.key, rtl) : tabsKeyAction(e.key, this.behaviourValue.orientation, rtl);
             if (!action)
                 return;
             const triggers = this.triggers();
@@ -3237,14 +3619,14 @@ class ExclusiveRuntime {
             target.focus();
             this.activate(this.keyOf(target));
         };
-        this.kind = kindOf(root);
+        this.kind = options.kind ?? kindOf(root);
         this.behaviourValue = options.behaviour ?? behaviourOf(root);
         root.setAttribute(COMPOSITE_ATTRIBUTE, this.kind);
         EXCLUSIVE_RUNTIMES.set(root, this);
-        // The server rendered the first state (every trigger keyed, one on); with no server state the first is on.
+        // The server rendered the first state (every trigger keyed, one on); with no server state the default is on.
         const triggers = this.triggers();
         const serverOn = !options.behaviour ? triggers.find(t => t.hasAttribute(ON_ATTRIBUTE) && t.hasAttribute(ITEM_KEY_ATTRIBUTE)) : undefined;
-        this.live = serverOn ? this.keyOf(serverOn) : (triggers[0] ? this.keyOf(triggers[0]) : null);
+        this.live = serverOn ? this.keyOf(serverOn) : this.defaultKey();
         this.awaitingItems = !triggers.length;
         // Capture: on the builder canvas every part's own listener stops the click (it selects that part), and the tab
         // must still turn on — the canvas is a live runtime.
@@ -3329,6 +3711,16 @@ class ExclusiveRuntime {
     keys() {
         return this.triggers().map(t => this.keyOf(t));
     }
+    /** The key on with no server state: the asked default when it names an item, else the first item. */
+    defaultKey() {
+        const keys = this.keys();
+        const asked = this.options.defaultKey?.() ?? this.root.getAttribute(DEFAULT_ON_ATTRIBUTE);
+        return asked && keys.includes(asked) ? asked : keys[0] ?? null;
+    }
+    /** True for a Segmented control: the root IS its radio group and holds its options. */
+    get holdsTriggers() {
+        return exclusiveRootHoldsTriggers(this.kind);
+    }
     /** The element(s) that ARE the tablist: the ones a renderer already gave the role (the engine's component-path
      *  Repeater puts it on its inner root, which holds the tabs), else the elements carrying the list's role class. */
     lists() {
@@ -3358,13 +3750,15 @@ class ExclusiveRuntime {
         const keys = triggers.map(t => this.keyOf(t));
         if (this.awaitingItems && keys.length) {
             this.awaitingItems = false;
-            this.live = keys[0];
+            this.live = this.defaultKey();
             first = true;
         }
         if (this.live === null || !keys.includes(this.live))
-            this.live = keys[0] ?? null;
+            this.live = this.defaultKey();
         const forced = this.options.forced?.() ?? null;
         const next = forced !== null && keys.includes(forced) ? forced : this.live;
+        if (this.holdsTriggers)
+            return this.stampRadioGroup(triggers, next, first);
         const rootId = this.rootId();
         const vertical = this.behaviourValue.orientation === TabsOrientation.Vertical;
         for (const list of this.lists()) {
@@ -3400,6 +3794,27 @@ class ExclusiveRuntime {
             setAttr(panel, ON_ATTRIBUTE, on ? '' : null);
             setAttr(panel, 'hidden', on ? null : '');
         }
+        this.announce(triggers, next, first, panelOf);
+    }
+    /** A Segmented control's markup (CC4b): the root a named radio group, each option a radio, one checked. */
+    stampRadioGroup(options, next, first) {
+        setAttr(this.root, 'role', 'radiogroup');
+        if (this.options.label)
+            setAttr(this.root, 'aria-label', this.options.label() || null);
+        for (const option of options) {
+            const key = this.keyOf(option);
+            const on = key === next;
+            setAttr(option, ITEM_KEY_ATTRIBUTE, key);
+            setAttr(option, 'type', option.tagName === 'BUTTON' ? 'button' : null);
+            setAttr(option, 'role', 'radio');
+            setAttr(option, 'aria-checked', on ? 'true' : 'false');
+            setAttr(option, 'tabindex', on ? '0' : '-1');
+            setAttr(option, ON_ATTRIBUTE, on ? '' : null);
+        }
+        this.announce(options, next, first);
+    }
+    /** Move the shown key; dispatch iox-item-off on what was on and iox-item-on on what is on now. */
+    announce(triggers, next, first, panelOf = () => null) {
         const was = first ? null : this.shown;
         this.shown = next;
         if (was === next && !first)
@@ -3513,8 +3928,9 @@ function runCompositeItemAction(el, action) {
  * plan §3a). FRAMEWORK-FREE: the builder, the SSR engine and iox-cms (generation-core's composer, the site
  * build) read the same recipes, roles and structure rules. Card v2 + Badge / Chip (T23 / T25) are the
  * first; the Accordion (CC2) adds the first composite RUNTIME (accordion-runtime.ts — DOM only, no
- * framework), which the Disclosure (CC2.1) runs too — a one-item accordion whose root is its item; Tabs (CC4a) run the
- * EXCLUSIVE runtime (exclusive-runtime.ts — one item always on); composite-runtime.ts is the one door to both.
+ * framework), which the Disclosure (CC2.1) runs too — a one-item accordion whose root is its item; Tabs (CC4a) and the
+ * Segmented control (CC4b) run the EXCLUSIVE runtime (exclusive-runtime.ts — one item always on; exclusive.ts the one
+ * render decision by kind); composite-runtime.ts is the one door to both families.
  * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
  */
 
@@ -3522,5 +3938,5 @@ function runCompositeItemAction(el, action) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_DEFAULT_ONS, ACCORDION_ICONS, ACCORDION_ICON_GLYPH, ACCORDION_NEW_ITEM_WORDS, ACCORDION_WORDS, ACTIVATE_ON_ATTRIBUTE, AccordionClass, AccordionDefaultOn, AccordionEditRefusal, AccordionIcon, AccordionKeyAction, AccordionRole, AccordionRuntime, BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CAROUSEL_QUOTES, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_KIND_ROLES, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CarouselA11y, CompositeBehaviourTrait, CompositeItemAction, CompositeKind, DEFAULT_ON_ATTRIBUTE, DISCLOSURE_ITEM_KEY, DISCLOSURE_WORDS, DisclosureRole, EXCLUSIVE_KIND_ROLES, ExclusiveRuntime, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, LIGHTBOX_ARROWS_HIDE_AT, LIGHTBOX_LABEL, MULTIPLE_ATTRIBUTE, NO_ELEMENT_STYLE, ON_ATTRIBUTE, ON_STATE, ORIENTATION_ATTRIBUTE, PILL_LABEL_STYLE, ROW_INDEX_ATTRIBUTE, SCOPE_ATTRIBUTE, SLIDER_NAME_TRAIT, SLIDER_PART_GLYPH, SLIDER_PART_ROLES, SLIDER_PLAY_GLYPH, SLIDER_TYPE, SLIDER_WORDS, SLIDE_TO_ROW, SLIDE_TYPE, SWIPER_THEME_COLOR, SliderFlag, SliderRole, StructureEdit, StructureRefusal, TABS_ACTIVATE_ONS, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP, TABS_NEW_TAB_WORDS, TABS_ORIENTATIONS, TABS_STACK_BREAKPOINT, TABS_TEXT_BIND_PROP, TABS_WORDS, TabsActivateOn, TabsBehaviourTrait, TabsEditRefusal, TabsOrientation, TabsRole, UNTIL_FOUND, acceptsRefusal, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRootOfItem, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, addTabPair, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, attachCompositeAt, attachExclusiveAt, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSliderPart, buildTabPair, buildTabsRecipe, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, closestExclusive, closestExclusiveItemPart, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, exclusiveItemPartOf, exclusiveRootOf, exclusiveRuntimeOf, findByRole, hasLabelledRegion, hasSliderParts, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isAnyCompositeRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositeItemOn, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isExclusiveItemOn, isExclusiveItemPart, isExclusiveKind, isExclusiveList, isExclusivePanel, isExclusivePanels, isExclusiveRoot, isExclusiveTrigger, isLockedPart, isPillNode, isSlider, isSliderPart, isTabsFromContent, isTabsPart, isTabsRoot, isToggleKind, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, manualTabKeys, migrateSliderControls, moveAccordionItem, moveTabPair, needsSliderMigration, nextAccordionState, nextItemKey, nextTabKey, onAccordionItemState, onCompositeItemState, onExclusiveItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, pickTabsAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, removeTabPair, renameAccordionItem, renameTab, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setSliderFlag, setTabsBehaviour, shouldScrollToItem, slideIndexForRow, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, tabLabel, tabLabelNodeOf, tabListAttributes, tabPanelAttributes, tabPanelImageOf, tabPanelOf, tabPanelTextOf, tabPartKey, tabTriggerAttributes, tabTriggerOf, tabsBehaviour, tabsItemState, tabsItemTriggerIds, tabsKeyAction, tabsLabel, tabsListOf, tabsPanels, tabsPanelsOf, tabsPartAttributes, tabsPartnerOf, tabsRemovalRefusal, tabsRootAttributes, tabsScope, tabsScopeFor, tabsToContent, tabsToManual, tabsTriggers, walkComposite, wantedSliderParts, writeLayerStyles, writeProp, writeStyles };
+export { ACCORDION_BIND_PROP, ACCORDION_CONTENT_LIMIT, ACCORDION_DEFAULT_ONS, ACCORDION_ICONS, ACCORDION_ICON_GLYPH, ACCORDION_NEW_ITEM_WORDS, ACCORDION_WORDS, ACTIVATE_ON_ATTRIBUTE, AccordionClass, AccordionDefaultOn, AccordionEditRefusal, AccordionIcon, AccordionKeyAction, AccordionRole, AccordionRuntime, BADGE_TONES, BADGE_TONE_ICONS, BadgeTone, CARD_LAYOUTS, CARD_LAYOUT_CUSTOM, CARD_PARTS, CARD_PART_ROLE, CARD_STACK_BREAKPOINT, CARD_WORDS, CAROUSEL_QUOTES, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_KIND_ROLES, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CarouselA11y, CompositeBehaviourTrait, CompositeItemAction, CompositeKind, DEFAULT_ON_ATTRIBUTE, DISCLOSURE_ITEM_KEY, DISCLOSURE_WORDS, DisclosureRole, EXCLUSIVE_KIND_ROLES, ExclusiveRuntime, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, LIGHTBOX_ARROWS_HIDE_AT, LIGHTBOX_LABEL, MULTIPLE_ATTRIBUTE, NO_ELEMENT_STYLE, ON_ATTRIBUTE, ON_STATE, ORIENTATION_ATTRIBUTE, PILL_LABEL_STYLE, ROW_INDEX_ATTRIBUTE, SCOPE_ATTRIBUTE, SEGMENTED_BADGE_TONE, SEGMENTED_BADGE_WORDS, SEGMENTED_BEHAVIOUR, SEGMENTED_MAX_OPTIONS, SEGMENTED_MIN_OPTIONS, SEGMENTED_NAME, SEGMENTED_NEW_OPTION_WORDS, SEGMENTED_WORDS, SLIDER_NAME_TRAIT, SLIDER_PART_GLYPH, SLIDER_PART_ROLES, SLIDER_PLAY_GLYPH, SLIDER_TYPE, SLIDER_WORDS, SLIDE_TO_ROW, SLIDE_TYPE, SWIPER_THEME_COLOR, SegmentedEditRefusal, SegmentedRole, SegmentedTrait, SliderFlag, SliderRole, StructureEdit, StructureRefusal, TABS_ACTIVATE_ONS, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP, TABS_NEW_TAB_WORDS, TABS_ORIENTATIONS, TABS_STACK_BREAKPOINT, TABS_TEXT_BIND_PROP, TABS_WORDS, TabsActivateOn, TabsBehaviourTrait, TabsEditRefusal, TabsOrientation, TabsRole, UNTIL_FOUND, acceptsRefusal, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRootOfItem, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, addSegmentedOption, addTabPair, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, attachCompositeAt, attachExclusiveAt, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSegmentedOption, buildSegmentedRecipe, buildSliderPart, buildTabPair, buildTabsRecipe, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, closestExclusive, closestExclusiveItemPart, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, exclusiveBehaviourOf, exclusiveDefaultOf, exclusiveItemLabel, exclusiveItemPartOf, exclusiveKindHasPanels, exclusiveKindOf, exclusiveLabelOf, exclusivePartAttributes, exclusiveRootAttributesOf, exclusiveRootHoldsTriggers, exclusiveRootOf, exclusiveRuntimeOf, exclusiveScopeFor, findByRole, hasLabelledRegion, hasSliderParts, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isAnyCompositeRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositeItemOn, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isExclusiveItemOn, isExclusiveItemPart, isExclusiveKind, isExclusiveList, isExclusivePanel, isExclusivePanels, isExclusiveRoot, isExclusiveTrigger, isLockedPart, isPartOfExclusiveScope, isPillNode, isSegmentedPart, isSegmentedRoot, isSlider, isSliderPart, isTabsFromContent, isTabsPart, isTabsRoot, isToggleKind, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, manualTabKeys, migrateSliderControls, moveAccordionItem, moveSegmentedOption, moveTabPair, needsSliderMigration, nextAccordionState, nextItemKey, nextSegmentedKey, nextTabKey, onAccordionItemState, onCompositeItemState, onExclusiveItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, pickTabsAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, removeSegmentedOption, removeTabPair, renameAccordionItem, renameSegmentedOption, renameTab, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, segmentedAddRefusal, segmentedBadgeOf, segmentedDefaultOn, segmentedItemTriggerIds, segmentedKeyAction, segmentedKeys, segmentedLabel, segmentedOptionAttributes, segmentedOptionKey, segmentedOptionLabel, segmentedOptionLabelNodeOf, segmentedOptions, segmentedPartAttributes, segmentedRemovalRefusal, segmentedRootAttributes, segmentedRootAttributesOf, segmentedScopeFor, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setSegmentedBadge, setSegmentedBehaviour, setSliderFlag, setTabsBehaviour, shouldScrollToItem, slideIndexForRow, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, tabLabel, tabLabelNodeOf, tabListAttributes, tabPanelAttributes, tabPanelImageOf, tabPanelOf, tabPanelTextOf, tabPartKey, tabTriggerAttributes, tabTriggerOf, tabsBehaviour, tabsItemState, tabsItemTriggerIds, tabsKeyAction, tabsLabel, tabsListOf, tabsPanels, tabsPanelsOf, tabsPartAttributes, tabsPartnerOf, tabsRemovalRefusal, tabsRootAttributes, tabsScope, tabsScopeFor, tabsToContent, tabsToManual, tabsTriggers, walkComposite, wantedSliderParts, writeLayerStyles, writeProp, writeStyles };
 //# sourceMappingURL=vectoriox-iox-ui-composite-core.mjs.map