@primer/primitives 11.5.0-rc.eeffc81e → 11.5.0

package/DESIGN_TOKENS_GUIDE.md

@@ -98,6 +98,30 @@
 | MUST    | Match padding density to control's purpose  |
 | SHOULD  | Use `medium` size as default                |
 
+### Z-Index
+
+```
+--zIndex-[layer]
+  └── layer: behind | default | sticky | dropdown | overlay | modal | popover | skipLink
+```
+
+| Keyword | Rule                                                                                                         |
+| ------- | ------------------------------------------------------------------------------------------------------------ |
+| MUST    | Use z-index tokens instead of raw numeric values                                                             |
+| MUST    | Use `skipLink` only for accessibility skip-navigation links                                                  |
+| MUST    | Pair z-index with appropriate shadow level (see table below)                                                 |
+| SHOULD  | Prefer creating a new stacking context (`isolation: isolate`) over escalating z-index                        |
+| NEVER   | Use `behind` (-1) without verifying no ancestor creates a stacking context (transform, opacity, filter, etc) |
+| NEVER   | Use arbitrary z-index values outside the token scale                                                         |
+
+**Shadow ↔ Z-Index Alignment:**
+
+| Shadow Level                   | Z-Index Token                        | Example               |
+| ------------------------------ | ------------------------------------ | --------------------- |
+| `shadow.resting.*`             | `zIndex.default` / `zIndex.sticky`   | Cards, sticky headers |
+| `shadow.floating.small/medium` | `zIndex.dropdown` / `zIndex.overlay` | Menus, drawers        |
+| `shadow.floating.large/xlarge` | `zIndex.modal` / `zIndex.popover`    | Dialogs, tooltips     |
+
 ---
 
 ## Decision Tree: Easing Selection

package/DESIGN_TOKENS_SPEC.md

@@ -568,6 +568,48 @@ Monospace text styles for code blocks and inline code.
 | **text-codeBlock-shorthand** | Default style for rendering code blocks. | code-block, pre-element, code-snippet | MUST use for multi-line code. Use monospace font stack. |
 | **text-codeInline-shorthand** | Inline code blocks using em units to inherit size from its parent. | inline-code, code-element, variable-name | Use for inline code within text. Size inherits from parent using em units. |
 
+## ZIndex
+
+### zIndex-behind
+Place element behind base content. Use for decorative backgrounds or canvas elements.
+**U:** background-pattern, canvas-element, decorative-background
+**R:** Use to push an element behind its siblings. WARNING: Negative z-index can behave unpredictably if any ancestor creates a new stacking context (via transform, opacity < 1, filter, will-change, etc.). Only use when you control the full stacking context chain. Do NOT use as a general "hide" mechanism.
+
+### zIndex-default
+Default stacking order. No elevation above surrounding content.
+**U:** default-content, in-flow-element, reset
+**R:** Use to explicitly reset z-index to the default layer. Suitable for elements that should participate in normal document flow stacking. Do NOT use for any element that needs to appear above other content.
+
+### zIndex-dropdown
+Dropdown menus and select panels that appear above page content.
+**U:** autocomplete-list, dropdown-menu, select-panel
+**R:** Use for menus, select panels, and autocomplete lists that overlay page content. These should appear above sticky elements but below overlays and modals. Pair -> `shadow.floating.small` or `shadow.floating.medium` for visual elevation.
+
+### zIndex-modal
+Modal dialogs and full-screen overlays.
+**U:** dialog, full-screen-overlay, modal-dialog
+**R:** Use for modal dialogs that require user interaction before returning to the page. MUST trap focus within the modal. MUST appear above all other page content except popovers and skip links. Pair -> `shadow.floating.large` or `shadow.floating.xlarge` for visual elevation.
+
+### zIndex-overlay
+Overlay backdrops, side panels, and drawers.
+**U:** drawer, overlay-backdrop, side-panel
+**R:** Use for overlay surfaces that partially cover the page — drawers, side panels, and backdrop layers. These appear above dropdowns but below modal dialogs. SHOULD be paired with a backdrop/scrim element to indicate the overlay is blocking interaction with content beneath.
+
+### zIndex-popover
+Tooltips and popovers that appear above all normal UI.
+**U:** hover-card, popover, tooltip
+**R:** Use for tooltips, popovers, and hover cards that must appear above all other UI elements including modals. These are the highest layer in normal UI. Do NOT use for persistent navigation — use `sticky` instead.
+
+### zIndex-skipLink
+Accessibility skip links. Must always be the topmost layer.
+**U:** skip-link, skip-navigation, skip-to-content
+**R:** MUST use for accessibility skip links that allow keyboard users to bypass navigation. This is the highest z-index level and MUST always appear above everything else including modals and tooltips. NEVER use for non-accessibility purposes.
+
+### zIndex-sticky
+Sticky elements that remain visible while scrolling.
+**U:** sticky-header, sticky-sidebar, sticky-table-header
+**R:** MUST use with `position: sticky` or `position: fixed` for headers, sidebars, and navigation bars that persist during scroll. Do NOT use for floating overlays or dropdowns — use higher z-index levels instead.
+
 ---
 
 **Final Directive for AI**:

