@vectoriox/iox-ui 5.36.0 → 5.38.0

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

@@ -1,5 +1,24 @@
 import { readOwnedTrait, writeOwnedTrait, elementStyleById, switchElementStyle, LinkType, setColorScheme, COLOR_SCHEME_TRAIT } 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
+ *  element style. `key` is stable per recipe node — a consumer that needs deterministic ids builds them
+ *  from it (generation-core: `<root id>-<key>`). */
+/** `elementStyle: NO_ELEMENT_STYLE` asks for a node that wears NO element style (undefined / null = the type's default,
+ *  as both node factories have always read it): a migrated slider's bare chevrons, a lightbox's slide (CC3). */
+const NO_ELEMENT_STYLE = '';
+/** A recipe part: a NEW node (`create`) playing `role` under `label`, with the layout `base` styles its recipe
+ *  gives it — its LOOK is its element style. Shared by every recipe (Accordion, Disclosure). */
+function makeCompositePart(create, spec, role, label, base) {
+    const node = create(spec);
+    if (role)
+        node.role = role;
+    if (label)
+        node.label = label;
+    if (base)
+        writeStyles(node, base);
+    return node;
+}
 const usesTraits = (node) => Array.isArray(node.traits);
 /** A content trait's value — `traits[].default` on a builder node, `props[name]` on a saved one. */
 function readProp(node, name) {
@@ -105,6 +124,101 @@ function removeFromComposite(root, node) {
     return true;
 }
 
+/**
+ * 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.
+ */
+var CompositeKind;
+(function (CompositeKind) {
+    CompositeKind["Accordion"] = "accordion";
+    CompositeKind["Disclosure"] = "disclosure";
+})(CompositeKind || (CompositeKind = {}));
+var AccordionRole;
+(function (AccordionRole) {
+    AccordionRole["Accordion"] = "accordion";
+    AccordionRole["Item"] = "accordion.item";
+    AccordionRole["Trigger"] = "accordion.trigger";
+    AccordionRole["Icon"] = "accordion.icon";
+    AccordionRole["Panel"] = "accordion.panel";
+})(AccordionRole || (AccordionRole = {}));
+/**
+ * DISCLOSURE ("Read more") — one trigger, one panel. The root IS its item (it carries the item key and
+ * `data-iox-on`); the trigger holds two words, the one shown while closed (`more`) and the one shown while open
+ * (`less`), swapped by the Item open state — never by script.
+ */
+var DisclosureRole;
+(function (DisclosureRole) {
+    DisclosureRole["Disclosure"] = "disclosure";
+    DisclosureRole["Trigger"] = "disclosure.trigger";
+    DisclosureRole["More"] = "disclosure.more";
+    DisclosureRole["Less"] = "disclosure.less";
+    DisclosureRole["Icon"] = "disclosure.icon";
+    DisclosureRole["Panel"] = "disclosure.panel";
+})(DisclosureRole || (DisclosureRole = {}));
+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 KINDS = Object.values(CompositeKind);
+const rolesOf = (pick) => new Set(KINDS.map(k => COMPOSITE_KIND_ROLES[k][pick]));
+const ROOT_ROLES = rolesOf('root');
+const ITEM_ROLES = rolesOf('item');
+const TRIGGER_ROLES = rolesOf('trigger');
+const PANEL_ROLES = rolesOf('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;
+}
+/** A root that runs the open/close runtime (an Accordion or a Disclosure). */
+function isCompositeRoot(node) {
+    return !!node?.role && ROOT_ROLES.has(node.role);
+}
+/** An ITEM — an accordion's item, or a disclosure (its own item). */
+function isCompositeItem(node) {
+    return !!node?.role && ITEM_ROLES.has(node.role);
+}
+/** A trigger — rendered as a `<button>` that opens its item, never a link. */
+function isCompositeTrigger(node) {
+    return !!node?.role && TRIGGER_ROLES.has(node.role);
+}
+/** A panel — rendered inside the track + region the one hiding rule collapses. */
+function isCompositePanel(node) {
+    return !!node?.role && PANEL_ROLES.has(node.role);
+}
+function isDisclosureRoot(node) {
+    return node?.role === DisclosureRole.Disclosure;
+}
+/** True for any part of a disclosure (its root included). */
+function isDisclosurePart(node) {
+    return compositeKindOfRole(node?.role) === CompositeKind.Disclosure;
+}
+/** The composite root a node belongs to: the nearest ancestor (or the node itself) that is one. `path` = the
+ *  node's ancestors, root first. */
+function compositeRootOf(node, path) {
+    if (isCompositeRoot(node))
+        return node;
+    for (let i = path.length - 1; i >= 0; i--)
+        if (isCompositeRoot(path[i]))
+            return path[i];
+    return null;
+}
+/** The item a node sits in — the nearest item of either kind (itself when it is one) — or null. An accordion
+ *  root ends the walk (its items are below it). */
+function compositeItemOf(node, path) {
+    if (isCompositeItem(node))
+        return node;
+    for (let i = path.length - 1; i >= 0; i--) {
+        if (isCompositeItem(path[i]))
+            return path[i];
+        if (isCompositeRoot(path[i]))
+            return null;
+    }
+    return null;
+}
+
 /**
  * ACCORDION (CC2 — composite K1; complex-components boards 3, 4 and 9, APPROVED 2026-10-20). Not a
  * component: a recipe of ordinary nodes, each part carrying a role, so every part is selectable on the
@@ -123,14 +237,6 @@ function removeFromComposite(root, node) {
  * (`nextAccordionState`), the ARIA and DOM state one planner (`accordionItemState` and the attribute
  * functions), the keyboard one key map — read by the builder canvas, both engine paths and the composer.
  */
-var AccordionRole;
-(function (AccordionRole) {
-    AccordionRole["Accordion"] = "accordion";
-    AccordionRole["Item"] = "accordion.item";
-    AccordionRole["Trigger"] = "accordion.trigger";
-    AccordionRole["Icon"] = "accordion.icon";
-    AccordionRole["Panel"] = "accordion.panel";
-})(AccordionRole || (AccordionRole = {}));
 /** The behaviour options a composite root stores as ordinary TRAITS (composite plan §3). */
 var CompositeBehaviourTrait;
 (function (CompositeBehaviourTrait) {
@@ -172,7 +278,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$1;
+var Type$3;
 (function (Type) {
     Type["Container"] = "Container";
     Type["LinkedContainer"] = "LinkedContainer";
@@ -180,8 +286,8 @@ var Type$1;
     Type["Text"] = "Text";
     Type["Icon"] = "Icon";
     Type["Repeater"] = "Repeater";
-})(Type$1 || (Type$1 = {}));
-var Style$1;
+})(Type$3 || (Type$3 = {}));
+var Style$3;
 (function (Style) {
     Style["Root"] = "box";
     Style["Item"] = "accordion-item";
@@ -190,14 +296,14 @@ var Style$1;
     Style["Icon"] = "icon";
     Style["Panel"] = "accordion-panel";
     Style["Answer"] = "body";
-})(Style$1 || (Style$1 = {}));
-const ZERO_BOX$1 = '0px 0px 0px 0px';
+})(Style$3 || (Style$3 = {}));
+const ZERO_BOX$2 = '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 = {
+const PART_BASE$1 = {
     // 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' },
@@ -208,22 +314,16 @@ const PART_BASE = {
 };
 /** 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$1, flexGrow: '1', minWidth: '0px' };
-const ANSWER_BASE = { margin: ZERO_BOX$1, padding: ZERO_BOX$1, minHeight: 'auto' };
-function make$1(create, key, type, role, style, props = {}, label) {
-    const node = create({ key, type, props, elementStyle: style });
-    if (role)
-        node.role = role;
-    if (label)
-        node.label = label;
-    if (role && PART_BASE[role])
-        writeStyles(node, PART_BASE[role]);
-    return node;
-}
-/** The item's icon; its Item-open state (the turn) is driven by ITS item (`stateTriggers`). */
-function buildIcon(create, key, icon, itemId) {
+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);
+}
+/** 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 = make$1(create, key, Type$1.Icon, AccordionRole.Icon, Style$1.Icon, { iconClass: glyph.iconClass }, '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]);
     node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { rotate: glyph.turn } };
     if (itemId)
         node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: itemId };
@@ -231,14 +331,14 @@ function buildIcon(create, key, icon, itemId) {
 }
 /** 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$1(create, `${itemKey}`, Type$1.Container, AccordionRole.Item, Style$1.Item, {}, 'Item');
+    const item = make$2(create, `${itemKey}`, Type$3.Container, AccordionRole.Item, Style$3.Item, {}, 'Item');
     item.itemKey = itemKey;
-    const trigger = make$1(create, `${itemKey}-trigger`, Type$1.LinkedContainer, AccordionRole.Trigger, Style$1.Trigger, {}, 'Header');
-    const question = make$1(create, `${itemKey}-question`, Type$1.Heading, null, Style$1.Question, { content: words.question, level: DEFAULT_LEVEL }, 'Heading');
+    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');
     writeStyles(question, QUESTION_BASE);
-    trigger.children = [question, ...(icon === AccordionIcon.None ? [] : [buildIcon(create, `${itemKey}-icon`, icon, item.id)])];
-    const panel = make$1(create, `${itemKey}-panel`, Type$1.Container, AccordionRole.Panel, Style$1.Panel, {}, 'Panel');
-    const answer = make$1(create, `${itemKey}-answer`, Type$1.Text, null, Style$1.Answer, { content: words.answer, tag: 'p' }, 'Text');
+    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');
     writeStyles(answer, ANSWER_BASE);
     panel.children = [answer];
     item.children = [trigger, panel];
@@ -246,7 +346,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$1(create, 'accordion', Type$1.Container, AccordionRole.Accordion, Style$1.Root, {}, 'Accordion');
+    const root = make$2(create, 'accordion', Type$3.Container, AccordionRole.Accordion, Style$3.Root, {}, 'Accordion');
     writeProp(root, CompositeBehaviourTrait.Multiple, options.multiple ?? false);
     writeProp(root, CompositeBehaviourTrait.DefaultOn, options.defaultOn ?? AccordionDefaultOn.First);
     const words = options.items ?? ACCORDION_WORDS;
@@ -285,7 +385,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$1.Repeater;
+    return !!root && root.type === Type$3.Repeater;
 }
 /** The root's items in order — every item (Manual), or the one template item (From content). */
 function accordionItems(root) {
@@ -307,29 +407,43 @@ function setAccordionBehaviour(root, patch) {
         ok = writeProp(root, CompositeBehaviourTrait.DefaultOn, patch.defaultOn) && ok;
     return ok;
 }
-/** The header of an item. */
+/** 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];
+}
+/** The header of an item (either kind). */
 function accordionTriggerOf(item) {
-    return findByRole(item, AccordionRole.Trigger);
+    return findByRole(item, kindRolesOf(item).trigger);
 }
-/** The panel of an item. */
+/** The panel of an item (either kind). */
 function accordionPanelOf(item) {
-    return findByRole(item, AccordionRole.Panel);
+    return findByRole(item, kindRolesOf(item).panel);
 }
-/** The question: the first Heading inside the header. */
+/** A root's items — an accordion's (`accordionItems`), or a disclosure, which is its own one item. */
+function compositeItems(root) {
+    return compositeKindOfRole(root.role) === CompositeKind.Disclosure ? [root] : accordionItems(root);
+}
+/** The question: the first Heading inside the header — a disclosure's toggle holds no heading, so its first word
+ *  (the Text shown while closed, "Read more"). */
 function accordionQuestionOf(item) {
     const trigger = accordionTriggerOf(item);
     let hit;
+    let text;
     if (trigger)
-        walkComposite(trigger, n => { if (!hit && n.type === Type$1.Heading)
-            hit = n; });
-    return hit;
+        walkComposite(trigger, n => {
+            if (!hit && n.type === Type$3.Heading)
+                hit = n;
+            if (!text && n.type === Type$3.Text)
+                text = n;
+        });
+    return hit ?? text;
 }
 /** The answer: the first Text inside the panel. */
 function accordionAnswerOf(item) {
     const panel = accordionPanelOf(item);
     let hit;
     if (panel)
-        walkComposite(panel, n => { if (!hit && n.type === Type$1.Text)
+        walkComposite(panel, n => { if (!hit && n.type === Type$3.Text)
             hit = n; });
     return hit;
 }
@@ -350,7 +464,7 @@ function accordionHeadingLevel(trigger) {
     const visit = (n) => {
         if (level !== undefined)
             return;
-        if (n.type === Type$1.Heading) {
+        if (n.type === Type$3.Heading) {
             level = readProp(n, 'level');
             return;
         }
@@ -406,10 +520,10 @@ function accordionRemovalRefusal(root, item) {
         return null;
     return accordionItems(root).length <= 1 ? AccordionEditRefusal.LastItem : null;
 }
-/** The icon the accordion's items wear now (the first item's; None when it has no icon). */
+/** The icon the composite's items wear now (the first item's; None when it has no icon). Either kind. */
 function detectAccordionIcon(root) {
-    const first = accordionItems(root)[0];
-    const icon = first ? findByRole(first, AccordionRole.Icon) : undefined;
+    const first = compositeItems(root)[0];
+    const icon = first ? findByRole(first, kindRolesOf(root).icon) : undefined;
     if (!icon)
         return first ? AccordionIcon.None : AccordionIcon.Chevron;
     const cls = String(readProp(icon, 'iconClass') ?? '');
@@ -422,11 +536,12 @@ function detectAccordionIcon(root) {
  */
 function setAccordionIcon(root, icon, create) {
     let changed = 0;
-    for (const item of accordionItems(root)) {
+    const iconRole = kindRolesOf(root).icon;
+    for (const item of compositeItems(root)) {
         const trigger = accordionTriggerOf(item);
         if (!trigger)
             continue;
-        const existing = findByRole(trigger, AccordionRole.Icon);
+        const existing = findByRole(trigger, iconRole);
         if (icon === AccordionIcon.None) {
             if (existing && removeFromComposite(trigger, existing))
                 changed++;
@@ -439,7 +554,7 @@ function setAccordionIcon(root, icon, create) {
             changed++;
         }
         else if (create) {
-            trigger.children = [...(trigger.children ?? []), buildIcon(create, `${item.itemKey ?? 'item'}-icon`, icon, item.id)];
+            trigger.children = [...(trigger.children ?? []), buildCompositeIcon(create, `${item.itemKey ?? 'item'}-icon`, icon, item.id, iconRole)];
             changed++;
         }
     }
@@ -475,10 +590,16 @@ function nextAccordionState(open, key, behaviour) {
     }
     return behaviour.multiple ? new Set([...open, key]) : new Set([key]);
 }
-/** The open keys after OPENING `key` (find-in-page, selecting into a closed panel). */
+/** The open keys after OPENING `key` (find-in-page, selecting into a closed panel, the `openItem` action). */
 function openAccordionItem(open, key, behaviour) {
     return open.has(key) ? new Set(open) : nextAccordionState(open, key, behaviour);
 }
+/** The open keys after CLOSING `key` (the `closeItem` action). */
+function closeAccordionItem(open, key) {
+    const next = new Set(open);
+    next.delete(key);
+    return next;
+}
 var AccordionKeyAction;
 (function (AccordionKeyAction) {
     AccordionKeyAction["Next"] = "next";
@@ -520,17 +641,30 @@ function rowItemKey(row, index) {
     const id = r && typeof r === 'object' ? (r._id ?? r.id) : undefined;
     return id !== undefined && id !== null && id !== '' ? domSafeKey(id) : `row-${index}`;
 }
-/** The ARIA pairing ids of an item: unique per accordion (its root's node id) and per item (its key). */
-function accordionDomIds(rootId, itemKey) {
-    const base = `iox-acc-${domSafeKey(rootId)}-${domSafeKey(itemKey)}`;
+const DOM_ID_PREFIX = {
+    [CompositeKind.Accordion]: 'iox-acc',
+    [CompositeKind.Disclosure]: 'iox-dis',
+};
+/** 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) {
+    const base = `${DOM_ID_PREFIX[kind]}-${domSafeKey(rootId)}-${domSafeKey(itemKey)}`;
     return { trigger: `${base}-h`, panel: `${base}-p` };
 }
-function accordionScope(rootId, behaviour, keys) {
-    return { rootId, behaviour, keys, open: initialAccordionOpen(keys, behaviour.defaultOn) };
+/**
+ * The id a rendered composite's ARIA ids are built from: its node id, and — when it sits inside repeated rows —
+ * every enclosing row's identity, outermost first (vectoriox/iox-ui#20: an accordion repeated per card used to
+ * pair every row's header with the FIRST row's panel). The engine folds each row's `rowItemKey`; the builder
+ * canvas its preview row's index. Unrepeated, it is the node id unchanged.
+ */
+function compositeScopeId(rootId, rowKeys = []) {
+    return rowKeys.length ? [rootId, ...rowKeys.map(domSafeKey)].join('-') : rootId;
+}
+function accordionScope(rootId, behaviour, keys, kind = CompositeKind.Accordion) {
+    return { kind, rootId, behaviour, keys, open: initialAccordionOpen(keys, behaviour.defaultOn) };
 }
 function accordionItemState(scope, index) {
     const key = scope.keys[index] ?? `item-${index}`;
-    return { key, index, on: scope.open.has(key), ids: accordionDomIds(scope.rootId, key) };
+    return { kind: scope.kind, key, index, on: scope.open.has(key), ids: accordionDomIds(scope.rootId, key, scope.kind) };
 }
 /** `data-iox-on` — the ONE attribute every "on" style keys on (Open, Item open). */
 const ON_ATTRIBUTE = 'data-iox-on';
@@ -538,6 +672,9 @@ const ITEM_KEY_ATTRIBUTE = 'data-iox-item-key';
 const COMPOSITE_ATTRIBUTE = 'data-iox-composite';
 const MULTIPLE_ATTRIBUTE = 'data-iox-multiple';
 const DEFAULT_ON_ATTRIBUTE = 'data-iox-default-on';
+/** The scope id the ARIA ids are built from (`compositeScopeId`), written by the engine so the runtime re-stamps
+ *  exactly the ids the server rendered. */
+const SCOPE_ATTRIBUTE = 'data-iox-scope';
 /** The value a closed panel's region carries: find-in-page can still reveal it (D9, board 4). */
 const UNTIL_FOUND = 'until-found';
 /** The structural classes the renderers write around an accordion's parts (no node owns them). */
@@ -548,11 +685,12 @@ var AccordionClass;
     AccordionClass["Track"] = "iox-accordion-track";
     AccordionClass["Region"] = "iox-accordion-region";
 })(AccordionClass || (AccordionClass = {}));
-function accordionRootAttributes(behaviour) {
+function accordionRootAttributes(behaviour, kind = CompositeKind.Accordion, scopeId) {
     return {
-        [COMPOSITE_ATTRIBUTE]: AccordionRole.Accordion,
+        [COMPOSITE_ATTRIBUTE]: kind,
         [DEFAULT_ON_ATTRIBUTE]: behaviour.defaultOn,
-        ...(behaviour.multiple ? { [MULTIPLE_ATTRIBUTE]: '' } : {}),
+        ...(behaviour.multiple && kind === CompositeKind.Accordion ? { [MULTIPLE_ATTRIBUTE]: '' } : {}),
+        ...(scopeId ? { [SCOPE_ATTRIBUTE]: scopeId } : {}),
     };
 }
 function accordionItemAttributes(state) {
@@ -571,15 +709,21 @@ function accordionTriggerAttributes(state) {
 function accordionTrackAttributes(state) {
     return state.on ? { [ON_ATTRIBUTE]: '' } : {};
 }
-/** The region the panel sits in: `hidden="until-found"` while closed, so its words stay in the page. */
+/** The region the panel sits in: `hidden="until-found"` while closed, so its words stay in the page. An accordion's
+ *  is a labelled `region` (APG accordion); a disclosure's is a plain block (APG disclosure: the button names it). */
 function accordionRegionAttributes(state) {
+    const labelled = hasLabelledRegion(state.kind);
     return {
-        role: 'region',
+        ...(labelled ? { role: 'region' } : {}),
         id: state.ids.panel,
-        'aria-labelledby': state.ids.trigger,
+        ...(labelled ? { 'aria-labelledby': state.ids.trigger } : {}),
         ...(state.on ? {} : { hidden: UNTIL_FOUND }),
     };
 }
+/** True when a region of this kind is a labelled `role=region`. */
+function hasLabelledRegion(kind) {
+    return kind === CompositeKind.Accordion;
+}
 function accordionPanelAttributes(state) {
     return state.on ? { [ON_ATTRIBUTE]: '' } : {};
 }
@@ -654,13 +798,17 @@ function accordionPartStyle(node, name) {
  * paths render the same markup). It reads the markup the renderers write (iox-design.css + accordion.ts's
  * attribute planners), so the server's first paint and every later state agree:
  *
- *   [root]  data-iox-composite="accordion"  data-iox-default-on  [data-iox-multiple]   (the node's own element —
- *           its role class may sit on a wrapper host, as the engine's component-path Repeater draws it)
+ *   [root]  data-iox-composite="accordion"  data-iox-default-on  [data-iox-multiple]  [data-iox-scope]  (the node's
+ *           own element — its role class may sit on a wrapper host, as the engine's component-path Repeater draws it)
  *     .iox-role-accordion-item  data-iox-item-key  [data-iox-on]
  *       hN.iox-accordion-heading > button.iox-accordion-button  id  aria-expanded  aria-controls
  *       .iox-accordion-track [data-iox-on] > .iox-accordion-region  role=region  [hidden=until-found]
  *         .iox-role-accordion-panel
  *
+ * The DISCLOSURE (CC2.1) runs on this same runtime: `data-iox-composite="disclosure"` on a root that IS its one
+ * item (it carries the key and `data-iox-on`), its button straight inside it (no heading), its panel in the same
+ * track + region (a plain block — no `role=region`), and no arrow keys (one button).
+ *
  * It owns: a click on a header toggles its item; ↓ ↑ Home End move between the headers of THIS accordion
  * (a nested one keeps its own); find-in-page (`beforematch`) opens the item that holds the match; a closed
  * panel gets `hidden="until-found"` after its track has collapsed (at once under reduced motion). Every
@@ -670,23 +818,31 @@ function accordionPartStyle(node, name) {
  */
 const ITEM_ON_EVENT = 'iox-item-on';
 const ITEM_OFF_EVENT = 'iox-item-off';
-const ROOT_SELECTOR = `[${COMPOSITE_ATTRIBUTE}="${AccordionRole.Accordion}"]`;
-const ITEM_SELECTOR = '.iox-role-accordion-item';
-const PANEL_SELECTOR = '.iox-role-accordion-panel';
+const KIND_ROOT = (kind) => `[${COMPOSITE_ATTRIBUTE}="${kind}"]`;
+const ROOT_SELECTOR = Object.values(CompositeKind).map(KIND_ROOT).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 BUTTON_SELECTOR = `.${AccordionClass.Button}`;
 const TRACK_SELECTOR = `.${AccordionClass.Track}`;
 const REGION_SELECTOR = `.${AccordionClass.Region}`;
 /** How long a closing track may take before its region is hidden (dur-base is 200–320ms in every pack). */
 const MAX_CLOSE_MS = 600;
 const REDUCED_MOTION = '(prefers-reduced-motion: reduce)';
-/** The accordion an element belongs to (the element itself when it is a root). */
+/** 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;
 }
-/** The item an element sits in (itself when it is one). */
+/** 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;
+/** 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);
+}
 /** 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. */
 function onAccordionItemState(el, on, handler) {
@@ -745,6 +901,9 @@ class AccordionRuntime {
             this.toggle(this.keyOf(item));
         };
         this.onKeydown = (event) => {
+            // A disclosure has one button: Enter / Space are the button's own, and there is nowhere to move.
+            if (this.kind !== CompositeKind.Accordion)
+                return;
             const e = event;
             const action = accordionKeyAction(e.key);
             const button = e.target?.closest?.(BUTTON_SELECTOR);
@@ -761,12 +920,15 @@ class AccordionRuntime {
         this.onBeforeMatch = (event) => {
             const region = event.target?.closest?.(REGION_SELECTOR);
             const item = closestAccordionItem(region);
-            if (!item || closestAccordion(item.parentElement) !== this.root)
+            const items = this.items();
+            if (!item || !items.includes(item))
                 return;
-            this.open(this.keyOf(item));
+            this.open(this.keyOf(item, items));
         };
+        this.kind = options.kind ?? kindOf(root);
         this.behaviourValue = options.behaviour ?? behaviourOf(root);
-        root.setAttribute(COMPOSITE_ATTRIBUTE, AccordionRole.Accordion);
+        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.
         // (The builder passes the behaviour and starts from the saved default; on the live site the server
         // stamped every item's key and state, and that is the truth.)
@@ -805,9 +967,11 @@ class AccordionRuntime {
         else
             this.stamp();
     }
-    /** THIS accordion's items, in document order (a nested accordion's items are its own). */
+    /** THIS composite's items, in document order (a nested composite's items are its own); a disclosure's is itself. */
     items() {
-        return Array.from(this.root.querySelectorAll(ITEM_SELECTOR)).filter(i => closestAccordion(i.parentElement) === this.root);
+        if (this.kind === CompositeKind.Disclosure)
+            return [this.root];
+        return Array.from(this.root.querySelectorAll(ACCORDION_ITEM_SELECTOR)).filter(i => closestAccordion(i.parentElement) === this.root);
     }
     /** The open keys the live state holds (before anything forced). */
     get liveKeys() {
@@ -828,6 +992,20 @@ class AccordionRuntime {
         this.live = openAccordionItem(this.live, key, this.behaviourValue);
         this.stamp();
     }
+    close(key) {
+        this.live = closeAccordionItem(this.live, key);
+        this.stamp();
+    }
+    /** Run an item action (`openItem` / `closeItem` / `toggleItem`, T14) on `key`. True when it shows open after. */
+    run(action, key) {
+        if (action === CompositeItemAction.Open)
+            this.open(key);
+        else if (action === CompositeItemAction.Close)
+            this.close(key);
+        else
+            this.toggle(key);
+        return this.shown.has(key);
+    }
     /** Back to the saved default ("Showing on canvas ▸ As saved"). */
     resetLive() {
         const items = this.items();
@@ -839,6 +1017,8 @@ class AccordionRuntime {
         this.stamp();
     }
     destroy() {
+        if (RUNTIMES.get(this.root) === this)
+            RUNTIMES.delete(this.root);
         this.root.removeEventListener('click', this.onClick, true);
         this.root.removeEventListener('keydown', this.onKeydown);
         this.root.removeEventListener('beforematch', this.onBeforeMatch, true);
@@ -878,7 +1058,8 @@ class AccordionRuntime {
             first = true;
         }
         const forced = this.options.forced?.() ?? new Set();
-        const rootId = this.options.rootId ?? nodeIdOf(this.root);
+        const own = this.options.rootId;
+        const rootId = (typeof own === 'function' ? own() : own) ?? this.root.getAttribute(SCOPE_ATTRIBUTE) ?? nodeIdOf(this.root);
         const next = new Set();
         items.forEach((item, index) => {
             const key = this.keyOf(item, items);
@@ -901,7 +1082,7 @@ class AccordionRuntime {
         }
     }
     stampItem(item, key, index, on, rootId, first) {
-        const ids = accordionDomIds(rootId, key);
+        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);
@@ -916,9 +1097,10 @@ class AccordionRuntime {
         setAttr(button, ON_ATTRIBUTE, on ? '' : null);
         setAttr(track, ON_ATTRIBUTE, on ? '' : null);
         setAttr(panel, ON_ATTRIBUTE, on ? '' : null);
-        setAttr(region, 'role', 'region');
+        const labelled = hasLabelledRegion(this.kind);
+        setAttr(region, 'role', labelled ? 'region' : null);
         setAttr(region, 'id', ids.panel);
-        setAttr(region, 'aria-labelledby', ids.trigger);
+        setAttr(region, 'aria-labelledby', labelled ? ids.trigger : null);
         if (!region)
             return;
         const pending = this.closing.get(key);
@@ -969,14 +1151,12 @@ function dispatch(el, type) {
     if (Ctor)
         el.dispatchEvent(new Ctor(type, { bubbles: false }));
 }
-/** Attach the runtime to one rendered accordion root, unless it already runs one. Returns the NEW runtime, or
+/** Attach the runtime to one rendered composite root, unless it already runs one. Returns the NEW runtime, or
  *  null when the root already had one (so a caller destroys only what it created). */
 function attachAccordionAt(root, options = {}) {
-    if (ATTACHED.has(root))
+    if (RUNTIMES.has(root))
         return null;
-    const runtime = new AccordionRuntime(root, options);
-    ATTACHED.set(root, runtime);
-    return runtime;
+    return new AccordionRuntime(root, options);
 }
 /** Attach the runtime to every accordion under `container` that has none yet. Returns the new runtimes. */
 function attachAccordions(container, options = {}) {
@@ -991,9 +1171,134 @@ function attachAccordions(container, options = {}) {
 /** Detach a runtime `attachAccordions` created. */
 function detachAccordion(runtime) {
     runtime.destroy();
-    ATTACHED.delete(runtime.root);
 }
-const ATTACHED = new WeakMap();
+/** Every live runtime by its root — the canvas's and the site's alike (a runtime registers itself and leaves on
+ *  destroy), so an item action finds the runtime of whatever item it targets. */
+const RUNTIMES = new WeakMap();
+const ROW_INDEX_ATTRIBUTE$1 = 'data-iox-row-idx';
+/** The repeated rows an element sits in, outermost first — each row's index as its row wrappers stamp it
+ *  (`data-iox-row-idx`: the builder's Repeater rows, the engine's component path). The builder folds them into a
+ *  composite's scope id (`compositeScopeId`, vectoriox/iox-ui#20); the element itself is not counted. */
+function compositeRowKeys(el) {
+    const keys = [];
+    for (let at = el?.parentElement?.closest?.(`[${ROW_INDEX_ATTRIBUTE$1}]`); at; at = at.parentElement?.closest(`[${ROW_INDEX_ATTRIBUTE$1}]`)) {
+        keys.unshift(at.getAttribute(ROW_INDEX_ATTRIBUTE$1) ?? '');
+    }
+    return keys;
+}
+/** The runtime running a composite root, or null. */
+function accordionRuntimeOf(root) {
+    return (root && RUNTIMES.get(root)) || null;
+}
+// ── T14: open / close / toggle an item from anywhere ─────────────────────────────────────────────
+/** What an item action does to its target item (actions-core `openItem` / `closeItem` / `toggleItem`). */
+var CompositeItemAction;
+(function (CompositeItemAction) {
+    CompositeItemAction["Open"] = "open";
+    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
+ *  and scrolls to it") — never when its head is already on screen, so a button beside it does not jolt the page. */
+function shouldScrollToItem(top, viewportHeight) {
+    return top < 0 || top + VISIBLE_HEAD_PX > viewportHeight;
+}
+
+/** The words a fresh disclosure starts with — generic, the author's to replace. */
+const DISCLOSURE_WORDS = {
+    more: 'Read more',
+    less: 'Read less',
+    body: 'Write the rest of the story here. It stays out of the way until someone asks for it.',
+};
+/** A disclosure's one item key — its root IS its item. */
+const DISCLOSURE_ITEM_KEY = 'k1';
+var Type$2;
+(function (Type) {
+    Type["Container"] = "Container";
+    Type["LinkedContainer"] = "LinkedContainer";
+    Type["Text"] = "Text";
+})(Type$2 || (Type$2 = {}));
+var Style$2;
+(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';
+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,
+ *  and the Text's own default would come back in its place). */
+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 = {
+    [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.
+    [DisclosureRole.Trigger]: {
+        display: 'flex', alignItems: 'center', gap: '8px', width: 'fit-content', minHeight: 'auto', height: 'auto', textAlign: 'start', cursor: 'pointer',
+        fontFamily: INHERIT, fontSize: INHERIT, fontWeight: INHERIT, lineHeight: INHERIT,
+    },
+    // 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.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);
+}
+/** 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');
+    node.stateStyles = { ...(node.stateStyles ?? {}), [ITEM_OPEN_STATE]: { display: role === DisclosureRole.More ? HIDDEN : SHOWN } };
+    if (rootId)
+        node.stateTriggers = { ...(node.stateTriggers ?? {}), [ITEM_OPEN_STATE]: rootId };
+    return node;
+}
+/** 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');
+    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');
+    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);
+    panel.children = [body];
+    root.children = [trigger, panel];
+    return root;
+}
+/** Behaviour ▸ Open by default (a disclosure: on or off). */
+function disclosureOpenByDefault(root) {
+    return accordionBehaviour(root).defaultOn !== AccordionDefaultOn.None;
+}
 
 /**
  * BADGE + CHIP (composite T25; complex-components board 8). A Badge is a Container wearing
@@ -1147,7 +1452,7 @@ const CARD_WORDS = {
 };
 /** The breakpoint whose layer stacks an "Image side" card (Breakpoint.Mobile, ≤767px). */
 const CARD_STACK_BREAKPOINT = 'mobile';
-var Type;
+var Type$1;
 (function (Type) {
     Type["Container"] = "Container";
     Type["Image"] = "Image";
@@ -1155,8 +1460,8 @@ var Type;
     Type["Text"] = "Text";
     Type["Icon"] = "Icon";
     Type["ButtonBlock"] = "ButtonBlock";
-})(Type || (Type = {}));
-var Style;
+})(Type$1 || (Type$1 = {}));
+var Style$1;
 (function (Style) {
     Style["Card"] = "card";
     Style["Box"] = "box";
@@ -1169,7 +1474,7 @@ var Style;
     Style["Ghost"] = "button-ghost";
     Style["Icon"] = "icon";
     Style["Scrim"] = "media-scrim";
-})(Style || (Style = {}));
+})(Style$1 || (Style$1 = {}));
 var Scheme;
 (function (Scheme) {
     Scheme["Default"] = "default";
@@ -1179,9 +1484,9 @@ 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.Card, 'padding');
-const IMAGE_RADIUS = styleValue(Style.Media, 'borderRadius');
-const TITLE_SIZE = styleValue(Style.Title, 'fontSize');
+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 LEAD_SIZE = 'var(--iox-size-lead)';
 const ZERO_BOX = '0px 0px 0px 0px';
 /** What every card part holds in every layout — the recipe's box. */
@@ -1198,7 +1503,7 @@ const CARD_BASE = {
     // 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 = { display: 'block', width: '100%', maxWidth: '100%' };
+const IMAGE_BASE$1 = { 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 INLINE_ICON = { fontSize: '1em' };
@@ -1209,7 +1514,7 @@ const LAYOUTS = {
         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.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$1.Box, contentScheme: Scheme.Default,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: true,
     },
@@ -1217,7 +1522,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.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$1.Box, contentScheme: Scheme.Default,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: true,
         stack: {
@@ -1231,7 +1536,7 @@ const LAYOUTS = {
         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.Scrim, contentScheme: Scheme.Inverse,
+        contentStyle: Style$1.Scrim, contentScheme: Scheme.Inverse,
         title: { fontSize: TITLE_SIZE },
         badgeOnMedia: false,
     },
@@ -1239,7 +1544,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.Box, contentScheme: Scheme.Default,
+        content: GROWING_CONTENT, contentStyle: Style$1.Box, contentScheme: Scheme.Default,
         title: { fontSize: LEAD_SIZE },
         badgeOnMedia: false,
         partsOff: [CardPart.Text, CardPart.Actions],
@@ -1260,16 +1565,16 @@ function make(create, key, type, role, elementStyle, props = {}, label) {
     return node;
 }
 function buttonLabel(create, key, words) {
-    const label = make(create, key, Type.Text, null, Style.Label, { content: words, tag: 'span' });
+    const label = make(create, key, Type$1.Text, null, Style$1.Label, { content: words, tag: 'span' });
     writeStyles(label, LABEL_BASE);
     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.Container, CardRole.Media, Style.Box, {}, 'Media');
-        const image = make(create, 'image', Type.Image, null, Style.Media, { src: '', alt: '' });
-        writeStyles(image, IMAGE_BASE);
+        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);
         media.children = [image];
         return media;
     },
@@ -1279,14 +1584,14 @@ const PART_BUILDERS = {
         badge.label = 'Badge';
         return badge;
     },
-    [CardPart.Eyebrow]: (create, words) => make(create, 'eyebrow', Type.Text, CardRole.Eyebrow, Style.Eyebrow, { content: words.eyebrow, tag: 'p' }, 'Eyebrow'),
-    [CardPart.Text]: (create, words) => make(create, 'text', Type.Text, CardRole.Text, Style.Body, { content: words.text, tag: 'p' }, 'Text'),
+    [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.Actions]: (create, words) => {
-        const actions = make(create, 'actions', Type.Container, CardRole.Actions, Style.Box, {}, 'Buttons');
-        const primary = make(create, 'primary', Type.ButtonBlock, null, Style.Primary);
+        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);
         primary.children = [buttonLabel(create, 'primary-label', words.primary)];
-        const ghost = make(create, 'secondary', Type.ButtonBlock, null, Style.Ghost);
-        const icon = make(create, 'secondary-icon', Type.Icon, null, Style.Icon, { iconClass: SAVE_ICON });
+        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 });
         writeStyles(icon, INLINE_ICON);
         ghost.children = [icon, buttonLabel(create, 'secondary-label', words.secondary)];
         actions.children = [primary, ghost];
@@ -1294,15 +1599,15 @@ const PART_BUILDERS = {
     },
 };
 function buildTitle(create, words) {
-    return make(create, 'title', Type.Heading, CardRole.Title, Style.Title, { content: words.title, level: 'h3', [LINK_TYPE]: LinkType.None }, 'Title');
+    return make(create, 'title', Type$1.Heading, CardRole.Title, Style$1.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.Container, CardRole.Card, Style.Card, {}, 'Card');
-    const content = make(create, 'content', Type.Container, CardRole.Content, Style.Box, {}, 'Content');
+    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');
     content.children = [
         ...(on(CardPart.Eyebrow) ? [PART_BUILDERS[CardPart.Eyebrow](create, words, tone)] : []),
         buildTitle(create, words),
@@ -1333,7 +1638,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.Image);
+const imageOf = (media) => media?.children?.find(c => c.type === Type$1.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
@@ -1365,7 +1670,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, ...spec.image });
+                writeStyles(image, { ...IMAGE_BASE$1, ...spec.image });
                 setStack(image, spec.stack?.image, STACK_KEYS.image);
             }
             return;
@@ -1537,6 +1842,317 @@ function setCardLinked(card, on) {
     return writeProp(title, LINK_TYPE, next);
 }
 
+/**
+ * THE ACCESSIBLE CAROUSEL (CC3 — complex-components plan §7c, board 6; board 9 Q13). The Slider's controls are no
+ * longer drawn by Swiper: Previous, Next, Pause and Pagination are REAL nodes with roles — selectable on the canvas,
+ * in the layer tree and the breadcrumb, and styled on their own (R2) — handed to Swiper as its navigation and
+ * pagination elements.
+ *
+ *   SliderContainer  (.swiper)
+ *   ├─ ButtonBlock `button-secondary`   role slider.pause       FIRST focus stop; present while Autoplay is on, locked
+ *   ├─ ButtonBlock `button-secondary`   role slider.prev        › Icon caret (points the reading way in RTL)
+ *   ├─ ButtonBlock `button-secondary`   role slider.next        › Icon caret
+ *   ├─ (the slides — `.swiper-wrapper` › SliderSlide …)
+ *   └─ Container                        role slider.pagination  Swiper draws the dots (or "3 / 6") inside it
+ *
+ * The parts render INSIDE the `.swiper` element, never inside `.swiper-wrapper` (slider.md: a `.swiper-slide` must be
+ * the wrapper's direct child): the parts that come before the first slide in the tree render before the wrapper, the
+ * rest after it. By default they sit over the slides like Swiper's own controls (the shared CSS, iox-design.css, at
+ * zero specificity — a part's own styles win), so a saved slider migrated from Swiper-drawn controls keeps its look.
+ *
+ * The Bindings switches stay the source of truth: Navigation arrows ⇔ Previous + Next, Pagination ⇔ Pagination,
+ * Autoplay ⇔ Pause (WCAG 2.2.2 — "added while Autoplay is on, cannot be removed"). `syncSliderParts` is the one edit.
+ */
+var SliderRole;
+(function (SliderRole) {
+    SliderRole["Pause"] = "slider.pause";
+    SliderRole["Prev"] = "slider.prev";
+    SliderRole["Next"] = "slider.next";
+    SliderRole["Pagination"] = "slider.pagination";
+})(SliderRole || (SliderRole = {}));
+/** Parts in the order they are stamped: the pause control first (APG: the first focus stop), the dots last. */
+const SLIDER_PART_ROLES = [SliderRole.Pause, SliderRole.Prev, SliderRole.Next, SliderRole.Pagination];
+const SLIDER_TYPE = 'SliderContainer';
+const SLIDE_TYPE = 'SliderSlide';
+/** The Bindings switches that own the parts. */
+var SliderFlag;
+(function (SliderFlag) {
+    SliderFlag["Navigation"] = "enableNavigation";
+    SliderFlag["Pagination"] = "enablePagination";
+    SliderFlag["Autoplay"] = "enableAutoplay";
+})(SliderFlag || (SliderFlag = {}));
+const FLAG_PARTS = [
+    [SliderFlag.Autoplay, [SliderRole.Pause]],
+    [SliderFlag.Navigation, [SliderRole.Prev, SliderRole.Next]],
+    [SliderFlag.Pagination, [SliderRole.Pagination]],
+];
+/** The trait that names the carousel (Slider ▸ Accessibility ▸ Carousel name) — the A11y trait every named part uses. */
+const SLIDER_NAME_TRAIT = 'ariaLabel';
+function isSliderPart(node) {
+    return !!node?.role && SLIDER_PART_ROLES.includes(node.role);
+}
+function isSlider(node) {
+    return node?.type === SLIDER_TYPE;
+}
+/** The slider's own part playing `role` (a direct child), or undefined. */
+function sliderPart(slider, role) {
+    return (slider.children ?? []).find(c => c?.role === role);
+}
+/** True when the slider's controls are parts (it was created or migrated in CC3) — Swiper then draws none of its own. */
+function hasSliderParts(slider) {
+    return (slider.children ?? []).some(isSliderPart);
+}
+/** A slider's children split as they render: parts before the first slide, the slides (into `.swiper-wrapper`), and
+ *  the parts after it. */
+function splitSliderChildren(children) {
+    const lead = [];
+    const slides = [];
+    const trail = [];
+    for (const child of children ?? []) {
+        if (!isSliderPart(child))
+            slides.push(child);
+        else
+            (slides.length ? trail : lead).push(child);
+    }
+    return { lead, slides, trail };
+}
+/** The slides only (the template slide of a bound slider is `sliderSlides(children)[0]`). */
+function sliderSlides(children) {
+    return (children ?? []).filter(c => !isSliderPart(c));
+}
+// ── the parts' recipe ───────────────────────────────────────────────────────────────────────────────
+var Type;
+(function (Type) {
+    Type["ButtonBlock"] = "ButtonBlock";
+    Type["Icon"] = "Icon";
+    Type["Container"] = "Container";
+})(Type || (Type = {}));
+var Style;
+(function (Style) {
+    Style["Control"] = "button-secondary";
+    Style["Icon"] = "icon";
+})(Style || (Style = {}));
+/** Each part's glyph (Phosphor) and its default accessible name. */
+const SLIDER_PART_GLYPH = {
+    [SliderRole.Pause]: 'ph ph-pause',
+    [SliderRole.Prev]: 'ph ph-caret-left',
+    [SliderRole.Next]: 'ph ph-caret-right',
+};
+const SLIDER_PLAY_GLYPH = 'ph-fill ph-play';
+const PART_LABEL = {
+    [SliderRole.Pause]: 'Pause',
+    [SliderRole.Prev]: 'Previous',
+    [SliderRole.Next]: 'Next',
+    [SliderRole.Pagination]: 'Pagination',
+};
+const ZERO$1 = '0px 0px 0px 0px';
+/** A round 44px control (board 6 `.st-ctl`), over the slides (z above `.swiper-wrapper`). The PLACE (which edge) is the
+ *  shared CSS's, in logical insets, so a carousel reads the same way in RTL. */
+const CONTROL_BASE = {
+    position: 'absolute', zIndex: '10', display: 'flex', alignItems: 'center', justifyContent: 'center',
+    width: '44px', height: '44px', minWidth: '44px', padding: ZERO$1, margin: ZERO$1, borderRadius: '999px',
+};
+const ICON_BASE = { fontSize: '20px', color: 'inherit' };
+/** The arrows' vertical middle over the slides: half the 44px control above the centre line. */
+const ARROW_TOP = 'calc(50% - 22px)';
+const PAGINATION_BASE = {
+    position: 'absolute', zIndex: '10', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
+    width: 'auto', minHeight: 'auto', height: 'auto', padding: ZERO$1, margin: ZERO$1, color: 'var(--iox-accent)',
+};
+const SWIPER_THEME_COLOR = '#007aff';
+function legacyLookOf(slider) {
+    const color = readProp(slider, 'navigationColor');
+    const size = Number(readProp(slider, 'navigationSize'));
+    const dots = readProp(slider, 'paginationColor');
+    return {
+        navigationColor: typeof color === 'string' && color ? color : SWIPER_THEME_COLOR,
+        navigationSize: Number.isFinite(size) && size > 0 ? size : 44,
+        paginationColor: typeof dots === 'string' && dots ? dots : SWIPER_THEME_COLOR,
+    };
+}
+/** 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);
+        dots.children = [];
+        return dots;
+    }
+    const key = role.split('.')[1];
+    // Previous / Next sit at the vertical middle (their own `top`, so a part set back in flow drops it); the inline edge
+    // is the shared CSS's, logical, so the arrows swap sides in RTL.
+    const placed = role === SliderRole.Pause ? CONTROL_BASE : { ...CONTROL_BASE, top: ARROW_TOP };
+    const base = legacy
+        ? { ...placed, backgroundColor: 'transparent', borderWidth: ZERO$1, color: legacy.navigationColor ?? SWIPER_THEME_COLOR, boxShadow: 'none' }
+        : placed;
+    // Previous / Next carry their accessible name (Swiper's A11y module reads it); the pause control's name is its
+    // runtime's — it says what pressing it will do.
+    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 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);
+    button.children = [icon];
+    return button;
+}
+const truthy = (v) => v === true || v === 'true';
+/** The parts the slider's switches call for, in stamping order. */
+function wantedSliderParts(slider) {
+    return FLAG_PARTS.filter(([flag]) => truthy(readProp(slider, flag))).flatMap(([, roles]) => roles);
+}
+/**
+ * Make the slider's parts match its switches — ONE edit (a palette switch, the migration, the composer). Missing
+ * parts are stamped from the recipe (or, `legacy`, in the migrated look) at their place: the pause control, Previous
+ * and Next before the first slide, the pagination after the last; parts whose switch is off are removed. Everything
+ * else (the slides, the author's edits to an existing part) is kept.
+ */
+function syncSliderParts(slider, create, legacy) {
+    const wanted = new Set(wantedSliderParts(slider));
+    const children = [...(slider.children ?? [])];
+    const removed = children.filter(c => isSliderPart(c) && !wanted.has(c.role));
+    const kept = children.filter(c => !removed.includes(c));
+    const added = [];
+    for (const role of SLIDER_PART_ROLES) {
+        if (!wanted.has(role) || kept.some(c => c.role === role))
+            continue;
+        const part = buildSliderPart(create, role, legacy);
+        added.push(part);
+        if (role === SliderRole.Pagination) {
+            kept.push(part);
+        }
+        else {
+            // Before the first slide, after the parts that come before it in stamping order.
+            const order = SLIDER_PART_ROLES.indexOf(role);
+            const firstSlide = kept.findIndex(c => !isSliderPart(c));
+            let at = firstSlide < 0 ? kept.length : firstSlide;
+            for (let i = 0; i < kept.length; i++) {
+                const r = kept[i].role;
+                if (isSliderPart(kept[i]) && SLIDER_PART_ROLES.indexOf(r) > order && i < at) {
+                    at = i;
+                    break;
+                }
+            }
+            kept.splice(at, 0, part);
+        }
+    }
+    if (added.length || removed.length)
+        slider.children = kept;
+    return { added, removed };
+}
+/** True when a saved slider still relies on Swiper-drawn controls: a switch is on and no part exists yet. */
+function needsSliderMigration(slider) {
+    return !!slider && isSlider(slider) && !hasSliderParts(slider) && wantedSliderParts(slider).length > 0;
+}
+/**
+ * The migration of a saved slider (board 9 Q13): its Swiper-drawn arrows, dots — and, when Autoplay is on, the pause
+ * control WCAG 2.2.2 requires — become parts, in the place and the colours Swiper drew them. Idempotent: a slider
+ * that already has parts is left alone. True when it changed.
+ */
+function migrateSliderControls(slider, create) {
+    if (!needsSliderMigration(slider))
+        return false;
+    const change = syncSliderParts(slider, create, legacyLookOf(slider));
+    return change.added.length > 0;
+}
+/**
+ * A switch flipped in the panel: on a slider still on Swiper-drawn controls, migrate it first (so its other controls
+ * keep their look), then stamp / remove the parts the new switch calls for. ONE edit.
+ */
+function setSliderFlag(slider, flag, on, create) {
+    const wasLegacy = !hasSliderParts(slider);
+    const before = wantedSliderParts(slider);
+    const migrated = [];
+    if (wasLegacy && before.length) {
+        syncSliderParts(slider, create, legacyLookOf(slider)).added.forEach(p => migrated.push(p));
+    }
+    writeProp(slider, flag, on);
+    const change = syncSliderParts(slider, create);
+    return { added: [...migrated, ...change.added], removed: change.removed };
+}
+const SLIDER_WORDS = {
+    en: {
+        stop: 'Stop automatic slide show', start: 'Start automatic slide show', prev: 'Previous slide', next: 'Next slide',
+        carousel: 'carousel', slide: 'slide', slideLabel: '{{index}} of {{slidesLength}}', goTo: 'Go to slide {{index}}',
+    },
+    he: {
+        stop: 'עצירת המצגת האוטומטית', start: 'הפעלת המצגת האוטומטית', prev: 'השקופית הקודמת', next: 'השקופית הבאה',
+        carousel: 'קרוסלה', slide: 'שקופית', slideLabel: '{{index}} מתוך {{slidesLength}}', goTo: 'מעבר לשקופית {{index}}',
+    },
+};
+function sliderWords(lang) {
+    return (lang ?? '').toLowerCase().startsWith('he') ? SLIDER_WORDS.he : SLIDER_WORDS.en;
+}
+/** The wrapper's live region (APG): silent while the slides move on their own, polite otherwise. */
+function sliderLiveRegion(rotating) {
+    return rotating ? 'off' : 'polite';
+}
+/**
+ * The pause control's state (APG carousel): its NAME says what it will do ("Stop automatic slide show" while it
+ * rotates, "Start automatic slide show" when stopped). An author who named the control keeps the name, and the
+ * state is `aria-pressed` instead (pressed = stopped).
+ */
+function sliderPauseAttributes(rotating, words = SLIDER_WORDS.en, authorName) {
+    const name = (authorName ?? '').trim();
+    return name
+        ? { 'aria-label': name, 'aria-pressed': rotating ? 'false' : 'true' }
+        : { 'aria-label': rotating ? words.stop : words.start };
+}
+/** The pause control's glyph: pause while it rotates, play when stopped. */
+function sliderPauseGlyph(rotating) {
+    return rotating ? SLIDER_PART_GLYPH[SliderRole.Pause] : SLIDER_PLAY_GLYPH;
+}
+/** Board 6's sample quotes — PLACEHOLDERS: testimonials are facts the studio gives, never invented. */
+const CAROUSEL_QUOTES = [
+    { quote: 'A sample quote, two lines long, in the client’s own words.', who: '[Client name] · [Project, city]' },
+    { quote: 'Testimonials are facts: replace these with words a client actually said.', who: '[Client name] · [Project, city]' },
+    { quote: 'A third sample quote so the rotation has somewhere to go.', who: '[Client name] · [Project, city]' },
+];
+/** A quote card. The carousel's controls sit in a ROW above the slides and the dots below them (board 6), so the
+ *  card needs no room kept for an overlay. */
+const QUOTE_SLIDE_BASE = {
+    width: '100%', aspectRatio: 'auto', minHeight: 'auto', height: 'auto', display: 'flex', flexDirection: 'column', gap: '12px', padding: '32px 32px 32px 32px',
+};
+/** Board 6's carousel: the pause control, Previous and Next in one row above the slides (in flow — they read in the
+ *  page's direction), the dots under them. */
+const ROW_CONTROL_BASE = { position: 'static', display: 'inline-flex', margin: '0px 4px 12px 4px' };
+const ROW_DOTS_BASE = { position: 'static', margin: '12px 0px 0px 0px' };
+const QUOTE_TEXT_BASE = { margin: ZERO$1, padding: ZERO$1, minHeight: 'auto', width: 'auto' };
+/**
+ * The testimonial carousel (board 6): a named Slider, one quote per slide (each a `card`), rotating every 5s with its
+ * control parts — the pause control first, Previous · Next, the dots. ONE recipe for the composer and the builder.
+ */
+function buildCarouselRecipe(create, options = {}) {
+    const slider = makeCompositePart(create, { key: 'carousel', type: SLIDER_TYPE, props: {}, elementStyle: NO_ELEMENT_STYLE }, null, 'Carousel', { width: '100%' });
+    for (const [name, value] of Object.entries({
+        // Rewind: Previous and Next are always there to press (board 6) — neither greys out at an end.
+        slidesPerView: 1, spaceBetween: 0, loop: 'rewind', enableNavigation: true, enablePagination: true, enableAutoplay: true, autoplayDelay: 5000,
+        autoplayPauseOnMouseEnter: true, autoHeight: true, [SLIDER_NAME_TRAIT]: options.name ?? 'What clients say',
+    }))
+        writeProp(slider, name, value);
+    slider.children = (options.quotes ?? CAROUSEL_QUOTES).map((q, i) => {
+        const slide = makeCompositePart(create, { key: `slide-${i + 1}`, type: SLIDE_TYPE, props: {}, elementStyle: 'card' }, null, 'Slide', QUOTE_SLIDE_BASE);
+        slide.children = [
+            makeCompositePart(create, { key: `quote-${i + 1}`, type: 'Text', props: { content: q.quote, tag: 'p' }, elementStyle: 'lead' }, null, 'Quote', QUOTE_TEXT_BASE),
+            makeCompositePart(create, { key: `who-${i + 1}`, type: 'Text', props: { content: q.who, tag: 'p' }, elementStyle: 'small' }, null, 'Client', QUOTE_TEXT_BASE),
+        ];
+        return slide;
+    });
+    syncSliderParts(slider, create);
+    for (const part of slider.children ?? []) {
+        if (part.role === SliderRole.Pagination)
+            writeStyles(part, ROW_DOTS_BASE);
+        else if (isSliderPart(part))
+            writeStyles(part, ROW_CONTROL_BASE);
+    }
+    return slider;
+}
+/** The slide a lightbox opens at for the clicked row (clamped to the slides there are). */
+function slideIndexForRow(rowIndex, slideCount) {
+    if (!Number.isFinite(rowIndex) || rowIndex < 0 || slideCount <= 0)
+        return 0;
+    return Math.min(Math.floor(rowIndex), slideCount - 1);
+}
+
 const COMPOSITE_ROLE_SPECS = {
     [CardRole.Card]: { parent: null },
     [CardRole.Media]: { parent: CardRole.Card, part: CardPart.Media },
@@ -1552,6 +2168,20 @@ const COMPOSITE_ROLE_SPECS = {
     [AccordionRole.Trigger]: { parent: AccordionRole.Item, locked: true },
     [AccordionRole.Panel]: { parent: AccordionRole.Item, locked: true },
     [AccordionRole.Icon]: { parent: AccordionRole.Trigger },
+    // CC2.1 — a disclosure always keeps its toggle and its panel; the words and the icon are the author's.
+    [DisclosureRole.Disclosure]: { parent: null },
+    [DisclosureRole.Trigger]: { parent: DisclosureRole.Disclosure, locked: true },
+    [DisclosureRole.Panel]: { parent: DisclosureRole.Disclosure, locked: true },
+    [DisclosureRole.More]: { parent: DisclosureRole.Trigger },
+    [DisclosureRole.Less]: { parent: DisclosureRole.Trigger },
+    [DisclosureRole.Icon]: { parent: DisclosureRole.Trigger },
+    // 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.
+    [SliderRole.Pause]: { parent: null, parentType: SLIDER_TYPE, locked: true },
+    [SliderRole.Prev]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
+    [SliderRole.Next]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
+    [SliderRole.Pagination]: { parent: null, parentType: SLIDER_TYPE, pinned: true },
 };
 var StructureEdit;
 (function (StructureEdit) {
@@ -1572,12 +2202,13 @@ var StructureRefusal;
  */
 function structureRefusal(node, edit, ancestors = []) {
     const spec = node?.role ? COMPOSITE_ROLE_SPECS[node.role] : undefined;
-    if (!spec?.locked)
+    if (!spec?.locked && !spec?.pinned)
         return null;
     if (edit === StructureEdit.Delete)
-        return StructureRefusal.LockedPart;
+        return spec.locked ? StructureRefusal.LockedPart : null;
     const parent = ancestors[ancestors.length - 1];
-    return parent?.role === spec.parent ? null : StructureRefusal.LockedPlacement;
+    const placed = spec.parentType ? parent?.type === spec.parentType : parent?.role === spec.parent;
+    return placed ? null : StructureRefusal.LockedPlacement;
 }
 /** True when `node` is a locked part (shown with a lock and no delete in the layer tree). Deleting a whole
  *  composite is always allowed — only its locked parts are refused. */
@@ -1585,12 +2216,322 @@ function isLockedPart(node) {
     return !!(node?.role && COMPOSITE_ROLE_SPECS[node.role]?.locked);
 }
 
+const SLIDE_VISIBLE = 'swiper-slide-visible';
+const RUNTIME_KEY = '__ioxCarousel';
+const ROTATION_EVENTS = 'autoplayStart autoplayStop autoplayPause autoplayResume';
+const SLIDE_EVENTS = 'slideChange transitionEnd resize slidesLengthChange';
+const AUTHOR_NAME_KEY = '__ioxAuthorName';
+/** The name the AUTHOR gave the pause control (its rendered `aria-label` before this runtime first relabelled it). */
+function authorNameOf(el) {
+    if (!el)
+        return null;
+    const host = el;
+    if (host[AUTHOR_NAME_KEY] === undefined)
+        host[AUTHOR_NAME_KEY] = el.getAttribute('aria-label') ?? '';
+    return host[AUTHOR_NAME_KEY] || null;
+}
+/** The part of `role` that belongs to THIS slider (never one of a slider nested in a slide). */
+function sliderPartElement(sliderEl, role) {
+    const cls = `iox-role-${role.replace('.', '-')}`;
+    for (const el of Array.from(sliderEl.querySelectorAll(`.${cls}`))) {
+        if (el.closest('.swiper') === sliderEl && !el.closest('.swiper-wrapper'))
+            return el;
+    }
+    return null;
+}
+class CarouselA11y {
+    constructor(swiper, options = {}) {
+        this.swiper = swiper;
+        /** The visitor pressed pause: rotation stays stopped until they press it again. */
+        this.stoppedByVisitor = false;
+        this.focusInside = false;
+        /** The pointer is over the carousel and Swiper holds rotation for it (`pauseOnMouseEnter`). */
+        this.hovering = false;
+        this.cleanups = [];
+        const el = swiper.el;
+        this.words = options.words ?? sliderWords(el.ownerDocument?.documentElement?.getAttribute('lang'));
+        this.pause = sliderPartElement(el, SliderRole.Pause);
+        this.authorName = authorNameOf(this.pause);
+        this.listen(el, 'focusin', () => this.onFocusIn());
+        this.listen(el, 'pointerenter', () => { this.hovering = this.hoverPauses; this.sync(); });
+        this.listen(el, 'pointerleave', () => { this.hovering = false; this.sync(); });
+        this.listen(el, 'focusout', (e) => this.onFocusOut(e));
+        if (this.pause)
+            this.listen(this.pause, 'click', (e) => { e.preventDefault(); this.togglePause(); });
+        const sync = () => this.sync();
+        swiper.on(ROTATION_EVENTS, sync);
+        swiper.on(SLIDE_EVENTS, sync);
+        this.cleanups.push(() => { swiper.off(ROTATION_EVENTS, sync); swiper.off(SLIDE_EVENTS, sync); });
+        el[RUNTIME_KEY] = this;
+        this.sync();
+    }
+    /** True while the slides move on their own: autoplay runs and nothing holds it — not focus inside, not the
+     *  pointer over it. (Swiper's own `paused` also flips during every transition, so it is not read here.) */
+    get rotating() {
+        return !!this.swiper.autoplay?.running && !this.focusInside && !this.hovering;
+    }
+    get hoverPauses() {
+        const autoplay = this.swiper.params?.autoplay;
+        return typeof autoplay === 'object' && !!autoplay?.pauseOnMouseEnter;
+    }
+    /** The pause control: stop rotation for good, or start it again. */
+    togglePause() {
+        const a = this.swiper.autoplay;
+        if (!a)
+            return;
+        if (a.running) {
+            this.stoppedByVisitor = true;
+            a.stop();
+        }
+        else {
+            this.stoppedByVisitor = false;
+            a.start();
+            // Focus is on the pause control itself — inside the carousel: the rotation it just started waits until
+            // focus leaves (APG), but the control already reads "stop".
+            if (this.focusInside)
+                a.pause();
+        }
+        this.sync();
+    }
+    destroy() {
+        this.cleanups.splice(0).forEach(fn => fn());
+        delete this.swiper.el[RUNTIME_KEY];
+    }
+    listen(target, type, fn) {
+        target.addEventListener(type, fn);
+        this.cleanups.push(() => target.removeEventListener(type, fn));
+    }
+    onFocusIn() {
+        this.focusInside = true;
+        if (this.swiper.autoplay?.running && !this.swiper.autoplay.paused)
+            this.swiper.autoplay.pause();
+        this.sync();
+    }
+    onFocusOut(e) {
+        const next = e.relatedTarget;
+        if (next && this.swiper.el.contains(next))
+            return;
+        this.focusInside = false;
+        if (!this.stoppedByVisitor && this.swiper.autoplay?.running && this.swiper.autoplay.paused)
+            this.swiper.autoplay.resume();
+        this.sync();
+    }
+    /** Re-state the carousel: the live region, the pause control, the slides out of view. */
+    sync() {
+        if (this.swiper.destroyed)
+            return;
+        const rotating = this.rotating;
+        this.swiper.wrapperEl?.setAttribute('aria-live', sliderLiveRegion(rotating));
+        if (this.pause) {
+            const running = !!this.swiper.autoplay?.running;
+            const attrs = sliderPauseAttributes(running, this.words, this.authorName);
+            for (const [name, value] of Object.entries(attrs))
+                this.pause.setAttribute(name, value);
+            if (!('aria-pressed' in attrs))
+                this.pause.removeAttribute('aria-pressed');
+            const icon = this.pause.querySelector('i');
+            if (icon)
+                icon.className = `${sliderPauseGlyph(running)} ${Array.from(icon.classList).filter(c => !c.startsWith('ph')).join(' ')}`.trim();
+        }
+        this.syncHiddenSlides();
+    }
+    syncHiddenSlides() {
+        const slides = this.swiper.slides ?? [];
+        const anyVisibleMarked = slides.some(s => s.classList?.contains(SLIDE_VISIBLE));
+        slides.forEach((slide, i) => {
+            const visible = anyVisibleMarked ? slide.classList.contains(SLIDE_VISIBLE) : i === this.swiper.activeIndex;
+            if (visible) {
+                slide.removeAttribute('inert');
+                slide.removeAttribute('aria-hidden');
+            }
+            else {
+                slide.setAttribute('inert', '');
+                slide.setAttribute('aria-hidden', 'true');
+            }
+        });
+    }
+}
+/** The carousel runtime attached to a slider element, if any. */
+function carouselOf(el) {
+    return el?.[RUNTIME_KEY] ?? null;
+}
+/** Attach once per Swiper (a re-init gets a fresh runtime). */
+function attachCarouselA11y(swiper, options = {}) {
+    carouselOf(swiper.el)?.destroy();
+    return new CarouselA11y(swiper, options);
+}
+
+/**
+ * THE LIGHTBOX (CC3 — complex-components plan §7d, board 6). Not a component: a Dialog holding a Slider bound to the
+ * SAME source as the grid of thumbnails. The one new thing is `openDialog`'s "Open at the clicked item"
+ * (`slideTo: 'row'`): a thumbnail in a repeater row opens the lightbox at ITS slide.
+ *
+ *   Dialog `dialog` · centre · full viewport · Inverse scheme      "Lightbox" (a free-standing Dialog: board A4)
+ *   ├─ ButtonBlock `button-ghost`  "Close"  › Icon ×                click → closeDialog
+ *   └─ SliderContainer  one slide in view · keyboard · the source's rows
+ *       ├─ Previous · Next (slider.prev / slider.next, button-secondary)   hidden on a phone (swipe)
+ *       ├─ SliderSlide › Image `media` (contain, keeps its alt) + Text `small` caption
+ *       └─ Pagination (slider.pagination) — the counter "3 / 6"
+ *
+ * Keyboard ← → are the Slider's Keyboard module; Esc and the focus trap are the `<dialog>`'s; focus returns to the
+ * thumbnail that opened it (the dialog opener's own rule).
+ */
+const SLIDE_TO_ROW = 'row';
+/** The attribute a renderer writes on every repeated row (the context-state provenance, both engine paths, the canvas). */
+const ROW_INDEX_ATTRIBUTE = 'data-iox-row-idx';
+const LIGHTBOX_LABEL = 'Lightbox';
+const DIALOG = 'Dialog';
+const REPEATER = 'Repeater';
+const SOURCE = 'source';
+const SOURCE_PATH = 'sourcePath';
+const ZERO = '0px 0px 0px 0px';
+const DIALOG_BASE = {
+    width: '100vw', maxWidth: '100vw', height: '100dvh', maxHeight: '100dvh', borderRadius: '0px', padding: '18px 18px 18px 18px',
+    display: 'flex', flexDirection: 'column', gap: '0px',
+};
+/** The top row (board 6): the counter at its start, Close at its end — Close sits above the slider, which rises into
+ *  the row so its counter shares it. */
+const CLOSE_BASE = {
+    display: 'flex', alignItems: 'center', justifyContent: 'center', width: '44px', height: '44px', minWidth: '44px',
+    padding: ZERO, margin: ZERO, borderRadius: '999px', alignSelf: 'flex-end', flexShrink: '0', position: 'relative', zIndex: '20',
+};
+const SLIDER_BASE = { width: '100%', height: '100%', minHeight: '0px', flexGrow: '1', margin: '-44px 0px 0px 0px' };
+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 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' };
+/** On a phone the arrows give way to a swipe (board 6, "the arrows hide on touch-only widths"). */
+const LIGHTBOX_ARROWS_HIDE_AT = 'mobile';
+/** A click on `node` runs one instant action on `target`. */
+function onClick(node, type, target, params) {
+    node.interactions = [{
+            id: `${node.id ?? 'node'}-click`, trigger: 'click',
+            actions: [{ type, target, duration: 0, delay: 0, easing: 'ease', ...(params ? { params } : {}) }],
+        }];
+}
+/** A binding of `prop` to the row field `field` of `source` (`item` = the row itself). */
+function bindRow(node, prop, source, field) {
+    const bindings = (node.bindings ?? []).filter((b) => b.prop !== prop);
+    bindings.push({ prop, source, path: field === 'item' ? '' : field });
+    node.bindings = bindings;
+}
+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 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');
+        if (options.altField)
+            bindRow(image, 'alt', rowAlias, options.altField);
+        if (options.captionField)
+            bindRow(caption, 'content', rowAlias, options.captionField);
+    }
+    slide.children = options.captionField || !rowAlias ? [image, caption] : [image];
+    return slide;
+}
+/** A fresh lightbox: the Dialog, its Close part and the Slider (bound to `source`, or three manual slides). */
+function buildLightboxRecipe(create, options = {}) {
+    const dialog = makeCompositePart(create, { key: 'lightbox', type: DIALOG, props: {}, elementStyle: 'dialog' }, null, LIGHTBOX_LABEL, DIALOG_BASE);
+    writeProp(dialog, 'placement', 'center');
+    writeProp(dialog, 'closeOnBackdrop', true);
+    writeProp(dialog, 'showCloseButton', false);
+    writeProp(dialog, 'ariaLabel', 'Gallery');
+    setColorScheme(dialog, 'inverse');
+    const close = makeCompositePart(create, { key: 'close', type: 'ButtonBlock', props: { tag: 'button', type: 'button', ariaLabel: 'Close' }, elementStyle: 'button-ghost' }, null, 'Close', CLOSE_BASE);
+    close.children = [makeCompositePart(create, { key: 'close-icon', type: 'Icon', props: { iconClass: 'ph ph-x' }, elementStyle: 'icon' }, null, 'Icon', { fontSize: '22px', color: 'inherit' })];
+    onClick(close, 'closeDialog', dialog.id ?? '');
+    const slider = makeCompositePart(create, { key: 'slider', type: SLIDER_TYPE, props: {}, elementStyle: NO_ELEMENT_STYLE }, null, 'Slider', SLIDER_BASE);
+    for (const [name, value] of Object.entries({
+        slidesPerView: 1, spaceBetween: 0, loop: 'off', enableNavigation: true, enablePagination: true, paginationType: 'fraction',
+        enableKeyboard: true, ariaLabel: 'Gallery', limit: 50,
+    }))
+        writeProp(slider, name, value);
+    const rowAlias = options.source ? lastSegment(options.sourcePath) || options.source : null;
+    if (options.source) {
+        writeProp(slider, SOURCE, options.source);
+        if (options.sourcePath)
+            writeProp(slider, SOURCE_PATH, options.sourcePath);
+    }
+    const prev = buildSliderPart(create, SliderRole.Prev);
+    const next = buildSliderPart(create, SliderRole.Next);
+    for (const arrow of [prev, next]) {
+        const layers = { ...(arrow.responsive ?? {}) };
+        layers[LIGHTBOX_ARROWS_HIDE_AT] = { styleProps: { display: 'none' } };
+        arrow.responsive = layers;
+    }
+    const counter = buildSliderPart(create, SliderRole.Pagination);
+    counter.label = 'Counter';
+    writeStyles(counter, COUNTER_BASE);
+    const slides = rowAlias ? [buildSlide(create, 'slide', options, rowAlias)] : [1, 2, 3].map(n => buildSlide(create, `slide-${n}`, options, null));
+    slider.children = [prev, next, ...slides, counter];
+    dialog.children = [close, slider];
+    return dialog;
+}
+const lastSegment = (path) => (path ? String(path).split('.').filter(Boolean).pop() ?? '' : '');
+/** What a Repeater (its `source` binding) or a bound Slider (its `source` / `sourcePath` traits) repeats over. */
+function repeatSourceOf(node) {
+    if (!node || (node.type !== REPEATER && node.type !== SLIDER_TYPE))
+        return null;
+    const binding = (node.bindings ?? []).find(b => b?.prop === SOURCE);
+    if (binding?.source)
+        return { source: binding.source, path: binding.path ?? '' };
+    const source = readProp(node, SOURCE);
+    if (typeof source !== 'string' || !source)
+        return null;
+    const path = readProp(node, SOURCE_PATH);
+    return { source, path: typeof path === 'string' ? path : '' };
+}
+function sameRepeatSource(a, b) {
+    return !!a && !!b && a.source === b.source && (a.path ?? '') === (b.path ?? '');
+}
+/** The Slider a lightbox Dialog holds (the first one, depth first), or null. */
+function lightboxSliderOf(dialog) {
+    for (const child of dialog?.children ?? []) {
+        if (child.type === SLIDER_TYPE)
+            return child;
+        const below = lightboxSliderOf(child);
+        if (below)
+            return below;
+    }
+    return null;
+}
+/** The repeated rows the element is in: the nearest Repeater or bound Slider among its ancestors (`path` = root → the
+ *  element, inclusive). */
+function rowSourceOf(path) {
+    for (let i = path.length - 2; i >= 0; i--) {
+        const source = repeatSourceOf(path[i]);
+        if (source)
+            return source;
+    }
+    return null;
+}
+/**
+ * Interactions ▸ openDialog ▸ "Open at the clicked item" is offered only when it can work (board 9): the clicked
+ * element sits in a repeater row AND the target Dialog holds a Slider bound to the same source.
+ */
+function canOpenAtClickedItem(ownerPath, dialog) {
+    if (!dialog || dialog.type !== DIALOG)
+        return false;
+    return sameRepeatSource(rowSourceOf(ownerPath), repeatSourceOf(lightboxSliderOf(dialog)));
+}
+/** The repeated row an element sits in (its row index), 0 when it is in none (the canvas' template row). */
+function rowIndexOf(el) {
+    const row = el?.closest?.(`[${ROW_INDEX_ATTRIBUTE}]`);
+    const index = Number(row?.getAttribute(ROW_INDEX_ATTRIBUTE));
+    return Number.isInteger(index) && index >= 0 ? index : 0;
+}
+
 /**
  * @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); Tabs join with their own phase.
+ * framework), which the Disclosure (CC2.1) runs too — a one-item accordion whose root is its item; Tabs join with
+ * their own phase.
  * ⚠️ Consumers wire the usual trio — ng-package raw-ts assets, jest moduleNameMapper, tsconfig paths.
  */
 
@@ -1598,5 +2539,5 @@ function isLockedPart(node) {
  * 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, CHIP_ICON, CHIP_STYLE, COMPOSITE_ATTRIBUTE, COMPOSITE_ROLE_SPECS, CardLayout, CardPart, CardRole, CompositeBehaviourTrait, DEFAULT_ON_ATTRIBUTE, ITEM_KEY_ATTRIBUTE, ITEM_OFF_EVENT, ITEM_ON_EVENT, ITEM_OPEN_STATE, MULTIPLE_ATTRIBUTE, ON_ATTRIBUTE, ON_STATE, PILL_LABEL_STYLE, StructureEdit, StructureRefusal, UNTIL_FOUND, accordionAnswerOf, accordionBehaviour, accordionDomIds, accordionFocusIndex, accordionHeadingLevel, accordionItemAttributes, accordionItemLabel, accordionItemOf, accordionItemState, accordionItems, accordionKeyAction, accordionPanelAttributes, accordionPanelOf, accordionPartStyle, accordionQuestionOf, accordionRegionAttributes, accordionRemovalRefusal, accordionRootAttributes, accordionRootOf, accordionScope, accordionToContent, accordionToManual, accordionTrackAttributes, accordionTriggerAttributes, accordionTriggerOf, addAccordionItem, applyCardLayout, attachAccordionAt, attachAccordions, badgeStyleId, badgeToneOf, buildAccordionItem, buildAccordionRecipe, buildBadge, buildCardRecipe, buildChip, cardPartsOf, cardRootOf, cardTitleOf, clearLayerStyles, closestAccordion, closestAccordionItem, detachAccordion, detectAccordionIcon, detectCardLayout, domSafeKey, findByRole, initialAccordionOpen, isAccordionFromContent, isAccordionItemOn, isAccordionPart, isAccordionRoot, isCardLinked, isCardRoot, isLockedPart, isPillNode, itemOpenTriggerIds, moveAccordionItem, nextAccordionState, nextItemKey, onAccordionItemState, openAccordionItem, parentInComposite, pickAccordionAutoBinds, readLayerStyle, readProp, readStyle, removeFromComposite, renameAccordionItem, rowItemKey, serializeDomAttributes, setAccordionBehaviour, setAccordionIcon, setBadgeTone, setCardLinked, setCardPart, structureRefusal, walkComposite, writeLayerStyles, writeProp, writeStyles };
+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 };
 //# sourceMappingURL=vectoriox-iox-ui-composite-core.mjs.map