@vectoriox/iox-ui 5.12.1 → 5.13.1

package/index.d.ts

@@ -1399,16 +1399,21 @@ declare const HOVER_STATES: ReadonlyArray<string>;
 declare function hasHoverState(stateStyles: Record<string, Record<string, any> | undefined> | null | undefined): boolean;
 /**
  * The base-rule transition a hovering node gets when it declares none of its own, so a hover
- * animates instead of snapping. Token-driven with today's literal as the fallback (T6), so an
- * unseeded org renders `all 0.2s ease` byte-identically. ONE copy for the builder canvas, the style
- * panel and the engine — it was hand-written in three places.
+ * animates instead of snapping. ONE copy for the builder canvas, the style panel and the engine.
+ *
+ * Two values, chosen by the element-style MARKER (§3b-bis): a node wearing an element style takes
+ * the motion tokens; a node without one (saved before DS2, not adopted) keeps the pre-DS2 literal
+ * byte-for-byte — seeding an org's tokens must never change how a legacy page hovers.
  */
-declare const HOVER_DEFAULT_TRANSITION = "all var(--iox-dur-fast, 0.2s) var(--iox-ease-standard, ease)";
+declare const HOVER_DEFAULT_TRANSITION = "all var(--iox-dur-fast) var(--iox-ease-standard)";
+declare const LEGACY_HOVER_TRANSITION = "all 0.2s ease";
+/** The default hover transition for a node that wears `elementStyle` (or none). */
+declare function defaultHoverTransition(elementStyle?: string | null): string;
 /** True when the RAW style map already yields a transition (an explicit one, or the composed
  *  transitionDuration/TimingFunction an element style writes). */
 declare function hasOwnTransition(styleProps: Record<string, any> | null | undefined): boolean;
 /** `styleProps` plus the default hover transition when the node hovers and sets none itself. */
-declare function withDefaultHoverTransition(styleProps: Record<string, any>, stateStyles: Record<string, Record<string, any> | undefined> | null | undefined): Record<string, any>;
+declare function withDefaultHoverTransition(styleProps: Record<string, any>, stateStyles: Record<string, Record<string, any> | undefined> | null | undefined, elementStyle?: string | null): Record<string, any>;
 /**
  * Per-type default `width` that the builder applies from each component's config
  * (NOT persisted in styleProps — see render-parity.md "saved node is not
@@ -1429,8 +1434,9 @@ declare const DEFAULT_WIDTH_BY_TYPE: Readonly<Record<string, string>>;
  * @param type          Node type (registry key).
  * @param styleProps    The node's persisted styleProps.
  * @param hasHoverState Whether the node has a non-empty hover / parent-hover state.
+ * @param elementStyle  The element style the node wears — picks the default hover transition.
  */
-declare function renderDefaultDeclarations(type: string, styleProps: Record<string, any>, hasHoverState: boolean): string[];
+declare function renderDefaultDeclarations(type: string, styleProps: Record<string, any>, hasHoverState: boolean, elementStyle?: string | null): string[];
 
 /**
  * One composed output property and the virtual traits it is built from.
@@ -1457,6 +1463,19 @@ declare const BACKDROP_TWIN_KEY = "WebkitBackdropFilter";
 declare const VIRTUAL_TRAIT_GROUPS: readonly VirtualTraitGroup[];
 /** Every virtual trait key — derived from the groups so there is one list to maintain. */
 declare const VIRTUAL_TRAIT_KEYS: Set<string>;