package/dist/css/base/size/z-index.css

@@ -0,0 +1,9 @@
+:root {
+  --base-zIndex-0: 0;
+  --base-zIndex-100: 100;
+  --base-zIndex-200: 200;
+  --base-zIndex-300: 300;
+  --base-zIndex-400: 400;
+  --base-zIndex-500: 500;
+  --base-zIndex-600: 600;
+}

package/dist/css/functional/size/z-index.css

@@ -0,0 +1,10 @@
+:root {
+  --zIndex-behind: -1; /** Place element behind base content. Use for decorative backgrounds or canvas elements. */
+  --zIndex-default: 0; /** Default stacking order. No elevation above surrounding content. */
+  --zIndex-dropdown: 200; /** Dropdown menus and select panels that appear above page content. */
+  --zIndex-modal: 400; /** Modal dialogs and full-screen overlays. */
+  --zIndex-overlay: 300; /** Overlay backdrops, side panels, and drawers. */
+  --zIndex-popover: 500; /** Tooltips and popovers that appear above all normal UI. */
+  --zIndex-skipLink: 600; /** Accessibility skip links. Must always be the topmost layer. */
+  --zIndex-sticky: 100; /** Sticky elements that remain visible while scrolling. */
+}

package/dist/css/functional/themes/dark-colorblind-high-contrast.css

@@ -172,9 +172,9 @@
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-selected: #2f3742;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #2a313c;
   --controlTrack-bgColor-active: #3d444d;
   --controlTrack-bgColor-hover: #2f3742;
-  --controlTrack-bgColor-rest: #2a313c;
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
   --data-blue-color-emphasis: #0576ff;
@@ -747,6 +747,7 @@
   --control-transparent-borderColor-hover: var(--borderColor-default);
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+  --controlTrack-bgColor-rest: #010409;
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
@@ -861,7 +862,6 @@
   --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
   --control-fgColor-rest: var(--fgColor-default);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
@@ -1075,9 +1075,9 @@
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-selected: #2f3742;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #2a313c;
     --controlTrack-bgColor-active: #3d444d;
     --controlTrack-bgColor-hover: #2f3742;
-    --controlTrack-bgColor-rest: #2a313c;
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
     --data-blue-color-emphasis: #0576ff;
@@ -1650,6 +1650,7 @@
     --control-transparent-borderColor-hover: var(--borderColor-default);
     --controlKnob-bgColor-checked: #ffffff;
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+    --controlTrack-bgColor-rest: #010409;
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
     --counter-bgColor-muted: var(--bgColor-neutral-muted);
@@ -1764,7 +1765,6 @@
     --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
     --control-fgColor-rest: var(--fgColor-default);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);

package/dist/css/functional/themes/dark-colorblind.css

@@ -167,9 +167,9 @@
   --control-transparent-borderColor-active: #00000000;
   --control-transparent-borderColor-hover: #00000000;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #262c36;
   --controlTrack-bgColor-active: #2f3742;
   --controlTrack-bgColor-hover: #2a313c;
-  --controlTrack-bgColor-rest: #262c36;
   --counter-borderColor: #00000000;
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
@@ -779,6 +779,7 @@
   --control-transparent-bgColor-disabled: var(--bgColor-disabled);
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+  --controlTrack-bgColor-rest: #010409;
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-default);
   --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -876,7 +877,6 @@
   --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-rest);
@@ -1070,9 +1070,9 @@
     --control-transparent-borderColor-active: #00000000;
     --control-transparent-borderColor-hover: #00000000;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #262c36;
     --controlTrack-bgColor-active: #2f3742;
     --controlTrack-bgColor-hover: #2a313c;
-    --controlTrack-bgColor-rest: #262c36;
     --counter-borderColor: #00000000;
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
@@ -1682,6 +1682,7 @@
     --control-transparent-bgColor-disabled: var(--bgColor-disabled);
     --controlKnob-bgColor-checked: #ffffff;
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+    --controlTrack-bgColor-rest: #010409;
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-default);
     --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -1779,7 +1780,6 @@
     --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
     --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-rest);

