@vectoriox/iox-builder 9.8.0 → 9.9.0

package/fesm2022/vectoriox-iox-builder.mjs

@@ -18,13 +18,13 @@ import { DialogModule } from 'primeng/dialog';
 import * as i1$1 from '@vectoriox/iox-ui';
 import { resolveBoundValue, VALIDATION_STATES as VALIDATION_STATES$1, VALIDATION_STATE_CLASS as VALIDATION_STATE_CLASS$1, DEFAULT_WIDTH_BY_TYPE, TEXT_DIRECTION_KEY, TEXT_ALIGN_KEY, TextAlign, COLOR_SCHEME_TRAIT, COLOR_SCHEMES, ColorScheme, LinkType, MAX_LINES_KEY, A11yTrait, BREAKPOINTS, Breakpoint, withSchemeInk, stripSuppressedProps, DeclarationContext, buildPartSelector, planResponsiveRules, resolveStyleProps, targetedStateSelector, stateSelectorSuffix, compileTokenCssBlocks, catalogFontId, fontsForTokens, GOOGLE_FONTS_FILE_ORIGIN, googleFontHref, compileDeclarations, wrapInBreakpointQuery, BreakpointQueryKind, NEW_NODE_STYLE_DEFAULTS, defaultElementStyleFor, applyElementStyle, planDataSource, dataSourcePlanToRequest, normalizeCollectionResult, resolveRepeaterItems, getByPath, computeRelative, ContextStore, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, ComponentInstanceRegistryService, isActionEnabled, isContextAction, contextActionEffect, resolveContextValue, effectiveActionType, INTERACTION_HIDDEN_ATTRIBUTE, motionAllowed, finalKeyframe, keyframeStyleEntries, buildInteractionKeyframes, declaredInputNames, emptyImagePlaceholder, syncNodeDesignClasses, nodeTraitValue, syncNodeA11yAttributes, nodeA11yAttributes, safeSetInput, colorSchemeOf, composeVirtualTraits, withDefaultHoverTransition, stateNamesIn, partClassName, switchElementStyle, countOverrides, setOverride, breakpointDef, breakpointForWidth, FormRenderState, needsAccessibleName, resolveInputs, setInputOverride, barReserveClass, collectContextSlotKeys, withContextSlots, compilePageStyle, nodeUsesContext, IS_PREVIEW, buttonBlockHref, IoxPageModule, PALETTE_PRESETS, elementStyleById, PART_CLASS_NAMES } from '@vectoriox/iox-ui';
 export { ComponentInstanceRegistryService, VIRTUAL_TRAIT_KEYS, composeVirtualTraits } from '@vectoriox/iox-ui';
-import { structureRefusal, StructureEdit, isAccordionPart, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, AccordionRuntime, accordionBehaviour, closestAccordionItem, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, accordionHeadingLevel } from '@vectoriox/iox-ui/composite-core';
+import { StructureEdit, isAccordionPart, isDisclosurePart, structureRefusal, AccordionRole, CompositeBehaviourTrait, ACCORDION_DEFAULT_ONS, onAccordionItemState, isAccordionItemOn, runCompositeItemAction, shouldScrollToItem, DisclosureRole, AccordionRuntime, accordionBehaviour, compositeScopeId, compositeRowKeys, compositeKindOfRole, closestAccordionItem, isCompositeRoot, isAccordionRoot, buildCardRecipe, buildBadge, buildChip, buildAccordionRecipe, buildDisclosureRecipe, CompositeKind, accordionItemLabel, isLockedPart, accordionRootOf, isAccordionFromContent, accordionItemOf, addAccordionItem, isCompositeItem, accordionHeadingLevel, isCompositePanel, isCompositeTrigger } from '@vectoriox/iox-ui/composite-core';
 import { Subject, BehaviorSubject, of, forkJoin } from 'rxjs';
 import interact from 'interactjs';
 import { formContentInHost, isInteractiveHost, findFormContentInHosts } from '@vectoriox/iox-ui/forms-core';
 import { map, catchError } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
+import { itemActionOf, BEHAVIOUR_ACTION_TYPES, SERVER_ELEMENT_ACTION_TYPES, CONSENT_ACTION_TYPES } from '@vectoriox/iox-ui/actions-core';
 import Lenis from 'lenis';
 import Moveable from 'moveable';
 import Selecto from 'selecto';
@@ -176,6 +176,10 @@ const IOX_BUILDER_LABELS = new InjectionToken('IOX_BUILDER_LABELS', {
     providedIn: 'root',
     factory: () => defaultBuilderLabels,
 });
