@teamofsilicons/silicon-ui 0.1.0 → 0.3.0

package/components/date-range-picker/date-range-picker.module.css

@@ -11,7 +11,7 @@
   line-height: var(--leading-body);
 }
 .root { z-index: 0; transition: z-index 0s linear .5s; }
-.root[data-open] { z-index: 30; transition-delay: 0s; }
+.root[data-open] { z-index: var(--layer-popover); transition-delay: 0s; }
 .root:not([data-open]) .surface { z-index: 0; }
 .root *, .root *::before, .root *::after { box-sizing: border-box; }
 
@@ -38,8 +38,8 @@
   width: max-content;
   height: var(--control-height-md);
   align-items: center;
-  gap: 10px;
-  padding: 0 12px 0 14px;
+  gap: var(--space-group);
+  padding: 0 var(--space-group) 0 var(--space-inset);
   border: 0;
   background: transparent;
   color: var(--foreground);
@@ -62,10 +62,10 @@
 .wordInner { display: inline-block; }
 
 /* Panel */
-.panel { position: absolute; top: 0; left: 0; width: max-content; padding: 10px; --cell: 36px; }
-.body { display: flex; gap: 10px; }
+.panel { position: absolute; top: 0; left: 0; width: max-content; padding: var(--space-group); --cell: 36px; }
+.body { display: flex; gap: var(--space-group); }
 
-.rail { position: relative; display: flex; width: 9.25rem; flex: none; flex-direction: column; gap: 2px; padding-right: 10px; border-right: 1px solid var(--border-subtle); }
+.rail { position: relative; display: flex; width: 9.25rem; flex: none; flex-direction: column; gap: var(--space-hair); padding-right: var(--space-group); border-right: 1px solid var(--border-subtle); }
 .railHighlight { position: absolute; top: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
 .preset {
   position: relative;
@@ -73,7 +73,7 @@
   height: 32px;
   flex: none;
   align-items: center;
-  padding: 0 12px;
+  padding: 0 var(--space-group);
   border: 0;
   border-radius: var(--radius-control); corner-shape: var(--corner-shape);
   background: transparent;
@@ -87,7 +87,7 @@
 }
 .preset[aria-pressed="true"] { color: var(--foreground); font-weight: 500; }
 
-.calendars { position: relative; padding: 0 2px; }
+.calendars { position: relative; padding: 0 var(--space-hair); }
 .navButton {
   position: absolute;
   z-index: 2;
@@ -105,14 +105,14 @@
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
 }
-.navButton[data-side="prev"] { left: 2px; }
-.navButton[data-side="next"] { right: 2px; }
+.navButton[data-side="prev"] { left: var(--space-hair); }
+.navButton[data-side="next"] { right: var(--space-hair); }
 .navButton:active:not(:disabled) { transform: scale(.92); }
 .navButton:disabled { opacity: .35; cursor: default; }
 
 /* Months slide horizontally inside a clipped window that keeps a little room for the blur. */
 .viewport { position: relative; overflow: clip; overflow-clip-margin: 2px; }
-.months { display: flex; gap: 24px; }
+.months { display: flex; gap: var(--space-section); }
 .month { width: calc(var(--cell) * 7); }
 .monthTitle { height: 32px; margin: 0; color: var(--foreground); font-weight: 500; line-height: 32px; text-align: center; white-space: nowrap; }
 .grid { display: grid; }
@@ -125,7 +125,7 @@
 .layer { position: absolute; inset: 0; pointer-events: none; }
 .bar { position: absolute; height: calc(var(--cell) - 6px); border-radius: var(--radius-full); corner-shape: round; background: var(--accent-subtle); }
 .thumb { position: absolute; top: 0; left: 0; width: var(--cell); height: var(--cell); }
-.thumb::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; corner-shape: round; background: var(--accent); }
+.thumb::before { content: ""; position: absolute; inset: var(--space-tight); border-radius: 50%; corner-shape: round; background: var(--accent); }
 
 .day {
   position: relative;
@@ -148,23 +148,23 @@
 .day > span { position: relative; display: grid; width: calc(100% - 6px); height: calc(100% - 6px); place-items: center; border-radius: 50%; corner-shape: round; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .day:active:not(:disabled) > span { transform: scale(.9); }
 .day[data-edge] { color: var(--accent-foreground); font-weight: 500; transition-delay: 40ms; }
-.day[data-today]::after { content: ""; position: absolute; bottom: 5px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; corner-shape: round; background: var(--accent); }
+.day[data-today]::after { content: ""; position: absolute; bottom: var(--space-tight); left: 50%; width: 4px; height: 4px; margin-left: calc(var(--space-hair) * -1); border-radius: 50%; corner-shape: round; background: var(--accent); }
 .day[data-today][data-edge]::after { background: var(--accent-foreground); }
 .day:disabled { color: var(--text-muted); cursor: default; opacity: .5; }
 .day:focus-visible:not([data-edge]) > span { background: color-mix(in oklab, var(--foreground) 7%, transparent); }
 
 /* Footer: the formatted range and the two decisions. */
-.footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding: 10px 2px 0 12px; border-top: 1px solid var(--border-subtle); }
+.footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); margin-top: var(--space-group); padding: var(--space-group) var(--space-hair) 0 var(--space-group); border-top: 1px solid var(--border-subtle); }
 .summary { display: grid; min-width: 0; gap: 1px; }
 .summaryValue { display: inline-flex; width: max-content; font-weight: 500; font-variant-numeric: tabular-nums; }
 .summaryCount { display: inline-flex; min-height: 1.4em; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
-.actions { display: flex; flex: none; align-items: center; gap: 6px; }
+.actions { display: flex; flex: none; align-items: center; gap: var(--space-related); }
 .ghost, .primary {
   display: inline-flex;
   height: var(--control-height-sm);
   align-items: center;
   justify-content: center;
-  padding: 0 14px;
+  padding: 0 var(--space-inset);
   border: 0;
   border-radius: var(--radius-control); corner-shape: var(--corner-shape);
   cursor: pointer;
@@ -184,13 +184,13 @@
 .srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
 
 /* Compact: one month under a scrolling row of presets. */
-.panel[data-compact] { padding: 8px; }
-.panel[data-compact] .body { flex-direction: column; gap: 8px; }
-.panel[data-compact] .rail { width: auto; flex-direction: row; gap: 2px; margin: 0 -8px; padding: 0 8px 8px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); overscroll-behavior-x: contain; scrollbar-width: none; }
+.panel[data-compact] { padding: var(--space-related); }
+.panel[data-compact] .body { flex-direction: column; gap: var(--space-related); }
+.panel[data-compact] .rail { width: auto; flex-direction: row; gap: var(--space-hair); margin: 0 calc(var(--space-related) * -1); padding: 0 var(--space-related) var(--space-related); overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); overscroll-behavior-x: contain; scrollbar-width: none; }
 .panel[data-compact] .rail::-webkit-scrollbar { display: none; }
