@vectoriox/iox-ui 5.32.1 → 5.34.0

package/fesm2022/vectoriox-iox-ui-design-core.mjs

@@ -1341,6 +1341,7 @@ const SPEC_SCHEMES = {
         "set": {
             "section-bg": "{{accent}}",
             "bg": "{{accent}}",
+            "nav-bg": "{{accent}}",
             "surface": "{{accent-hover}}",
             "surface-2": "{{accent-hover}}",
             "surface-glass": "{{accent-hover}}",
@@ -1363,6 +1364,7 @@ const SPEC_SCHEMES = {
         }
     }
 };
+const SPEC_SCHEME_INK = "var(--iox-text)";
 const SPEC_A11Y = {
     "reducedMotion": {
         "dur-fast": "0ms",
@@ -2003,6 +2005,23 @@ const SPEC_ELEMENT_STYLES = [
             "fontWeight": "var(--iox-weight-label)"
         }
     },
+    {
+        "id": "badge-label",
+        "label": "Badge label",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Text"
+        ],
+        "base": {
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-badge-size)",
+            "fontWeight": "var(--iox-weight-label)",
+            "lineHeight": "inherit",
+            "letterSpacing": "inherit",
+            "textTransform": "inherit",
+            "color": "inherit"
+        }
+    },
     {
         "id": "media-scrim",
         "label": "Text over image",
@@ -12226,570 +12245,754 @@ function styleKeyToKebab(key) {
 }
 
 /**
- * Which `--iox-<name>` a piece of COMPONENT CSS may reference (design-system §3b-bis: "component CSS
- * may reference ONLY tokens defined in this spec"). DS2 shipped seven names nobody defines
- * (`card-media-gap`, `gallery-overlay`, `dialog-close-bg`…): a token the contract does not define can
- * never be set by a flavor, so it is a literal wearing a costume. One guard, run over BOTH
- * renderers' component CSS (iox-ui's spec; the engine's `verify:token-names`).
+ * Element styles — the author's "classes" (design-system plan §3b). A named look is an EXACT trait
+ * map written into a node; every value is a `var(--iox-…)` reference or a flavor-independent
+ * keyword, so a re-theme rewrites token rows and every node wearing the style follows. No renderer
+ * reads `elementStyle`: it records which look a node wears, for the panel row, Reset, adopt and AI.
+ *
+ * Works on two node shapes through one minimal interface, so the builder (a ComponentNode whose
+ * values live in `styleTraits[].traits[].default`) and the server-side composer (a plain serialized
+ * layout node with `styleProps`) share every function here.
  */
-/** The 161 names of the contract's two tiers, plus its legacy aliases. */
-function specTokenNames() {
-    return new Set([
-        ...SPEC_TIERS.semantic.map(t => t.name),
-        ...SPEC_TIERS.component.map(t => t.name),
-        ...Object.keys(SPEC_LEGACY_ALIASES),
-    ]);
+var ElementStyleState;
+(function (ElementStyleState) {
+    ElementStyleState["Hover"] = "hover";
+    ElementStyleState["Active"] = "active";
+    ElementStyleState["Focus"] = "focus";
+    /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
+    ElementStyleState["Current"] = "current";
+})(ElementStyleState || (ElementStyleState = {}));
+const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current];
+const ELEMENT_STYLES = SPEC_ELEMENT_STYLES;
+/** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
+const BUTTON_VARIANT_TO_STYLE = SPEC_BUTTON_VARIANT_TO_STYLE;
+/** Palette entries that are a Container wearing an element style (Card · Panel · Navigation bar). */
+const PALETTE_PRESETS = SPEC_PALETTE_PRESETS;
+const BY_ID = new Map(ELEMENT_STYLES.map(s => [s.id, s]));
+function elementStyleById(id) {
+    return id ? BY_ID.get(id) : undefined;
 }
-const REFERENCE$1 = /var\(\s*--iox-([a-z0-9-]+)/gi;
-/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
-function tokenReferences(css) {
-    return [...new Set(Array.from(css.matchAll(REFERENCE$1), m => m[1]))];
+/** The styles a node of `type` may wear — the Style panel's select. */
+function elementStylesFor(type) {
+    return ELEMENT_STYLES.filter(s => s.appliesTo.includes(type));
 }
-/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
-function unknownTokenReferences(css, alsoAllowed = []) {
-    const spec = specTokenNames();
-    const extra = new Set(alsoAllowed);
-    return tokenReferences(css).filter(name => !spec.has(name) && !extra.has(name));
+var OwnedTraitLink;
+(function (OwnedTraitLink) {
+    /** The node still holds the style's value. */
+    OwnedTraitLink["Linked"] = "linked";
+    /** The author replaced it on this node. */
+    OwnedTraitLink["Changed"] = "changed";
+})(OwnedTraitLink || (OwnedTraitLink = {}));
+const usesTraits = (t) => Array.isArray(t.styleTraits);
+function findTrait(target, name) {
+    for (const group of target.styleTraits ?? []) {
+        const hit = group.traits.find(tr => tr.name === name);
+        if (hit)
+            return hit;
+    }
+    return undefined;
 }
-const LEGACY_SCOPE = /:not\(\s*\.iox-es\s*\)/;
-/** Comments out: block comments, and SCSS `//` line comments (never the `//` of a `url(https://…)`). */
-const stripComments = (css) => String(css ?? '')
-    .replace(/\/\*[\s\S]*?\*\//g, '')
-    .replace(/(^|[^:\\])\/\/[^\n]*/g, '$1');
-/** A nested SCSS selector against its parent's: `&` is the parent; no `&` means a descendant. */
-function resolveNested(parent, selector) {
-    if (!parent)
-        return selector;
-    return selector.split(',').map(part => {
-        const own = part.trim();
-        return own.includes('&') ? own.replace(/&/g, parent) : `${parent} ${own}`;
-    }).join(', ');
+function readBase(target, name) {
+    return usesTraits(target) ? findTrait(target, name)?.default : target.styleProps?.[name];
 }
-/**
- * Tokens read by a LEGACY rule — any rule whose selector is scoped `:not(.iox-es)` (the pre-DS2 look
- * of a node that wears no element style, design-system §3b-bis). Such a rule must read NO token at
- * all: a token it reads repaints a pre-DS2 page the moment the org's rows are seeded or a flavor is
- * applied (D5). Returns `selector → names` for each offending rule; comments are ignored. SCSS
- * nesting is resolved (DS4.1): `.x:where(:not(.iox-es)) { &:hover { … } }` is the legacy rule
- * `.x:where(:not(.iox-es)):hover`, and an at-rule (`@media`) between them does not break the chain.
- */
-function legacyRuleTokenReferences(css) {
-    const text = stripComments(css);
+/** False when a builder node has no such trait — the value would be dropped. */
+function writeBase(target, name, value) {
+    if (usesTraits(target)) {
+        const trait = findTrait(target, name);
+        if (!trait)
+            return false;
+        trait.default = value;
+        return true;
+    }
+    target.styleProps = target.styleProps ?? {};
+    if (value === undefined)
+        delete target.styleProps[name];
+    else
+        target.styleProps[name] = value;
+    return true;
+}
+function readState(target, state, name) {
+    return target.stateStyles?.[state]?.[name];
+}
+function writeState(target, state, name, value) {
+    target.stateStyles = target.stateStyles ?? {};
+    target.stateStyles[state] = { ...(target.stateStyles[state] ?? {}), [name]: value };
+}
+function deleteState(target, state, name) {
+    const map = target.stateStyles?.[state];
+    if (!map)
+        return;
+    const { [name]: _drop, ...rest } = map;
+    if (Object.keys(rest).length)
+        target.stateStyles[state] = rest;
+    else
+        delete target.stateStyles[state];
+}
+/** Every (state, trait, value) a style owns, base first. */
+function ownedEntries(style) {
     const out = [];
-    const stack = [];
-    const report = (frame) => {
-        if (!LEGACY_SCOPE.test(frame.selector))
-            return;
-        const tokens = tokenReferences(frame.body);
-        if (tokens.length)
-            out.push({ selector: frame.selector, tokens });
-    };
-    let buffer = '';
-    for (const ch of text) {
-        if (ch === '{') {
-            const head = buffer.trim().replace(/\s+/g, ' ');
-            buffer = '';
-            // Declarations before a nested block belong to the parent (`color: x; &:hover {`).
-            const cut = head.lastIndexOf(';');
-            const prelude = cut >= 0 ? head.slice(cut + 1).trim() : head;
-            const parent = stack[stack.length - 1];
-            if (parent && cut >= 0)
-                parent.body += head.slice(0, cut + 1);
-            const inherited = parent?.selector ?? '';
-            const selector = prelude.startsWith('@') ? inherited : resolveNested(inherited, prelude);
-            stack.push({ selector, body: '' });
-        }
-        else if (ch === '}') {
-            const frame = stack.pop();
-            if (frame) {
-                frame.body += buffer;
-                report(frame);
-            }
-            buffer = '';
-        }
-        else if (ch === ';' && stack.length) {
-            stack[stack.length - 1].body += buffer + ch;
-            buffer = '';
-        }
-        else {
-            buffer += ch;
-        }
+    for (const [trait, value] of Object.entries(style.base))
+        out.push({ trait, value });
+    for (const state of ELEMENT_STYLE_STATES) {
+        for (const [trait, value] of Object.entries(style[state] ?? {}))
+            out.push({ trait, state, value });
     }
     return out;
 }
-
-/** What `prefers-reduced-motion: reduce` collapses — the contract's complete list (`a11y.reducedMotion`). */
-const REDUCED_MOTION_OVERRIDES = SPEC_A11Y.reducedMotion;
-/** What `prefers-reduced-transparency: reduce` makes solid — the contract's `a11y.reducedTransparency`. */
-const REDUCED_TRANSPARENCY_OVERRIDES = SPEC_A11Y.reducedTransparency;
-const ROOT = ':root';
-const DEFAULT_SCHEME$1 = 'default';
-const REFERENCE = 'var(';
-const MEDIA_DARK = '(prefers-color-scheme: dark)';
-const ACCESSIBILITY_MEDIA = [
-    { query: '(prefers-reduced-motion: reduce)', overrides: REDUCED_MOTION_OVERRIDES },
-    { query: '(prefers-reduced-transparency: reduce)', overrides: REDUCED_TRANSPARENCY_OVERRIDES },
-];
-const usable = (t) => !!t && typeof t.name === 'string' && t.name !== '' &&
-    typeof t.value === 'string' && t.value !== '';
-const darkOf = (t) => {
-    const dark = t.values?.dark;
-    return typeof dark === 'string' && dark !== '' ? dark : null;
-};
-const usableTokens = (tokens) => (tokens ?? []).filter(usable);
-const declarations = (entries, indent) => entries.map(([name, value]) => `${indent}--iox-${name}: ${value};`).join('\n');
-const rule = (selector, entries, indent = '') => entries.length ? `${indent}${selector} {\n${declarations(entries, indent + '  ')}\n${indent}}` : '';
-const media = (query, rules) => {
-    const body = rules.filter(Boolean);
-    return body.length ? `@media ${query} {\n${body.join('\n')}\n}` : '';
-};
-const schemeSelector = (id, scope) => scope ? `${scope} .iox-scheme-${id}` : `.iox-scheme-${id}`;
-const nonDefaultSchemes = () => Object.entries(SPEC_SCHEMES)
-    .filter(([id]) => id !== DEFAULT_SCHEME$1)
-    .map(([id, scheme]) => [id, scheme.set]);
-/** `{ 'iox-brand': '#2f6f62', … }` — the builder registry's input shape for base values. */
-function tokensToVarMap(tokens) {
-    const map = {};
-    for (const t of usableTokens(tokens))
-        map[`iox-${t.name}`] = t.value;
-    return map;
+/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
+function ownedTraitsOf(style) {
+    return ownedEntries(style);
 }
-/** Only the tokens that carry a dark override, as `{ 'iox-name': darkValue }`. */
-function tokensToDarkVarMap(tokens) {
-    const map = {};
-    for (const t of usableTokens(tokens)) {
-        const dark = darkOf(t);
-        if (dark !== null)
-            map[`iox-${t.name}`] = dark;
-    }
-    return map;
+/** The node's value of one owned trait (a base trait, or a trait inside a pseudo-state map). */
+function readOwnedTrait(target, owned) {
+    return owned.state ? readState(target, owned.state, owned.trait) : readBase(target, owned.trait);
 }
-const TOKEN_REF$1 = /var\(\s*--iox-([\w-]+)\s*(?:,([^()]*))?\)/g;
-const PLACEHOLDER = /\{\{\s*(~?)([\w-]+)\s*\}\}/g;
-const LIGHT = 'light';
-const DARK = 'dark';
-const modeValue = (t, mode) => (mode === DARK ? darkOf(t) ?? t.value : t.value);
-/** The rows as ONE mode: each row's value in that mode, no dark override left. `auto` (or none) →
- *  the rows unchanged. */
-function rowsForMode(rows, mode) {
-    if (mode !== LIGHT && mode !== DARK)
-        return [...rows];
-    return rows.map(t => {
-        const { values: _dropped, ...rest } = t;
-        return { ...rest, value: modeValue(t, mode) };
-    });
+/** Write one owned trait. False when a builder node has no slot for a base trait (dropped). */
+function writeOwnedTrait(target, owned, value) {
+    if (!owned.state)
+        return writeBase(target, owned.trait, value);
+    writeState(target, owned.state, owned.trait, value);
+    return true;
 }
-/** Every token's ROOT value in one mode, with `var(--iox-…)` references resolved against the same
- *  set (recursively; a reference cycle or an unknown token is left as written). */
-function resolveTokenValues(tokens, mode = LIGHT) {
-    const raw = new Map(usableTokens(tokens).map(t => [t.name, modeValue(t, mode)]));
-    const out = {};
-    const resolve = (name, trail) => {
-        if (name in out)
-            return out[name];
-        const value = raw.get(name);
-        if (value === undefined || trail.has(name))
-            return null;
-        const next = new Set(trail).add(name);
-        return value.replace(TOKEN_REF$1, (ref, inner, fallback) => resolve(inner, next) ?? (fallback !== undefined ? fallback.trim() : ref));
-    };
-    for (const name of raw.keys()) {
-        const value = resolve(name, new Set());
-        if (value !== null)
-            out[name] = value;
+const sameOwned = (a, b) => a.trait === b.trait && a.state === b.state;
+function writeEntries(target, style, skip = []) {
+    const unknown = [];
+    for (const entry of ownedEntries(style)) {
+        if (skip.some(s => sameOwned(s, entry)))
+            continue;
+        if (entry.state)
+            writeState(target, entry.state, entry.trait, entry.value);
+        else if (!writeBase(target, entry.trait, entry.value))
+            unknown.push(entry.trait);
     }
-    return out;
+    target.elementStyle = style.id;
+    return unknown;
 }
-/**
- * Every token's value INSIDE a section wearing `schemeId`, in one mode — what CSS computes there: the
- * scheme's overrides (`{{token}}` / `{{~token}}` placeholders substituted from the root), every other
- * row as declared, and `var()` references resolved within the section (the §3c re-declaration rule
- * makes that the section's own resolution). `default` (or an unknown id) is the root.
- */
-function resolveSchemeTokenValues(tokens, mode, schemeId) {
-    const rows = usableTokens(tokens);
-    const set = schemeId === DEFAULT_SCHEME$1 ? undefined : SPEC_SCHEMES[schemeId]?.set;
-    if (!set)
-        return resolveTokenValues(rows, mode);
-    const root = resolveTokenValues(rows, mode);
-    const other = resolveTokenValues(rows, mode === DARK ? LIGHT : DARK);
-    const overrides = new Map(schemeEntries(set, root, other));
-    return resolveTokenValues(rows.map(t => ({ name: t.name, value: overrides.get(t.name) ?? modeValue(t, mode) })), LIGHT);
+/** Write the style's exact base map and its hover/active/focus/current maps into the target. */
+function applyElementStyle(target, id) {
+    const style = elementStyleById(id);
+    if (!style)
+        return { applied: false, unknownTraits: [] };
+    return { applied: true, unknownTraits: writeEntries(target, style) };
 }
+const RULE_KEY = /^(\w+)(?:\[(\w+)=([^\]]+)\])?$/;
+const RANGE = /^([a-z]*)(\d+)\.\.\1(\d+)$/;
+function expandValues(raw) {
+    const range = RANGE.exec(raw);
+    if (!range)
+        return [raw];
+    const [, prefix, from, to] = range;
+    const out = [];
+    for (let n = Number(from); n <= Number(to); n++)
+        out.push(`${prefix}${n}`);
+    return out;
+}
+const DEFAULT_RULES = Object.entries(SPEC_DEFAULT_ELEMENT_STYLE).map(([key, style]) => {
+    const m = RULE_KEY.exec(key);
+    if (!m)
+        throw new Error(`defaultElementStyle: unreadable key "${key}"`);
+    const [, type, prop, raw] = m;
+    return prop ? { type, prop, values: expandValues(raw), style } : { type, style };
+});
 /**
- * `value` with every `var(--iox-…)` replaced by that token's resolved root value in `mode` — what
- * the Style panel's Detach writes, so the node keeps exactly what it showed as a literal. An unknown
- * token falls back to its declared fallback, else stays as written.
+ * The element style a NEW node of `type` is born wearing (the spec's `defaultElementStyle`), or null
+ * when the type has none. `traits` is the node's own trait values (props) — a Heading's default
+ * follows its `level`; a Heading with no level matches no rule.
  */
-function resolveTokenReferences(value, tokens, mode = LIGHT) {
-    const resolved = resolveTokenValues(tokens, mode);
-    return value.replace(TOKEN_REF$1, (ref, name, fallback) => resolved[name] ?? (fallback !== undefined ? fallback.trim() : ref));
+function defaultElementStyleFor(type, traits = {}) {
+    for (const rule of DEFAULT_RULES) {
+        if (rule.type !== type)
+            continue;
+        if (!rule.prop)
+            return rule.style;
+        if (rule.values.includes(String(traits[rule.prop])))
+            return rule.style;
+    }
+    return null;
 }
-/** A scheme value with its placeholders replaced — `{{token}}` by the root's resolved value in this
- *  mode, `{{~token}}` by its value in the OTHER mode (an inverse section is the other mode's ground,
- *  DS9) — or null when a placeholder names a token the set does not have (the declaration is then
- *  omitted). */
-function substitute(template, resolved, opposite) {
-    let missing = false;
-    const value = template.replace(PLACEHOLDER, (_, tilde, name) => {
-        const from = tilde ? opposite : resolved;
-        if (!(name in from))
-            missing = true;
-        return from[name] ?? '';
+/** Per owned trait: does the node still hold the style's value (linked) or the author's (changed)? */
+function ownedTraitStatus(target, id) {
+    const style = elementStyleById(id);
+    if (!style)
+        return [];
+    return ownedEntries(style).map(({ trait, state, value }) => {
+        const actual = state ? readState(target, state, trait) : readBase(target, trait);
+        return {
+            trait, ...(state ? { state } : {}), expected: value, actual,
+            status: actual === value ? OwnedTraitLink.Linked : OwnedTraitLink.Changed,
+        };
     });
-    return missing ? null : value;
 }
-const schemeEntries = (set, resolved, opposite) => Object.entries(set)
-    .map(([name, template]) => [name, substitute(template, resolved, opposite)])
-    .filter((e) => e[1] !== null);
-const hasPlaceholder = (value) => value.includes('{{');
 /**
- * Section colour schemes (design-system plan §3c). Two rules, both about WHERE a custom property
- * resolves:
- *
- * - ⚠️ Custom properties resolve where they are DECLARED: `--iox-card-bg: var(--iox-surface)`
- *   declared on `:root` keeps `:root`'s surface inside `.iox-scheme-inverse`. So each scheme block
- *   carries the spec's overrides PLUS every other token whose value references a token,
- *   re-declared verbatim — re-resolving it in the section.
- * - ⚠️ A scheme that SWAPS two tokens (Brand: accent ⇄ accent-ink) cannot write them as `var()`:
- *   on one element `accent: var(--iox-accent-ink)` + `accent-ink: var(--iox-accent)` is a cycle,
- *   and CSS makes both invalid. The contract writes `{{accent}}` instead — the token's ROOT value,
- *   resolved here at compile time (and again from dark values for the dark twin).
+ * Move a node from one style to another, rewriting ONLY what the old style owned:
+ * - an owned trait still holding the old style's value is released — a base trait goes back to
+ *   `baseline[trait]` (the type's unstyled value; deleted when the baseline has none), a state trait
+ *   is removed from its state map;
+ * - an owned trait the author changed is KEPT, and the new style does not overwrite it.
+ * Then the new style is written. Traits neither style owns are never touched.
  */
-function compileSchemeCss(tokens, scope, opposite) {
-    const rows = usableTokens(tokens);
-    if (!rows.length)
-        return '';
-    const resolved = resolveTokenValues(rows, LIGHT);
-    const other = opposite ?? resolveTokenValues(rows, DARK);
-    return nonDefaultSchemes().map(([id, set]) => rule(schemeSelector(id, scope), [
-        ...schemeEntries(set, resolved, other),
-        ...rows.filter(t => !(t.name in set) && t.value.includes(REFERENCE))
-            .map((t) => [t.name, t.value]),
-    ])).filter(Boolean).join('\n');
-}
-/** The dark twin of both scheme rules: a re-declared token with a dark value would otherwise pin
- *  the LIGHT value inside the section, and a `{{token}}` swap was resolved from LIGHT values. */
-function darkSchemeRules(rows, scope) {
-    const light = resolveTokenValues(rows, LIGHT);
-    const dark = resolveTokenValues(rows, DARK);
-    const redeclared = rows.filter(t => {
-        const d = darkOf(t);
-        return d !== null && (t.value.includes(REFERENCE) || d.includes(REFERENCE));
-    });
-    return nonDefaultSchemes().map(([id, set]) => {
-        const swapped = Object.fromEntries(Object.entries(set).filter(([, v]) => hasPlaceholder(v)));
-        const lightSwap = new Map(schemeEntries(swapped, light, dark));
-        return rule(schemeSelector(id, scope), [
-            ...schemeEntries(swapped, dark, light).filter(([name, value]) => lightSwap.get(name) !== value),
-            ...redeclared.filter(t => !(t.name in set)).map((t) => [t.name, darkOf(t)]),
-        ], '  ');
-    });
-}
-function presentOverrides(rows, overrides, onlyWithDark) {
-    return Object.entries(overrides).filter(([name]) => rows.some(t => t.name === name && (!onlyWithDark || darkOf(t) !== null)));
-}
-/** The token CSS as the two halves a renderer places around its node rules. */
-function compileTokenCssBlocks(tokens, opts = {}) {
-    const all = usableTokens(tokens);
-    const rows = rowsForMode(all, opts.mode);
-    const root = opts.scope ?? ROOT;
-    // A forced mode flattens the rows to ONE mode; a `{{~token}}` still reads the other mode's value.
-    const opposite = resolveTokenValues(all, opts.mode === DARK ? LIGHT : DARK);
-    const present = new Set(rows.map(t => t.name));
-    const unset = opts.isolate
-        ? [...specTokenNames()].filter(name => !present.has(name)).map((name) => [name, 'initial'])
-        : [];
-    const base = [
-        rule(root, [...unset, ...rows.map((t) => [t.name, t.value])]),
-        compileSchemeCss(rows, opts.scope, opposite),
-        ...ACCESSIBILITY_MEDIA.map(({ query, overrides }) => media(query, [rule(root, presentOverrides(rows, overrides, false), '  ')])),
-    ].filter(Boolean).join('\n');
-    const darkRows = rows.map((t) => [t.name, darkOf(t)])
-        .filter((e) => e[1] !== null);
-    const dark = darkRows.length ? [
-        media(MEDIA_DARK, [rule(root, darkRows, '  '), ...darkSchemeRules(rows, opts.scope)]),
-        // Glass carries dark glass values; without this the dark block (LAST) would out-rank the
-        // reduced-transparency swap and keep dark surfaces translucent.
-        ...ACCESSIBILITY_MEDIA.map(({ query, overrides }) => media(`${MEDIA_DARK} and ${query}`, [rule(root, presentOverrides(rows, overrides, true), '  ')])),
-    ].filter(Boolean).join('\n') : '';
-    return { base, dark };
-}
-/** One stylesheet string: base → schemes → reduced motion → reduced transparency → dark LAST. */
-function compileTokenCss(tokens, opts = {}) {
-    const { base, dark } = compileTokenCssBlocks(tokens, opts);
-    return [base, dark].filter(Boolean).join('\n');
-}
-
-/** A pack's own sanity: every token row names itself and carries a value. Returns errors. */
-function validateFlavorPack(pack) {
-    const errors = [];
-    for (const t of pack.tokens ?? []) {
-        if (!t.name)
-            errors.push(`${pack.id}: token with empty name`);
-        if (!t.value)
-            errors.push(`${pack.id}: token "${t.name}" has no value`);
+function switchElementStyle(target, fromId, toId, baseline = {}) {
+    const to = elementStyleById(toId);
+    if (!to)
+        return { applied: false, kept: [] };
+    const kept = [];
+    const from = elementStyleById(fromId);
+    if (from) {
+        for (const status of ownedTraitStatus(target, from.id)) {
+            const ref = status.state ? { trait: status.trait, state: status.state } : { trait: status.trait };
+            if (status.status === OwnedTraitLink.Changed) {
+                if (status.actual !== undefined)
+                    kept.push(ref);
+                continue;
+            }
+            if (ref.state)
+                deleteState(target, ref.state, ref.trait);
+            else
+                writeBase(target, ref.trait, baseline[ref.trait]);
+        }
     }
-    return errors;
+    writeEntries(target, to, kept);
+    return { applied: true, kept };
 }
 /**
- * Swiss — the retired F1 pack: four tokens (control/surface radius, control/stack spacing) and the
- * hue opinion F2's brand step read. Three of its rows become the spec's `legacyAliases` on migration;
- * `space-control` is a v2 token in every pack and takes Crisp's value.
+ * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
+ * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
+ * `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
+ * scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
+ * no matter which tokens the org holds.
  */
-const SWISS_FLAVOR = {
-    id: 'swiss',
-    version: 1,
-    label: 'Swiss',
-    blurb: 'Grid discipline, hairline rules, near-zero motion.',
-    tokens: [
-        { name: 'radius-control', value: '4px', type: 'size', group: 'shape' },
-        { name: 'radius-surface', value: '4px', type: 'size', group: 'shape' },
-        { name: 'space-control', value: '10px 18px', type: 'spacing', group: 'space' },
-        { name: 'space-stack', value: '12px', type: 'spacing', group: 'space' },
-    ],
-    // F2: Swiss turns the seed toward a cool counterpoint.
-    accentHueDeg: 150,
-};
+const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
+const MARKER_PREFIX$1 = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
+function elementStyleClass(id) {
+    return elementStyleById(id) ? `${MARKER_PREFIX$1}${id}` : null;
+}
+/**
+ * The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
+ * style only when it still wears its old level's default (author changes kept, via
+ * `switchElementStyle`); a Heading wearing any other style — or none — is left alone. Returns null
+ * when nothing switched.
+ */
+function applyHeadingLevelRule(target, oldLevel, newLevel, baseline = {}) {
+    if (target.type !== 'Heading' || oldLevel === newLevel)
+        return null;
+    const from = defaultElementStyleFor('Heading', { level: oldLevel });
+    const to = defaultElementStyleFor('Heading', { level: newLevel });
+    if (!from || !to || target.elementStyle !== from || from === to)
+        return null;
+    return switchElementStyle(target, from, to, baseline);
+}
 
 /**
- * Element styles — the author's "classes" (design-system plan §3b). A named look is an EXACT trait
- * map written into a node; every value is a `var(--iox-…)` reference or a flavor-independent
- * keyword, so a re-theme rewrites token rows and every node wearing the style follows. No renderer
- * reads `elementStyle`: it records which look a node wears, for the panel row, Reset, adopt and AI.
+ * The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
+ * path, engine string path) — ONE helper, so the three can never disagree about which class a node
+ * carries:
  *
- * Works on two node shapes through one minimal interface, so the builder (a ComponentNode whose
- * values live in `styleTraits[].traits[].default`) and the server-side composer (a plain serialized
- * layout node with `styleProps`) share every function here.
+ * - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
+ *   the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
+ * - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
+ *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves;
+ * - the composite ROLE `iox-role-<role>` (`card.media` → `iox-role-card-media`; composite-components
+ *   plan §3, Card v2) — what the shared CSS keys a part's structural rules on (the badge's corner, the
+ *   card's stretched link), so a role is never a renderer's private knowledge.
+ *
+ * Renderers read `elementStyle`, `colorScheme` and `role` for exactly this and nothing else.
  */
-var ElementStyleState;
-(function (ElementStyleState) {
-    ElementStyleState["Hover"] = "hover";
-    ElementStyleState["Active"] = "active";
-    ElementStyleState["Focus"] = "focus";
-    /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
-    ElementStyleState["Current"] = "current";
-})(ElementStyleState || (ElementStyleState = {}));
-const ELEMENT_STYLE_STATES = [ElementStyleState.Hover, ElementStyleState.Active, ElementStyleState.Focus, ElementStyleState.Current];
-const ELEMENT_STYLES = SPEC_ELEMENT_STYLES;
-/** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
-const BUTTON_VARIANT_TO_STYLE = SPEC_BUTTON_VARIANT_TO_STYLE;
-/** Palette entries that are a Container wearing an element style (Card · Panel · Navigation bar). */
-const PALETTE_PRESETS = SPEC_PALETTE_PRESETS;
-const BY_ID = new Map(ELEMENT_STYLES.map(s => [s.id, s]));
-function elementStyleById(id) {
-    return id ? BY_ID.get(id) : undefined;
+/** The section colour schemes — the contract's `schemes` keys. */
+var ColorScheme;
+(function (ColorScheme) {
+    ColorScheme["Default"] = "default";
+    ColorScheme["Subtle"] = "subtle";
+    ColorScheme["Inverse"] = "inverse";
+    ColorScheme["Accent"] = "accent";
+})(ColorScheme || (ColorScheme = {}));
+/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
+const COLOR_SCHEME_TRAIT = 'colorScheme';
+/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
+const COLOR_SCHEME_TYPES = ['Section', 'Container', 'LinkedContainer'];
+/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
+const COLOR_SCHEMES = Object.keys(SPEC_SCHEMES).map(id => ({ id, label: SPEC_SCHEMES[id].label }));
+const SCHEME_IDS$1 = new Set(Object.keys(SPEC_SCHEMES));
+const SCHEME_PREFIX = 'iox-scheme-';
+const ROLE_PREFIX = 'iox-role-';
+/** A role is dot-separated lowercase words (`card`, `card.title`) — anything else never reaches a class. */
+const ROLE_SHAPE = /^[a-z][a-z0-9-]*(\.[a-z][a-z0-9-]*)*$/;
+const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
+function colorSchemeClass(id) {
+    return typeof id === 'string' && id !== ColorScheme.Default && SCHEME_IDS$1.has(id) ? `${SCHEME_PREFIX}${id}` : null;
 }
-/** The styles a node of `type` may wear — the Style panel's select. */
-function elementStylesFor(type) {
-    return ELEMENT_STYLES.filter(s => s.appliesTo.includes(type));
+/** `iox-role-<role>` for a well-formed composite role, else null. */
+function roleClass(role) {
+    return typeof role === 'string' && ROLE_SHAPE.test(role) ? `${ROLE_PREFIX}${role.replace(/\./g, '-')}` : null;
 }
-var OwnedTraitLink;
-(function (OwnedTraitLink) {
-    /** The node still holds the style's value. */
-    OwnedTraitLink["Linked"] = "linked";
-    /** The author replaced it on this node. */
-    OwnedTraitLink["Changed"] = "changed";
-})(OwnedTraitLink || (OwnedTraitLink = {}));
-const usesTraits = (t) => Array.isArray(t.styleTraits);
-function findTrait(target, name) {
-    for (const group of target.styleTraits ?? []) {
-        const hit = group.traits.find(tr => tr.name === name);
+/** The element style whose wearer is the phone's bottom navigation bar (CC1, R1). */
+const BOTTOM_BAR_STYLE = 'bottom-bar';
+/** The page reserves the bar's height wherever this class is on the page… */
+const BAR_RESERVE_CLASS = 'iox-bar-reserve';
+/** …the responsive Breakpoint ids that can hold an override, widest first (a spec pins it to BREAKPOINTS). */
+const BAR_RESERVE_BREAKPOINTS = ['laptop', 'tablet', 'mobile', 'small'];
+function baseDisplayOf(node) {
+    if (node.styleProps && 'display' in node.styleProps)
+        return node.styleProps['display'];
+    for (const group of node.styleTraits ?? []) {
+        const hit = group.traits?.find(t => t?.name === 'display');
         if (hit)
-            return hit;
+            return hit.default;
     }
     return undefined;
 }
-function readBase(target, name) {
-    return usesTraits(target) ? findTrait(target, name)?.default : target.styleProps?.[name];
+/**
+ * The class that makes the page reserve a bottom bar's height (iox-design.css: `padding-bottom` and
+ * `scroll-padding-bottom`, WCAG 2.4.11), only at the widths where the bar SHOWS: `iox-bar-reserve` when
+ * it shows at every width, `iox-bar-reserve-<bp>` when it is hidden at base and shown from that
+ * breakpoint down (the phone shape's own rule), null when it never shows or is not a bar.
+ */
+function barReserveClass(node) {
+    if (!node || node.elementStyle !== BOTTOM_BAR_STYLE)
+        return null;
+    if (baseDisplayOf(node) !== 'none')
+        return BAR_RESERVE_CLASS;
+    for (const bp of BAR_RESERVE_BREAKPOINTS) {
+        const display = node.responsive?.[bp]?.styleProps?.['display'];
+        if (display !== undefined && display !== 'none')
+            return `${BAR_RESERVE_CLASS}-${bp}`;
+    }
+    return null;
 }
-/** False when a builder node has no such trait — the value would be dropped. */
-function writeBase(target, name, value) {
-    if (usesTraits(target)) {
-        const trait = findTrait(target, name);
+/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
+function colorSchemeOf(node) {
+    if (!node)
+        return null;
+    const fromProps = node.props?.[COLOR_SCHEME_TRAIT];
+    if (fromProps !== undefined)
+        return typeof fromProps === 'string' ? fromProps : null;
+    const trait = node.traits?.find(t => t?.name === COLOR_SCHEME_TRAIT)?.default;
+    return typeof trait === 'string' ? trait : null;
+}
+/**
+ * The ink a section colour scheme gives everything inside it (vectoriox/iox-ui#15). A scheme re-declares
+ * tokens only, so without this a Container wearing one kept the colour it INHERITED from the section around
+ * it: a Featured (Brand) card's body text stayed the page's dark ink on the Brand fill, 2.54:1. Two halves,
+ * one rule: `compileSchemeCss` gives every `iox-scheme-*` element `color: var(--iox-text)` (the node rule,
+ * emitted after it at the same specificity, still wins), and {@link withSchemeInk} reads a scheme'd node's
+ * own `inherit` — what the card / box / panel element styles write for "no colour of my own" — as this ink.
+ * The value is the contract's `schemeInk`.
+ */
+const SCHEME_INK = SPEC_SCHEME_INK;
+/** The values that mean "no colour of my own" — `color` is inherited, so these equal no declaration. */
+const INHERITED_INK = new Set(['inherit', 'unset']);
+/**
+ * A node's style map as its renderer compiles it under a section colour scheme: a NON-default scheme turns
+ * an inherited `color` into {@link SCHEME_INK}; anything else — no scheme, an author's own colour, a token —
+ * is returned untouched (the same object). Every render path calls it on every rule it compiles for the
+ * node (base, states, breakpoint layers): the builder's StyleRegistryService and both engine paths.
+ */
+function withSchemeInk(styles, scheme) {
+    if (!styles || !colorSchemeClass(scheme))
+        return styles;
+    const color = styles['color'];
+    if (typeof color !== 'string' || !INHERITED_INK.has(color.trim().toLowerCase()))
+        return styles;
+    return { ...styles, color: SCHEME_INK };
+}
+/**
+ * Write a node's section colour scheme — THE one writer, so every control that offers Section colours (the
+ * Style panel's Element style block, Card ▸ Card) edits the same setting: the `colorScheme` content trait on
+ * a builder node, `props.colorScheme` on a saved one. False when nothing changed: an unknown id, the value it
+ * already holds, or a builder node with no such trait (a type that offers no scheme).
+ */
+function setColorScheme(node, id) {
+    if (!node || !SCHEME_IDS$1.has(id) || (colorSchemeOf(node) ?? ColorScheme.Default) === id)
+        return false;
+    if (Array.isArray(node.traits)) {
+        const trait = node.traits.find(t => t?.name === COLOR_SCHEME_TRAIT);
         if (!trait)
             return false;
-        trait.default = value;
+        trait.default = id;
         return true;
     }
-    target.styleProps = target.styleProps ?? {};
-    if (value === undefined)
-        delete target.styleProps[name];
-    else
-        target.styleProps[name] = value;
+    node.props = { ...(node.props ?? {}), [COLOR_SCHEME_TRAIT]: id };
     return true;
 }
-function readState(target, state, name) {
-    return target.stateStyles?.[state]?.[name];
+/** True when the node wears a known element style — the marker is on it. */
+function hasElementStyleMarker(node) {
+    return elementStyleClass(node?.elementStyle) !== null;
 }
-function writeState(target, state, name, value) {
-    target.stateStyles = target.stateStyles ?? {};
-    target.stateStyles[state] = { ...(target.stateStyles[state] ?? {}), [name]: value };
+/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'` (+ a bottom bar's reserve class), or `''` for none. */
+function nodeDesignClasses(node) {
+    const marker = elementStyleClass(node?.elementStyle);
+    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '', roleClass(node?.role) ?? '', barReserveClass(node) ?? '']
+        .filter(Boolean).join(' ');
 }
-function deleteState(target, state, name) {
-    const map = target.stateStyles?.[state];
-    if (!map)
+const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX) || c.startsWith(ROLE_PREFIX) || c.startsWith(BAR_RESERVE_CLASS);
+/** Make an element's design classes match the node — the live switch on the canvas and the
+ *  component path's one-time stamp. Removes stale ones; touches no other class. */
+function syncNodeDesignClasses(el, node) {
+    if (!el?.classList)
         return;
-    const { [name]: _drop, ...rest } = map;
-    if (Object.keys(rest).length)
-        target.stateStyles[state] = rest;
-    else
-        delete target.stateStyles[state];
+    for (const c of Array.from(el.classList).filter(isDesignClass))
+        el.classList.remove(c);
+    const classes = nodeDesignClasses(node);
+    if (classes)
+        el.classList.add(...classes.split(' '));
+}
+
+/**
+ * Which `--iox-<name>` a piece of COMPONENT CSS may reference (design-system §3b-bis: "component CSS
+ * may reference ONLY tokens defined in this spec"). DS2 shipped seven names nobody defines
+ * (`card-media-gap`, `gallery-overlay`, `dialog-close-bg`…): a token the contract does not define can
+ * never be set by a flavor, so it is a literal wearing a costume. One guard, run over BOTH
+ * renderers' component CSS (iox-ui's spec; the engine's `verify:token-names`).
+ */
+/** The 161 names of the contract's two tiers, plus its legacy aliases. */
+function specTokenNames() {
+    return new Set([
+        ...SPEC_TIERS.semantic.map(t => t.name),
+        ...SPEC_TIERS.component.map(t => t.name),
+        ...Object.keys(SPEC_LEGACY_ALIASES),
+    ]);
+}
+const REFERENCE$1 = /var\(\s*--iox-([a-z0-9-]+)/gi;
+/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
+function tokenReferences(css) {
+    return [...new Set(Array.from(css.matchAll(REFERENCE$1), m => m[1]))];
+}
+/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
+function unknownTokenReferences(css, alsoAllowed = []) {
+    const spec = specTokenNames();
+    const extra = new Set(alsoAllowed);
+    return tokenReferences(css).filter(name => !spec.has(name) && !extra.has(name));
+}
+const LEGACY_SCOPE = /:not\(\s*\.iox-es\s*\)/;
+/** Comments out: block comments, and SCSS `//` line comments (never the `//` of a `url(https://…)`). */
+const stripComments = (css) => String(css ?? '')
+    .replace(/\/\*[\s\S]*?\*\//g, '')
+    .replace(/(^|[^:\\])\/\/[^\n]*/g, '$1');
+/** A nested SCSS selector against its parent's: `&` is the parent; no `&` means a descendant. */
+function resolveNested(parent, selector) {
+    if (!parent)
+        return selector;
+    return selector.split(',').map(part => {
+        const own = part.trim();
+        return own.includes('&') ? own.replace(/&/g, parent) : `${parent} ${own}`;
+    }).join(', ');
 }
-/** Every (state, trait, value) a style owns, base first. */
-function ownedEntries(style) {
+/**
+ * Tokens read by a LEGACY rule — any rule whose selector is scoped `:not(.iox-es)` (the pre-DS2 look
+ * of a node that wears no element style, design-system §3b-bis). Such a rule must read NO token at
+ * all: a token it reads repaints a pre-DS2 page the moment the org's rows are seeded or a flavor is
+ * applied (D5). Returns `selector → names` for each offending rule; comments are ignored. SCSS
+ * nesting is resolved (DS4.1): `.x:where(:not(.iox-es)) { &:hover { … } }` is the legacy rule
+ * `.x:where(:not(.iox-es)):hover`, and an at-rule (`@media`) between them does not break the chain.
+ */
+function legacyRuleTokenReferences(css) {
+    const text = stripComments(css);
     const out = [];
-    for (const [trait, value] of Object.entries(style.base))
-        out.push({ trait, value });
-    for (const state of ELEMENT_STYLE_STATES) {
-        for (const [trait, value] of Object.entries(style[state] ?? {}))
-            out.push({ trait, state, value });
+    const stack = [];
+    const report = (frame) => {
+        if (!LEGACY_SCOPE.test(frame.selector))
+            return;
+        const tokens = tokenReferences(frame.body);
+        if (tokens.length)
+            out.push({ selector: frame.selector, tokens });
+    };
+    let buffer = '';
+    for (const ch of text) {
+        if (ch === '{') {
+            const head = buffer.trim().replace(/\s+/g, ' ');
+            buffer = '';
+            // Declarations before a nested block belong to the parent (`color: x; &:hover {`).
+            const cut = head.lastIndexOf(';');
+            const prelude = cut >= 0 ? head.slice(cut + 1).trim() : head;
+            const parent = stack[stack.length - 1];
+            if (parent && cut >= 0)
+                parent.body += head.slice(0, cut + 1);
+            const inherited = parent?.selector ?? '';
+            const selector = prelude.startsWith('@') ? inherited : resolveNested(inherited, prelude);
+            stack.push({ selector, body: '' });
+        }
+        else if (ch === '}') {
+            const frame = stack.pop();
+            if (frame) {
+                frame.body += buffer;
+                report(frame);
+            }
+            buffer = '';
+        }
+        else if (ch === ';' && stack.length) {
+            stack[stack.length - 1].body += buffer + ch;
+            buffer = '';
+        }
+        else {
+            buffer += ch;
+        }
     }
     return out;
 }
-/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
-function ownedTraitsOf(style) {
-    return ownedEntries(style);
-}
-/** The node's value of one owned trait (a base trait, or a trait inside a pseudo-state map). */
-function readOwnedTrait(target, owned) {
-    return owned.state ? readState(target, owned.state, owned.trait) : readBase(target, owned.trait);
-}
-/** Write one owned trait. False when a builder node has no slot for a base trait (dropped). */
-function writeOwnedTrait(target, owned, value) {
-    if (!owned.state)
-        return writeBase(target, owned.trait, value);
-    writeState(target, owned.state, owned.trait, value);
-    return true;
+
+/** What `prefers-reduced-motion: reduce` collapses — the contract's complete list (`a11y.reducedMotion`). */
+const REDUCED_MOTION_OVERRIDES = SPEC_A11Y.reducedMotion;
+/** What `prefers-reduced-transparency: reduce` makes solid — the contract's `a11y.reducedTransparency`. */
+const REDUCED_TRANSPARENCY_OVERRIDES = SPEC_A11Y.reducedTransparency;
+const ROOT = ':root';
+const DEFAULT_SCHEME$1 = 'default';
+const REFERENCE = 'var(';
+const MEDIA_DARK = '(prefers-color-scheme: dark)';
+const ACCESSIBILITY_MEDIA = [
+    { query: '(prefers-reduced-motion: reduce)', overrides: REDUCED_MOTION_OVERRIDES },
+    { query: '(prefers-reduced-transparency: reduce)', overrides: REDUCED_TRANSPARENCY_OVERRIDES },
+];
+const usable = (t) => !!t && typeof t.name === 'string' && t.name !== '' &&
+    typeof t.value === 'string' && t.value !== '';
+const darkOf = (t) => {
+    const dark = t.values?.dark;
+    return typeof dark === 'string' && dark !== '' ? dark : null;
+};
+const usableTokens = (tokens) => (tokens ?? []).filter(usable);
+const declarations = (entries, indent) => entries.map(([name, value]) => `${indent}--iox-${name}: ${value};`).join('\n');
+const rule = (selector, entries, indent = '') => entries.length ? `${indent}${selector} {\n${declarations(entries, indent + '  ')}\n${indent}}` : '';
+const media = (query, rules) => {
+    const body = rules.filter(Boolean);
+    return body.length ? `@media ${query} {\n${body.join('\n')}\n}` : '';
+};
+const schemeSelector = (id, scope) => scope ? `${scope} .iox-scheme-${id}` : `.iox-scheme-${id}`;
+const nonDefaultSchemes = () => Object.entries(SPEC_SCHEMES)
+    .filter(([id]) => id !== DEFAULT_SCHEME$1)
+    .map(([id, scheme]) => [id, scheme.set]);
+/** `{ 'iox-brand': '#2f6f62', … }` — the builder registry's input shape for base values. */
+function tokensToVarMap(tokens) {
+    const map = {};
+    for (const t of usableTokens(tokens))
+        map[`iox-${t.name}`] = t.value;
+    return map;
 }
-const sameOwned = (a, b) => a.trait === b.trait && a.state === b.state;
-function writeEntries(target, style, skip = []) {
-    const unknown = [];
-    for (const entry of ownedEntries(style)) {
-        if (skip.some(s => sameOwned(s, entry)))
-            continue;
-        if (entry.state)
-            writeState(target, entry.state, entry.trait, entry.value);
-        else if (!writeBase(target, entry.trait, entry.value))
-            unknown.push(entry.trait);
+/** Only the tokens that carry a dark override, as `{ 'iox-name': darkValue }`. */
+function tokensToDarkVarMap(tokens) {
+    const map = {};
+    for (const t of usableTokens(tokens)) {
+        const dark = darkOf(t);
+        if (dark !== null)
+            map[`iox-${t.name}`] = dark;
     }
-    target.elementStyle = style.id;
-    return unknown;
+    return map;
 }
-/** Write the style's exact base map and its hover/active/focus/current maps into the target. */
-function applyElementStyle(target, id) {
-    const style = elementStyleById(id);
-    if (!style)
-        return { applied: false, unknownTraits: [] };
-    return { applied: true, unknownTraits: writeEntries(target, style) };
+const TOKEN_REF$1 = /var\(\s*--iox-([\w-]+)\s*(?:,([^()]*))?\)/g;
+const PLACEHOLDER = /\{\{\s*(~?)([\w-]+)\s*\}\}/g;
+const LIGHT = 'light';
+const DARK = 'dark';
+const modeValue = (t, mode) => (mode === DARK ? darkOf(t) ?? t.value : t.value);
+/** The rows as ONE mode: each row's value in that mode, no dark override left. `auto` (or none) →
+ *  the rows unchanged. */
+function rowsForMode(rows, mode) {
+    if (mode !== LIGHT && mode !== DARK)
+        return [...rows];
+    return rows.map(t => {
+        const { values: _dropped, ...rest } = t;
+        return { ...rest, value: modeValue(t, mode) };
+    });
 }
-const RULE_KEY = /^(\w+)(?:\[(\w+)=([^\]]+)\])?$/;
-const RANGE = /^([a-z]*)(\d+)\.\.\1(\d+)$/;
-function expandValues(raw) {
-    const range = RANGE.exec(raw);
-    if (!range)
-        return [raw];
-    const [, prefix, from, to] = range;
-    const out = [];
-    for (let n = Number(from); n <= Number(to); n++)
-        out.push(`${prefix}${n}`);
+/** Every token's ROOT value in one mode, with `var(--iox-…)` references resolved against the same
+ *  set (recursively; a reference cycle or an unknown token is left as written). */
+function resolveTokenValues(tokens, mode = LIGHT) {
+    const raw = new Map(usableTokens(tokens).map(t => [t.name, modeValue(t, mode)]));
+    const out = {};
+    const resolve = (name, trail) => {
+        if (name in out)
+            return out[name];
+        const value = raw.get(name);
+        if (value === undefined || trail.has(name))
+            return null;
+        const next = new Set(trail).add(name);
+        return value.replace(TOKEN_REF$1, (ref, inner, fallback) => resolve(inner, next) ?? (fallback !== undefined ? fallback.trim() : ref));
+    };
+    for (const name of raw.keys()) {
+        const value = resolve(name, new Set());
+        if (value !== null)
+            out[name] = value;
+    }
     return out;
 }
-const DEFAULT_RULES = Object.entries(SPEC_DEFAULT_ELEMENT_STYLE).map(([key, style]) => {
-    const m = RULE_KEY.exec(key);
-    if (!m)
-        throw new Error(`defaultElementStyle: unreadable key "${key}"`);
-    const [, type, prop, raw] = m;
-    return prop ? { type, prop, values: expandValues(raw), style } : { type, style };
-});
 /**
- * The element style a NEW node of `type` is born wearing (the spec's `defaultElementStyle`), or null
- * when the type has none. `traits` is the node's own trait values (props) — a Heading's default
- * follows its `level`; a Heading with no level matches no rule.
+ * Every token's value INSIDE a section wearing `schemeId`, in one mode — what CSS computes there: the
+ * scheme's overrides (`{{token}}` / `{{~token}}` placeholders substituted from the root), every other
+ * row as declared, and `var()` references resolved within the section (the §3c re-declaration rule
+ * makes that the section's own resolution). `default` (or an unknown id) is the root. A CHAIN
+ * (`['inverse', 'accent']`, outermost first) is an element wearing the last scheme inside elements wearing
+ * the ones before it: a token the inner scheme does not set is the outer one's (custom properties inherit).
  */
-function defaultElementStyleFor(type, traits = {}) {
-    for (const rule of DEFAULT_RULES) {
-        if (rule.type !== type)
+function resolveSchemeTokenValues(tokens, mode, schemeId) {
+    const rows = usableTokens(tokens);
+    const sets = (typeof schemeId === 'string' ? [schemeId] : schemeId)
+        .map(id => (id === DEFAULT_SCHEME$1 ? undefined : SPEC_SCHEMES[id]?.set));
+    if (!sets.some(Boolean))
+        return resolveTokenValues(rows, mode);
+    const root = resolveTokenValues(rows, mode);
+    const other = resolveTokenValues(rows, mode === DARK ? LIGHT : DARK);
+    // Nested (`[outer, inner]` — a Featured card in an Inverse section): each scheme block re-declares the
+    // rows that reference a token, so at every level those are restored before the block's own set.
+    const overrides = new Map();
+    for (const set of sets) {
+        if (!set)
             continue;
-        if (!rule.prop)
-            return rule.style;
-        if (rule.values.includes(String(traits[rule.prop])))
-            return rule.style;
+        for (const t of rows)
+            if (modeValue(t, mode).includes(REFERENCE))
+                overrides.delete(t.name);
+        for (const [name, value] of schemeEntries(set, root, other))
+            overrides.set(name, value);
     }
-    return null;
-}
-/** Per owned trait: does the node still hold the style's value (linked) or the author's (changed)? */
-function ownedTraitStatus(target, id) {
-    const style = elementStyleById(id);
-    if (!style)
-        return [];
-    return ownedEntries(style).map(({ trait, state, value }) => {
-        const actual = state ? readState(target, state, trait) : readBase(target, trait);
-        return {
-            trait, ...(state ? { state } : {}), expected: value, actual,
-            status: actual === value ? OwnedTraitLink.Linked : OwnedTraitLink.Changed,
-        };
-    });
+    return resolveTokenValues(rows.map(t => ({ name: t.name, value: overrides.get(t.name) ?? modeValue(t, mode) })), LIGHT);
 }
 /**
- * Move a node from one style to another, rewriting ONLY what the old style owned:
- * - an owned trait still holding the old style's value is released — a base trait goes back to
- *   `baseline[trait]` (the type's unstyled value; deleted when the baseline has none), a state trait
- *   is removed from its state map;
- * - an owned trait the author changed is KEPT, and the new style does not overwrite it.
- * Then the new style is written. Traits neither style owns are never touched.
+ * `value` with every `var(--iox-…)` replaced by that token's resolved root value in `mode` — what
+ * the Style panel's Detach writes, so the node keeps exactly what it showed as a literal. An unknown
+ * token falls back to its declared fallback, else stays as written.
  */
-function switchElementStyle(target, fromId, toId, baseline = {}) {
-    const to = elementStyleById(toId);
-    if (!to)
-        return { applied: false, kept: [] };
-    const kept = [];
-    const from = elementStyleById(fromId);
-    if (from) {
-        for (const status of ownedTraitStatus(target, from.id)) {
-            const ref = status.state ? { trait: status.trait, state: status.state } : { trait: status.trait };
-            if (status.status === OwnedTraitLink.Changed) {
-                if (status.actual !== undefined)
-                    kept.push(ref);
-                continue;
-            }
-            if (ref.state)
-                deleteState(target, ref.state, ref.trait);
-            else
-                writeBase(target, ref.trait, baseline[ref.trait]);
-        }
-    }
-    writeEntries(target, to, kept);
-    return { applied: true, kept };
+function resolveTokenReferences(value, tokens, mode = LIGHT) {
+    const resolved = resolveTokenValues(tokens, mode);
+    return value.replace(TOKEN_REF$1, (ref, name, fallback) => resolved[name] ?? (fallback !== undefined ? fallback.trim() : ref));
+}
+/** A scheme value with its placeholders replaced — `{{token}}` by the root's resolved value in this
+ *  mode, `{{~token}}` by its value in the OTHER mode (an inverse section is the other mode's ground,
+ *  DS9) — or null when a placeholder names a token the set does not have (the declaration is then
+ *  omitted). */
+function substitute(template, resolved, opposite) {
+    let missing = false;
+    const value = template.replace(PLACEHOLDER, (_, tilde, name) => {
+        const from = tilde ? opposite : resolved;
+        if (!(name in from))
+            missing = true;
+        return from[name] ?? '';
+    });
+    return missing ? null : value;
 }
+const schemeEntries = (set, resolved, opposite) => Object.entries(set)
+    .map(([name, template]) => [name, substitute(template, resolved, opposite)])
+    .filter((e) => e[1] !== null);
+const hasPlaceholder = (value) => value.includes('{{');
 /**
- * The element-style MARKER (design-system §3b-bis, spec `elementStyleMarker`). A node that wears an
- * element style renders `iox-es iox-es-<id>` in BOTH renderers, through the one node-class helper
- * `nodeDesignClasses` (node-classes.ts); every piece of component CSS that carries the system look is
- * scoped to it, so a node saved before DS2 (no `elementStyle`) keeps its exact pre-DS2 component CSS
- * no matter which tokens the org holds.
+ * Section colour schemes (design-system plan §3c). Two rules, both about WHERE a custom property
+ * resolves:
+ *
+ * - ⚠️ Custom properties resolve where they are DECLARED: `--iox-card-bg: var(--iox-surface)`
+ *   declared on `:root` keeps `:root`'s surface inside `.iox-scheme-inverse`. So each scheme block
+ *   carries the spec's overrides PLUS every other token whose value references a token,
+ *   re-declared verbatim — re-resolving it in the section.
+ * - ⚠️ A scheme that SWAPS two tokens (Brand: accent ⇄ accent-ink) cannot write them as `var()`:
+ *   on one element `accent: var(--iox-accent-ink)` + `accent-ink: var(--iox-accent)` is a cycle,
+ *   and CSS makes both invalid. The contract writes `{{accent}}` instead — the token's ROOT value,
+ *   resolved here at compile time (and again from dark values for the dark twin).
  */
-const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
-const MARKER_PREFIX$1 = `${ELEMENT_STYLE_MARKER_CLASS}-`;
-/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
-function elementStyleClass(id) {
-    return elementStyleById(id) ? `${MARKER_PREFIX$1}${id}` : null;
+function compileSchemeCss(tokens, scope, opposite) {
+    const rows = usableTokens(tokens);
+    if (!rows.length)
+        return '';
+    const resolved = resolveTokenValues(rows, LIGHT);
+    const other = opposite ?? resolveTokenValues(rows, DARK);
+    return [
+        ...nonDefaultSchemes().map(([id, set]) => rule(schemeSelector(id, scope), [
+            ...schemeEntries(set, resolved, other),
+            ...rows.filter(t => !(t.name in set) && t.value.includes(REFERENCE))
+                .map((t) => [t.name, t.value]),
+        ])),
+        schemeInkRule(scope),
+    ].filter(Boolean).join('\n');
 }
 /**
- * The spec's `headingLevelRule`: changing a Heading's level moves it to the new level's DEFAULT
- * style only when it still wears its old level's default (author changes kept, via
- * `switchElementStyle`); a Heading wearing any other style — or none — is left alone. Returns null
- * when nothing switched.
+ * Every element wearing a scheme takes the scheme's ink (vectoriox/iox-ui#15): the tokens re-resolve inside
+ * it, but `color` is inherited as a COMPUTED value, so without this a scheme'd Container's running text kept
+ * the outer section's ink. One rule, specificity (0,1,0) in every renderer — a builder scope is wrapped in
+ * `:where()` — emitted with the token CSS, BEFORE every node rule: a node's own colour (same specificity,
+ * later) still wins. A node's `color: inherit` is read as this ink by `withSchemeInk`.
  */
-function applyHeadingLevelRule(target, oldLevel, newLevel, baseline = {}) {
-    if (target.type !== 'Heading' || oldLevel === newLevel)
-        return null;
-    const from = defaultElementStyleFor('Heading', { level: oldLevel });
-    const to = defaultElementStyleFor('Heading', { level: newLevel });
-    if (!from || !to || target.elementStyle !== from || from === to)
-        return null;
-    return switchElementStyle(target, from, to, baseline);
+function schemeInkRule(scope) {
+    const where = scope ? `:where(${scope}) ` : '';
+    const selectors = nonDefaultSchemes().map(([id]) => `${where}.iox-scheme-${id}`);
+    return selectors.length ? `${selectors.join(', ')} {\n  color: ${SCHEME_INK};\n}` : '';
+}
+/** The dark twin of both scheme rules: a re-declared token with a dark value would otherwise pin
+ *  the LIGHT value inside the section, and a `{{token}}` swap was resolved from LIGHT values. */
+function darkSchemeRules(rows, scope) {
+    const light = resolveTokenValues(rows, LIGHT);
+    const dark = resolveTokenValues(rows, DARK);
+    const redeclared = rows.filter(t => {
+        const d = darkOf(t);
+        return d !== null && (t.value.includes(REFERENCE) || d.includes(REFERENCE));
+    });
+    return nonDefaultSchemes().map(([id, set]) => {
+        const swapped = Object.fromEntries(Object.entries(set).filter(([, v]) => hasPlaceholder(v)));
+        const lightSwap = new Map(schemeEntries(swapped, light, dark));
+        return rule(schemeSelector(id, scope), [
+            ...schemeEntries(swapped, dark, light).filter(([name, value]) => lightSwap.get(name) !== value),
+            ...redeclared.filter(t => !(t.name in set)).map((t) => [t.name, darkOf(t)]),
+        ], '  ');
+    });
+}
+function presentOverrides(rows, overrides, onlyWithDark) {
+    return Object.entries(overrides).filter(([name]) => rows.some(t => t.name === name && (!onlyWithDark || darkOf(t) !== null)));
+}
+/** The token CSS as the two halves a renderer places around its node rules. */
+function compileTokenCssBlocks(tokens, opts = {}) {
+    const all = usableTokens(tokens);
+    const rows = rowsForMode(all, opts.mode);
+    const root = opts.scope ?? ROOT;
+    // A forced mode flattens the rows to ONE mode; a `{{~token}}` still reads the other mode's value.
+    const opposite = resolveTokenValues(all, opts.mode === DARK ? LIGHT : DARK);
+    const present = new Set(rows.map(t => t.name));
+    const unset = opts.isolate
+        ? [...specTokenNames()].filter(name => !present.has(name)).map((name) => [name, 'initial'])
+        : [];
+    const base = [
+        rule(root, [...unset, ...rows.map((t) => [t.name, t.value])]),
+        compileSchemeCss(rows, opts.scope, opposite),
+        ...ACCESSIBILITY_MEDIA.map(({ query, overrides }) => media(query, [rule(root, presentOverrides(rows, overrides, false), '  ')])),
+    ].filter(Boolean).join('\n');
+    const darkRows = rows.map((t) => [t.name, darkOf(t)])
+        .filter((e) => e[1] !== null);
+    const dark = darkRows.length ? [
+        media(MEDIA_DARK, [rule(root, darkRows, '  '), ...darkSchemeRules(rows, opts.scope)]),
+        // Glass carries dark glass values; without this the dark block (LAST) would out-rank the
+        // reduced-transparency swap and keep dark surfaces translucent.
+        ...ACCESSIBILITY_MEDIA.map(({ query, overrides }) => media(`${MEDIA_DARK} and ${query}`, [rule(root, presentOverrides(rows, overrides, true), '  ')])),
+    ].filter(Boolean).join('\n') : '';
+    return { base, dark };
+}
+/** One stylesheet string: base → schemes → reduced motion → reduced transparency → dark LAST. */
+function compileTokenCss(tokens, opts = {}) {
+    const { base, dark } = compileTokenCssBlocks(tokens, opts);
+    return [base, dark].filter(Boolean).join('\n');
+}
+
+/** A pack's own sanity: every token row names itself and carries a value. Returns errors. */
+function validateFlavorPack(pack) {
+    const errors = [];
+    for (const t of pack.tokens ?? []) {
+        if (!t.name)
+            errors.push(`${pack.id}: token with empty name`);
+        if (!t.value)
+            errors.push(`${pack.id}: token "${t.name}" has no value`);
+    }
+    return errors;
 }
+/**
+ * Swiss — the retired F1 pack: four tokens (control/surface radius, control/stack spacing) and the
+ * hue opinion F2's brand step read. Three of its rows become the spec's `legacyAliases` on migration;
+ * `space-control` is a v2 token in every pack and takes Crisp's value.
+ */
+const SWISS_FLAVOR = {
+    id: 'swiss',
+    version: 1,
+    label: 'Swiss',
+    blurb: 'Grid discipline, hairline rules, near-zero motion.',
+    tokens: [
+        { name: 'radius-control', value: '4px', type: 'size', group: 'shape' },
+        { name: 'radius-surface', value: '4px', type: 'size', group: 'shape' },
+        { name: 'space-control', value: '10px 18px', type: 'spacing', group: 'space' },
+        { name: 'space-stack', value: '12px', type: 'spacing', group: 'space' },
+    ],
+    // F2: Swiss turns the seed toward a cool counterpoint.
+    accentHueDeg: 150,
+};
 
 /**
  * ADOPT (design-system DS7, decision D5): link the nodes of a page saved before element styles to
@@ -12987,116 +13190,6 @@ function previewElementStyleAdoption(tree, ctx) {
     return adoptElementStyles(JSON.parse(JSON.stringify(tree ?? [])), ctx);
 }
 
-/**
- * The design-system classes a node renders, in BOTH renderers (builder canvas, engine component
- * path, engine string path) — ONE helper, so the three can never disagree about which class a node
- * carries:
- *
- * - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
- *   the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
- * - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
- *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves;
- * - the composite ROLE `iox-role-<role>` (`card.media` → `iox-role-card-media`; composite-components
- *   plan §3, Card v2) — what the shared CSS keys a part's structural rules on (the badge's corner, the
- *   card's stretched link), so a role is never a renderer's private knowledge.
- *
- * Renderers read `elementStyle`, `colorScheme` and `role` for exactly this and nothing else.
- */
-/** The section colour schemes — the contract's `schemes` keys. */
-var ColorScheme;
-(function (ColorScheme) {
-    ColorScheme["Default"] = "default";
-    ColorScheme["Subtle"] = "subtle";
-    ColorScheme["Inverse"] = "inverse";
-    ColorScheme["Accent"] = "accent";
-})(ColorScheme || (ColorScheme = {}));
-/** The content trait (stored in `props`, not a style prop) that picks a node's scheme. */
-const COLOR_SCHEME_TRAIT = 'colorScheme';
-/** The node types that offer a scheme (spec §3c: Section/Container; LinkedContainer is a Container that links). */
-const COLOR_SCHEME_TYPES = ['Section', 'Container', 'LinkedContainer'];
-/** Every scheme in contract order, with the contract's label (Default · Subtle · Inverse · Brand). */
-const COLOR_SCHEMES = Object.keys(SPEC_SCHEMES).map(id => ({ id, label: SPEC_SCHEMES[id].label }));
-const SCHEME_IDS$1 = new Set(Object.keys(SPEC_SCHEMES));
-const SCHEME_PREFIX = 'iox-scheme-';
-const ROLE_PREFIX = 'iox-role-';
-/** A role is dot-separated lowercase words (`card`, `card.title`) — anything else never reaches a class. */
-const ROLE_SHAPE = /^[a-z][a-z0-9-]*(\.[a-z][a-z0-9-]*)*$/;
-const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
-/** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
-function colorSchemeClass(id) {
-    return typeof id === 'string' && id !== ColorScheme.Default && SCHEME_IDS$1.has(id) ? `${SCHEME_PREFIX}${id}` : null;
-}
-/** `iox-role-<role>` for a well-formed composite role, else null. */
-function roleClass(role) {
-    return typeof role === 'string' && ROLE_SHAPE.test(role) ? `${ROLE_PREFIX}${role.replace(/\./g, '-')}` : null;
-}
-/** The element style whose wearer is the phone's bottom navigation bar (CC1, R1). */
-const BOTTOM_BAR_STYLE = 'bottom-bar';
-/** The page reserves the bar's height wherever this class is on the page… */
-const BAR_RESERVE_CLASS = 'iox-bar-reserve';
-/** …the responsive Breakpoint ids that can hold an override, widest first (a spec pins it to BREAKPOINTS). */
-const BAR_RESERVE_BREAKPOINTS = ['laptop', 'tablet', 'mobile', 'small'];
-function baseDisplayOf(node) {
-    if (node.styleProps && 'display' in node.styleProps)
-        return node.styleProps['display'];
-    for (const group of node.styleTraits ?? []) {
-        const hit = group.traits?.find(t => t?.name === 'display');
-        if (hit)
-            return hit.default;
-    }
-    return undefined;
-}
-/**
- * The class that makes the page reserve a bottom bar's height (iox-design.css: `padding-bottom` and
- * `scroll-padding-bottom`, WCAG 2.4.11), only at the widths where the bar SHOWS: `iox-bar-reserve` when
- * it shows at every width, `iox-bar-reserve-<bp>` when it is hidden at base and shown from that
- * breakpoint down (the phone shape's own rule), null when it never shows or is not a bar.
- */
-function barReserveClass(node) {
-    if (!node || node.elementStyle !== BOTTOM_BAR_STYLE)
-        return null;
-    if (baseDisplayOf(node) !== 'none')
-        return BAR_RESERVE_CLASS;
-    for (const bp of BAR_RESERVE_BREAKPOINTS) {
-        const display = node.responsive?.[bp]?.styleProps?.['display'];
-        if (display !== undefined && display !== 'none')
-            return `${BAR_RESERVE_CLASS}-${bp}`;
-    }
-    return null;
-}
-/** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
-function colorSchemeOf(node) {
-    if (!node)
-        return null;
-    const fromProps = node.props?.[COLOR_SCHEME_TRAIT];
-    if (fromProps !== undefined)
-        return typeof fromProps === 'string' ? fromProps : null;
-    const trait = node.traits?.find(t => t?.name === COLOR_SCHEME_TRAIT)?.default;
-    return typeof trait === 'string' ? trait : null;
-}
-/** True when the node wears a known element style — the marker is on it. */
-function hasElementStyleMarker(node) {
-    return elementStyleClass(node?.elementStyle) !== null;
-}
-/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'` (+ a bottom bar's reserve class), or `''` for none. */
-function nodeDesignClasses(node) {
-    const marker = elementStyleClass(node?.elementStyle);
-    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '', roleClass(node?.role) ?? '', barReserveClass(node) ?? '']
-        .filter(Boolean).join(' ');
-}
-const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX) || c.startsWith(ROLE_PREFIX) || c.startsWith(BAR_RESERVE_CLASS);
-/** Make an element's design classes match the node — the live switch on the canvas and the
- *  component path's one-time stamp. Removes stale ones; touches no other class. */
-function syncNodeDesignClasses(el, node) {
-    if (!el?.classList)
-        return;
-    for (const c of Array.from(el.classList).filter(isDesignClass))
-        el.classList.remove(c);
-    const classes = nodeDesignClasses(node);
-    if (classes)
-        el.classList.add(...classes.split(' '));
-}
-
 /**
  * Empty images (design-system DS3). A MARKED Image (`.iox-es-media`) with no source renders a box in
  * the `surface-2` token with its aspect ratio kept — on the canvas with an "Add image" label, on the
@@ -13836,6 +13929,8 @@ const GLYPH_GROUP = 'Media';
 const FORMS_GROUP = 'Forms';
 const DEFAULT_SCHEME = 'default';
 const SECTION = 'section';
+/** The element a scheme'd container's running text is reported as (iox-ui#15). */
+const INHERITED_TEXT = 'inherited text';
 const FIELD = 'field';
 const WHITE = { r: 1, g: 1, b: 1, a: 1 };
 const SINGLE_REF = /^var\(--iox-([\w-]+)\)$/;
@@ -13948,10 +14043,51 @@ function auditDesignContrast(rows, mode) {
             }
         }
     }
+    findings.push(...schemedContainerFindings(rows, mode, section, containers.filter((c) => !!c)));
     for (const scrim of SCRIMS)
         findings.push(...scrimFindings(rows, mode, scrim, byId.get(scrim.style)));
     return findings;
 }
+/** What a section in `values` paints under its content: its own fill over the page, or the page. */
+function sectionGround(values) {
+    const pageInk = parseCssColour(values['text']);
+    const page = paintColours(values['page-bg'], pageInk);
+    const sectionPaint = paintColours(values['section-bg'], pageInk);
+    return opaque(sectionPaint) ? sectionPaint.map(c => (c.a < 1 ? compositeOver(c, page[0] ?? WHITE) : c)) : page;
+}
+/**
+ * A container that wears a NON-default scheme, inside a section of every scheme (vectoriox/iox-ui#15 — the
+ * Featured card is a Card in Brand on a Default page). Its tokens are its own scheme's laid over the outer
+ * section's (what it does not set, it inherits); a translucent fill composites over the OUTER section; the running text it holds (`body`, `lead`, a label: `color: inherit`)
+ * reads the scheme's ink, which is what the scheme-ink rule and `withSchemeInk` make CSS compute.
+ */
+function schemedContainerFindings(rows, mode, section, containers) {
+    const out = [];
+    for (const outer of SCHEME_IDS) {
+        const ground = sectionGround(resolveSchemeTokenValues(rows, mode, outer));
+        for (const inner of SCHEME_IDS.filter(id => id !== DEFAULT_SCHEME)) {
+            const values = resolveSchemeTokenValues(rows, mode, [outer, inner]);
+            const schemeInk = parseCssColour(resolveIn(values, SCHEME_INK), parseCssColour(resolveIn(values, section['color'])));
+            for (const box of containers) {
+                const style = ownStyle(box);
+                const bgs = overAll(paintColours(resolveIn(values, style['backgroundColor']), schemeInk), ground);
+                const ink = style['color'] && style['color'] !== 'inherit' ? parseCssColour(resolveIn(values, style['color']), schemeInk) : schemeInk;
+                if (!ink)
+                    continue;
+                for (const g of bgs) {
+                    const bg = quantizeRgb(g);
+                    const f = quantizeRgb(ink.a < 1 ? compositeOver(ink, bg) : ink);
+                    const ratio = wcagContrastRatio(f, bg);
+                    out.push({
+                        scheme: inner, container: `${box.id} in a ${outer} section`, element: INHERITED_TEXT, part: 'text',
+                        fg: toHexColor(f), bg: toHexColor(bg), ratio: Math.round(ratio * 100) / 100, min: WCAG_AA_TEXT, pass: ratio >= WCAG_AA_TEXT - 1e-9,
+                    });
+                }
+            }
+        }
+    }
+    return out;
+}
 /** Text over an image: the block's ink — and every token its ink scope pins to it — over the scrim
  *  composited on the WORST-CASE image, in the scheme the block wears. Never over the section: the image
  *  covers it. */
@@ -15245,5 +15381,5 @@ function planFontFamilyRemoval(existing, previous, family) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, ColourCheckId, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, LinkType, MAX_FONT_FILE_BYTES, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_TINT_DEFAULT, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_CONTRAST_AUDIT, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_INK_SCOPES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, TINT_FULL_CHROMA, TINT_IDS, TINT_LEVELS, TINT_OWN_HUE_CHROMA, TINT_TURN_CHROMA, USER_TOKEN_SOURCE, WCAG_AA_TEXT, WCAG_AA_UI, adoptElementStyles, adoptionStyleFor, apcaLc, applyElementStyle, applyHeadingLevelRule, atLightness, atLightnessMaxChroma, auditDesignContrast, barReserveClass, buildFlavorTokens, buildFontFaceCss, buttonBlockHref, catalogFontId, checkFontWeight, choicesForPack, colorSchemeClass, colorSchemeOf, colourTabChecks, compareFontWeights, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, compositeOver, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designBaseline, designConfigEntries, designModeOf, designTokenRepairs, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headingHref, inSrgbGamut, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isFontWeightRange, isRetiredFlavorId, legacyDesignTokenRows, legacyFlavorTokens, legacyRuleTokenReferences, matchFontWeight, missingDesignRows, missingFontRoles, nodeDesignClasses, normalizeFontStyle, normalizeFontWeight, normalizeFontWeightValue, oklabToRgb, ownedTraitStatus, ownedTraitsOf, packDesignChoices, paintColours, parseCssColour, parseFontFamilies, parseFontWeight, parseHexColor, planDesignApply, planDesignRevert, planFlavorRevert, planFlavorSeed, planFontFamilyRemoval, planSwissMigration, preTintAccentGrounds, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, resolveDesignChoices, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, writeOwnedTrait };
+export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, ColorScheme, ColourCheckId, DEFAULT_FLAVOR_ID, DESIGN_TOKEN_GROUPS, DESIGN_TOKEN_TIERS, DESIGN_TOKEN_TYPES, DesignConfigKey, ELEMENT_STYLES, ELEMENT_STYLE_MARKER_CLASS, ELEMENT_STYLE_STATES, EMPTY_IMAGE_ATTRIBUTE, EMPTY_IMAGE_SRC, ElementStyleState, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_TINT_DEFAULT, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, SCHEME_INK, SPEC_A11Y, SPEC_AXES, SPEC_BUTTON_VARIANT_TO_STYLE, SPEC_CONTRAST, SPEC_CONTRAST_AUDIT, SPEC_DEFAULT_ELEMENT_STYLE, SPEC_ELEMENT_STYLES, SPEC_FIELD_CLASS_BASELINE, SPEC_FLAVORS, SPEC_FLAVOR_PACKS, SPEC_FONTS, SPEC_FONT_ROLES, SPEC_INK_SCOPES, SPEC_LEGACY_ALIASES, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SPRINGS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, TINT_FULL_CHROMA, TINT_IDS, TINT_LEVELS, TINT_OWN_HUE_CHROMA, TINT_TURN_CHROMA, USER_TOKEN_SOURCE, WCAG_AA_TEXT, WCAG_AA_UI, adoptElementStyles, adoptionStyleFor, apcaLc, applyElementStyle, applyHeadingLevelRule, atLightness, atLightnessMaxChroma, auditDesignContrast, barReserveClass, buildFlavorTokens, buildFontFaceCss, buttonBlockHref, catalogFontId, checkFontWeight, choicesForPack, colorSchemeClass, colorSchemeOf, colourTabChecks, compareFontWeights, compileSchemeCss, compileTokenCss, compileTokenCssBlocks, compositeOver, cssString, defaultDesignChoices, defaultElementStyleFor, deriveAccentTokens, deriveBrandTokens, designBaseline, designConfigEntries, designModeOf, designTokenRepairs, designTokenRows, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headingHref, inSrgbGamut, isDesignTokenGroup, isDesignTokenTier, isDesignTokenType, isFontWeightRange, isRetiredFlavorId, legacyDesignTokenRows, legacyFlavorTokens, legacyRuleTokenReferences, matchFontWeight, missingDesignRows, missingFontRoles, nodeDesignClasses, normalizeFontStyle, normalizeFontWeight, normalizeFontWeightValue, oklabToRgb, ownedTraitStatus, ownedTraitsOf, packDesignChoices, paintColours, parseCssColour, parseFontFamilies, parseFontWeight, parseHexColor, planDesignApply, planDesignRevert, planFlavorRevert, planFlavorSeed, planFontFamilyRemoval, planSwissMigration, preTintAccentGrounds, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, resolveDesignChoices, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, writeOwnedTrait };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map