@vectoriox/iox-ui 5.81.0 → 5.82.1

package/index.d.ts

@@ -1774,10 +1774,25 @@ declare enum ComponentState {
      *  — a TARGETED state: its trigger is the item (`stateTriggers['trigger-on']`), compiled through
      *  `targetedStateSelector`. On a node OUTSIDE every item (composite T20, CC4a) the author PICKS the item — "when tab
      *  Night is on" — the same state and the same `:has()` scoped to the nearest common ancestor. */
-    ItemOpen = "trigger-on"
-}
-/** The attribute selector each (non-targeted) component state compiles to. */
+    ItemOpen = "trigger-on",
+    /** G4: a control that cannot be used — a disabled button, or one marked aria-disabled. */
+    Disabled = "disabled",
+    /** G4: busy — a submit button while its form sends (`syncSubmitButtons`), a form while it sends. */
+    Busy = "busy",
+    /** G4: chosen — a toggle button pressed, an option checked or selected. */
+    Selected = "selected",
+    /** G4: the page has scrolled (a header that firms up once the page moves) — `SCROLLED_ATTRIBUTE` on the root. */
+    Scrolled = "scrolled"
+}
+/** The page has scrolled: written on the document element by the live site (and on the canvas page by the builder). */
+declare const SCROLLED_ATTRIBUTE = "data-iox-scrolled";
+/** The selector each (non-targeted) component state compiles to — an attribute, or an `:is()` of the ways a node can
+ *  be in it (a native `:disabled` or `aria-disabled`; pressed / checked / selected), so one rule covers every markup. */
 declare const COMPONENT_STATE_SELECTOR: Readonly<Record<string, string>>;
+/** Scrolled is offered on the site header and its parts — generation-core's NavRole family (`nav`, `nav.brand`…), the
+ *  drawer's parts aside (the drawer is a dialog over the page). Spelled here — the main entry does not import
+ *  generation-core; style-compiler.spec pins it to the enum. */
+declare const SCROLLED_STATE_ROLE = "nav";
 /** The composite roles that are themselves "on" when their item is open (they carry `data-iox-on`): an accordion's
  *  item, header and panel; a disclosure (its own item), its toggle and its panel (CC2.1); a tab and its panel (CC4a —
  *  "Active"). The main entry does not import composite-core, so the roles are spelled here — `style-compiler.spec` pins
@@ -1813,19 +1828,35 @@ declare function hasHoverState(stateStyles: Record<string, Record<string, any> |
  * The base-rule transition a hovering node gets when it declares none of its own, so a hover
  * animates instead of snapping. ONE copy for the builder canvas, the style panel and the engine.
  *
- * Two values, chosen by the element-style MARKER (§3b-bis): a node wearing an element style takes
+ * Two timings, chosen by the element-style MARKER (§3b-bis): a node wearing an element style takes
  * the motion tokens; a node without one (saved before DS2, not adopted) keeps the pre-DS2 literal
- * byte-for-byte — seeding an org's tokens must never change how a legacy page hovers.
- */
-declare const HOVER_DEFAULT_TRANSITION = "all var(--iox-dur-fast) var(--iox-ease-standard)";
-declare const LEGACY_HOVER_TRANSITION = "all 0.2s ease";
-/** The default hover transition for a node that wears `elementStyle` (or none). */
-declare function defaultHoverTransition(elementStyle?: string | null): string;
-/** True when the RAW style map already yields a transition (an explicit one, or the composed
- *  transitionDuration/TimingFunction an element style writes). */
+ * timing — seeding an org's tokens must never change how a legacy page hovers. WHAT transitions is the
+ * list of properties the node's states change (G2 — never `transition: all`).
+ */
+declare const HOVER_DEFAULT_TRANSITION_TRAITS: Readonly<Record<string, string>>;
+declare const LEGACY_HOVER_TRANSITION_TRAITS: Readonly<Record<string, string>>;
+/** The default hover timing for a node that wears `elementStyle` (or none). */
+declare function defaultHoverTransitionTraits(elementStyle?: string | null): Readonly<Record<string, string>>;
+/** True when the RAW style map times a transition of its own (an explicit `transition`, or the
+ *  transitionDuration / TimingFunction an element style writes). */
 declare function hasOwnTransition(styleProps: Record<string, any> | null | undefined): boolean;
