@spree/dashboard-ui 6.0.2 → 6.0.4

package/src/ui/alert.tsx

@@ -4,23 +4,22 @@ import * as React from 'react'
 import { cn } from '../lib/utils'
 
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "group/alert relative grid w-full gap-0.5 rounded-card px-3.5 py-3 text-left text-base has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-20 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        default: 'bg-card text-card-foreground',
-        destructive:
-          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
-        // Custom colours, per the shadcn recipe: a tinted fill with matching
-        // text rather than the card background, so an advisory note reads as
-        // information instead of as a card of its own. Mirrors the `success`
-        // recipe in badge.tsx, including the dark-mode text bump for legibility.
-        info: 'border-blue-500/20 bg-blue-500/10 text-blue-800 *:data-[slot=alert-description]:text-blue-800/90 dark:text-blue-300 dark:*:data-[slot=alert-description]:text-blue-300/90',
-        // Amber rather than the `--color-warning` token, which is yellow-500 —
-        // a fill colour too light to read as body text. Amber is what the rest
-        // of the dashboard already uses to mark a warning.
-        warning:
-          'border-amber-500/20 bg-amber-500/10 text-amber-800 *:data-[slot=alert-description]:text-amber-800/90 dark:text-amber-300 dark:*:data-[slot=alert-description]:text-amber-300/90',
+        // Borderless: the fill alone sets an alert apart. A plain note takes a
+        // card's fill and lift, so it sits among the cards around it.
+        default: 'bg-card text-card-foreground shadow-card-lift',
+        // The status variants read off the badges' status ramps — their text
+        // step over the ramp's quieter `surface` fill, which suits a block of
+        // copy. Solid colours rather than one hue at an opacity, which
+        // takes on whatever sits behind it and washes out on a dark card. The
+        // description keeps the variant's colour, a little softer than the
+        // title.
+        destructive: 'bg-danger-surface text-danger *:data-[slot=alert-description]:text-danger/85',
+        info: 'bg-info-surface text-info *:data-[slot=alert-description]:text-info/85',
+        warning: 'bg-warning-surface text-warning *:data-[slot=alert-description]:text-warning/85',
       },
     },
     defaultVariants: {
@@ -49,7 +48,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="alert-title"
       className={cn(
-        'font-semibold group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+        'font-semibold group-has-[>svg]/alert:col-start-2 [&_a]:text-link [&_a]:transition-colors [&_a]:hover:text-link-hover',
         className,
       )}
       {...props}
@@ -62,7 +61,7 @@ function AlertDescription({ className, ...props }: React.ComponentProps<'div'>)
     <div
       data-slot="alert-description"
       className={cn(
-        'text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+        'text-base text-balance text-muted-foreground md:text-pretty [&_a]:text-link [&_a]:transition-colors [&_a]:hover:text-link-hover [&_p:not(:last-child)]:mb-4',
         className,
       )}
       {...props}
@@ -72,7 +71,11 @@ function AlertDescription({ className, ...props }: React.ComponentProps<'div'>)
 
 function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
   return (
-    <div data-slot="alert-action" className={cn('absolute top-2 right-2', className)} {...props} />
+    <div
+      data-slot="alert-action"
+      className={cn('absolute top-2.5 right-3', className)}
+      {...props}
+    />
   )
 }
 

package/src/ui/attachment.tsx

@@ -96,7 +96,7 @@ function AttachmentTitle({ className, ...props }: React.ComponentProps<'span'>)
   return (
     <span
       data-slot="attachment-title"
-      className={cn('block max-w-full min-w-0 truncate font-medium text-sm', className)}
+      className={cn('block max-w-full min-w-0 truncate font-medium text-base', className)}
       {...props}
     />
   )

package/src/ui/avatar.tsx

