@vectoriox/iox-ui 5.29.1 → 5.31.0

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

@@ -184,6 +184,18 @@ const SPEC_TIERS = {
             "group": "colour",
             "desc": "Error fill"
         },
+        {
+            "name": "warning",
+            "type": "color",
+            "group": "colour",
+            "desc": "Warning text (Card v2 badge tone) — AA on warning-bg"
+        },
+        {
+            "name": "warning-bg",
+            "type": "color",
+            "group": "colour",
+            "desc": "Warning fill"
+        },
         {
             "name": "scrim",
             "type": "color",
@@ -909,6 +921,76 @@ const SPEC_TIERS = {
             "name": "divider-color",
             "type": "color",
             "default": "var(--iox-line)"
+        },
+        {
+            "name": "badge-radius",
+            "type": "radius",
+            "default": "var(--iox-radius-pill)"
+        },
+        {
+            "name": "badge-pad",
+            "type": "spacing",
+            "default": "3px 10px"
+        },
+        {
+            "name": "badge-size",
+            "type": "size",
+            "default": "var(--iox-size-label)"
+        },
+        {
+            "name": "badge-neutral-bg",
+            "type": "color",
+            "default": "var(--iox-surface-2)"
+        },
+        {
+            "name": "badge-neutral-ink",
+            "type": "color",
+            "default": "var(--iox-text)"
+        },
+        {
+            "name": "badge-success-bg",
+            "type": "color",
+            "default": "var(--iox-success-bg)"
+        },
+        {
+            "name": "badge-success-ink",
+            "type": "color",
+            "default": "var(--iox-success)"
+        },
+        {
+            "name": "badge-warning-bg",
+            "type": "color",
+            "default": "var(--iox-warning-bg)"
+        },
+        {
+            "name": "badge-warning-ink",
+            "type": "color",
+            "default": "var(--iox-warning)"
+        },
+        {
+            "name": "badge-accent-bg",
+            "type": "color",
+            "default": "var(--iox-accent)"
+        },
+        {
+            "name": "badge-accent-ink",
+            "type": "color",
+            "default": "var(--iox-accent-ink)"
+        },
+        {
+            "name": "chip-border",
+            "type": "color",
+            "default": "var(--iox-line-strong)"
+        },
+        {
+            "name": "media-scrim",
+            "type": "color",
+            "default": "rgba(0, 0, 0, 0.62)"
+        },
+        {
+            "name": "media-scrim-ink",
+            "type": "color",
+            "default": "#FFFFFF"
         }
     ]
 };
@@ -1179,7 +1261,9 @@ const SPEC_SCHEMES = {
             "danger": "{{~danger}}",
             "danger-bg": "{{~danger-bg}}",
             "success": "{{~success}}",
-            "success-bg": "{{~success-bg}}"
+            "success-bg": "{{~success-bg}}",
+            "warning": "{{~warning}}",
+            "warning-bg": "{{~warning-bg}}"
         }
     },
     "accent": {
@@ -1203,7 +1287,9 @@ const SPEC_SCHEMES = {
             "danger": "{{accent-ink}}",
             "danger-bg": "{{accent-hover}}",
             "success": "{{accent-ink}}",
-            "success-bg": "{{accent-hover}}"
+            "success-bg": "{{accent-hover}}",
+            "warning": "{{accent-ink}}",
+            "warning-bg": "{{accent-hover}}"
         }
     }
 };
@@ -1703,6 +1789,114 @@ const SPEC_ELEMENT_STYLES = [
         ],
         "base": {}
     },
