@nswds/tokens 3.8.0 → 3.9.0

package/dist/js/motion/global.d.ts

@@ -1,10 +1,20 @@
 export declare const duration: {
+  none: string
+  instant: string
   fast: string
   base: string
   slow: string
+  slower: string
 }
 export declare const easing: {
   standard: string
   decelerate: string
   accelerate: string
+  linear: string
+}
+export declare const transition: {
+  hover: string
+  enter: string
+  exit: string
+  overlay: string
 }

package/dist/js/motion/global.js

@@ -1,10 +1,20 @@
 export const duration = {
+  none: '0ms',
+  instant: '100ms',
   fast: '150ms',
   base: '250ms',
   slow: '400ms',
+  slower: '600ms',
 }
 export const easing = {
   standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
   decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
   accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
+  linear: 'cubic-bezier(0, 0, 1, 1)',
+}
+export const transition = {
+  hover: '100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+  enter: '250ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  exit: '150ms cubic-bezier(0.4, 0, 1, 1) 0ms',
+  overlay: '400ms cubic-bezier(0, 0, 0.2, 1) 0ms',
 }

package/dist/json/motion/global.json

@@ -1,12 +1,22 @@
 {
   "duration": {
+    "duration-none": "0ms",
+    "duration-instant": "100ms",
     "duration-fast": "150ms",
     "duration-base": "250ms",
-    "duration-slow": "400ms"
+    "duration-slow": "400ms",
+    "duration-slower": "600ms"
   },
   "easing": {
     "easing-standard": "cubic-bezier(0.4, 0, 0.2, 1)",
     "easing-decelerate": "cubic-bezier(0, 0, 0.2, 1)",
-    "easing-accelerate": "cubic-bezier(0.4, 0, 1, 1)"
+    "easing-accelerate": "cubic-bezier(0.4, 0, 1, 1)",
+    "easing-linear": "cubic-bezier(0, 0, 1, 1)"
+  },
+  "transition": {
+    "transition-hover": "100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+    "transition-enter": "250ms cubic-bezier(0, 0, 0.2, 1) 0ms",
+    "transition-exit": "150ms cubic-bezier(0.4, 0, 1, 1) 0ms",
+    "transition-overlay": "400ms cubic-bezier(0, 0, 0.2, 1) 0ms"
   }
 }

package/dist/less/motion/global.less

@@ -1,6 +1,14 @@
-@duration-fast: 150ms; // Fast — quick feedback on small elements (hovers, toggles, focus rings). DRAFT pending design review.
-@duration-base: 250ms; // Base — the default duration for most UI transitions. DRAFT pending design review.
-@duration-slow: 400ms; // Slow — larger surfaces entering or leaving (modals, drawers, sheets). DRAFT pending design review.
-@easing-standard: cubic-bezier(0.4, 0, 0.2, 1); // Standard ease-in-out — the default curve for elements moving within the viewport. DRAFT pending design review.
-@easing-decelerate: cubic-bezier(0, 0, 0.2, 1); // Decelerate (ease-out) — elements entering the screen, fast then settling. DRAFT pending design review.
-@easing-accelerate: cubic-bezier(0.4, 0, 1, 1); // Accelerate (ease-in) — elements leaving the screen, building speed as they exit. DRAFT pending design review.
+@duration-none: 0ms; // No motion. Used as the reduced-motion target and the default transition delay.
+@duration-instant: 100ms; // Micro-feedback on small elements — hover, focus rings, toggles, small fades.
+@duration-fast: 150ms; // Quick transitions over short distances — dropdowns, popovers, exits.
+@duration-base: 250ms; // Default duration for most UI transitions.
+@duration-slow: 400ms; // Larger surfaces entering or leaving — modals, drawers, sheets.
+@duration-slower: 600ms; // Full-screen transitions and background dimming behind overlays.
+@easing-standard: cubic-bezier(0.4, 0, 0.2, 1); // Standard ease-in-out for elements moving within the viewport, visible from start to end.
+@easing-decelerate: cubic-bezier(0, 0, 0.2, 1); // Entrance (ease-out) for elements appearing in view, fast then settling. Also used for surfaces that leave but stay nearby, ready to return (e.g. a side panel).
+@easing-accelerate: cubic-bezier(0.4, 0, 1, 1); // Exit (ease-in) for elements leaving view permanently, building speed as they go.
+@easing-linear: cubic-bezier(0, 0, 1, 1); // No easing. For continuous or progress-driven motion — spinners, progress bars, rotation.
+@transition-hover: 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; // Hover, focus and toggle feedback on interactive elements.
+@transition-enter: 250ms cubic-bezier(0, 0, 0.2, 1) 0ms; // Elements entering the view — menus, popovers, tooltips.
+@transition-exit: 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; // Elements leaving the view permanently.
+@transition-overlay: 400ms cubic-bezier(0, 0, 0.2, 1) 0ms; // Modals, drawers and sheets entering over a dimmed background.

