@vectoriox/iox-ui 5.84.0 → 5.85.0

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

@@ -519,6 +519,30 @@ const SPEC_TIERS = {
             "type": "number",
             "group": "motion",
             "desc": ""
+        },
+        {
+            "name": "dur-hover",
+            "type": "duration",
+            "group": "motion",
+            "desc": "Hover colour: links, chips (≤150ms)"
+        },
+        {
+            "name": "ease-hover",
+            "type": "easing",
+            "group": "motion",
+            "desc": "Hover colour (ease)"
+        },
+        {
+            "name": "dur-press",
+            "type": "duration",
+            "group": "motion",
+            "desc": "A press, faster than its release"
+        },
+        {
+            "name": "dur-ui",
+            "type": "duration",
+            "group": "motion",
+            "desc": "UI motion ≤300ms: a linked card, the header"
         }
     ],
     "component": [
@@ -747,6 +771,11 @@ const SPEC_TIERS = {
             "type": "effect",
             "default": "none"
         },
+        {
+            "name": "card-shadow-raise",
+            "type": "shadow",
+            "default": "var(--iox-card-shadow-hover)"
+        },
         {
             "name": "panel-bg",
             "type": "color",
@@ -877,6 +906,11 @@ const SPEC_TIERS = {
             "type": "size",
             "default": "0px"
         },
+        {
+            "name": "dialog-edge",
+            "type": "color",
+            "default": "var(--iox-line)"
+        },
         {
             "name": "image-radius",
             "type": "radius",
@@ -912,6 +946,31 @@ const SPEC_TIERS = {
             "type": "keyword",
             "default": "underline 2px var(--iox-accent-text)"
         },
+        {
+            "name": "link-underline-rest",
+            "type": "number",
+            "default": "1"
+        },
+        {
+            "name": "link-underline-thickness",
+            "type": "size",
+            "default": "max(1px, 0.06em)"
+        },
+        {
+            "name": "link-underline-offset",
+            "type": "size",
+            "default": "0.12em"
+        },
+        {
+            "name": "link-current-underline",
+            "type": "color",
+            "default": "var(--iox-accent-text)"
+        },
+        {
+            "name": "link-current-underline-thickness",
+            "type": "size",
+            "default": "2px"
+        },
         {
             "name": "tabbar-bg",
             "type": "color",
@@ -1231,6 +1290,11 @@ const SPEC_TIERS = {
             "name": "video-play-size",
             "type": "size",
             "default": "64px"
+        },
+        {
+            "name": "slider-ease",
+            "type": "easing",
+            "default": "var(--iox-ease-standard)"
         }
     ]
 };
@@ -1325,7 +1389,10 @@ const SPEC_AXES = {
             "ease-spring": "linear",
             "dur-spring": "0ms",
             "hover-lift": "0px",
-            "press-scale": "1"
+            "press-scale": "1",
+            "dur-hover": "0ms",
+            "dur-press": "0ms",
+            "dur-ui": "0ms"
         },
         "snappy": {
             "label": "Snappy",
@@ -1336,7 +1403,10 @@ const SPEC_AXES = {
             "ease-spring": "cubic-bezier(0.2, 0, 0, 1)",
             "dur-spring": "140ms",
             "hover-lift": "-2px",
-            "press-scale": "0.97"
+            "press-scale": "0.97",
+            "dur-hover": "80ms",
+            "dur-press": "60ms",
+            "dur-ui": "140ms"
         },
         "standard": {
             "label": "Standard",
@@ -1347,7 +1417,10 @@ const SPEC_AXES = {
             "ease-spring": "cubic-bezier(0.2, 0, 0, 1)",
             "dur-spring": "200ms",
             "hover-lift": "-2px",
-            "press-scale": "0.98"
+            "press-scale": "0.98",
+            "dur-hover": "120ms",
+            "dur-press": "90ms",
+            "dur-ui": "200ms"
         },
         "calm": {
             "label": "Calm",
@@ -1358,7 +1431,10 @@ const SPEC_AXES = {
             "ease-spring": "cubic-bezier(0.33, 0, 0.1, 1)",
             "dur-spring": "400ms",
             "hover-lift": "0px",
-            "press-scale": "0.98"
+            "press-scale": "0.98",
+            "dur-hover": "150ms",
+            "dur-press": "120ms",
+            "dur-ui": "300ms"
         },
         "lively": {
             "label": "Lively",
@@ -1369,12 +1445,16 @@ const SPEC_AXES = {
             "ease-spring": "linear(0, 0.018, 0.0651, 0.132, 0.2115, 0.2974, 0.3852, 0.4714, 0.5535, 0.6296, 0.6987, 0.7603, 0.8142, 0.8605, 0.8996, 0.9321, 0.9585, 0.9794, 0.9957, 1.0079, 1.0167, 1.0226, 1.0262, 1.028, 1.0284, 1.0276, 1.0262, 1.0242, 1.0219, 1.0194, 1.0169, 1.0145, 1.0122, 1.0101, 1.0082, 1.0065, 1.005, 1.0037, 1.0026, 1.0018, 1)",
             "dur-spring": "470ms",
             "hover-lift": "-3px",
-            "press-scale": "0.97"
+            "press-scale": "0.97",
+            "dur-hover": "150ms",
+            "dur-press": "100ms",
+            "dur-ui": "280ms"
         }
     },
     "motionCommon": {
         "ease-enter": "cubic-bezier(0.05, 0.7, 0.1, 1)",
-        "ease-exit": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+        "ease-exit": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+        "ease-hover": "ease"
     },
     "modes": [
         "light",
@@ -2591,6 +2671,7 @@ const SPEC_A11Y = {
         "dur-slow": "0ms",
         "dur-spring": "0ms",
         "ease-spring": "linear",
+        "dur-press": "0ms",
         "hover-lift": "0px",
         "press-scale": "1",
         "card-hover-x": "0px",
@@ -3758,10 +3839,11 @@ const SPEC_FIELD_CLASS_BASELINE = {
         "font-family": "var(--iox-font-label)",
         "font-size": "var(--iox-badge-size)",
         "font-weight": "var(--iox-weight-label)",
-        "transition": "border-color var(--iox-dur-fast) var(--iox-ease-standard), background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)"
+        "transition": "border-color var(--iox-dur-hover) var(--iox-ease-hover), background-color var(--iox-dur-hover) var(--iox-ease-hover), color var(--iox-dur-hover) var(--iox-ease-hover), box-shadow var(--iox-dur-hover) var(--iox-ease-hover), opacity var(--iox-dur-hover) var(--iox-ease-hover), transform var(--iox-dur-fast) var(--iox-ease-standard)"
     },
     ".iox-es-field .iox-field__chip:active:not(:has(:disabled))": {
-        "transform": "scale(var(--iox-press-scale))"
+        "transform": "scale(var(--iox-press-scale))",
+        "transition-duration": "var(--iox-dur-press)"
     },
     ".iox-es-field .iox-field__chip:hover:not(:has(:disabled))": {
         "border-color": "var(--iox-text)"
@@ -3831,7 +3913,8 @@ const SPEC_FIELD_CLASS_BASELINE = {
         "transition": "background-color var(--iox-dur-fast) var(--iox-ease-standard), color var(--iox-dur-fast) var(--iox-ease-standard), border-color var(--iox-dur-fast) var(--iox-ease-standard), box-shadow var(--iox-dur-fast) var(--iox-ease-standard), opacity var(--iox-dur-fast) var(--iox-ease-standard), transform var(--iox-dur-fast) var(--iox-ease-standard)"
     },
     ".iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true'])": {
-        "transform": "scale(var(--iox-press-scale))"
+        "transform": "scale(var(--iox-press-scale))",
+        "transition-duration": "var(--iox-dur-press)"
     },
     ".iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true'])": {
         "background-color": "var(--iox-surface-2)"
@@ -4966,6 +5049,34 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "motion",
                 "value": "0.98"
             },
+            {
+                "name": "dur-hover",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "120ms"
+            },
+            {
+                "name": "ease-hover",
+                "tier": "semantic",
+                "type": "easing",
+                "group": "motion",
+                "value": "ease"
+            },
+            {
+                "name": "dur-press",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "90ms"
+            },
+            {
+                "name": "dur-ui",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "200ms"
+            },
             {
                 "name": "button-font",
                 "tier": "component",
@@ -5281,6 +5392,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "none"
             },
+            {
+                "name": "card-shadow-raise",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-card-shadow-hover)"
+            },
             {
                 "name": "panel-bg",
                 "tier": "component",
@@ -5463,6 +5581,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "0px"
             },
+            {
+                "name": "dialog-edge",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
             {
                 "name": "image-radius",
                 "tier": "component",
@@ -5512,6 +5637,41 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline 2px var(--iox-accent-text)"
             },
+            {
+                "name": "link-underline-rest",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "max(1px, 0.06em)"
+            },
+            {
+                "name": "link-underline-offset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0.12em"
+            },
+            {
+                "name": "link-current-underline",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-current-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "2px"
+            },
             {
                 "name": "tabbar-bg",
                 "tier": "component",
@@ -5959,6 +6119,13 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "size",
                 "group": "components",
                 "value": "64px"
+            },
+            {
+                "name": "slider-ease",
+                "tier": "component",
+                "type": "easing",
+                "group": "components",
+                "value": "var(--iox-ease-standard)"
             }
         ]
     },
@@ -6753,6 +6920,34 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "motion",
                 "value": "0.98"
             },
+            {
+                "name": "dur-hover",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "150ms"
+            },
+            {
+                "name": "ease-hover",
+                "tier": "semantic",
+                "type": "easing",
+                "group": "motion",
+                "value": "ease"
+            },
+            {
+                "name": "dur-press",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "120ms"
+            },
+            {
+                "name": "dur-ui",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "300ms"
+            },
             {
                 "name": "button-font",
                 "tier": "component",
@@ -7083,6 +7278,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "none"
             },
+            {
+                "name": "card-shadow-raise",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-card-shadow-hover)"
+            },
             {
                 "name": "panel-bg",
                 "tier": "component",
@@ -7268,6 +7470,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "0px"
             },
+            {
+                "name": "dialog-edge",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
             {
                 "name": "image-radius",
                 "tier": "component",
@@ -7320,6 +7529,41 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline 2px var(--iox-accent-text)"
             },
+            {
+                "name": "link-underline-rest",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "max(1px, 0.06em)"
+            },
+            {
+                "name": "link-underline-offset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0.12em"
+            },
+            {
+                "name": "link-current-underline",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-current-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "2px"
+            },
             {
                 "name": "tabbar-bg",
                 "tier": "component",
@@ -7773,6 +8017,13 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "size",
                 "group": "components",
                 "value": "64px"
+            },
+            {
+                "name": "slider-ease",
+                "tier": "component",
+                "type": "easing",
+                "group": "components",
+                "value": "var(--iox-ease-standard)"
             }
         ]
     },
@@ -8572,6 +8823,34 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "motion",
                 "value": "0.98"
             },
+            {
+                "name": "dur-hover",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "120ms"
+            },
+            {
+                "name": "ease-hover",
+                "tier": "semantic",
+                "type": "easing",
+                "group": "motion",
+                "value": "ease"
+            },
+            {
+                "name": "dur-press",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "90ms"
+            },
+            {
+                "name": "dur-ui",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "200ms"
+            },
             {
                 "name": "button-font",
                 "tier": "component",
@@ -8893,6 +9172,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "none"
             },
+            {
+                "name": "card-shadow-raise",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-card-shadow-hover)"
+            },
             {
                 "name": "panel-bg",
                 "tier": "component",
@@ -9077,6 +9363,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "0px"
             },
+            {
+                "name": "dialog-edge",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
             {
                 "name": "image-radius",
                 "tier": "component",
@@ -9126,6 +9419,41 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline 2px var(--iox-accent-text)"
             },
+            {
+                "name": "link-underline-rest",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "max(1px, 0.06em)"
+            },
+            {
+                "name": "link-underline-offset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0.12em"
+            },
+            {
+                "name": "link-current-underline",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-current-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "2px"
+            },
             {
                 "name": "tabbar-bg",
                 "tier": "component",
@@ -9575,6 +9903,13 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "size",
                 "group": "components",
                 "value": "64px"
+            },
+            {
+                "name": "slider-ease",
+                "tier": "component",
+                "type": "easing",
+                "group": "components",
+                "value": "var(--iox-ease-standard)"
             }
         ]
     },
