@adea-ai/ui 0.71.1 → 0.71.3

package/src/components/composites/update-dialog/update-dialog.tsx

@@ -1,4 +1,13 @@
-import { createEffect, createMemo, createSignal, onMount, Show, splitProps } from 'solid-js'
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  onCleanup,
+  onMount,
+  Show,
+  splitProps,
+} from 'solid-js'
+import type { Accessor } from 'solid-js'
 import { Check, Download, ExternalLink, LoaderCircle, RefreshCw, Sparkles } from 'lucide-solid'
 import { Badge } from '../../ui/badge'
 import { Button } from '../../ui/button'
@@ -12,6 +21,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '../../ui/dialog'
+import { createDialogFocusRestoration } from '../../ui/dialog/dialog'
 import { Progress } from '../../ui/progress'
 import { cn } from '#lib/utils'
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from '#lib/version-notes'
@@ -131,6 +141,12 @@ export type UpdateDialogProps = {
    */
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
+  /**
+   * Supplies a stable external control to focus when a controlled dialog closes.
+   * Useful when a menu or other layer closes before this dialog opens; when omitted,
+   * the element focused immediately before the dialog opens is used when available.
+   */
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
   /** Render only the panel, for a caller that provides its own dialog. */
   class?: string
 }
@@ -162,6 +178,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
     'open',
     'defaultOpen',
     'onOpenChange',
+    'restoreFocusRef',
     'class',
   ])
 
@@ -172,23 +189,41 @@ export function UpdateDialog(props: UpdateDialogProps) {
     local.onOpenChange?.(next)
   }
 
+  const focusRestoration = createDialogFocusRestoration({
+    open,
+    restoreFocusRef: local.restoreFocusRef,
+  })
+
   const appName = () => local.appName ?? 'the application'
   const desktop = () => local.adapter.isDesktopRuntime()
   const [state, setState] = createSignal<UpdateState | null>(null)
   const [busy, setBusy] = createSignal(false)
   const [error, setError] = createSignal('')
+  let lifecycleEpoch = 0
+  let activeOpenEpoch: number | undefined
+  let disposed = false
+
+  onCleanup(() => {
+    disposed = true
+    activeOpenEpoch = undefined
+    lifecycleEpoch += 1
+  })
 
