@vectoriox/iox-ui 5.83.1 → 5.85.0

package/design-core/index.d.ts

@@ -428,6 +428,26 @@ declare const SPEC_TIERS: {
         readonly type: "number";
         readonly group: "motion";
         readonly desc: "";
+    }, {
+        readonly name: "dur-hover";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly desc: "Hover colour: links, chips (≤150ms)";
+    }, {
+        readonly name: "ease-hover";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly desc: "Hover colour (ease)";
+    }, {
+        readonly name: "dur-press";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly desc: "A press, faster than its release";
+    }, {
+        readonly name: "dur-ui";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly desc: "UI motion ≤300ms: a linked card, the header";
     }];
     readonly component: readonly [{
         readonly name: "button-font";
@@ -609,6 +629,10 @@ declare const SPEC_TIERS: {
         readonly name: "card-backdrop";
         readonly type: "effect";
         readonly default: "none";
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly type: "shadow";
+        readonly default: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly type: "color";
@@ -713,6 +737,10 @@ declare const SPEC_TIERS: {
         readonly name: "dialog-border-width";
         readonly type: "size";
         readonly default: "0px";
+    }, {
+        readonly name: "dialog-edge";
+        readonly type: "color";
+        readonly default: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly type: "radius";
@@ -741,6 +769,26 @@ declare const SPEC_TIERS: {
         readonly name: "link-current-decoration";
         readonly type: "keyword";
         readonly default: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly type: "number";
+        readonly default: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly type: "size";
+        readonly default: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly type: "size";
+        readonly default: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly type: "color";
+        readonly default: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly type: "size";
+        readonly default: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly type: "color";
@@ -997,6 +1045,10 @@ declare const SPEC_TIERS: {
         readonly name: "video-play-size";
         readonly type: "size";
         readonly default: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly type: "easing";
+        readonly default: "var(--iox-ease-standard)";
     }];
 };
 declare const SPEC_TOKEN_TYPES: readonly ["color", "paint", "font", "number", "size", "spacing", "radius", "shadow", "effect", "duration", "easing", "keyword", "other"];
@@ -1077,6 +1129,9 @@ declare const SPEC_AXES: {
             readonly "dur-spring": "0ms";
             readonly "hover-lift": "0px";
             readonly "press-scale": "1";
+            readonly "dur-hover": "0ms";
+            readonly "dur-press": "0ms";
+            readonly "dur-ui": "0ms";
         };
         readonly snappy: {
             readonly label: "Snappy";
@@ -1088,6 +1143,9 @@ declare const SPEC_AXES: {
             readonly "dur-spring": "140ms";
             readonly "hover-lift": "-2px";
             readonly "press-scale": "0.97";
+            readonly "dur-hover": "80ms";
+            readonly "dur-press": "60ms";
+            readonly "dur-ui": "140ms";
         };
         readonly standard: {
             readonly label: "Standard";
@@ -1099,6 +1157,9 @@ declare const SPEC_AXES: {
             readonly "dur-spring": "200ms";
             readonly "hover-lift": "-2px";
             readonly "press-scale": "0.98";
+            readonly "dur-hover": "120ms";
+            readonly "dur-press": "90ms";
+            readonly "dur-ui": "200ms";
         };
         readonly calm: {
             readonly label: "Calm";
@@ -1110,6 +1171,9 @@ declare const SPEC_AXES: {
             readonly "dur-spring": "400ms";
             readonly "hover-lift": "0px";
             readonly "press-scale": "0.98";
+            readonly "dur-hover": "150ms";
+            readonly "dur-press": "120ms";
+            readonly "dur-ui": "300ms";
         };
         readonly lively: {
             readonly label: "Lively";
@@ -1121,11 +1185,15 @@ declare const SPEC_AXES: {
             readonly "dur-spring": "470ms";
             readonly "hover-lift": "-3px";
             readonly "press-scale": "0.97";
+            readonly "dur-hover": "150ms";
+            readonly "dur-press": "100ms";
+            readonly "dur-ui": "280ms";
         };
     };
     readonly motionCommon: {
         readonly "ease-enter": "cubic-bezier(0.05, 0.7, 0.1, 1)";
         readonly "ease-exit": "cubic-bezier(0.3, 0, 0.8, 0.15)";
+        readonly "ease-hover": "ease";
     };
     readonly modes: readonly ["light", "dark", "auto"];
     readonly tints: {
@@ -2045,6 +2113,7 @@ declare const SPEC_A11Y: {
         readonly "dur-slow": "0ms";
         readonly "dur-spring": "0ms";
         readonly "ease-spring": "linear";
+        readonly "dur-press": "0ms";
         readonly "hover-lift": "0px";
         readonly "press-scale": "1";
         readonly "card-hover-x": "0px";
@@ -3055,10 +3124,11 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
         readonly "font-family": "var(--iox-font-label)";
         readonly "font-size": "var(--iox-badge-size)";
         readonly "font-weight": "var(--iox-weight-label)";
-        readonly 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)";
+        readonly 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)";
     };
     readonly ".iox-es-field .iox-field__chip:active:not(:has(:disabled))": {
         readonly transform: "scale(var(--iox-press-scale))";
+        readonly "transition-duration": "var(--iox-dur-press)";
     };
     readonly ".iox-es-field .iox-field__chip:hover:not(:has(:disabled))": {
         readonly "border-color": "var(--iox-text)";
@@ -3129,6 +3199,7 @@ declare const SPEC_FIELD_CLASS_BASELINE: {
     };
     readonly ".iox-es-field .iox-cal .iox-cal__day:active:not([aria-disabled='true'])": {
         readonly transform: "scale(var(--iox-press-scale))";
+        readonly "transition-duration": "var(--iox-dur-press)";
     };
     readonly ".iox-es-field .iox-cal .iox-cal__day:hover:not([aria-disabled='true'])": {
         readonly "background-color": "var(--iox-surface-2)";
@@ -4068,6 +4139,30 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "number";
         readonly group: "motion";
         readonly value: "0.98";
+    }, {
+        readonly name: "dur-hover";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "120ms";
+    }, {
+        readonly name: "ease-hover";
+        readonly tier: "semantic";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly value: "ease";
+    }, {
+        readonly name: "dur-press";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "90ms";
+    }, {
+        readonly name: "dur-ui";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "200ms";
     }, {
         readonly name: "button-font";
         readonly tier: "component";
@@ -4338,6 +4433,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "effect";
         readonly group: "components";
         readonly value: "none";
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly tier: "component";
@@ -4494,6 +4595,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px";
+    }, {
+        readonly name: "dialog-edge";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly tier: "component";
@@ -4536,6 +4643,36 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly tier: "component";
+        readonly type: "number";
+        readonly group: "components";
+        readonly value: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly tier: "component";
@@ -4920,6 +5057,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly tier: "component";
+        readonly type: "easing";
+        readonly group: "components";
+        readonly value: "var(--iox-ease-standard)";
     }];
 }, {
     readonly id: "linen";
@@ -5591,6 +5734,30 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "number";
         readonly group: "motion";
         readonly value: "0.98";
+    }, {
+        readonly name: "dur-hover";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "150ms";
+    }, {
+        readonly name: "ease-hover";
+        readonly tier: "semantic";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly value: "ease";
+    }, {
+        readonly name: "dur-press";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "120ms";
+    }, {
+        readonly name: "dur-ui";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "300ms";
     }, {
         readonly name: "button-font";
         readonly tier: "component";
@@ -5876,6 +6043,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "effect";
         readonly group: "components";
         readonly value: "none";
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly tier: "component";
@@ -6035,6 +6208,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px";
+    }, {
+        readonly name: "dialog-edge";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly tier: "component";
@@ -6080,6 +6259,36 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly tier: "component";
+        readonly type: "number";
+        readonly group: "components";
+        readonly value: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly tier: "component";
@@ -6470,6 +6679,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly tier: "component";
+        readonly type: "easing";
+        readonly group: "components";
+        readonly value: "var(--iox-ease-standard)";
     }];
 }, {
     readonly id: "midnight";
@@ -7144,6 +7359,30 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "number";
         readonly group: "motion";
         readonly value: "0.98";
+    }, {
+        readonly name: "dur-hover";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "120ms";
+    }, {
+        readonly name: "ease-hover";
+        readonly tier: "semantic";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly value: "ease";
+    }, {
+        readonly name: "dur-press";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "90ms";
+    }, {
+        readonly name: "dur-ui";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "200ms";
     }, {
         readonly name: "button-font";
         readonly tier: "component";
@@ -7420,6 +7659,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "effect";
         readonly group: "components";
         readonly value: "none";
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly tier: "component";
@@ -7578,6 +7823,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px";
+    }, {
+        readonly name: "dialog-edge";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly tier: "component";
@@ -7620,6 +7871,36 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly tier: "component";
+        readonly type: "number";
+        readonly group: "components";
+        readonly value: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly tier: "component";
@@ -8006,6 +8287,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly tier: "component";
+        readonly type: "easing";
+        readonly group: "components";
+        readonly value: "var(--iox-ease-standard)";
     }];
 }, {
     readonly id: "glass";
@@ -8694,6 +8981,30 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "number";
         readonly group: "motion";
         readonly value: "0.97";
+    }, {
+        readonly name: "dur-hover";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "150ms";
+    }, {
+        readonly name: "ease-hover";
+        readonly tier: "semantic";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly value: "ease";
+    }, {
+        readonly name: "dur-press";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "100ms";
+    }, {
+        readonly name: "dur-ui";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "280ms";
     }, {
         readonly name: "button-font";
         readonly tier: "component";
@@ -8977,6 +9288,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly group: "components";
         readonly value: "var(--iox-blur-surface)";
         readonly overridden: true;
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly tier: "component";
@@ -9146,6 +9463,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly group: "components";
         readonly value: "var(--iox-border-width)";
         readonly overridden: true;
+    }, {
+        readonly name: "dialog-edge";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly tier: "component";
@@ -9188,6 +9511,36 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly tier: "component";
+        readonly type: "number";
+        readonly group: "components";
+        readonly value: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly tier: "component";
@@ -9587,6 +9940,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly tier: "component";
+        readonly type: "easing";
+        readonly group: "components";
+        readonly value: "var(--iox-ease-standard)";
     }];
 }, {
     readonly id: "bloom";
@@ -10259,6 +10618,30 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "number";
         readonly group: "motion";
         readonly value: "0.97";
+    }, {
+        readonly name: "dur-hover";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "150ms";
+    }, {
+        readonly name: "ease-hover";
+        readonly tier: "semantic";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly value: "ease";
+    }, {
+        readonly name: "dur-press";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "100ms";
+    }, {
+        readonly name: "dur-ui";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "280ms";
     }, {
         readonly name: "button-font";
         readonly tier: "component";
@@ -10539,6 +10922,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "effect";
         readonly group: "components";
         readonly value: "none";
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly tier: "component";
@@ -10697,6 +11086,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "0px";
+    }, {
+        readonly name: "dialog-edge";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly tier: "component";
@@ -10739,6 +11134,36 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly tier: "component";
+        readonly type: "number";
+        readonly group: "components";
+        readonly value: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly tier: "component";
@@ -11132,6 +11557,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly tier: "component";
+        readonly type: "easing";
+        readonly group: "components";
+        readonly value: "var(--iox-ease-standard)";
     }];
 }, {
     readonly id: "pop";
@@ -11797,6 +12228,30 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "number";
         readonly group: "motion";
         readonly value: "0.97";
+    }, {
+        readonly name: "dur-hover";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "80ms";
+    }, {
+        readonly name: "ease-hover";
+        readonly tier: "semantic";
+        readonly type: "easing";
+        readonly group: "motion";
+        readonly value: "ease";
+    }, {
+        readonly name: "dur-press";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "60ms";
+    }, {
+        readonly name: "dur-ui";
+        readonly tier: "semantic";
+        readonly type: "duration";
+        readonly group: "motion";
+        readonly value: "140ms";
     }, {
         readonly name: "button-font";
         readonly tier: "component";
@@ -12086,6 +12541,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "effect";
         readonly group: "components";
         readonly value: "none";
+    }, {
+        readonly name: "card-shadow-raise";
+        readonly tier: "component";
+        readonly type: "shadow";
+        readonly group: "components";
+        readonly value: "var(--iox-card-shadow-hover)";
     }, {
         readonly name: "panel-bg";
         readonly tier: "component";
@@ -12248,6 +12709,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly group: "components";
         readonly value: "var(--iox-border-width)";
         readonly overridden: true;
+    }, {
+        readonly name: "dialog-edge";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-line)";
     }, {
         readonly name: "image-radius";
         readonly tier: "component";
@@ -12292,6 +12759,36 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "keyword";
         readonly group: "components";
         readonly value: "underline 2px var(--iox-accent-text)";
+    }, {
+        readonly name: "link-underline-rest";
+        readonly tier: "component";
+        readonly type: "number";
+        readonly group: "components";
+        readonly value: "1";
+    }, {
+        readonly name: "link-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "max(1px, 0.06em)";
+    }, {
+        readonly name: "link-underline-offset";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "0.12em";
+    }, {
+        readonly name: "link-current-underline";
+        readonly tier: "component";
+        readonly type: "color";
+        readonly group: "components";
+        readonly value: "var(--iox-accent-text)";
+    }, {
+        readonly name: "link-current-underline-thickness";
+        readonly tier: "component";
+        readonly type: "size";
+        readonly group: "components";
+        readonly value: "2px";
     }, {
         readonly name: "tabbar-bg";
         readonly tier: "component";
@@ -12690,6 +13187,12 @@ declare const SPEC_FLAVOR_PACKS: readonly [{
         readonly type: "size";
         readonly group: "components";
         readonly value: "64px";
+    }, {
+        readonly name: "slider-ease";
+        readonly tier: "component";
+        readonly type: "easing";
+        readonly group: "components";
+        readonly value: "var(--iox-ease-standard)";
     }];
 }];
 declare const SPEC_CONTRAST: {
@@ -13244,17 +13747,76 @@ declare function compileTokenCss(tokens: ReadonlyArray<DesignTokenLike> | null |
 
 /** The token the browser's own chrome takes its colour from: the page's ground. */
 declare const THEME_COLOR_TOKEN = "bg";
+/** …or the header's ground, when a header stays at the top of the screen (premium components T2, M4). */
+declare const HEADER_THEME_COLOR_TOKEN = "nav-bg";
 interface ThemeColors {
     light?: string;
     dark?: string;
 }
+interface ThemeColorOptions {
+    /** A header stays at the top of the screen (it stays, or hides and comes back): the browser's chrome meets the
+     *  HEADER, so it takes the header's ground when that is a solid colour (a translucent one falls back to the page's). */
+    header?: boolean;
+}
 /**
  * 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.
  */
-declare function themeColors(rows: ReadonlyArray<DesignTokenLike> | null | undefined, mode?: DesignMode | string | null | undefined): ThemeColors;
+declare function themeColors(rows: ReadonlyArray<DesignTokenLike> | null | undefined, mode?: DesignMode | string | null | undefined, options?: ThemeColorOptions): ThemeColors;
+
+/**
+ * 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.
+ */
+declare enum HeaderBehaviour {
+    /** It scrolls away with the page (the default; what every header saved before M4 does). */
+    Scrolls = "scrolls",
+    /** It stays at the top while the page scrolls under it. */
+    Stays = "stays",
+    /** It steps aside while the page scrolls down and comes back the moment it scrolls up. */
+    Hides = "hides"
+}
+/** What separates the header from the page once the page has moved under it (Emil 99: an edge, not a divider). */
+declare enum HeaderEdge {
+    /** A soft fade of the header's own ground over the content under it. */
+    Fade = "fade",
+    /** A hairline in the header's border colour. */
+    Line = "line",
+    None = "none"
+}
+/** The traits, stored in the root's props (no default: a plain Container saves neither). */
+declare enum HeaderTrait {
+    Behaviour = "headerBehaviour",
+    Edge = "headerEdge"
+}
+declare enum HeaderAttribute {
+    /** `stays` | `hides` on a header that stays at the top. Absent: it scrolls away. */
+    Behaviour = "data-iox-header",
+    /** `fade` | `line` | `none`: the edge it shows once the page has scrolled. Absent: its look's own divider stays. */
+    Edge = "data-iox-header-edge",
+    /** Written by the header runtime while a `hides` header has stepped aside. */
+    Hidden = "data-iox-header-hidden"
+}
+/** What a composed header gets (the `nav.*` patterns' `header`, the palette's Navigation bar). */
+declare const COMPOSED_HEADER: Readonly<{
+    behaviour: HeaderBehaviour;
+    edge: HeaderEdge;
+}>;
+/** A stored behaviour, or Scrolls for anything else. */
+declare function headerBehaviourOf(value: unknown): HeaderBehaviour;
+/** A stored edge, or null (none chosen: the look's divider stays as it is). */
+declare function headerEdgeOf(value: unknown): HeaderEdge | null;
+/** True when the header keeps its place at the top of the screen (it stays, or it hides and comes back). */
+declare function headerStaysAtTop(behaviour: unknown): boolean;
+/** The attributes a header renders, from its two trait values — `{}` for a header that keeps today's behaviour. */
+declare function headerAttributes(behaviour: unknown, edge: unknown): Record<string, string>;
 
 /**
  * Flavors v1 (flavors-and-theming-plan.md, F1–F2): a pack is its TOKENS plus the accent hue
@@ -14675,5 +15237,5 @@ declare function presetChoices(id: string, mode?: DesignMode): DesignChoices | n
  */
 declare function stylePresetOfChoices(choices: DesignChoices | null | undefined): StylePreset | undefined;
 
-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 type { AccentBackgrounds, AccentGround, AccentTokenName, AdoptContext, AdoptReport, AdoptableNode, AdoptedNode, AnimateId, ApplyElementStyleResult, BetweenId, ButtonBlockLinkProps, ColourCheck, ColourFlavor, ContrastFinding, DensityId, DesignApplyOptions, DesignChoices, DesignClassSource, DesignConfigEntry, DesignMode, DesignMotion, DesignRevertSnapshot, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, ElementStyle, ElementStyleTarget, ElementStyleTraitLike, FlavorColours, FlavorPack, FlavorPackV2, FlavorPalette, FlavorRevertPlan, FlavorRevertSnapshot, FlavorRevertWrite, FlavorSeedOptions, FlavorSeedPlan, FlavorSpecToken, FlavorTintConfig, FlavorTokenDef, FontDescriptor, FontFamilyGroup, FontFamilyRemoval, FontFamilyToken, FontFormat, FontPair, FontRoleToken, FontStyle, FontWeight, FontWeightRange, FontsForTokensOptions, KeptEdit, LinearSpring, MissingFontRole, MoodId, MotionId, NodeLinkProps, OkLab, OwnedTrait, OwnedTraitStatus, PalettePreset, PresetMode, ResolvedMode, Rgb, Rgba, SchemeId, ScriptId, ScrollId, SeedBaseline, SeedExpectation, ShapeId, SkippedNode, StaggerSpec, StoredDesign, StoredDesignTokenRow, StylePreset, SupersededStyleValue, SwissMigration, SwitchElementStyleResult, ThemeColors, TimedAction, TintId, TintLevel, TokenCssBlocks, TokenCssOptions };
+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 };
+export type { AccentBackgrounds, AccentGround, AccentTokenName, AdoptContext, AdoptReport, AdoptableNode, AdoptedNode, AnimateId, ApplyElementStyleResult, BetweenId, ButtonBlockLinkProps, ColourCheck, ColourFlavor, ContrastFinding, DensityId, DesignApplyOptions, DesignChoices, DesignClassSource, DesignConfigEntry, DesignMode, DesignMotion, DesignRevertSnapshot, DesignTokenGroup, DesignTokenLike, DesignTokenRow, DesignTokenTier, DesignTokenType, ElementStyle, ElementStyleTarget, ElementStyleTraitLike, FlavorColours, FlavorPack, FlavorPackV2, FlavorPalette, FlavorRevertPlan, FlavorRevertSnapshot, FlavorRevertWrite, FlavorSeedOptions, FlavorSeedPlan, FlavorSpecToken, FlavorTintConfig, FlavorTokenDef, FontDescriptor, FontFamilyGroup, FontFamilyRemoval, FontFamilyToken, FontFormat, FontPair, FontRoleToken, FontStyle, FontWeight, FontWeightRange, FontsForTokensOptions, KeptEdit, LinearSpring, MissingFontRole, MoodId, MotionId, NodeLinkProps, OkLab, OwnedTrait, OwnedTraitStatus, PalettePreset, PresetMode, ResolvedMode, Rgb, Rgba, SchemeId, ScriptId, ScrollId, SeedBaseline, SeedExpectation, ShapeId, SkippedNode, StaggerSpec, StoredDesign, StoredDesignTokenRow, StylePreset, SupersededStyleValue, SwissMigration, SwitchElementStyleResult, ThemeColorOptions, ThemeColors, TimedAction, TintId, TintLevel, TokenCssBlocks, TokenCssOptions };