package/dist/less/z-index/global.less

@@ -1,8 +1,8 @@
-@z-index-base: 0; // Base stacking level (0) — default in-flow content. DRAFT pending design review.
-@z-index-dropdown: 1000; // Dropdown menus and select popups. DRAFT pending design review.
-@z-index-sticky: 1100; // Sticky elements that pin on scroll (headers, toolbars). DRAFT pending design review.
-@z-index-overlay: 1200; // Full-screen overlay scrims sitting behind modal content. DRAFT pending design review.
-@z-index-modal: 1300; // Modal dialogs and side sheets. DRAFT pending design review.
-@z-index-popover: 1400; // Popovers anchored to a trigger, above modals. DRAFT pending design review.
-@z-index-toast: 1500; // Toast and snackbar notifications. DRAFT pending design review.
-@z-index-tooltip: 1600; // Tooltips — the top-most interactive layer. DRAFT pending design review.
+@z-index-base: 0; // Base stacking level (0) — default in-flow content.
+@z-index-dropdown: 1000; // Dropdown menus and select popups.
+@z-index-sticky: 1100; // Sticky elements that pin on scroll (headers, toolbars).
+@z-index-overlay: 1200; // Full-screen overlay scrims sitting behind modal content.
+@z-index-modal: 1300; // Modal dialogs and side sheets.
+@z-index-popover: 1400; // Popovers anchored to a trigger, above modals.
+@z-index-toast: 1500; // Toast and snackbar notifications.
+@z-index-tooltip: 1600; // Tooltips — the top-most interactive layer.

package/dist/scss/motion/global.scss

@@ -1,6 +1,14 @@
-$duration-fast: 150ms; // Fast — quick feedback on small elements (hovers, toggles, focus rings). DRAFT pending design review.
-$duration-base: 250ms; // Base — the default duration for most UI transitions. DRAFT pending design review.
-$duration-slow: 400ms; // Slow — larger surfaces entering or leaving (modals, drawers, sheets). DRAFT pending design review.
-$easing-standard: cubic-bezier(0.4, 0, 0.2, 1); // Standard ease-in-out — the default curve for elements moving within the viewport. DRAFT pending design review.
-$easing-decelerate: cubic-bezier(0, 0, 0.2, 1); // Decelerate (ease-out) — elements entering the screen, fast then settling. DRAFT pending design review.
-$easing-accelerate: cubic-bezier(0.4, 0, 1, 1); // Accelerate (ease-in) — elements leaving the screen, building speed as they exit. DRAFT pending design review.
+$duration-none: 0ms; // No motion. Used as the reduced-motion target and the default transition delay.
+$duration-instant: 100ms; // Micro-feedback on small elements — hover, focus rings, toggles, small fades.
+$duration-fast: 150ms; // Quick transitions over short distances — dropdowns, popovers, exits.
+$duration-base: 250ms; // Default duration for most UI transitions.
+$duration-slow: 400ms; // Larger surfaces entering or leaving — modals, drawers, sheets.
+$duration-slower: 600ms; // Full-screen transitions and background dimming behind overlays.
+$easing-standard: cubic-bezier(0.4, 0, 0.2, 1); // Standard ease-in-out for elements moving within the viewport, visible from start to end.
+$easing-decelerate: cubic-bezier(0, 0, 0.2, 1); // Entrance (ease-out) for elements appearing in view, fast then settling. Also used for surfaces that leave but stay nearby, ready to return (e.g. a side panel).
+$easing-accelerate: cubic-bezier(0.4, 0, 1, 1); // Exit (ease-in) for elements leaving view permanently, building speed as they go.
+$easing-linear: cubic-bezier(0, 0, 1, 1); // No easing. For continuous or progress-driven motion — spinners, progress bars, rotation.
+$transition-hover: 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; // Hover, focus and toggle feedback on interactive elements.
+$transition-enter: 250ms cubic-bezier(0, 0, 0.2, 1) 0ms; // Elements entering the view — menus, popovers, tooltips.
+$transition-exit: 150ms cubic-bezier(0.4, 0, 1, 1) 0ms; // Elements leaving the view permanently.
+$transition-overlay: 400ms cubic-bezier(0, 0, 0.2, 1) 0ms; // Modals, drawers and sheets entering over a dimmed background.

package/dist/scss/z-index/global.scss