-.panel[data-compact] .preset { padding: 0 11px; }
+.panel[data-compact] .preset { padding: 0 var(--space-group); }
 .panel[data-compact] .calendars { align-self: center; }
-.panel[data-compact] .footer { flex-wrap: wrap; margin-top: 6px; padding-left: 11px; }
+.panel[data-compact] .footer { flex-wrap: wrap; margin-top: var(--space-related); padding-left: var(--space-group); }
 .panel[data-compact] .actions { margin-left: auto; }
 .panel[data-compact] .summary { flex: 1 1 8rem; }
 

package/components/dialog/dialog.module.css

@@ -1,6 +1,6 @@
-.overlay { position: fixed; inset: 0; z-index: 50; background: oklch(10% 0 0 / .46); backdrop-filter: blur(7px); }
+.overlay { position: fixed; inset: 0; z-index: var(--layer-overlay); background: var(--scrim); backdrop-filter: blur(7px); }
 /* Centered with auto margins (like a native modal dialog) so transform stays free for the entrance spring. */
-.content { position: fixed; z-index: 51; inset: 0; width: min(calc(100vw - var(--space-block)), 440px); height: fit-content; max-height: calc(100vh - var(--space-block)); max-height: calc(100dvh - var(--space-block)); margin: auto; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-overlay); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); }
+.content { position: fixed; z-index: var(--layer-dialog); inset: 0; width: min(calc(100vw - var(--space-block)), 440px); height: fit-content; max-height: calc(100vh - var(--space-block)); max-height: calc(100dvh - var(--space-block)); margin: auto; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-overlay); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); }
 /* Motion animates both layers. Keyframes only run when DialogContent sits under a bare Radix root. */
 .keyframes.overlay[data-state="open"] { animation: overlay-in var(--duration-standard) var(--ease-enter) both; }
 .keyframes.overlay[data-state="closed"] { animation: overlay-out var(--duration-fast) var(--ease-standard) both; }

package/components/donut-chart/donut-chart.module.css

@@ -18,7 +18,7 @@
 
 /* The centre reads the active segment, or the total at rest. Old and new readouts share one grid cell, so a swap never moves or resizes anything. */
 .center { position: absolute; top: 50%; left: 50%; display: grid; width: calc(var(--inner) - 16px); transform: translate(-50%, -50%); pointer-events: none; }
