@vectoriox/iox-ui 5.86.0 → 5.86.1

package/generation-core/index.d.ts

@@ -7729,7 +7729,11 @@ declare enum ScrimLevel {
 declare const SCRIM_LEVELS: ReadonlyArray<ScrimLevel>;
 /** What each level writes on the scrim node (`backgroundColor`, token references only) — `null`: the style's own. */
 declare const SCRIM_BACKGROUND: Readonly<Record<ScrimLevel, string | null>>;
-/** The least share of the scrim's own strength under the first line of words, at each level (the gradient's ramp). */
+/**
+ * The least share of the scrim's own strength under the FIRST line of words, at each level — read from where the words
+ * start in the box (its top padding) against the gradient's ramp, on a phone (the tallest box): the element style's own
+ * ramp (`transparent 0%` → full at 45%) has only about a quarter of its strength there; Firm starts at three quarters.
+ */
 declare const SCRIM_COVER: Readonly<Record<ScrimLevel, number>>;
 /** WCAG AA for body text — the words over a picture include a lead and a button label, never only a headline. */
 declare const PICTURE_TEXT_CONTRAST = 4.5;

package/index.d.ts

@@ -776,6 +776,10 @@ declare class ClientSliderContainerComponent implements AfterViewInit, OnDestroy
     };
     private swiper;
     private slidesSeen;
+    /** The slides the renderer placed (it asks `childHostFor` for each, before the first change detection), so a played
+     *  slider's runway reserves its steps in the SERVER render — the page never shifts when the slider boots. */
+    private slideTotal;
+    get runwaySteps(): number;
     private readonly instanceRegistry;
     constructor(platformId: object);
     /** Swiper draws its own arrows / dots only for a saved slider whose controls are not parts yet. */

package/package.json

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

package/src/generation-core/pictures.ts

@@ -351,14 +351,18 @@ export const SCRIM_LEVELS: ReadonlyArray<ScrimLevel> = [ScrimLevel.Soft, ScrimLe
 /** What each level writes on the scrim node (`backgroundColor`, token references only) — `null`: the style's own. */
 export const SCRIM_BACKGROUND: Readonly<Record<ScrimLevel, string | null>> = {
     [ScrimLevel.Soft]: null,
-    [ScrimLevel.Firm]: 'linear-gradient(180deg, transparent 0%, var(--iox-media-scrim) 18%)',
+    [ScrimLevel.Firm]: 'linear-gradient(180deg, color-mix(in srgb, var(--iox-media-scrim) 75%, transparent) 0%, var(--iox-media-scrim) 35%)',
     [ScrimLevel.Full]: 'var(--iox-media-scrim)',
 };
 
-/** The least share of the scrim's own strength under the first line of words, at each level (the gradient's ramp). */
+/**
+ * The least share of the scrim's own strength under the FIRST line of words, at each level — read from where the words
+ * start in the box (its top padding) against the gradient's ramp, on a phone (the tallest box): the element style's own
+ * ramp (`transparent 0%` → full at 45%) has only about a quarter of its strength there; Firm starts at three quarters.
+ */
 export const SCRIM_COVER: Readonly<Record<ScrimLevel, number>> = {
-    [ScrimLevel.Soft]: 0.5,
-    [ScrimLevel.Firm]: 0.85,
+    [ScrimLevel.Soft]: 0.25,
+    [ScrimLevel.Firm]: 0.75,
     [ScrimLevel.Full]: 1,
 };
 

package/src/scene-core/scroll-driver.ts

@@ -131,8 +131,9 @@ export class ScrollDriver {
     private lastTime = 0;
     private readonly wakeUp = (): void => this.wake();
     private readonly onWakeEvent = (e: Event): void => {
+        // What arrived may be the stage itself (a played slider marks its stage when it boots): read the root again.
         const scene = [...this.scenes.values()].find(s => s.root.contains(e.target as Node));
-        if (scene) { scene.fresh = true; this.wake(); }
+        if (scene) this.readScene(scene);
     };
 
     constructor(private readonly options: ScrollDriverOptions = {}) {

package/styles/iox-design.css

@@ -142,7 +142,7 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
     --iox-image-hover-scale: 1;
 }
 .iox-es-card .iox-es-media {
-    transition: transform var(--iox-dur-ui) var(--iox-ease-standard), scale var(--iox-dur-ui) var(--iox-ease-standard);
+    transition: transform var(--iox-dur-ui, 200ms) var(--iox-ease-standard), scale var(--iox-dur-ui, 200ms) var(--iox-ease-standard);
 }
 @media (hover: hover) and (pointer: fine) {
     :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link)):hover .iox-es-media {
@@ -157,7 +157,7 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
    forces its own), so the pseudo sits under the card's content and its shadow outside the card's edge. */
 :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link)) {
     --iox-card-shadow-hover: var(--iox-card-shadow);
-    --iox-dur-base: var(--iox-dur-ui);
+    --iox-dur-base: var(--iox-dur-ui, 200ms);
     translate: 0px;
 }
 :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link))::before {
@@ -165,11 +165,11 @@ iox-gallery.iox-es-media[data-iox-empty] > .iox-gallery {
     position: absolute;
     inset: calc(var(--iox-card-border-width, 0px) * -1);
     border-radius: inherit;
-    box-shadow: var(--iox-card-shadow-raise);
+    box-shadow: var(--iox-card-shadow-raise, var(--iox-shadow-md, none));
     opacity: 0;
     pointer-events: none;
     z-index: -1;
-    transition: opacity var(--iox-dur-ui) var(--iox-ease-standard);
+    transition: opacity var(--iox-dur-ui, 200ms) var(--iox-ease-standard);
 }
 @media (hover: hover) and (pointer: fine) {
     :is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link)):hover::before {
@@ -495,12 +495,15 @@ span.iox-video__play { pointer-events: none; }
   display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; border-radius: var(--iox-radius-pill, 999px);
   background: none; opacity: 1; cursor: pointer; color: inherit;
 }