-/** `styleProps` plus the default hover transition when the node hovers and sets none itself. */
-declare function withDefaultHoverTransition(styleProps: Record<string, any>, stateStyles: Record<string, Record<string, any> | undefined> | null | undefined, elementStyle?: string | null): Record<string, any>;
+type StateMaps = Record<string, Record<string, any> | undefined> | null | undefined;
+/**
+ * The CSS properties a node's states change — what its transition names (G2, Emil 183: never `transition: all`).
+ * Every state the node holds, at every breakpoint, composed as the renderers compose it (translateX / scaleX → one
+ * `transform`, a gradient background → `background-image`…), in a stable order so both renderers emit one string.
+ */
+declare function stateTransitionProperties(stateStyles: StateMaps, responsive?: Record<string, {
+    stateStyles?: StateMaps;
+} | undefined> | null, type?: string | null): string[];
+/**
+ * `styleProps` as a renderer compiles them: a hovering node with no timing of its own takes the default hover timing,
+ * and a node whose transition names no properties gets the ones its states change. An author's own `transitionProperty`
+ * (or a raw `transition`) always wins. Pure: the node's stored styles are never touched.
+ */
+declare function withStateTransitions(styleProps: Record<string, any>, stateStyles: StateMaps, elementStyle?: string | null, responsive?: Record<string, {
+    stateStyles?: StateMaps;
+} | undefined> | null, type?: string | null): Record<string, any>;
 /**
  * Per-type default `width` that the builder applies from each component's config
  * (NOT persisted in styleProps — see render-parity.md "saved node is not
@@ -1843,12 +1874,13 @@ declare const DEFAULT_WIDTH_BY_TYPE: Readonly<Record<string, string>>;
  * behaviour, which the engine must re-apply explicitly for parity. Returns `"prop: value"`
  * declarations to append AFTER the node's own compiled declarations.
  *
+ * The default hover transition is no longer one of them: it is composed into the node's own rule by
+ * `withStateTransitions` (both renderers), listing the properties its states change (G2).
+ *
  * @param type          Node type (registry key).
  * @param styleProps    The node's persisted styleProps.
- * @param hasHoverState Whether the node has a non-empty hover / parent-hover state.
- * @param elementStyle  The element style the node wears — picks the default hover transition.
  */
-declare function renderDefaultDeclarations(type: string, styleProps: Record<string, any>, hasHoverState: boolean, elementStyle?: string | null): string[];
+declare function renderDefaultDeclarations(type: string, styleProps: Record<string, any>): string[];
 
 /**
  * One composed output property and the virtual traits it is built from.
@@ -1867,6 +1899,12 @@ interface VirtualTraitGroup {
      *  (`::marker` styles are a nested map, not a single cancellable property). */
     readonly reset: string | null;
 }
+/** The Transition ▸ Properties trait (G2): what a transition names, comma-separated. Unset, the renderers fill in the
+ *  properties the node's states change (`withStateTransitions`); a transition never names `all` unless an author
+ *  typed it. */
+declare const TRANSITION_PROPERTY_KEY = "transitionProperty";
+/** The property list a `transitionProperty` value names (`color, transform` → two entries). */
+declare function transitionPropertyList(value: unknown): string[];
 /** "Max lines" (Card v2, board 8 — opt-in on a Title / Text): a whole number clamps the text to that many
  *  lines with an ellipsis. It composes into the four declarations a line clamp takes; anything else
  *  (`none`, empty, 0) clamps nothing. */
@@ -2090,6 +2128,16 @@ declare function splitOuterProps(styles: Record<string, any>): {
     inner: Record<string, any>;
     outer: Record<string, any>;
 };
