@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/search-field.d.ts

@@ -0,0 +1,159 @@
+import { type ReactNode } from 'react';
+/** The props the Search field accepts. */
+export interface SearchFieldProps {
+    /**
+     * The query, as the caller holds it.
+     *
+     * Required, and this is a controlled field because of it. See the note on the
+     * Component below for what an uncontrolled search field costs a consumer whose
+     * result set empties.
+     */
+    value: string;
+    /**
+     * Called with the query as the reader changes it, and with an empty string
+     * when the clear control is pressed.
+     *
+     * Required, and required for the same reason `value` is: a search field that
+     * owns its own text cannot be emptied from outside itself.
+     */
+    onValueChange: (value: string) => void;
+    /**
+     * The field's visible name, drawn above the control.
+     *
+     * Required, and it is a node rather than a string because a label is often
+     * more than a word: a count beside the name, or a piece of the page's own
+     * heading. The accessible name comes from the same node, through the label
+     * element, so what a reader sees and what a screen reader announces are one
+     * thing rather than two.
+     */
+    label: ReactNode;
+    /**
+     * What the field shows while it is empty.
+     *
+     * A hint and not a name: it disappears on the first keystroke, and it is
+     * drawn in the muted token so it reads as an instruction rather than as an
+     * answer.
+     */
+    placeholder?: string;
+    /**
+     * A short helper line under the control, announced with it.
+     *
+     * Replaced by `error` while the field is invalid rather than stacked under it,
+     * because the reader needs one instruction at a time and two lines of the same
+     * kind is one too many.
+     */
+    description?: ReactNode;
+    /**
+     * What is wrong with the query, drawn in the destructive token and announced
+     * as it appears.
+     *
+     * Also marks the control `aria-invalid`, so the failure is a state and not
+     * only a colour. Say what to do next: the message is the caller's sentence
+     * about their own product.
+     */
+    error?: ReactNode;
+    /**
+     * The accessible name of the control that empties the field.
+     *
+     * The clear control is drawn whenever this is passed and is not drawn at all
+     * when it is not, so the prop is what makes it exist rather than a label for
+     * something already on screen. The words are the caller's because a screen
+     * reader reads them, and "Clear" in a product in another language is a
+     * sentence this package does not get to write.
+     */
+    clearLabel?: string;
+    /**
+     * The caller's own line about what the query found, drawn under the control.
+     *
+     * A node and not a number: "12 results", "3 of 40 invoices" and "no matches
+     * yet" are three different sentences, and only the caller knows which one is
+     * true and what it should be called. The Component draws it, announces it and
+     * refuses to count anything itself.
+     */
+    resultSummary?: ReactNode;
+    /**
+     * The caller's own control at the end of the field, such as a filter trigger.
+     *
+     * A slot and not a button, because the trigger is the caller's: it may be a
+     * menu, a popover, a second field or a toggle, and its name, its state and its
+     * focus ring belong to whatever Component the caller builds it from. The slot
+     * draws no fill and no border of its own for the reason set out below.
+     */
+    trailing?: ReactNode;
+    /** Layout only. */
+    className?: string;
+}
+/**
+ * A labelled search input with a leading icon, an optional clear control and an
+ * optional slot for the caller's own filter trigger.
+ *
+ * **It is controlled, and that is the whole reason `onValueChange` is required.**
+ * An uncontrolled search field holds its own text, so a consumer whose result
+ * set empties has no way to clear it: nothing outside the input can reach the
+ * value, and a search box that cannot be cleared by the page is a search box the
+ * reader has to select-all and delete one character at a time. Making the field
+ * controlled costs the caller one piece of state and buys them the two things a
+ * results page needs and an uncontrolled field cannot give: clearing on demand,
+ * and clearing when the query no longer matches anything. The alternative, an
+ * optional `onValueChange` beside a `defaultValue`, was rejected because it is
+ * two Components' behaviour behind one name, and the half with no value is the
+ * half that cannot be emptied.
+ *
+ * **This Component does not own the search landmark.** A `<search>` element, or
+ * `role="search"`, names a region of the page rather than a control, and a page
+ * has two real search regions only when its two fields answer two different
+ * questions. A landmark on every field turns a screen reader's list of
+ * landmarks into a list of text boxes, and a landmark that is not a region
+ * teaches a reader that landmarks are decoration. Wrap the field yourself when
+ * the page really does have one search, and put the landmark on the container
+ * rather than on the field, so moving the field between containers does not drag
+ * the landmark with it.
+ *
+ * **The clear control is drawn whenever `clearLabel` is given, including while
+ * the field is empty.** The alternative was to draw it only once there was
+ * something to clear, which looks tidier until a reader tabs onto it and presses
+ * it: the control leaves the document under the focus and the focus falls to the
+ * body, which is a keyboard reader's dead end in the middle of a form. A control
+ * that is always where it was is worth the quiet space beside an empty field.
+ * It is the last thing in the group for the same reason, so a caller who adds a
+ * filter trigger in the trailing slot does not move the clear control out from
+ * under a reader who has learned where it is.
+ *
+ * **The leading icon says nothing and the trailing icon says everything.** The
+ * magnifier is `aria-hidden`, because the field is already named by its label and
+ * a second name for one control is a control announced twice. The clear control
+ * is the opposite case: an icon-only button with no name is announced as
+ * "button", so it takes the name the caller supplied and the mark is
+ * decoration. The platform's own clear mark on a search input is switched off for
+ * the same reason: it is a second mark doing the same job, it has no name, and
+ * a reader would be choosing between two of them.
+ *
+ * **The trailing slot draws no chrome of its own.** It is a place in the field
+ * for a control the caller composes, and Prism does not restyle what a caller
+ * composes. An addon wrapped around a caller's own trigger would put a grey fill
+ * and a second border inside one field, which is the seam `InputGroup` was drawn
+ * to remove, and a menu trigger that arrives already rounded would have to be
+ * un-rounded by the caller before it looked right. Bring the control; Prism
+ * holds the space for it.
+ *
+ * **The result line is a polite live region, and keeping it in the document is
+ * the caller's job.** A count that changes as the reader types is the only thing
+ * on screen that reports the consequence of typing, and nothing else says it, so
+ * the line is announced politely when it changes. It is drawn only once
+ * `resultSummary` is passed, so a caller who starts passing it after the first
+ * render brings the region into the document together with its content, which is
+ * the one case a live region is least reliable for. Pass an empty summary on the
+ * first paint and the region is already there waiting. Prism cannot do that
+ * itself, because Prism does not know whether a summary is ever coming.
+ *
+ * **It carries no directive.** It holds no state, so there is nothing of its own
+ * to reconcile, and the caller that owns `value` and `onValueChange` already
+ * lives in a client graph, which puts this module in the client graph with it.
+ * That is also the reminder: a caller who renders this from a server component
+ * gets a field whose typing never reaches their state, because a server
+ * component cannot hand an event handler down. A required `value` is a piece of
+ * state, and state is a client module.
+ */
+declare function SearchField({ value, onValueChange, label, placeholder, description, error, clearLabel, resultSummary, trailing, className, }: SearchFieldProps): import("react").JSX.Element;
+export { SearchField };
+//# sourceMappingURL=search-field.d.ts.map