+const IOX_CONTENT_TYPE_LABELS = new InjectionToken('IOX_CONTENT_TYPE_LABELS', {
+    providedIn: 'root',
+    factory: () => () => null,
+});
 /** Standalone behaviour: the English text the library ships with. */
 const defaultBuilderLabels = (_key, fallback) => fallback;
 /**
@@ -207,11 +211,14 @@ const BUILDER_CHROME_EN = Object.freeze({
     'builder.chrome.compositeRole': 'Composite role',
     'builder.chrome.kindCard': 'Card',
     'builder.chrome.kindAccordion': 'Accordion',
+    'builder.chrome.kindDisclosure': 'Disclosure',
+    'builder.chrome.refuseLockedDisclosurePart': 'A disclosure keeps its toggle and its panel. Delete the whole disclosure instead.',
+    'builder.chrome.refuseLockedDisclosurePartMove': 'This part belongs to its disclosure — it can’t be moved out.',
     'builder.chrome.refuseLockedItemPart': 'An item keeps its header and its panel. Delete the whole item, or the accordion.',
     'builder.chrome.refuseLockedItemPartMove': 'This part belongs to its item — it can’t be moved out.',
     'builder.chrome.refuseLastItem': 'An accordion keeps at least one item. Delete the whole accordion instead.',
     'builder.chrome.addItem': 'Add item',
-    'builder.chrome.fromContent': 'From {alias} · {count} rows',
+    'builder.chrome.fromContent': 'From {source} · {count} rows',
     'builder.chrome.emptySource': 'No rows in “{alias}”.',
     'builder.chrome.emptySourceHint': 'The {type} content type has no published items that match this source’s filters. Add items in Content ▸ {type}, or change the source.',
     'builder.chrome.fromRow': 'row {row} — every row wears this part',
@@ -244,6 +251,20 @@ const CANVAS_EMPTY_IMAGE_LABEL_EN = BUILDER_CHROME_EN[CANVAS_EMPTY_IMAGE_LABEL_K
  */
 const EDITOR_CHROME_ATTRIBUTE = 'data-iox-chrome';
 
+/** The content type a data source reads (`faqs`), or '' for a source that reads none (external, static). */
+function sourceContentType(ds) {
+    return ds?.request?.cms?.contentType || ds?.request?.shop?.contentType || '';
+}
+/**
+ * What the builder's chrome calls the list a source reads — the CONTENT TYPE's label ("From FAQ", board 3), as the
+ * host knows it (`IOX_CONTENT_TYPE_LABELS`), else the source's alias. ONE answer for the layer tree's
+ * "From FAQ · 3 rows", the Repeater's empty-source hint and the Items section's source options.
+ */
+function sourceTypeLabel(alias, ds, resolve) {
+    const type = sourceContentType(ds);
+    return (type && resolve(type)) || alias;
+}
+
 const freshId = () => Math.random().toString(36).substr(2, 9);
 /**
  * Assign fresh ids to a cloned ComponentNode subtree AND remap intra-subtree references to the
@@ -445,6 +466,10 @@ var InsertRefusal;
     InsertRefusal["LockedItemPart"] = "lockedItemPart";
     /** An accordion's LAST item (composite plan T11): it keeps at least one. */
     InsertRefusal["LastItem"] = "lastItem";
+    /** A disclosure's toggle or panel (CC2.1) moved out of it. */
+    InsertRefusal["LockedDisclosurePartMove"] = "lockedDisclosurePartMove";
+    /** A disclosure's toggle or panel (CC2.1) deleted on its own. */
+    InsertRefusal["LockedDisclosurePart"] = "lockedDisclosurePart";
 })(InsertRefusal || (InsertRefusal = {}));
 const FORM_STATE_BLOCK_TYPES = new Set(['FormSuccess', 'FormError']);
 /** The builder-chrome label that says each refusal on screen (English in `BUILDER_CHROME_EN`). */
@@ -457,7 +482,18 @@ const INSERT_REFUSAL_LABEL_KEYS = Object.freeze({
     [InsertRefusal.LockedItemPartMove]: 'builder.chrome.refuseLockedItemPartMove',
     [InsertRefusal.LockedItemPart]: 'builder.chrome.refuseLockedItemPart',
     [InsertRefusal.LastItem]: 'builder.chrome.refuseLastItem',
+    [InsertRefusal.LockedDisclosurePartMove]: 'builder.chrome.refuseLockedDisclosurePartMove',
+    [InsertRefusal.LockedDisclosurePart]: 'builder.chrome.refuseLockedDisclosurePart',
 });
