@assure-one/design-system 1.30.0 → 1.32.0

package/dist/index.js

@@ -3,7 +3,7 @@ import * as React39 from 'react';
 import { forwardRef, useId, useRef, useState, useEffect, useCallback, useImperativeHandle, useMemo, createContext, Fragment as Fragment$1, useContext } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { cva } from 'class-variance-authority';
@@ -11,13 +11,13 @@ import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import { Slot } from '@radix-ui/react-slot';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { DayPicker } from 'react-day-picker';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { parse, isValid, format, startOfMonth, startOfYear, subYears, endOfMonth, endOfYear, addYears } from 'date-fns';
 import * as SelectPrimitive from '@radix-ui/react-select';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import { Command } from 'cmdk';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
-import { parse, isValid, format } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
@@ -42,52 +42,52 @@ import * as VisuallyHiddenPrimitive from '@radix-ui/react-visually-hidden';
 // src/tokens/reference.ts
 var colors = {
   /* Surfaces */
-  bg: "#FDFDFC",
-  bg2: "#F7F7F5",
-  bg3: "#F0F0ED",
-  surface: "#FFFFFF",
-  surface2: "#FAFAF8",
+  bg: "#ffffff",
+  bg2: "#f1f3f8",
+  bg3: "#e7eaf1",
+  surface: "#ffffff",
+  surface2: "#f7f8fc",
   /* Foreground */
-  fg: "#0A0A0A",
-  fg2: "#38383B",
-  fg3: "#6B6B70",
-  fg4: "#9A9AA0",
-  fg5: "#C4C4C8",
+  fg: "#0a0a0a",
+  fg2: "#38383b",
+  fg3: "#5f5f64",
+  fg4: "#6b6b70",
+  fg5: "#9a9aa0",
   /* Rules */
-  rule: "#EAEAE6",
-  ruleSoft: "#F0F0EC",
-  ruleStrong: "#DADAD4",
+  rule: "#e4e7ef",
+  ruleSoft: "#eef0f5",
+  ruleStrong: "#d3d8e3",
   /* Accent (cyan) */
-  accent: "#0066FF",
-  accent2: "#0052CC",
-  accentTint: "#E8F0FF",
-  accentHover: "#005BE6",
-  accentActive: "#004FCC",
+  accent: "#6c42f8",
+  accent2: "#5127e8",
+  accentTint: "#efeaff",
+  accentHover: "#5e35f2",
+  accentActive: "#5127e8",
   /* Pro (purple) */
-  proBg: "#F4F1FF",
-  proBgHover: "#EEE9FF",
-  proBgActive: "#E4DDFF",
-  proFg: "#6C42F8",
-  proHover: "#5E35F2",
-  proActive: "#5127E8",
-  proDisabled: "#B7A7F3",
-  proLine: "#7B5BD8",
+  proBg: "#f4f1ff",
+  proBgHover: "#eee9ff",
+  proBgActive: "#e4ddff",
+  proFg: "#6c42f8",
+  proHover: "#5e35f2",
+  proActive: "#5127e8",
+  proDisabled: "#b7a7f3",
+  proLine: "#7b5bd8",
   /* Disabled */
-  fgDisabled: "#A7A7AC",
-  bgDisabled: "#F3F3F1",
+  fgDisabled: "#a7a7ac",
+  bgDisabled: "#f3f3f1",
   /* Status */
-  successFg: "#1F7A3D",
-  successBg: "#EAF6EE",
-  successLine: "#C5E5CF",
-  warningFg: "#B45F0A",
-  warningBg: "#FFF3E5",
-  warningLine: "#F5D5A8",
-  dangerFg: "#C43838",
-  dangerBg: "#FBEAEA",
-  dangerLine: "#ECC5C5",
+  successFg: "#1f7a3d",
+  successBg: "#eaf6ee",
+  successLine: "#c5e5cf",
+  warningFg: "#8a4606",
+  warningBg: "#fff3e5",
+  warningLine: "#f5d5a8",
+  dangerFg: "#c43838",
+  dangerBg: "#fbeaea",
+  dangerLine: "#ecc5c5",
   /* On-brand */
-  fgOnAccent: "#FFFFFF",
-  fgOnPro: "#FFFFFF"
+  fgOnAccent: "#ffffff",
+  fgOnPro: "#ffffff"
 };
 var typography = {
   family: {
@@ -113,17 +113,17 @@ var radii = {
   full: "9999px"
 };
 var shadows = {
-  quiet: "0 1px 2px rgba(10,10,10,0.03)",
-  card: "0 12px 28px -16px rgba(10,10,10,0.18), 0 1px 2px rgba(10,10,10,0.04)",
-  pop: "0 30px 80px -30px rgba(10,10,10,0.18), 0 8px 24px -8px rgba(10,10,10,0.06)",
-  focusRing: "0 0 0 2px rgba(0, 102, 255, 0.18)"
+  quiet: "0 1px 2px rgba(10, 10, 10, 0.03)",
+  card: "0 12px 28px -16px rgba(10, 10, 10, 0.18), 0 1px 2px rgba(10, 10, 10, 0.04)",
+  pop: "0 30px 80px -30px rgba(10, 10, 10, 0.18), 0 8px 24px -8px rgba(10, 10, 10, 0.06)",
+  focusRing: "0 0 0 2px rgba(108, 66, 248, 0.18)"
 };
 var overlays = {
   hover: "rgba(10, 10, 10, 0.03)",
   active: "rgba(10, 10, 10, 0.05)"
 };
 var layout = {
-  shellSidebarWidth: "256px",
+  shellSidebarWidth: "200px",
   shellHeaderHeight: "56px",
   contentPad: "32px"
 };
@@ -144,10 +144,10 @@ var spacing = {
   180: "180px"
 };
 var surfaces = {
-  bg: "#FDFDFC",
-  bg2: "#F7F7F5",
-  surface: "#FFFFFF",
-  surface2: "#FAFAF8"
+  bg: "#ffffff",
+  bg2: "#f1f3f8",
+  surface: "#ffffff",
+  surface2: "#f7f8fc"
 };
 var motion = {
   ease: {
@@ -201,6 +201,11 @@ var systemTokens = {
     accentHover: "var(--color-accent-hover)",
     accentActive: "var(--color-accent-active)",
     accentRing: "var(--color-accent-ring)",
+    /* Stable cross-product CTA; deliberately independent of [data-brand]. */
+    suiteAction: "var(--color-suite-action)",
+    suiteActionHover: "var(--color-suite-action-hover)",
+    suiteActionActive: "var(--color-suite-action-active)",
+    fgOnSuiteAction: "var(--color-fg-on-suite-action)",
     /* Brand — ambient product family; follows the active [data-brand] scope,
        defaulting to Pro. Prefer these (and the generated bg-brand / text-brand
        / border-brand-line / text-fg-on-brand utilities) for scope-aware chrome
@@ -349,6 +354,20 @@ var systemTokens = {
       fast: "var(--duration-fast)",
       normal: "var(--duration-normal)",
       slow: "var(--duration-slow)"
+    },
+    semantic: {
+      duration: {
+        press: "var(--motion-duration-press)",
+        feedback: "var(--motion-duration-feedback)",
+        overlay: "var(--motion-duration-overlay)",
+        spatial: "var(--motion-duration-spatial)",
+        deliberate: "var(--motion-duration-deliberate)"
+      },
+      ease: {
+        enter: "var(--motion-ease-enter)",
+        exit: "var(--motion-ease-exit)",
+        move: "var(--motion-ease-move)"
+      }
     }
   },
   layout: {
@@ -367,6 +386,29 @@ var systemTokens = {
     tooltip: "var(--z-tooltip)"
   }
 };
+var split = (values) => values.split(" ");
+var DS_RADIUS = split("badges btn buttons card cards general icon input inputs pill");
+var DS_SHADOW = split("card focus focus-ring pop quiet subtle");
+var DS_EASE = split("out-quart");
+var DS_FONT = split("body display");
+var DS_ANIMATE = split("accordion-down accordion-up collapsible-down collapsible-up pulse-soft");
+var isDsShadowVar = (value) => /^\[var\(--shadow-[a-z0-9-]*\)\]$/.test(value);
+var dsMergeConfig = {
+  extend: {
+    theme: {
+      radius: DS_RADIUS,
+      shadow: DS_SHADOW,
+      ease: DS_EASE,
+      font: DS_FONT,
+      animate: DS_ANIMATE
+    },
+    classGroups: {
+      shadow: [{ shadow: [isDsShadowVar] }]
+    }
+  }
+};
+var extendMerge = extendTailwindMerge;
+var twMerge = extendMerge(dsMergeConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -2435,6 +2477,254 @@ var AccordionContent = React39.forwardRef(function AccordionContent2({ children,
   );
 });
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/foundation/anatomy/define.ts
+var ROOT_PART = "root";
+var NAME_PATTERN = /^[a-z][a-z0-9]*(?:-[a-z0-9]+)*$/;
+var registry = /* @__PURE__ */ new Map();
+function assertName(value, what) {
+  if (!NAME_PATTERN.test(value)) {
+    throw new TypeError(
+      `anatomy: ${what} must be lower-case kebab-case, received ${JSON.stringify(value)}`
+    );
+  }
+}
+function defineAnatomy(name, parts) {
+  assertName(name, "component name");
+  if (parts.length === 0) {
+    throw new TypeError(`anatomy: ${name} must declare at least one part`);
+  }
+  const seen = /* @__PURE__ */ new Set();
+  for (const part of parts) {
+    assertName(part, `part name of ${name}`);
+    if (seen.has(part)) {
+      throw new TypeError(`anatomy: ${name} declares the part ${JSON.stringify(part)} twice`);
+    }
+    seen.add(part);
+  }
+  if (registry.has(name)) {
+    throw new TypeError(`anatomy: ${name} is already registered`);
+  }
+  const attr = (part) => part === ROOT_PART ? name : `${name}-${String(part)}`;
+  const anatomy = {
+    name,
+    parts: [...parts],
+    attrs: parts.map((part) => attr(part)),
+    attr,
+    has: (part) => seen.has(part)
+  };
+  registry.set(name, anatomy);
+  return anatomy;
+}
+
+// src/foundation/anatomy/slots.ts
+defineAnatomy("agreement-viewer", ["root"]);
+defineAnatomy("message-composer", [
+  "root",
+  "header",
+  "chips",
+  "editor",
+  "below-editor",
+  "footer"
+]);
+var buttonAnatomy = defineAnatomy("button", ["root", "icon-start", "icon-end", "spinner"]);
+var linkButtonAnatomy = defineAnatomy("link-button", ["root", "icon-start", "icon-end"]);
+var badgeAnatomy = defineAnatomy("badge", ["root", "dot", "icon"]);
+var inputAnatomy = defineAnatomy("input", [
+  "root",
+  "label",
+  "icon-start",
+  "icon-end",
+  "password-toggle",
+  "error"
+]);
+var textareaAnatomy = defineAnatomy("textarea", ["root", "label", "error", "count"]);
+var searchInputAnatomy = defineAnatomy("search-input", [
+  "root",
+  "control",
+  "icon",
+  "clear"
+]);
+var selectAnatomy = defineAnatomy("select", [
+  "trigger",
+  "icon",
+  "content",
+  "viewport",
+  "item",
+  "item-indicator",
+  "label",
+  "separator",
+  "scroll-up-button",
+  "scroll-down-button"
+]);
+var checkboxAnatomy = defineAnatomy("checkbox", ["root", "indicator", "label"]);
+var radioGroupAnatomy = defineAnatomy("radio-group", [
+  "root",
+  "item",
+  "indicator",
+  "label"
+]);
+var switchAnatomy = defineAnatomy("switch", ["root", "thumb", "label"]);
+var labelAnatomy = defineAnatomy("label", ["root", "required"]);
+var fileUploadAnatomy = defineAnatomy("file-upload", [
+  "root",
+  "dropzone",
+  "input",
+  "error"
+]);
+var dialogAnatomy = defineAnatomy("dialog", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "close"
+]);
+var alertDialogAnatomy = defineAnatomy("alert-dialog", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "action",
+  "cancel"
+]);
+var sheetAnatomy = defineAnatomy("sheet", [
+  "overlay",
+  "content",
+  "header",
+  "title",
+  "description",
+  "footer",
+  "close"
+]);
+var sideDrawerAnatomy = defineAnatomy("side-drawer", [
+  "overlay",
+  "root",
+  "header",
+  "heading",
+  "subtitle",
+  "close",
+  "body",
+  "footer"
+]);
+var popoverAnatomy = defineAnatomy("popover", ["content"]);
+var dropdownMenuAnatomy = defineAnatomy("dropdown-menu", [
+  "content",
+  "item",
+  "checkbox-item",
+  "radio-item",
+  "item-indicator",
+  "label",
+  "separator",
+  "shortcut",
+  "sub-trigger",
+  "sub-content"
+]);
+var contextMenuAnatomy = defineAnatomy("context-menu", [
+  "content",
+  "item",
+  "checkbox-item",
+  "radio-item",
+  "item-indicator",
+  "label",
+  "separator",
+  "shortcut",
+  "sub-trigger",
+  "sub-content"
+]);
+var tooltipAnatomy = defineAnatomy("tooltip", ["content"]);
+var toastAnatomy = defineAnatomy("toast", [
+  "region",
+  "root",
+  "icon",
+  "title",
+  "description",
+  "action",
+  "close"
+]);
+var tableAnatomy = defineAnatomy("table", [
+  "root",
+  "wrapper",
+  "header",
+  "body",
+  "footer",
+  "row",
+  "head",
+  "cell",
+  "caption"
+]);
+var dataTableAnatomy = defineAnatomy("data-table", [
+  "root",
+  "toolbar",
+  "spacer",
+  "results-count",
+  "header",
+  "body",
+  "row",
+  "head",
+  "head-button",
+  "head-indicator",
+  "cell",
+  "checkbox-cell"
+]);
+var paginationAnatomy = defineAnatomy("pagination", [
+  "root",
+  "label",
+  "pages",
+  "previous",
+  "next",
+  "page",
+  "ellipsis"
+]);
+var shellAnatomy = defineAnatomy("shell", ["root", "main", "content"]);
+var sidebarAnatomy = defineAnatomy("sidebar", [
+  "root",
+  "trigger",
+  "pin",
+  "brand",
+  "brand-text",
+  "section",
+  "section-header",
+  "section-label",
+  "link",
+  "link-label",
+  "link-action",
+  "link-badge",
+  "group",
+  "group-link",
+  "group-trigger",
+  "group-content",
+  "footer",
+  "user",
+  "user-name",
+  "user-subtitle"
+]);
+var sidebarBrandSwitcherAnatomy = defineAnatomy("sidebar-brand-switcher", [
+  "root",
+  "trigger",
+  "icon"
+]);
+
+// src/foundation/anatomy/slot.ts
+function slot(anatomy, part) {
+  return { "data-slot": anatomy.attr(part) };
+}
+var BOOLEAN_STATES = ["disabled", "invalid", "loading", "selected"];
+var VALUE_STATES = ["state", "size", "variant", "intent", "orientation"];
+function stateAttributes(input) {
+  const attributes = {};
+  for (const key of BOOLEAN_STATES) {
+    if (input[key]) attributes[`data-${key}`] = "";
+  }
+  for (const key of VALUE_STATES) {
+    const value = input[key];
+    if (value !== void 0) attributes[`data-${key}`] = value;
+  }
+  return attributes;
+}
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 var AlertDialogPortal = AlertDialogPrimitive.Portal;
@@ -2442,6 +2732,7 @@ var AlertDialogOverlay = React39.forwardRef(({ className, ...props }, ref) => /*
   AlertDialogPrimitive.Overlay,
   {
     ref,
+    ...slot(alertDialogAnatomy, "overlay"),
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
       "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
@@ -2459,6 +2750,7 @@ var AlertDialogContent = React39.forwardRef(({ className, ...props }, ref) => /*
     AlertDialogPrimitive.Content,
     {
       ref,
+      ...slot(alertDialogAnatomy, "content"),
       className: cn(
         "fixed top-1/2 left-1/2 z-[var(--z-modal)] w-full max-w-lg",
         "scrollbar-thin max-h-[calc(100vh-6rem)] overflow-y-auto",
@@ -2475,11 +2767,19 @@ var AlertDialogContent = React39.forwardRef(({ className, ...props }, ref) => /*
   )
 ] }));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col gap-1.5", className), ...props });
+var AlertDialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...slot(alertDialogAnatomy, "header"),
+    className: cn("mb-4 flex flex-col gap-1.5", className),
+    ...props
+  }
+);
 AlertDialogHeader.displayName = "AlertDialogHeader";
 var AlertDialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
+    ...slot(alertDialogAnatomy, "footer"),
     className: cn(
       "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
       className
@@ -2492,6 +2792,7 @@ var AlertDialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @
   AlertDialogPrimitive.Title,
   {
     ref,
+    ...slot(alertDialogAnatomy, "title"),
     className: cn(
       "font-display text-fg text-base leading-tight font-medium tracking-tight",
       className
@@ -2504,6 +2805,7 @@ var AlertDialogDescription = React39.forwardRef(({ className, ...props }, ref) =
   AlertDialogPrimitive.Description,
   {
     ref,
+    ...slot(alertDialogAnatomy, "description"),
     className: cn("text-fg-3 text-sm", className),
     ...props
   }
@@ -2513,6 +2815,7 @@ var AlertDialogAction = React39.forwardRef(({ className, ...props }, ref) => /*
   AlertDialogPrimitive.Action,
   {
     ref,
+    ...slot(alertDialogAnatomy, "action"),
     className: cn(
       "rounded-btn inline-flex h-10 items-center justify-center px-4 text-sm font-medium whitespace-nowrap",
       "bg-destructive text-destructive-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -2529,6 +2832,7 @@ var AlertDialogCancel = React39.forwardRef(({ className, children, ...props }, r
   AlertDialogPrimitive.Cancel,
   {
     ref,
+    ...slot(alertDialogAnatomy, "cancel"),
     className: cn(
       "rounded-btn border-rule-strong bg-surface inline-flex h-10 items-center justify-center border px-4 text-sm font-medium whitespace-nowrap",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -2732,6 +3036,14 @@ var AspectRatio = React39.forwardRef(function AspectRatio2({ className, ratio =
   );
 });
 AspectRatio.displayName = AspectRatioPrimitive.Root.displayName;
+
+// src/lib/micro-interactions.ts
+var microInteractions = {
+  control: "transition-[color,background-color,border-color,box-shadow] duration-[var(--motion-duration-feedback)] ease-[var(--motion-ease-enter)] motion-reduce:transition-none",
+  pressable: "transition-[color,background-color,border-color,box-shadow,transform] duration-[var(--motion-duration-feedback)] ease-[var(--motion-ease-enter)] active:scale-[0.98] motion-reduce:transform-none motion-reduce:transition-none",
+  selection: "transition-[color,background-color,border-color,box-shadow] duration-[var(--motion-duration-press)] ease-[var(--motion-ease-enter)] motion-reduce:transition-none",
+  overlay: "transition-[opacity,transform] duration-[var(--motion-duration-overlay)] ease-[var(--motion-ease-enter)] motion-reduce:transform-none motion-reduce:transition-none",
+  progress: "transition-[width,height,stroke-dashoffset,background-color] duration-[var(--motion-duration-deliberate)] ease-[var(--motion-ease-enter)] motion-reduce:transition-none"};
 var spinnerVariants = cva(
   "inline-flex shrink-0 items-center justify-center [&_svg]:motion-reduce:animate-none",
   {
@@ -2777,10 +3089,10 @@ Spinner.displayName = "Spinner";
 var buttonVariants = cva(
   cn(
     "inline-flex items-center justify-center rounded-btn font-medium whitespace-nowrap cursor-pointer",
-    "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+    microInteractions.pressable,
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
-    "disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-fg-disabled",
-    "motion-reduce:transition-none",
+    "disabled:pointer-events-none [&:disabled:not([data-loading=true])]:bg-bg-disabled [&:disabled:not([data-loading=true])]:text-fg-disabled",
+    "data-[loading=true]:cursor-wait",
     "[&_svg]:size-4 [&_svg]:shrink-0"
   ),
   {
@@ -2792,14 +3104,17 @@ var buttonVariants = cva(
         success: "bg-success-fg text-fg-on-success hover:bg-success-fg-hover active:bg-success-fg-active",
         ghost: "bg-control-bg text-control-fg hover:bg-control-hover-bg hover:text-control-hover-fg",
         outline: "border border-control-border-strong bg-control-bg text-control-fg hover:bg-control-hover-bg hover:border-control-border-hover",
-        link: "bg-transparent text-accent underline-offset-4 hover:underline p-0 h-auto",
-        accent: "bg-accent text-fg-on-accent hover:bg-accent-hover active:bg-accent-active",
+        link: "bg-transparent text-accent underline-offset-4 hover:underline p-0 h-auto active:scale-100",
+        accent: "bg-suite-action text-fg-on-suite-action hover:bg-suite-action-hover active:bg-suite-action-active",
         dashed: "border-2 border-dashed border-control-border bg-control-bg text-control-muted-fg hover:border-control-border-hover hover:bg-control-hover-bg hover:text-control-hover-fg"
       },
       size: {
         sm: "h-8 px-3 text-[13px] gap-1.5",
         md: "h-10 px-4 text-sm gap-2",
         lg: "h-12 px-6 text-base gap-2",
+        compact: "h-8 px-3 text-[13px] gap-1.5",
+        default: "h-10 px-4 text-sm gap-2",
+        comfortable: "h-12 px-6 text-base gap-2",
         // Icon-only sizes. Hit target ≥ 24px (WCAG 2.5.5 floor).
         // `icon-xs` / `icon-sm` are for dense in-row action stacks where
         // `size="icon"` (40×40) would visually crowd the row.
@@ -2827,20 +3142,59 @@ var Button = forwardRef(function Button2({
   ...props
 }, ref) {
   const Comp = asChild ? Slot : "button";
+  const resolvedVariant = variant ?? "primary";
+  const resolvedSize = size ?? "md";
+  const state = stateAttributes({
+    variant: resolvedVariant,
+    size: resolvedSize,
+    // `asChild` drops `disabled`/`loading` (Slot renders the child's own
+    // element), so the state attribute is not claimed there either.
+    disabled: asChild ? void 0 : disabled || loading
+  });
   if (asChild) {
-    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(buttonVariants({ variant, size }), className), ...props, children });
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        ...slot(buttonAnatomy, "root"),
+        ...state,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props,
+        children
+      }
+    );
   }
   return /* @__PURE__ */ jsxs(
     Comp,
     {
       ref,
       disabled: disabled || loading,
+      "aria-busy": loading || void 0,
+      "data-loading": loading || void 0,
+      ...slot(buttonAnatomy, "root"),
+      ...state,
       className: cn(buttonVariants({ variant, size }), className),
       ...props,
       children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
+        loading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", ...slot(buttonAnatomy, "spinner") }) : iconLeft && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(buttonAnatomy, "icon-start"),
+            className: "inline-flex shrink-0",
+            "aria-hidden": "true",
+            children: iconLeft
+          }
+        ),
         children,
-        iconRight && !loading && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
+        iconRight && !loading && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(buttonAnatomy, "icon-end"),
+            className: "inline-flex shrink-0",
+            "aria-hidden": "true",
+            children: iconRight
+          }
+        )
       ]
     }
   );