+/**
+ * The devices a hover rule is for (G1 — Emil 91, mobile-native M1): a phone has no hover, and a tap fires a false
+ * one that STICKS until the next tap elsewhere. Every hover, parent-hover and trigger-hover rule — the node's own and
+ * a part's — is emitted inside this query by both renderers; `:active` (a real press on touch) never is.
+ */
+declare const HOVER_MEDIA_QUERY = "(hover: hover) and (pointer: fine)";
+/** True for a state driven by a pointer hovering something (its own, its parent's, a chosen trigger's). */
+declare function isHoverState(state: string | null | undefined): boolean;
+/** `css` as it is emitted for `state`: inside `HOVER_MEDIA_QUERY` for a hover state, unchanged otherwise. */
+declare function gateHoverRule(state: string | null | undefined, css: string): string;
 
 /** Trait names whose value Swiper reads per breakpoint. Anything else is config-wide. */
 declare const SWIPER_RESPONSIVE_TRAITS: readonly string[];
@@ -2406,6 +2454,105 @@ declare const ENTRANCE_NOSCRIPT_CSS = "[data-iox-enter]{opacity:1!important;tran
  */
 declare function finalKeyframe(frames: ReadonlyArray<InteractionKeyframe> | null | undefined): InteractionKeyframe | null;
 
+/**
+ * What an interaction's easing may be (G6, decision D8): one of the five CSS keywords, a `cubic-bezier()`, or the
+ * NAME of one of the look's easing tokens — so an author's entrance moves on the same curve as the site's buttons and
+ * dialogs (Emil 21: one token system), and Spring plays the look's spring (a `linear()` curve, `springToLinear`).
+ * Both runtimes resolve it the same way, through the CSS custom property on the element itself.
+ */
+declare enum EasingKeyword {
+    Linear = "linear",
+    Ease = "ease",
+    EaseIn = "ease-in",
+    EaseOut = "ease-out",
+    EaseInOut = "ease-in-out"
+}
+/** The look's easing tokens an interaction may name (their `--iox-<name>` holds the curve). */
+declare enum EasingToken {
+    Standard = "ease-standard",
+    Enter = "ease-enter",
+    Exit = "ease-exit",
+    Spring = "ease-spring"
+}
+declare const EASING_KEYWORDS: ReadonlyArray<string>;
+declare const EASING_TOKENS: ReadonlyArray<string>;
+/** What an unknown or unresolvable easing plays as: a deceleration, never ease-in (Emil 17). */
+declare const DEFAULT_INTERACTION_EASING = EasingKeyword.EaseOut;
+/** A well-formed `cubic-bezier(x1, y1, x2, y2)` whose x values sit in [0, 1] (what CSS and WAAPI accept). */
+declare function isCubicBezier(value: unknown): boolean;
+declare function isEasingToken(value: unknown): value is EasingToken;
+/** True for anything an interaction may store as its easing. */
+declare function isInteractionEasing(value: unknown): boolean;
+/** Anything that reads a computed custom property (an element in a document; a stub in a spec). */
+interface StyledElement {
+    ownerDocument?: {
+        defaultView?: {
+            getComputedStyle(el: unknown): {
+                getPropertyValue(name: string): string;
+            };
+        } | null;
+    } | null;
+}
+/**
+ * The timing function WAAPI plays for `easing` on `el`: a keyword or a curve as stored; a token name → the token's
+ * value as the element sees it (`--iox-ease-spring` → its `linear()`), so a section scheme or the canvas's token scope
+ * applies; anything else, or a token the element cannot resolve → `fallback`.
+ */
+declare function resolveInteractionEasing(easing: unknown, el?: StyledElement | null, fallback?: string): string;
+
+/**
+ * When a pointer event should move something (G7 — Emil 85/86/91, mobile-native M1/M5). Both runtimes ask here.
+ *
+ *  · A hover trigger answers a mouse or a pen only: a finger has no hover, and a tap's emulated mouseenter left the
+ *    hover state on until the next tap elsewhere.
+ *  · Press feedback lands on pointer-DOWN, at once — the click (pointer-up) commits. Only an action that is pure
+ *    feedback moves early: an animation of the pressed element itself that hides nothing and shows nothing. Opening,
+ *    closing, navigating and toggling stay on the click, so dragging away still cancels them. A keyboard press (Enter,
+ *    Space) has no pointer-down, so it never animates (Emil 2).
+ */
+declare enum PointerKind {
+    Mouse = "mouse",
+    Pen = "pen",
+    Touch = "touch"
+}
+/** True for a pointer that really hovers — a mouse or a pen, never a finger. An event with no pointer type (a synthetic
+ *  `mouseenter`) counts as a mouse. */
+declare function isHoverPointer(event: {
+    pointerType?: string | null;
+} | null | undefined): boolean;
+/** The minimal action shape this reads. */
+interface PressAction {
+    type: string;
+    target?: string;
+    disabled?: boolean;
+    params?: Readonly<Record<string, unknown>> | null;
+}
+/** True for an action that is press FEEDBACK: it animates the pressed element itself and neither hides nor shows it. */
+declare function isPressFeedback(action: PressAction | null | undefined): boolean;
+/** A click interaction's actions split by when they run: the feedback on pointer-down, the rest on the click. */
+declare function splitPressFeedback<T extends PressAction>(actions: ReadonlyArray<T> | null | undefined): {
+    onPress: T[];
+    onClick: T[];
+};
+
+/** How far the page has to move before it counts as scrolled — past a trackpad's rest jitter. */
+declare const SCROLLED_THRESHOLD_PX = 8;
+/** True once `offset` has passed the threshold. */
+declare function isScrolled(offset: number, threshold?: number): boolean;
+/** Anything that scrolls: a window (`scrollY`) or an element (`scrollTop`). */
+interface ScrollSource {
+    addEventListener(type: 'scroll', fn: () => void, options?: AddEventListenerOptions): void;
+    removeEventListener(type: 'scroll', fn: () => void): void;
+    scrollY?: number;
+    scrollTop?: number;
+}
+/**
+ * Keep `SCROLLED_ATTRIBUTE` on `target` while `source` has scrolled past the threshold — what the Scrolled state (G4)
+ * compiles against, on the live site (the window → the document element) and on the canvas (its scroller → the page).
+ * One passive listener, read once per frame, written only when it changes. Returns the stop.
+ */
+declare function watchScrolled(source: ScrollSource, target: Element, threshold?: number): () => void;
+
 /**
  * page-style — the ONE compiler that turns a page's style settings into CSS.
  *
@@ -3413,5 +3560,5 @@ declare function attachStringForm(form: Element | null | undefined, options?: St
  */
 declare function syncSubmitButtons(form: Element | null | undefined, state: FormRenderState | string | null | undefined): void;
 
