@adecore/ui 0.35.4 → 0.36.0

package/dist/select-shared.js

@@ -5,7 +5,7 @@ export const TRIGGER_SIZE = {
   md: 'h-8 gap-1.5 px-2'
 };
 export const TRIGGER_VARIANT = {
-  outlined: 'max-w-56 rounded-lg border border-border bg-surface-raised text-text',
+  outlined: 'max-w-56 rounded-lg border border-field-border bg-field text-text hover:bg-surface-hover data-[popup-open]:bg-surface-hover data-disabled:hover:bg-field',
   ghost: 'rounded-md text-text-muted hover:bg-surface-hover hover:text-text data-[popup-open]:bg-surface-active data-[popup-open]:text-text data-disabled:hover:bg-transparent data-disabled:hover:text-text-muted'
 };
 /* The dimmed look `Switch` and `Button` wear when disabled, so a select that cannot open reads as such. */

package/dist/settings/SettingsDialog.js

@@ -241,7 +241,7 @@ function SearchField(t0) {
   if ($[15] !== query || $[16] !== t4 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
     t8 = /*#__PURE__*/_jsx(Input, {
       ref: input,
-      className: "bg-surface-sunken pr-12 pl-8 text-xs",
+      className: "pr-12 pl-8 text-xs",
       placeholder: t4,
       "aria-label": t5,
       value: query,

package/dist/theme.css

@@ -17,9 +17,16 @@
        than the pressed step, so hover reads as a lift and pressed as the heavier state. A white
        popup cannot go lighter, so in this theme the step is the softest gray there is. */
     --surface-hover: #f3f3f5;
+    /* The hover of something that draws its own border: a smaller step, so the ground never passes
+       its edge and the outline stays visible under the pointer. */
+    --surface-hover-edged: color-mix(in srgb, var(--surface-raised) 60%, var(--surface-hover));
     /* The pressed step of a toggle. It cannot be `--surface-raised`, which equals `--surface` in the
        light theme, and it has to sit a shade past `--surface-hover` so pressed outranks hover. */
     --surface-active: #dcdce2;
+    /* What a person types or picks in: a step lighter than the ground it stands on in the dark theme, the raised white here. */
+    --field: var(--surface-raised);
+    /* An edge of its own, since an app may set `--border` to a solid separator that vanishes against a field. */
+    --field-border: rgb(0 0 0 / 0.11);
     /* Borders carry an alpha rather than a gray of their own, so a line takes the color of whatever
        it is drawn over instead of fighting it. A gray hairline over a tinted surface reads as a
        smudge; the same line in black at a low alpha stays a line. Everything with a surface of its
@@ -41,6 +48,9 @@
     --accent-soft: color-mix(in srgb, var(--accent) 16%, var(--surface));
     --accent-text: #ffffff;
     --selection: rgb(var(--accent-rgb) / 0.55);
+    /* The part of a name that answers a filter or a search. A tint of its own rather than the
+       selection's, so a selected row that matches still shows both. */
+    --match: color-mix(in srgb, var(--status-needs-you) 30%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.08),
         0 3px 6px -2px rgb(0 0 0 / 0.07),
@@ -106,9 +116,12 @@
     --bg: #0d0d10;
     --surface: #131316;
     --surface-raised: #18181c;
-    --surface-sunken: #08080a;
+    --surface-sunken: #0b0b0e;
     --surface-hover: #202024;
     --surface-active: #28282e;
+    /* Derived, so an app that tints its surfaces tints its fields along. */
+    --field: color-mix(in srgb, var(--surface) 40%, var(--surface-hover));
+    --field-border: rgb(255 255 255 / 0.1);
     /* White at a low alpha, which is what gives a dark surface its lifted edge. */
     --border: rgb(255 255 255 / 0.07);
     --separator: oklch(0.236 0.006 285.956);
@@ -118,6 +131,7 @@
     --text-muted: #9a9aa6;
     --text-faint: #5f5f6b;
     --selection: rgb(var(--accent-rgb) / 0.6);
+    --match: color-mix(in srgb, var(--status-needs-you) 28%, transparent);
     --float-shadow:
         0 1px 2px -1px rgb(0 0 0 / 0.3),
         0 2px 4px rgb(0 0 0 / 0.24),
@@ -233,7 +247,10 @@
     --color-surface-sunken: var(--surface-sunken);
     --color-surface-idle: var(--surface-idle);
     --color-surface-hover: var(--surface-hover);
+    --color-surface-hover-edged: var(--surface-hover-edged);
     --color-surface-active: var(--surface-active);
+    --color-field: var(--field);
+    --color-field-border: var(--field-border);
     --color-border: var(--border);
     --color-separator: var(--separator);
     --color-border-strong: var(--border-strong);
@@ -261,6 +278,10 @@
 }
 
 @layer base {
+    /* Whatever a click acts on shows the hand; a disabled one shows that nothing will. Menu rows keep the arrow (`.menu-item`). */
+    :where(button, a[href], summary, label[for], [role="button"], [role="checkbox"], [role="switch"], [role="radio"], [role="tab"], [role="option"]):not(:disabled, [aria-disabled="true"], [data-disabled]) {
+        cursor: pointer;
+    }
     /*
      * A border with an alpha has to mix with what is behind the element, not with the element's own
      * background: by default a background runs on under the border and a node's white surface would
@@ -326,8 +347,8 @@
         width: 100%;
         padding: 0 10px;
         border-radius: 8px;
-        border: 1px solid var(--border);
-        background: var(--surface);
+        border: 1px solid var(--field-border);
+        background-color: var(--field);
         color: var(--text);
         font-size: var(--text-sm);
         outline: none;
@@ -345,6 +366,10 @@
         border-radius: 6px;
         font-size: var(--text-xs);
     }
+    /* A field inside a card that draws the edge and the focus for it. The border stays as a transparent
+       line, so the text sits where it would in a field of its own. */
+    .field-bare { border-color: transparent; background: transparent; }
+    .field-bare:focus-visible { outline: none; }
     /* Keyboard focus is visible on every control; pointer focus stays quiet. `.focus-ring` is the
        same outline for something that takes focus without being a button, such as a row in a list. */
     .icon-btn:focus-visible, .menu-item:focus-visible, button:focus-visible, .focus-ring:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@@ -683,6 +708,11 @@
     .adecore-tree-decoration {
         font-variant-numeric: tabular-nums;
     }
+    /* A row's own icon in place of the tree's glyph, in the glyph's color. */
+    .adecore-tree-icon {
+        display: inline-flex;
+        color: var(--text-muted);
+    }
     /* A tree whose rows slide sideways: every part of a row keeps its width and moves with the shift. */
     .adecore-tree[data-overflow="scroll"] .adecore-tree-row {
         overflow: clip;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adecore/ui",
-  "version": "0.35.4",
+  "version": "0.36.0",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
   "license": "FSL-1.1-MIT",
   "author": "Bas Milius",

package/src/Button.tsx

@@ -1,35 +1,8 @@
 import type { AnchorHTMLAttributes, ComponentProps, Ref } from 'react';
 import clsx from 'clsx';
+import { buttonClass, type ButtonShape, type ButtonSize, type ButtonVariant } from './button-class.ts';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'danger-outline' | 'positive' | 'inverse';
-export type ButtonSize = 'xs' | 'sm' | 'md';
-export type ButtonShape = 'default' | 'pill';
-
-const VARIANT: Record<ButtonVariant, string> = {
-    // A filled button darkens under the pointer. Its color is the meaning, so no token of its own for hover.
-    primary: 'bg-accent text-accent-text hover:brightness-90 disabled:hover:brightness-100',
-    secondary: 'border border-border bg-surface-raised text-text hover:bg-surface-hover disabled:hover:bg-surface-raised',
-    ghost: 'text-text-muted hover:bg-surface-hover hover:text-text',
-    danger: 'bg-status-error text-accent-text hover:brightness-90 disabled:hover:brightness-100',
-    // A step that forgets something rather than destroys it: softer than the filled button of a deletion that cannot come back.
-    'danger-outline': 'border border-status-error/35 text-status-error hover:bg-status-error/10 disabled:hover:bg-transparent',
-    positive: 'bg-positive text-positive-text hover:brightness-90 disabled:hover:brightness-100',
-    // Dark on a light theme, light on a dark one, matching what Apple's and GitHub's sign-in buttons ask for.
-    inverse: 'bg-text text-bg hover:opacity-90 disabled:hover:opacity-100'
-};
-
-/* 28 and 32 pixels are the compact and the normal control; 24 fits a header of 32. */
-const SIZE: Record<ButtonSize, string> = {
-    xs: 'h-6 px-2',
-    sm: 'h-7 px-2.5',
-    md: 'h-8 px-3'
-};
-
-/* A pill is one size of its own, for a control that sits in a round row, so it takes the place of `size`. */
-const SHAPE: Record<ButtonShape, string> = {
-    default: 'rounded-md text-xs',
-    pill: 'h-9 rounded-full px-3.5 text-sm'
-};
+export type { ButtonShape, ButtonSize, ButtonVariant } from './button-class.ts';
 
 export interface ButtonProps extends ComponentProps<'button'> {
     variant?: ButtonVariant;
@@ -42,13 +15,7 @@ export interface ButtonProps extends ComponentProps<'button'> {
 
 /* Every button with a word in it. A button that is only an icon is an `IconButton`, which is a square, not a label. */
 export function Button({ variant = 'ghost', size = 'md', shape = 'default', className, href, type = 'button', ref, ...rest }: ButtonProps) {
-    const classes = clsx(
-        'inline-flex shrink-0 items-center justify-center gap-1.5 font-medium disabled:opacity-50',
-        SHAPE[shape],
-        VARIANT[variant],
-        shape === 'default' && SIZE[size],
-        className
-    );
+    const classes = clsx(buttonClass(variant, size, shape), className);
     if (href) {
         return (
             <a

package/src/Checkbox.tsx

@@ -27,7 +27,7 @@ export function Checkbox({ checked, onCheckedChange, label, indeterminate = fals
             aria-label={label}
             disabled={disabled}
             className={clsx(
-                'flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-strong bg-surface text-accent-text transition-colors',
+                'flex size-4 shrink-0 items-center justify-center rounded-sm border border-field-border bg-field text-accent-text transition-colors',
                 'data-checked:border-accent data-checked:bg-accent data-indeterminate:border-accent data-indeterminate:bg-accent data-disabled:opacity-50',
                 className
             )}

package/src/ChoiceCards.tsx

@@ -47,11 +47,11 @@ function ChoiceCard<Value extends string | number>({ choice, radio }: { choice:
             disabled={choice.disabled}
             aria-labelledby={`${id}-title`}
             aria-describedby={`${id}-description`}
-            className="group focus-ring flex min-w-0 items-start gap-3 rounded-xl border border-border bg-surface p-3 text-left hover:bg-surface-hover data-checked:border-accent data-disabled:opacity-50 data-disabled:hover:bg-surface"
+            className="group focus-ring flex min-w-0 items-start gap-3 rounded-xl border border-border bg-surface p-3 text-left hover:bg-surface-hover-edged data-checked:border-accent data-disabled:opacity-50 data-disabled:hover:bg-surface"
         >
             {radio === 'start' && dot}
             {choice.icon && (
-                <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent">
+                <span className="grid size-8 shrink-0 place-items-center rounded-lg bg-surface-sunken text-text-muted group-data-checked:text-accent dark:bg-field dark:inset-ring dark:inset-ring-field-border">
                     <Icon icon={choice.icon} size={16} />
                 </span>
             )}

package/src/IconPicker.tsx

@@ -1,12 +1,14 @@
 import { useId, useLayoutEffect, useRef, useState, type KeyboardEvent, type Ref } from 'react';
 import clsx from 'clsx';
-import { Ban, Search, X } from 'lucide-react';
+import { Ban, ChevronDown, Search, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { Button } from './Button.tsx';
 import { EmptyState } from './EmptyState.tsx';
 import { formatNumber } from './format/number.ts';
 import { Icon } from './Icon.tsx';
 import { IconButton } from './IconButton.tsx';
-import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons } from './icon-picker.ts';
+import { cellForKey, escapeClearsSearch, filterSections, isGrouped, sectionsOf, tabStopOf, type IconPickerIcons, type IconSection } from './icon-picker.ts';
+import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';
 import { SectionLabel } from './SectionLabel.tsx';
 import { Tooltip } from './Tooltip.tsx';
 
@@ -25,15 +27,17 @@ export interface IconPickerProps {
     onValueChange(name: string): void;
     /* More words a search finds an icon by, beside its name and its group's label, by icon name. */
     keywords?: Readonly<Record<string, readonly string[]>>;
-    /* A search field on top of the grid, in one frame with it. On by default for groups, off for a flat set. */
+    /* A search field on top of the grid. On by default for groups, off for a flat set. */
     searchable?: boolean;
     /* The grid as a scroll area this many rows high, with room for a heading. Without it the grid is as tall as its icons. */
     rows?: number;
     disabled?: boolean;
     /* Clearing the icon. A surface that falls back to a default of its own offers that instead. */
     onClear?: () => void;
-    /* The label above the grid. A surface that also takes an image calls this grid something else, or the two read as one list. */
+    /* The label above the trigger. A surface that also takes an image calls this something else, or the two read as one list. */
     label?: string;
+    /* Leaves the label out of sight, for a row that names the control beside it; it still names the trigger. */
+    hideLabel?: boolean;
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
@@ -49,9 +53,9 @@ const markStuckHeadings = (area: HTMLElement): void => {
 };
 
 /*
- * The mark a thing wears, one of a set of Lucide icons, as a grid under a label. With a search or a
- * height in rows, the search and the grid share one frame. The grid is one tab stop: arrows move the
- * focus and only Enter, Space or a click chooses, since a caller may save every choice at once.
+ * The mark a thing wears, one of a set of Lucide icons, behind a trigger drawn like a field. The
+ * popover holds a search over the grid. The grid is one tab stop: arrows move the focus and only
+ * Enter, Space or a click chooses, since a caller may save every choice at once.
  */
 export function IconPicker({
     icons,
@@ -63,25 +67,120 @@ export function IconPicker({
     disabled = false,
     onClear,
     label,
+    hideLabel = false,
     className,
     ref
 }: IconPickerProps) {
     const { t } = useTranslation('ui');
     const id = useId();
-    const area = useRef<HTMLDivElement>(null);
+    const trigger = useRef<HTMLButtonElement>(null);
+    const [open, setOpen] = useState(false);
+    const sections = sectionsOf(icons);
+    const glyph = value === null ? undefined : sections.flatMap((section) => section.icons).find(([icon]) => icon === value)?.[1];
+    const name = label ?? t('iconPicker.label');
+    const clearable = onClear !== undefined && value !== null && !disabled;
+
+    const choose = (icon: string): void => {
+        onValueChange(icon);
+        setOpen(false);
+    };
+
+    const clear = (): void => {
+        onClear?.();
+        setOpen(false);
+    };
+
+    return (
+        <div ref={ref} className={clsx('flex flex-col gap-1.5', className)}>
+            <SectionLabel id={`${id}-label`} render={<div />} className={clsx(hideLabel && 'sr-only')}>
+                {name}
+            </SectionLabel>
+            <PopoverRoot open={open} onOpenChange={setOpen}>
+                <div className="flex gap-1.5">
+                    <PopoverTrigger
+                        ref={trigger}
+                        disabled={disabled}
+                        aria-labelledby={`${id}-label ${id}-value`}
+                        className="field flex w-auto min-w-0 items-center gap-2 text-left hover:bg-surface-hover data-disabled:cursor-default data-disabled:opacity-50 data-disabled:hover:bg-field data-[popup-open]:bg-surface-hover"
+                    >
+                        {glyph && <Icon icon={glyph} size={16} className="shrink-0 text-text" />}
+                        {/* The icon says which it is; its name is there for a screen reader. */}
+                        <span id={`${id}-value`} className={clsx('min-w-0 truncate', glyph ? 'sr-only' : 'text-text-faint')}>
+                            {value ?? t('iconPicker.placeholder')}
+                        </span>
+                        <Icon icon={ChevronDown} size={14} className="shrink-0 text-text-faint" />
+                    </PopoverTrigger>
+                    {clearable && (
+                        <Tooltip label={t('iconPicker.none')}>
+                            <Button
+                                variant="secondary"
+                                className="w-8 shrink-0 px-0!"
+                                aria-label={t('iconPicker.none')}
+                                onClick={() => {
+                                    onClear();
+                                    trigger.current?.focus();
+                                }}
+                            >
+                                <Icon icon={X} size={16} />
+                            </Button>
+                        </Tooltip>
+                    )}
+                </div>
+                <PopoverPopup
+                    variant="picker"
+                    aria-label={name}
+                    className="w-90"
+                    initialFocus={() =>
+                        document.getElementById(`${id}-search`) ?? document.getElementById(`${id}-grid`)?.querySelector<HTMLElement>('[tabindex="0"]') ?? false
+                    }
+                    finalFocus={trigger}
+                >
+                    <IconPickerPanel
+                        id={id}
+                        name={name}
+                        sections={sections}
+                        headed={isGrouped(icons)}
+                        value={value}
+                        keywords={keywords}
+                        searchable={searchable}
+                        rows={rows}
+                        disabled={disabled}
+                        onChoose={choose}
+                        onClear={onClear && clear}
+                    />
+                </PopoverPopup>
+            </PopoverRoot>
+        </div>
+    );
+}
+
+interface IconPickerPanelProps {
+    id: string;
+    name: string;
+    sections: readonly IconSection[];
+    headed: boolean;
+    value: string | null;
+    keywords: Readonly<Record<string, readonly string[]>> | undefined;
+    searchable: boolean;
+    rows: number | undefined;
+    disabled: boolean;
+    onChoose(name: string): void;
+    onClear: (() => void) | undefined;
+}
+
+/* What the popover holds. It mounts on every open, so a search and the focus start over each time. */
+function IconPickerPanel({ id, name, sections, headed, value, keywords, searchable, rows, disabled, onChoose, onClear }: IconPickerPanelProps) {
+    const { t } = useTranslation('ui');
     const input = useRef<HTMLInputElement>(null);
+    const area = useRef<HTMLDivElement>(null);
     const [query, setQuery] = useState('');
     const [focused, setFocused] = useState<string | null>(null);
-    const headed = isGrouped(icons);
-    const framed = searchable || rows !== undefined;
-    const sections = sectionsOf(icons);
     const shown = filterSections(sections, query, keywords);
     const tabStop = tabStopOf(
-        shown.flatMap((section) => section.icons.map(([name]) => name)),
+        shown.flatMap((section) => section.icons.map(([icon]) => icon)),
         focused,
         value
     );
-    const name = label ?? t('iconPicker.label');
 
     // Opens with the chosen icon in the middle of the area: a person changing an icon often starts from the current one.
     useLayoutEffect(() => {
@@ -101,6 +200,17 @@ export function IconPicker({
         }
     };
 
+    // Escape empties a search first, wherever the focus is, and only an empty one reaches the popover and closes it.
+    const clearSearchFirst = (event: KeyboardEvent<HTMLDivElement>): void => {
+        if (!escapeClearsSearch(event.key, query)) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        search('');
+        input.current?.focus();
+    };
+
     const moveFocus = (event: KeyboardEvent<HTMLDivElement>): void => {
         if (event.metaKey || event.ctrlKey || event.altKey) {
             return;
@@ -122,135 +232,109 @@ export function IconPicker({
         cells[to]?.focus();
     };
 
-    const grid = (
-        <div
-            ref={area}
-            id={`${id}-grid`}
-            role="radiogroup"
-            aria-label={name}
-            className={clsx(framed && 'relative overflow-y-auto overscroll-contain', framed && (headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2'))}
-            style={rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }}
-            onScroll={(event) => markStuckHeadings(event.currentTarget)}
-            onKeyDown={moveFocus}
-        >
-            {shown.length === 0 && query.trim() !== '' ? (
-                <EmptyState className="h-full">{t('iconPicker.noMatch', { query: query.trim() })}</EmptyState>
-            ) : (
-                shown.map((section, index) => {
-                    const cells = (
-                        <div
-                            key={section.id}
-                            className={clsx('grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1', framed && section.label !== null && 'px-1.5 pb-2')}
-                        >
-                            {section.icons.map(([icon, glyph]) => (
-                                <Tooltip key={icon} label={icon} name>
-                                    <button
-                                        type="button"
-                                        role="radio"
-                                        aria-checked={value === icon}
-                                        tabIndex={icon === tabStop ? 0 : -1}
-                                        disabled={disabled}
-                                        className={clsx(
-                                            'flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50',
-                                            value === icon ? 'bg-surface-active text-text' : 'text-text-muted'
-                                        )}
-                                        onFocus={() => setFocused(icon)}
-                                        onClick={() => onValueChange(icon)}
-                                    >
-                                        <Icon icon={glyph} size={16} />
-                                    </button>
-                                </Tooltip>
-                            ))}
-                        </div>
-                    );
-                    if (section.label === null) {
-                        return cells;
-                    }
-                    const headingId = `${id}-group-${index}`;
-                    return (
-                        <div key={section.id} role="group" aria-labelledby={headingId}>
-                            <SectionLabel
-                                render={<div />}
-                                data-icon-heading=""
-                                className={clsx(
-                                    'flex h-7 items-center gap-2',
-                                    framed ? 'sticky top-0 z-10 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)]' : 'mt-1'
-                                )}
-                            >
-                                <span id={headingId} className="truncate">
-                                    {section.label}
-                                </span>
-                                <span className="ms-auto shrink-0">{formatNumber(section.icons.length)}</span>
-                            </SectionLabel>
-                            {cells}
-                        </div>
-                    );
-                })
-            )}
-        </div>
-    );
-
     return (
-        <div ref={ref} className={className}>
-            <SectionLabel render={<div />} className="mb-1.5 flex items-center gap-2">
-                {name}
-                {onClear && (
-                    <>
-                        <span className="grow" />
+        <div onKeyDown={clearSearchFirst}>
+            {searchable && (
+                <div className="flex h-9 items-center gap-2 border-b border-border pr-1 pl-2.5">
+                    <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
+                    <input
+                        ref={input}
+                        id={`${id}-search`}
+                        type="text"
+                        value={query}
+                        placeholder={t('iconPicker.search')}
+                        aria-label={t('iconPicker.search')}
+                        aria-controls={`${id}-grid`}
+                        spellCheck={false}
+                        autoComplete="off"
+                        disabled={disabled}
+                        className="h-full min-w-0 flex-1 bg-transparent text-sm text-text outline-none placeholder:text-text-faint"
+                        onChange={(event) => search(event.target.value)}
+                    />
+                    {query && (
                         <IconButton
-                            icon={Ban}
+                            icon={X}
                             size="sm"
-                            label={t('iconPicker.none')}
-                            className="-my-1"
-                            disabled={disabled || value === null}
-                            onClick={onClear}
+                            label={t('iconPicker.clear')}
+                            tooltip={false}
+                            onClick={() => {
+                                search('');
+                                input.current?.focus();
+                            }}
                         />
-                    </>
-                )}
-            </SectionLabel>
-            {framed ? (
-                // The frame wears the field's outline while its search has the focus; the search draws none of its own.
-                <div className="field h-auto overflow-hidden p-0 has-[input:focus-visible]:outline-2 has-[input:focus-visible]:-outline-offset-1 has-[input:focus-visible]:outline-accent">
-                    {searchable && (
-                        <div className="flex h-8 items-center gap-2 border-b border-border pr-1 pl-2.5">
-                            <Icon icon={Search} size={14} className="shrink-0 text-text-faint" />
-                            <input
-                                ref={input}
-                                type="text"
-                                value={query}
-                                placeholder={t('iconPicker.search')}
-                                aria-label={t('iconPicker.search')}
-                                aria-controls={`${id}-grid`}
-                                spellCheck={false}
-                                autoComplete="off"
-                                disabled={disabled}
-                                className="h-full min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint"
-                                onChange={(event) => search(event.target.value)}
-                                onKeyDown={(event) => {
-                                    if (escapeClearsSearch(event.key, query)) {
-                                        event.stopPropagation();
-                                        search('');
-                                    }
-                                }}
-                            />
-                            {query && (
-                                <IconButton
-                                    icon={X}
-                                    size="sm"
-                                    label={t('iconPicker.clear')}
-                                    tooltip={false}
-                                    onClick={() => {
-                                        search('');
-                                        input.current?.focus();
-                                    }}
-                                />
-                            )}
-                        </div>
                     )}
-                    {grid}
                 </div>
-            ) : (
-                grid
+            )}
+            <div
+                ref={area}
+                id={`${id}-grid`}
+                role="radiogroup"
+                aria-label={name}
+                className={clsx('relative overflow-y-auto overscroll-contain', headed ? 'scroll-pt-7' : 'px-1.5 pt-1.5 pb-2')}
+                style={rows === undefined ? undefined : { height: rows * ROW_HEIGHT + (headed ? HEADED_EXTRA : BARE_EXTRA) }}
+                onScroll={(event) => markStuckHeadings(event.currentTarget)}
+                onKeyDown={moveFocus}
+            >
+                {shown.length === 0 && query.trim() !== '' ? (
+                    <EmptyState className="h-full">{t('iconPicker.noMatch', { query: query.trim() })}</EmptyState>
+                ) : (
+                    shown.map((section, index) => {
+                        const cells = (
+                            <div
+                                key={section.id}
+                                className={clsx('grid grid-cols-[repeat(auto-fill,minmax(28px,1fr))] gap-1', section.label !== null && 'px-1.5 pb-2')}
+                            >
+                                {section.icons.map(([icon, cellGlyph]) => (
+                                    <Tooltip key={icon} label={icon} name>
+                                        <button
+                                            type="button"
+                                            role="radio"
+                                            aria-checked={value === icon}
+                                            tabIndex={icon === tabStop ? 0 : -1}
+                                            disabled={disabled}
+                                            className={clsx(
+                                                'flex h-7 items-center justify-center rounded-md hover:bg-surface-hover disabled:opacity-50',
+                                                value === icon ? 'bg-surface-active text-text' : 'text-text-muted'
+                                            )}
+                                            onFocus={() => setFocused(icon)}
+                                            onClick={() => onChoose(icon)}
+                                        >
+                                            <Icon icon={cellGlyph} size={16} />
+                                        </button>
+                                    </Tooltip>
+                                ))}
+                            </div>
+                        );
+                        if (section.label === null) {
+                            return cells;
+                        }
+                        const headingId = `${id}-group-${index}`;
+                        return (
+                            <div key={section.id} role="group" aria-labelledby={headingId}>
+                                {/* A step lighter than the popover in the dark theme, where a darker band would read as a hole in it. */}
+                                <SectionLabel
+                                    render={<div />}
+                                    data-icon-heading=""
+                                    className="sticky top-0 z-10 flex h-7 items-center gap-2 bg-surface px-2.5 data-stuck:shadow-[0_1px_0_var(--border)] dark:bg-surface-hover"
+                                >
+                                    <span id={headingId} className="truncate">
+                                        {section.label}
+                                    </span>
+                                    <span className="ms-auto shrink-0">{formatNumber(section.icons.length)}</span>
+                                </SectionLabel>
+                                {cells}
+                            </div>
+                        );
+                    })
+                )}
+            </div>
+            {onClear && (
+                <div className="flex border-t border-border p-1">
+                    <Button size="sm" disabled={disabled || value === null} onClick={onClear}>
+                        <Icon icon={Ban} size={12} />
+                        {t('iconPicker.none')}
+                    </Button>
+                </div>
             )}
         </div>
     );