@@ -1,8 +1,8 @@
-$z-index-base: 0; // Base stacking level (0) — default in-flow content. DRAFT pending design review.
-$z-index-dropdown: 1000; // Dropdown menus and select popups. DRAFT pending design review.
-$z-index-sticky: 1100; // Sticky elements that pin on scroll (headers, toolbars). DRAFT pending design review.
-$z-index-overlay: 1200; // Full-screen overlay scrims sitting behind modal content. DRAFT pending design review.
-$z-index-modal: 1300; // Modal dialogs and side sheets. DRAFT pending design review.
-$z-index-popover: 1400; // Popovers anchored to a trigger, above modals. DRAFT pending design review.
-$z-index-toast: 1500; // Toast and snackbar notifications. DRAFT pending design review.
-$z-index-tooltip: 1600; // Tooltips — the top-most interactive layer. DRAFT pending design review.
+$z-index-base: 0; // Base stacking level (0) — default in-flow content.
+$z-index-dropdown: 1000; // Dropdown menus and select popups.
+$z-index-sticky: 1100; // Sticky elements that pin on scroll (headers, toolbars).
+$z-index-overlay: 1200; // Full-screen overlay scrims sitting behind modal content.
+$z-index-modal: 1300; // Modal dialogs and side sheets.
+$z-index-popover: 1400; // Popovers anchored to a trigger, above modals.
+$z-index-toast: 1500; // Toast and snackbar notifications.
+$z-index-tooltip: 1600; // Tooltips — the top-most interactive layer.

package/dist/tailwind/motion/global.css

@@ -1,8 +1,16 @@
 @theme {
+  --duration-none: 0ms;
+  --duration-instant: 100ms;
   --duration-fast: 150ms;
   --duration-base: 250ms;
   --duration-slow: 400ms;
+  --duration-slower: 600ms;
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --ease-linear: cubic-bezier(0, 0, 1, 1);
+  --transition-hover: 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  --transition-enter: 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  --transition-exit: 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
+  --transition-overlay: 400ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 }

package/dist/tailwind/preset.css

@@ -960,12 +960,20 @@
 
 /* ── tailwind/motion/global.css ── */
 @theme {
+  --duration-none: 0ms;
+  --duration-instant: 100ms;
   --duration-fast: 150ms;
   --duration-base: 250ms;
   --duration-slow: 400ms;
+  --duration-slower: 600ms;
   --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
   --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
+  --ease-linear: cubic-bezier(0, 0, 1, 1);
+  --transition-hover: 100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  --transition-enter: 250ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  --transition-exit: 150ms cubic-bezier(0.4, 0, 1, 1) 0ms;
+  --transition-overlay: 400ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 }
 
 

package/dist/tokens/global/motion/canonical.json

@@ -1,45 +1,94 @@
 {
   "duration": {
+    "none": {
+      "$type": "duration",
+      "$description": "No motion. Used as the reduced-motion target and the default transition delay.",
+      "$value": { "value": 0, "unit": "ms" }
+    },
+    "instant": {
+      "$type": "duration",
+      "$description": "Micro-feedback on small elements — hover, focus rings, toggles, small fades.",
+      "$value": { "value": 100, "unit": "ms" }
+    },
     "fast": {
       "$type": "duration",
-      "$description": "Fast — quick feedback on small elements (hovers, toggles, focus rings). DRAFT pending design review.",
-      "$value": {
-        "value": 150,
-        "unit": "ms"
-      }
+      "$description": "Quick transitions over short distances — dropdowns, popovers, exits.",
+      "$value": { "value": 150, "unit": "ms" }
     },
     "base": {
       "$type": "duration",
-      "$description": "Base — the default duration for most UI transitions. DRAFT pending design review.",
-      "$value": {
-        "value": 250,
-        "unit": "ms"
-      }
+      "$description": "Default duration for most UI transitions.",
+      "$value": { "value": 250, "unit": "ms" }
     },
     "slow": {
       "$type": "duration",
-      "$description": "Slow — larger surfaces entering or leaving (modals, drawers, sheets). DRAFT pending design review.",
-      "$value": {
-        "value": 400,
-        "unit": "ms"
-      }
+      "$description": "Larger surfaces entering or leaving — modals, drawers, sheets.",
+      "$value": { "value": 400, "unit": "ms" }
+    },
+    "slower": {
+      "$type": "duration",
+      "$description": "Full-screen transitions and background dimming behind overlays.",
+      "$value": { "value": 600, "unit": "ms" }
     }
   },
   "easing": {
     "standard": {
       "$type": "cubicBezier",
-      "$description": "Standard ease-in-out — the default curve for elements moving within the viewport. DRAFT pending design review.",
+      "$description": "Standard ease-in-out for elements moving within the viewport, visible from start to end.",
       "$value": [0.4, 0, 0.2, 1]
     },
     "decelerate": {
       "$type": "cubicBezier",
-      "$description": "Decelerate (ease-out) — elements entering the screen, fast then settling. DRAFT pending design review.",
+      "$description": "Entrance (ease-out) for elements appearing in view, fast then settling. Also used for surfaces that leave but stay nearby, ready to return (e.g. a side panel).",
       "$value": [0, 0, 0.2, 1]
     },
     "accelerate": {
       "$type": "cubicBezier",
-      "$description": "Accelerate (ease-in) — elements leaving the screen, building speed as they exit. DRAFT pending design review.",
+      "$description": "Exit (ease-in) for elements leaving view permanently, building speed as they go.",
       "$value": [0.4, 0, 1, 1]
+    },
+    "linear": {
+      "$type": "cubicBezier",
+      "$description": "No easing. For continuous or progress-driven motion — spinners, progress bars, rotation.",
+      "$value": [0, 0, 1, 1]
+    }
+  },
+  "transition": {
+    "hover": {
+      "$type": "transition",
+      "$description": "Hover, focus and toggle feedback on interactive elements.",
+      "$value": {
+        "duration": "{duration.instant}",
+        "delay": "{duration.none}",
+        "timingFunction": "{easing.standard}"
+      }
+    },
+    "enter": {
+      "$type": "transition",
+      "$description": "Elements entering the view — menus, popovers, tooltips.",
+      "$value": {
+        "duration": "{duration.base}",
+        "delay": "{duration.none}",
+        "timingFunction": "{easing.decelerate}"
+      }
+    },
+    "exit": {
+      "$type": "transition",
+      "$description": "Elements leaving the view permanently.",
+      "$value": {
+        "duration": "{duration.fast}",
+        "delay": "{duration.none}",
+        "timingFunction": "{easing.accelerate}"
+      }
+    },
+    "overlay": {
+      "$type": "transition",
+      "$description": "Modals, drawers and sheets entering over a dimmed background.",
+      "$value": {
+        "duration": "{duration.slow}",
+        "delay": "{duration.none}",
+        "timingFunction": "{easing.decelerate}"
+      }
     }
   }
 }

