@adecore/ui 0.38.0 → 0.40.0

package/src/Checkbox.tsx

@@ -7,10 +7,13 @@ import { Icon } from './Icon.tsx';
 export interface CheckboxProps {
     checked: boolean;
     onCheckedChange(checked: boolean): void;
+
     /* The accessible name; a `<label>` around the box and its text usually carries the visible one. */
     label: string;
+
     /* Some of the items it stands for are picked and some are not, as on a box that picks every row of a list. */
     indeterminate?: boolean;
+
     disabled?: boolean;
     className?: string;
     ref?: Ref<HTMLButtonElement>;

package/src/ChoiceCards.tsx

@@ -8,7 +8,6 @@ import { Icon } from './Icon.tsx';
 export interface Choice<Value extends string | number> {
     value: Value;
     title: string;
-    /* One line under the title that says what picking it means. */
     description: string;
     icon?: LucideIcon;
     disabled?: boolean;
@@ -18,16 +17,20 @@ export interface ChoiceCardsProps<Value extends string | number> {
     value: Value;
     onValueChange(value: Value): void;
     choices: readonly Choice<Value>[];
-    /* What the group picks, read by a screen reader since the row has no visible heading of its own. */
+
+    /* Read by a screen reader, since the row has no visible heading of its own. */
     label: string;
-    /* Side by side at the same width, or one under the other for choices whose descriptions run long. */
+
     orientation?: 'horizontal' | 'vertical';
-    /* A set number of columns, filled row by row, for more choices than one row has room for; takes the place of `orientation`. */
+
+    /* Filled row by row; takes the place of `orientation`. */
     columns?: number;
-    /* Where the radio stands in a card: after the text, or before the icon and the title. */
+
     radio?: 'start' | 'end';
-    /* What the checked choice still asks for, such as a folder or an address, right under its card; only a vertical group without columns has room for it. */
+
+    /* What the checked choice still asks for, under its card; only a vertical group without columns has room for it. */
     detail?: ReactNode;
+
     disabled?: boolean;
     className?: string;
     ref?: Ref<HTMLDivElement>;
@@ -35,12 +38,14 @@ export interface ChoiceCardsProps<Value extends string | number> {
 
 function ChoiceCard<Value extends string | number>({ choice, radio }: { choice: Choice<Value>; radio: 'start' | 'end' }) {
     const id = useId();
+
     // As tall as the title's line, so the dot centers on it.
     const dot = (
         <span className="flex h-(--text-sm--line-height) shrink-0 items-center" aria-hidden>
             <span className="size-4 rounded-full border border-border-strong group-data-checked:border-5 group-data-checked:border-accent group-data-checked:bg-accent-text" />
         </span>
     );
+
     return (
         <Radio.Root
             value={choice.value}
@@ -68,11 +73,6 @@ function ChoiceCard<Value extends string | number>({ choice, radio }: { choice:
     );
 }
 
-/*
- * One of a few options, each a card that says what it means, for a choice that deserves more than a
- * select: the cards stand side by side at the same width, one under the other or in a set number of
- * columns, and the arrow keys move between them.
- */
 export function ChoiceCards<Value extends string | number>({
     value,
     onValueChange,
@@ -87,6 +87,7 @@ export function ChoiceCards<Value extends string | number>({
     ref
 }: ChoiceCardsProps<Value>) {
     const vertical = columns === undefined && orientation === 'vertical';
+
     return (
         <RadioGroup
             ref={ref}

package/src/CloseButton.tsx

@@ -17,5 +17,6 @@ export function CloseButton({ label, kbd, size, className, ref, ...closes }: Clo
     if ('dialog' in closes) {
         return <IconButton ref={ref} icon={X} label={label} kbd={kbd} size={size} className={className} render={<Dialog.Close />} />;
     }
+
     return <IconButton ref={ref} icon={X} label={label} kbd={kbd} size={size} className={className} onClick={closes.onClick} />;
 }

package/src/ColorSwatch.tsx

@@ -14,21 +14,20 @@ const PICKED_RING = {
 } as const;
 
 export interface ColorSwatchProps extends ComponentProps<'button'> {
-    /* Any CSS color. Without one the swatch is an outlined circle: "no color", or the button that opens the rest of a palette. */
+    /* Without one the swatch is an outlined circle: "no color", or the button that opens the rest of a palette. */
     color?: string;
+
     picked?: boolean;
-    /* On the surface behind a popup, or inside the popup itself. */
     on?: keyof typeof PICKED_RING;
-    /* Whether a picked swatch draws its tick. Off where the ring alone marks it, such as on a swatch of two tones, where a tick reads as a glitch. */
+
+    /* Off where the ring alone marks a pick, such as on a swatch of two tones, where a tick reads as a glitch. */
     tick?: boolean;
-    /* Another element to be the swatch, such as a menu trigger, or `<Menu.Item unstyled />` so the row's padding and highlight stay off it. */
+
+    /* Such as `<Menu.Item unstyled />`, so the row's padding and highlight stay off it. */
     render?: useRender.RenderProp;
 }
 
-/*
- * One color, drawn as the color itself. Its name belongs in a tooltip, so the circle carries a tick
- * alone when it is picked. Children replace the tick, such as the ellipsis of a "more colors" swatch.
- */
+/* Its name belongs in a tooltip. Children replace the tick, such as the ellipsis of a "more colors" swatch. */
 export function ColorSwatch({ color, picked = false, on = 'surface', tick = true, render, className, style, ref, children, ...props }: ColorSwatchProps) {
     return useRender({
         render: render ?? <button type="button" />,

package/src/ColorWheelPicker.tsx

@@ -6,25 +6,33 @@ import { PopoverPopup, PopoverRoot, PopoverTrigger } from './popover/parts.tsx';
 import { triggerClassName } from './select-shared.ts';
 
 const SWATCH_SIZE = 24;
+
 /* The outer ring stands this far from the middle, further when its swatches would not keep a gap between them otherwise. */
 const MIN_RADIUS = 97;
+
 const MIN_GAP = 8;
+
 /* Room past the outer ring for the ring a picked swatch wears. */
 const EDGE = 7;
 
 export interface ColorWheelPickerProps<Id extends string> {
     value: Id;
     onValueChange(id: Id): void;
-    /* The one under the pointer or the focus while the wheel is open, so the caller can show it before it is picked; null once none is looked at. */
+
+    /* The one under the pointer or the focus while the wheel is open; null once none is looked at. */
     onPreviewChange?(id: Id | null): void;
-    /* The accessible name of the trigger and of the wheel; the row the picker stands in usually carries the visible one. */
+
+    /* The accessible name; the row the picker stands in usually carries the visible one. */
     label: string;
-    /* The swatches round the wheel, a ring at a time from the outside in, each in its own order from the top. */
+
+    /* From the outside in, each ring in its own order from the top. */
     rings: readonly (readonly Id[])[];
-    /* The one in the middle, if any. */
+
     center?: Id;
+
     /* Any CSS background, a gradient too. */
     colorOf(id: Id): string;
+
     labelOf(id: Id): string;
     disabled?: boolean;
     align?: 'start' | 'end';
@@ -38,17 +46,21 @@ interface Spot<Id> {
     top: number;
 }
 
-/* Every swatch's top left corner in whole pixels, the rings evenly apart from the outer one to the middle, and the size of the wheel. */
+/* Top left corners in whole pixels, the rings evenly apart from the outer one to the middle. */
 function layout<Id>(rings: readonly (readonly Id[])[], center: Id | undefined): { size: number; spots: Spot<Id>[] } {
     const outer = rings[0]?.length ?? 0;
     const radius = Math.max(MIN_RADIUS, outer > 1 ? Math.ceil((SWATCH_SIZE + MIN_GAP) / (2 * Math.sin(Math.PI / outer))) : 0);
     const size = 2 * (radius + SWATCH_SIZE / 2 + EDGE);
     const middle = (size - SWATCH_SIZE) / 2;
+
     const spot = (id: Id, turn: number, distance: number): Spot<Id> => {
         const angle = turn * 2 * Math.PI - Math.PI / 2;
+
         return { id, left: Math.round(middle + distance * Math.cos(angle)), top: Math.round(middle + distance * Math.sin(angle)) };
     };
+
     const spots = rings.flatMap((ring, depth) => ring.map((id, i) => spot(id, i / ring.length, (radius * (rings.length - depth)) / rings.length)));
+
     return { size, spots: center === undefined ? spots : [...spots, spot(center, 0, 0)] };
 }
 
@@ -62,11 +74,8 @@ const STEPS: Record<string, (index: number, count: number) => number> = {
 };
 
 /*
- * A color picked from a wheel behind a trigger that holds the one in use and lines up with a select.
- * While the wheel is open the swatch under the pointer or the focus is reported as a preview, so the
- * caller can show it in place; its name stands under the wheel, which is why a swatch carries no
- * tooltip. The wheel is one tab stop: the arrows walk it in its order and only Enter, Space or a click
- * picks. Every preview ends with null, after a pick as well as on closing without one or on going away while open.
+ * The looked-at swatch's name stands under the wheel, so a swatch carries no tooltip. Only Enter, Space
+ * or a click picks. Every preview ends with null: after a pick, on closing, or on going away while open.
  */
 export function ColorWheelPicker<Id extends string>({
     value,
@@ -92,16 +101,18 @@ export function ColorWheelPicker<Id extends string>({
     const tabStop = spots.find((spot) => spot.id === (focused ?? value))?.id ?? spots[0]?.id;
     // Read by the cleanup below, which runs after the state and the props of its render are gone.
     const preview = useRef({ looking: false, onPreviewChange });
+
     useEffect(() => {
         preview.current.onPreviewChange = onPreviewChange;
     });
+
     const look = (id: Id | null): void => {
         setLooking(id);
         preview.current.looking = id !== null;
         onPreviewChange?.(id);
     };
-    // A picker taken away while a color is previewed (its dialog closed under it) gets no close of its
-    // popover, so it ends the preview itself rather than leave the caller showing a color nobody picked.
+
+    // A picker taken away while a color is previewed gets no close of its popover, so it ends the preview itself.
     useEffect(
         () => () => {
             if (preview.current.looking) {
@@ -110,21 +121,26 @@ export function ColorWheelPicker<Id extends string>({
         },
         []
     );
+
     const close = (): void => {
         setOpen(false);
         setFocused(null);
         look(null);
     };
+
     const step = (event: KeyboardEvent<HTMLDivElement>): void => {
         const next = STEPS[event.key];
         const swatches = [...(wheel.current?.querySelectorAll<HTMLElement>('[role="radio"]') ?? [])];
         const index = swatches.indexOf(event.target as HTMLElement);
+
         if (next === undefined || index < 0) {
             return;
         }
+
         event.preventDefault();
         swatches[next(index, swatches.length)]?.focus();
     };
+
     return (
         <PopoverRoot
             open={open}

package/src/ColumnResizeHandle.tsx

@@ -5,6 +5,7 @@ import type { ColumnEdge } from './useColumnResize.ts';
 export interface ColumnResizeHandleProps {
     /* The edge the column hangs from, as handed to `useColumnResize`; the handle sits on the other one. */
     from: ColumnEdge;
+
     onPointerDown(event: ReactPointerEvent<HTMLElement>): void;
     className?: string;
     style?: CSSProperties;

package/src/CopyButton.tsx

@@ -11,8 +11,10 @@ const COPIED_MS = 1500;
 
 interface CopyButtonBase {
     text: string;
+
     /* The accessible name and the tooltip of the icon, or the word on the button with `showLabel`. */
     label?: string;
+
     disabled?: boolean;
     className?: string;
     ref?: Ref<HTMLButtonElement>;
@@ -42,12 +44,15 @@ export function CopyButton(props: CopyButtonProps) {
         if (copiedAt === null) {
             return;
         }
+
         const timer = window.setTimeout(() => setCopiedAt(null), COPIED_MS);
+
         return () => window.clearTimeout(timer);
     }, [copiedAt]);
 
     const copied = copiedAt !== null;
     const name = label ?? t('action.copy');
+
     const copy = async (): Promise<void> => {
         // A refusal goes unconfirmed and unreported: a person can do nothing about it (`clipboard.ts`).
         if (await copyText(text)) {
@@ -73,6 +78,7 @@ export function CopyButton(props: CopyButtonProps) {
             onClick={() => void copy()}
         />
     );
+
     return (
         <>
             {button}

package/src/DisabledReason.tsx

@@ -14,6 +14,7 @@ export function DisabledReason({ reason, children }: DisabledReasonProps) {
     if (reason === null) {
         return children;
     }
+
     return (
         <Tooltip label={reason} side="right">
             {children}

package/src/DockShell.tsx

@@ -7,21 +7,16 @@ const REVEAL_ZONE = 120;
 
 export interface DockShellProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    /* The dock waits below the window's edge until the pointer comes down to it. */
     autoHide?: boolean;
-    /* Classes for the bar itself, such as letting a dock with many buttons wrap. */
     barClassName?: string;
-    /* Told whenever the bar slides away or comes back, for what stands on top of it. */
     onHiddenChange?: (hidden: boolean) => void;
     ref?: Ref<HTMLDivElement>;
 }
 
 /*
- * The floating bar at the bottom of a canvas-like view, and the one place that knows how to get out
- * of the way. With `autoHide` it waits below the edge until the pointer comes down to it, an open
- * menu keeps it up (it would take its own popup with it), and a keyboard reaches it by tabbing. The
- * buttons stay in the tab order while it is out of sight, so focus brings it back. Something that
- * moves with the dock marks itself `data-holds-dock`, so reaching for it does not hide the dock.
+ * An open menu keeps a hiding dock up, or it would take its own popup with it. The buttons stay in the
+ * tab order while out of sight, so focus brings it back. Something that moves with the dock marks itself
+ * `data-holds-dock`, so reaching for it does not hide the dock.
  */
 export function DockShell({ children, autoHide = false, className, barClassName, onHiddenChange, ref, ...rest }: DockShellProps) {
     const barRef = useRef<HTMLDivElement>(null);
@@ -31,23 +26,27 @@ export function DockShell({ children, autoHide = false, className, barClassName,
         if (!autoHide) {
             return;
         }
+
         let pointerNear = false;
+
         const evaluate = (): void => {
             const bar = barRef.current;
             const holds = bar !== null && (bar.querySelector('[data-popup-open]') !== null || bar.querySelector(':focus-visible') !== null);
             setRevealed(pointerNear || holds);
         };
+
         const onMove = (event: PointerEvent): void => {
-            /* Something that moves with the dock would slide away under the pointer reaching for it,
-               so over one the dock stays as it is. */
             if (event.target instanceof Element && event.target.closest('[data-holds-dock]') !== null) {
                 return;
             }
+
             pointerNear = window.innerHeight - event.clientY <= REVEAL_ZONE;
             evaluate();
         };
+
         window.addEventListener('pointermove', onMove);
         window.addEventListener('focusin', evaluate);
+
         return () => {
             window.removeEventListener('pointermove', onMove);
             window.removeEventListener('focusin', evaluate);
@@ -56,9 +55,11 @@ export function DockShell({ children, autoHide = false, className, barClassName,
     }, [autoHide]);
 
     const hidden = autoHide && !revealed;
+
     useEffect(() => {
         onHiddenChange?.(hidden);
     }, [hidden, onHiddenChange]);
+
     return (
         <div ref={ref} {...rest} className={clsx('pointer-events-none absolute inset-x-0 bottom-4 flex justify-center', className)}>
             <Surface

package/src/EmptyState.tsx

@@ -8,21 +8,25 @@ import { Spinner } from './Spinner.tsx';
 const ICON_SIZE = 20;
 
 export interface EmptyStateProps {
-    /* A Lucide icon, or a mark of another kind (a provider's logo) that takes a `size`. */
+    /* A Lucide icon, or a mark of another kind that takes a `size`. */
     icon?: LucideIcon | ReactElement<{ size?: number }>;
-    /* A `Spinner` in place of the icon, for a state that is still loading. */
+
+    /* A `Spinner` in place of the icon. */
     busy?: boolean;
-    /* A heading above the sentence, for a state that is an outcome rather than a list with nothing in it. */
+
+    /* For a state that is an outcome rather than a list with nothing in it. */
     title?: ReactNode;
-    /* One sentence. What is missing, and what puts something there. */
+
+    /* One sentence: what is missing, and what puts something there. */
     children: ReactNode;
-    /* The button or the shortcut that fills the space; kept to one. */
+
+    /* Kept to one. */
     action?: ReactNode;
+
     className?: string;
     ref?: Ref<HTMLDivElement>;
 }
 
-/* What a list, a canvas or a thread shows before it holds anything. */
 export function EmptyState({ icon, busy = false, title, children, action, className, ref }: EmptyStateProps) {
     return (
         <div ref={ref} className={clsx('flex flex-col items-center justify-center gap-2 px-6 py-8 text-center', className)}>

package/src/ErrorBoundary.tsx

@@ -9,16 +9,20 @@ import { errorMessageOf, errorReport, shouldReset, type ResetKeys } from './erro
 import { Icon } from './Icon.tsx';
 
 export interface ErrorBoundaryProps {
-    /* What failed, as the first line of the message: "Could not show this view". */
+    /* The first line of the message: "Could not show this view". */
     label: string;
-    /* What the children draw from; the boundary tries again when one of them changes. */
+
     resetKeys?: ResetKeys;
-    /* A small surface, so its message drops the icon and the spacing. */
+
+    /* Drops the icon and the spacing, for a small surface. */
     compact?: boolean;
-    /* The last resort has nothing around it to fall back to, so it offers a reload as well. */
+
+    /* For the last resort, which has nothing around it to fall back to. */
     reload?: boolean;
-    /* The box of the message; by default it covers the positioned parent. */
+
+    /* By default the message covers the positioned parent. */
     className?: string;
+
     children: ReactNode;
 }
 
@@ -43,6 +47,7 @@ interface FallbackProps {
 /* A function component, so the words come from the i18next instance the app renders with. */
 function ErrorFallback({ label, error, componentStack, compact, reload, className, onRetry }: FallbackProps) {
     const { t } = useTranslation('ui');
+
     return (
         <div role="alert" className={clsx('grid place-items-center overflow-auto bg-surface', compact ? 'p-3' : 'p-6', className)}>
             <div className={clsx('flex max-w-[360px] flex-col items-center text-center', compact ? 'gap-1' : 'gap-2')}>
@@ -68,11 +73,7 @@ function ErrorFallback({ label, error, componentStack, compact, reload, classNam
     );
 }
 
-/*
- * Keeps a render failure to the subtree it happened in. Without one React unmounts the whole tree,
- * and whatever lives in it (an embedded page, a running terminal) goes down with it. Key it so it
- * resets only while it holds an error: `resetKeys` for what the children draw from.
- */
+/* Without one React unmounts the whole tree, and whatever lives in it (an embedded page, a running terminal) goes down with it. */
 export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
     override state: ErrorBoundaryState = CLEAR;
 
@@ -99,7 +100,9 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
         if (!this.state.failed) {
             return this.props.children;
         }
+
         const { label, compact = false, reload = false, className = 'absolute inset-0' } = this.props;
+
         return (
             <ErrorFallback
                 label={label}

package/src/Field.tsx

@@ -6,6 +6,7 @@ import { SectionLabel } from './SectionLabel.tsx';
 
 const HINT = 'text-xs text-text-muted';
 const ERROR = 'text-xs text-status-error';
+
 // Beside the control the label reads at the size of what is typed, on the middle of the control's first line however tall it grows.
 const LABEL_BESIDE = 'flex h-8 items-center self-start text-sm text-text-muted';
 
@@ -13,7 +14,6 @@ const isShown = (line: ReactNode): boolean => line !== undefined && line !== nul
 
 export type FieldHintProps = useRender.ComponentProps<'p'>;
 
-/* The line under a field that says what goes in it. */
 export function FieldHint({ render, className, ref, ...props }: FieldHintProps) {
     return useRender({
         render,
@@ -25,7 +25,7 @@ export function FieldHint({ render, className, ref, ...props }: FieldHintProps)
 
 export type FormErrorProps = useRender.ComponentProps<'p'>;
 
-/* What went wrong in a dialog or a form. An alert, so a screen reader hears it arrive. */
+/* An alert, so a screen reader hears it arrive. */
 export function FormError({ render, className, ref, ...props }: FormErrorProps) {
     return useRender({
         render,
@@ -48,6 +48,7 @@ function FieldLabel({ id, group, horizontal, children }: { id: string; group: bo
             </label>
         );
     }
+
     return group ? (
         <SectionLabel id={`${id}-label`}>{children}</SectionLabel>
     ) : (
@@ -58,26 +59,22 @@ function FieldLabel({ id, group, horizontal, children }: { id: string; group: bo
 export interface FieldProps {
     label?: ReactNode;
     hint?: ReactNode;
+
     /* Shown under the control and marks it invalid; null or empty shows nothing. */
     error?: ReactNode;
-    /*
-     * For what a `<label>` cannot point at: a `Segmented`, a `Select`, cards to choose from, a path
-     * in a box with a button beside it. The label then names a group around it, which the hint and
-     * the error describe.
-     */
+
+    /* For what a `<label>` cannot point at, such as a `Segmented`: the label then names a group around it. */
     group?: boolean;
-    /* `horizontal` puts the label in a column of its own beside the control, for a form in a dialog where a stack of fields would scroll. */
+
     orientation?: 'vertical' | 'horizontal';
     className?: string;
     ref?: Ref<HTMLDivElement>;
-    /* The control. An `Input` or a `TextArea` connects to the label and the lines under it by itself, unless the field is a `group`. */
+
+    /* An `Input` or a `TextArea` connects to the label and the lines under it by itself, unless the field is a `group`. */
     children: ReactNode;
 }
 
-/*
- * A labelled control, or a labelled group, with an optional hint and error under it, stacked 6px apart.
- * Beside each other the label column is 112px, so the controls of every field in a form line up.
- */
+/* Horizontal, the label column is 112px, so the controls of every field in a form line up. */
 export function Field({ label, hint, error, group = false, orientation = 'vertical', className, ref, children }: FieldProps) {
     const horizontal = orientation === 'horizontal';
     const id = useId();
@@ -87,6 +84,7 @@ export function Field({ label, hint, error, group = false, orientation = 'vertic
     const lines = [hasHint ? `${id}-hint` : null, hasError ? `${id}-error` : null].filter((part) => part !== null);
     const describedBy = lines.length > 0 ? lines.join(' ') : undefined;
     const control = group ? null : { id: `${id}-control`, describedBy, invalid: hasError };
+
     return (
         <div
             ref={ref}

package/src/FileIcon.tsx

@@ -5,20 +5,20 @@ import { fileIconFor, mountFileIconSprite } from './file-icon.ts';
 export interface FileIconProps {
     /* Absolute or relative; only the last segment decides which icon this is. */
     path: string;
+
     size?: number;
     className?: string;
     ref?: Ref<SVGSVGElement>;
 }
 
 /*
- * The icon a file gets in a file tree, drawn anywhere else the same file's name shows up. It is the
- * one place the library steps outside Lucide. The glyphs are Seti's, and so are their colors, because
- * a TypeScript blue or a Vue green is the mark of the file type, not a theme choice. Decorative like
- * every other icon here, so the name beside it does the reading.
+ * The one place the library steps outside Lucide. The glyphs are Seti's, and so are their colors: a
+ * TypeScript blue is the mark of the file type, not a theme choice. Decorative like every other icon here.
  */
 export function FileIcon({ path, size = 16, className, ref }: FileIconProps) {
     // Before the browser paints, so a `<use>` never points at a symbol that is not in the document yet.
     useInsertionEffect(mountFileIconSprite, []);
+
     return (
         <svg ref={ref} className={clsx('file-icon', className)} width={size} height={size} viewBox="0 0 16 16" aria-hidden>
             <use href={`#${fileIconFor(path)}`} />

package/src/Icon.tsx

@@ -13,10 +13,8 @@ export interface IconProps {
     ref?: Ref<SVGSVGElement>;
 }
 
-/* One Lucide icon, sized in pixels. Icons here are decorative. The name a screen reader reads
-   sits on the button or the label next to it, so the glyph stays hidden. */
+/* Decorative: the name a screen reader reads sits on the button or the label next to it. */
 export function Icon({ icon: Glyph, size = 16, className, ref }: IconProps) {
-    // An inline svg sits on the text baseline, which drops a square glyph below the words next to
-    // it; the middle of the box against the middle of the text is what reads as aligned.
+    // An inline svg sits on the text baseline, which drops a square glyph below the words next to it.
     return <Glyph ref={ref} size={size} strokeWidth={STROKE_WIDTH} className={clsx('align-middle', className)} aria-hidden />;
 }

package/src/IconButton.tsx

@@ -13,26 +13,33 @@ export type { IconButtonSize };
 export interface IconButtonProps extends Omit<ComponentProps<'button'>, 'children'> {
     /* Left out for a button that draws something other than one Lucide glyph, handed in as children. */
     icon?: LucideIcon;
+
     /* The accessible name, and the tooltip unless `tooltip` says otherwise. */
     label: string;
+
     /* A tooltip that says more than the name (a reason it is disabled), or `false` for none at all. */
     tooltip?: ReactNode | false;
+
     kbd?: Shortcut | string;
     tooltipSide?: TooltipSide;
     size?: IconButtonSize;
-    /* A toggle that is on, drawn as a pressed key. Use `aria-pressed` instead where the button is a real toggle. */
+
+    /* Drawn as a pressed key. Use `aria-pressed` instead where the button is a real toggle. */
     active?: boolean;
-    /* A `Spinner` in place of the icon, for a step that is running. */
+
+    /* A `Spinner` in place of the icon. */
     busy?: boolean;
-    /* Classes for the icon rather than the button: a tone of its own, a turn, a fill. The size stays the button's. */
+
+    /* For the icon rather than the button. The size stays the button's. */
     iconClassName?: string;
+
     /* Drawn after the icon: a count, or a word beside it together with `w-auto`. */
     children?: ReactNode;
-    /* Another element to be the button, such as a menu trigger: `render={<Menu.Trigger />}`. */
+
     render?: useRender.RenderProp;
 }
 
-/* Every button that is an icon and no word. A square, and the one place the icon inside it is sized. */
+/* The one place the icon inside an icon button is sized. */
 export function IconButton({
     icon,
     label,
@@ -69,9 +76,11 @@ export function IconButton({
             )
         }
     });
+
     if (tooltip === false) {
         return button;
     }
+
     return (
         <Tooltip label={tooltip ?? label} kbd={kbd} side={tooltipSide}>
             {button as ReactElement<Record<string, unknown>>}