package/dist/components/ui/search-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"search-field.d.ts","sourceRoot":"","sources":["../../../src/components/ui/search-field.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAW7C,0CAA0C;AAC1C,MAAM,WAAW,gBAAgB;IAC/B;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC;;;;;;;;OAQG;IACH,KAAK,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,SAAS,CAAA;IACzB;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsEG;AACH,iBAAS,WAAW,CAAC,EACnB,KAAK,EACL,aAAa,EACb,KAAK,EACL,WAAW,EACX,WAAW,EACX,KAAK,EACL,UAAU,EACV,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,gBAAgB,+BAsElB;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/components/ui/search-field.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SearchIcon, XIcon } from 'lucide-react';
+import { useId } from 'react';
+import { Field, FieldDescription, FieldError, FieldLabel } from './field.js';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from './input-group.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * A labelled search input with a leading icon, an optional clear control and an
+ * optional slot for the caller's own filter trigger.
+ *
+ * **It is controlled, and that is the whole reason `onValueChange` is required.**
+ * An uncontrolled search field holds its own text, so a consumer whose result
+ * set empties has no way to clear it: nothing outside the input can reach the
+ * value, and a search box that cannot be cleared by the page is a search box the
+ * reader has to select-all and delete one character at a time. Making the field
+ * controlled costs the caller one piece of state and buys them the two things a
+ * results page needs and an uncontrolled field cannot give: clearing on demand,
+ * and clearing when the query no longer matches anything. The alternative, an
+ * optional `onValueChange` beside a `defaultValue`, was rejected because it is
+ * two Components' behaviour behind one name, and the half with no value is the
+ * half that cannot be emptied.
+ *
+ * **This Component does not own the search landmark.** A `<search>` element, or
+ * `role="search"`, names a region of the page rather than a control, and a page
+ * has two real search regions only when its two fields answer two different
+ * questions. A landmark on every field turns a screen reader's list of
+ * landmarks into a list of text boxes, and a landmark that is not a region
+ * teaches a reader that landmarks are decoration. Wrap the field yourself when
+ * the page really does have one search, and put the landmark on the container
+ * rather than on the field, so moving the field between containers does not drag
+ * the landmark with it.
+ *
+ * **The clear control is drawn whenever `clearLabel` is given, including while
+ * the field is empty.** The alternative was to draw it only once there was
+ * something to clear, which looks tidier until a reader tabs onto it and presses
+ * it: the control leaves the document under the focus and the focus falls to the
+ * body, which is a keyboard reader's dead end in the middle of a form. A control
+ * that is always where it was is worth the quiet space beside an empty field.
+ * It is the last thing in the group for the same reason, so a caller who adds a
+ * filter trigger in the trailing slot does not move the clear control out from
+ * under a reader who has learned where it is.
+ *
+ * **The leading icon says nothing and the trailing icon says everything.** The
+ * magnifier is `aria-hidden`, because the field is already named by its label and
+ * a second name for one control is a control announced twice. The clear control
+ * is the opposite case: an icon-only button with no name is announced as
+ * "button", so it takes the name the caller supplied and the mark is
+ * decoration. The platform's own clear mark on a search input is switched off for
+ * the same reason: it is a second mark doing the same job, it has no name, and
+ * a reader would be choosing between two of them.
+ *
+ * **The trailing slot draws no chrome of its own.** It is a place in the field
+ * for a control the caller composes, and Prism does not restyle what a caller
+ * composes. An addon wrapped around a caller's own trigger would put a grey fill
+ * and a second border inside one field, which is the seam `InputGroup` was drawn
+ * to remove, and a menu trigger that arrives already rounded would have to be
+ * un-rounded by the caller before it looked right. Bring the control; Prism
+ * holds the space for it.
+ *
+ * **The result line is a polite live region, and keeping it in the document is
+ * the caller's job.** A count that changes as the reader types is the only thing
+ * on screen that reports the consequence of typing, and nothing else says it, so
+ * the line is announced politely when it changes. It is drawn only once
+ * `resultSummary` is passed, so a caller who starts passing it after the first
+ * render brings the region into the document together with its content, which is
+ * the one case a live region is least reliable for. Pass an empty summary on the
+ * first paint and the region is already there waiting. Prism cannot do that
+ * itself, because Prism does not know whether a summary is ever coming.
+ *
+ * **It carries no directive.** It holds no state, so there is nothing of its own
+ * to reconcile, and the caller that owns `value` and `onValueChange` already
+ * lives in a client graph, which puts this module in the client graph with it.
+ * That is also the reminder: a caller who renders this from a server component
+ * gets a field whose typing never reaches their state, because a server
+ * component cannot hand an event handler down. A required `value` is a piece of
+ * state, and state is a client module.
+ */
+function SearchField({ value, onValueChange, label, placeholder, description, error, clearLabel, resultSummary, trailing, className, }) {
+    const generated = useId();
+    const inputId = `${generated}-input`;
+    const invalid = error !== undefined;
+    const descriptionId = description === undefined ? undefined : `${generated}-description`;
+    const errorId = invalid ? `${generated}-error` : undefined;
+    // The error comes first when both are present, so the reader hears what is
+    // wrong before the background detail, which is the order the two are drawn in.
+    const describedBy = errorId === undefined
+        ? descriptionId
+        : descriptionId === undefined
+            ? errorId
+            : `${errorId} ${descriptionId}`;
+    return (_jsx("div", { "data-slot": "search-field", className: cn('flex w-full flex-col', className), children: _jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: inputId, children: label }), _jsxs(InputGroup, { children: [_jsx(InputGroupAddon, { position: "prefix", children: _jsx(SearchIcon, { className: "text-muted-foreground size-4", "aria-hidden": "true" }) }), _jsx(InputGroupInput, { id: inputId, type: "search", value: value, onChange: (event) => onValueChange(event.target.value), placeholder: placeholder, "aria-invalid": invalid || undefined, "aria-describedby": describedBy, 
+                            // WebKit and Blink draw their own clear mark on a search input, and
+                            // they draw it with no name and no way to place it. Left alone it sits
+                            // beside this Component's clear control, so a reader sees two marks
+                            // that mean the same thing and only one of which has a name.
+                            className: "[&::-webkit-search-cancel-button]:appearance-none" }), trailing === undefined ? null : (_jsx("div", { "data-slot": "search-field-trailing", className: "flex shrink-0 items-stretch", children: trailing })), clearLabel === undefined ? null : (_jsx(InputGroupButton, { "data-slot": "search-field-clear", "aria-label": clearLabel, onClick: () => onValueChange(''), children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) }))] }), invalid ? _jsx(FieldError, { id: errorId, children: error }) : null, descriptionId === undefined ? null : (_jsx(FieldDescription, { id: descriptionId, children: description })), resultSummary === undefined ? null : (_jsx("p", { "data-slot": "search-field-summary", "aria-live": "polite", className: "text-muted-foreground text-sm tabular-nums", children: resultSummary }))] }) }));
+}
+export { SearchField };

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

