@adea-ai/ui 0.71.0 → 0.71.2

package/src/components/ui/menubar/menubar.tsx

@@ -4,6 +4,7 @@ import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import {
   menuContentPadding,
+  destructiveMenuItem,
   menuItem,
   menuLabel,
   menuSeparator,
@@ -98,8 +99,7 @@ export function MenubarItem(
       class={cn(
         menuItem,
         {
-          'text-destructive data-[highlighted]:bg-destructive-subtle data-[highlighted]:text-destructive':
-            local.variant === 'destructive',
+          [destructiveMenuItem]: local.variant === 'destructive',
         },
         local.class
       )}

package/src/components/ui/modal-dialog/modal-dialog.tsx

@@ -1,7 +1,8 @@
-import type { ComponentProps, JSX } from 'solid-js'
+import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { Show, createEffect, createSignal, onCleanup, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 import {
+  createDialogFocusRestoration,
   Dialog,
   DialogContent,
   DialogDescription,
@@ -12,7 +13,7 @@ import {
 /**
  * ModalDialog.
  *
- * A dialog that owns three things `Dialog` leaves to its caller, each of which is a
+ * A dialog that owns four things `Dialog` leaves to its caller, each of which is a
  * real defect when it is missed:
  *
  *   1. **It unmounts while closed.** An always-mounted dialog that closes as a side
@@ -27,6 +28,11 @@ import {
  *      from `title`, so its name does not depend on the title id registration effect.
  *      Pass `aria-label` to use a different name while keeping the visible title;
  *      pass `aria-labelledby` when another visible label should take precedence.
+ *   4. **It returns focus to the opener.** The opener is captured before the dialog
+ *      autofocuses and restored after the owner closes, unless a close-autofocus
+ *      handler takes control or focus has moved to another layer. For controlled
+ *      dialogs without a composed trigger, pass `restoreFocusRef` when the opener
+ *      cannot be inferred from the focused element.
  *
  * Use `Dialog` directly when you need its composition; use this when you want a
  * dialog that is correct by default.
@@ -50,6 +56,11 @@ export type ModalDialogProps = Omit<
   'aria-label'?: string
   /** Names the dialog from a visible element; ARIA gives it precedence over `aria-label`. */
   'aria-labelledby'?: string
+  /**
+   * Supplies the external control to focus when this controlled dialog closes.
+   * Defaults to the element focused immediately before the dialog opens.
+   */
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
   children?: JSX.Element
 }
 
@@ -65,9 +76,18 @@ export function ModalDialog(props: ModalDialogProps) {
     'children',
     'aria-label',
     'aria-labelledby',
+    'restoreFocusRef',
+    'onOpenAutoFocus',
+    'onCloseAutoFocus',
   ])
 
   const [content, setContent] = createSignal<HTMLElement>()
+  const focusRestoration = createDialogFocusRestoration({
+    open: () => local.open,
+    restoreFocusRef: local.restoreFocusRef,
+    onOpenAutoFocus: local.onOpenAutoFocus,
+    onCloseAutoFocus: local.onCloseAutoFocus,
+  })
 
   createEffect(() => {
     if (!local.open) return
@@ -100,6 +120,8 @@ export function ModalDialog(props: ModalDialogProps) {
             local['aria-labelledby'] ?? (local['aria-label'] !== undefined ? '' : undefined)
           }
           {...rest}
+          onOpenAutoFocus={focusRestoration.onOpenAutoFocus}
+          onCloseAutoFocus={focusRestoration.onCloseAutoFocus}
         >
           <DialogHeader>
             <DialogTitle class="flex items-center gap-2">

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

@@ -47,10 +47,10 @@ export const statusDotVariants = cva('size-2 shrink-0 rounded-full', {
 
 const labelTone: Record<StatusTone, string> = {
   neutral: 'text-foreground',
-  success: 'text-success',
-  warning: 'text-warning',
-  danger: 'text-destructive',
-  info: 'text-info',
+  success: 'text-foreground',
+  warning: 'text-foreground',
+  danger: 'text-foreground',
+  info: 'text-foreground',
   unknown: 'text-muted-foreground',
 }
 

package/src/lib/overlay.ts

@@ -59,6 +59,10 @@ export const menuItem = [
   '[&_svg:not([class*=text-])]:text-muted-foreground',
 ].join(' ')
 
+/** A destructive action keeps readable text and marks its row with a status edge. */
+export const destructiveMenuItem =
+  'border-s-2 border-destructive ps-1.5 text-foreground data-[highlighted]:bg-destructive-subtle'
+
 /** The label above a group of menu rows. */
 export const menuLabel =
   'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'

package/src/lib/themes.ts

@@ -40,6 +40,7 @@ import {
   getAccent,
   hasTheme,
   statusForeground,
+  tint,
   primaryHover,
   primarySubtleCss,
   syntaxRoles,
@@ -76,9 +77,16 @@ export type ThemeColors = {
   accentForeground: string
   destructive: string
   destructiveForeground: string
+  destructiveSubtle: string
   success: string
+  successForeground: string
+  successSubtle: string
   warning: string
+  warningForeground: string
+  warningSubtle: string
   info: string
+  infoForeground: string
+  infoSubtle: string
   border: string
   input: string
   ring: string
@@ -186,9 +194,16 @@ const ROLE_FOR: Readonly<Record<keyof ThemeColors, keyof AdeaThemeRecord['colors
   destructive: 'error',
   // Overwritten below from the measured pairing; nominal here so the table is total.
   destructiveForeground: 'error',
+  destructiveSubtle: 'error',
   success: 'success',
+  successForeground: 'success',
+  successSubtle: 'success',
   warning: 'warning',
+  warningForeground: 'warning',
+  warningSubtle: 'warning',
   info: 'info',
+  infoForeground: 'info',
+  infoSubtle: 'info',
   border: 'border',
   input: 'border',
   ring: 'accent',
@@ -208,6 +223,13 @@ function toVariant(theme: AdeaThemeRecord): ThemeVariant {
   // red it is black and on a deep red it is white, and using the body text would put
   // white on a mid-tone red at about 3:1.
   colors.destructiveForeground = statusForeground(theme, 'error')
+  colors.destructiveSubtle = tint(theme.colors.error, theme.colors.background)
+  colors.successForeground = statusForeground(theme, 'success')
+  colors.successSubtle = tint(theme.colors.success, theme.colors.background)
+  colors.warningForeground = statusForeground(theme, 'warning')
+  colors.warningSubtle = tint(theme.colors.warning, theme.colors.background)
+  colors.infoForeground = statusForeground(theme, 'info')
+  colors.infoSubtle = tint(theme.colors.info, theme.colors.background)
 
   const syntax = syntaxRoles(theme)
 
@@ -374,9 +396,16 @@ export function themeCssVariables(theme: ThemeVariant): Record<string, string> {
     '--accent-foreground': c.accentForeground,
     '--destructive': c.destructive,
     '--destructive-foreground': c.destructiveForeground,
+    '--destructive-subtle': c.destructiveSubtle,
     '--success': c.success,
+    '--success-foreground': c.successForeground,
+    '--success-subtle': c.successSubtle,
     '--warning': c.warning,
+    '--warning-foreground': c.warningForeground,
+    '--warning-subtle': c.warningSubtle,
     '--info': c.info,
+    '--info-foreground': c.infoForeground,
+    '--info-subtle': c.infoSubtle,
     '--border': c.border,
     '--input': c.input,
     '--ring': c.ring,

package/src/lib/tokens.ts

@@ -196,11 +196,16 @@ export const colorTokens: TokenDefinition[] = [
     name: 'destructive-subtle',
     kind: 'color',
     themed: true,
-    description: 'Tinted destructive fill: alert banners, invalid fields.',
+    description: 'Opaque destructive tint against the canvas; subtle labels use foreground.',
   },
   { name: 'success', kind: 'color', themed: true, description: 'A completed or healthy state.' },
   { name: 'success-foreground', kind: 'color', themed: true, description: 'Label on `success`.' },
-  { name: 'success-subtle', kind: 'color', themed: true, description: 'Tinted success fill.' },
+  {
+    name: 'success-subtle',
+    kind: 'color',
+    themed: true,
+    description: 'Opaque success tint against the canvas; subtle labels use foreground.',
+  },
   {
     name: 'warning',
     kind: 'color',
@@ -208,10 +213,20 @@ export const colorTokens: TokenDefinition[] = [
     description: 'Something needs attention but is not broken.',
   },
   { name: 'warning-foreground', kind: 'color', themed: true, description: 'Label on `warning`.' },
-  { name: 'warning-subtle', kind: 'color', themed: true, description: 'Tinted warning fill.' },
+  {
+    name: 'warning-subtle',
+    kind: 'color',
+    themed: true,
+    description: 'Opaque warning tint against the canvas; subtle labels use foreground.',
+  },
   { name: 'info', kind: 'color', themed: true, description: 'Neutral information.' },
   { name: 'info-foreground', kind: 'color', themed: true, description: 'Label on `info`.' },
-  { name: 'info-subtle', kind: 'color', themed: true, description: 'Tinted info fill.' },
+  {
+    name: 'info-subtle',
+    kind: 'color',
+    themed: true,
+    description: 'Opaque info tint against the canvas; subtle labels use foreground.',
+  },
 
   // Lines
   {

package/src/styles/theme.css

@@ -78,7 +78,7 @@
   --muted: oklch(0.898 0.0108 261.79);
   --muted-foreground: oklch(0.474 0.0245 265.01);
 
-  /* Status. The fills are catalogue roles; the labels are measured. */
+  /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.4705 0.1626 25.78);
   --destructive-foreground: oklch(0.933 0.016 261.79);
   --success: oklch(0.4311 0.1809 145.62);
@@ -87,10 +87,10 @@
   --warning-foreground: oklch(0.933 0.016 261.79);
   --info: oklch(0.4915 0.1155 202.14);
   --info-foreground: oklch(0.933 0.016 261.79);
-  --destructive-subtle: color-mix(in oklch, var(--destructive) 16%, transparent);
-  --success-subtle: color-mix(in oklch, var(--success) 16%, transparent);
-  --warning-subtle: color-mix(in oklch, var(--warning) 16%, transparent);
-  --info-subtle: color-mix(in oklch, var(--info) 16%, transparent);
+  --destructive-subtle: oklch(0.8683 0.0365 279.15);
+  --success-subtle: oklch(0.8627 0.0391 245.53);
+  --warning-subtle: oklch(0.8662 0.0334 286.73);
+  --info-subtle: oklch(0.8712 0.0299 253.44);
 
   /* Lines */
   --border: oklch(0.783 0.0144 261.79);
@@ -213,7 +213,7 @@
   --muted: oklch(0.2268 0.0288 265.37);
   --muted-foreground: oklch(0.6308 0.0224 262.91);
 
-  /* Status. The fills are catalogue roles; the labels are measured. */
+  /* Status fills; solid labels and subtle surfaces come from the catalogue. */
   --destructive: oklch(0.7345 0.1626 25.78);
   --destructive-foreground: oklch(0.1918 0.0238 265.37);
   --success: oklch(0.6951 0.1809 145.62);
@@ -222,10 +222,10 @@
   --warning-foreground: oklch(0.1918 0.0238 265.37);
   --info: oklch(0.7555 0.1155 202.14);
   --info-foreground: oklch(0.1918 0.0238 265.37);
-  --destructive-subtle: color-mix(in oklch, var(--destructive) 16%, transparent);
-  --success-subtle: color-mix(in oklch, var(--success) 16%, transparent);
-  --warning-subtle: color-mix(in oklch, var(--warning) 16%, transparent);
-  --info-subtle: color-mix(in oklch, var(--info) 16%, transparent);
+  --destructive-subtle: oklch(0.2678 0.0432 282.23);
+  --success-subtle: oklch(0.2623 0.0458 248.61);
+  --warning-subtle: oklch(0.2657 0.0401 289.81);
+  --info-subtle: oklch(0.2707 0.0366 256.52);
 
   /* Lines */
   --border: oklch(0.3418 0.0214 265.37);