@codecademy/gamut-styles 20.0.3-alpha.212edd.0 → 20.0.3-alpha.270940.0

package/dist/themes/admin.d.ts

@@ -34,19 +34,17 @@ export declare const adminTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndexes", Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
     readonly underlay: -100;
     readonly base: 0;
     readonly foreground: 100;
-    readonly portal: 200;
-    readonly widget: 300;
-    readonly appBar: 400;
-    readonly flyout: 500;
-    readonly modal: 600;
-    readonly popover: 700;
-    readonly toaster: 800;
-    readonly tooltip: 900;
-}, "zIndices">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+    readonly floating: 200;
+    readonly appBar: 300;
+    readonly flyout: 400;
+    readonly modal: 500;
+    readonly popover: 600;
+    readonly topmost: 700;
+}, "zIndexes">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -126,20 +124,18 @@ export declare const adminTheme: Record<"breakpoints", {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     };
-    zIndices: {
+    zIndexes: {
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
     };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
@@ -568,7 +564,7 @@ export declare const adminTheme: Record<"breakpoints", {
         readonly base: "4rem";
         readonly md: "5rem";
     };
-    readonly headerZ: 400;
+    readonly headerZ: 300;
 }, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, {
     colors: import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
         primary: {

package/dist/themes/core.d.ts

@@ -15,19 +15,17 @@ export declare const coreTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndexes", Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
     readonly underlay: -100;
     readonly base: 0;
     readonly foreground: 100;
-    readonly portal: 200;
-    readonly widget: 300;
-    readonly appBar: 400;
-    readonly flyout: 500;
-    readonly modal: 600;
-    readonly popover: 700;
-    readonly toaster: 800;
-    readonly tooltip: 900;
-}, "zIndices">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+    readonly floating: 200;
+    readonly appBar: 300;
+    readonly flyout: 400;
+    readonly modal: 500;
+    readonly popover: 600;
+    readonly topmost: 700;
+}, "zIndexes">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -107,20 +105,18 @@ export declare const coreTheme: Record<"breakpoints", {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     };
-    zIndices: {
+    zIndexes: {
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
     };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
@@ -549,7 +545,7 @@ export declare const coreTheme: Record<"breakpoints", {
         readonly base: "4rem";
         readonly md: "5rem";
     };
-    readonly headerZ: 400;
+    readonly headerZ: 300;
 }, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys;
 export type CoreThemeShape = typeof coreTheme;
 export interface CoreTheme extends CoreThemeShape {

package/dist/themes/core.js

@@ -1,5 +1,5 @@
 import { createTheme } from '@codecademy/variance';
-import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing, zIndices } from '../variables';
+import { borderRadii, containerQueries, corePalette, elements, fontFamily, fontSize, fontWeight, lineHeight, mediaQueries, spacing, zIndexes } from '../variables';
 
 /**
  *  @description  This is the core theme that all other Codecademy themes are extended from
@@ -19,7 +19,7 @@ export const coreTheme = createTheme({
   fontWeight,
   spacing,
   elements,
-  zIndices
+  zIndexes
 }).addColors(corePalette).addColorModes('light', {
   light: {
     text: {
@@ -130,4 +130,4 @@ export const coreTheme = createTheme({
 }) => ({
   1: `1px solid ${colors['border-primary']}`,
   2: `2px solid ${colors['border-primary']}`
-})).createScaleVariables('elements').createScaleVariables('zIndices').addName('core').build();
+})).createScaleVariables('elements').createScaleVariables('zIndexes').addName('core').build();

package/dist/themes/lxStudio.d.ts

@@ -78,43 +78,39 @@ export declare const lxStudioTheme: Record<"breakpoints", {
         lg: string;
         xl: string;
     };
-    zIndices: Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+    zIndexes: Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
-    }, "zIndices">> & {
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
+    }, "zIndexes">> & {
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
     };
     elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     }, "elements">> & {
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     };
     fontSize: {
         readonly 64: string;

package/dist/themes/percipio.d.ts

@@ -62,43 +62,39 @@ export declare const percipioTheme: Record<"breakpoints", {
         lg: string;
         xl: string;
     };
-    zIndices: Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+    zIndexes: Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
-    }, "zIndices">> & {
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
+    }, "zIndexes">> & {
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
     };
     elements: Record<"elements", import("@codecademy/variance").KeyAsVariable<{
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     }, "elements">> & {
         readonly headerHeight: {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     };
     borderRadii: {
         none: string;

package/dist/themes/platform.d.ts

@@ -50,19 +50,17 @@ export declare const platformTheme: Record<"breakpoints", {
     md: string;
     lg: string;
     xl: string;
-}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndices", Record<"zIndices", import("@codecademy/variance").KeyAsVariable<{
+}> & import("@codecademy/variance/dist/createTheme/types").Merge<Record<"zIndexes", Record<"zIndexes", import("@codecademy/variance").KeyAsVariable<{
     readonly underlay: -100;
     readonly base: 0;
     readonly foreground: 100;
-    readonly portal: 200;
-    readonly widget: 300;
-    readonly appBar: 400;
-    readonly flyout: 500;
-    readonly modal: 600;
-    readonly popover: 700;
-    readonly toaster: 800;
-    readonly tooltip: 900;
-}, "zIndices">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
+    readonly floating: 200;
+    readonly appBar: 300;
+    readonly flyout: 400;
+    readonly modal: 500;
+    readonly popover: 600;
+    readonly topmost: 700;
+}, "zIndexes">>> & import("@codecademy/variance/dist/createTheme/types").Merge<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<import("@codecademy/variance/dist/createTheme/types").MergeTheme<Record<"breakpoints", {
     c_base: string;
     c_xs: string;
     c_sm: string;
@@ -142,20 +140,18 @@ export declare const platformTheme: Record<"breakpoints", {
             readonly base: "4rem";
             readonly md: "5rem";
         };
-        readonly headerZ: 400;
+        readonly headerZ: 300;
     };
-    zIndices: {
+    zIndexes: {
         readonly underlay: -100;
         readonly base: 0;
         readonly foreground: 100;
-        readonly portal: 200;
-        readonly widget: 300;
-        readonly appBar: 400;
-        readonly flyout: 500;
-        readonly modal: 600;
-        readonly popover: 700;
-        readonly toaster: 800;
-        readonly tooltip: 900;
+        readonly floating: 200;
+        readonly appBar: 300;
+        readonly flyout: 400;
+        readonly modal: 500;
+        readonly popover: 600;
+        readonly topmost: 700;
     };
 } & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly beige: "#FFF0E5";
@@ -584,7 +580,7 @@ export declare const platformTheme: Record<"breakpoints", {
         readonly base: "4rem";
         readonly md: "5rem";
     };
-    readonly headerZ: 400;
+    readonly headerZ: 300;
 }, "elements">>>>, import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"name", string>> & import("@codecademy/variance/dist/createTheme/types").PrivateThemeKeys, Record<"colors", import("@codecademy/variance").KeyAsVariable<import("@codecademy/variance").LiteralPaths<{
     readonly lightBeige: "#FFFBF8";
     readonly gold: "#8A7300";

package/dist/variables/elements.d.ts

@@ -4,9 +4,9 @@ export declare const elements: {
         readonly md: "5rem";
     };
     /**
-     * z-index for global page headers. Aliases the `appBar` token from the `zIndices`
+     * z-index for global page headers. Aliases the `appBar` token from the `zIndexes`
      * scale so consumers still reading `elements.headerZ` stay in sync with the scale.
      * Prefer `zIndex="appBar"` in new code.
      */
