@adea-ai/ui 0.81.1 → 0.82.0

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

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import { createUniqueId, For, Show, splitProps } from 'solid-js'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -14,28 +14,45 @@ import { cn } from '../../../lib/utils'
  * Height comes from `h-control-md`; an input cannot be given a new height
  * without a new token, which is what keeps it aligned with Button and Select.
  */
-export function Input(props: ComponentProps<'input'>) {
-  const [local, rest] = splitProps(props, ['class', 'type'])
+export type InputProps = ComponentProps<'input'> & {
+  /** Native text suggestions; custom values remain valid and submit unchanged. */
+  suggestions?: readonly string[]
+}
+
+export function Input(props: InputProps) {
+  const [local, rest] = splitProps(props, ['class', 'type', 'list', 'suggestions'])
+  const suggestionsId = createUniqueId()
+  const listId = () => local.list ?? `input-suggestions-${suggestionsId}`
 
   return (
-    <input
-      data-slot="input"
-      type={local.type ?? 'text'}
-      class={cn(
-        'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
-        'transition-[color,box-shadow,border-color] ease-out outline-none',
-        'placeholder:text-muted-foreground',
-        'selection:bg-primary selection:text-primary-foreground',
-        'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
-        /* A pointer click on a text field is a typing affordance, so the ring
+    <>
+      <input
+        data-slot="input"
+        type={local.type ?? 'text'}
+        list={local.suggestions ? listId() : local.list}
+        class={cn(
+          'h-control-md w-full min-w-0 rounded-md border border-input bg-transparent px-control-md py-1 text-sm',
+          'transition-[color,box-shadow,border-color] ease-out outline-none',
+          'placeholder:text-muted-foreground',
+          'selection:bg-primary selection:text-primary-foreground',
+          'file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground',
+          /* A pointer click on a text field is a typing affordance, so the ring
            appears where the user agent already matches :focus-visible. */
-        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-        'read-only:bg-surface-hover',
-        local.class
-      )}
-      {...rest}
-    />
+          'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+          'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+          'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+          'read-only:bg-surface-hover',
+          local.class
+        )}
+        {...rest}
+      />
+      <Show when={local.suggestions}>
+        {(suggestions) => (
+          <datalist id={listId()}>
+            <For each={suggestions()}>{(value) => <option value={value} />}</For>
+          </datalist>
+        )}
+      </Show>
+    </>
   )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.81.1",
+  "version": "0.82.0",
   "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

@@ -1649,6 +1649,7 @@
       "registryDependencies": [
         "@adea-ai/ui/button",
         "@adea-ai/ui/dropdown-menu",
+        "@adea-ai/ui/tooltip",
         "lib"
       ],
       "files": [
@@ -1664,6 +1665,30 @@
         }
       ]
     },