@@ -2,6 +2,21 @@ import type { ReactNode } from 'react';
 /**
  * Container primitive. Every block composes its own section from this so vertical
  * rhythm stays consistent across the catalog instead of being re-invented per block.
+ *
+ * The page column is `max-w-page` and there is one spelling of it. This line used
+ * to name the sixth step of Tailwind's own container namespace, which ships at
+ * the same 72rem, so nothing rendered differently and nothing failed; the two
+ * names drifted the moment `--container-page` was retuned, because a retune of the
+ * authored token moved every surface reaching it by name and left every surface
+ * reaching it by the other where it was, with no gate firing. That namespace is
+ * now closed in the token build, and `scripts/check-elevation-layout.mjs` reads
+ * the authored container names out of the token source so the retired spelling is
+ * a finding rather than a synonym.
+ *
+ * **The retired name is written here in prose and not as a class, on purpose.**
+ * Tailwind's extractor reads this file, comments included, so a utility quoted in
+ * a JSDoc block is a utility the shipped stylesheet emits. A record of a retired
+ * class written as a class is a second copy of the tree nobody edits.
  */
 export declare function Section({ className, children, ...props }: React.ComponentProps<'section'>): import("react").JSX.Element;
 /**
@@ -46,6 +61,22 @@ export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
  * cards is already a document that has run out of levels.
  */
 export declare function childLevel(level: HeadingLevel): HeadingLevel;
