@vectoriox/iox-ui 5.38.0 → 5.39.0

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

@@ -1,4 +1,4 @@
-import { readOwnedTrait, writeOwnedTrait, elementStyleById, switchElementStyle, LinkType, setColorScheme, COLOR_SCHEME_TRAIT } from '@vectoriox/iox-ui/design-core';
+import { readOwnedTrait, writeOwnedTrait, elementStyleById, switchElementStyle, LinkType, setColorScheme, COLOR_SCHEME_TRAIT, roleClass } from '@vectoriox/iox-ui/design-core';
 
 /** What a recipe asks its consumer to create: a NEW node of `type`, the way that consumer creates one
  *  (the builder's `createConfig`, generation-core's `createSerializedNode`), with these props and this
@@ -125,15 +125,18 @@ function removeFromComposite(root, node) {
 }
 
 /**
- * The open/close composites' kinds and roles (CC2 Accordion, CC2.1 Disclosure — composite plan T9 / T21). ONE
- * family: a Disclosure is a one-item accordion whose ROOT is its item, so both run the same state machine, the
- * same attribute planners and the same runtime (`accordion-runtime.ts`). Every consumer that treats "an item",
- * "a header" or "a panel" alike asks these predicates, never a role literal.
+ * 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`).
+ * Every consumer that treats "an item", "a trigger" or "a panel" alike asks these predicates, never a role literal.
  */
 var CompositeKind;
 (function (CompositeKind) {
     CompositeKind["Accordion"] = "accordion";
     CompositeKind["Disclosure"] = "disclosure";
+    CompositeKind["Tabs"] = "tabs";
 })(CompositeKind || (CompositeKind = {}));
 var AccordionRole;
 (function (AccordionRole) {
@@ -157,21 +160,53 @@ var DisclosureRole;
     DisclosureRole["Icon"] = "disclosure.icon";
     DisclosureRole["Panel"] = "disclosure.panel";
 })(DisclosureRole || (DisclosureRole = {}));
+/**
+ * TABS (CC4a — composite T17). The tab LIST holds the triggers, the PANELS holder holds the panels; a tab and its panel
+ * share an `itemKey` (never their index — moving a tab keeps its own panel). From content (R3) the list and the panels
+ * holder are both Repeaters over the SAME source, one row giving its tab AND its panel (paired by the row's id).
+ */
+var TabsRole;
+(function (TabsRole) {
+    TabsRole["Tabs"] = "tabs";
+    TabsRole["List"] = "tabs.list";
+    TabsRole["Trigger"] = "tabs.trigger";
+    TabsRole["Panels"] = "tabs.panels";
+    TabsRole["Panel"] = "tabs.panel";
+})(TabsRole || (TabsRole = {}));
 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 },
+};
 const KINDS = Object.values(CompositeKind);
-const rolesOf = (pick) => new Set(KINDS.map(k => COMPOSITE_KIND_ROLES[k][pick]));
+const TOGGLE_KINDS = Object.keys(COMPOSITE_KIND_ROLES);
+const EXCLUSIVE_KINDS$1 = Object.keys(EXCLUSIVE_KIND_ROLES);
+const rolesOf = (pick) => new Set(TOGGLE_KINDS.map(k => COMPOSITE_KIND_ROLES[k][pick]));
+const exclusiveRolesOf = (pick) => new Set(EXCLUSIVE_KINDS$1.map(k => EXCLUSIVE_KIND_ROLES[k][pick]).filter((r) => !!r));
 const ROOT_ROLES = rolesOf('root');
 const ITEM_ROLES = rolesOf('item');
 const TRIGGER_ROLES = rolesOf('trigger');
 const PANEL_ROLES = rolesOf('panel');
+const EXCLUSIVE_ROOT_ROLES = exclusiveRolesOf('root');
+const EXCLUSIVE_LIST_ROLES = exclusiveRolesOf('list');
+const EXCLUSIVE_TRIGGER_ROLES = exclusiveRolesOf('trigger');
+const EXCLUSIVE_PANELS_ROLES = exclusiveRolesOf('panels');
+const EXCLUSIVE_PANEL_ROLES = exclusiveRolesOf('panel');
 /** The kind a role belongs to (`disclosure.panel` → Disclosure), or null for any other role. */
 function compositeKindOfRole(role) {
     const head = role?.split('.')[0];
     return KINDS.includes(head ?? '') ? head : null;
 }
+/** True for a kind the open/close runtime runs. */
+function isToggleKind(kind) {
+    return !!kind && TOGGLE_KINDS.includes(kind);
+}
+/** True for a kind the exclusive runtime runs. */
+function isExclusiveKind(kind) {
+    return !!kind && EXCLUSIVE_KINDS$1.includes(kind);
+}
 /** A root that runs the open/close runtime (an Accordion or a Disclosure). */
 function isCompositeRoot(node) {
     return !!node?.role && ROOT_ROLES.has(node.role);
@@ -218,6 +253,61 @@ function compositeItemOf(node, path) {
     }
     return null;
 }
