@vectoriox/iox-ui 4.25.0 → 4.26.0

package/index.d.ts

@@ -509,6 +509,180 @@ declare class ButtonBlockComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<ButtonBlockComponent, "a[iox-button-block],button[iox-button-block]", never, { "tag": { "alias": "tag"; "required": false; }; "href": { "alias": "href"; "required": false; }; "target": { "alias": "target"; "required": false; }; "type": { "alias": "type"; "required": false; }; "nodeId": { "alias": "nodeId"; "required": false; }; }, {}, never, never, false, never>;
 }
 
+/** The five fixed breakpoints (plan decision D2). Desktop-first: each narrower one
+ *  overrides the wider ones through `max-width`. */
+declare enum Breakpoint {
+    Base = "base",
+    Laptop = "laptop",
+    Tablet = "tablet",
+    Mobile = "mobile",
+    Small = "small"
+}
+/** Every breakpoint that can hold overrides. Base styles live in `styleProps`. */
+type OverrideBreakpoint = Exclude<Breakpoint, Breakpoint.Base>;
+interface BreakpointDef {
+    readonly id: Breakpoint;
+    readonly label: string;
+    /** Inclusive upper bound in CSS px (`max-width`). `null` for Base, which has no query. */
+    readonly maxWidth: number | null;
+    /** Width the builder canvas simulates while this breakpoint is being edited. Always
+     *  inside the breakpoint's own range (above the next one's `maxWidth`). */
+    readonly previewWidth: number;
+}
+/**
+ * Widest → narrowest. This order IS the cascade order and the `@media` emission order.
+ *
+ * ⚠️ Phones in portrait (360–430px) land in `Small`, NOT `Mobile` — `Mobile` is 480–767,
+ * a phone held landscape. The labels say so (as Webflow's do). The ids stay short because
+ * they are storage keys; the cascade still makes a `Mobile` override reach every phone.
+ */
+declare const BREAKPOINTS: readonly BreakpointDef[];
+/** The definition for `bp`, or `undefined` for an unknown id (e.g. hand-edited JSON). */
+declare function breakpointDef(bp: Breakpoint | string): BreakpointDef | undefined;
+/** Base → `bp`, inclusive — the layers whose values apply at `bp`. Unknown → `[Base]`. */
+declare function cascadeChain(bp: Breakpoint | string): Breakpoint[];
+/**
+ * The breakpoint a viewport (or canvas) of `width` CSS px falls in — the narrowest one whose
+ * `maxWidth` it fits under, else Base. Mirrors how the `max-width` media queries resolve, so the
+ * builder's editing scope is always the breakpoint the canvas is actually showing.
+ */
+declare function breakpointForWidth(width: number): Breakpoint;
+/** The next-wider breakpoint (what `bp` inherits from), or `null` for Base / unknown. */
+declare function parentBreakpoint(bp: Breakpoint | string): Breakpoint | null;
+/**
+ * What a breakpoint's width is measured against.
+ *
+ * `Media` — the browser viewport. The SSR engine: a visitor's window IS the page.
+ * `Container` — a named CSS size container. The builder: its canvas is a fixed-width frame inside a
+ * desktop browser (and `transform: scale`d for zoom), so a media query would read the EDITOR's width.
+ * A container query reads the frame's own layout width — which equals the simulated viewport and
+ * ignores the zoom transform — so the builder emits the same structure as the engine.
+ */
+declare enum BreakpointQueryKind {
+    Media = "media",
+    Container = "container"
+}
+/**
+ * The at-rule prelude for `bp` — `@media (max-width: 767px)`, or with `Container`
+ * `@container iox-canvas (max-width: 767px)`. `null` for Base or an unknown id.
+ * `containerName` is required for `Container` (an unnamed container query would match
+ * whichever ancestor container is nearest, which is not guaranteed to be the canvas).
+ */
+declare function breakpointQueryFor(bp: Breakpoint | string, kind?: BreakpointQueryKind, containerName?: string): string | null;
+/** Wrap already-compiled rules for `bp`. Base (and blank css) passes through unwrapped. */
+declare function wrapInBreakpointQuery(bp: Breakpoint | string, css: string, kind?: BreakpointQueryKind, containerName?: string): string;
+/** `@media (max-width: 767px)` for `bp`; `null` for Base or an unknown id. */
+declare function mediaQueryFor(bp: Breakpoint | string): string | null;
+/** Wrap already-compiled rules for `bp` in its media query. Base (and blank css) passes through. */
+declare function wrapInMediaQuery(bp: Breakpoint | string, css: string): string;
+type StyleMap = Record<string, any>;
+type StateStyleMap = Record<string, StyleMap>;
+/** Component trait values (node `props`/`inputs`), keyed by trait name. */
+type InputMap = Record<string, any>;
+/** What one breakpoint overrides. All maps are SPARSE — only keys that differ. */
+interface ResponsiveLayer {
+    styleProps?: StyleMap;
+    stateStyles?: StateStyleMap;
+    /**
+     * Per-breakpoint COMPONENT TRAIT overrides (`slidesPerView`, `limit`, …) — the things a media
+     * query cannot express because they are component inputs, not CSS. Without this a 4-up slider
+     * stays 4-up on a phone; the only escape used to be hand-typed Swiper JSON.
+     *
+     * Sparse and additive like the maps above, so a page with no trait overrides serialises exactly
+     * as before. Only traits declared `responsive` on their `TraitConfig` may appear here.
+     */
+    inputs?: InputMap;
+}
+type ResponsiveOverrides = Partial<Record<OverrideBreakpoint, ResponsiveLayer>>;
+/** The full effective style map at `bp`: base, then each layer down the cascade. */
+declare function resolveStyleProps(styleProps: StyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string): StyleMap;
+/**
+ * The full effective TRAIT map at `bp`: the node's own inputs, then each layer down the cascade.
+ * Deliberately identical in shape and cascade order to `resolveStyleProps`, so "how does a value
+ * at this width get decided" has ONE answer on both sides of the renderer split.
+ */
+declare function resolveInputs(inputs: InputMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string): InputMap;
+/** True when `bp` itself sets trait `name` — the panel's override indicator. Never true for Base. */
+declare function isInputOverriddenAt(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, name: string): boolean;
+/**
+ * Every level from Base down to `bp` that sets trait `name`, in cascade order — the trait-row
+ * equivalent of `resolveValueChain`, driving the same "Base 4 → Tablet 2 → Mobile 1" source chain.
+ */
+declare function resolveInputChain(name: string, inputs: InputMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string): ValueSource[];
+/** The effective per-state maps at `bp`. States with no values anywhere are omitted. */
+declare function resolveStateStyles(stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string): StateStyleMap;
+/**
+ * Every state that has a value anywhere — at base or at any breakpoint — in a stable order
+ * (base states first, then any that exist only at a breakpoint). A renderer iterates this, not
+ * `Object.keys(stateStyles)`, so a state defined ONLY at a breakpoint (a Mobile-only hover) still
+ * gets its selector scope resolved.
+ */
+declare function stateNamesIn(stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined): string[];
+/** One level of the cascade that sets a value. */
+interface ValueSource {
+    breakpoint: Breakpoint;
+    value: any;
+}
+/**
+ * Every level from Base down to `bp` that sets `prop` (optionally within `state`), in
+ * cascade order. The LAST entry is the effective value; an empty array means unset.
+ * Drives the style panel's source chain ("Base 34 → Tablet 28 → Mobile 22").
+ */
+declare function resolveValueChain(prop: string, styleProps: StyleMap | null | undefined, stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, state?: string): ValueSource[];
+/** True when `bp` itself sets `prop` (the style panel's orange edge). Never true for Base. */
+declare function isOverriddenAt(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, prop: string, state?: string): boolean;
+/** Number of overridden values — at `bp`, or across every breakpoint when omitted. */
+declare function countOverrides(responsive: ResponsiveOverrides | null | undefined, bp?: Breakpoint | string): number;
+/** Returns a new overrides object with `prop` set at `bp` (optionally within `state`). */
+declare function setOverride(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, prop: string, value: any, state?: string): ResponsiveOverrides;
+/** Returns a new overrides object with trait `name` set at `bp`. */
+declare function setInputOverride(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, name: string, value: any): ResponsiveOverrides;
+/**
+ * Remove trait overrides at `bp`, pruning empties exactly like `clearOverride` — omit `name` to
+ * drop every trait override at that width. Returns `undefined` when nothing is left anywhere.
+ */
+declare function clearInputOverride(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, name?: string): ResponsiveOverrides | undefined;
+/**
+ * Remove overrides at `bp` and PRUNE whatever becomes empty, so "reset" and "never
+ * overridden" are the same state on disk — no tombstones, no nulls.
+ *
+ *   clearOverride(r, bp)                 — the whole breakpoint
+ *   clearOverride(r, bp, undefined, st)  — one state at that breakpoint
+ *   clearOverride(r, bp, prop)           — one base-state value
+ *   clearOverride(r, bp, prop, st)       — one value within a state
+ *
+ * Returns `undefined` when nothing is left, so a serialiser omits the key entirely.
+ */
+declare function clearOverride(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, prop?: string, state?: string): ResponsiveOverrides | undefined;
+/**
+ * Everything one breakpoint must emit, already composed. Wrap in `mediaQuery` (engine)
+ * or apply directly (builder, flattened).
+ *
+ * ⚠️ Compile these maps with `compileDeclarations(map, …, DeclarationContext.Override)`. The
+ * default Base context drops CSS initial values as no-ops — but here `width: auto` or
+ * `transform: none` is how a breakpoint UNDOES the wider value, and dropping it silently keeps
+ * the desktop style.
+ */
+interface ResponsiveRuleSet {
+    breakpoint: OverrideBreakpoint;
+    mediaQuery: string;
+    /** Sparse declarations for the node itself at this width (virtual traits composed). */
+    styleProps: StyleMap;
+    /** Sparse declarations per state at this width (virtual traits composed). */
+    stateStyles: StateStyleMap;
+}
+/**
+ * The per-breakpoint rule sets a node needs, widest → narrowest (the order they must be
+ * emitted in, AFTER every base rule — equal specificity means source order decides).
+ * Breakpoints with nothing to emit are omitted.
+ *
+ * Handles the cross-axis case: a breakpoint that changes a virtual group (say
+ * `translateX`) also re-emits that group for every state the node has, because the wider
+ * state rule was composed against the wider value and would otherwise snap back to it on
+ * hover.
+ */
+declare function planResponsiveRules(styleProps: StyleMap | null | undefined, stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined): ResponsiveRuleSet[];
+
 declare class ClientSliderContainerComponent implements OnInit, AfterViewInit, OnDestroy {
     private platformId;
     nodeId: string;
@@ -519,6 +693,9 @@ declare class ClientSliderContainerComponent implements OnInit, AfterViewInit, O
     direction: 'horizontal' | 'vertical';
     loop: boolean;
     slidesPerView: number;
+    /** Declared by the config since the slider shipped, but never declared HERE — so `safeSetInput`
+     *  dropped it and the panel control did nothing on either renderer. */
+    slidesPerGroup: number;
     spaceBetween: number;
     speed: number;
     effect: string;
@@ -540,12 +717,20 @@ declare class ClientSliderContainerComponent implements OnInit, AfterViewInit, O
     paginationType: 'bullets' | 'fraction' | 'progressbar';
     paginationClickable: boolean;
     gridRows: number;
+    /** Advanced escape hatch: raw Swiper `breakpoints` JSON. Merged OVER the map derived from the
+     *  node's per-breakpoint traits, so an explicit hand-written value always wins. */
     breakpoints: string;
+    /** The node's per-breakpoint overrides. Only its `inputs` layer is read here — the style layers
+     *  are compiled to CSS by the style engine, not handed to Swiper. */
+    responsive: ResponsiveOverrides | null;
     childrenHost: ViewContainerRef;
     swiperEl: {
         nativeElement: HTMLElement;
     };
     private _swiper;
+    /** The base (Base-breakpoint) values of the traits Swiper reads per width. Read from the live
+     *  inputs rather than the node, so the builder's direct-assignment edits are picked up too. */
+    private collectSwiperInputs;
     private instanceRegistry;
     constructor(platformId: object);
     ngOnInit(): void;
@@ -553,7 +738,7 @@ declare class ClientSliderContainerComponent implements OnInit, AfterViewInit, O
     ngOnDestroy(): void;
     private _initSwiper;
     static ɵfac: i0.ɵɵFactoryDeclaration<ClientSliderContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClientSliderContainerComponent, "iox-slider-container", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "slidesPerView": { "alias": "slidesPerView"; "required": false; }; "spaceBetween": { "alias": "spaceBetween"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "effect": { "alias": "effect"; "required": false; }; "grabCursor": { "alias": "grabCursor"; "required": false; }; "centeredSlides": { "alias": "centeredSlides"; "required": false; }; "initialSlide": { "alias": "initialSlide"; "required": false; }; "enableNavigation": { "alias": "enableNavigation"; "required": false; }; "enablePagination": { "alias": "enablePagination"; "required": false; }; "enableScrollbar": { "alias": "enableScrollbar"; "required": false; }; "enableAutoplay": { "alias": "enableAutoplay"; "required": false; }; "enableKeyboard": { "alias": "enableKeyboard"; "required": false; }; "enableMousewheel": { "alias": "enableMousewheel"; "required": false; }; "enableZoom": { "alias": "enableZoom"; "required": false; }; "enableGrid": { "alias": "enableGrid"; "required": false; }; "enableParallax": { "alias": "enableParallax"; "required": false; }; "autoplayDelay": { "alias": "autoplayDelay"; "required": false; }; "autoplayPauseOnMouseEnter": { "alias": "autoplayPauseOnMouseEnter"; "required": false; }; "autoplayDisableOnInteraction": { "alias": "autoplayDisableOnInteraction"; "required": false; }; "paginationType": { "alias": "paginationType"; "required": false; }; "paginationClickable": { "alias": "paginationClickable"; "required": false; }; "gridRows": { "alias": "gridRows"; "required": false; }; "breakpoints": { "alias": "breakpoints"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClientSliderContainerComponent, "iox-slider-container", never, { "nodeId": { "alias": "nodeId"; "required": false; }; "dir": { "alias": "dir"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; "loop": { "alias": "loop"; "required": false; }; "slidesPerView": { "alias": "slidesPerView"; "required": false; }; "slidesPerGroup": { "alias": "slidesPerGroup"; "required": false; }; "spaceBetween": { "alias": "spaceBetween"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "effect": { "alias": "effect"; "required": false; }; "grabCursor": { "alias": "grabCursor"; "required": false; }; "centeredSlides": { "alias": "centeredSlides"; "required": false; }; "initialSlide": { "alias": "initialSlide"; "required": false; }; "enableNavigation": { "alias": "enableNavigation"; "required": false; }; "enablePagination": { "alias": "enablePagination"; "required": false; }; "enableScrollbar": { "alias": "enableScrollbar"; "required": false; }; "enableAutoplay": { "alias": "enableAutoplay"; "required": false; }; "enableKeyboard": { "alias": "enableKeyboard"; "required": false; }; "enableMousewheel": { "alias": "enableMousewheel"; "required": false; }; "enableZoom": { "alias": "enableZoom"; "required": false; }; "enableGrid": { "alias": "enableGrid"; "required": false; }; "enableParallax": { "alias": "enableParallax"; "required": false; }; "autoplayDelay": { "alias": "autoplayDelay"; "required": false; }; "autoplayPauseOnMouseEnter": { "alias": "autoplayPauseOnMouseEnter"; "required": false; }; "autoplayDisableOnInteraction": { "alias": "autoplayDisableOnInteraction"; "required": false; }; "paginationType": { "alias": "paginationType"; "required": false; }; "paginationClickable": { "alias": "paginationClickable"; "required": false; }; "gridRows": { "alias": "gridRows"; "required": false; }; "breakpoints": { "alias": "breakpoints"; "required": false; }; "responsive": { "alias": "responsive"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 /**
@@ -875,148 +1060,30 @@ declare function nearestCommonAncestorId(root: readonly StyleTreeNode[], styledC
  */
 declare function buildTargetedStateSelector(scopeCssId: string, triggerCssId: string, styledCssId: string, base: string): string;
 
-/** The five fixed breakpoints (plan decision D2). Desktop-first: each narrower one
- *  overrides the wider ones through `max-width`. */
-declare enum Breakpoint {
-    Base = "base",
-    Laptop = "laptop",
-    Tablet = "tablet",
-    Mobile = "mobile",
-    Small = "small"
-}
-/** Every breakpoint that can hold overrides. Base styles live in `styleProps`. */
-type OverrideBreakpoint = Exclude<Breakpoint, Breakpoint.Base>;
-interface BreakpointDef {
-    readonly id: Breakpoint;
-    readonly label: string;
-    /** Inclusive upper bound in CSS px (`max-width`). `null` for Base, which has no query. */
-    readonly maxWidth: number | null;
-    /** Width the builder canvas simulates while this breakpoint is being edited. Always
-     *  inside the breakpoint's own range (above the next one's `maxWidth`). */
-    readonly previewWidth: number;
-}
-/**
- * Widest → narrowest. This order IS the cascade order and the `@media` emission order.
- *
- * ⚠️ Phones in portrait (360–430px) land in `Small`, NOT `Mobile` — `Mobile` is 480–767,
- * a phone held landscape. The labels say so (as Webflow's do). The ids stay short because
- * they are storage keys; the cascade still makes a `Mobile` override reach every phone.
- */
-declare const BREAKPOINTS: readonly BreakpointDef[];
-/** The definition for `bp`, or `undefined` for an unknown id (e.g. hand-edited JSON). */
-declare function breakpointDef(bp: Breakpoint | string): BreakpointDef | undefined;
-/** Base → `bp`, inclusive — the layers whose values apply at `bp`. Unknown → `[Base]`. */
-declare function cascadeChain(bp: Breakpoint | string): Breakpoint[];
-/**
- * The breakpoint a viewport (or canvas) of `width` CSS px falls in — the narrowest one whose
- * `maxWidth` it fits under, else Base. Mirrors how the `max-width` media queries resolve, so the
- * builder's editing scope is always the breakpoint the canvas is actually showing.
- */
-declare function breakpointForWidth(width: number): Breakpoint;
-/** The next-wider breakpoint (what `bp` inherits from), or `null` for Base / unknown. */
-declare function parentBreakpoint(bp: Breakpoint | string): Breakpoint | null;
-/**
- * What a breakpoint's width is measured against.
- *
- * `Media` — the browser viewport. The SSR engine: a visitor's window IS the page.
- * `Container` — a named CSS size container. The builder: its canvas is a fixed-width frame inside a
- * desktop browser (and `transform: scale`d for zoom), so a media query would read the EDITOR's width.
- * A container query reads the frame's own layout width — which equals the simulated viewport and
- * ignores the zoom transform — so the builder emits the same structure as the engine.
- */
-declare enum BreakpointQueryKind {
-    Media = "media",
-    Container = "container"
-}
-/**
- * The at-rule prelude for `bp` — `@media (max-width: 767px)`, or with `Container`
- * `@container iox-canvas (max-width: 767px)`. `null` for Base or an unknown id.
- * `containerName` is required for `Container` (an unnamed container query would match
- * whichever ancestor container is nearest, which is not guaranteed to be the canvas).
- */
-declare function breakpointQueryFor(bp: Breakpoint | string, kind?: BreakpointQueryKind, containerName?: string): string | null;
-/** Wrap already-compiled rules for `bp`. Base (and blank css) passes through unwrapped. */
-declare function wrapInBreakpointQuery(bp: Breakpoint | string, css: string, kind?: BreakpointQueryKind, containerName?: string): string;
-/** `@media (max-width: 767px)` for `bp`; `null` for Base or an unknown id. */
-declare function mediaQueryFor(bp: Breakpoint | string): string | null;
-/** Wrap already-compiled rules for `bp` in its media query. Base (and blank css) passes through. */
-declare function wrapInMediaQuery(bp: Breakpoint | string, css: string): string;
-type StyleMap = Record<string, any>;
-type StateStyleMap = Record<string, StyleMap>;
-/** What one breakpoint overrides. Both maps are SPARSE — only keys that differ. */
-interface ResponsiveLayer {
-    styleProps?: StyleMap;
-    stateStyles?: StateStyleMap;
-}
-type ResponsiveOverrides = Partial<Record<OverrideBreakpoint, ResponsiveLayer>>;
-/** The full effective style map at `bp`: base, then each layer down the cascade. */
-declare function resolveStyleProps(styleProps: StyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string): StyleMap;
-/** The effective per-state maps at `bp`. States with no values anywhere are omitted. */
-declare function resolveStateStyles(stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string): StateStyleMap;
-/**
- * Every state that has a value anywhere — at base or at any breakpoint — in a stable order
- * (base states first, then any that exist only at a breakpoint). A renderer iterates this, not
- * `Object.keys(stateStyles)`, so a state defined ONLY at a breakpoint (a Mobile-only hover) still
- * gets its selector scope resolved.
- */
-declare function stateNamesIn(stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined): string[];
-/** One level of the cascade that sets a value. */
-interface ValueSource {
-    breakpoint: Breakpoint;
-    value: any;
-}
+/** Trait names whose value Swiper reads per breakpoint. Anything else is config-wide. */
+declare const SWIPER_RESPONSIVE_TRAITS: readonly string[];
+/** `{ [minWidth]: { slidesPerView, … } }` — Swiper's own `breakpoints` shape. */
+type SwiperBreakpointMap = Record<number, InputMap>;
 /**
- * Every level from Base down to `bp` that sets `prop` (optionally within `state`), in
- * cascade order. The LAST entry is the effective value; an empty array means unset.
- * Drives the style panel's source chain ("Base 34 → Tablet 28 → Mobile 22").
- */
-declare function resolveValueChain(prop: string, styleProps: StyleMap | null | undefined, stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, state?: string): ValueSource[];
-/** True when `bp` itself sets `prop` (the style panel's orange edge). Never true for Base. */
-declare function isOverriddenAt(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, prop: string, state?: string): boolean;
-/** Number of overridden values — at `bp`, or across every breakpoint when omitted. */
-declare function countOverrides(responsive: ResponsiveOverrides | null | undefined, bp?: Breakpoint | string): number;
-/** Returns a new overrides object with `prop` set at `bp` (optionally within `state`). */
-declare function setOverride(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, prop: string, value: any, state?: string): ResponsiveOverrides;
-/**
- * Remove overrides at `bp` and PRUNE whatever becomes empty, so "reset" and "never
- * overridden" are the same state on disk — no tombstones, no nulls.
+ * Build Swiper's mobile-first `breakpoints` map from IOX's desktop-first layers.
  *
- *   clearOverride(r, bp)                 — the whole breakpoint
- *   clearOverride(r, bp, undefined, st)  — one state at that breakpoint
- *   clearOverride(r, bp, prop)           — one base-state value
- *   clearOverride(r, bp, prop, st)       — one value within a state
+ * Each IOX breakpoint covers `[nextNarrower.maxWidth + 1 … this.maxWidth]`, so the Swiper key for a
+ * layer is **one px above the next-narrower breakpoint's max-width** — the low edge of the band the
+ * layer governs. Base becomes the key above the widest bounded breakpoint.
  *
- * Returns `undefined` when nothing is left, so a serialiser omits the key entirely.
- */
-declare function clearOverride(responsive: ResponsiveOverrides | null | undefined, bp: Breakpoint | string, prop?: string, state?: string): ResponsiveOverrides | undefined;
-/**
- * Everything one breakpoint must emit, already composed. Wrap in `mediaQuery` (engine)
- * or apply directly (builder, flattened).
+ * Values are the RESOLVED ones at each width (base + every wider layer), never the raw sparse layer:
+ * Swiper does not cascade between its own breakpoints the way CSS does — the largest matching key
+ * wins outright and is not merged with smaller ones — so each entry must be self-sufficient.
  *
- * ⚠️ Compile these maps with `compileDeclarations(map, …, DeclarationContext.Override)`. The
- * default Base context drops CSS initial values as no-ops — but here `width: auto` or
- * `transform: none` is how a breakpoint UNDOES the wider value, and dropping it silently keeps
- * the desktop style.
+ * Only `SWIPER_RESPONSIVE_TRAITS` are emitted, and a band is omitted when it matches the band below
+ * it, keeping the config as small as the author's actual overrides.
  */
-interface ResponsiveRuleSet {
-    breakpoint: OverrideBreakpoint;
-    mediaQuery: string;
-    /** Sparse declarations for the node itself at this width (virtual traits composed). */
-    styleProps: StyleMap;
-    /** Sparse declarations per state at this width (virtual traits composed). */
-    stateStyles: StateStyleMap;
-}
+declare function buildSwiperBreakpoints(inputs: InputMap | null | undefined, responsive: ResponsiveOverrides | null | undefined): SwiperBreakpointMap;
 /**
- * The per-breakpoint rule sets a node needs, widest → narrowest (the order they must be
- * emitted in, AFTER every base rule — equal specificity means source order decides).
- * Breakpoints with nothing to emit are omitted.
- *
- * Handles the cross-axis case: a breakpoint that changes a virtual group (say
- * `translateX`) also re-emits that group for every state the node has, because the wider
- * state rule was composed against the wider value and would otherwise snap back to it on
- * hover.
+ * The full `breakpoints` value to hand Swiper: the derived map, with any hand-written advanced JSON
+ * merged OVER it so an author's explicit escape hatch always wins.
  */
-declare function planResponsiveRules(styleProps: StyleMap | null | undefined, stateStyles: StateStyleMap | null | undefined, responsive: ResponsiveOverrides | null | undefined): ResponsiveRuleSet[];
+declare function mergeSwiperBreakpoints(derived: SwiperBreakpointMap, advancedJson: string | null | undefined): SwiperBreakpointMap | undefined;
 
 /**
  * Shared data-source resolving pattern — the SINGLE source of truth for how an IoxDataSource
@@ -1935,5 +2002,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
-export type { BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, IoxContextSlot, IoxPipe, OverrideBreakpoint, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };
+export { AOSService, AnalyticsService, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CMSClientInfraModule, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ConsentService, ContainerComponent, ContentService, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, ENVIRONMENT, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, IOX_BUILDER_EVENTS, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxPageComponent, IoxPageModule, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, PrivacyModalComponent, PrivacyModalService, PrivacyModelEvent, RESERVED_ALIAS_PREFIX, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, WebSettingsService, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, composeVirtualTraits, computeRelative, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, effectiveTransitionId, excludeSelf, feelFor, getByPath, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, parentBreakpoint, parseUrlList, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, stateNamesIn, stripSuppressedProps, styleKeyToKebab, variableAliases, variableItemsFrom, withContextSlots, wrapInBreakpointQuery, wrapInMediaQuery };
+export type { BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, OverrideBreakpoint, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

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