-.readout { grid-area: 1 / 1; display: grid; min-width: 0; justify-items: center; gap: 2px; text-align: center; }
+.readout { grid-area: 1 / 1; display: grid; min-width: 0; justify-items: center; gap: var(--space-hair); text-align: center; }
 .centerLabel, .centerMeta { display: block; width: 100%; min-height: calc(1em * var(--leading-body)); overflow: hidden; font-size: var(--text-xs); line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .centerLabel { color: var(--text-secondary); }
 .centerMeta { color: var(--text-muted); font-variant-numeric: tabular-nums; }
@@ -26,10 +26,10 @@
 
 /* Legend rows mirror the segments: hovering either lights both. */
 /* Rows carry their own 2px spacing so a row closing its height takes its gap with it; the list's negative margin drops the last one. */
-.legend { display: grid; margin: 0 0 -2px; padding: 0; list-style: none; }
+.legend { display: grid; margin: 0 0 calc(var(--space-hair) * -1); padding: 0; list-style: none; }
 .item { overflow: hidden; }
-.item > .row { margin-bottom: 2px; }
-.row { display: grid; width: 100%; min-height: 40px; grid-template-columns: 10px minmax(0, 1fr) auto 3.25em; align-items: center; column-gap: 10px; padding: 6px 10px; border: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.item > .row { margin-bottom: var(--space-hair); }
+.row { display: grid; width: 100%; min-height: 40px; grid-template-columns: 10px minmax(0, 1fr) auto 3.25em; align-items: center; column-gap: var(--space-group); padding: var(--space-related) var(--space-group); border: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); text-align: left; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .row:active { transform: scale(.985); }
 .row[data-active], .row[data-pinned] { background: color-mix(in oklab, var(--foreground) 5%, transparent); }
 .dot { width: 10px; height: 10px; border-radius: 50%; corner-shape: round; background: var(--slice); box-shadow: inset 0 0 0 1.5px var(--slice); transition: background-color var(--duration-standard) var(--ease-standard), box-shadow var(--duration-standard) var(--ease-standard); }

package/components/drawer/drawer.module.css

@@ -1,8 +1,8 @@
 .overlay {
   position: fixed;
   inset: 0;
-  z-index: 50;
-  background: oklch(10% 0 0 / .38);
+  z-index: var(--layer-overlay);
+  background: var(--scrim);
   backdrop-filter: blur(4px);
 }
 
@@ -12,7 +12,7 @@
   --ease-drawer: cubic-bezier(.32,.72,0,1);
   --drawer-from: translateX(100%);
   position: fixed;
-  z-index: 51;
+  z-index: var(--layer-dialog);
   display: flex;
   flex-direction: column;
   width: var(--drawer-size);
@@ -32,7 +32,7 @@
 .content[data-side="left"] { inset: 0 auto 0 0; border-width: 1px 1px 1px 0; border-radius: 0 var(--radius-container) var(--radius-container) 0; corner-shape: var(--corner-shape); }
 .content[data-side="top"] { inset: 0 0 auto; width: 100%; max-width: none; max-height: min(32rem, 100dvh); border-width: 0 0 1px; border-radius: 0 0 var(--radius-container) var(--radius-container); corner-shape: var(--corner-shape); }
 .content[data-side="bottom"] { inset: auto 0 0; width: 100%; max-width: none; max-height: min(32rem, 100dvh); border-width: 1px 0 0; border-radius: var(--radius-container) var(--radius-container) 0 0; corner-shape: var(--corner-shape); }
-.content[data-side="bottom"]::before { position: absolute; top: 9px; left: 50%; width: 2.25rem; height: 4px; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); content: ""; opacity: .75; transform: translateX(-50%); }
+.content[data-side="bottom"]::before { position: absolute; top: var(--space-related); left: 50%; width: 2.25rem; height: 4px; border-radius: var(--radius-full); corner-shape: round; background: var(--border-strong); content: ""; opacity: .75; transform: translateX(-50%); }
 
 /* Motion springs the panel from its edge. Keyframes only run when DrawerContent sits under a bare Radix root. */
 .content[data-side="left"] { --drawer-from: translateX(-100%); }
@@ -45,7 +45,7 @@
 .content:focus { outline: none; }
 /* Inside a container the layers anchor to that element instead of the viewport. */
 .overlay[data-contained], .content[data-contained] { position: absolute; }
-.overlay[data-contained] { z-index: 1; background: oklch(10% 0 0 / .16); backdrop-filter: none; }
+.overlay[data-contained] { z-index: 1; background: var(--scrim-soft); backdrop-filter: none; }
 .content[data-contained] { --drawer-size: min(22rem, calc(100% - var(--space-block))); z-index: 2; max-height: 100%; box-shadow: none; }
 .content[data-contained][data-side="top"], .content[data-contained][data-side="bottom"] { max-height: min(32rem, calc(100% - var(--space-block))); }
 /* The container already draws the outer edges, so only the inner edge keeps a border. */

package/components/dropdown-menu/dropdown-menu.d.ts

@@ -1,16 +1,86 @@
-import type { ReactNode } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+/** The menu's state. Uncontrolled by default; pass `open` and `onOpenChange` to control it. */
+export declare function DropdownMenuRoot(props: ComponentPropsWithoutRef<typeof DropdownPrimitive.Root>): import("react").JSX.Element;
+export interface DropdownMenuTriggerProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.Trigger> {
+    /** Render your own trigger (an icon-only Button with an aria-label, an avatar and name) instead of the default one. */
+    asChild?: boolean;
+}
+/** What opens the menu. Without `asChild` it is the default outlined trigger with a chevron. */
+export declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface DropdownMenuContentProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.Content> {
+    /** Which side of the trigger it opens on (default bottom). */
+    side?: "top" | "right" | "bottom" | "left";
+    /** How it lines up with the trigger (default end). */
+    align?: "start" | "center" | "end";
+}
+/** The menu itself. One highlight glides between items for the pointer and jumps instantly for the keyboard. */
+export declare const DropdownMenuContent: import("react").ForwardRefExoticComponent<DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuItemProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.Item> {
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+    /** A keyboard shortcut hint after the label, such as "⌘D". Shown only; bind the keys yourself. */
+    shortcut?: string;
+    /** A destructive action (delete, remove): shown in the danger colour. */
+    destructive?: boolean;
+    /** Make your own element the item, such as a link: `<DropdownMenuItem asChild><a href="/q3">Q3 2026</a></DropdownMenuItem>`.
+     *  Its children become the label, and Enter follows the link. */
+    asChild?: boolean;
+}
+/** One action, or with `asChild` one link. */
+export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuCheckboxItemProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.CheckboxItem> {
+    /** A keyboard shortcut hint after the label. */
+    shortcut?: string;
+}
+/** An on/off setting, such as "Full width". A check shows in the icon column while it is on. */
+export declare const DropdownMenuCheckboxItem: import("react").ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/** One choice out of several (the current space, a sort order). Wrap DropdownMenuRadioItems in it. */
+export declare const DropdownMenuRadioGroup: import("react").ForwardRefExoticComponent<DropdownPrimitive.DropdownMenuRadioGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface DropdownMenuRadioItemProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.RadioItem> {
+    /** A 16px icon or avatar before the label; the check shows at the end while this is the current choice. */
+    icon?: ReactNode;
+}
+/** One of the choices in a DropdownMenuRadioGroup. The current choice shows a check at the end. */
+export declare const DropdownMenuRadioItem: import("react").ForwardRefExoticComponent<DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A section heading inside the menu, such as "Spaces". Not focusable. */
+export declare const DropdownMenuLabel: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** A hairline between groups of items. */
+export declare const DropdownMenuSeparator: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuSeparatorProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** Groups items for assistive technology, without visual change. */
+export declare const DropdownMenuGroup: import("react").ForwardRefExoticComponent<DropdownPrimitive.DropdownMenuGroupProps & import("react").RefAttributes<HTMLDivElement>>;
+/** A nested menu: a DropdownMenuSubTrigger and its DropdownMenuSubContent. */
+export declare const DropdownMenuSub: import("react").FC<DropdownPrimitive.DropdownMenuSubProps>;
+export interface DropdownMenuSubTriggerProps extends ComponentPropsWithoutRef<typeof DropdownPrimitive.SubTrigger> {
+    /** A 16px icon before the label. */
+    icon?: ReactNode;
+}
+/** The item that opens a submenu (on hover, click, or the right arrow key). */
+export declare const DropdownMenuSubTrigger: import("react").ForwardRefExoticComponent<DropdownMenuSubTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+/** The submenu's own menu, opening beside its trigger. */
+export declare const DropdownMenuSubContent: import("react").ForwardRefExoticComponent<Omit<DropdownPrimitive.DropdownMenuSubContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export interface DropdownItem {
+    /** The item's text. */
     label: string;
+    /** Runs when the item is chosen. */
     onSelect?: () => void;
+    /** Shown but not choosable. */
     disabled?: boolean;
+    /** A 16px icon before the label. */
     icon?: ReactNode;
+    /** A destructive action, shown in the danger colour. */
     destructive?: boolean;
+    /** Draws a separator above this item. */
     separatorBefore?: boolean;
 }
 export interface DropdownMenuProps {
+    /** The trigger's text; when it names the current choice, a new label rises in and the trigger springs to its width. */
     label: string;
+    /** The actions, in order. */
     items: DropdownItem[];
+    /** An icon before the trigger's text. */
     icon?: ReactNode;
 }
+/** The shorthand: a labelled trigger and a flat list of actions, built from the parts above. */
 export declare function DropdownMenu({ label, items, icon }: DropdownMenuProps): import("react").JSX.Element;
 export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.js

@@ -1,12 +1,107 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, useLayoutEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Dropdown menu: a list of actions behind a trigger.
+ *
+ * Two ways to use it:
+ *
+ *   // Shorthand: a labelled trigger and a flat list.
+ *   <DropdownMenu label="Manage silicon" items={[{ label: "Rename", onSelect: rename }, …]} />
+ *
+ *   // Composable (experimental): any trigger, labels, checked and radio items, shortcuts and submenus.
+ *   <DropdownMenuRoot>
+ *     <DropdownMenuTrigger asChild><Button variant="ghost" aria-label="Page options"><Ellipsis /></Button></DropdownMenuTrigger>
+ *     <DropdownMenuContent align="end">
+ *       <DropdownMenuLabel>Page</DropdownMenuLabel>
+ *       <DropdownMenuItem icon={<Copy />} shortcut="⌘D" onSelect={duplicate}>Duplicate</DropdownMenuItem>
+ *       <DropdownMenuCheckboxItem checked={wide} onCheckedChange={setWide}>Full width</DropdownMenuCheckboxItem>
+ *       <DropdownMenuSub>
+ *         <DropdownMenuSubTrigger icon={<FolderInput />}>Move to</DropdownMenuSubTrigger>
+ *         <DropdownMenuSubContent>…</DropdownMenuSubContent>
+ *       </DropdownMenuSub>
+ *       <DropdownMenuSeparator />
+ *       <DropdownMenuItem destructive icon={<Trash2 />} onSelect={remove}>Delete</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenuRoot>
+ *
+ * Every part shares one look: the same surface, the gliding highlight, the entrance that grows from the trigger.
+ */
+import { Fragment, cloneElement, forwardRef, isValidElement, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
-import { ChevronDown } from "lucide-react";
+import { Check, ChevronDown, ChevronRight } from "lucide-react";
 import { MenuHighlight, useMenuHighlight } from "../../lib/menu-highlight.js";
 import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./dropdown-menu.module.css";
+const ITEMS = '[role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"]';
+const cx = (...names) => names.filter(Boolean).join(" ");
+/** A menu surface's own ref, also handed to the caller's ref. It numbers the items in order, so their entrance
+ *  staggers whatever groups and parts they sit in. */
+function useSurfaceRef(forwarded) {
+    const own = useRef(null);
+    useImperativeHandle(forwarded, () => own.current, []);
+    useLayoutEffect(() => {
+        own.current?.querySelectorAll(ITEMS).forEach((item, index) => item.style.setProperty("--i", String(index)));
+    });
+    return own;
+}
+/* ------------------------------------------------------------------------------------------------------------------ */
+/* Composable parts                                                                                                    */
+/* ------------------------------------------------------------------------------------------------------------------ */
+/** The menu's state. Uncontrolled by default; pass `open` and `onOpenChange` to control it. */
+export function DropdownMenuRoot(props) {
+    return _jsx(DropdownPrimitive.Root, { ...props });
+}
+/** What opens the menu. Without `asChild` it is the default outlined trigger with a chevron. */
+export const DropdownMenuTrigger = forwardRef(function DropdownMenuTrigger({ asChild, className, children, ...props }, ref) {
+    if (asChild)
+        return _jsx(DropdownPrimitive.Trigger, { ...props, ref: ref, asChild: true, children: children });
+    return (_jsxs(DropdownPrimitive.Trigger, { ...props, ref: ref, type: "button", className: cx(styles.trigger, className), children: [children, _jsx(ChevronDown, { className: styles.chevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }));
+});
+/** The menu itself. One highlight glides between items for the pointer and jumps instantly for the keyboard. */
+export const DropdownMenuContent = forwardRef(function DropdownMenuContent({ className, children, side = "bottom", align = "end", sideOffset = 6, collisionPadding = 12, ...props }, ref) {
+    const { highlight, contentProps } = useMenuHighlight(ITEMS);
+    const surface = useSurfaceRef(ref);
+    return (_jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.Content, { ...props, ...contentProps, ref: surface, side: side, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, loop: true, className: cx(styles.menu, className), children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), children] }) }));
+});
+/** One action, or with `asChild` one link. */
+export const DropdownMenuItem = forwardRef(function DropdownMenuItem({ icon, shortcut, destructive, asChild, className, children, ...props }, ref) {
+    const content = (label) => _jsxs(_Fragment, { children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.itemLabel, children: label }), shortcut ? _jsx("kbd", { className: styles.shortcut, children: shortcut }) : null] });
+    const own = asChild && isValidElement(children) ? children : null;
+    return (_jsx(DropdownPrimitive.Item, { ...props, ref: ref, asChild: !!own, className: cx(styles.item, destructive && styles.destructive, className), "data-tone": destructive ? "danger" : undefined, children: own ? cloneElement(own, undefined, content(own.props.children)) : content(children) }));
+});
+/** An on/off setting, such as "Full width". A check shows in the icon column while it is on. */
+export const DropdownMenuCheckboxItem = forwardRef(function DropdownMenuCheckboxItem({ shortcut, className, children, ...props }, ref) {
+    return (_jsxs(DropdownPrimitive.CheckboxItem, { ...props, ref: ref, className: cx(styles.item, className), children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: _jsx(DropdownPrimitive.ItemIndicator, { children: _jsx(Check, { size: 16, strokeWidth: 2 }) }) }), _jsx("span", { className: styles.itemLabel, children: children }), shortcut ? _jsx("kbd", { className: styles.shortcut, children: shortcut }) : null] }));
+});
+/** One choice out of several (the current space, a sort order). Wrap DropdownMenuRadioItems in it. */
+export const DropdownMenuRadioGroup = DropdownPrimitive.RadioGroup;
+/** One of the choices in a DropdownMenuRadioGroup. The current choice shows a check at the end. */
+export const DropdownMenuRadioItem = forwardRef(function DropdownMenuRadioItem({ icon, className, children, ...props }, ref) {
+    return (_jsxs(DropdownPrimitive.RadioItem, { ...props, ref: ref, className: cx(styles.item, className), children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.itemLabel, children: children }), _jsx("span", { className: styles.indicator, "aria-hidden": "true", children: _jsx(DropdownPrimitive.ItemIndicator, { children: _jsx(Check, { size: 16, strokeWidth: 2 }) }) })] }));
+});
+/** A section heading inside the menu, such as "Spaces". Not focusable. */
+export const DropdownMenuLabel = forwardRef(function DropdownMenuLabel({ className, ...props }, ref) {
+    return _jsx(DropdownPrimitive.Label, { ...props, ref: ref, className: cx(styles.sectionLabel, className) });
+});
+/** A hairline between groups of items. */
+export const DropdownMenuSeparator = forwardRef(function DropdownMenuSeparator({ className, ...props }, ref) {
+    return _jsx(DropdownPrimitive.Separator, { ...props, ref: ref, className: cx(styles.separator, className) });
+});
+/** Groups items for assistive technology, without visual change. */
+export const DropdownMenuGroup = DropdownPrimitive.Group;
+/** A nested menu: a DropdownMenuSubTrigger and its DropdownMenuSubContent. */
+export const DropdownMenuSub = DropdownPrimitive.Sub;
+/** The item that opens a submenu (on hover, click, or the right arrow key). */
+export const DropdownMenuSubTrigger = forwardRef(function DropdownMenuSubTrigger({ icon, className, children, ...props }, ref) {
+    return (_jsxs(DropdownPrimitive.SubTrigger, { ...props, ref: ref, className: cx(styles.item, styles.subTrigger, className), children: [icon ? _jsx("span", { className: styles.icon, "aria-hidden": "true", children: icon }) : null, _jsx("span", { className: styles.itemLabel, children: children }), _jsx(ChevronRight, { className: styles.subChevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }));
+});
+/** The submenu's own menu, opening beside its trigger. */
+export const DropdownMenuSubContent = forwardRef(function DropdownMenuSubContent({ className, children, sideOffset = 6, collisionPadding = 12, ...props }, ref) {
+    const { highlight, contentProps } = useMenuHighlight(ITEMS);
+    const surface = useSurfaceRef(ref);
+    return (_jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.SubContent, { ...props, ...contentProps, ref: surface, sideOffset: sideOffset, collisionPadding: collisionPadding, loop: true, className: cx(styles.menu, className), children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), children] }) }));
+});
 /** A new trigger label rises in while the old one leaves, and the trigger width springs to the measured text instead of snapping. */
 function TriggerLabel({ text }) {
     const reduced = useReducedMotion();
@@ -31,9 +126,8 @@ function TriggerLabel({ text }) {
     }, []);
     return _jsxs(motion.span, { className: styles.label, initial: false, animate: { width: size.width }, transition: size.animate && !reduced ? motionTokens.spring.morph : { duration: 0 }, children: [_jsx("span", { ref: measure, className: styles.labelMeasure, "aria-hidden": "true", children: text }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.labelText, initial: reduced ? false : { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: text }, text) })] });
 }