+/** True when the whole-value `backdropFilter` trait is SET — it then wins over the composed
+ *  backdrop* controls (`none` / empty is its unset value). The Style panel hides those controls on
+ *  exactly this condition, so what the panel shows live is what the compiler emits. */
+declare function isWholeBackdropSet(value: unknown): boolean;
+/**
+ * The inverse of the backdrop composition: a resolved whole value (`blur(16px) saturate(1.4)`) →
+ * the composed traits, every one of the group present (its default when absent; `140%` → `1.4` for
+ * the factor sliders), so Detach can hand
+ * a token's look back to the part controls. `none` / empty → all defaults. A value using anything
+ * the group cannot express (another function, a `var()`, a percentage-free form it cannot read)
+ * → null: the caller keeps it whole rather than silently dropping part of the look.
+ */
+declare function decomposeBackdropFilter(value: string | null | undefined): Record<string, string> | null;
 /**
  * Strip virtual trait keys from `raw` and emit their composed CSS equivalents.
  *
@@ -2753,5 +2772,5 @@ declare class GalleryLoop {
     private emit;
 }
 
-export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
+export { AOSService, BACKDROP_TWIN_KEY, BACKDROP_WHOLE_KEY, BREAKPOINTS, Breakpoint, BreakpointQueryKind, BuilderButtonComponent, BuilderDividerComponent, BuilderHeadingComponent, BuilderIconComponent, BuilderImageComponent, BuilderLinkComponent, BuilderSpacerComponent, ButtonBlockComponent, CONTAINER_HTML_TAGS, CONTEXT_ACTION_TYPES, CardComponent, ClientGalleryComponent, ClientListComponent, ClientListItemComponent, ClientRepeaterComponent, ClientSliderContainerComponent, ClientSliderSlideComponent, ComponentInstanceRegistryService, ContainerComponent, ContextStore, DEFAULT_GALLERY_SCHEDULER, DEFAULT_PAGE_TRANSITION, DEFAULT_PAGE_TRANSITION_DURATION, DEFAULT_PAGE_TRANSITION_EASING, DEFAULT_PAGE_TRANSITION_PERSPECTIVE, DEFAULT_PHOSPHOR_WEIGHT, DEFAULT_WIDTH_BY_TYPE, DeclarationContext, FormRenderState, FormRuntimeService, GALLERY_EFFECTS, GALLERY_EFFECT_DESCRIPTORS, GalleryLoop, HOVER_DEFAULT_TRANSITION, HOVER_STATES, IOX_BUILDER_EVENTS, IOX_FORM_MESSAGES, IOX_FORM_NAVIGATOR, IOX_FORM_TRANSPORT, IS_PREVIEW, IoxAnimateContainer, IoxAosDirective, IoxAosModule, IoxBuilderComponentsModule, IoxComponentRegistryService, IoxDialogComponent, IoxFieldComponent, IoxFormComponent, IoxFormErrorComponent, IoxFormSuccessComponent, IoxPageComponent, IoxPageModule, IoxSubmitButtonComponent, IoxUiModule, LEGACY_HOVER_TRANSITION, LinkedContainerComponent, PAGE_TRANSITION_CATEGORIES, PAGE_TRANSITION_PRESETS, PART_CLASS_NAMES, PIPE_DESCRIPTORS, PIPE_REGISTRY, PageScrollProvider, RESERVED_ALIAS_PREFIX, STATE_PSEUDO_CLASS, SUPPRESSED_STYLE_PROPS_BY_TYPE, SWIPER_RESPONSIVE_TRAITS, SectionComponent, TRANSITION_FEELS, TextBlockComponent, VALIDATION_STATES, VALIDATION_STATE_CLASS, VIRTUAL_TRAIT_GROUPS, VIRTUAL_TRAIT_KEYS, ViewPositionDirective, ViewPositionModule, activeActions, applyBindingPipes, applyFeel, breakpointDef, breakpointForWidth, breakpointQueryFor, buildDataSourceFilter, buildPartSelector, buildRelatedFilter, buildSwiperBreakpoints, buildTargetedStateSelector, buildTransitionTimeline, cascadeChain, clearInputOverride, clearOverride, collectContextSlotKeys, collectReferencedAliases, compileDeclarations, compilePageStyle, composeVirtualTraits, computeRelative, containerHtmlTag, contextActionEffect, contextSlotKeys, countOverrides, dataSourcePlanToRequest, declaredInputNames, decomposeBackdropFilter, defaultHoverTransition, defaultMessageResolver, deriveSeoFromContent, describeSeoFields, effectiveTransitionId, excludeSelf, feelFor, getByPath, getSeoValue, hasHoverState, hasOwnTransition, initialSlotValues, isActionEnabled, isContextAction, isInputOverriddenAt, isOverriddenAt, isReservedAlias, isValidSlotKey, isWholeBackdropSet, legacyEnterToTransition, matchRouteParams, mediaQueryFor, mergeSwiperBreakpoints, nearestCommonAncestorId, nodeCssId, nodeUsesContext, normalizeCollectionResult, normalizeGalleryImage, normalizeIconClass, parentBreakpoint, parseUrlList, partClassName, planDataSource, planResponsiveRules, referencedDataSources, referencedDataSourcesDeep, renderDefaultDeclarations, resetSeoField, resolveBoundValue, resolveContextValue, resolveDerivedInto, resolveGalleryEffect, resolveGalleryUrls, resolveInputChain, resolveInputs, resolvePageTransition, resolvePath, resolveRelativeInto, resolveRepeaterItems, resolveSeo, resolveSiblings, resolveSingleItemId, resolveStateStyles, resolveStyleProps, resolveValueChain, rewriteViewportUnits, safeSetInput, setInputOverride, setOverride, setSeoAuto, setSeoBinding, setSeoOverride, setSeoValue, stateNamesIn, statePseudoClass, stripSuppressedProps, variableAliases, variableItemsFrom, withContextSlots, withDefaultHoverTransition, wrapInBreakpointQuery, wrapInMediaQuery };
 export type { BoundValueSpec, BreakpointDef, BuildRelatedFilterOptions, ContextActionEffect, ContextActionLike, ContextItemRef, ContextSlotDefault, ContextValueSpec, ContextWriteScope, DataSourceDomain, DataSourceEndpoints, DataSourceMode, DataSourcePlan, DataSourceQueryFilter, DataSourceRequest, DataSourceRequestSpec, DataSourceRouteFilter, DataSourceSpec, FormMessageResolver, GalleryBoundSource, GalleryDurations, GalleryEffect, GalleryEffectDescriptor, GalleryImage, GalleryLoopOptions, GalleryLoopScheduler, GalleryLoopState, GallerySlideState, IBuilderEventEmitter, InputMap, IoxContextSlot, IoxPipe, OverrideBreakpoint, PageStyleSettings, PageTransitionCategory, PageTransitionCategoryMeta, PageTransitionOptions, PageTransitionPreset, PipeArgSpec, PipeContext, PipeDescriptor, RelativeInputs, RelativeSourceKind, RelativeSourceSpec, ResolveSiblingsOptions, ResolvedPageTransition, ResponsiveLayer, ResponsiveOverrides, ResponsiveRuleSet, RouteContext, SeoDerivedContent, SeoFieldSource, SeoFieldState, SeoResolveContext, SetContextParams, SiblingsResult, StateStyleMap, StyleMap, StyleTreeNode, SwiperBreakpointMap, ToggleableAction, TransitionFeel, TransitionPhase, TransitionTimelineInput, ValueSource, VirtualTraitGroup };

package/package.json

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

package/src/design-core/element-styles.ts

@@ -269,3 +269,54 @@ export function switchElementStyle(
     writeEntries(target, to, kept);
     return { applied: true, kept };
 }
+
+/**
+ * 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; 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. This is the ONLY thing a
+ * renderer reads `elementStyle` for.
+ */
+export const ELEMENT_STYLE_MARKER_CLASS = 'iox-es';
+
+const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
+
+/** `iox-es-<id>` for a known style, else null — an unknown id never reaches a class attribute. */
+export function elementStyleClass(id: string | null | undefined): string | null {
+    return elementStyleById(id) ? `${MARKER_PREFIX}${id}` : null;
+}
+
+/** The marker classes a node renders: `'iox-es iox-es-<id>'`, or `''` for a node with no (known) style. */
+export function elementStyleClasses(node: { elementStyle?: string | null } | null | undefined): string {
+    const own = elementStyleClass(node?.elementStyle);
+    return own ? `${ELEMENT_STYLE_MARKER_CLASS} ${own}` : '';
+}
+
+/** Make an element's marker match `elementStyle` — the live switch on the canvas, and the
+ *  component path's one-time stamp. Removes a stale `iox-es-<old>`; touches no other class. */
+export function syncElementStyleMarker(el: { classList: DOMTokenList } | null | undefined, elementStyle: string | null | undefined): void {
+    if (!el?.classList) return;
+    const stale = Array.from(el.classList).filter(c => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX));
+    for (const c of stale) el.classList.remove(c);
+    const classes = elementStyleClasses({ elementStyle });
+    if (classes) el.classList.add(...classes.split(' '));
+}
+
+/**
+ * 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.
+ */
+export function applyHeadingLevelRule(
+    target: ElementStyleTarget,
+    oldLevel: string | null | undefined,
+    newLevel: string | null | undefined,
+    baseline: Readonly<Record<string, unknown>> = {},
+): SwitchElementStyleResult | null {
+    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);
+}

