@vectoriox/iox-ui 5.37.0 → 5.39.0

package/src/media-core/video.ts

@@ -0,0 +1,443 @@
+import { ConsentCategory, ConsentDecision, hasConsent } from '@vectoriox/iox-ui/consent-core';
+
+/**
+ * VIDEO (CC3 — complex-components plan §7b, board 5). A LEAF type with two sources:
+ * - an uploaded FILE renders as a real `<video>` (poster, `preload="metadata"`, captions, controls);
+ * - a YouTube / Vimeo address is ALWAYS a FACADE (D5): the studio's poster and a play button named after the video,
+ *   behind the site's consent gate (Marketing). The player's `<iframe>` exists only after a click AND a grant —
+ *   never in the server's HTML, never on the builder canvas.
+ *
+ * `planVideo(node, consent)` is the ONE decision — the only code that knows the URL shapes, the embed hosts and the
+ * consent category. Both engine paths and the canvas render from it (`videoInnerHtml`), and the runtime
+ * (`video-runtime.ts`) builds the player's address from the same plan.
+ */
+
+export const VIDEO_NODE_TYPE = 'Video';
+
+export enum VideoSource {
+    File = 'file',
+    YouTube = 'youtube',
+    Vimeo = 'vimeo',
+}
+
+export enum VideoMode {
+    /** In the page, with the player's controls. */
+    Inline = 'inline',
+    /** Muted, looped, no controls, an always-visible pause button (WCAG 2.2.2) — an uploaded file only. */
+    Background = 'background',
+}
+
+/** The node's traits (Bindings ▸ Media · Behaviour · Accessibility · Privacy). */
+export enum VideoTrait {
+    /** Not `source`: across the builder `source` names a DATA source (a Repeater's, a Slider's). */
+    Source = 'videoSource',
+    Src = 'src',
+    Poster = 'poster',
+    Mode = 'mode',
+    Autoplay = 'autoplay',
+    Title = 'title',
+    Captions = 'captions',
+    CaptionsLang = 'captionsLang',
+    Consent = 'consentCategory',
+}
+
+/** What a plan renders. */
+export enum VideoKind {
+    /** An uploaded file: a real `<video>`. */
+    File = 'file',
+    /** YouTube / Vimeo: poster + play, the player loaded on a click after consent. */
+    Facade = 'facade',
+    /** No address yet: the poster blank (DS3) and nothing to play. */
+    Empty = 'empty',
+}
+
+/** A recognised embed: which provider, its video id and (Vimeo, unlisted) its privacy hash. */
+export interface VideoRef {
+    source: VideoSource.YouTube | VideoSource.Vimeo;
+    id: string;
+    hash?: string;
+}
+
+export const VIDEO_PROVIDER_LABEL: Readonly<Record<VideoRef['source'], string>> = {
+    [VideoSource.YouTube]: 'YouTube',
+    [VideoSource.Vimeo]: 'Vimeo',
+};
+
+/** Who the visitor's IP address and cookies go to, named in the consent prompt. */
+export const VIDEO_PROVIDER_COMPANY: Readonly<Record<VideoRef['source'], string>> = {
+    [VideoSource.YouTube]: 'Google',
+    [VideoSource.Vimeo]: 'Vimeo',
+};
+
+/** The two hosts a player ever loads from — youtube-nocookie and Vimeo's player (with Do Not Track). */
+export const VIDEO_EMBED_ORIGINS: ReadonlyArray<string> = ['https://www.youtube-nocookie.com', 'https://player.vimeo.com'];
+
+const YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+const VIMEO_ID = /^\d{6,12}$/;
+const VIMEO_HASH = /^[0-9a-f]{6,20}$/i;
+const YOUTUBE_HOSTS = new Set(['youtube.com', 'www.youtube.com', 'm.youtube.com', 'music.youtube.com', 'youtube-nocookie.com', 'www.youtube-nocookie.com']);
+const YOUTUBE_SHORT_HOSTS = new Set(['youtu.be', 'www.youtu.be']);
+const YOUTUBE_PATH_PREFIXES = ['embed', 'shorts', 'live', 'v'];
+const VIMEO_HOSTS = new Set(['vimeo.com', 'www.vimeo.com', 'player.vimeo.com']);
+
+function toUrl(raw: string): URL | null {
+    const text = raw.trim();
+    if (!text) return null;
+    try {
+        return new URL(/^[a-z][a-z0-9+.-]*:\/\//i.test(text) ? text : `https://${text}`);
+    } catch {
+        return null;
+    }
+}
+
+function parseYouTube(url: URL): VideoRef | null {
+    const host = url.hostname.toLowerCase();
+    const segments = url.pathname.split('/').filter(Boolean);
+    let id: string | null = null;
+    if (YOUTUBE_SHORT_HOSTS.has(host)) id = segments[0] ?? null;
+    else if (YOUTUBE_HOSTS.has(host)) {
+        if (segments[0] === 'watch') id = url.searchParams.get('v');
+        else if (YOUTUBE_PATH_PREFIXES.includes(segments[0] ?? '')) id = segments[1] ?? null;
+    } else return null;
+    return id && YOUTUBE_ID.test(id) ? { source: VideoSource.YouTube, id } : null;
+}
+
+function parseVimeo(url: URL): VideoRef | null {
+    if (!VIMEO_HOSTS.has(url.hostname.toLowerCase())) return null;
+    const segments = url.pathname.split('/').filter(Boolean);
+    // player.vimeo.com/video/<id>, vimeo.com/<id>[/<hash>], vimeo.com/channels/<c>/<id>, vimeo.com/groups/<g>/videos/<id>
+    const index = segments.findIndex(s => VIMEO_ID.test(s));
+    if (index < 0) return null;
+    const id = segments[index];
+    const hash = url.searchParams.get('h') ?? segments[index + 1];
+    return { source: VideoSource.Vimeo, id, ...(hash && VIMEO_HASH.test(hash) ? { hash } : {}) };
+}
+
+/** The embed a pasted address names — a YouTube or Vimeo watch, share, embed or short link — or null. */
+export function parseVideoUrl(raw: string | null | undefined): VideoRef | null {
+    const url = typeof raw === 'string' ? toUrl(raw) : null;
+    if (!url || !/^https?:$/.test(url.protocol)) return null;
+    return parseYouTube(url) ?? parseVimeo(url);
+}
+
+/** The source a node plays: its declared source when it is one, else what its address is. */
+export function videoSourceOf(src: unknown, declared?: unknown): VideoSource {
+    if (declared === VideoSource.YouTube || declared === VideoSource.Vimeo || declared === VideoSource.File) return declared;
+    return parseVideoUrl(typeof src === 'string' ? src : '')?.source ?? VideoSource.File;
+}
+
+/** The player's address — loaded only after a click and a grant. Autoplays (the visitor just pressed play). */
+export function videoEmbedUrl(ref: VideoRef): string {
+    if (ref.source === VideoSource.YouTube) {
+        return `https://www.youtube-nocookie.com/embed/${encodeURIComponent(ref.id)}?autoplay=1&rel=0&playsinline=1`;
+    }
+    return `https://player.vimeo.com/video/${encodeURIComponent(ref.id)}?autoplay=1&dnt=1${ref.hash ? `&h=${encodeURIComponent(ref.hash)}` : ''}`;
+}
+
+/** Where the SERVER fetches an embed's thumbnail to store as the studio's own poster (never the visitor). */
+export interface VideoThumbnailRequest {
+    /** `image`: the url IS the picture; `oembed`: the url answers JSON whose `thumbnail_url` is the picture. */
+    kind: 'image' | 'oembed';
+    url: string;
+    /** The only hosts the picture itself may come from (the server refuses anything else). */
+    imageHosts: ReadonlyArray<string>;
+}
+
+export function videoThumbnailRequest(ref: VideoRef): VideoThumbnailRequest {
+    if (ref.source === VideoSource.YouTube) {
+        return { kind: 'image', url: `https://i.ytimg.com/vi/${encodeURIComponent(ref.id)}/hqdefault.jpg`, imageHosts: ['i.ytimg.com'] };
+    }
+    const page = `https://vimeo.com/${ref.id}${ref.hash ? `/${ref.hash}` : ''}`;
+    return { kind: 'oembed', url: `https://vimeo.com/api/oembed.json?url=${encodeURIComponent(page)}&width=1280`, imageHosts: ['i.vimeocdn.com'] };
+}
+
+/** A stored poster's object name — one per video, so fetching it again overwrites rather than piles up. */
+export function videoPosterFileName(ref: VideoRef): string {
+    return `video-poster-${ref.source}-${ref.id}.jpg`;
+}
+
+// ── the node, in either shape (saved props / builder traits) ───────────────────────────────────────
+
+export interface VideoNodeLike {
+    type?: string;
+    props?: Record<string, unknown> | null;
+    traits?: ReadonlyArray<{ name?: string; default?: unknown }> | null;
+}
+
+/** A content value of a Video node, saved (`props`) or builder (`traits[].default`) shape. */
+export function videoProp(node: VideoNodeLike | null | undefined, name: VideoTrait | string): unknown {
+    if (!node) return undefined;
+    if (node.props && Object.prototype.hasOwnProperty.call(node.props, name)) return node.props[name];
+    return node.traits?.find(t => t?.name === name)?.default;
+}
+
+const str = (v: unknown): string => (typeof v === 'string' ? v.trim() : '');
+const truthy = (v: unknown): boolean => v === true || v === 'true';
+
+/** The consent category an embed waits for — Marketing by default (D5); an uploaded file waits for none. */
+export function videoConsentCategory(node: VideoNodeLike | null | undefined, source: VideoSource = videoSourceOf(videoProp(node, VideoTrait.Src), videoProp(node, VideoTrait.Source))): ConsentCategory | null {
+    if (source === VideoSource.File) return null;
+    const declared = videoProp(node, VideoTrait.Consent);
+    return declared === ConsentCategory.Analytics ? ConsentCategory.Analytics : ConsentCategory.Marketing;
+}
+
+export interface VideoPlan {
+    kind: VideoKind;
+    source: VideoSource;
+    /** An embed's provider and id (Facade). */
+    ref: VideoRef | null;
+    /** An uploaded file's address (File). */
+    src: string;
+    /** The studio's own poster ('' = the token blank). Never a provider's thumbnail URL. */
+    poster: string;
+    /** The video's name — the play button's accessible name. */
+    title: string;
+    mode: VideoMode;
+    background: boolean;
+    /** Muted autoplay when motion is allowed (the runtime asks; the server never writes `autoplay`). */
+    autoplay: boolean;
+    muted: boolean;
+    loop: boolean;
+    controls: boolean;
+    /** A `.vtt` file ('' = none). */
+    captions: string;
+    captionsLang: string;
+    /** What the facade waits for (null for a file). */
+    consentCategory: ConsentCategory | null;
+    /** The visitor's decision grants it. */
+    granted: boolean;
+    /** The player's address — only when granted (the runtime loads it on a click). */
+    embedUrl: string | null;
+    /** "YouTube" / "Vimeo" ('' for a file). */
+    providerLabel: string;
+}
+
+/**
+ * The ONE decision for a Video node and a visitor's consent (null = none recorded — the server always passes null,
+ * so its HTML is always the facade). A poster that is a provider's thumbnail URL is dropped: the poster is the
+ * studio's own image (or the thumbnail the server fetched and stored for it), never a request to a third party.
+ */
+export function planVideo(node: VideoNodeLike | null | undefined, consent: ConsentDecision | null): VideoPlan {
+    const rawSrc = str(videoProp(node, VideoTrait.Src));
+    const source = videoSourceOf(rawSrc, videoProp(node, VideoTrait.Source));
+    const ref = source === VideoSource.File ? null : parseVideoUrl(rawSrc);
+    const background = source === VideoSource.File && videoProp(node, VideoTrait.Mode) === VideoMode.Background;
+    const consentCategory = videoConsentCategory(node, source);
+    const granted = consentCategory ? hasConsent(consent, consentCategory) : true;
+    const kind = source === VideoSource.File ? (rawSrc ? VideoKind.File : VideoKind.Empty) : (ref ? VideoKind.Facade : VideoKind.Empty);
+    const poster = str(videoProp(node, VideoTrait.Poster));
+    return {
+        kind,
+        source,
+        ref,
+        src: source === VideoSource.File ? rawSrc : '',
+        poster: isThirdPartyPoster(poster) ? '' : poster,
+        title: str(videoProp(node, VideoTrait.Title)),
+        mode: background ? VideoMode.Background : VideoMode.Inline,
+        background,
+        autoplay: background || (source === VideoSource.File && truthy(videoProp(node, VideoTrait.Autoplay))),
+        muted: background || truthy(videoProp(node, VideoTrait.Autoplay)),
+        loop: background,
+        controls: !background,
+        captions: background ? '' : str(videoProp(node, VideoTrait.Captions)),
+        captionsLang: str(videoProp(node, VideoTrait.CaptionsLang)) || 'en',
+        consentCategory,
+        granted,
+        embedUrl: kind === VideoKind.Facade && granted && ref ? videoEmbedUrl(ref) : null,
+        providerLabel: ref ? VIDEO_PROVIDER_LABEL[ref.source] : '',
+    };
+}
+
+const THIRD_PARTY_POSTER_HOSTS = ['ytimg.com', 'youtube.com', 'vimeocdn.com', 'vimeo.com', 'googleusercontent.com'];
+
+/** A poster served by the video's provider — a request to a third party before consent, so it never renders. */
+export function isThirdPartyPoster(url: string): boolean {
+    const parsed = url ? toUrl(url) : null;
+    if (!parsed || !/^https?:$/.test(parsed.protocol)) return false;
+    const host = parsed.hostname.toLowerCase();
+    return THIRD_PARTY_POSTER_HOSTS.some(h => host === h || host.endsWith(`.${h}`));
+}
+
+// ── words ───────────────────────────────────────────────────────────────────────────────────────────
+
+/**
+ * The words the renderer draws (board 5; Q7: the consent prompt is NOT an editable part — its words are the
+ * consent vocabulary's, one source, translated). English and Hebrew; the page's `lang` picks.
+ */
+export interface VideoWords {
+    /** The play button's name: the video's title and its provider. */
+    play(title: string, provider: string): string;
+    /** The play button's name with no title. */
+    playUntitled(provider: string): string;
+    pauseBackground: string;
+    playBackground: string;
+    /** The consent prompt (a group): its name, its lead and its body. */
+    promptLabel: string;
+    promptLead(provider: string): string;
+    promptBody(company: string): string;
+    /** The same prompt where the player is narrow (board 5's phone): one shorter sentence, its lead in bold. */
+    promptCompactLead(provider: string): string;
+    promptCompactBody: string;
+    allow: string;
+    settings: string;
+}
+
+export const VIDEO_WORDS: Readonly<Record<'en' | 'he', VideoWords>> = {
+    en: {
+        play: (title, provider) => (provider ? `Play: ${title} (${provider})` : `Play: ${title}`),
+        playUntitled: provider => (provider ? `Play video (${provider})` : 'Play video'),
+        pauseBackground: 'Pause background video',
+        playBackground: 'Play background video',
+        promptLabel: 'This video needs your permission',
+        promptLead: provider => `This video is hosted by ${provider}.`,
+        promptBody: company => `Playing it lets ${company} set cookies and see your IP address. Nothing has loaded yet.`,
+        promptCompactLead: provider => `Plays from ${provider},`,
+        promptCompactBody: 'which sets cookies and sees your IP address. Nothing has loaded yet.',
+        allow: 'Allow and play',
+        settings: 'Privacy settings',
+    },
+    he: {
+        play: (title, provider) => (provider ? `הפעלה: ${title} (${provider})` : `הפעלה: ${title}`),
+        playUntitled: provider => (provider ? `הפעלת הסרטון (${provider})` : 'הפעלת הסרטון'),
+        pauseBackground: 'השהיית סרטון הרקע',
+        playBackground: 'הפעלת סרטון הרקע',
+        promptLabel: 'הסרטון הזה צריך את רשותך',
+        promptLead: provider => `הסרטון מתארח ב-${provider}.`,
+        promptBody: company => `ההפעלה מאפשרת ל-${company} להגדיר קובצי Cookie ולראות את כתובת ה-IP שלך. עדיין לא נטען דבר.`,
+        promptCompactLead: provider => `מתנגן מ-${provider},`,
+        promptCompactBody: 'שמגדיר קובצי Cookie ורואה את כתובת ה-IP שלך. עדיין לא נטען דבר.',
+        allow: 'לאשר ולהפעיל',
+        settings: 'הגדרות פרטיות',
+    },
+};
+
+/** The words for a page language (`he`, `he-IL` → Hebrew; anything else → English). */
+export function videoWords(lang?: string | null): VideoWords {
+    return (lang ?? '').toLowerCase().startsWith('he') ? VIDEO_WORDS.he : VIDEO_WORDS.en;
+}
+
+/** The play button's accessible name. */
+export function videoPlayLabel(plan: VideoPlan, words: VideoWords = VIDEO_WORDS.en): string {
+    return plan.title ? words.play(plan.title, plan.providerLabel) : words.playUntitled(plan.providerLabel);
+}
+
+// ── markup (one builder for both engine paths and the canvas) ────────────────────────────────────────
+
+export enum VideoClass {
+    Root = 'iox-video',
+    Poster = 'iox-video__poster',
+    Play = 'iox-video__play',
+    Badge = 'iox-video__badge',
+    Media = 'iox-video__media',
+    Frame = 'iox-video__frame',
+    Toggle = 'iox-video__toggle',
+    Consent = 'iox-video__consent',
+    ConsentText = 'iox-video__consent-text',
+    /** The prompt's text on a wide player / on a narrow one (a container query shows one). */
+    ConsentWide = 'iox-video__consent-wide',
+    ConsentCompact = 'iox-video__consent-compact',
+    ConsentRow = 'iox-video__consent-row',
+    Allow = 'iox-video__allow',
+    Settings = 'iox-video__settings',
+}
+
+export enum VideoAttribute {
+    /** On the node element: its kind (`file` · `facade` · `empty`) — what the runtime attaches to. */
+    Root = 'data-iox-video',
+    Source = 'data-iox-video-source',
+    Id = 'data-iox-video-id',
+    Hash = 'data-iox-video-hash',
+    Mode = 'data-iox-video-mode',
+    Autoplay = 'data-iox-video-autoplay',
+    Consent = 'data-iox-video-consent',
+    Title = 'data-iox-video-title',
+    /** The poster is the token blank (no image): the shared CSS fills it with `surface-2`. */
+    PosterEmpty = 'data-iox-video-poster-empty',
+    /** The player is loaded (after the click and the grant). */
+    Playing = 'data-iox-video-playing',
+    /** The consent prompt is showing. */
+    Asking = 'data-iox-video-asking',
+}
+
+export enum VideoIcon {
+    Play = 'ph-fill ph-play',
+    Pause = 'ph-fill ph-pause',
+}
+
+/** The attributes the node's own element carries (both engine paths, the canvas). */
+export function videoRootAttributes(plan: VideoPlan): Record<string, string> {
+    const attrs: Record<string, string> = { [VideoAttribute.Root]: plan.kind, [VideoAttribute.Source]: plan.source };
+    if (plan.ref) {
+        attrs[VideoAttribute.Id] = plan.ref.id;
+        if (plan.ref.hash) attrs[VideoAttribute.Hash] = plan.ref.hash;
+    }
+    if (plan.background) attrs[VideoAttribute.Mode] = VideoMode.Background;
+    if (plan.autoplay) attrs[VideoAttribute.Autoplay] = '';
+    if (plan.consentCategory) attrs[VideoAttribute.Consent] = plan.consentCategory;
+    if (plan.title) attrs[VideoAttribute.Title] = plan.title;
+    if (!plan.poster) attrs[VideoAttribute.PosterEmpty] = '';
+    return attrs;
+}
+
+export interface VideoMarkupOptions {
+    /** HTML-escape an attribute or text value. */
+    esc: (value: string) => string;
+    /** The builder canvas: the poster ONLY — no `<video>`, no player, nothing that loads or takes a click. */
+    canvas?: boolean;
+    words?: VideoWords;
+}
+
+const iconHtml = (cls: string) => `<i class="${cls}" aria-hidden="true"></i>`;
+
+/** The element's inner markup. The server's HTML for a facade holds no `<iframe>` and requests nothing from
+ *  the provider: only the studio's poster, the play button and the (hidden) consent prompt. */
+export function videoInnerHtml(plan: VideoPlan, options: VideoMarkupOptions): string {
+    const { esc } = options;
+    const words = options.words ?? VIDEO_WORDS.en;
+    const poster = plan.poster ? `<img class="${VideoClass.Poster}" src="${esc(plan.poster)}" alt="" loading="lazy" decoding="async">` : '';
+    const label = esc(videoPlayLabel(plan, words));
+    const playSpan = `<span class="${VideoClass.Play}" aria-hidden="true">${iconHtml(VideoIcon.Play)}</span>`;
+    const badge = plan.providerLabel ? `<span class="${VideoClass.Badge}">${iconHtml(VideoIcon.Play)}${esc(plan.providerLabel)}</span>` : '';
+
+    if (options.canvas || plan.kind === VideoKind.Empty) {
+        return `${poster}${plan.kind === VideoKind.Empty && !options.canvas ? '' : playSpan}${badge}`;
+    }
+
+    if (plan.kind === VideoKind.File) {
+        const media = [
+            `<video class="${VideoClass.Media}" src="${esc(plan.src)}" preload="metadata" playsinline`,
+            plan.poster ? ` poster="${esc(plan.poster)}"` : '',
+            // A captions file is fetched with CORS (a <track> from another origin loads only so): the studio's bucket
+            // answers CORS for every object, the video included.
+            plan.captions ? ' crossorigin="anonymous"' : '',
+            plan.controls ? ' controls' : '',
+            plan.muted ? ' muted' : '',
+            plan.loop ? ' loop' : '',
+            plan.background ? ' aria-hidden="true" tabindex="-1"' : (plan.title ? ` aria-label="${esc(plan.title)}"` : ''),
+            '>',
+            plan.captions ? `<track kind="captions" src="${esc(plan.captions)}" srclang="${esc(plan.captionsLang)}" label="${esc(plan.captionsLang)}" default>` : '',
+            '</video>',
+        ].join('');
+        if (plan.background) {
+            // Rendered paused (the server cannot know the visitor's motion setting): the runtime starts it when motion
+            // is allowed and turns this into the PAUSE button. Always visible (WCAG 2.2.2).
+            return `${media}<button type="button" class="${VideoClass.Toggle}" aria-label="${esc(words.playBackground)}" aria-pressed="true">${iconHtml(VideoIcon.Play)}</button>`;
+        }
+        return `${media}<button type="button" class="${VideoClass.Play}" aria-label="${label}">${iconHtml(VideoIcon.Play)}</button>`;
+    }
+
+    const company = plan.ref ? VIDEO_PROVIDER_COMPANY[plan.ref.source] : '';
+    const prompt = `<div class="${VideoClass.Consent}" role="group" aria-label="${esc(words.promptLabel)}" hidden>` +
+        `<p class="${VideoClass.ConsentText} ${VideoClass.ConsentWide}"><b>${esc(words.promptLead(plan.providerLabel))}</b> ${esc(words.promptBody(company))}</p>` +
+        `<p class="${VideoClass.ConsentText} ${VideoClass.ConsentCompact}"><b>${esc(words.promptCompactLead(plan.providerLabel))}</b> ${esc(words.promptCompactBody)}</p>` +
+        `<div class="${VideoClass.ConsentRow}">` +
+        `<button type="button" class="${VideoClass.Allow}">${esc(words.allow)}</button>` +
+        `<button type="button" class="${VideoClass.Settings}">${esc(words.settings)}</button>` +
+        `</div></div>`;
+    return `${poster}<button type="button" class="${VideoClass.Play}" aria-label="${label}">${iconHtml(VideoIcon.Play)}</button>${badge}${prompt}`;
+}
+
+/** Serialise attributes for a string renderer (a present boolean attribute is written bare). */
+export function serializeVideoAttributes(attrs: Readonly<Record<string, string>>, esc: (value: string) => string): string {
+    return Object.entries(attrs).map(([name, value]) => (value === '' ? ` ${name}` : ` ${name}="${esc(value)}"`)).join('');
+}

package/styles/iox-design.css

@@ -237,3 +237,115 @@ dialog[data-iox-dialog]:not([open]) {
 @media (prefers-reduced-motion: reduce) {
   .iox-accordion-track { transition: none; }
 }
+
+/* ── CC4a: Tabs (complex-components boards 3 and 9; composite K2) ────────────────────────────────────
+   The renderers write ONE markup (composite-core tabs.ts): the list is role=tablist, each tab a <button role=tab>, each
+   panel role=tabpanel. Structural only — the look is the parts' element styles (tab-list, tab), on their own rules. */
+
+/* A tab is a real button: its UA look is reset at zero specificity, so the node's own rule (the `tab` style) wins. */
+:where(.iox-role-tabs-trigger) {
+  appearance: none; -webkit-appearance: none; background: none; border: 0 solid transparent; border-radius: 0; margin: 0;
+  font: inherit; color: inherit; cursor: pointer; box-sizing: border-box;
+}
+/* The ONE hiding rule for Tabs (board 9: "Tabs keep display:none"): a panel that is not on takes no space and leaves the
+   Tab order. `!important` because a panel is any Container: the author's display (its own rule, a breakpoint layer, a
+   state — each at (0,1,0) or (0,2,0), emitted after this sheet) must never bring an inactive panel back. */
+.iox-role-tabs-panel[hidden] { display: none !important; }
+/* A panel is a Tab stop of its own (APG): its focus ring is the look's. */
+.iox-role-tabs-panel:focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }
+
+/* ── CC3: Video (complex-components plan §7b, board 5) ────────────────────────────────────────────────
+   One markup from media-core `videoInnerHtml` (both engine paths, the canvas). The frame is the node (it wears
+   `media`: radius, fit); the poster, the play button, the provider badge and the consent prompt are drawn by the
+   renderer from tokens — not nodes (board 9 Q7). Zero specificity on the frame, so the node's own size wins. */
+:where(.iox-video) {
+  position: relative; overflow: hidden; display: grid; place-items: center; isolation: isolate;
+  container-type: inline-size;
+}
+/* The poster blank (DS3): no poster yet = the token fill, never a request to the provider. */
+.iox-video[data-iox-video-poster-empty]:not([data-iox-video-playing]) { background-color: var(--iox-surface-2); }
+.iox-video[data-iox-video-playing] { background-color: var(--iox-inverse-bg); }
+.iox-video > :is(.iox-video__poster, .iox-video__media, .iox-video__frame) {
+  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; margin: 0; display: block; object-fit: cover;
+}
+.iox-video > .iox-video__poster { z-index: -1; }
+.iox-video > .iox-video__media { object-fit: contain; background-color: var(--iox-inverse-bg); }
+.iox-video[data-iox-video-mode='background'] > .iox-video__media { object-fit: cover; }
+.iox-video__play {
+  position: relative; display: grid; place-items: center; width: var(--iox-video-play-size); height: var(--iox-video-play-size);
+  padding: 0; margin: 0; border: 0; border-radius: var(--iox-radius-pill, 999px); cursor: pointer;
+  background: var(--iox-video-play-bg); color: var(--iox-video-play-ink); box-shadow: var(--iox-shadow-md);
+  font-size: calc(var(--iox-video-play-size) * 0.44); line-height: 1;
+}
+span.iox-video__play { pointer-events: none; }
+.iox-video__play[hidden] { display: none; }
+.iox-video__badge {
+  position: absolute; top: 10px; inset-inline-start: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
+  border-radius: var(--iox-radius-pill, 999px); background: color-mix(in srgb, var(--iox-surface) 88%, transparent); color: var(--iox-text);
+  font-family: var(--iox-font-label); font-size: var(--iox-size-label); font-weight: var(--iox-weight-label); line-height: 1.5; pointer-events: none;
+}
+.iox-video__consent {
+  position: absolute; inset: auto 12px 12px 12px; display: grid; gap: 10px; padding: 14px 16px; text-align: start;
+  border-radius: var(--iox-radius-md); background: var(--iox-surface-glass-strong, var(--iox-surface)); color: var(--iox-text); box-shadow: var(--iox-shadow-md);
+  -webkit-backdrop-filter: var(--iox-blur-surface, none); backdrop-filter: var(--iox-blur-surface, none);
+}
+.iox-video__consent[hidden] { display: none; }
+.iox-video__consent-text { margin: 0; font-family: var(--iox-font-body); font-size: var(--iox-size-small); line-height: 1.45; }
+.iox-video__consent-row { display: flex; flex-wrap: wrap; gap: 8px; }
+.iox-video__consent-compact { display: none; }
+.iox-video__allow, .iox-video__settings {
+  cursor: pointer; margin: 0; border-style: solid; border-width: var(--iox-button-border-width); border-radius: var(--iox-button-radius); padding: var(--iox-button-pad);
+  font-family: var(--iox-button-font); font-size: var(--iox-button-size); font-weight: var(--iox-button-weight); line-height: var(--iox-button-leading);
+  letter-spacing: var(--iox-button-tracking); text-transform: var(--iox-button-case);
+}
+.iox-video__allow { background: var(--iox-button-primary-bg); color: var(--iox-button-primary-ink); border-color: var(--iox-button-primary-border); }
+.iox-video__settings { background: transparent; color: var(--iox-button-ghost-ink); border-color: transparent; text-decoration: var(--iox-button-ghost-decoration); }
+/* Background mode's pause / play: always there (WCAG 2.2.2), the secondary button's look, top end. */
+.iox-video__toggle {
+  position: absolute; top: 14px; inset-inline-end: 14px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; margin: 0; cursor: pointer;
+  border-radius: var(--iox-radius-pill, 999px); border: var(--iox-button-border-width) solid var(--iox-button-secondary-border);
+  background: var(--iox-button-secondary-bg); color: var(--iox-button-secondary-ink); font-size: 18px; line-height: 1;
+}
+:is(.iox-video__play, .iox-video__allow, .iox-video__settings, .iox-video__toggle):focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }
+/* A narrow video (a phone): the prompt fills the frame (board 5, phone). */
+@container (max-width: 440px) {
+  .iox-video__consent { inset: 8px; align-content: center; padding: 10px 12px; gap: 8px; }
+  .iox-video__consent-text { font-size: 13px; line-height: 1.35; }
+  .iox-video__consent-wide { display: none; }
+  .iox-video__consent-compact { display: block; }
+  .iox-video__allow, .iox-video__settings { padding: 8px 12px; font-size: 13px; }
+}
+
+/* ── CC3: the Slider's control PARTS (complex-components board 6; board 9 Q13) ────────────────────────
+   Previous, Next, Pause and Pagination are nodes inside `.swiper` (beside `.swiper-wrapper`). By default they sit
+   over the slides like Swiper's own controls — at ZERO specificity, so a part's own styles move it anywhere; the
+   edge is LOGICAL, so a carousel reads the same way in RTL. Their look is their element style. */
+:where(.swiper) :where(.iox-role-slider-prev) { inset-inline-start: 12px; }
+:where(.swiper) :where(.iox-role-slider-next) { inset-inline-end: 12px; }
+/* The pause control shares the dots' line at the bottom (its own corner): it never meets an arrow, whatever the
+   carousel's height. */
+:where(.swiper) :where(.iox-role-slider-pause) { bottom: 12px; inset-inline-start: 12px; }
+:where(.swiper) :where(.iox-role-slider-pagination) { bottom: 12px; inset-inline: 0; }
+/* In a row (a part set back in flow — the testimonial carousel's controls) the buttons line up by their middles. */
+.iox-role-slider-pause, .iox-role-slider-prev, .iox-role-slider-next { vertical-align: middle; }
+/* The arrows point the reading way. */
+.iox-role-slider-prev:dir(rtl) > i, .iox-role-slider-next:dir(rtl) > i { scale: -1 1; }
+.iox-role-slider-prev[disabled], .iox-role-slider-next[disabled], :is(.iox-role-slider-prev, .iox-role-slider-next).swiper-button-disabled { opacity: 0.45; cursor: default; }
+/* The dots (Swiper draws them into the part): a 24px target around an 8px dot; the current one is a pill in the
+   part's own colour (`color`: the accent by default, the author's colour after a migration). */
+/* The dots' strip spans the carousel (the part centres them); only the dots themselves take a click — the strip
+   never covers the slide under it. On the canvas the strip is selectable (data-iox-canvas is not needed: a dot's click
+   selects its part). */
+.iox-role-slider-pagination { font-family: var(--iox-font-label); font-size: var(--iox-size-label); pointer-events: none; }
+.iox-role-slider-pagination > * { pointer-events: auto; }
+.iox-role-slider-pagination .swiper-pagination-bullet {
+  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;
+}
+.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);
+}
+.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:focus-visible { outline: none; box-shadow: var(--iox-focus-ring); }