@vectoriox/iox-ui 5.31.2 → 5.32.0

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

@@ -902,6 +902,76 @@ const SPEC_TIERS = {
             "type": "keyword",
             "default": "underline"
         },
+        {
+            "name": "link-current-color",
+            "type": "color",
+            "default": "var(--iox-text)"
+        },
+        {
+            "name": "link-current-decoration",
+            "type": "keyword",
+            "default": "underline 2px var(--iox-accent-text)"
+        },
+        {
+            "name": "tabbar-bg",
+            "type": "color",
+            "default": "var(--iox-nav-bg)"
+        },
+        {
+            "name": "tabbar-border",
+            "type": "color",
+            "default": "var(--iox-nav-border)"
+        },
+        {
+            "name": "tabbar-border-width",
+            "type": "size",
+            "default": "var(--iox-border-width) 0px 0px 0px"
+        },
+        {
+            "name": "tabbar-radius",
+            "type": "radius",
+            "default": "0px"
+        },
+        {
+            "name": "tabbar-shadow",
+            "type": "shadow",
+            "default": "none"
+        },
+        {
+            "name": "tabbar-backdrop",
+            "type": "effect",
+            "default": "var(--iox-nav-backdrop)"
+        },
+        {
+            "name": "tabbar-inset",
+            "type": "size",
+            "default": "0px"
+        },
+        {
+            "name": "tabbar-height",
+            "type": "size",
+            "default": "64px"
+        },
+        {
+            "name": "tabbar-item-ink",
+            "type": "color",
+            "default": "var(--iox-text-muted)"
+        },
+        {
+            "name": "tabbar-item-current-ink",
+            "type": "color",
+            "default": "var(--iox-accent-text)"
+        },
+        {
+            "name": "tabbar-indicator",
+            "type": "color",
+            "default": "var(--iox-surface-2)"
+        },
+        {
+            "name": "tabbar-label-size",
+            "type": "size",
+            "default": "var(--iox-size-label)"
+        },
         {
             "name": "heading-color",
             "type": "color",
@@ -1597,6 +1667,11 @@ const SPEC_ELEMENT_STYLES = [
         },
         "hover": {
             "color": "var(--iox-link-hover-color)"
+        },
+        "current": {
+            "color": "var(--iox-link-current-color)",
+            "textDecoration": "var(--iox-link-current-decoration)",
+            "fontWeight": "var(--iox-weight-strong)"
         }
     },
     {
@@ -1709,6 +1784,49 @@ const SPEC_ELEMENT_STYLES = [
             "padding": "var(--iox-nav-pad)"
         }
     },
+    {
+        "id": "bottom-bar",
+        "label": "Bottom bar",
+        "group": "Layout",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "color": "inherit",
+            "backgroundColor": "var(--iox-tabbar-bg)",
+            "borderStyle": "solid",
+            "borderWidth": "var(--iox-tabbar-border-width)",
+            "borderColor": "var(--iox-tabbar-border)",
+            "borderRadius": "var(--iox-tabbar-radius)",
+            "boxShadow": "var(--iox-tabbar-shadow)",
+            "backdropFilter": "var(--iox-tabbar-backdrop)"
+        }
+    },
+    {
+        "id": "bottom-bar-item",
+        "label": "Bottom bar item",
+        "group": "Layout",
+        "appliesTo": [
+            "LinkedContainer",
+            "ButtonBlock"
+        ],
+        "base": {
+            "color": "var(--iox-tabbar-item-ink)",
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-tabbar-label-size)",
+            "fontWeight": "var(--iox-weight-label)",
+            "borderRadius": "var(--iox-radius-md)",
+            "transitionDuration": "var(--iox-dur-fast)",
+            "transitionTimingFunction": "var(--iox-ease-standard)"
+        },
+        "current": {
+            "color": "var(--iox-tabbar-item-current-ink)",
+            "backgroundColor": "var(--iox-tabbar-indicator)"
+        },
+        "focus": {
+            "boxShadow": "var(--iox-focus-ring)"
+        }
+    },
     {
         "id": "media",
         "label": "Image",
@@ -2173,6 +2291,16 @@ const SPEC_INK_SCOPES = [
             "text-muted": "currentColor"
         }
     },
