@nanisoft/prism-ui 0.10.2 → 0.15.0

package/dist/components/ui/date-picker.js

@@ -0,0 +1,82 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { useCallback, useId, useState } from 'react';
+import { Calendar } from './calendar.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { cn } from '../../lib/utils.js';
+/** `YYYY-MM-DD`, which is the only date format a form should post. */
+const iso = (date) => `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+const startOfMonth = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
+/**
+ * A field that opens a month grid and holds the date the reader picks.
+ *
+ * **It is built on the Calendar rather than beside it.** The month grid is a
+ * month grid: six rows, a roving tab stop, arrow keys that cross into the next
+ * month, and a rule about what a disabled date means. A picker with its own grid
+ * would be a second answer to all six questions, and the second answer is the one
+ * that ships the bug.
+ *
+ * **Choosing a date commits it and closes, in one gesture.** A field that left the
+ * grid open after a choice asks the reader to confirm an answer they already gave,
+ * and the Popover returns focus to the trigger on close, so a reader who is
+ * tabbing onward from the field is where they expect to be rather than back at
+ * the top of the document.
+ *
+ * **The month on show follows the answer, every time the field is opened.** A
+ * filled field opens on the month of its value, and an empty one on the current
+ * month. Without this, re-picking a date in a different month would reset the grid
+ * to the month the caller seeded it with, which is the month the reader was in
+ * the first time and is a silent undo of the navigation they just did.
+ *
+ * **The field shows the caller's formatted date and submits an ISO day.** Those are
+ * two different strings on purpose: one is read by a person and written in their
+ * language, the other is read by a machine that has no locale. A field that
+ * submitted what it displayed hands every downstream reader a phrase to parse.
+ *
+ * **The name and the value are announced separately.** The name is the field's
+ * label and the value is its description, which is how a field is read: "Delivery
+ * date, 17 March 2026". Letting the visible date become the button's name would
+ * replace the field's name with its current answer, so a reader who tabs through
+ * a form of five date fields hears five dates and no questions.
+ */
+function DatePicker({ label, format, monthLabel, weekdayLabels, firstWeekday = 0, previousLabel, nextLabel, clearLabel, placeholder, value, defaultValue = null, onValueChange, isDateDisabled, dayLabel, today = new Date(), disabled = false, required = false, name, form, id, className, }) {
+    const [ownValue, setOwnValue] = useState(defaultValue);
+    const [ownOpen, setOwnOpen] = useState(false);
+    const [month, setMonth] = useState(() => startOfMonth(defaultValue ?? today));
+    const generated = useId();
+    const triggerId = id ?? generated;
+    const valueId = `${generated}-value`;
+    const chosen = value === undefined ? ownValue : value;
+    const open = ownOpen;
+    const shown = chosen === null ? '' : format(chosen);
+    const choose = (date) => {
+        if (value === undefined)
+            setOwnValue(date);
+        onValueChange?.(date);
+        setOwnOpen(false);
+    };
+    const clear = useCallback(() => {
+        if (value === undefined)
+            setOwnValue(null);
+        onValueChange?.(null);
+    }, [onValueChange, value]);
+    const onOpenChange = (next) => {
+        // Reseeded on every open rather than held, so the grid always arrives on the
+        // month the reader is about to edit.
+        if (next)
+            setMonth(startOfMonth(chosen ?? today));
+        setOwnOpen(next);
+    };
+    const canClear = chosen !== null && clearLabel !== undefined;
+    return (_jsxs("div", { "data-slot": "date-picker", className: cn('relative w-full', className), children: [canClear ? (_jsx("button", { type: "button", "data-slot": "date-picker-clear", "aria-label": clearLabel, disabled: disabled, onClick: clear, className: cn('text-muted-foreground hover:text-foreground absolute top-1/2 right-9 z-10 inline-flex size-6 -translate-y-1/2 items-center justify-center rounded-sm outline-none', 'transition-colors duration-fast ease-out focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', 
+                // The floor, as a band rather than a step. This control is absolutely
+                // positioned over the field's own trigger, and `pr-16` on that trigger
+                // reserves exactly 64px of clear space; a 44px step at `right-9` would be
+                // 44 wide starting there and would run 16px under the value text the
+                // reservation exists to keep clear. The band adds ten rather than
+                // twenty-two, and `absolute` already gives it the containing block it
+                // needs, so no positioning class is added to the control itself.
+                'pointer-coarse:before:absolute pointer-coarse:before:left-1/2 pointer-coarse:before:top-1/2 pointer-coarse:before:h-11 pointer-coarse:before:w-11 pointer-coarse:before:-translate-x-1/2 pointer-coarse:before:-translate-y-1/2 pointer-coarse:before:content-[""]'), children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) })) : null, _jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { "data-slot": "date-picker-trigger", id: triggerId, "aria-label": label, "aria-describedby": shown === '' ? undefined : valueId, "aria-invalid": required && chosen === null ? true : undefined, disabled: disabled, className: cn('border-input bg-background text-foreground w-full justify-between outline-none', 'focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', canClear && 'pr-16'), children: _jsx("span", { "data-slot": "date-picker-value", "aria-hidden": "true", className: shown === '' ? 'text-muted-foreground' : undefined, children: shown === '' ? placeholder : shown }) }), _jsx(PopoverContent, { sideOffset: 4, "aria-label": label, className: "w-auto p-0", children: _jsx(Calendar, { label: label, monthLabel: monthLabel(month), weekdayLabels: weekdayLabels, firstWeekday: firstWeekday, previousLabel: previousLabel, nextLabel: nextLabel, month: month, onMonthChange: setMonth, value: chosen, onValueChange: choose, isDateDisabled: isDateDisabled, dayLabel: dayLabel, today: today }) })] }), shown === '' ? null : (_jsx("span", { id: valueId, className: "sr-only", children: shown })), name === undefined ? null : (_jsx("input", { type: "hidden", name: name, ...(form === undefined ? null : { form }), value: chosen === null ? '' : iso(chosen), readOnly: true }))] }));
+}
+export { DatePicker };

package/dist/components/ui/diagram.d.ts

@@ -1,3 +1,4 @@
+import type { PackId } from '../../theming/index.js';
 /**
  * One named thing in a Diagram, at a position the caller chooses.
  *
@@ -7,11 +8,12 @@
  * another, so a caller that means a column spreads it rather than repeating a
  * number.
  *
- * `emphasis` marks the one node the drawing is about, and it is the only
- * difference a node may carry: the emphasised node takes the brand ink, which
- * DESIGN.md's Brand Ink Rule names as the colour for something that must read
- * as the brand rather than as body text. Two emphasised nodes are a caller's
- * mistake, not a second emphasis level.
+ * A node carries two differences and no more. `emphasis` marks the one node the
+ * drawing is about, and it is the emphasised node that takes the brand ink,
+ * which is what DESIGN.md's Brand Ink Rule names as the colour for something
+ * that must read as the brand rather than as body text; two emphasised nodes are
+ * a caller's mistake, not a second emphasis level. `pack` is the node's own hue,
+ * and it is per node for the reasons given on that field.
  */
 export type DiagramNode = {
     /**
@@ -25,12 +27,48 @@ export type DiagramNode = {
      * reader does not read it: see `DiagramProps` for what carries the meaning.
      */
     name: string;
+    /**
+     * The second line printed under the name, which is the one-line role the thing
+     * plays: "the shared language", "the engine", "built next".
+     *
+     * It is a field rather than a word written into `label`, because the two
+     * audiences are different and a role description that exists only inside the
+     * accessible name has been given to one of them and withheld from the other.
+     * It is drawn on the picture, it is read aloud as part of the name when the
+     * caller passes no `label`, and because both come out of the same field they
+     * are the same words and cannot drift.
+     */
+    subtitle?: string;
     /** The node's position along the horizontal axis, in the caller's space. */
     x: number;
     /** The node's position along the vertical axis, in the caller's space. */
     y: number;
     /** Marks the node the diagram is about. See the Brand Ink Rule. */
     emphasis?: boolean;
+    /**
+     * The node's pack, which is the hue its mark wears.
+     *
+     * `PackId` rather than `string`, because a pack is one of the six published
+     * packs: a free-text field would accept a name matching no emitted rule, and a
+     * mark under a boundary nothing matches keeps the colour of whatever pack is
+     * above it, which is a silent wrong answer rather than a rejected one.
+     *
+     * **It is per node, and that is settled rather than incidental.** A pack on
+     * the Diagram would be one boundary on the section, and the boundary is the
+     * unit of a second pack on a MARK: `ProductMark` is the item that established
+     * it, and a mark here is a node. Per node is also what a schematic wants. One
+     * drawing of a product set shows one mark per product and each wears its own
+     * hue, which a single boundary could not express at all.
+     *
+     * The boundary lands on the `<circle>` this node draws, and not on the `<svg>`
+     * and not on the node's `<g>`, so it moves that one mark's fill and stroke and
+     * nothing else. A circle has no radius concept, so the pack re-inks the mark
+     * and cannot re-round it, which is the half of the pack boundary law a
+     * consumer implementing only the colour half gets wrong. `default` is the
+     * absence of the attribute, exactly as `themeAttributes` spells it, so a node
+     * on the base pack carries no `data-pack` and resolves from the page.
+     */
+    pack?: PackId;
 };
 /**
  * One relation between two nodes, with the word that says what it is.
@@ -55,7 +93,7 @@ export type DiagramRelation = {
     /** Draws the line dashed, for a relation that holds but not by this route. */
     indirect?: boolean;
 };
-/** What both arms of `DiagramProps` carry. */
+/** What every arm of `DiagramProps` carries. */
 type DiagramFigure = {
     /** The things drawn. At least one, or the Diagram renders an empty canvas. */
     nodes: readonly DiagramNode[];
@@ -71,11 +109,18 @@ type DiagramFigure = {
 /**
  * The props a Diagram takes.
  *
- * The name is required unless the drawing is decorative, and it is forbidden
- * when it is. That is a union rather than `label?: string` because only a union
- * lets the type system see the exception: an optional label on one type can
- * only be optional everywhere or required everywhere, and both halves of that
- * are wrong. `Separator` takes the same shape as `decorative`.
+ * The name is required unless the drawing is decorative or the nodes can be read
+ * as the name, and it is forbidden when the drawing is decorative. That is a
+ * union rather than `label?: string` because only a union lets the type system
+ * see the exception: an optional label on one type can only be optional
+ * everywhere or required everywhere, and both halves of that are wrong.
+ * `Separator` takes the same shape as `decorative`.
+ *
+ * The third arm is the one that makes the name derivable. It spells the absence
+ * as `label?: never` rather than `label?: string`, so "the caller named it" and
+ * "the caller passed nothing" cannot be confused for one another and a caller
+ * cannot hand the drawing an empty name by passing one: an unnamed image is the
+ * one outcome this prop must not have.
  */
 export type DiagramProps = DiagramFigure & ({
     /**
@@ -90,6 +135,16 @@ export type DiagramProps = DiagramFigure & ({
     /** The name of the drawing, and the only thing a screen reader reads from it. */
     label: string;
     decorative?: false;
+} | {
+    /**
+     * No name is passed, so the drawing is named by what its own marks say:
+     * every node's `name`, and its `subtitle` where it has one, in the order
+     * the caller drew them. A caller who gives a node a role description is
+     * describing the picture, and a picture's own words are the honest source
+     * for the name announced over it.
+     */
+    label?: never;
+    decorative?: false;
 });
 /**
  * A diagram of named things and the relations between them.
@@ -107,13 +162,27 @@ export type DiagramProps = DiagramFigure & ({
  * roster, and a `'use client'` line added here would put it back on that roster.
  *
  * **Accessibility.** A diagram carries meaning, so by default it is one image
- * with a name: `role="img"` and the `label` the caller passes. Everything inside
- * a `role="img"` is presentational, so the node names and relation words are
- * drawn for sighted readers and the surrounding sentence is what a screen reader
- * gets. Pass `decorative` when the sentence already says what the drawing
+ * with a name: `role="img"` and the drawing's name. Everything inside a
+ * `role="img"` is presentational, so the node names, the node subtitles and the
+ * relation words are drawn for sighted readers and the name is what a screen
+ * reader gets. That is why the name is derived from the nodes' own text when the
+ * caller passes no `label`: everything on the marks is invisible to the one
+ * reader who is not looking at the picture, so a role description written only
+ * into a label is a role description a sighted reader never sees. Pass `label`
+ * when the drawing needs a name that says what it is rather than what it holds,
+ * and omit it when the two would be the same sentence written twice. Pass
+ * `decorative` when the surrounding sentence already says what the drawing
  * shows, and the whole tree leaves the accessibility tree with nothing named
  * inside it.
  *
+ * **A node may wear its own pack.** `pack` on a node puts the boundary on the
+ * circle that node draws, which is the mark, and the mark is the one place a
+ * pack boundary belongs without moving anything but colour: a circle has no
+ * radius concept, so the pack re-inks the mark and cannot re-round it. Nothing
+ * else in the drawing answers to it, the node's name beside the mark keeps the
+ * page's ink, and a page that files two pack regions can make a diagram section
+ * the second one rather than moving it to the header's product switcher.
+ *
  * **Shape.** Nodes are circles and relations are paths. Both are shapes with no
  * radius concept, so no corner radius here is a function of `--radius` and a
  * pack boundary above the drawing moves nothing about its shape. A `<rect>` was

package/dist/components/ui/diagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,8CAA8C;AAC9C,KAAK,aAAa,GAAG;IACnB,8EAA8E;IAC9E,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,oGAAoG;IACpG,SAAS,EAAE,SAAS,eAAe,EAAE,CAAA;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;GAQG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CACI;IACE;;;;;OAKG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AAoFH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyDG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAsFd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"diagram.d.ts","sourceRoot":"","sources":["../../../src/components/ui/diagram.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAI3C;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAA;IACb,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,gDAAgD;AAChD,KAAK,aAAa,GAAG;IACnB,8EAA8E;IAC9E,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,oGAAoG;IACpG,SAAS,EAAE,SAAS,eAAe,EAAE,CAAA;IACrC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,YAAY,GAAG,aAAa,GACtC,CACI;IACE;;;;;OAKG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,GACD;IACE;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AAiIH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuEG;AACH,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,SAAS,EACT,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,YAAY,+BAgHd;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/components/ui/diagram.js

@@ -1,5 +1,32 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
+/**
+ * The drawing's accessible name, derived from the text its own marks carry.
+ *
+ * Derived rather than passed because the two audiences are different and a
+ * Component able to reach only one of them reaches neither. Everything inside a
+ * `role="img"` is presentational, so the words drawn on the marks are words no
+ * screen reader reads, and the label is the one thing it does read. A caller who
+ * put a node's role description into the label and not onto the node had
+ * published half of it: the half a sighted reader loses. Reading the name off the
+ * marks is what makes that drift impossible rather than merely discouraged, and
+ * it is why the drawn line and the announced line are the same field.
+ *
+ * Relation words are not part of it, and that is the honest limit of a
+ * derivation rather than an oversight. A derived name says what the drawing
+ * holds; a caller whose relations matter to a screen reader user passes a
+ * `label` that says so. Inventing a sentence out of the relations would be this
+ * Component writing the words, which is the one thing it does not do.
+ */
+function derivedName(nodes) {
+    return nodes.reduce((name, node) => {
+        // Parentheses between a thing and its role, commas between things, so a
+        // reader hearing the list can tell which words belong to which mark. Both
+        // are punctuation assembled here rather than a word this Component wrote.
+        const words = node.subtitle ? `${node.name} (${node.subtitle})` : node.name;
+        return name === '' ? words : `${name}, ${words}`;
+    }, '');
+}
 /**
  * The canvas the Diagram draws into, in its own user units.
  *
@@ -21,6 +48,12 @@ const CANVAS_HEIGHT = 400;
  * and a name is wider than the mark. The band is the honest cost of a server
  * component not being able to measure text, and it is why a name that runs long
  * still lands inside the canvas rather than off its edge.
+ *
+ * A node's subtitle, where it has one, is the deepest ink a node draws, at
+ * `NODE_SUBTITLE_OFFSET` below the mark, and that is inside the band too. The
+ * cost of not being able to measure text is paid once rather than per line, and
+ * paying it for the second line is what keeps the two-line node inside the
+ * canvas rather than under its own floor.
  */
 const PADDING = 56;
 /** The node mark's radius. A circle, so there is no corner radius for the pack to move. */
@@ -35,7 +68,17 @@ const NODE_RADIUS = 5;
  */
 const NODE_NAME_SIZE = 13;
 const NODE_NAME_OFFSET = 20;
+const NODE_SUBTITLE_SIZE = 11;
 const RELATION_NAME_SIZE = 11;
+/**
+ * The subtitle's baseline, measured down from the mark's centre.
+ *
+ * The name's baseline, then the subtitle's own size, then a line of leading. It is
+ * the deepest any node draws and it is why `PADDING` has to be what it is; a
+ * second line that were placed on the name rather than below it would collide
+ * with it on every node that had one.
+ */
+const NODE_SUBTITLE_OFFSET = NODE_NAME_OFFSET + NODE_SUBTITLE_SIZE + 5;
 /**
  * How far a relation's label sits off its line, in user units. Perpendicular to
  * the line, so the label never sits on the stroke it belongs to.
@@ -83,13 +126,27 @@ function fit(nodes) {
  * roster, and a `'use client'` line added here would put it back on that roster.
  *
  * **Accessibility.** A diagram carries meaning, so by default it is one image
- * with a name: `role="img"` and the `label` the caller passes. Everything inside
- * a `role="img"` is presentational, so the node names and relation words are
- * drawn for sighted readers and the surrounding sentence is what a screen reader
- * gets. Pass `decorative` when the sentence already says what the drawing
+ * with a name: `role="img"` and the drawing's name. Everything inside a
+ * `role="img"` is presentational, so the node names, the node subtitles and the
+ * relation words are drawn for sighted readers and the name is what a screen
+ * reader gets. That is why the name is derived from the nodes' own text when the
+ * caller passes no `label`: everything on the marks is invisible to the one
+ * reader who is not looking at the picture, so a role description written only
+ * into a label is a role description a sighted reader never sees. Pass `label`
+ * when the drawing needs a name that says what it is rather than what it holds,
+ * and omit it when the two would be the same sentence written twice. Pass
+ * `decorative` when the surrounding sentence already says what the drawing
  * shows, and the whole tree leaves the accessibility tree with nothing named
  * inside it.
  *
+ * **A node may wear its own pack.** `pack` on a node puts the boundary on the
+ * circle that node draws, which is the mark, and the mark is the one place a
+ * pack boundary belongs without moving anything but colour: a circle has no
+ * radius concept, so the pack re-inks the mark and cannot re-round it. Nothing
+ * else in the drawing answers to it, the node's name beside the mark keeps the
+ * page's ink, and a page that files two pack regions can make a diagram section
+ * the second one rather than moving it to the header's product switcher.
+ *
  * **Shape.** Nodes are circles and relations are paths. Both are shapes with no
  * radius concept, so no corner radius here is a function of `--radius` and a
  * pack boundary above the drawing moves nothing about its shape. A `<rect>` was
@@ -128,12 +185,17 @@ function fit(nodes) {
 function Diagram({ nodes, relations, label, decorative = false, className, }) {
     const place = fit(nodes);
     const byId = new Map(nodes.map((node) => [node.id, node]));
+    // An empty `label` is the same answer as no `label`, so the drawing is named by
+    // what its own marks carry rather than announced as an unnamed image. A blank
+    // string is the one value the accessible name must never take, and the caller
+    // who passed it has said no more than the caller who passed nothing.
+    const name = label !== undefined && label.trim() !== '' ? label : derivedName(nodes);
     const drawn = relations.flatMap((relation) => {
         const from = byId.get(relation.from);
         const to = byId.get(relation.to);
         return from && to ? [{ relation, from: place(from), to: place(to) }] : [];
     });
-    return (_jsxs("svg", { "data-slot": "diagram", "data-unresolved-relations": relations.length - drawn.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [drawn.map(({ relation, from, to }) => {
+    return (_jsxs("svg", { "data-slot": "diagram", "data-unresolved-relations": relations.length - drawn.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : name, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [drawn.map(({ relation, from, to }) => {
                 // A label placed beside its line rather than on it. The offset is the
                 // line's normal, so a vertical relation's label sits beside it and a
                 // horizontal one's sits above it, and neither ever sits on the stroke.
@@ -144,7 +206,15 @@ function Diagram({ nodes, relations, label, decorative = false, className, }) {
                 return (_jsxs("g", { "data-slot": "diagram-relation", "data-relation": `${relation.from}-${relation.to}`, children: [_jsx("path", { d: `M ${from.x} ${from.y} L ${to.x} ${to.y}`, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground fill-none" }), _jsx("text", { x: (from.x + to.x) / 2 - dy * lift, y: (from.y + to.y) / 2 + dx * lift, fontSize: RELATION_NAME_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: relation.label })] }, `${relation.from}-${relation.to}`));
             }), nodes.map((node) => {
                 const at = place(node);
-                return (_jsxs("g", { "data-slot": "diagram-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, children: [_jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name })] }, node.id));
+                // `default` is the absence of the attribute, spelled the way the token
+                // build spells it, so a node on the base pack resolves its fill and its
+                // stroke from the page rather than from a selector nothing emits.
+                const boundary = node.pack !== undefined && node.pack !== 'default' ? node.pack : undefined;
+                return (_jsxs("g", { "data-slot": "diagram-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, children: [_jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, "data-pack": boundary, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name }), node.subtitle ? (_jsx("text", { "data-slot": "diagram-node-subtitle", x: at.x, y: at.y + NODE_SUBTITLE_OFFSET, fontSize: NODE_SUBTITLE_SIZE, textAnchor: "middle", 
+                            // Muted ink rather than the name's own: the line below a name is
+                            // supporting, and a reader's eye reaches the name first. Both are
+                            // contract roles, so a boundary above either moves it.
+                            className: "fill-muted-foreground font-mono", children: node.subtitle })) : null] }, node.id));
             })] }));
 }
 export { Diagram };

package/dist/components/ui/dialog.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, RefObject } from 'react';
 /**
  * The props the Dialog root forwards to Base UI.
  *
@@ -12,6 +12,17 @@ export interface DialogProps {
     defaultOpen?: boolean;
     /** Called when the open state changes. */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Called after the open state change has finished animating, in both
+     * directions.
+     *
+     * Named because "the state changed" and "the panel has finished coming and
+     * going" are different moments, and a caller that unmounts on the first one
+     * takes the exit transition with it. It fires once the animations the panel
+     * declared have ended, and it fires immediately when there were none: a
+     * consumer whose own stylesheet removes transitions still gets told.
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
     /** Whether the dialog is modal. @defaultValue true */
     modal?: boolean | 'trap-focus';
     /** The trigger and content. */
@@ -48,6 +59,18 @@ export interface DialogContentProps extends ComponentProps<'div'> {
      * @defaultValue 'Close'
      */
     closeLabel?: string;
+    /**
+     * The element that takes focus when the dialog opens.
+     *
+     * Left out, the panel focuses its first tabbable element, which is right for
+     * a dialog whose first control is the one the reader came for. It is named
+     * here for the dialog whose first tabbable element is not that control: a
+     * search field, where the reader opened the dialog to type and where the
+     * dialog wants the field rather than whatever the panel happens to draw
+     * first. A ref and not an element because the panel does not exist until the
+     * portal commits.
+     */
+    initialFocus?: RefObject<HTMLElement | null>;
 }
 /** The props DialogHeader forwards to a plain container. */
 export interface DialogHeaderProps extends ComponentProps<'div'> {
@@ -72,12 +95,18 @@ export interface DialogCloseProps extends ComponentProps<'button'> {
  * closes. Always give it a `DialogTitle`, which names the dialog for every
  * reader. Use a Dialog for a decision or a short task; for content that is
  * not a task, use a Popover or navigate to a page.
+ *
+ * The built-in close control is 16px for a mouse and a trackpad and takes the
+ * 44px coarse-pointer floor on touch input, without moving on screen: it stays in
+ * the panel's top-right corner and the panel's own padding stays what it is. Pass
+ * `showCloseButton={false}` and draw your own control when a dialog's header runs
+ * the full width of its panel, which is what `search-dialog.tsx` does.
  */
 declare function Dialog({ ...props }: DialogProps): import("react").JSX.Element;
 /** The element that opens the dialog. */
 declare function DialogTrigger({ className, ...props }: DialogTriggerProps): import("react").JSX.Element;
 /** The dialog panel, its backdrop and its portal. */
-declare function DialogContent({ className, side, showCloseButton, closeLabel, children, ...props }: DialogContentProps): import("react").JSX.Element;
+declare function DialogContent({ className, side, showCloseButton, closeLabel, initialFocus, children, ...props }: DialogContentProps): import("react").JSX.Element;
 /** The dialog's heading area, above the body. */
 declare function DialogHeader({ className, ...props }: DialogHeaderProps): import("react").JSX.Element;
 /** The dialog's action area, below the body. */

package/dist/components/ui/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3C;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,mDAAmD;AACnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAEvE;;;;;GAKG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACrD,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;CAAG;AAEjE,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAqBrE;;;;;;;;GAQG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAExC;AAED,yCAAyC;AACzC,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAcjE;AAED,qDAAqD;AACrD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAe,EACf,eAAsB,EACtB,UAAoB,EACpB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAgCpB;AAED,iDAAiD;AACjD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAQ/D;AAED,gDAAgD;AAChD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAW/D;AAED,0EAA0E;AAC1E,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED,yCAAyC;AACzC,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED,gEAAgE;AAChE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc7D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,WAAW,GACZ,CAAA"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../../src/components/ui/dialog.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;GAKG;AACH,MAAM,WAAW,WAAW;IAC1B,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,4DAA4D;IAC5D,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,0CAA0C;IAC1C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;;;;;;;OASG;IACH,oBAAoB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C,sDAAsD;IACtD,KAAK,CAAC,EAAE,OAAO,GAAG,YAAY,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,mDAAmD;AACnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAEvE;;;;;GAKG;AACH,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IACrD,yEAAyE;IACzE,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;;OASG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;CAC7C;AAED,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,4DAA4D;AAC5D,MAAM,WAAW,iBAAkB,SAAQ,cAAc,CAAC,KAAK,CAAC;CAAG;AAEnE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,IAAI,CAAC;CAAG;AAEjE,uDAAuD;AACvD,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,GAAG,CAAC;CAAG;AAEtE,iDAAiD;AACjD,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,QAAQ,CAAC;CAAG;AAgCrE;;;;;;;;;;;;;;GAcG;AACH,iBAAS,MAAM,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,+BAExC;AAED,yCAAyC;AACzC,iBAAS,aAAa,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAmBjE;AAED,qDAAqD;AACrD,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAe,EACf,eAAsB,EACtB,UAAoB,EACpB,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAiDpB;AAED,iDAAiD;AACjD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAQ/D;AAED,gDAAgD;AAChD,iBAAS,YAAY,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAW/D;AAED,0EAA0E;AAC1E,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAQ7D;AAED,yCAAyC;AACzC,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,sBAAsB,+BAQzE;AAED,gEAAgE;AAChE,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAc7D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,WAAW,GACZ,CAAA"}

package/dist/components/ui/dialog.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { XIcon } from 'lucide-react';
-import { cn } from '../../lib/utils';
+import { cn } from '../../lib/utils.js';
 const VIEWPORT = {
     center: 'fixed inset-0 z-50 flex items-center justify-center p-4',
     top: 'fixed inset-x-0 top-0 z-50 flex justify-center',
@@ -10,12 +10,23 @@ const VIEWPORT = {
     left: 'fixed inset-y-0 left-0 z-50 flex',
     right: 'fixed inset-y-0 right-0 z-50 flex',
 };
+/**
+ * The panel a dialog draws at each side.
+ *
+ * The two widths are authored container tokens rather than steps of a size scale,
+ * because an overlay's width is a property of the kind of surface it is and not of
+ * the page grid underneath it. `overlay-panel` is the side sheet, which is a panel
+ * beside the work; `overlay-dialog` is the centred card, which is a decision or a
+ * short task. Both used to be spelled with Tailwind's own container steps, which
+ * ship at the same values, so nothing rendered differently and a retune of the
+ * authored token would have moved one spelling and not the other.
+ */
 const POPUP = {
-    center: 'w-full max-w-md rounded-xl border data-[starting-style]:scale-95 data-[ending-style]:scale-95',
+    center: 'w-full max-w-overlay-dialog rounded-xl border data-[starting-style]:scale-95 data-[ending-style]:scale-95',
     top: 'w-full rounded-b-xl border-x border-b data-[starting-style]:-translate-y-4 data-[ending-style]:-translate-y-4',
     bottom: 'w-full rounded-t-xl border-x border-t data-[starting-style]:translate-y-4 data-[ending-style]:translate-y-4',
-    left: 'h-full w-3/4 max-w-sm rounded-r-xl border-y border-r data-[starting-style]:-translate-x-4 data-[ending-style]:-translate-x-4',
-    right: 'h-full w-3/4 max-w-sm rounded-l-xl border-y border-l data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4',
+    left: 'h-full w-3/4 max-w-overlay-panel rounded-r-xl border-y border-r data-[starting-style]:-translate-x-4 data-[ending-style]:-translate-x-4',
+    right: 'h-full w-3/4 max-w-overlay-panel rounded-l-xl border-y border-l data-[starting-style]:translate-x-4 data-[ending-style]:translate-x-4',
 };
 /**
  * A modal surface that interrupts the page.
@@ -25,17 +36,40 @@ const POPUP = {
  * closes. Always give it a `DialogTitle`, which names the dialog for every
  * reader. Use a Dialog for a decision or a short task; for content that is
  * not a task, use a Popover or navigate to a page.
+ *
+ * The built-in close control is 16px for a mouse and a trackpad and takes the
+ * 44px coarse-pointer floor on touch input, without moving on screen: it stays in
+ * the panel's top-right corner and the panel's own padding stays what it is. Pass
+ * `showCloseButton={false}` and draw your own control when a dialog's header runs
+ * the full width of its panel, which is what `search-dialog.tsx` does.
  */
 function Dialog({ ...props }) {
     return _jsx(DialogPrimitive.Root, { ...props });
 }
 /** The element that opens the dialog. */
 function DialogTrigger({ className, ...props }) {
-    return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', className), ...props }));
+    return (_jsx(DialogPrimitive.Trigger, { "data-slot": "dialog-trigger", className: cn('bg-background shadow-xs inline-flex h-9 items-center justify-center gap-2 rounded-md border px-3 text-sm font-medium outline-none', 
+        // The same step `Button`'s `default` size takes, and this string is that
+        // size's string: the trigger here was written as a copy of it and the copy
+        // did not bring the coarse-pointer floor with it, which left a dialog's
+        // own trigger below both the 44px standard and its own trigger on desktop.
+        'pointer-coarse:h-11 pointer-coarse:min-w-11', 'transition-[color,box-shadow,background-color] duration-fast ease-out', 'hover:bg-accent hover:text-accent-foreground focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'disabled:pointer-events-none disabled:opacity-50', className), ...props }));
 }
 /** The dialog panel, its backdrop and its portal. */
-function DialogContent({ className, side = 'center', showCloseButton = true, closeLabel = 'Close', children, ...props }) {
-    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-backdrop", className: "bg-background/80 fixed inset-0 z-50 backdrop-blur-sm transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: VIEWPORT[side], children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", className: cn('bg-background shadow-md relative grid gap-4 p-6 outline-none', 'transition-[opacity,transform] duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0', POPUP[side], className), ...props, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": closeLabel, className: "ring-offset-background focus-visible:ring-ring absolute top-4 right-4 rounded-sm opacity-70 outline-none transition-opacity duration-fast ease-out hover:opacity-100 focus-visible:ring-[3px] disabled:pointer-events-none", children: _jsx(XIcon, { className: "size-4" }) })) : null] }) })] }));
+function DialogContent({ className, side = 'center', showCloseButton = true, closeLabel = 'Close', initialFocus, children, ...props }) {
+    return (_jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { "data-slot": "dialog-backdrop", className: "bg-background/80 fixed inset-0 z-50 backdrop-blur-sm transition-opacity duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsx(DialogPrimitive.Viewport, { "data-slot": "dialog-viewport", className: VIEWPORT[side], children: _jsxs(DialogPrimitive.Popup, { "data-slot": "dialog-content", initialFocus: initialFocus, className: cn('bg-background shadow-md relative grid gap-4 p-6 outline-none', 'transition-[opacity,transform] duration-base ease-out data-[starting-style]:opacity-0 data-[ending-style]:opacity-0', POPUP[side], className), ...props, children: [children, showCloseButton ? (_jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", "aria-label": closeLabel, className: cn('ring-offset-background focus-visible:ring-ring absolute top-4 right-4 flex items-center justify-center rounded-sm opacity-70 outline-none', 
+                            // The floor, as a coarse-pointer step. A dialog is the one surface where
+                            // growing a control is more constrained than it looks, because the
+                            // close button is absolutely positioned in the panel's top-right corner
+                            // and a 44px box at a 16px inset overhangs the panel's own 24px padding
+                            // into the header. What it reaches there is the empty right-hand end of
+                            // the title row, and the answer for a dialog whose header does reach
+                            // there is `showCloseButton={false}` and a close control of the caller's
+                            // own, which `search-dialog.tsx` draws in its field row. A band was the
+                            // other option and it is worse: at a 16px corner inset any 44px band
+                            // hangs off the panel, and on a phone the panel is the viewport minus
+                            // its own gutter, so the overhang is clipped by the screen.
+                            'transition-opacity duration-fast ease-out hover:opacity-100 focus-visible:ring-[3px]', 'pointer-coarse:size-11', 'disabled:pointer-events-none'), children: _jsx(XIcon, { className: "size-4" }) })) : null] }) })] }));
 }
 /** The dialog's heading area, above the body. */
 function DialogHeader({ className, ...props }) {