@vectoriox/iox-ui 5.84.0 → 5.85.0

package/styles/iox-design.css

@@ -142,13 +142,40 @@ 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-slow) var(--iox-ease-standard), scale var(--iox-dur-slow) var(--iox-ease-standard);
+    transition: transform var(--iox-dur-ui) var(--iox-ease-standard), scale var(--iox-dur-ui) 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 {
         scale: var(--card-media-zoom);
     }
 }
+/* M4 (the D3 follow-ups — Emil 144, 28, 74): a LINKED card's lift, its raised shadow and its picture's zoom are ONE
+   timing under 300ms (dur-ui; the card style's dur-base and the media's dur-slow ran past it in most looks). Its shadow
+   rises by fading a pseudo-element that wears card-shadow-raise — the card's own box-shadow no longer changes on hover
+   (every card's hover shadow is its rest shadow now; a non-linked card never rose). `translate: 0px` is identity: it
+   makes the card the pseudo's containing block and stacking context whatever position the card holds (the canvas
+   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);
+    translate: 0px;
+}
+:is(a.iox-es-card, .iox-es-card:has(> a.linked-container-root), .iox-es-card:has(.iox-card-link))::before {
+    content: '';
+    position: absolute;
+    inset: calc(var(--iox-card-border-width, 0px) * -1);
+    border-radius: inherit;
+    box-shadow: var(--iox-card-shadow-raise);
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+    transition: opacity var(--iox-dur-ui) 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 {
+        opacity: 1;
+    }
+}
 
 /* ── CC1: mobile navigation (complex-components plan §7a, R1; boards 1–2) ─────────────────────── */
 