@@ -41,7 +41,7 @@ function AvatarFallback({
     <AvatarPrimitive.Fallback
       data-slot="avatar-fallback"
       className={cn(
-        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs uppercase',
+        'flex size-full items-center justify-center rounded-full bg-muted text-base text-muted-foreground group-data-[size=sm]/avatar:text-xs uppercase',
         className,
       )}
       {...props}
@@ -83,7 +83,7 @@ function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>)
     <div
       data-slot="avatar-group-count"
       className={cn(
-        'relative flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        'relative flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-base text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
         className,
       )}
       {...props}

package/src/ui/badge.tsx

@@ -272,7 +272,7 @@ function StatusBadge({
       data-slot="status-badge"
       data-status={status}
       className={cn(
-        'inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap text-sm capitalize',
+        'inline-flex w-fit shrink-0 items-center gap-1.5 whitespace-nowrap text-base capitalize',
         className,
       )}
     >

package/src/ui/breadcrumb.tsx

@@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        'flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground',
+        'flex flex-wrap items-center gap-1.5 text-base wrap-break-word text-muted-foreground',
         className,
       )}
       {...props}

package/src/ui/button.tsx

@@ -4,23 +4,26 @@ import { cn } from '../lib/utils'
 import { Slot } from './slot'
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-lg border border-transparent text-sm font-medium whitespace-nowrap cursor-pointer select-none no-underline transition-[color,background-color,border-color,box-shadow,transform,translate,scale] duration-100 ease-out outline-none active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:border-blue-500 focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center gap-2 rounded-xl border border-transparent text-base font-medium whitespace-nowrap cursor-pointer select-none no-underline transition-[color,background-color,border-color,box-shadow,transform,translate,scale] duration-100 ease-out outline-none active:scale-[0.98] motion-reduce:active:scale-100 focus-visible:border-blue-500 focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:pointer-events-none disabled:opacity-70 disabled:cursor-not-allowed aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
-        // `shadow-xs` like the outline and destructive variants: the primary
-        // action is the one thing on a page that should sit slightly above it,
-        // and it was the only variant with no lift at all.
-        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/85',
+        // Buttons with chrome (primary, outline, destructive) take the field's
+        // `shadow-control`, so a button and the field beside it share one lift.
+        // Disabled drops the fill rather than fading it: a faded black (or, in
+        // dark mode, white) pill still reads as the page's live primary action.
+        default:
+          'bg-primary text-primary-foreground shadow-control hover:bg-primary/85 disabled:border-border disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100 disabled:shadow-none',
         outline:
-          'border-border/80 bg-card shadow-xs text-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-accent',
+          'border-border/80 bg-card shadow-control text-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-accent',
         // `group-hover/row:` — inside a hovered table row the row already wears
         // --accent, so repeating it here leaves the button at 1.03:1 against its
         // own background: invisible exactly when the pointer is on it. On a
         // hovered row it steps to --accent-strong instead.
         ghost:
           'hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent group-hover/row:hover:bg-accent-strong',
-        destructive: 'text-destructive bg-card border-border shadow-xs hover:bg-destructive/10',
+        destructive:
+          'text-destructive bg-card border-border shadow-control hover:bg-destructive/10',
         // Ghost's chrome (none until hover) with destructive's colour. The
         // inline remove buttons that sit inside a row or field want no box of
         // their own, but still need the red tint on hover rather than ghost's
@@ -30,12 +33,12 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-9 px-3 py-1.5',
-        xs: "h-6 gap-1 rounded-md px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        sm: "h-7 gap-1 rounded-md px-2 py-1 text-sm [&_svg:not([class*='size-'])]:size-3.5",
+        xs: "h-6 gap-1 rounded-lg px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-lg px-2 py-1 text-base [&_svg:not([class*='size-'])]:size-3.5",
         lg: 'h-10 px-3 py-2 text-base',
         icon: 'size-9',
-        'icon-xs': "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
-        'icon-sm': 'size-7 rounded-md',
+        'icon-xs': "size-6 rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm': 'size-7 rounded-lg',
         'icon-lg': 'size-10',
       },
     },

package/src/ui/calendar.tsx