package/dist/tokens/global/z-index/canonical.json

@@ -2,42 +2,42 @@
   "z-index": {
     "base": {
       "$type": "number",
-      "$description": "Base stacking level (0) — default in-flow content. DRAFT pending design review.",
+      "$description": "Base stacking level (0) — default in-flow content.",
       "$value": 0
     },
     "dropdown": {
       "$type": "number",
-      "$description": "Dropdown menus and select popups. DRAFT pending design review.",
+      "$description": "Dropdown menus and select popups.",
       "$value": 1000
     },
     "sticky": {
       "$type": "number",
-      "$description": "Sticky elements that pin on scroll (headers, toolbars). DRAFT pending design review.",
+      "$description": "Sticky elements that pin on scroll (headers, toolbars).",
       "$value": 1100
     },
     "overlay": {
       "$type": "number",
-      "$description": "Full-screen overlay scrims sitting behind modal content. DRAFT pending design review.",
+      "$description": "Full-screen overlay scrims sitting behind modal content.",
       "$value": 1200
     },
     "modal": {
       "$type": "number",
-      "$description": "Modal dialogs and side sheets. DRAFT pending design review.",
+      "$description": "Modal dialogs and side sheets.",
       "$value": 1300
     },
     "popover": {
       "$type": "number",
-      "$description": "Popovers anchored to a trigger, above modals. DRAFT pending design review.",
+      "$description": "Popovers anchored to a trigger, above modals.",
       "$value": 1400
     },
     "toast": {
       "$type": "number",
-      "$description": "Toast and snackbar notifications. DRAFT pending design review.",
+      "$description": "Toast and snackbar notifications.",
       "$value": 1500
     },
     "tooltip": {
       "$type": "number",
-      "$description": "Tooltips — the top-most interactive layer. DRAFT pending design review.",
+      "$description": "Tooltips — the top-most interactive layer.",
       "$value": 1600
     }
   }

package/dist/ts/motion/global.ts

@@ -1,10 +1,20 @@
 export const duration = {
+  none: '0ms',
+  instant: '100ms',
   fast: '150ms',
   base: '250ms',
   slow: '400ms',
+  slower: '600ms',
 }
 export const easing = {
   standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
   decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
   accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
+  linear: 'cubic-bezier(0, 0, 1, 1)',
+}
+export const transition = {
+  hover: '100ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+  enter: '250ms cubic-bezier(0, 0, 0.2, 1) 0ms',
+  exit: '150ms cubic-bezier(0.4, 0, 1, 1) 0ms',
+  overlay: '400ms cubic-bezier(0, 0, 0.2, 1) 0ms',
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nswds/tokens",
-  "version": "3.8.0",
+  "version": "3.9.0",
   "description": "Design tokens for NSW Government digital products, providing colour tokens, theme outputs, and brand assets for use across CSS, SCSS, Less, JavaScript, TypeScript, JSON, Tailwind, Figma, and DTCG-compatible workflows.",
   "license": "MPL-2.0",
   "keywords": [