@@ -10387,6 +10722,34 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "motion",
                 "value": "0.97"
             },
+            {
+                "name": "dur-hover",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "150ms"
+            },
+            {
+                "name": "ease-hover",
+                "tier": "semantic",
+                "type": "easing",
+                "group": "motion",
+                "value": "ease"
+            },
+            {
+                "name": "dur-press",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "100ms"
+            },
+            {
+                "name": "dur-ui",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "280ms"
+            },
             {
                 "name": "button-font",
                 "tier": "component",
@@ -10715,6 +11078,13 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "var(--iox-blur-surface)",
                 "overridden": true
             },
+            {
+                "name": "card-shadow-raise",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-card-shadow-hover)"
+            },
             {
                 "name": "panel-bg",
                 "tier": "component",
@@ -10910,6 +11280,13 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "var(--iox-border-width)",
                 "overridden": true
             },
+            {
+                "name": "dialog-edge",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
             {
                 "name": "image-radius",
                 "tier": "component",
@@ -10959,6 +11336,41 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline 2px var(--iox-accent-text)"
             },
+            {
+                "name": "link-underline-rest",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "max(1px, 0.06em)"
+            },
+            {
+                "name": "link-underline-offset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0.12em"
+            },
+            {
+                "name": "link-current-underline",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-current-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "2px"
+            },
             {
                 "name": "tabbar-bg",
                 "tier": "component",
@@ -11421,6 +11833,13 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "size",
                 "group": "components",
                 "value": "64px"
+            },
+            {
+                "name": "slider-ease",
+                "tier": "component",
+                "type": "easing",
+                "group": "components",
+                "value": "var(--iox-ease-standard)"
             }
         ]
     },
