prime-ui-kit 0.2.5 → 0.3.2

package/src/layout/sidebar/examples/03-controlled-state.tsx

@@ -0,0 +1,72 @@
+import { Layers, Sparkles } from "lucide-react";
+import { Button, Sidebar, type SidebarLayoutMode, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+/**
+ * Controlled rail: parent owns `state` / `onStateChange` (here limited to expanded vs hidden for clarity).
+ */
+export default function SidebarExampleControlledState() {
+  const [state, setState] = React.useState<SidebarLayoutMode>("expanded");
+
+  return (
+    <div className={`${styles.demoViewport} ${styles.controlledColumn}`}>
+      <div className={styles.toolbar}>
+        <Button.Root
+          size="s"
+          mode="stroke"
+          type="button"
+          onClick={() => setState((prev) => (prev === "hidden" ? "expanded" : "hidden"))}
+        >
+          {state === "hidden" ? "Show sidebar" : "Hide sidebar"}
+        </Button.Root>
+        <Typography.Root as="span" variant="body-small" tone="muted">
+          Current: <span className={styles.code}>{state}</span>
+        </Typography.Root>
+      </div>
+      <div className={styles.controlledStage}>
+        <Sidebar.Root
+          size="m"
+          state={state}
+          onStateChange={setState}
+          responsive={false}
+          aria-label="Controlled sidebar"
+        >
+          <Sidebar.NavPanel>
+            <Sidebar.Header>
+              <Sidebar.HeaderRow>
+                <Sidebar.HeaderMain>
+                  <Sidebar.Text>Panel</Sidebar.Text>
+                </Sidebar.HeaderMain>
+                <Sidebar.ToggleButton />
+              </Sidebar.HeaderRow>
+            </Sidebar.Header>
+            <Sidebar.Content>
+              <Sidebar.NavPanelBody>
+                <Sidebar.Menu>
+                  <Sidebar.MenuItem>
+                    <Sidebar.MenuButton type="button" active>
+                      <Sidebar.MenuIcon>
+                        <Layers size={16} strokeWidth={1.9} />
+                      </Sidebar.MenuIcon>
+                      <Sidebar.MenuLabel>Section</Sidebar.MenuLabel>
+                    </Sidebar.MenuButton>
+                  </Sidebar.MenuItem>
+                  <Sidebar.MenuItem>
+                    <Sidebar.MenuButton type="button">
+                      <Sidebar.MenuIcon>
+                        <Sparkles size={16} strokeWidth={1.9} />
+                      </Sidebar.MenuIcon>
+                      <Sidebar.MenuLabel>Another item</Sidebar.MenuLabel>
+                    </Sidebar.MenuButton>
+                  </Sidebar.MenuItem>
+                </Sidebar.Menu>
+              </Sidebar.NavPanelBody>
+            </Sidebar.Content>
+          </Sidebar.NavPanel>
+        </Sidebar.Root>
+      </div>
+    </div>
+  );
+}

package/src/layout/sidebar/examples/04-router-navigation.tsx

@@ -0,0 +1,70 @@
+import { Home, Settings } from "lucide-react";
+import { Sidebar, Typography } from "prime-ui-kit";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+
+import styles from "./examples.module.css";
+
+/**
+ * SPA routes: `Sidebar.MenuRouterLink` wraps React Router `NavLink`. Wrap the tree in a router
+ * (`BrowserRouter` in apps; `MemoryRouter` in tests and docs).
+ */
+export default function SidebarExampleRouterNavigation() {
+  return (
+    <MemoryRouter initialEntries={["/"]}>
+      <div className={`${styles.demoViewport} ${styles.row}`}>
+        <Sidebar.Root size="m" responsive={false} defaultState="expanded" aria-label="Docs">
+          <Sidebar.NavPanel>
+            <Sidebar.Header>
+              <Sidebar.HeaderRow>
+                <Sidebar.HeaderMain>
+                  <Sidebar.Text>Docs</Sidebar.Text>
+                </Sidebar.HeaderMain>
+                <Sidebar.ToggleButton />
+              </Sidebar.HeaderRow>
+            </Sidebar.Header>
+            <Sidebar.Content>
+              <Sidebar.Menu>
+                <Sidebar.MenuItem>
+                  <Sidebar.MenuRouterLink to="/" end className={() => ""}>
+                    <Sidebar.MenuIcon>
+                      <Home size={16} strokeWidth={1.9} />
+                    </Sidebar.MenuIcon>
+                    <Sidebar.MenuLabel>Home</Sidebar.MenuLabel>
+                  </Sidebar.MenuRouterLink>
+                </Sidebar.MenuItem>
+                <Sidebar.MenuItem>
+                  <Sidebar.MenuRouterLink to="/settings" className={() => ""}>
+                    <Sidebar.MenuIcon>
+                      <Settings size={16} strokeWidth={1.9} />
+                    </Sidebar.MenuIcon>
+                    <Sidebar.MenuLabel>Settings</Sidebar.MenuLabel>
+                  </Sidebar.MenuRouterLink>
+                </Sidebar.MenuItem>
+              </Sidebar.Menu>
+            </Sidebar.Content>
+          </Sidebar.NavPanel>
+        </Sidebar.Root>
+        <div className={styles.mainPlaceholder} style={{ flex: "1 1 auto", minWidth: 0 }}>
+          <Routes>
+            <Route
+              path="/"
+              element={
+                <Typography.Root as="p" variant="body-default" tone="muted">
+                  Home route content.
+                </Typography.Root>
+              }
+            />
+            <Route
+              path="/settings"
+              element={
+                <Typography.Root as="p" variant="body-default" tone="muted">
+                  Settings route content.
+                </Typography.Root>
+              }
+            />
+          </Routes>
+        </div>
+      </div>
+    </MemoryRouter>
+  );
+}

package/src/layout/sidebar/examples/05-responsive-behavior.tsx

@@ -0,0 +1,46 @@
+import { Inbox } from "lucide-react";
+import { SIDEBAR_MEDIA_QUERY_NARROW, Sidebar, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+/**
+ * Responsive mode (default `responsive={true}`): below the narrow breakpoint the panel becomes a drawer
+ * with backdrop and optional floating open control. Constants such as `SIDEBAR_MEDIA_QUERY_NARROW` match
+ * the kit implementation (single source of truth for JS and CSS).
+ */
+export default function SidebarExampleResponsiveBehavior() {
+  return (
+    <div className={styles.demoViewportTall}>
+      <Typography.Root as="p" variant="body-small" tone="muted" className={styles.note}>
+        Narrow viewport matches <span className={styles.code}>{SIDEBAR_MEDIA_QUERY_NARROW}</span>{" "}
+        (under <span className={styles.code}>48rem</span>). Resize the preview to see overlay
+        behavior; at wider widths the rail stays inline and{" "}
+        <span className={styles.code}>ToggleButton</span> cycles expanded and compact.
+      </Typography.Root>
+      <Sidebar.Root size="m" aria-label="Responsive sidebar">
+        <Sidebar.NavPanel>
+          <Sidebar.Header>
+            <Sidebar.HeaderRow>
+              <Sidebar.HeaderMain>
+                <Sidebar.Text>Inbox</Sidebar.Text>
+              </Sidebar.HeaderMain>
+              <Sidebar.ToggleButton />
+            </Sidebar.HeaderRow>
+          </Sidebar.Header>
+          <Sidebar.Content>
+            <Sidebar.Menu>
+              <Sidebar.MenuItem>
+                <Sidebar.MenuButton type="button" active>
+                  <Sidebar.MenuIcon>
+                    <Inbox size={16} strokeWidth={1.9} />
+                  </Sidebar.MenuIcon>
+                  <Sidebar.MenuLabel>Primary</Sidebar.MenuLabel>
+                </Sidebar.MenuButton>
+              </Sidebar.MenuItem>
+            </Sidebar.Menu>
+          </Sidebar.Content>
+        </Sidebar.NavPanel>
+      </Sidebar.Root>
+    </div>
+  );
+}

package/src/layout/sidebar/examples/examples.module.css

@@ -0,0 +1,67 @@
+.demoViewport {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 22rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.demoViewportTall {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  height: 26rem;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.appGrid {
+  height: 100%;
+  min-height: 0;
+}
+
+.mainPlaceholder {
+  box-sizing: border-box;
+  padding: var(--prime-sys-spacing-m);
+  min-height: 0;
+}
+
+.row {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  width: 100%;
+  max-width: 100%;
+  min-height: 0;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--prime-sys-spacing-s);
+  margin-bottom: var(--prime-sys-spacing-s);
+}
+
+.note {
+  margin: 0 0 var(--prime-sys-spacing-m);
+  color: var(--prime-sys-color-content-secondary);
+}
+
+.code {
+  font-family: ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+.controlledColumn {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.controlledStage {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+}

package/src/styles/theme-dark.css

@@ -98,12 +98,23 @@
   --prime-sys-elevation-shadow-surface: 0 1px 2px rgba(8, 10, 14, 0.35);
   --prime-sys-elevation-shadow-tooltip: 0 14px 30px rgba(8, 10, 14, 0.5), 0 4px 10px rgba(8, 10, 14, 0.4);
   --prime-sys-elevation-zIndex-base: var(--prime-ref-zIndex-base);
+  --prime-sys-elevation-zIndex-drawer: var(--prime-ref-zIndex-drawer);
+  --prime-sys-elevation-zIndex-drawerNestedShell: var(--prime-ref-zIndex-drawerNestedShell);
   --prime-sys-elevation-zIndex-dropdown: var(--prime-ref-zIndex-dropdown);
+  --prime-sys-elevation-zIndex-dropdownInDrawer: var(--prime-ref-zIndex-dropdownInDrawer);
+  --prime-sys-elevation-zIndex-dropdownInDrawerInModal: var(--prime-ref-zIndex-dropdownInDrawerInModal);
+  --prime-sys-elevation-zIndex-dropdownInModal: var(--prime-ref-zIndex-dropdownInModal);
   --prime-sys-elevation-zIndex-modal: var(--prime-ref-zIndex-modal);
   --prime-sys-elevation-zIndex-popover: var(--prime-ref-zIndex-popover);
+  --prime-sys-elevation-zIndex-popoverInDrawer: var(--prime-ref-zIndex-popoverInDrawer);
+  --prime-sys-elevation-zIndex-popoverInDrawerInModal: var(--prime-ref-zIndex-popoverInDrawerInModal);
+  --prime-sys-elevation-zIndex-popoverInModal: var(--prime-ref-zIndex-popoverInModal);
   --prime-sys-elevation-zIndex-sticky: var(--prime-ref-zIndex-sticky);
   --prime-sys-elevation-zIndex-toast: var(--prime-ref-zIndex-toast);
   --prime-sys-elevation-zIndex-tooltip: var(--prime-ref-zIndex-tooltip);
+  --prime-sys-elevation-zIndex-tooltipInDrawer: var(--prime-ref-zIndex-tooltipInDrawer);
+  --prime-sys-elevation-zIndex-tooltipInDrawerInModal: var(--prime-ref-zIndex-tooltipInDrawerInModal);
+  --prime-sys-elevation-zIndex-tooltipInModal: var(--prime-ref-zIndex-tooltipInModal);
   --prime-sys-motion-duration-fast: var(--prime-ref-motion-duration-fast);
   --prime-sys-motion-duration-medium: var(--prime-ref-motion-duration-medium);
   --prime-sys-motion-duration-slow: var(--prime-ref-motion-duration-slow);
@@ -385,11 +396,39 @@
   --prime-sys-typography-lineHeightScale-4xl: var(--prime-ref-font-lineHeight-4xl);
   --prime-sys-typography-lineHeightScale-5xl: var(--prime-ref-font-lineHeight-5xl);
   --prime-sys-typography-lineHeightScale-6xl: var(--prime-ref-font-lineHeight-6xl);
+  --prime-sys-typography-lineHeightScale-7xl: var(--prime-ref-font-lineHeight-7xl);
+  --prime-sys-typography-lineHeightScale-8xl: var(--prime-ref-font-lineHeight-8xl);
+  --prime-sys-typography-lineHeightScale-9xl: var(--prime-ref-font-lineHeight-9xl);
   --prime-sys-typography-lineHeightScale-l: var(--prime-ref-font-lineHeight-l);
+  --prime-sys-typography-lineHeightScale-labelMicro: var(--prime-ref-font-lineHeight-labelMicro);
   --prime-sys-typography-lineHeightScale-m: var(--prime-ref-font-lineHeight-m);
   --prime-sys-typography-lineHeightScale-s: var(--prime-ref-font-lineHeight-s);
   --prime-sys-typography-lineHeightScale-xl: var(--prime-ref-font-lineHeight-xl);
   --prime-sys-typography-lineHeightScale-xs: var(--prime-ref-font-lineHeight-xs);
+  --prime-sys-typography-role-bodyCompact-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-bodyCompact-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-bodyDefault-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-bodyDefault-lineHeight: var(--prime-sys-typography-lineHeightScale-xs);
+  --prime-sys-typography-role-bodyLarge-fontSize: var(--prime-sys-typography-sizeScale-s);
+  --prime-sys-typography-role-bodyLarge-lineHeight: var(--prime-sys-typography-lineHeightScale-s);
+  --prime-sys-typography-role-bodySmall-fontSize: var(--prime-sys-typography-sizeScale-2xs);
+  --prime-sys-typography-role-bodySmall-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-caption-fontSize: var(--prime-sys-typography-sizeScale-2xs);
+  --prime-sys-typography-role-caption-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-captionMicro-fontSize: var(--prime-sys-typography-sizeScale-labelMicro);
+  --prime-sys-typography-role-captionMicro-lineHeight: var(--prime-sys-typography-lineHeightScale-labelMicro);
+  --prime-sys-typography-role-display-fontSize: var(--prime-sys-typography-sizeScale-9xl);
+  --prime-sys-typography-role-display-lineHeight: var(--prime-sys-typography-lineHeightScale-9xl);
+  --prime-sys-typography-role-headingGroup-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-headingGroup-lineHeight: var(--prime-sys-typography-lineHeightScale-xs);
+  --prime-sys-typography-role-headingPage-fontSize: var(--prime-sys-typography-sizeScale-4xl);
+  --prime-sys-typography-role-headingPage-lineHeight: var(--prime-sys-typography-lineHeightScale-4xl);
+  --prime-sys-typography-role-headingSection-fontSize: var(--prime-sys-typography-sizeScale-2xl);
+  --prime-sys-typography-role-headingSection-lineHeight: var(--prime-sys-typography-lineHeightScale-2xl);
+  --prime-sys-typography-role-headingSubsection-fontSize: var(--prime-sys-typography-sizeScale-xl);
+  --prime-sys-typography-role-headingSubsection-lineHeight: var(--prime-sys-typography-lineHeightScale-xl);
+  --prime-sys-typography-role-headline-fontSize: var(--prime-sys-typography-sizeScale-6xl);
+  --prime-sys-typography-role-headline-lineHeight: var(--prime-sys-typography-lineHeightScale-6xl);
   --prime-sys-typography-sizeScale-2xl: var(--prime-ref-font-size-2xl);
   --prime-sys-typography-sizeScale-2xs: var(--prime-ref-font-size-2xs);
   --prime-sys-typography-sizeScale-3xl: var(--prime-ref-font-size-3xl);
@@ -397,7 +436,11 @@
   --prime-sys-typography-sizeScale-4xl: var(--prime-ref-font-size-4xl);
   --prime-sys-typography-sizeScale-5xl: var(--prime-ref-font-size-5xl);
   --prime-sys-typography-sizeScale-6xl: var(--prime-ref-font-size-6xl);
+  --prime-sys-typography-sizeScale-7xl: var(--prime-ref-font-size-7xl);
+  --prime-sys-typography-sizeScale-8xl: var(--prime-ref-font-size-8xl);
+  --prime-sys-typography-sizeScale-9xl: var(--prime-ref-font-size-9xl);
   --prime-sys-typography-sizeScale-l: var(--prime-ref-font-size-l);
+  --prime-sys-typography-sizeScale-labelMicro: var(--prime-ref-font-size-labelMicro);
   --prime-sys-typography-sizeScale-m: var(--prime-ref-font-size-m);
   --prime-sys-typography-sizeScale-s: var(--prime-ref-font-size-s);
   --prime-sys-typography-sizeScale-xl: var(--prime-ref-font-size-xl);

package/src/styles/theme-light.css

@@ -99,12 +99,23 @@
   --prime-sys-elevation-shadow-surface: var(--prime-ref-shadow-s);
   --prime-sys-elevation-shadow-tooltip: 0 12px 28px rgba(15, 17, 21, 0.22), 0 4px 10px rgba(15, 17, 21, 0.16);
   --prime-sys-elevation-zIndex-base: var(--prime-ref-zIndex-base);
+  --prime-sys-elevation-zIndex-drawer: var(--prime-ref-zIndex-drawer);
+  --prime-sys-elevation-zIndex-drawerNestedShell: var(--prime-ref-zIndex-drawerNestedShell);
   --prime-sys-elevation-zIndex-dropdown: var(--prime-ref-zIndex-dropdown);
+  --prime-sys-elevation-zIndex-dropdownInDrawer: var(--prime-ref-zIndex-dropdownInDrawer);
+  --prime-sys-elevation-zIndex-dropdownInDrawerInModal: var(--prime-ref-zIndex-dropdownInDrawerInModal);
+  --prime-sys-elevation-zIndex-dropdownInModal: var(--prime-ref-zIndex-dropdownInModal);
   --prime-sys-elevation-zIndex-modal: var(--prime-ref-zIndex-modal);
   --prime-sys-elevation-zIndex-popover: var(--prime-ref-zIndex-popover);
+  --prime-sys-elevation-zIndex-popoverInDrawer: var(--prime-ref-zIndex-popoverInDrawer);
+  --prime-sys-elevation-zIndex-popoverInDrawerInModal: var(--prime-ref-zIndex-popoverInDrawerInModal);
+  --prime-sys-elevation-zIndex-popoverInModal: var(--prime-ref-zIndex-popoverInModal);
   --prime-sys-elevation-zIndex-sticky: var(--prime-ref-zIndex-sticky);
   --prime-sys-elevation-zIndex-toast: var(--prime-ref-zIndex-toast);
   --prime-sys-elevation-zIndex-tooltip: var(--prime-ref-zIndex-tooltip);
+  --prime-sys-elevation-zIndex-tooltipInDrawer: var(--prime-ref-zIndex-tooltipInDrawer);
+  --prime-sys-elevation-zIndex-tooltipInDrawerInModal: var(--prime-ref-zIndex-tooltipInDrawerInModal);
+  --prime-sys-elevation-zIndex-tooltipInModal: var(--prime-ref-zIndex-tooltipInModal);
   --prime-sys-motion-duration-fast: var(--prime-ref-motion-duration-fast);
   --prime-sys-motion-duration-medium: var(--prime-ref-motion-duration-medium);
   --prime-sys-motion-duration-slow: var(--prime-ref-motion-duration-slow);
@@ -386,11 +397,39 @@
   --prime-sys-typography-lineHeightScale-4xl: var(--prime-ref-font-lineHeight-4xl);
   --prime-sys-typography-lineHeightScale-5xl: var(--prime-ref-font-lineHeight-5xl);
   --prime-sys-typography-lineHeightScale-6xl: var(--prime-ref-font-lineHeight-6xl);
+  --prime-sys-typography-lineHeightScale-7xl: var(--prime-ref-font-lineHeight-7xl);
+  --prime-sys-typography-lineHeightScale-8xl: var(--prime-ref-font-lineHeight-8xl);
+  --prime-sys-typography-lineHeightScale-9xl: var(--prime-ref-font-lineHeight-9xl);
   --prime-sys-typography-lineHeightScale-l: var(--prime-ref-font-lineHeight-l);
+  --prime-sys-typography-lineHeightScale-labelMicro: var(--prime-ref-font-lineHeight-labelMicro);
   --prime-sys-typography-lineHeightScale-m: var(--prime-ref-font-lineHeight-m);
   --prime-sys-typography-lineHeightScale-s: var(--prime-ref-font-lineHeight-s);
   --prime-sys-typography-lineHeightScale-xl: var(--prime-ref-font-lineHeight-xl);
   --prime-sys-typography-lineHeightScale-xs: var(--prime-ref-font-lineHeight-xs);
+  --prime-sys-typography-role-bodyCompact-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-bodyCompact-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-bodyDefault-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-bodyDefault-lineHeight: var(--prime-sys-typography-lineHeightScale-xs);
+  --prime-sys-typography-role-bodyLarge-fontSize: var(--prime-sys-typography-sizeScale-s);
+  --prime-sys-typography-role-bodyLarge-lineHeight: var(--prime-sys-typography-lineHeightScale-s);
+  --prime-sys-typography-role-bodySmall-fontSize: var(--prime-sys-typography-sizeScale-2xs);
+  --prime-sys-typography-role-bodySmall-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-caption-fontSize: var(--prime-sys-typography-sizeScale-2xs);
+  --prime-sys-typography-role-caption-lineHeight: var(--prime-sys-typography-lineHeightScale-2xs);
+  --prime-sys-typography-role-captionMicro-fontSize: var(--prime-sys-typography-sizeScale-labelMicro);
+  --prime-sys-typography-role-captionMicro-lineHeight: var(--prime-sys-typography-lineHeightScale-labelMicro);
+  --prime-sys-typography-role-display-fontSize: var(--prime-sys-typography-sizeScale-9xl);
+  --prime-sys-typography-role-display-lineHeight: var(--prime-sys-typography-lineHeightScale-9xl);
+  --prime-sys-typography-role-headingGroup-fontSize: var(--prime-sys-typography-sizeScale-xs);
+  --prime-sys-typography-role-headingGroup-lineHeight: var(--prime-sys-typography-lineHeightScale-xs);
+  --prime-sys-typography-role-headingPage-fontSize: var(--prime-sys-typography-sizeScale-4xl);
+  --prime-sys-typography-role-headingPage-lineHeight: var(--prime-sys-typography-lineHeightScale-4xl);
+  --prime-sys-typography-role-headingSection-fontSize: var(--prime-sys-typography-sizeScale-2xl);
+  --prime-sys-typography-role-headingSection-lineHeight: var(--prime-sys-typography-lineHeightScale-2xl);
+  --prime-sys-typography-role-headingSubsection-fontSize: var(--prime-sys-typography-sizeScale-xl);
+  --prime-sys-typography-role-headingSubsection-lineHeight: var(--prime-sys-typography-lineHeightScale-xl);
+  --prime-sys-typography-role-headline-fontSize: var(--prime-sys-typography-sizeScale-6xl);
+  --prime-sys-typography-role-headline-lineHeight: var(--prime-sys-typography-lineHeightScale-6xl);
   --prime-sys-typography-sizeScale-2xl: var(--prime-ref-font-size-2xl);
   --prime-sys-typography-sizeScale-2xs: var(--prime-ref-font-size-2xs);
   --prime-sys-typography-sizeScale-3xl: var(--prime-ref-font-size-3xl);
@@ -398,7 +437,11 @@
   --prime-sys-typography-sizeScale-4xl: var(--prime-ref-font-size-4xl);
   --prime-sys-typography-sizeScale-5xl: var(--prime-ref-font-size-5xl);
   --prime-sys-typography-sizeScale-6xl: var(--prime-ref-font-size-6xl);
+  --prime-sys-typography-sizeScale-7xl: var(--prime-ref-font-size-7xl);
+  --prime-sys-typography-sizeScale-8xl: var(--prime-ref-font-size-8xl);
+  --prime-sys-typography-sizeScale-9xl: var(--prime-ref-font-size-9xl);
   --prime-sys-typography-sizeScale-l: var(--prime-ref-font-size-l);
+  --prime-sys-typography-sizeScale-labelMicro: var(--prime-ref-font-size-labelMicro);
   --prime-sys-typography-sizeScale-m: var(--prime-ref-font-size-m);
   --prime-sys-typography-sizeScale-s: var(--prime-ref-font-size-s);
   --prime-sys-typography-sizeScale-xl: var(--prime-ref-font-size-xl);

package/src/styles/tokens.css

@@ -132,7 +132,11 @@
   --prime-ref-font-lineHeight-4xl: 2rem;
   --prime-ref-font-lineHeight-5xl: 2.125rem;
   --prime-ref-font-lineHeight-6xl: 2.25rem;
+  --prime-ref-font-lineHeight-7xl: 2.5rem;
+  --prime-ref-font-lineHeight-8xl: 3.125rem;
+  --prime-ref-font-lineHeight-9xl: 4rem;
   --prime-ref-font-lineHeight-l: 1.5rem;
+  --prime-ref-font-lineHeight-labelMicro: 1rem;
   --prime-ref-font-lineHeight-m: 1.375rem;
   --prime-ref-font-lineHeight-s: 1.25rem;
   --prime-ref-font-lineHeight-xl: 1.625rem;
@@ -144,7 +148,11 @@
   --prime-ref-font-size-4xl: 1.75rem;
   --prime-ref-font-size-5xl: 1.875rem;
   --prime-ref-font-size-6xl: 2rem;
+  --prime-ref-font-size-7xl: 2.25rem;
+  --prime-ref-font-size-8xl: 2.8125rem;
+  --prime-ref-font-size-9xl: 3.5625rem;
   --prime-ref-font-size-l: 1.25rem;
+  --prime-ref-font-size-labelMicro: 0.6875rem;
   --prime-ref-font-size-m: 1.125rem;
   --prime-ref-font-size-s: 1rem;
   --prime-ref-font-size-xl: 1.375rem;
@@ -239,10 +247,21 @@
   --prime-ref-spaces-layout-xl: 1.25rem;
   --prime-ref-spaces-layout-xs: 0.25rem;
   --prime-ref-zIndex-base: 10;
-  --prime-ref-zIndex-dropdown: 1100;
-  --prime-ref-zIndex-modal: 2000;
+  --prime-ref-zIndex-drawer: 2000;
+  --prime-ref-zIndex-drawerNestedShell: 3400;
+  --prime-ref-zIndex-dropdown: 1200;
+  --prime-ref-zIndex-dropdownInDrawer: 2200;
+  --prime-ref-zIndex-dropdownInDrawerInModal: 3600;
+  --prime-ref-zIndex-dropdownInModal: 3200;
+  --prime-ref-zIndex-modal: 3000;
   --prime-ref-zIndex-popover: 1000;
+  --prime-ref-zIndex-popoverInDrawer: 2100;
+  --prime-ref-zIndex-popoverInDrawerInModal: 3500;
+  --prime-ref-zIndex-popoverInModal: 3100;
   --prime-ref-zIndex-sticky: 100;
-  --prime-ref-zIndex-toast: 3000;
-  --prime-ref-zIndex-tooltip: 1200;
+  --prime-ref-zIndex-toast: 10000;
+  --prime-ref-zIndex-tooltip: 1600;
+  --prime-ref-zIndex-tooltipInDrawer: 2300;
+  --prime-ref-zIndex-tooltipInDrawerInModal: 3700;
+  --prime-ref-zIndex-tooltipInModal: 3300;
 }

package/src/styles/tokens.test.ts

@@ -1,27 +0,0 @@
-import { readFileSync } from "node:fs";
-import path from "node:path";
-
-import { describe, expect, it } from "vitest";
-
-const stylesRoot = path.resolve(process.cwd(), "src/styles");
-
-describe("generated token styles", () => {
-  it("keeps generated token files in sync", () => {
-    const tokensCss = readFileSync(path.join(stylesRoot, "tokens.css"), "utf8");
-    const lightThemeCss = readFileSync(path.join(stylesRoot, "theme-light.css"), "utf8");
-    const darkThemeCss = readFileSync(path.join(stylesRoot, "theme-dark.css"), "utf8");
-
-    expect(tokensCss).toContain("AUTO-GENERATED by scripts/build-tokens.ts");
-    expect(lightThemeCss).toContain("AUTO-GENERATED by scripts/build-tokens.ts");
-    expect(darkThemeCss).toContain("AUTO-GENERATED by scripts/build-tokens.ts");
-
-    expect(lightThemeCss).toContain("--prime-sys-typography-family-base");
-    expect(lightThemeCss).toContain("--prime-sys-elevation-zIndex-modal");
-    expect(lightThemeCss).toContain("--prime-sys-elevation-zIndex-toast");
-    expect(lightThemeCss).toContain("--prime-sys-color-dataTable-dividerVertical");
-    expect(lightThemeCss).toContain("--prime-sys-color-badge-pink-backgroundSoft");
-    expect(darkThemeCss).toContain("--prime-sys-color-badge-pink-backgroundSoft");
-    expect(darkThemeCss).toContain("--prime-sys-color-badge-teal-foregroundOnSoft");
-    expect(darkThemeCss).toContain("--prime-sys-elevation-shadow-buttonFocus");
-  });
-});