+/**
+ * The size classes a heading at `level` renders at.
+ *
+ * Exported for the one Block that resolves its own heading tag on a filled
+ * surface rather than composing `SectionHeading`: `Cta01` cannot borrow this
+ * Component's markup, because its copy sits on a `bg-primary` panel where the
+ * muted description colour and `gap-4` are wrong, so it writes the element itself
+ * and used to write the size with it. Two answers to the same question is how the
+ * one-size defect reached a second surface, so it asks here rather than keeping a
+ * second table.
+ *
+ * The classes are the whole answer, `font-semibold`, `tracking-tight` and
+ * `text-balance` are not included, so a caller composes them onto the surface it
+ * owns and cannot inherit this Component's decisions by accident.
+ */
+export declare function headingSizeClass(level: HeadingLevel): string;
 /**
  * The heading a section opens with: an optional eyebrow, the title, an optional
  * supporting line, and the level of the one heading it renders.
@@ -54,8 +85,66 @@ export declare function childLevel(level: HeadingLevel): HeadingLevel;
  * container. `center` is right for a band that is only a heading, and `left` is
  * right for a section with content under it, where a centred title above a
  * left-aligned list reads as two unrelated pieces.
+ *
+ * **`as` decides the size as well as the tag, and the size is derived rather than
+ * passed.** `as` was already on every Block as `headingLevel` and `childLevel()`
+ * already existed to carry a level down a level, so the document decided where
+ * each heading sits in the outline and the visual size simply never followed it.
+ * One class string was written for all six levels, so a page `h1` and the `h2`
+ * sections under it came out byte-identical, and a landing page of a hero and six
+ * Blocks showed one `h1` and six section titles at 36 pixels with no hierarchy
+ * between what the page claims and what it elaborates. A consumer could not
+ * correct it: the size was hardcoded here, no Block exposed a way to change it,
+ * and restyling a catalogue item is what the no-override-path rule does not allow.
+ *
+ * **The table is the authored scale walked down one step per level, and it stops
+ * at the floor rather than running off the bottom.**
+ *
+ * | level | step | authored value | at `sm` | authored value |
+ * | --- | --- | --- | --- | --- |
+ * | `h1` | `text-5xl` | 3rem / 1 | `sm:text-6xl` | 3.75rem / 1 |
+ * | `h2` | `text-4xl` | 2.25rem / 1.111 | `sm:text-5xl` | 3rem / 1 |
+ * | `h3` | `text-3xl` | 1.875rem / 1.2 | `sm:text-4xl` | 2.25rem / 1.111 |
+ * | `h4` | `text-2xl` | 1.5rem / 1.333 | `sm:text-3xl` | 1.875rem / 1.2 |
+ * | `h5` | `text-xl` | 1.25rem / 1.4 | `sm:text-2xl` | 1.5rem / 1.333 |
+ * | `h6` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
+ *
+ * **`h1` is Display and Display is the ceiling of the scale**, because that is
+ * the role `DESIGN.md` gives it: a page's own heading is the largest thing on the
+ * page. The two steps above `4xl` are authored rather than invented here, and they
+ * are authored as a pair rather than as one step, because every rung of this table
+ * is a pair: a base step and one step up at `sm`. A single new step would have made
+ * Display the one heading in the system that does not grow, which is a smaller
+ * defect than the one this table was written to remove and is still a defect.
+ * `5xl` is `4xl` times four thirds, which is the first gap in the group wider than
+ * any gap it already had, and `6xl` is `5xl` times five fourths. Nothing in the
+ * system goes above `6xl`, and no heading level steps above Display.
+ *
+ * **`h2` is one step below it, and `h2` is what almost every Block renders**,
+ * because a Block is composed under a heading the document already owns. That is
+ * the whole of what a consumer sees: a section title moves from 1.5rem to
+ * 2.25rem, and above `sm` from 1.875rem to 3rem.
+ *
+ * **The floor is `h6`, and the floor is `text-lg`.** `lg` is the deepest authored
+ * step that is not smaller than Body, and Body is 400 at 1.125rem, so a heading
+ * that stepped one further would render smaller than the copy it introduces and
+ * read as a caption rather than as a heading. The table has six rows and the scale
+ * has exactly six steps at or above Body, so the ladder lands on the floor rather
+ * than running off the bottom of it: every level now holds a step of its own, where
+ * before `h4` through `h6` shared one. `childLevel()` clamps at `h6` for the same
+ * reason the table stops there. A heading at the floor is still a heading: it keeps
+ * `font-semibold`, keeps `tracking-tight`, and keeps `text-balance` at every step,
+ * so weight and tracking tell it apart from body copy where size no longer can.
+ *
+ * So a consumer gets the hierarchy by passing the level it was already passing,
+ * and a Block moved from an `h2` section into an `h3` one carries its size with
+ * it, which is what `headingLevel` was introduced to do.
+ *
+ * **`Prose` walks this ladder from one rung down**, because its measure is the
+ * reading measure rather than the page column and the Display step does not fit a
+ * 42rem column. See `Prose`.
  */