@@ -12215,6 +12634,34 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "motion",
                 "value": "0.97"
             },
+            {
+                "name": "dur-hover",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "150ms"
+            },
+            {
+                "name": "ease-hover",
+                "tier": "semantic",
+                "type": "easing",
+                "group": "motion",
+                "value": "ease"
+            },
+            {
+                "name": "dur-press",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "100ms"
+            },
+            {
+                "name": "dur-ui",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "280ms"
+            },
             {
                 "name": "button-font",
                 "tier": "component",
@@ -12540,6 +12987,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "none"
             },
+            {
+                "name": "card-shadow-raise",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-card-shadow-hover)"
+            },
             {
                 "name": "panel-bg",
                 "tier": "component",
@@ -12724,6 +13178,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "0px"
             },
+            {
+                "name": "dialog-edge",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
             {
                 "name": "image-radius",
                 "tier": "component",
@@ -12773,6 +13234,41 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline 2px var(--iox-accent-text)"
             },
+            {
+                "name": "link-underline-rest",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "max(1px, 0.06em)"
+            },
+            {
+                "name": "link-underline-offset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0.12em"
+            },
+            {
+                "name": "link-current-underline",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-current-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "2px"
+            },
             {
                 "name": "tabbar-bg",
                 "tier": "component",
@@ -13229,6 +13725,13 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "size",
                 "group": "components",
                 "value": "64px"
+            },
+            {
+                "name": "slider-ease",
+                "tier": "component",
+                "type": "easing",
+                "group": "components",
+                "value": "var(--iox-ease-standard)"
             }
         ]
     },