@@ -3152,11 +3506,36 @@ var badgeVariants = cva(
   }
 );
 var Badge = forwardRef(function Badge2({ variant, size, dot, icon, children, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("span", { ref, className: cn(badgeVariants({ variant, size }), className), ...props, children: [
-    dot && /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }),
-    icon && /* @__PURE__ */ jsx("span", { className: "inline-flex size-3.5 shrink-0", "aria-hidden": "true", children: icon }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      ...slot(badgeAnatomy, "root"),
+      ...stateAttributes({ variant: variant ?? "default", size: size ?? "sm" }),
+      className: cn(badgeVariants({ variant, size }), className),
+      ...props,
+      children: [
+        dot && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(badgeAnatomy, "dot"),
+            className: "size-1.5 rounded-full bg-current",
+            "aria-hidden": "true"
+          }
+        ),
+        icon && /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(badgeAnatomy, "icon"),
+            className: "inline-flex size-3.5 shrink-0",
+            "aria-hidden": "true",
+            children: icon
+          }
+        ),
+        children
+      ]
+    }
+  );
 });
 Badge.displayName = "Badge";
 var Blockquote = forwardRef(function Blockquote2({ children, author, role: authorRole, className, ...props }, ref) {
@@ -3300,6 +3679,303 @@ var BreadcrumbSeparator = forwardRef(
   }
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var SelectRoot = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+function useTriggerOpen(node) {
+  const [open, setOpen] = React39.useState(false);
+  React39.useEffect(() => {
+    if (!node) return;
+    const sync = () => setOpen(node.getAttribute("data-state") === "open");
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(node, { attributes: true, attributeFilter: ["data-state"] });
+    return () => observer.disconnect();
+  }, [node]);
+  return open;
+}
+var SelectTrigger = React39.forwardRef(({ className, children, tabIndex, ...props }, ref) => {
+  const [node, setNode] = React39.useState(null);
+  const open = useTriggerOpen(node);
+  const composedRef = React39.useCallback(
+    (element) => {
+      setNode(element);
+      if (typeof ref === "function") ref(element);
+      else if (ref) ref.current = element;
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      ref: composedRef,
+      tabIndex: open ? -1 : tabIndex,
+      ...slot(selectAnatomy, "trigger"),
+      className: cn(
+        "rounded-input border-rule-strong bg-surface font-body text-fg flex h-9 w-full items-center justify-between gap-2 border px-3 py-2 text-[13px]",
+        "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "motion-reduce:transition-none",
+        "placeholder:text-fg-4",
+        "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+        "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
+        "data-[placeholder]:text-fg-4",
+        "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
+        "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
+        "[&>span]:line-clamp-1 [&>span]:text-left",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            ...slot(selectAnatomy, "icon"),
+            className: "text-fg-3 size-4 shrink-0 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] data-[state=open]:rotate-180 motion-reduce:transition-none",
+            "aria-hidden": "true"
+          }
+        ) })
+      ]
+    }
+  );
+});
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    ...slot(selectAnatomy, "scroll-up-button"),
+    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    ...slot(selectAnatomy, "scroll-down-button"),
+    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", "aria-hidden": "true" })
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React39.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+  SelectPrimitive.Content,
+  {
+    ref,
+    position,
+    ...slot(selectAnatomy, "content"),
+    className: cn(
+      "rounded-card border-rule bg-surface text-fg shadow-pop relative z-[var(--z-dropdown)] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden border",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
+      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "motion-reduce:transition-none",
+      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+      /* @__PURE__ */ jsx(
+        SelectPrimitive.Viewport,
+        {
+          ...slot(selectAnatomy, "viewport"),
+          className: cn(
+            "p-1",
+            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
+          ),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Label,
+  {
+    ref,
+    ...slot(selectAnatomy, "label"),
+    className: cn(
+      "text-fg-3 px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
+      className
+    ),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  SelectPrimitive.Item,
+  {
+    ref,
+    ...slot(selectAnatomy, "item"),
+    className: cn(
+      "rounded-pill relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-[13px] outline-none select-none",
+      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+      "focus:bg-bg-2 focus:text-fg",
+      "data-[state=checked]:bg-brand-bg data-[state=checked]:text-brand",
+      "data-[disabled]:text-fg-disabled data-[disabled]:pointer-events-none",
+      "[&_svg]:size-4 [&_svg]:shrink-0",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
+      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { ...slot(selectAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    ...slot(selectAnatomy, "separator"),
+    className: cn("bg-rule -mx-1 my-1 h-px", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+function Select({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Select...",
+  searchable,
+  disabled,
+  name,
+  required,
+  className,
+  triggerClassName,
+  contentClassName,
+  "aria-invalid": ariaInvalid,
+  "aria-label": ariaLabel
+}) {
+  if (process.env.NODE_ENV !== "production" && searchable) {
+    console.warn(
+      "[Select] `searchable` is not supported by Radix Select. Use <SearchSelect /> for filterable selection."
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    SelectRoot,
+    {
+      value,
+      defaultValue,
+      onValueChange,
+      disabled,
+      name,
+      required,
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            "aria-invalid": ariaInvalid || void 0,
+            "aria-label": ariaLabel ?? placeholder,
+            className: cn(triggerClassName, className),
+            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: opt.label }),
+          opt.labelSuffix
+        ] }) }, opt.value)) })
+      ]
+    }
+  );
+}
+Select.displayName = "Select";
+var DEFAULT_YEARS_BACK = 100;
+var DEFAULT_YEARS_FORWARD = 20;
+function CalendarDropdown({
+  options = [],
+  value,
+  onChange,
+  disabled,
+  className,
+  "aria-label": ariaLabel
+}) {
+  const current = value === void 0 || value === null ? void 0 : String(value);
+  const selected = options.find((option) => String(option.value) === current);
+  return /* @__PURE__ */ jsxs(
+    SelectRoot,
+    {
+      value: current,
+      disabled,
+      onValueChange: (next) => {
+        onChange?.({ target: { value: next } });
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SelectTrigger,
+          {
+            "aria-label": ariaLabel,
+            className: cn(
+              "h-7 w-auto min-w-0 gap-1 border-transparent bg-transparent px-1.5 py-0",
+              "font-display font-medium",
+              "hover:bg-bg-2",
+              "[&>svg]:size-3.5",
+              className
+            ),
+            children: /* @__PURE__ */ jsx(SelectValue, { children: selected?.label })
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectContent, { align: "center", className: "max-h-64 min-w-[6rem]", children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: String(option.value), disabled: option.disabled, children: option.label }, option.value)) })
+      ]
+    }
+  );
+}
+function CalendarChevron({
+  orientation,
+  className
+}) {
+  const Icon3 = orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
+  return /* @__PURE__ */ jsx(Icon3, { className: cn("text-fg-3 size-4", className), "aria-hidden": "true" });
+}
+var CALENDAR_CAPTION_COMPONENTS = {
+  Chevron: CalendarChevron,
+  Dropdown: CalendarDropdown
+};
+var NAV_BUTTON = "absolute top-0 inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:text-fg-disabled aria-disabled:pointer-events-none";
+var CALENDAR_CAPTION_CLASSNAMES = {
+  month: "relative space-y-3",
+  // px-7 keeps the caption clear of the two absolutely-pinned size-7 chevrons.
+  // Font size is applied by each calendar (they own their type scale).
+  month_caption: "flex h-7 items-center justify-center px-7 font-display font-medium text-fg",
+  caption_label: "tabular-nums",
+  // No root-level <nav> with navLayout="around"; the buttons render inline.
+  nav: "contents",
+  button_previous: cn("left-0", NAV_BUTTON),
+  button_next: cn("right-0", NAV_BUTTON),
+  dropdowns: "flex items-center justify-center gap-1",
+  dropdown_root: "relative",
+  months_dropdown: "",
+  years_dropdown: "font-mono tabular-nums"
+};
+function resolveCalendarNavRange({
+  minDate,
+  maxDate,
+  selected,
+  today = /* @__PURE__ */ new Date()
+}) {
+  let startMonth = minDate ? startOfMonth(minDate) : startOfYear(subYears(today, DEFAULT_YEARS_BACK));
+  let endMonth = maxDate ? endOfMonth(maxDate) : endOfYear(addYears(today, DEFAULT_YEARS_FORWARD));
+  const picks = (Array.isArray(selected) ? selected : [selected]).filter(
+    (d) => d instanceof Date && !Number.isNaN(d.getTime())
+  );
+  for (const pick of picks) {
+    if (pick < startMonth) startMonth = startOfMonth(pick);
+    if (pick > endMonth) endMonth = endOfMonth(pick);
+  }
+  return { startMonth, endMonth };
+}
 var HIGHLIGHT_COLORS = {
   primary: "after:bg-brand",
   success: "after:bg-success-fg",
@@ -3315,6 +3991,11 @@ function Calendar({
   maxDate,
   className,
   classNames,
+  captionLayout = "dropdown",
+  navLayout = "around",
+  startMonth,
+  endMonth,
+  components,
   ...props
 }) {
   const { modifiers, modifiersClassNames } = React39.useMemo(() => {
@@ -3338,6 +4019,10 @@ function Calendar({
     if (minDate) return { before: minDate };
     return { after: maxDate };
   }, [minDate, maxDate]);
+  const navRange = React39.useMemo(
+    () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({ minDate, maxDate, selected }),
+    [captionLayout, minDate, maxDate, selected]
+  );
   return /* @__PURE__ */ jsx(
     DayPicker,
     {
@@ -3350,22 +4035,17 @@ function Calendar({
       modifiers,
       modifiersClassNames,
       showOutsideDays: true,
-      components: {
-        Chevron: ({ orientation, className: chevClass }) => {
-          const Icon3 = orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
-          return /* @__PURE__ */ jsx(Icon3, { className: cn("text-fg-3 size-4", chevClass), "aria-hidden": "true" });
-        }
-      },
+      captionLayout,
+      navLayout,
+      startMonth: startMonth ?? navRange?.startMonth,
+      endMonth: endMonth ?? navRange?.endMonth,
+      components: { ...CALENDAR_CAPTION_COMPONENTS, ...components },
       className: cn("font-body text-fg select-none", className),
       classNames: {
         root: "p-3 min-w-[280px]",
         months: "flex flex-col gap-4",
-        month: "space-y-3",
-        month_caption: "flex h-8 items-center justify-center font-display text-[13px] font-medium text-fg",
-        caption_label: "tabular-nums",
-        nav: "flex items-center justify-between absolute left-3 right-3 top-3",
-        button_previous: "inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
-        button_next: "inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
+        ...CALENDAR_CAPTION_CLASSNAMES,
+        month_caption: cn(CALENDAR_CAPTION_CLASSNAMES.month_caption, "text-[13px]"),
         month_grid: "w-full border-collapse",
         weekdays: "flex",
         weekday: "flex-1 text-center text-[11px] font-medium uppercase tracking-wide text-fg-4 pb-1",
@@ -3520,10 +4200,11 @@ var Checkbox = React39.forwardRef(function Checkbox2({
         id,
         checked: resolvedChecked,
         defaultChecked,
+        ...slot(checkboxAnatomy, "root"),
         className: cn(
           "peer border-rule-strong bg-surface text-brand flex size-4 shrink-0 items-center justify-center border",
           shape === "circle" ? "rounded-full" : "rounded-[4px]",
-          "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+          microInteractions.selection,
           "hover:border-fg-4",
           "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
           "data-[state=checked]:border-brand data-[state=checked]:bg-brand-bg",
@@ -3533,199 +4214,28 @@ var Checkbox = React39.forwardRef(function Checkbox2({
           className
         ),
         ...props,
-        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) })
+        children: /* @__PURE__ */ jsx(
+          CheckboxPrimitive.Indicator,
+          {
+            ...slot(checkboxAnatomy, "indicator"),
+            className: "flex items-center justify-center text-current",
+            children: resolvedChecked === "indeterminate" ? /* @__PURE__ */ jsx(MinusIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" }) : shape === "circle" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(CheckIcon, { className: "size-3", strokeWidth: 3, "aria-hidden": "true" })
+          }
+        )
       }
     ),
     label && /* @__PURE__ */ jsx(
       "label",
       {
         htmlFor: id,
+        ...slot(checkboxAnatomy, "label"),
         className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
-        children: label
-      }
-    )
-  ] });
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-var SelectRoot = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(
-      "rounded-input border-rule-strong bg-surface font-body text-fg flex h-9 w-full items-center justify-between gap-2 border px-3 py-2 text-[13px]",
-      "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-      "motion-reduce:transition-none",
-      "placeholder:text-fg-4",
-      "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-      "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
-      "data-[placeholder]:text-fg-4",
-      "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
-      "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
-      "[&>span]:line-clamp-1 [&>span]:text-left",
-      className
-    ),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(
-        ChevronDownIcon,
-        {
-          className: "text-fg-3 size-4 shrink-0 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] data-[state=open]:rotate-180 motion-reduce:transition-none",
-          "aria-hidden": "true"
-        }
-      ) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4", "aria-hidden": "true" })
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    className: cn("text-fg-3 flex cursor-default items-center justify-center py-1", className),
-    ...props,
-    children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4", "aria-hidden": "true" })
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React39.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    position,
-    className: cn(
-      "rounded-card border-rule bg-surface text-fg shadow-pop relative z-[var(--z-dropdown)] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden border",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out",
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
-      "data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "motion-reduce:transition-none",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
-          ),
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: cn(
-      "text-fg-3 px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
-      className
-    ),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React39.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "rounded-pill relative flex w-full cursor-default items-center gap-2 py-1.5 pr-8 pl-2 text-[13px] outline-none select-none",
-      "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-      "focus:bg-bg-2 focus:text-fg",
-      "data-[state=checked]:bg-brand-bg data-[state=checked]:text-brand",
-      "data-[disabled]:text-fg-disabled data-[disabled]:pointer-events-none",
-      "[&_svg]:size-4 [&_svg]:shrink-0",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children }),
-      /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) })
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: cn("bg-rule -mx-1 my-1 h-px", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-function Select({
-  options,
-  value,
-  defaultValue,
-  onValueChange,
-  placeholder = "Select...",
-  searchable,
-  disabled,
-  name,
-  required,
-  className,
-  triggerClassName,
-  contentClassName,
-  "aria-invalid": ariaInvalid,
-  "aria-label": ariaLabel
-}) {
-  if (process.env.NODE_ENV !== "production" && searchable) {
-    console.warn(
-      "[Select] `searchable` is not supported by Radix Select. Use <SearchSelect /> for filterable selection."
-    );
-  }
-  return /* @__PURE__ */ jsxs(
-    SelectRoot,
-    {
-      value,
-      defaultValue,
-      onValueChange,
-      disabled,
-      name,
-      required,
-      children: [
-        /* @__PURE__ */ jsx(
-          SelectTrigger,
-          {
-            "aria-invalid": ariaInvalid || void 0,
-            "aria-label": ariaLabel ?? placeholder,
-            className: cn(triggerClassName, className),
-            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
-          }
-        ),
-        /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(SelectItem, { value: opt.value, disabled: opt.disabled, children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx("span", { className: "line-clamp-1", children: opt.label }),
-          opt.labelSuffix
-        ] }) }, opt.value)) })
-      ]
-    }
-  );
-}
-Select.displayName = "Select";
+        children: label
+      }
+    )
+  ] });
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 function ClientSelect({
   clients,
   value,
@@ -3853,11 +4363,11 @@ var DialogOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__P
   DialogPrimitive.Overlay,
   {
     ref,
+    ...slot(dialogAnatomy, "overlay"),
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
-      "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
+      microInteractions.overlay,
       "data-[state=closed]:opacity-0 data-[state=open]:opacity-100",
-      "motion-reduce:transition-none",
       className
     ),
     ...props
@@ -3876,16 +4386,17 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
     DialogPrimitive.Content,
     {
       ref,
+      ...slot(dialogAnatomy, "content"),
+      ...stateAttributes({ size }),
       className: cn(
         "fixed top-1/2 left-1/2 z-[var(--z-modal)] w-full",
         "scrollbar-thin max-h-[calc(100vh-6rem)] overflow-y-auto",
         "rounded-card border-rule bg-surface shadow-pop border p-6",
         "font-body text-fg",
         // motion: scale + fade keyed off data-state
-        "transition-[opacity,transform] duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
+        microInteractions.overlay,
         "data-[state=closed]:-translate-x-1/2 data-[state=closed]:-translate-y-[48%] data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
         "data-[state=open]:-translate-x-1/2 data-[state=open]:-translate-y-1/2 data-[state=open]:scale-100 data-[state=open]:opacity-100",
-        "motion-reduce:transition-none",
         dialogSizeStyles[size],
         className
       ),
@@ -3895,6 +4406,7 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
         showCloseButton && /* @__PURE__ */ jsx(
           DialogPrimitive.Close,
           {
+            ...slot(dialogAnatomy, "close"),
             className: cn(
               "absolute top-4 right-4 inline-flex size-7 items-center justify-center",
               "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -3911,13 +4423,29 @@ var DialogContent = React39.forwardRef(({ size = "md", showCloseButton = true, c
   )
 ] }));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogClose = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Close, { ref, className: cn(className), ...props }));
+var DialogClose = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Close,
+  {
+    ref,
+    ...slot(dialogAnatomy, "close"),
+    className: cn(className),
+    ...props
+  }
+));
 DialogClose.displayName = "DialogClose";
-var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mb-4 flex flex-col gap-1.5 pr-8", className), ...props });
+var DialogHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...slot(dialogAnatomy, "header"),
+    className: cn("mb-4 flex flex-col gap-1.5 pr-8", className),
+    ...props
+  }
+);
 DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
