@vectoriox/iox-ui 5.84.0 → 5.86.0

package/src/design-core/header-behaviour.ts

@@ -0,0 +1,76 @@
+/**
+ * How a site's header behaves as the page scrolls (premium components T2, M4). Two traits on the header's ROOT (the
+ * Navigation bar, generation-core `NavRole.Root`) — edited in its "Header" section, stamped by the composer from a
+ * `nav.*` pattern's `header` — and ONE answer every renderer applies: the attributes below, which the shared CSS
+ * (`iox-design.css`) and the header runtime (`HeaderRuntime`, main entry) read. A header with neither trait renders
+ * exactly as before (it scrolls away with the page, its divider line as its look draws it).
+ *
+ * Framework-free: the composer (generation-core) and both renderers read it.
+ */
+
+export enum HeaderBehaviour {
+    /** It scrolls away with the page (the default; what every header saved before M4 does). */
+    Scrolls = 'scrolls',
+    /** It stays at the top while the page scrolls under it. */
+    Stays = 'stays',
+    /** It steps aside while the page scrolls down and comes back the moment it scrolls up. */
+    Hides = 'hides',
+}
+
+/** What separates the header from the page once the page has moved under it (Emil 99: an edge, not a divider). */
+export enum HeaderEdge {
+    /** A soft fade of the header's own ground over the content under it. */
+    Fade = 'fade',
+    /** A hairline in the header's border colour. */
+    Line = 'line',
+    None = 'none',
+}
+
+/** The traits, stored in the root's props (no default: a plain Container saves neither). */
+export enum HeaderTrait {
+    Behaviour = 'headerBehaviour',
+    Edge = 'headerEdge',
+}
+
+export enum HeaderAttribute {
+    /** `stays` | `hides` on a header that stays at the top. Absent: it scrolls away. */
+    Behaviour = 'data-iox-header',
+    /** `fade` | `line` | `none`: the edge it shows once the page has scrolled. Absent: its look's own divider stays. */
+    Edge = 'data-iox-header-edge',
+    /** Written by the header runtime while a `hides` header has stepped aside. */
+    Hidden = 'data-iox-header-hidden',
+}
+
+/** What a composed header gets (the `nav.*` patterns' `header`, the palette's Navigation bar). */
+export const COMPOSED_HEADER: Readonly<{ behaviour: HeaderBehaviour; edge: HeaderEdge }> = {
+    behaviour: HeaderBehaviour.Hides,
+    edge: HeaderEdge.Fade,
+};
+
+const BEHAVIOURS = new Set<string>(Object.values(HeaderBehaviour));
+const EDGES = new Set<string>(Object.values(HeaderEdge));
+
+/** A stored behaviour, or Scrolls for anything else. */
+export function headerBehaviourOf(value: unknown): HeaderBehaviour {
+    return typeof value === 'string' && BEHAVIOURS.has(value) ? value as HeaderBehaviour : HeaderBehaviour.Scrolls;
+}
+
+/** A stored edge, or null (none chosen: the look's divider stays as it is). */
+export function headerEdgeOf(value: unknown): HeaderEdge | null {
+    return typeof value === 'string' && EDGES.has(value) ? value as HeaderEdge : null;
+}
+
+/** True when the header keeps its place at the top of the screen (it stays, or it hides and comes back). */
+export function headerStaysAtTop(behaviour: unknown): boolean {
+    return headerBehaviourOf(behaviour) !== HeaderBehaviour.Scrolls;
+}
+
+/** The attributes a header renders, from its two trait values — `{}` for a header that keeps today's behaviour. */
+export function headerAttributes(behaviour: unknown, edge: unknown): Record<string, string> {
+    const out: Record<string, string> = {};
+    const b = headerBehaviourOf(behaviour);
+    if (b !== HeaderBehaviour.Scrolls) out[HeaderAttribute.Behaviour] = b;
+    const e = headerEdgeOf(edge);
+    if (e) out[HeaderAttribute.Edge] = e;
+    return out;
+}

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

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

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