+/** The shorthand: a labelled trigger and a flat list of actions, built from the parts above. */
 export function DropdownMenu({ label, items, icon }) {
-    const { highlight, reset, contentProps } = useMenuHighlight();
-    return _jsxs(DropdownPrimitive.Root, { onOpenChange: open => { if (open)
-            reset(); }, children: [_jsxs(DropdownPrimitive.Trigger, { className: styles.trigger, type: "button", children: [icon && _jsx("span", { className: styles.triggerIcon, "aria-hidden": "true", children: icon }), _jsx(TriggerLabel, { text: label }), _jsx(ChevronDown, { className: styles.chevron, size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }), _jsx(DropdownPrimitive.Portal, { children: _jsxs(DropdownPrimitive.Content, { className: styles.menu, sideOffset: 6, align: "end", collisionPadding: 12, loop: true, ...contentProps, children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), items.map((item, index) => _jsxs(Fragment, { children: [item.separatorBefore && _jsx(DropdownPrimitive.Separator, { className: styles.separator }), _jsxs(DropdownPrimitive.Item, { className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, onSelect: item.onSelect, children: [item.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }), item.label] })] }, item.label))] }) })] });
+    return (_jsxs(DropdownMenuRoot, { children: [_jsxs(DropdownMenuTrigger, { children: [icon ? _jsx("span", { className: styles.triggerIcon, "aria-hidden": "true", children: icon }) : null, _jsx(TriggerLabel, { text: label })] }), _jsx(DropdownMenuContent, { children: items.map(item => (_jsxs(Fragment, { children: [item.separatorBefore ? _jsx(DropdownMenuSeparator, {}) : null, _jsx(DropdownMenuItem, { icon: item.icon, destructive: item.destructive, disabled: item.disabled, onSelect: item.onSelect, children: item.label })] }, item.label))) })] }));
 }
 export default DropdownMenu;