-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, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, INTERACTION_ANIMATION_ID, 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, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, 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, animateAction, applyBindingPipes, applyFeel, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, framesFromLiveValue, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCurrentLink, isExternalOrFragment, isGradientPaint, isInputOverriddenAt, isLastEmittedStateKey, isOverriddenAt, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, stateNamesIn, statePseudoClass, stateSelectorSuffix, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, viewportTransitionContext, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, 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_INTERACTION_EASING, 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, EASING_KEYWORDS, EASING_TOKENS, ENTRANCE_ACTION_TYPES, ENTRANCE_FALLBACK_CSS, ENTRANCE_NOSCRIPT_CSS, ENTRANCE_PRESTATE_ATTRIBUTE, EXIT_ACTION_TYPES, EasingKeyword, EasingToken, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION_TRAITS, HOVER_MEDIA_QUERY, HOVER_STATES, INTERACTION_ANIMATION_ID, 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, IoxVideoComponent, LAST_EMITTED_STATES, LEGACY_DIRECTION_KEY, LEGACY_HOVER_TRANSITION_TRAITS, LEGACY_SWIPER_CONTROLS, LinkedContainerComponent, MANAGED_A11Y_ATTRIBUTES, MAX_LINES_KEY, NAMED_GROUP_ROLES, NO_PAGE_TRANSITION, ON_STATE_ROLES, OUTER_STYLE_PROPS, PAGE_STYLE_TOKENS, PAGE_TOKEN_FALLBACKS, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PART_PAGINATION_MODIFIER, PHONE_TRANSITION_QUERY, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PageStyleField, PageStyleSource, PointerKind, REDUCED_MOTION_QUERY, RELATIONAL_STATE_PSEUDO, RevealActionType, SCROLLED_ATTRIBUTE, SCROLLED_STATE_ROLE, SCROLLED_THRESHOLD_PX, SCROLL_EASINGS, SELF_PLAYING_TRIGGERS, SLIDER_INPUTS_ATTRIBUTE, SLIDER_INPUT_NAMES, STATE_PSEUDO_CLASS, STRUCTURAL_STATES, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_A11Y_OPTIONS, SWIPER_RESPONSIVE_TRAITS, SWIPER_TRIGGER_EVENTS, ScrollEasing, SectionComponent, SettleMode, StringFormRuntime, SwiperModuleName, TARGETED_STATE_SUFFIX, TEXT_ALIGN_KEY, TEXT_DIRECTION_KEY, TRANSITION_FEELS, TRANSITION_PROPERTY_KEY, TextAlign, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, VisibilityActionType, activeActions, animateAction, applyBindingPipes, applyFeel, attachStringForm, bootSlider, breakpointDef, breakpointForWidth, breakpointQueryFor, buildInteractionKeyframes, buildPartSelector, buildSwiperBreakpoints, buildTargetedStateSelector, buildTargetedSuffixSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, closeAboveMediaQuery, collectContextSlotKeys, compileDeclarations, compilePageStyle, componentStatesFor, composeVirtualTraits, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, declaredInputNames, decomposeBackdropFilter, defaultHoverTransitionTraits, defaultMessageResolver, deriveSeoFromContent, describePageStyle, describeSeoFields, dialogCloseAboveMinWidth, domHasSliderParts, effectiveActionType, effectiveTransitionId, entrancePreStateStyle, entranceStartsHidden, feelFor, finalKeyframe, framesFromLiveValue, gateHoverRule, getSeoValue, hasHoverState, hasOwnPageTransition, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isCubicBezier, isCurrentLink, isEasingToken, isExternalOrFragment, isGradientPaint, isHoverPointer, isHoverState, isInputOverriddenAt, isInteractionEasing, isLastEmittedStateKey, isOverriddenAt, isPressFeedback, isScrolled, isStructuralState, isValidSlotKey, isWholeBackdropSet, keyframePropertyName, keyframeStyleEntries, legacyEnterToTransition, mediaQueryFor, mergeSwiperBreakpoints, migrateLegacyDirection, migrateLegacyTextAlign, motionAllowed, nearestCommonAncestorId, needsAccessibleName, needsGroupName, nodeA11yAttributes, nodeCssId, nodeTraitValue, nodeUsesContext, normalizeAppPath, normalizeGalleryImage, normalizeIconClass, orderStatesForEmit, pageTransitionOf, parentBreakpoint, parseUrlList, partClassName, planPartRule, planResponsiveRules, planScroll, planStateRule, planSwiperOptions, playDualLayerTransition, playInteraction, prefersReducedMotion, renderDefaultDeclarations, resetPageStyleField, resetSeoField, resolveBoundValue, resolveContextValue, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolveInteractionEasing, resolvePageTransition, resolvePath, resolveSeo, resolveStateStyles, resolveStyleProps, resolveToggleVisibility, resolveValueChain, rewriteViewportUnits, safeSetInput, serializeA11yAttributes, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, settleInteraction, settleModeFor, sliderControlElements, sliderInputsFromProps, sliderInputsOf, splitOuterProps, splitPressFeedback, stateNamesIn, statePseudoClass, stateSelectorSuffix, stateTransitionProperties, stringFormRuntimeOf, stripSuppressedProps, swiperAutoplayAllowed, swiperLoopOptions, swiperModuleNames, syncNodeA11yAttributes, syncSubmitButtons, targetedStateSelector, transitionPropertyList, viewportTransitionContext, watchScrolled, withContextSlots, withStateTransitions, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { A11yNodeSource, AnimateActionOptions, BoundValueSpec, BreakpointDef, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, CurrentLinkOptions, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, InteractionKeyframe, IoxContextSlot, IoxPipe, MatchMediaHost, NodeA11yContext, OverrideBreakpoint, PageScrollStart, PageStyleFieldState, PageStyleOptions, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionContext, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, PlannedPageTransition, PressAction, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteAnimationLike, ScrollPlanContext, ScrollSource, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SettleOptions, SliderBootOptions, SliderControlElements, SliderInputs, StateRulePlan, StateScope, StateStyleMap, StringFormOptions, StyleMap, StyleTreeNode, SwiperBreakpointMap, SwiperModuleFlags, SwiperPlan, SwiperPlanContext, ToggleableAction, TransitionFeel, TransitionPhase, TransitionPreviewLayers, TransitionTimelineInput, TransitionViewport, ValueSource, VirtualTraitGroup };