@@ -3,6 +3,8 @@ 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';
+/** …or the header's ground, when a header stays at the top of the screen (premium components T2, M4). */
+export const HEADER_THEME_COLOR_TOKEN = 'nav-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. */
@@ -20,22 +22,36 @@ function resolveIn(map: ReadonlyMap<string, string>, value: string | undefined,
     return resolveIn(map, map.get(ref[1]) ?? ref[2]?.trim(), depth + 1);
 }
 
-function colourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean): string | undefined {
+function colourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean, token: string): 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));
+    const colour = resolveIn(map, map.get(token));
     return colour && SOLID_COLOUR.test(colour) ? colour : undefined;
 }
 
+export interface ThemeColorOptions {
+    /** A header stays at the top of the screen (it stays, or hides and comes back): the browser's chrome meets the
+     *  HEADER, so it takes the header's ground when that is a solid colour (a translucent one falls back to the page's). */
+    header?: boolean;
+}
+
+function themeColourFor(rows: ReadonlyArray<DesignTokenLike>, dark: boolean, options: ThemeColorOptions): string | undefined {
+    return (options.header ? colourFor(rows, dark, HEADER_THEME_COLOR_TOKEN) : undefined) ?? colourFor(rows, dark, THEME_COLOR_TOKEN);
+}
+
 /**
  * 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 {
+export function themeColors(
+    rows: ReadonlyArray<DesignTokenLike> | null | undefined,
+    mode: DesignMode | string | null | undefined = 'auto',
+    options: ThemeColorOptions = {},
+): 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; }
+    if (mode !== 'dark') { const light = themeColourFor(list, false, options); if (light) out.light = light; }
+    if (mode !== 'light') { const dark = themeColourFor(list, true, options); if (dark) out.dark = dark; }
     return out;
 }

package/src/forms-core/submit-lifecycle.ts

@@ -24,6 +24,27 @@ export enum FormRenderState {
 /** The attribute every renderer writes a form's state on (the canvas switcher, both live paths). */
 export const FORM_STATE_ATTRIBUTE = 'data-iox-state';
 
