@adea-ai/ui 0.115.1 → 0.116.0

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

@@ -105,6 +105,13 @@ export function AccentChoices(props: AppearanceEditorProps) {
   const resolvedAppearance = () =>
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
   const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
+  const showThemeDefault = () => props.showThemeDefaultAccent ?? true
+  // The named-chip style feeds the same resolved preset list to both entries:
+  // "Theme default" leads only when the host has not folded it into a preset.
+  const labelEntries = () => {
+    const presets = props.accentOptions.filter((option) => option.id !== 'theme')
+    return showThemeDefault() ? [{ id: 'theme', label: 'Theme default' }, ...presets] : presets
+  }
   return (
     <Radio
       value={accentSelection()}
@@ -118,24 +125,55 @@ export function AccentChoices(props: AppearanceEditorProps) {
         })
       }
     >
-      <AccentSwatchGroups
-        accentOptions={props.accentOptions}
-        resolvedAppearance={resolvedAppearance()}
-        themeDefaultColor={
-          resolvedAppearance() === 'light'
-            ? props.lightTheme.colors.accent
-            : props.darkTheme.colors.accent
+      <Show
+        when={(props.accentEntryStyle ?? 'swatches') === 'labels'}
+        fallback={
+          <>
+            <AccentSwatchGroups
+              accentOptions={props.accentOptions}
+              resolvedAppearance={resolvedAppearance()}
+              showThemeDefault={showThemeDefault()}
+              themeDefaultColor={
+                resolvedAppearance() === 'light'
+                  ? props.lightTheme.colors.accent
+                  : props.darkTheme.colors.accent
+              }
+            />
+            <div class="flex flex-col gap-1">
+              <Show when={props.showCustomAccentCaption ?? true}>
+                <span class="text-xs font-medium text-muted-foreground">Custom</span>
+              </Show>
+              <Radio.Item value="custom">
+                <Radio.ItemInput />
+                <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">
+                  Custom
+                </Radio.ItemLabel>
+              </Radio.Item>
+            </div>
+          </>
         }
-      />
-      <div class="flex flex-col gap-1">
-        <span class="text-xs font-medium text-muted-foreground">Custom</span>
-        <Radio.Item value="custom">
-          <Radio.ItemInput />
-          <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">
-            Custom
-          </Radio.ItemLabel>
-        </Radio.Item>
-      </div>
+      >
+        {/* The named-chip style: one grid, every choice a labelled control,
+            including the custom colour — nothing to caption from above. */}
+        <div class="grid grid-cols-2 gap-2 sm:grid-cols-3" data-accent-grid>
+          <For each={labelEntries()}>
+            {(option) => (
+              <Radio.Item value={option.id} class="min-w-0" data-accent-option={option.id}>
+                <Radio.ItemInput />
+                <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">
+                  {option.label}
+                </Radio.ItemLabel>
+              </Radio.Item>
+            )}
+          </For>
+          <Radio.Item value="custom" class="min-w-0">
+            <Radio.ItemInput />
+            <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">
+              Custom
+            </Radio.ItemLabel>
+          </Radio.Item>
+        </div>
+      </Show>
     </Radio>
   )
 }

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

@@ -34,6 +34,7 @@
 import { EyeOff, Palette, PanelsTopLeft, SlidersHorizontal } from 'lucide-solid'
 import { Show, createSignal, createUniqueId } from 'solid-js'
 import { cn } from '#lib/utils'
+import { ActionButton } from '../action-button'
 import { Button } from '../../ui/button/button'
 import { Input } from '../../ui/input/input'
 import { AppearanceFontSettingsGroup } from './font-settings-group'
@@ -144,12 +145,17 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
             </Show>
           </div>
         </Show>
-        <AppearanceFontSettingsGroup
-          settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}
-          menuPortalMount={props.menuPortalMount}
-          disabled={props.saving}
-          onChange={(fonts) => props.onChange({ fonts })}
-        />
+        {/* Inline, the typefaces read as one more palette choice; `end` hands
+            the closing slot to them for hosts whose order is palette and
+            surface first, text last. */}
+        <Show when={props.fontSettingsPlacement !== 'end'}>
+          <AppearanceFontSettingsGroup
+            settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}
+            menuPortalMount={props.menuPortalMount}
+            disabled={props.saving}
+            onChange={(fonts) => props.onChange({ fonts })}
+          />
+        </Show>
         <SettingsRow title="Glass" icon={<PanelsTopLeft />} description={glassDescription()}>
           <GlassChoices {...props} />
         </SettingsRow>