-  const loadStatus = async () => {
-    if (!desktop()) return
+  const loadStatus = async (isCurrent: () => boolean = () => !disposed) => {
+    if (!desktop() || !isCurrent()) return
     try {
-      setState(await local.adapter.getStatus())
+      const status = await local.adapter.getStatus()
+      if (isCurrent()) setState(status)
     } catch (caught) {
-      setError(errorMessage(caught, 'Version status is unavailable'))
+      if (isCurrent()) setError(errorMessage(caught, 'Version status is unavailable'))
     }
   }
 
   onMount(() => {
-    if (desktop()) void loadStatus()
+    if (desktop() && !open()) {
+      const epoch = lifecycleEpoch
+      void loadStatus(() => !disposed && lifecycleEpoch === epoch)
+    }
   })
 
   const check = async () => {
@@ -196,15 +231,25 @@ export function UpdateDialog(props: UpdateDialogProps) {
       setError(local.desktopOnlyMessage ?? `Update checks are available from the desktop app.`)
       return
     }
+    const epoch = activeOpenEpoch
+    const isCurrent = () =>
+      !disposed &&
+      epoch !== undefined &&
+      activeOpenEpoch === epoch &&
+      lifecycleEpoch === epoch &&
+      open()
+    if (!isCurrent()) return
     setBusy(true)
     setError('')
     try {
-      setState(await local.adapter.check())
+      const checked = await local.adapter.check()
+      if (isCurrent()) setState(checked)
     } catch (caught) {
+      if (!isCurrent()) return
       setError(errorMessage(caught, 'Could not check for updates'))
-      await loadStatus()
+      await loadStatus(isCurrent)
     } finally {
-      setBusy(false)
+      if (isCurrent()) setBusy(false)
     }
   }
 
@@ -214,35 +259,57 @@ export function UpdateDialog(props: UpdateDialogProps) {
    * disposed scope.
    */
   createEffect(() => {
-    if (!open() || !desktop()) return
+    if (!open() || !desktop()) {
+      if (activeOpenEpoch !== undefined) {
+        activeOpenEpoch = undefined
+        lifecycleEpoch += 1
+      }
+      return
+    }
+    const epoch = ++lifecycleEpoch
+    activeOpenEpoch = epoch
     let active = true
+    const isCurrent = () =>
+      active && !disposed && activeOpenEpoch === epoch && lifecycleEpoch === epoch && open()
+    onCleanup(() => {
+      active = false
+      if (activeOpenEpoch === epoch) {
+        activeOpenEpoch = undefined
+        lifecycleEpoch += 1
+      }
+    })
     setError('')
     setBusy(true)
     void (async () => {
       try {
         const current = await local.adapter.getStatus()
-        if (!active) return
+        if (!isCurrent()) return
         setState(current)
         const checked = await local.adapter.check()
-        if (active) setState(checked)
+        if (isCurrent()) setState(checked)
       } catch (caught) {
-        if (active) setError(errorMessage(caught, 'Could not check for updates'))
+        if (isCurrent()) setError(errorMessage(caught, 'Could not check for updates'))
       } finally {
-        if (active) setBusy(false)
+        if (isCurrent()) setBusy(false)
       }
     })()
-    return () => {
-      active = false
-    }
   })
 
   const install = async () => {
     const version = state()?.availableVersion
-    if (!version) return
+    const epoch = activeOpenEpoch
+    const isCurrent = () =>
+      !disposed &&
+      epoch !== undefined &&
+      activeOpenEpoch === epoch &&
+      lifecycleEpoch === epoch &&
+      open()
+    if (!version || !isCurrent()) return
     setBusy(true)
     setError('')
     try {
       const next = await local.adapter.install(version)
+      if (!isCurrent()) return
       setState(next)
       // A refused install answers with a normal payload whose phase is `failed`.
       // Without this the click looked like nothing happened.
@@ -250,10 +317,11 @@ export function UpdateDialog(props: UpdateDialogProps) {
         setError(errorMessage(next.error, 'Update installation failed'))
       }
     } catch (caught) {
+      if (!isCurrent()) return
       setError(errorMessage(caught, 'Update installation failed'))
-      await loadStatus()
+      await loadStatus(isCurrent)
     } finally {
-      setBusy(false)
+      if (isCurrent()) setBusy(false)
     }
   }
 
@@ -308,7 +376,11 @@ export function UpdateDialog(props: UpdateDialogProps) {
         </DialogTrigger>
       </Show>
 
-      <DialogContent class={cn('max-w-3xl', local.class)}>
+      <DialogContent
+        class={cn('max-w-3xl', local.class)}
+        onOpenAutoFocus={focusRestoration.onOpenAutoFocus}
+        onCloseAutoFocus={focusRestoration.onCloseAutoFocus}
+      >
         <DialogHeader>
           <div class="flex items-center gap-3">
             <span class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground">
@@ -432,15 +504,15 @@ export function UpdateDialog(props: UpdateDialogProps) {
           </Show>
 
           <Show when={state()?.phase === 'current'}>
-            <p class="flex items-center gap-2 text-sm text-success" role="status">
-              <Check class="size-4" aria-hidden="true" />
+            <p class="text-foreground flex items-center gap-2 text-sm" role="status">
+              <Check class="size-4 text-success" aria-hidden="true" />
               {appName()} is up to date.
             </p>
           </Show>
 
           <Show when={state()?.phase === 'installed'}>
-            <p class="flex items-center gap-2 text-sm text-success" role="status">
-              <Check class="size-4" aria-hidden="true" />
+            <p class="text-foreground flex items-center gap-2 text-sm" role="status">
+              <Check class="size-4 text-success" aria-hidden="true" />
               <Show when={state()?.restartRequired} fallback="The update is applied.">
                 Restart {appName()} to finish the update.
               </Show>
@@ -449,7 +521,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
 
           <Show when={error()}>
             <p
-              class="rounded-lg border border-destructive/35 bg-destructive-subtle px-3 py-2 text-sm text-destructive"
+              class="text-foreground rounded-lg border border-destructive/35 bg-destructive-subtle px-3 py-2 text-sm"
               role="alert"
             >
               {error()}

package/src/components/conversation/internal/chat-composer-shell.tsx

@@ -237,7 +237,7 @@ export function ChatComposerShell<Extra extends object>(props: ChatComposerShell
       </Show>
       <Show when={error()}>
         {(message) => (
-          <p role="alert" class="text-destructive mb-1 text-xs">
+          <p role="alert" class="text-foreground mb-1 border-s-2 border-destructive ps-2 text-xs">
             {message()}
           </p>
         )}

package/src/components/conversation/message-composer.tsx

@@ -197,7 +197,9 @@ export function MessageComposer(props: MessageComposerProps) {
           field the user is typing in. */}
       <div aria-live="polite" class="min-h-0">
         <Show when={error()}>
-          {(message) => <p class="text-destructive text-xs">{message()}</p>}
+          {(message) => (
+            <p class="text-foreground border-s-2 border-destructive ps-2 text-xs">{message()}</p>
+          )}
         </Show>
       </div>
     </form>

package/src/components/ui/alert/alert.tsx

@@ -14,7 +14,9 @@ import { cn } from '#lib/utils'
  *
  * The glyph follows the tone rather than being passed in, so an alert cannot
  * be given a green checkmark on a destructive fill. A caller that genuinely
- * needs a different icon passes `icon`; `icon={null}` removes it.
+ * needs a different icon passes `icon`; `icon={null}` removes it. Text stays on
+ * the body foreground over the tinted status surface, while the glyph and edge
+ * carry the status hue.
  */
 const alertVariants = cva(
   'relative grid w-full grid-cols-[auto_1fr] items-start gap-x-3 gap-y-1 rounded-lg border px-3 py-2.5 text-sm',
@@ -22,10 +24,10 @@ const alertVariants = cva(
     variants: {
       variant: {
         default: 'bg-card text-card-foreground border-border',
-        destructive: 'bg-destructive-subtle text-destructive border-destructive/30',
-        success: 'bg-success-subtle text-success border-success/30',
-        warning: 'bg-warning-subtle text-warning border-warning/30',
-        info: 'bg-info-subtle text-info border-info/30',
+        destructive: 'bg-destructive-subtle text-foreground border-destructive/30',
+        success: 'bg-success-subtle text-foreground border-success/30',
+        warning: 'bg-warning-subtle text-foreground border-warning/30',
+        info: 'bg-info-subtle text-foreground border-info/30',
       },
     },
     defaultVariants: { variant: 'default' },
@@ -40,6 +42,14 @@ const alertIcons = {
   info: Info,
 } as const
 
+const alertIconTones = {
+  default: 'text-muted-foreground',
+  destructive: 'text-destructive',
+  success: 'text-success',
+  warning: 'text-warning',
+  info: 'text-info',
+} as const
+
 type AlertVariantProps = VariantProps<typeof alertVariants>
 
 export type AlertProps = ComponentProps<'div'> &
@@ -61,7 +71,10 @@ export function Alert(props: AlertProps) {
       {...rest}
     >
       {local.icon === null ? null : (
-        <span data-slot="alert-icon" class="row-span-2 pt-0.5 [&_svg]:size-4">
+        <span
+          data-slot="alert-icon"
+          class={cn('row-span-2 pt-0.5 [&_svg]:size-4', alertIconTones[tone()])}
+        >
           {local.icon ?? <Dynamic component={alertIcons[tone()]} />}
         </span>
       )}
@@ -86,7 +99,7 @@ export function AlertDescription(props: ComponentProps<'div'>) {
   return (
     <div
       data-slot="alert-description"
-      class={cn('col-start-2 text-sm opacity-90 [&_p]:leading-relaxed', local.class)}
+      class={cn('col-start-2 text-sm [&_p]:leading-relaxed', local.class)}
       {...rest}
     />
   )

package/src/components/ui/badge/badge.tsx

@@ -20,10 +20,10 @@ export const badgeVariants = cva(
         secondary: 'bg-secondary text-secondary-foreground',
         outline: 'border-border text-foreground',
         /** Tinted status fills, for counts and states rather than actions. */
-        success: 'bg-success-subtle text-success',
-        warning: 'bg-warning-subtle text-warning',
-        destructive: 'bg-destructive-subtle text-destructive',
-        info: 'bg-info-subtle text-info',
+        success: 'bg-success-subtle text-foreground',
+        warning: 'bg-warning-subtle text-foreground',
+        destructive: 'bg-destructive-subtle text-foreground',
+        info: 'bg-info-subtle text-foreground',
         subtle: 'bg-primary-subtle text-primary',
       },
       size: {

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

@@ -4,6 +4,7 @@ import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import {
   menuContentPadding,
+  destructiveMenuItem,
   menuItem,
   menuLabel,
   menuSeparator,
@@ -65,8 +66,7 @@ export function ContextMenuItem(
       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/dialog/dialog.tsx

@@ -1,10 +1,212 @@
 import { Dialog as KobalteDialog } from '@kobalte/core/dialog'
 import { X } from 'lucide-solid'
-import type { ComponentProps, JSX } from 'solid-js'
-import { Show, splitProps } from 'solid-js'
+import type { Accessor, ComponentProps, JSX } from 'solid-js'
+import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
 import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
 import { cn } from '#lib/utils'
 
+type FocusCycle = {
+  content: HTMLElement
+  opener: HTMLElement | null
+  openerEligible: boolean
+  closed: boolean
+  focusMovedOutside: boolean
+  closeAutoFocusScheduled: boolean
+  frame?: number
+  fallbackTimer?: number
+  observer?: MutationObserver
+  onFocusIn: (event: FocusEvent) => void
+}
+
+function canRestoreFocus(target: HTMLElement): boolean {
+  return (
+    target.isConnected &&
+    target !== document.body &&
+    target !== document.documentElement &&
+    !target.closest('[inert], [aria-hidden="true"]') &&
+    !target.matches(':disabled') &&
+    target.getClientRects().length > 0
+  )
+}
+
+function hasOtherOverlay(content: HTMLElement, opener: HTMLElement): boolean {
+  return [...document.querySelectorAll<HTMLElement>('[role="dialog"], [role="alertdialog"]')].some(
+    (overlay) =>
+      overlay !== content &&
+      !content.contains(overlay) &&
+      !overlay.contains(opener) &&
+      !overlay.closest('[aria-hidden="true"], [inert]') &&
+      overlay.getClientRects().length > 0
+  )
+}
+
+type DialogFocusRestorationOptions = {
+  open: Accessor<boolean>
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+  onOpenAutoFocus?: ComponentProps<typeof KobalteDialog.Content>['onOpenAutoFocus']
+  onCloseAutoFocus?: ComponentProps<typeof KobalteDialog.Content>['onCloseAutoFocus']
+}
+
+/**
+ * Adds guarded opener capture and restoration to a Kobalte dialog content.
+ * Composed surfaces use this internal helper; it is omitted from the public
+ * dialog barrel so the restoration policy stays with the dialog components.
+ */
+export function createDialogFocusRestoration({
+  open,
+  restoreFocusRef,
+  onOpenAutoFocus: callerOnOpenAutoFocus,
+  onCloseAutoFocus: callerOnCloseAutoFocus,
+}: DialogFocusRestorationOptions) {
+  const focusCycles = new WeakMap<HTMLElement, FocusCycle>()
+  let activeFocusCycle: FocusCycle | undefined
+  let pendingOpener: HTMLElement | null = null
+  let pendingOpenerEligible = false
+
+  createRenderEffect(() => {
+    if (!open() || typeof document === 'undefined') {
+      pendingOpener = null
+      pendingOpenerEligible = false
+      return
+    }
+    const active = restoreFocusRef?.() ?? document.activeElement
+    pendingOpener = active instanceof HTMLElement ? active : null
+    pendingOpenerEligible = active instanceof HTMLElement && canRestoreFocus(active)
+  })
+
+  const finishFocusCycle = (cycle: FocusCycle) => {
+    if (cycle.frame !== undefined) window.cancelAnimationFrame(cycle.frame)
+    if (cycle.fallbackTimer !== undefined) window.clearTimeout(cycle.fallbackTimer)
+    cycle.observer?.disconnect()
+    document.removeEventListener('focusin', cycle.onFocusIn)
+    if (activeFocusCycle === cycle) activeFocusCycle = undefined
+  }
+
+  const scheduleFocusRestore = (cycle: FocusCycle) => {
+    if (cycle.frame !== undefined) return
+    cycle.frame = window.requestAnimationFrame(() => {
+      cycle.frame = undefined
+      const opener = cycle.opener
+      const active = document.activeElement
+      const focusIsAvailable =
+        active === document.body ||
+        active === document.documentElement ||
+        active === cycle.content ||
+        (active instanceof Node && cycle.content.contains(active))
+      if (
+        activeFocusCycle !== cycle ||
+        !cycle.closed ||
+        cycle.focusMovedOutside ||
+        !opener ||
+        !opener.isConnected ||
+        opener.matches(':disabled') ||
+        opener.getClientRects().length === 0 ||
+        !focusIsAvailable ||
+        hasOtherOverlay(cycle.content, opener)
+      ) {
+        finishFocusCycle(cycle)
+        return
+      }
+
+      // Inert and aria-hidden are removed by the dialog's containment cleanup.
+      // Wait for that cleanup before returning focus to the original control.
+      if (opener.closest('[inert], [aria-hidden="true"]')) return
+      if (cycle.openerEligible && canRestoreFocus(opener)) {
+        opener.focus({ preventScroll: true })
+      }
+      finishFocusCycle(cycle)
+    })
+  }
+
+  const onOpenAutoFocus = (event: Event) => {
+    const element = event.currentTarget
+    if (element instanceof HTMLElement) {
+      if (activeFocusCycle) finishFocusCycle(activeFocusCycle)
+
+      const openerWasCaptured = pendingOpener !== null
+      const opener = pendingOpener ?? document.activeElement
+      const openerEligible = openerWasCaptured
+        ? pendingOpenerEligible
+        : opener instanceof HTMLElement && canRestoreFocus(opener)
+      pendingOpener = null
+      pendingOpenerEligible = false
+      const cycle: FocusCycle = {
+        content: element,
+        opener: opener instanceof HTMLElement ? opener : null,
+        openerEligible,
+        closed: false,
+        focusMovedOutside: false,
+        closeAutoFocusScheduled: false,
+        onFocusIn: (focusEvent) => {
+          const target = focusEvent.target
+          if (
+            !(target instanceof HTMLElement) ||
+            target === document.body ||
+            target === document.documentElement ||
+            target === element ||
+            element.contains(target) ||
+            target === (opener instanceof HTMLElement ? opener : null)
+          ) {
+            return
+          }
+          cycle.focusMovedOutside = true
+        },
+      }
+      focusCycles.set(element, cycle)
+      activeFocusCycle = cycle
+      document.addEventListener('focusin', cycle.onFocusIn)
+    }
+    callerOnOpenAutoFocus?.(event)
+  }
+
+  const onCloseAutoFocus = (event: Event) => {
+    const element = event.currentTarget
+    const cycle = element instanceof HTMLElement ? focusCycles.get(element) : undefined
+    callerOnCloseAutoFocus?.(event)
+
+    if (!cycle) return
+    cycle.closed = true
+
+    // A caller that prevents Kobalte's close autofocus owns the focus decision.
+    if (event.defaultPrevented) {
+      finishFocusCycle(cycle)
+      return
+    }
+
+    if (cycle.fallbackTimer !== undefined) {
+      window.clearTimeout(cycle.fallbackTimer)
+      cycle.fallbackTimer = undefined
+    }
+    cycle.closeAutoFocusScheduled = true
+    cycle.observer = new MutationObserver(() => scheduleFocusRestore(cycle))
+    cycle.observer.observe(document.body, {
+      attributes: true,
+      attributeFilter: ['aria-hidden', 'inert'],
+      childList: true,
+      subtree: true,
+    })
+    scheduleFocusRestore(cycle)
+  }
+
+  onCleanup(() => {
+    const cycle = activeFocusCycle
+    if (!cycle) return
+    cycle.closed = true
+
+    // Kobalte dispatches unmount autofocus from a timer. This fallback only
+    // releases the scoped focus listener if the content did not dispatch it.
+    queueMicrotask(() => {
+      if (cycle.closeAutoFocusScheduled) return
+      cycle.fallbackTimer = window.setTimeout(() => {
+        cycle.fallbackTimer = undefined
+        if (!cycle.closeAutoFocusScheduled) finishFocusCycle(cycle)
+      }, 0)
+    })
+  })
+
+  return { onOpenAutoFocus, onCloseAutoFocus }
+}
+
 /**
  * Dialog.
  *

package/src/components/ui/diff-block/diff-block.tsx

@@ -205,8 +205,8 @@ export function DiffBlock(props: DiffBlockProps) {
           {/* The counts are text, so the summary survives greyscale and a reader
               who cannot separate the two line tones still gets the shape of it. */}
           <span class="shrink-0 font-mono text-2xs text-muted-foreground">
-            <span class="text-success">+{stats().added}</span>{' '}
-            <span class="text-destructive">−{stats().removed}</span>
+            <span class="text-foreground">+{stats().added}</span>{' '}
+            <span class="text-foreground">−{stats().removed}</span>
           </span>
         </span>
         {local.actions}
@@ -278,8 +278,8 @@ export function DiffSummary(props: { patch: string; class?: string; onSelect?: (
     >
       <span class="truncate text-foreground">{name()}</span>
       <span class="shrink-0 text-2xs">
-        <span class="text-success">+{stats().added}</span>{' '}
-        <span class="text-destructive">−{stats().removed}</span>
+        <span class="text-foreground">+{stats().added}</span>{' '}
+        <span class="text-foreground">−{stats().removed}</span>
       </span>
     </button>
   )

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

@@ -4,6 +4,7 @@ import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
 import {
   menuContentPadding,
+  destructiveMenuItem,
   menuItem,
   menuLabel,
   menuSeparator,
@@ -25,8 +26,9 @@ import { cn } from '#lib/utils'
  * highlight, Escape to close and return focus — which is exactly what a
  * hand-rolled `div` with click handlers gets wrong.
  *
- * The `destructive` variant on an item is a *colour*, not a confirmation.
- * Pairing it with an AlertDialog is the caller's job.
+ * 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} />
@@ -83,8 +85,7 @@ export function DropdownMenuItem(
       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/entity-icon/entity-icon.tsx

@@ -17,9 +17,9 @@ import { cn } from '#lib/utils'
  * 1. **A glyph is always present.** A brand with no logo gets a monogram, not an
  *    empty box. `fallback` takes the name and returns the glyph, so a caller can
  *    choose initials, a domain letter, or a kind icon.
- * 2. **The tile owns its own contrast.** `tone` tints the background and the
- *    glyph together, so a caller never picks a colour pair and never ships an
- *    icon that disappears against its tile.
+ * 2. **The tile owns its own contrast.** `tone` tints the background while
+ *    monogram text keeps the body foreground; vector glyphs retain the status
+ *    colour. A caller never picks a colour pair or ships a glyph that disappears.
  * 3. **Size is on the control ladder**, not arbitrary. A tile in a rail and a
  *    tile in a detail header are the same two or three sizes every other
  *    interactive element uses.
@@ -51,10 +51,10 @@ export const entityIconVariants = cva(
         primary: 'border-transparent bg-primary-subtle text-primary',
         /** Bare: no fill and no edge, for a tile that already sits on a surface. */
         bare: 'border-transparent bg-transparent text-foreground',
-        success: 'border-transparent bg-success-subtle text-success',
-        warning: 'border-transparent bg-warning-subtle text-warning',
-        danger: 'border-transparent bg-destructive-subtle text-destructive',
-        info: 'border-transparent bg-info-subtle text-info',
+        success: 'border-transparent bg-success-subtle text-foreground [&_svg]:text-success',
+        warning: 'border-transparent bg-warning-subtle text-foreground [&_svg]:text-warning',
+        danger: 'border-transparent bg-destructive-subtle text-foreground [&_svg]:text-destructive',
+        info: 'border-transparent bg-info-subtle text-foreground [&_svg]:text-info',
       },
     },
     defaultVariants: { shape: 'rounded', size: 'md', tone: 'neutral' },

package/src/components/ui/field/field.tsx

@@ -44,7 +44,7 @@ export function FieldDescription(props: ComponentProps<typeof KobalteTextField.D
 export function FieldError(props: ComponentProps<typeof KobalteTextField.ErrorMessage>) {
   const [local, rest] = splitProps(props, ['class'])
   return (
-    <KobalteTextField.ErrorMessage class={cn('text-destructive text-sm', local.class)} {...rest} />
+    <KobalteTextField.ErrorMessage class={cn('text-foreground text-sm', local.class)} {...rest} />
   )
 }