+/* The dot grows into the pill by its CLIP (premium M4 — Emil 41: never an animated width): the pill is always 26px wide,
+   clipped to an 8px dot at rest and opened whole when current — a compositor property, the dot's round ends kept. */
 .iox-role-slider-pagination .swiper-pagination-bullet::after {
-  content: ''; display: block; width: 8px; height: 8px; border-radius: var(--iox-radius-pill, 999px); background: var(--iox-line-strong);
-  transition: width var(--iox-dur-fast) var(--iox-ease-standard);
+  content: ''; display: block; width: 26px; height: 8px; border-radius: var(--iox-radius-pill, 999px); background: var(--iox-line-strong);
+  clip-path: inset(0 9px round var(--iox-radius-pill, 999px));
+  transition: clip-path var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard);
 }
 .iox-role-slider-pagination .swiper-pagination-bullet-active { width: 34px; }
-.iox-role-slider-pagination .swiper-pagination-bullet-active::after { width: 26px; background: currentColor; }
+.iox-role-slider-pagination .swiper-pagination-bullet-active::after { clip-path: inset(0 0 round var(--iox-radius-pill, 999px)); background: currentColor; }
 .iox-role-slider-pagination .swiper-pagination-bullet:focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }
 
 /* ── The date picker's sheet (premium components N8) ────────────────────────────────────────────────
@@ -545,7 +548,7 @@ span.iox-video__play { pointer-events: none; }
     block-size: 16px;
     pointer-events: none;
     opacity: 0;
-    transition: opacity var(--iox-dur-ui) var(--iox-ease-standard);
+    transition: opacity var(--iox-dur-ui, 200ms) var(--iox-ease-standard);
 }
 [data-iox-header][data-iox-header-edge='fade']::after {
     background: linear-gradient(to bottom,
@@ -595,8 +598,8 @@ span.iox-video__play { pointer-events: none; }
 .iox-es-link {
     --iox-link-decoration: none;
     --iox-link-current-decoration: none;
-    --iox-dur-fast: var(--iox-dur-hover);
-    --iox-ease-standard: var(--iox-ease-hover);
+    --iox-dur-fast: var(--iox-dur-hover, 150ms);
+    --iox-ease-standard: var(--iox-ease-hover, ease);
     background-image: linear-gradient(currentColor, currentColor);
     background-repeat: no-repeat;
     background-position: 0% calc(100% - var(--iox-link-underline-offset, 0px));
@@ -627,14 +630,14 @@ span.iox-video__play { pointer-events: none; }
 }
 /* A chip's colour moves on the hover timing too (Emil 92 — M3's review). */
 .iox-es-chip {
-    --iox-dur-fast: var(--iox-dur-hover);
-    --iox-ease-standard: var(--iox-ease-hover);
+    --iox-dur-fast: var(--iox-dur-hover, 150ms);
+    --iox-ease-standard: var(--iox-ease-hover, ease);
 }
 
 /* ── Premium components M4 (Emil 55/85): a press lands faster than its release ──────────────────────────────────────
    While pressed, every pressable's transition runs on dur-press; it releases on its own (slower) dur-fast. */
 :is(.iox-es-button-primary, .iox-es-button-secondary, .iox-es-button-ghost, .iox-es-bottom-bar-item):active {
-    transition-duration: var(--iox-dur-press);
+    transition-duration: var(--iox-dur-press, 100ms);
 }
 
 /* ── Premium components M4 (T3): the Slider's feel, its bar and the slider the scroll plays ─────────────────────────
@@ -664,7 +667,7 @@ span.iox-video__play { pointer-events: none; }
 }
 /* The caption follows the slide in view: it changes behind a short fade (the runtime holds it at 0 for a frame). */
 .iox-role-slider-caption {
-    transition: opacity var(--iox-dur-hover) var(--iox-ease-hover);
+    transition: opacity var(--iox-dur-hover, 150ms) var(--iox-ease-hover, ease);
 }
 .iox-role-slider-caption[data-iox-swapping] {
     opacity: 0;