@@ -226,6 +253,16 @@ dialog[data-iox-dialog].iox-es:is([data-iox-closing], :not([open]))::backdrop {
 @starting-style {
     dialog[data-iox-dialog].iox-es[open]::backdrop { opacity: 0; }
 }
+/* M4 (M1.1's carry-over — Emil 101): a styled dialog separates from the page behind it by a hairline edge in the look's
+   `dialog-edge` (its line colour) — on a DARK page under a dark scrim its shadow is swallowed and the phone drawer
+   vanished into the page. An outline, so the dialog's own box-shadow (the look's, or the author's) is untouched; drawn
+   inside its edge, following its radius. The sheet itself takes focus when it opens (the engine), so it never rings:
+   the first Tab moves to its Close, with the ring. */
+dialog[data-iox-dialog].iox-es {
+    outline: var(--iox-border-width, 1px) solid var(--iox-dialog-edge, transparent);
+    outline-offset: calc(var(--iox-border-width, 1px) * -1);
+}
+
 /* The drawer's pages arrive WITH it (decision D1 — Emil 64/65/110: one entrance per container, no menu-row stagger):
    the sheet slides in carrying its links, and they leave with it. */
 
@@ -240,6 +277,7 @@ dialog[data-iox-dialog] {
 .iox-role-nav-links,
 .iox-role-nav-drawer-links {
     --iox-link-decoration: none;
+    --iox-link-underline-rest: 0;
 }
 
 /* The BOTTOM BAR (board 2, "The CSS, exactly"): fixed to the bottom of the viewport (on the canvas, of the
@@ -474,3 +512,196 @@ span.iox-video__play { pointer-events: none; }
         background: var(--iox-scrim);
     }
 }
+
+/* ── Premium components M4 (T2): how a header behaves as the page scrolls ─────────────────────────────────────────
+   Keyed on the attributes every renderer writes from the header's two traits (design-core headerAttributes). A header
+   that STAYS or HIDES keeps to the top of the screen while the page scrolls under it; one that hides steps aside on the
+   way down, moved by the header runtime (`translate`, from the live value — HeaderRuntime). On the live site the
+   globals' wrapper is `display: contents`, so the header sticks to the whole page; on the builder canvas the header lives
+   in the frame-pinned overlay (global-elements.md) and the canvas keeps its own `position`. */
+:root [data-iox-header] {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 30;
+}
+/* Faded under reduced motion (the runtime): not clickable while it is away. */
+[data-iox-header][data-iox-header-hidden] {
+    pointer-events: none;
+}
+/* The EDGE (Emil 99): once the page has moved under it, a header shows a soft fade of its own ground — or a hairline —
+   instead of a divider drawn at all times. Its look's own bottom line gives way; the edge is a pseudo-element that only
+   fades in (no layout, no box-shadow). An eased gradient (Emil 174): no visible band where the fade ends. Only on a
+   header that stays at the top (one that scrolls away is gone by the time the page has moved); the header is its
+   containing block — sticky here, and `relative` as stored (the Header section writes it; the canvas forces a node's
+   own position, and a transform on the header would trap its drawer's stage). */
+[data-iox-header][data-iox-header-edge] {
+    --iox-nav-border-width: 0px;
+}
+[data-iox-header][data-iox-header-edge]::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 100%;
+    block-size: 16px;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--iox-dur-ui) var(--iox-ease-standard);
+}
+[data-iox-header][data-iox-header-edge='fade']::after {
+    background: linear-gradient(to bottom,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 100%, transparent) 0%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 74%, transparent) 19%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 54%, transparent) 34%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 34%, transparent) 50%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 17%, transparent) 67%,
+        color-mix(in srgb, var(--iox-nav-bg, transparent) 6%, transparent) 83%,
+        transparent 100%);
+}
+[data-iox-header][data-iox-header-edge='line']::after {
+    block-size: var(--iox-border-width, 1px);
+    background: var(--iox-nav-border, currentColor);
+}
+[data-iox-scrolled] [data-iox-header][data-iox-header-edge]:not([data-iox-header-edge='none'])::after {
+    opacity: 1;
+}
+/* Emil 194/195: reduced transparency makes the bar solid (the token sheet clears its blur and its ground); more
+   contrast makes it near-solid with a defined, contrasting edge. A Brand-scheme bar keeps its own solid ground. */
+@media (prefers-contrast: more) {
+    .iox-es-nav:not([class*='iox-scheme-']) {
+        --iox-nav-bg: var(--iox-bg);
+    }
+    .iox-es-nav,
+    [data-iox-header][data-iox-header-edge] {
+        --iox-nav-backdrop: none;
+        --iox-nav-border: var(--iox-text);
+        --iox-nav-border-width: 0px 0px var(--iox-border-width, 1px) 0px;
+    }
+    .iox-es-bottom-bar {
+        --iox-tabbar-bg: var(--iox-bg);
+        --iox-tabbar-backdrop: none;
+        --iox-tabbar-border: var(--iox-text);
+    }
+}
+
+/* ── Premium components M4 (T3): a link's underline, drawn ──────────────────────────────────────────────────────────
+   An element-styled link draws its underline as a line in its own ink under its words, scaled along them from the
+   READING START (mirrored in RTL) — so it can grow on hover. `link-underline-rest` is how much shows at rest (1 in
+   running content; 0 in a navigation's lists, by their role): it grows on hover (hover devices only — G1), for keyboard
+   focus, and the current page's link holds its 2px accent line. The node's own text-decoration reads none here (the
+   two decoration tokens are re-declared), so a line is never drawn twice; a legacy link keeps its text-decoration.
+   A background line, so it follows the words onto a second line and needs no positioning (the canvas forces a node's
+   position); its growth is a background-size the shared compiler adds to the link's transition (withStateTransitions).
+   The colour and the line move on the hover timing — ≤150ms on `ease` (Emil 92). */
+.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);
+    background-image: linear-gradient(currentColor, currentColor);
+    background-repeat: no-repeat;
+    background-position: 0% calc(100% - var(--iox-link-underline-offset, 0px));
+    background-size: calc(var(--iox-link-underline-rest, 1) * 100%) var(--iox-link-underline-thickness, 1px);
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+}
+.iox-es-link:dir(rtl) {
+    background-position-x: 100%;
+}
+@media (hover: hover) and (pointer: fine) {
+    .iox-es-link:hover {
+        background-size: 100% var(--iox-link-underline-thickness, 1px);
+    }
+}
+.iox-es-link:focus-visible {
+    background-size: 100% var(--iox-link-underline-thickness, 1px);
+}
+.iox-es-link[aria-current='page'] {
+    background-image: linear-gradient(var(--iox-link-current-underline, currentColor), var(--iox-link-current-underline, currentColor));
+    background-size: 100% var(--iox-link-current-underline-thickness, 2px);
+}
+/* Reduced motion: the line appears and goes in place (it never travels); the colour still eases (Emil 192). */
+@media (prefers-reduced-motion: reduce) {
+    .iox-es.iox-es-link {
+        transition-property: color;
+    }
+}
+/* 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);
+}
+
+/* ── 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);
+}
+
+/* ── Premium components M4 (T3): the Slider's feel, its bar and the slider the scroll plays ─────────────────────────
+   One curve for the slides: the look's (Emil 18/21 — never Swiper's built-in `ease`). A horizontal carousel leaves
+   vertical panning to the page (M9). */
+:where(.swiper) {
+    --swiper-wrapper-transition-timing-function: var(--iox-slider-ease, ease);
+}
+:where(.swiper-horizontal) {
+    touch-action: pan-y;
+}
+/* The BAR under the picture (M1.3): the caption at the reading start, then the count and the arrows — in flow, never on
+   the picture (the bar node lays them out; these keep its words from pushing the arrows). The count reads "1 / 3" in
+   every language. */
+:where(.iox-role-slider-bar) .iox-role-slider-caption {
+    min-width: 0;
+}
+/* Their words are the slide in view's, written by the runtime as an attribute (composite-core attachSliderBar). */
+:is(.iox-role-slider-caption, .iox-role-slider-count)::before {
+    content: attr(data-iox-text);
+}
+.iox-role-slider-count {
+    direction: ltr;
+    unicode-bidi: isolate;
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+}
+/* 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);
+}
+.iox-role-slider-caption[data-iox-swapping] {
+    opacity: 0;
+    transition-duration: 0ms;
+}
+/* On a phone a "cards" stack stays a centred card with its neighbours peeking out (one picture the full width is
+   planSwiperOptions' default for every other effect). */
+@media (max-width: 767px) {
+    .swiper.swiper-cards {
+        width: 86%;
+        margin-inline: auto;
+    }
+}
+/* A Slider the SCROLL plays: its runway holds the slider mid-screen while the page scrolls past half a screen per
+   picture; the ONE scene driver moves it, resting on each picture (scene-core `heldProgress`). `--slider-steps` is
+   written by the renderers (no layout shift), `--slider-h` by the slider's boot. On the canvas the driver pins it
+   (its page never scrolls itself) and `--preview-vh` stands for the frame's height. Under reduced motion it is an
+   ordinary slider: no runway, swiped and pressed. */
+.iox-slider-runway {
+    position: relative;
+}
+.iox-slider-runway > :is(.swiper, .slider-edit-shell) {
+    position: sticky;
+    inset-block-start: max(0px, calc((var(--preview-vh, 1svh) * 100 - var(--slider-h, 0px)) / 2));
+}
+.iox-slider-runway::after {
+    content: '';
+    display: block;
+    block-size: calc(var(--slider-steps, 0) * var(--preview-vh, 1svh) * 55);
+}
+@media (prefers-reduced-motion: reduce) {
+    .iox-slider-runway::after {
+        display: none;
+    }
+    .iox-slider-runway > :is(.swiper, .slider-edit-shell) {
+        position: relative;
+        inset-block-start: 0;
+    }
+}
+

