@assure-one/design-system 1.31.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: {
@@ -386,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));
 }
@@ -2454,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;
@@ -2461,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)]",
@@ -2478,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",
@@ -2494,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
@@ -2511,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
@@ -2523,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
   }
@@ -2532,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",
@@ -2548,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",
@@ -2857,8 +3142,27 @@ 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,
@@ -2867,12 +3171,30 @@ var Button = forwardRef(function Button2({
       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
+          }
+        )
       ]
     }
   );
@@ -3184,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) {
@@ -3332,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",
@@ -3347,6 +3991,11 @@ function Calendar({
   maxDate,
   className,
   classNames,
+  captionLayout = "dropdown",
+  navLayout = "around",
+  startMonth,
+  endMonth,
+  components,
   ...props
 }) {
   const { modifiers, modifiersClassNames } = React39.useMemo(() => {
@@ -3370,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,
     {
@@ -3382,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",
@@ -3527,237 +4175,67 @@ var CategoryDivider = forwardRef(
       /* @__PURE__ */ jsx(CategoryTag, { label, icon, tone }),
       /* @__PURE__ */ jsx("span", { className: "bg-rule h-px flex-1", "aria-hidden": "true" }),
       count !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-fg-3 bg-surface-2 border-rule inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full border px-1.5 text-[11px] font-bold", children: count })
-    ] });
-  }
-);
-CategoryDivider.displayName = "CategoryDivider";
-var Checkbox = React39.forwardRef(function Checkbox2({
-  label,
-  indeterminate,
-  checked,
-  defaultChecked,
-  shape = "square",
-  className,
-  id: providedId,
-  ...props
-}, ref) {
-  const generatedId = React39.useId();
-  const id = providedId ?? generatedId;
-  const resolvedChecked = indeterminate ? "indeterminate" : checked;
-  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      CheckboxPrimitive.Root,
-      {
-        ref,
-        id,
-        checked: resolvedChecked,
-        defaultChecked,
-        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]",
-          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",
-          "data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-brand-bg",
-          "disabled:bg-bg-disabled disabled:border-rule disabled:text-fg-disabled disabled:cursor-not-allowed",
-          "aria-[invalid=true]:border-danger-line",
-          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" }) })
-      }
-    ),
-    label && /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: id,
-        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,
+);
+CategoryDivider.displayName = "CategoryDivider";
+var Checkbox = React39.forwardRef(function Checkbox2({
+  label,
+  indeterminate,
+  checked,
+  defaultChecked,
+  shape = "square",
+  className,
+  id: providedId,
+  ...props
+}, ref) {
+  const generatedId = React39.useId();
+  const id = providedId ?? generatedId;
+  const resolvedChecked = indeterminate ? "indeterminate" : checked;
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      {
+        ref,
+        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]",
+          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",
+          "data-[state=indeterminate]:border-brand data-[state=indeterminate]:bg-brand-bg",
+          "disabled:bg-bg-disabled disabled:border-rule disabled:text-fg-disabled disabled:cursor-not-allowed",
+          "aria-[invalid=true]:border-danger-line",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          CheckboxPrimitive.Indicator,
           {
-            "aria-invalid": ariaInvalid || void 0,
-            "aria-label": ariaLabel ?? placeholder,
-            className: cn(triggerClassName, className),
-            children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+            ...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" })
           }
-        ),
-        /* @__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";
+        )
+      }
+    ),
+    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;
 function ClientSelect({
   clients,
   value,
@@ -3885,6 +4363,7 @@ 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]",
       microInteractions.overlay,
@@ -3907,6 +4386,8 @@ 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",
@@ -3925,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",
@@ -3941,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
@@ -3960,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
@@ -3972,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
   }
@@ -4229,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",
@@ -4256,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)]",
@@ -4273,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)]",
@@ -4289,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",
@@ -4307,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",
@@ -4317,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
     ]
   }
@@ -4327,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",
@@ -4336,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
     ]
   }
@@ -4346,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",
@@ -4359,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
   }
@@ -4457,6 +4965,7 @@ 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",
       microInteractions.overlay,
@@ -4574,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;
@@ -4695,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
           )
         }
       ),
@@ -4744,6 +5256,7 @@ var DatePicker = forwardRef(function DatePicker2({
                 minDate,
                 maxDate,
                 defaultMonth: selectedDate ?? minDate ?? void 0,
+                captionLayout,
                 autoFocus: true
               }
             )
@@ -4772,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;
@@ -4831,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 }];
@@ -4907,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",
@@ -5201,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",
@@ -5228,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)]",
@@ -5245,6 +5756,7 @@ var DropdownMenuContent = React39.forwardRef(({ className, sideOffset = 6, align
   DropdownMenuPrimitive.Content,
   {
     ref,
+    ...slot(dropdownMenuAnatomy, "content"),
     sideOffset,
     align,
     className: cn(
@@ -5263,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",
@@ -5281,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",
@@ -5291,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
     ]
   }
@@ -5301,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",
@@ -5310,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
     ]
   }
@@ -5320,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",
@@ -5333,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
   }
@@ -5341,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
   }
@@ -5424,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);
@@ -5460,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`;
@@ -5688,6 +6234,7 @@ var Input = forwardRef(function Input2({
   className,
   id: providedId,
   placeholder,
+  onWheel,
   ...props
 }, ref) {
   const generatedId = useId();
@@ -5698,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
@@ -5718,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
         }
       ),
@@ -5734,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",
@@ -5759,6 +6328,7 @@ 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",
           children: showPassword ? /* @__PURE__ */ jsx(EyeOffIcon, { className: "size-4", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(EyeIcon, { className: "size-4", "aria-hidden": "true" })
@@ -5767,13 +6337,23 @@ var Input = forwardRef(function Input2({
       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";
@@ -5856,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;
@@ -5877,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);
@@ -5889,6 +6503,7 @@ var LinkButton = forwardRef(function LinkButton2({
       {
         ref,
         href,
+        ...root,
         className: classes,
         target,
         rel: safeRel,
@@ -5897,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) {
@@ -6400,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 })
@@ -6454,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",
@@ -6492,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" })
             }
@@ -6512,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" })
@@ -6523,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"
@@ -6538,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" })
             }
@@ -7342,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) {
@@ -7353,6 +7991,7 @@ 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",
         microInteractions.selection,
@@ -7364,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;
@@ -7374,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
       }
@@ -7441,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)]",
@@ -7502,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,
@@ -7510,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",
@@ -7528,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
@@ -7545,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
@@ -7553,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() {
@@ -7759,48 +8427,59 @@ var SearchInput = React39.forwardRef(
     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", { 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
-          ),
-          "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",
-            microInteractions.control,
-            "hover:text-fg",
-            "focus-visible:[box-shadow:var(--shadow-focus-ring)] focus-visible:outline-none",
-            iconRightClass
+    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-label": "Clear search",
-          children: /* @__PURE__ */ jsx(XIcon, { className: iconSizeClass, "aria-hidden": "true" })
-        }
-      )
-    ] });
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref,
+              type: "search",
+              value,
+              onChange: (e) => onValueChange(e.target.value),
+              placeholder,
+              disabled,
+              ...slot(searchInputAnatomy, "control"),
+              className: cn(searchInputVariants({ inputSize })),
+              ...props
+            }
+          ),
+          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";
@@ -7908,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) {
@@ -8082,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",
@@ -8131,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
@@ -8435,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)]",
@@ -8446,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: [
@@ -8459,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",
@@ -9485,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;
@@ -9497,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
         }