+    {
+        "id": "badge-neutral",
+        "label": "Badge · Neutral",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "backgroundColor": "var(--iox-badge-neutral-bg)",
+            "color": "var(--iox-badge-neutral-ink)",
+            "borderRadius": "var(--iox-badge-radius)",
+            "padding": "var(--iox-badge-pad)",
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-badge-size)",
+            "fontWeight": "var(--iox-weight-label)",
+            "letterSpacing": "var(--iox-tracking-label)",
+            "textTransform": "var(--iox-case-label)"
+        }
+    },
+    {
+        "id": "badge-success",
+        "label": "Badge · Success",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "backgroundColor": "var(--iox-badge-success-bg)",
+            "color": "var(--iox-badge-success-ink)",
+            "borderRadius": "var(--iox-badge-radius)",
+            "padding": "var(--iox-badge-pad)",
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-badge-size)",
+            "fontWeight": "var(--iox-weight-label)",
+            "letterSpacing": "var(--iox-tracking-label)",
+            "textTransform": "var(--iox-case-label)"
+        }
+    },
+    {
+        "id": "badge-warning",
+        "label": "Badge · Warning",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "backgroundColor": "var(--iox-badge-warning-bg)",
+            "color": "var(--iox-badge-warning-ink)",
+            "borderRadius": "var(--iox-badge-radius)",
+            "padding": "var(--iox-badge-pad)",
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-badge-size)",
+            "fontWeight": "var(--iox-weight-label)",
+            "letterSpacing": "var(--iox-tracking-label)",
+            "textTransform": "var(--iox-case-label)"
+        }
+    },
+    {
+        "id": "badge-accent",
+        "label": "Badge · Accent",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "backgroundColor": "var(--iox-badge-accent-bg)",
+            "color": "var(--iox-badge-accent-ink)",
+            "borderRadius": "var(--iox-badge-radius)",
+            "padding": "var(--iox-badge-pad)",
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-badge-size)",
+            "fontWeight": "var(--iox-weight-label)",
+            "letterSpacing": "var(--iox-tracking-label)",
+            "textTransform": "var(--iox-case-label)"
+        }
+    },
+    {
+        "id": "chip",
+        "label": "Chip",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "backgroundColor": "transparent",
+            "color": "var(--iox-text)",
+            "borderStyle": "solid",
+            "borderWidth": "var(--iox-border-width)",
+            "borderColor": "var(--iox-chip-border)",
+            "borderRadius": "var(--iox-badge-radius)",
+            "padding": "var(--iox-badge-pad)",
+            "fontFamily": "var(--iox-font-label)",
+            "fontSize": "var(--iox-badge-size)",
+            "fontWeight": "var(--iox-weight-label)"
+        }
+    },
+    {
+        "id": "media-scrim",
+        "label": "Text over image",
+        "group": "Content blocks",
+        "appliesTo": [
+            "Container"
+        ],
+        "base": {
+            "backgroundColor": "linear-gradient(180deg, transparent 0%, var(--iox-media-scrim) 45%)",
+            "color": "var(--iox-media-scrim-ink)"
+        }
+    },
     {
         "id": "notice-success",
         "label": "Success message",
@@ -1764,16 +1958,6 @@ const SPEC_BUTTON_VARIANT_TO_STYLE = {
     "text": "button-ghost"
 };
 const SPEC_PALETTE_PRESETS = [
-    {
-        "label": "Card",
-        "type": "Container",
-        "elementStyle": "card",
-        "styleProps": {
-            "display": "flex",
-            "flexDirection": "column",
-            "gap": "var(--iox-space-gap)"
-        }
-    },
     {
         "label": "Panel",
         "type": "Container",
@@ -1988,6 +2172,33 @@ const SPEC_INK_SCOPES = [
             "link-hover-color": "currentColor",
             "text-muted": "currentColor"
         }
+    },
+    {
+        "styles": [
+            "badge-neutral",
+            "badge-success",
+            "badge-warning",
+            "badge-accent",
+            "chip"
+        ],
+        "set": {
+            "icon-color": "currentColor"
+        }
+    },
+    {
+        "styles": [
+            "media-scrim"
+        ],
+        "children": true,
+        "set": {
+            "heading-color": "currentColor",
+            "eyebrow-color": "currentColor",
+            "text-muted": "currentColor",
+            "link-color": "currentColor",
+            "link-hover-color": "currentColor",
+            "icon-color": "currentColor",
+            "button-ghost-ink": "currentColor"
+        }
     }
 ];
 const SPEC_CONTRAST_AUDIT = {
@@ -2052,6 +2263,11 @@ const SPEC_CONTRAST_AUDIT = {
             "bg": "danger-bg",
             "min": 4.5
         },
+        {
+            "fg": "warning",
+            "bg": "warning-bg",
+            "min": 4.5
+        },
         {
             "fg": "accent-ink",
             "bg": "accent-hover",
@@ -2198,6 +2414,14 @@ const SPEC_CONTRAST_AUDIT = {
             "fg": "var(--iox-line-strong)",
             "min": 3
         }
+    ],
+    "scrims": [
+        {
+            "style": "media-scrim",
+            "token": "media-scrim",
+            "scheme": "inverse",
+            "image": "#FFFFFF"
+        }
     ]
 };
 const SPEC_LEGACY_ALIASES = {
@@ -2319,6 +2543,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#E7F4EC",
                 "danger": "#B3261E",
                 "danger-bg": "#FBE9E7",
+                "warning": "#7A4A00",
+                "warning-bg": "#FBF0D9",
                 "scrim": "rgba(15, 17, 21, 0.45)"
             },
             "dark": {
@@ -2344,6 +2570,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#13291C",
                 "danger": "#FF8A80",
                 "danger-bg": "#3A1715",
+                "warning": "#F2C46D",
+                "warning-bg": "#2E2210",
                 "scrim": "rgba(0, 0, 0, 0.6)"
             }
         },
@@ -2585,6 +2813,22 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "#FBE9E7",
                 "dark": "#3A1715"
             },
+            {
+                "name": "warning",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#7A4A00",
+                "dark": "#F2C46D"
+            },
+            {
+                "name": "warning-bg",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#FBF0D9",
+                "dark": "#2E2210"
+            },
             {
                 "name": "scrim",
                 "tier": "semantic",
@@ -3526,6 +3770,104 @@ const SPEC_FLAVOR_PACKS = [
                 "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",
+                "tier": "component",
+                "type": "spacing",
+                "group": "components",
+                "value": "3px 10px"
+            },
+            {
+                "name": "badge-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
+            {
+                "name": "badge-neutral-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "badge-neutral-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "badge-success-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success-bg)"
+            },
+            {
+                "name": "badge-success-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success)"
+            },
+            {
+                "name": "badge-warning-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning-bg)"
+            },
+            {
+                "name": "badge-warning-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning)"
+            },
+            {
+                "name": "badge-accent-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent)"
+            },
+            {
+                "name": "badge-accent-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-ink)"
+            },
+            {
+                "name": "chip-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line-strong)"
+            },
+            {
+                "name": "media-scrim",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "rgba(0, 0, 0, 0.62)"
+            },
+            {
+                "name": "media-scrim-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "#FFFFFF"
             }
         ]
     },