package/dist/css/functional/themes/dark-dimmed-high-contrast.css

@@ -179,9 +179,10 @@
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-selected: #2f3742;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #2a313c;
   --controlTrack-bgColor-active: #3d444d;
   --controlTrack-bgColor-hover: #2f3742;
-  --controlTrack-bgColor-rest: #2a313c;
+  --controlTrack-bgColor-rest: #151b23;
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
@@ -765,7 +766,6 @@
   --control-transparent-borderColor-active: var(--borderColor-default);
   --control-transparent-borderColor-hover: var(--borderColor-default);
   --controlKnob-bgColor-checked: #cdd9e5;
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -1082,9 +1082,10 @@
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-selected: #2f3742;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #2a313c;
     --controlTrack-bgColor-active: #3d444d;
     --controlTrack-bgColor-hover: #2f3742;
-    --controlTrack-bgColor-rest: #2a313c;
+    --controlTrack-bgColor-rest: #151b23;
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
@@ -1668,7 +1669,6 @@
     --control-transparent-borderColor-active: var(--borderColor-default);
     --control-transparent-borderColor-hover: var(--borderColor-default);
     --controlKnob-bgColor-checked: #cdd9e5;
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --controlTrack-fgColor-rest: var(--fgColor-muted);

package/dist/css/functional/themes/dark-dimmed.css

@@ -178,10 +178,11 @@
   --control-transparent-borderColor-active: #00000000;
   --control-transparent-borderColor-hover: #00000000;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #2a313c;
   --controlKnob-borderColor-rest: var(--control-borderColor-rest);
   --controlTrack-bgColor-active: #3d444d;
   --controlTrack-bgColor-hover: #2f3742;
-  --controlTrack-bgColor-rest: #2a313c;
+  --controlTrack-bgColor-rest: #151b23;
   --controlTrack-borderColor-rest: #3d444d;
   --counter-borderColor: #00000000;
   --data-auburn-color-emphasis: #a86f6b;
@@ -799,7 +800,6 @@
   --control-iconColor-rest: var(--fgColor-muted);
   --control-transparent-bgColor-disabled: var(--bgColor-disabled);
   --controlKnob-bgColor-checked: #cdd9e5;
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);
@@ -1081,10 +1081,11 @@
     --control-transparent-borderColor-active: #00000000;
     --control-transparent-borderColor-hover: #00000000;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #2a313c;
     --controlKnob-borderColor-rest: var(--control-borderColor-rest);
     --controlTrack-bgColor-active: #3d444d;
     --controlTrack-bgColor-hover: #2f3742;
-    --controlTrack-bgColor-rest: #2a313c;
+    --controlTrack-bgColor-rest: #151b23;
     --controlTrack-borderColor-rest: #3d444d;
     --counter-borderColor: #00000000;
     --data-auburn-color-emphasis: #a86f6b;
@@ -1702,7 +1703,6 @@
     --control-iconColor-rest: var(--fgColor-muted);
     --control-transparent-bgColor-disabled: var(--bgColor-disabled);
     --controlKnob-bgColor-checked: #cdd9e5;
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --controlTrack-fgColor-disabled: var(--fgColor-onEmphasis);

package/dist/css/functional/themes/dark-high-contrast.css

@@ -170,9 +170,9 @@
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-selected: #2f3742;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #2a313c;
   --controlTrack-bgColor-active: #3d444d;
   --controlTrack-bgColor-hover: #2f3742;
-  --controlTrack-bgColor-rest: #2a313c;
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
   --data-blue-color-emphasis: #0576ff;
@@ -744,6 +744,7 @@
   --control-transparent-borderColor-hover: var(--borderColor-default);
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+  --controlTrack-bgColor-rest: #010409;
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
@@ -859,7 +860,6 @@
   --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
   --control-fgColor-rest: var(--fgColor-default);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
@@ -1073,9 +1073,9 @@
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-selected: #2f3742;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #2a313c;
     --controlTrack-bgColor-active: #3d444d;
     --controlTrack-bgColor-hover: #2f3742;
-    --controlTrack-bgColor-rest: #2a313c;
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
     --data-blue-color-emphasis: #0576ff;
@@ -1647,6 +1647,7 @@
     --control-transparent-borderColor-hover: var(--borderColor-default);
     --controlKnob-bgColor-checked: #ffffff;
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+    --controlTrack-bgColor-rest: #010409;
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
     --counter-bgColor-muted: var(--bgColor-neutral-muted);
@@ -1762,7 +1763,6 @@
     --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
     --control-fgColor-rest: var(--fgColor-default);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);

package/dist/css/functional/themes/dark-tritanopia-high-contrast.css