package/components/dropdown-menu/dropdown-menu.module.css

@@ -12,7 +12,7 @@
 .trigger[data-state="open"] .chevron { transform: rotate(180deg); }
 /* The menu grows from the trigger edge: offset toward the trigger, scale from the Radix origin, fade quickly.
    Transitions instead of keyframes, so a close that interrupts the open (or a reopen during the close) reverses from where it is. */
-.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: 60; min-width: min(12rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: 5px; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
+.menu { --menu-x: 0px; --menu-y: -5px; position: relative; z-index: var(--layer-dropdown); min-width: min(12rem, var(--radix-dropdown-menu-content-available-width)); max-width: var(--radix-dropdown-menu-content-available-width); padding: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: var(--radix-dropdown-menu-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-spring) var(--ease-spring); }
 .menu[data-side="top"] { --menu-y: 5px; }
 .menu[data-side="left"] { --menu-x: 5px; --menu-y: 0px; }
 .menu[data-side="right"] { --menu-x: -5px; --menu-y: 0px; }
@@ -21,11 +21,21 @@
   .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
 }
 /* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
-.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
-.highlight { position: absolute; top: 0; right: 5px; left: 5px; border-radius: calc(var(--radius-container) - 6px); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); animation: menu-exit var(--duration-instant) linear both; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: var(--space-tight); left: var(--space-tight); border-radius: calc(var(--radius-container) - var(--space-related)); background: var(--surface-muted); opacity: 0; pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .highlight[data-tone="danger"] { background: color-mix(in oklab, var(--danger) 8%, var(--surface)); }
-.item { position: relative; display: flex; min-height: 36px; align-items: center; gap: 10px; padding: 0 11px; border-radius: calc(var(--radius-container) - 6px); color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
-.icon { display: inline-flex; width: 17px; color: var(--text-secondary); }
+/* An item may be a link (asChild), which keeps the item's look. */
+.item { position: relative; display: flex; min-height: 36px; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); color: var(--foreground); font-size: var(--text-sm); text-decoration: none; cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * var(--stagger-item)), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * var(--stagger-item)); }
+/* At least the 16px icon's column; wider content (an avatar) takes the room it needs. */
+.icon { display: inline-flex; min-width: 17px; flex: none; color: var(--text-secondary); }
+/* The composable parts. The label takes the free width, so a shortcut or check sits at the end of the row. */
+.itemLabel { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.shortcut { flex: none; padding-left: var(--space-group); color: var(--text-muted); font: inherit; font-size: var(--text-xs); letter-spacing: var(--tracking-body); }
+.indicator { display: inline-flex; flex: none; color: var(--foreground); }
+.sectionLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
+.subChevron { flex: none; color: var(--text-muted); }
+/* While its submenu is open, the item that opened it keeps a quiet fill, so the path stays visible. */
+.subTrigger[data-state="open"] { background: var(--surface-muted); }
 .separator { height: 1px; margin: var(--space-tight) calc(var(--space-tight) * -1); background: var(--border-subtle); }
 .destructive { color: var(--danger); }
 .destructive .icon { color: var(--danger); }

package/components/elastic-slider/elastic-slider.module.css

@@ -15,7 +15,7 @@
 /* Only the band stretches. Ticks, thumb, and tag ride along without distorting. */
 .track { position: absolute; inset: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-track); will-change: transform; }
 .fill { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--control-fill); }