+    {
+      "name": "action-button",
+      "type": "registry:ui",
+      "title": "Action Button",
+      "description": "A shared Button with optional tooltip and busy-state feedback.",
+      "dependencies": [],
+      "registryDependencies": [
+        "@adea-ai/ui/button",
+        "@adea-ai/ui/spinner",
+        "@adea-ai/ui/tooltip"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/action-button/action-button.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/action-button/action-button.tsx"
+        },
+        {
+          "path": "src/components/composites/action-button/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/action-button/index.ts"
+        }
+      ]
+    },
     {
       "name": "appearance-editor",
       "type": "registry:ui",
@@ -1853,6 +1878,7 @@
         "@adea-ai/ui/kbd",
         "@adea-ai/ui/spinner",
         "@adea-ai/ui/textarea",
+        "@adea-ai/ui/tooltip",
         "lib"
       ],
       "files": [

package/src/components/composites/account-menu/account-menu.tsx

@@ -9,10 +9,10 @@ import {
   Smartphone,
   UserRound,
 } from 'lucide-solid'
-import type { JSX } from 'solid-js'
-import { For, Show, splitProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
+import { For, Show, createSignal, onCleanup, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
-import { Button } from '../../ui/button/button'
+import { Button, type ButtonProps } from '../../ui/button/button'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -21,6 +21,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip/tooltip'
 
 /**
  * AccountMenu.
@@ -49,10 +50,14 @@ export type AccountMenuItem = {
   /** Render only on this platform. Omit to always render. */
   platform?: 'desktop' | 'web'
   onSelect?: () => void
+  /** Run after the menu's close-focus cycle, with its trigger as a stable opener. */
+  onSelectAfterClose?: (trigger: HTMLButtonElement | undefined) => void
 }
 
 export type AccountMenuProps = {
   class?: string
+  /** The trigger size. Icon-only menus default to the standard icon size. */
+  size?: ButtonProps['size']
   /** The entries above the separator. */
   items: readonly AccountMenuItem[]
   /** Which platform this is rendered on, for items that declare one. */
@@ -81,6 +86,7 @@ const FALLBACK_ICONS: Record<string, typeof Settings2> = {
 export function AccountMenu(props: AccountMenuProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'size',
     'items',
     'platform',
     'authenticated',
@@ -91,55 +97,105 @@ export function AccountMenu(props: AccountMenuProps) {
     'onIntent',
   ])
 
+  let trigger: HTMLButtonElement | undefined
+  let pendingAfterClose:
+    | { callback: NonNullable<AccountMenuItem['onSelectAfterClose']> }
+    | undefined
+  let scheduledAfterClose:
+    | { callback: NonNullable<AccountMenuItem['onSelectAfterClose']> }
+    | undefined
+  const [menuOpen, setMenuOpen] = createSignal(false)
+  const [tooltipOpen, setTooltipOpen] = createSignal(false)
+
+  onCleanup(() => {
+    pendingAfterClose = undefined
+    scheduledAfterClose = undefined
+  })
+
   const visible = () =>
     local.items.filter((item) => !item.platform || item.platform === (local.platform ?? 'desktop'))
 
   return (
-    <DropdownMenu modal={false}>
-      <DropdownMenuTrigger
-        as={Button}
-        variant="ghost"
-        size="icon-md"
-        class={cn('text-muted-foreground', local.class)}
-        aria-label={local.label ?? 'Account and settings'}
-        onFocus={() => local.onIntent?.()}
-        onPointerEnter={() => local.onIntent?.()}
-        {...rest}
+    <Tooltip open={tooltipOpen()} onOpenChange={(open) => setTooltipOpen(open && !menuOpen())}>
+      <DropdownMenu
+        modal={false}
+        onOpenChange={(open) => {
+          setMenuOpen(open)
+          if (open) setTooltipOpen(false)
+        }}
       >
-        <UserRound aria-hidden="true" />
-      </DropdownMenuTrigger>
-      <DropdownMenuContent side="top" align="start" class="min-w-56">
-        <DropdownMenuGroup>
-          <For each={visible()}>
-            {(item) => (
-              <DropdownMenuItem
-                disabled={item.disabled}
-                onSelect={() => item.onSelect?.()}
-                shortcut={item.shortcut}
-              >
-                {item.icon ?? renderFallbackIcon(item.id)}
-                <span>{item.label}</span>
-              </DropdownMenuItem>
-            )}
-          </For>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem
-            disabled={local.busy}
-            onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
-          >
-            <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
-              <LogOut aria-hidden="true" />
-            </Show>
-            <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        <TooltipTrigger
+          as={AccountMenuButton}
+          ref={(element: HTMLButtonElement) => (trigger = element)}
+          variant="ghost"
+          size={local.size ?? 'icon-md'}
+          class={cn('text-muted-foreground', local.class)}
+          aria-label={local.label ?? 'Account and settings'}
+          onFocus={() => local.onIntent?.()}
+          onPointerEnter={() => local.onIntent?.()}
+          {...rest}
+        >
+          <UserRound aria-hidden="true" />
+        </TooltipTrigger>
+        <TooltipContent placement="top">{local.label ?? 'Account and settings'}</TooltipContent>
+        <DropdownMenuContent
+          placement="top-start"
+          class="min-w-56 max-h-(--kb-popper-available-height) overflow-x-hidden overflow-y-auto"
+          onCloseAutoFocus={(event) => {
+            const selection = pendingAfterClose
+            pendingAfterClose = undefined
+            if (!selection) return
+
+            event.preventDefault()
+            scheduledAfterClose = selection
+            queueMicrotask(() => {
+              if (scheduledAfterClose !== selection) return
+              scheduledAfterClose = undefined
+              selection.callback(trigger)
+            })
+          }}
+        >
+          <DropdownMenuGroup>
+            <For each={visible()}>
+              {(item) => (
+                <DropdownMenuItem
+                  disabled={item.disabled}
+                  onSelect={() => {
+                    pendingAfterClose = item.onSelectAfterClose
+                      ? { callback: item.onSelectAfterClose }
+                      : undefined
+                    item.onSelect?.()
+                  }}
+                  shortcut={item.shortcut}
+                >
+                  {item.icon ?? renderFallbackIcon(item.id)}
+                  <span>{item.label}</span>
+                </DropdownMenuItem>
+              )}
+            </For>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              disabled={local.busy}
+              onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
+            >
+              <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
+                <LogOut aria-hidden="true" />
+              </Show>
+              <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </Tooltip>
   )
 }
 
+function AccountMenuButton(props: ComponentProps<typeof Button>) {
+  return <DropdownMenuTrigger as={Button} {...props} />
+}
+
 /**
  * A known item id gets its conventional glyph, so a caller that only wants the
  * standard menu does not have to import six icons to get it.

package/src/components/composites/action-button/action-button.tsx

@@ -0,0 +1,139 @@
+import { Show, splitProps, type ComponentProps, type JSX, type ValidComponent } from 'solid-js'
+import { Button, type ButtonProps } from '../../ui/button'
+import { Spinner } from '../../ui/spinner'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
+
+/**
+ * ActionButton.
+ *
+ * A Button with optional explanatory tooltip and busy feedback. Use it for a
+ * simple action that needs these states; actions with product-specific rules
+ * should compose Button directly.
+ *
+ * The tooltip trigger renders the polymorphic Button itself. A disabled native
+ * control cannot receive pointer or keyboard events. When a tooltip is set,
+ * disabled actions therefore use focusable `aria-disabled` semantics and guard
+ * activation; without a tooltip, native buttons retain native disabling.
+ * Custom polymorphic components must forward aria, event, and href props for
+ * these guarantees to apply.
+ */
+export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps<T> & {
+  /** A short explanation, also shown on keyboard focus. The Button still needs its own name. */
+  tooltip?: string
+  tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /** Disables the action and announces the busy label through a polite status region. */
+  busy?: boolean
+  /** The activity announced while busy. The Button's accessible name stays unchanged. */
+  busyLabel?: string
+}
+
+function guardedClick(handler: unknown, disabled: () => boolean) {
+  return (event: MouseEvent) => {
+    if (disabled()) {
+      event.preventDefault()
+      event.stopImmediatePropagation()
+      return
+    }
+
+    if (Array.isArray(handler)) {
+      const [callback, data] = handler as [(data: unknown, event: MouseEvent) => void, unknown]
+      callback(data, event)
+    } else if (typeof handler === 'function') {
+      const callback = handler as (event: MouseEvent) => void
+      callback(event)
+    }
+  }
+}
+
+type ButtonTargetProps<T extends ValidComponent = 'button'> = Omit<ButtonProps<T>, 'as'> & {
+  actionAs?: T
+}
+
+/** Adapter keeps TooltipTrigger's `as` separate from Button's polymorphic `as`. */
+function ButtonTarget<T extends ValidComponent = 'button'>(props: ButtonTargetProps<T>) {
+  const [local, rest] = splitProps(props as ButtonTargetProps, ['actionAs'])
+  const PolymorphicButton = Button as (targetProps: ButtonProps<T>) => JSX.Element
+  return <PolymorphicButton as={(local.actionAs ?? 'button') as T} {...(rest as ButtonProps<T>)} />
+}
+
+export function ActionButton<T extends ValidComponent = 'button'>(props: ActionButtonProps<T>) {
+  const [local, rest] = splitProps(props as ActionButtonProps, [
+    'as',
+    'variant',
+    'size',
+    'class',
+    'children',
+    'disabled',
+    'aria-busy',
+    'tooltip',
+    'tooltipSide',
+    'busy',
+    'busyLabel',
+  ])
+  const busy = () => local.busy ?? false
+  const disabled = () => busy() || !!local.disabled
+  const busyStatus = () => local.busyLabel ?? 'Working'
+  const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture
+  const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element
+  const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element
+
+  const buttonProps = () => ({
+    ...rest,
+    variant: local.variant,
+    size: local.size,
+    class: [local.class, local.tooltip && disabled() && 'aria-disabled:pointer-events-auto']
+      .filter(Boolean)
+      .join(' '),
+    disabled: disabled() && !local.tooltip,
+    'aria-disabled': disabled() ? true : rest['aria-disabled'],
+    tabIndex: local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : rest.tabIndex,
+    role: local.as === 'a' && disabled() ? 'link' : rest.role,
+    href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,
+    'aria-busy': busy() || local['aria-busy'],
+    onClick: guardedClick(rest.onClick, disabled),
+    onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,
+    'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),
+    'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),
+  })
+
+  const contents = () => (
+    <>
+      <Show when={busy()}>
+        <Spinner size="sm" label={false} aria-hidden="true" data-icon="inline-start" />
+      </Show>
+      {local.children}
+    </>
+  )
+
+  return (
+    <>
+      <Show
+        when={local.tooltip}
+        fallback={
+          <PolymorphicButton
+            as={(local.as ?? 'button') as T}
+            {...(buttonProps() as unknown as ButtonProps<T>)}
+          >
+            {contents()}
+          </PolymorphicButton>
+        }
+      >
+        <Tooltip>
+          <TooltipTrigger
+            as={PolymorphicButtonTarget}
+            {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}
+            actionAs={(local.as ?? 'button') as T}
+          >
+            {contents()}
+          </TooltipTrigger>
+          <TooltipContent side={local.tooltipSide}>{local.tooltip}</TooltipContent>
+        </Tooltip>
+      </Show>
+      <Show when={busy()}>
+        <span role="status" aria-live="polite" class="visually-hidden">
+          {busyStatus()}
+        </span>
+      </Show>
+    </>
+  )
+}

package/src/components/composites/action-button/index.ts

@@ -0,0 +1,2 @@
+/** A shared Button with optional tooltip and busy-state feedback. */
+export { ActionButton, type ActionButtonProps } from './action-button'

package/src/components/conversation/thread-panel.tsx

@@ -3,6 +3,7 @@ import type { ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { cn } from '#lib/utils'
 import { Button } from '../ui/button/button'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip/tooltip'
 
 /**
  * ThreadPanel.
@@ -26,6 +27,8 @@ export type ThreadPanelProps = ComponentProps<'aside'> & {
   root?: JSX.Element
   /** The composer for a reply. */
   composer?: JSX.Element
+  /** Host actions, such as marking the thread unread, before the close control. */
+  headerActions?: JSX.Element
   onClose?: () => void
 }
 
@@ -36,6 +39,7 @@ export function ThreadPanel(props: ThreadPanelProps) {
     'count',
     'root',
     'composer',
+    'headerActions',
     'onClose',
     'children',
   ])
@@ -45,7 +49,7 @@ export function ThreadPanel(props: ThreadPanelProps) {
       data-slot="thread-panel"
       aria-label={`Thread: ${local.label}`}
       class={cn(
-        'bg-surface flex h-full w-96 shrink-0 flex-col border-s border-border',
+        'bg-surface flex h-full w-96 max-w-full shrink-0 flex-col border-s border-border',
         local.class
       )}
       {...rest}
@@ -59,17 +63,23 @@ export function ThreadPanel(props: ThreadPanelProps) {
             </span>
           </Show>
         </div>
-        <Show when={local.onClose}>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            aria-label="Close thread"
-            class="ms-auto text-muted-foreground"
-            onClick={() => local.onClose?.()}
-          >
-            <X />
-          </Button>
-        </Show>
+        <div class="ms-auto flex shrink-0 items-center gap-1">
+          {local.headerActions}
+          <Show when={local.onClose}>
+            <Tooltip>
+              <TooltipTrigger
+                as={Button}
+                variant="ghost"
+                size="icon-sm"
+                aria-label="Close thread"
+                onClick={() => local.onClose?.()}
+              >
+                <X />
+              </TooltipTrigger>
+              <TooltipContent>Close thread</TooltipContent>
+            </Tooltip>
+          </Show>
+        </div>
       </header>
 
       <Show when={local.root}>

package/src/components/layout/sidebar-nav/index.ts

@@ -11,4 +11,5 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavTitleProps,
 } from './sidebar-nav'

package/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -56,13 +56,19 @@ export function SidebarNavHeader(props: ComponentProps<'div'>) {
   )
 }
 
-export function SidebarNavTitle(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export type SidebarNavTitleProps<T extends ValidComponent = 'div'> = PolymorphicProps<
+  T,
+  { class?: string }
+>
+
+export function SidebarNavTitle<T extends ValidComponent = 'div'>(props: SidebarNavTitleProps<T>) {
+  const [local, rest] = splitProps(props as SidebarNavTitleProps, ['class'])
   return (
-    <div
+    <Polymorphic
+      as="div"
       data-slot="sidebar-nav-title"
       class={cn('truncate text-sm font-semibold tracking-tight', local.class)}
-      {...rest}
+      {...(rest as ComponentProps<'div'>)}
     />
   )
 }
@@ -105,6 +111,8 @@ export function SidebarNavSection(
     count?: number
     /** A control at the trailing edge of the heading row. */
     action?: JSX.Element
+    /** Semantic heading element for a host's section hierarchy. */
+    headingAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
   }
 ) {
   const [local, rest] = splitProps(props, [
@@ -114,6 +122,7 @@ export function SidebarNavSection(
     'defaultOpen',
     'count',
     'action',
+    'headingAs',
     'children',
   ])
   const [open, setOpen] = createSignal(local.defaultOpen ?? true)
@@ -138,25 +147,24 @@ export function SidebarNavSection(
   return (
     <div data-slot="sidebar-nav-section" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>
       <div class="group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60">
-        <Show
-          when={local.collapsible}
-          fallback={
-            <div class="flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase">
-              {heading}
-            </div>
-          }
+        <Polymorphic
+          as={local.headingAs ?? 'div'}
+          aria-label={local.headingAs ? local.label : undefined}
+          class="flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
         >
-          <button
-            type="button"
-            aria-expanded={open()}
-            onClick={() => setOpen((value) => !value)}
-            class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
-          >
-            {heading}
-          </button>
-        </Show>
+          <Show when={local.collapsible} fallback={heading}>
+            <button
+              type="button"
+              aria-expanded={open()}
+              onClick={() => setOpen((value) => !value)}
+              class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
+            >
+              {heading}
+            </button>
+          </Show>
+        </Polymorphic>
         <Show when={local.action}>
-          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100">
+          <span class="shrink-0 opacity-0 transition-opacity ease-out group-hover/section-header:opacity-100 focus-within:opacity-100 [@media(hover:none)]:opacity-100">
             {local.action}
           </span>
         </Show>