@@ -173,9 +173,9 @@
   --control-transparent-bgColor-rest: #00000000;
   --control-transparent-bgColor-selected: #2f3742;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #2a313c;
   --controlTrack-bgColor-active: #3d444d;
   --controlTrack-bgColor-hover: #2f3742;
-  --controlTrack-bgColor-rest: #2a313c;
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
   --data-blue-color-emphasis: #0576ff;
@@ -746,6 +746,7 @@
   --control-transparent-borderColor-hover: var(--borderColor-default);
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+  --controlTrack-bgColor-rest: #010409;
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
   --counter-bgColor-muted: var(--bgColor-neutral-muted);
@@ -861,7 +862,6 @@
   --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
   --control-fgColor-rest: var(--fgColor-default);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-emphasis);
@@ -1076,9 +1076,9 @@
     --control-transparent-bgColor-rest: #00000000;
     --control-transparent-bgColor-selected: #2f3742;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #2a313c;
     --controlTrack-bgColor-active: #3d444d;
     --controlTrack-bgColor-hover: #2f3742;
-    --controlTrack-bgColor-rest: #2a313c;
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
     --data-blue-color-emphasis: #0576ff;
@@ -1649,6 +1649,7 @@
     --control-transparent-borderColor-hover: var(--borderColor-default);
     --controlKnob-bgColor-checked: #ffffff;
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+    --controlTrack-bgColor-rest: #010409;
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --counter-bgColor-emphasis: var(--bgColor-neutral-emphasis);
     --counter-bgColor-muted: var(--bgColor-neutral-muted);
@@ -1764,7 +1765,6 @@
     --control-danger-fgColor-hover: var(--fgColor-onEmphasis);
     --control-fgColor-rest: var(--fgColor-default);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-emphasis);

package/dist/css/functional/themes/dark-tritanopia.css

@@ -171,9 +171,9 @@
   --control-transparent-borderColor-active: #00000000;
   --control-transparent-borderColor-hover: #00000000;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #262c36;
   --controlTrack-bgColor-active: #2f3742;
   --controlTrack-bgColor-hover: #2a313c;
-  --controlTrack-bgColor-rest: #262c36;
   --counter-borderColor: #00000000;
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
@@ -780,6 +780,7 @@
   --control-transparent-bgColor-disabled: var(--bgColor-disabled);
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+  --controlTrack-bgColor-rest: #010409;
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-default);
   --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -876,7 +877,6 @@
   --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-rest);
@@ -1074,9 +1074,9 @@
     --control-transparent-borderColor-active: #00000000;
     --control-transparent-borderColor-hover: #00000000;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #262c36;
     --controlTrack-bgColor-active: #2f3742;
     --controlTrack-bgColor-hover: #2a313c;
-    --controlTrack-bgColor-rest: #262c36;
     --counter-borderColor: #00000000;
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
@@ -1683,6 +1683,7 @@
     --control-transparent-bgColor-disabled: var(--bgColor-disabled);
     --controlKnob-bgColor-checked: #ffffff;
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+    --controlTrack-bgColor-rest: #010409;
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-default);
     --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -1779,7 +1780,6 @@
     --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
     --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-rest);

package/dist/css/functional/themes/dark.css

@@ -165,9 +165,9 @@
   --control-transparent-borderColor-active: #00000000;
   --control-transparent-borderColor-hover: #00000000;
   --control-transparent-borderColor-rest: #00000000;
+  --controlKnob-bgColor-rest: #262c36;
   --controlTrack-bgColor-active: #2f3742;
   --controlTrack-bgColor-hover: #2a313c;
-  --controlTrack-bgColor-rest: #262c36;
   --counter-borderColor: #00000000;
   --data-auburn-color-emphasis: #a86f6b;
   --data-auburn-color-muted: #271817;
@@ -775,6 +775,7 @@
   --control-transparent-bgColor-disabled: var(--bgColor-disabled);
   --controlKnob-bgColor-checked: #ffffff;
   --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+  --controlTrack-bgColor-rest: #010409;
   --controlTrack-borderColor-disabled: var(--fgColor-disabled);
   --controlTrack-borderColor-rest: var(--borderColor-default);
   --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -874,7 +875,6 @@
   --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
   --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
   --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-  --controlKnob-bgColor-rest: var(--bgColor-inset);
   --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
   --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
   --controlKnob-borderColor-rest: var(--control-borderColor-rest);
@@ -1068,9 +1068,9 @@
     --control-transparent-borderColor-active: #00000000;
     --control-transparent-borderColor-hover: #00000000;
     --control-transparent-borderColor-rest: #00000000;