+// ── the exclusive family (CC4a Tabs) ───────────────────────────────────────────────────────────
+/** A root that runs the exclusive runtime (Tabs). */
+function isExclusiveRoot(node) {
+    return !!node?.role && EXCLUSIVE_ROOT_ROLES.has(node.role);
+}
+/** The holder of an exclusive composite's triggers (a tab list): it takes only triggers. */
+function isExclusiveList(node) {
+    return !!node?.role && EXCLUSIVE_LIST_ROLES.has(node.role);
+}
+/** One of an exclusive composite's triggers (a tab): pressing it turns its item on. */
+function isExclusiveTrigger(node) {
+    return !!node?.role && EXCLUSIVE_TRIGGER_ROLES.has(node.role);
+}
+/** The holder of an exclusive composite's panels: it takes only panels. */
+function isExclusivePanels(node) {
+    return !!node?.role && EXCLUSIVE_PANELS_ROLES.has(node.role);
+}
+/** One of an exclusive composite's panels (a tab panel): shown only while its item is on. */
+function isExclusivePanel(node) {
+    return !!node?.role && EXCLUSIVE_PANEL_ROLES.has(node.role);
+}
+/** True for a trigger or a panel — a part that IS one item of an exclusive composite (it carries the `itemKey`). */
+function isExclusiveItemPart(node) {
+    return isExclusiveTrigger(node) || isExclusivePanel(node);
+}
+/** True for any part of a Tabs (its root included). */
+function isTabsPart(node) {
+    return compositeKindOfRole(node?.role) === CompositeKind.Tabs;
+}
+/** A root of either family — anything that runs a composite runtime. */
+function isAnyCompositeRoot(node) {
+    return isCompositeRoot(node) || isExclusiveRoot(node);
+}
+/** The exclusive root a node belongs to (the node itself when it is one), or null. `path` = its ancestors, root first. */
+function exclusiveRootOf(node, path) {
+    if (isExclusiveRoot(node))
+        return node;
+    for (let i = path.length - 1; i >= 0; i--)
+        if (isExclusiveRoot(path[i]))
+            return path[i];
+    return null;
+}
+/** The trigger or panel a node sits in (itself when it is one) inside an exclusive composite, or null. A nested
+ *  exclusive root ends the walk. */
+function exclusiveItemPartOf(node, path) {
+    if (isExclusiveItemPart(node))
+        return node;
+    for (let i = path.length - 1; i >= 0; i--) {
+        if (isExclusiveItemPart(path[i]))
+            return path[i];
+        if (isExclusiveRoot(path[i]))
+            return null;
+    }
+    return null;
+}
 
 /**
  * ACCORDION (CC2 — composite K1; complex-components boards 3, 4 and 9, APPROVED 2026-10-20). Not a
@@ -278,7 +368,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$3;
+var Type$4;
 (function (Type) {
     Type["Container"] = "Container";
     Type["LinkedContainer"] = "LinkedContainer";
@@ -286,8 +376,8 @@ var Type$3;
     Type["Text"] = "Text";
     Type["Icon"] = "Icon";
     Type["Repeater"] = "Repeater";
-})(Type$3 || (Type$3 = {}));
-var Style$3;
+})(Type$4 || (Type$4 = {}));
+var Style$4;
 (function (Style) {
     Style["Root"] = "box";
     Style["Item"] = "accordion-item";
@@ -296,14 +386,14 @@ var Style$3;
     Style["Icon"] = "icon";
     Style["Panel"] = "accordion-panel";
     Style["Answer"] = "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 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$1 = {
+const PART_BASE$2 = {
     // 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' },
@@ -314,16 +404,16 @@ const PART_BASE$1 = {
 };
 /** 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$2, flexGrow: '1', minWidth: '0px' };
-const ANSWER_BASE = { 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 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);
 }
 /** 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$3.Icon, props: { iconClass: glyph.iconClass }, elementStyle: Style$3.Icon }, role, 'Icon', PART_BASE$1[AccordionRole.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]);
     node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { rotate: glyph.turn } };
     if (itemId)
         node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: itemId };
@@ -331,14 +421,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$2(create, `${itemKey}`, Type$3.Container, AccordionRole.Item, Style$3.Item, {}, 'Item');
+    const item = make$3(create, `${itemKey}`, Type$4.Container, AccordionRole.Item, Style$4.Item, {}, 'Item');
     item.itemKey = itemKey;
-    const trigger = make$2(create, `${itemKey}-trigger`, Type$3.LinkedContainer, AccordionRole.Trigger, Style$3.Trigger, {}, 'Header');
-    const question = make$2(create, `${itemKey}-question`, Type$3.Heading, null, Style$3.Question, { content: words.question, level: DEFAULT_LEVEL }, 'Heading');
+    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');
     writeStyles(question, QUESTION_BASE);
     trigger.children = [question, ...(icon === AccordionIcon.None ? [] : [buildCompositeIcon(create, `${itemKey}-icon`, icon, item.id)])];
-    const panel = make$2(create, `${itemKey}-panel`, Type$3.Container, AccordionRole.Panel, Style$3.Panel, {}, 'Panel');
-    const answer = make$2(create, `${itemKey}-answer`, Type$3.Text, null, Style$3.Answer, { content: words.answer, tag: 'p' }, 'Text');
+    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');
     writeStyles(answer, ANSWER_BASE);
     panel.children = [answer];
     item.children = [trigger, panel];
@@ -346,7 +436,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$2(create, 'accordion', Type$3.Container, AccordionRole.Accordion, Style$3.Root, {}, 'Accordion');
+    const root = make$3(create, 'accordion', Type$4.Container, AccordionRole.Accordion, Style$4.Root, {}, 'Accordion');
     writeProp(root, CompositeBehaviourTrait.Multiple, options.multiple ?? false);
     writeProp(root, CompositeBehaviourTrait.DefaultOn, options.defaultOn ?? AccordionDefaultOn.First);
     const words = options.items ?? ACCORDION_WORDS;
@@ -385,7 +475,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$3.Repeater;
+    return !!root && root.type === Type$4.Repeater;
 }
 /** The root's items in order — every item (Manual), or the one template item (From content). */
 function accordionItems(root) {
@@ -409,7 +499,8 @@ function setAccordionBehaviour(root, patch) {
 }
 /** The roles of the kind an item belongs to (an accordion item, or a disclosure — its own item). */
 function kindRolesOf(node) {
-    return COMPOSITE_KIND_ROLES[compositeKindOfRole(node.role) ?? CompositeKind.Accordion];
+    const kind = compositeKindOfRole(node.role);
+    return COMPOSITE_KIND_ROLES[isToggleKind(kind) ? kind : CompositeKind.Accordion];
 }
 /** The header of an item (either kind). */
 function accordionTriggerOf(item) {
@@ -431,9 +522,9 @@ function accordionQuestionOf(item) {
     let text;
     if (trigger)
         walkComposite(trigger, n => {
-            if (!hit && n.type === Type$3.Heading)
+            if (!hit && n.type === Type$4.Heading)
                 hit = n;
-            if (!text && n.type === Type$3.Text)
+            if (!text && n.type === Type$4.Text)
                 text = n;
         });
     return hit ?? text;
@@ -443,15 +534,15 @@ function accordionAnswerOf(item) {
     const panel = accordionPanelOf(item);
     let hit;
     if (panel)
-        walkComposite(panel, n => { if (!hit && n.type === Type$3.Text)
+        walkComposite(panel, n => { if (!hit && n.type === Type$4.Text)
             hit = n; });
     return hit;
 }
-const stripTags = (v) => String(v ?? '').replace(/<[^>]*>/g, '').trim();
+const stripTags$1 = (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(readProp(q, 'content')) : '';
+    return q ? stripTags$1(readProp(q, 'content')) : '';
 }
 /** Items ▸ rename: the question's words. */
 function renameAccordionItem(item, question) {
@@ -464,7 +555,7 @@ function accordionHeadingLevel(trigger) {
     const visit = (n) => {
         if (level !== undefined)
             return;
-        if (n.type === Type$3.Heading) {
+        if (n.type === Type$4.Heading) {
             level = readProp(n, 'level');
             return;
         }
@@ -644,6 +735,7 @@ function rowItemKey(row, index) {
 const DOM_ID_PREFIX = {
     [CompositeKind.Accordion]: 'iox-acc',
     [CompositeKind.Disclosure]: 'iox-dis',
+    [CompositeKind.Tabs]: 'iox-tab',
 };
 /** 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) {
@@ -731,14 +823,14 @@ function accordionPanelAttributes(state) {
 function serializeDomAttributes(attrs, esc) {
     return Object.entries(attrs).map(([k, v]) => (v === '' ? ` ${k}` : ` ${k}="${esc(v)}"`)).join('');
 }
-const SHORT_TEXT = new Set(['text']);
-const LONG_TEXT = new Set(['textarea', 'richText', 'editor']);
+const SHORT_TEXT$1 = new Set(['text']);
+const LONG_TEXT$1 = new Set(['textarea', 'richText', 'editor']);
 /** R3 (board 9 Q19): switching to From content binds the question to the first short-text field and the
  *  answer to the first long-text field. ONE rule for the builder's switch and the composer. */
 function pickAccordionAutoBinds(fields) {
     const isString = (f) => !f.type || f.type === 'string';
-    const question = fields.find(f => isString(f) && SHORT_TEXT.has(String(f.controller ?? 'text')))?.name ?? null;
-    const answer = fields.find(f => isString(f) && LONG_TEXT.has(String(f.controller ?? '')) && f.name !== question)?.name ?? null;
+    const question = fields.find(f => isString(f) && SHORT_TEXT$1.has(String(f.controller ?? 'text')))?.name ?? null;
+    const answer = fields.find(f => isString(f) && LONG_TEXT$1.has(String(f.controller ?? '')) && f.name !== question)?.name ?? null;
     return { question, answer };
 }
 /** The bound props of the question and the answer (each a content trait). */
@@ -818,12 +910,12 @@ function accordionPartStyle(node, name) {
  */
 const ITEM_ON_EVENT = 'iox-item-on';
 const ITEM_OFF_EVENT = 'iox-item-off';
-const KIND_ROOT = (kind) => `[${COMPOSITE_ATTRIBUTE}="${kind}"]`;
-const ROOT_SELECTOR = Object.values(CompositeKind).map(KIND_ROOT).join(', ');
+const KIND_ROOT$1 = (kind) => `[${COMPOSITE_ATTRIBUTE}="${kind}"]`;
+const ROOT_SELECTOR$1 = Object.keys(COMPOSITE_KIND_ROLES).map(KIND_ROOT$1).join(', ');
 /** An accordion's items are its `.iox-role-accordion-item` children; a disclosure is its own item. */
 const ACCORDION_ITEM_SELECTOR = '.iox-role-accordion-item';
-const ITEM_SELECTOR = `${ACCORDION_ITEM_SELECTOR}, ${KIND_ROOT(CompositeKind.Disclosure)}`;
-const PANEL_SELECTOR = '.iox-role-accordion-panel, .iox-role-disclosure-panel';
+const ITEM_SELECTOR = `${ACCORDION_ITEM_SELECTOR}, ${KIND_ROOT$1(CompositeKind.Disclosure)}`;
+const PANEL_SELECTOR$1 = '.iox-role-accordion-panel, .iox-role-disclosure-panel';
 const BUTTON_SELECTOR = `.${AccordionClass.Button}`;
 const TRACK_SELECTOR = `.${AccordionClass.Track}`;
 const REGION_SELECTOR = `.${AccordionClass.Region}`;
@@ -832,16 +924,16 @@ const MAX_CLOSE_MS = 600;
 const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
 /** The composite (accordion or disclosure) an element belongs to (the element itself when it is a root). */
 function closestAccordion(el) {
-    return el?.closest?.(ROOT_SELECTOR) ?? null;
+    return el?.closest?.(ROOT_SELECTOR$1) ?? null;
 }
 /** The item an element sits in (itself when it is one) — an accordion item, or a disclosure. */
 function closestAccordionItem(el) {
     return el?.closest?.(ITEM_SELECTOR) ?? null;
 }
-const kindOf = (root) => root.getAttribute(COMPOSITE_ATTRIBUTE) === CompositeKind.Disclosure ? CompositeKind.Disclosure : CompositeKind.Accordion;
+const kindOf$1 = (root) => root.getAttribute(COMPOSITE_ATTRIBUTE) === CompositeKind.Disclosure ? CompositeKind.Disclosure : CompositeKind.Accordion;
 /** The composite root whose items an item belongs to: a disclosure is its own root. */
-function rootOfItem(item) {
-    return kindOf(item) === CompositeKind.Disclosure && item.matches(KIND_ROOT(CompositeKind.Disclosure)) ? item : closestAccordion(item.parentElement);
+function accordionRootOfItem(item) {
+    return kindOf$1(item) === CompositeKind.Disclosure && item.matches(KIND_ROOT$1(CompositeKind.Disclosure)) ? item : closestAccordion(item.parentElement);
 }
 /** Subscribe to an item turning on / off — what the `itemOn` / `itemOff` interaction triggers listen to. The
  *  item is the element's own item (the element itself when it is one). Returns the unsubscribe. */
@@ -857,20 +949,20 @@ function onAccordionItemState(el, on, handler) {
 function isAccordionItemOn(el) {
     return !!closestAccordionItem(el)?.hasAttribute(ON_ATTRIBUTE);
 }
-const nodeIdOf = (el) => {
+const nodeIdOf$1 = (el) => {
     for (const c of Array.from(el.classList))
         if (c.startsWith('iox-node-'))
             return c.slice('iox-node-'.length);
     return '';
 };
-function behaviourOf(root) {
+function behaviourOf$1(root) {
     const raw = root.getAttribute(DEFAULT_ON_ATTRIBUTE);
     return {
         multiple: root.hasAttribute(MULTIPLE_ATTRIBUTE),
         defaultOn: ACCORDION_DEFAULT_ONS.includes(raw) ? raw : AccordionDefaultOn.First,
     };
 }
-function setAttr(el, name, value) {
+function setAttr$1(el, name, value) {
     if (!el)
         return;
     if (value === null) {
@@ -925,8 +1017,8 @@ class AccordionRuntime {
                 return;
             this.open(this.keyOf(item, items));
         };
-        this.kind = options.kind ?? kindOf(root);
-        this.behaviourValue = options.behaviour ?? behaviourOf(root);
+        this.kind = options.kind ?? kindOf$1(root);
+        this.behaviourValue = options.behaviour ?? behaviourOf$1(root);
         root.setAttribute(COMPOSITE_ATTRIBUTE, this.kind);
         RUNTIMES.set(root, this);
         // The server rendered the first state; with no server state the root's default decides.
@@ -1059,7 +1151,7 @@ class AccordionRuntime {
         }
         const forced = this.options.forced?.() ?? new Set();
         const own = this.options.rootId;
-        const rootId = (typeof own === 'function' ? own() : own) ?? this.root.getAttribute(SCOPE_ATTRIBUTE) ?? nodeIdOf(this.root);
+        const rootId = (typeof own === 'function' ? own() : own) ?? this.root.getAttribute(SCOPE_ATTRIBUTE) ?? nodeIdOf$1(this.root);
         const next = new Set();
         items.forEach((item, index) => {
             const key = this.keyOf(item, items);
@@ -1076,31 +1168,31 @@ class AccordionRuntime {
         for (const item of items) {
             const key = this.keyOf(item, items);
             if (next.has(key) && !was.has(key))
-                dispatch(item, ITEM_ON_EVENT);
+                dispatch$1(item, ITEM_ON_EVENT);
             else if (!next.has(key) && was.has(key))
-                dispatch(item, ITEM_OFF_EVENT);
+                dispatch$1(item, ITEM_OFF_EVENT);
         }
     }
     stampItem(item, key, index, on, rootId, first) {
         const ids = accordionDomIds(rootId, key, this.kind);
         if (!item.hasAttribute(ITEM_KEY_ATTRIBUTE))
             item.setAttribute(ITEM_KEY_ATTRIBUTE, key);
-        setAttr(item, ON_ATTRIBUTE, on ? '' : null);
+        setAttr$1(item, ON_ATTRIBUTE, on ? '' : null);
         const button = this.own(item, BUTTON_SELECTOR);
         const track = this.own(item, TRACK_SELECTOR);
         const region = this.own(item, REGION_SELECTOR);
-        const panel = this.own(item, PANEL_SELECTOR);
-        setAttr(button, 'type', 'button');
-        setAttr(button, 'id', ids.trigger);
-        setAttr(button, 'aria-expanded', on ? 'true' : 'false');
-        setAttr(button, 'aria-controls', ids.panel);
-        setAttr(button, ON_ATTRIBUTE, on ? '' : null);
-        setAttr(track, ON_ATTRIBUTE, on ? '' : null);
-        setAttr(panel, ON_ATTRIBUTE, on ? '' : null);
+        const panel = this.own(item, PANEL_SELECTOR$1);
+        setAttr$1(button, 'type', 'button');
+        setAttr$1(button, 'id', ids.trigger);
+        setAttr$1(button, 'aria-expanded', on ? 'true' : 'false');
+        setAttr$1(button, 'aria-controls', ids.panel);
+        setAttr$1(button, ON_ATTRIBUTE, on ? '' : null);
+        setAttr$1(track, ON_ATTRIBUTE, on ? '' : null);
+        setAttr$1(panel, ON_ATTRIBUTE, on ? '' : null);
         const labelled = hasLabelledRegion(this.kind);
-        setAttr(region, 'role', labelled ? 'region' : null);
-        setAttr(region, 'id', ids.panel);
-        setAttr(region, 'aria-labelledby', labelled ? ids.trigger : null);
+        setAttr$1(region, 'role', labelled ? 'region' : null);
+        setAttr$1(region, 'id', ids.panel);
+        setAttr$1(region, 'aria-labelledby', labelled ? ids.trigger : null);
         if (!region)
             return;
         const pending = this.closing.get(key);
@@ -1109,7 +1201,7 @@ class AccordionRuntime {
                 clearTimeout(pending);
                 this.closing.delete(key);
             }
-            setAttr(region, 'hidden', null);
+            setAttr$1(region, 'hidden', null);
             return;
         }
         if (region.hasAttribute('hidden') || pending)
@@ -1117,13 +1209,13 @@ class AccordionRuntime {
         // Closing: the track collapses first (its transition), THEN the region is hidden — hiding it at once
         // would collapse it with no motion. At first paint, or under reduced motion, it is hidden at once.
         if (first || this.reduced()) {
-            setAttr(region, 'hidden', UNTIL_FOUND);
+            setAttr$1(region, 'hidden', UNTIL_FOUND);
             return;
         }
         const hide = () => {
             this.closing.delete(key);
             if (!item.hasAttribute(ON_ATTRIBUTE))
-                setAttr(region, 'hidden', UNTIL_FOUND);
+                setAttr$1(region, 'hidden', UNTIL_FOUND);
         };
         this.closing.set(key, setTimeout(hide, this.closeDelay(track)));
     }
@@ -1146,7 +1238,7 @@ class AccordionRuntime {
         return this.items().map(i => this.own(i, BUTTON_SELECTOR)).filter((b) => !!b);
     }
 }
-function dispatch(el, type) {
+function dispatch$1(el, type) {
     const Ctor = globalThis.CustomEvent;
     if (Ctor)
         el.dispatchEvent(new Ctor(type, { bubbles: false }));
@@ -1161,7 +1253,7 @@ function attachAccordionAt(root, options = {}) {
 /** Attach the runtime to every accordion under `container` that has none yet. Returns the new runtimes. */
 function attachAccordions(container, options = {}) {
     const out = [];
-    container.querySelectorAll(ROOT_SELECTOR).forEach(root => {
+    container.querySelectorAll(ROOT_SELECTOR$1).forEach(root => {
         const runtime = attachAccordionAt(root, options);
         if (runtime)
             out.push(runtime);
@@ -1198,18 +1290,6 @@ var CompositeItemAction;
     CompositeItemAction["Close"] = "close";
     CompositeItemAction["Toggle"] = "toggle";
 })(CompositeItemAction || (CompositeItemAction = {}));
-/**
- * Run an item action on the element of an ITEM (an accordion item, or a disclosure) — the `openItem` /
- * `closeItem` / `toggleItem` interaction actions, on the canvas and on the live site through this one function.
- * Returns whether the item shows open afterwards, or null when `el` is in no running composite.
- */
-function runCompositeItemAction(el, action) {
-    const item = closestAccordionItem(el);
-    const runtime = item ? accordionRuntimeOf(rootOfItem(item)) : null;
-    if (!item || !runtime)
-        return null;
-    return runtime.run(action, runtime.keyOf(item));
-}
 /** How much of an opened item must already be on screen for the action NOT to scroll to it (its header row). */
 const VISIBLE_HEAD_PX = 48;
 /** True when an item an action just opened is out of view and the page should scroll to it (T14: "opens that item
@@ -1226,21 +1306,21 @@ const DISCLOSURE_WORDS = {
 };
 /** A disclosure's one item key — its root IS its item. */
 const DISCLOSURE_ITEM_KEY = 'k1';
-var Type$2;
+var Type$3;
 (function (Type) {
     Type["Container"] = "Container";
     Type["LinkedContainer"] = "LinkedContainer";
     Type["Text"] = "Text";
-})(Type$2 || (Type$2 = {}));
-var Style$2;
+})(Type$3 || (Type$3 = {}));
+var Style$3;
 (function (Style) {
     Style["Root"] = "box";
     Style["Trigger"] = "accordion-trigger";
     Style["Word"] = "body";
     Style["Panel"] = "accordion-panel";
     Style["Body"] = "body";
-})(Style$2 || (Style$2 = {}));
-const ZERO_BOX$1 = '0px 0px 0px 0px';
+})(Style$3 || (Style$3 = {}));
+const ZERO_BOX$2 = '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,
@@ -1249,7 +1329,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 = {
+const PART_BASE$1 = {
     [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.
@@ -1259,17 +1339,17 @@ const PART_BASE = {
     },
     // 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$1, padding: ZERO_BOX$1, width: 'auto' },
-    [DisclosureRole.Less]: { display: HIDDEN, margin: ZERO_BOX$1, padding: ZERO_BOX$1, width: 'auto' },
+    [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.Panel]: { display: 'block', width: '100%', minHeight: 'auto', height: 'auto' },
 };
-const BODY_BASE = { margin: ZERO_BOX$1, padding: ZERO_BOX$1, minHeight: 'auto' };
-function make$1(create, key, type, role, style, props, label) {
-    return makeCompositePart(create, { key, type, props, elementStyle: style }, role, label, role ? PART_BASE[role] : undefined);
+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);
 }
 /** 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$1(create, role === DisclosureRole.More ? 'more' : 'less', Type$2.Text, role, Style$2.Word, { content: words, tag: 'span' }, 'Text');
+    const node = make$2(create, role === DisclosureRole.More ? 'more' : 'less', Type$3.Text, role, Style$3.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 };
@@ -1278,19 +1358,19 @@ 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$1(create, 'disclosure', Type$2.Container, DisclosureRole.Disclosure, Style$2.Root, {}, 'Disclosure');
+    const root = make$2(create, 'disclosure', Type$3.Container, DisclosureRole.Disclosure, Style$3.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$1(create, 'trigger', Type$2.LinkedContainer, DisclosureRole.Trigger, Style$2.Trigger, {}, 'Toggle');
+    const trigger = make$2(create, 'trigger', Type$3.LinkedContainer, DisclosureRole.Trigger, Style$3.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$1(create, 'panel', Type$2.Container, DisclosureRole.Panel, Style$2.Panel, {}, 'Panel');
-    const body = make$1(create, 'body', Type$2.Text, null, Style$2.Body, { content: words.body, tag: 'p' }, 'Text');
-    writeStyles(body, BODY_BASE);
+    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');
+    writeStyles(body, BODY_BASE$1);
     panel.children = [body];
     root.children = [trigger, panel];
     return root;
@@ -1452,7 +1532,7 @@ const CARD_WORDS = {
 };
 /** The breakpoint whose layer stacks an "Image side" card (Breakpoint.Mobile, ≤767px). */
 const CARD_STACK_BREAKPOINT = 'mobile';
-var Type$1;
+var Type$2;
 (function (Type) {
     Type["Container"] = "Container";
     Type["Image"] = "Image";
@@ -1460,8 +1540,8 @@ var Type$1;
     Type["Text"] = "Text";
     Type["Icon"] = "Icon";
     Type["ButtonBlock"] = "ButtonBlock";
-})(Type$1 || (Type$1 = {}));
-var Style$1;
+})(Type$2 || (Type$2 = {}));
+var Style$2;
 (function (Style) {
     Style["Card"] = "card";
     Style["Box"] = "box";
@@ -1474,7 +1554,7 @@ var Style$1;
     Style["Ghost"] = "button-ghost";
     Style["Icon"] = "icon";
     Style["Scrim"] = "media-scrim";
-})(Style$1 || (Style$1 = {}));
+})(Style$2 || (Style$2 = {}));
 var Scheme;
 (function (Scheme) {
     Scheme["Default"] = "default";
@@ -1484,11 +1564,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$1.Card, 'padding');
-const IMAGE_RADIUS = styleValue(Style$1.Media, 'borderRadius');
-const TITLE_SIZE = styleValue(Style$1.Title, 'fontSize');
+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 LEAD_SIZE = 'var(--iox-size-lead)';
-const ZERO_BOX = '0px 0px 0px 0px';
+const ZERO_BOX$1 = '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.
@@ -1496,25 +1576,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, padding: ZERO_BOX, minHeight: 'auto' },
-    [CardRole.Title]: { margin: ZERO_BOX },
-    [CardRole.Text]: { margin: ZERO_BOX, padding: ZERO_BOX, 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' },
     // 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$1 = { display: 'block', width: '100%', maxWidth: '100%' };
+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 = { 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 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 };
+const GROWING_CONTENT = { position: 'static', flexGrow: '1', flexShrink: '1', flexBasis: '0%', padding: ZERO_BOX$1 };
 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$1.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$2.Box, contentScheme: Scheme.Default,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: true,
     },
@@ -1522,7 +1602,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$1.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$2.Box, contentScheme: Scheme.Default,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: true,
         stack: {
@@ -1532,11 +1612,11 @@ const LAYOUTS = {
         },
     },
     [CardLayout.Overlay]: {
-        card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-end', minHeight: '340px', padding: ZERO_BOX },
+        card: { flexDirection: 'column', alignItems: 'stretch', justifyContent: 'flex-end', minHeight: '340px', padding: ZERO_BOX$1 },
         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$1.Scrim, contentScheme: Scheme.Inverse,
+        contentStyle: Style$2.Scrim, contentScheme: Scheme.Inverse,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: false,
     },
@@ -1544,7 +1624,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$1.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$2.Box, contentScheme: Scheme.Default,
         title: { fontSize: LEAD_SIZE },
         badgeOnMedia: false,
         partsOff: [CardPart.Text, CardPart.Actions],
@@ -1555,7 +1635,7 @@ const STACK_KEYS = {
     media: Object.keys(LAYOUTS[CardLayout.Side].stack.media),
     image: Object.keys(LAYOUTS[CardLayout.Side].stack.image),
 };
-function make(create, key, type, role, elementStyle, props = {}, label) {
+function make$1(create, key, type, role, elementStyle, props = {}, label) {
     const node = create({ key, type, props, elementStyle });
     if (role)
         node.role = role;
@@ -1565,16 +1645,16 @@ function make(create, key, type, role, elementStyle, props = {}, label) {
     return node;
 }
 function buttonLabel(create, key, words) {
-    const label = make(create, key, Type$1.Text, null, Style$1.Label, { content: words, tag: 'span' });
-    writeStyles(label, LABEL_BASE);
+    const label = make$1(create, key, Type$2.Text, null, Style$2.Label, { content: words, tag: 'span' });
+    writeStyles(label, LABEL_BASE$1);
     return label;
 }
 /** Each optional part (and the locked title) as the recipe builds it. */
 const PART_BUILDERS = {
     [CardPart.Media]: (create) => {
-        const media = make(create, 'media', Type$1.Container, CardRole.Media, Style$1.Box, {}, 'Media');
-        const image = make(create, 'image', Type$1.Image, null, Style$1.Media, { src: '', alt: '' });
-        writeStyles(image, IMAGE_BASE$1);
+        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: '' });
+        writeStyles(image, IMAGE_BASE$2);
         media.children = [image];
         return media;
     },
@@ -1584,14 +1664,14 @@ const PART_BUILDERS = {
         badge.label = 'Badge';
         return badge;
     },
-    [CardPart.Eyebrow]: (create, words) => make(create, 'eyebrow', Type$1.Text, CardRole.Eyebrow, Style$1.Eyebrow, { content: words.eyebrow, tag: 'p' }, 'Eyebrow'),
-    [CardPart.Text]: (create, words) => make(create, 'text', Type$1.Text, CardRole.Text, Style$1.Body, { content: words.text, tag: 'p' }, 'Text'),
+    [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.Actions]: (create, words) => {
-        const actions = make(create, 'actions', Type$1.Container, CardRole.Actions, Style$1.Box, {}, 'Buttons');
-        const primary = make(create, 'primary', Type$1.ButtonBlock, null, Style$1.Primary);
+        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);
         primary.children = [buttonLabel(create, 'primary-label', words.primary)];
-        const ghost = make(create, 'secondary', Type$1.ButtonBlock, null, Style$1.Ghost);
-        const icon = make(create, 'secondary-icon', Type$1.Icon, null, Style$1.Icon, { iconClass: SAVE_ICON });
+        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 });
         writeStyles(icon, INLINE_ICON);
         ghost.children = [icon, buttonLabel(create, 'secondary-label', words.secondary)];
         actions.children = [primary, ghost];
@@ -1599,15 +1679,15 @@ const PART_BUILDERS = {
     },
 };
 function buildTitle(create, words) {
-    return make(create, 'title', Type$1.Heading, CardRole.Title, Style$1.Title, { content: words.title, level: 'h3', [LINK_TYPE]: LinkType.None }, 'Title');
+    return make$1(create, 'title', Type$2.Heading, CardRole.Title, Style$2.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(create, 'card', Type$1.Container, CardRole.Card, Style$1.Card, {}, 'Card');
-    const content = make(create, 'content', Type$1.Container, CardRole.Content, Style$1.Box, {}, 'Content');
+    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');
     content.children = [
         ...(on(CardPart.Eyebrow) ? [PART_BUILDERS[CardPart.Eyebrow](create, words, tone)] : []),
         buildTitle(create, words),
@@ -1638,7 +1718,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$1.Image);
+const imageOf = (media) => media?.children?.find(c => c.type === Type$2.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
@@ -1670,7 +1750,7 @@ function applyPartLayout(card, spec, part, baseline) {
             setStack(part, spec.stack?.media, STACK_KEYS.media);
             const image = imageOf(part);
             if (image) {
-                writeStyles(image, { ...IMAGE_BASE$1, ...spec.image });
+                writeStyles(image, { ...IMAGE_BASE$2, ...spec.image });
                 setStack(image, spec.stack?.image, STACK_KEYS.image);
             }
             return;
@@ -1921,17 +2001,17 @@ function sliderSlides(children) {
     return (children ?? []).filter(c => !isSliderPart(c));
 }
 // ── the parts' recipe ───────────────────────────────────────────────────────────────────────────────
-var Type;
+var Type$1;
 (function (Type) {
     Type["ButtonBlock"] = "ButtonBlock";
     Type["Icon"] = "Icon";
     Type["Container"] = "Container";
-})(Type || (Type = {}));
-var Style;
+})(Type$1 || (Type$1 = {}));
+var Style$1;
 (function (Style) {
     Style["Control"] = "button-secondary";
     Style["Icon"] = "icon";
-})(Style || (Style = {}));
+})(Style$1 || (Style$1 = {}));
 /** Each part's glyph (Phosphor) and its default accessible name. */
 const SLIDER_PART_GLYPH = {
     [SliderRole.Pause]: 'ph ph-pause',
@@ -1973,7 +2053,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.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$1.Container, props: {}, elementStyle: NO_ELEMENT_STYLE }, role, PART_LABEL[role], legacy?.paginationColor ? { ...PAGINATION_BASE, color: legacy.paginationColor } : PAGINATION_BASE);
         dots.children = [];
         return dots;
     }
@@ -1989,9 +2069,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.ButtonBlock, props, elementStyle: legacy ? NO_ELEMENT_STYLE : Style.Control }, role, PART_LABEL[role], base);
+    const button = makeCompositePart(create, { key, type: Type$1.ButtonBlock, props, elementStyle: legacy ? NO_ELEMENT_STYLE : Style$1.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.Icon, props: { iconClass: SLIDER_PART_GLYPH[role] }, elementStyle: legacy ? NO_ELEMENT_STYLE : Style.Icon }, null, 'Icon', iconBase);
+    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);
     button.children = [icon];
     return button;
 }
@@ -2175,6 +2255,14 @@ const COMPOSITE_ROLE_SPECS = {
     [DisclosureRole.More]: { parent: DisclosureRole.Trigger },
     [DisclosureRole.Less]: { parent: DisclosureRole.Trigger },
     [DisclosureRole.Icon]: { parent: DisclosureRole.Trigger },
+    // CC4a — a Tabs always keeps its tab list and its panels holder; a tab lives in the list and a panel in the
+    // holder (each may be deleted — with its pair — but never moved out); the list takes only tabs, the holder only
+    // panels, and a panel takes anything.
+    [TabsRole.Tabs]: { parent: null },
+    [TabsRole.List]: { parent: TabsRole.Tabs, locked: true, accepts: [TabsRole.Trigger] },
+    [TabsRole.Panels]: { parent: TabsRole.Tabs, locked: true, accepts: [TabsRole.Panel] },
+    [TabsRole.Trigger]: { parent: TabsRole.List, pinned: true },
+    [TabsRole.Panel]: { parent: TabsRole.Panels, 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.
@@ -2195,6 +2283,8 @@ var StructureRefusal;
     StructureRefusal["LockedPart"] = "locked-part";
     /** A locked part can only live directly inside its own parent role. */
     StructureRefusal["LockedPlacement"] = "locked-placement";
+    /** The new parent takes only certain roles (a tab list takes only tabs, CC4a). */
+    StructureRefusal["NotAccepted"] = "not-accepted";
 })(StructureRefusal || (StructureRefusal = {}));
 /**
  * Why the structure guard refuses `edit` on `node`, or null when it is allowed. `ancestors` (Move only) =
@@ -2202,11 +2292,13 @@ var StructureRefusal;
  */
 function structureRefusal(node, edit, ancestors = []) {
     const spec = node?.role ? COMPOSITE_ROLE_SPECS[node.role] : undefined;
+    const parent = ancestors[ancestors.length - 1];
+    if (edit === StructureEdit.Move && acceptsRefusal(node, parent))
+        return StructureRefusal.NotAccepted;
     if (!spec?.locked && !spec?.pinned)
         return null;
     if (edit === StructureEdit.Delete)
         return spec.locked ? StructureRefusal.LockedPart : null;
-    const parent = ancestors[ancestors.length - 1];
     const placed = spec.parentType ? parent?.type === spec.parentType : parent?.role === spec.parent;
     return placed ? null : StructureRefusal.LockedPlacement;
 }
@@ -2215,6 +2307,13 @@ function structureRefusal(node, edit, ancestors = []) {
 function isLockedPart(node) {
     return !!(node?.role && COMPOSITE_ROLE_SPECS[node.role]?.locked);
 }
+/** Why `parent` refuses `node` as a child (it takes only certain roles), or null. */
+function acceptsRefusal(node, parent) {
+    const accepts = parent?.role ? COMPOSITE_ROLE_SPECS[parent.role]?.accepts : undefined;
+    if (!accepts)
+        return null;
+    return node?.role && accepts.includes(node.role) ? null : StructureRefusal.NotAccepted;
+}
 
 const SLIDE_VISIBLE = 'swiper-slide-visible';
 const RUNTIME_KEY = '__ioxCarousel';
@@ -2400,7 +2499,7 @@ const SLIDE_BASE = {
     width: '100%', height: '100%', aspectRatio: 'auto', display: 'flex', flexDirection: 'column', alignItems: 'center',
     justifyContent: 'center', gap: '12px', padding: '56px 64px 16px 64px',
 };
-const IMAGE_BASE = { width: '100%', height: 'auto', maxHeight: '72dvh', minHeight: '0px', objectFit: 'contain', aspectRatio: '4 / 3', flexShrink: '1' };
+const IMAGE_BASE$1 = { width: '100%', height: 'auto', maxHeight: '72dvh', minHeight: '0px', objectFit: 'contain', aspectRatio: '4 / 3', flexShrink: '1' };
 const CAPTION_BASE = { textAlign: 'center', margin: ZERO, padding: ZERO, minHeight: 'auto', width: 'auto' };
 /** The counter "3 / 6" sits at the START of the top row, Close at its end (board 6). */
 const COUNTER_BASE = { color: 'var(--iox-text-muted)', top: '12px', alignItems: 'flex-start', justifyContent: 'flex-start' };
@@ -2421,7 +2520,7 @@ function bindRow(node, prop, source, field) {
 }
 function buildSlide(create, key, options, rowAlias) {
     const slide = makeCompositePart(create, { key, type: SLIDE_TYPE, props: {}, elementStyle: NO_ELEMENT_STYLE }, null, 'Slide', SLIDE_BASE);
-    const image = makeCompositePart(create, { key: `${key}-image`, type: 'Image', props: { src: '', alt: '' }, elementStyle: 'media' }, null, 'Image', IMAGE_BASE);
+    const image = makeCompositePart(create, { key: `${key}-image`, type: 'Image', props: { src: '', alt: '' }, elementStyle: 'media' }, null, 'Image', IMAGE_BASE$1);
     const caption = makeCompositePart(create, { key: `${key}-caption`, type: 'Text', props: { content: 'Caption', tag: 'p' }, elementStyle: 'small' }, null, 'Caption', CAPTION_BASE);
     if (rowAlias) {
         bindRow(image, 'src', rowAlias, options.imageField ?? 'item');
@@ -2525,13 +2624,897 @@ function rowIndexOf(el) {
     return Number.isInteger(index) && index >= 0 ? index : 0;
 }
 
+/**
+ * TABS (CC4a — composite K2 T17–T20; complex-components boards 3 and 9, APPROVED 2026-10-20). Not a component: a
+ * recipe of ordinary nodes, each part carrying a role, so every tab and every panel is selectable on the canvas, in
+ * the layer tree and the breadcrumb, and wears its own element style (R2).
+ *
+ *   Container `box`                  role tabs          traits activateOn · orientation · ariaLabel (the list's name)
+ *   ├─ Container `tab-list`          role tabs.list     → role=tablist (locked)        — or a Repeater (From content)
+ *   │   └─ ButtonBlock `tab` ×3      role tabs.trigger  itemKey k1…  → <button role=tab> › Text `button-label`
+ *   └─ Container `box`               role tabs.panels   (locked)                        — or a Repeater (From content)
+ *       └─ Container `box` ×3        role tabs.panel    the SAME itemKey as its tab → role=tabpanel, hidden while off
+ *           ├─ Image `media`         4 / 3
+ *           └─ Text `body`
+ *
+ * A tab and its panel are a PAIR by `itemKey` — never by index, so a tab moved to the end still shows its own panel.
+ * The behaviour is BUILT IN (composite plan D1 = B): exactly one item is on (`exclusive`), the APG tabs pattern with
+ * AUTOMATIC activation (arrows move focus and activate, roving tabindex) — one runtime (`exclusive-runtime.ts`) on the
+ * builder canvas and both engine paths, from the attribute planners below.
+ */
+var TabsBehaviourTrait;
+(function (TabsBehaviourTrait) {
+    /** Which pointer gesture turns a tab on: a click (always) or also a hover. */
+    TabsBehaviourTrait["ActivateOn"] = "activateOn";
+    /** The tab list across the top, or beside the panels. */
+    TabsBehaviourTrait["Orientation"] = "orientation";
+    /** The tab list's accessible name (`aria-label` on the role=tablist element) — the root's, edited in Accessibility. */
+    TabsBehaviourTrait["Label"] = "ariaLabel";
+})(TabsBehaviourTrait || (TabsBehaviourTrait = {}));
+var TabsActivateOn;
+(function (TabsActivateOn) {
+    TabsActivateOn["Click"] = "click";
+    TabsActivateOn["Hover"] = "hover";
+})(TabsActivateOn || (TabsActivateOn = {}));
+var TabsOrientation;
+(function (TabsOrientation) {
+    TabsOrientation["Horizontal"] = "horizontal";
+    TabsOrientation["Vertical"] = "vertical";
+})(TabsOrientation || (TabsOrientation = {}));
+const TABS_ACTIVATE_ONS = [TabsActivateOn.Click, TabsActivateOn.Hover];
+const TABS_ORIENTATIONS = [TabsOrientation.Horizontal, TabsOrientation.Vertical];
+/** Tabs from content default to six rows: more tabs do not fit a row (board 9 Q13). */
+const TABS_CONTENT_LIMIT = 6;
+/** The breakpoint whose layer stacks a VERTICAL tabs (the list above the panels) and a panel's picture above its words. */
+const TABS_STACK_BREAKPOINT = CARD_STACK_BREAKPOINT;
+/** The words a fresh Tabs starts with — generic, the author's to replace (Card v2.1: never invented facts). */
+const TABS_WORDS = [
+    { label: 'First tab', text: 'Say what this tab is about in a sentence or two. Its picture sits beside it.' },
+    { label: 'Second tab', text: 'Say what this tab is about in a sentence or two. Its picture sits beside it.' },
+    { 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;
+(function (Type) {
+    Type["Container"] = "Container";
+    Type["ButtonBlock"] = "ButtonBlock";
+    Type["Text"] = "Text";
+    Type["Image"] = "Image";
+    Type["Repeater"] = "Repeater";
+})(Type || (Type = {}));
+var Style;
+(function (Style) {
+    Style["Root"] = "box";
+    Style["List"] = "tab-list";
+    Style["Tab"] = "tab";
+    Style["Label"] = "button-label";
+    Style["Panels"] = "box";
+    Style["Panel"] = "box";
+    Style["Media"] = "media";
+    Style["Body"] = "body";
+})(Style || (Style = {}));
+const ZERO_BOX = '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);
+/** What each part holds — layout only; its LOOK is its element style. The list WRAPS at narrow widths (board 3). */
+const PART_BASE = {
+    [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' },
+    [TabsRole.Panels]: { display: 'block', width: '100%', minWidth: '0px', minHeight: 'auto', height: 'auto' },
+    // 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 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' };
+/** On a phone a panel's picture sits above its words. */
+const PANEL_STACK = { gridTemplateColumns: '1fr' };
+const ORIENTATION_LAYOUT = {
+    [TabsOrientation.Horizontal]: {
+        root: { flexDirection: 'column', alignItems: 'stretch', gap: '20px' },
+        list: { flexDirection: 'row', flexWrap: 'wrap', width: '100%', flexShrink: '1', borderWidth: LIST_EDGE },
+    },
+    [TabsOrientation.Vertical]: {
+        root: { flexDirection: 'row', alignItems: 'flex-start', gap: '24px' },
+        list: { flexDirection: 'column', flexWrap: 'nowrap', width: 'auto', flexShrink: '0', borderWidth: ZERO_BOX },
+        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);
+}
+/** 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');
+    tab.itemKey = itemKey;
+    const label = make(create, `${itemKey}-label`, Type.Text, null, Style.Label, { content: words.label, tag: 'span' }, 'Text');
+    writeStyles(label, LABEL_BASE);
+    tab.children = [label];
+    const panel = make(create, `${itemKey}-panel`, Type.Container, TabsRole.Panel, Style.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');
+    writeStyles(image, IMAGE_BASE);
+    const text = make(create, `${itemKey}-text`, Type.Text, null, Style.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');
+    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 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);
+    root.children = [list, panels];
+    applyOrientation(root, options.orientation ?? TabsOrientation.Horizontal);
+    return root;
+}
+// ── reading a tree ──────────────────────────────────────────────────────────────────────────────
+function isTabsRoot(node) {
+    return node?.role === TabsRole.Tabs;
+}
+/** The tab list (the holder of the triggers). */
+function tabsListOf(root) {
+    return (root.children ?? []).find(c => c.role === TabsRole.List);
+}
+/** The holder of the panels. */
+function tabsPanelsOf(root) {
+    return (root.children ?? []).find(c => c.role === TabsRole.Panels);
+}
+/** The tabs in order — every tab (Manual), or the one template tab (From content). */
+function tabsTriggers(root) {
+    return (tabsListOf(root)?.children ?? []).filter(c => c.role === TabsRole.Trigger);
+}
+/** The panels in their holder's order (their order does not pair them — their key does). */
+function tabsPanels(root) {
+    return (tabsPanelsOf(root)?.children ?? []).filter(c => c.role === TabsRole.Panel);
+}
+/** 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;
+}
+/** The panel paired with `tab` (the same key), or undefined. From content the one template panel pairs the template tab. */
+function tabPanelOf(root, tab) {
+    if (isTabsFromContent(root))
+        return tabsPanels(root)[0];
+    return tab.itemKey ? tabsPanels(root).find(p => p.itemKey === tab.itemKey) : undefined;
+}
+/** The tab paired with `panel` (the same key), or undefined. */
+function tabTriggerOf(root, panel) {
+    if (isTabsFromContent(root))
+        return tabsTriggers(root)[0];
+    return panel.itemKey ? tabsTriggers(root).find(t => t.itemKey === panel.itemKey) : undefined;
+}
+/** The other half of a tab ⇄ panel pair, or undefined for any other node. */
+function tabsPartnerOf(root, node) {
+    if (node.role === TabsRole.Trigger)
+        return tabPanelOf(root, node);
+    if (node.role === TabsRole.Panel)
+        return tabTriggerOf(root, node);
+    return undefined;
+}
+/** 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)
+        hit = n; });
+    return hit;
+}
+const stripTags = (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')) : '';
+}
+/** Items ▸ rename: the tab's words. */
+function renameTab(tab, words) {
+    const label = tabLabelNodeOf(tab);
+    return !!label && writeProp(label, 'content', 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)
+        hit = n; });
+    return hit;
+}
+/** The first Image inside a panel. */
+function tabPanelImageOf(panel) {
+    let hit;
+    walkComposite(panel, n => { if (!hit && n.type === Type.Image)
+        hit = n; });
+    return hit;
+}
+/** The root's behaviour (an unset trait reads its default: a click, the list across the top). */
+function tabsBehaviour(root) {
+    const on = root ? readProp(root, TabsBehaviourTrait.ActivateOn) : undefined;
+    const orientation = root ? readProp(root, TabsBehaviourTrait.Orientation) : undefined;
+    return {
+        activateOn: TABS_ACTIVATE_ONS.includes(on) ? on : TabsActivateOn.Click,
+        orientation: TABS_ORIENTATIONS.includes(orientation) ? orientation : TabsOrientation.Horizontal,
+    };
+}
+/** The tab list's accessible name (empty when unnamed). */
+function tabsLabel(root) {
+    return root ? String(readProp(root, TabsBehaviourTrait.Label) ?? '').trim() : '';
+}
+/** Write the orientation preset into the root's and the list's layout (both orientations write the same keys). */
+function applyOrientation(root, orientation) {
+    const spec = ORIENTATION_LAYOUT[orientation];
+    const list = tabsListOf(root);
+    writeStyles(root, spec.root);
+    if (list)
+        writeStyles(list, spec.list);
+    if (spec.rootStack)
+        writeLayerStyles(root, TABS_STACK_BREAKPOINT, spec.rootStack);
+    else
+        clearLayerStyles(root, TABS_STACK_BREAKPOINT, ROOT_STACK_KEYS);
+    if (list) {
+        if (spec.listStack)
+            writeLayerStyles(list, TABS_STACK_BREAKPOINT, spec.listStack);
+        else
+            clearLayerStyles(list, TABS_STACK_BREAKPOINT, LIST_STACK_KEYS);
+    }
+}
+/** Behaviour ▸ Activate on / Orientation (and Accessibility ▸ the list's name). False when the root has no such trait. */
+function setTabsBehaviour(root, patch) {
+    let ok = true;
+    if (patch.activateOn !== undefined)
+        ok = writeProp(root, TabsBehaviourTrait.ActivateOn, patch.activateOn) && ok;
+    if (patch.orientation !== undefined) {
+        ok = writeProp(root, TabsBehaviourTrait.Orientation, patch.orientation) && ok;
+        applyOrientation(root, patch.orientation);
+    }
+    if (patch.label !== undefined)
+        ok = writeProp(root, TabsBehaviourTrait.Label, patch.label) && ok;
+    return ok;
+}
+// ── editing (Items list, selection toolbar ▸ Add tab, the structure guard) ──────────────────────
+/** A key no tab of `root` holds yet (`k4`…). */
+function nextTabKey(root) {
+    const taken = new Set([...tabsTriggers(root), ...tabsPanels(root)].map(n => n.itemKey).filter(Boolean));
+    let n = tabsTriggers(root).length + 1;
+    while (taken.has(`k${n}`))
+        n++;
+    return `k${n}`;
+}
+/** Items ▸ Add tab (and the toolbar's "Add tab"): a fresh tab after `after` (or at the end) AND its panel. */
+function addTabPair(root, create, after, words = TABS_NEW_TAB_WORDS) {
+    const list = tabsListOf(root);
+    const panels = tabsPanelsOf(root);
+    if (!list || !panels || isTabsFromContent(root))
+        return null;
+    const pair = buildTabPair(create, words, nextTabKey(root));
+    const tabs = [...(list.children ?? [])];
+    const afterTab = after ? (after.role === TabsRole.Panel ? tabTriggerOf(root, after) : after) : null;
+    const at = afterTab ? tabs.indexOf(afterTab) : -1;
+    tabs.splice(at < 0 ? tabs.length : at + 1, 0, pair.tab);
+    list.children = tabs;
+    const afterPanel = afterTab ? tabPanelOf(root, afterTab) : null;
+    const held = [...(panels.children ?? [])];
+    const pAt = afterPanel ? held.indexOf(afterPanel) : -1;
+    held.splice(pAt < 0 ? held.length : pAt + 1, 0, pair.panel);
+    panels.children = held;
+    return pair;
+}
+function moveIn(holder, node, toIndex, role) {
+    const children = [...(holder.children ?? [])];
+    const from = children.indexOf(node);
+    if (from < 0)
+        return;
+    children.splice(from, 1);
+    const same = children.filter(c => c.role === role);
+    const anchor = same[Math.max(0, Math.min(toIndex, same.length))];
+    children.splice(anchor ? children.indexOf(anchor) : children.length, 0, node);
+    holder.children = children;
+}
+/** Items ▸ drag to reorder: move a tab — and its panel, so the layer tree reads in the same order — to `toIndex`.
+ *  The pairing never depended on the order. False when `tab` is not one of the root's tabs. */
+function moveTabPair(root, tab, toIndex) {
+    const list = tabsListOf(root);
+    const panels = tabsPanelsOf(root);
+    if (!list || tab.role !== TabsRole.Trigger || !(list.children ?? []).includes(tab))
+        return false;
+    const panel = tabPanelOf(root, tab);
+    moveIn(list, tab, toIndex, TabsRole.Trigger);
+    if (panel && panels)
+        moveIn(panels, panel, toIndex, TabsRole.Panel);
+    return true;
+}
+/** Remove a tab and its panel (the pair) — what "Delete tab and its panel" does. True when the tab was removed. */
+function removeTabPair(root, node) {
+    const tab = node.role === TabsRole.Panel ? tabTriggerOf(root, node) : node;
+    const list = tabsListOf(root);
+    if (!tab || !list || tab.role !== TabsRole.Trigger)
+        return false;
+    const panel = tabPanelOf(root, tab);
+    list.children = (list.children ?? []).filter(c => c !== tab);
+    const panels = tabsPanelsOf(root);
+    if (panel && panels)
+        panels.children = (panels.children ?? []).filter(c => c !== panel);
+    return true;
+}
+var TabsEditRefusal;
+(function (TabsEditRefusal) {
+    /** A Tabs keeps at least one tab (composite plan T18). */
+    TabsEditRefusal["LastTab"] = "last-tab";
+})(TabsEditRefusal || (TabsEditRefusal = {}));
+/** Why removing `node` (a tab or a panel) from `root` is refused, or null. */
+function tabsRemovalRefusal(root, node) {
+    if (!root || (node?.role !== TabsRole.Trigger && node?.role !== TabsRole.Panel))
+        return null;
+    return tabsTriggers(root).length <= 1 ? TabsEditRefusal.LastTab : null;
+}
+/** Every "Item open" (`trigger-on`) state inside a tab or a panel points at ITS tab or panel — the part that carries
+ *  `data-iox-on` while its item is on. */
+function tabsItemTriggerIds(root) {
+    for (const part of [...tabsTriggers(root), ...tabsPanels(root)]) {
+        if (!part.id)
+            continue;
+        walkComposite(part, n => {
+            if (n === part || !n.stateStyles?.[ITEM_OPEN_STATE])
+                return;
+            n.stateTriggers = { ...(n.stateTriggers ?? {}), [ITEM_OPEN_STATE]: part.id };
+        });
+    }
+}
+function tabsScope(rootId, behaviour, keys, label = '') {
+    return { 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) {
+    return tabsTriggers(root).map((t, i) => t.itemKey || `item-${i}`);
+}
+/** One item's render state: its key, whether it is on, and its ARIA ids (`iox-tab-<scope>-<key>-h` / `-p`). */
+function tabsItemState(scope, key) {
+    return { key, on: scope.active === key, ids: accordionDomIds(scope.rootId, key, CompositeKind.Tabs) };
+}
+const ACTIVATE_ON_ATTRIBUTE = 'data-iox-activate-on';
+const ORIENTATION_ATTRIBUTE = 'data-iox-orientation';
+function tabsRootAttributes(behaviour, scopeId) {
+    return {
+        [COMPOSITE_ATTRIBUTE]: CompositeKind.Tabs,
+        [ACTIVATE_ON_ATTRIBUTE]: behaviour.activateOn,
+        [ORIENTATION_ATTRIBUTE]: behaviour.orientation,
+        ...(scopeId ? { [SCOPE_ATTRIBUTE]: scopeId } : {}),
+    };
+}
+/** The tab list: `role=tablist`, vertical said aloud, named by the root's label. */
+function tabListAttributes(behaviour, label = '') {
+    return {
+        role: 'tablist',
+        ...(behaviour.orientation === TabsOrientation.Vertical ? { 'aria-orientation': 'vertical' } : {}),
+        ...(label ? { 'aria-label': label } : {}),
+    };
+}
+/** A tab: a real button that selects its panel — selected = the one tab in the Tab order (roving tabindex). */
+function tabTriggerAttributes(state) {
+    return {
+        type: 'button',
+        role: 'tab',
+        id: state.ids.trigger,
+        'aria-selected': state.on ? 'true' : 'false',
+        'aria-controls': state.ids.panel,
+        tabindex: state.on ? '0' : '-1',
+        [ITEM_KEY_ATTRIBUTE]: state.key,
+        ...(state.on ? { [ON_ATTRIBUTE]: '' } : {}),
+    };
+}
+/** A panel: `role=tabpanel`, named by its tab, a Tab stop of its own, and `hidden` (display:none) while off. */
+function tabPanelAttributes(state) {
+    return {
+        role: 'tabpanel',
+        id: state.ids.panel,
+        'aria-labelledby': state.ids.trigger,
+        tabindex: '0',
+        [ITEM_KEY_ATTRIBUTE]: state.key,
+        ...(state.on ? { [ON_ATTRIBUTE]: '' } : { hidden: '' }),
+    };
+}
+/**
+ * The render scope of one rendered Tabs — ONE decision for both engine paths (and the composer's checks): its scope id
+ * (its node id + the rows around it, vectoriox/iox-ui#20), its behaviour, its list's name and every item key in order —
+ * a manual tab's own `itemKey`, or, From content, each ROW's own id (R3: never its index — a reorder in the CMS keeps
+ * every tab with its own panel). `rows` = the rows the tab list's Repeater resolved (null for a manual Tabs).
+ */
+function tabsScopeFor(root, rootCssId, rows, rowKeys = []) {
+    const keys = rows ? rows.map((row, i) => rowItemKey(row, i)) : manualTabKeys(root);
+    return tabsScope(compositeScopeId(rootCssId, rowKeys), tabsBehaviour(root), keys, tabsLabel(root));
+}
+/** The key a manual tab or panel renders with: its own key, else its index among its kind. */
+function tabPartKey(node, index) {
+    return node.itemKey || `item-${index}`;
+}
+/**
+ * The attributes a part of a Tabs writes on its own element (both engine paths, SSR included): the root's data
+ * attributes (its scope id when it sits in repeated rows), the list's role and name, a tab's and a panel's state by
+ * `key` (its own key, or — From content — its row's). Anything else writes nothing.
+ */
+function tabsPartAttributes(node, scope, key, rowScoped = false) {
+    switch (node.role) {
+        case TabsRole.Tabs: return tabsRootAttributes(scope.behaviour, rowScoped ? scope.rootId : undefined);
+        case TabsRole.List: return tabListAttributes(scope.behaviour, scope.label);
+        case TabsRole.Trigger: return key ? tabTriggerAttributes(tabsItemState(scope, key)) : {};
+        case TabsRole.Panel: return key ? tabPanelAttributes(tabsItemState(scope, key)) : {};
+        default: return {};
+    }
+}
+/**
+ * The APG tabs keys on a tab (automatic activation): → / ← move along a horizontal list — mirrored under RTL — and ↓ /
+ * ↑ along a vertical one; Home / End jump. Every move wraps. Enter / Space are the button's own.
+ */
+function tabsKeyAction(key, orientation, rtl = false) {
+    if (key === 'Home')
+        return AccordionKeyAction.First;
+    if (key === 'End')
+        return AccordionKeyAction.Last;
+    if (orientation === TabsOrientation.Vertical) {
+        if (key === 'ArrowDown')
+            return AccordionKeyAction.Next;
+        if (key === 'ArrowUp')
+            return AccordionKeyAction.Previous;
+        return null;
+    }
+    if (key === 'ArrowRight')
+        return rtl ? AccordionKeyAction.Previous : AccordionKeyAction.Next;
+    if (key === 'ArrowLeft')
+        return rtl ? AccordionKeyAction.Next : AccordionKeyAction.Previous;
+    return null;
+}
+// ── Items from content (R3, composite T39) ──────────────────────────────────────────────────────
+const SHORT_TEXT = new Set(['text']);
+const LONG_TEXT = new Set(['textarea', 'richText', 'editor']);
+const IMAGE_CONTROLLERS = new Set(['image', 'media', 'file']);
+/** R3 (board 3 "Tabs from content"): switching to From content binds the tab's words to the first short-text field,
+ *  the panel's words to the first long-text field and its picture to the first image field. ONE rule for the builder's
+ *  switch and the composer. */
+function pickTabsAutoBinds(fields) {
+    const isString = (f) => !f.type || f.type === 'string';
+    const label = fields.find(f => isString(f) && SHORT_TEXT.has(String(f.controller ?? 'text')))?.name ?? null;
+    const text = fields.find(f => isString(f) && LONG_TEXT.has(String(f.controller ?? '')) && f.name !== label)?.name ?? null;
+    const image = fields.find(f => IMAGE_CONTROLLERS.has(String(f.controller ?? '')) && f.name !== label && f.name !== text)?.name ?? null;
+    return { label, text, image };
+}
+/** The bound props of a tab's words, a panel's words and its picture. */
+const TABS_LABEL_BIND_PROP = 'content';
+const TABS_TEXT_BIND_PROP = 'content';
+const TABS_IMAGE_BIND_PROP = 'src';
+/**
+ * Manual → From content (board 9 "Items: Manual · From content"): the list becomes `listRepeater` and the panels
+ * holder `panelsRepeater` (Repeater nodes the caller created with the same ids, roles, names, element styles and
+ * styles — a type change is the consumer's). The FIRST tab and ITS panel become the templates (their parts, styles
+ * and interactions kept; their keys dropped — a row's key is its id); every other pair is removed. Returns the removed
+ * nodes.
+ */
+function tabsToContent(root, listRepeater, panelsRepeater) {
+    const [tab, ...restTabs] = tabsTriggers(root);
+    const panel = tab ? tabPanelOf(root, tab) : undefined;
+    const restPanels = tabsPanels(root).filter(p => p !== panel);
+    if (tab)
+        delete tab.itemKey;
+    if (panel)
+        delete panel.itemKey;
+    listRepeater.role = TabsRole.List;
+    panelsRepeater.role = TabsRole.Panels;
+    listRepeater.children = tab ? [tab] : [];
+    panelsRepeater.children = panel ? [panel] : [];
+    root.children = (root.children ?? []).map(c => (c.role === TabsRole.List ? listRepeater : c.role === TabsRole.Panels ? panelsRepeater : c));
+    return [...restTabs, ...restPanels];
+}
+function writeRowIn(node, row, resolve) {
+    walkComposite(node, n => {
+        const bindings = n.bindings ?? [];
+        for (const b of bindings) {
+            const value = resolve(row, b);
+            if (value !== undefined && value !== null)
+                writeProp(n, b.prop, value);
+        }
+        if (bindings.length)
+            n.bindings = [];
+    });
+}
+/**
+ * From content → Manual: the rows come in as static pairs — each a copy of the template tab and panel (`clone`, which
+ * gives the copy fresh ids) whose bound words are written in as its own and whose bindings are dropped. `list` and
+ * `panels` are the manual holders the caller created. Returns the new pairs.
+ */
+function tabsToManual(root, list, panels, rows, clone, resolve) {
+    const [tabTemplate] = tabsTriggers(root);
+    const panelTemplate = tabsPanels(root)[0];
+    list.role = TabsRole.List;
+    panels.role = TabsRole.Panels;
+    const pairs = tabTemplate && panelTemplate ? rows.map((row, i) => {
+        const tab = clone(tabTemplate);
+        const panel = clone(panelTemplate);
+        tab.itemKey = panel.itemKey = `k${i + 1}`;
+        writeRowIn(tab, row, resolve);
+        writeRowIn(panel, row, resolve);
+        return { tab, panel };
+    }) : [];
+    list.children = pairs.map(p => p.tab);
+    panels.children = pairs.map(p => p.panel);
+    root.children = (root.children ?? []).map(c => (c.role === TabsRole.List ? list : c.role === TabsRole.Panels ? panels : c));
+    return pairs;
+}
+
+const KIND_ROOT = (kind) => `[${COMPOSITE_ATTRIBUTE}="${kind}"]`;
+const EXCLUSIVE_KINDS = Object.keys(EXCLUSIVE_KIND_ROLES);
+const ROOT_SELECTOR = EXCLUSIVE_KINDS.map(KIND_ROOT).join(', ');
+const roleSelector = (pick) => EXCLUSIVE_KINDS.map(k => EXCLUSIVE_KIND_ROLES[k][pick]).filter((r) => !!r).map(r => `.${roleClass(r)}`).join(', ');
+const LIST_SELECTOR = roleSelector('list');
+const TRIGGER_SELECTOR = roleSelector('trigger');
+const PANEL_SELECTOR = roleSelector('panel');
+const ITEM_PART_SELECTOR = `${TRIGGER_SELECTOR}, ${PANEL_SELECTOR}`;
+const TABLIST_SELECTOR = '[role="tablist"]';
+/** The exclusive composite an element belongs to (the element itself when it is a root). */
+function closestExclusive(el) {
+    return el?.closest?.(ROOT_SELECTOR) ?? null;
+}
+/** The trigger or panel an element sits in (itself when it is one) — its ITEM part — or null. */
+function closestExclusiveItemPart(el) {
+    return el?.closest?.(ITEM_PART_SELECTOR) ?? null;
+}
+const kindOf = (root) => {
+    const raw = root.getAttribute(COMPOSITE_ATTRIBUTE);
+    return isExclusiveKind(raw) ? raw : CompositeKind.Tabs;
+};
+const nodeIdOf = (el) => {
+    for (const c of Array.from(el.classList))
+        if (c.startsWith('iox-node-'))
+            return c.slice('iox-node-'.length);
+    return '';
+};
+function behaviourOf(root) {
+    const on = root.getAttribute(ACTIVATE_ON_ATTRIBUTE);
+    const orientation = root.getAttribute(ORIENTATION_ATTRIBUTE);
+    return {
+        activateOn: TABS_ACTIVATE_ONS.includes(on) ? on : TabsActivateOn.Click,
+        orientation: TABS_ORIENTATIONS.includes(orientation) ? orientation : TabsOrientation.Horizontal,
+    };
+}
+function setAttr(el, name, value) {
+    if (!el)
+        return;
+    if (value === null) {
+        if (el.hasAttribute(name))
+            el.removeAttribute(name);
+    }
+    else if (el.getAttribute(name) !== value)
+        el.setAttribute(name, value);
+}
+function dispatch(el, type) {
+    const Ctor = globalThis.CustomEvent;
+    if (el && Ctor)
+        el.dispatchEvent(new Ctor(type, { bubbles: false }));
+}
+class ExclusiveRuntime {
+    constructor(root, options = {}) {
+        this.root = root;
+        this.options = options;
+        this.shown = null;
+        this.observer = null;
+        this.stampQueued = false;
+        this.awaitingItems = false;
+        this.onClick = (event) => {
+            const trigger = this.ownTrigger(event.target);
+            if (!trigger)
+                return;
+            event.preventDefault();
+            this.activate(this.keyOf(trigger));
+        };
+        this.onHover = (event) => {
+            if (this.behaviourValue.activateOn !== TabsActivateOn.Hover)
+                return;
+            const trigger = this.ownTrigger(event.target);
+            if (trigger)
+                this.activate(this.keyOf(trigger));
+        };
+        this.onKeydown = (event) => {
+            const e = event;
+            const trigger = this.ownTrigger(e.target);
+            if (!trigger)
+                return;
+            const rtl = isRtl(trigger);
+            const action = tabsKeyAction(e.key, this.behaviourValue.orientation, rtl);
+            if (!action)
+                return;
+            const triggers = this.triggers();
+            const target = triggers[accordionFocusIndex(action, triggers.indexOf(trigger), triggers.length)];
+            if (!target)
+                return;
+            e.preventDefault();
+            target.focus();
+            this.activate(this.keyOf(target));
+        };
+        this.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.
+        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.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.
+        root.addEventListener('click', this.onClick, true);
+        root.addEventListener('mouseover', this.onHover, true);
+        root.addEventListener('keydown', this.onKeydown);
+        if (options.observe && typeof MutationObserver !== 'undefined') {
+            this.observer = new MutationObserver(() => this.queueStamp());
+            this.observer.observe(root, { childList: true, subtree: true });
+        }
+        this.stamp(true);
+    }
+    get behaviour() {
+        return this.behaviourValue;
+    }
+    /** The behaviour changed in the panel (Activate on, Orientation). */
+    setBehaviour(behaviour) {
+        this.behaviourValue = behaviour;
+        this.root.setAttribute(ACTIVATE_ON_ATTRIBUTE, behaviour.activateOn);
+        this.root.setAttribute(ORIENTATION_ATTRIBUTE, behaviour.orientation);
+        this.stamp();
+    }
+    /** THIS composite's triggers in document order (a nested composite's are its own). */
+    triggers() {
+        return this.own(TRIGGER_SELECTOR);
+    }
+    /** THIS composite's panels in document order. */
+    panels() {
+        return this.own(PANEL_SELECTOR);
+    }
+    /** The key on right now (forced ?? live). */
+    get activeKey() {
+        return this.shown;
+    }
+    /** The key the live state holds (before anything forced). */
+    get liveKey() {
+        return this.live;
+    }
+    /** The key of a trigger or a panel: its `data-iox-item-key`, else its index among its kind. */
+    keyOf(part) {
+        const own = part.getAttribute(ITEM_KEY_ATTRIBUTE);
+        if (own)
+            return own;
+        const peers = part.matches(TRIGGER_SELECTOR) ? this.triggers() : this.panels();
+        return `item-${peers.indexOf(part)}`;
+    }
+    /** The key of the item an element sits in (a part inside a tab or a panel), or null. */
+    keyAt(el) {
+        const part = closestExclusiveItemPart(el);
+        return part && closestExclusive(part) === this.root ? this.keyOf(part) : null;
+    }
+    /** Turn `key` on (a click, a key, a hover, the `openItem` action, "Showing on canvas"). */
+    activate(key) {
+        if (!this.keys().includes(key))
+            return;
+        const changed = key !== this.live;
+        this.live = key;
+        this.stamp();
+        if (changed)
+            this.options.onChange?.(key);
+    }
+    /** Run an item action on `key`: Open turns it on; Close and Toggle do nothing (one item is always on). True when it
+     *  is on afterwards. */
+    run(open, key) {
+        if (open)
+            this.activate(key);
+        return this.shown === key;
+    }
+    /** The forced key changed (builder design state): show it. */
+    refresh() {
+        this.stamp();
+    }
+    destroy() {
+        if (EXCLUSIVE_RUNTIMES.get(this.root) === this)
+            EXCLUSIVE_RUNTIMES.delete(this.root);
+        this.root.removeEventListener('click', this.onClick, true);
+        this.root.removeEventListener('mouseover', this.onHover, true);
+        this.root.removeEventListener('keydown', this.onKeydown);
+        this.observer?.disconnect();
+        this.observer = null;
+    }
+    keys() {
+        return this.triggers().map(t => this.keyOf(t));
+    }
+    /** 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() {
+        const stamped = this.own(TABLIST_SELECTOR);
+        return stamped.length ? stamped : this.own(LIST_SELECTOR);
+    }
+    own(selector) {
+        return Array.from(this.root.querySelectorAll(selector)).filter(el => closestExclusive(el.parentElement) === this.root);
+    }
+    queueStamp() {
+        if (this.stampQueued)
+            return;
+        this.stampQueued = true;
+        const run = () => { this.stampQueued = false; this.stamp(); };
+        if (typeof queueMicrotask === 'function')
+            queueMicrotask(run);
+        else
+            Promise.resolve().then(run);
+    }
+    rootId() {
+        const own = this.options.rootId;
+        return (typeof own === 'function' ? own() : own) ?? this.root.getAttribute(SCOPE_ATTRIBUTE) ?? nodeIdOf(this.root);
+    }
+    /** Write every part's state into its markup; announce what changed. */
+    stamp(first = false) {
+        const triggers = this.triggers();
+        const keys = triggers.map(t => this.keyOf(t));
+        if (this.awaitingItems && keys.length) {
+            this.awaitingItems = false;
+            this.live = keys[0];
+            first = true;
+        }
+        if (this.live === null || !keys.includes(this.live))
+            this.live = keys[0] ?? null;
+        const forced = this.options.forced?.() ?? null;
+        const next = forced !== null && keys.includes(forced) ? forced : this.live;
+        const rootId = this.rootId();
+        const vertical = this.behaviourValue.orientation === TabsOrientation.Vertical;
+        for (const list of this.lists()) {
+            setAttr(list, 'role', 'tablist');
+            setAttr(list, 'aria-orientation', vertical ? 'vertical' : null);
+            if (this.options.label)
+                setAttr(list, 'aria-label', this.options.label() || null);
+        }
+        const panels = this.panels();
+        const panelOf = (key) => panels.find(p => this.keyOf(p) === key) ?? null;
+        for (const trigger of triggers) {
+            const key = this.keyOf(trigger);
+            const on = key === next;
+            const ids = accordionDomIds(rootId, key, CompositeKind.Tabs);
+            setAttr(trigger, ITEM_KEY_ATTRIBUTE, key);
+            setAttr(trigger, 'type', trigger.tagName === 'BUTTON' ? 'button' : null);
+            setAttr(trigger, 'role', 'tab');
+            setAttr(trigger, 'id', ids.trigger);
+            setAttr(trigger, 'aria-selected', on ? 'true' : 'false');
+            setAttr(trigger, 'aria-controls', panelOf(key) ? ids.panel : null);
+            setAttr(trigger, 'tabindex', on ? '0' : '-1');
+            setAttr(trigger, ON_ATTRIBUTE, on ? '' : null);
+        }
+        for (const panel of panels) {
+            const key = this.keyOf(panel);
+            const on = key === next;
+            const ids = accordionDomIds(rootId, key, CompositeKind.Tabs);
+            setAttr(panel, ITEM_KEY_ATTRIBUTE, key);
+            setAttr(panel, 'role', 'tabpanel');
+            setAttr(panel, 'id', ids.panel);
+            setAttr(panel, 'aria-labelledby', ids.trigger);
+            setAttr(panel, 'tabindex', '0');
+            setAttr(panel, ON_ATTRIBUTE, on ? '' : null);
+            setAttr(panel, 'hidden', on ? null : '');
+        }
+        const was = first ? null : this.shown;
+        this.shown = next;
+        if (was === next && !first)
+            return;
+        if (was !== null) {
+            dispatch(triggers.find(t => this.keyOf(t) === was), ITEM_OFF_EVENT);
+            dispatch(panelOf(was), ITEM_OFF_EVENT);
+        }
+        if (next !== null) {
+            dispatch(triggers.find(t => this.keyOf(t) === next), ITEM_ON_EVENT);
+            dispatch(panelOf(next), ITEM_ON_EVENT);
+        }
+    }
+    ownTrigger(target) {
+        const trigger = target?.closest?.(TRIGGER_SELECTOR);
+        return trigger && closestExclusive(trigger.parentElement) === this.root ? trigger : null;
+    }
+}
+/** The direction the tab is laid out in — the computed `direction` (a page's own CSS included), else its nearest `dir`. */
+function isRtl(el) {
+    let computed = '';
+    try {
+        computed = el.ownerDocument?.defaultView?.getComputedStyle(el).direction ?? '';
+    }
+    catch {
+        computed = '';
+    }
+    if (computed)
+        return computed === 'rtl';
+    return el.closest('[dir]')?.getAttribute('dir') === 'rtl';
+}
+/** Every live exclusive runtime by its root — so an item action finds the runtime of whatever item it targets. */
+const EXCLUSIVE_RUNTIMES = new WeakMap();
+/** The runtime running an exclusive root, or null. */
+function exclusiveRuntimeOf(root) {
+    return (root && EXCLUSIVE_RUNTIMES.get(root)) || null;
+}
+/** Attach the runtime to one rendered exclusive root, unless it already runs one. Returns the NEW runtime, or null. */
+function attachExclusiveAt(root, options = {}) {
+    if (EXCLUSIVE_RUNTIMES.has(root))
+        return null;
+    return new ExclusiveRuntime(root, options);
+}
+/** True when `el` is (or sits in) an exclusive item part — a tab or a panel. */
+function isExclusiveItemOn(el) {
+    return !!closestExclusiveItemPart(el)?.hasAttribute(ON_ATTRIBUTE);
+}
+/** Subscribe to the item part `el` sits in turning on / off. Returns the unsubscribe. */
+function onExclusiveItemState(el, on, handler) {
+    const part = closestExclusiveItemPart(el);
+    if (!part)
+        return () => undefined;
+    const type = on ? ITEM_ON_EVENT : ITEM_OFF_EVENT;
+    part.addEventListener(type, handler);
+    return () => part.removeEventListener(type, handler);
+}
+
+/** Attach the runtime a rendered composite root needs (its `data-iox-composite`), unless it runs one already. Returns
+ *  the NEW runtime, or null. */
+function attachCompositeAt(root, options = {}) {
+    const kind = root.getAttribute(COMPOSITE_ATTRIBUTE);
+    if (isExclusiveKind(kind))
+        return attachExclusiveAt(root, { observe: options.observe });
+    return attachAccordionAt(root, { observe: options.observe, reducedMotion: options.reducedMotion });
+}
+/** The nearer of the item elements `el` sits in — an accordion item / a disclosure, or a tab / a tab panel. */
+function nearestItem(el) {
+    const toggle = closestAccordionItem(el);
+    const exclusive = closestExclusiveItemPart(el);
+    if (!toggle && !exclusive)
+        return null;
+    if (toggle && (!exclusive || exclusive.contains(toggle)))
+        return { el: toggle, exclusive: false };
+    return { el: exclusive, exclusive: true };
+}
+/** Subscribe to the item `el` sits in turning on / off — what the `itemOn` / `itemOff` interaction triggers listen to,
+ *  in both families. Returns the unsubscribe. */
+function onCompositeItemState(el, on, handler) {
+    const item = nearestItem(el);
+    if (!item)
+        return () => undefined;
+    return item.exclusive ? onExclusiveItemState(item.el, on, handler) : onAccordionItemState(item.el, on, handler);
+}
+/** True when the item `el` sits in is on now (an open accordion item, the active tab or its panel). */
+function isCompositeItemOn(el) {
+    const item = nearestItem(el);
+    if (!item)
+        return false;
+    return item.exclusive ? isExclusiveItemOn(item.el) : isAccordionItemOn(item.el);
+}
+/**
+ * Run an item action on the element of an ITEM — an accordion item, a disclosure, or a tab (CC4a: `openItem` turns it
+ * on; a Tabs always shows one, so Close and Toggle leave it) — the `openItem` / `closeItem` / `toggleItem` interaction
+ * actions, on the canvas and on the live site through this one function. Returns whether the item shows on
+ * afterwards, or null when `el` is in no running composite.
+ */
+function runCompositeItemAction(el, action) {
+    const item = nearestItem(el);
+    if (!item)
+        return null;
+    if (item.exclusive) {
+        const runtime = exclusiveRuntimeOf(closestExclusive(item.el));
+        return runtime ? runtime.run(action === CompositeItemAction.Open, runtime.keyOf(item.el)) : null;
+    }
+    const runtime = accordionRuntimeOf(accordionRootOfItem(item.el));
+    return runtime ? runtime.run(action, runtime.keyOf(item.el)) : null;
+}
+
 /**
  * @vectoriox/iox-ui/composite-core — composites built from the builder's own parts (composite-components
  * 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 join with
- * their own phase.
+ * 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.
  * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
  */
 
@@ -2539,5 +3522,5 @@ function rowIndexOf(el) {
  * 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, 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, 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, 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, UNTIL_FOUND, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionRuntimeOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, applyCardLayout, attachAccordionAt, attachAccordions, attachCarouselA11y, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildCarouselRecipe, buildChip, buildCompositeIcon, buildDisclosureRecipe, buildLightboxRecipe, buildSliderPart, canOpenAtClickedItem, cardPartsOf, cardRootOf, cardTitleOf, carouselOf, clearLayerStyles, closeAccordionItem, closestAccordion, closestAccordionItem, compositeItemOf, compositeItems, compositeKindOfRole, compositeRootOf, compositeRowKeys, compositeScopeId, detachAccordion, detectAccordionIcon, detectCardLayout, disclosureOpenByDefault, domSafeKey, findByRole, hasLabelledRegion, hasSliderParts, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isCardLinked, isCardRoot, isCompositeItem, isCompositePanel, isCompositeRoot, isCompositeTrigger, isDisclosurePart, isDisclosureRoot, isLockedPart, isPillNode, isSlider, isSliderPart, itemOpenTriggerIds, lightboxSliderOf, makeCompositePart, migrateSliderControls, moveAccordionItem, needsSliderMigration, nextAccordionState, nextItemKey, onAccordionItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, renameAccordionItem, repeatSourceOf, rowIndexOf, rowItemKey, rowSourceOf, runCompositeItemAction, sameRepeatSource, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, setSliderFlag, shouldScrollToItem, slideIndexForRow, sliderLiveRegion, sliderPart, sliderPartElement, sliderPauseAttributes, sliderPauseGlyph, sliderSlides, sliderWords, splitSliderChildren, structureRefusal, syncSliderParts, 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, 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 };
 //# sourceMappingURL=vectoriox-iox-ui-composite-core.mjs.map