-    readonly headerZ: 400;
+    readonly headerZ: 300;
 };

package/dist/variables/elements.js

@@ -1,13 +1,13 @@
-import { zIndices } from './zIndices';
+import { zIndexes } from './zIndexes';
 export const elements = {
   headerHeight: {
     base: '4rem',
     md: '5rem'
   },
   /**
-   * z-index for global page headers. Aliases the `appBar` token from the `zIndices`
+   * z-index for global page headers. Aliases the `appBar` token from the `zIndexes`
    * scale so consumers still reading `elements.headerZ` stay in sync with the scale.
    * Prefer `zIndex="appBar"` in new code.
    */
-  headerZ: zIndices.appBar
+  headerZ: zIndexes.appBar
 };

package/dist/variables/index.d.ts

@@ -5,4 +5,4 @@ export * from './responsive';
 export * from './spacing';
 export * from './timing';
 export * from './typography';
-export * from './zIndices';
+export * from './zIndexes';

package/dist/variables/index.js

@@ -5,4 +5,4 @@ export * from './responsive';
 export * from './spacing';
 export * from './timing';
 export * from './typography';
-export * from './zIndices';
+export * from './zIndexes';

package/dist/variables/zIndexes.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Semantic z-index scale. Every z-index in Gamut should reference a token here rather than a
+ * magic number.
+ *
+ * The `zIndex` prop is intentionally left numeric/unscaled, and this object is numeric, so
+ * tokens are used as `zIndex={zIndexes.modal}`. That preserves the escape hatch (a raw
+ * in-between number, e.g. `zIndex={550}`) and arithmetic on tokens (e.g. `zIndexes.foreground - 2`).
+ *
+ * Values are spaced by 100 so in-between escape-hatch numbers are available. `floating` (200) is
+ * the floor of the portal band and the default for `BodyPortal`.
+ *
+ * @remarks PLEASE talk to web platform before adding new z-index tokens.
+ */
+export declare const zIndexes: {
+    /** Decorative layer behind content (underlines, backdrops, shadows). */
+    readonly underlay: -100;
+    /** Ground layer — establishes a local stacking context without lifting above siblings. */
+    readonly base: 0;
+    /**
+     * The raised in-flow layer: an element in front of what sits/scrolls behind it, but below
+     * all portal overlays. Covers content lifted above an `underlay` (e.g. text over its
+     * underline) and sticky content headers (e.g. a sticky table `thead`).
+     */
+    readonly foreground: 100;
+    /**
+     * Portal floor: the default for `BodyPortal`, and the layer for persistent floating page
+     * furniture at rest (e.g. an AI chat launcher, help bubble). Above page content, below the
+     * app nav and all overlays.
+     */
+    readonly floating: 200;
+    /** Global app header / nav bar. Aliased by the legacy `elements.headerZ` constant. */
+    readonly appBar: 300;
+    /** Portaled side panel (the `Flyout` component = `Drawer` inside `Overlay`). */
+    readonly flyout: 400;
+    /** `Overlay`, `Modal`, and `Dialog` (they share one portal primitive). */
+    readonly modal: 500;
+    /** Portal-mode `Popover` and the portaled `SelectDropdown` menu — above modal. */
+    readonly popover: 600;
+    /**
+     * Top-most transient overlays that must never be clipped: floating tooltips (`FloatingTip`)
+     * and toasts / notifications (`Toaster`). Highest layer — nothing in Gamut sits above it.
+     */
+    readonly topmost: 700;
+};