package/styles/iox-forms.css

@@ -549,7 +549,8 @@ dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
 /* ── Premium M3, under the field marker: a Choices field's chips wear the `chip` element style (N1); a Date's words,
    glyph and open box, its calendar the `calendar` style and every day `calendar-day` (N8). These rules ARE the
    contract's fieldClassBaseline entries, verbatim (generated from the element styles by build-spec.mjs; pinned by
-   token-names.spec). Hover is gated to hover devices (G1). ── */
+   token-names.spec). Hover is gated to hover devices (G1). M4: a chip's colour moves on the hover timing (dur-hover,
+   ≤150ms on `ease` — Emil 92); a chip and a day press on dur-press and release on the slower dur-fast (Emil 55/85). ── */
 .iox-es-field .iox-field__chip {
   background-color: transparent;
   color: var(--iox-text);
@@ -561,10 +562,11 @@ dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
   font-family: var(--iox-font-label);
   font-size: var(--iox-badge-size);
   font-weight: var(--iox-weight-label);
-  transition: border-color var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard);
+  transition: border-color var(--iox-dur-hover) var(--iox-ease-hover), background-color var(--iox-dur-hover) var(--iox-ease-hover), color var(--iox-dur-hover) var(--iox-ease-hover), box-shadow var(--iox-dur-hover) var(--iox-ease-hover), opacity var(--iox-dur-hover) var(--iox-ease-hover), transform var(--iox-dur-fast) var(--iox-ease-standard);
 }
 .iox-es-field .iox-field__chip:active:not(:has(:disabled)) {
   transform: scale(var(--iox-press-scale));
+  transition-duration: var(--iox-dur-press);
 }
 @media (hover: hover) and (pointer: fine) {
 .iox-es-field .iox-field__chip:hover:not(:has(:disabled)) {
@@ -639,6 +641,7 @@ dialog.iox-cal[data-iox-instant]::backdrop { transition: none !important; }
 }
 .iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true']) {
   transform: scale(var(--iox-press-scale));
+  transition-duration: var(--iox-dur-press);
 }
 @media (hover: hover) and (pointer: fine) {
 .iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true']) {