+/** Which refusal says a locked part's move / delete, by the composite it belongs to (a card's is the default). */
+function lockedRefusal(node, edit) {
+    const move = edit === StructureEdit.Move;
+    if (isAccordionPart(node))
+        return move ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedItemPart;
+    if (isDisclosurePart(node))
+        return move ? InsertRefusal.LockedDisclosurePartMove : InsertRefusal.LockedDisclosurePart;
+    return move ? InsertRefusal.LockedPartMove : InsertRefusal.LockedPart;
+}
 /** The refusal in the host's language (the library's English when no host resolver is provided). */
 function insertRefusalLabel(reason, labels = defaultBuilderLabels) {
     const key = INSERT_REFUSAL_LABEL_KEYS[reason];
@@ -484,7 +520,7 @@ function insertRefusal(node, ancestors) {
     if (formContentInHost(node, ancestors.some(isInteractiveHost)))
         return InsertRefusal.FormInInteractive;
     if (structureRefusal(node, StructureEdit.Move, ancestors))
-        return isAccordionPart(node) ? InsertRefusal.LockedItemPartMove : InsertRefusal.LockedPartMove;
+        return lockedRefusal(node, StructureEdit.Move);
     return null;
 }
 /** Why `node` may not be REMOVED from where it is (deleted, cut, made global), or null when it may: a
@@ -492,7 +528,7 @@ function insertRefusal(node, ancestors) {
  *  accordion keeps its last item. `siblings` = the list `node` sits in (where the caller has it). */
 function removalRefusal(node, siblings) {
     if (structureRefusal(node, StructureEdit.Delete))
-        return isAccordionPart(node) ? InsertRefusal.LockedItemPart : InsertRefusal.LockedPart;
+        return lockedRefusal(node, StructureEdit.Delete);
     if (node?.role === AccordionRole.Item && siblings && siblings.filter(s => s?.role === AccordionRole.Item).length <= 1)
         return InsertRefusal.LastItem;
     return null;
@@ -600,6 +636,8 @@ const INVERSE_ACTION = {
     clearContext: 'setContext',
     openDialog: 'closeDialog',
     closeDialog: 'openDialog',
+    openItem: 'closeItem',
+    closeItem: 'openItem',
 };
 const TRIGGER_OPTIONS = [
     { value: 'pageLoad', label: 'Page load', icon: 'ph-thin ph-play' },
@@ -3679,8 +3717,11 @@ class InteractionEngineService {
                 this.runActions(node, ix.actions, element);
             }
         };
-        element.addEventListener('click', handler);
-        return () => element.removeEventListener('click', handler);
+        // CAPTURE, like the composite runtime: on the canvas every part's own listener stops the click to select
+        // that part, so a click on a button's LABEL never bubbled to the button's click interaction — the live
+        // site runs it (CC2.1: "Open an item" on a ButtonBlock did nothing on the canvas).
+        element.addEventListener('click', handler, true);
+        return () => element.removeEventListener('click', handler, true);
     }
     attachHover(node, ix, element) {
         const enterHandler = () => this.runActions(node, ix.actions, element);
@@ -3724,6 +3765,13 @@ class InteractionEngineService {
                 this.executeDialogAction(action);
                 continue;
             }
+            // Item actions (CC2.1 — composite T14): the canvas RUNS them on the target item's own runtime — the
+            // one the live site runs — and brings an item that opened out of view into it.
+            const itemAction = itemActionOf(action.type);
+            if (itemAction) {
+                this.executeItemAction(node, action, itemAction, selfEl);
+                continue;
+            }
             // Tier-A behaviour (A1c). The canvas-is-live rules are catalog DATA
             // (ELEMENT_ACTION_DESCRIPTORS): copy runs, scrollTo runs (scrollIntoView — the frame
             // scrolls natively here; the Lenis rule is the LIVE side's), navigate and submitForm
@@ -3819,6 +3867,14 @@ class InteractionEngineService {
             }
         }
     }
+    executeItemAction(node, action, itemAction, selfEl) {
+        const target = this.resolveTarget(node, action, selfEl);
+        const open = runCompositeItemAction(target, itemAction);
+        if (!open || !target)
+            return;
+        if (shouldScrollToItem(target.getBoundingClientRect().top, window.innerHeight))
+            target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }
     executeConsentAction(action) {
         if (action.type === 'openConsentPreferences') {
             const dialog = action.target && action.target !== 'self' ? this.instanceRegistry.get(action.target) : null;
@@ -4006,10 +4062,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * screen until something opens them, so on the canvas they show only while selected into or switched
  * open ("Showing on canvas"). The layer tree marks them with the eye-slash glyph. A Dialog (the mobile
  * menu's drawer, a consent banner) by its type; an Accordion's PANEL by its role (CC2 — closed until its
- * item opens). An inactive tab joins in CC4.
+ * item opens); a Disclosure's panel and its "Read less" word (CC2.1 — shown only while it is open). An inactive
+ * tab joins in CC4.
  */
 const HIDDEN_AT_REST_TYPES = ['Dialog'];
-const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel];
+const HIDDEN_AT_REST_ROLES = [AccordionRole.Panel, DisclosureRole.Panel, DisclosureRole.Less];
 function isHiddenAtRest(node) {
     return (!!node?.type && HIDDEN_AT_REST_TYPES.includes(node.type)) || (!!node?.role && HIDDEN_AT_REST_ROLES.includes(node.role));
 }
@@ -4145,10 +4202,17 @@ function sameSet(a, b) {
     return a.size === b.size && [...a].every(id => b.has(id));
 }
 
+/** The node whose "Showing on canvas" choice a rendered root follows: itself, or — a preview row's copy — its
+ *  template (a copy shares its template's style id). */
+function designIdOf(node) {
+    return node.__previewClone ? (node.styleId ?? node.id) : node.id;
+}
 /**
- * The composites' runtime ON THE CANVAS (CC2) — the canvas is a live runtime, so an Accordion opens and
- * closes on the canvas exactly as on the site: the SAME composite-core `AccordionRuntime` the live engine
- * attaches. On top of the live state it shows what the author is designing (R2, CC1's design state):
+ * The composites' runtime ON THE CANVAS (CC2) — the canvas is a live runtime, so an Accordion (and a Disclosure,
+ * CC2.1) opens and closes on the canvas exactly as on the site: the SAME composite-core `AccordionRuntime` the live
+ * engine attaches. A composite repeated in a Repeater's preview rows runs one per row, each with its own ARIA ids
+ * (its row folded into the scope id — vectoriox/iox-ui#20). On top of the live state it shows what the author is
+ * designing (R2, CC1's design state):
  * - selecting anything inside a CLOSED panel (canvas, tree, crumb, an Items row, SELECT_NODE) opens its item
  *   while it is selected, and deselecting closes it again;
  * - "Showing on canvas ▸ All open" opens every item; "As saved" goes back to the saved default.
@@ -4166,18 +4230,21 @@ class CompositeCanvasService {
         for (const id of [...this.attached.keys()])
             this.detach(id);
     }
-    /** An accordion root rendered on the canvas: run it. `element` is the root's rendered element. */
+    /** A composite root rendered on the canvas (the template, or a preview row's copy): run it. `element` is the
+     *  root's rendered element. Its ARIA ids are scoped by the preview rows it sits in. */
     attach(node, element) {
         if (!node.id)
             return;
         this.detach(node.id);
+        const cssId = node.styleId ?? node.id;
         const runtime = this.zone.runOutsideAngular(() => new AccordionRuntime(element, {
-            rootId: node.styleId ?? node.id,
+            kind: compositeKindOfRole(node.role) ?? undefined,
+            rootId: () => compositeScopeId(cssId, compositeRowKeys(element)),
             behaviour: accordionBehaviour(node),
             observe: true,
             forced: () => this.forcedFor(node, element),
         }));
-        this.attached.set(node.id, { node, runtime, shown: this.designState?.shownState(node.id) ?? CanvasShowState.Closed });
+        this.attached.set(node.id, { node, runtime, shown: this.designState?.shownState(designIdOf(node)) ?? CanvasShowState.Closed });
     }
     detach(nodeId) {
         if (!nodeId)
@@ -4195,8 +4262,8 @@ class CompositeCanvasService {
         return (nodeId && this.attached.get(nodeId)?.runtime) || null;
     }
     applyDesignState() {
-        for (const [id, entry] of this.attached) {
-            const shown = this.designState?.shownState(id) ?? CanvasShowState.Closed;
+        for (const entry of this.attached.values()) {
+            const shown = this.designState?.shownState(designIdOf(entry.node)) ?? CanvasShowState.Closed;
             // Back to "As saved": the saved default, whatever the author clicked open meanwhile (board 3).
             if (shown !== entry.shown && shown === CanvasShowState.Closed)
                 entry.runtime.resetLive();
@@ -4206,7 +4273,8 @@ class CompositeCanvasService {
         }
     }
     /** The keys the design state holds open: every item ("All open"), or the items whose hidden part the
-     *  selection sits in. A preview row shares its template's classes, so the template (row 1) answers. */
+     *  selection sits in. A preview row shares its template's classes, so the template (row 1) answers — and a
+     *  composite copied into a preview row follows its template's choice. */
     forcedFor(node, root) {
         const forced = new Set();
         const state = this.designState;
@@ -4214,7 +4282,7 @@ class CompositeCanvasService {
             return forced;
         const runtime = this.attached.get(node.id)?.runtime;
         const items = runtime?.items() ?? [];
-        if (state.shownState(node.id) === CanvasShowState.Open) {
+        if (state.shownState(designIdOf(node)) === CanvasShowState.Open) {
             for (const item of items)
                 forced.add(runtime.keyOf(item, items));
             return forced;
@@ -4735,8 +4803,10 @@ class RenderDirective {
                 this.overlayService.triggerContextMenu(event.clientX, event.clientY);
             });
         }
-        // A composite root runs its behaviour on the canvas — the live site's runtime (CC2).
-        if (nativeEl && !isPreviewClone && node.id && isAccordionRoot(node) && this.compositeCanvas) {
+        // A composite root runs its behaviour on the canvas — the live site's runtime (CC2; the Disclosure, CC2.1).
+        // A preview row's copy runs too, scoped by its row (vectoriox/iox-ui#20): its ids are its own and it shows
+        // the saved default, as every row does on the live site.
+        if (nativeEl && node.id && isCompositeRoot(node) && this.compositeCanvas) {
             this.compositeCanvas.attach(node, nativeEl);
             this.compositeRootId = node.id;
         }
@@ -4859,6 +4929,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 
 const EMPTY_SOURCE_KEY = 'builder.chrome.emptySource';
 const EMPTY_SOURCE_HINT_KEY = 'builder.chrome.emptySourceHint';
+const NO_TYPE_LABELS = () => null;
 class BuilderRepeaterComponent {
     get children() { return this._children; }
     /** RenderDirective sets `source` (→ fetchData) BEFORE `children`. With an async source the response
@@ -4880,8 +4951,9 @@ class BuilderRepeaterComponent {
     get emptySourceTitle() {
         return this.label(EMPTY_SOURCE_KEY).replace('{alias}', this._source);
     }
+    /** "The FAQ content type has no published items…" — the type's LABEL (board 4), else the alias. */
     get emptySourceHint() {
-        const type = this.dsRegistry.findByAlias(this._source)?.request?.cms?.contentType ?? this._source;
+        const type = sourceTypeLabel(this._source, this.dsRegistry.findByAlias(this._source), this.typeLabels ?? NO_TYPE_LABELS);
         return this.label(EMPTY_SOURCE_HINT_KEY).split('{type}').join(type);
     }
     label(key) {
@@ -4921,7 +4993,7 @@ class BuilderRepeaterComponent {
             this.fetchData();
         }
     }
-    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine, labels) {
+    constructor(dragEngine, overlayService, dataSourceService, dsRegistry, panelEventService, cdr, interactionEngine, labels, typeLabels) {
         this.dragEngine = dragEngine;
         this.overlayService = overlayService;
         this.dataSourceService = dataSourceService;
@@ -4930,6 +5002,7 @@ class BuilderRepeaterComponent {
         this.cdr = cdr;
         this.interactionEngine = interactionEngine;
         this.labels = labels;
+        this.typeLabels = typeLabels;
         this._children = [];
         this.style = {};
         this.nodeId = '';
@@ -5070,7 +5143,7 @@ class BuilderRepeaterComponent {
         if (this.items.length)
             setTimeout(() => this.refreshPreviews());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }, { token: IOX_BUILDER_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.31", ngImport: i0, type: BuilderRepeaterComponent, deps: [{ token: DragEngineService }, { token: OverlayService }, { token: BuilderDataSourceService }, { token: DataSourceRegistryService }, { token: PanelEventService }, { token: i0.ChangeDetectorRef }, { token: InteractionEngineService }, { token: IOX_BUILDER_LABELS, optional: true }, { token: IOX_CONTENT_TYPE_LABELS, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.31", type: BuilderRepeaterComponent, isStandalone: false, selector: "app-builder-repeater", inputs: { children: "children", style: "style", nodeId: "nodeId", dropListId: "dropListId", source: "source", sourcePath: "sourcePath", limit: "limit" }, outputs: { childClick: "childClick", childMouseEnter: "childMouseEnter", childMouseLeave: "childMouseLeave" }, ngImport: i0, template: `
         <ng-template #badgeContent>
             <i class="ph-thin ph-repeat"></i>
@@ -5261,6 +5334,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                 }, {
                     type: Inject,
                     args: [IOX_BUILDER_LABELS]
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [IOX_CONTENT_TYPE_LABELS]
                 }] }], propDecorators: { children: [{
                 type: Input
             }], style: [{
@@ -5294,9 +5372,10 @@ var CompositePresetId;
     CompositePresetId["Badge"] = "badge";
     CompositePresetId["Chip"] = "chip";
     CompositePresetId["Accordion"] = "accordion";
+    CompositePresetId["Disclosure"] = "disclosure";
 })(CompositePresetId || (CompositePresetId = {}));
 /** Where a composite sits in the Components panel (composite plan §6d): content blocks, or the interactive
- *  composites (the Accordion — CC2; Tabs and the floating family later). */
+ *  composites (the Accordion — CC2, the Disclosure — CC2.1; Tabs and the floating family later). */
 var CompositePaletteGroup;
 (function (CompositePaletteGroup) {
     CompositePaletteGroup["ContentBlocks"] = "content-blocks";
@@ -5323,6 +5402,11 @@ const COMPOSITE_PRESETS = Object.freeze([
         description: 'Questions that open — three items, one open at a time. Every header, icon and panel is its own element.',
         build: create => buildAccordionRecipe(create),
     },
+    {
+        id: CompositePresetId.Disclosure, group: CompositePaletteGroup.Interactive, name: 'Disclosure', icon: 'ph-thin ph-caret-circle-down',
+        description: '"Read more" — a button that reveals the text below it and reads "Read less" while it is open.',
+        build: create => buildDisclosureRecipe(create),
+    },
 ]);
 /**
  * The builder's node factory for composite-core recipes: a NEW node as the palette creates one
@@ -6768,13 +6852,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
  * breadcrumb and the tree row's sub-label share these, so the four surfaces never disagree (board 3: "The
  * four surfaces, all driven by the same selection").
  *
- * An accordion's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3); a card keeps
- * its full role (`card.title`, "Card · card.title", board 8).
+ * An accordion's and a disclosure's parts are named by the part alone (`trigger`, "Accordion · trigger", board 3);
+ * a card keeps its full role (`card.title`, "Card · card.title", board 8).
  */
-const SHORT_ROLE_KINDS = new Set(['accordion']);
+const SHORT_ROLE_KINDS = new Set([CompositeKind.Accordion, CompositeKind.Disclosure]);
 /** A composite kind's glyph (Phosphor, weight-less): the badge, the root's crumb and its tree row carry it
  *  (board 3: "the composite root carrying its kind icon"). A card keeps the generic stack glyph. */
-const KIND_GLYPHS = { accordion: 'ph-rows' };
+const KIND_GLYPHS = { [CompositeKind.Accordion]: 'ph-rows', [CompositeKind.Disclosure]: 'ph-caret-circle-down' };
 const DEFAULT_KIND_GLYPH = 'ph-stack';
 /** The tree icon of an accordion's structural parts (board 3): rows on the root, a stack on an item and a
  *  panel, a cursor on the header, a sparkle on the icon. Other parts keep their type's icon. */
@@ -6784,6 +6868,12 @@ const PART_ICONS = {
     [AccordionRole.Trigger]: 'ph-thin ph-cursor',
     [AccordionRole.Panel]: 'ph-thin ph-stack',
     [AccordionRole.Icon]: 'ph-thin ph-sparkle',
+    // CC2.1 — the disclosure follows the accordion's drawn conventions (board 3): its kind glyph on the root, a
+    // cursor on its toggle, a stack on its panel, a sparkle on its icon; its two words keep the Text icon.
+    [DisclosureRole.Disclosure]: 'ph-thin ph-caret-circle-down',
+    [DisclosureRole.Trigger]: 'ph-thin ph-cursor',
+    [DisclosureRole.Panel]: 'ph-thin ph-stack',
+    [DisclosureRole.Icon]: 'ph-thin ph-sparkle',
 };
 /** The glyph of a role's composite kind (`ph-rows` for an accordion and its parts). */
 function compositeKindGlyph(role) {
@@ -6868,7 +6958,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 const FROM_ROW_KEY = 'builder.chrome.fromRow';
 const ADD_ITEM_KEY = 'builder.chrome.addItem';
 /** The kind label a composite part's selection badge shows (Card v2: "Card · card.title"). */
-const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion' };
+const COMPOSITE_KIND_KEYS = { card: 'builder.chrome.kindCard', accordion: 'builder.chrome.kindAccordion', disclosure: 'builder.chrome.kindDisclosure' };
 /** The parts that offer "Add item" on the selection toolbar (board 3: the "Add slide" pattern). */
 const ADD_ITEM_ROLES = new Set([AccordionRole.Accordion, AccordionRole.Item, AccordionRole.Trigger, AccordionRole.Panel]);
 class OverlayComponent {
@@ -7737,7 +7827,7 @@ function walk(nodes, depth, out, ctx, inTemplate, templateOf) {
     }
 }
 
-/** An Accordion from content's root row (CC2, board 9): "From faqs · 6 rows". */
+/** An Accordion from content's root row (CC2, board 3 / 9): "From FAQ · 6 rows" — the content type's label. */
 const FROM_CONTENT_KEY = 'builder.chrome.fromContent';
 const LOCKED_PART_KEY = 'builder.chrome.lockedPart';
 const COMPOSITE_ROLE_KEY = 'builder.chrome.compositeRole';
@@ -7775,6 +7865,8 @@ class LayerTreeComponent {
         this.activeSection = 'page';
         this.labels = inject(IOX_BUILDER_LABELS);
         this.panelEvents = inject(PanelEventService);
+        this.typeLabels = inject(IOX_CONTENT_TYPE_LABELS);
+        this.dataSources = inject(DataSourceRegistryService, { optional: true });
         this.lockedPartTitle = this.labels(LOCKED_PART_KEY, BUILDER_CHROME_EN[LOCKED_PART_KEY]);
         this.roleTitle = this.labels(COMPOSITE_ROLE_KEY, BUILDER_CHROME_EN[COMPOSITE_ROLE_KEY]);
         this.templateLabel = this.labels(TEMPLATE_KEY, BUILDER_CHROME_EN[TEMPLATE_KEY]);
@@ -7946,7 +8038,9 @@ class LayerTreeComponent {
             isExpanded: (node) => (node.id ? (this.expandedState.get(node.id) ?? true) : true),
             repeaterRows: (node) => this.repeaterRows(node),
             fromContentLabel: (rows) => rows.alias
-                ? this.labels(FROM_CONTENT_KEY, BUILDER_CHROME_EN[FROM_CONTENT_KEY]).replace('{alias}', rows.alias).replace('{count}', String(rows.count))
+                ? this.labels(FROM_CONTENT_KEY, BUILDER_CHROME_EN[FROM_CONTENT_KEY])
+                    .replace('{source}', sourceTypeLabel(rows.alias, this.dataSources?.findByAlias(rows.alias), this.typeLabels))
+                    .replace('{count}', String(rows.count))
                 : null,
         };
         this.flatTree = flattenLayerTree(this.layout, ctx);
@@ -8019,7 +8113,7 @@ class BreadcrumbBarComponent {
             ...nodes.map((node, i) => ({
                 node,
                 label: crumbLabel(node),
-                icon: isAccordionRoot(node) ? `ph-thin ${compositeKindGlyph(node.role)}` : null,
+                icon: isCompositeRoot(node) ? `ph-thin ${compositeKindGlyph(node.role)}` : null,
                 isCurrent: i === last,
                 key: node,
             })),
@@ -9883,13 +9977,14 @@ const ACCORDION_TRACK_WRAPPER = 'track';
  * See moveable-migration.md.
  */
 class BuilderContainerComponent {
-    /** The wrapper a child renders in: an Accordion item's header → its heading level, its panel → the track. */
+    /** The wrapper a child renders in: an Accordion item's header → its heading level; an item's panel (either
+     *  kind) → the track. A disclosure's toggle has no heading — it is a button in the flow. */
     wrapperOf(child) {
-        if (this.node?.role !== AccordionRole.Item)
+        if (!isCompositeItem(this.node))
             return null;
-        if (child.role === AccordionRole.Trigger)
+        if (child.role === AccordionRole.Trigger && this.node?.role === AccordionRole.Item)
             return accordionHeadingLevel(child);
-        if (child.role === AccordionRole.Panel)
+        if (isCompositePanel(child))
             return ACCORDION_TRACK_WRAPPER;
         return null;
     }
@@ -9962,7 +10057,8 @@ class BuilderContainerComponent {
         </ng-template>
         <!-- An Accordion ITEM (CC2) wraps its parts in the markup every renderer writes: the header inside a
              heading of its question's level, the panel inside the track + region the ONE hiding rule collapses
-             (iox-design.css). Structural only — the runtime stamps their state. -->
+             (iox-design.css). A Disclosure (CC2.1) is its own item: its toggle stays a bare button, its panel
+             takes the same track. Structural only — the runtime stamps their state. -->
         @for (child of children; track child) {
             @switch (wrapperOf(child)) {
                 @case ('h2') { <h2 class="iox-accordion-heading"><ng-container *ngTemplateOutlet="childTpl; context: { $implicit: child }"></ng-container></h2> }
@@ -10003,7 +10099,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
         </ng-template>
         <!-- An Accordion ITEM (CC2) wraps its parts in the markup every renderer writes: the header inside a
              heading of its question's level, the panel inside the track + region the ONE hiding rule collapses
-             (iox-design.css). Structural only — the runtime stamps their state. -->
+             (iox-design.css). A Disclosure (CC2.1) is its own item: its toggle stays a bare button, its panel
+             takes the same track. Structural only — the runtime stamps their state. -->
         @for (child of children; track child) {
             @switch (wrapperOf(child)) {
                 @case ('h2') { <h2 class="iox-accordion-heading"><ng-container *ngTemplateOutlet="childTpl; context: { $implicit: child }"></ng-container></h2> }
@@ -10024,7 +10121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
                         '[attr.data-iox-state]': 'formClass === "iox-form" ? formState : null',
                         '[attr.start]': "htmlTag === 'ol' && start !== 1 ? start : null",
                         '[attr.reversed]': "htmlTag === 'ol' && reversed ? '' : null",
-                        // An accordion item's identity — the runtime pairs its header and panel ids from it (CC2).
+                        // An item's identity (an accordion item, or a disclosure) — the runtime pairs its header and panel ids from it.
                         '[attr.data-iox-item-key]': 'node?.itemKey ?? null',
                     }, standalone: false, styles: [":host{position:relative;box-sizing:border-box}.container-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;border:1.5px dashed rgba(100,116,139,.35);border-radius:4px;color:#64748b80;font-size:12px;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;opacity:0;transition:opacity .15s}:host(:hover) .container-placeholder,:host(.iox-drag-over) .container-placeholder{opacity:1}.container-placeholder i{font-size:18px}:host ::ng-deep>[class*=iox-outer-]{min-width:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: DragEngineService }, { type: i0.ChangeDetectorRef }], propDecorators: { children: [{
@@ -10056,9 +10153,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.31", ngImpo
 /** `click` covers plain and modified clicks; a middle click opens a tab through `auxclick` alone. */
 const NAVIGATING_CLICKS = ['click', 'auxclick'];
 class BuilderLinkedContainerComponent {
-    /** An Accordion's header renders a <button> (CC2). */
+    /** An Accordion's header (CC2) or a Disclosure's toggle (CC2.1) renders a <button>. */
     get isTrigger() {
-        return this.node?.role === AccordionRole.Trigger;
+        return isCompositeTrigger(this.node);
     }
     constructor(dragEngine, cdr, elRef, isPreview) {
         this.dragEngine = dragEngine;
@@ -13265,5 +13362,5 @@ class BuilderSpacerComponentConfig extends ComponentConfig {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
+export { ACTION_TYPE_OPTIONS, AuditCode, AuditPanelComponent, AuditSeverity, BODY_CRUMB_LABEL, BOUND_ICON, BREAKPOINT_PRESENTATION, BUILDER_CANVAS_CONTAINER, BUILDER_CHROME_EN, BUILDER_FONT_LINK_ATTR, BUILDER_TOKEN_SCOPE_CLASS, BackgroundGroupStyleConfig, BorderGroupStyleConfig, BreadcrumbBarComponent, BuilderButtonBlockComponent, BuilderButtonComponentConfig, BuilderClipboardService, BuilderComponent, BuilderContainerComponent, BuilderContainerComponentConfig, BuilderDataSourceService, BuilderDialogComponent, BuilderDividerComponentConfig, BuilderHeadingComponentConfig, BuilderHistoryService, BuilderIconComponentConfig, BuilderImageComponentConfig, BuilderLinkComponentConfig, BuilderLinkedContainerComponent, BuilderLinkedContainerConfig, BuilderListComponentConfig, BuilderListItemComponentConfig, BuilderMode, BuilderRepeaterComponent, BuilderSpacerComponentConfig, ButtonBlockComponentConfig, CANVAS_EMPTY_IMAGE_LABEL_EN, CANVAS_EMPTY_IMAGE_LABEL_KEY, CANVAS_ROOT_RESET_CSS, COMPOSITE_PRESETS, CanvasDesignStateService, CanvasShowState, CardComponentConfig, ChildLayoutGroupStyleConfig, ComponentConfig, ComponentRegistryService, CompositeCanvasService, CompositePaletteGroup, CompositePresetId, DEFAULT_ESSENTIAL_TRAITS, DESCRIPTOR_MAX_LENGTH, DRAG_HANDLE_ATTR, DROP_REFUSED_CLASS, DataSourceRegistryService, DataSourceType, DialogComponentConfig, DimensionsGroupStyleConfig, DragEngineService, EASING_OPTIONS$1 as EASING_OPTIONS, EDITOR_CHROME_ATTRIBUTE, ESSENTIAL_TRAITS_BY_TYPE, EffectsGroupStyleConfig, FIELD_KIND_PRESETS, FIELD_PARTS, FORM_STATE_BLOCK_TYPES, FORM_TYPE, FieldComponentConfig, FieldGroupComponentConfig, FormComponentConfig, FormErrorComponentConfig, FormStateService, FormSuccessComponentConfig, GLOBALS_AFTER_CLASS, GalleryConfig, GlobalCanvasLayer, GroupStyleConfig, HIDDEN_AT_REST_LABEL_KEY, HIDDEN_AT_REST_ROLES, HIDDEN_AT_REST_TYPES, INSERT_REFUSAL_LABEL_KEYS, INTERACTION_STATES, INVERSE_ACTION, IOX_BUILDER_CANVAS, IOX_BUILDER_LABELS, IOX_CONTENT_TYPE_LABELS, IOX_DATA_SOURCE_ENDPOINTS, InsertRefusal, InteractionEngineService, InteractionPresetRegistryService, IoxBuilderModule, IoxDraggableDirective, IoxDropzoneDirective, LAYOUT_PRESETS, LayerTreeComponent, LayoutGroupStyleConfig, ListGroupStyleConfig, NodeAction, OverlayComponent, OverlayService, PALETTE_PRESET_DEFS, PanelChildComponent, PanelComponent, PanelEventService, PanelEventTypes, PanelTypes, PositionGroupStyleConfig, PresetRegistryService, RELATIONAL_STATES, RELATIONAL_STATE_BASE, REPEATER_SOURCE_PROP, REPEATER_TYPE, ROOT_ESCAPE_PX, ROUTE_ANIMATION_OPTIONS, RenderDirective, RepeaterComponentConfig, RootZone, SCREEN_WIDTH_OPTIONS, STRUCTURAL_STATES, SUPPORTED_STATES, SectionComponent, SectionComponentConfig, SelectionReveal, SizeGroupStyleConfig, SliderContainerComponent, SliderContainerConfig, SliderSlideComponent, SliderSlideConfig, SpacingGroupStyleConfig, StructureFix, StyleCategory, StyleRegistryService, TraitConfig as StyleTraitConfig, SubmitButtonComponentConfig, SymbolRegistryService, TARGETED_STATES, TARGETED_STATE_BASE, TRIGGER_OPTIONS, TextBlockComponentConfig, ToolbarAction, ToolbarComponent, TraitConfig, TraitInputType, TypographyGroupStyleConfig, UNITS_ALL, UNITS_DEG, UNITS_FIXED, UNITS_NO_VW, VALIDATION_STATES, VALIDATION_STATE_CLASS, ViewportService, ZOOM_OPTIONS, arrayItemSchemaFields, arraySchemaFields, auditNodes, bindingLabel, bindingLabels, buildCompositePreset, buildConsentPreset, buildElementStyleSpecimen, buildFieldKindPreset, buildFlavorSpecimen, buildFormPreset, buildFullStyleTraits, buildLayoutPreset, buildPalettePreset, buildPresetStyleTraits, builderCompositeFactory, canFluidise, canvasEmptyImageLabel, collapseColumnsProps, columnCountOf, defaultBuilderLabels, defaultPageSettings, dropChildren, dropTargetLabel, escapesRoot, essentialTraitsFor, findNodeLocation, findParentOf, flattenLayerTree, flattenSchemaFields, fluidiseProps, generateNodeId, globalCanvasLayer, insertRefusal, insertRefusalLabel, isHiddenAt, isHiddenAtRest, isPinnedGlobal, isSpecimen, markSpecimen, matchesControlSearch, nearestFormNode, nodeAncestorPath, nodeAncestorPathInEither, nodeDescriptor, nodeStyleMap, overlayGlobals, pathToNode, refreshSubtree, regenerateNodeIds, removalRefusal, reorderProps, repeaterSourceAlias, repeaterSubLabel, resolveInsertTarget, resolveTraitControllerType, resolveTraitOptions, retypeNode, rootEscapeBand, rootZone, selectionRevealOf, setStyleTrait, setTrait, shortDescriptor, sourceContentType, sourceTypeLabel, stackChildrenProps, summarise, syncEmptyImagePlaceholder, syncNodeDesign, syncNodeInputs, textNode, upsertNodeStyles, visibilityProps, walkNodes, wrapNode };
 //# sourceMappingURL=vectoriox-iox-builder.mjs.map