@@ -3642,6 +3984,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#E9EEDF",
                 "danger": "#9A3324",
                 "danger-bg": "#F5E3DC",
+                "warning": "#7A4A00",
+                "warning-bg": "#FBF0D9",
                 "scrim": "rgba(31, 27, 22, 0.5)"
             },
             "dark": {
@@ -3667,6 +4011,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#1E2619",
                 "danger": "#E8A08F",
                 "danger-bg": "#2E1A15",
+                "warning": "#F2C46D",
+                "warning-bg": "#2E2210",
                 "scrim": "rgba(0, 0, 0, 0.6)"
             }
         },
@@ -3908,6 +4254,22 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "#F5E3DC",
                 "dark": "#2E1A15"
             },
+            {
+                "name": "warning",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#7A4A00",
+                "dark": "#F2C46D"
+            },
+            {
+                "name": "warning-bg",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#FBF0D9",
+                "dark": "#2E2210"
+            },
             {
                 "name": "scrim",
                 "tier": "semantic",
@@ -4869,20 +5231,118 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "color",
                 "group": "components",
                 "value": "var(--iox-line)"
-            }
-        ]
-    },
-    {
-        "id": "midnight",
-        "name": "Midnight",
-        "personality": "Bold",
-        "inspiredBy": "Dark product sites — Linear, Vercel, Raycast",
-        "blurb": "Dark, sharp, glowing.",
-        "popularFor": [
-            "SaaS & AI tools",
-            "Fintech",
-            "Gaming",
-            "Events & nightlife"
+            },
+            {
+                "name": "badge-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "var(--iox-radius-pill)"
+            },
+            {
+                "name": "badge-pad",
+                "tier": "component",
+                "type": "spacing",
+                "group": "components",
+                "value": "3px 10px"
+            },
+            {
+                "name": "badge-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
+            {
+                "name": "badge-neutral-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "badge-neutral-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "badge-success-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success-bg)"
+            },
+            {
+                "name": "badge-success-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success)"
+            },
+            {
+                "name": "badge-warning-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning-bg)"
+            },
+            {
+                "name": "badge-warning-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning)"
+            },
+            {
+                "name": "badge-accent-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent)"
+            },
+            {
+                "name": "badge-accent-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-ink)"
+            },
+            {
+                "name": "chip-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line-strong)"
+            },
+            {
+                "name": "media-scrim",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "rgba(0, 0, 0, 0.62)"
+            },
+            {
+                "name": "media-scrim-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "#FFFFFF"
+            }
+        ]
+    },
+    {
+        "id": "midnight",
+        "name": "Midnight",
+        "personality": "Bold",
+        "inspiredBy": "Dark product sites — Linear, Vercel, Raycast",
+        "blurb": "Dark, sharp, glowing.",
+        "popularFor": [
+            "SaaS & AI tools",
+            "Fintech",
+            "Gaming",
+            "Events & nightlife"
         ],
         "defaults": {
             "shape": "soft",
@@ -4987,6 +5447,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#E7F4EC",
                 "danger": "#B3261E",
                 "danger-bg": "#FBE9E7",
+                "warning": "#7A4A00",
+                "warning-bg": "#FBF0D9",
                 "scrim": "rgba(8, 9, 10, 0.55)"
             },
             "dark": {
@@ -5012,6 +5474,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#0F2418",
                 "danger": "#FF7B72",
                 "danger-bg": "#2D1213",
+                "warning": "#F2C46D",
+                "warning-bg": "#2E2210",
                 "scrim": "rgba(0, 0, 0, 0.7)"
             }
         },
@@ -5253,6 +5717,22 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "#FBE9E7",
                 "dark": "#2D1213"
             },
+            {
+                "name": "warning",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#7A4A00",
+                "dark": "#F2C46D"
+            },
+            {
+                "name": "warning-bg",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#FBF0D9",
+                "dark": "#2E2210"
+            },
             {
                 "name": "scrim",
                 "tier": "semantic",
@@ -6203,6 +6683,104 @@ const SPEC_FLAVOR_PACKS = [
                 "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",
+                "tier": "component",
+                "type": "spacing",
+                "group": "components",
+                "value": "3px 10px"
+            },
+            {
+                "name": "badge-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
+            {
+                "name": "badge-neutral-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "badge-neutral-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "badge-success-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success-bg)"
+            },
+            {
+                "name": "badge-success-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success)"
+            },
+            {
+                "name": "badge-warning-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning-bg)"
+            },
+            {
+                "name": "badge-warning-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning)"
+            },
+            {
+                "name": "badge-accent-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent)"
+            },
+            {
+                "name": "badge-accent-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-ink)"
+            },
+            {
+                "name": "chip-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line-strong)"
+            },
+            {
+                "name": "media-scrim",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "rgba(0, 0, 0, 0.62)"
+            },
+            {
+                "name": "media-scrim-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "#FFFFFF"
             }
         ]
     },