@@ -189,6 +195,14 @@ export function AppearanceEditor(props: AppearanceEditorProps) {
             Manage themes
           </Button>
         </SettingsRow>
+        <Show when={props.fontSettingsPlacement === 'end'}>
+          <AppearanceFontSettingsGroup
+            settings={props.draft.fonts ?? DEFAULT_APPEARANCE_EDITOR_FONT_SETTINGS}
+            menuPortalMount={props.menuPortalMount}
+            disabled={props.saving}
+            onChange={(fonts) => props.onChange({ fonts })}
+          />
+        </Show>
       </div>
       <Show when={!props.hideActions}>
         {/* Sticky so Save/Cancel stay reachable in a tall scroll container: the
@@ -262,11 +276,14 @@ export function AppearancePopover(props: AppearancePopoverProps) {
 
   return (
     <Sheet open={props.open} onOpenChange={(open) => (open ? props.onOpen() : props.onDismiss())}>
+      {/* The trigger is an icon-only action, so it explains itself through the
+          shared ActionButton's tooltip (keyboard focus included) rather than a
+          bare aria-label. */}
       <SheetTrigger
-        as={Button}
-        type="button"
+        as={ActionButton}
         variant="ghost"
         size="icon-sm"
+        tooltip="Open appearance settings"
         aria-label="Appearance settings"
       >
         <Palette />

package/src/components/composites/appearance-editor/appearance-types.ts

@@ -57,6 +57,32 @@ export type AppearanceEditorProps = {
   class?: string
   /** Leave Reset/Cancel/Save to the host, which renders `AppearanceEditorActions`. */
   hideActions?: boolean
+  /**
+   * Where the typeface settings sit in the option list. `inline` — the default
+   * — renders them between the accent and glass rows, where they read as one
+   * more palette choice. `end` closes the list with them: hosts whose option
+   * order is palette-and-surface first, text last, pass `end` instead of
+   * recomposing the editor.
+   */
+  fontSettingsPlacement?: 'inline' | 'end'
+  /**
+   * How the accent row renders its choices. `swatches` — the default — paints
+   * each choice as a colour circle. `labels` renders every choice as a named
+   * chip, for hosts whose accent contract is textual rather than chromatic.
+   */
+  accentEntryStyle?: 'swatches' | 'labels'
+  /**
+   * Whether the accent row leads with a "Theme default" swatch. Default on.
+   * Hosts whose default accent already is one of the catalogue presets pass
+   * `false`: the extra entry would duplicate the preset's own colour.
+   */
+  showThemeDefaultAccent?: boolean
+  /**
+   * Whether the swatch accent style captions its custom-colour entry. Default
+   * on. `false` leaves the custom chip to name itself — for hosts where the
+   * caption reads as a second "Custom" label on the control.
+   */
+  showCustomAccentCaption?: boolean
 }
 
 export type AppearancePopoverProps = AppearanceEditorProps & {

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

@@ -243,7 +243,11 @@ export function CommandItem(props: ComponentProps<typeof CmdkItem>) {
       class={cn(
         commandItem,
         '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',
+        // The selected row sits on the accent rung — the same primary-subtle
+        // fill the settings navigation's selected row owns — instead of the
+        // popover rung, so what is chosen keeps the accent the checked menus
+        // already carry in their indicators.
+        'group/command-item text-popover-foreground data-[selected=true]:bg-primary-subtle data-[selected=true]:text-foreground',
         local.class
       )}
       {...rest}

package/src/components/ui/tabs/tabs.tsx

@@ -142,7 +142,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
         'text-foreground',
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
         local.appearance === 'segmented'
-          ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'
+          ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-primary-subtle data-[selected]:text-foreground'
           : tabs.orientation() === 'vertical'
             ? 'h-control-md justify-start rounded-none border-s-2 border-transparent ps-3 pe-2 data-[selected]:border-primary'
             : 'h-control-md -mb-px rounded-none border-b-2 border-transparent px-2 pb-2 data-[selected]:border-primary',

package/src/components/ui/toggle/toggle.tsx

@@ -14,10 +14,13 @@ import { cn } from '#lib/utils'
  *
  * Kobalte supplies the pressed state and the keyboard behaviour; the styling
  * adds the one thing a headless primitive cannot know — that a pressed toggle
- * in a toolbar should read as *filled*, not merely outlined.
+ * in a toolbar should read as *filled*, not merely outlined. Pressed reads on
+ * the accent rung (`primary-subtle` with the accent glyph): pressed is the
+ * control's on state, the same family the checked checkbox and switch own, so
+ * it keeps a touch of the user's accent instead of a neutral fill.
  */
 export const toggleVariants = cva(
-  `${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-surface-active data-[pressed]:text-foreground disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
+  `${controlInteractive} inline-flex items-center justify-center rounded-md font-medium whitespace-nowrap select-none hover:bg-surface-hover hover:text-foreground data-[pressed]:bg-primary-subtle data-[pressed]:text-primary disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0`,
   {
     variants: {
       variant: {

package/src/components/ui/tooltip/tooltip.tsx

@@ -12,6 +12,7 @@ import {
 } from 'solid-js'
 import { isServer } from 'solid-js/web'
 import { tooltipTip, topLayerProps } from '#lib/overlay'
+import { acquireTooltipFocusGate, releaseTooltipFocusGate } from '#lib/tooltip-focus-gate'
 import { cn } from '#lib/utils'
 
 /**
@@ -161,6 +162,15 @@ export function TooltipProvider(props: TooltipProviderProps) {
 export type TooltipRootProps = ComponentProps<typeof KobalteTooltip>
 
 export function Tooltip(props: TooltipRootProps) {
+  // One document-level focus gate for every tooltip in the document: the first
+  // tooltip acquires it, the last to unmount releases it. This is what keeps a
+  // dialog's autofocus and an overlay's focus restoration from opening a tip —
+  // see #lib/tooltip-focus-gate for the contract and the two over-reach traps
+  // (pointer gestures and separator resize grips) it must not swallow.
+  if (!isServer) {
+    acquireTooltipFocusGate()
+    onCleanup(releaseTooltipFocusGate)
+  }
   const timing = useContext(TooltipTimingContext)
   const [local, rest] = splitProps(props, ['open', 'defaultOpen', 'onOpenChange', 'disabled'])
   const id = createUniqueId()

package/src/lib/tooltip-focus-gate.ts

@@ -0,0 +1,218 @@
+/*
+ * Tooltips open on active hover over the control, or on keyboard focus that
+ * follows a Tab key press. They must never open from programmatic focus: the
+ * autofocus a dialog or sheet gives its first control, and the focus a closing
+ * overlay restores to its opener, both land on buttons that carry tooltips —
+ * and the tooltip primitive opens immediately on focus and pins the tooltip
+ * until blur. That is the "tooltip auto-displays when a sheet opens" report,
+ * and the pinned tooltip is the "tooltip gets stuck and never disappears"
+ * report: the pointer is nowhere near the control, so no pointer leave ever
+ * closes it.
+ *
+ * The trigger listens for the native `focus` event on the trigger element, and
+ * composites build tooltips internally (ActionButton renders one from its
+ * `tooltip` prop), so the single interception point that covers every tooltip
+ * is a capture-phase `focus` listener on `document`. When focus lands without a
+ * keyboard-intent signal on a button-like element, the event is stopped before
+ * any element listener runs: the tooltip never learns about the focus. Hover
+ * opens are untouched (they ride pointer events), and the separate `focusin`
+ * event still flows, so dialog focus-cycle tracking, `:focus-visible` styling,
+ * and focus restoration all keep working. Focus still lands — only the event
+ * is stopped — so `document.activeElement` and scripted `.blur()` behave.
+ *
+ * The keyboard-intent signal is a Tab key press immediately before the focus —
+ * the only key that moves focus natively. Enter and Space open overlays too,
+ * so any "recent key" window wide enough for those would let an overlay's own
+ * autofocus back through; Tab-only keeps autofocus suppressed no matter how
+ * the overlay was opened, while normal Tab navigation still announces each
+ * control's tooltip (hover descriptions stay reachable from the keyboard).
+ *
+ * Suppression is scoped to button-like targets (`button`, `a[href]`,
+ * `[role="button"]`, `[role="link"]`). Composite widgets that move focus
+ * programmatically — menu items, listbox options, grid cells — are other
+ * element types whose roving-focus highlighting must keep receiving focus
+ * events, and text controls keep their own focus behaviour (select on focus,
+ * caret placement).
+ *
+ * Suppressed focus is real as far as the DOM is concerned (`activeElement`
+ * moves; only the event was stopped), and the tooltip interaction model treats
+ * a trigger that is `activeElement` as keyboard-held: while a tooltip on it is
+ * open, pointer movement away only *requests* a close and the request is
+ * refused for as long as the pointer keeps moving. Left alone, a later real
+ * hover on that control would open the tip and never let it leave — the
+ * residual "stuck" case. The gate therefore treats a suppressed focus as a
+ * phantom and releases it: the first pointer activity after the focus (a
+ * pointer session taking over from a script) blurs the element. Keyboard
+ * sessions never release it and never need to — keyboard focus moves by Tab,
+ * which is never suppressed, so nothing pins; and the release only runs for
+ * elements still holding `activeElement`, so a Tab already taken from the
+ * phantom is left alone.
+ *
+ * Focus that arrives while a pointer button is held belongs to a pointer
+ * gesture, not to a tooltip: the pixel resize handle focuses its handle when a
+ * drag starts and cancels the drag on blur, so a gesture focus must pass
+ * through untouched (no suppression, no phantom, no release). A gesture's own
+ * click behaviour already keeps tooltips closed, and the autofocus cases this
+ * gate exists for all happen with the pointer up.
+ *
+ * Independently of the gesture window, resize grips render as
+ * `<button role="separator">` and carry no tooltip, so they are excluded from
+ * the button-like scope entirely (see `isButtonLikeFocusTarget`).
+ *
+ * The gate is installed by the `Tooltip` root for the lifetime of the first
+ * tooltip in a document and removed when the last one unmounts, so every
+ * consumer of the primitive — including composites that build their own
+ * tooltips — inherits the contract without wiring of its own.
+ */
+
+/** How long after a Tab key press a resulting focus event still counts as
+ *  keyboard navigation. The native focus move follows the key press
+ *  immediately; the window only has to bridge that dispatch, not a later
+ *  script-driven focus. */
+export const TOOLTIP_FOCUS_INTENT_WINDOW_MS = 250
+
+/** Elements a tooltip-bearing control is rendered as. Everything else keeps
+ *  its native focus behaviour, and so do resize grips (see below). */
+const BUTTON_LIKE_SELECTOR = 'button, a[href], [role="button"], [role="link"]'
+
+/**
+ * Whether a focus event landing on this target could open a tooltip on a
+ * button-like control. Accepts any Element (an SVG glyph inside a control,
+ * for instance) and duck-types so the decision is testable without a DOM.
+ */
+export function isButtonLikeFocusTarget(target: unknown): boolean {
+  const element = target as Element | null | undefined
+  if (typeof element?.closest !== 'function') return false
+  const control = element.closest(BUTTON_LIKE_SELECTOR)
+  if (control === null) return false
+  // Resize grips render as `<button role="separator">` and focus themselves
+  // when a pointer drag starts. They carry no tooltip, and the blur that
+  // releases a suppressed focus would end the drag on its first move.
+  return control.getAttribute?.('role') !== 'separator'
+}
+
+/**
+ * The suppression decision: a button-like focus target hides a tooltip only
+ * when no keyboard navigation is in flight. Anything else — a Tab-driven
+ * focus, or focus on a non-button element — passes through untouched.
+ */
+export function shouldSuppressTooltipFocus(input: {
+  isButtonLike: boolean
+  keyboardIntentActive: boolean
+}): boolean {
+  return input.isButtonLike && !input.keyboardIntentActive
+}
+
+const installedDocuments = new WeakSet<Document>()
+
+/**
+ * Install the gate on a document. Idempotent per document; returns a disposer
+ * that removes the listeners (used by tests and by the tooltip root, which
+ * releases the gate when its document's last tooltip unmounts).
+ */
+export function installTooltipFocusGate(doc: Document = document): () => void {
+  if (installedDocuments.has(doc)) return () => {}
+
+  let lastTabKeyDownAt = 0
+  /** True between a pointerdown and its pointerup/pointercancel: focus events
+   *  inside that window belong to a pointer gesture (drag bootstrap, press)
+   *  and must reach their element untouched. */
+  let pointerGestureActive = false
+  /** The element holding a suppressed programmatic focus, if it still holds
+   *  `activeElement`. One slot: a newer suppressed focus replaces an older
+   *  one, and anything that already lost focus needs no release. */
+  let phantomFocusTarget: Element | undefined
+  /** The phantom-release `pointermove` listener exists only while a phantom
+   *  does: a gate that parks a permanent pointer listener on every document
+   *  with a tooltip in it costs every page a standing listener for a state
+   *  that is live for a few hundred milliseconds at most. */
+  let phantomReleaseAttached = false
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') lastTabKeyDownAt = Date.now()
+  }
+  const onPointerDown = () => {
+    pointerGestureActive = true
+    releasePhantomFocus()
+  }
+  const onPointerGestureEnd = () => {
+    pointerGestureActive = false
+  }
+  const dropPhantom = () => {
+    phantomFocusTarget = undefined
+    if (phantomReleaseAttached) {
+      phantomReleaseAttached = false
+      doc.removeEventListener('pointermove', onPointerMove, true)
+    }
+  }
+  const onFocus = (event: FocusEvent) => {
+    // Focus that moves on retires the phantom: there is nothing left to
+    // release, so the parked pointer listener goes with it.
+    if (phantomFocusTarget && event.target !== phantomFocusTarget) dropPhantom()
+    if (pointerGestureActive) return
+    if (!isButtonLikeFocusTarget(event.target)) return
+    const keyboardIntentActive = Date.now() - lastTabKeyDownAt <= TOOLTIP_FOCUS_INTENT_WINDOW_MS
+    if (!shouldSuppressTooltipFocus({ isButtonLike: true, keyboardIntentActive })) return
+    event.stopPropagation()
+    phantomFocusTarget = event.target as Element
+    if (!phantomReleaseAttached) {
+      phantomReleaseAttached = true
+      doc.addEventListener('pointermove', onPointerMove, true)
+    }
+  }
+  const releasePhantomFocus = () => {
+    if (pointerGestureActive) return
+    if (!phantomFocusTarget) return
+    const phantom = phantomFocusTarget
+    dropPhantom()
+    if ((doc as Document).activeElement !== phantom) return
+    if (typeof (phantom as HTMLElement).blur === 'function') (phantom as HTMLElement).blur()
+  }
+  const onPointerMove = () => releasePhantomFocus()
+
+  doc.addEventListener('keydown', onKeyDown, true)
+  doc.addEventListener('focus', onFocus, true)
+  doc.addEventListener('pointerdown', onPointerDown, true)
+  doc.addEventListener('pointerup', onPointerGestureEnd, true)
+  doc.addEventListener('pointercancel', onPointerGestureEnd, true)
+  installedDocuments.add(doc)
+  return () => {
+    doc.removeEventListener('keydown', onKeyDown, true)
+    doc.removeEventListener('focus', onFocus, true)
+    doc.removeEventListener('pointerdown', onPointerDown, true)
+    doc.removeEventListener('pointerup', onPointerGestureEnd, true)
+    doc.removeEventListener('pointercancel', onPointerGestureEnd, true)
+    doc.removeEventListener('pointermove', onPointerMove, true)
+    installedDocuments.delete(doc)
+  }
+}
+
+/**
+ * Reference-counted install for the tooltip root: the first tooltip in a
+ * document acquires the gate, the last one to unmount releases it. The document
+ * parameter exists so tests can drive the counter without a global DOM; the
+ * production call site guards on the server render before calling.
+ */
+const gateHolders = new WeakMap<Document, number>()
+const gateDisposers = new WeakMap<Document, () => void>()
+
+export function acquireTooltipFocusGate(targetDoc?: Document): void {
+  if (typeof document === 'undefined' && !targetDoc) return
+  const doc = targetDoc ?? document
+  const holders = gateHolders.get(doc) ?? 0
+  gateHolders.set(doc, holders + 1)
+  if (holders === 0) gateDisposers.set(doc, installTooltipFocusGate(doc))
+}
+
+export function releaseTooltipFocusGate(targetDoc?: Document): void {
+  if (typeof document === 'undefined' && !targetDoc) return
+  const doc = targetDoc ?? document
+  const holders = gateHolders.get(doc) ?? 0
+  if (holders === 0) return
+  if (holders === 1) {
+    gateHolders.delete(doc)
+    gateDisposers.get(doc)?.()
+    gateDisposers.delete(doc)
+    return
+  }
+  gateHolders.set(doc, holders - 1)
+}