@nebutra/ui 0.2.3 → 3.0.0

package/dist/primitives/canonical.js

@@ -2,7 +2,7 @@
 import { Accordion as Accordion$1 } from '@base-ui/react/accordion';
 import { ChevronUpDown, Check, ChevronRight, ChevronDown, MagnifyingGlass, Plus, Cross, MoreHorizontal, Status, Copy, Information, Warning, External, LoaderCircle, EyeOff, Eye, Minus, LockClosed, CheckCircle, MoreVertical, DeviceDesktop, Sun, Moon, Hash, Code, Link, FolderOpen, FolderClosed, File, ChevronLeft, ChevronUp, FileText } from '@nebutra/icons';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
 import { AlertDialog as AlertDialog$1 } from '@base-ui/react/alert-dialog';
@@ -10,6 +10,7 @@ import * as React24 from 'react';
 import React24__default, { createContext, useId, useRef, useState, useMemo, use, useCallback, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { colors, brandSpring, flow, emerge } from '@nebutra/brand';
 export { brandSpring } from '@nebutra/brand';
+import { tokenColor, fontStack } from '@nebutra/tokens/values';
 import { useReducedMotion, LazyMotion, domAnimation, AnimatePresence, motion, m } from 'framer-motion';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { Prism } from 'react-syntax-highlighter';
@@ -36,6 +37,80 @@ import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 import { useTheme } from '@nebutra/tokens';
 
 // src/primitives/accordion.tsx
+
+// src/utils/tw-merge-theme.generated.ts
+var TW_MERGE_THEME = {
+  breakpoint: ["3xl", "shell", "tight", "xs"],
+  container: ["content", "text", "wide"],
+  ease: ["brand", "in", "in-out", "out", "spring"],
+  font: ["cn", "display", "heading", "mono", "sans"],
+  leading: ["display", "heading"],
+  radius: ["2xl", "3xl", "button", "card", "full", "lg", "md", "none", "panel", "sm", "xl", "xs"],
+  shadow: [
+    "2xl",
+    "ambient-glow",
+    "ambient-lg",
+    "ambient-md",
+    "ambient-sm",
+    "brand",
+    "brand-lg",
+    "glass-lg",
+    "glass-md",
+    "glass-sm",
+    "glow-accent",
+    "glow-accent-lg",
+    "glow-accent-sm",
+    "glow-primary",
+    "lg",
+    "md",
+    "sheen",
+    "sm",
+    "xl",
+    "xs"
+  ],
+  text: [
+    "2xl",
+    "2xs",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+    "base",
+    "body",
+    "display",
+    "label",
+    "lg",
+    "meta",
+    "sm",
+    "ui",
+    "xl",
+    "xs"
+  ],
+  tracking: ["display", "heading", "label", "tight"]
+};
+var TW_MERGE_CLASS_GROUPS = {
+  duration: [{ duration: ["cinematic", "flow", "micro", "reveal"] }]
+};
+
+// src/utils/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: Object.fromEntries(
+      Object.entries(TW_MERGE_THEME).map(([key, values]) => [key, [...values]])
+    ),
+    classGroups: Object.fromEntries(
+      Object.entries(TW_MERGE_CLASS_GROUPS).map(([key, groups]) => [
+        key,
+        groups.map(
+          (group) => Object.fromEntries(Object.entries(group).map(([k, v]) => [k, [...v]]))
+        )
+      ])
+    )
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -48,17 +123,17 @@ function asPlainStyle(style) {
 function withHtmlProps(Component) {
   return Component;
 }
-var RadixItem = withHtmlProps(Accordion$1.Item);
-var RadixHeader = withHtmlProps(Accordion$1.Header);
-var RadixTrigger = withHtmlProps(Accordion$1.Trigger);
-var RadixContent = withHtmlProps(Accordion$1.Panel);
+var AccordionItemBase = withHtmlProps(Accordion$1.Item);
+var AccordionHeaderBase = withHtmlProps(Accordion$1.Header);
+var AccordionTriggerBase = withHtmlProps(Accordion$1.Trigger);
+var AccordionPanelBase = withHtmlProps(Accordion$1.Panel);
 var Accordion = Accordion$1.Root;
 var AccordionItem = ({
   className,
   ref,
   ...props
 }) => /* @__PURE__ */ jsx(
-  RadixItem,
+  AccordionItemBase,
   {
     ref,
     className: cn("border-b border-border/70 last:border-b-0", className),
@@ -72,8 +147,8 @@ var AccordionTrigger = ({
   size = "default",
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(RadixHeader, { className: "flex", children: /* @__PURE__ */ jsxs(
-  RadixTrigger,
+}) => /* @__PURE__ */ jsx(AccordionHeaderBase, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionTriggerBase,
   {
     ref,
     className: cn(
@@ -105,11 +180,11 @@ var AccordionContent = ({
   ref,
   ...props
 }) => /* @__PURE__ */ jsx(
-  RadixContent,
+  AccordionPanelBase,
   {
     ref,
     ...keepMounted ? { keepMounted: true } : {},
-    className: "text-sm leading-relaxed data-[ending-style]:animate-accordion-up data-[open]:animate-accordion-down overflow-hidden text-muted-foreground transition-[height,opacity] duration-flow ease-out",
+    className: "text-sm leading-relaxed h-[var(--accordion-panel-height,auto)] data-[starting-style]:h-0 data-[ending-style]:h-0 overflow-hidden text-muted-foreground transition-[height,opacity] duration-flow ease-out",
     ...props,
     children: /* @__PURE__ */ jsx("div", { className: cn(size === "small" ? "pb-2.5 pt-0" : "pb-4 pt-0", className), children })
   }
@@ -195,7 +270,7 @@ var alertVariants = cva("flex items-stretch w-full gap-2 group-[.toaster]:w-(--w
     {
       variant: "destructive",
       appearance: "outline",
-      className: "border border-border bg-background text-destructive [&_[data-slot=alert-close]]:text-foreground"
+      className: "border border-border bg-background text-destructive-strong [&_[data-slot=alert-close]]:text-foreground"
     },
     {
       variant: "success",
@@ -265,7 +340,7 @@ var alertVariants = cva("flex items-stretch w-full gap-2 group-[.toaster]:w-(--w
     {
       variant: "mono",
       icon: "destructive",
-      className: "[&_[data-slot=alert-icon]]:text-destructive"
+      className: "[&_[data-slot=alert-icon]]:text-destructive-strong"
     },
     {
       variant: "mono",
@@ -287,6 +362,7 @@ function Alert({
   appearance,
   close = false,
   onClose,
+  closeLabel = "Dismiss",
   children,
   ...props
 }) {
@@ -304,7 +380,7 @@ function Alert({
           {
             type: "button",
             onClick: onClose,
-            "aria-label": "Dismiss",
+            "aria-label": closeLabel,
             "data-slot": "alert-close",
             className: cn(
               "group shrink-0 size-4 inline-flex items-center justify-center rounded-[var(--radius-sm)]",
@@ -348,7 +424,7 @@ function AlertContent({ className, ...props }) {
   );
 }
 ({
-  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
+  // Nebutra Blue (云毓蓝) — technology & trust
   blue50: colors.primary[50],
   blue100: colors.primary[100],
   blue200: colors.primary[200],
@@ -361,7 +437,7 @@ function AlertContent({ className, ...props }) {
   blue800: colors.primary[800],
   blue900: colors.primary[900],
   blue950: colors.primary[950],
-  // Nebutra Cyan (云毓青) — data flow & intelligence — VI: #0BF1C3
+  // Nebutra Cyan (云毓青) — data flow & intelligence
   cyan50: colors.accent[50],
   cyan100: colors.accent[100],
   cyan200: colors.accent[200],
@@ -386,6 +462,13 @@ function AlertContent({ className, ...props }) {
   neutral800: colors.neutral[800],
   neutral900: colors.neutral[900],
   neutral950: colors.neutral[950],
+  // deepest — used as dark background
+  // Semantic raw colors — VI §Color Specifications. The 500s are the status
+  // tokens; the 600 hover steps have no token of their own.
+  // NOTE: info = brand blue, not sky/teal
+  red500: tokenColor("--status-danger"),
+  green500: tokenColor("--status-success"),
+  amber500: tokenColor("--status-warning"),
   white: colors.white,
   black: colors.black
 });
@@ -441,6 +524,18 @@ var primitiveFontWeight = {
   normal: 400,
   medium: 500,
   semibold: 600};
+({
+  /** Default body/UI stack — Geist with CJK falling through to MiSans */
+  sans: fontStack("--font-sans"),
+  /** CJK-locale stack (same order as sans, minus Latin-only system faces) */
+  cnSans: fontStack("--font-cn"),
+  /** Display / hero headlines */
+  display: fontStack("--font-display"),
+  /** Headings */
+  heading: fontStack("--font-heading"),
+  /** Code / monospace */
+  mono: fontStack("--font-mono")
+});
 var primitiveShadow = {
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
@@ -458,7 +553,7 @@ var primitiveTransition = {
     // hero entrance, big delight moments
   },
   easing: {
-    default: "ease-out",
+    default: "var(--ease-brand)",
     inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
   }
 };
@@ -472,8 +567,7 @@ var primitiveFocusRing = {
 // src/tokens/shadows.ts
 var shadowClasses = {
   md: "shadow-md",
-  xl: "shadow-xl",
-  "2xl": "shadow-2xl"};
+  xl: "shadow-xl"};
 
 // src/tokens/components/overlay.ts
 var overlayFocusRingClassName = "outline-none";
@@ -492,71 +586,80 @@ var overlayTokens = {
   }};
 var overlayClassNames = {
   focusRing: overlayFocusRingClassName,
-  backdrop: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-[opacity,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
+  backdrop: (
+    // allow-palette: dialog backdrop dims arbitrary app content behind it, must stay dark in both themes
+    "fixed inset-0 bg-black/40 transition-[opacity] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
+  ),
   modalSurface: [
     "fixed left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
-    "border border-border/60 bg-background/95 p-6 text-foreground backdrop-blur-xl",
+    "bg-background p-6 text-foreground",
     "rounded-[var(--radius-xl)]",
-    shadowClasses["2xl"],
+    "shadow-[0_0_0_1px_var(--edge-soft),var(--elevation-overlay)]",
     "outline-none",
-    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
   menuSurface: [
-    "min-w-32 overflow-hidden rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-1 text-popover-foreground backdrop-blur-md",
+    "min-w-32 origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-1 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
     "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
   ].join(" "),
   selectSurface: [
-    "max-h-[var(--select-content-max-height)] min-w-[var(--select-content-min-width)] overflow-hidden",
+    "max-h-[var(--select-content-max-height)] min-w-[var(--select-content-min-width)] origin-[var(--transform-origin)] overflow-hidden",
     "rounded-[var(--select-content-radius)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
     "shadow-[var(--select-content-shadow)] outline-none",
-    "transition-[opacity,transform,display] duration-[var(--select-duration)] ease-[var(--select-easing)]",
-    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "transition-[opacity,transform] duration-[var(--select-duration)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
   navigationMenuSurface: [
-    "min-w-32 overflow-hidden rounded-[var(--radius-xl)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
+    "min-w-32 origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-xl)] border border-border/70 bg-popover/95 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
     "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
   ].join(" "),
   popoverSurface: [
-    "w-72 rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
+    "w-72 origin-[var(--transform-origin)] rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-95 data-[open]:scale-100",
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] data-[open]:scale-100 data-[closed]:duration-[var(--motion-duration-micro)]",
     "motion-reduce:transition-none motion-reduce:data-[closed]:transform-none motion-reduce:data-[open]:transform-none"
   ].join(" "),
   tooltipSurface: [
-    "overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
+    "origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
     shadowClasses.md,
-    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
+    "data-[instant]:duration-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
   sheetBackdrop: [
     "fixed inset-0 bg-[var(--sheet-overlay-background)] backdrop-blur-[var(--sheet-overlay-blur)]",
-    "transition-[opacity,backdrop-filter,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+    "transition-[opacity] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
   ].join(" "),
   sheetSurface: [
     "fixed flex flex-col overflow-hidden border border-border bg-[var(--sheet-background)] text-foreground shadow-[var(--sheet-shadow)]",
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
   ].join(" "),
-  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
+  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-brand)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
 };
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "rounded-[var(--btn-default-radius,var(--radius-md))]",
     "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
-    "transition-colors duration-micro ease-out",
+    // `transform` is in the property list on purpose: without it the
+    // active:scale-[0.97] press snapped instantly and the button felt dead
+    // under the finger. Duration/ease stay on the flow rail — motion
+    // governance pins them (primitives/__tests__/motion-governance.test.ts).
+    "transition-[color,background-color,border-color,box-shadow,transform] duration-flow ease-[var(--ease-brand)]",
+    "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
@@ -565,7 +668,7 @@ var buttonVariants = cva(
       variant: {
         // Recipe-driven via packages/design/tokens/recipe.css (.btn-brand-default)
         default: "btn-brand-default",
-        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-[color:var(--neutral-1)]/5 hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
+        ink: "bg-neutral-12 text-neutral-1 ring-1 ring-inset ring-neutral-1/5 hover:bg-neutral-11 hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -822,13 +925,13 @@ var motionDurations = {
   cinematic: 500
 };
 var easings = {
-  easeOut: [0, 0, 0.2, 1],
+  easeOut: [0.16, 1, 0.3, 1],
   easeInOut: [0.4, 0, 0.2, 1]};
 var motionVariants = {
   fadeInUp: {
-    initial: { opacity: 0, y: 20 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: 10 }
+    initial: { opacity: 0, transform: "translateY(20px)" },
+    animate: { opacity: 1, transform: "translateY(0px)" },
+    exit: { opacity: 0, transform: "translateY(10px)" }
   },
   scaleIn: {
     initial: { opacity: 0, scale: 0.95 },
@@ -838,15 +941,15 @@ var motionVariants = {
 var staggerContainers = {
   fast: {
     initial: {},
-    animate: { transition: { staggerChildren: 0.05, delayChildren: 0.1 } }
+    animate: { transition: { staggerChildren: 0.04, delayChildren: 0 } }
   },
   normal: {
     initial: {},
-    animate: { transition: { staggerChildren: 0.1, delayChildren: 0.2 } }
+    animate: { transition: { staggerChildren: 0.06, delayChildren: 0.04 } }
   },
   slow: {
     initial: {},
-    animate: { transition: { staggerChildren: 0.15, delayChildren: 0.3 } }
+    animate: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } }
   }
 };
 var viewportSettings = {
@@ -885,37 +988,37 @@ var PRESETS = {
    * Pair with `AnimateSwap`.
    */
   swap: {
-    initial: { opacity: 0, y: 10, filter: "blur(4px)" },
-    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
-    exit: { opacity: 0, y: -10, filter: "blur(4px)" },
+    initial: { opacity: 0, transform: "translateY(10px)", filter: "blur(4px)" },
+    animate: { opacity: 1, transform: "translateY(0px)", filter: "blur(0px)" },
+    exit: { opacity: 0, transform: "translateY(-10px)", filter: "blur(4px)" },
     transition: { duration: motionDurations.reveal / 1e3 }
   },
   /** Off-canvas panel entering from the right edge (drawer, sheet). */
   slideFromRight: {
-    initial: { x: "100%" },
-    animate: { x: 0 },
-    exit: { x: "100%" },
+    initial: { transform: "translateX(100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(100%)" },
     transition: brandSpring.default
   },
   /** Off-canvas panel entering from the left edge. */
   slideFromLeft: {
-    initial: { x: "-100%" },
-    animate: { x: 0 },
-    exit: { x: "-100%" },
+    initial: { transform: "translateX(-100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(-100%)" },
     transition: brandSpring.default
   },
   /** Off-canvas panel entering from the top edge (banner, command bar). */
   slideFromTop: {
-    initial: { y: "-100%" },
-    animate: { y: 0 },
-    exit: { y: "-100%" },
+    initial: { transform: "translateY(-100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(-100%)" },
     transition: brandSpring.default
   },
   /** Off-canvas panel entering from the bottom edge (mobile action sheet). */
   slideFromBottom: {
-    initial: { y: "100%" },
-    animate: { y: 0 },
-    exit: { y: "100%" },
+    initial: { transform: "translateY(100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(100%)" },
     transition: brandSpring.default
   }
 };
@@ -925,7 +1028,7 @@ function MotionDiv(props) {
 function AnimateIn(props) {
   const {
     children,
-    preset = "emerge",
+    preset = "fade",
     delay = 0,
     duration,
     inView = false,
@@ -933,7 +1036,7 @@ function AnimateIn(props) {
     ...rest
   } = props;
   const shouldReduce = useReducedMotion();
-  const base = PRESETS[preset] || PRESETS.emerge;
+  const base = PRESETS[preset] || PRESETS.fade;
   const initial = shouldReduce ? { opacity: 0 } : base.initial;
   const animate2 = shouldReduce ? { opacity: 1 } : base.animate;
   const exit = shouldReduce ? { opacity: 0 } : "exit" in base ? base.exit : void 0;
@@ -1300,8 +1403,14 @@ var badgeVariants = cva(
         "teal-subtle": "bg-info/10 text-info fill-current border-transparent",
         inverted: "bg-foreground text-background fill-current",
         // Special visual treatments (intentional product design, not brand hex)
-        trial: "bg-gradient-to-br from-trial-start to-trial-end text-primary-foreground fill-current",
-        turbo: "bg-gradient-to-br from-turbo-start to-turbo-end text-primary-foreground fill-current",
+        trial: (
+          // allow-palette: the trial gradient is fixed and vivid in both themes, so its ink is fixed white
+          "bg-gradient-to-br from-trial-start to-trial-end text-white fill-current"
+        ),
+        turbo: (
+          // allow-palette: the turbo gradient is fixed and vivid in both themes, so its ink is fixed white
+          "bg-gradient-to-br from-turbo-start to-turbo-end text-white fill-current"
+        ),
         pill: "bg-background text-foreground fill-foreground border-border hover:bg-muted/50 focus-visible:bg-muted/50",
         beta: "border-transparent bg-muted text-muted-foreground",
         new: "border-transparent bg-primary/10 text-primary",
@@ -1416,8 +1525,9 @@ var Slot = React24.forwardRef(
 Slot.displayName = "Slot";
 var Breadcrumb = ({
   ref,
+  "aria-label": ariaLabel = "breadcrumb",
   ...props
-}) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": "breadcrumb", ...props });
+}) => /* @__PURE__ */ jsx("nav", { ref, "aria-label": ariaLabel, ...props });
 Breadcrumb.displayName = "Breadcrumb";
 var BreadcrumbList = ({
   className,
@@ -1514,10 +1624,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size, iconSize2) {
-  if (iconSize2 === "sm") return "[&>svg]:size-3.5";
-  if (iconSize2 === "md") return "[&>svg]:size-3.5";
-  if (iconSize2 === "lg") return "[&>svg]:size-4";
+function getIconSizeClass(size, iconSize3) {
+  if (iconSize3 === "sm") return "[&>svg]:size-3.5";
+  if (iconSize3 === "md") return "[&>svg]:size-3.5";
+  if (iconSize3 === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -1532,10 +1642,10 @@ function getIconSizeClass(size, iconSize2) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size, iconSize2) {
-  if (iconSize2 === "sm") return "size-3.5";
-  if (iconSize2 === "md") return "size-3.5";
-  if (iconSize2 === "lg") return "size-4";
+function getSpinnerSizeClass(size, iconSize3) {
+  if (iconSize3 === "sm") return "size-3.5";
+  if (iconSize3 === "md") return "size-3.5";
+  if (iconSize3 === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -1560,10 +1670,10 @@ function resolveShadowClass(shadow) {
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
-  const iconSizeClass = getIconSizeClass(size, iconSize2);
+function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize3, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize3);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize3) }),
     prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
     children,
     suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
@@ -1574,7 +1684,7 @@ var Button = ({
   variant,
   size,
   shape,
-  iconSize: iconSize2,
+  iconSize: iconSize3,
   asChild = false,
   loading = false,
   disabled,
@@ -1592,7 +1702,7 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize3 }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
@@ -1603,7 +1713,7 @@ var Button = ({
           prefix,
           suffix,
           size,
-          iconSize: iconSize2,
+          iconSize: iconSize3,
           children
         }
       )
@@ -1616,7 +1726,7 @@ var ButtonLink = ({
   variant,
   size,
   shape,
-  iconSize: iconSize2,
+  iconSize: iconSize3,
   prefix,
   suffix,
   shadow,
@@ -1636,7 +1746,7 @@ var ButtonLink = ({
     {
       ref,
       className: cn(
-        buttonVariants({ variant, size, shape, iconSize: iconSize2 }),
+        buttonVariants({ variant, size, shape, iconSize: iconSize3 }),
         shadowClass,
         loading && "pointer-events-none opacity-50",
         className
@@ -1650,7 +1760,7 @@ var ButtonLink = ({
           prefix,
           suffix,
           size,
-          iconSize: iconSize2,
+          iconSize: iconSize3,
           children
         }
       )
@@ -1658,68 +1768,119 @@ var ButtonLink = ({
   );
 };
 ButtonLink.displayName = "ButtonLink";
-var Card = ({
+var cardVariants = cva(
+  "rounded-[var(--radius-card,var(--radius-lg))] text-card-foreground transition-[box-shadow,background-color] duration-micro",
+  {
+    variants: {
+      variant: {
+        default: "bg-card shadow-[var(--elevation-card)] ring-1 ring-[var(--edge-soft)]",
+        elevated: "bg-card shadow-ambient-md ring-1 ring-[var(--edge-soft)]",
+        outline: "bg-transparent ring-1 ring-border",
+        ghost: "bg-transparent"
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      },
+      interactive: {
+        true: "cursor-pointer hover:shadow-ambient-md",
+        false: ""
+      }
+    },
+    defaultVariants: { variant: "default", padding: "none", interactive: false }
+  }
+);
+var CardPaddedContext = React24.createContext(false);
+var CardRoot = ({
   className,
+  variant,
+  padding = "none",
+  interactive,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: padding !== "none", children: /* @__PURE__ */ jsx(
   "div",
   {
     ref,
-    className: cn(
-      "rounded-[var(--radius-lg)] border border-border bg-card text-card-foreground shadow-sm",
-      className
-    ),
+    className: cn(cardVariants({ variant, padding, interactive }), className),
     ...props
   }
-);
-Card.displayName = "Card";
-var CardHeader = ({
-  className,
-  ref,
-  ...props
-}) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props });
+) });
+CardRoot.displayName = "Card";
+var CardHeader = ({ className, ref, ...props }) => {
+  const padded = React24.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-1.5", !padded && "p-6", className),
+      ...props
+    }
+  );
+};
 CardHeader.displayName = "CardHeader";
-var CardTitle = ({
-  className,
-  children,
-  ref,
-  ...props
-}) => /* @__PURE__ */ jsx(
-  "h3",
+var CardTitle = ({ className, as: Tag = "h3", ref, ...props }) => /* @__PURE__ */ jsx(
+  Tag,
   {
     ref,
-    className: cn("text-2xl font-semibold leading-none tracking-tight", className),
-    ...props,
-    children
+    className: cn("text-lg font-semibold leading-tight tracking-tight text-foreground", className),
+    ...props
   }
 );
 CardTitle.displayName = "CardTitle";
-var CardDescription = ({
-  className,
-  as: Tag = "p",
+var CardDescription = ({ className, as: Tag = "p", ref, ...props }) => React24.createElement(Tag, {
   ref,
+  className: cn("text-sm leading-relaxed text-muted-foreground", className),
   ...props
-}) => {
-  return React24.createElement(Tag, {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  });
-};
+});
 CardDescription.displayName = "CardDescription";
-var CardContent = ({
-  className,
-  ref,
-  ...props
-}) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props });
+var CardContent = ({ className, ref, ...props }) => {
+  const padded = React24.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(padded ? "mt-4 first:mt-0" : "p-6 pt-0", className), ...props });
+};
 CardContent.displayName = "CardContent";
-var CardFooter = ({
-  className,
-  ref,
-  ...props
-}) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props });
+var CardFooter = ({ className, ref, ...props }) => {
+  const padded = React24.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "flex items-center",
+        padded ? "mt-6 border-t border-border/50 pt-4 first:mt-0" : "p-6 pt-0",
+        className
+      ),
+      ...props
+    }
+  );
+};
 CardFooter.displayName = "CardFooter";
+var iconSize = { sm: "size-8", md: "size-10", lg: "size-12" };
+var CardIcon = ({ className, size = "md", ref, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-muted/50",
+      iconSize[size],
+      className
+    ),
+    ...props
+  }
+);
+CardIcon.displayName = "CardIcon";
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Body: CardContent,
+  Footer: CardFooter,
+  Icon: CardIcon
+});
+var CardBody = CardContent;
 var DEFAULT_STROKE_WIDTH = 1.6;
 function CheckGlyph({
   size = 16,
@@ -1780,35 +1941,36 @@ function IndeterminateGlyph({
     }
   );
 }
-var getInputClasses = (checked, disabled, indeterminate) => {
-  let className = "relative border w-4 h-4 duration-micro rounded inline-flex items-center justify-center";
-  if (disabled) {
-    if (!checked || indeterminate) {
-      className += " bg-geist-gray-100 border-geist-gray-500";
-      className += indeterminate ? " stroke-geist-gray-500" : " fill-geist-gray-100 stroke-geist-gray-100";
-    } else {
-      className += " bg-geist-gray-600 border-geist-gray-600 fill-geist-gray-600 stroke-geist-gray-100";
-    }
-  } else {
-    if (!checked || indeterminate) {
-      className += " bg-geist-background-100 border-geist-gray-700 group-hover:bg-geist-gray-200";
-      className += indeterminate ? " stroke-geist-gray-700" : " fill-geist-background-100 stroke-geist-background-100 group-hover:stroke-geist-gray-200 group-hover:fill-geist-gray-200";
-    } else {
-      className += " bg-geist-gray-1000 border-geist-gray-1000 fill-geist-gray-1000 stroke-geist-gray-100";
-    }
-  }
-  return className;
+
+// src/primitives/form-control.ts
+var formControlFocusClassNames = {
+  input: "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
+  textarea: "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30",
+  select: "outline-none focus:border-ring focus:ring-[length:var(--select-focus-ring-width)] focus:ring-ring/30"
 };
+var formControlInvalidClassNames = {
+  input: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
+  textarea: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
+  select: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20"
+};
+var controlFocusProxyClassName = "peer-focus-visible:outline-2 peer-focus-visible:outline-offset-2 peer-focus-visible:outline-[hsl(var(--ring))]";
+var boxClassName = (on) => cn(
+  "relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border",
+  "stroke-current fill-none transition-[background-color,border-color,color] duration-micro",
+  on ? "border-primary bg-primary text-primary-foreground" : "border-[var(--control-border)] bg-background text-transparent group-hover:border-muted-foreground",
+  "peer-disabled:opacity-50",
+  controlFocusProxyClassName
+);
 var Checkbox = ({
   checked: controlledChecked,
   defaultChecked = false,
-  onChange,
+  onChange: legacyOnChange,
+  onCheckedChange: onChange = legacyOnChange,
   disabled = false,
   indeterminate = false,
   children,
   className,
-  id,
-  name
+  ...inputProps
 }) => {
   const [internalChecked, setInternalChecked] = React24__default.useState(defaultChecked);
   const isControlled = controlledChecked !== void 0;
@@ -1817,34 +1979,28 @@ var Checkbox = ({
     "label",
     {
       className: cn(
-        "flex items-center text-[13px] font-sans group",
-        disabled ? "text-geist-gray-500 cursor-not-allowed" : "text-geist-gray-1000 cursor-pointer",
+        "group flex items-center text-[13px] font-sans",
+        disabled ? "cursor-not-allowed text-muted-foreground" : "cursor-pointer text-foreground",
         className
       ),
       children: [
         /* @__PURE__ */ jsx(
           "input",
           {
-            id,
-            name,
+            ...inputProps,
             disabled,
             type: "checkbox",
             checked,
+            "aria-checked": indeterminate ? "mixed" : void 0,
             onChange: (e) => {
-              if (!indeterminate) {
-                if (!isControlled) {
-                  setInternalChecked(e.target.checked);
-                }
-                if (onChange) {
-                  onChange(e.target.checked);
-                }
-              }
+              if (indeterminate) return;
+              if (!isControlled) setInternalChecked(e.target.checked);
+              onChange?.(e.target.checked);
             },
-            "aria-label": typeof children === "string" ? children : "checkbox",
-            className: "sr-only"
+            className: "peer sr-only"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: getInputClasses(checked, disabled, indeterminate), children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, {}) : /* @__PURE__ */ jsx(CheckGlyph, {}) }),
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: boxClassName(checked || indeterminate), children: indeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, {}) : /* @__PURE__ */ jsx(CheckGlyph, {}) }),
         children && /* @__PURE__ */ jsx("span", { className: "ml-2", children })
       ]
     }
@@ -2070,9 +2226,9 @@ var overlayPrimitiveClassNames = {
     menuItemBaseClassName,
     "min-h-8 gap-2",
     menuHighlightedClassName,
-    "data-[variant=destructive]:text-destructive",
+    "data-[variant=destructive]:text-destructive-strong",
     "data-[variant=destructive]:data-[highlighted]:bg-destructive/10",
-    "data-[variant=destructive]:data-[highlighted]:text-destructive"
+    "data-[variant=destructive]:data-[highlighted]:text-destructive-strong"
   ].join(" "),
   menuItem: [menuItemBaseClassName, menuHighlightedClassName].join(" "),
   menuSubTrigger: [
@@ -2196,7 +2352,7 @@ var DropdownMenuSubContent = ({
   style,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(
+}) => /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { style: { zIndex: overlayZIndex.popover }, children: /* @__PURE__ */ jsx(
   Menu$1.Popup,
   {
     ref,
@@ -2226,6 +2382,7 @@ var DropdownMenuContent = ({
     align,
     alignOffset,
     side,
+    style: { zIndex: overlayZIndex.popover },
     children: /* @__PURE__ */ jsx(
       Menu$1.Popup,
       {
@@ -2526,7 +2683,8 @@ function CodeBlock(props) {
     onLineReference,
     languageIcons,
     showLanguageIcon = true,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel,
+    copyLabel = "Copy code"
   } = props;
   const resolvedHide = props.hideLineNumbers;
   const resolvedShow = props.showLineNumbers;
@@ -2748,7 +2906,9 @@ function CodeBlock(props) {
               /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "max-h-60 overflow-y-auto", children: controlledSwitcher.options.map((opt) => /* @__PURE__ */ jsxs(
                 DropdownMenuItem,
                 {
-                  onClick: () => controlledSwitcher.onChange(opt.value),
+                  onClick: () => (controlledSwitcher.onValueChange ?? controlledSwitcher.onChange)?.(
+                    opt.value
+                  ),
                   className: cn(
                     "text-xs",
                     opt.value === controlledSwitcher.value && "bg-accent font-medium"
@@ -2820,7 +2980,7 @@ function CodeBlock(props) {
                 type: "button",
                 onClick: () => copyToClipboard(code),
                 className: "inline-flex h-8 w-8 items-center justify-center rounded-[var(--radius-md)] hover:bg-accent hover:text-accent-foreground",
-                "aria-label": "Copy code",
+                "aria-label": copyLabel,
                 children: copied ? /* @__PURE__ */ jsx(
                   motion.div,
                   {
@@ -2958,11 +3118,7 @@ var commandFrameClassName = cn(
   "[&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2.5",
   "[&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4"
 );
-var commandInputWrapperClassName = cn(
-  "flex items-center border-b border-border px-3",
-  "transition-[border-color] duration-micro ease-out",
-  "has-[:focus-visible]:border-ring/60"
-);
+var commandInputWrapperClassName = cn("flex items-center border-b border-border px-3");
 var commandInputClassName = cn(
   "flex h-11 w-full appearance-none border-0 bg-transparent py-3 text-sm text-foreground shadow-none outline-none",
   "placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
@@ -3393,6 +3549,7 @@ function PopoverContent({
   return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
     Popover$1.Positioner,
     {
+      style: { zIndex: overlayZIndex.popover },
       "data-slot": "popover-positioner",
       sideOffset,
       align,
@@ -3407,7 +3564,7 @@ function PopoverContent({
             overlayPrimitiveClassNames.popoverSurface,
             className
           ),
-          style: { zIndex: overlayZIndex.popover, ...style },
+          style,
           ...props,
           children: [
             children,
@@ -3483,7 +3640,11 @@ var comboboxSizeTokens = {
 var comboboxTriggerVariants = cva(
   [
     "flex w-full items-center justify-between gap-2 whitespace-nowrap",
-    "h-[var(--combobox-trigger-height)] rounded-[var(--radius-md)] border border-input bg-background px-[var(--combobox-trigger-padding-x)]",
+    // --input-radius, not the generic md step: this trigger is a form control and
+    // should round like Input and Select do. Reading the scale step meant it
+    // tracked whatever a language did to medium surfaces instead of what it
+    // decided for its fields.
+    "h-[var(--combobox-trigger-height)] rounded-[var(--input-radius,var(--radius-md))] border border-input bg-background px-[var(--combobox-trigger-padding-x)]",
     "text-[length:var(--combobox-font-size)] ring-offset-background",
     "transition-colors duration-micro ease-out",
     "placeholder:text-muted-foreground",
@@ -3595,7 +3756,8 @@ function toCssLength(value) {
 function ComboboxRoot({
   options,
   value: controlledValue,
-  onChange,
+  onChange: legacyOnChange,
+  onValueChange: onChange = legacyOnChange,
   defaultValue = null,
   disabled = false,
   errored,
@@ -3793,6 +3955,7 @@ var ContextMenuContent = ({
 }) => /* @__PURE__ */ jsx(ContextMenu$1.Portal, { children: /* @__PURE__ */ jsx(
   ContextMenu$1.Positioner,
   {
+    style: { zIndex: overlayZIndex.popover },
     alignOffset,
     align,
     sideOffset,
@@ -4002,20 +4165,65 @@ var ContextMenu = Object.assign(ContextMenuRoot, {
   SubTrigger: ContextMenuSubTrigger,
   SubContent: ContextMenuSubContent
 });
-var DEFAULT_TOOLTIP_DELAY_MS = 150;
+
+// src/tokens/components/interaction.ts
+var interaction = {
+  /**
+   * Tooltips. The first one waits so a sweeping pointer does not strobe;
+   * once one is open, its neighbours open instantly if the pointer arrives
+   * within the skip window. Radix Tooltip defaults: delayDuration 700,
+   * skipDelayDuration 300. Vercel/Kowalski: "delay the first tooltip only".
+   */
+  tooltip: { delayMs: 700, skipWindowMs: 300 }};
+var DEFAULT_TOOLTIP_DELAY_MS = interaction.tooltip.delayMs;
+var SKIP_DELAY_WINDOW_MS = interaction.tooltip.skipWindowMs;
+var lastTooltipOpenAt = 0;
+var skipDelayListeners = /* @__PURE__ */ new Set();
+function markTooltipOpened() {
+  lastTooltipOpenAt = Date.now();
+  for (const listener of skipDelayListeners) listener();
+}
+function shouldSkipDelay() {
+  return Date.now() - lastTooltipOpenAt < SKIP_DELAY_WINDOW_MS;
+}
+function useSkipDelay() {
+  const [, tick] = React24.useReducer((count) => count + 1, 0);
+  React24.useEffect(() => {
+    skipDelayListeners.add(tick);
+    return () => {
+      skipDelayListeners.delete(tick);
+    };
+  }, []);
+  return shouldSkipDelay();
+}
+var TooltipInstantContext = React24.createContext(false);
 var TooltipProvider = ({
   children,
   delayDuration = DEFAULT_TOOLTIP_DELAY_MS
 }) => {
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+  const skipDelay = useSkipDelay();
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: skipDelay ? 0 : delayDuration, children });
 };
 var Tooltip = ({
   delayDuration,
   children,
+  onOpenChange,
   ...props
 }) => {
-  const delay = delayDuration ?? DEFAULT_TOOLTIP_DELAY_MS;
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children }) });
+  const skipDelay = useSkipDelay();
+  const instant = delayDuration == null && skipDelay;
+  const delay = delayDuration ?? (instant ? 0 : DEFAULT_TOOLTIP_DELAY_MS);
+  return /* @__PURE__ */ jsx(TooltipInstantContext.Provider, { value: instant, children: /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      ...props,
+      onOpenChange: (open, eventDetails) => {
+        if (open) markTooltipOpened();
+        onOpenChange?.(open, eventDetails);
+      },
+      children
+    }
+  ) }) });
 };
 var TooltipTrigger = ({
   asChild,
@@ -4045,25 +4253,29 @@ var TooltipContent = ({
   alignOffset = 0,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
-  Tooltip$1.Positioner,
-  {
-    side,
-    align,
-    sideOffset,
-    alignOffset,
-    style: { zIndex: overlayZIndex.tooltip },
-    children: /* @__PURE__ */ jsx(
-      Tooltip$1.Popup,
-      {
-        ref,
-        className: cn(overlayClassNames.tooltipSurface, className),
-        style: { zIndex: overlayZIndex.tooltip, ...style },
-        ...props
-      }
-    )
-  }
-) });
+}) => {
+  const instant = React24.use(TooltipInstantContext);
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      style: { zIndex: overlayZIndex.tooltip },
+      children: /* @__PURE__ */ jsx(
+        Tooltip$1.Popup,
+        {
+          ref,
+          className: cn(overlayClassNames.tooltipSurface, className),
+          "data-instant": instant || void 0,
+          style: { zIndex: overlayZIndex.tooltip, ...style },
+          ...props
+        }
+      )
+    }
+  ) });
+};
 TooltipContent.displayName = "TooltipContent";
 var COPIED_TINT = "text-[hsl(var(--success-strong))]";
 function CopiedAnnouncement({ copied, message }) {
@@ -4386,7 +4598,7 @@ var ContextCardTrigger = ({
         align,
         sideOffset,
         alignOffset,
-        className: "z-50",
+        style: { zIndex: overlayZIndex.popover },
         children: /* @__PURE__ */ jsx(
           Popover$1.Popup,
           {
@@ -4408,7 +4620,7 @@ var ContextCardTrigger = ({
               "rounded-[var(--context-card-radius)] border border-border bg-popover",
               "px-[var(--context-card-padding-x)] py-[var(--context-card-padding-y)]",
               "text-[length:var(--context-card-body-size)] text-popover-foreground shadow-md outline-none",
-              "transition-[opacity,transform,display] duration-[var(--context-card-duration)] ease-[var(--context-card-easing)]",
+              "transition-[opacity,transform] duration-[var(--context-card-duration)] ease-[var(--context-card-easing)]",
               "data-starting-style:opacity-0 data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-ending-style:scale-[0.98]",
               "motion-reduce:transition-none motion-reduce:data-starting-style:scale-100 motion-reduce:data-ending-style:scale-100",
               "",
@@ -4655,6 +4867,70 @@ var emptyStateTokens = {
     descriptionLineHeight: primitiveSpacing[6]
   }
 };
+var SIZE_MAP = {
+  sm: { box: "h-8 w-8", halo: "h-16 w-16 -inset-4", glyph: "h-3.5 w-3.5" },
+  md: { box: "h-10 w-10", halo: "h-20 w-20 -inset-5", glyph: "h-4 w-4" },
+  lg: { box: "h-14 w-14", halo: "h-28 w-28 -inset-7", glyph: "h-5 w-5" },
+  xl: { box: "h-20 w-20", halo: "h-40 w-40 -inset-10", glyph: "h-7 w-7" }
+};
+function BrandMark({
+  children,
+  variant = "gradient",
+  size = "md",
+  className,
+  halo = false,
+  ariaHidden = true
+}) {
+  const sizes = SIZE_MAP[size];
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": ariaHidden,
+      className: cn("relative inline-flex shrink-0 items-center justify-center", className),
+      children: [
+        halo && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute rounded-full bg-brand-mark opacity-30 blur-2xl",
+              sizes.halo
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "relative inline-flex items-center justify-center rounded-[var(--radius-2xl)]",
+              sizes.box,
+              variant === "gradient" && "bg-brand-mark text-brand-mark-foreground shadow-sm",
+              variant === "soft" && "bg-brand-mark/10 text-brand-mark dark:bg-brand-mark/20",
+              variant === "outline" && "border border-border bg-background text-foreground"
+            ),
+            children: children ?? /* @__PURE__ */ jsx(DefaultGlyph, { className: sizes.glyph })
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultGlyph({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.5", stroke: "currentColor", strokeOpacity: "0.35" })
+      ]
+    }
+  );
+}
 var variantClassName = {
   "blank-slate": "border border-dashed border-border bg-background",
   informational: "border border-border bg-card",
@@ -4673,7 +4949,7 @@ var iconToneClassName = {
   "no-results": "text-muted-foreground",
   cleared: "text-muted-foreground",
   permission: "text-muted-foreground",
-  error: "text-destructive"
+  error: "text-destructive-strong"
 };
 var emptyStateCssVars = (size) => ({
   "--empty-state-min-height": `${emptyStateTokens.root.minHeight[size]}px`,
@@ -4773,16 +5049,47 @@ var EmptyStateRoot = ({
   );
 };
 EmptyStateRoot.displayName = "EmptyState.Root";
-var EmptyState = {
+var toneVariant = {
+  default: "blank-slate",
+  branded: "informational",
+  subtle: "guide"
+};
+function EmptyStateSimple({
+  title,
+  description,
+  mascot,
+  icon,
+  action,
+  secondaryAction,
+  tone = "default",
+  size = "md",
+  className
+}) {
+  const visual = mascot ?? icon ?? (tone === "branded" ? /* @__PURE__ */ jsx(BrandMark, { size: size === "lg" ? "lg" : "md" }) : null);
+  return /* @__PURE__ */ jsx(
+    EmptyStateRoot,
+    {
+      action,
+      className: cn(tone === "subtle" && "border-0 bg-transparent", className),
+      description,
+      icon: visual ? /* @__PURE__ */ jsx(EmptyStateIcon, { icon: visual }) : void 0,
+      link: secondaryAction,
+      size,
+      title,
+      variant: toneVariant[tone]
+    }
+  );
+}
+var EmptyState = Object.assign(EmptyStateSimple, {
   Root: EmptyStateRoot,
   Icon: EmptyStateIcon
-};
+});
 var textSize = {
   small: "text-xs",
   medium: "text-sm",
   large: "text-base"
 };
-var iconSize = {
+var iconSize2 = {
   small: 12,
   medium: 14,
   large: 16
@@ -4818,9 +5125,13 @@ var ErrorMessage = ({
     {
       ref,
       role: "alert",
-      className: cn("inline-flex items-center gap-1.5 text-destructive", textSize[sz], className),
+      className: cn(
+        "inline-flex items-center gap-1.5 text-destructive-strong",
+        textSize[sz],
+        className
+      ),
       children: [
-        /* @__PURE__ */ jsx(Warning, { size: iconSize[sz], "aria-hidden": "true", className: "shrink-0" }),
+        /* @__PURE__ */ jsx(Warning, { size: iconSize2[sz], "aria-hidden": "true", className: "shrink-0" }),
         /* @__PURE__ */ jsxs("span", { children: [
           label && /* @__PURE__ */ jsxs("span", { className: "font-medium", children: [
             label,
@@ -4892,12 +5203,12 @@ var ErrorSurface = ({
           "span",
           {
             "aria-hidden": "true",
-            className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive",
+            className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive-strong",
             children: /* @__PURE__ */ jsx(Warning, { size: surfaceIconSize[size] })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive", children: label }) : null,
+          label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive-strong", children: label }) : null,
           resolvedTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold leading-6 text-foreground", children: resolvedTitle }) : null,
           message ? /* @__PURE__ */ jsx("p", { className: cn("leading-5 text-muted-foreground", resolvedTitle && "mt-1"), children: message }) : null,
           resolvedErrorId ? /* @__PURE__ */ jsxs("details", { className: "mt-3 text-xs text-muted-foreground", children: [
@@ -4946,10 +5257,10 @@ var Field = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs("div", { ref, className: cn("grid gap-2", className), ...props, children: [
-    /* @__PURE__ */ jsx(Label, { htmlFor, className: cn(error && "text-destructive"), children: label }),
+    /* @__PURE__ */ jsx(Label, { htmlFor, className: cn(error && "text-destructive-strong"), children: label }),
     children,
     description && !error && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: description }),
-    error && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive", children: error })
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-destructive-strong", children: error })
   ] });
 };
 Field.displayName = "Field";
@@ -4998,7 +5309,7 @@ var FormLabel = ({
     Label,
     {
       ref,
-      className: cn(error && "text-destructive", className),
+      className: cn(error && "text-destructive-strong", className),
       htmlFor: formItemId,
       ...props
     }
@@ -5055,7 +5366,7 @@ var FormMessage = ({
     {
       ref,
       id: formMessageId,
-      className: cn("text-sm font-medium text-destructive", className),
+      className: cn("text-sm font-medium text-destructive-strong", className),
       ...props,
       children: body
     }
@@ -5284,20 +5595,29 @@ var HoverCardContent = ({
   style,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side, align, sideOffset, children: /* @__PURE__ */ jsx(
-  Popover$1.Popup,
+}) => /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+  Popover$1.Positioner,
   {
-    ref,
-    className: cn(
-      overlayClassNames.popoverSurface,
-      overlayPrimitiveClassNames.popoverSurface,
-      "w-64",
-      className
-    ),
-    style: { zIndex: overlayZIndex.popover, ...style },
-    ...props
+    style: { zIndex: overlayZIndex.popover },
+    side,
+    align,
+    sideOffset,
+    children: /* @__PURE__ */ jsx(
+      Popover$1.Popup,
+      {
+        ref,
+        className: cn(
+          overlayClassNames.popoverSurface,
+          overlayPrimitiveClassNames.popoverSurface,
+          "w-64",
+          className
+        ),
+        style: { zIndex: overlayZIndex.popover, ...style },
+        ...props
+      }
+    )
   }
-) }) });
+) });
 HoverCardContent.displayName = "HoverCardContent";
 var HoverCardTrigger = ({
   asChild,
@@ -5401,18 +5721,6 @@ var inputTokens = {
   },
   focusRingWidth: 3,
   fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
-
-// src/primitives/form-control.ts
-var formControlFocusClassNames = {
-  input: "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
-  textarea: "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30",
-  select: "outline-none focus:border-ring focus:ring-[length:var(--select-focus-ring-width)] focus:ring-ring/30"
-};
-var formControlInvalidClassNames = {
-  input: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
-  textarea: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
-  select: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20"
-};
 var inputVariants = cva(
   [
     "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)]",
@@ -5459,7 +5767,7 @@ var inputVariants = cva(
        * the ring surrounds the whole group rather than a box inside it.
        */
       tone: {
-        bordered: `border border-input bg-background shadow-xs ${formControlFocusClassNames.input}`,
+        bordered: `border border-input bg-background ${formControlFocusClassNames.input}`,
         bare: "border-0 bg-transparent shadow-none"
       }
     },
@@ -5488,7 +5796,7 @@ var inputControlButtonVariants = cva(
   [
     "absolute right-[var(--input-control-inset)] top-1/2 flex size-[var(--input-control-size)] -translate-y-1/2 items-center justify-center",
     "rounded-[var(--radius-sm)] text-muted-foreground transition-colors duration-micro ease-out",
-    "hover:bg-accent hover:text-foreground",
+    "hover:bg-accent hover:text-accent-foreground",
     "focus-visible:outline-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:size-[var(--input-control-icon-size)]"
@@ -5498,7 +5806,7 @@ var fieldMessageVariants = cva("text-xs", {
   variants: {
     tone: {
       description: "text-muted-foreground",
-      error: "font-medium text-destructive"
+      error: "font-medium text-destructive-strong"
     }
   }
 });
@@ -5565,6 +5873,7 @@ var Input = ({
     revealable,
     revealLabel = "Show password",
     hideLabel = "Hide password",
+    clearLabel = "Clear input",
     clearOnEscape,
     wrapperClassName,
     fieldClassName,
@@ -5715,7 +6024,7 @@ var Input = ({
           "button",
           {
             type: "button",
-            "aria-label": "Clear input",
+            "aria-label": clearLabel,
             disabled,
             className: inputControlButtonVariants(),
             style: getInputStyle(size, void 0),
@@ -5787,8 +6096,11 @@ var InputOTP = ({
   children,
   render,
   ref,
-  ...props
+  onValueChange,
+  onChange: legacyOnChange,
+  ...rest
 }) => {
+  const props = { ...rest, onChange: onValueChange ?? legacyOnChange };
   const otpProps = render ? { render, ...props } : { children, ...props };
   return /* @__PURE__ */ jsx(
     OTPInput,
@@ -6090,7 +6402,7 @@ var MenuItem = function MenuItem2({
     /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
     suffix && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex shrink-0 [&_svg]:size-4", children: suffix })
   ] });
-  const errorClass = type === "error" ? "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive" : "";
+  const errorClass = type === "error" ? "text-destructive-strong data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-strong" : "";
   const passthrough = {};
   if (onClick !== void 0) passthrough.onClick = onClick;
   if (disabled !== void 0) passthrough.disabled = disabled;
@@ -6901,6 +7213,7 @@ var MultiSelectContent = ({
   alignOffset = 0,
   width = "md",
   onKeyDown,
+  "aria-label": ariaLabel = "Multi select options",
   ref,
   ...props
 }) => {
@@ -6916,7 +7229,7 @@ var MultiSelectContent = ({
     {
       align,
       alignOffset,
-      className: "z-50",
+      style: { zIndex: overlayZIndex.popover },
       side,
       sideOffset,
       children: /* @__PURE__ */ jsx(
@@ -6924,11 +7237,11 @@ var MultiSelectContent = ({
         {
           ref: composeRefs2(contentRef, ref),
           role: "dialog",
-          "aria-label": "Multi select options",
+          "aria-label": ariaLabel,
           className: cn(
             "z-50 max-h-[var(--multi-select-content-max-height)] w-[var(--multi-select-width)] overflow-y-auto",
             "rounded-[var(--multi-select-content-radius)] border border-border bg-popover p-[var(--multi-select-content-padding)] text-popover-foreground shadow-md outline-none",
-            "transition-[opacity,transform,display] duration-[var(--multi-select-popover-duration)] ease-[var(--multi-select-easing)]",
+            "transition-[opacity,transform] duration-[var(--multi-select-popover-duration)] ease-[var(--multi-select-easing)]",
             "data-starting-style:translate-y-1 data-starting-style:opacity-0 data-ending-style:translate-y-1 data-ending-style:opacity-0",
             "motion-reduce:transition-none motion-reduce:data-starting-style:translate-y-0 motion-reduce:data-ending-style:translate-y-0",
             className
@@ -8355,16 +8668,16 @@ var Progress = function Progress2({
 };
 var variantMap = {
   success: {
-    container: "border-success/40 bg-success/10 text-success fill-success",
-    cta: "text-success decoration-success/50 hover:text-success hover:decoration-success"
+    container: "border-success/40 bg-success/10 text-success-strong fill-success-strong",
+    cta: "text-success-strong decoration-success/50 hover:text-success-strong hover:decoration-success"
   },
   warning: {
-    container: "border-warning/40 bg-warning/10 text-warning fill-warning",
-    cta: "text-warning decoration-warning/50 hover:text-warning hover:decoration-warning"
+    container: "border-warning/40 bg-warning/10 text-warning-strong fill-warning-strong",
+    cta: "text-warning-strong decoration-warning/50 hover:text-warning-strong hover:decoration-warning"
   },
   error: {
-    container: "border-destructive/40 bg-destructive/10 text-destructive fill-destructive",
-    cta: "text-destructive decoration-destructive/50 hover:text-destructive hover:decoration-destructive"
+    container: "border-destructive/40 bg-destructive/10 text-destructive-strong fill-destructive-strong",
+    cta: "text-destructive-strong decoration-destructive/50 hover:text-destructive-strong hover:decoration-destructive"
   },
   info: {
     container: "border-border bg-muted text-foreground fill-foreground",
@@ -8426,13 +8739,15 @@ var itemStyle = {
   "--radio-motion-easing": radioTokens.motion.easing
 };
 var radioControlClassName = cn(
-  "relative inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)] border-[length:var(--radio-border-width)] border-border bg-background text-foreground",
+  "relative inline-flex shrink-0 items-center justify-center rounded-[var(--radius-full)] border-[length:var(--radio-border-width)] border-[var(--control-border)] bg-background text-foreground",
   "size-[var(--radio-control-size)]",
   "transition-[background-color,border-color,box-shadow] duration-[var(--radio-motion-duration)] ease-[var(--radio-motion-easing)]",
-  "after:size-[var(--radio-dot-size)] after:scale-0 after:rounded-[var(--radius-full)] after:bg-current after:opacity-0 after:transition-[opacity,transform] after:duration-[var(--radio-motion-duration)] after:ease-[var(--radio-motion-easing)] after:content-['']",
-  "peer-checked:border-[var(--neutral-12)] peer-checked:after:scale-100 peer-checked:after:opacity-100",
-  "peer-focus-visible:outline-none",
-  "peer-disabled:border-[var(--neutral-5)] peer-disabled:bg-muted peer-disabled:text-[var(--neutral-8)]"
+  "after:size-[var(--radio-dot-size)] after:scale-95 after:rounded-[var(--radius-full)] after:bg-current after:opacity-0 after:transition-[opacity,transform] after:duration-[var(--radio-motion-duration)] after:ease-[var(--radio-motion-easing)] after:content-['']",
+  // "On" is the action colour, as for checkbox / toggle / slider / choicebox —
+  // it was --neutral-12, which only matched the House ink by coincidence.
+  "peer-checked:border-primary peer-checked:text-primary peer-checked:after:scale-100 peer-checked:after:opacity-100",
+  controlFocusProxyClassName,
+  "peer-disabled:border-neutral-5 peer-disabled:bg-muted peer-disabled:text-neutral-8"
 );
 function useRadioGroupContext() {
   return use(RadioGroupContext);
@@ -9091,7 +9406,7 @@ function NativeSelect({
                   style: { borderRadius: "var(--select-radius)" },
                   className: cn(
                     "h-[var(--select-height)] w-full appearance-none rounded-[var(--select-radius)] border font-sans",
-                    "bg-background text-[length:var(--select-font-size)] text-foreground shadow-xs outline-none",
+                    "bg-background text-[length:var(--select-font-size)] text-foreground outline-none",
                     "transition-[background-color,border-color,box-shadow,color] duration-[var(--select-duration)] ease-[var(--select-easing)]",
                     formControlFocusClassNames.select,
                     "disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground",
@@ -9275,7 +9590,7 @@ var SelectTrigger = ({
     ref,
     className: cn(
       "flex h-[var(--select-height)] w-full items-center justify-between whitespace-nowrap rounded-[var(--select-radius)] border border-input bg-background",
-      "px-[var(--select-padding-x)] text-[length:var(--select-font-size)] text-foreground shadow-xs",
+      "px-[var(--select-padding-x)] text-[length:var(--select-font-size)] text-foreground",
       "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
       formControlFocusClassNames.select,
       "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -9309,6 +9624,7 @@ var SelectContent = ({
 }) => /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(
   Select$1.Positioner,
   {
+    style: { zIndex: overlayZIndex.popover },
     alignItemWithTrigger: position === "item-aligned",
     sideOffset: selectTokens.content.sideOffset,
     children: /* @__PURE__ */ jsx(
@@ -9512,6 +9828,7 @@ var SheetContent = ({
   noOverlay = false,
   showClose,
   close,
+  closeLabel = "Close",
   style,
   ref,
   ...props
@@ -9533,7 +9850,7 @@ var SheetContent = ({
           shouldRenderClose ? /* @__PURE__ */ jsxs(
             SheetClose,
             {
-              "aria-label": "Close",
+              "aria-label": closeLabel,
               className: cn(
                 "absolute right-[var(--sheet-close-offset)] top-[var(--sheet-close-offset)] inline-flex size-[var(--sheet-close-size)] items-center justify-center rounded-[var(--sheet-close-radius)] text-muted-foreground",
                 "transition-[background-color,color,box-shadow] duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:bg-muted hover:text-foreground",
@@ -9542,7 +9859,7 @@ var SheetContent = ({
               ),
               children: [
                 /* @__PURE__ */ jsx(Cross, { "aria-hidden": "true", className: "size-[var(--sheet-close-icon-size)]" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
               ]
             }
           ) : null
@@ -9699,13 +10016,7 @@ var ShowMore = ({
       style: cssVars,
       ...props,
       children: [
-        !noBorder && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: cn("h-px flex-1 bg-[var(--neutral-7)]", dividerClassName)
-          }
-        ),
+        !noBorder && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("h-px flex-1 bg-neutral-7", dividerClassName) }),
         /* @__PURE__ */ jsx("div", { className: "shrink-0 bg-background px-[var(--show-more-gap)]", children: /* @__PURE__ */ jsxs(
           "button",
           {
@@ -9739,13 +10050,7 @@ var ShowMore = ({
             ]
           }
         ) }),
-        !noBorder && /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": "true",
-            className: cn("h-px flex-1 bg-[var(--neutral-7)]", dividerClassName)
-          }
-        )
+        !noBorder && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("h-px flex-1 bg-neutral-7", dividerClassName) })
       ]
     }
   );
@@ -10520,6 +10825,7 @@ var SwitchControl = function SwitchControl2({
               "inline-flex h-full w-full items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--switch-control-radius)] px-[var(--switch-control-padding-x)] font-medium text-[length:var(--switch-font-size)]",
               "text-muted-foreground transition-[background-color,box-shadow,color] duration-[var(--switch-duration)] ease-[var(--switch-easing)]",
               "peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-sm",
+              controlFocusProxyClassName,
               "",
               "peer-disabled:pointer-events-none peer-disabled:text-muted-foreground/60",
               "[&_svg]:size-[var(--switch-icon-size)]"
@@ -11030,7 +11336,7 @@ function TabsContent({ className, forceMount, keepMounted, variant, ...props })
   );
 }
 var fieldMessageClassName = "text-xs text-muted-foreground";
-var fieldErrorClassName = "text-xs font-medium text-destructive";
+var fieldErrorClassName = "text-xs font-medium text-destructive-strong";
 function getTextareaStyle(size, style) {
   const token = textareaTokens.sizes[size];
   return {
@@ -11065,6 +11371,7 @@ var Textarea = ({
   description,
   error,
   fieldClassName,
+  tone = "bordered",
   id,
   onChange,
   onValueChange,
@@ -11090,10 +11397,10 @@ var Textarea = ({
     "textarea",
     {
       className: cn(
-        "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)] border border-input bg-background",
-        "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground shadow-xs",
+        "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)]",
+        "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground",
         "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
-        formControlFocusClassNames.textarea,
+        tone === "bordered" ? `border border-input bg-background ${formControlFocusClassNames.textarea}` : "border-0 bg-transparent shadow-none",
         "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
         formControlInvalidClassNames.textarea,
         className
@@ -11164,7 +11471,8 @@ function isThemeSwitcherValue(value) {
 var ThemeSwitcher = ({
   value,
   defaultValue = "system",
-  onChange,
+  onChange: legacyOnChange,
+  onValueChange: onChange = legacyOnChange,
   disabled = false,
   size = "medium",
   name,
@@ -11312,7 +11620,8 @@ function playToggleSound(lastPlayedAt) {
 var ThemeToggle = ({
   value,
   defaultValue,
-  onChange,
+  onChange: legacyOnChange,
+  onValueChange: onChange = legacyOnChange,
   size = "md",
   sound = false,
   applyToDocument = false,
@@ -11724,6 +12033,7 @@ var Toggle = ({
         "aria-hidden": "true",
         className: cn(
           "relative inline-flex h-[var(--toggle-track-height)] w-[var(--toggle-track-width)] items-center rounded-[var(--toggle-radius)] border bg-[var(--toggle-track-off)] p-px",
+          controlFocusProxyClassName,
           "border-[var(--toggle-track-border)] transition-[background-color,border-color] duration-[var(--toggle-duration)] ease-[var(--toggle-easing)]",
           "peer-checked:bg-[var(--toggle-track-on)]",
           "peer-checked:[&>span]:translate-x-[var(--toggle-thumb-translate)] peer-checked:[&>span]:text-[var(--toggle-icon-on)]",
@@ -12264,6 +12574,6 @@ var TreeIcon = ({ icon, hasChildren = false, className, ...props }) => {
 };
 var TreeLabel = ({ className, ...props }) => /* @__PURE__ */ jsx("span", { className: cn("font flex-1 truncate text-sm", className), ...props });
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AlertToolbar, AnimateIn, AnimateInGroup, AnimateSwap, AnimatedThemeToggler, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroup, CodeBlock, Collapse, CollapseGroup, Combobox, ComboboxEmpty, ComboboxGroupSub, ComboboxInput, ComboboxList, ComboboxOptionItem, ComboboxRoot, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandResults, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyCodeButton, CopyIdButton, CopyLinkButton, CopyMenuItem, CopyableField, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuFilterInput, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EmptyStateRoot, ErrorSurface as Error, ErrorMessage, Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gauge, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, LoadingDots, Menu, MenuButton, MenuContainer, MenuItem, MenuItemLocked, MenuLink, MenuSection, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectContent, MultiSelectRoot, MultiSelectRow, MultiSelectTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Note, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPositioner, PopoverTrigger, Progress, ProjectBanner, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Scroller, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, Spinner2 as Spinner, SplitButton, SplitButtonMenuItem, Stack, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, alertVariants, badgeVariants, buttonVariants, containerWidths, flexLayouts, gridLayouts, labelVariants, navigationMenuTriggerStyle, progressIndicatorVariants, progressVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, toggleGroupItemVariants, toggleGroupVariants, useCopyToClipboard, useFormField, useToasts, zIndex };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertContent, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertIcon, AlertTitle, AlertToolbar, AnimateIn, AnimateInGroup, AnimateSwap, AnimatedThemeToggler, AspectRatio, Avatar, AvatarFallback, AvatarGroup, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, ButtonLink, Card, CardBody, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardRoot, CardTitle, Checkbox, CheckboxGroup, CodeBlock, Collapse, CollapseGroup, Combobox, ComboboxEmpty, ComboboxGroupSub, ComboboxInput, ComboboxList, ComboboxOptionItem, ComboboxRoot, ComboboxSeparator, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandResults, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuRoot, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, CopyButton, CopyCodeButton, CopyIdButton, CopyLinkButton, CopyMenuItem, CopyableField, Description, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuFilterInput, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateIcon, EmptyStateRoot, ErrorSurface as Error, ErrorMessage, Field, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Gauge, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Kbd, Label, LoadingDots, Menu, MenuButton, MenuContainer, MenuItem, MenuItemLocked, MenuLink, MenuSection, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Modal, MultiSelectContent, MultiSelectRoot, MultiSelectRow, MultiSelectTrigger, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Note, Pagination, Popover, PopoverAnchor, PopoverContent, PopoverPositioner, PopoverTrigger, Progress, ProjectBanner, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, Scroller, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator2 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, ShowMore, Skeleton, SkeletonAvatar, SkeletonCard, SkeletonText, Slider, Spinner2 as Spinner, SplitButton, SplitButtonMenuItem, Stack, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableCol, TableColgroup, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeSwitcher, ThemeToggle, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TreeExpander, TreeIcon, TreeLabel, TreeLines, TreeNode, TreeNodeContent, TreeNodeTrigger, TreeProvider, TreeView, alertVariants, badgeVariants, buttonVariants, cardVariants, containerWidths, flexLayouts, gridLayouts, labelVariants, navigationMenuTriggerStyle, progressIndicatorVariants, progressVariants, tabsContentVariants, tabsListVariants, tabsTriggerVariants, toggleGroupItemVariants, toggleGroupVariants, useCopyToClipboard, useFormField, useToasts, zIndex };
 //# sourceMappingURL=canonical.js.map
 //# sourceMappingURL=canonical.js.map