package/package.json

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

package/src/design-core/element-styles.ts

@@ -22,10 +22,18 @@ export enum ElementStyleState {
     /** A composite part that is ON — the active tab (CC4a "Active"): compiles to `[data-iox-on]`, the attribute every
      *  composite runtime writes. */
     On = 'on',
+    /** G4 — compile through the style compiler's COMPONENT_STATE_SELECTOR: `:disabled` / aria-disabled, aria-busy,
+     *  pressed / checked / selected, the page scrolled. */
+    Disabled = 'disabled',
+    Busy = 'busy',
+    Selected = 'selected',
+    Scrolled = 'scrolled',
 }
 
-export const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState> =
-    [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On];
+export const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState> = [
+    ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current, ElementStyleState.On,
+    ElementStyleState.Disabled, ElementStyleState.Busy, ElementStyleState.Selected, ElementStyleState.Scrolled,
+];
 
 export interface ElementStyle {
     readonly id: string;
@@ -38,6 +46,10 @@ export interface ElementStyle {
     readonly focus?: Readonly<Record<string, string>>;
     readonly current?: Readonly<Record<string, string>>;
     readonly on?: Readonly<Record<string, string>>;
+    readonly disabled?: Readonly<Record<string, string>>;
+    readonly busy?: Readonly<Record<string, string>>;
+    readonly selected?: Readonly<Record<string, string>>;
+    readonly scrolled?: Readonly<Record<string, string>>;
 }
 
 export const ELEMENT_STYLES: ReadonlyArray<ElementStyle> = SPEC_ELEMENT_STYLES;

package/src/design-core/entrance-timing.ts

@@ -21,13 +21,24 @@ export interface StaggerSpec {
     readonly cap?: number;
 }
 
-/** The delay of the `index`-th item: `stagger` ms each, the last `cap` waiting no longer than the one before. */
+/** Each gap is this much of the one before (G8 — Emil 66: a uniform stagger is a metronome; the delays shrink). */
+export const STAGGER_SHRINK = 0.75;
+/** Only the first items stagger; the rest arrive with the sixth (Emil 67). */
+export const STAGGER_MAX_ITEMS = 6;
+
+/**
+ * The delay of the `index`-th item (G8): the first gap is `stagger` ms and every next one is `STAGGER_SHRINK` of the
+ * one before, so the group lands together instead of ticking; items from the `cap`-th on (never past the sixth) arrive
+ * with it. 80 ms → 0, 80, 140, 185, 219, 244. Static groups (their delays written at stamp time) and a Repeater's rows
+ * (`entranceDelay`) read the same curve.
+ */
 export function staggerDelay(spec: StaggerSpec, index = 0): number {
     const stagger = Number(spec.stagger ?? 0);
     if (!(stagger > 0)) return 0;
-    const cap = Math.max(1, Math.floor(Number(spec.cap ?? 1)) || 1);
+    const cap = Math.min(STAGGER_MAX_ITEMS, Math.max(1, Math.floor(Number(spec.cap ?? 1)) || 1));
     const i = Number.isFinite(index) ? Math.max(0, Math.floor(index)) : 0;
-    return Math.min(i, cap - 1) * stagger;
+    const steps = Math.min(i, cap - 1);
+    return Math.round(stagger * (1 - STAGGER_SHRINK ** steps) / (1 - STAGGER_SHRINK));
 }
 
 /** What an action carries, as both runtimes read it. */

package/src/design-core/flavor-spec.generated.ts

@@ -1340,7 +1340,7 @@ export const SPEC_AXES = {
       "ease-spring": "cubic-bezier(0.2, 0, 0, 1)",
       "dur-spring": "140ms",
       "hover-lift": "-2px",
-      "press-scale": "1"
+      "press-scale": "0.97"
     },
     "standard": {
       "label": "Standard",
@@ -1362,7 +1362,7 @@ export const SPEC_AXES = {
       "ease-spring": "cubic-bezier(0.33, 0, 0.1, 1)",
       "dur-spring": "400ms",
       "hover-lift": "0px",
-      "press-scale": "1"
+      "press-scale": "0.98"
     },
     "lively": {
       "label": "Lively",
@@ -2618,7 +2618,13 @@ export const SPEC_A11Y = {
   "reducedTransparency": {
     "surface-glass": "var(--iox-surface)",
     "surface-glass-strong": "var(--iox-surface)",
-    "blur-surface": "none"
+    "blur-surface": "none",
+    "button-secondary-backdrop": "none",
+    "card-backdrop": "none",
+    "nav-backdrop": "none",
+    "dialog-backdrop": "none",
+    "tabbar-backdrop": "none",
+    "segmented-track-backdrop": "none"
   }
 } as const;
 
@@ -6558,7 +6564,7 @@ export const SPEC_FLAVOR_PACKS = [
         "tier": "semantic",
         "type": "number",
         "group": "motion",
-        "value": "1"
+        "value": "0.98"
       },
       {
         "name": "button-font",
@@ -13817,7 +13823,7 @@ export const SPEC_FLAVOR_PACKS = [
         "tier": "semantic",
         "type": "number",
         "group": "motion",
-        "value": "1"
+        "value": "0.97"
       },
       {
         "name": "button-font",
@@ -13957,7 +13963,7 @@ export const SPEC_FLAVOR_PACKS = [
         "tier": "component",
         "type": "number",
         "group": "components",
-        "value": "1",
+        "value": "0.97",
         "overridden": true
       },
       {

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

@@ -12,6 +12,7 @@ export * from './flavor-spec.generated';
 export * from './design-token.model';
 export * from './css-names';
 export * from './token-css';
+export * from './theme-color';
 export * from './flavor';
 export * from './element-styles';
 export * from './adopt';

package/src/design-core/theme-color.ts

@@ -0,0 +1,41 @@
+import { DesignMode } from './design-token.model';
+import { DesignTokenLike } from './token-css';
+
+/** The token the browser's own chrome takes its colour from: the page's ground. */
+export const THEME_COLOR_TOKEN = 'bg';
+
+const VAR_REF = /^var\(\s*--iox-([\w-]+)\s*(?:,\s*([^()]+))?\)$/;
+/** A colour the browser's chrome can wear: opaque hex, rgb() or hsl() — never a gradient, a mix or a translucent one. */
+const SOLID_COLOUR = /^(#([0-9a-f]{3}|[0-9a-f]{6})|rgb\(\s*[\d.]+\s*,?\s*[\d.]+\s*,?\s*[\d.]+\s*\)|hsl\([^()/]+\))$/i;
+
+export interface ThemeColors {
+    light?: string;
+    dark?: string;
+}
+
+function resolveIn(map: ReadonlyMap<string, string>, value: string | undefined, depth = 0): string | undefined {
+    if (!value || depth > 12) return undefined;
+    const ref = VAR_REF.exec(value.trim());
+    if (!ref) return value.trim();
+    return resolveIn(map, map.get(ref[1]) ?? ref[2]?.trim(), depth + 1);
+}
+
+function colourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean): string | undefined {
+    const map = new Map(rows.map(r => [r.name, dark ? (r.values?.dark ?? r.value) : r.value] as [string, string]));
+    const colour = resolveIn(map, map.get(THEME_COLOR_TOKEN));
+    return colour && SOLID_COLOUR.test(colour) ? colour : undefined;
+}
+
+/**
+ * The `theme-color` the browser's chrome takes per colour scheme (premium components G15 — mobile-native M10): the
+ * page's ground in each mode the site shows, resolved through the org's rows. A light or dark site answers its one
+ * mode; `auto` answers both (the engine writes them with `media="(prefers-color-scheme: …)"`). A value that is not a
+ * solid colour answers nothing — the browser keeps its own.
+ */
+export function themeColors(rows: ReadonlyArray<DesignTokenLike> | null | undefined, mode: DesignMode | string | null | undefined = 'auto'): ThemeColors {
+    const list = rows ?? [];
+    const out: ThemeColors = {};
+    if (mode !== 'dark') { const light = colourFor(list, false); if (light) out.light = light; }
+    if (mode !== 'light') { const dark = colourFor(list, true); if (dark) out.dark = dark; }
+    return out;
+}