package/dist/variables/{zIndices.js → zIndexes.js}

@@ -1,18 +1,17 @@
 /**
- * Semantic z-index scale. A single scale covers both in-flow layers (low values) and
- * portal layers (≥100). Every z-index in Gamut should reference a token here rather than a
+ * Semantic z-index scale. Every z-index in Gamut should reference a token here rather than a
  * magic number.
  *
  * The `zIndex` prop is intentionally left numeric/unscaled, and this object is numeric, so
- * tokens are used as `zIndex={zIndices.modal}`. That preserves the escape hatch (a raw
- * in-between number, e.g. `zIndex={605}`) and arithmetic on tokens (e.g. `zIndices.foreground - 2`).
+ * tokens are used as `zIndex={zIndexes.modal}`. That preserves the escape hatch (a raw
+ * in-between number, e.g. `zIndex={550}`) and arithmetic on tokens (e.g. `zIndexes.foreground - 2`).
  *
- * Portal-band values are spaced by 100 so in-between escape-hatch numbers are available.
- * `portal` (200) is the floor of the portal band and the default for `BodyPortal`.
+ * Values are spaced by 100 so in-between escape-hatch numbers are available. `floating` (200) is
+ * the floor of the portal band and the default for `BodyPortal`.
  *
  * @remarks PLEASE talk to web platform before adding new z-index tokens.
  */