@@ -6318,6 +6896,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#E3F5EA",
                 "danger": "#B3261E",
                 "danger-bg": "#FCE8E6",
+                "warning": "#7A4A00",
+                "warning-bg": "#FBF0D9",
                 "scrim": "rgba(15, 23, 42, 0.30)"
             },
             "dark": {
@@ -6347,6 +6927,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#12291C",
                 "danger": "#FF8A80",
                 "danger-bg": "#3A1715",
+                "warning": "#F2C46D",
+                "warning-bg": "#2E2210",
                 "scrim": "rgba(0, 0, 0, 0.5)"
             }
         },
@@ -6599,6 +7181,22 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "#FCE8E6",
                 "dark": "#3A1715"
             },
+            {
+                "name": "warning",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#7A4A00",
+                "dark": "#F2C46D"
+            },
+            {
+                "name": "warning-bg",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#FBF0D9",
+                "dark": "#2E2210"
+            },
             {
                 "name": "scrim",
                 "tier": "semantic",
@@ -7446,128 +8044,226 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "var(--iox-size-small)"
             },
             {
-                "name": "field-label-weight",
+                "name": "field-label-weight",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "var(--iox-weight-strong)"
+            },
+            {
+                "name": "dialog-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-glass-strong)",
+                "overridden": true
+            },
+            {
+                "name": "dialog-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "var(--iox-radius-xl)"
+            },
+            {
+                "name": "dialog-shadow",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-shadow-lg), var(--iox-glass-edge)",
+                "overridden": true
+            },
+            {
+                "name": "dialog-backdrop",
+                "tier": "component",
+                "type": "effect",
+                "group": "components",
+                "value": "var(--iox-blur-surface)",
+                "overridden": true
+            },
+            {
+                "name": "dialog-pad",
+                "tier": "component",
+                "type": "spacing",
+                "group": "components",
+                "value": "var(--iox-space-pad)"
+            },
+            {
+                "name": "dialog-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-glass-border)",
+                "overridden": true
+            },
+            {
+                "name": "dialog-border-width",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-border-width)",
+                "overridden": true
+            },
+            {
+                "name": "image-radius",
+                "tier": "component",
+                "type": "radius",
+                "group": "components",
+                "value": "var(--iox-radius-md)"
+            },
+            {
+                "name": "image-hover-scale",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-hover-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "link-decoration",
+                "tier": "component",
+                "type": "keyword",
+                "group": "components",
+                "value": "underline"
+            },
+            {
+                "name": "heading-color",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "eyebrow-color",
                 "tier": "component",
-                "type": "number",
+                "type": "color",
                 "group": "components",
-                "value": "var(--iox-weight-strong)"
+                "value": "var(--iox-accent-text)"
             },
             {
-                "name": "dialog-bg",
+                "name": "icon-color",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-surface-glass-strong)",
-                "overridden": true
+                "value": "var(--iox-accent-text)"
             },
             {
-                "name": "dialog-radius",
+                "name": "divider-color",
                 "tier": "component",
-                "type": "radius",
+                "type": "color",
                 "group": "components",
-                "value": "var(--iox-radius-xl)"
+                "value": "var(--iox-line)"
             },
             {
-                "name": "dialog-shadow",
+                "name": "badge-radius",
                 "tier": "component",
-                "type": "shadow",
+                "type": "radius",
                 "group": "components",
-                "value": "var(--iox-shadow-lg), var(--iox-glass-edge)",
-                "overridden": true
+                "value": "var(--iox-radius-pill)"
             },
             {
-                "name": "dialog-backdrop",
+                "name": "badge-pad",
                 "tier": "component",
-                "type": "effect",
+                "type": "spacing",
                 "group": "components",
-                "value": "var(--iox-blur-surface)",
-                "overridden": true
+                "value": "3px 10px"
             },
             {
-                "name": "dialog-pad",
+                "name": "badge-size",
                 "tier": "component",
-                "type": "spacing",
+                "type": "size",
                 "group": "components",
-                "value": "var(--iox-space-pad)"
+                "value": "var(--iox-size-label)"
             },
             {
-                "name": "dialog-border",
+                "name": "badge-neutral-bg",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-glass-border)",
-                "overridden": true
+                "value": "var(--iox-surface-2)"
             },
             {
-                "name": "dialog-border-width",
+                "name": "badge-neutral-ink",
                 "tier": "component",
-                "type": "size",
+                "type": "color",
                 "group": "components",
-                "value": "var(--iox-border-width)",
-                "overridden": true
+                "value": "var(--iox-text)"
             },
             {
-                "name": "image-radius",
+                "name": "badge-success-bg",
                 "tier": "component",
-                "type": "radius",
+                "type": "color",
                 "group": "components",
-                "value": "var(--iox-radius-md)"
+                "value": "var(--iox-success-bg)"
             },
             {
-                "name": "image-hover-scale",
+                "name": "badge-success-ink",
                 "tier": "component",
-                "type": "number",
+                "type": "color",
                 "group": "components",
-                "value": "1"
+                "value": "var(--iox-success)"
             },
             {
-                "name": "link-color",
+                "name": "badge-warning-bg",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-accent-text)"
+                "value": "var(--iox-warning-bg)"
             },
             {
-                "name": "link-hover-color",
+                "name": "badge-warning-ink",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-text)"
+                "value": "var(--iox-warning)"
             },
             {
-                "name": "link-decoration",
+                "name": "badge-accent-bg",
                 "tier": "component",
-                "type": "keyword",
+                "type": "color",
                 "group": "components",
-                "value": "underline"
+                "value": "var(--iox-accent)"
             },
             {
-                "name": "heading-color",
+                "name": "badge-accent-ink",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-text)"
+                "value": "var(--iox-accent-ink)"
             },
             {
-                "name": "eyebrow-color",
+                "name": "chip-border",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-accent-text)"
+                "value": "var(--iox-line-strong)"
             },
             {
-                "name": "icon-color",
+                "name": "media-scrim",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-accent-text)"
+                "value": "rgba(0, 0, 0, 0.62)"
             },
             {
-                "name": "divider-color",
+                "name": "media-scrim-ink",
                 "tier": "component",
                 "type": "color",
                 "group": "components",
-                "value": "var(--iox-line)"
+                "value": "#FFFFFF"
             }
         ]
     },