+    ...slot(dialogAnatomy, "footer"),
     className: cn(
       "mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:items-center sm:justify-end",
       className
@@ -3930,6 +4458,7 @@ var DialogTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   DialogPrimitive.Title,
   {
     ref,
+    ...slot(dialogAnatomy, "title"),
     className: cn(
       "font-display text-fg text-base leading-tight font-medium tracking-tight",
       className
@@ -3942,6 +4471,7 @@ var DialogDescription = React39.forwardRef(({ className, ...props }, ref) => /*
   DialogPrimitive.Description,
   {
     ref,
+    ...slot(dialogAnatomy, "description"),
     className: cn("text-fg-3 text-sm", className),
     ...props
   }
@@ -4199,6 +4729,7 @@ var ContextMenuSubTrigger = React39.forwardRef(({ className, inset, children, ..
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
+    ...slot(contextMenuAnatomy, "sub-trigger"),
     className: cn(
       "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -4226,6 +4757,7 @@ var ContextMenuSubContent = React39.forwardRef(({ className, ...props }, ref) =>
     ContextMenuPrimitive.SubContent,
     {
       ref,
+      ...slot(contextMenuAnatomy, "sub-content"),
       className: cn(
         "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
         "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -4243,6 +4775,7 @@ var ContextMenuContent = React39.forwardRef(({ className, ...props }, ref) => /*
   ContextMenuPrimitive.Content,
   {
     ref,
+    ...slot(contextMenuAnatomy, "content"),
     className: cn(
       "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] min-w-[10rem] overflow-hidden border p-1",
       "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -4259,6 +4792,7 @@ var ContextMenuItem = React39.forwardRef(({ className, destructive, inset, ...pr
   ContextMenuPrimitive.Item,
   {
     ref,
+    ...slot(contextMenuAnatomy, "item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -4277,6 +4811,7 @@ var ContextMenuCheckboxItem = React39.forwardRef(({ className, children, checked
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
+    ...slot(contextMenuAnatomy, "checkbox-item"),
     checked,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
@@ -4287,7 +4822,7 @@ var ContextMenuCheckboxItem = React39.forwardRef(({ className, children, checked
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { ...slot(contextMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -4297,6 +4832,7 @@ var ContextMenuRadioItem = React39.forwardRef(({ className, children, ...props }
   ContextMenuPrimitive.RadioItem,
   {
     ref,
+    ...slot(contextMenuAnatomy, "radio-item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
       "text-fg-2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -4306,7 +4842,7 @@ var ContextMenuRadioItem = React39.forwardRef(({ className, children, ...props }
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(ContextMenuPrimitive.ItemIndicator, { ...slot(contextMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -4316,6 +4852,7 @@ var ContextMenuLabel = React39.forwardRef(({ className, inset, ...props }, ref)
   ContextMenuPrimitive.Label,
   {
     ref,
+    ...slot(contextMenuAnatomy, "label"),
     className: cn(
       "text-fg-3 px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
       inset && "pl-8",
@@ -4329,6 +4866,7 @@ var ContextMenuSeparator = React39.forwardRef(({ className, ...props }, ref) =>
   ContextMenuPrimitive.Separator,
   {
     ref,
+    ...slot(contextMenuAnatomy, "separator"),
     className: cn("bg-rule -mx-1 my-1 h-px", className),
     ...props
   }
@@ -4427,12 +4965,12 @@ var PopoverContent = React39.forwardRef(({ className, align = "center", side = "
     align,
     side,
     sideOffset,
+    ...slot(popoverAnatomy, "content"),
     className: cn(
       "rounded-card border-rule bg-surface text-fg shadow-pop z-[var(--z-dropdown)] w-72 border p-4 outline-none",
-      "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+      microInteractions.overlay,
       "data-[state=closed]:scale-95 data-[state=closed]:opacity-0",
       "data-[state=open]:scale-100 data-[state=open]:opacity-100",
-      "motion-reduce:transition-none",
       className
     ),
     ...props
@@ -4545,7 +5083,9 @@ var DatePicker = forwardRef(function DatePicker2({
   "aria-label": ariaLabel,
   picker = "day",
   formatLabel,
-  iconPosition = "right"
+  iconPosition = "right",
+  captionLayout = "dropdown",
+  inputClassName
 }, ref) {
   const isYearMode = picker === "year";
   const hasCustomYearLabel = isYearMode && !!formatLabel;
@@ -4666,7 +5206,8 @@ var DatePicker = forwardRef(function DatePicker2({
             "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
             "aria-[invalid=true]:border-danger-line aria-[invalid=true]:focus-visible:border-danger-fg",
             "aria-[invalid=true]:focus-visible:[box-shadow:0_0_0_2px_var(--color-danger-bg)]",
-            hasCustomYearLabel && "cursor-pointer"
+            hasCustomYearLabel && "cursor-pointer",
+            inputClassName
           )
         }
       ),
@@ -4715,6 +5256,7 @@ var DatePicker = forwardRef(function DatePicker2({
                 minDate,
                 maxDate,
                 defaultMonth: selectedDate ?? minDate ?? void 0,
+                captionLayout,
                 autoFocus: true
               }
             )
@@ -4743,7 +5285,8 @@ var DateRangePicker = forwardRef(
     min,
     max,
     iconPosition = "right",
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    captionLayout = "dropdown"
   }, ref) {
     const generatedId = useId();
     const id = providedId ?? generatedId;
@@ -4802,6 +5345,14 @@ var DateRangePicker = forwardRef(
       to: isoToDate(current.to ?? "")
     };
     const selectedRange = draftRange ?? committedRange;
+    const navRange = useMemo(
+      () => captionLayout === "label" ? void 0 : resolveCalendarNavRange({
+        minDate,
+        maxDate,
+        selected: [selectedRange.from, selectedRange.to]
+      }),
+      [captionLayout, minDate, maxDate, selectedRange.from, selectedRange.to]
+    );
     const disabledMatcher = (() => {
       if (!minDate && !maxDate) return void 0;
       if (minDate && maxDate) return [{ before: minDate }, { after: maxDate }];
@@ -4878,38 +5429,25 @@ var DateRangePicker = forwardRef(
                 mode: "range",
                 numberOfMonths: 2,
                 navLayout: "around",
+                captionLayout,
+                startMonth: navRange?.startMonth,
+                endMonth: navRange?.endMonth,
                 selected: selectedRange.from ? { from: selectedRange.from, to: selectedRange.to } : void 0,
                 onSelect: handleCalendarSelect,
                 disabled: disabledMatcher,
                 showOutsideDays: true,
                 autoFocus: true,
                 defaultMonth: selectedRange.from ?? minDate ?? void 0,
-                components: {
-                  Chevron: ({ orientation, className: chevClass }) => {
-                    const Icon3 = orientation === "right" ? ChevronRightIcon : ChevronLeftIcon;
-                    return /* @__PURE__ */ jsx(Icon3, { className: cn("text-fg-3 size-4", chevClass), "aria-hidden": "true" });
-                  }
-                },
+                components: CALENDAR_CAPTION_COMPONENTS,
                 className: "font-body text-fg select-none",
                 classNames: {
                   root: "p-3",
                   months: "flex flex-col gap-6 sm:flex-row sm:gap-4",
-                  month: "relative space-y-3 w-[16rem] flex-none",
-                  // With navLayout="around", the chevron buttons live inside
-                  // the caption row, one on each side of the month title.
-                  // The caption row distributes them via space-between so
-                  // each chevron stays in its natural inline flow — no
-                  // absolute positioning gymnastics.
-                  month_caption: "flex h-7 items-center justify-center font-display text-[13px] font-medium text-fg",
-                  caption_label: "tabular-nums",
-                  nav: "contents",
-                  // navLayout="around" renders Prev as a sibling BEFORE the
-                  // left month's caption, and Next as a sibling AFTER the
-                  // right month's caption. Absolute-position each so they
-                  // sit at their own month's top corners without disturbing
-                  // the centered caption row.
-                  button_previous: "absolute left-0 top-0 z-10 inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
-                  button_next: "absolute right-0 top-0 z-10 inline-flex size-7 items-center justify-center rounded-input text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none hover:bg-bg-2 hover:text-fg focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:text-fg-disabled disabled:pointer-events-none",
+                  ...CALENDAR_CAPTION_CLASSNAMES,
+                  // Two side-by-side months; each keeps the shared relative
+                  // caption/nav contract and a fixed width.
+                  month: cn(CALENDAR_CAPTION_CLASSNAMES.month, "w-[16rem] flex-none"),
+                  month_caption: cn(CALENDAR_CAPTION_CLASSNAMES.month_caption, "text-[13px]"),
                   month_grid: "w-full border-collapse",
                   weekdays: "flex",
                   weekday: "flex-1 text-center text-[11px] font-medium uppercase tracking-wide text-fg-4 pb-1",
@@ -4956,8 +5494,8 @@ var chipVariants = cva(
   {
     variants: {
       variant: {
-        primary: "bg-primary/10 text-primary hover:bg-primary/15",
-        neutral: "bg-muted text-fg-2 hover:bg-muted/80"
+        primary: "bg-brand-bg text-brand hover:bg-brand-bg-hover",
+        neutral: "bg-bg-2 text-fg-2 hover:bg-bg-3"
       }
     },
     defaultVariants: {
@@ -5172,6 +5710,7 @@ var DropdownMenuSubTrigger = React39.forwardRef(({ className, inset, children, .
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "sub-trigger"),
     className: cn(
       "rounded-pill flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -5199,6 +5738,7 @@ var DropdownMenuSubContent = React39.forwardRef(({ className, ...props }, ref) =
     DropdownMenuPrimitive.SubContent,
     {
       ref,
+      ...slot(dropdownMenuAnatomy, "sub-content"),
       className: cn(
         "rounded-card border-menu-border bg-menu-bg text-menu-fg shadow-pop z-[var(--z-dropdown)] min-w-[8rem] overflow-hidden border p-1",
         "transition-[opacity,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
@@ -5216,6 +5756,7 @@ var DropdownMenuContent = React39.forwardRef(({ className, sideOffset = 6, align
   DropdownMenuPrimitive.Content,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "content"),
     sideOffset,
     align,
     className: cn(
@@ -5234,6 +5775,7 @@ var DropdownMenuItem = React39.forwardRef(({ className, destructive, inset, ...p
   DropdownMenuPrimitive.Item,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 px-2 py-1.5 text-sm outline-none select-none",
       "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -5252,6 +5794,7 @@ var DropdownMenuCheckboxItem = React39.forwardRef(({ className, children, checke
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "checkbox-item"),
     checked,
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
@@ -5262,7 +5805,7 @@ var DropdownMenuCheckboxItem = React39.forwardRef(({ className, children, checke
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { ...slot(dropdownMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3.5", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -5272,6 +5815,7 @@ var DropdownMenuRadioItem = React39.forwardRef(({ className, children, ...props
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "radio-item"),
     className: cn(
       "rounded-pill relative flex cursor-default items-center gap-2 py-1.5 pr-2 pl-8 text-sm outline-none select-none",
       "text-menu-item-fg transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -5281,7 +5825,7 @@ var DropdownMenuRadioItem = React39.forwardRef(({ className, children, ...props
     ),
     ...props,
     children: [
-      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { ...slot(dropdownMenuAnatomy, "item-indicator"), children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current", "aria-hidden": "true" }) }) }),
       children
     ]
   }
@@ -5291,6 +5835,7 @@ var DropdownMenuLabel = React39.forwardRef(({ className, inset, ...props }, ref)
   DropdownMenuPrimitive.Label,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "label"),
     className: cn(
       "text-menu-label-fg px-2 py-1.5 font-mono text-[11px] tracking-wider uppercase",
       inset && "pl-8",
@@ -5304,6 +5849,7 @@ var DropdownMenuSeparator = React39.forwardRef(({ className, ...props }, ref) =>
   DropdownMenuPrimitive.Separator,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "separator"),
     className: cn("bg-menu-border -mx-1 my-1 h-px", className),
     ...props
   }
@@ -5312,6 +5858,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "span",
   {
+    ...slot(dropdownMenuAnatomy, "shortcut"),
     className: cn("text-menu-shortcut-fg ml-auto font-mono text-[11px] tracking-wider", className),
     ...props
   }
@@ -5395,6 +5942,7 @@ function FileUpload({
   const inputId = useId();
   const [isDragOver, setIsDragOver] = useState(false);
   const [error, setError] = useState(null);
+  const wrapperOwnsFocus = props.tabIndex !== void 0 || props.role !== void 0;
   const validateFiles = useCallback(
     (files) => {
       setError(null);
@@ -5431,78 +5979,105 @@ function FileUpload({
     if (disabled) return;
     handleFiles(e.dataTransfer.files);
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), ...props, children: [
-    /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: inputId,
-        onDragOver: (e) => {
-          e.preventDefault();
-          if (!disabled) setIsDragOver(true);
-        },
-        onDragLeave: () => setIsDragOver(false),
-        onDrop: handleDrop,
-        className: cn(
-          "flex flex-col items-center justify-center gap-2",
-          "rounded-card border-rule-strong bg-surface border border-dashed",
-          "font-body p-8 text-center",
-          "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-          "motion-reduce:transition-none",
-          // Hover (when not disabled)
-          !disabled && "hover:border-brand-line hover:bg-brand-bg/40",
-          // Drag-over → Pro purple highlight
-          isDragOver && "border-brand-line bg-brand-bg",
-          disabled && "border-rule bg-bg-disabled text-fg-disabled cursor-not-allowed",
-          !disabled && "cursor-pointer"
-        ),
-        children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              ref: inputRef,
-              id: inputId,
-              type: "file",
-              accept,
-              multiple,
-              onChange: (e) => {
-                if (e.target.files) handleFiles(e.target.files);
-                e.target.value = "";
-              },
-              className: "fixed -top-[9999px] -left-[9999px] opacity-0",
-              disabled,
-              tabIndex: -1
-            }
-          ),
-          children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "rounded-icon flex size-10 items-center justify-center transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-                  isDragOver ? "bg-brand text-fg-on-brand" : "bg-brand-bg text-brand"
-                ),
-                "aria-hidden": "true",
-                children: /* @__PURE__ */ jsx(UploadIcon, { className: "size-5" })
-              }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...slot(fileUploadAnatomy, "root"),
+      ...stateAttributes({ disabled, invalid: !!error }),
+      className: cn("w-full", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: inputId,
+            ...slot(fileUploadAnatomy, "dropzone"),
+            ...stateAttributes({ disabled, state: isDragOver ? "drag-over" : void 0 }),
+            onDragOver: (e) => {
+              e.preventDefault();
+              if (!disabled) setIsDragOver(true);
+            },
+            onDragLeave: () => setIsDragOver(false),
+            onDrop: handleDrop,
+            className: cn(
+              "flex flex-col items-center justify-center gap-2",
+              "rounded-card border-rule-strong bg-surface border border-dashed",
+              "font-body p-8 text-center",
+              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+              "motion-reduce:transition-none",
+              // Hover (when not disabled)
+              !disabled && "hover:border-brand-line hover:bg-brand-bg/40",
+              // Drag-over → Pro purple highlight
+              isDragOver && "border-brand-line bg-brand-bg",
+              disabled && "border-rule bg-bg-disabled text-fg-disabled cursor-not-allowed",
+              !disabled && "cursor-pointer",
+              // Keyboard focus lands on the (visually hidden) file input.
+              "has-[input:focus-visible]:[box-shadow:var(--shadow-focus-ring)]"
             ),
-            /* @__PURE__ */ jsxs("div", { className: "text-fg-3 text-sm", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-fg font-medium", children: "Click to upload" }),
-              " or drag and drop"
-            ] }),
-            accept && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
-              "Accepted: ",
-              accept
-            ] }),
-            maxSize && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
-              "Max size: ",
-              formatBytes(maxSize)
-            ] })
-          ] })
-        ]
-      }
-    ),
-    error && /* @__PURE__ */ jsx("p", { role: "alert", className: "text-danger-fg mt-2 text-sm", children: error })
-  ] });
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  id: inputId,
+                  type: "file",
+                  ...slot(fileUploadAnatomy, "input"),
+                  accept,
+                  multiple,
+                  onChange: (e) => {
+                    if (e.target.files) handleFiles(e.target.files);
+                    e.target.value = "";
+                  },
+                  className: "fixed -top-[9999px] -left-[9999px] opacity-0",
+                  onKeyDown: (e) => {
+                    if (e.key !== "Enter" && e.key !== " ") return;
+                    e.preventDefault();
+                    e.currentTarget.click();
+                  },
+                  disabled,
+                  tabIndex: wrapperOwnsFocus ? -1 : void 0
+                }
+              ),
+              children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn(
+                      "rounded-icon flex size-10 items-center justify-center transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                      isDragOver ? "bg-brand text-fg-on-brand" : "bg-brand-bg text-brand"
+                    ),
+                    "aria-hidden": "true",
+                    children: /* @__PURE__ */ jsx(UploadIcon, { className: "size-5" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "text-fg-3 text-sm", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-fg font-medium", children: "Click to upload" }),
+                  " or drag and drop"
+                ] }),
+                accept && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
+                  "Accepted: ",
+                  accept
+                ] }),
+                maxSize && /* @__PURE__ */ jsxs("p", { className: "text-fg-4 font-mono text-[10.5px]", children: [
+                  "Max size: ",
+                  formatBytes(maxSize)
+                ] })
+              ] })
+            ]
+          }
+        ),
+        error && /* @__PURE__ */ jsx(
+          "p",
+          {
+            role: "alert",
+            ...slot(fileUploadAnatomy, "error"),
+            className: "text-danger-fg mt-2 text-sm",
+            children: error
+          }
+        )
+      ]
+    }
+  );
 }
 function formatBytes(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -5609,7 +6184,7 @@ IconTile.displayName = "IconTile";
 var inputVariants = cva(
   [
     "flex w-full rounded-input border bg-surface font-body text-fg",
-    "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+    microInteractions.control,
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -5627,7 +6202,10 @@ var inputVariants = cva(
       inputSize: {
         sm: "h-8 px-2.5 py-1 text-xs",
         md: "h-9 px-3 py-2 text-[13px]",
-        lg: "h-11 px-3.5 py-2.5 text-sm"
+        lg: "h-11 px-3.5 py-2.5 text-sm",
+        compact: "h-8 px-2.5 py-1 text-[13px]",
+        default: "h-10 px-3 py-2 text-sm",
+        comfortable: "h-12 px-3.5 py-2.5 text-base"
       }
     },
     defaultVariants: {
@@ -5639,7 +6217,10 @@ var inputVariants = cva(
 var floatingLabelSize = {
   sm: "text-xs",
   md: "text-[13px]",
-  lg: "text-sm"
+  lg: "text-sm",
+  compact: "text-[13px]",
+  default: "text-sm",
+  comfortable: "text-base"
 };
 var Input = forwardRef(function Input2({
   label,
@@ -5653,6 +6234,7 @@ var Input = forwardRef(function Input2({
   className,
   id: providedId,
   placeholder,
+  onWheel,
   ...props
 }, ref) {
   const generatedId = useId();
@@ -5663,12 +6245,25 @@ var Input = forwardRef(function Input2({
   const inputType = isPassword && showPassword ? "text" : type;
   const isFloating = !!floatingLabel && !!label;
   const resolvedPlaceholder = isFloating ? placeholder ?? " " : placeholder;
+  const handleWheel = inputType === "number" ? (event) => {
+    onWheel?.(event);
+    if (!event.defaultPrevented) event.currentTarget.blur();
+  } : onWheel;
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    label && !isFloating && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-fg mb-1.5 block text-[13px] leading-none font-medium", children: label }),
+    label && !isFloating && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        ...slot(inputAnatomy, "label"),
+        className: "text-fg mb-1.5 block text-[13px] leading-none font-medium",
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       prefixIcon && /* @__PURE__ */ jsx(
         "span",
         {
+          ...slot(inputAnatomy, "icon-start"),
           className: "text-fg-4 pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 [&>svg]:size-4",
           "aria-hidden": "true",
           children: prefixIcon
@@ -5683,13 +6278,21 @@ var Input = forwardRef(function Input2({
           placeholder: resolvedPlaceholder,
           "aria-invalid": !!error || void 0,
           "aria-describedby": error ? errorId : void 0,
+          ...slot(inputAnatomy, "root"),
+          ...stateAttributes({
+            variant: variant ?? "default",
+            size: inputSize ?? "md",
+            disabled: props.disabled,
+            invalid: !!error
+          }),
           className: cn(
             inputVariants({ variant, inputSize }),
             prefixIcon && "pl-9",
             (suffixIcon || isPassword) && "pr-9",
-            isFloating && "peer placeholder:text-transparent focus:placeholder:text-fg-4",
+            isFloating && "peer focus:placeholder:text-fg-4 placeholder:text-transparent",
             className
           ),
+          onWheel: handleWheel,
           ...props
         }
       ),
@@ -5699,6 +6302,7 @@ var Input = forwardRef(function Input2({
         "label",
         {
           htmlFor: id,
+          ...slot(inputAnatomy, "label"),
           className: cn(
             "pointer-events-none absolute left-3 origin-left px-1 leading-none",
             "bg-surface text-fg-4",
@@ -5724,22 +6328,32 @@ var Input = forwardRef(function Input2({
         {
           type: "button",
           onClick: () => setShowPassword((prev) => !prev),
+          ...slot(inputAnatomy, "password-toggle"),
           className: "text-fg-4 hover:text-fg absolute top-1/2 right-2.5 -translate-y-1/2 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none",
           "aria-label": showPassword ? "Hide password" : "Show password",
-          tabIndex: -1,
           children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "size-4", "aria-hidden": "true" })
         }
       ),
       suffixIcon && !isPassword && /* @__PURE__ */ jsx(
         "span",
         {
+          ...slot(inputAnatomy, "icon-end"),
           className: "text-fg-4 pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 [&>svg]:size-4",
           "aria-hidden": "true",
           children: suffixIcon
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-danger-fg mt-1.5 text-xs", children: error })
+    error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        role: "alert",
+        ...slot(inputAnatomy, "error"),
+        className: "text-danger-fg mt-1.5 text-xs",
+        children: error
+      }
+    )
   ] });
 });
 Input.displayName = "Input";
@@ -5822,10 +6436,27 @@ var labelVariants = cva(
 );
 var Label4 = React39.forwardRef(
   function Label5({ children, required, className, ...props }, ref) {
-    return /* @__PURE__ */ jsxs(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props, children: [
-      children,
-      required && /* @__PURE__ */ jsx("span", { className: "text-danger-fg ml-0.5", "aria-hidden": "true", children: "*" })
-    ] });
+    return /* @__PURE__ */ jsxs(
+      LabelPrimitive.Root,
+      {
+        ref,
+        ...slot(labelAnatomy, "root"),
+        className: cn(labelVariants(), className),
+        ...props,
+        children: [
+          children,
+          required && /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...slot(labelAnatomy, "required"),
+              className: "text-danger-fg ml-0.5",
+              "aria-hidden": "true",
+              children: "*"
+            }
+          )
+        ]
+      }
+    );
   }
 );
 Label4.displayName = LabelPrimitive.Root.displayName;
@@ -5843,10 +6474,27 @@ var LinkButton = forwardRef(function LinkButton2({
   ...props
 }, ref) {
   const classes = cn(buttonVariants({ variant, size }), className);
+  const root = { ...slot(linkButtonAnatomy, "root"), ...stateAttributes({ variant, size }) };
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-    iconLeft && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconLeft }),
+    iconLeft && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...slot(linkButtonAnatomy, "icon-start"),
+        className: "inline-flex shrink-0",
+        "aria-hidden": "true",
+        children: iconLeft
+      }
+    ),
     children,
-    iconRight && /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0", "aria-hidden": "true", children: iconRight })
+    iconRight && /* @__PURE__ */ jsx(
+      "span",
+      {
+        ...slot(linkButtonAnatomy, "icon-end"),
+        className: "inline-flex shrink-0",
+        "aria-hidden": "true",
+        children: iconRight
+      }
+    )
   ] });
   if (external) {
     const safeRel = rel ?? (target === "_blank" ? "noopener noreferrer" : void 0);
@@ -5855,6 +6503,7 @@ var LinkButton = forwardRef(function LinkButton2({
       {
         ref,
         href,
+        ...root,
         className: classes,
         target,
         rel: safeRel,
@@ -5863,7 +6512,7 @@ var LinkButton = forwardRef(function LinkButton2({
       }
     );
   }
-  return /* @__PURE__ */ jsx(Link, { ref, href, className: classes, target, rel, ...props, children: content });
+  return /* @__PURE__ */ jsx(Link, { ref, href, ...root, className: classes, target, rel, ...props, children: content });
 });
 LinkButton.displayName = "LinkButton";
 var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
@@ -5871,7 +6520,7 @@ var Skeleton = forwardRef(function Skeleton2({ className, ...props }, ref) {
     "div",
     {
       ref,
-      className: cn("skeleton bg-bg-3 rounded-icon animate-pulse", className),
+      className: cn("skeleton bg-bg-3 rounded-icon animate-pulse motion-reduce:animate-none", className),
       "aria-hidden": "true",
       ...props
     }
@@ -5883,7 +6532,7 @@ var SkeletonText = forwardRef(function SkeletonText2({ lines = 3, className, ...
     "div",
     {
       className: cn(
-        "skeleton bg-bg-3 rounded-icon h-4 animate-pulse",
+        "skeleton bg-bg-3 rounded-icon h-4 animate-pulse motion-reduce:animate-none",
         i === lines - 1 && "w-3/4"
       )
     },
@@ -5897,7 +6546,7 @@ var SkeletonCircle = forwardRef(
       "div",
       {
         ref,
-        className: cn("skeleton bg-bg-3 animate-pulse rounded-full", className),
+        className: cn("skeleton bg-bg-3 animate-pulse rounded-full motion-reduce:animate-none", className),
         style: { width: size, height: size },
         "aria-hidden": "true",
         ...props
@@ -6366,7 +7015,7 @@ function OTPInput({
           "has-[:disabled]:[&_[aria-hidden=true]]:border-rule",
           "has-[:disabled]:[&_[aria-hidden=true]]:text-fg-disabled"
         ),
-        render: ({ slots }) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5", role: "group", "aria-label": "One-time password", children: slots.map((slot, idx) => /* @__PURE__ */ jsx(OTPSlot, { ...slot, hasError: !!error }, idx)) })
+        render: ({ slots }) => /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2.5", role: "group", "aria-label": "One-time password", children: slots.map((slot2, idx) => /* @__PURE__ */ jsx(OTPSlot, { ...slot2, hasError: !!error }, idx)) })
       }
     ),
     error && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-danger-fg text-center text-xs", children: error })
@@ -6420,7 +7069,7 @@ function getPageNumbers(current, total, siblings) {
   }
   return [1, "ellipsis", ...range(leftSibling, rightSibling), "ellipsis", total];
 }
-var NAV_BUTTON = cn(
+var NAV_BUTTON2 = cn(
   "inline-flex size-7 items-center justify-center rounded-btn text-fg-3",
   "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
   "hover:bg-bg-2 hover:text-fg",
@@ -6458,18 +7107,28 @@ var Pagination = forwardRef(function Pagination2({
     {
       ref,
       "aria-label": `Pagination, page ${currentPage} of ${totalPages}`,
+      ...slot(paginationAnatomy, "root"),
       className: cn("flex items-center justify-between gap-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "text-fg-4 shrink-0 font-mono text-[11px] tracking-[0.02em] tabular-nums", children: contextLabel }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...slot(paginationAnatomy, "label"),
+            className: "text-fg-4 shrink-0 font-mono text-[11px] tracking-[0.02em] tabular-nums",
+            children: contextLabel
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ...slot(paginationAnatomy, "pages"), className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               onClick: () => onPageChange(currentPage - 1),
               disabled: currentPage <= 1,
-              className: NAV_BUTTON,
+              ...slot(paginationAnatomy, "previous"),
+              ...stateAttributes({ disabled: currentPage <= 1 }),
+              className: NAV_BUTTON2,
               "aria-label": "Previous page",
               children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-3.5", "aria-hidden": "true" })
             }
@@ -6478,6 +7137,7 @@ var Pagination = forwardRef(function Pagination2({
             (page, i) => page === "ellipsis" ? /* @__PURE__ */ jsx(
               "span",
               {
+                ...slot(paginationAnatomy, "ellipsis"),
                 className: "text-fg-5 flex h-7 w-5 items-center justify-center select-none",
                 "aria-hidden": "true",
                 children: /* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "size-3.5" })
@@ -6489,6 +7149,8 @@ var Pagination = forwardRef(function Pagination2({
                 type: "button",
                 onClick: () => onPageChange(page),
                 "aria-current": page === currentPage ? "page" : void 0,
+                ...slot(paginationAnatomy, "page"),
+                ...stateAttributes({ selected: page === currentPage }),
                 className: cn(
                   PAGE_BUTTON_BASE,
                   page === currentPage ? "bg-accent-tint text-accent-2 border border-[color:var(--color-accent-tint)]" : "text-fg-3 hover:bg-bg-2 hover:text-fg"
@@ -6504,7 +7166,9 @@ var Pagination = forwardRef(function Pagination2({
               type: "button",
               onClick: () => onPageChange(currentPage + 1),
               disabled: currentPage >= totalPages,
-              className: NAV_BUTTON,
+              ...slot(paginationAnatomy, "next"),
+              ...stateAttributes({ disabled: currentPage >= totalPages }),
+              className: NAV_BUTTON2,
               "aria-label": "Next page",
               children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-3.5", "aria-hidden": "true" })
             }
@@ -7016,11 +7680,11 @@ function CountrySelect({
             type: "button",
             disabled,
             "aria-label": "Select country code",
-            className: "rounded-input flex h-9 w-[90px] shrink-0 items-center gap-1.5 border border-input bg-input-background px-2.5 text-sm text-foreground focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50",
+            className: "rounded-input flex h-9 w-[90px] shrink-0 items-center gap-1.5 border border-rule-strong bg-surface px-2.5 text-sm text-fg transition-colors focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
             children: [
               /* @__PURE__ */ jsx(CountryFlag, { iso: selected.iso }),
-              /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: selected.dialCode }),
-              /* @__PURE__ */ jsx("svg", { className: "ml-auto size-3 shrink-0 text-muted-foreground", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) })
+              /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-fg-3", children: selected.dialCode }),
+              /* @__PURE__ */ jsx(ChevronDownIcon, { className: "ml-auto size-3 shrink-0 text-fg-3", "aria-hidden": "true" })
             ]
           }
         ) }),
@@ -7031,7 +7695,7 @@ function CountrySelect({
             align: "start",
             sideOffset: 4,
             style: { zIndex: 9999, minWidth: 248 },
-            className: "rounded-card border border-border bg-popover shadow-xl outline-none",
+            className: "rounded-card border border-rule bg-surface shadow-xl outline-none motion-reduce:transition-none",
             onOpenAutoFocus: (e) => {
               e.preventDefault();
               searchRef.current?.focus({ preventScroll: true });
@@ -7041,11 +7705,8 @@ function CountrySelect({
               if (e.key !== "Escape") e.stopPropagation();
             },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "rounded-t-card border-b border-border px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "rounded-input flex items-center gap-2 border border-input bg-input-background px-2.5", children: [
-                /* @__PURE__ */ jsxs("svg", { className: "size-3.5 shrink-0 text-muted-foreground", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
-                  /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-                  /* @__PURE__ */ jsx("path", { d: "m21 21-4.35-4.35" })
-                ] }),
+              /* @__PURE__ */ jsx("div", { className: "rounded-t-card border-b border-rule px-3 py-2.5", children: /* @__PURE__ */ jsxs("div", { className: "rounded-input flex items-center gap-2 border border-rule-strong bg-surface px-2.5", children: [
+                /* @__PURE__ */ jsx(SearchIcon, { className: "size-3.5 shrink-0 text-fg-3", "aria-hidden": "true" }),
                 /* @__PURE__ */ jsx(
                   "input",
                   {
@@ -7054,7 +7715,7 @@ function CountrySelect({
                     onChange: (e) => setSearch(e.target.value),
                     onKeyDown: (e) => e.stopPropagation(),
                     placeholder: "Search country or code...",
-                    className: "h-8 flex-1 bg-transparent text-xs text-foreground placeholder:text-muted-foreground focus:outline-none"
+                    className: "h-8 flex-1 bg-transparent text-xs text-fg placeholder:text-fg-3 focus:outline-none"
                   }
                 )
               ] }) }),
@@ -7064,7 +7725,7 @@ function CountrySelect({
                   className: "rounded-b-card max-h-56 overflow-y-auto",
                   style: { overscrollBehavior: "contain" },
                   onWheel: (e) => e.stopPropagation(),
-                  children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-3 text-center text-xs text-muted-foreground", children: "No countries found" }) : filtered.map((c) => /* @__PURE__ */ jsxs(
+                  children: filtered.length === 0 ? /* @__PURE__ */ jsx("p", { className: "px-4 py-3 text-center text-xs text-fg-3", children: "No countries found" }) : filtered.map((c) => /* @__PURE__ */ jsxs(
                     "button",
                     {
                       type: "button",
@@ -7075,13 +7736,13 @@ function CountrySelect({
                         setSearch("");
                       },
                       className: cn(
-                        "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-muted/60",
-                        c.iso === value && "bg-primary/5"
+                        "flex w-full items-center gap-3 px-3 py-2 text-left transition-colors hover:bg-bg-2/60 motion-reduce:transition-none",
+                        c.iso === value && "bg-brand-bg"
                       ),
                       children: [
                         /* @__PURE__ */ jsx(CountryFlag, { iso: c.iso }),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-xs text-foreground", children: c.name }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: c.dialCode })
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-xs text-fg", children: c.name }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-fg-3", children: c.dialCode })
                       ]
                     },
                     c.iso
@@ -7120,7 +7781,7 @@ function PhoneCountryInput({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-destructive", children: error })
+    error && /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-danger-fg", children: error })
   ] });
 }
 var BARS = [
@@ -7182,7 +7843,7 @@ function PriorityIcon({ priority, size = 16, className, ...props }) {
   );
 }
 var progressBarVariants = cva(
-  "h-full rounded-full transition-[width,background-color] duration-[var(--duration-slow)] ease-[var(--ease-out-quart)]",
+  cn("h-full rounded-full", microInteractions.progress),
   {
     variants: {
       variant: {
@@ -7222,7 +7883,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value, max = 100, label, sh
           {
             className: cn(
               progressBarVariants({ variant: resolvedVariant }),
-              isIndeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.4s_var(--ease-out-quart)_infinite]"
+              isIndeterminate && "absolute inset-y-0 left-0 w-1/3 animate-[progress-indeterminate_1.4s_var(--ease-out-quart)_infinite] motion-reduce:animate-none"
             ),
             style: isIndeterminate ? void 0 : { width: `${percentage}%` }
           }
@@ -7239,7 +7900,7 @@ var ProgressBar = forwardRef(function ProgressBar2({ value, max = 100, label, sh
 });
 ProgressBar.displayName = "ProgressBar";
 var progressRingVariants = cva(
-  "transition-[stroke-dashoffset,stroke] duration-[var(--duration-slow)] ease-[var(--ease-out-quart)]",
+  "transition-[stroke-dashoffset,stroke] duration-[var(--duration-slow)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
   {
     variants: {
       variant: {
@@ -7311,7 +7972,15 @@ var ProgressRing = forwardRef(function ProgressRing2({ value, max = 100, size =
 });
 ProgressRing.displayName = "ProgressRing";
 var RadioGroup3 = React39.forwardRef(function RadioGroup4({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-2", className), ...props });
+  return /* @__PURE__ */ jsx(
+    RadioGroupPrimitive.Root,
+    {
+      ref,
+      ...slot(radioGroupAnatomy, "root"),
+      className: cn("grid gap-2", className),
+      ...props
+    }
+  );
 });
 RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, label, id: providedId, ...props }, ref) {
@@ -7322,9 +7991,10 @@ var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, la
     {
       ref,
       id,
+      ...slot(radioGroupAnatomy, "item"),
       className: cn(
         "peer border-rule-strong bg-surface text-brand aspect-square size-4 shrink-0 rounded-full border",
-        "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+        microInteractions.selection,
         "hover:border-fg-4",
         "focus-visible:[border-color:var(--focus-ring-border)] focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
         "data-[state=checked]:border-brand",
@@ -7333,7 +8003,14 @@ var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, la
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-brand text-brand size-2", "aria-hidden": "true" }) })
+      children: /* @__PURE__ */ jsx(
+        RadioGroupPrimitive.Indicator,
+        {
+          ...slot(radioGroupAnatomy, "indicator"),
+          className: "flex items-center justify-center",
+          children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-brand text-brand size-2", "aria-hidden": "true" })
+        }
+      )
     }
   );
   if (!label) return root;
@@ -7343,6 +8020,7 @@ var RadioGroupItem = React39.forwardRef(function RadioGroupItem2({ className, la
       "label",
       {
         htmlFor: id,
+        ...slot(radioGroupAnatomy, "label"),
         className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
         children: label
       }
@@ -7410,6 +8088,7 @@ var SheetOverlay = React39.forwardRef(({ className, ...props }, ref) => /* @__PU
   DialogPrimitive.Overlay,
   {
     ref,
+    ...slot(sheetAnatomy, "overlay"),
     className: cn(
       "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
       "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
@@ -7471,6 +8150,8 @@ var SheetContent = React39.forwardRef(
         DialogPrimitive.Content,
         {
           ref,
+          ...slot(sheetAnatomy, "content"),
+          ...stateAttributes({ size: width }),
           className: cn(sheetVariants({ side: resolvedSide }), widthClass, className),
           style: widthStyle,
           ...props,
@@ -7479,6 +8160,7 @@ var SheetContent = React39.forwardRef(
             showCloseButton && /* @__PURE__ */ jsx(
               DialogPrimitive.Close,
               {
+                ...slot(sheetAnatomy, "close"),
                 className: cn(
                   "absolute top-4 right-4 inline-flex size-7 items-center justify-center",
                   "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -7497,11 +8179,19 @@ var SheetContent = React39.forwardRef(
   }
 );
 SheetContent.displayName = DialogPrimitive.Content.displayName;
-var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pr-12 pb-0", className), ...props });
+var SheetHeader = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...slot(sheetAnatomy, "header"),
+    className: cn("flex flex-col gap-1.5 p-6 pr-12 pb-0", className),
+    ...props
+  }
+);
 SheetHeader.displayName = "SheetHeader";
 var SheetFooter = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
+    ...slot(sheetAnatomy, "footer"),
     className: cn(
       "border-rule mt-auto flex flex-col-reverse gap-2 border-t p-6 sm:flex-row sm:items-center sm:justify-end",
       className
@@ -7514,6 +8204,7 @@ var SheetTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE
   DialogPrimitive.Title,
   {
     ref,
+    ...slot(sheetAnatomy, "title"),
     className: cn(
       "font-display text-fg text-base leading-tight font-medium tracking-tight",
       className
@@ -7522,7 +8213,15 @@ var SheetTitle = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SheetTitle.displayName = DialogPrimitive.Title.displayName;
-var SheetDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(DialogPrimitive.Description, { ref, className: cn("text-fg-3 text-sm", className), ...props }));
+var SheetDescription = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  DialogPrimitive.Description,
+  {
+    ref,
+    ...slot(sheetAnatomy, "description"),
+    className: cn("text-fg-3 text-sm", className),
+    ...props
+  }
+));
 SheetDescription.displayName = DialogPrimitive.Description.displayName;
 var MOBILE_QUERY = "(max-width: 639.98px)";
 function useIsMobile() {
@@ -7601,7 +8300,8 @@ var RouteTransition = forwardRef(
       {
         className: cn(
           "animate-in fade-in-0 slide-in-from-bottom-2",
-          "duration-[var(--duration-normal)] ease-[var(--ease-out-quart)]"
+          "duration-[var(--duration-normal)] ease-[var(--ease-out-quart)]",
+          "motion-reduce:animate-none"
         ),
         children
       },
@@ -7672,8 +8372,7 @@ function useDebounce(value, delay = 300) {
 var searchInputVariants = cva(
   [
     "flex w-full rounded-input border border-rule-strong bg-surface font-body text-fg",
-    "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
+    microInteractions.control,
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -7690,7 +8389,10 @@ var searchInputVariants = cva(
         // FilterChip at their `sm` tier in a toolbar row.
         sm: "h-8 pl-8 pr-8 text-[13px]",
         md: "h-9 pl-9 pr-9 text-[13px]",
-        lg: "h-11 pl-10 pr-10 text-sm"
+        lg: "h-11 pl-10 pr-10 text-sm",
+        compact: "h-8 pl-8 pr-8 text-[13px]",
+        default: "h-10 pl-9 pr-9 text-sm",
+        comfortable: "h-12 pl-10 pr-10 text-base"
       }
     },
     defaultVariants: {
@@ -7720,53 +8422,64 @@ var SearchInput = React39.forwardRef(
       onSearch?.(debouncedValue);
     }, [debouncedValue, onSearch]);
     const sz = inputSize ?? "md";
-    const iconLeftClass = sz === "sm" ? "left-2.5" : sz === "lg" ? "left-3" : "left-3";
-    const iconRightClass = sz === "sm" ? "right-2" : sz === "lg" ? "right-3" : "right-2.5";
-    const iconSizeClass = sz === "sm" ? "size-3.5" : "size-4";
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative w-full", className), children: [
-      /* @__PURE__ */ jsx(
-        SearchIcon,
-        {
-          className: cn(
-            "text-fg-4 pointer-events-none absolute top-1/2 -translate-y-1/2",
-            iconLeftClass,
-            iconSizeClass
+    const isCompact = sz === "sm" || sz === "compact";
+    const isComfortable = sz === "lg" || sz === "comfortable";
+    const iconLeftClass = isCompact ? "left-2.5" : "left-3";
+    const iconRightClass = isCompact ? "right-2" : isComfortable ? "right-3" : "right-2.5";
+    const iconSizeClass = isCompact ? "size-3.5" : "size-4";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...slot(searchInputAnatomy, "root"),
+        ...stateAttributes({ size: sz, disabled }),
+        className: cn("relative w-full", className),
+        children: [
+          /* @__PURE__ */ jsx(
+            SearchIcon,
+            {
+              ...slot(searchInputAnatomy, "icon"),
+              className: cn(
+                "text-fg-4 pointer-events-none absolute top-1/2 -translate-y-1/2",
+                iconLeftClass,
+                iconSizeClass
+              ),
+              "aria-hidden": "true"
+            }
           ),
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          ref,
-          type: "search",
-          value,
-          onChange: (e) => onValueChange(e.target.value),
-          placeholder,
-          disabled,
-          className: cn(searchInputVariants({ inputSize })),
-          ...props
-        }
-      ),
-      value && !disabled && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onValueChange(""),
-          className: cn(
-            "rounded-pill text-fg-4 absolute top-1/2 -translate-y-1/2 p-0.5",
-            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-            "motion-reduce:transition-none",
-            "hover:text-fg",
-            "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-            iconRightClass
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "search",
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              placeholder,
+              disabled,
+              ...slot(searchInputAnatomy, "control"),
+              className: cn(searchInputVariants({ inputSize })),
+              ...props
+            }
           ),
-          "aria-label": "Clear search",
-          tabIndex: -1,
-          children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClass, "aria-hidden": "true" })
-        }
-      )
-    ] });
+          value && !disabled && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onValueChange(""),
+              ...slot(searchInputAnatomy, "clear"),
+              className: cn(
+                "rounded-pill text-fg-4 absolute top-1/2 -translate-y-1/2 p-0.5",
+                microInteractions.control,
+                "hover:text-fg",
+                "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+                iconRightClass
+              ),
+              "aria-label": "Clear search",
+              children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClass, "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
   }
 );
 SearchInput.displayName = "SearchInput";
@@ -7874,20 +8587,39 @@ function SearchSelect({
     }
   }, [onCreate, trimmedSearch]);
   const inputRef = React39.useRef(null);
+  const listRef = React39.useRef(null);
   const listboxId = React39.useId();
-  const setInputRef = React39.useCallback((node) => {
-    inputRef.current = node;
-    node?.removeAttribute("aria-labelledby");
-    node?.setAttribute("aria-controls", listboxId);
-    node?.removeAttribute("aria-activedescendant");
+  const syncInputRelationships = React39.useCallback(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    input.removeAttribute("aria-labelledby");
+    input.removeAttribute("aria-activedescendant");
+    const controls = listRef.current?.id || listboxId;
+    if (controls && input.ownerDocument.getElementById(controls)) {
+      input.setAttribute("aria-controls", controls);
+    } else {
+      input.removeAttribute("aria-controls");
+    }
   }, [listboxId]);
+  const setInputRef = React39.useCallback(
+    (node) => {
+      inputRef.current = node;
+      syncInputRelationships();
+    },
+    [syncInputRelationships]
+  );
+  const setListRef = React39.useCallback(
+    (node) => {
+      listRef.current = node;
+      syncInputRelationships();
+    },
+    [syncInputRelationships]
+  );
   const singleValue = closeOnSelect ? selected[0] ?? null : null;
   const showValue = singleValue !== null && !open;
   const popoverOpen = open && !disabled;
   React39.useEffect(() => {
-    inputRef.current?.removeAttribute("aria-labelledby");
-    inputRef.current?.setAttribute("aria-controls", listboxId);
-    inputRef.current?.removeAttribute("aria-activedescendant");
+    syncInputRelationships();
   });
   React39.useEffect(() => {
     if (open && closeOnSelect) {
@@ -8048,7 +8780,6 @@ function SearchSelect({
                     },
                     placeholder,
                     "aria-label": placeholder,
-                    "aria-controls": listboxId,
                     disabled,
                     className: cn(
                       "font-body text-fg flex-1 bg-transparent py-2 pr-3 pl-9 text-[13px] outline-none",
@@ -8097,7 +8828,7 @@ function SearchSelect({
                 /* @__PURE__ */ jsxs(
                   Command.List,
                   {
-                    id: listboxId,
+                    ref: setListRef,
                     className: cn(
                       // No top padding: a sticky group heading pins at top-0, so any
                       // top padding would leave a strip above it where the previous
@@ -8401,6 +9132,7 @@ function SideDrawer({
         /* @__PURE__ */ jsx(
           DialogPrimitive.Overlay,
           {
+            ...slot(sideDrawerAnatomy, "overlay"),
             className: cn(
               "bg-overlay fixed inset-0 z-[var(--z-overlay)] backdrop-blur-[4px]",
               "transition-opacity duration-[var(--duration-overlay)] ease-[var(--ease-out-quart)]",
@@ -8412,6 +9144,8 @@ function SideDrawer({
         /* @__PURE__ */ jsxs(
           DialogPrimitive.Content,
           {
+            ...slot(sideDrawerAnatomy, "root"),
+            ...stateAttributes({ size: width }),
             className: cn(sideDrawerVariants({ side, width })),
             "aria-describedby": void 0,
             children: [
@@ -8425,35 +9159,58 @@ function SideDrawer({
   );
 }
 function SideDrawerHeader({ title, subtitle, onClose, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("border-rule bg-surface shrink-0 border-b px-6 py-4", className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-      /* @__PURE__ */ jsx("h2", { className: "font-display text-fg line-clamp-1 text-base leading-tight font-medium tracking-tight", children: title }),
-      subtitle && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-1 text-sm", children: subtitle })
-    ] }),
-    onClose && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onClose,
-        className: cn(
-          "inline-flex size-7 shrink-0 items-center justify-center",
-          "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-          "hover:bg-overlay-hover hover:text-fg",
-          "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
-        ),
-        "aria-label": "Close",
-        children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...slot(sideDrawerAnatomy, "header"),
+      className: cn("border-rule bg-surface shrink-0 border-b px-6 py-4", className),
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsx(
+            "h2",
+            {
+              ...slot(sideDrawerAnatomy, "heading"),
+              className: "font-display text-fg line-clamp-1 text-base leading-tight font-medium tracking-tight",
+              children: title
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsx("p", { ...slot(sideDrawerAnatomy, "subtitle"), className: "text-fg-3 mt-1 text-sm", children: subtitle })
+        ] }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            ...slot(sideDrawerAnatomy, "close"),
+            className: cn(
+              "inline-flex size-7 shrink-0 items-center justify-center",
+              "rounded-icon text-fg-4 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+              "hover:bg-overlay-hover hover:text-fg",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
+            ),
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-4", "aria-hidden": "true" })
+          }
+        )
+      ] })
+    }
+  );
 }
 function SideDrawerBody({ children, className }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("scrollbar-thin flex-1 overflow-y-auto px-6 py-4", className), children });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...slot(sideDrawerAnatomy, "body"),
+      className: cn("scrollbar-thin flex-1 overflow-y-auto px-6 py-4", className),
+      children
+    }
+  );
 }
 function SideDrawerFooter({ children, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...slot(sideDrawerAnatomy, "footer"),
       className: cn(
         "border-rule bg-surface shrink-0 border-t px-6 py-4",
         "flex items-center justify-end gap-3",
@@ -9451,9 +10208,17 @@ var Switch = React39.forwardRef(
       {
         ref,
         id,
+        ...slot(switchAnatomy, "root"),
+        ...stateAttributes({ size: size ?? "md" }),
         className: cn(switchVariants({ size }), className),
         ...props,
-        children: /* @__PURE__ */ jsx(SwitchPrimitive.Thumb, { className: cn(switchThumbVariants({ size })) })
+        children: /* @__PURE__ */ jsx(
+          SwitchPrimitive.Thumb,
+          {
+            ...slot(switchAnatomy, "thumb"),
+            className: cn(switchThumbVariants({ size }))
+          }
+        )
       }
     );
     if (!label) return root;
@@ -9463,6 +10228,7 @@ var Switch = React39.forwardRef(
         "label",
         {
           htmlFor: id,
+          ...slot(switchAnatomy, "label"),
           className: "text-fg peer-disabled:text-fg-disabled cursor-pointer text-[13px] leading-none select-none peer-disabled:cursor-not-allowed",
           children: label
         }
@@ -9475,6 +10241,7 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...slot(tableAnatomy, "wrapper"),
       className: cn(
         "rounded-card border-rule-strong bg-surface w-full overflow-x-auto border shadow-quiet",
         wrapperClassName
@@ -9483,6 +10250,7 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
         "table",
         {
           ref,
+          ...slot(tableAnatomy, "root"),
           className: cn("w-full caption-bottom border-collapse text-sm", className),
           ...props
         }
@@ -9493,12 +10261,28 @@ var Table = forwardRef(function Table2({ className, wrapperClassName, ...props }
 Table.displayName = "Table";
 var TableHeader = forwardRef(
   function TableHeader2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-rule [&_tr]:border-b", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        ...slot(tableAnatomy, "header"),
+        className: cn("[&_tr]:border-rule [&_tr]:border-b", className),
+        ...props
+      }
+    );
   }
 );
 TableHeader.displayName = "TableHeader";
 var TableBody = forwardRef(function TableBody2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "tbody",
+    {
+      ref,
+      ...slot(tableAnatomy, "body"),
+      className: cn("[&_tr:last-child]:border-0", className),
+      ...props
+    }
+  );
 });
 TableBody.displayName = "TableBody";
 var TableFooter = forwardRef(
@@ -9507,6 +10291,7 @@ var TableFooter = forwardRef(
       "tfoot",
       {
         ref,
+        ...slot(tableAnatomy, "footer"),
         className: cn(
           "border-rule bg-surface-2 border-t font-medium [&>tr]:last:border-b-0",
           className
@@ -9522,6 +10307,7 @@ var TableRow = forwardRef(function TableRow2({ className, ...props }, ref) {
     "tr",
     {
       ref,
+      ...slot(tableAnatomy, "row"),
       className: cn(
         "border-rule-soft border-b transition-colors duration-[var(--duration-instant)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
         // G15 compound: selected wins over hover; selected+hover uses the
@@ -9540,6 +10326,7 @@ var TableHead = forwardRef(function TableHead2({ className, ...props }, ref) {
     "th",
     {
       ref,
+      ...slot(tableAnatomy, "head"),
       className: cn(
         // Sentence-case column labels in the body font (Plus Jakarta Sans),
         // quiet gray — not mono uppercase eyebrows.
@@ -9560,6 +10347,7 @@ var TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
     "td",
     {
       ref,
+      ...slot(tableAnatomy, "cell"),
       className: cn(
         // 13px, fg-2, soft 1px row divider, tabular nums; airier vertical
         // rhythm (py-3) for the taller rows in the catalog layout.
@@ -9574,7 +10362,15 @@ var TableCell = forwardRef(function TableCell2({ className, ...props }, ref) {
 TableCell.displayName = "TableCell";
 var TableCaption = forwardRef(
   function TableCaption2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("caption", { ref, className: cn("text-fg-3 mt-3 text-sm", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "caption",
+      {
+        ref,
+        ...slot(tableAnatomy, "caption"),
+        className: cn("text-fg-3 mt-3 text-sm", className),
+        ...props
+      }
+    );
   }
 );
 TableCaption.displayName = "TableCaption";
@@ -9598,8 +10394,8 @@ TabsList.displayName = TabsPrimitive.List.displayName;
 var triggerVariants = cva(
   cn(
     "inline-flex items-center justify-center gap-2 text-[13px] font-medium",
-    "text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
+    "text-fg-3",
+    microInteractions.selection,
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-fg-disabled",
     "hover:text-fg"
@@ -9712,6 +10508,7 @@ var textareaVariants = cva(
   [
     "flex w-full rounded-input border bg-surface font-body text-fg",
     "transition-[color,background-color,border-color,box-shadow] duration-[var(--duration-fast)]",
+    "motion-reduce:transition-none",
     "placeholder:text-fg-4",
     "focus-visible:outline-none focus-visible:[border-color:var(--focus-ring-border)]",
     "focus-visible:[box-shadow:var(--shadow-focus-ring)]",
@@ -9775,7 +10572,15 @@ var Textarea = forwardRef(function Textarea2({
   }, [value, adjustHeight]);
   const currentLength = typeof value === "string" ? value.length : typeof defaultValue === "string" ? defaultValue.length : 0;
   return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-fg mb-1.5 block text-[13px] leading-none font-medium", children: label }),
+    label && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        ...slot(textareaAnatomy, "label"),
+        className: "text-fg mb-1.5 block text-[13px] leading-none font-medium",
+        children: label
+      }
+    ),
     /* @__PURE__ */ jsx(
       "textarea",
       {
@@ -9786,6 +10591,13 @@ var Textarea = forwardRef(function Textarea2({
         maxLength,
         "aria-invalid": !!error || void 0,
         "aria-describedby": error ? errorId : void 0,
+        ...slot(textareaAnatomy, "root"),
+        ...stateAttributes({
+          variant: variant ?? "default",
+          size: inputSize ?? "md",
+          disabled: props.disabled,
+          invalid: !!error
+        }),
         onChange: (e) => {
           onChange?.(e);
           adjustHeight();
@@ -9799,12 +10611,28 @@ var Textarea = forwardRef(function Textarea2({
       }
     ),
     (error || showCount && maxLength) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 flex items-center justify-between gap-2", children: [
-      error ? /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: "text-danger-fg text-xs", children: error }) : /* @__PURE__ */ jsx("span", {}),
-      showCount && maxLength && /* @__PURE__ */ jsxs("span", { className: "text-fg-4 ml-auto font-mono text-[11px]", children: [
-        currentLength,
-        "/",
-        maxLength
-      ] })
+      error ? /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId,
+          role: "alert",
+          ...slot(textareaAnatomy, "error"),
+          className: "text-danger-fg text-xs",
+          children: error
+        }
+      ) : /* @__PURE__ */ jsx("span", {}),
+      showCount && maxLength && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          ...slot(textareaAnatomy, "count"),
+          className: "text-fg-4 ml-auto font-mono text-[11px]",
+          children: [
+            currentLength,
+            "/",
+            maxLength
+          ]
+        }
+      )
     ] })
   ] });
 });
@@ -9877,6 +10705,7 @@ function ToastProvider({ children }) {
     /* @__PURE__ */ jsx(
       "div",
       {
+        ...slot(toastAnatomy, "region"),
         className: "pointer-events-none fixed top-4 right-4 z-[var(--z-toast)] flex flex-col gap-2",
         role: "region",
         "aria-live": "polite",
@@ -10000,6 +10829,8 @@ function ToastItem({ toast, onDismiss }) {
       role: hasContent ? "group" : isError ? "alert" : "status",
       "aria-atomic": hasContent ? void 0 : true,
       "data-state": exiting ? "closed" : "open",
+      ...slot(toastAnatomy, "root"),
+      ...stateAttributes({ variant: toast.variant ?? "default" }),
       onPointerEnter: () => setPaused(true),
       onPointerLeave: () => {
         if (!dragRef.current) setPaused(false);
@@ -10036,6 +10867,7 @@ function ToastItem({ toast, onDismiss }) {
         /* @__PURE__ */ jsx(
           "span",
           {
+            ...slot(toastAnatomy, "icon"),
             className: cn(
               // Same-hue inset ring gives the tinted chip a crafted edge instead
               // of a flat fill — definition without a heavy border.
@@ -10053,8 +10885,22 @@ function ToastItem({ toast, onDismiss }) {
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          toast.title && /* @__PURE__ */ jsx("p", { className: "text-fg text-sm leading-tight font-semibold", children: toast.title }),
-          toast.description && /* @__PURE__ */ jsx("p", { className: "text-fg-3 mt-0.5 text-sm leading-snug", children: toast.description }),
+          toast.title && /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...slot(toastAnatomy, "title"),
+              className: "text-fg text-sm leading-tight font-semibold",
+              children: toast.title
+            }
+          ),
+          toast.description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              ...slot(toastAnatomy, "description"),
+              className: "text-fg-3 mt-0.5 text-sm leading-snug",
+              children: toast.description
+            }
+          ),
           toast.action && /* @__PURE__ */ jsx(
             "button",
             {
@@ -10063,6 +10909,7 @@ function ToastItem({ toast, onDismiss }) {
                 toast.action?.onClick();
                 close();
               },
+              ...slot(toastAnatomy, "action"),
               className: cn(
                 "text-brand mt-2 text-sm font-semibold",
                 "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:underline motion-reduce:transition-none",
@@ -10077,6 +10924,7 @@ function ToastItem({ toast, onDismiss }) {
           {
             type: "button",
             onClick: close,
+            ...slot(toastAnatomy, "close"),
             className: cn(
               // size-7 click target with a -m-1 offset so the glyph keeps its
               // top-right optical position while the hit area (and ring) grow.
@@ -10140,8 +10988,8 @@ function ToastItem({ toast, onDismiss }) {
 var itemVariants = cva(
   cn(
     "inline-flex items-center justify-center rounded-pill px-3 py-1.5 text-[13px] font-medium",
-    "text-fg-3 transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
-    "motion-reduce:transition-none",
+    "text-fg-3",
+    microInteractions.selection,
     "hover:bg-bg-2 hover:text-fg",
     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-bg-disabled disabled:text-fg-disabled",
@@ -10199,6 +11047,7 @@ var TooltipContent = React39.forwardRef(({ className, sideOffset = 6, ...props }
   {
     ref,
     sideOffset,
+    ...slot(tooltipAnatomy, "content"),
     className: cn(
       "rounded-input border-rule-strong bg-surface z-[var(--z-tooltip)] max-w-xs border px-2.5 py-1.5",
       "font-body text-fg shadow-pop text-xs leading-tight",
@@ -10221,11 +11070,11 @@ var VisuallyHidden = forwardRef(
 VisuallyHidden.displayName = "VisuallyHidden";
 var TONE_DOT = {
   brand: "bg-brand",
-  info: "bg-info",
-  success: "bg-success",
-  warning: "bg-warning",
-  muted: "bg-muted-foreground/40",
-  danger: "bg-destructive"
+  info: "bg-accent-2",
+  success: "bg-success-fg",
+  warning: "bg-warning-fg",
+  muted: "bg-fg-4/40",
+  danger: "bg-danger-fg"
 };
 function ChannelTabs({ tabs, value, onChange, className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -10233,7 +11082,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
     {
       role: "tablist",
       "aria-label": "Channel",
-      className: cn("flex items-center gap-1 border-b border-border bg-card px-3 py-2", className),
+      className: cn("flex items-center gap-1 border-b border-rule bg-surface px-3 py-2", className),
       ...props,
       children: tabs.map((tab) => {
         const active = value === tab.value;
@@ -10246,9 +11095,9 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
             "aria-selected": active,
             onClick: () => onChange(tab.value),
             className: cn(
-              "flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-              active ? "border-brand bg-brand/5 text-brand" : "border-transparent text-muted-foreground hover:text-foreground"
+              "flex items-center gap-2 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+              active ? "border-brand bg-brand/5 text-brand" : "border-transparent text-fg-3 hover:text-fg"
             ),
             children: [
               /* @__PURE__ */ jsx(
@@ -10256,7 +11105,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
                 {
                   className: cn(
                     "size-1.5 rounded-full",
-                    active ? TONE_DOT[tab.tone ?? "muted"] : "bg-muted-foreground/40"
+                    active ? TONE_DOT[tab.tone ?? "muted"] : "bg-fg-4/40"
                   ),
                   "aria-hidden": true
                 }
@@ -10267,7 +11116,7 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
                 {
                   className: cn(
                     "ml-0.5 inline-flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[10px] font-semibold tabular-nums",
-                    active ? "bg-background/60" : "bg-muted text-muted-foreground"
+                    active ? "bg-bg/60" : "bg-bg-2 text-fg-3"
                   ),
                   children: count
                 }
@@ -10283,12 +11132,12 @@ function ChannelTabs({ tabs, value, onChange, className, ...props }) {
 ChannelTabs.displayName = "ChannelTabs";
 var TONE_STYLES = {
   brand: "bg-brand/10 text-brand border-brand/30",
-  info: "bg-info/10 text-info border-info/30",
-  primary: "bg-primary/10 text-primary border-primary/30",
-  success: "bg-success/10 text-success border-success/30",
-  warning: "bg-warning/10 text-warning border-warning/30",
-  danger: "bg-destructive/10 text-destructive border-destructive/30",
-  muted: "bg-muted text-muted-foreground border-border"
+  info: "bg-accent-tint text-accent-2 border-accent/30",
+  primary: "bg-brand-bg text-brand border-brand-line",
+  success: "bg-success-bg text-success-fg border-success-line",
+  warning: "bg-warning-bg text-warning-fg border-warning-line",
+  danger: "bg-danger-bg text-danger-fg border-danger-line",
+  muted: "bg-bg-2 text-fg-3 border-rule"
 };
 function IntentBadge({ tone = "muted", icon, children, className, ...props }) {
   return /* @__PURE__ */ jsxs(
@@ -11563,7 +12412,7 @@ var Grid = forwardRef(function Grid2({
   return /* @__PURE__ */ jsx("div", { ref, className: cn("overflow-x-auto", className), ...props, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      role: "table",
+      role: "group",
       "aria-label": ariaLabel,
       className: "grid gap-2",
       style: {
@@ -12139,6 +12988,7 @@ function QuestionOptionButton({
       className: cn(
         "group bg-surface flex w-full items-center gap-3 border text-left",
         "transition-[border-color,background-color,color,box-shadow,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)]",
+        "motion-reduce:transition-none",
         "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
         "disabled:bg-bg-disabled disabled:text-fg-disabled disabled:cursor-not-allowed",
         compact ? "h-10 max-w-max rounded-[10px] px-3" : "min-h-16 rounded-[12px] px-7 py-4",
@@ -12152,7 +13002,7 @@ function QuestionOptionButton({
           {
             "aria-hidden": "true",
             className: cn(
-              "grid shrink-0 place-items-center rounded-full border transition-colors duration-[var(--duration-fast)]",
+              "grid shrink-0 place-items-center rounded-full border transition-colors duration-[var(--duration-fast)] motion-reduce:transition-none",
               compact ? "size-5" : "size-4",
               selected ? "border-brand bg-brand text-fg-on-brand" : "border-rule-strong bg-surface group-hover:border-brand-line text-transparent"
             ),
@@ -12904,7 +13754,7 @@ var EngagementTimelineStep = forwardRef(
   }
 );
 EngagementTimelineStep.displayName = "EngagementTimelineStep";
-var ROW_BASE = "group/row flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1 text-left text-[12px] font-medium transition-colors duration-[120ms] motion-reduce:transition-none";
+var ROW_BASE = "group/row flex w-full items-center gap-1.5 rounded-lg px-2.5 py-1 text-left text-[12px] font-medium transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none";
 var ROW_INACTIVE = "text-fg-2 hover:bg-surface-2 hover:text-fg";
 var ROW_ACTIVE = "bg-brand-bg text-brand font-semibold";
 var BADGE_BASE = "ml-auto min-w-[18px] rounded-full px-[5px] py-px text-center text-[10px] font-[650] tabular-nums";
@@ -12948,7 +13798,7 @@ var FolderTree = forwardRef(function FolderTree2({ nodes, activeId, onSelect, de
               toggle(node.id);
             },
             className: cn(
-              "shrink-0 text-fg-4 transition-transform duration-[150ms] motion-reduce:transition-none",
+              "shrink-0 text-fg-4 transition-transform duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
               isOpen && "rotate-90"
             ),
             children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, "aria-hidden": "true" })
@@ -13011,7 +13861,7 @@ var ClientRailItem = forwardRef(
           // Layout
           "relative flex w-full items-center gap-[11px] border-b border-rule px-[14px] py-[11px] text-left",
           // Motion
-          "transition-colors duration-[120ms] motion-reduce:transition-none",
+          "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           // Cursor
           "cursor-pointer",
           // State — hover only when not active to avoid override
@@ -13143,7 +13993,7 @@ function CheckboxSlot({
       "div",
       {
         className: cn(
-          "shrink-0 transition-opacity duration-[120ms] motion-reduce:transition-none",
+          "shrink-0 transition-opacity duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           selected ? "opacity-100" : "opacity-0 group-hover:opacity-100",
           className
         ),
@@ -13170,7 +14020,7 @@ function MoreActions({ menu }) {
         type: "button",
         className: cn(
           "grid size-[30px] place-items-center rounded-[8px] text-fg-4",
-          "transition-colors duration-[120ms] motion-reduce:transition-none",
+          "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           "group-hover:text-fg-2 hover:bg-surface hover:text-brand hover:shadow-sm"
         ),
         "aria-label": "More actions",
@@ -13210,7 +14060,7 @@ var DocumentFileRow = React39.forwardRef(
           ref,
           className: cn(
             "group flex cursor-pointer items-center gap-[13px] border-b border-rule px-[14px] py-3",
-            "transition-colors duration-[120ms] motion-reduce:transition-none hover:bg-surface-2",
+            "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none hover:bg-surface-2",
             selected && "bg-brand-bg",
             className
           ),
@@ -13277,7 +14127,7 @@ var DocumentFileCard = React39.forwardRef(
           ref,
           className: cn(
             "group relative cursor-pointer rounded-2xl border border-rule bg-surface p-3",
-            "transition-[border-color,box-shadow,transform] duration-[120ms] motion-reduce:transition-none",
+            "transition-[border-color,box-shadow,transform] duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
             "hover:-translate-y-0.5 hover:border-rule-strong hover:shadow-sm",
             selected && "border-brand bg-brand-bg",
             className
@@ -13342,7 +14192,7 @@ var DocumentFileLine = React39.forwardRef(
         ref,
         className: cn(
           "flex items-center gap-2.5 rounded-[10px] px-2.5 py-2",
-          "transition-colors duration-[120ms] motion-reduce:transition-none hover:bg-surface-2",
+          "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none hover:bg-surface-2",
           className
         ),
         ...props,
@@ -13377,7 +14227,7 @@ var DocumentFileLine = React39.forwardRef(
               onClick: onOpen,
               className: cn(
                 "grid size-7 shrink-0 place-items-center rounded-lg text-fg-4",
-                "transition-colors duration-[120ms] motion-reduce:transition-none",
+                "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
                 "hover:bg-surface hover:text-brand",
                 "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
               ),
@@ -13451,7 +14301,7 @@ function ChecklistItemRow({ item }) {
     "div",
     {
       className: cn(
-        "rounded-xl border px-3.5 py-2.5 shadow-quiet transition-colors duration-[120ms] motion-reduce:transition-none",
+        "rounded-xl border px-3.5 py-2.5 shadow-quiet transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
         done ? "border-success-line/70 bg-success-bg/30" : item.status === "in-review" ? "border-warning-line/70 bg-warning-bg/25" : "border-rule bg-surface"
       ),
       children: [
@@ -13603,7 +14453,7 @@ var DocumentRequestField = forwardRef(
                 className: cn(
                   "ml-auto size-[26px] rounded-[7px] grid place-items-center",
                   "text-fg-4",
-                  "transition-colors duration-[120ms] motion-reduce:transition-none",
+                  "transition-colors duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
                   "hover:bg-danger-bg hover:text-danger-fg",
                   "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
                 ),
@@ -13748,7 +14598,15 @@ var NewMenu = forwardRef(function NewMenu2({ actions, groups, triggerLabel = "Ne
 });
 NewMenu.displayName = "NewMenu";
 var Shell = forwardRef(function Shell2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx("div", { ref, className: cn("bg-bg flex h-dvh w-full", className), ...props });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      ...slot(shellAnatomy, "root"),
+      className: cn("bg-bg flex h-dvh w-full", className),
+      ...props
+    }
+  );
 });
 Shell.displayName = "Shell";
 var Main = forwardRef(function Main2({ className, ...props }, ref) {
@@ -13756,6 +14614,7 @@ var Main = forwardRef(function Main2({ className, ...props }, ref) {
     "main",
     {
       ref,
+      ...slot(shellAnatomy, "main"),
       className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", className),
       ...props
     }
@@ -13775,6 +14634,7 @@ var Content16 = forwardRef(function Content17({ padTop, padBottom, className, st
       role: "region",
       "aria-label": "Page content",
       tabIndex: 0,
+      ...slot(shellAnatomy, "content"),
       className: cn("flex-1 overflow-y-auto p-[var(--content-pad)]", className),
       style: paddingStyle,
       ...props
@@ -13958,6 +14818,7 @@ var Sidebar = React39.forwardRef(function Sidebar2({
         "data-labels": labelsHidden ? "hide" : "show",
         "data-collapsible": collapsible ? "true" : void 0,
         "data-variant": variant,
+        ...slot(sidebarAnatomy, "root"),
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         style: { width: effectiveWidth, ...style },
@@ -13975,7 +14836,7 @@ var Sidebar = React39.forwardRef(function Sidebar2({
           // movement) but well short of `--duration-slow` (which feels
           // sluggish). `will-change` hints the compositor so the column
           // doesn't repaint every frame mid-transition.
-          "transition-[width,box-shadow] duration-[220ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[width,box-shadow] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "[will-change:width]",
           // Overlay (hover-peek OR programmatic peek-lock): float above the
           // canvas without reflowing layout. Driven by `data-overlay` so a
@@ -14017,6 +14878,7 @@ var SidebarTrigger = React39.forwardRef(
           onClick?.(e);
           if (!e.defaultPrevented) toggle();
         },
+        ...slot(sidebarAnatomy, "trigger"),
         className: cn(
           "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
           "text-fg-3 hover:bg-bg-3 hover:text-fg",
@@ -14063,6 +14925,8 @@ var SidebarPinButton = React39.forwardRef(
           onClick?.(e);
           if (!e.defaultPrevented) setState(isPinned ? "rail" : "expanded");
         },
+        ...slot(sidebarAnatomy, "pin"),
+        ...stateAttributes({ selected: isPinned }),
         className: cn(
           "inline-flex size-7 shrink-0 items-center justify-center rounded-md",
           "text-fg-4 hover:bg-bg-3 hover:text-fg aria-pressed:text-fg",
@@ -14119,6 +14983,7 @@ var SidebarBrand = React39.forwardRef(
       "div",
       {
         ref,
+        ...slot(sidebarAnatomy, "brand"),
         className: cn(
           "flex min-w-0 items-center gap-2 px-2.5 pt-1 pb-4",
           className
@@ -14136,6 +15001,7 @@ var SidebarBrandText = React39.forwardRef(
       {
         ref,
         "aria-hidden": "false",
+        ...slot(sidebarAnatomy, "brand-text"),
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word wordmarks clip at a
           // word boundary instead of mid-word when the rail is narrow.
@@ -14143,7 +15009,7 @@ var SidebarBrandText = React39.forwardRef(
           // Smooth fade + width collapse on rail. Keeps the wordmark
           // legible up to the moment the column reaches rail width, then
           // fully drops out (visibility:hidden cuts hit-testing).
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-[160px] opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible",
           className
@@ -14173,6 +15039,7 @@ var SidebarSection = React39.forwardRef(
         ref,
         role: ariaLabel ? "group" : void 0,
         "aria-label": ariaLabel,
+        ...slot(sidebarAnatomy, "section"),
         className: cn(
           "mb-4",
           // In rail, the visible section labels disappear and the only
@@ -14187,15 +15054,17 @@ var SidebarSection = React39.forwardRef(
           label != null && /* @__PURE__ */ jsx(
             "div",
             {
+              ...slot(sidebarAnatomy, "section-header"),
               className: cn(
                 "mb-1 flex items-center justify-between px-2.5 py-1",
-                "transition-opacity duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
                 "opacity-100",
                 "group-data-[labels=hide]/sidebar:invisible group-data-[labels=hide]/sidebar:opacity-0"
               ),
               children: /* @__PURE__ */ jsx(
                 "span",
                 {
+                  ...slot(sidebarAnatomy, "section-label"),
                   className: cn(
                     "font-mono text-[11px] tracking-[0.14em] uppercase",
                     tone === "muted" ? "text-fg-3" : "text-brand"
@@ -14237,6 +15106,7 @@ var SidebarLink = React39.forwardRef(
         "data-active": active ? "true" : void 0,
         "aria-current": active ? "page" : void 0,
         "aria-label": accessibleLabel,
+        ...slot(sidebarAnatomy, "link"),
         className: cn(
           "group/link relative mb-px flex items-center gap-2.5 rounded-md px-2.5 py-1.5",
           "text-fg-2 text-[13px] font-normal no-underline",
@@ -14276,6 +15146,7 @@ var SidebarLink = React39.forwardRef(
           /* @__PURE__ */ jsx(
             "span",
             {
+              ...slot(sidebarAnatomy, "link-label"),
               className: cn(
                 // Flex row so a trailing <SidebarLinkBadge> (ml-auto) aligns
                 // to the right edge with a gap from the label, instead of
@@ -14283,7 +15154,7 @@ var SidebarLink = React39.forwardRef(
                 // auto margin, which is why "Billing$48k" rendered glued.
                 // Single-line label clips via overflow; badge stays put.
                 "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden whitespace-nowrap",
-                "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
                 "max-w-full opacity-100",
                 "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
               ),
@@ -14307,6 +15178,7 @@ var SidebarLinkLabel = React39.forwardRef(
       "span",
       {
         ref,
+        ...slot(sidebarAnatomy, "link-label"),
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word labels clip at a
           // word boundary; collapses cleanly with the rail-mode max-width
@@ -14315,7 +15187,7 @@ var SidebarLinkLabel = React39.forwardRef(
           // Fade + collapse instead of hard display:none so a single
           // 180ms opacity tween covers all labels in lockstep with the
           // 220ms aside-width transition — no snap on the last frame.
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-full opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible",
           className
@@ -14332,8 +15204,9 @@ var SidebarLinkAction = React39.forwardRef(
       "span",
       {
         ref,
+        ...slot(sidebarAnatomy, "link-action"),
         className: cn(
-          "transition-opacity duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "opacity-100",
           "group-data-[labels=hide]/sidebar:invisible group-data-[labels=hide]/sidebar:opacity-0",
           className
@@ -14360,7 +15233,15 @@ var sidebarLinkBadgeVariants = cva(
 );
 var SidebarLinkBadge = React39.forwardRef(
   function SidebarLinkBadge2({ tone, className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("span", { ref, className: cn(sidebarLinkBadgeVariants({ tone }), className), ...props });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "link-badge"),
+        className: cn(sidebarLinkBadgeVariants({ tone }), className),
+        ...props
+      }
+    );
   }
 );
 SidebarLinkBadge.displayName = "SidebarLinkBadge";
@@ -14431,72 +15312,86 @@ var SidebarLinkGroup = React39.forwardRef(
     const labelSpan = /* @__PURE__ */ jsx(
       "span",
       {
+        ...slot(sidebarAnatomy, "link-label"),
         className: cn(
           // line-clamp-1 (not `truncate`) so multi-word labels clip at a
           // word boundary; collapses cleanly with the rail-mode max-width
           // animation since both rules only constrain visible content.
           "min-w-0 flex-1 line-clamp-1",
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "max-w-full opacity-100",
           "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
         ),
         children: label
       }
     );
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mb-px", className), ...props, children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ jsxs(
-          "a",
-          {
-            href,
-            "data-active": active ? "true" : void 0,
-            "aria-current": active ? "page" : void 0,
-            "aria-label": getTextContent(label) || void 0,
-            onClick: handleBodyClick,
-            className: bodyClassName,
-            children: [
-              icon,
-              labelSpan
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "aria-expanded": open,
-            "aria-controls": contentId,
-            "aria-label": open ? "Collapse section" : "Expand section",
-            onClick: handleChevronClick,
-            className: cn(
-              "ml-px inline-flex size-7 shrink-0 items-center justify-center rounded-md",
-              "text-fg-4 hover:bg-bg-3 hover:text-fg-2",
-              "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-              "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-[var(--duration-fast)] [&_svg]:ease-[var(--ease-out-quart)] motion-reduce:[&_svg]:transition-none",
-              // Hide in rail — content tree is hidden too, so the
-              // affordance has nothing to control.
-              "group-data-[labels=hide]/sidebar:hidden"
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...slot(sidebarAnatomy, "group"),
+        ...stateAttributes({ state: open ? "open" : "closed" }),
+        className: cn("mb-px", className),
+        ...props,
+        children: /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                href,
+                "data-active": active ? "true" : void 0,
+                "aria-current": active ? "page" : void 0,
+                "aria-label": getTextContent(label) || void 0,
+                onClick: handleBodyClick,
+                ...slot(sidebarAnatomy, "group-link"),
+                className: bodyClassName,
+                children: [
+                  icon,
+                  labelSpan
+                ]
+              }
             ),
-            children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "-rotate-90" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(
-        CollapsibleContent,
-        {
-          id: contentId,
-          className: cn(
-            // Indent column + connecting rule. Children render as
-            // standard <SidebarLink>s and keep their own active-rail
-            // indicator, which lands flush at the indented column's
-            // left edge.
-            "group-data-[labels=hide]/sidebar:hidden"
-          ),
-          children: /* @__PURE__ */ jsx("div", { className: "border-rule mt-px ml-[18px] border-l pl-2", children })
-        }
-      )
-    ] }) });
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "aria-expanded": open,
+                "aria-controls": contentId,
+                "aria-label": open ? "Collapse section" : "Expand section",
+                onClick: handleChevronClick,
+                ...slot(sidebarAnatomy, "group-trigger"),
+                className: cn(
+                  "ml-px inline-flex size-7 shrink-0 items-center justify-center rounded-md",
+                  "text-fg-4 hover:bg-bg-3 hover:text-fg-2",
+                  "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+                  "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+                  "[&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:transition-transform [&_svg]:duration-[var(--duration-fast)] [&_svg]:ease-[var(--ease-out-quart)] motion-reduce:[&_svg]:transition-none",
+                  // Hide in rail — content tree is hidden too, so the
+                  // affordance has nothing to control.
+                  "group-data-[labels=hide]/sidebar:hidden"
+                ),
+                children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: open ? "" : "-rotate-90" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            CollapsibleContent,
+            {
+              id: contentId,
+              ...slot(sidebarAnatomy, "group-content"),
+              className: cn(
+                // Indent column + connecting rule. Children render as
+                // standard <SidebarLink>s and keep their own active-rail
+                // indicator, which lands flush at the indented column's
+                // left edge.
+                "group-data-[labels=hide]/sidebar:hidden"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "border-rule mt-px ml-[18px] border-l pl-2", children })
+            }
+          )
+        ] })
+      }
+    );
   }
 );
 SidebarLinkGroup.displayName = "SidebarLinkGroup";
@@ -14506,6 +15401,7 @@ var SidebarFooter = React39.forwardRef(
       "div",
       {
         ref,
+        ...slot(sidebarAnatomy, "footer"),
         className: cn(
           "border-rule mt-auto flex items-center gap-2.5 border-t px-2 pt-2.5 pb-1",
           "text-fg-3 text-xs",
@@ -14518,24 +15414,47 @@ var SidebarFooter = React39.forwardRef(
 );
 SidebarFooter.displayName = "SidebarFooter";
 var SidebarUser = React39.forwardRef(function SidebarUser2({ name, subtitle, avatarSrc, className, ...props }, ref) {
-  return /* @__PURE__ */ jsxs("div", { ref, className: cn("flex min-w-0 items-center gap-2.5", className), ...props, children: [
-    /* @__PURE__ */ jsx(Avatar, { size: "sm", variant: "branded", name, src: avatarSrc ?? void 0 }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cn(
-          "min-w-0 leading-tight",
-          "transition-[opacity,max-width] duration-[180ms] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
-          "max-w-full opacity-100",
-          "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
-        ),
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "text-fg line-clamp-1 text-[13px] font-medium", children: name }),
-          subtitle != null && /* @__PURE__ */ jsx("div", { className: "text-fg-4 line-clamp-1 font-mono text-[10.5px]", children: subtitle })
-        ]
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      ...slot(sidebarAnatomy, "user"),
+      className: cn("flex min-w-0 items-center gap-2.5", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Avatar, { size: "sm", variant: "branded", name, src: avatarSrc ?? void 0 }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "min-w-0 leading-tight",
+              "transition-[opacity,max-width] duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
+              "max-w-full opacity-100",
+              "group-data-[labels=hide]/sidebar:max-w-0 group-data-[labels=hide]/sidebar:opacity-0 group-data-[labels=hide]/sidebar:invisible"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...slot(sidebarAnatomy, "user-name"),
+                  className: "text-fg line-clamp-1 text-[13px] font-medium",
+                  children: name
+                }
+              ),
+              subtitle != null && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ...slot(sidebarAnatomy, "user-subtitle"),
+                  className: "text-fg-4 line-clamp-1 font-mono text-[10.5px]",
+                  children: subtitle
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 });
 SidebarUser.displayName = "SidebarUser";
 var SidebarBrandSwitcher = React39.forwardRef(
@@ -14572,6 +15491,7 @@ var SidebarBrandSwitcher = React39.forwardRef(
         "div",
         {
           ref,
+          ...slot(sidebarBrandSwitcherAnatomy, "root"),
           className: cn("flex min-w-0 items-center gap-2 px-2.5 pt-1 pb-4", className),
           children: [
             /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
@@ -14579,6 +15499,7 @@ var SidebarBrandSwitcher = React39.forwardRef(
                 DropdownMenuTrigger,
                 {
                   "aria-label": triggerLabel,
+                  ...slot(sidebarBrandSwitcherAnatomy, "trigger"),
                   className: cn(
                     // Negative left margin pulls the trigger's hover-bg toward
                     // the column edge while the inner padding holds the brand
@@ -14596,6 +15517,7 @@ var SidebarBrandSwitcher = React39.forwardRef(
                     /* @__PURE__ */ jsx(
                       ChevronDownIcon,
                       {
+                        ...slot(sidebarBrandSwitcherAnatomy, "icon"),
                         className: cn(
                           "ml-auto size-3.5 shrink-0 text-fg-4",
                           "transition-transform duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
@@ -15150,6 +16072,7 @@ var DataTable = forwardRef(function DataTable2({ withToolbar, className, childre
     {
       ref,
       "data-with-toolbar": withToolbar ? "true" : void 0,
+      ...slot(dataTableAnatomy, "root"),
       className: cn(
         // Outer frame on the whole component: a single visible border +
         // quiet shadow wrapping the toolbar (if any) and the table as one
@@ -15171,6 +16094,7 @@ var DataTableToolbar = forwardRef(
       "div",
       {
         ref,
+        ...slot(dataTableAnatomy, "toolbar"),
         className: cn(
           "flex items-center gap-2 px-3 py-2.5",
           "border-rule bg-surface border-b",
@@ -15201,7 +16125,16 @@ var DataTableSearch = forwardRef(
 DataTableSearch.displayName = "DataTableSearch";
 var DataTableSpacer = forwardRef(
   function DataTableSpacer2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("span", { ref, "aria-hidden": "true", className: cn("flex-1", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "aria-hidden": "true",
+        ...slot(dataTableAnatomy, "spacer"),
+        className: cn("flex-1", className),
+        ...props
+      }
+    );
   }
 );
 DataTableSpacer.displayName = "DataTableSpacer";
@@ -15211,7 +16144,11 @@ var DataTableResultsCount = forwardRef(
       "span",
       {
         ref,
-        className: cn("text-fg-4 mr-1 font-sans text-[11px] tabular-nums", className),
+        ...slot(dataTableAnatomy, "results-count"),
+        className: cn(
+          "text-fg-4 mr-1 shrink-0 font-sans text-[11px] whitespace-nowrap tabular-nums",
+          className
+        ),
         ...props,
         children: [
           current.toLocaleString(),
@@ -15225,13 +16162,29 @@ var DataTableResultsCount = forwardRef(
 DataTableResultsCount.displayName = "DataTableResultsCount";
 var DataTableHead = forwardRef(
   function DataTableHead2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("thead", { ref, className: cn("[&_tr]:border-rule [&_tr]:border-b", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "thead",
+      {
+        ref,
+        ...slot(dataTableAnatomy, "header"),
+        className: cn("[&_tr]:border-rule [&_tr]:border-b", className),
+        ...props
+      }
+    );
   }
 );
 DataTableHead.displayName = "DataTableHead";
 var DataTableBody = forwardRef(
   function DataTableBody2({ className, ...props }, ref) {
-    return /* @__PURE__ */ jsx("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
+    return /* @__PURE__ */ jsx(
+      "tbody",
+      {
+        ref,
+        ...slot(dataTableAnatomy, "body"),
+        className: cn("[&_tr:last-child]:border-0", className),
+        ...props
+      }
+    );
   }
 );
 DataTableBody.displayName = "DataTableBody";
@@ -15242,8 +16195,10 @@ var DataTableRow = forwardRef(
       {
         ref,
         "data-state": selected ? "selected" : void 0,
+        ...slot(dataTableAnatomy, "row"),
         className: cn(
-          "border-rule-soft border-b transition-colors duration-[var(--duration-instant)] ease-[var(--ease-out-quart)] motion-reduce:transition-none",
+          "border-rule-soft border-b",
+          microInteractions.selection,
           // Selected hover stays in the brand tint (G15) — when both states fire,
           // hover:bg-bg-2 was previously winning and dropping the row out of
           // the selected tint, which read as the row deselecting on hover.
@@ -15281,6 +16236,7 @@ var DataTableHeader = forwardRef(
       "span",
       {
         "aria-hidden": "true",
+        ...slot(dataTableAnatomy, "head-indicator"),
         className: cn(
           "text-fg-5 ml-1 inline-flex shrink-0 items-center justify-center",
           currentSort && "text-fg-3"
@@ -15295,6 +16251,8 @@ var DataTableHeader = forwardRef(
         ref,
         scope: "col",
         "aria-sort": ariaSort,
+        ...slot(dataTableAnatomy, "head"),
+        ...stateAttributes({ state: currentSort ?? void 0 }),
         className: cn(
           "h-11 px-4 py-2.5 text-left align-middle whitespace-nowrap",
           "font-sans text-[14px] font-medium tracking-normal normal-case",
@@ -15309,6 +16267,7 @@ var DataTableHeader = forwardRef(
           {
             type: "button",
             onClick: handleClick,
+            ...slot(dataTableAnatomy, "head-button"),
             className: cn(
               "-mx-1 -my-1 inline-flex items-center gap-1 rounded-[4px] px-1 py-1",
               "font-sans text-[14px] font-medium tracking-normal normal-case",
@@ -15334,6 +16293,7 @@ var DataTableCell = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
         className: cn(
           cellBase,
           "text-fg-2 text-[13px]",
@@ -15352,6 +16312,8 @@ var DataTableCellName = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "name" }),
         className: cn(cellBase, "font-display text-fg text-[13px] font-medium", className),
         ...props
       }
@@ -15365,6 +16327,8 @@ var DataTableCellMono = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "mono" }),
         className: cn(cellBase, "font-sans text-fg-2 text-[13px] tabular-nums", className),
         style,
         ...props
@@ -15379,6 +16343,8 @@ var DataTableCellId = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "id" }),
         className: cn(cellBase, "font-sans text-fg-4 text-xs tabular-nums", className),
         style,
         ...props
@@ -15404,6 +16370,8 @@ var DataTableCellDue = forwardRef(
       {
         ref,
         "data-due-state": ariaState,
+        ...slot(dataTableAnatomy, "cell"),
+        ...stateAttributes({ variant: "due" }),
         className: cn(cellBase, "font-sans text-[13px] tabular-nums", tone, className),
         style,
         ...props,
@@ -15429,6 +16397,7 @@ var DataTableCheckbox = forwardRef(
       Cell,
       {
         ref,
+        ...slot(dataTableAnatomy, "checkbox-cell"),
         className: cn(
           "w-8 px-4 py-3 pr-0 align-middle",
           asHeader && "bg-surface-2 border-rule h-11 border-b",
@@ -16794,7 +17763,7 @@ var MessageBubble = forwardRef(function MessageBubble2({ avatar, name, timestamp
           "span",
           {
             className: cn(
-              "ml-auto opacity-0 transition-opacity",
+              "ml-auto opacity-0 transition-opacity motion-reduce:transition-none",
               "group-hover/bubble:opacity-100 group-focus-within/bubble:opacity-100"
             ),
             children: actions
@@ -16904,7 +17873,7 @@ var MessageComposer = forwardRef(
         className: cn(
           "relative flex flex-col",
           "border-rule bg-input-background rounded-xl border",
-          "transition-shadow duration-150",
+          "transition-shadow duration-[var(--motion-duration-feedback)] motion-reduce:transition-none",
           "focus-within:border-accent-ring focus-within:bg-surface focus-within:shadow-sm",
           isDisabled && "pointer-events-none opacity-60",
           className
@@ -16923,7 +17892,7 @@ var MessageComposer = forwardRef(
                 "div",
                 {
                   "aria-hidden": "true",
-                  className: "bg-bg-3 h-6 w-20 shrink-0 animate-pulse rounded-full"
+                  className: "bg-bg-3 h-6 w-20 shrink-0 animate-pulse rounded-full motion-reduce:animate-none"
                 },
                 i
               )) : chips.map((chip) => /* @__PURE__ */ jsx(
@@ -16935,7 +17904,7 @@ var MessageComposer = forwardRef(
                   className: cn(
                     "inline-flex h-6 shrink-0 items-center rounded-full px-2.5",
                     "text-[11px] font-medium text-fg-2",
-                    "bg-bg-2 transition-colors hover:bg-bg-3 hover:text-fg",
+                    "bg-bg-2 transition-colors hover:bg-bg-3 hover:text-fg motion-reduce:transition-none",
                     "focus-visible:outline-none focus-visible:[box-shadow:var(--shadow-focus-ring)]"
                   ),
                   children: chip.label
@@ -16953,17 +17922,16 @@ var MessageComposer = forwardRef(
               className: "flex shrink-0 items-center justify-between gap-2 px-2 pb-1.5 pt-1",
               children: [
                 /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: startSlot }),
-                /* @__PURE__ */ jsxs(
+                /* @__PURE__ */ jsx(
                   Button,
                   {
                     size: "sm",
                     disabled: isSubmitDisabled,
+                    loading: submitting,
+                    iconLeft: /* @__PURE__ */ jsx(SendIcon, { size: 14, "aria-hidden": "true" }),
                     onClick: onSubmit,
                     className: "gap-1.5",
-                    children: [
-                      /* @__PURE__ */ jsx(SendIcon, { size: 14, "aria-hidden": "true" }),
-                      submitting ? submittingLabel : submitLabel
-                    ]
+                    children: submitting ? submittingLabel : submitLabel
                   }
                 )
               ]
@@ -18001,15 +18969,15 @@ function SuggestionPills({
     "div",
     {
       className: cn(
-        "ds-suggestion-bar flex items-center gap-2 overflow-x-auto border-t border-border/60 bg-gradient-to-b from-brand-soft/40 to-transparent px-4 py-2.5 [scrollbar-width:none]",
+        "ds-suggestion-bar flex items-center gap-2 overflow-x-auto border-t border-rule/60 bg-gradient-to-b from-brand-bg/40 to-transparent px-4 py-2.5 motion-reduce:animate-none [scrollbar-width:none]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-[11px] font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 text-[11px] font-medium text-fg-3", children: [
           /* @__PURE__ */ jsx(SparkleIcon, { className: "ds-suggestion-spark size-3.5 text-brand", "aria-hidden": "true" }),
           label
         ] }),
-        loading ? [0, 1].map((i) => /* @__PURE__ */ jsx("span", { className: "h-7 w-32 shrink-0 animate-pulse rounded-full bg-muted" }, i)) : suggestions.map((text, i) => /* @__PURE__ */ jsx(
+        loading ? [0, 1].map((i) => /* @__PURE__ */ jsx("span", { className: "h-7 w-32 shrink-0 animate-pulse rounded-full bg-bg-2 motion-reduce:animate-none" }, i)) : suggestions.map((text, i) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -18017,10 +18985,10 @@ function SuggestionPills({
             title: text,
             style: { animationDelay: `${i * 110}ms` },
             className: cn(
-              "ds-suggestion-pill max-w-[260px] shrink-0 truncate whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[12px] font-medium",
-              "border-brand/30 bg-brand-soft text-brand-soft-foreground shadow-[0_1px_6px_rgba(108,66,248,0.14)]",
-              "transition-all hover:-translate-y-0.5 hover:border-brand/50 hover:bg-brand/10 hover:shadow-[0_3px_10px_rgba(108,66,248,0.22)]",
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+              "ds-suggestion-pill max-w-[260px] shrink-0 truncate whitespace-nowrap rounded-full border px-3.5 py-1.5 text-[12px] font-medium motion-reduce:animate-none",
+              "border-brand/30 bg-brand-bg text-brand shadow-quiet",
+              "transition-[color,background-color,border-color,box-shadow,transform] duration-[var(--duration-fast)] ease-[var(--ease-out-quart)] hover:-translate-y-0.5 hover:border-brand/50 hover:bg-brand-bg-hover hover:shadow-card motion-reduce:transform-none motion-reduce:transition-none",
+              "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none"
             ),
             children: text
           },
@@ -18068,10 +19036,10 @@ function AiDraftCard({
     ] });
   }
   if (state === "error") {
-    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-destructive/20 bg-destructive/5 p-3", className), children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs text-destructive", children: error ?? "Something went wrong." }),
+    return /* @__PURE__ */ jsxs("div", { className: cn("rounded-lg border border-danger-line bg-danger-bg p-3", className), children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-danger-fg", children: error ?? "Something went wrong." }),
       (onRetry || onDismiss) && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex gap-2", children: [
-        onRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, className: "text-destructive", children: "Retry" }),
+        onRetry && /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, className: "text-danger-fg", children: "Retry" }),
         onDismiss && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onDismiss, children: "Dismiss" })
       ] })
     ] });
@@ -18080,7 +19048,7 @@ function AiDraftCard({
     /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", !collapsed && "mb-2"), children: [
       /* @__PURE__ */ jsx(SparkleIcon, { size: 14, className: "text-brand" }),
       /* @__PURE__ */ jsx("span", { className: "text-xs font-bold text-brand", children: title }),
-      contextLine && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: contextLine }),
+      contextLine && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-fg-3", children: contextLine }),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -18089,14 +19057,23 @@ function AiDraftCard({
           "aria-expanded": !collapsed,
           "aria-label": collapsed ? "Expand AI draft" : "Collapse AI draft",
           title: collapsed ? "Show draft" : "Hide draft",
-          className: "ml-auto -mr-1 shrink-0 rounded p-1 text-brand/70 transition-colors hover:bg-brand/10 hover:text-brand focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, className: cn("transition-transform", collapsed && "-rotate-90") })
+          className: "ml-auto -mr-1 shrink-0 rounded p-1 text-brand/70 transition-colors hover:bg-brand-bg hover:text-brand focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none motion-reduce:transition-none",
+          children: /* @__PURE__ */ jsx(ChevronDownIcon, { size: 16, className: cn("transition-transform motion-reduce:transition-none", collapsed && "-rotate-90") })
         }
       )
     ] }),
     !collapsed && /* @__PURE__ */ jsxs(Fragment, { children: [
-      subject && /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-sm font-semibold text-foreground", children: subject }),
-      /* @__PURE__ */ jsx("div", { className: "max-h-[140px] overflow-y-auto text-sm font-medium leading-relaxed text-foreground", children }),
+      subject && /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-sm font-semibold text-fg", children: subject }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "region",
+          "aria-label": `${title} content`,
+          tabIndex: 0,
+          className: "max-h-[140px] overflow-y-auto text-sm font-medium leading-relaxed text-fg focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
+          children
+        }
+      ),
       actions && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2", children: actions })
     ] })
   ] });
@@ -18138,36 +19115,36 @@ function EmailMessageCard({
         !isOutbound && avatar && /* @__PURE__ */ jsx("span", { className: "mt-7 shrink-0", children: avatar }),
         /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-col gap-1", isOutbound ? "items-end" : "items-start"), children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-foreground", children: senderName }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-muted-foreground", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-fg", children: senderName }),
+            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-fg-3", children: [
               "via ",
               via
             ] }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: "\xB7" }),
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-muted-foreground", children: time })
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-fg-3", children: "\xB7" }),
+            /* @__PURE__ */ jsx("span", { className: "text-[10px] text-fg-3", children: time })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
             {
               className: cn(
-                "w-full max-w-2xl overflow-hidden rounded-xl border bg-card shadow-sm",
-                isOutbound ? "border-brand/30" : "border-border"
+                "w-full max-w-2xl overflow-hidden rounded-xl border bg-surface shadow-sm",
+                isOutbound ? "border-brand/30" : "border-rule"
               ),
               children: [
-                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 border-b border-border bg-brand/5 px-3.5 py-2.5", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 border-b border-rule bg-brand-bg px-3.5 py-2.5", children: [
                   /* @__PURE__ */ jsx("span", { className: "flex size-8 shrink-0 items-center justify-center rounded-lg border border-brand/20 bg-brand/10 text-brand", children: /* @__PURE__ */ jsx(MailIcon, { size: 16 }) }),
                   /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
                     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                       /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded px-1.5 py-px text-[10px] font-bold uppercase tracking-wider text-brand", children: "Email" }),
-                      subjectText && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-semibold text-foreground", children: subjectText })
+                      subjectText && /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-sm font-semibold text-fg", children: subjectText })
                     ] }),
-                    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1.5 text-[10px] text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex flex-wrap items-center gap-1.5 text-[10px] text-fg-3", children: [
                       /* @__PURE__ */ jsxs("span", { children: [
                         "From ",
-                        /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground/80", children: senderName })
+                        /* @__PURE__ */ jsx("span", { className: "font-medium text-fg/80", children: senderName })
                       ] }),
                       ccCount > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/60", children: "\xB7" }),
+                        /* @__PURE__ */ jsx("span", { className: "text-fg-3/60", children: "\xB7" }),
                         /* @__PURE__ */ jsxs("span", { children: [
                           "Cc ",
                           ccCount
@@ -18175,7 +19152,7 @@ function EmailMessageCard({
                       ] })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-[10px] text-muted-foreground", children: time })
+                  /* @__PURE__ */ jsx("span", { className: "shrink-0 whitespace-nowrap pt-0.5 text-[10px] text-fg-3", children: time })
                 ] }),
                 /* @__PURE__ */ jsxs("div", { className: "relative", children: [
                   /* @__PURE__ */ jsx(
@@ -18183,13 +19160,13 @@ function EmailMessageCard({
                     {
                       ref: bodyRef,
                       className: cn(
-                        "px-4 py-3 text-sm leading-relaxed text-foreground",
+                        "px-4 py-3 text-sm leading-relaxed text-fg",
                         clamped && "max-h-56 overflow-hidden"
                       ),
                       children
                     }
                   ),
-                  clamped && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-b from-transparent to-card" })
+                  clamped && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-14 bg-gradient-to-b from-transparent to-surface" })
                 ] }),
                 needsClamp && /* @__PURE__ */ jsxs(
                   "button",
@@ -18197,14 +19174,14 @@ function EmailMessageCard({
                     type: "button",
                     onClick: () => setExpanded((v) => !v),
                     "aria-expanded": expanded,
-                    className: "flex w-full items-center justify-center gap-1.5 border-t border-border/60 bg-card py-1.5 text-xs font-medium text-brand transition-colors hover:bg-muted/40",
+                    className: "flex w-full items-center justify-center gap-1.5 border-t border-rule/60 bg-surface py-1.5 text-xs font-medium text-brand transition-colors hover:bg-bg-2/40 motion-reduce:transition-none",
                     children: [
                       expanded ? "Show less" : "Show full email",
-                      /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("transition-transform", expanded && "rotate-180") })
+                      /* @__PURE__ */ jsx(ChevronDownIcon, { size: 13, className: cn("transition-transform motion-reduce:transition-none", expanded && "rotate-180") })
                     ]
                   }
                 ),
-                hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-border bg-muted/30 px-3 py-2", children: [
+                hasFooter && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2 border-t border-rule bg-bg-2/30 px-3 py-2", children: [
                   /* @__PURE__ */ jsx("div", { className: "min-w-0", children: attachments }),
                   /* @__PURE__ */ jsxs("div", { className: "ml-auto flex items-center gap-2", children: [
                     status,
@@ -18232,8 +19209,8 @@ function SignatureEditor({
   className
 }) {
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-border px-3 py-2", children: [
-      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-foreground", children: title }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-rule px-3 py-2", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-fg", children: title }),
       onAddImage && /* @__PURE__ */ jsxs(
         Button,
         {
@@ -18251,8 +19228,8 @@ function SignatureEditor({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-3", children: loading ? /* @__PURE__ */ jsx("div", { className: "h-32 animate-pulse rounded-md bg-muted" }) : children }),
-    (onSave || onInsert) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-border px-3 py-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "p-3", children: loading ? /* @__PURE__ */ jsx("div", { className: "h-32 animate-pulse rounded-md bg-bg-2 motion-reduce:animate-none" }) : children }),
+    (onSave || onInsert) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 border-t border-rule px-3 py-2", children: [
       onSave && /* @__PURE__ */ jsx(
         Button,
         {
@@ -18400,7 +19377,7 @@ function DisplayMenu({
             showDot && /* @__PURE__ */ jsx(
               "span",
               {
-                className: "absolute -right-1 -top-1 size-2 rounded-full bg-foreground",
+                className: "absolute -right-1 -top-1 size-2 rounded-full bg-fg",
                 "aria-hidden": "true"
               }
             )
@@ -18424,8 +19401,8 @@ function DisplayMenu({
           }
         },
         children: /* @__PURE__ */ jsxs("div", { ref: panelRef, className: "relative", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-border px-2.5 py-1.5", children: [
-            /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 border-b border-rule px-2.5 py-1.5", children: [
+            /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-fg-3", "aria-hidden": "true" }),
             /* @__PURE__ */ jsx(
               "input",
               {
@@ -18434,7 +19411,7 @@ function DisplayMenu({
                 onChange: (e) => setRootQuery(e.target.value),
                 placeholder: "Filter\u2026",
                 "aria-label": "Filter options and values",
-                className: "h-6 w-full bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
+                className: "h-6 w-full bg-transparent text-[13px] text-fg outline-none placeholder:text-fg-3"
               }
             )
           ] }),
@@ -18460,19 +19437,19 @@ function DisplayMenu({
                         setOpenKey(null);
                       },
                       onClick: () => section2.onSelect(option.key),
-                      className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
+                      className: "flex w-full items-center gap-1.5 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-bg-2/60 focus-visible:bg-bg-2/60 focus-visible:outline-none motion-reduce:transition-none",
                       children: [
-                        section2.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section2.icon }),
-                        /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-muted-foreground", children: section2.label }),
+                        section2.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-3", "aria-hidden": "true", children: section2.icon }),
+                        /* @__PURE__ */ jsx("span", { className: "shrink-0 truncate text-fg-3", children: section2.label }),
                         /* @__PURE__ */ jsx(
                           ChevronRightIcon,
                           {
                             size: 12,
-                            className: "shrink-0 text-muted-foreground",
+                            className: "shrink-0 text-fg-3",
                             "aria-hidden": "true"
                           }
                         ),
-                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-foreground", children: option.label }),
+                        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-fg", children: option.label }),
                         isActive && /* @__PURE__ */ jsx(CheckIcon, { size: 14, className: "shrink-0 text-brand" })
                       ]
                     },
@@ -18519,15 +19496,15 @@ function DisplayMenu({
                               }
                             },
                             className: cn(
-                              "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-foreground transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
-                              isOpen && "bg-muted/60"
+                              "flex min-w-0 flex-1 items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] text-fg transition-colors hover:bg-bg-2/60 focus-visible:bg-bg-2/60 focus-visible:outline-none motion-reduce:transition-none",
+                              isOpen && "bg-bg-2/60"
                             ),
                             children: [
-                              section.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground", "aria-hidden": "true", children: section.icon }),
+                              section.icon && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-fg-3", "aria-hidden": "true", children: section.icon }),
                               /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: section.label }),
                               section.mode === "multi" && count > 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 rounded-full bg-brand-bg px-1.5 text-[11px] font-medium text-brand", children: count }),
-                              section.mode !== "multi" && valueLabel && /* @__PURE__ */ jsx("span", { className: "max-w-24 shrink-0 truncate text-[13px] text-muted-foreground", children: valueLabel }),
-                              /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, className: "shrink-0 text-muted-foreground" })
+                              section.mode !== "multi" && valueLabel && /* @__PURE__ */ jsx("span", { className: "max-w-24 shrink-0 truncate text-[13px] text-fg-3", children: valueLabel }),
+                              /* @__PURE__ */ jsx(ChevronRightIcon, { size: 13, className: "shrink-0 text-fg-3" })
                             ]
                           }
                         ),
@@ -18540,14 +19517,14 @@ function DisplayMenu({
               })
             }
           ),
-          /* @__PURE__ */ jsx("div", { className: "border-t border-border p-1", children: /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx("div", { className: "border-t border-rule p-1", children: /* @__PURE__ */ jsxs(
             Button,
             {
               variant: "ghost",
               size: "sm",
               onClick: onReset,
               disabled: isAtDefault,
-              className: "h-7 w-full justify-start gap-1.5 px-2 text-xs text-muted-foreground hover:text-foreground",
+              className: "h-7 w-full justify-start gap-1.5 px-2 text-xs text-fg-3 hover:text-fg",
               children: [
                 /* @__PURE__ */ jsx(RotateCcwIcon, { size: 13 }),
                 "Reset to default"
@@ -18566,7 +19543,7 @@ function DisplayMenu({
                 // Column + overflow-hidden so the option list (the only flexible
                 // part) absorbs the height cap, while the search box and Clear
                 // footer stay pinned and fully visible.
-                "absolute z-50 flex flex-col overflow-hidden rounded-lg border border-border bg-popover shadow-md",
+                "absolute z-50 flex flex-col overflow-hidden rounded-lg border border-rule bg-surface shadow-md motion-reduce:transition-none",
                 // -mx-1 lets the flyout tuck against the panel so there's no
                 // dead gap for the cursor to fall through on the way over.
                 flyout.side === "left" ? "right-full -mr-1" : "left-full -ml-1"
@@ -18574,8 +19551,8 @@ function DisplayMenu({
               onMouseEnter: clearTimers,
               onMouseLeave: scheduleClose,
               children: [
-                showFlyoutSearch && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-border px-2.5 py-1.5", children: [
-                  /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-muted-foreground", "aria-hidden": "true" }),
+                showFlyoutSearch && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1.5 border-b border-rule px-2.5 py-1.5", children: [
+                  /* @__PURE__ */ jsx(SearchIcon, { size: 13, className: "shrink-0 text-fg-3", "aria-hidden": "true" }),
                   /* @__PURE__ */ jsx(
                     "input",
                     {
@@ -18584,7 +19561,7 @@ function DisplayMenu({
                       onChange: (e) => setSectionQuery(e.target.value),
                       placeholder: `Filter ${activeSection.label.toLowerCase()}\u2026`,
                       "aria-label": `Filter ${activeSection.label}`,
-                      className: "h-6 w-full bg-transparent text-[13px] text-foreground outline-none placeholder:text-muted-foreground"
+                      className: "h-6 w-full bg-transparent text-[13px] text-fg outline-none placeholder:text-fg-3"
                     }
                   )
                 ] }),
@@ -18619,8 +19596,8 @@ function DisplayMenu({
                         }
                       },
                       className: cn(
-                        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-muted/60 focus-visible:bg-muted/60 focus-visible:outline-none",
-                        isActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
+                        "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-[13px] transition-colors hover:bg-bg-2/60 focus-visible:bg-bg-2/60 focus-visible:outline-none motion-reduce:transition-none",
+                        isActive ? "text-fg" : "text-fg-3 hover:text-fg"
                       ),
                       children: [
                         isMulti && /* @__PURE__ */ jsx(
@@ -18629,7 +19606,7 @@ function DisplayMenu({
                             "aria-hidden": "true",
                             className: cn(
                               "flex size-3.5 shrink-0 items-center justify-center rounded border transition-colors",
-                              isActive ? "border-brand bg-brand text-fg-on-brand" : "border-border"
+                              isActive ? "border-brand bg-brand text-fg-on-brand" : "border-rule"
                             ),
                             children: isActive && /* @__PURE__ */ jsx(CheckIcon, { size: 10 })
                           }
@@ -18641,13 +19618,13 @@ function DisplayMenu({
                     option.key
                   );
                 }) }),
-                activeSection.mode === "multi" && activeSection.selected.size > 0 && activeSection.onClear && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border p-1", children: /* @__PURE__ */ jsxs(
+                activeSection.mode === "multi" && activeSection.selected.size > 0 && activeSection.onClear && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-rule p-1", children: /* @__PURE__ */ jsxs(
                   Button,
                   {
                     variant: "ghost",
                     size: "sm",
                     onClick: activeSection.onClear,
-                    className: "h-6 w-full justify-start px-2 text-[11px] text-muted-foreground hover:text-foreground",
+                    className: "h-6 w-full justify-start px-2 text-[11px] text-fg-3 hover:text-fg",
                     children: [
                       "Clear ",
                       activeSection.selected.size,
@@ -18664,8 +19641,168 @@ function DisplayMenu({
   ] });
 }
 function EmptyRow({ label = "No matches" }) {
-  return /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-[11px] text-muted-foreground", children: label });
+  return /* @__PURE__ */ jsx("p", { className: "px-2 py-3 text-center text-[11px] text-fg-3", children: label });
+}
+var StickyStackContext = React39.createContext(null);
+function StickyStack({ layers, top = 0, children }) {
+  const [layerHeights, setLayerHeights] = React39.useState({});
+  const normalizedLayers = React39.useMemo(() => {
+    const names = [...layers];
+    if (new Set(names).size !== names.length) {
+      throw new Error("StickyStack layer names must be unique.");
+    }
+    return names;
+  }, [layers]);
+  const setLayerHeight = React39.useCallback((name, height) => {
+    setLayerHeights((current) => {
+      if (current[name] === height) return current;
+      return { ...current, [name]: height };
+    });
+  }, []);
+  const value = React39.useMemo(
+    () => ({ layers: normalizedLayers, layerHeights, setLayerHeight, top }),
+    [layerHeights, normalizedLayers, setLayerHeight, top]
+  );
+  return /* @__PURE__ */ jsx(StickyStackContext, { value, children });
 }
+function useStickyStack(componentName) {
+  const context = React39.use(StickyStackContext);
+  if (!context) {
+    throw new Error(`${componentName} must be rendered inside StickyStack.`);
+  }
+  return context;
+}
+function cssLength(value) {
+  return typeof value === "number" ? `${value}px` : value ?? "0px";
+}
+function stackOffset(context, layerName, includeNamedLayer) {
+  const { layers, layerHeights, top } = context;
+  let endIndex = layers.length;
+  if (layerName !== void 0) {
+    const index = layers.indexOf(layerName);
+    if (index === -1) {
+      throw new Error(`Unknown StickyStack layer "${layerName}".`);
+    }
+    endIndex = includeNamedLayer ? index + 1 : index;
+  }
+  const measuredOffset = layers.slice(0, endIndex).reduce((total, name) => total + (layerHeights[name] ?? 0), 0);
+  const base = cssLength(top);
+  return measuredOffset === 0 ? base : `calc(${base} + ${measuredOffset}px)`;
+}
+var StickyStackLayer = React39.forwardRef(
+  function StickyStackLayer2({ name, hostClassName, className, children, style, ...props }, forwardedRef) {
+    const context = useStickyStack("StickyStackLayer");
+    const { setLayerHeight } = context;
+    const top = stackOffset(context, name, false);
+    const hostRef = React39.useRef(null);
+    const layerRef = React39.useRef(null);
+    const [bounds, setBounds] = React39.useState({
+      height: 0,
+      left: 0,
+      ready: false,
+      width: 0
+    });
+    const setLayerRef = React39.useCallback(
+      (node) => {
+        layerRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    const measure = React39.useCallback(() => {
+      const host = hostRef.current;
+      const layer = layerRef.current;
+      if (!host || !layer) return;
+      const hostRect = host.getBoundingClientRect();
+      const layerRect = layer.getBoundingClientRect();
+      const next = {
+        height: Math.ceil(layerRect.height),
+        left: hostRect.left,
+        ready: hostRect.width > 0,
+        width: hostRect.width
+      };
+      setBounds(
+        (current) => current.height === next.height && current.left === next.left && current.ready === next.ready && current.width === next.width ? current : next
+      );
+      setLayerHeight(name, next.height);
+    }, [name, setLayerHeight]);
+    React39.useLayoutEffect(() => {
+      measure();
+      let frame = 0;
+      const scheduleMeasure = () => {
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(measure);
+      };
+      const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(scheduleMeasure);
+      if (hostRef.current) observer?.observe(hostRef.current);
+      if (layerRef.current) observer?.observe(layerRef.current);
+      window.addEventListener("resize", scheduleMeasure);
+      window.addEventListener("scroll", scheduleMeasure, true);
+      return () => {
+        cancelAnimationFrame(frame);
+        observer?.disconnect();
+        window.removeEventListener("resize", scheduleMeasure);
+        window.removeEventListener("scroll", scheduleMeasure, true);
+        setLayerHeight(name, 0);
+      };
+    }, [measure, name, setLayerHeight]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: hostRef,
+        className: cn("relative", hostClassName),
+        style: { height: bounds.ready ? bounds.height : void 0 },
+        "data-sticky-stack-host": name,
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: setLayerRef,
+            className,
+            style: {
+              ...style,
+              position: bounds.ready ? "fixed" : "sticky",
+              top,
+              left: bounds.ready ? bounds.left : void 0,
+              width: bounds.ready ? bounds.width : void 0,
+              boxSizing: "border-box",
+              zIndex: style?.zIndex ?? "var(--z-sticky)"
+            },
+            "data-sticky-stack-layer": name,
+            ...props,
+            children
+          }
+        )
+      }
+    );
+  }
+);
+StickyStackLayer.displayName = "StickyStackLayer";
+var StickyStackSticky = React39.forwardRef(
+  function StickyStackSticky2({ after, className, style, ...props }, ref) {
+    const context = useStickyStack("StickyStackSticky");
+    const top = stackOffset(context, after, true);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("sticky", className),
+        style: {
+          ...style,
+          top,
+          zIndex: style?.zIndex ?? "calc(var(--z-sticky) - 1)"
+        },
+        "data-sticky-stack-sticky": "",
+        ...props
+      }
+    );
+  }
+);
+StickyStackSticky.displayName = "StickyStackSticky";
+var StickyStackSectionHeader = React39.forwardRef(function StickyStackSectionHeader2(props, ref) {
+  return /* @__PURE__ */ jsx(StickyStackSticky, { ref, "data-sticky-stack-section-header": "", ...props });
+});
+StickyStackSectionHeader.displayName = "StickyStackSectionHeader";
 function brandScope(product) {
   return { "data-brand": product };
 }
@@ -18691,6 +19828,6 @@ var BrandScope = forwardRef(function BrandScope2({ product, children, ...props }
 });
 BrandScope.displayName = "BrandScope";
 
-export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content16 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, serviceToneLabel, serviceToneStyle, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
+export { AIReceiptPanel, Accordion, AccordionContent, AccordionItem, AccordionTrigger, ActivityEventItem, ActivityItem, ActivityList, AgreementPaneHeading, AgreementViewer, AiDraftCard, Alert, AlertCircleIcon, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AlertTriangleIcon, AlertTriangleSolidIcon, AppHeader, AppHeaderActions, AppHeaderBreadcrumb, AppHeaderSearch, AppHeaderTitle, AreaChart, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightSmallIcon, ArrowUpIcon, AspectRatio, Assignee, AssureAuditBrandIcon, AssureBooksBrandIcon, AssureProBrandIcon, AssureTaxBrandIcon, AtSignIcon, AttachmentChip, AttentionItem, Avatar, BRAND_PRODUCTS, Badge, BarChartIcon, BellIcon, Blockquote, BoldIcon, BottomNav, BrandScope, BrandScopeProvider, Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BriefcaseIcon, Building2Icon, BuildingIcon, BulkActionBar, BulkActionBarAction, BulkActionBarSeparator, Button, COUNTRY_CODES, Calendar, CalendarIcon, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryDivider, CategoryTag, ChannelTabs, ChatBubbleIcon, CheckCircle2Icon, CheckCircleSolidIcon, CheckIcon, Checkbox, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsUpDownIcon, CircleDotIcon, CircleIcon, ClientRailGroupHeader, ClientRailItem, ClientSelect, ClipboardCheckIcon, ClockIcon, CloseIcon, Collapsible, CollapsibleContent, CollapsibleTrigger, ComingSoon, CommandIcon, CommandPalette, ConfirmActionButton, Content16 as Content, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyIcon, CornerDownLeftIcon, CountryFlag, CountrySelect, CreditCardIcon, DATE_DISPLAY_PLACEHOLDER, DangerAction, Dash, DashGrid, DataItem, DataTable, DataTableBody, DataTableCell, DataTableCellDue, DataTableCellId, DataTableCellMono, DataTableCellName, DataTableCheckbox, DataTableHead, DataTableHeader, DataTablePagination, DataTableResultsCount, DataTableRow, DataTableSearch, DataTableSpacer, DataTableToolbar, DataTableView, DatePicker, DateRangePicker, DetailGrid, DetailMain, DetailSpine, DetailSpineHeader, DetailSpineSection, DetailSpineStats, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DismissibleChip, DisplayMenu, DocumentChecklist, DocumentDetailActions, DocumentDetailBody, DocumentDetailHeader, DocumentDetailMetaRow, DocumentDetailPanel, DocumentDetailRequester, DocumentDetailTitle, DocumentFileCard, DocumentFileLine, DocumentFileRow, DocumentIcon, DocumentList, DocumentListSection, DocumentRequestCard, DocumentRequestDetail, DocumentRequestField, DocumentRequestUpload, DocumentRow, DocumentSourceFilter, DocumentSourceTag, DocumentsWorkspaceLayout, DollarSignIcon, DonutChart, DownloadIcon, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmailMessageCard, EmptyState, EngagementCard, EngagementTimeline, EngagementTimelineStep, ExtractIcon, EyeIcon, EyeOffIcon, Eyebrow, FileChip, FileIcon, FileReturnIcon, FileTextIcon, FileTypeBadge, FileUpload, FilterChip, FilterIcon, FlagIcon, FolderClosedIcon, FolderOpenIcon, FolderPlusIcon, FolderTree, FolderUpIcon, FormError, FormSection, FormSuccess, GlobeIcon, GoogleBrandIcon, Grid, HelpCircleIcon, HistoryIcon, HomeIcon, HoverCard, HoverCardContent, HoverCardPortal, HoverCardTrigger, IconAction, IconTile, InboxIcon, InfoCircleSolidIcon, InfoIcon, Input, IntentBadge, ItalicIcon, Kanban, KanbanCard, KanbanColumn, KanbanIcon, KbdHint, KeyIcon, KeyboardShortcutsDialog, KpiCard, Label4 as Label, LandmarkIcon, LayoutDashboardIcon, LayoutGridIcon, LayoutListIcon, LightningIcon, Link2Icon, LinkAction, LinkButton, LinkIcon, ListChecksIcon, ListIcon, ListOrderedIcon, LoaderIcon, LoadingRows, LockIcon, LockKeyholeIcon, LockOpenIcon, LogOutIcon, Logo, MailIcon, Main, MapPinIcon, MasterDetailLayout, MenuIcon, MessageBubble, MessageBubbleAction, MessageBubbleTombstone, MessageCircleIcon, MessageCircleWarningIcon, MessageComposer, MetadataGrid, MicrosoftBrandIcon, MinusIcon, MissingDocumentsPanel, MoneyCell, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoveIcon, MultiFilterPill, MultiSelectField, MutedSpec, NewMenu, NotificationFilter, NotificationItem, NotificationList, NotificationPanel, NotificationPanelFooter, NotificationPanelHeader, Numeric, OTPInput, PageHeader, PageHeaderSep, PageHeaderSpec, Pagination, PaletteIcon, PanelLeftCloseIcon, PanelLeftIcon, PaperclipIcon, PauseIcon, PdfPreview, PenSignIcon, PenToolIcon, PencilIcon, PhoneCountryInput, PhoneIcon, PhoneInput, PlayIcon, PlusIcon, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, PrimaryAction, PriorityIcon, ProgressBar, ProgressRing, ProposalAddOn, ProposalBillingTerms, ProposalConsentGate, ProposalCustomPage, ProposalNote, ProposalPackageCard, ProposalPaymentCapture, ProposalPricingSummary, ProposalServiceRow, ProposalSignatureBlock, ProposalSignerList, QuestionnairePanel, Questions, RadioGroup3 as RadioGroup, RadioGroupItem, RankedBars, ReceiptIcon, ReplyIcon, ResponsiveDialog, RotateCcwIcon, RouteTransition, SERVICE_TONES, SaveIcon, ScrollArea, ScrollBar, SearchIcon, SearchInput, SearchSelect, SecondaryAction, Section, SectionHead, SectionHeader, SegmentedProgress, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SelectableKpiCard, SendIcon, Separator4 as Separator, SettingsIcon, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Shell, ShieldIcon, SideDrawer, Sidebar, SidebarBrand, SidebarBrandSwitcher, SidebarBrandSwitcherTile, SidebarBrandText, SidebarFooter, SidebarLink, SidebarLinkAction, SidebarLinkBadge, SidebarLinkGroup, SidebarLinkLabel, SidebarPinButton, SidebarProvider, SidebarSection, SidebarTrigger, SidebarUser, SignatureEditor, Skeleton, SkeletonCircle, SkeletonText, SlashIcon, Slider, SmartphoneIcon, SparkleIcon, SparklesIcon, Spinner, SpreadsheetPreview, StackedBarChart, StagePill, StarIcon, StarRating, Stat, StatusDot, StatusIcon, StatusPill, Stepper, StickyActionBar, StickyStack, StickyStackLayer, StickyStackSectionHeader, StickyStackSticky, StopIcon, StrikethroughIcon, SubmitButton, SuggestionPills, SuiteProgress, SunIcon, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableIcon, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TagIcon, TagsCell, TeamIcon, TeamMemberSelect, Textarea, TimeLogger, TimeLoggerActions, TimeLoggerBillable, TimeLoggerContextRow, TimeLoggerEntry, TimeLoggerEntryList, TimeLoggerField, TimeLoggerFooter, TimeLoggerHeader, TimeLoggerNotes, TimeLoggerTimer, ToastProvider, ToggleGroup, ToggleGroupItem, Toolbar, Tooltip, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, Trash2Icon, TrashIcon, TrendingDownIcon, TrendingUpIcon, UnderlineIcon, UploadIcon, UserCircleIcon, UserIcon, UsersIcon, VisuallyHidden, WorkflowIcon, XCircleSolidIcon, XIcon, YEAR_DISPLAY_PLACEHOLDER, ZoomInIcon, ZoomOutIcon, alertVariants, applyMask, applyYearMask, attachmentChipVariants, badgeVariants, brandLabel, brandScope, buttonVariants, cardVariants, cn, colors, dateToIso, displayToIso, fileTypeBadgeVariants, fileTypeFromName, filterChipVariants, formatClock, formatCurrency, formatDuration, getFlagEmoji, iconTileVariants, inputVariants, isoToDate, isoToDisplay, isoToYear, labelVariants, parseDuration, parsePhoneForEditing, progressBarVariants, progressRingVariants, radii, reference, searchInputVariants, serviceToneLabel, serviceToneStyle, shadows, sidebarLinkBadgeVariants, spacing, spinnerVariants, starRatingVariants, statusDotVariants, suiteProgressFillVariants, surfaces, systemTokens, textareaVariants, typography, useBrandScope, useSidebarPeekLock, useSidebarState, useStopwatch, useToast, yearToIso };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map