package/src/design-core/flavor-spec.generated.ts

@@ -1607,6 +1607,24 @@ export const SPEC_ELEMENT_STYLES = [
       "borderColor": "var(--iox-dialog-border)"
     }
   },
+  {
+    "id": "form",
+    "label": "Form",
+    "group": "Forms",
+    "appliesTo": [
+      "Form"
+    ],
+    "base": {}
+  },
+  {
+    "id": "field",
+    "label": "Field",
+    "group": "Forms",
+    "appliesTo": [
+      "Field"
+    ],
+    "base": {}
+  },
   {
     "id": "notice-success",
     "label": "Success message",
@@ -1655,6 +1673,8 @@ export const SPEC_DEFAULT_ELEMENT_STYLE = {
   "Divider": "rule",
   "Icon": "icon",
   "Dialog": "dialog",
+  "Form": "form",
+  "Field": "field",
   "FormSuccess": "notice-success",
   "FormError": "notice-error"
 } as const;
@@ -1703,7 +1723,7 @@ export const SPEC_PALETTE_PRESETS = [
 ] as const;
 
 export const SPEC_FIELD_CLASS_BASELINE = {
-  ".iox-field__control": {
+  ".iox-es-field .iox-field__control": {
     "background": "var(--iox-field-bg)",
     "color": "var(--iox-field-ink)",
     "border-width": "var(--iox-field-border-width)",
@@ -1715,26 +1735,26 @@ export const SPEC_FIELD_CLASS_BASELINE = {
     "font-size": "var(--iox-size-body)",
     "transition": "border-color var(--iox-dur-base) var(--iox-ease-standard), box-shadow var(--iox-dur-base) var(--iox-ease-standard)"
   },
-  ".iox-field__control:focus-visible": {
+  ".iox-es-field .iox-field__control:focus-visible": {
     "border-color": "var(--iox-accent)",
     "box-shadow": "var(--iox-field-focus)",
     "outline": "none"
   },
-  ".iox-field__label": {
+  ".iox-es-field .iox-field__label": {
     "font-family": "var(--iox-font-body)",
     "font-size": "var(--iox-field-label-size)",
     "font-weight": "var(--iox-field-label-weight)",
     "color": "var(--iox-text)"
   },
-  ".iox-field__help": {
+  ".iox-es-field .iox-field__help": {
     "font-size": "var(--iox-size-small)",
     "color": "var(--iox-text-muted)"
   },
-  ".iox-field__error": {
+  ".iox-es-field .iox-field__error": {
     "font-size": "var(--iox-size-small)",
     "color": "var(--iox-danger)"
   },
-  ".iox-invalid .iox-field__control": {
+  ".iox-es-field.iox-invalid .iox-field__control": {
     "border-color": "var(--iox-danger)"
   }
 } as const;

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

@@ -19,3 +19,4 @@ export * from './flavor-tokens';
 export * from './flavor-seed';
 export * from './spring';
 export * from './fonts';
+export * from './token-names';

package/src/design-core/token-names.ts

@@ -0,0 +1,32 @@
+import { SPEC_LEGACY_ALIASES, SPEC_TIERS } from './flavor-spec.generated';
+
+/**
+ * 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. */
+export function specTokenNames(): ReadonlySet<string> {
+    return new Set([
+        ...SPEC_TIERS.semantic.map(t => t.name),
+        ...SPEC_TIERS.component.map(t => t.name),
+        ...Object.keys(SPEC_LEGACY_ALIASES),
+    ]);
+}
+
+const REFERENCE = /var\(\s*--iox-([a-z0-9-]+)/gi;
+
+/** Every distinct token a stylesheet READS (`var(--iox-x…)`), in first-seen order. */
+export function tokenReferences(css: string): string[] {
+    return [...new Set(Array.from(css.matchAll(REFERENCE), m => m[1]))];
+}
+
+/** The referenced names that are neither spec tokens nor in `alsoAllowed`. */
+export function unknownTokenReferences(css: string, alsoAllowed: Iterable<string> = []): string[] {
+    const spec = specTokenNames();
+    const extra = new Set(alsoAllowed);
+    return tokenReferences(css).filter(name => !spec.has(name) && !extra.has(name));
+}

package/styles/iox-forms.css

@@ -49,74 +49,25 @@
 .iox-field__error   { margin: 4px 0 0; }
 .iox-submit         { font: inherit; border: none; cursor: pointer; }
 
-/* ── Visual baseline — EXACTLY the spec's `fieldClassBaseline` (design-system plan DS2) ──────────
- * Every value is a token, so a re-theme restyles every form with no page write. Each var() carries
- * today's value as its fallback (trap T6) — `inherit` where the structural rule above inherits, the
- * engine reset's `0` for padding, and `revert` (the UA default, which is what rendered before) for
- * everything nothing declared — so an org whose tokens are not seeded renders as it did.
- * Two spec values are bare keywords and cannot fall back: `border-style: solid` (the UA inset
- * border becomes solid) and the focus ring's `outline: none`, whose box-shadow therefore falls back
- * to a visible system-colour ring rather than to nothing. */
-.iox-field__control {
-  background: var(--iox-field-bg, revert);
-  color: var(--iox-field-ink, inherit);
-  border-width: var(--iox-field-border-width, revert);
-  border-style: solid;
-  border-color: var(--iox-field-border, revert);
-  border-radius: var(--iox-field-radius, revert);
-  padding: var(--iox-field-pad, 0);
-  font-family: var(--iox-font-body, inherit);
-  font-size: var(--iox-size-body, inherit);
-  transition: border-color var(--iox-dur-base, 0s) var(--iox-ease-standard, ease), box-shadow var(--iox-dur-base, 0s) var(--iox-ease-standard, ease);
-}
-.iox-field__control:focus-visible {
-  border-color: var(--iox-accent, revert);
-  box-shadow: var(--iox-field-focus, 0 0 0 2px Highlight);
-  outline: none;
-}
-.iox-field__label {
-  font-family: var(--iox-font-body, inherit);
-  font-size: var(--iox-field-label-size, inherit);
-  font-weight: var(--iox-field-label-weight, inherit);
-  color: var(--iox-text, inherit);
-}
-.iox-field__help {
-  font-size: var(--iox-size-small, inherit);
-  color: var(--iox-text-muted, inherit);
-}
-.iox-field__error {
-  font-size: var(--iox-size-small, inherit);
-  color: var(--iox-danger, inherit);
-}
-.iox-invalid .iox-field__control {
-  border-color: var(--iox-danger, revert);
-}
-/* Native-appearance controls (checkbox, radio, range — and the switch, a checkbox) draw themselves:
-   the box baseline must not frame them. `:where()` keeps this at the baseline's specificity, so the
-   switch rules below still paint the track. */
-.iox-field__control:where([type='checkbox'], [type='radio'], [type='range']) {
-  border: none;
-  padding: 0;
-  background: transparent;
-}
-
 /* Visually hidden, still announced — a label may be hidden, never deleted. */
 .iox-field__label--hidden {
     position: absolute; width: 1px; height: 1px; margin: -1px;
     padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
 }
 
-/* ── switch (control='switch') — a checkbox in switch clothing; brand-aware via tokens ── */
+/* ── switch (control='switch') — a checkbox in switch clothing. A Field saved before element styles
+   keeps exactly this look WHATEVER tokens the org holds (§3b-bis, D5): literals only, because a
+   token read here (the old `--iox-line` / `--iox-brand-500`) changes the moment seeding writes it. ── */
 .iox-field__control--switch {
   appearance: none;
   -webkit-appearance: none;
   width: 38px;
   height: 22px;
   border-radius: 999px;
-  background: var(--iox-line, #d8d4d1);
+  background: #d8d4d1;
   position: relative;
   cursor: pointer;
-  transition: background var(--iox-dur-fast, 150ms) var(--iox-ease-standard, ease-out);
+  transition: background 150ms ease-out;
   flex-shrink: 0;
 }
 .iox-field__control--switch::before {
@@ -127,11 +78,11 @@
   width: 16px;
   height: 16px;
   border-radius: 999px;
-  background: var(--iox-accent-ink, #ffffff);
-  transition: transform var(--iox-dur-fast, 150ms) var(--iox-ease-standard, ease-out);
+  background: #ffffff;
+  transition: transform 150ms ease-out;
 }
 .iox-field__control--switch:checked {
-  background: var(--iox-accent, var(--iox-brand-500, #1f1d1b));
+  background: #1f1d1b;
 }
 .iox-field__control--switch:checked::before {
   transform: translateX(16px);
@@ -143,5 +94,69 @@
 /* ── range (control='range') ── */
 .iox-field__control--range {
   width: 100%;
-  accent-color: var(--iox-accent, var(--iox-brand-500, #1f1d1b));
+  accent-color: #1f1d1b;
+}
+
+/* ══ The system look — ONLY under the element-style marker (design-system §3b-bis) ═══════════════
+ * A Field wearing the `field` element style renders `iox-es iox-es-field`; everything below is
+ * scoped to it, so a Field saved before DS2 renders exactly as above whatever tokens the org holds,
+ * and seeding an org's tokens never restyles a live legacy form.
+ * The first six rules ARE the spec's `fieldClassBaseline`, selectors and values verbatim (pinned by
+ * iox-ui's field-baseline spec). Values are bare spec tokens: a marked Field only exists where the
+ * builder seeded them. */
+.iox-es-field .iox-field__control {
+  background: var(--iox-field-bg);
+  color: var(--iox-field-ink);
+  border-width: var(--iox-field-border-width);
+  border-style: solid;
+  border-color: var(--iox-field-border);
+  border-radius: var(--iox-field-radius);
+  padding: var(--iox-field-pad);
+  font-family: var(--iox-font-body);
+  font-size: var(--iox-size-body);
+  transition: border-color var(--iox-dur-base) var(--iox-ease-standard), box-shadow var(--iox-dur-base) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control:focus-visible {
+  border-color: var(--iox-accent);
+  box-shadow: var(--iox-field-focus);
+  outline: none;
+}
+.iox-es-field .iox-field__label {
+  font-family: var(--iox-font-body);
+  font-size: var(--iox-field-label-size);
+  font-weight: var(--iox-field-label-weight);
+  color: var(--iox-text);
+}
+.iox-es-field .iox-field__help {
+  font-size: var(--iox-size-small);
+  color: var(--iox-text-muted);
+}
+.iox-es-field .iox-field__error {
+  font-size: var(--iox-size-small);
+  color: var(--iox-danger);
+}
+.iox-es-field.iox-invalid .iox-field__control {
+  border-color: var(--iox-danger);
+}
+/* Native-appearance controls (checkbox, radio, range — and the switch, a checkbox) draw themselves:
+   the box baseline must not frame them. `:where()` keeps this at the baseline's specificity, so the
+   switch rules below still paint the track. */
+.iox-es-field .iox-field__control:where([type='checkbox'], [type='radio'], [type='range']) {
+  border: none;
+  padding: 0;
+  background: transparent;
+}
+.iox-es-field .iox-field__control--switch {
+  background: var(--iox-line);
+  transition: background var(--iox-dur-fast) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control--switch::before {
+  background: var(--iox-accent-ink);
+  transition: transform var(--iox-dur-fast) var(--iox-ease-standard);
+}
+.iox-es-field .iox-field__control--switch:checked {
+  background: var(--iox-accent);
+}
+.iox-es-field .iox-field__control--range {
+  accent-color: var(--iox-accent);
 }