+/**
+ * What a form shows once it has sent (premium M5, N3) — the Form's "After sending" choice:
+ * - `message`: the success in place (M3): the fields leave, the Success block shows, Send reads "Sent" and stays so;
+ * - `toast`: the fields STAY, cleared for the next answer, and a toast says the form's Sent words — a newsletter in a
+ *   footer, a form someone may send again.
+ */
+export enum FormAfterSend {
+    Message = 'message',
+    Toast = 'toast',
+}
+
+/** The Form trait holding the choice. */
+export const FORM_AFTER_SEND_TRAIT = 'afterSend';
+/** The attribute every renderer writes it on (only when it is `toast` — `message` is what a form always did). */
+export const FORM_AFTER_SEND_ATTRIBUTE = 'data-iox-after-send';
+
+/** The choice a stored value names (`message` unless it says `toast`). */
+export function formAfterSend(value: unknown): FormAfterSend {
+    return value === FormAfterSend.Toast ? FormAfterSend.Toast : FormAfterSend.Message;
+}
+
 /** What the form does once the server has answered. */
 export interface SubmitOutcome {
     state: FormRenderState;
@@ -32,13 +53,19 @@ export interface SubmitOutcome {
     /** A success clears the answers, so they cannot be sent twice. */
     reset: boolean;
     redirect?: string;
+    /** Say it in a toast (the form keeps its fields and goes back to Idle). */
+    toast?: boolean;
 }
 
 /**
- * The server's answer → what the visitor sees. Only a confirmed success is Success; per-field verdicts
- * land on the fields; anything else (a dropped network included) is the designed Error block.
+ * The server's answer → what the visitor sees. Only a confirmed success is Success (or, for a form that keeps its
+ * fields, Idle again with a toast); per-field verdicts land on the fields; anything else (a dropped network included)
+ * is the designed Error block.
  */
-export function submitOutcome(response: SubmitResponse | null | undefined): SubmitOutcome {
+export function submitOutcome(response: SubmitResponse | null | undefined, afterSend: FormAfterSend | string | null = FormAfterSend.Message): SubmitOutcome {
+    if (response?.ok && formAfterSend(afterSend) === FormAfterSend.Toast) {
+        return { state: FormRenderState.Idle, reset: true, toast: true, ...(response.redirect ? { redirect: response.redirect } : {}) };
+    }
     if (response?.ok) return { state: FormRenderState.Success, reset: true, ...(response.redirect ? { redirect: response.redirect } : {}) };
     if (response?.errors && Object.keys(response.errors).length) return { state: FormRenderState.Idle, errors: response.errors, reset: false };
     return { state: FormRenderState.Error, reset: false };

package/src/generation-core/baseline-roles.ts

@@ -61,6 +61,7 @@ export const BASELINE_ROLES: Readonly<Record<string, Readonly<Record<string, Bas
     FormSuccess: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     FormError: { width: Behaviour, color: Look, padding: Look, borderRadius: Look, backgroundColor: Look },
     Dialog: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
+    Popover: { width: Behaviour, padding: Look, borderRadius: Look, backgroundColor: Look, boxShadow: Look },
     // CC3: a Video fills its column at 16 / 9 — the shape the poster and the player take.
     Video: { width: Behaviour, aspectRatio: Behaviour },
 };

package/src/generation-core/compose-site.ts

@@ -7,6 +7,7 @@ import {
     AccordionAutoBinds, CompositeNodeSpec, findByRole, LIGHTBOX_LABEL, SLIDE_TO_ROW, SLIDE_TYPE, buildTabsRecipe, tabLabelNodeOf,
     tabPanelImageOf, tabPanelTextOf, tabsListOf, tabsPanels, tabsPanelsOf, tabsTriggers, TABS_CONTENT_LIMIT, TABS_IMAGE_BIND_PROP, TABS_LABEL_BIND_PROP,
     TABS_TEXT_BIND_PROP, TABS_WORDS, TabsAutoBinds, BadgeTone, BADGE_TONES, buildSegmentedRecipe, CardWords, ITEM_OPEN_STATE, segmentedOptions,
+    setHeaderBehaviour,
 } from '@vectoriox/iox-ui/composite-core';
 
 import { EntranceMark, EntrancePart, planEntrances } from './entrances';
@@ -1210,6 +1211,12 @@ export function composeSite(plan: SitePlan, context: ComposeContext): ComposedSi
         const shape = patternById(plan.globals[slot])?.phoneMenu;
         if (shape) globals = planNavShape(globals, shape as NavShape, {}, slot).globals;
     }
+    // Premium M4 (T2): a header pattern's behaviour as the page scrolls — the same edit the Header section makes.
+    for (const slot of Object.values(GlobalSlot)) {
+        const header = patternById(plan.globals[slot])?.header;
+        const root = header ? globals.find(g => g.id === slot) : null;
+        if (header && root) setHeaderBehaviour(root as unknown as CompositeNode, header.behaviour, header.edge ?? null);
+    }
 
     return {
         source: clone(plan.source),
@@ -1302,6 +1309,7 @@ export function composeNavHeader(input: NavHeaderInput, options: NavHeaderOption
     root.globalPosition = pattern.global;
     const shape = pattern.phoneMenu as NavShape | undefined;
     const header = shape ? planNavShape([root], shape, { newId: options.newId }, root.id).globals[0] : root;
+    if (pattern.header) setHeaderBehaviour(header as unknown as CompositeNode, pattern.header.behaviour, pattern.header.edge ?? null);
     return { header, issues };
 }
 

package/src/generation-core/node-baselines.generated.ts

@@ -206,7 +206,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "pageRoute": "",
       "target": "_self",
       "type": "button",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "tooltip": "",
+      "tooltipPlacement": "above"
     },
     "styleProps": {
       "position": "static",
@@ -302,7 +304,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "target",
       "type",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "tooltip",
+      "tooltipPlacement"
     ],
     "styleTraits": [
       "position",
@@ -691,7 +695,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "defaultOn",
       "activateOn",
       "orientation",
-      "ariaLabel"
+      "ariaLabel",
+      "headerBehaviour",
+      "headerEdge"
     ],
     "styleTraits": [
       "position",
@@ -1381,7 +1387,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "url": "https://",
       "pageRoute": "",
       "target": "_self",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "tooltip": "",
+      "tooltipPlacement": "above"
     },
     "styleProps": {
       "position": "static",
@@ -1476,7 +1484,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "pageRoute",
       "target",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "tooltip",
+      "tooltipPlacement"
     ],
     "styleTraits": [
       "position",
@@ -1581,7 +1591,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "pageRoute": "",
       "target": "_self",
       "colorScheme": "default",
-      "ariaLabel": ""
+      "ariaLabel": "",
+      "tooltip": "",
+      "tooltipPlacement": "above"
     },
     "styleProps": {
       "position": "static",
@@ -1676,7 +1688,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "target",
       "colorScheme",
       "__accessibilityLabel",
-      "ariaLabel"
+      "ariaLabel",
+      "tooltip",
+      "tooltipPlacement"
     ],
     "styleTraits": [
       "position",
@@ -3114,6 +3128,10 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "slideToClickedSlide": false,
       "effect": "slide",
       "speed": 300,
+      "scrollPlays": false,
+      "controlsPlacement": "under",
+      "enableCaption": false,
+      "enableCount": false,
       "enableNavigation": false,
       "navigationColor": "#ffffff",
       "navigationSize": 44,
@@ -3221,7 +3239,11 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "__effectsLabel",
       "effect",
       "speed",
+      "scrollPlays",
       "__navLabel",
+      "controlsPlacement",
+      "enableCaption",
+      "enableCount",
       "enableNavigation",
       "navigationColor",
       "navigationSize",
@@ -3326,7 +3348,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     "container": true
   },
   "SliderSlide": {
-    "props": {},
+    "props": {
+      "caption": ""
+    },
     "styleProps": {
       "position": "static",
       "top": "auto",
@@ -3405,7 +3429,9 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "transitionDelay": "0ms",
       "transitionTimingFunction": "ease"
     },
-    "traits": [],
+    "traits": [
+      "caption"
+    ],
     "styleTraits": [
       "position",
       "top",
@@ -3635,7 +3661,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "name": "Contact form",
       "formId": "",
       "feedback": "smart",
-      "resetAfterSubmit": false,
+      "afterSend": "message",
       "focusFirstProblem": true,
       "announceFailure": true,
       "honeypot": true,
@@ -3731,7 +3757,7 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
       "name",
       "formId",
       "feedback",
-      "resetAfterSubmit",
+      "afterSend",
       "focusFirstProblem",
       "announceFailure",
       "__spamLabel",
@@ -5021,6 +5047,200 @@ export const NODE_BASELINES: Readonly<Record<string, NodeBaseline>> = {
     ],
     "container": true
   },
+  "Popover": {
+    "props": {
+      "placement": "below",
+      "ariaLabel": "",
+      "colorScheme": "default"
+    },
+    "styleProps": {
+      "position": "static",
+      "top": "auto",
+      "right": "auto",
+      "bottom": "auto",
+      "left": "auto",
+      "zIndex": "0",
+      "display": "block",
+      "flexDirection": "row",
+      "flexWrap": "nowrap",
+      "justifyContent": "flex-start",
+      "alignItems": "stretch",
+      "gap": "0px",
+      "gridTemplateColumns": "1fr",
+      "gridTemplateRows": "auto",
+      "justifyItems": "stretch",
+      "alignContent": "stretch",
+      "alignSelf": "auto",
+      "order": "0",
+      "flexGrow": "0",
+      "flexShrink": "1",
+      "flexBasis": "auto",
+      "justifySelf": "auto",
+      "gridColumn": "auto",
+      "gridRow": "auto",
+      "width": "320px",
+      "height": "auto",
+      "minWidth": "auto",
+      "minHeight": "auto",
+      "maxWidth": "auto",
+      "maxHeight": "auto",
+      "aspectRatio": "auto",
+      "objectFit": "cover",
+      "overflow": "visible",
+      "fontFamily": "Poppins, sans-serif",
+      "fontSize": "16px",
+      "fontWeight": "400",
+      "color": "#000000",
+      "lineHeight": "1.5",
+      "letterSpacing": "0px",
+      "textTransform": "none",
+      "textAlign": "start",
+      "fontStyle": "normal",
+      "textDecoration": "none",
+      "fontVariantNumeric": "normal",
+      "WebkitTextStrokeWidth": "0px",
+      "WebkitTextStrokeColor": "transparent",
+      "margin": "0px 0px 0px 0px",
+      "padding": "16px",
+      "borderWidth": "0px",
+      "borderStyle": "solid",
+      "borderColor": "#CCCCCC",
+      "borderRadius": "12px",
+      "backgroundColor": "#ffffff",
+      "opacity": "1",
+      "mixBlendMode": "normal",
+      "cursor": "auto",
+      "boxShadow": "0 12px 32px rgba(0, 0, 0, 0.18)",
+      "textShadow": "",
+      "translateX": "0px",
+      "translateY": "0px",
+      "scaleX": "1",
+      "scaleY": "1",
+      "rotate": "0deg",
+      "skewX": "0deg",
+      "skewY": "0deg",
+      "transformOrigin": "center",
+      "filterBlur": "0px",
+      "filterHueRotate": "0deg",
+      "filterBrightness": "1",
+      "filterContrast": "1",
+      "filterSaturate": "1",
+      "filterGrayscale": "0",
+      "filterSepia": "0",
+      "filterInvert": "0",
+      "backdropFilter": "none",
+      "backdropBlur": "0px",
+      "backdropBrightness": "1",
+      "backdropContrast": "1",
+      "backdropSaturate": "1",
+      "clipPath": "none",
+      "transitionProperty": "",
+      "transitionDuration": "0ms",
+      "transitionDelay": "0ms",
+      "transitionTimingFunction": "ease"
+    },
+    "traits": [
+      "placement",
+      "__accessibilityLabel",
+      "ariaLabel",
+      "colorScheme"
+    ],
+    "styleTraits": [
+      "position",
+      "top",
+      "right",
+      "bottom",
+      "left",
+      "zIndex",
+      "display",
+      "flexDirection",
+      "flexWrap",
+      "justifyContent",
+      "alignItems",
+      "gap",
+      "gridTemplateColumns",
+      "gridTemplateRows",
+      "justifyItems",
+      "alignContent",
+      "textDirection",
+      "alignSelf",
+      "order",
+      "flexGrow",
+      "flexShrink",
+      "flexBasis",
+      "justifySelf",
+      "gridColumn",
+      "gridRow",
+      "width",
+      "height",
+      "minWidth",
+      "minHeight",
+      "maxWidth",
+      "maxHeight",
+      "aspectRatio",
+      "objectFit",
+      "overflow",
+      "fontFamily",
+      "fontSize",
+      "fontWeight",
+      "color",
+      "lineHeight",
+      "letterSpacing",
+      "textTransform",
+      "textAlign",
+      "fontStyle",
+      "textDecoration",
+      "fontVariantNumeric",
+      "_sep_stroke",
+      "WebkitTextStrokeWidth",
+      "WebkitTextStrokeColor",
+      "margin",
+      "padding",
+      "borderWidth",
+      "borderStyle",
+      "borderColor",
+      "borderRadius",
+      "backgroundColor",
+      "opacity",
+      "mixBlendMode",
+      "cursor",
+      "_sep_shadow",
+      "boxShadow",
+      "textShadow",
+      "_sep_transform",
+      "translateX",
+      "translateY",
+      "scaleX",
+      "scaleY",
+      "rotate",
+      "skewX",
+      "skewY",
+      "transformOrigin",
+      "_sep_filter",
+      "filterBlur",
+      "filterHueRotate",
+      "filterBrightness",
+      "filterContrast",
+      "filterSaturate",
+      "filterGrayscale",
+      "filterSepia",
+      "filterInvert",
+      "_sep_backdrop",
+      "backdropFilter",
+      "backdropBlur",
+      "backdropBrightness",
+      "backdropContrast",
+      "backdropSaturate",
+      "_sep_clip",
+      "clipPath",
+      "_sep_transition",
+      "transitionProperty",
+      "transitionDuration",
+      "transitionDelay",
+      "transitionTimingFunction"
+    ],
+    "container": true
+  },
   "Video": {
     "props": {
       "videoSource": "youtube",

package/src/generation-core/patterns.ts

@@ -153,6 +153,8 @@ export interface SitePattern {
     readonly global?: `${PatternGlobalPosition}`;
     /** A navigation pattern's phone shape (CC1): `planNavShape` adds it after the pattern is stamped. */
     readonly phoneMenu?: 'drawer' | 'bar' | 'both';
+    /** A navigation pattern's behaviour as the page scrolls (premium M4, T2): design-core HeaderBehaviour / HeaderEdge. */
+    readonly header?: { readonly behaviour: 'scrolls' | 'stays' | 'hides'; readonly edge?: 'fade' | 'line' | 'none' };
     /** SC6: a Scene section — held while the page scrolls, moved by the scroll. Only at How animated Expressive, at
      *  most one per page and on at most two pages (`validateSitePlan`); it never takes the look's entrances. */
     readonly scene?: boolean;

package/src/generation-core/site-spec.generated.ts

@@ -1148,6 +1148,10 @@ export const SPEC_SITE_PATTERNS = {
     "label": "Navigation bar",
     "global": "before",
     "phoneMenu": "drawer",
+    "header": {
+      "behaviour": "hides",
+      "edge": "fade"
+    },
     "intent": "The brand on one side, the pages and one call to action on the other — the default header.",
     "node": {
       "t": "Container",
@@ -1217,6 +1221,10 @@ export const SPEC_SITE_PATTERNS = {
     "label": "Navigation — the name centred",
     "global": "before",
     "phoneMenu": "drawer",
+    "header": {
+      "behaviour": "hides",
+      "edge": "fade"
+    },
     "intent": "The name centred above a centred row of pages — when the name is the brand.",
     "node": {
       "t": "Container",

package/src/scene-core/scene.ts

@@ -80,6 +80,24 @@ export enum SceneAttribute {
     Root = 'data-iox-scene',
     Tracks = 'data-iox-tracks',
     PhoneTracks = 'data-iox-tracks-phone',
+    /** A root's stage that is not a Scene's `scene.stage` part: the slider a scroll plays (premium M4). */
+    Stage = 'data-iox-scene-stage',
+}
+
+/**
+ * A SLIDER THE SCROLL PLAYS (premium components M4 — M1.3's held gallery). Its progress rests on each picture and changes
+ * only over the middle share of each step, so every picture arrives and stays a moment while the page holds it: `p` is
+ * the scroll's progress through the runway (0–1), `n` the slides; the answer is Swiper's progress (0–1).
+ */
+export const SLIDER_HOLD_SHARE = 0.2;
+/** Page px of scroll per picture, as a share of the screen's height (the runway the renderers reserve). */
+export const SLIDER_SCROLL_STEP_SCREENS = 0.55;
+export function heldProgress(p: number, n: number): number {
+    if (!(n >= 2) || !Number.isFinite(p)) return 0;
+    const s = clamp01(p) * (n - 1);
+    const i = Math.min(n - 2, Math.floor(s));
+    const f = clamp01((s - i - SLIDER_HOLD_SHARE) / (1 - 2 * SLIDER_HOLD_SHARE));
+    return round((i + smoothstep(f)) / (n - 1));
 }
 
 /** At or under this stage width a layer plays its phone tracks. The `mobile` breakpoint's width. */