@vectoriox/iox-ui 5.31.2 → 5.32.0

package/design-core/index.d.ts

@@ -733,6 +733,62 @@ declare const SPEC_TIERS: {
         readonly name: "link-decoration";
         readonly type: "keyword";
         readonly default: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly type: "color";
+        readonly default: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly type: "keyword";
+        readonly default: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly type: "color";
+        readonly default: "var(--iox-nav-bg)";
+    }, {
+        readonly name: "tabbar-border";
+        readonly type: "color";
+        readonly default: "var(--iox-nav-border)";
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly type: "size";
+        readonly default: "var(--iox-border-width) 0px 0px 0px";
+    }, {
+        readonly name: "tabbar-radius";
+        readonly type: "radius";
+        readonly default: "0px";
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly type: "shadow";
+        readonly default: "none";
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly type: "effect";
+        readonly default: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly type: "size";
+        readonly default: "0px";
+    }, {
+        readonly name: "tabbar-height";
+        readonly type: "size";
+        readonly default: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly type: "color";
+        readonly default: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly type: "color";
+        readonly default: "var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly type: "color";
+        readonly default: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly type: "size";
+        readonly default: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly type: "color";
@@ -1350,6 +1406,11 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
     readonly hover: {
         readonly color: "var(--iox-link-hover-color)";
     };
+    readonly current: {
+        readonly color: "var(--iox-link-current-color)";
+        readonly textDecoration: "var(--iox-link-current-decoration)";
+        readonly fontWeight: "var(--iox-weight-strong)";
+    };
 }, {
     readonly id: "button-label";
     readonly label: "Button label";
@@ -1433,6 +1494,42 @@ declare const SPEC_ELEMENT_STYLES: readonly [{
         readonly backdropFilter: "var(--iox-nav-backdrop)";
         readonly padding: "var(--iox-nav-pad)";
     };
+}, {
+    readonly id: "bottom-bar";
+    readonly label: "Bottom bar";
+    readonly group: "Layout";
+    readonly appliesTo: readonly ["Container"];
+    readonly base: {
+        readonly color: "inherit";
+        readonly backgroundColor: "var(--iox-tabbar-bg)";
+        readonly borderStyle: "solid";
+        readonly borderWidth: "var(--iox-tabbar-border-width)";
+        readonly borderColor: "var(--iox-tabbar-border)";
+        readonly borderRadius: "var(--iox-tabbar-radius)";
+        readonly boxShadow: "var(--iox-tabbar-shadow)";
+        readonly backdropFilter: "var(--iox-tabbar-backdrop)";
+    };
+}, {
+    readonly id: "bottom-bar-item";
+    readonly label: "Bottom bar item";
+    readonly group: "Layout";
+    readonly appliesTo: readonly ["LinkedContainer", "ButtonBlock"];
+    readonly base: {
+        readonly color: "var(--iox-tabbar-item-ink)";
+        readonly fontFamily: "var(--iox-font-label)";
+        readonly fontSize: "var(--iox-tabbar-label-size)";
+        readonly fontWeight: "var(--iox-weight-label)";
+        readonly borderRadius: "var(--iox-radius-md)";
+        readonly transitionDuration: "var(--iox-dur-fast)";
+        readonly transitionTimingFunction: "var(--iox-ease-standard)";
+    };
+    readonly current: {
+        readonly color: "var(--iox-tabbar-item-current-ink)";
+        readonly backgroundColor: "var(--iox-tabbar-indicator)";
+    };
+    readonly focus: {
+        readonly boxShadow: "var(--iox-focus-ring)";
+    };
 }, {
     readonly id: "media";
     readonly label: "Image";
@@ -1844,6 +1941,13 @@ declare const SPEC_INK_SCOPES: readonly [{
         readonly "link-hover-color": "currentColor";
         readonly "text-muted": "currentColor";
     };
+}, {
+    readonly styles: readonly ["bottom-bar-item"];
+    readonly set: {
+        readonly "icon-color": "currentColor";
+        readonly "heading-color": "currentColor";
+        readonly "text-muted": "currentColor";
+    };
 }, {
     readonly styles: readonly ["badge-neutral", "badge-success", "badge-warning", "badge-accent", "chip"];
     readonly set: {
@@ -3158,6 +3262,90 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly tier: "component";
+        readonly type: "keyword";
+        readonly group: "components";
+        readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-bg)";
+    }, {
+        readonly name: "tabbar-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-border)";
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width) 0px 0px 0px";
+    }, {
+        readonly name: "tabbar-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -4402,6 +4590,90 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly tier: "component";
+        readonly type: "keyword";
+        readonly group: "components";
+        readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-bg)";
+    }, {
+        readonly name: "tabbar-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-border)";
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width) 0px 0px 0px";
+    }, {
+        readonly name: "tabbar-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -5637,6 +5909,91 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly tier: "component";
+        readonly type: "keyword";
+        readonly group: "components";
+        readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-border)";
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width) 0px 0px 0px";
+    }, {
+        readonly name: "tabbar-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -6903,6 +7260,96 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly tier: "component";
+        readonly type: "keyword";
+        readonly group: "components";
+        readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-glass-strong)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-glass-border)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "var(--iox-radius-xl)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-shadow)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "10px";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -8139,6 +8586,91 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly tier: "component";
+        readonly type: "keyword";
+        readonly group: "components";
+        readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-bg)";
+    }, {
+        readonly name: "tabbar-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-border)";
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -9383,6 +9915,92 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline";
+    }, {
+        readonly name: "link-current-color";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+    }, {
+        readonly name: "link-current-decoration";
+        readonly tier: "component";
+        readonly type: "keyword";
+        readonly group: "components";
+        readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "tabbar-bg";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-bg)";
+    }, {
+        readonly name: "tabbar-border";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line-strong)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-border-width";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-border-width) 0px 0px 0px";
+    }, {
+        readonly name: "tabbar-radius";
+        readonly tier: "component";
+        readonly type: "radius";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-shadow";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "none";
+    }, {
+        readonly name: "tabbar-backdrop";
+        readonly tier: "component";
+        readonly type: "effect";
+        readonly group: "components";
+        readonly value: "var(--iox-nav-backdrop)";
+    }, {
+        readonly name: "tabbar-inset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0px";
+    }, {
+        readonly name: "tabbar-height";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "64px";
+    }, {
+        readonly name: "tabbar-item-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text-muted)";
+    }, {
+        readonly name: "tabbar-item-current-ink";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-text)";
+        readonly overridden: true;
+    }, {
+        readonly name: "tabbar-indicator";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-surface-2)";
+    }, {
+        readonly name: "tabbar-label-size";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "var(--iox-size-label)";
     }, {
         readonly name: "heading-color";
         readonly tier: "component";
@@ -10064,7 +10682,9 @@ declare const SWISS_FLAVOR: FlavorPack;
 declare enum ElementStyleState {
     Hover = "hover",
     Active = "active",
-    Focus = "focus"
+    Focus = "focus",
+    /** The page you're on (CC1 N2): compiles to `[aria-current="page"]`, never a pseudo-class. */
+    Current = "current"
 }
 declare const ELEMENT_STYLE_STATES: ReadonlyArray<ElementStyleState>;
 interface ElementStyle {
@@ -10076,6 +10696,7 @@ interface ElementStyle {
     readonly hover?: Readonly<Record<string, string>>;
     readonly active?: Readonly<Record<string, string>>;
     readonly focus?: Readonly<Record<string, string>>;
+    readonly current?: Readonly<Record<string, string>>;
 }
 declare const ELEMENT_STYLES: ReadonlyArray<ElementStyle>;
 /** Legacy `Button.variant` → the element style it maps to (adopt, DS7). */
@@ -10135,7 +10756,7 @@ interface SwitchElementStyleResult {
     /** Traits the old style owned whose value the author had changed — kept, never overwritten. */
     kept: OwnedTrait[];
 }
-/** Every trait the style owns with the value it writes — base first, then hover/active/focus. */
+/** Every trait the style owns with the value it writes — base first, then hover/active/focus/current. */
 declare function ownedTraitsOf(style: ElementStyle): Array<OwnedTrait & {
     value: string;
 }>;
@@ -10143,7 +10764,7 @@ declare function ownedTraitsOf(style: ElementStyle): Array<OwnedTrait & {
 declare function readOwnedTrait(target: ElementStyleTarget, owned: OwnedTrait): unknown;
 /** Write one owned trait. False when a builder node has no slot for a base trait (dropped). */
 declare function writeOwnedTrait(target: ElementStyleTarget, owned: OwnedTrait, value: string): boolean;
-/** Write the style's exact base map and its hover/active/focus maps into the target. */
+/** Write the style's exact base map and its hover/active/focus/current maps into the target. */
 declare function applyElementStyle(target: ElementStyleTarget, id: string): ApplyElementStyleResult;
 /**
  * The element style a NEW node of `type` is born wearing (the spec's `defaultElementStyle`), or null
@@ -10334,7 +10955,7 @@ declare const COLOR_SCHEMES: ReadonlyArray<{
 declare function colorSchemeClass(id: unknown): string | null;
 /** `iox-role-<role>` for a well-formed composite role, else null. */
 declare function roleClass(role: unknown): string | null;
-/** The node shapes this module reads: a serialized node (`props`) or a builder node (`traits[]`). */
+/** The node shapes this module reads: a serialized node (`props`, `styleProps`) or a builder node (`traits[]`, `styleTraits`). */
 interface DesignClassSource {
     elementStyle?: string | null;
     role?: string | null;
@@ -10343,14 +10964,37 @@ interface DesignClassSource {
         name?: string;
         default?: unknown;
     }> | null;
+    styleProps?: Readonly<Record<string, unknown>> | null;
+    styleTraits?: ReadonlyArray<{
+        traits?: ReadonlyArray<{
+            name?: string;
+            default?: unknown;
+        }>;
+    }> | null;
+    responsive?: Readonly<Record<string, {
+        styleProps?: Readonly<Record<string, unknown>>;
+    } | undefined>> | null;
 }
+/** The element style whose wearer is the phone's bottom navigation bar (CC1, R1). */
+declare const BOTTOM_BAR_STYLE = "bottom-bar";
+/** The page reserves the bar's height wherever this class is on the page… */
+declare const BAR_RESERVE_CLASS = "iox-bar-reserve";
+/** …the responsive Breakpoint ids that can hold an override, widest first (a spec pins it to BREAKPOINTS). */
+declare const BAR_RESERVE_BREAKPOINTS: ReadonlyArray<string>;
+/**
+ * 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.
+ */
+declare function barReserveClass(node: DesignClassSource | null | undefined): string | null;
 /** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
 declare function colorSchemeOf(node: DesignClassSource | null | undefined): string | null;
 /** True when the node wears a known element style — the marker is on it. */
 declare function hasElementStyleMarker(node: {
     elementStyle?: string | null;
 } | null | undefined): boolean;
-/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
+/** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'` (+ a bottom bar's reserve class), or `''` for none. */
 declare function nodeDesignClasses(node: DesignClassSource | null | undefined): string;
 /** 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. */
@@ -11201,5 +11845,5 @@ interface FontFamilyRemoval {
  */
 declare function planFontFamilyRemoval(existing: ReadonlyArray<StoredDesignTokenRow>, previous: StoredDesign, family: string): FontFamilyRemoval;
 
-export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, 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, 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, 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 type { AccentBackgrounds, AccentGround, AccentTokenName, AdoptContext, AdoptReport, AdoptableNode, AdoptedNode, ApplyElementStyleResult, ButtonBlockLinkProps, ColourCheck, ColourFlavor, ContrastFinding, DensityId, DesignApplyOptions, DesignChoices, DesignClassSource, DesignConfigEntry, DesignMode, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, ElementStyle, ElementStyleTarget, ElementStyleTraitLike, FlavorColours, FlavorPack, FlavorPackV2, FlavorPalette, FlavorRevertPlan, FlavorRevertSnapshot, FlavorRevertWrite, FlavorSeedOptions, FlavorSeedPlan, FlavorSpecToken, FlavorTintConfig, FlavorTokenDef, FontDescriptor, FontFamilyGroup, FontFamilyRemoval, FontFamilyToken, FontFormat, FontPair, FontRoleToken, FontStyle, FontWeight, FontWeightRange, FontsForTokensOptions, KeptEdit, LinearSpring, MissingFontRole, MotionId, NodeLinkProps, OkLab, OwnedTrait, OwnedTraitStatus, PalettePreset, ResolvedMode, Rgb, Rgba, SchemeId, SeedBaseline, SeedExpectation, ShapeId, SkippedNode, StoredDesign, StoredDesignTokenRow, SupersededStyleValue, SwissMigration, SwitchElementStyleResult, TintId, TintLevel, TokenCssBlocks, TokenCssOptions };