-.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: calc(var(--space-hair) * -1) 0 0 calc(var(--space-hair) * -1); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .tick[data-on] { background: color-mix(in oklab, var(--control-glyph) 60%, transparent); }
 .thumbs { position: absolute; inset: 0 calc(var(--elastic-thumb) / 2); container-type: inline-size; pointer-events: none; }
 /* Each layer is as wide as the rail and slides by a percentage of itself, so placing the thumb needs no measuring. */
@@ -23,11 +23,11 @@
 .shift { position: absolute; inset: 0; }
 .thumb { position: absolute; top: 50%; right: 0; box-sizing: border-box; width: var(--elastic-thumb); height: var(--elastic-thumb); translate: 50% -50%; border: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); pointer-events: auto; cursor: grab; outline: none; transition: box-shadow var(--duration-fast) var(--ease-standard); }
 /* A generous invisible hit area for fingertips. */
-.thumb::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; corner-shape: inherit; }
+.thumb::after { content: ""; position: absolute; inset: calc(var(--space-group) * -1); border-radius: inherit; corner-shape: inherit; }
 .root[data-dragging], .root[data-dragging] .control, .root[data-dragging] .thumb { cursor: grabbing; }
 /* The tag centers on the thumb until it would pass the component's edge, then holds there. It hangs from its bottom edge, so a swing pivots on the thumb. */