-export declare function SectionHeading({ index, eyebrow, title, as: Heading, description, align, className, }: {
+export declare function SectionHeading({ index, eyebrow, title, as: Heading, description, align, id, className, }: {
     /**
      * A short ordinal for the section: "01", "02", "7". It is rendered in the mono
      * face above the title, because a section's position in a sequence is machine
@@ -79,8 +168,28 @@ export declare function SectionHeading({ index, eyebrow, title, as: Heading, des
      * A page that renders a block as its primary heading passes `as="h1"`; a
      * document with no `h1` gives screen-reader and search engines no top-level
      * entry point.
+     *
+     * It also picks the size, and there is no prop for the size. The table is in
+     * this Component's JSDoc above: `h1` at 3rem, `h2` at 2.25rem, `h3` at
+     * 1.875rem, `h4` at 1.5rem, `h5` at 1.25rem and `h6` at 1.125rem, each
+     * stepping up one authored step above `sm`. Passing a deeper level is
+     * therefore a typographic decision as well as an outline one, which is the
+     * point: a Block composed one level deeper should read as one level deeper.
      */
     as?: HeadingLevel;
+    /**
+     * The heading's own id, so something else on the page can name itself from it.
+     *
+     * A prop rather than a generated id because the reference is the point: a caller
+     * that draws a table, a list or a region under this heading and wants that thing
+     * to carry an accessible name needs a handle on this element, and an id nobody
+     * can write down is no handle. `aria-labelledby` on the table is the case that
+     * made it necessary, and it is the arrangement `ChoiceCard` uses for its legend.
+     *
+     * Not generated here, because a generated id cannot be referred to and an unused
+     * one on every section heading is noise in the markup.
+     */
+    id?: string;
     className?: string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=section.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;GAGG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,+BAWjC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAKlE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAG5D;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EACL,EAAE,EAAE,OAAc,EAClB,WAAW,EACX,KAAgB,EAChB,SAAS,GACV,EAAE;IACD;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACzB;;;;;OAKG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BA6BA"}
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/components/ui/section.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,OAAO,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,+BAWjC;AAED;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAKlE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,YAAY,GAAG,YAAY,CAG5D;AAoBD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,YAAY,GAAG,MAAM,CAE5D;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,OAAO,EACP,KAAK,EACL,EAAE,EAAE,OAAc,EAClB,WAAW,EACX,KAAgB,EAChB,EAAE,EACF,SAAS,GACV,EAAE;IACD;;;;;;;;;;;;OAYG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,KAAK,EAAE,SAAS,CAAA;IAChB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,KAAK,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAA;IACzB;;;;;;;;;;;;OAYG;IACH,EAAE,CAAC,EAAE,YAAY,CAAA;IACjB;;;;;;;;;;;OAWG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,+BAgCA"}

package/dist/components/ui/section.js

@@ -3,9 +3,24 @@ import { cn } from '../../lib/utils.js';
 /**
  * Container primitive. Every block composes its own section from this so vertical
  * rhythm stays consistent across the catalog instead of being re-invented per block.
+ *
+ * The page column is `max-w-page` and there is one spelling of it. This line used
+ * to name the sixth step of Tailwind's own container namespace, which ships at
+ * the same 72rem, so nothing rendered differently and nothing failed; the two
+ * names drifted the moment `--container-page` was retuned, because a retune of the
+ * authored token moved every surface reaching it by name and left every surface
+ * reaching it by the other where it was, with no gate firing. That namespace is
+ * now closed in the token build, and `scripts/check-elevation-layout.mjs` reads
+ * the authored container names out of the token source so the retired spelling is
+ * a finding rather than a synonym.
+ *
+ * **The retired name is written here in prose and not as a class, on purpose.**
+ * Tailwind's extractor reads this file, comments included, so a utility quoted in
+ * a JSDoc block is a utility the shipped stylesheet emits. A record of a retired
+ * class written as a class is a second copy of the tree nobody edits.
  */
 export function Section({ className, children, ...props }) {
-    return (_jsx("section", { className: cn('py-16 sm:py-24', className), ...props, children: _jsx("div", { className: "mx-auto w-full max-w-6xl px-6 lg:px-8", children: children }) }));
+    return (_jsx("section", { className: cn('py-16 sm:py-24', className), ...props, children: _jsx("div", { className: "mx-auto w-full max-w-page px-6 lg:px-8", children: children }) }));
 }
 /** The six levels in outline order, so a level can be stepped rather than compared. */
 const LEVELS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -38,6 +53,41 @@ export function childLevel(level) {
     const at = LEVELS.indexOf(level);
     return LEVELS[Math.min(at + 1, LEVELS.length - 1)];
 }
+/**
+ * The step of the authored type scale each heading level renders at.
+ *
+ * Private, and read through `headingSizeClass`, so there is one list and a caller
+ * cannot add a step to it. The table and the reasoning behind it are on
+ * `SectionHeading`, which is the documentation source the declaration build
+ * preserves and the corpus reads, and `scripts/check-heading-scale.mjs` holds the
+ * two copies in step.
+ */
+const HEADING_SIZE = {
+    h1: 'text-5xl sm:text-6xl',
+    h2: 'text-4xl sm:text-5xl',
+    h3: 'text-3xl sm:text-4xl',
+    h4: 'text-2xl sm:text-3xl',
+    h5: 'text-xl sm:text-2xl',
+    h6: 'text-lg sm:text-xl',
+};
+/**
+ * The size classes a heading at `level` renders at.
+ *
+ * Exported for the one Block that resolves its own heading tag on a filled
+ * surface rather than composing `SectionHeading`: `Cta01` cannot borrow this
+ * Component's markup, because its copy sits on a `bg-primary` panel where the
+ * muted description colour and `gap-4` are wrong, so it writes the element itself
+ * and used to write the size with it. Two answers to the same question is how the
+ * one-size defect reached a second surface, so it asks here rather than keeping a
+ * second table.
+ *
+ * The classes are the whole answer, `font-semibold`, `tracking-tight` and
+ * `text-balance` are not included, so a caller composes them onto the surface it
+ * owns and cannot inherit this Component's decisions by accident.
+ */
+export function headingSizeClass(level) {
+    return HEADING_SIZE[level];
+}
 /**
  * The heading a section opens with: an optional eyebrow, the title, an optional
  * supporting line, and the level of the one heading it renders.
@@ -46,7 +96,65 @@ export function childLevel(level) {
  * container. `center` is right for a band that is only a heading, and `left` is
  * right for a section with content under it, where a centred title above a
  * left-aligned list reads as two unrelated pieces.
+ *
+ * **`as` decides the size as well as the tag, and the size is derived rather than
+ * passed.** `as` was already on every Block as `headingLevel` and `childLevel()`
+ * already existed to carry a level down a level, so the document decided where
+ * each heading sits in the outline and the visual size simply never followed it.
+ * One class string was written for all six levels, so a page `h1` and the `h2`
+ * sections under it came out byte-identical, and a landing page of a hero and six
+ * Blocks showed one `h1` and six section titles at 36 pixels with no hierarchy
+ * between what the page claims and what it elaborates. A consumer could not
+ * correct it: the size was hardcoded here, no Block exposed a way to change it,
+ * and restyling a catalogue item is what the no-override-path rule does not allow.
+ *
+ * **The table is the authored scale walked down one step per level, and it stops
+ * at the floor rather than running off the bottom.**
+ *
+ * | level | step | authored value | at `sm` | authored value |
+ * | --- | --- | --- | --- | --- |
+ * | `h1` | `text-5xl` | 3rem / 1 | `sm:text-6xl` | 3.75rem / 1 |
+ * | `h2` | `text-4xl` | 2.25rem / 1.111 | `sm:text-5xl` | 3rem / 1 |
+ * | `h3` | `text-3xl` | 1.875rem / 1.2 | `sm:text-4xl` | 2.25rem / 1.111 |
+ * | `h4` | `text-2xl` | 1.5rem / 1.333 | `sm:text-3xl` | 1.875rem / 1.2 |
+ * | `h5` | `text-xl` | 1.25rem / 1.4 | `sm:text-2xl` | 1.5rem / 1.333 |
+ * | `h6` | `text-lg` | 1.125rem / 1.556 | `sm:text-xl` | 1.25rem / 1.4 |
+ *
+ * **`h1` is Display and Display is the ceiling of the scale**, because that is
+ * the role `DESIGN.md` gives it: a page's own heading is the largest thing on the
+ * page. The two steps above `4xl` are authored rather than invented here, and they
+ * are authored as a pair rather than as one step, because every rung of this table
+ * is a pair: a base step and one step up at `sm`. A single new step would have made
+ * Display the one heading in the system that does not grow, which is a smaller
+ * defect than the one this table was written to remove and is still a defect.
+ * `5xl` is `4xl` times four thirds, which is the first gap in the group wider than
+ * any gap it already had, and `6xl` is `5xl` times five fourths. Nothing in the
+ * system goes above `6xl`, and no heading level steps above Display.
+ *
+ * **`h2` is one step below it, and `h2` is what almost every Block renders**,
+ * because a Block is composed under a heading the document already owns. That is
+ * the whole of what a consumer sees: a section title moves from 1.5rem to
+ * 2.25rem, and above `sm` from 1.875rem to 3rem.
+ *
+ * **The floor is `h6`, and the floor is `text-lg`.** `lg` is the deepest authored
+ * step that is not smaller than Body, and Body is 400 at 1.125rem, so a heading
+ * that stepped one further would render smaller than the copy it introduces and
+ * read as a caption rather than as a heading. The table has six rows and the scale
+ * has exactly six steps at or above Body, so the ladder lands on the floor rather
+ * than running off the bottom of it: every level now holds a step of its own, where
+ * before `h4` through `h6` shared one. `childLevel()` clamps at `h6` for the same
+ * reason the table stops there. A heading at the floor is still a heading: it keeps
+ * `font-semibold`, keeps `tracking-tight`, and keeps `text-balance` at every step,
+ * so weight and tracking tell it apart from body copy where size no longer can.
+ *
+ * So a consumer gets the hierarchy by passing the level it was already passing,
+ * and a Block moved from an `h2` section into an `h3` one carries its size with
+ * it, which is what `headingLevel` was introduced to do.
+ *
+ * **`Prose` walks this ladder from one rung down**, because its measure is the
+ * reading measure rather than the page column and the Display step does not fit a
+ * 42rem column. See `Prose`.
  */
-export function SectionHeading({ index, eyebrow, title, as: Heading = 'h2', description, align = 'center', className, }) {
-    return (_jsxs("div", { className: cn('flex flex-col gap-4', align === 'center' ? 'items-center text-center' : 'items-start text-left', className), children: [index ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs font-normal tracking-normal", children: index })) : null, eyebrow ? (_jsx("span", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow })) : null, _jsx(Heading, { className: "text-3xl font-semibold tracking-tight text-balance sm:text-4xl", children: title }), description ? (_jsx("p", { className: "text-muted-foreground max-w-2xl text-lg text-pretty", children: description })) : null] }));
+export function SectionHeading({ index, eyebrow, title, as: Heading = 'h2', description, align = 'center', id, className, }) {
+    return (_jsxs("div", { className: cn('flex flex-col gap-4', align === 'center' ? 'items-center text-center' : 'items-start text-left', className), children: [index ? (_jsx("span", { className: "text-muted-foreground font-mono text-xs font-normal tracking-normal", children: index })) : null, eyebrow ? (_jsx("span", { className: "text-muted-foreground text-sm font-medium tracking-wide uppercase", children: eyebrow })) : null, _jsx(Heading, { id: id, className: cn('font-semibold tracking-tight text-balance', headingSizeClass(Heading)), children: title }), description ? (_jsx("p", { className: "text-muted-foreground max-w-measure text-lg text-pretty", children: description })) : null] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/ui/select.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/select.js

@@ -18,7 +18,15 @@ function Select({ ...props }) {
 }
 /** The button that shows the selected value and opens the list. */
 function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", className: cn('border-input bg-background shadow-xs flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm outline-none', 'transition-[color,box-shadow,border-color] duration-fast ease-out', 'data-[popup-open]:border-ring focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0', size === 'sm' ? 'h-8' : 'h-9', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { className: "text-muted-foreground", children: _jsx(ChevronDownIcon, { className: "size-4" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", className: cn('border-input bg-background shadow-xs flex w-full items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm outline-none', 'transition-[color,box-shadow,border-color] duration-fast ease-out', 'data-[popup-open]:border-ring focus-visible:border-ring focus-visible:ring-ring focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[placeholder]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0', 
+        // The coarse-pointer floor, as a step. A select trigger opens a popup and is a
+        // button rather than a text field: it has no caret, takes no typed input, and its
+        // job is to be pressed. It is `w-full`, so only the height was ever short, and
+        // growing it adds eight pixels to every field a caller put it in on a phone,
+        // which is what the platform's own selects cost. A band was rejected because the
+        // trigger's drawn size is content the caller sized, not a shape the design owns.
+        // See DESIGN.md, The coarse-pointer floor.
+        'pointer-coarse:h-11', size === 'sm' ? 'h-8' : 'h-9', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { className: "text-muted-foreground", children: _jsx(ChevronDownIcon, { className: "size-4" }) })] }));
 }
 /** The selected value, or a placeholder while none is chosen. */
 function SelectValue({ className, ...props }) {