@vectoriox/iox-ui 5.31.1 → 5.32.0

package/generation-core/index.d.ts

@@ -105,10 +105,12 @@ declare const SPEC_SITE_PATTERNS: {
         readonly family: "nav";
         readonly label: "Navigation bar";
         readonly global: "before";
+        readonly phoneMenu: "drawer";
         readonly node: {
             readonly t: "Container";
             readonly es: "nav";
             readonly tag: "nav";
+            readonly role: "nav";
             readonly lay: {
                 readonly display: "flex";
                 readonly flexWrap: "wrap";
@@ -120,6 +122,7 @@ declare const SPEC_SITE_PATTERNS: {
                 readonly t: "LinkedContainer";
                 readonly es: "box";
                 readonly href: "/";
+                readonly role: "nav.brand";
                 readonly c: readonly [{
                     readonly t: "Heading";
                     readonly es: "h3";
@@ -130,6 +133,7 @@ declare const SPEC_SITE_PATTERNS: {
             }, {
                 readonly t: "Container";
                 readonly es: "box";
+                readonly role: "nav.links";
                 readonly lay: {
                     readonly display: "flex";
                     readonly flexWrap: "wrap";
@@ -143,12 +147,14 @@ declare const SPEC_SITE_PATTERNS: {
                     readonly each: "$navPages";
                     readonly bind: "page.name";
                     readonly href: "$page.route";
+                    readonly role: "nav.link";
                 }, {
                     readonly t: "ButtonBlock";
                     readonly es: "button-primary";
                     readonly href: "/contact";
                     readonly slot: "cta";
                     readonly text: "Get in touch";
+                    readonly role: "nav.cta";
                 }];
             }];
         };
@@ -1160,9 +1166,11 @@ interface SitePlan {
  * per page in the navigation (`$navPages`) · `href` a page route (`$page.route` = the stamped page's) ·
  * `param` the value of the route's `:param` · `optional` a part a page may leave out (`without`) ·
  * `preset` a forms-core form preset (its fields, submit and Success/Error words) · `control` / `label` /
- * `required` a Field's · `c` children · `recipe` a composite-core recipe stamped whole (`card`: Card v2 —
- * its `layout`, the optional `parts` it leaves out, and `binds`, a binding path per part: `image`,
- * `eyebrow`, `title`, `text`; `href` + `param` link the whole card through its title).
+ * `required` a Field's · `role` the node's part in its composite (`nav.brand`…) · `c` children · `recipe` a
+ * composite-core recipe stamped whole (`card`: Card v2 — its `layout`, the optional `parts` it leaves out, and
+ * `binds`, a binding path per part: `image`, `eyebrow`, `title`, `text`; `href` + `param` link the whole card
+ * through its title). A header pattern's `phoneMenu` names its phone shape (drawer · bar · both), stamped by
+ * `planNavShape` (CC1).
  */
 interface PatternNode {
     readonly t: string;
@@ -1188,6 +1196,8 @@ interface PatternNode {
     readonly control?: string;
     readonly label?: string;
     readonly required?: boolean;
+    /** The node's part in its composite (`nav.brand`, `nav.links`…), written to the node's `role`. */
+    readonly role?: string;
     readonly c?: ReadonlyArray<PatternNode>;
     readonly recipe?: string;
     readonly layout?: string;
@@ -1216,6 +1226,8 @@ interface SitePattern {
     readonly label: string;
     /** Set on a header/footer pattern: it renders on every page, before or after the page. */
     readonly global?: `${PatternGlobalPosition}`;
+    /** A navigation pattern's phone shape (CC1): `planNavShape` adds it after the pattern is stamped. */
+    readonly phoneMenu?: 'drawer' | 'bar' | 'both';
     readonly node: PatternNode;
 }
 declare const SITE_PATTERNS: Readonly<Record<string, SitePattern>>;
@@ -1316,7 +1328,8 @@ interface SerializedNode {
     stateStyles?: Partial<Record<string, Record<string, unknown>>>;
     responsive?: SerializedResponsive;
     elementStyle?: string;
-    /** The part this node plays in a composite (composite-core: `card.title`). */
+    /** 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;
     bindings: SerializedBinding[];
     interactions: unknown[];
@@ -1537,5 +1550,112 @@ declare function parseSampleImageRef(value: unknown): number | null;
  */
 declare function composeSite(plan: SitePlan, context: ComposeContext): ComposedSite;
 
-export { BASELINE_ROLES, BaselineRole, BindScope, CardBindTarget, ComposeError, ComposeIssueCode, DANGLING_LINK_CODES, FACT_KEYS, GlobalSlot, NEUTRAL_STYLE_PROPS, NODE_BASELINES, PatternDirective, PatternGlobalPosition, PatternPlaceholder, PatternRecipe, 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, altSourceScopes, assertStyleSlots, assertValidSitePlan, composeSite, createSerializedNode, nextSourceOf, nodeBindPaths, parseSampleImageRef, patternById, patternNeedsBinding, patternNodes, patternOptionalParts, patternScopes, patternSlots, planFromTemplate, releasedLayoutDefaults, requiredShapeKeys, routeParams, sampleImageRef, setStyleProps, shapeKeys, validateSitePlan, walkSerialized };
-export type { CmsDataSourcePlan, ComposeContext, ComposeIssue, ComposedDataSource, ComposedItem, ComposedPage, ComposedPlaceholder, ComposedRoute, ComposedSite, ContentFieldPlan, ContentSeedPlan, ContentTypePlan, CreateNodeOptions, DataSourcePlan, FactKey, NodeBaseline, PagePlan, PageSectionPlan, PatternNode, RelativeDataSourcePlan, SerializedBinding, SerializedNode, SerializedResponsive, SiteBusiness, SitePattern, SitePlan, SitePlanIssue, SitePlanSource, SitePlanValidation, SiteTemplate, TemplatePlanInput };
+/**
+ * The phone shapes of a navigation bar (complex-components plan CC1, §7a + R1; boards 1–3). ONE pure tree
+ * edit, `planNavShape`, turns a site's header into the shape the author (the Navigation bar's "Phone
+ * menu" section) or the composer (`nav.inline-cta`'s `phoneMenu`) asks for:
+ *
+ * - **Drawer** — a menu button in the header opens a slide-in Dialog at the end edge that lists every
+ *   page (board 1). The drawer is a child of the Navigation bar.
+ * - **Bottom bar** — an app-style bar fixed to the bottom of the screen with up to five pages, no drawer
+ *   (board 2). The phone header keeps only the brand (Q4).
+ * - **Both** — the bar with four pages and More, which opens the drawer; the drawer is then its own
+ *   global, beside the Navigation bar (board 2's layer tree).
+ *
+ * Every part is a real node with a `role` (R2): editable, selectable, styled by its element style. Parts
+ * a shape keeps are passed through untouched, so an author's edits survive a change of shape; the parts
+ * it no longer has are removed (undo brings them back — the caller records ONE history step). Nothing
+ * here reads a clock or a random source: ids come from `newId` (deterministic by default, so the
+ * composer's output is byte-stable).
+ */
+declare enum NavShape {
+    Drawer = "drawer",
+    Bar = "bar",
+    Both = "both"
+}
+/** The roles of a navigation's parts (the composite plan's `role` field, here for the nav). */
+declare enum NavRole {
+    Root = "nav",
+    Brand = "nav.brand",
+    Links = "nav.links",
+    Link = "nav.link",
+    Cta = "nav.cta",
+    MenuButton = "nav.menu-button",
+    Drawer = "nav.drawer",
+    DrawerHead = "nav.drawer-head",
+    DrawerClose = "nav.drawer-close",
+    DrawerLinks = "nav.drawer-links",
+    DrawerLink = "nav.drawer-link",
+    DrawerCta = "nav.drawer-cta",
+    Bar = "nav.bar",
+    BarItem = "nav.bar-item",
+    More = "nav.more"
+}
+/** The breakpoints a phone menu may switch at (the responsive Breakpoint ids; Q5: Mobile landscape). */
+declare enum PhoneMenuBreakpoint {
+    Tablet = "tablet",
+    Mobile = "mobile",
+    Small = "small"
+}
+declare const DEFAULT_PHONE_MENU_BREAKPOINT = PhoneMenuBreakpoint.Mobile;
+/** The bar's item count, More included (Q2: 3–5; iOS and Material both cap at five). */
+declare const BAR_ITEMS_MIN = 3;
+declare const BAR_ITEMS_MAX = 5;
+interface NavShapeOptions {
+    /** Where the phone shape takes over (≤ this breakpoint). Default Mobile landscape (≤767). */
+    at?: PhoneMenuBreakpoint | `${PhoneMenuBreakpoint}`;
+    /** Items in the bar, More included (3–5). Default: 5 for Bottom bar, 4 + More for Both. */
+    barItems?: number;
+    /** A new part's id (the builder passes its id generator). Default: `<nav id>-<suffix>`. */
+    newId?: (suffix: string) => string;
+}
+interface NavShapeResult {
+    /** The globals after the edit (the Navigation bar edited in place, the drawer/bar added or removed). */
+    globals: SerializedNode[];
+    shape: NavShape;
+    at: PhoneMenuBreakpoint;
+}
+declare class NavShapeError extends Error {
+}
+/** The words the parts carry — site copy, editable like any other (the composer writes English copy). */
+declare const NAV_SHAPE_COPY: {
+    readonly menu: "Menu";
+    readonly closeMenu: "Close menu";
+    readonly more: "More";
+    readonly home: "Home";
+};
+/** The layer names of the parts (R2: the tree, the breadcrumb and the toolbar read them). */
+declare const NAV_PART_LABELS: Readonly<Record<string, string>>;
+declare function barIconForRoute(route: string): string;
+/** One page the navigation links to, read off its links. */
+interface NavPage {
+    label: string;
+    route: string;
+}
+/** The Navigation bar: the global with the root role, else the first global wearing the `nav` style. */
+declare function findNavRoot(globals: ReadonlyArray<SerializedNode>, navId?: string | null): SerializedNode | null;
+/** The shape a site's globals are in now, or null when there is no Navigation bar. */
+declare function navShapeOf(globals: ReadonlyArray<SerializedNode>): NavShape | null;
+/** The breakpoint the phone shape takes over at, read off the header's links row (default Mobile). */
+declare function navShapeBreakpoint(globals: ReadonlyArray<SerializedNode>): PhoneMenuBreakpoint;
+/** The pages the header links to, in order: its Links (W1.1 — one plain Link per page in the navigation). */
+declare function navPages(root: SerializedNode): NavPage[];
+/**
+ * Put a site's header into `shape`. The Navigation bar is `navId` or the global carrying the root role
+ * (else the first Container wearing `nav`, which this then marks with roles). Returns new globals;
+ * the input is not mutated.
+ */
+declare function planNavShape(globals: ReadonlyArray<SerializedNode>, shape: NavShape, options?: NavShapeOptions, navId?: string | null): NavShapeResult;
+interface AddBarItemResult {
+    globals: SerializedNode[];
+    /** False when the bar is full (5 items, More included — Q2) or there is no bar. */
+    added: boolean;
+}
+/**
+ * The bar's Items list "Add item" (board 2): one more item, before More — the next navigation page the
+ * bar does not link to yet (Home when every page is there). Refused at five (Q2). Input not mutated.
+ */
+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 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

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import * as i3 from '@angular/platform-browser/animations';
 import Lenis from 'lenis';
 import * as i2 from '@angular/common';
+import { OpenerNodeLike } from '@vectoriox/iox-ui/actions-core';
 export * from '@vectoriox/iox-ui/design-core';
 
 declare class ViewPositionDirective implements AfterViewInit {
@@ -1397,6 +1398,48 @@ declare class IoxComponentRegistryService {
     static ɵprov: i0.ɵɵInjectableDeclaration<IoxComponentRegistryService>;
 }
 
+/**
+ * Which Swiper modules a Slider loads, and how its autoplay boots — a pure decision, so the module list
+ * is unit-tested (CC1 R1/R2 floor; complex-components plan §7c). Swiper's A11y module is ALWAYS loaded:
+ * it gives the container `aria-roledescription="carousel"`, every slide "slide" and an "n of m" label, and
+ * keeps the live region quiet while it rotates. Autoplay never boots under reduced motion (Publishable
+ * gate #6). The rotation pause control and the slider parts as nodes are CC3.
+ */
+declare enum SwiperModuleName {
+    A11y = "A11y",
+    Navigation = "Navigation",
+    Pagination = "Pagination",
+    Scrollbar = "Scrollbar",
+    Autoplay = "Autoplay",
+    Keyboard = "Keyboard",
+    Mousewheel = "Mousewheel",
+    Zoom = "Zoom",
+    Grid = "Grid",
+    Parallax = "Parallax"
+}
+interface SwiperModuleFlags {
+    enableNavigation?: boolean;
+    enablePagination?: boolean;
+    enableScrollbar?: boolean;
+    enableAutoplay?: boolean;
+    enableKeyboard?: boolean;
+    enableMousewheel?: boolean;
+    enableZoom?: boolean;
+    enableGrid?: boolean;
+    enableParallax?: boolean;
+}
+/** True when the Slider's autoplay may start: on, and the visitor has not asked for reduced motion. */
+declare function swiperAutoplayAllowed(enableAutoplay: boolean | undefined, motionAllowed: boolean): boolean;
+/** The modules to load, A11y first. */
+declare function swiperModuleNames(flags: SwiperModuleFlags, motionAllowed: boolean): SwiperModuleName[];
+/** Swiper's A11y options: carousel / slide role descriptions and an "n of m" slide label. */
+declare const SWIPER_A11Y_OPTIONS: {
+    readonly enabled: true;
+    readonly containerRoleDescriptionMessage: "carousel";
+    readonly itemRoleDescriptionMessage: "slide";
+    readonly slideLabelMessage: "{{index}} of {{slidesLength}}";
+};
+
 /**
  * style-compiler — the SINGLE source of truth for turning a node's style map into
  * CSS declarations. Framework-agnostic (no Angular): consumed by both renderers.
@@ -1465,6 +1508,24 @@ declare function compileDeclarations(props: Record<string, any>, importantProps?
 declare const STATE_PSEUDO_CLASS: Readonly<Record<string, string>>;
 /** The pseudo-class a stored state compiles to (`focus` → `focus-visible`, everything else itself). */
 declare function statePseudoClass(state: string): string;
+/**
+ * Component states (CC1 N2; composite plan T12): states a node is IN because of what it is, not where
+ * the pointer is — so they compile to an ATTRIBUTE the renderers write, never a pseudo-class. `current`
+ * is the link to the page the visitor is on (`aria-current="page"`, written by `nodeA11yAttributes`),
+ * so the look and the announcement are one fact.
+ */
+declare enum ComponentState {
+    Current = "current"
+}
+/** The attribute selector each 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[];
+/**
+ * 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.
+ */
+declare function stateSelectorSuffix(state: string): string;
 /** The states driven by a pointer hovering something — each earns the default hover transition. */
 declare const HOVER_STATES: ReadonlyArray<string>;
 /** True when the node restyles on hover (its own, its parent's or a chosen trigger's). */
@@ -1680,6 +1741,182 @@ declare function buildSwiperBreakpoints(inputs: InputMap | null | undefined, res
  */
 declare function mergeSwiperBreakpoints(derived: SwiperBreakpointMap, advancedJson: string | null | undefined): SwiperBreakpointMap | undefined;
 
+/**
+ * "This link is the page you're on" (CC1, N2). ONE decision for the builder canvas and both engine
+ * paths: a link whose target is the current page renders `aria-current="page"` — in the raw SSR too —
+ * and the `current` style state compiles to that attribute (`[aria-current="page"]`), so the look and
+ * the announcement can never disagree.
+ *
+ * Paths are compared APP-relative: the engine's string path writes base-relative hrefs (`work`, `./`
+ * for home), the canvas writes the route (`/work`), and a browser hands back an absolute pathname
+ * under the tenant's `<base href="/<org>/">` — `baseHref` strips that.
+ */
+interface CurrentLinkOptions {
+    /** Also current on the pages BELOW the link's (`/work` while on `/work/sample-project`). Never for home. */
+    prefix?: boolean;
+    /** The document's base path (`/<org>/`), stripped from both sides when present. */
+    baseHref?: string | null;
+}
+/** The value a current link carries. */
+declare const ARIA_CURRENT_PAGE = "page";
+/** True for an href that leaves the site (a scheme, protocol-relative) or stays on the page (`#…`, empty). */
+declare function isExternalOrFragment(href: string | null | undefined): boolean;
+/**
+ * An app path in one comparable form: no query or hash, no base, no leading `./` or slashes, no
+ * trailing slash. Home is `''`.
+ */
+declare function normalizeAppPath(path: string | null | undefined, baseHref?: string | null): string;
+/** Whether `href` points at the page at `currentPath` (both app-relative, or absolute under `baseHref`). */
+declare function isCurrentLink(href: string | null | undefined, currentPath: string | null | undefined, options?: CurrentLinkOptions): boolean;
+
+/**
+ * The content traits the accessibility attributes are read from (CC1). Import-free on purpose: the
+ * builder's component configs declare these traits, and the node-baseline generator bundles those
+ * configs against this file directly.
+ */
+declare enum A11yTrait {
+    /** "Accessibility ▸ Accessible name" — the name of an icon-only control (and of a Dialog). */
+    AccessibleName = "ariaLabel",
+    /** A Dialog's "Close when wider than": a breakpoint id, or empty = never. */
+    CloseAbove = "closeAbove"
+}
+/** The types that carry an Accessible name trait. */
+declare const ACCESSIBLE_NAME_TYPES: ReadonlyArray<string>;
+/** The types that link to a page and can therefore be the current page's link. */
+declare const CURRENT_LINK_TYPES: ReadonlyArray<string>;
+
+/**
+ * The accessibility attributes a node renders (CC1: N2 current page, N3 dialog openers, N4 a drawer
+ * that closes when the window widens, N6 accessible names). ONE function decides them and every
+ * renderer applies the answer with its own transport: the engine's string path serialises it, the
+ * engine's component path and the builder canvas set it on the node's element. A node that wants
+ * none of it gets `{}` and renders exactly as before.
+ */
+/** The types that are pure decoration to assistive technology (an Icon has no name of its own). */
+declare const DECORATIVE_TYPES: ReadonlyArray<string>;
+declare const DIALOG_NODE_TYPE = "Dialog";
+/** Carries the min-width (px) at which an open dialog closes itself; the engine listens on it. */
+declare const DIALOG_CLOSE_ABOVE_ATTRIBUTE = "data-iox-dialog-close-above";
+declare enum A11yAttribute {
+    Label = "aria-label",
+    Hidden = "aria-hidden",
+    Current = "aria-current",
+    Id = "id"
+}
+/** Every attribute this module may set — what `syncNodeA11yAttributes` owns on an element. */
+declare const MANAGED_A11Y_ATTRIBUTES: ReadonlyArray<string>;
+/** A node as any renderer holds it: serialized (`props`), or the builder's (`traits[]`). */
+interface A11yNodeSource extends OpenerNodeLike {
+    id?: string;
+    styleId?: string;
+    type?: string;
+    props?: Readonly<Record<string, unknown>> | null;
+    traits?: ReadonlyArray<{
+        name?: string;
+        default?: unknown;
+    }> | Readonly<Record<string, {
+        name?: string;
+        default?: unknown;
+    }>> | null;
+}
+/** A content trait's value from `props` (serialized) or `traits[]` (builder). */
+declare function nodeTraitValue(node: A11yNodeSource | null | undefined, name: string): unknown;
+/** The min-width (CSS px) above a breakpoint — where a dialog set to "close when wider than" it closes. */
+declare function dialogCloseAboveMinWidth(breakpoint: unknown): number | null;
+/** `(min-width: 768px)` for a min-width carried in `data-iox-dialog-close-above`. */
+declare function closeAboveMediaQuery(minWidth: number | string): string;
+interface NodeA11yContext {
+    /** The app path of the page being rendered (`/work`). Absent = no current-link decision. */
+    currentPath?: string | null;
+    /** The href the renderer gives this node (a page link's resolved route, or its URL). */
+    href?: string | null;
+    currentLink?: CurrentLinkOptions;
+}
+/** The attributes a node renders. */
+declare function nodeA11yAttributes(node: A11yNodeSource | null | undefined, ctx?: NodeA11yContext): Record<string, string>;
+/** The attributes as an HTML string fragment (` name="value"`…) for a string renderer. */
+declare function serializeA11yAttributes(attrs: Readonly<Record<string, string>>, escape: (v: string) => string): string;
+/**
+ * Make an element's managed attributes match `attrs` — set what is there, remove what this function
+ * set before and is gone now. An attribute it never set (a component's own `aria-*`) is left alone.
+ */
+declare function syncNodeA11yAttributes(el: {
+    setAttribute(n: string, v: string): void;
+    removeAttribute(n: string): void;
+} | null | undefined, attrs: Readonly<Record<string, string>>): void;
+/**
+ * True for a control that shows ONLY an icon and has no Accessible name — announced as an unnamed
+ * button or link (WCAG 4.1.2, CC1 N6). The responsive audit flags it; an Icon on its own is decoration.
+ */
+declare function needsAccessibleName(node: (A11yNodeSource & {
+    children?: ReadonlyArray<unknown> | null;
+}) | null | undefined): boolean;
+
+/**
+ * Reduced motion (CC1, R1 — complex-components plan §2d). The token sheet already collapses the
+ * motion tokens under `prefers-reduced-motion`; everything that moves through SCRIPT must ask the
+ * same question, and ask it HERE: the interaction engines (builder canvas + live site), the Slider's
+ * autoplay and the Gallery's crossfade loop. Publishable gate #6: reduced motion = motion dial 0.
+ */
+declare const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+/** Anything with `matchMedia` — a window, or a stub in a spec. */
+interface MatchMediaHost {
+    matchMedia?: (query: string) => {
+        matches: boolean;
+    };
+}
+/** True when the visitor asked their system for reduced motion. No `matchMedia` (SSR) → false. */
+declare function prefersReducedMotion(host?: MatchMediaHost | null | undefined): boolean;
+/** True when script may animate. The ONE question every runtime asks before moving anything. */
+declare function motionAllowed(host?: MatchMediaHost | null | undefined): boolean;
+
+/**
+ * THE interaction keyframes (composite plan T2 · CC1 N5). Both runtimes — the builder's
+ * InteractionEngineService and the live site's ClientInteractionService — animate an element action
+ * from this ONE table. Before it, each kept its own copy and they drifted: `show`/`hide` animated
+ * `visibility` on the canvas and not on the site, and `toggleVisibility` ran 0→1 on the canvas and
+ * 1→0 on the site, so the same hamburger opened on one and closed on the other.
+ *
+ * `toggleVisibility` is stateful: it HIDES a visible element and SHOWS a hidden one
+ * (`resolveToggleVisibility`), and its frames are then exactly `hide`'s or `show`'s. Hidden ends at
+ * `visibility: hidden`, so a hidden element leaves the tab order and the accessibility tree too.
+ * It is still visual-only — the element keeps its box — which is why the actions picker says so and
+ * why the mobile-nav pattern uses a Dialog instead (D9).
+ */
+type InteractionKeyframe = Readonly<Record<string, string | number>>;
+/** The attribute a runtime puts on an element an interaction has hidden (and removes on reveal). */
+declare const INTERACTION_HIDDEN_ATTRIBUTE = "data-iox-hidden";
+declare enum VisibilityActionType {
+    Show = "show",
+    Hide = "hide",
+    Toggle = "toggleVisibility"
+}
+/** Actions that reveal an element (hidden → visible). Their FIRST frame is the pre-state. */
+declare const ENTRANCE_ACTION_TYPES: ReadonlySet<string>;
+/** Actions that hide an element (visible → hidden). */
+declare const EXIT_ACTION_TYPES: ReadonlySet<string>;
+/** What `toggleVisibility` does to an element: show it when hidden, hide it when visible. */
+declare function resolveToggleVisibility(isHidden: boolean): VisibilityActionType.Show | VisibilityActionType.Hide;
+/** The action a runtime actually plays: `toggleVisibility` resolved against the element's state. */
+declare function effectiveActionType(type: string, isHidden: boolean): string;
+/**
+ * The keyframes of an animation action, or null for a type that is not an animation (dialogs,
+ * context, navigation…). `toggleVisibility` must be resolved first (`effectiveActionType`); asked
+ * directly it answers with `hide`'s frames, the toggle of an element that starts visible.
+ */
+declare function buildInteractionKeyframes(type: string, params?: Readonly<Record<string, unknown>> | null): InteractionKeyframe[] | null;
+/** `translateX` → `translate-x`, `opacity` → `opacity`: the CSS property name of a keyframe key. */
+declare function keyframePropertyName(key: string): string;
+/** A keyframe as `[css-property, value]` pairs — what a runtime writes inline. */
+declare function keyframeStyleEntries(frame: InteractionKeyframe | null | undefined): Array<[string, string]>;
+/**
+ * The inline pre-state an ENTRANCE action puts on its element before it plays — its first frame as
+ * CSS — so the server render ships it already hidden (no visible→hidden flash). `{}` for anything else.
+ */
+declare function entrancePreStateStyle(type: string, params?: Readonly<Record<string, unknown>> | null): Record<string, string>;
+/** The frame an animation comes to rest on (what reduced motion applies at once). */
+declare function finalKeyframe(frames: ReadonlyArray<InteractionKeyframe> | null | undefined): InteractionKeyframe | null;
+
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
  *
@@ -2866,12 +3103,18 @@ interface GalleryLoopOptions {
     fadeMs: number;
     onChange: (state: GalleryLoopState) => void;
     scheduler?: GalleryLoopScheduler;
+    /**
+     * False under reduced motion (`motionAllowed()`, CC1 R1): the loop shows the first image and never
+     * advances. Default true. The pause control for a moving gallery is CC3 (WCAG 2.2.2).
+     */
+    motionAllowed?: boolean;
 }
 declare class GalleryLoop {
     private readonly scheduler;
     private showMs;
     private fadeMs;
     private readonly onChange;
+    private readonly motionAllowed;
     private count;
     private currentIndex;
     private fadingOutIndex;
@@ -2894,5 +3137,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, 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, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, 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_HOVER_TRANSITION, LinkedContainerComponent, 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, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isGradientPaint, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, 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, 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, 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_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, 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, 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 };

package/package.json

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

package/src/actions-core/dialog-opener.ts

@@ -0,0 +1,89 @@
+/**
+ * What an element that OPENS a dialog says about itself (CC1, N3 — APG disclosure/dialog pattern).
+ * The element whose click runs `openDialog` / `toggleDialog` (a menu button, a bottom bar's More) is
+ * announced as one: `aria-haspopup="dialog"`, `aria-controls` = the dialog's DOM id, and
+ * `aria-expanded` — `false` in the server render, kept in step on open and close by each runtime.
+ *
+ * ONE decision for every renderer (the builder canvas, the engine's component path and its string
+ * path), framework-free so iox-cms can read it too. The dialog's DOM id comes from `dialogDomId`, the
+ * one place that names it, so an opener and its dialog can never disagree.
+ */
+
+/** The interaction trigger that opens a dialog from an element. */
+export const DIALOG_OPENER_TRIGGER = 'click';
+
+/** The actions that make an element a dialog OPENER (close-only actions do not). */
+export const DIALOG_OPENER_ACTION_TYPES: ReadonlySet<string> = new Set(['openDialog', 'toggleDialog', 'openConsentPreferences']);
+
+/** Every action that opens, closes or toggles a dialog — what a runtime watches to sync `aria-expanded`. */
+export const DIALOG_ACTION_TYPE_SET: ReadonlySet<string> = new Set(['openDialog', 'closeDialog', 'toggleDialog']);
+
+/** The selector of every dialog a renderer emits (the live `<dialog data-iox-dialog>`). */
+export const DIALOG_SELECTOR = 'dialog[data-iox-dialog]';
+
+const DIALOG_ID_PREFIX = 'iox-dialog-';
+
+/** The DOM id of a Dialog node's `<dialog>` — what an opener's `aria-controls` names. */
+export function dialogDomId(nodeId: string): string {
+    return `${DIALOG_ID_PREFIX}${nodeId}`;
+}
+
+/** The node id a dialog DOM id names, or null. */
+export function nodeIdOfDialogDomId(domId: string | null | undefined): string | null {
+    return domId && domId.startsWith(DIALOG_ID_PREFIX) ? domId.slice(DIALOG_ID_PREFIX.length) : null;
+}
+
+export enum OpenerAttribute {
+    HasPopup = 'aria-haspopup',
+    Expanded = 'aria-expanded',
+    Controls = 'aria-controls',
+}
+
+export interface OpenerActionLike {
+    type?: string;
+    target?: string;
+    disabled?: boolean;
+}
+
+export interface OpenerInteractionLike {
+    trigger?: string;
+    actions?: ReadonlyArray<OpenerActionLike> | null;
+}
+
+export interface OpenerNodeLike {
+    interactions?: ReadonlyArray<OpenerInteractionLike> | null;
+}
+
+const SELF = 'self';
+
+/** The Dialog node id the element's click opens (its first enabled opener action), or null. */
+export function openedDialogId(node: OpenerNodeLike | null | undefined): string | null {
+    for (const ix of node?.interactions ?? []) {
+        if (ix?.trigger !== DIALOG_OPENER_TRIGGER) continue;
+        for (const action of ix.actions ?? []) {
+            if (!action || action.disabled === true || !DIALOG_OPENER_ACTION_TYPES.has(String(action.type))) continue;
+            if (action.target && action.target !== SELF) return action.target;
+        }
+    }
+    return null;
+}
+
+/**
+ * The opener attributes for a node: `{}` when its click opens no dialog, else
+ * `aria-haspopup="dialog"`, `aria-controls="iox-dialog-<id>"` and `aria-expanded` (`false` unless
+ * `open` says the dialog is open right now).
+ */
+export function dialogOpenerAttributes(node: OpenerNodeLike | null | undefined, open = false): Record<string, string> {
+    const dialogId = openedDialogId(node);
+    if (!dialogId) return {};
+    return {
+        [OpenerAttribute.HasPopup]: 'dialog',
+        [OpenerAttribute.Controls]: dialogDomId(dialogId),
+        [OpenerAttribute.Expanded]: open ? 'true' : 'false',
+    };
+}
+
+/** The selector of every opener of one dialog (by its DOM id) — what a runtime updates on open/close. */
+export function dialogOpenersSelector(dialogDomIdValue: string): string {
+    return `[${OpenerAttribute.Controls}="${dialogDomIdValue}"][${OpenerAttribute.HasPopup}="dialog"]`;
+}

package/src/actions-core/public-api.ts

@@ -11,3 +11,4 @@
 export * from './action.model';
 export * from './availability';
 export * from './element-actions';
+export * from './dialog-opener';

package/src/design-core/contrast-audit.ts

@@ -100,7 +100,11 @@ export function auditDesignContrast(rows: ReadonlyArray<DesignTokenLike>, mode:
         null,
         ...styles.filter(e => CONTAINER_GROUPS.has(e.group) && ownStyle(e)['backgroundColor'] && e.id !== SECTION_STYLE),
     ];
-    const content = styles.filter(e => !CONTAINER_GROUPS.has(e.group) && (ownStyle(e)['color'] || ownStyle(e)['backgroundColor'])
+    // An ITEM style — a Layout style that paints ink but no fill of its own (the bottom bar's item, CC1) —
+    // sits ON a container like any content, so it is judged as content (the contract's audit, 1:1).
+    const isItem = (e: ElementStyle) => CONTAINER_GROUPS.has(e.group) && !ownStyle(e)['backgroundColor']
+        && !!ownStyle(e)['color'] && ownStyle(e)['color'] !== 'inherit';
+    const content = styles.filter(e => (!CONTAINER_GROUPS.has(e.group) || isItem(e)) && (ownStyle(e)['color'] || ownStyle(e)['backgroundColor'])
         && e.group !== FORMS_GROUP && !NOT_CONTENT.has(e.id) && !SCRIM_STYLES.has(e.id));
     const notices = styles.filter(e => e.group === FORMS_GROUP && ownStyle(e)['color']);
     const section = ownStyle(byId.get(SECTION_STYLE) as ElementStyle);
@@ -135,7 +139,12 @@ export function auditDesignContrast(rows: ReadonlyArray<DesignTokenLike>, mode:
 
             check(box?.id ?? SECTION, 'text', boxInk, bgs, WCAG_AA_TEXT);
             for (const e of content) {
-                const states: Array<[string, StyleMap]> = [['base', ownStyle(e)], ...(e.hover ? [['hover', { ...ownStyle(e), ...e.hover }] as [string, StyleMap]] : [])];
+                // `current` (CC1 N2): the page-you're-on link and bar item, on every ground the state can sit on.
+                const states: Array<[string, StyleMap]> = [
+                    ['base', ownStyle(e)],
+                    ...(e.hover ? [['hover', { ...ownStyle(e), ...e.hover }] as [string, StyleMap]] : []),
+                    ...(e.current ? [['current', { ...ownStyle(e), ...e.current }] as [string, StyleMap]] : []),
+                ];
                 const glyph = e.group === GLYPH_GROUP;
                 for (const [state, s] of states) {
                     const fill = s['backgroundColor'] ? paintColours(resolveIn(values, s['backgroundColor']), boxInk) : [];