-.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + 10px); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
-@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + 20px); } }
+.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + var(--space-group)); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
+@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + var(--space-comfort)); } }
 .bubble { display: inline-flex; min-height: 1.75rem; align-items: center; padding: 0 var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 50% 130%; }
 .marks { position: relative; grid-area: 2 / 2; height: 1.25rem; margin: 0 calc(var(--elastic-thumb) / 2); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .markLabel { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }

package/components/expandable-card/expandable-card.module.css

@@ -10,7 +10,7 @@
 .trigger:active { background: var(--surface-muted); }
 .copy { min-width: 0; }
 .copy strong { display: block; font-size: var(--text-sm); font-weight: 500; }
-.description { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.description { display: block; margin-top: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .roll { position: relative; display: block; }
 .word { display: inline-block; white-space: pre; }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/components/expanding-button-group/expanding-button-group.module.css

@@ -1,5 +1,5 @@
 /* A flat pill on the surface. Geometry comes from the component as --ebg-* variables, so the measured widths and the CSS agree. */
-.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: 2px; padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
+.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: var(--space-hair); padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
 
 /* The box never scales: its width is the animation, so a press answers with the icon and with color. The label overflows to the
    right of the icon and the clipped width reveals it. min-width keeps the spring's settle from pinching a collapsed button. */

package/components/expanding-search/expanding-search.module.css

@@ -16,24 +16,24 @@
 .trigger { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; corner-shape: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .trigger:focus-visible { outline: none; }
 /* The glass sits at the leading edge, so it is centered in the circle and rides that edge to its place in the open field. */
-.icon { position: absolute; top: calc(50% - 9px); left: calc(var(--control-height-md) / 2 - 10px); pointer-events: none; }
-.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 40px 0 38px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
+.icon { position: absolute; top: calc(50% - var(--space-related)); left: calc(var(--control-height-md) / 2 - var(--space-group)); pointer-events: none; }
+.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 var(--space-page) 0 var(--space-block); border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
 .input:focus-visible { outline: none; }
 .input::placeholder { color: var(--text-muted); opacity: 1; }
 .input[inert] { pointer-events: none; }
-.clear { position: absolute; z-index: 1; top: calc(50% - 14px); right: 7px; display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
+.clear { position: absolute; z-index: 1; top: calc(50% - var(--space-inset)); right: var(--space-related); display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
 
 /* A floating layer: its width is the field's, so it unfolds from the field on first open; its content keeps the final width and rides the leading edge. */
-.panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
+.panel { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--space-related)); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
 .root[data-anchor="start"] .panel { right: auto; left: 0; }
-.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
+.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-related); scrollbar-width: thin; }
 .view { position: relative; }
 /* A flex gap, not margins: a group popping out while it leaves never lets the next one's margin collapse through the list. */
-.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; }
+.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-tight); }
 .group { position: relative; }
-.groupLabel { padding: 8px 12px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+.groupLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
 /* Nested corners step down from the panel by its inset. The highlight paints under every row's content, so text never hides while it travels. */
-.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
 .highlight { position: absolute; z-index: -1; inset: 0; border-radius: inherit; corner-shape: inherit; background: color-mix(in oklab, var(--foreground) 6%, transparent); pointer-events: none; }
 .optionIcon { display: grid; flex: none; width: 18px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
 .option[data-active] .optionIcon { color: var(--foreground); }
@@ -42,7 +42,7 @@
 .optionTitle { color: var(--foreground); font-size: var(--text-sm); }
 .optionMeta { color: var(--text-muted); font-size: var(--text-xs); }
 .mark { background: none; color: var(--foreground); font-weight: 500; }
-.empty { display: grid; gap: 2px; padding: 12px 12px 14px; }
+.empty { display: grid; gap: var(--space-hair); padding: var(--space-group) var(--space-group) var(--space-inset); }
 .emptyTitle { margin: 0; overflow-wrap: anywhere; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .emptyHint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }