@vectoriox/iox-ui 5.34.0 → 5.36.0

package/generation-core/index.d.ts

@@ -87,7 +87,7 @@ declare const SPEC_SITE_PLAN_SHAPE: {
     readonly section: {
         readonly pattern: "string — a non-global pattern id";
         readonly "slots?": "{ [slot]: string } — the pattern's declared slots";
-        readonly "binding?": "string — the list source a pattern's $binding repeater iterates (exactly when it has one)";
+        readonly "binding?": "string — the list source a pattern's $binding repeater iterates (exactly when it has one); a $binding? pattern (faq.accordion) MAY take one — then its items come from that content";
         readonly "without?": "string[] — the pattern's optional parts to leave out";
     };
     readonly globals: {
@@ -813,6 +813,45 @@ declare const SPEC_SITE_PATTERNS: {
             }];
         };
     };
+    readonly "faq.accordion": {
+        readonly family: "faq";
+        readonly label: "FAQ — questions that open";
+        readonly node: {
+            readonly t: "Section";
+            readonly es: "section";
+            readonly c: readonly [{
+                readonly t: "Container";
+                readonly es: "box";
+                readonly lay: {
+                    readonly display: "flex";
+                    readonly flexDirection: "column";
+                    readonly gap: "14px";
+                    readonly maxWidth: "860px";
+                    readonly width: "100%";
+                    readonly margin: "0px auto 0px auto";
+                };
+                readonly c: readonly [{
+                    readonly t: "Text";
+                    readonly es: "eyebrow";
+                    readonly slot: "eyebrow";
+                    readonly ph: "copy";
+                    readonly text: "FAQ";
+                }, {
+                    readonly t: "Heading";
+                    readonly es: "h2";
+                    readonly level: "h2";
+                    readonly slot: "title";
+                    readonly ph: "copy";
+                    readonly text: "Questions people ask";
+                }, {
+                    readonly t: "Container";
+                    readonly recipe: "accordion";
+                    readonly src: "$binding?";
+                    readonly ph: "copy";
+                }];
+            }];
+        };
+    };
 };
 declare const SPEC_SITE_TEMPLATES: {
     readonly studio: {
@@ -1206,7 +1245,10 @@ interface PatternNode {
 }
 /** The composite-core recipes a pattern may stamp (`recipe`). */
 declare enum PatternRecipe {
-    Card = "card"
+    Card = "card",
+    /** CC2: the Accordion — Manual (three placeholder items), or From content when the section names a list
+     *  `binding` (`src: '$binding?'`): one template item bound to the type's question / answer fields. */
+    Accordion = "accordion"
 }
 /** A recipe node's `binds` keys → the part each binds (Card v2). */
 declare enum CardBindTarget {
@@ -1240,6 +1282,8 @@ declare enum PatternPlaceholder {
 declare enum PatternDirective {
     /** A Repeater's source: the section's `binding`. */
     Binding = "$binding",
+    /** The section MAY name a list `binding` (faq.accordion): with one, the recipe's items come from it. */
+    OptionalBinding = "$binding?",
     /** `each`: one plain node per page of the plan that is in the navigation (`inNav`), in plan order —
      *  words and routes written in, editable on the canvas (W1.1). */
     NavPages = "$navPages",
@@ -1266,6 +1310,8 @@ declare function patternSlots(pattern: SitePattern): string[];
 declare function patternOptionalParts(pattern: SitePattern): string[];
 /** True when the pattern has a Repeater iterating the section's `binding`. */
 declare function patternNeedsBinding(pattern: SitePattern): boolean;
+/** True when the pattern may take a section `binding` — it needs one, or names `$binding?` (CC2). */
+declare function patternTakesBinding(pattern: SitePattern): boolean;
 /** The scopes whose ITEM a pattern's bound Images take their alt text from (an Image that names no `alt`
  *  of its own): `item` (the row of a `$binding` Repeater — the section's list), `route` or `next`. Each
  *  needs a content type with a `previewTextField` (W1.1, Q7). */
@@ -1331,6 +1377,10 @@ interface SerializedNode {
     /** The part this node plays in a composite (composite-core: `card.title`; a navigation's `nav.drawer`,
      *  written by `planNavShape`). Additive; a node without one is a plain node. */
     role?: string;
+    /** An item's identity inside its composite (CC2: an Accordion item's `k1`…). Additive. */
+    itemKey?: string;
+    /** A targeted state's driving node (CC2: an icon's `trigger-on` → its item). */
+    stateTriggers?: Partial<Record<string, string>>;
     bindings: SerializedBinding[];
     interactions: unknown[];
     isGlobal?: boolean;
@@ -1657,5 +1707,5 @@ interface AddBarItemResult {
  */
 declare function addBarItem(globals: ReadonlyArray<SerializedNode>, options?: Pick<NavShapeOptions, 'newId'>): AddBarItemResult;
 
-export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, composeSite, createSerializedNode, findNavRoot, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, planNavShape, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
+export { BAR_ITEMS_MAX, BAR_ITEMS_MIN, BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, DEFAULT_PHONE_MENU_BREAKPOINT, FACT_KEYS, GlobalSlot, NAV_PART_LABELS, NAV_SHAPE_COPY, NEUTRAL_STYLE_PROPS, NODE_BASELINES, NavRole, NavShape, NavShapeError, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, PhoneMenuBreakpoint, PlaceholderKind, PlanDataSourceMode, PlanDataSourceType, RelativeOp, SAMPLE_IMAGE_REF, SITE_FACT_LABELS, SITE_PATTERNS, SITE_PLAN_VERSION, SITE_TEMPLATES, SPEC_SITE_FACTS, SPEC_SITE_PATTERNS, SPEC_SITE_PLAN_SHAPE, SPEC_SITE_TEMPLATES, STUDIO_TEMPLATE, SitePlanError, SitePlanIssueCode, SitePlanSourceKind, SiteTemplateError, SiteTemplateId, addBarItem, altSourceScopes, assertStyleSlots, assertValidSitePlan, barIconForRoute, composeSite, createSerializedNode, findNavRoot, navPages, navShapeBreakpoint, navShapeOf, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, patternTakesBinding, planFromTemplate, planNavShape, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
 export type { AddBarItemResult, CmsDataSourcePlan, ComposeContext, ComposeIssue, ComposedDataSource, ComposedItem, ComposedPage, ComposedPlaceholder, ComposedRoute, ComposedSite, ContentFieldPlan, ContentSeedPlan, ContentTypePlan, CreateNodeOptions, DataSourcePlan, FactKey, NavPage, NavShapeOptions, NavShapeResult, NodeBaseline, PagePlan, PageSectionPlan, PatternNode, RelativeDataSourcePlan, SerializedBinding, SerializedNode, SerializedResponsive, SiteBusiness, SitePattern, SitePlan, SitePlanIssue, SitePlanSource, SitePlanValidation, SiteTemplate, TemplatePlanInput };

package/index.d.ts

@@ -379,7 +379,7 @@ declare class BuilderHeadingComponent implements OnInit {
     private isBound;
     private syncTraitToPanel;
     static ɵfac: i0.ɵɵFactoryDeclaration<BuilderHeadingComponent, [{ optional: true; }, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderHeadingComponent, "h1[iox-heading],h2[iox-heading],h3[iox-heading],h4[iox-heading],h5[iox-heading],h6[iox-heading]", never, { "content": { "alias": "content"; "required": false; }; "level": { "alias": "level"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "node": { "alias": "node"; "required": false; }; "linkType": { "alias": "linkType"; "required": false; }; "url": { "alias": "url"; "required": false; }; "pageRoute": { "alias": "pageRoute"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<BuilderHeadingComponent, "h1[iox-heading],h2[iox-heading],h3[iox-heading],h4[iox-heading],h5[iox-heading],h6[iox-heading],span[iox-heading]", never, { "content": { "alias": "content"; "required": false; }; "level": { "alias": "level"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; "node": { "alias": "node"; "required": false; }; "linkType": { "alias": "linkType"; "required": false; }; "url": { "alias": "url"; "required": false; }; "pageRoute": { "alias": "pageRoute"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 interface EditableNode {
@@ -447,7 +447,11 @@ declare class ContainerComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ContainerComponent, "div[iox-container],section[iox-container],article[iox-container],header[iox-container],footer[iox-container],main[iox-container],nav[iox-container],ul[iox-container],ol[iox-container],li[iox-container]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; }, {}, never, never, false, never>;
 }
 
-/** Directive-host linked container: the `<a>` IS the host — no wrapper, no inner/outer split. */
+/**
+ * Directive-host linked container: the `<a>` IS the host — no wrapper, no inner/outer split. An Accordion's
+ * HEADER (CC2, role `accordion.trigger`) is created on a `<button>` instead — a button that opens its item,
+ * never a link; the engine puts it inside the `<hN>` its question's level names.
+ */
 declare class LinkedContainerComponent implements OnInit, OnDestroy {
     private elRef;
     private isPreview;
@@ -461,9 +465,11 @@ declare class LinkedContainerComponent implements OnInit, OnDestroy {
     constructor(elRef: ElementRef<HTMLElement>, isPreview: boolean);
     ngOnInit(): void;
     ngOnDestroy(): void;
+    /** True when created on a <button> (an Accordion header) — it never navigates. */
+    get isButton(): boolean;
     get resolvedHref(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<LinkedContainerComponent, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LinkedContainerComponent, "a[iox-linked-container]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "linkType": { "alias": "linkType"; "required": false; }; "url": { "alias": "url"; "required": false; }; "pageRoute": { "alias": "pageRoute"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LinkedContainerComponent, "a[iox-linked-container],button[iox-linked-container]", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "linkType": { "alias": "linkType"; "required": false; }; "url": { "alias": "url"; "required": false; }; "pageRoute": { "alias": "pageRoute"; "required": false; }; "target": { "alias": "target"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /**
@@ -1515,12 +1521,22 @@ declare function statePseudoClass(state: string): string;
  * so the look and the announcement are one fact.
  */
 declare enum ComponentState {
-    Current = "current"
-}
-/** The attribute selector each component state compiles to. */
+    Current = "current",
+    /** A composite part that IS on — an open accordion item, its header, its panel (board 9 "Open"). */
+    On = "on",
+    /** A part INSIDE an item, styled by its item being open (board 9 "Item open") — a TARGETED state: its
+     *  trigger is the item (`stateTriggers['trigger-on']`), compiled through `targetedStateSelector`. */
+    ItemOpen = "trigger-on"
+}
+/** The attribute selector each (non-targeted) component state compiles to. */
 declare const COMPONENT_STATE_SELECTOR: Readonly<Record<string, string>>;
-/** The component states a type offers in the Style panel's "Component state" group. */
-declare function componentStatesFor(type: string | null | undefined): ComponentState[];
+/** The composite roles that are themselves "on" when their item is open (they carry `data-iox-on`). */
+declare const ON_STATE_ROLES: ReadonlyArray<string>;
+/**
+ * The component states a node offers in the Style panel's "Component state" group: Current page (a link),
+ * Open (an accordion's item, header or panel), Item open (any other part inside an item — `insideItem`).
+ */
+declare function componentStatesFor(type: string | null | undefined, role?: string | null, insideItem?: boolean): ComponentState[];
 /**
  * What follows `.iox-node-<id>` in a stored state's rule: `:hover`, `:focus-visible`, or a component
  * state's attribute selector (`[aria-current="page"]`). Shared by the builder canvas and both engine paths.
@@ -1607,6 +1623,21 @@ declare const LEGACY_DIRECTION_KEY = "direction";
  * node renders. Pure; returns the map unchanged (same reference) when there is nothing to move.
  */
 declare function migrateLegacyDirection(styleProps: Record<string, any>): Record<string, any>;
+/** The Align trait's values: LOGICAL, so a text starts at the inline start of whatever direction it
+ *  reads in — the left in LTR, the right in RTL (vectoriox/iox-ui#16). */
+declare enum TextAlign {
+    Start = "start",
+    Center = "center",
+    End = "end",
+    Justify = "justify"
+}
+declare const TEXT_ALIGN_KEY = "textAlign";
+/**
+ * A saved node's own style map with the serialised default `textAlign: left` read as the logical
+ * `start` it compiles to — so the builder's panel highlights Start, and the next save stores it.
+ * Pure; returns the map unchanged (same reference) when there is nothing to move.
+ */
+declare function migrateLegacyTextAlign(styleProps: Record<string, any>): Record<string, any>;
 declare function isGradientPaint(value: unknown): boolean;
 /** The whole-value backdrop trait (DS2). A plain key — it is copied, not stripped — but it feeds
  *  the backdrop group's output, so a breakpoint layer that sets it must count as touching it. */
@@ -1682,6 +1713,20 @@ declare function nearestCommonAncestorId(root: readonly StyleTreeNode[], styledC
  * `scopeCssId` MUST be a value returned by `nearestCommonAncestorId` for the same pair.
  */
 declare function buildTargetedStateSelector(scopeCssId: string, triggerCssId: string, styledCssId: string, base: string): string;
+/**
+ * The same three topologies for any trigger SUFFIX — a pseudo-class (`:hover`) or an attribute the renderers
+ * write (`[data-iox-on]`, CC2's "Item open").
+ */
+declare function buildTargetedSuffixSelector(scopeCssId: string, triggerCssId: string, styledCssId: string, suffix: string): string;
+/**
+ * The targeted states and what follows the TRIGGER's class in each: `trigger-hover` — the chosen element is
+ * hovered; `trigger-on` — the chosen item is open (CC2: an Icon turns when ITS item opens; the trigger is the
+ * item, an ancestor, so the rule is `.item[data-iox-on] .icon`). Shared by the builder canvas and both
+ * engine paths.
+ */
+declare const TARGETED_STATE_SUFFIX: Readonly<Record<string, string>>;
+/** The selector body of a targeted state's rule, or null for a state that is not targeted. */
+declare function targetedStateSelector(state: string, scopeCssId: string, triggerCssId: string, styledCssId: string): string | null;
 
 /**
  * parts — the failure design (forms-and-inputs-plan.md Part 2, board 7). A compound component
@@ -2054,9 +2099,26 @@ interface DataSourceQueryFilter {
      *  fallback too. An empty default with no query-param value means the filter is DROPPED. */
     defaultValue?: string;
 }
+/** The order a query source returns its rows in (CC2, board 4 "Sort" — the data source popover). */
+declare enum DataSourceSortDir {
+    Asc = "asc",
+    Desc = "desc"
+}
+interface DataSourceSort {
+    /** A field of the content type (a dot path into a nested object is allowed). */
+    field?: string;
+    dir?: DataSourceSortDir | `${DataSourceSortDir}`;
+}
+/** The query parameter carrying the order: `sort=order` ascending, `sort=-order` descending. A CONTROL like
+ *  `limit`, not a field filter — the public controllers split it out (iox-cms `query-controls.ts`). */
+declare const SORT_PARAM = "sort";
+/** `sort`'s wire value, or null when the source sets no (valid) order. */
+declare function sortParamValue(sort: DataSourceSort | null | undefined): string | null;
 interface DataSourceRequestSpec {
     contentType?: string;
     limit?: number;
+    /** A query source's order (CC2). Absent = the backend's natural order, as before. */
+    sort?: DataSourceSort;
     filterByRouteParam?: DataSourceRouteFilter;
     filterByQueryParams?: DataSourceQueryFilter[];
 }
@@ -2091,6 +2153,7 @@ type DataSourcePlan = {
     resource: string;
     filter: Record<string, any>;
     limit?: number;
+    sort?: string;
     mode: DataSourceMode;
 } | {
     kind: 'external';
@@ -3152,5 +3215,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SectionComponent, SwiperModuleName, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildInteractionKeyframes, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, excludeSelf, feelFor, finalKeyframe, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, motionAllowed, nearestCommonAncestorId, needsAccessibleName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, prefersReducedMotion, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperModuleNames, syncNodeA11yAttributes, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { A11yNodeSource, BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };
+export { A11yAttribute, A11yTrait, ACCESSIBLE_NAME_TYPES, AOSService, ARIA_CURRENT_PAGE, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, COMPONENT_STATE_SELECTOR, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CURRENT_LINK_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ComponentState, ContainerComponent, ContextStore, DECORATIVE_TYPES, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DIALOG_CLOSE_ABOVE_ATTRIBUTE, DIALOG_NODE_TYPE, DataSourceSortDir, DeclarationContext, ENTRANCE_ACTION_TYPES, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_HIDDEN_ATTRIBUTE, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, ON_STATE_ROLES, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RESERVED_ALIAS_PREFIX, SORT_PARAM, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SectionComponent, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildInteractionKeyframes, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, excludeSelf, feelFor, finalKeyframe, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, prefersReducedMotion, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, sortParamValue, stateNamesIn, statePseudoClass, stateSelectorSuffix, stripSuppressedProps, swiperAutoplayAllowed, swiperModuleNames, syncNodeA11yAttributes, targetedStateSelector, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { A11yNodeSource, BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSort, DataSourceSpec, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectoriox/iox-ui",
-  "version": "5.34.0",
+  "version": "5.36.0",
   "peerDependencies": {
     "@angular/common": ">=20.0.0",
     "@angular/core": ">=20.0.0",

package/src/composite-core/accordion-runtime.ts

@@ -0,0 +1,354 @@
+import {
+    AccordionBehaviour, AccordionClass, AccordionDefaultOn, accordionDomIds, accordionFocusIndex, accordionKeyAction, AccordionRole,
+    ACCORDION_DEFAULT_ONS, COMPOSITE_ATTRIBUTE, DEFAULT_ON_ATTRIBUTE, initialAccordionOpen, ITEM_KEY_ATTRIBUTE, MULTIPLE_ATTRIBUTE,
+    nextAccordionState, ON_ATTRIBUTE, openAccordionItem, UNTIL_FOUND,
+} from './accordion';
+
+/**
+ * The Accordion's RUNTIME (CC2) — ONE copy, DOM only, for the builder canvas and the live site (both engine
+ * 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)
+ *     .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
+ *
+ * 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
+ * change dispatches `iox-item-on` / `iox-item-off` on the item, the `itemOn` / `itemOff` interaction
+ * triggers. The open set is LIVE ∪ FORCED: the builder forces items open (a selection inside a closed panel,
+ * "All open"); the live site forces nothing.
+ */
+
+export const ITEM_ON_EVENT = 'iox-item-on';
+export 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 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)';
+
+export interface AccordionRuntimeOptions {
+    /** The root's node id — the ARIA ids' prefix (else read from the root's `iox-node-<id>` class). */
+    rootId?: string;
+    /** The behaviour (else read from the root's data attributes). */
+    behaviour?: AccordionBehaviour;
+    /** Keys forced open on top of the live state (the builder's design state). */
+    forced?: () => ReadonlySet<string>;
+    /** Re-stamp when the markup under the root changes (the builder canvas re-renders parts). */
+    observe?: boolean;
+    /** True to stop motion (default: the visitor's reduced-motion setting). */
+    reducedMotion?: () => boolean;
+}
+
+/** The accordion an element belongs to (the element itself when it is a root). */
+export function closestAccordion(el: Element | null | undefined): HTMLElement | null {
+    return (el?.closest?.(ROOT_SELECTOR) as HTMLElement | null) ?? null;
+}
+
+/** The item an element sits in (itself when it is one). */
+export function closestAccordionItem(el: Element | null | undefined): HTMLElement | null {
+    return (el?.closest?.(ITEM_SELECTOR) as HTMLElement | null) ?? null;
+}
+
+/** 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. */
+export function onAccordionItemState(el: Element, on: boolean, handler: () => void): () => void {
+    const item = closestAccordionItem(el);
+    if (!item) return () => undefined;
+    const type = on ? ITEM_ON_EVENT : ITEM_OFF_EVENT;
+    item.addEventListener(type, handler);
+    return () => item.removeEventListener(type, handler);
+}
+
+/** True when the element's item is open now. */
+export function isAccordionItemOn(el: Element): boolean {
+    return !!closestAccordionItem(el)?.hasAttribute(ON_ATTRIBUTE);
+}
+
+const nodeIdOf = (el: Element): string => {
+    for (const c of Array.from(el.classList)) if (c.startsWith('iox-node-')) return c.slice('iox-node-'.length);
+    return '';
+};
+
+function behaviourOf(root: Element): AccordionBehaviour {
+    const raw = root.getAttribute(DEFAULT_ON_ATTRIBUTE);
+    return {
+        multiple: root.hasAttribute(MULTIPLE_ATTRIBUTE),
+        defaultOn: ACCORDION_DEFAULT_ONS.includes(raw as AccordionDefaultOn) ? raw as AccordionDefaultOn : AccordionDefaultOn.First,
+    };
+}
+
+function setAttr(el: Element | null | undefined, name: string, value: string | null): void {
+    if (!el) return;
+    if (value === null) { if (el.hasAttribute(name)) el.removeAttribute(name); }
+    else if (el.getAttribute(name) !== value) el.setAttribute(name, value);
+}
+
+export class AccordionRuntime {
+    private live: Set<string>;
+    private shown = new Set<string>();
+    private readonly closing = new Map<string, ReturnType<typeof setTimeout>>();
+    private observer: MutationObserver | null = null;
+    private stampQueued = false;
+    private behaviourValue: AccordionBehaviour;
+    /** The builder attaches a root before its items render: the saved default is applied once they do. */
+    private awaitingItems = false;
+
+    constructor(readonly root: HTMLElement, private readonly options: AccordionRuntimeOptions = {}) {
+        this.behaviourValue = options.behaviour ?? behaviourOf(root);
+        root.setAttribute(COMPOSITE_ATTRIBUTE, AccordionRole.Accordion);
+        // 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.)
+        const items = this.items();
+        const serverStamped = !options.behaviour && items.some(i => i.hasAttribute(ITEM_KEY_ATTRIBUTE));
+        this.live = serverStamped
+            ? new Set(items.filter(i => i.hasAttribute(ON_ATTRIBUTE)).map(i => this.keyOf(i, items)))
+            : initialAccordionOpen(items.map(i => this.keyOf(i, items)), this.behaviourValue.defaultOn);
+        this.awaitingItems = !serverStamped && !items.length;
+        this.shown = new Set(this.live);
+        // Capture: on the builder canvas every part's own listener stops the click (it selects that part), and
+        // the header must still toggle — the canvas is a live runtime.
+        root.addEventListener('click', this.onClick, true);
+        root.addEventListener('keydown', this.onKeydown);
+        root.addEventListener('beforematch', this.onBeforeMatch, true);
+        if (options.observe && typeof MutationObserver !== 'undefined') {
+            this.observer = new MutationObserver(() => this.queueStamp());
+            this.observer.observe(root, { childList: true, subtree: true });
+        }
+        this.stamp(true);
+    }
+
+    get behaviour(): AccordionBehaviour {
+        return this.behaviourValue;
+    }
+
+    /** The behaviour changed in the panel: re-read, and start from the new default. */
+    setBehaviour(behaviour: AccordionBehaviour): void {
+        const changedDefault = behaviour.defaultOn !== this.behaviourValue.defaultOn;
+        this.behaviourValue = behaviour;
+        if (behaviour.multiple) this.root.setAttribute(MULTIPLE_ATTRIBUTE, '');
+        else this.root.removeAttribute(MULTIPLE_ATTRIBUTE);
+        this.root.setAttribute(DEFAULT_ON_ATTRIBUTE, behaviour.defaultOn);
+        if (changedDefault) this.resetLive();
+        else this.stamp();
+    }
+
+    /** THIS accordion's items, in document order (a nested accordion's items are its own). */
+    items(): HTMLElement[] {
+        return Array.from(this.root.querySelectorAll<HTMLElement>(ITEM_SELECTOR)).filter(i => closestAccordion(i.parentElement) === this.root);
+    }
+
+    /** The open keys the live state holds (before anything forced). */
+    get liveKeys(): ReadonlySet<string> {
+        return this.live;
+    }
+
+    /** The keys showing open right now. */
+    get openKeys(): ReadonlySet<string> {
+        return this.shown;
+    }
+
+    keyOf(item: Element, items: HTMLElement[] = this.items()): string {
+        return item.getAttribute(ITEM_KEY_ATTRIBUTE) || `item-${items.indexOf(item as HTMLElement)}`;
+    }
+
+    toggle(key: string): void {
+        this.live = nextAccordionState(this.live, key, this.behaviourValue);
+        this.stamp();
+    }
+
+    open(key: string): void {
+        this.live = openAccordionItem(this.live, key, this.behaviourValue);
+        this.stamp();
+    }
+
+    /** Back to the saved default ("Showing on canvas ▸ As saved"). */
+    resetLive(): void {
+        const items = this.items();
+        this.live = initialAccordionOpen(items.map(i => this.keyOf(i, items)), this.behaviourValue.defaultOn);
+        this.stamp();
+    }
+
+    /** The forced set changed (builder design state): show it. */
+    refresh(): void {
+        this.stamp();
+    }
+
+    destroy(): void {
+        this.root.removeEventListener('click', this.onClick, true);
+        this.root.removeEventListener('keydown', this.onKeydown);
+        this.root.removeEventListener('beforematch', this.onBeforeMatch, true);
+        this.observer?.disconnect();
+        this.observer = null;
+        for (const t of this.closing.values()) clearTimeout(t);
+        this.closing.clear();
+    }
+
+    private queueStamp(): void {
+        if (this.stampQueued) return;
+        this.stampQueued = true;
+        const run = () => { this.stampQueued = false; this.stamp(); };
+        if (typeof queueMicrotask === 'function') queueMicrotask(run); else Promise.resolve().then(run);
+    }
+
+    private reduced(): boolean {
+        if (this.options.reducedMotion) return this.options.reducedMotion();
+        try { return typeof matchMedia === 'function' && matchMedia(REDUCED_MOTION).matches; } catch { return false; }
+    }
+
+    /** Write every item's state into its markup; announce what changed. */
+    private stamp(first = false): void {
+        // Our own writes must not wake the observer (they are attributes; it watches the child lists only).
+        const items = this.items();
+        if (this.awaitingItems && items.length) {
+            this.awaitingItems = false;
+            this.live = initialAccordionOpen(items.map(i => this.keyOf(i, items)), this.behaviourValue.defaultOn);
+            first = true;
+        }
+        const forced = this.options.forced?.() ?? new Set<string>();
+        const rootId = this.options.rootId ?? nodeIdOf(this.root);
+        const next = new Set<string>();
+        items.forEach((item, index) => {
+            const key = this.keyOf(item, items);
+            const on = this.live.has(key) || forced.has(key);
+            if (on) next.add(key);
+            this.stampItem(item, key, index, on, rootId, first);
+        });
+        const was = first ? new Set<string>() : this.shown;
+        this.shown = next;
+        // On the first stamp an item open by default HAS opened: its `itemOn` listeners attached so far hear it
+        // (the builder renders an item's parts, and attaches their interactions, before its root's runtime; the
+        // live engine attaches the runtime first and its interactions run an already-open item's at once).
+        for (const item of items) {
+            const key = this.keyOf(item, items);
+            if (next.has(key) && !was.has(key)) dispatch(item, ITEM_ON_EVENT);
+            else if (!next.has(key) && was.has(key)) dispatch(item, ITEM_OFF_EVENT);
+        }
+    }
+
+    private stampItem(item: HTMLElement, key: string, index: number, on: boolean, rootId: string, first: boolean): void {
+        const ids = accordionDomIds(rootId, key);
+        if (!item.hasAttribute(ITEM_KEY_ATTRIBUTE)) item.setAttribute(ITEM_KEY_ATTRIBUTE, key);
+        setAttr(item, ON_ATTRIBUTE, on ? '' : null);
+        const button = this.own(item, BUTTON_SELECTOR);
+        const track = this.own(item, TRACK_SELECTOR);
+        const region = this.own(item, REGION_SELECTOR);
+        const panel = this.own(item, PANEL_SELECTOR);
+        setAttr(button, 'type', 'button');
+        setAttr(button, 'id', ids.trigger);
+        setAttr(button, 'aria-expanded', on ? 'true' : 'false');
+        setAttr(button, 'aria-controls', ids.panel);
+        setAttr(button, ON_ATTRIBUTE, on ? '' : null);
+        setAttr(track, ON_ATTRIBUTE, on ? '' : null);
+        setAttr(panel, ON_ATTRIBUTE, on ? '' : null);
+        setAttr(region, 'role', 'region');
+        setAttr(region, 'id', ids.panel);
+        setAttr(region, 'aria-labelledby', ids.trigger);
+        if (!region) return;
+        const pending = this.closing.get(key);
+        if (on) {
+            if (pending) { clearTimeout(pending); this.closing.delete(key); }
+            setAttr(region, 'hidden', null);
+            return;
+        }
+        if (region.hasAttribute('hidden') || pending) return;
+        // Closing: the track collapses first (its transition), THEN the region is hidden — hiding it at once
+        // would collapse it with no motion. At first paint, or under reduced motion, it is hidden at once.
+        if (first || this.reduced()) { setAttr(region, 'hidden', UNTIL_FOUND); return; }
+        const hide = () => {
+            this.closing.delete(key);
+            if (!item.hasAttribute(ON_ATTRIBUTE)) setAttr(region, 'hidden', UNTIL_FOUND);
+        };
+        this.closing.set(key, setTimeout(hide, this.closeDelay(track)));
+    }
+
+    private closeDelay(track: Element | null): number {
+        try {
+            const view = track?.ownerDocument?.defaultView;
+            const raw = track && view ? view.getComputedStyle(track).transitionDuration : '';
+            const ms = Math.max(0, ...String(raw).split(',').map(s => (s.trim().endsWith('ms') ? parseFloat(s) : parseFloat(s) * 1000)).filter(n => !isNaN(n)));
+            return Math.min(MAX_CLOSE_MS, ms + 20);
+        } catch { return 0; }
+    }
+
+    /** The element `selector` matches inside `item` that belongs to it, not to an item nested in it. */
+    private own(item: HTMLElement, selector: string): HTMLElement | null {
+        return Array.from(item.querySelectorAll<HTMLElement>(selector)).find(el => closestAccordionItem(el) === item) ?? null;
+    }
+
+    private buttons(): HTMLElement[] {
+        return this.items().map(i => this.own(i, BUTTON_SELECTOR)).filter((b): b is HTMLElement => !!b);
+    }
+
+    private readonly onClick = (event: Event): void => {
+        const button = (event.target as Element | null)?.closest?.(BUTTON_SELECTOR);
+        if (!button || closestAccordion(button) !== this.root) return;
+        const item = closestAccordionItem(button);
+        if (!item) return;
+        event.preventDefault();
+        this.toggle(this.keyOf(item));
+    };
+
+    private readonly onKeydown = (event: Event): void => {
+        const e = event as KeyboardEvent;
+        const action = accordionKeyAction(e.key);
+        const button = (e.target as Element | null)?.closest?.(BUTTON_SELECTOR);
+        if (!action || !button || closestAccordion(button) !== this.root) return;
+        const buttons = this.buttons();
+        const at = buttons.indexOf(button as HTMLElement);
+        const target = buttons[accordionFocusIndex(action, at, buttons.length)];
+        if (!target) return;
+        e.preventDefault();
+        target.focus();
+    };
+
+    private readonly onBeforeMatch = (event: Event): void => {
+        const region = (event.target as Element | null)?.closest?.(REGION_SELECTOR);
+        const item = closestAccordionItem(region);
+        if (!item || closestAccordion(item.parentElement) !== this.root) return;
+        this.open(this.keyOf(item));
+    };
+}
+
+function dispatch(el: Element, type: string): void {
+    const Ctor = (globalThis as { CustomEvent?: typeof CustomEvent }).CustomEvent;
+    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
+ *  null when the root already had one (so a caller destroys only what it created). */
+export function attachAccordionAt(root: HTMLElement, options: Omit<AccordionRuntimeOptions, 'rootId' | 'behaviour'> = {}): AccordionRuntime | null {
+    if (ATTACHED.has(root)) return null;
+    const runtime = new AccordionRuntime(root, options);
+    ATTACHED.set(root, runtime);
+    return runtime;
+}
+
+/** Attach the runtime to every accordion under `container` that has none yet. Returns the new runtimes. */
+export function attachAccordions(container: ParentNode, options: Omit<AccordionRuntimeOptions, 'rootId' | 'behaviour'> = {}): AccordionRuntime[] {
+    const out: AccordionRuntime[] = [];
+    container.querySelectorAll<HTMLElement>(ROOT_SELECTOR).forEach(root => {
+        const runtime = attachAccordionAt(root, options);
+        if (runtime) out.push(runtime);
+    });
+    return out;
+}
+
+/** Detach a runtime `attachAccordions` created. */
+export function detachAccordion(runtime: AccordionRuntime): void {
+    runtime.destroy();
+    ATTACHED.delete(runtime.root);
+}
+
+const ATTACHED = new WeakMap<Element, AccordionRuntime>();