@@ -14012,6 +14515,34 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "motion",
                 "value": "0.97"
             },
+            {
+                "name": "dur-hover",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "80ms"
+            },
+            {
+                "name": "ease-hover",
+                "tier": "semantic",
+                "type": "easing",
+                "group": "motion",
+                "value": "ease"
+            },
+            {
+                "name": "dur-press",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "60ms"
+            },
+            {
+                "name": "dur-ui",
+                "tier": "semantic",
+                "type": "duration",
+                "group": "motion",
+                "value": "140ms"
+            },
             {
                 "name": "button-font",
                 "tier": "component",
@@ -14346,6 +14877,13 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "none"
             },
+            {
+                "name": "card-shadow-raise",
+                "tier": "component",
+                "type": "shadow",
+                "group": "components",
+                "value": "var(--iox-card-shadow-hover)"
+            },
             {
                 "name": "panel-bg",
                 "tier": "component",
@@ -14534,6 +15072,13 @@ const SPEC_FLAVOR_PACKS = [
                 "value": "var(--iox-border-width)",
                 "overridden": true
             },
+            {
+                "name": "dialog-edge",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-line)"
+            },
             {
                 "name": "image-radius",
                 "tier": "component",
@@ -14585,6 +15130,41 @@ const SPEC_FLAVOR_PACKS = [
                 "group": "components",
                 "value": "underline 2px var(--iox-accent-text)"
             },
+            {
+                "name": "link-underline-rest",
+                "tier": "component",
+                "type": "number",
+                "group": "components",
+                "value": "1"
+            },
+            {
+                "name": "link-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "max(1px, 0.06em)"
+            },
+            {
+                "name": "link-underline-offset",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "0.12em"
+            },
+            {
+                "name": "link-current-underline",
+                "tier": "component",
+                "type": "color",
+                "group": "components",
+                "value": "var(--iox-accent-text)"
+            },
+            {
+                "name": "link-current-underline-thickness",
+                "tier": "component",
+                "type": "size",
+                "group": "components",
+                "value": "2px"
+            },
             {
                 "name": "tabbar-bg",
                 "tier": "component",
@@ -15046,6 +15626,13 @@ const SPEC_FLAVOR_PACKS = [
                 "type": "size",
                 "group": "components",
                 "value": "64px"
+            },
+            {
+                "name": "slider-ease",
+                "tier": "component",
+                "type": "easing",
+                "group": "components",
+                "value": "var(--iox-ease-standard)"
             }
         ]
     }