@@ -7683,6 +8379,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#DDF3E3",
                 "danger": "#B3261E",
                 "danger-bg": "#F9DEDC",
+                "warning": "#7A4A00",
+                "warning-bg": "#FBF0D9",
                 "scrim": "rgba(29, 27, 32, 0.4)"
             },
             "dark": {
@@ -7708,6 +8406,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#123620",
                 "danger": "#F2B8B5",
                 "danger-bg": "#601410",
+                "warning": "#F2C46D",
+                "warning-bg": "#2E2210",
                 "scrim": "rgba(0, 0, 0, 0.55)"
             }
         },
@@ -7948,6 +8648,22 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "#F9DEDC",
                 "dark": "#601410"
             },
+            {
+                "name": "warning",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#7A4A00",
+                "dark": "#F2C46D"
+            },
+            {
+                "name": "warning-bg",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#FBF0D9",
+                "dark": "#2E2210"
+            },
             {
                 "name": "scrim",
                 "tier": "semantic",
@@ -8901,6 +9617,104 @@ const SPEC_FLAVOR_PACKS = [
                 "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",
+                "tier": "component",
+                "type": "spacing",
+                "group": "components",
+                "value": "3px 10px"
+            },
+            {
+                "name": "badge-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
+            {
+                "name": "badge-neutral-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "badge-neutral-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "badge-success-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success-bg)"
+            },
+            {
+                "name": "badge-success-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success)"
+            },
+            {
+                "name": "badge-warning-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning-bg)"
+            },
+            {
+                "name": "badge-warning-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning)"
+            },
+            {
+                "name": "badge-accent-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent)"
+            },
+            {
+                "name": "badge-accent-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-ink)"
+            },
+            {
+                "name": "chip-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line-strong)"
+            },
+            {
+                "name": "media-scrim",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "rgba(0, 0, 0, 0.62)"
+            },
+            {
+                "name": "media-scrim-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "#FFFFFF"
             }
         ]
     },
@@ -9020,6 +9834,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#C9F2D9",
                 "danger": "#B3261E",
                 "danger-bg": "#FFD9D2",
+                "warning": "#7A4A00",
+                "warning-bg": "#FBF0D9",
                 "scrim": "rgba(10, 10, 10, 0.5)"
             },
             "dark": {
@@ -9044,6 +9860,8 @@ const SPEC_FLAVOR_PACKS = [
                 "success-bg": "#0F2A1A",
                 "danger": "#FF8A80",
                 "danger-bg": "#3A1715",
+                "warning": "#F2C46D",
+                "warning-bg": "#2E2210",
                 "scrim": "rgba(0, 0, 0, 0.6)"
             }
         },
@@ -9273,6 +10091,22 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "#FFD9D2",
                 "dark": "#3A1715"
             },
+            {
+                "name": "warning",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#7A4A00",
+                "dark": "#F2C46D"
+            },
+            {
+                "name": "warning-bg",
+                "tier": "semantic",
+                "type": "color",
+                "group": "colour",
+                "value": "#FBF0D9",
+                "dark": "#2E2210"
+            },
             {
                 "name": "scrim",
                 "tier": "semantic",
@@ -10239,6 +11073,104 @@ const SPEC_FLAVOR_PACKS = [
                 "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",
+                "tier": "component",
+                "type": "spacing",
+                "group": "components",
+                "value": "3px 10px"
+            },
+            {
+                "name": "badge-size",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "var(--iox-size-label)"
+            },
+            {
+                "name": "badge-neutral-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-surface-2)"
+            },
+            {
+                "name": "badge-neutral-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-text)"
+            },
+            {
+                "name": "badge-success-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success-bg)"
+            },
+            {
+                "name": "badge-success-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-success)"
+            },
+            {
+                "name": "badge-warning-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning-bg)"
+            },
+            {
+                "name": "badge-warning-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-warning)"
+            },
+            {
+                "name": "badge-accent-bg",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent)"
+            },
+            {
+                "name": "badge-accent-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-ink)"
+            },
+            {
+                "name": "chip-border",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line-strong)"
+            },
+            {
+                "name": "media-scrim",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "rgba(0, 0, 0, 0.62)"
+            },
+            {
+                "name": "media-scrim-ink",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "#FFFFFF"
             }
         ]
     }