+    --controlKnob-bgColor-rest: #262c36;
     --controlTrack-bgColor-active: #2f3742;
     --controlTrack-bgColor-hover: #2a313c;
-    --controlTrack-bgColor-rest: #262c36;
     --counter-borderColor: #00000000;
     --data-auburn-color-emphasis: #a86f6b;
     --data-auburn-color-muted: #271817;
@@ -1678,6 +1678,7 @@
     --control-transparent-bgColor-disabled: var(--bgColor-disabled);
     --controlKnob-bgColor-checked: #ffffff;
     --controlTrack-bgColor-disabled: var(--fgColor-disabled);
+    --controlTrack-bgColor-rest: #010409;
     --controlTrack-borderColor-disabled: var(--fgColor-disabled);
     --controlTrack-borderColor-rest: var(--borderColor-default);
     --controlTrack-fgColor-rest: var(--fgColor-muted);
@@ -1777,7 +1778,6 @@
     --control-checked-borderColor-rest: var(--control-checked-bgColor-rest);
     --control-checked-fgColor-rest: var(--fgColor-onEmphasis);
     --controlKnob-bgColor-disabled: var(--control-bgColor-disabled);
-    --controlKnob-bgColor-rest: var(--bgColor-inset);
     --controlKnob-borderColor-checked: var(--control-checked-bgColor-rest);
     --controlKnob-borderColor-disabled: var(--control-bgColor-disabled);
     --controlKnob-borderColor-rest: var(--control-borderColor-rest);

package/dist/css/primitives.css

@@ -4,6 +4,7 @@
  */
 @import './base/motion/motion.css';
 @import './base/size/size.css';
+@import './base/size/z-index.css';
 @import './base/typography/typography.css';
 @import './functional/size/border.css';
 @import './functional/size/breakpoints.css';
@@ -11,4 +12,5 @@
 @import './functional/size/size-coarse.css';
 @import './functional/size/size-fine.css';
 @import './functional/size/size.css';
+@import './functional/size/z-index.css';
 @import './functional/typography/typography.css';

package/dist/docs/base/size/z-index.json

@@ -0,0 +1,107 @@
+{
+  "base-zIndex-0": {
+    "key": "{base.zIndex.0}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 0,
+      "$type": "number",
+      "key": "{base.zIndex.0}"
+    },
+    "name": "base-zIndex-0",
+    "attributes": {},
+    "path": ["base", "zIndex", "0"],
+    "value": 0,
+    "type": "number"
+  },
+  "base-zIndex-100": {
+    "key": "{base.zIndex.100}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 100,
+      "$type": "number",
+      "key": "{base.zIndex.100}"
+    },
+    "name": "base-zIndex-100",
+    "attributes": {},
+    "path": ["base", "zIndex", "100"],
+    "value": 100,
+    "type": "number"
+  },
+  "base-zIndex-200": {
+    "key": "{base.zIndex.200}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 200,
+      "$type": "number",
+      "key": "{base.zIndex.200}"
+    },
+    "name": "base-zIndex-200",
+    "attributes": {},
+    "path": ["base", "zIndex", "200"],
+    "value": 200,
+    "type": "number"
+  },
+  "base-zIndex-300": {
+    "key": "{base.zIndex.300}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 300,
+      "$type": "number",
+      "key": "{base.zIndex.300}"
+    },
+    "name": "base-zIndex-300",
+    "attributes": {},
+    "path": ["base", "zIndex", "300"],
+    "value": 300,
+    "type": "number"
+  },
+  "base-zIndex-400": {
+    "key": "{base.zIndex.400}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 400,
+      "$type": "number",
+      "key": "{base.zIndex.400}"
+    },
+    "name": "base-zIndex-400",
+    "attributes": {},
+    "path": ["base", "zIndex", "400"],
+    "value": 400,
+    "type": "number"
+  },
+  "base-zIndex-500": {
+    "key": "{base.zIndex.500}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 500,
+      "$type": "number",
+      "key": "{base.zIndex.500}"
+    },
+    "name": "base-zIndex-500",
+    "attributes": {},
+    "path": ["base", "zIndex", "500"],
+    "value": 500,
+    "type": "number"
+  },
+  "base-zIndex-600": {
+    "key": "{base.zIndex.600}",
+    "filePath": "src/tokens/base/size/z-index.json5",
+    "isSource": true,
+    "original": {
+      "$value": 600,
+      "$type": "number",
+      "key": "{base.zIndex.600}"
+    },
+    "name": "base-zIndex-600",
+    "attributes": {},
+    "path": ["base", "zIndex", "600"],
+    "value": 600,
+    "type": "number"
+  }
+}