@@ -16139,6 +16726,8 @@ function compileTokenCss(tokens, opts = {}) {
 
 /** The token the browser's own chrome takes its colour from: the page's ground. */
 const THEME_COLOR_TOKEN = 'bg';
+/** …or the header's ground, when a header stays at the top of the screen (premium components T2, M4). */
+const HEADER_THEME_COLOR_TOKEN = 'nav-bg';
 const VAR_REF = /^var\(\s*--iox-([\w-]+)\s*(?:,\s*([^()]+))?\)$/;
 /** A colour the browser's chrome can wear: opaque hex, rgb() or hsl() — never a gradient, a mix or a translucent one. */
 const SOLID_COLOUR = /^(#([0-9a-f]{3}|[0-9a-f]{6})|rgb\(\s*[\d.]+\s*,?\s*[\d.]+\s*,?\s*[\d.]+\s*\)|hsl\([^()/]+\))$/i;
@@ -16150,33 +16739,109 @@ function resolveIn$1(map, value, depth = 0) {
         return value.trim();
     return resolveIn$1(map, map.get(ref[1]) ?? ref[2]?.trim(), depth + 1);
 }
-function colourFor(rows, dark) {
+function colourFor(rows, dark, token) {
     const map = new Map(rows.map(r => [r.name, dark ? (r.values?.dark ?? r.value) : r.value]));
-    const colour = resolveIn$1(map, map.get(THEME_COLOR_TOKEN));
+    const colour = resolveIn$1(map, map.get(token));
     return colour && SOLID_COLOUR.test(colour) ? colour : undefined;
 }
+function themeColourFor(rows, dark, options) {
+    return (options.header ? colourFor(rows, dark, HEADER_THEME_COLOR_TOKEN) : undefined) ?? colourFor(rows, dark, THEME_COLOR_TOKEN);
+}
 /**
  * The `theme-color` the browser's chrome takes per colour scheme (premium components G15 — mobile-native M10): the
  * page's ground in each mode the site shows, resolved through the org's rows. A light or dark site answers its one
  * mode; `auto` answers both (the engine writes them with `media="(prefers-color-scheme: …)"`). A value that is not a
  * solid colour answers nothing — the browser keeps its own.
  */
-function themeColors(rows, mode = 'auto') {
+function themeColors(rows, mode = 'auto', options = {}) {
     const list = rows ?? [];
     const out = {};
     if (mode !== 'dark') {
-        const light = colourFor(list, false);
+        const light = themeColourFor(list, false, options);
         if (light)
             out.light = light;
     }
     if (mode !== 'light') {
-        const dark = colourFor(list, true);
+        const dark = themeColourFor(list, true, options);
         if (dark)
             out.dark = dark;
     }
     return out;
 }
 
+/**
+ * How a site's header behaves as the page scrolls (premium components T2, M4). Two traits on the header's ROOT (the
+ * Navigation bar, generation-core `NavRole.Root`) — edited in its "Header" section, stamped by the composer from a
+ * `nav.*` pattern's `header` — and ONE answer every renderer applies: the attributes below, which the shared CSS
+ * (`iox-design.css`) and the header runtime (`HeaderRuntime`, main entry) read. A header with neither trait renders
+ * exactly as before (it scrolls away with the page, its divider line as its look draws it).
+ *
+ * Framework-free: the composer (generation-core) and both renderers read it.
+ */
+var HeaderBehaviour;
+(function (HeaderBehaviour) {
+    /** It scrolls away with the page (the default; what every header saved before M4 does). */
+    HeaderBehaviour["Scrolls"] = "scrolls";
+    /** It stays at the top while the page scrolls under it. */
+    HeaderBehaviour["Stays"] = "stays";
+    /** It steps aside while the page scrolls down and comes back the moment it scrolls up. */
+    HeaderBehaviour["Hides"] = "hides";
+})(HeaderBehaviour || (HeaderBehaviour = {}));
+/** What separates the header from the page once the page has moved under it (Emil 99: an edge, not a divider). */
+var HeaderEdge;
+(function (HeaderEdge) {
+    /** A soft fade of the header's own ground over the content under it. */
+    HeaderEdge["Fade"] = "fade";
+    /** A hairline in the header's border colour. */
+    HeaderEdge["Line"] = "line";
+    HeaderEdge["None"] = "none";
+})(HeaderEdge || (HeaderEdge = {}));
+/** The traits, stored in the root's props (no default: a plain Container saves neither). */
+var HeaderTrait;
+(function (HeaderTrait) {
+    HeaderTrait["Behaviour"] = "headerBehaviour";
+    HeaderTrait["Edge"] = "headerEdge";
+})(HeaderTrait || (HeaderTrait = {}));
+var HeaderAttribute;
+(function (HeaderAttribute) {
+    /** `stays` | `hides` on a header that stays at the top. Absent: it scrolls away. */
+    HeaderAttribute["Behaviour"] = "data-iox-header";
+    /** `fade` | `line` | `none`: the edge it shows once the page has scrolled. Absent: its look's own divider stays. */
+    HeaderAttribute["Edge"] = "data-iox-header-edge";
+    /** Written by the header runtime while a `hides` header has stepped aside. */
+    HeaderAttribute["Hidden"] = "data-iox-header-hidden";
+})(HeaderAttribute || (HeaderAttribute = {}));
+/** What a composed header gets (the `nav.*` patterns' `header`, the palette's Navigation bar). */
+const COMPOSED_HEADER = {
+    behaviour: HeaderBehaviour.Hides,
+    edge: HeaderEdge.Fade,
+};
+const BEHAVIOURS = new Set(Object.values(HeaderBehaviour));
+const EDGES = new Set(Object.values(HeaderEdge));
+/** A stored behaviour, or Scrolls for anything else. */
+function headerBehaviourOf(value) {
+    return typeof value === 'string' && BEHAVIOURS.has(value) ? value : HeaderBehaviour.Scrolls;
+}
+/** A stored edge, or null (none chosen: the look's divider stays as it is). */
+function headerEdgeOf(value) {
+    return typeof value === 'string' && EDGES.has(value) ? value : null;
+}
+/** True when the header keeps its place at the top of the screen (it stays, or it hides and comes back). */
+function headerStaysAtTop(behaviour) {
+    return headerBehaviourOf(behaviour) !== HeaderBehaviour.Scrolls;
+}
+/** The attributes a header renders, from its two trait values — `{}` for a header that keeps today's behaviour. */
+function headerAttributes(behaviour, edge) {
+    const out = {};
+    const b = headerBehaviourOf(behaviour);
+    if (b !== HeaderBehaviour.Scrolls)
+        out[HeaderAttribute.Behaviour] = b;
+    const e = headerEdgeOf(edge);
+    if (e)
+        out[HeaderAttribute.Edge] = e;
+    return out;
+}
+
 /** A pack's own sanity: every token row names itself and carries a value. Returns errors. */
 function validateFlavorPack(pack) {
     const errors = [];
@@ -18832,5 +19497,5 @@ function stylePresetOfChoices(choices) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACCENT_TOKEN_NAMES, ANIMATE_IDS, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BETWEEN_IDS, 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, EntranceParam, FLAVOR_SPEC_VERSION, FONT_CATALOG, FONT_FAMILY_TOKENS, FONT_FILE_ACCEPT, FONT_FILE_EXTENSIONS, FONT_FILE_FORMATS, FONT_STYLES, FONT_WEIGHTS, FontUploadError, GOOGLE_FONTS_CSS_ORIGIN, GOOGLE_FONTS_FILE_ORIGIN, HELD_CONTRAST, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, MOOD_IDS, MOOD_LABELS, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_MOTION, PRE_TINT_DEFAULT, REDUCED_DESIGN_MOTION, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, ROW_INDEX_ATTRIBUTE, SCHEME_INK, SCROLL_IDS, 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_MOODS, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SCRIPTS, SPEC_SPRINGS, SPEC_STYLE_PRESETS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, STAGGER_MAX_ITEMS, STAGGER_SHRINK, STYLE_PRESETS, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, THEME_COLOR_TOKEN, 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, designApplySnapshot, designBaseline, designConfigEntries, designModeOf, designMotionOf, designRevertConfig, designTokenRepairs, designTokenRows, drawsScript, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, entranceDelay, 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, presetChoices, presetModes, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, releaseElementStyle, repeatedRowIndex, resolveDesignChoices, resolveDesignMotion, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, scriptsForLocale, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, staggerDelay, styleKeyToKebab, stylePresetById, stylePresetOfChoices, switchElementStyle, syncNodeDesignClasses, themeColors, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, withoutScriptPartners, writeOwnedTrait };
+export { ACCENT_TOKEN_NAMES, ANIMATE_IDS, AdoptOutcome, AdoptSkipReason, BAR_RESERVE_BREAKPOINTS, BAR_RESERVE_CLASS, BETWEEN_IDS, BOTTOM_BAR_STYLE, BUTTON_VARIANT_TO_STYLE, CANVAS_LINK_ATTRIBUTE, CARD_LINK_CLASS, COLOR_SCHEMES, COLOR_SCHEME_TRAIT, COLOR_SCHEME_TYPES, COMPOSED_HEADER, 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, EntranceParam, 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, HEADER_THEME_COLOR_TOKEN, HELD_CONTRAST, HeaderAttribute, HeaderBehaviour, HeaderEdge, HeaderTrait, INHERITED_TEXT, LinkType, MAX_FONT_FILE_BYTES, MOOD_IDS, MOOD_LABELS, NEW_NODE_STYLE_DEFAULTS, OwnedTraitLink, PALETTE_PRESETS, PRE_DS2_FLAVOR_DEFAULTS, PRE_MOTION, PRE_TINT_DEFAULT, REDUCED_DESIGN_MOTION, REDUCED_MOTION_OVERRIDES, REDUCED_TRANSPARENCY_OVERRIDES, REVERT_WINDOW_MS, ROW_INDEX_ATTRIBUTE, SCHEME_INK, SCROLL_IDS, 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_MOODS, SPEC_PALETTE_PRESETS, SPEC_SCHEMES, SPEC_SCHEME_INK, SPEC_SCRIPTS, SPEC_SPRINGS, SPEC_STYLE_PRESETS, SPEC_TIERS, SPEC_TIER_IDS, SPEC_TOKEN_TYPES, STAGGER_MAX_ITEMS, STAGGER_SHRINK, STYLE_PRESETS, SUPERSEDED_STYLE_VALUES, SWISS_FLAVOR, THEME_COLOR_TOKEN, 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, designApplySnapshot, designBaseline, designConfigEntries, designModeOf, designMotionOf, designRevertConfig, designTokenRepairs, designTokenRows, drawsScript, elementStyleById, elementStyleClass, elementStylesFor, emptyImageLabelSrc, emptyImagePlaceholder, emptyImageSrc, ensureAlpha, ensureContrast, entranceDelay, flavorColours, flavorPackById, flavorSeedWrites, flavorSourceStamp, fontFamilyKey, fontFileName, fontFileStem, fontFormatOf, fontPreloads, fontRoleReferences, fontStackWithout, fontWeightCovers, fontWeightRange, fontWeightValue, fontsForTokens, formatFontFamilies, formatFontFamily, formatFontWeight, googleFontHref, groupFontFamilies, hasElementStyleMarker, headerAttributes, headerBehaviourOf, headerEdgeOf, headerStaysAtTop, 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, presetChoices, presetModes, previewElementStyleAdoption, previewFontWeight, quantizeRgb, readDesignConfig, readOwnedTrait, relativeLuminance, releaseElementStyle, repeatedRowIndex, resolveDesignChoices, resolveDesignMotion, resolveSchemeTokenValues, resolveTokenReferences, resolveTokenValues, revertAvailable, rgbToOklab, ringColour, roleClass, sameDesignChoices, scriptsForLocale, setColorScheme, specTokenNames, splitTopLevel, springToLinear, stackNamesFamily, staggerDelay, styleKeyToKebab, stylePresetById, stylePresetOfChoices, switchElementStyle, syncNodeDesignClasses, themeColors, toHexColor, tokenReferences, tokensToDarkVarMap, tokensToVarMap, unknownTokenReferences, untouchedSeedRow, userFontStack, validateFlavorPack, wcagContrastRatio, withSchemeInk, withoutScriptPartners, writeOwnedTrait };
 //# sourceMappingURL=vectoriox-iox-ui-design-core.mjs.map