@@ -10257,6 +11189,7 @@ const SPEC_CONTRAST = {
         "light:inverse-accent/inverse-bg": 8.34,
         "light:success/success-bg": 5.77,
         "light:danger/danger-bg": 5.58,
+        "light:warning/warning-bg": 6.61,
         "light:accent-ink/accent-hover": 7.43,
         "light:text-muted/surface-2": 5.79,
         "light:text/surface-2": 17.6,
@@ -10280,6 +11213,7 @@ const SPEC_CONTRAST = {
         "dark:inverse-accent/inverse-bg": 5.14,
         "dark:success/success-bg": 8,
         "dark:danger/danger-bg": 7,
+        "dark:warning/warning-bg": 9.53,
         "dark:accent-ink/accent-hover": 9.37,
         "dark:text-muted/surface-2": 6.28,
         "dark:text/surface-2": 14.84,
@@ -10305,6 +11239,7 @@ const SPEC_CONTRAST = {
         "light:inverse-accent/inverse-bg": 7.61,
         "light:success/success-bg": 5.26,
         "light:danger/danger-bg": 5.88,
+        "light:warning/warning-bg": 6.61,
         "light:accent-ink/accent-hover": 8.41,
         "light:text-muted/surface-2": 5.33,
         "light:text/surface-2": 14.21,
@@ -10328,6 +11263,7 @@ const SPEC_CONTRAST = {
         "dark:inverse-accent/inverse-bg": 5.15,
         "dark:success/success-bg": 8.41,
         "dark:danger/danger-bg": 7.73,
+        "dark:warning/warning-bg": 9.53,
         "dark:accent-ink/accent-hover": 10.41,
         "dark:text-muted/surface-2": 6.74,
         "dark:text/surface-2": 14.32,
@@ -10353,6 +11289,7 @@ const SPEC_CONTRAST = {
         "light:inverse-accent/inverse-bg": 8.32,
         "light:success/success-bg": 5.77,
         "light:danger/danger-bg": 5.58,
+        "light:warning/warning-bg": 6.61,
         "light:accent-ink/accent-hover": 7.31,
         "light:text-muted/surface-2": 5.5,
         "light:text/surface-2": 17.79,
@@ -10376,6 +11313,7 @@ const SPEC_CONTRAST = {
         "dark:inverse-accent/inverse-bg": 5.46,
         "dark:success/success-bg": 9.37,
         "dark:danger/danger-bg": 6.9,
+        "dark:warning/warning-bg": 9.53,
         "dark:accent-ink/accent-hover": 5.83,
         "dark:text-muted/surface-2": 5.79,
         "dark:text/surface-2": 16.53,
@@ -10398,6 +11336,7 @@ const SPEC_CONTRAST = {
         "light:inverse-accent/inverse-bg": 6.88,
         "light:success/success-bg": 5.76,
         "light:danger/danger-bg": 5.55,
+        "light:warning/warning-bg": 6.61,
         "light:accent-ink/accent-hover": 6.76,
         "light:text-muted/surface-2": 6.51,
         "light:text/surface-2": 18.2,
@@ -10418,6 +11357,7 @@ const SPEC_CONTRAST = {
         "dark:inverse-accent/inverse-bg": 4.79,
         "dark:success/success-bg": 8.02,
         "dark:danger/danger-bg": 7,
+        "dark:warning/warning-bg": 9.53,
         "dark:accent-ink/accent-hover": 8.44,
         "dark:text-muted/surface-2": 6.54,
         "dark:text/surface-2": 14.41,
@@ -10440,6 +11380,7 @@ const SPEC_CONTRAST = {
         "light:inverse-accent/inverse-bg": 7.74,
         "light:success/success-bg": 5.59,
         "light:danger/danger-bg": 5.14,
+        "light:warning/warning-bg": 6.61,
         "light:accent-ink/accent-hover": 7.86,
         "light:text-muted/surface-2": 8.15,
         "light:text/surface-2": 14.84,
@@ -10463,6 +11404,7 @@ const SPEC_CONTRAST = {
         "dark:inverse-accent/inverse-bg": 4.97,
         "dark:success/success-bg": 8.02,
         "dark:danger/danger-bg": 7.66,
+        "dark:warning/warning-bg": 9.53,
         "dark:accent-ink/accent-hover": 8.79,
         "dark:text-muted/surface-2": 8.43,
         "dark:text/surface-2": 11.1,
@@ -10488,6 +11430,7 @@ const SPEC_CONTRAST = {
         "light:inverse-accent/inverse-bg": 13.71,
         "light:success/success-bg": 5.41,
         "light:danger/danger-bg": 5.01,
+        "light:warning/warning-bg": 6.61,
         "light:accent-ink/accent-hover": 7.72,
         "light:text-muted/surface-2": 7.52,
         "light:text/surface-2": 13.71,
@@ -10511,6 +11454,7 @@ const SPEC_CONTRAST = {
         "dark:inverse-accent/inverse-bg": 5.59,
         "dark:success/success-bg": 7.98,
         "dark:danger/danger-bg": 7,
+        "dark:warning/warning-bg": 9.53,
         "dark:accent-ink/accent-hover": 9.2,
         "dark:text-muted/surface-2": 7.59,
         "dark:text/surface-2": 13.12,
@@ -11323,9 +12267,12 @@ function previewElementStyleAdoption(tree, ctx) {
  * - the element-style MARKER `iox-es iox-es-<id>` (design-system §3b-bis) — component CSS carrying
  *   the system look is scoped to it, so a node saved before DS2 keeps its pre-DS2 look;
  * - the section colour scheme `iox-scheme-<id>` (§3c) for a non-default `colorScheme` — the class
- *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves.
+ *   `compileSchemeCss` re-declares tokens on, so everything inside re-resolves;
+ * - the composite ROLE `iox-role-<role>` (`card.media` → `iox-role-card-media`; composite-components
+ *   plan §3, Card v2) — what the shared CSS keys a part's structural rules on (the badge's corner, the
+ *   card's stretched link), so a role is never a renderer's private knowledge.
  *
- * Renderers read `elementStyle` and `colorScheme` for exactly this and nothing else.
+ * Renderers read `elementStyle`, `colorScheme` and `role` for exactly this and nothing else.
  */
 /** The section colour schemes — the contract's `schemes` keys. */
 var ColorScheme;
@@ -11343,11 +12290,18 @@ const COLOR_SCHEME_TYPES = ['Section', 'Container', 'LinkedContainer'];
 const COLOR_SCHEMES = Object.keys(SPEC_SCHEMES).map(id => ({ id, label: SPEC_SCHEMES[id].label }));
 const SCHEME_IDS$1 = new Set(Object.keys(SPEC_SCHEMES));
 const SCHEME_PREFIX = 'iox-scheme-';
+const ROLE_PREFIX = 'iox-role-';
+/** A role is dot-separated lowercase words (`card`, `card.title`) — anything else never reaches a class. */
+const ROLE_SHAPE = /^[a-z][a-z0-9-]*(\.[a-z][a-z0-9-]*)*$/;
 const MARKER_PREFIX = `${ELEMENT_STYLE_MARKER_CLASS}-`;
 /** `iox-scheme-<id>` for a known NON-default scheme, else null — an unknown id never reaches a class attribute. */
 function colorSchemeClass(id) {
     return typeof id === 'string' && id !== ColorScheme.Default && SCHEME_IDS$1.has(id) ? `${SCHEME_PREFIX}${id}` : null;
 }
+/** `iox-role-<role>` for a well-formed composite role, else null. */
+function roleClass(role) {
+    return typeof role === 'string' && ROLE_SHAPE.test(role) ? `${ROLE_PREFIX}${role.replace(/\./g, '-')}` : null;
+}
 /** A node's `colorScheme`, from `props` (serialized) or its trait (builder). */
 function colorSchemeOf(node) {
     if (!node)
@@ -11365,10 +12319,10 @@ function hasElementStyleMarker(node) {
 /** The classes a node renders: `'iox-es iox-es-card iox-scheme-inverse'`, or `''` for none. */
 function nodeDesignClasses(node) {
     const marker = elementStyleClass(node?.elementStyle);
-    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '']
+    return [marker ? `${ELEMENT_STYLE_MARKER_CLASS} ${marker}` : '', colorSchemeClass(colorSchemeOf(node)) ?? '', roleClass(node?.role) ?? '']
         .filter(Boolean).join(' ');
 }
-const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX);
+const isDesignClass = (c) => c === ELEMENT_STYLE_MARKER_CLASS || c.startsWith(MARKER_PREFIX) || c.startsWith(SCHEME_PREFIX) || c.startsWith(ROLE_PREFIX);
 /** 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) {
@@ -11442,6 +12396,8 @@ function emptyImageSrc(node, src, label) {
  */
 var LinkType;
 (function (LinkType) {
+    /** Links nowhere — a Heading's default; "Link the whole card" (Card v2) turns its title's link on. */
+    LinkType["None"] = "none";
     LinkType["External"] = "external";
     LinkType["Page"] = "page";
 })(LinkType || (LinkType = {}));
@@ -11458,6 +12414,26 @@ function buttonBlockHref(props, pageHref = route => route) {
     const href = props.linkType === LinkType.Page ? pageHref(String(props.pageRoute ?? '')) : String(props.href ?? '');
     return href || null;
 }
+/** The class of the `<a>` a linked Heading renders — the Card v2 stretched link keys on it (iox-design.css:
+ *  the card is the click target, its buttons sit above, the focus ring is drawn on the card). */
+const CARD_LINK_CLASS = 'iox-card-link';
+/** On the editing canvas the anchor carries this, so the stretched `::after` is off and every part of the
+ *  card stays clickable (board 8). */
+const CANVAS_LINK_ATTRIBUTE = 'data-iox-canvas';
+/**
+ * The href a linked Heading renders (Card v2: the card's title IS its link), or `null` when it links
+ * nowhere — `none`, or a link with no target yet (the title then renders as plain words). A page link goes
+ * through `pageHref` exactly as a ButtonBlock's does.
+ */
+function headingHref(props, pageHref = route => route) {
+    if (props.linkType === LinkType.Page) {
+        const route = String(props.pageRoute ?? '');
+        return route ? pageHref(route) || null : null;
+    }
+    if (props.linkType === LinkType.External)
+        return String(props.url ?? '').trim() || null;
+    return null;
+}
 
 function parseHexColor(hex) {
     const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec((hex ?? '').trim());
@@ -12085,12 +13061,15 @@ function preTintAccentGrounds(palette) {
 
 const FORM_PARTS = SPEC_CONTRAST_AUDIT.formParts;
 const INK_SCOPES = SPEC_INK_SCOPES;
+const SCRIMS = SPEC_CONTRAST_AUDIT.scrims;
+const SCRIM_STYLES = new Set(SCRIMS.map(s => s.style));
+/** What a scrim block's children read, beside its own ink (each pinned to it by the block's ink scope). */
+const SCRIM_HELD_TOKENS = ['heading-color', 'eyebrow-color', 'text-muted'];
 const SCHEME_IDS = Object.keys(SPEC_SCHEMES);
 const CONTAINER_GROUPS = new Set(['Layout', 'Overlays']);
 const NOT_CONTENT = new Set(['rule', 'media']);
 const SECTION_STYLE = 'section';
 const ICON_STYLE = 'icon';
-const BUTTON_GROUP = 'Buttons';
 const GLYPH_GROUP = 'Media';
 const FORMS_GROUP = 'Forms';
 const DEFAULT_SCHEME = 'default';
@@ -12123,7 +13102,7 @@ function auditDesignContrast(rows, mode) {
         ...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'])
-        && e.group !== FORMS_GROUP && !NOT_CONTENT.has(e.id));
+        && 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));
     const iconColour = ownStyle(byId.get(ICON_STYLE))['color'];
@@ -12161,7 +13140,8 @@ function auditDesignContrast(rows, mode) {
                     const under = fill.length && opaque(fill) ? overAll(fill, bgs) : bgs;
                     const ink = s['color'] ? parseCssColour(resolveIn(values, s['color']), boxInk) : boxInk;
                     check(e.id, state === 'base' ? (glyph ? 'glyph' : 'text') : `${state} text`, ink, under, glyph ? WCAG_AA_UI : WCAG_AA_TEXT);
-                    if (state === 'base' && e.group === BUTTON_GROUP) {
+                    // What a filled element HOLDS (inkScopes): a button's or a badge's icon reads its ink.
+                    if (state === 'base' && INK_SCOPES.some(sc => sc.styles.includes(e.id))) {
                         check(e.id, 'icon', parseCssColour(resolveIn(inkScoped(values, e.id), iconColour), ink), under, WCAG_AA_UI);
                         const focus = e.focus?.['boxShadow'];
                         if (focus)
@@ -12197,8 +13177,36 @@ function auditDesignContrast(rows, mode) {
             }
         }
     }
+    for (const scrim of SCRIMS)
+        findings.push(...scrimFindings(rows, mode, scrim, byId.get(scrim.style)));
     return findings;
 }
+/** Text over an image: the block's ink — and every token its ink scope pins to it — over the scrim
+ *  composited on the WORST-CASE image, in the scheme the block wears. Never over the section: the image
+ *  covers it. */
+function scrimFindings(rows, mode, scrim, style) {
+    const values = resolveSchemeTokenValues(rows, mode, scrim.scheme);
+    const layer = parseCssColour(values[scrim.token]);
+    const image = parseCssColour(scrim.image);
+    if (!style || !layer || !image)
+        return [];
+    const bg = quantizeRgb(compositeOver(layer, image));
+    const ink = parseCssColour(resolveIn(values, ownStyle(style)['color']));
+    const held = inkScoped(values, scrim.style);
+    const parts = [['text', ink], ...SCRIM_HELD_TOKENS.map((t) => [t, parseCssColour(held[t], ink)])];
+    const out = [];
+    for (const [part, fg] of parts) {
+        if (!fg)
+            continue;
+        const f = quantizeRgb(fg.a < 1 ? compositeOver(fg, bg) : fg);
+        const ratio = wcagContrastRatio(f, bg);
+        out.push({
+            scheme: scrim.scheme, container: scrim.style, element: scrim.style, part: `${part} over a ${scrim.image} image`,
+            fg: toHexColor(f), bg: toHexColor(bg), ratio: Math.round(ratio * 100) / 100, min: WCAG_AA_TEXT, pass: ratio >= WCAG_AA_TEXT - 1e-9,
+        });
+    }
+    return out;
+}
 /** The pairs the Design ▸ Colour tab lists for the CURRENT brand (Board 6 + DS9): what a filled button
  *  shows, and the link on every section scheme — each the worst case on the section itself. */
 var ColourCheckId;
@@ -13466,5 +14474,5 @@ function planFontFamilyRemoval(existing, previous, family) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, AdoptOutcome, AdoptSkipReason, BUTTON_VARIANT_TO_STYLE, 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, 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, sameDesignChoices, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, styleKeyToKebab, switchElementStyle, syncNodeDesignClasses, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, writeOwnedTrait };
+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 };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map