@adea-ai/ui 0.110.1 → 0.112.0

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

@@ -1,12 +1,14 @@
 import { DropdownMenu as KobalteDropdownMenu } from '@kobalte/core/dropdown-menu'
 import { Check, ChevronRight, Circle } from 'lucide-solid'
 import type { Accessor, ComponentProps } from 'solid-js'
-import { createContext, splitProps, useContext } from 'solid-js'
+import { createContext, Show, splitProps, useContext } from 'solid-js'
 import {
   menuContentPadding,
   destructiveMenuItem,
   menuItem,
   menuLabel,
+  menuSwatchTone,
+  type MenuSwatchTone,
   menuSeparator,
   overlayMotion,
   overlaySurface,
@@ -192,6 +194,13 @@ export function DropdownMenuPortal(props: ComponentProps<typeof KobalteDropdownM
 }
 
 export type DropdownMenuContentProps = ComponentProps<typeof KobalteDropdownMenu.Content> & {
+  /**
+   * Kept for callers that hid the arrow explicitly; the arrow is now hidden by
+   * default. Pass `false` to draw one. The default flipped because Kobalte
+   * reserves half of the arrow's 30px box as popper gutter — a menu anchored to
+   * its trigger floated 15px off it, which read as a gap rather than as a
+   * pointer, and every anchored caller already passed `hideArrow`.
+   */
   hideArrow?: boolean
   /** Mount under an owner element such as a modal, keeping the menu in its accessible subtree. */
   portalMount?: HTMLElement
@@ -213,7 +222,12 @@ export function DropdownMenuContent(props: DropdownMenuContentProps) {
         )}
         {...rest}
       >
-        {!local.hideArrow && <KobalteDropdownMenu.Arrow aria-hidden="true" class={popoverArrow} />}
+        {local.hideArrow === false && (
+          /* Rendered only when a caller asks for it back: the popper folds half
+             the arrow's box into the content's gutter, so an arrow and a flush
+             menu have never been true at once. */
+          <KobalteDropdownMenu.Arrow aria-hidden="true" class={popoverArrow} />
+        )}
         {local.children}
       </KobalteDropdownMenu.Content>
     </KobalteDropdownMenu.Portal>
@@ -233,6 +247,10 @@ export function DropdownMenuItem(
      * whenever `shortcut` is drawn.
      */
     keyshortcuts?: string
+    /** Draw a leading colour dot from the shared tone ladder — the accent or
+     * status role the option's card badge carries. `aria-hidden`; the label
+     * carries the meaning. */
+    swatch?: MenuSwatchTone
   }
 ) {
   const [local, rest] = splitProps(props, [
@@ -240,6 +258,7 @@ export function DropdownMenuItem(
     'variant',
     'shortcut',
     'keyshortcuts',
+    'swatch',
     'children',
   ])
 
@@ -255,6 +274,9 @@ export function DropdownMenuItem(
       aria-keyshortcuts={local.keyshortcuts}
       {...rest}
     >
+      <Show when={local.swatch}>
+        <span aria-hidden="true" class={menuSwatchTone({ tone: local.swatch })} />
+      </Show>
       {local.children}
       {local.shortcut ? (
         <span
@@ -292,12 +314,19 @@ export function DropdownMenuShortcut(props: ComponentProps<'span'>) {
 }
 
 export function DropdownMenuCheckboxItem(
-  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem>
+  props: ComponentProps<typeof KobalteDropdownMenu.CheckboxItem> & {
+    /** Draw a leading colour dot from the shared tone ladder. `aria-hidden`;
+     * the label carries the meaning. */
+    swatch?: MenuSwatchTone
+  }
 ) {
-  const [local, rest] = splitProps(props, ['class', 'children'])
+  const [local, rest] = splitProps(props, ['class', 'swatch', 'children'])
 
   return (
     <KobalteDropdownMenu.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      <Show when={local.swatch}>
+        <span aria-hidden="true" class={menuSwatchTone({ tone: local.swatch })} />
+      </Show>
       {local.children}
       <KobalteDropdownMenu.ItemIndicator
         data-slot="dropdown-menu-indicator"
@@ -315,11 +344,20 @@ export function DropdownMenuRadioGroup(
   return <KobalteDropdownMenu.RadioGroup {...props} />
 }
 
-export function DropdownMenuRadioItem(props: ComponentProps<typeof KobalteDropdownMenu.RadioItem>) {
-  const [local, rest] = splitProps(props, ['class', 'children'])
+export function DropdownMenuRadioItem(
+  props: ComponentProps<typeof KobalteDropdownMenu.RadioItem> & {
+    /** Draw a leading colour dot from the shared tone ladder. `aria-hidden`;
+     * the label carries the meaning. */
+    swatch?: MenuSwatchTone
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'swatch', 'children'])
 
   return (
     <KobalteDropdownMenu.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      <Show when={local.swatch}>
+        <span aria-hidden="true" class={menuSwatchTone({ tone: local.swatch })} />
+      </Show>
       {local.children}
       {/* The indicator reads in the accent, like every other selected state in
           the system — a canvas-colored dot on a checked row reads as decoration. */}

package/dist/r/src/components/ui/dropdown-menu/index.ts

@@ -16,3 +16,4 @@ export {
   DropdownMenuTrigger,
   type DropdownMenuContentProps,
 } from './dropdown-menu'
+export type { MenuSwatchTone } from '../../../lib/overlay'

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

@@ -139,7 +139,9 @@ export function MenubarCheckboxItem(props: ComponentProps<typeof KobalteMenubar.
   return (
     <KobalteMenubar.CheckboxItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       {local.children}
-      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+      the system. */}
+      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
         <Check class="size-4" />
       </KobalteMenubar.ItemIndicator>
     </KobalteMenubar.CheckboxItem>
@@ -155,7 +157,9 @@ export function MenubarRadioItem(props: ComponentProps<typeof KobalteMenubar.Rad
   return (
     <KobalteMenubar.RadioItem class={cn(menuItem, 'pe-8', local.class)} {...rest}>
       {local.children}
-      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+      the system. */}
+      <KobalteMenubar.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
         <Circle class="size-2 fill-current" />
       </KobalteMenubar.ItemIndicator>
     </KobalteMenubar.RadioItem>

package/dist/r/src/components/ui/select/index.ts

@@ -9,3 +9,4 @@ export {
   SelectValue,
   type SelectTriggerProps,
 } from './select'
+export type { MenuSwatchTone } from '../../../lib/overlay'

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

@@ -2,7 +2,13 @@ import { Select as KobalteSelect } from '@kobalte/core/select'
 import { Check, ChevronDown, ChevronsUpDown } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
-import { menuContentPadding, menuItem, popoverArrow, topLayerProps } from '../../../lib/overlay'
+import {
+  menuContentPadding,
+  menuItem,
+  menuSwatchTone,
+  type MenuSwatchTone,
+  topLayerProps,
+} from '../../../lib/overlay'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -21,7 +27,12 @@ import { cn } from '../../../lib/utils'
 export function Select<Option, OptGroup = never>(
   props: ComponentProps<typeof KobalteSelect<Option, OptGroup>>
 ) {
-  return <KobalteSelect {...props} />
+  // Kobalte's own default gutter is 8px; without the arrow (removed below) the
+  // popper no longer folds half an arrow box into that offset, and 8px read as
+  // a detached list. Four pixels is shadcn's `sideOffset` — attached, with
+  // room for the trigger's own border.
+  const [local, rest] = splitProps(props, ['gutter'])
+  return <KobalteSelect gutter={local.gutter ?? 4} {...rest} />
 }
 
 export type SelectTriggerProps = ComponentProps<typeof KobalteSelect.Trigger> & {
@@ -153,20 +164,34 @@ export function SelectContent(props: SelectContentProps) {
         {...rest}
       >
         {local.children}
+        {/* No arrow: the list is the trigger's own value opened up, and Kobalte
+            reserves half the arrow's 30px box as popper gutter, which is where
+            the reported gap between a form trigger and its options came from. */}
         <KobalteSelect.Listbox class="flex flex-col" />
-        <KobalteSelect.Arrow aria-hidden="true" class={popoverArrow} />
       </KobalteSelect.Content>
     </KobalteSelect.Portal>
   )
 }
 
-export function SelectItem(props: ComponentProps<typeof KobalteSelect.Item>) {
-  const [local, rest] = splitProps(props, ['class', 'children'])
+export function SelectItem(
+  props: ComponentProps<typeof KobalteSelect.Item> & {
+    /** Draw a leading colour dot from the shared tone ladder — the accent or
+     * status role the option's card badge carries. `aria-hidden`; the label
+     * carries the meaning. */
+    swatch?: MenuSwatchTone
+  }
+) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'swatch'])
 
   return (
     <KobalteSelect.Item class={cn(menuItem, 'pe-8', local.class)} {...rest}>
+      <Show when={local.swatch}>
+        <span aria-hidden="true" class={menuSwatchTone({ tone: local.swatch })} />
+      </Show>
       <KobalteSelect.ItemLabel>{local.children}</KobalteSelect.ItemLabel>
-      <KobalteSelect.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center">
+      {/* The indicator reads in the accent, like every other selected state in
+          the system — the row's own foreground reads as decoration. */}
+      <KobalteSelect.ItemIndicator class="absolute end-2 flex size-4 items-center justify-center text-primary">
         <Check class="size-4" />
       </KobalteSelect.ItemIndicator>
     </KobalteSelect.Item>

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

@@ -46,7 +46,7 @@ import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
 // scrolled programmatically (focus, scrollIntoView, scrollTop), which slid the
 // pinned footer out of view. Only SheetBody scrolls.
 const sheetVariants = cva(
-  'bg-popover text-popover-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',
+  'bg-background text-foreground fixed z-(--z-dialog) flex flex-col overflow-clip border-border shadow-lg',
   {
     variants: {
       side: {

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

@@ -1,11 +1,12 @@
 import { Tooltip as KobalteTooltip, useTooltipContext } from '@kobalte/core/tooltip'
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, JSX } from 'solid-js'
 import {
   createContext,
   createEffect,
   createSignal,
   createUniqueId,
   onCleanup,
+  Show,
   splitProps,
   useContext,
 } from 'solid-js'
@@ -349,13 +350,24 @@ export function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigg
   )
 }
 
-export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content>
+export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {
+  /**
+   * A leading icon, repeating the trigger's glyph inside the tip — the side
+   * rail's icon+label treatment, offered so a toolbar or rail tooltip does not
+   * have to hand-roll it. Decorative by contract: the tip is `aria-hidden`
+   * while closed and never the accessible name, so the icon must not be the
+   * only carrier of meaning. Size it by leaving the svg bare; the slot fixes
+   * it to the system's control size.
+   */
+  icon?: JSX.Element
+}
 
 export function TooltipContent(props: TooltipContentProps) {
   const interaction = useContext(TooltipInteractionContext)
   const [local, rest] = splitProps(props, [
     'class',
     'children',
+    'icon',
     'aria-hidden',
     'onEscapeKeyDown',
     'onPointerDownOutside',
@@ -380,6 +392,9 @@ export function TooltipContent(props: TooltipContentProps) {
           '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',
           'data-expanded:duration-150 data-closed:duration-100',
+          // An icon+label tip is one row that reads as a unit, so the label
+          // never wraps under the glyph.
+          { 'flex items-center gap-2 whitespace-nowrap': !!local.icon },
           local.class
         )}
         // A tooltip is never interactive: the content is plain text, and the
@@ -404,6 +419,17 @@ export function TooltipContent(props: TooltipContentProps) {
         {...topLayerProps}
         {...rest}
       >
+        <Show when={local.icon}>
+          {(icon) => (
+            <span
+              data-slot="tooltip-icon"
+              aria-hidden="true"
+              class="flex size-4 shrink-0 items-center justify-center [&_svg]:size-4"
+            >
+              {icon()}
+            </span>
+          )}
+        </Show>
         {local.children}
       </KobalteTooltip.Content>
     </KobalteTooltip.Portal>

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

@@ -10,10 +10,29 @@
  * "an overlay looks like this" a fact rather than a convention.
  */
 
-/** The panel itself: fill, hairline edge, radius, elevation. */
+import { cva, type VariantProps } from './variants'
+
+/** The panel itself: fill, hairline edge, radius, elevation. Menus, popovers
+ * and the command palette float on the elevated overlay rung (`--popover`). */
 export const overlaySurface =
   'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'
 
+/**
+ * The modal panel: the same hairline edge, radius and elevation, painted on the
+ * *neutral* theme surface instead of the elevated overlay rung.
+ *
+ * `--popover` is the catalogue's `surfaceElevated`, whose derivation amplifies
+ * the canvas hue's chroma on the elevated step. On the dark default's violet
+ * canvas that makes the dialog the most chromatic surface in the ladder —
+ * `oklch(0.2406 0.0088 300.91)`, red above green in sRGB — and on a full dialog
+ * panel that cast reads as a warm tint the canvas never has. shadcn's own
+ * convention already splits the two: a Dialog paints `bg-background`, menus and
+ * popovers paint `bg-popover`. The veil, the hairline and the elevation shadow
+ * carry the separation the lighter fill no longer provides.
+ */
+export const dialogSurface =
+  'bg-background text-foreground rounded-xl border border-border shadow-lg'
+
 /**
  * Overlay titles have one fixed typography role. Keep this small recipe shared
  * without loading the configurable Heading component into every dialog.
@@ -85,6 +104,31 @@ export const menuLabel =
 /** The rule between menu groups. */
 export const menuSeparator = 'bg-border -mx-1 my-1 h-px'
 
+/**
+ * A leading colour swatch on a menu or select row: the sanctioned way to carry
+ * a card-tone colour into a list of options. The tones are the system's accent
+ * and status roles — the vocabulary a Badge already speaks — so the colour an
+ * option shows in a menu is the colour its badge carries on a card, and a
+ * caller never passes a raw colour into a list. The dot is `aria-hidden`; the
+ * label carries the meaning, so a tone is never the only signal.
+ */
+export const menuSwatchTone = cva('size-2 shrink-0 rounded-full', {
+  variants: {
+    tone: {
+      neutral: 'bg-muted-foreground',
+      primary: 'bg-primary',
+      success: 'bg-success',
+      warning: 'bg-warning',
+      destructive: 'bg-destructive',
+      info: 'bg-info',
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+/** The tones a menu row's swatch can take. */
+export type MenuSwatchTone = NonNullable<VariantProps<typeof menuSwatchTone>['tone']>
+
 /** Padding shared by every menu-list surface. */
 export const menuContentPadding = 'p-1'
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.110.1",
+  "version": "0.112.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/src/components/composites/action-button/action-button.tsx

@@ -29,6 +29,14 @@ export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps
   tooltip?: string
   /** Placement of the explanation; icon actions live in bars, so it defaults below the control. */
   tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+  /**
+   * A leading icon repeated inside the explanation, forwarded to the shared
+   * tooltip's `icon` slot so a bar of icon actions gets the icon+label tip
+   * without hand-composing Button and Tooltip. Decorative by contract: the tip
+   * is never the accessible name, so the icon must not carry meaning the label
+   * lacks. Size it by leaving the svg bare; the slot fixes it to control size.
+   */
+  tooltipIcon?: JSX.Element
   /** 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. */
@@ -92,6 +100,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     'aria-busy',
     'tooltip',
     'tooltipSide',
+    'tooltipIcon',
     'busy',
     'busyLabel',
   ])
@@ -175,7 +184,7 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
           >
             {contents()}
           </TooltipTrigger>
-          <TooltipContent>{local.tooltip}</TooltipContent>
+          <TooltipContent icon={local.tooltipIcon}>{local.tooltip}</TooltipContent>
         </Tooltip>
       </Show>
       <Show when={busy()}>

package/src/components/composites/appearance-editor/accent-swatch-groups.tsx

@@ -22,11 +22,7 @@
  * SOFTWARE.
  */
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
-import { For, Show } from 'solid-js'
-import { cn } from '#lib/utils'
-
-export const PRIMARY_ACCENT_IDS = ['blue', 'green', 'amber', 'cyan', 'pink'] as const
-const primaryAccentIds: ReadonlySet<string> = new Set(PRIMARY_ACCENT_IDS)
+import { For } from 'solid-js'
 
 type AccentOption = Readonly<{
   id: string
@@ -37,104 +33,55 @@ type AccentOption = Readonly<{
 
 type AccentSwatchGroupsProps = {
   accentOptions: readonly AccentOption[]
-  themeAccentOptions: readonly AccentOption[]
+  /**
+   * Accepted for host compatibility and no longer rendered. The picker offers
+   * one theme-scoped group — the theme's own primary followed by the presets —
+   * instead of splitting additional presets and the theme pair's accent slots
+   * into labelled groups of their own. A stored theme-accent id still resolves
+   * (`resolveAccentPreset`) and is still described by the row; it is just no
+   * longer offered as a swatch, and a host can stop feeding this list.
+   */
+  themeAccentOptions?: readonly AccentOption[]
   resolvedAppearance: 'light' | 'dark'
   themeDefaultColor: string
 }
 
+/**
+ * The accent choices, as ONE group: the theme's own primary first, then every
+ * preset the host feeds, each painted with its value for the resolved
+ * appearance — which is what makes the group theme-scoped rather than a
+ * catalogue table. The custom-color entry is the host's (`AccentChoices`
+ * renders it beside this grid), because whether a free-form colour is accepted
+ * is the host's validation to own.
+ */
 export function AccentSwatchGroups(props: AccentSwatchGroupsProps) {
-  const primaryAccents = () =>
-    PRIMARY_ACCENT_IDS.flatMap((id) => {
-      const option = props.accentOptions.find((candidate) => candidate.id === id)
-      return option ? [option] : []
-    })
-  const additionalAccents = () =>
-    props.accentOptions.filter(
-      (option) => option.id !== 'theme' && !primaryAccentIds.has(option.id)
-    )
+  const presets = () => props.accentOptions.filter((option) => option.id !== 'theme')
 
   return (
-    <>
-      <div class="grid grid-cols-3 gap-2" data-primary-accent-grid>
-        <AccentSwatch
-          id="theme"
-          label="Theme default"
-          color={props.themeDefaultColor}
-          group="primary"
-        />
-        <For each={primaryAccents()}>
-          {(option) => (
-            <AccentSwatch
-              id={option.id}
-              label={option.label}
-              color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-              group="primary"
-            />
-          )}
-        </For>
-      </div>
-      <Show when={additionalAccents().length > 0}>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-muted-foreground">Additional colors</span>
-          <div class="flex flex-wrap gap-2">
-            <For each={additionalAccents()}>
-              {(option) => (
-                <AccentSwatch
-                  id={option.id}
-                  label={option.label}
-                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-                  group="additional"
-                />
-              )}
-            </For>
-          </div>
-        </div>
-      </Show>
-      <Show when={props.themeAccentOptions.length > 0}>
-        <div class="flex flex-col gap-1">
-          <span class="text-xs font-medium text-muted-foreground">Theme accents</span>
-          <div class="grid grid-cols-3 gap-2">
-            <For each={props.themeAccentOptions}>
-              {(option) => (
-                <AccentSwatch
-                  id={option.id}
-                  label={'Theme ' + option.label.toLowerCase()}
-                  color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
-                  group="theme"
-                  dashed
-                />
-              )}
-            </For>
-          </div>
-        </div>
-      </Show>
-    </>
+    <div class="grid grid-cols-4 gap-2" data-accent-grid>
+      <AccentSwatch id="theme" label="Theme default" color={props.themeDefaultColor} />
+      <For each={presets()}>
+        {(option) => (
+          <AccentSwatch
+            id={option.id}
+            label={option.label}
+            color={(props.resolvedAppearance === 'light' ? option.light : option.dark) ?? ''}
+          />
+        )}
+      </For>
+    </div>
   )
 }
 
-function AccentSwatch(props: {
-  id: string
-  label: string
-  color: string
-  group: 'primary' | 'additional' | 'theme'
-  dashed?: boolean
-}) {
+function AccentSwatch(props: { id: string; label: string; color: string }) {
   return (
     <Radio.Item
       value={props.id}
       data-accent-option={props.id}
-      data-primary-accent={props.group === 'primary' ? props.id : undefined}
-      data-additional-accent={props.group === 'additional' ? props.id : undefined}
-      data-theme-accent={props.group === 'theme' ? props.id : undefined}
       class="rounded-full focus-within:ring-3 focus-within:ring-ring/50"
     >
       <Radio.ItemInput />
-      <Radio.ItemLabel
-        class={cn(
-          'block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',
-          { 'border-dashed data-[checked]:border-solid': props.dashed }
-        )}
-      >
+      <Radio.ItemLabel class="block size-7 cursor-pointer rounded-full border p-0.5 data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary">
         <span
           class="block size-full rounded-full"
           aria-hidden="true"

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

@@ -104,8 +104,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
   // user will see it.
   const resolvedAppearance = () =>
     props.draft.mode === 'system' ? props.resolvedAppearance : props.draft.mode
-  // The accents the previewed theme pair carries, offered after the presets.
-  const themeAccents = () => props.themeAccentOptions ?? []
   const accentSelection = () => (isCustomAccent(props) ? 'custom' : props.draft.accent)
   return (
     <Radio
@@ -122,7 +120,6 @@ export function AccentChoices(props: AppearanceEditorProps) {
     >
       <AccentSwatchGroups
         accentOptions={props.accentOptions}
-        themeAccentOptions={themeAccents()}
         resolvedAppearance={resolvedAppearance()}
         themeDefaultColor={
           resolvedAppearance() === 'light'

package/src/components/composites/appearance-editor/font-settings-group.tsx

@@ -11,7 +11,6 @@ import {
   DropdownMenuTrigger,
 } from '../../ui/dropdown-menu/dropdown-menu'
 import { InputControl } from '../../ui/input/input-control'
-import { SettingsRow } from './appearance-rows'
 import {
   APPEARANCE_EDITOR_FONT_SIZE_MAX,
   APPEARANCE_EDITOR_FONT_SIZE_MIN,
@@ -142,7 +141,7 @@ function FontFamilyMenu(props: {
         size="sm"
         aria-label={`${props.label} font family`}
         disabled={props.disabled}
-        class="w-40 max-w-full justify-between"
+        class="w-32 max-w-full justify-between"
       >
         <span class="truncate">{selectedLabel()}</span>
         <ChevronDown aria-hidden="true" class="ms-2 size-4 shrink-0 text-muted-foreground" />
@@ -298,8 +297,22 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
             )
           }
           return (
-            <SettingsRow title={row.label} icon={<Icon />} description={row.description}>
-              <div class="flex min-w-0 max-w-full flex-wrap items-center gap-2">
+            <section class="flex items-center gap-3 px-4 py-4" data-font-settings-row={row.axis}>
+              <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"
+              >
+                <Icon />
+              </span>
+              {/* One line, always: the copy truncates rather than wrapping the
+                  controls to a second line, so the family menu, the size field
+                  and the title/subtitle stay aligned. The compact widths keep
+                  that true at the appearance sheet's own width. */}
+              <div class="min-w-0 flex-1">
+                <h3 class="text-sm font-medium">{row.label}</h3>
+                <div class="mt-0.5 truncate text-xs text-muted-foreground">{row.description}</div>
+              </div>
+              <div class="flex shrink-0 items-center gap-2">
                 <FontFamilyMenu
                   label={row.label}
                   family={value().family}
@@ -307,7 +320,7 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
                   disabled={props.disabled}
                   onSelect={(family) => updateAxis(row.axis, { family })}
                 />
-                <div class="flex shrink-0 items-center gap-1">
+                <div class="flex items-center gap-1">
                   <InputControl
                     type="number"
                     min={APPEARANCE_EDITOR_FONT_SIZE_MIN}
@@ -318,7 +331,7 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
                     aria-label={`${row.label} font size in pixels`}
                     aria-describedby={sizeHintId}
                     aria-invalid={sizeIsInvalid()}
-                    class="w-16"
+                    class="w-12"
                     onInput={(event) =>
                       setSizeDrafts((current) => ({
                         ...current,
@@ -341,7 +354,7 @@ export function AppearanceFontSettingsGroup(props: AppearanceFontSettingsGroupPr
                   {APPEARANCE_EDITOR_FONT_SIZE_MAX} pixels.
                 </span>
               </div>
-            </SettingsRow>
+            </section>
           )
         }}
       </For>

package/src/components/theme/appearance-panel.tsx

@@ -118,7 +118,6 @@ export function AppearancePanel(props: AppearancePanelProps) {
         >
           <AccentSwatchGroups
             accentOptions={accentPresets}
-            themeAccentOptions={themeAccents()}
             resolvedAppearance={resolvedAppearance()}
             themeDefaultColor="var(--primary)"
           />