@adecore/ui 0.35.5 → 0.37.0

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>
     );

package/src/Input.tsx

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
 import clsx from 'clsx';
 import { fieldControlProps, useFieldControl } from './field-context.ts';
@@ -11,34 +11,40 @@ export interface InputProps extends Omit<ComponentProps<'input'>, 'size'> {
     mono?: boolean;
     /* Drawn in front of the text, such as a magnifier on a search field. `className` then goes to the box around the icon and the input; `ref` stays on the input. */
     icon?: LucideIcon;
+    /* Drawn after the text inside the field, such as a count of matches and an `IconButton` that clears it. `className` then goes to the box, as with `icon`. */
+    end?: ReactNode;
 }
 
 /* The one text input: one border and one focus ring at the one height or the compact one. */
-export function Input({ size = 'md', mono = false, icon, className, id, ...props }: InputProps) {
+export function Input({ size = 'md', mono = false, icon, end, className, id, ...props }: InputProps) {
     const field = useFieldControl();
     const small = size === 'sm';
     const control = { ...fieldControlProps(field, id), ...props };
 
-    if (icon === undefined) {
+    if (icon === undefined && end === undefined) {
         return <input {...control} className={clsx('field', small && 'field-sm', mono && 'font-mono text-code', className)} />;
     }
 
     // The input fills the whole box and the icon lets clicks through, so a click on the icon still lands in the input.
     return (
         <span className={clsx('field relative flex p-0', small && 'field-sm', className)}>
-            <Icon
-                icon={icon}
-                size={small ? 12 : 14}
-                className={clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5')}
-            />
+            {icon !== undefined && (
+                <Icon
+                    icon={icon}
+                    size={small ? 12 : 14}
+                    className={clsx('pointer-events-none absolute top-1/2 -translate-y-1/2 text-text-faint', small ? 'left-2' : 'left-2.5')}
+                />
+            )}
             <input
                 {...control}
                 className={clsx(
                     'min-w-0 flex-1 bg-transparent outline-none placeholder:text-text-faint',
-                    small ? 'pr-2 pl-7' : 'pr-2.5 pl-8',
+                    icon === undefined ? (small ? 'pl-2' : 'pl-2.5') : small ? 'pl-7' : 'pl-8',
+                    end === undefined ? (small ? 'pr-2' : 'pr-2.5') : 'pr-1',
                     mono && 'font-mono text-code'
                 )}
             />
+            {end !== undefined && <span className={clsx('flex shrink-0 items-center gap-1', small ? 'pr-0.5' : 'pr-1')}>{end}</span>}
         </span>
     );
 }
@@ -50,10 +56,12 @@ export interface TextAreaProps extends ComponentProps<'textarea'> {
     resize?: 'none' | 'vertical';
     /* A command or anything else read back letter by letter. */
     mono?: boolean;
+    /* `bare` drops the border, the ground and the focus outline, for a field inside a card that draws all three around it. */
+    variant?: 'field' | 'bare';
 }
 
 /* A field of a few lines: a commit message, the body of a pull request, a note. At least 64px tall; `rows` makes it taller. */
-export function TextArea({ size = 'md', resize = 'none', mono = false, className, id, ...props }: TextAreaProps) {
+export function TextArea({ size = 'md', resize = 'none', mono = false, variant = 'field', className, id, ...props }: TextAreaProps) {
     const field = useFieldControl();
     return (
         <textarea
@@ -62,6 +70,7 @@ export function TextArea({ size = 'md', resize = 'none', mono = false, className
             className={clsx(
                 'field h-auto min-h-16 py-1.5',
                 size === 'sm' && 'field-sm',
+                variant === 'bare' && 'field-bare',
                 resize === 'vertical' ? 'resize-y' : 'resize-none',
                 mono && 'font-mono text-code',
                 className

package/src/Segmented.tsx

@@ -69,7 +69,7 @@ export function Segmented<T extends string>({
         <div
             ref={ref}
             className={clsx(
-                'flex bg-surface-sunken p-0.5 text-xs font-medium',
+                'flex bg-surface-sunken p-0.5 text-xs font-medium dark:bg-surface-idle',
                 sizing.track,
                 vertical ? 'w-full flex-col items-stretch gap-0.5' : clsx(sizing.row, 'w-fit items-center'),
                 className

package/src/SplitButton.tsx

@@ -0,0 +1,72 @@
+import { useState, type ComponentProps, type ReactNode } from 'react';
+import clsx from 'clsx';
+import { ChevronDown } from 'lucide-react';
+import { splitFrameClass, splitHalfClass, type ButtonSize, type ButtonVariant } from './button-class.ts';
+import { Icon } from './Icon.tsx';
+import { MenuPopup, MenuRoot, MenuTrigger, type MenuPopupProps } from './menu/parts.tsx';
+import { mergeRefs } from './merge-refs.ts';
+import { Tooltip } from './Tooltip.tsx';
+
+export interface SplitButtonProps extends Omit<ComponentProps<'button'>, 'ref'> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    /* The hint on the action half. */
+    tooltip?: ReactNode;
+    /* The rows of the menu the chevron opens: `Menu.Item`, `Menu.Separator` and the rest of a menu's parts. */
+    menu: ReactNode;
+    /* The accessible name of the chevron, and its hint unless `menuTooltip` says something else. */
+    menuLabel: string;
+    menuTooltip?: ReactNode;
+    menuDisabled?: boolean;
+    /* Where the menu lines up under the whole control. */
+    menuAlign?: MenuPopupProps['align'];
+    /* A width or a layout of the menu's own, such as `w-72`. */
+    menuClassName?: string;
+    /* On the box around both halves; every other prop goes to the action half. */
+    className?: string;
+    ref?: ComponentProps<'span'>['ref'];
+}
+
+/*
+ * A primary action and a chevron that opens a menu of related ones, drawn as one button with a short
+ * line between the halves. Each half is a button of its own, so each takes the focus, can be disabled
+ * and carries its own hint; the menu hangs under the whole control.
+ */
+export function SplitButton({
+    variant = 'secondary',
+    size = 'md',
+    tooltip,
+    menu,
+    menuLabel,
+    menuTooltip,
+    menuDisabled = false,
+    menuAlign = 'end',
+    menuClassName,
+    className,
+    ref,
+    type = 'button',
+    ...props
+}: SplitButtonProps) {
+    const [box, setBox] = useState<HTMLSpanElement | null>(null);
+    const action = <button type={type} className={splitHalfClass(variant, size, 'action')} {...props} />;
+
+    return (
+        <span ref={mergeRefs<HTMLSpanElement>(ref, setBox)} className={clsx(splitFrameClass(variant, size), className)}>
+            {tooltip === undefined ? action : <Tooltip label={tooltip}>{action}</Tooltip>}
+            <MenuRoot>
+                <Tooltip label={menuTooltip ?? menuLabel}>
+                    <MenuTrigger
+                        render={<button type="button" className={splitHalfClass(variant, size, 'menu')} />}
+                        aria-label={menuLabel}
+                        disabled={menuDisabled}
+                    >
+                        <Icon icon={ChevronDown} size={14} />
+                    </MenuTrigger>
+                </Tooltip>
+                <MenuPopup anchor={box} align={menuAlign} className={menuClassName}>
+                    {menu}
+                </MenuPopup>
+            </MenuRoot>
+        </span>
+    );
+}

package/src/Stepper.tsx

@@ -36,7 +36,12 @@ export function Stepper({ value, onValueChange, min, max, step, decimals = place
         onValueChange(Math.min(max, Math.max(min, next)));
     };
     return (
-        <ButtonGroup ref={ref} className={clsx('shrink-0 rounded-lg bg-surface-sunken p-0.5', className)} role="group" aria-label={label}>
+        <ButtonGroup
+            ref={ref}
+            className={clsx('shrink-0 rounded-lg border border-field-border bg-field bg-clip-padding p-px', className)}
+            role="group"
+            aria-label={label}
+        >
             <IconButton
                 icon={Minus}
                 size="sm"

package/src/Switch.tsx

@@ -23,7 +23,7 @@ export function Switch({ checked, onCheckedChange, label, disabled, className, r
             disabled={disabled}
             // Base UI renders the root as a `span`, which ignores its size outside a flex row unless it lays out as a box.
             className={clsx(
-                'relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent data-disabled:opacity-50',
+                'relative inline-flex h-5 w-9 shrink-0 rounded-full bg-border-strong p-0.5 transition-colors data-checked:bg-accent dark:not-data-checked:bg-field dark:not-data-checked:inset-ring dark:not-data-checked:inset-ring-field-border data-disabled:opacity-50',
                 className
             )}
         >

package/src/Tile.tsx

@@ -24,7 +24,7 @@ export function Tile({ icon, title, description, shortcut, primary = false, size
         <button
             type={type}
             className={clsx(
-                'flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover disabled:opacity-50 disabled:hover:bg-surface',
+                'flex min-w-0 items-center border bg-surface text-left hover:bg-surface-hover-edged disabled:opacity-50 disabled:hover:bg-surface',
                 size === 'md' ? 'gap-3 rounded-xl p-3' : 'gap-2 rounded-lg px-2 py-1.5',
                 primary ? 'border-accent' : 'border-border',
                 className
@@ -34,7 +34,7 @@ export function Tile({ icon, title, description, shortcut, primary = false, size
             <span
                 className={clsx(
                     'grid size-8 shrink-0 place-items-center rounded-lg',
-                    primary ? 'bg-accent text-accent-text' : 'bg-surface-sunken text-text-muted'
+                    primary ? 'bg-accent text-accent-text' : 'bg-surface-sunken text-text-muted dark:bg-field dark:inset-ring dark:inset-ring-field-border'
                 )}
             >
                 {icon}