@@ -22,7 +22,7 @@ function Calendar({
         months: 'flex flex-col sm:flex-row gap-2 relative',
         month: 'flex flex-col gap-4',
         month_caption: 'flex justify-center pt-1 relative items-center w-full',
-        caption_label: 'text-sm font-medium',
+        caption_label: 'text-base font-medium',
         nav: 'absolute top-1 inset-x-0 flex items-center justify-between px-1 z-10',
         button_previous:
           'inline-flex size-7 items-center justify-center rounded-md border border-border bg-transparent p-0 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground',
@@ -32,7 +32,7 @@ function Calendar({
         weekdays: 'flex',
         weekday: 'text-muted-foreground rounded-md w-8 font-normal text-xs',
         week: 'flex w-full mt-2',
-        day: 'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-blue-50 [&:has([aria-selected].day-outside)]:bg-blue-50/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
+        day: 'relative p-0 text-center text-base focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-blue-50 [&:has([aria-selected].day-outside)]:bg-blue-50/50 [&:has([aria-selected].day-range-end)]:rounded-r-md',
         day_button: cn(
           'inline-flex size-8 items-center justify-center rounded-md p-0 font-normal transition-colors',
           'hover:bg-accent hover:text-foreground',

package/src/ui/card.tsx

@@ -4,48 +4,29 @@ import { cn } from '../lib/utils'
 
 function Card({
   className,
-  variant = 'default',
+  variant: _variant,
   ...props
 }: React.ComponentProps<'div'> & {
   /**
-   * `nested` is one resource listed inside a card — a fulfillment on an order,
-   * a return, a rule. It sits on a recessed surface so it reads as a thing
-   * *within* the card rather than another card beside it, and carries its own
-   * horizontal padding so its sections divide edge to edge.
-   *
-   * The box is load-bearing once there is more than one of them: a fulfillment
-   * already divides its own rows, so grouping by rules alone would draw the
-   * boundary between two fulfillments as the same line at the same inset as
-   * the boundary between two items — and the panel's own actions would have no
-   * visible owner.
-   *
-   * `container` is the card those nested records sit in. Pair the two: the
-   * container recedes, the records stay raised. A `default` card wrapping
-   * `nested` ones puts the content in a well and the frame in front of it,
-   * which reads as the content being demoted.
+   * @deprecated Every card renders the same; the prop is accepted so plugin
+   * code that passes it keeps compiling. Group records under a `Section`
+   * heading, one plain card each, instead of nesting cards.
    */
   variant?: 'default' | 'nested' | 'container'
 }) {
   return (
     <div
       data-slot="card"
-      data-variant={variant}
       className={cn(
         // `overflow-x-clip`: a wide child (a table sized to its columns) otherwise
         // propagates its width up through every `overflow: visible` ancestor to
         // the document, laying the whole page out wider than the viewport. `clip`
         // rather than `hidden` so `overflow-y` stays `visible` and sticky
         // descendants keep resolving against the page.
-        'group/card flex flex-col min-w-0 overflow-x-clip break-words text-card-foreground shadow-xs',
-        variant === 'nested' &&
-          'rounded-lg border border-border-subtle bg-nested-raised px-3 shadow-none',
-        // Holds nested records rather than content, so it recedes and lets
-        // them be the raised, readable thing.
-        variant === 'container' && 'rounded-xl border border-border-card bg-card-container',
-        // `--border-card`, not `--border`: a card is a region of the sheet
-        // rather than a surface floating above it, so its edge is softer than
-        // the structural one the sheet, dialogs and dropdowns draw.
-        variant === 'default' && 'rounded-xl border border-border-card bg-card',
+        'group/card flex flex-col min-w-0 overflow-x-clip break-words text-card-foreground',
+        // A faint border and a wide, soft lift (`--card-shadow`; none in
+        // dark mode).
+        'rounded-card border border-card-edge bg-card shadow-card-lift',
         className,
       )}
       {...props}
@@ -58,7 +39,7 @@ function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-header"
       className={cn(
-        'group/card-header @container/card-header grid auto-rows-min items-start gap-1 group-data-[size=sm]/card:px-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] px-3 py-2.5 border-b border-border-subtle rounded-t-[calc(var(--radius-2xl)-1px)] group-data-[variant=nested]/card:rounded-none group-data-[variant=nested]/card:px-0 group-data-[variant=nested]/card:py-2 group-data-[variant=nested]/card:items-center',
+        'group/card-header @container/card-header grid auto-rows-min items-center gap-1 group-data-[size=sm]/card:px-3.5 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] mx-4 pt-3 pb-2 rounded-t-[calc(var(--radius-card)-1px)]',
         className,
       )}
       {...props}
@@ -82,7 +63,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<'div'>) {
   return (
     <div
       data-slot="card-description"
-      className={cn('text-sm text-muted-foreground text-left', className)}
+      className={cn('text-base text-muted-foreground text-left', className)}
       {...props}
     />
   )
@@ -93,13 +74,7 @@ function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
-  return (
-    <div
-      data-slot="card-content"
-      className={cn('p-3 group-data-[variant=nested]/card:px-0', className)}
-      {...props}
-    />
-  )
+  return <div data-slot="card-content" className={cn('p-4', className)} {...props} />
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
@@ -107,7 +82,9 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="card-footer"
       className={cn(
-        'flex items-center p-3 bg-transparent border-t border-border-subtle rounded-b-[calc(var(--radius-xl)-1px)] group-data-[variant=nested]/card:rounded-none group-data-[variant=nested]/card:px-0',
+        // Side margin, not padding, so the top rule stops short of the card's
+        // edges and reads as a divider inside it.
+        'mx-4 flex items-center py-4 bg-transparent border-t border-border-subtle',
         className,
       )}
       {...props}

package/src/ui/chart.tsx

@@ -69,7 +69,7 @@ export function ChartTooltipContent({
   const formattedLabel = labelFormatter ? labelFormatter(label ?? '') : label
 
   return (
-    <div className={cn('rounded-lg border bg-background px-3 py-2 text-sm shadow-md', className)}>
+    <div className={cn('rounded-lg border bg-background px-3 py-2 text-base shadow-md', className)}>
       <div className="mb-1 font-medium">{formattedLabel}</div>
       <div className="flex flex-col gap-0.5">
         {payload.map((item, i) => {

package/src/ui/checkbox.tsx

@@ -25,7 +25,7 @@ function Checkbox({
       disabled={disabled}
       name={name}
       className={cn(
-        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-[4px] border border-border shadow-xs bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
+        'peer relative inline-block size-4 shrink-0 cursor-pointer rounded-[4px] border border-field-border shadow-control bg-card align-[-3px] outline-none transition-[color,background-color,border-color,box-shadow] duration-100 ease-out',
         // The 16px box is the right *visual* size in a dense table, but on its
         // own it is a 16px target — under the 24px WCAG 2.2 asks for, on the
         // control every bulk action starts from. A pseudo-element extends the
@@ -34,7 +34,7 @@ function Checkbox({
         // bridge, which would otherwise swallow presses in the padded margin
         // and navigate instead of selecting.
         "before:absolute before:inset-[-9px] before:z-1 before:content-['']",
-        'focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'focus:border-blue-500 focus:shadow-field-focus',
         'disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground',
         'aria-invalid:border-destructive aria-invalid:ring-destructive/20',
         'data-[checked]:border-blue-500 data-[checked]:bg-blue-500 data-[checked]:text-white',

package/src/ui/code-editor.tsx

@@ -71,7 +71,11 @@ const theme = EditorView.theme({
     fontSize: '13px',
     height: '100%',
   },
-  '.cm-scroller': { fontFamily: 'var(--font-mono, ui-monospace, monospace)', lineHeight: '1.6' },
+  '.cm-scroller': {
+    fontFamily: 'var(--font-mono, ui-monospace, monospace)',
+    fontFeatureSettings: 'var(--default-mono-font-feature-settings, normal)',
+    lineHeight: '1.6',
+  },
   '.cm-content': { caretColor: 'var(--foreground)' },
   '.cm-gutters': {
     backgroundColor: 'var(--background)',
@@ -238,7 +242,7 @@ function CodeEditor({
       ref={containerRef}
       data-slot="code-editor"
       className={cn(
-        'min-h-64 overflow-hidden rounded-md border border-border bg-card shadow-control focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)]',
+        'min-h-64 overflow-hidden rounded-xl border border-field-border bg-card shadow-control focus-within:border-blue-500 focus-within:shadow-field-focus',
         className,
       )}
     />

package/src/ui/collapsible.tsx

@@ -1,5 +1,6 @@
 import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible'
 import type * as React from 'react'
+import { cn } from '../lib/utils'
 
 function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
   return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
@@ -11,8 +12,26 @@ function CollapsibleTrigger({
   return <CollapsiblePrimitive.Trigger data-slot="collapsible-trigger" {...props} />
 }
 
-function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Panel>) {
-  return <CollapsiblePrimitive.Panel data-slot="collapsible-content" {...props} />
+/**
+ * Opens and closes by sliding its height, which Base UI measures into
+ * `--collapsible-panel-height`, and fading so rows aren't sliced by the
+ * moving edge. Same timing as the chevrons that toggle it. Instant under
+ * reduced motion.
+ */
+function CollapsibleContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Panel>) {
+  return (
+    <CollapsiblePrimitive.Panel
+      data-slot="collapsible-content"
+      className={cn(
+        'h-[var(--collapsible-panel-height)] overflow-hidden transition-[height,opacity] duration-200 ease-out data-[ending-style]:h-0 data-[ending-style]:opacity-0 data-[starting-style]:h-0 data-[starting-style]:opacity-0 motion-reduce:transition-none',
+        className,
+      )}
+      {...props}
+    />
+  )
 }
 
 export { Collapsible, CollapsibleContent, CollapsibleTrigger }

package/src/ui/combobox.tsx

@@ -3,8 +3,9 @@
 import { Combobox as ComboboxPrimitive } from '@base-ui/react'
 import i18n from 'i18next'
 import * as React from 'react'
+import { fieldTriggerClassName } from '../lib/field-trigger'
 import { cn } from '../lib/utils'
-import { CheckIcon, ChevronDownIcon, XIcon } from '../spree/icons'
+import { CheckIcon, ChevronsUpDownIcon, XIcon } from '../spree/icons'
 import { Button } from './button'
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group'
 
@@ -48,7 +49,7 @@ function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Tr
       {...props}
     >
       {children}
-      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      <ChevronsUpDownIcon className="pointer-events-none size-4 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -82,14 +83,11 @@ function ComboboxButtonTrigger({
     <ComboboxPrimitive.Trigger
       data-slot="combobox-button-trigger"
       data-size={size}
-      className={cn(
-        "group/combobox-trigger flex w-full min-h-8 cursor-pointer items-center justify-between gap-1.5 rounded-md border border-border shadow-control bg-card py-1.5 pr-2 pl-2.5 text-base font-normal leading-normal text-foreground transition-[color,background-color,border-color,box-shadow] duration-100 ease-out outline-none select-none focus:border-blue-500 focus:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground aria-invalid:border-destructive data-[size=sm]:shadow-control data-[size=sm]:h-8 data-[size=sm]:min-h-8 data-[size=sm]:gap-2 data-[size=sm]:px-2 data-[size=sm]:py-1 data-[size=sm]:text-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
+      className={cn('group/combobox-trigger', fieldTriggerClassName, className)}
       {...props}
     >
       <span className="flex min-w-0 items-center gap-2 truncate">{children}</span>
-      <ChevronDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground group-data-[size=sm]/combobox-trigger:size-3.5" />
+      <ChevronsUpDownIcon className="pointer-events-none size-4 shrink-0 text-muted-foreground group-data-[size=sm]/combobox-trigger:size-3.5" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -218,7 +216,7 @@ function ComboboxContent({
             // picker: the list re-renders as the user filters, and options
             // arriving mid-transition sit at `opacity-0` long enough to be
             // unclickable. The keyframes make the panel opaque immediately.
-            'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            'group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-xl bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-input/30 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:shadow-none data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
             className,
           )}
           {...props}
@@ -289,7 +287,7 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {
     <ComboboxPrimitive.Empty
       data-slot="combobox-empty"
       className={cn(
-        'hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex',
+        'hidden w-full justify-center py-2 text-center text-base text-muted-foreground group-data-empty/combobox-content:flex',
         className,
       )}
       {...props}
@@ -321,7 +319,7 @@ function ComboboxChips({
         // resize lets the positioner follow the anchor smoothly; making it
         // instant jumps the open popup out from under the pointer, so the next
         // option click lands on nothing.
-        'flex flex-wrap items-center gap-1.5 rounded-md border border-border shadow-control bg-card text-foreground px-2.5 py-1.5 text-base transition-all duration-100 ease-out focus-within:border-blue-500 focus-within:shadow-[0_0_0_3px_color-mix(in_srgb,var(--ring)_15%,transparent)] has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:p-1.5',
+        'flex flex-wrap items-center gap-1.5 rounded-xl border border-field-border shadow-control bg-card text-foreground px-2.5 py-1.5 text-base transition-all duration-100 ease-out not-focus-within:hover:bg-field-hover focus-within:border-blue-500 focus-within:shadow-field-focus has-aria-invalid:border-destructive has-data-[slot=combobox-chip]:p-1.5',
         className,
       )}
       {...props}
@@ -345,11 +343,9 @@ function ComboboxChip({
         // was shorter than the remove button inside it, and left the label with
         // no vertical breathing room at any screen size.
         //
-        // Fill matches the highlighted row in the list below (`bg-accent`): a
-        // chip and a selected option are the same thing at two moments, so they
-        // read as the same thing. `bg-muted` sat within 1.03:1 of the field it
-        // sits on, which left the chips barely visible.
-        'flex min-h-7 w-fit max-w-full items-center justify-center gap-1 rounded-sm bg-accent py-1 pl-2.5 pr-2 text-sm font-base text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-1',
+        // Outlined, so a chip keeps its edge while the field under it takes its
+        // hover fill; a fill alone matched that hover and the chip vanished.
+        'flex min-h-7 w-fit max-w-full items-center justify-center gap-1 rounded-sm bg-accent/50 border py-1 pl-2.5 pr-2 text-base font-base text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-1',
         className,
       )}
       {...props}
@@ -358,7 +354,7 @@ function ComboboxChip({
       {showRemove && (
         <ComboboxPrimitive.ChipRemove
           render={<Button variant="ghost" size="icon-sm" />}
-          className="size-6 shrink-0 opacity-50 hover:opacity-100"
+          className="size-6 shrink-0 opacity-50 hover:bg-transparent hover:opacity-100"
           data-slot="combobox-chip-remove"
           // Names the chip it clears ("Remove Wholesale") rather than a bare
           // "Remove": several sit side by side, and a dialog's own submit

package/src/ui/command.tsx

@@ -91,10 +91,6 @@ function CommandDialog({
 }) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
       <DialogContent
         // `-translate-x-1/2` must be restated alongside `translate-y-0`: in
         // Tailwind v4 both compile to the standalone `translate` property, so
@@ -106,6 +102,12 @@ function CommandDialog({
         )}
         showCloseButton={showCloseButton}
       >
+        {/* Inside the popup: the dialog is named by a title within it, and a
+            header beside it would stay in the page while the dialog is shut. */}
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
         {children}
       </DialogContent>
     </Dialog>
@@ -199,7 +201,7 @@ function CommandEmpty({ className, ...props }: React.ComponentProps<'div'>) {
     <div
       data-slot="command-empty"
       className={cn(
-        'py-10 text-center text-sm text-muted-foreground group-has-[[data-slot=command-item]]/command-list:hidden',
+        'py-10 text-center text-base text-muted-foreground group-has-[[data-slot=command-item]]/command-list:hidden',
         className,
       )}
       {...props}
@@ -278,7 +280,7 @@ function CommandItem({
       value={value}
       onClick={() => onSelect?.(text)}
       className={cn(
-        "group/command-item relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent-strong data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-highlighted:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-pointer items-center gap-3 rounded-md px-3 py-2.5 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent-strong data-highlighted:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-highlighted:*:[svg]:text-foreground",
         className,
       )}
       {...props}

package/src/ui/context-menu.tsx

@@ -68,7 +68,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-sm outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group/context-menu-item relative flex cursor-pointer items-center gap-3 rounded-lg px-2 py-1.5 text-base outline-hidden select-none transition-colors duration-75 focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}