@adea-ai/ui 0.82.1 → 0.82.2

package/dist/r/src/components/ui/command/command.tsx

@@ -10,17 +10,20 @@ import {
   CommandSeparator as CmdkSeparator,
   useCommandState,
 } from 'cmdk-solid'
+import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
 import { Search } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
+import { createDialogFocusRestoration } from '../dialog/dialog'
 import { menuItem } from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
-// cmdk emits data-disabled="false" on enabled items; Kobalte omits it.
-// Presence selectors would dim and disable every command in an app palette.
+// cmdk emits data-disabled="false" on enabled items, unlike the presence-only
+// attributes Kobalte menu rows use. Apply those shared disabled styles only when
+// cmdk's value is true.
 const commandItem = menuItem
   .replace('data-[disabled]:pointer-events-none', '')
-  .replace('data-[disabled]:opacity-50', '')
+  .replace('data-[disabled]:text-muted-foreground', '')
 
 /**
  * Command.
@@ -52,26 +55,76 @@ export function Command(props: ComponentProps<typeof CmdkRoot>) {
   )
 }
 
-export function CommandDialog(props: ComponentProps<typeof CmdkDialog>) {
-  // cmdk's Dialog splits `contentClassName` onto the role="dialog" content
-  // element and routes every other prop (including `class`) to the inner
-  // Command. The surface must live on the content: a `class` here styles the
-  // Command (fixed, so visible) while the dialog element itself renders as an
-  // unstyled zero-height wrapper at the end of body — invisible to role
-  // queries and axe.
-  const [local, rest] = splitProps(props, ['class'])
+type CommandDialogProps = ComponentProps<typeof CmdkDialog> &
+  Pick<ComponentProps<typeof KobalteDialog.Content>, 'onCloseAutoFocus' | 'onOpenAutoFocus'>
+
+export function CommandDialog(props: CommandDialogProps) {
+  // cmdk-solid's Dialog does not forward Content autofocus props: unknown
+  // props fall through to its Command root. Compose Kobalte's dialog surface
+  // here so Escape and other close paths can restore focus to the real opener.
+  // Preserve the shared wrapper's `class` contract on the dialog surface;
+  // `contentClassName` adds to it, while the nested Command keeps its own API.
+  const [local, dialogProps, commandProps] = splitProps(
+    props,
+    [
+      'class',
+      'contentClassName',
+      'overlayClassName',
+      'container',
+      'onCloseAutoFocus',
+      'onOpenAutoFocus',
+    ],
+    [
+      'open',
+      'defaultOpen',
+      'onOpenChange',
+      'id',
+      'modal',
+      'preventScroll',
+      'forceMount',
+      'translations',
+    ]
+  )
+  const [isOpen, setIsOpen] = createSignal(dialogProps.open ?? dialogProps.defaultOpen ?? false)
+
+  createEffect(() => {
+    if (dialogProps.open !== undefined) setIsOpen(dialogProps.open)
+  })
+
+  const focus = createDialogFocusRestoration({
+    open: isOpen,
+    onCloseAutoFocus: local.onCloseAutoFocus,
+    onOpenAutoFocus: local.onOpenAutoFocus,
+  })
 
   return (
-    <CmdkDialog
-      contentClassName={cn(
-        'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-xl border border-border shadow-xl',
-        'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
-        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-        local.class
-      )}
-      {...rest}
-    />
+    <KobalteDialog
+      {...dialogProps}
+      onOpenChange={(open) => {
+        setIsOpen(open)
+        dialogProps.onOpenChange?.(open)
+      }}
+    >
+      <KobalteDialog.Portal mount={local.container}>
+        <KobalteDialog.Overlay cmdk-overlay="" class={local.overlayClassName} />
+        <KobalteDialog.Content
+          aria-label={commandProps.label}
+          cmdk-dialog=""
+          class={cn(
+            'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
+            'overflow-hidden rounded-xl border border-border shadow-xl',
+            'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+            'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            local.class,
+            local.contentClassName
+          )}
+          onOpenAutoFocus={focus.onOpenAutoFocus}
+          onCloseAutoFocus={focus.onCloseAutoFocus}
+        >
+          <Command {...commandProps} />
+        </KobalteDialog.Content>
+      </KobalteDialog.Portal>
+    </KobalteDialog>
   )
 }
 
@@ -188,8 +241,8 @@ export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
     <CmdkItem
       class={cn(
         commandItem,
-        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-        'text-popover-foreground data-[selected=true]:bg-surface-hover data-[selected=true]:text-popover-foreground',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-muted-foreground',
+        'group/command-item text-popover-foreground data-[selected=true]:bg-card data-[selected=true]:text-popover-foreground',
         local.class
       )}
       {...rest}
@@ -212,18 +265,17 @@ export function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {
   )
 }
 
-/**
- * The keyboard hint a palette item usually carries.
- * Muted canvas text can fail contrast on a raised or selected command row;
- * hierarchy comes from its size and monospace face, with the row's readable ink.
- */
+/** The keyboard hint a palette item usually carries. */
 export function CommandShortcut(props: {
   class?: string
   children?: ComponentProps<'span'>['children']
 }) {
   return (
     <span
-      class={cn('text-popover-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
+      class={cn(
+        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',
+        props.class
+      )}
     >
       {props.children}
     </span>

package/dist/r/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -25,13 +25,17 @@ import { cn } from '../../../lib/utils'
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
+ * Menus are nonmodal by default so their generated focus guards do not become
+ * invalid direct children of the ARIA menu. Set `modal` explicitly when the
+ * surrounding interaction needs modal containment.
  *
  * The `destructive` variant marks the row with a status-coloured edge and
  * highlighted tint while keeping its label on the body foreground. Pairing it
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  return <KobalteDropdownMenu {...props} />
+  const [local, rest] = splitProps(props, ['modal'])
+  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {

package/dist/r/src/components/ui/status-chip/status-chip.tsx

@@ -59,6 +59,8 @@ export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' |
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone
   label: string
+  /** Visually hide the text while preserving it for assistive technology. */
+  compact?: boolean
   /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
   detail?: string
   /** A trailing slot: a timestamp, a retry affordance, a count. */
@@ -66,7 +68,14 @@ export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
 }
 
 export function StatusChip(props: StatusChipProps) {
-  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])
+  const [local, rest] = splitProps(props, [
+    'tone',
+    'label',
+    'compact',
+    'detail',
+    'trailing',
+    'class',
+  ])
 
   const chip = (
     <span
@@ -78,7 +87,7 @@ export function StatusChip(props: StatusChipProps) {
       {...rest}
     >
       <span class={statusDotVariants({ tone: local.tone })} aria-hidden="true" />
-      {local.label}
+      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>
       {local.trailing}
     </span>
   )

package/dist/r/src/lib/overlay.ts

@@ -54,7 +54,7 @@ export const menuItem = [
   'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',
   'transition-colors ease-out',
   'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',
-  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',
   '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
   '[&_svg:not([class*=text-])]:text-muted-foreground',
 ].join(' ')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.82.1",
+  "version": "0.82.2",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -442,10 +442,12 @@
       "title": "Command",
       "description": "",
       "dependencies": [
+        "@kobalte/core@^0.13.14",
         "cmdk-solid@^1.2.0",
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/dialog",
         "lib"
       ],
       "files": [

package/src/components/composites/appearance-editor/appearance-choices.tsx

@@ -93,9 +93,7 @@ export function AccentChoices(props: AppearanceEditorProps) {
       disabled={props.saving}
       orientation="horizontal"
       aria-label="Accent"
-      /* Narrow hosts wrap the swatches into a three-column grid so the row
-         control stays beside its label; wide hosts keep one inline row. */
-      class="grid grid-cols-3 items-center gap-2 sm:flex sm:flex-wrap sm:justify-end"
+      class="flex flex-wrap items-center gap-2"
       onChange={(accent) =>
         props.onChange({
           accent: accent === 'custom' ? (props.customAccentValue ?? '') : accent,
@@ -104,11 +102,11 @@ export function AccentChoices(props: AppearanceEditorProps) {
     >
       <Radio.Item value="theme">
         <Radio.ItemInput />
-        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
+        <Radio.ItemLabel class="flex h-7 cursor-pointer items-center rounded-md border px-2 text-xs whitespace-nowrap data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
           Theme default
         </Radio.ItemLabel>
       </Radio.Item>
-      <div class="col-span-3 grid grid-cols-3 gap-2 sm:col-span-1 sm:flex sm:gap-2">
+      <div class="flex max-w-full flex-wrap gap-2">
         <For each={props.accentOptions}>
           {(option) => (
             <Radio.Item

package/src/components/composites/appearance-editor/appearance-rows.tsx

@@ -60,9 +60,15 @@ export function SettingsRow(props: {
 }) {
   return (
     <section
-      class={cn('flex flex-col gap-3 px-4 py-4', { 'sm:flex-row sm:items-center': !props.stacked })}
+      class={cn('flex gap-3 px-4 py-4', {
+        'flex-col': props.stacked,
+        'flex-wrap items-center': !props.stacked,
+      })}
     >
-      <div class="flex min-w-0 flex-1 items-center gap-3">
+      {/* Reserve readable copy before choosing a side-by-side control row.
+          Wrapping follows the actual host width and enlarged text, rather
+          than a viewport breakpoint that also matches a narrow popover. */}
+      <div class={cn('flex min-w-0 flex-1 items-center gap-3', { 'basis-48': !props.stacked })}>
         <span
           class="flex size-9 shrink-0 items-center justify-center rounded-lg border bg-foreground/5 text-muted-foreground [&_svg]:size-4"
           aria-hidden="true"
@@ -76,7 +82,7 @@ export function SettingsRow(props: {
           </Show>
         </div>
       </div>
-      <div class="min-w-0 shrink-0">{props.children}</div>
+      <div class="min-w-0 max-w-full shrink-0">{props.children}</div>
     </section>
   )
 }

package/src/components/layout/side-rail/side-rail.tsx

@@ -329,9 +329,13 @@ export function SideRailItem<T extends ValidComponent = 'a'>(props: SideRailItem
 
 /** A non-navigating rail control: a collapse toggle, a "new" action. */
 export function SideRailButton(
-  props: Omit<ComponentProps<'button'>, 'type'> & { label: string; shortcut?: string }
+  props: Omit<ComponentProps<'button'>, 'type'> & {
+    label: string
+    shortcut?: string
+    active?: boolean
+  }
 ) {
-  const [local, rest] = splitProps(props, ['class', 'label', 'shortcut', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'label', 'shortcut', 'children', 'active'])
   const [row, setRow] = createSignal<HTMLElement>()
   const [tip, setTip] = createSignal<{ top: number; left: number; height: number } | null>(null)
 
@@ -351,13 +355,14 @@ export function SideRailButton(
         type="button"
         ref={setRow}
         aria-label={local.label}
+        data-active={local.active ? 'true' : undefined}
         onPointerEnter={showTip}
         onPointerLeave={() => setTip(null)}
         onFocus={showTip}
         onBlur={() => setTip(null)}
         class={cn(
           sideRailItemClass,
-          sideRailItemStateClass.idle,
+          local.active ? sideRailItemStateClass.active : sideRailItemStateClass.idle,
           'disabled:pointer-events-none disabled:opacity-50',
           local.class
         )}

package/src/components/ui/command/command.tsx

@@ -10,17 +10,20 @@ import {
   CommandSeparator as CmdkSeparator,
   useCommandState,
 } from 'cmdk-solid'
+import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
 import { Search } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
+import { createDialogFocusRestoration } from '../dialog/dialog'
 import { menuItem } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
-// cmdk emits data-disabled="false" on enabled items; Kobalte omits it.
-// Presence selectors would dim and disable every command in an app palette.
+// cmdk emits data-disabled="false" on enabled items, unlike the presence-only
+// attributes Kobalte menu rows use. Apply those shared disabled styles only when
+// cmdk's value is true.
 const commandItem = menuItem
   .replace('data-[disabled]:pointer-events-none', '')
-  .replace('data-[disabled]:opacity-50', '')
+  .replace('data-[disabled]:text-muted-foreground', '')
 
 /**
  * Command.
@@ -52,26 +55,76 @@ export function Command(props: ComponentProps<typeof CmdkRoot>) {
   )
 }
 
-export function CommandDialog(props: ComponentProps<typeof CmdkDialog>) {
-  // cmdk's Dialog splits `contentClassName` onto the role="dialog" content
-  // element and routes every other prop (including `class`) to the inner
-  // Command. The surface must live on the content: a `class` here styles the
-  // Command (fixed, so visible) while the dialog element itself renders as an
-  // unstyled zero-height wrapper at the end of body — invisible to role
-  // queries and axe.
-  const [local, rest] = splitProps(props, ['class'])
+type CommandDialogProps = ComponentProps<typeof CmdkDialog> &
+  Pick<ComponentProps<typeof KobalteDialog.Content>, 'onCloseAutoFocus' | 'onOpenAutoFocus'>
+
+export function CommandDialog(props: CommandDialogProps) {
+  // cmdk-solid's Dialog does not forward Content autofocus props: unknown
+  // props fall through to its Command root. Compose Kobalte's dialog surface
+  // here so Escape and other close paths can restore focus to the real opener.
+  // Preserve the shared wrapper's `class` contract on the dialog surface;
+  // `contentClassName` adds to it, while the nested Command keeps its own API.
+  const [local, dialogProps, commandProps] = splitProps(
+    props,
+    [
+      'class',
+      'contentClassName',
+      'overlayClassName',
+      'container',
+      'onCloseAutoFocus',
+      'onOpenAutoFocus',
+    ],
+    [
+      'open',
+      'defaultOpen',
+      'onOpenChange',
+      'id',
+      'modal',
+      'preventScroll',
+      'forceMount',
+      'translations',
+    ]
+  )
+  const [isOpen, setIsOpen] = createSignal(dialogProps.open ?? dialogProps.defaultOpen ?? false)
+
+  createEffect(() => {
+    if (dialogProps.open !== undefined) setIsOpen(dialogProps.open)
+  })
+
+  const focus = createDialogFocusRestoration({
+    open: isOpen,
+    onCloseAutoFocus: local.onCloseAutoFocus,
+    onOpenAutoFocus: local.onOpenAutoFocus,
+  })
 
   return (
-    <CmdkDialog
-      contentClassName={cn(
-        'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
-        'overflow-hidden rounded-xl border border-border shadow-xl',
-        'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
-        'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
-        local.class
-      )}
-      {...rest}
-    />
+    <KobalteDialog
+      {...dialogProps}
+      onOpenChange={(open) => {
+        setIsOpen(open)
+        dialogProps.onOpenChange?.(open)
+      }}
+    >
+      <KobalteDialog.Portal mount={local.container}>
+        <KobalteDialog.Overlay cmdk-overlay="" class={local.overlayClassName} />
+        <KobalteDialog.Content
+          aria-label={commandProps.label}
+          cmdk-dialog=""
+          class={cn(
+            'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
+            'overflow-hidden rounded-xl border border-border shadow-xl',
+            'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+            'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            local.class,
+            local.contentClassName
+          )}
+          onOpenAutoFocus={focus.onOpenAutoFocus}
+          onCloseAutoFocus={focus.onCloseAutoFocus}
+        >
+          <Command {...commandProps} />
+        </KobalteDialog.Content>
+      </KobalteDialog.Portal>
+    </KobalteDialog>
   )
 }
 
@@ -188,8 +241,8 @@ export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
     <CmdkItem
       class={cn(
         commandItem,
-        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
-        'text-popover-foreground data-[selected=true]:bg-surface-hover data-[selected=true]:text-popover-foreground',
+        'data-[disabled=true]:pointer-events-none data-[disabled=true]:text-muted-foreground',
+        'group/command-item text-popover-foreground data-[selected=true]:bg-card data-[selected=true]:text-popover-foreground',
         local.class
       )}
       {...rest}
@@ -212,18 +265,17 @@ export function CommandLoading(props: ComponentProps<typeof CmdkLoading>) {
   )
 }
 
-/**
- * The keyboard hint a palette item usually carries.
- * Muted canvas text can fail contrast on a raised or selected command row;
- * hierarchy comes from its size and monospace face, with the row's readable ink.
- */
+/** The keyboard hint a palette item usually carries. */
 export function CommandShortcut(props: {
   class?: string
   children?: ComponentProps<'span'>['children']
 }) {
   return (
     <span
-      class={cn('text-popover-foreground ms-auto font-mono text-2xs tracking-widest', props.class)}
+      class={cn(
+        'text-muted-foreground ms-auto font-mono text-2xs tracking-widest group-data-[selected=true]/command-item:text-foreground',
+        props.class
+      )}
     >
       {props.children}
     </span>

package/src/components/ui/dropdown-menu/dropdown-menu.tsx

@@ -25,13 +25,17 @@ import { cn } from '#lib/utils'
  * Kobalte supplies the full menu contract — arrow keys, typeahead, the roving
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
+ * Menus are nonmodal by default so their generated focus guards do not become
+ * invalid direct children of the ARIA menu. Set `modal` explicitly when the
+ * surrounding interaction needs modal containment.
  *
  * The `destructive` variant marks the row with a status-coloured edge and
  * highlighted tint while keeping its label on the body foreground. Pairing it
  * with an AlertDialog is the caller's job.
  */
 export function DropdownMenu(props: ComponentProps<typeof KobalteDropdownMenu>) {
-  return <KobalteDropdownMenu {...props} />
+  const [local, rest] = splitProps(props, ['modal'])
+  return <KobalteDropdownMenu modal={local.modal ?? false} {...rest} />
 }
 
 export function DropdownMenuTrigger(props: ComponentProps<typeof KobalteDropdownMenu.Trigger>) {

package/src/components/ui/status-chip/status-chip.tsx

@@ -59,6 +59,8 @@ export type StatusTone = 'neutral' | 'success' | 'warning' | 'danger' | 'info' |
 export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
   tone?: StatusTone
   label: string
+  /** Visually hide the text while preserving it for assistive technology. */
+  compact?: boolean
   /** Why the status is what it is. Shown in a tooltip; omit for a self-evident label. */
   detail?: string
   /** A trailing slot: a timestamp, a retry affordance, a count. */
@@ -66,7 +68,14 @@ export type StatusChipProps = Omit<ComponentProps<'span'>, 'children'> & {
 }
 
 export function StatusChip(props: StatusChipProps) {
-  const [local, rest] = splitProps(props, ['tone', 'label', 'detail', 'trailing', 'class'])
+  const [local, rest] = splitProps(props, [
+    'tone',
+    'label',
+    'compact',
+    'detail',
+    'trailing',
+    'class',
+  ])
 
   const chip = (
     <span
@@ -78,7 +87,7 @@ export function StatusChip(props: StatusChipProps) {
       {...rest}
     >
       <span class={statusDotVariants({ tone: local.tone })} aria-hidden="true" />
-      {local.label}
+      <span class={cn(local.compact && 'sr-only')}>{local.label}</span>
       {local.trailing}
     </span>
   )

package/src/lib/overlay.ts

@@ -54,7 +54,7 @@ export const menuItem = [
   'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',
   'transition-colors ease-out',
   'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',
-  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  'data-[disabled]:pointer-events-none data-[disabled]:text-muted-foreground',
   '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
   '[&_svg:not([class*=text-])]:text-muted-foreground',
 ].join(' ')