-export const zIndices = {
+export const zIndexes = {
   /** Decorative layer behind content (underlines, backdrops, shadows). */
   underlay: -100,
   /** Ground layer — establishes a local stacking context without lifting above siblings. */
@@ -20,24 +19,26 @@ export const zIndices = {
   /**
    * The raised in-flow layer: an element in front of what sits/scrolls behind it, but below
    * all portal overlays. Covers content lifted above an `underlay` (e.g. text over its
-   * underline) and sticky content headers (e.g. a sticky table `thead`). Set to 100 so it
-   * clears common ad-hoc low z-index values.
+   * underline) and sticky content headers (e.g. a sticky table `thead`).
    */
   foreground: 100,
-  /** Portal floor / `BodyPortal` default — un-tokenized portal content lands here. */
-  portal: 200,
-  /** Persistent floating page furniture at rest (e.g. an AI chat launcher, help bubble). */
-  widget: 300,
+  /**
+   * Portal floor: the default for `BodyPortal`, and the layer for persistent floating page
+   * furniture at rest (e.g. an AI chat launcher, help bubble). Above page content, below the
+   * app nav and all overlays.
+   */
+  floating: 200,
   /** Global app header / nav bar. Aliased by the legacy `elements.headerZ` constant. */
-  appBar: 400,
+  appBar: 300,
   /** Portaled side panel (the `Flyout` component = `Drawer` inside `Overlay`). */
-  flyout: 500,
+  flyout: 400,
   /** `Overlay`, `Modal`, and `Dialog` (they share one portal primitive). */
-  modal: 600,
+  modal: 500,
   /** Portal-mode `Popover` and the portaled `SelectDropdown` menu — above modal. */
-  popover: 700,
-  /** Toasts / notifications — visible above modals. */
-  toaster: 800,
-  /** Floating tooltips (`FloatingTip`) — highest, so they are never clipped. */
-  tooltip: 900
+  popover: 600,
+  /**
+   * Top-most transient overlays that must never be clipped: floating tooltips (`FloatingTip`)
+   * and toasts / notifications (`Toaster`). Highest layer — nothing in Gamut sits above it.
+   */
+  topmost: 700
 };

package/dist/variance/config.js

@@ -452,7 +452,7 @@ export const positioning = {
   },
   // Intentionally unscaled: scaled variance props are token-only and reject raw numbers,
   // which would break the numeric escape hatch and Tip's z-index arithmetic. Use the numeric
-  // `zIndices` token object instead (e.g. zIndex={zIndices.modal}).
+  // `zIndexes` token object instead (e.g. zIndex={zIndexes.modal}).
   zIndex: {
     property: 'zIndex'
   },

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@codecademy/gamut-styles",
   "description": "Styleguide & Component library for codecademy.com",
-  "version": "20.0.3-alpha.212edd.0",
+  "version": "20.0.3-alpha.270940.0",
   "author": "Jake Hiller <jake@codecademy.com>",
   "dependencies": {
-    "@codecademy/variance": "0.26.2-alpha.212edd.0",
+    "@codecademy/variance": "0.26.2-alpha.270940.0",
     "@emotion/is-prop-valid": "^1.1.0",
     "framer-motion": "^11.18.0",
     "get-nonce": "^1.0.0",

package/dist/variables/zIndices.d.ts

@@ -1,43 +0,0 @@
-/**
- * Semantic z-index scale. A single scale covers both in-flow layers (low values) and
- * portal layers (≥100). Every z-index in Gamut should reference a token here rather than a
- * magic number.
- *
- * The `zIndex` prop is intentionally left numeric/unscaled, and this object is numeric, so
- * tokens are used as `zIndex={zIndices.modal}`. That preserves the escape hatch (a raw
- * in-between number, e.g. `zIndex={605}`) and arithmetic on tokens (e.g. `zIndices.foreground - 2`).
- *
- * Portal-band values are spaced by 100 so in-between escape-hatch numbers are available.
- * `portal` (200) is the floor of the portal band and the default for `BodyPortal`.
- *
- * @remarks PLEASE talk to web platform before adding new z-index tokens.
- */
-export declare const zIndices: {
-    /** Decorative layer behind content (underlines, backdrops, shadows). */
-    readonly underlay: -100;
-    /** Ground layer — establishes a local stacking context without lifting above siblings. */
-    readonly base: 0;
-    /**
-     * The raised in-flow layer: an element in front of what sits/scrolls behind it, but below
-     * all portal overlays. Covers content lifted above an `underlay` (e.g. text over its
-     * underline) and sticky content headers (e.g. a sticky table `thead`). Set to 100 so it
-     * clears common ad-hoc low z-index values.
-     */
-    readonly foreground: 100;
-    /** Portal floor / `BodyPortal` default — un-tokenized portal content lands here. */
-    readonly portal: 200;
-    /** Persistent floating page furniture at rest (e.g. an AI chat launcher, help bubble). */
-    readonly widget: 300;
-    /** Global app header / nav bar. Aliased by the legacy `elements.headerZ` constant. */
-    readonly appBar: 400;
-    /** Portaled side panel (the `Flyout` component = `Drawer` inside `Overlay`). */
-    readonly flyout: 500;
-    /** `Overlay`, `Modal`, and `Dialog` (they share one portal primitive). */
-    readonly modal: 600;
-    /** Portal-mode `Popover` and the portaled `SelectDropdown` menu — above modal. */
-    readonly popover: 700;
-    /** Toasts / notifications — visible above modals. */
-    readonly toaster: 800;
-    /** Floating tooltips (`FloatingTip`) — highest, so they are never clipped. */
-    readonly tooltip: 900;
-};