prime-ui-kit 0.9.0 → 0.9.2

package/dist/layout/sidebar/Sidebar.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import { type ControlSize, type PaletteColor, type Variant } from "@/internal/states";
 /** Desktop rail mode: full width, icon rail, or collapsed to zero width. */
 export type SidebarMode = "expanded" | "compact" | "hidden";
 export type SidebarLabels = {
@@ -13,70 +13,144 @@ export type SidebarLabels = {
     close: string;
 };
 type SidebarContextValue = {
+    /** Stored open state of groups and sub-lists (`persistKey`), or `null`. */
+    persist: SidebarPersist | null;
     mode: SidebarMode;
     setMode: (mode: SidebarMode) => void;
-    /** Off-canvas panel state (narrow viewports only). */
+    /** Off-canvas panel state (only while `offCanvas`). */
     open: boolean;
     setOpen: (open: boolean) => void;
     /** expanded ↔ compact on desktop (hidden → expanded); open ↔ closed off-canvas. */
     toggle: () => void;
-    /** True while the sidebar is off-canvas (responsive and the viewport is narrower than 768px). */
-    isMobile: boolean;
+    /** True while the sidebar is an off-canvas panel (`offCanvas="always"`, or `"auto"` below 768px). */
+    offCanvas: boolean;
     size: ControlSize;
     navId: string;
     labels: SidebarLabels;
 };
 declare const useSidebar: () => SidebarContextValue;
+type SidebarPersist = {
+    read: (id: string) => boolean | undefined;
+    write: (id: string, open: boolean) => void;
+};
 export { useSidebar };
-export type SidebarRootProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
-    children?: React.ReactNode;
+export type SidebarRootProps = React.ComponentPropsWithoutRef<"div"> & {
     /** Item tier: height, icon and text of `--prime-control-<size>-*`. */
     size?: ControlSize;
     mode?: SidebarMode;
     defaultMode?: SidebarMode;
     onModeChange?: (mode: SidebarMode) => void;
-    /** Off-canvas panel on narrow viewports (responsive only). */
+    /** The off-canvas panel (while the sidebar is off-canvas, see `offCanvas`). */
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
-    /** Below 768px the rail becomes an off-canvas panel with a scrim and a focus trap. */
-    responsive?: boolean;
+    /**
+     * When the rail becomes an off-canvas panel with a scrim and a focus trap, opened by `open`:
+     * `auto` below 768px, `always` at any width (navigation behind a menu button), `never`.
+     */
+    offCanvas?: "auto" | "always" | "never";
+    /**
+     * Remembers the state across reloads in `localStorage` under this key: the mode and which
+     * collapsible groups and sub-lists are open (by their `id`, else their label text). Controlled
+     * `mode` / `open` are not stored.
+     */
+    persistKey?: string;
     labels?: Partial<SidebarLabels>;
 };
-export type SidebarHeaderProps = React.ComponentPropsWithoutRef<"div">;
+export type SidebarHeaderProps = React.ComponentProps<"div">;
 declare function SidebarHeader({ className, ...rest }: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SidebarHeader {
     var displayName: string;
 }
-export type SidebarContentProps = React.ComponentPropsWithoutRef<"div">;
-export type SidebarFooterProps = React.ComponentPropsWithoutRef<"div">;
+export type SidebarContentProps = React.HTMLAttributes<HTMLElement>;
+export type SidebarFooterProps = React.ComponentProps<"div">;
 declare function SidebarFooter({ className, ...rest }: SidebarFooterProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SidebarFooter {
     var displayName: string;
 }
-export type SidebarGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "role"> & {
-    /** Group heading. In compact mode it fades out and leaves its spacing. */
+export type SidebarGroupProps = Omit<React.ComponentProps<"div">, "role"> & {
+    /** Group heading. In compact mode it folds away. */
     label?: React.ReactNode;
+    /** The heading becomes a disclosure button that shows and hides the items. Needs `label`. */
+    collapsible?: boolean;
+    /** Items shown (controlled; `collapsible` only). */
+    open?: boolean;
+    /** Initial open state (uncontrolled). */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
 };
-declare function SidebarGroup({ className, label, children, ...rest }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function SidebarGroup({ className, label, collapsible, open: openProp, defaultOpen, onOpenChange, children, ...rest }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SidebarGroup {
     var displayName: string;
 }
+export type SidebarItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * An item icon. Before the label it leads and stays in place in every mode; after the label it is
+ * a quiet trailing glyph (an external link) that hides in compact mode.
+ */
+declare function SidebarItemIcon({ className, ...rest }: SidebarItemIconProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemIcon {
+    var displayName: string;
+}
+export type SidebarItemCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
+    /** The number (or a short status). */
+    children: React.ReactNode;
+    /** Badge hue: the count needs attention. Without `color` and `variant` it is a plain number. */
+    color?: PaletteColor;
+    /** Badge treatment (default `soft` once `color` is set). */
+    variant?: Exclude<Variant, "ghost">;
+    /** The number `<span>` (the Badge when it has a hue). */
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * A count after the label: a plain muted number, or a `Badge` when it needs attention (`color`,
+ * `variant`). In compact mode the number leaves the row (still read by screen readers) and a badge
+ * leaves a dot of its hue on the icon.
+ */
+declare function SidebarItemCount({ children, color, variant, className, ...rest }: SidebarItemCountProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemCount {
+    var displayName: string;
+}
+export type SidebarItemShortcutProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** A key hint, e.g. `<Kbd>⌘K</Kbd>`. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** Keyboard hint at the end of an item; hidden in compact mode. */
+declare function SidebarItemShortcut({ children, className, ...rest }: SidebarItemShortcutProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemShortcut {
+    var displayName: string;
+}
+export type SidebarItemActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "onClick" | "aria-label"> & {
+    /** Accessible name and tooltip of the action («Создать задачу»). */
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+    /** The glyph; a plus by default. */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+/**
+ * A small action at the end of the row (create, add): a ghost icon Button one tier down, shown on
+ * hover and focus of the row. It sits next to the item element, never inside it.
+ */
+declare function SidebarItemAction({ label, onClick, disabled, children, className, ...rest }: SidebarItemActionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarItemAction {
+    var displayName: string;
+}
 type SidebarItemOwnProps = {
-    /** Leading icon; stays in place in every mode. */
-    icon?: React.ReactNode;
-    /** Counter or status; in compact mode it becomes a dot on the icon. */
-    badge?: React.ReactNode;
-    /** Keyboard hint (e.g. `<Kbd>`); hidden in compact mode. */
-    shortcut?: React.ReactNode;
-    /** Current page. Links rendered by a router may set `aria-current="page"` instead. */
-    active?: boolean;
+    /** Current page: `aria-current="page"`. Links rendered by a router may set it themselves. */
+    current?: boolean;
     disabled?: boolean;
+    /** Render the single child element (e.g. a router link) as the item; its children are the content. */
+    asChild?: boolean;
     /**
-     * Render the single child element (e.g. a router link) as the item; its children become the
-     * label.
+     * Label and parts: `Sidebar.ItemIcon` (leading, or trailing after the label),
+     * `Sidebar.ItemCount`, `Sidebar.ItemShortcut`, `Sidebar.ItemAction`.
      */
-    asChild?: boolean;
     children?: React.ReactNode;
 };
 export type SidebarItemProps = SidebarItemOwnProps & Omit<React.ComponentPropsWithoutRef<"button">, keyof SidebarItemOwnProps> & {
@@ -85,25 +159,101 @@ export type SidebarItemProps = SidebarItemOwnProps & Omit<React.ComponentPropsWi
     target?: string;
     rel?: string;
 };
-export type SidebarToggleProps = Omit<React.ComponentPropsWithoutRef<"button">, "children" | "aria-label" | "aria-expanded" | "aria-controls">;
+export type SidebarSubProps = React.ComponentProps<"div"> & {
+    /** Children shown (controlled). */
+    open?: boolean;
+    /** Initial open state (uncontrolled). A sub-list also opens by itself when a child becomes current. */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * A parent item with child items: `Sidebar.SubTrigger` + `Sidebar.SubContent`. Expanded, the
+ * children unfold under the parent on a guide line; on the compact rail they open in a flyout.
+ */
+declare function SidebarSub({ open: openProp, defaultOpen, onOpenChange, className, children, ...rest }: SidebarSubProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarSub {
+    var displayName: string;
+}
+export type SidebarSubTriggerProps = Omit<React.ComponentPropsWithoutRef<"button">, "aria-expanded" | "aria-controls"> & {
+    /** Label and parts, as in `Sidebar.Item`: `Sidebar.ItemIcon`, `Sidebar.ItemCount`. */
+    children?: React.ReactNode;
+};
+export type SidebarSubContentProps = Omit<React.ComponentProps<"div">, "role">;
+/** The children of a `Sidebar.Sub`: `Sidebar.Item`s on a faint guide line under the parent icon. */
+declare function SidebarSubContent({ className, children, ref, ...rest }: SidebarSubContentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarSubContent {
+    var displayName: string;
+}
+export type SidebarBrandLogoProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** The product mark (`<img>`, `<svg>`); it fills a square on the icon axis. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The product mark: stays on the icon axis in every mode. */
+declare function SidebarBrandLogo({ className, ...rest }: SidebarBrandLogoProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SidebarBrandLogo {
+    var displayName: string;
+}
+export type SidebarBrandProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+    /** Muted second line under the name (workspace, plan). */
+    description?: React.ReactNode;
+    /** Renders an `<a>` (usually home). */
+    href?: string;
+    /** Render the single child element (e.g. a router link) as the brand; its children are the content. */
+    asChild?: boolean;
+    /** `Sidebar.BrandLogo` and the product name. */
+    children?: React.ReactNode;
+};
+export type SidebarAccountProps = Omit<React.ComponentPropsWithoutRef<"button">, "children"> & {
+    /** Muted second line under the name (email, role). */
+    description?: React.ReactNode;
+    /** An `Avatar.Root` (sized to the tier by the slot) and the person's name. */
+    children?: React.ReactNode;
+};
+export type SidebarToggleProps = Omit<React.ComponentPropsWithoutRef<"button">, "children" | "aria-label" | "aria-expanded" | "aria-controls"> & {
+    /**
+     * `item` — a row in the rail. `header` — a small icon button at the end of `Sidebar.Header`
+     * while expanded that moves onto the rail's outer edge as a round button in compact mode.
+     */
+    variant?: "item" | "header";
+};
 export declare const Sidebar: {
-    Root: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "children"> & {
-        children?: React.ReactNode;
+    Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
         /** Item tier: height, icon and text of `--prime-control-<size>-*`. */
         size?: ControlSize;
         mode?: SidebarMode;
         defaultMode?: SidebarMode;
         onModeChange?: (mode: SidebarMode) => void;
-        /** Off-canvas panel on narrow viewports (responsive only). */
+        /** The off-canvas panel (while the sidebar is off-canvas, see `offCanvas`). */
         open?: boolean;
         defaultOpen?: boolean;
         onOpenChange?: (open: boolean) => void;
-        /** Below 768px the rail becomes an off-canvas panel with a scrim and a focus trap. */
-        responsive?: boolean;
+        /**
+         * When the rail becomes an off-canvas panel with a scrim and a focus trap, opened by `open`:
+         * `auto` below 768px, `always` at any width (navigation behind a menu button), `never`.
+         */
+        offCanvas?: "auto" | "always" | "never";
+        /**
+         * Remembers the state across reloads in `localStorage` under this key: the mode and which
+         * collapsible groups and sub-lists are open (by their `id`, else their label text). Controlled
+         * `mode` / `open` are not stored.
+         */
+        persistKey?: string;
         labels?: Partial<SidebarLabels>;
     } & React.RefAttributes<HTMLDivElement>>;
     Header: typeof SidebarHeader;
-    Content: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Brand: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
+        /** Muted second line under the name (workspace, plan). */
+        description?: React.ReactNode;
+        /** Renders an `<a>` (usually home). */
+        href?: string;
+        /** Render the single child element (e.g. a router link) as the brand; its children are the content. */
+        asChild?: boolean;
+        /** `Sidebar.BrandLogo` and the product name. */
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLElement>>;
+    BrandLogo: typeof SidebarBrandLogo;
+    Content: React.ForwardRefExoticComponent<SidebarContentProps & React.RefAttributes<HTMLElement>>;
     Footer: typeof SidebarFooter;
     Group: typeof SidebarGroup;
     Item: React.ForwardRefExoticComponent<SidebarItemOwnProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, keyof SidebarItemOwnProps> & {
@@ -112,6 +262,27 @@ export declare const Sidebar: {
         target?: string;
         rel?: string;
     } & React.RefAttributes<HTMLElement>>;
-    Toggle: React.ForwardRefExoticComponent<SidebarToggleProps & React.RefAttributes<HTMLButtonElement>>;
+    ItemIcon: typeof SidebarItemIcon;
+    ItemCount: typeof SidebarItemCount;
+    ItemShortcut: typeof SidebarItemShortcut;
+    ItemAction: typeof SidebarItemAction;
+    Sub: typeof SidebarSub;
+    SubTrigger: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "aria-controls" | "aria-expanded"> & {
+        /** Label and parts, as in `Sidebar.Item`: `Sidebar.ItemIcon`, `Sidebar.ItemCount`. */
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    SubContent: typeof SidebarSubContent;
+    Account: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children"> & {
+        /** Muted second line under the name (email, role). */
+        description?: React.ReactNode;
+        /** An `Avatar.Root` (sized to the tier by the slot) and the person's name. */
+        children?: React.ReactNode;
+    } & React.RefAttributes<HTMLButtonElement>>;
+    Toggle: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "children" | "aria-controls" | "aria-expanded" | "aria-label"> & {
+        /**
+         * `item` — a row in the rail. `header` — a small icon button at the end of `Sidebar.Header`
+         * while expanded that moves onto the rail's outer edge as a round button in compact mode.
+         */
+        variant?: "item" | "header";
+    } & React.RefAttributes<HTMLButtonElement>>;
 };
-//# sourceMappingURL=Sidebar.d.ts.map

package/dist/theme/applyTheme.d.ts

@@ -12,4 +12,3 @@ export declare function suspendTransitions(element: HTMLElement): void;
  * suspended for that frame. Use it instead of setting the attribute by hand.
  */
 export declare function applyTheme(scheme: ThemeScheme, element?: HTMLElement): void;
-//# sourceMappingURL=applyTheme.d.ts.map

package/dist/tokens/naming.d.ts

@@ -0,0 +1,6 @@
+/** Primitive variables: `--prime-ref-*`. */
+export declare const REF_PREFIX = "--prime-ref";
+/** Semantic variables: `--prime-*`. */
+export declare const SYS_PREFIX = "--prime";
+/** Token path → CSS variable: `color.bg.canvas` → `--prime-color-bg-canvas`, camelCase → kebab-case. */
+export declare function toVarName(path: string, prefix?: string): string;

package/dist/tokens/primitives.d.ts

@@ -1,20 +1,18 @@
 /**
  * Primitive layer (`--prime-ref-*`). Raw values only: no meaning, never used by components directly.
- * Everything that has a role lives in `semantic.ts`.
+ * Everything that has a role lives in `semantic.ts`. A step exists only while a semantic token (or a
+ * JS consumer such as the ColorPresets defaults) uses it.
  */
 export declare const primitiveTokens: {
     readonly color: {
         readonly white: "#ffffff";
-        readonly black: "#000000";
         /** Graphite: cool neutral, slight blue bias. 0–100 light surfaces, 750–950 dark surfaces. */
         readonly gray: {
             readonly 0: "#ffffff";
-            readonly 25: "#f7f8fa";
             readonly 50: "#f3f4f6";
             readonly 75: "#eef0f3";
             readonly 100: "#e8eaee";
             readonly 150: "#e0e3e8";
-            readonly 200: "#d5d9e0";
             readonly 300: "#b9bec8";
             readonly 400: "#949bab";
             readonly 500: "#636a79";
@@ -22,7 +20,6 @@ export declare const primitiveTokens: {
             readonly 700: "#3b4150";
             readonly 750: "#343a44";
             readonly 800: "#2a2f38";
-            readonly 825: "#252a32";
             readonly 850: "#20242b";
             readonly 875: "#1b1e25";
             readonly 900: "#16191f";
@@ -31,7 +28,6 @@ export declare const primitiveTokens: {
         };
         /** Cobalt: brand accent. */
         readonly cobalt: {
-            readonly 50: "#f0f2fe";
             readonly 100: "#e6eafd";
             readonly 200: "#cdd5fb";
             readonly 300: "#aab6ff";
@@ -40,112 +36,67 @@ export declare const primitiveTokens: {
             readonly 600: "#3f59f0";
             readonly 700: "#2f4ae0";
             readonly 800: "#2540c8";
-            readonly 900: "#1d33a0";
             readonly 950: "#1b2249";
         };
         readonly red: {
-            readonly 50: "#fef2f2";
             readonly 100: "#fee2e2";
-            readonly 200: "#fecaca";
             readonly 300: "#fca5a5";
             readonly 400: "#f87171";
             readonly 500: "#ef4444";
             readonly 600: "#dc2626";
             readonly 700: "#b91c1c";
-            readonly 800: "#991b1b";
-            readonly 900: "#7f1d1d";
-            readonly 950: "#450a0a";
         };
         readonly orange: {
-            readonly 50: "#fff7ed";
             readonly 100: "#ffedd5";
-            readonly 200: "#fed7aa";
             readonly 300: "#fdba74";
             readonly 400: "#fb923c";
             readonly 500: "#f97316";
-            readonly 600: "#ea580c";
             readonly 700: "#c2410c";
             readonly 800: "#9a3412";
-            readonly 900: "#7c2d12";
-            readonly 950: "#431407";
         };
         readonly yellow: {
-            readonly 50: "#fefce8";
             readonly 100: "#fef9c3";
-            readonly 200: "#fef08a";
             readonly 300: "#fde047";
             readonly 400: "#facc15";
             readonly 500: "#eab308";
-            readonly 600: "#ca8a04";
             readonly 700: "#a16207";
             readonly 800: "#854d0e";
-            readonly 900: "#713f12";
-            readonly 950: "#422006";
         };
         readonly green: {
-            readonly 50: "#f0fdf4";
             readonly 100: "#dcfce7";
-            readonly 200: "#bbf7d0";
             readonly 300: "#86efac";
             readonly 400: "#4ade80";
             readonly 500: "#22c55e";
-            readonly 600: "#16a34a";
             readonly 700: "#15803d";
-            readonly 800: "#166534";
-            readonly 900: "#14532d";
-            readonly 950: "#052e16";
         };
         readonly teal: {
-            readonly 50: "#f0fdfa";
             readonly 100: "#ccfbf1";
-            readonly 200: "#99f6e4";
             readonly 300: "#5eead4";
             readonly 400: "#2dd4bf";
             readonly 500: "#14b8a6";
-            readonly 600: "#0d9488";
             readonly 700: "#0f766e";
-            readonly 800: "#115e59";
-            readonly 900: "#134e4a";
-            readonly 950: "#042f2e";
         };
         readonly sky: {
-            readonly 50: "#f0f9ff";
             readonly 100: "#e0f2fe";
-            readonly 200: "#bae6fd";
             readonly 300: "#7dd3fc";
             readonly 400: "#38bdf8";
             readonly 500: "#0ea5e9";
-            readonly 600: "#0284c7";
             readonly 700: "#0369a1";
             readonly 800: "#075985";
-            readonly 900: "#0c4a6e";
-            readonly 950: "#082f49";
         };
         readonly purple: {
-            readonly 50: "#faf5ff";
             readonly 100: "#f3e8ff";
-            readonly 200: "#e9d5ff";
             readonly 300: "#d8b4fe";
             readonly 400: "#c084fc";
             readonly 500: "#a855f7";
-            readonly 600: "#9333ea";
             readonly 700: "#7e22ce";
-            readonly 800: "#6b21a8";
-            readonly 900: "#581c87";
-            readonly 950: "#3b0764";
         };
         readonly pink: {
-            readonly 50: "#fdf2f8";
             readonly 100: "#fce7f3";
-            readonly 200: "#fbcfe8";
             readonly 300: "#f9a8d4";
             readonly 400: "#f472b6";
             readonly 500: "#ec4899";
-            readonly 600: "#db2777";
             readonly 700: "#be185d";
-            readonly 800: "#9d174d";
-            readonly 900: "#831843";
-            readonly 950: "#500724";
         };
     };
     /** 4px grid. Key = number of 4px steps (`4` → 16px). */
@@ -168,14 +119,12 @@ export declare const primitiveTokens: {
         readonly 24: "6rem";
     };
     readonly radius: {
-        readonly 0: "0";
         readonly 4: "4px";
         readonly 6: "6px";
         readonly 8: "8px";
         readonly 10: "10px";
         readonly 12: "12px";
         readonly 16: "16px";
-        readonly 20: "20px";
         readonly full: "9999px";
     };
     readonly font: {
@@ -185,6 +134,8 @@ export declare const primitiveTokens: {
         };
         /** Modular scale, ~1.2 in the body range, ~1.25 for headings. */
         readonly size: {
+            /** Only for tab-bar labels under an icon (BottomNav, iOS tab bar 10pt); text roles start at 12. */
+            readonly 10: "0.625rem";
             readonly 12: "0.75rem";
             readonly 13: "0.8125rem";
             readonly 14: "0.875rem";
@@ -198,6 +149,8 @@ export declare const primitiveTokens: {
             readonly 60: "3.75rem";
         };
         readonly lineHeight: {
+            /** Only for tab-bar labels (BottomNav). */
+            readonly 12: "0.75rem";
             readonly 16: "1rem";
             readonly 20: "1.25rem";
             readonly 24: "1.5rem";
@@ -219,7 +172,6 @@ export declare const primitiveTokens: {
             readonly tight: "-0.01em";
             readonly normal: "0";
             readonly wide: "0.01em";
-            readonly caps: "0.06em";
         };
     };
     readonly icon: {
@@ -230,38 +182,32 @@ export declare const primitiveTokens: {
         readonly 32: "2rem";
     };
     readonly duration: {
-        readonly 0: "0ms";
-        readonly 100: "100ms";
-        readonly 120: "120ms";
-        readonly 200: "200ms";
-        readonly 300: "300ms";
-        readonly 400: "400ms";
+        readonly 80: "80ms";
+        readonly 150: "150ms";
+        readonly 230: "230ms";
+        readonly 380: "380ms";
+        readonly 570: "570ms";
     };
     readonly easing: {
-        readonly standard: "cubic-bezier(0.2, 0, 0, 1)";
+        /**
+         * Ease-in-out (foundation §7): something already on screen moves evenly — no near-instant
+         * start and long crawl, so linked parts (a rail and its labels) read as one motion.
+         */
+        readonly standard: "cubic-bezier(0.4, 0, 0.2, 1)";
         readonly enter: "cubic-bezier(0, 0, 0, 1)";
-        readonly exit: "cubic-bezier(0.3, 0, 1, 1)";
+        /** Strong ease-out: a leaving element responds at once and is gone fast (no ease-in in UI). */
+        readonly exit: "cubic-bezier(0.23, 1, 0.32, 1)";
+        /** iOS sheet curve: decisive start, long soft landing, never past the target. */
+        readonly emphasized: "cubic-bezier(0.32, 0.72, 0, 1)";
     };
-    /** Stacking order. In-overlay layers sit above their host so nested portals stay on top. */
+    /**
+     * Stacking order. Every overlay (modal, drawer, popover, menu, listbox, tooltip) portals to
+     * `<body>` when it opens and shares one level: the DOM order is the open order, so a layer opened
+     * later — a Select inside a Modal, a Tooltip inside a Popover — is on top without its own number.
+     */
     readonly zIndex: {
-        readonly base: "1";
         readonly sticky: "100";
-        readonly popover: "1000";
-        readonly dropdown: "1200";
-        readonly tooltip: "1600";
-        readonly drawer: "2000";
-        readonly popoverInDrawer: "2100";
-        readonly dropdownInDrawer: "2200";
-        readonly tooltipInDrawer: "2300";
-        readonly modal: "3000";
-        readonly popoverInModal: "3100";
-        readonly dropdownInModal: "3200";
-        readonly tooltipInModal: "3300";
-        readonly drawerNestedShell: "3400";
-        readonly popoverInDrawerInModal: "3500";
-        readonly dropdownInDrawerInModal: "3600";
-        readonly tooltipInDrawerInModal: "3700";
+        readonly overlay: "1000";
         readonly toast: "10000";
     };
 };
-//# sourceMappingURL=primitives.d.ts.map