@@ -9509,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
@@ -9517,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
         }
@@ -9527,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(
@@ -9541,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
@@ -9556,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
@@ -9574,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.
@@ -9594,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.
@@ -9608,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";
@@ -9810,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",
       {
@@ -9821,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();
@@ -9834,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
+          ]
+        }
+      )
     ] })
   ] });
 });
@@ -9912,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",
@@ -10035,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);
@@ -10071,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.
@@ -10088,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",
             {
@@ -10098,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",
@@ -10112,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.
@@ -10234,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",
@@ -13784,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) {
@@ -13792,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
     }
@@ -13811,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
@@ -13994,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 },
@@ -14053,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",
@@ -14099,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",
@@ -14155,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
@@ -14172,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.
@@ -14209,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
@@ -14223,6 +15054,7 @@ 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-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
@@ -14232,6 +15064,7 @@ var SidebarSection = React39.forwardRef(
               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"
@@ -14273,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",
@@ -14312,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
@@ -14343,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
@@ -14368,6 +15204,7 @@ var SidebarLinkAction = React39.forwardRef(
       "span",
       {
         ref,
+        ...slot(sidebarAnatomy, "link-action"),
         className: cn(
           "transition-opacity duration-[var(--motion-duration-spatial)] ease-[var(--motion-ease-move)] motion-reduce:transition-none",
           "opacity-100",
@@ -14396,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";
@@ -14467,6 +15312,7 @@ 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
@@ -14479,60 +15325,73 @@ var SidebarLinkGroup = React39.forwardRef(
         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";
@@ -14542,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",
@@ -14554,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-[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", { 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(
@@ -14608,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: [
@@ -14615,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
@@ -14632,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",
@@ -15186,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
@@ -15207,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",
@@ -15237,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";
@@ -15247,6 +16144,7 @@ var DataTableResultsCount = forwardRef(
       "span",
       {
         ref,
+        ...slot(dataTableAnatomy, "results-count"),
         className: cn(
           "text-fg-4 mr-1 shrink-0 font-sans text-[11px] whitespace-nowrap tabular-nums",
           className
@@ -15264,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";
@@ -15281,6 +16195,7 @@ var DataTableRow = forwardRef(
       {
         ref,
         "data-state": selected ? "selected" : void 0,
+        ...slot(dataTableAnatomy, "row"),
         className: cn(
           "border-rule-soft border-b",
           microInteractions.selection,
@@ -15321,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"
@@ -15335,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",
@@ -15349,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",
@@ -15374,6 +16293,7 @@ var DataTableCell = forwardRef(
       "td",
       {
         ref,
+        ...slot(dataTableAnatomy, "cell"),
         className: cn(
           cellBase,
           "text-fg-2 text-[13px]",
@@ -15392,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
       }
@@ -15405,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
@@ -15419,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
@@ -15444,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,
@@ -15469,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",