+    {
+        "styles": [
+            "bottom-bar-item"
+        ],
+        "set": {
+            "icon-color": "currentColor",
+            "heading-color": "currentColor",
+            "text-muted": "currentColor"
+        }
+    },
     {
         "styles": [
             "badge-neutral",
@@ -3743,6 +3871,104 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline"
             },
+            {
+                "name": "link-current-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "link-current-decoration",
+                "tier": "component",
+                "type": "keyword",
+                "group": "components",
+                "value": "underline 2px var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-bg)"
+            },
+            {
+                "name": "tabbar-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-border)"
+            },
+            {
+                "name": "tabbar-border-width",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-border-width) 0px 0px 0px"
+            },
+            {
+                "name": "tabbar-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "none"
+            },
+            {
+                "name": "tabbar-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-nav-backdrop)"
+            },
+            {
+                "name": "tabbar-inset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-height",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "64px"
+            },
+            {
+                "name": "tabbar-item-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text-muted)"
+            },
+            {
+                "name": "tabbar-item-current-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-indicator",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "tabbar-label-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
             {
                 "name": "heading-color",
                 "tier": "component",
@@ -5203,6 +5429,104 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline"
             },
+            {
+                "name": "link-current-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "link-current-decoration",
+                "tier": "component",
+                "type": "keyword",
+                "group": "components",
+                "value": "underline 2px var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-bg)"
+            },
+            {
+                "name": "tabbar-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-border)"
+            },
+            {
+                "name": "tabbar-border-width",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-border-width) 0px 0px 0px"
+            },
+            {
+                "name": "tabbar-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "none"
+            },
+            {
+                "name": "tabbar-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-nav-backdrop)"
+            },
+            {
+                "name": "tabbar-inset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-height",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "64px"
+            },
+            {
+                "name": "tabbar-item-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text-muted)"
+            },
+            {
+                "name": "tabbar-item-current-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-indicator",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "tabbar-label-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
             {
                 "name": "heading-color",
                 "tier": "component",
@@ -6657,39 +6981,138 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "underline"
             },
             {
-                "name": "heading-color",
+                "name": "link-current-color",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
                 "value": "var(--iox-text)"
             },
             {
-                "name": "eyebrow-color",
+                "name": "link-current-decoration",
                 "tier": "component",
-                "type": "color",
+                "type": "keyword",
                 "group": "components",
-                "value": "var(--iox-accent-text)"
+                "value": "underline 2px var(--iox-accent-text)"
             },
             {
-                "name": "icon-color",
+                "name": "tabbar-bg",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-accent-text)"
+                "value": "var(--iox-surface)",
+                "overridden": true
             },
             {
-                "name": "divider-color",
+                "name": "tabbar-border",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-line)"
+                "value": "var(--iox-nav-border)"
             },
             {
-                "name": "badge-radius",
+                "name": "tabbar-border-width",
                 "tier": "component",
-                "type": "radius",
+                "type": "size",
                 "group": "components",
-                "value": "var(--iox-radius-pill)"
+                "value": "var(--iox-border-width) 0px 0px 0px"
+            },
+            {
+                "name": "tabbar-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "none"
+            },
+            {
+                "name": "tabbar-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-nav-backdrop)"
+            },
+            {
+                "name": "tabbar-inset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-height",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "64px"
+            },
+            {
+                "name": "tabbar-item-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text-muted)"
+            },
+            {
+                "name": "tabbar-item-current-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-indicator",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "tabbar-label-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
+            {
+                "name": "heading-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "eyebrow-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "icon-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "divider-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
+            {
+                "name": "badge-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "var(--iox-radius-pill)"
             },
             {
                 "name": "badge-pad",
@@ -8139,6 +8562,110 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline"
             },
+            {
+                "name": "link-current-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "link-current-decoration",
+                "tier": "component",
+                "type": "keyword",
+                "group": "components",
+                "value": "underline 2px var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-glass-strong)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-glass-border)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-border-width",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-border-width)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "var(--iox-radius-xl)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-nav-shadow)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-nav-backdrop)"
+            },
+            {
+                "name": "tabbar-inset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "10px",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-height",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "64px"
+            },
+            {
+                "name": "tabbar-item-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text-muted)"
+            },
+            {
+                "name": "tabbar-item-current-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-indicator",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "tabbar-label-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
             {
                 "name": "heading-color",
                 "tier": "component",
@@ -9590,6 +10117,105 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline"
             },
+            {
+                "name": "link-current-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "link-current-decoration",
+                "tier": "component",
+                "type": "keyword",
+                "group": "components",
+                "value": "underline 2px var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-bg)"
+            },
+            {
+                "name": "tabbar-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-border)"
+            },
+            {
+                "name": "tabbar-border-width",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0px",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "none"
+            },
+            {
+                "name": "tabbar-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-nav-backdrop)"
+            },
+            {
+                "name": "tabbar-inset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-height",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "64px"
+            },
+            {
+                "name": "tabbar-item-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text-muted)"
+            },
+            {
+                "name": "tabbar-item-current-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-indicator",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "tabbar-label-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
             {
                 "name": "heading-color",
                 "tier": "component",
@@ -11045,6 +11671,106 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline"
             },
+            {
+                "name": "link-current-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "link-current-decoration",
+                "tier": "component",
+                "type": "keyword",
+                "group": "components",
+                "value": "underline 2px var(--iox-accent-text)"
+            },
+            {
+                "name": "tabbar-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-nav-bg)"
+            },
+            {
+                "name": "tabbar-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line-strong)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-border-width",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-border-width) 0px 0px 0px"
+            },
+            {
+                "name": "tabbar-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "none"
+            },
+            {
+                "name": "tabbar-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-nav-backdrop)"
+            },
+            {
+                "name": "tabbar-inset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0px"
+            },
+            {
+                "name": "tabbar-height",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "64px"
+            },
+            {
+                "name": "tabbar-item-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text-muted)"
+            },
+            {
+                "name": "tabbar-item-current-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)",
+                "overridden": true
+            },
+            {
+                "name": "tabbar-indicator",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "tabbar-label-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
             {
                 "name": "heading-color",
                 "tier": "component",
@@ -11841,8 +12567,10 @@ var 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];
+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;
@@ -11919,7 +12647,7 @@ function ownedEntries(style) {
     }
     return out;
 }
-/** 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. */
 function ownedTraitsOf(style) {
     return ownedEntries(style);
 }
@@ -11948,7 +12676,7 @@ function writeEntries(target, style, skip = []) {
     target.elementStyle = style.id;
     return unknown;
 }
-/** 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. */
 function applyElementStyle(target, id) {
     const style = elementStyleById(id);
     if (!style)
@@ -12302,6 +13030,40 @@ function colorSchemeClass(id) {
 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)
@@ -12316,13 +13078,13 @@ function colorSchemeOf(node) {
 function hasElementStyleMarker(node) {
     return elementStyleClass(node?.elementStyle) !== null;
 }
-/** 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. */
 function nodeDesignClasses(node) {
     const marker = elementStyleClass(node?.elementStyle);
-    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '', roleClass(node?.role) ?? '']
+    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);
+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) {
@@ -13101,7 +13863,11 @@ function auditDesignContrast(rows, mode) {
         null,
         ...styles.filter(e => CONTAINER_GROUPS.has(e.group) && ownStyle(e)['backgroundColor'] && e.id !== SECTION_STYLE),
     ];
-    const content = styles.filter(e => !CONTAINER_GROUPS.has(e.group) && (ownStyle(e)['color'] || ownStyle(e)['backgroundColor'])
+    // An ITEM style — a Layout style that paints ink but no fill of its own (the bottom bar's item, CC1) —
+    // sits ON a container like any content, so it is judged as content (the contract's audit, 1:1).
+    const isItem = (e) => CONTAINER_GROUPS.has(e.group) && !ownStyle(e)['backgroundColor']
+        && !!ownStyle(e)['color'] && ownStyle(e)['color'] !== 'inherit';
+    const content = styles.filter(e => (!CONTAINER_GROUPS.has(e.group) || isItem(e)) && (ownStyle(e)['color'] || ownStyle(e)['backgroundColor'])
         && e.group !== FORMS_GROUP && !NOT_CONTENT.has(e.id) && !SCRIM_STYLES.has(e.id));
     const notices = styles.filter(e => e.group === FORMS_GROUP && ownStyle(e)['color']);
     const section = ownStyle(byId.get(SECTION_STYLE));
@@ -13133,7 +13899,12 @@ function auditDesignContrast(rows, mode) {
             };
             check(box?.id ?? SECTION, 'text', boxInk, bgs, WCAG_AA_TEXT);
             for (const e of content) {
-                const states = [['base', ownStyle(e)], ...(e.hover ? [['hover', { ...ownStyle(e), ...e.hover }]] : [])];
+                // `current` (CC1 N2): the page-you're-on link and bar item, on every ground the state can sit on.
+                const states = [
+                    ['base', ownStyle(e)],
+                    ...(e.hover ? [['hover', { ...ownStyle(e), ...e.hover }]] : []),
+                    ...(e.current ? [['current', { ...ownStyle(e), ...e.current }]] : []),
+                ];
                 const glyph = e.group === GLYPH_GROUP;
                 for (const [state, s] of states) {
                     const fill = s['backgroundColor'] ? paintColours(resolveIn(values, s['backgroundColor']), boxInk) : [];
@@ -14474,5 +15245,5 @@ function planFontFamilyRemoval(existing, previous, family) {
  * Generated bundle index. Do not edit.
  */
 
-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 };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map