@eifi1/ui-kit 0.53.0 → 0.55.0

package/dist/components/release-notes-labels.d.ts

@@ -0,0 +1,16 @@
+import type { ChangelogSectionKey } from "../lib/changelog.js";
+/**
+ * `ReleaseNotes`' words — the `releaseNotes` namespace of `<UiKitProvider labels>` (0.55).
+ * The notes themselves are the changelog's, as written.
+ */
+export interface ReleaseNotesLabels {
+    /** The release's heading, given its version as the file writes it: "v0.13.9". */
+    version: (version: string) => string;
+    /**
+     * A section's heading by its key (`changelogSectionKey`), whichever preset named it:
+     * "Added" and "Features" are `added`, "Fixed" and "Bug Fixes" `fixed`. A heading no
+     * preset writes has no key and keeps its own title.
+     */
+    sections: Record<ChangelogSectionKey, string>;
+}
+export declare const DEFAULT_RELEASE_NOTES_LABELS: ReleaseNotesLabels;

package/dist/components/release-notes-labels.js

@@ -0,0 +1,18 @@
+"use client";
+const DEFAULT_RELEASE_NOTES_LABELS = {
+  version: (version) => `v${version}`,
+  sections: {
+    breaking: "Breaking changes",
+    added: "New",
+    changed: "Changed",
+    fixed: "Fixed",
+    deprecated: "Deprecated",
+    removed: "Removed",
+    security: "Security",
+    reverted: "Reverted"
+  }
+};
+export {
+  DEFAULT_RELEASE_NOTES_LABELS
+};
+//# sourceMappingURL=release-notes-labels.js.map

package/dist/components/release-notes-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/release-notes-labels.ts"],"sourcesContent":["// The English words of ./release-notes, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component (0.34, KS U8).\n// keksdose's reviewed headings (changelog.section_*) where it had one: \"New\", \"Fixed\",\n// \"Reverted\"; its \"Faster\" was the performance heading alone, which `changed` now also is.\n\nimport type { ChangelogSectionKey } from \"../lib/changelog\";\n\n/**\n * `ReleaseNotes`' words — the `releaseNotes` namespace of `<UiKitProvider labels>` (0.55).\n * The notes themselves are the changelog's, as written.\n */\nexport interface ReleaseNotesLabels {\n  /** The release's heading, given its version as the file writes it: \"v0.13.9\". */\n  version: (version: string) => string;\n  /**\n   * A section's heading by its key (`changelogSectionKey`), whichever preset named it:\n   * \"Added\" and \"Features\" are `added`, \"Fixed\" and \"Bug Fixes\" `fixed`. A heading no\n   * preset writes has no key and keeps its own title.\n   */\n  sections: Record<ChangelogSectionKey, string>;\n}\n\nexport const DEFAULT_RELEASE_NOTES_LABELS: ReleaseNotesLabels = {\n  version: (version) => `v${version}`,\n  sections: {\n    breaking: \"Breaking changes\",\n    added: \"New\",\n    changed: \"Changed\",\n    fixed: \"Fixed\",\n    deprecated: \"Deprecated\",\n    removed: \"Removed\",\n    security: \"Security\",\n    reverted: \"Reverted\",\n  },\n};\n"],"mappings":";AAsBO,MAAM,+BAAmD;AAAA,EAC9D,SAAS,CAAC,YAAY,IAAI,OAAO;AAAA,EACjC,UAAU;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AACF;","names":[]}

package/dist/components/release-notes.d.ts

@@ -0,0 +1,65 @@
+import type { ComponentPropsWithRef } from "react";
+import type { ChangelogItem, ChangelogSectionKey } from "../lib/changelog.js";
+import type { LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_RELEASE_NOTES_LABELS, type ReleaseNotesLabels } from "./release-notes-labels.js";
+export { DEFAULT_RELEASE_NOTES_LABELS };
+export type { ReleaseNotesLabels };
+/** One section as `parseChangelog` reads it, or as an app's backend sends it: the items
+ *  may be the raw bullets (keksdose's) or parsed ones. */
+export interface ReleaseNotesSection {
+    title: string;
+    /** Read from the title with `changelogSectionKey` when left out. */
+    key?: ChangelogSectionKey | null;
+    items: readonly (string | ChangelogItem)[];
+}
+/** One release: a `ChangelogRelease` from `parseChangelog`, or the same shape from a server. */
+export interface ReleaseNotesRelease {
+    version: string;
+    /** `YYYY-MM-DD`, or none. */
+    date?: string | null;
+    sections: readonly ReleaseNotesSection[];
+    /** A hand-written release's prose, shown when it has no section. */
+    body?: string | null;
+}
+export interface ReleaseNotesProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+    release: ReleaseNotesRelease;
+    /**
+     * `card` (default): a card of its own with the version as its title and the day at its
+     * end — a changelog page's list of releases (keksdose's and kastlan's /changelog).
+     * `plain`: the same parts without the card, a quieter heading row — keksdose's what's-new
+     * dialog, which lists the releases since the last visit inside its own frame.
+     */
+    frame?: "card" | "plain";
+    /** The version's heading. Default `h2` on a card (the release list is the page's outline),
+     *  `h3` plain; the sections' headings are one level below. */
+    headingAs?: "h2" | "h3" | "h4";
+    /** The release day as the app writes it. Default the provider's `formatDate` (the app's
+     *  date preference), else the kit's medium date in the provider's locale. */
+    formatDate?: (date: string) => string;
+    labels?: LabelOverride<ReleaseNotesLabels>;
+}
+/**
+ * One release for a reader (0.55): its version, its day, and its sections with the notes
+ * grouped by scope — the card keksdose (features/changelog/release-notes.tsx, on its
+ * /changelog and in its what's-new dialog) and kastlan (features/changelog/pages/
+ * changelog-page.tsx) each drew around their own parser, on the kit's `parseChangelog`
+ * (kastlan reuse audit 2026-11-02, proposal 1).
+ *
+ * keksdose's layout, from feedback live #211: **the scope is a heading, not a prefix**. The
+ * generator writes a bullet per commit with its scope on each, so a release that touched
+ * accounts nine times printed "accounts:" nine times down the margin and read as a git
+ * log. Grouped (`groupByScope`), the scope is a chip and its notes follow it: one as a
+ * sentence beside the chip, several as a list under it. Exact repeats are dropped.
+ *
+ * A section's heading is the app's word for its key (`releaseNotes.sections`, from the
+ * provider or {@link labels}) whichever preset named it — "Features" and "Added" are both
+ * `added`, "New" in English — and a heading no preset writes ("Known issues") is shown as
+ * written rather than hidden behind a missing word. A section whose every item reads as
+ * nothing (a bare reference) is left out, and a release with no section shows its `body`.
+ * The sections keep the file's order, which the repository's `.versionrc` sets.
+ *
+ * The day is `YYYY-MM-DD` off the heading, printed the app's way: keksdose's dialog and
+ * page printed it raw until live #246 round 4, the last two dates in the app that
+ * followed no setting.
+ */
+export declare function ReleaseNotes({ release, frame, headingAs, formatDate, labels: labelsProp, className, ...rest }: ReleaseNotesProps): import("react").JSX.Element;

package/dist/components/release-notes.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { useDayFormatter } from "../lib/day-format.js";
+import { changelogSectionKey, groupByScope } from "../lib/changelog.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { Card, CardAction, CardHeader, CardTitle } from "./card.js";
+import { Chip } from "./chip.js";
+import { SectionLabel } from "./text.js";
+import { DEFAULT_RELEASE_NOTES_LABELS } from "./release-notes-labels.js";
+const BELOW = { h2: "h3", h3: "h4", h4: "h5" };
+function ReleaseNotes({
+  release,
+  frame = "card",
+  headingAs,
+  formatDate,
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("releaseNotes", DEFAULT_RELEASE_NOTES_LABELS, labelsProp);
+  const day = useDayFormatter(formatDate);
+  const level = headingAs ?? (frame === "card" ? "h2" : "h3");
+  const Heading = level;
+  const sections = release.sections.map((section) => {
+    const key = section.key !== void 0 ? section.key : changelogSectionKey(section.title);
+    return { title: key ? labels.sections[key] : section.title, groups: groupByScope(section.items) };
+  }).filter((section) => section.groups.length > 0);
+  const notes = /* @__PURE__ */ jsxs("div", { className: "space-y-3", "data-slot": "release-notes", children: [
+    sections.map((section, s) => (
+      // Two sections may share a title (a hand-written file), so the position keys it too.
+      /* @__PURE__ */ jsxs("section", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx(SectionLabel, { as: BELOW[level], children: section.title }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: section.groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "text-sm", "data-scope": group.scope ?? void 0, children: [
+          group.scope && // keksdose's square neutral chip, at the caption size it was drawn at.
+          /* @__PURE__ */ jsx(Chip, { size: "sm", shape: "square", className: "me-1.5 px-1.5 align-[0.05em] text-caption font-medium", children: group.scope }),
+          group.texts.length === 1 ? /* @__PURE__ */ jsx("span", { className: "text-secondary", children: group.texts[0] }) : /* @__PURE__ */ jsx("ul", { className: "mt-1 list-inside list-disc space-y-0.5 text-secondary", children: group.texts.map((text) => /* @__PURE__ */ jsx("li", { children: text }, text)) })
+        ] }, group.scope ?? "")) })
+      ] }, `${s}:${section.title}`)
+    )),
+    sections.length === 0 && release.body && /* @__PURE__ */ jsx("p", { className: "whitespace-pre-line text-sm text-secondary", children: release.body })
+  ] });
+  const date = release.date ? /* @__PURE__ */ jsx("time", { dateTime: release.date, children: day(release.date) }) : null;
+  if (frame === "plain") {
+    return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("space-y-2", className), "data-release": release.version, children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ jsx(Heading, { className: "text-sm font-semibold text-primary", children: labels.version(release.version) }),
+        date && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted", children: date })
+      ] }),
+      notes
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Card, { ...rest, padding: "md", className, "data-release": release.version, children: [
+    /* @__PURE__ */ jsxs(CardHeader, { children: [
+      /* @__PURE__ */ jsx(CardTitle, { as: level, className: "text-lg", children: labels.version(release.version) }),
+      date && /* @__PURE__ */ jsx(CardAction, { className: "self-baseline text-xs text-muted", children: date })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-2", children: notes })
+  ] });
+}
+export {
+  DEFAULT_RELEASE_NOTES_LABELS,
+  ReleaseNotes
+};
+//# sourceMappingURL=release-notes.js.map

package/dist/components/release-notes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/release-notes.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useDayFormatter } from \"../lib/day-format\";\nimport { changelogSectionKey, groupByScope } from \"../lib/changelog\";\nimport type { ChangelogItem, ChangelogSectionKey } from \"../lib/changelog\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\nimport { Card, CardAction, CardHeader, CardTitle } from \"./card\";\nimport { Chip } from \"./chip\";\nimport { SectionLabel } from \"./text\";\nimport { DEFAULT_RELEASE_NOTES_LABELS, type ReleaseNotesLabels } from \"./release-notes-labels\";\n\nexport { DEFAULT_RELEASE_NOTES_LABELS };\nexport type { ReleaseNotesLabels };\n\n/** One section as `parseChangelog` reads it, or as an app's backend sends it: the items\n *  may be the raw bullets (keksdose's) or parsed ones. */\nexport interface ReleaseNotesSection {\n  title: string;\n  /** Read from the title with `changelogSectionKey` when left out. */\n  key?: ChangelogSectionKey | null;\n  items: readonly (string | ChangelogItem)[];\n}\n\n/** One release: a `ChangelogRelease` from `parseChangelog`, or the same shape from a server. */\nexport interface ReleaseNotesRelease {\n  version: string;\n  /** `YYYY-MM-DD`, or none. */\n  date?: string | null;\n  sections: readonly ReleaseNotesSection[];\n  /** A hand-written release's prose, shown when it has no section. */\n  body?: string | null;\n}\n\nexport interface ReleaseNotesProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  release: ReleaseNotesRelease;\n  /**\n   * `card` (default): a card of its own with the version as its title and the day at its\n   * end — a changelog page's list of releases (keksdose's and kastlan's /changelog).\n   * `plain`: the same parts without the card, a quieter heading row — keksdose's what's-new\n   * dialog, which lists the releases since the last visit inside its own frame.\n   */\n  frame?: \"card\" | \"plain\";\n  /** The version's heading. Default `h2` on a card (the release list is the page's outline),\n   *  `h3` plain; the sections' headings are one level below. */\n  headingAs?: \"h2\" | \"h3\" | \"h4\";\n  /** The release day as the app writes it. Default the provider's `formatDate` (the app's\n   *  date preference), else the kit's medium date in the provider's locale. */\n  formatDate?: (date: string) => string;\n  labels?: LabelOverride<ReleaseNotesLabels>;\n}\n\nconst BELOW = { h2: \"h3\", h3: \"h4\", h4: \"h5\" } as const;\n\n/**\n * One release for a reader (0.55): its version, its day, and its sections with the notes\n * grouped by scope — the card keksdose (features/changelog/release-notes.tsx, on its\n * /changelog and in its what's-new dialog) and kastlan (features/changelog/pages/\n * changelog-page.tsx) each drew around their own parser, on the kit's `parseChangelog`\n * (kastlan reuse audit 2026-11-02, proposal 1).\n *\n * keksdose's layout, from feedback live #211: **the scope is a heading, not a prefix**. The\n * generator writes a bullet per commit with its scope on each, so a release that touched\n * accounts nine times printed \"accounts:\" nine times down the margin and read as a git\n * log. Grouped (`groupByScope`), the scope is a chip and its notes follow it: one as a\n * sentence beside the chip, several as a list under it. Exact repeats are dropped.\n *\n * A section's heading is the app's word for its key (`releaseNotes.sections`, from the\n * provider or {@link labels}) whichever preset named it — \"Features\" and \"Added\" are both\n * `added`, \"New\" in English — and a heading no preset writes (\"Known issues\") is shown as\n * written rather than hidden behind a missing word. A section whose every item reads as\n * nothing (a bare reference) is left out, and a release with no section shows its `body`.\n * The sections keep the file's order, which the repository's `.versionrc` sets.\n *\n * The day is `YYYY-MM-DD` off the heading, printed the app's way: keksdose's dialog and\n * page printed it raw until live #246 round 4, the last two dates in the app that\n * followed no setting.\n */\nexport function ReleaseNotes({\n  release,\n  frame = \"card\",\n  headingAs,\n  formatDate,\n  labels: labelsProp,\n  className,\n  ...rest\n}: ReleaseNotesProps) {\n  const labels = useKitLabels(\"releaseNotes\", DEFAULT_RELEASE_NOTES_LABELS, labelsProp);\n  const day = useDayFormatter(formatDate);\n  const level = headingAs ?? (frame === \"card\" ? \"h2\" : \"h3\");\n  const Heading = level;\n\n  const sections = release.sections\n    .map((section) => {\n      const key = section.key !== undefined ? section.key : changelogSectionKey(section.title);\n      return { title: key ? labels.sections[key] : section.title, groups: groupByScope(section.items) };\n    })\n    .filter((section) => section.groups.length > 0);\n\n  const notes = (\n    <div className=\"space-y-3\" data-slot=\"release-notes\">\n      {sections.map((section, s) => (\n        // Two sections may share a title (a hand-written file), so the position keys it too.\n        <section key={`${s}:${section.title}`} className=\"space-y-1.5\">\n          <SectionLabel as={BELOW[level]}>{section.title}</SectionLabel>\n          <div className=\"space-y-1.5\">\n            {section.groups.map((group) => (\n              <div key={group.scope ?? \"\"} className=\"text-sm\" data-scope={group.scope ?? undefined}>\n                {group.scope && (\n                  // keksdose's square neutral chip, at the caption size it was drawn at.\n                  <Chip size=\"sm\" shape=\"square\" className=\"me-1.5 px-1.5 align-[0.05em] text-caption font-medium\">\n                    {group.scope}\n                  </Chip>\n                )}\n                {/* One note reads as a sentence beside its chip; several read as a list\n                    under it. Always a list spent three lines saying one thing. */}\n                {group.texts.length === 1 ? (\n                  <span className=\"text-secondary\">{group.texts[0]}</span>\n                ) : (\n                  <ul className=\"mt-1 list-inside list-disc space-y-0.5 text-secondary\">\n                    {group.texts.map((text) => (\n                      <li key={text}>{text}</li>\n                    ))}\n                  </ul>\n                )}\n              </div>\n            ))}\n          </div>\n        </section>\n      ))}\n      {sections.length === 0 && release.body && (\n        <p className=\"whitespace-pre-line text-sm text-secondary\">{release.body}</p>\n      )}\n    </div>\n  );\n  const date = release.date ? <time dateTime={release.date}>{day(release.date)}</time> : null;\n\n  if (frame === \"plain\") {\n    return (\n      <div {...rest} className={cn(\"space-y-2\", className)} data-release={release.version}>\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <Heading className=\"text-sm font-semibold text-primary\">{labels.version(release.version)}</Heading>\n          {date && <span className=\"text-xs text-muted\">{date}</span>}\n        </div>\n        {notes}\n      </div>\n    );\n  }\n  return (\n    <Card {...rest} padding=\"md\" className={className} data-release={release.version}>\n      <CardHeader>\n        <CardTitle as={level} className=\"text-lg\">\n          {labels.version(release.version)}\n        </CardTitle>\n        {date && <CardAction className=\"self-baseline text-xs text-muted\">{date}</CardAction>}\n      </CardHeader>\n      <div className=\"mt-2\">{notes}</div>\n    </Card>\n  );\n}\n"],"mappings":";AAwGU,cAGI,YAHJ;AAvGV,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,qBAAqB,oBAAoB;AAElD,SAAS,oBAAoB;AAE7B,SAAS,MAAM,YAAY,YAAY,iBAAiB;AACxD,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,oCAA6D;AA0CtE,MAAM,QAAQ,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AA0BtC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAsB;AACpB,QAAM,SAAS,aAAa,gBAAgB,8BAA8B,UAAU;AACpF,QAAM,MAAM,gBAAgB,UAAU;AACtC,QAAM,QAAQ,cAAc,UAAU,SAAS,OAAO;AACtD,QAAM,UAAU;AAEhB,QAAM,WAAW,QAAQ,SACtB,IAAI,CAAC,YAAY;AAChB,UAAM,MAAM,QAAQ,QAAQ,SAAY,QAAQ,MAAM,oBAAoB,QAAQ,KAAK;AACvF,WAAO,EAAE,OAAO,MAAM,OAAO,SAAS,GAAG,IAAI,QAAQ,OAAO,QAAQ,aAAa,QAAQ,KAAK,EAAE;AAAA,EAClG,CAAC,EACA,OAAO,CAAC,YAAY,QAAQ,OAAO,SAAS,CAAC;AAEhD,QAAM,QACJ,qBAAC,SAAI,WAAU,aAAY,aAAU,iBAClC;AAAA,aAAS,IAAI,CAAC,SAAS;AAAA;AAAA,MAEtB,qBAAC,aAAsC,WAAU,eAC/C;AAAA,4BAAC,gBAAa,IAAI,MAAM,KAAK,GAAI,kBAAQ,OAAM;AAAA,QAC/C,oBAAC,SAAI,WAAU,eACZ,kBAAQ,OAAO,IAAI,CAAC,UACnB,qBAAC,SAA4B,WAAU,WAAU,cAAY,MAAM,SAAS,QACzE;AAAA,gBAAM;AAAA,UAEL,oBAAC,QAAK,MAAK,MAAK,OAAM,UAAS,WAAU,yDACtC,gBAAM,OACT;AAAA,UAID,MAAM,MAAM,WAAW,IACtB,oBAAC,UAAK,WAAU,kBAAkB,gBAAM,MAAM,CAAC,GAAE,IAEjD,oBAAC,QAAG,WAAU,yDACX,gBAAM,MAAM,IAAI,CAAC,SAChB,oBAAC,QAAe,kBAAP,IAAY,CACtB,GACH;AAAA,aAhBM,MAAM,SAAS,EAkBzB,CACD,GACH;AAAA,WAxBY,GAAG,CAAC,IAAI,QAAQ,KAAK,EAyBnC;AAAA,KACD;AAAA,IACA,SAAS,WAAW,KAAK,QAAQ,QAChC,oBAAC,OAAE,WAAU,8CAA8C,kBAAQ,MAAK;AAAA,KAE5E;AAEF,QAAM,OAAO,QAAQ,OAAO,oBAAC,UAAK,UAAU,QAAQ,MAAO,cAAI,QAAQ,IAAI,GAAE,IAAU;AAEvF,MAAI,UAAU,SAAS;AACrB,WACE,qBAAC,SAAK,GAAG,MAAM,WAAW,GAAG,aAAa,SAAS,GAAG,gBAAc,QAAQ,SAC1E;AAAA,2BAAC,SAAI,WAAU,6CACb;AAAA,4BAAC,WAAQ,WAAU,sCAAsC,iBAAO,QAAQ,QAAQ,OAAO,GAAE;AAAA,QACxF,QAAQ,oBAAC,UAAK,WAAU,sBAAsB,gBAAK;AAAA,SACtD;AAAA,MACC;AAAA,OACH;AAAA,EAEJ;AACA,SACE,qBAAC,QAAM,GAAG,MAAM,SAAQ,MAAK,WAAsB,gBAAc,QAAQ,SACvE;AAAA,yBAAC,cACC;AAAA,0BAAC,aAAU,IAAI,OAAO,WAAU,WAC7B,iBAAO,QAAQ,QAAQ,OAAO,GACjC;AAAA,MACC,QAAQ,oBAAC,cAAW,WAAU,oCAAoC,gBAAK;AAAA,OAC1E;AAAA,IACA,oBAAC,SAAI,WAAU,QAAQ,iBAAM;AAAA,KAC/B;AAEJ;","names":[]}

package/dist/components/select.js

@@ -3,7 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../lib/cn.js";
 import {
-  LockedReason,
+  LockFrame,
   mergeDescribedBy,
   useFieldError,
   useFieldHint,
@@ -76,7 +76,7 @@ function Select(props) {
     }
   } : { onMouseDown, onKeyDown, onChange };
   const boxClass = locked ? void 0 : className;
-  const withReason = (box) => locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: cn("block", className), children: box }) : box;
+  const withReason = (box) => /* @__PURE__ */ jsx(LockFrame, { lock, display: disabledReasonDisplay, className, children: box });
   if (label === void 0) {
     const select = /* @__PURE__ */ jsx(
       "select",

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactNode, Ref, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  LockedReason,\n  mergeDescribedBy,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport {\n  FIELD_BASE,\n  FIELD_FLOATING_PAD,\n  FIELD_INVALID,\n  FieldChevron,\n  FieldGroup,\n  FloatingField,\n  SELECT_MENU_DRESS,\n  SELECT_SM,\n  fieldBelow,\n} from \"./field-base\";\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\">, FieldHelpProps {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain\n   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field\n   *  like every other field's hint, attached through `aria-describedby`: the label\n   *  line is 11px of strip shared with the label, and a sentence placed there was\n   *  set in the value's type on top of both the label and the value. On an\n   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,\n   *  outside the box. Since 0.34 a FieldHint is the caption at Large and on a touch\n   *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a \"?\". Beside a\n   *  `help` (0.36) the hint is the caption at every size: the help's \"?\" is the only one. */\n  hint?: ReactNode;\n  /**\n   * `\"sm\"`: a 28px, 12px-type select for a toolbar or a table header, where the\n   * 36px field stands a head taller than the buttons beside it. `\"md\"` (default)\n   * is the field every form uses. Unlabelled selects only — a floating label needs\n   * the tall box to float in, so a labelled Select ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native attribute (the rows of a list box) and is passed\n   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as\n   * with `multiple`) the browser draws a list box, and the Select drops its chevron\n   * and the end padding reserved for it.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box\n   *  the chevron is positioned against — so it could set a width and nothing\n   *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */\n  selectClassName?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select\n   * that SAVES on change (a role picker in a members table, a status in a row). keksdose\n   * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which\n   * took the field out of the tab order so the reason never reached a keyboard.\n   *\n   * With a reason the select is `aria-disabled` instead — still focusable, still showing\n   * its value — its list does not open (pointer and keys are swallowed, Tab and Escape\n   * excepted), `onChange` is never called, and the reason is a line under the field at\n   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n   * and on `aria-describedby`. It wears the settled look of a disabled field and drops\n   * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.\n   *\n   * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after\n   * the swallowed change. A touch platform's own picker may still open; nothing it picks\n   * is kept or reported.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3; a\n   * {@link CommitScope} since 0.33.\n   */\n  commit?: CommitScope;\n  /** The `<select>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\n/** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every\n *  other key would open the list or step the value. */\nconst LOCKED_SELECT_KEYS = new Set([\"Tab\", \"Escape\", \"Shift\"]);\n\n/** FIELD_BASE's `disabled:` look, for a select that is locked without being `disabled`\n *  (the `:disabled` variants cannot match it). */\nconst FIELD_LOCKED = \"cursor-not-allowed bg-surface-2 text-muted\";\n\nexport function Select(props: SelectProps) {\n  const {\n    ref,\n    className,\n    label,\n    id,\n    children,\n    invalid,\n    error,\n    hint: hintProp,\n    help,\n    size,\n    selectClassName,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onMouseDown,\n    onKeyDown,\n    onChange,\n    ...rest\n  } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Only a number reaches the DOM; the two words are this component's own.\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all\n  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the\n  // chevron was centred on a box several rows tall, sat on top of the rows' text\n  // at the end edge, and `pe-9` clipped every option nine units early. A list box\n  // gets the plain field instead — its own native scroll, no chevron, even padding.\n  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);\n  const small = size === \"sm\" && label === undefined;\n  const fieldId = id ?? generated;\n  // Text is a caption under the field; a FieldHint rides the label line — and at Large\n  // and on a touch screen is its words, a caption like any text (§4; a HelpPopover stays\n  // on the label line, §10.23). See `hint` above. Through useFieldHint since 0.34, not a\n  // copy of its rule (DUP-2, refactor audit 2026-10).\n  const hintParts = useFieldHint(hintProp, rest[\"aria-describedby\"], { help, name: label ?? rest[\"aria-label\"] });\n  const hint = hintParts.labelHint;\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // The caption goes in BEFORE the error — the standing advice first, the news\n    // second, the order useFieldError keeps for a caller's own description. A lock's\n    // reason sits between the two.\n    mergeDescribedBy(hintParts.describedBy, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const below = fieldBelow(hintParts, null, errorEl);\n  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch\n  // in from the end border and matches both themes — feedback #223. A DISABLED\n  // select has no menu to drop, so it drops the chevron too: the arrow is the one\n  // thing on the control that promises a choice (Keksdose dev#474, where the\n  // account type became read-only and still looked exactly like a picker). A locked\n  // one has no menu either.\n  const chevron =\n    rest.disabled || listBox || locked ? null : <FieldChevron className={small ? \"end-1.5 size-3.5\" : undefined} />;\n  // `pe-9` is the room the chevron takes; a list box has none to make room for.\n  //\n  // A list box's height is `size` rows plus its padding, but its rows are clipped at\n  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next\n  // row through the bottom padding: `size={4}` drew four and a half. The vertical room\n  // moves onto the rows instead (option padding counts toward the row height the\n  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`\n  // whole rows, at any width.\n  const dress = listBox ? \"overflow-y-auto [&_option]:py-1\" : SELECT_MENU_DRESS;\n  // Locked: focusable, but nothing opens the list or moves the value, and nothing is\n  // reported. The no-op `onChange` keeps a controlled select's value where React put\n  // it (and keeps React from warning about a `value` with no handler).\n  const interaction = locked\n    ? {\n        disabled: undefined,\n        \"aria-disabled\": true as const,\n        onMouseDown: (e: MouseEvent<HTMLSelectElement>) => e.preventDefault(),\n        onKeyDown: (e: KeyboardEvent<HTMLSelectElement>) => {\n          if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();\n        },\n        onChange: () => {},\n      }\n    : { onMouseDown, onKeyDown, onChange };\n  // While locked the field sits in the reason's frame (the line, or the Tooltip), which\n  // becomes the outermost box — so `className` (a width, a grid cell) moves onto it, and\n  // the form keeps its layout. `block` so a full-width field stays full width inside it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) =>\n    locked ? (\n      <LockedReason lock={lock} display={disabledReasonDisplay} className={cn(\"block\", className)}>\n        {box}\n      </LockedReason>\n    ) : (\n      box\n    );\n  if (label === undefined) {\n    const select = (\n      <select\n        ref={ref}\n        // `id` is destructured out of the props to feed `fieldId`, and this branch\n        // never put it back — so an UNLABELLED Select swallowed it and the\n        // consumer's own `<label for=\"…\">` pointed at nothing. The control stayed\n        // in the tab order with no accessible name at all: reachable, and silent\n        // when it was reached. Input and Textarea both forward it here; this is\n        // the third one doing the same thing.\n        id={id}\n        size={nativeSize}\n        {...rest}\n        {...interaction}\n        // OR-ed with the spread for the reason spelled out on Input's copy: this\n        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand\n        // to a Select — which is what a caller does when the validity is\n        // `\"grammar\"` or `\"spelling\"`, or when the paint is not wanted — had the\n        // attribute silently dropped. Input has never done that.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          FIELD_BASE,\n          dress,\n          listBox && \"py-0\",\n          small && SELECT_SM,\n          locked && FIELD_LOCKED,\n          selectClassName,\n          isInvalid && FIELD_INVALID,\n        )}\n      >\n        {children}\n      </select>\n    );\n    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named\n    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`\n    // without a trace, so the \"?\" a caller passed never rendered and a test looking\n    // for its button found none. It goes at the end of the field instead, outside the\n    // box, as the label line's own hint goes at the end of the label.\n    if (hint !== undefined) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <div className={cn(\"flex items-center gap-1.5\", boxClass)}>\n              <div className=\"relative min-w-0 flex-1\">\n                {select}\n                {chevron}\n              </div>\n              <span className=\"flex shrink-0 items-center\">{hint}</span>\n            </div>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <div className={cn(\"relative\", boxClass)}>\n            {select}\n            {chevron}\n          </div>,\n        )}\n      </FieldGroup>\n    );\n  }\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField className={boxClass} htmlFor={fieldId} label={label} staticLabel hint={hint}>\n          <select\n            ref={ref}\n            id={fieldId}\n            size={nativeSize}\n            {...rest}\n            {...interaction}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            className={cn(\n              FIELD_BASE,\n              // The floated label takes the top strip of a list box too, so its first\n              // row starts under the label rather than behind it. No bottom padding — see\n              // `dress`.\n              // At Large the label stands above the field (§10.17): no strip.\n              listBox ? \"pt-5 pb-0 large:pt-2\" : FIELD_FLOATING_PAD,\n              \"peer\",\n              dress,\n              locked && FIELD_LOCKED,\n              selectClassName,\n              isInvalid && FIELD_INVALID,\n            )}\n          >\n            {children}\n          </select>\n          {chevron}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/select.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { KeyboardEvent, MouseEvent, ReactNode, Ref, SelectHTMLAttributes } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport type { CommitScope } from \"./write-lock\";\nimport {\n  LockFrame,\n  mergeDescribedBy,\n  type DisabledReasonDisplay,\n  type FieldHelpProps,\n  useFieldError,\n  useFieldHint,\n  useLockReason,\n} from \"./field-parts\";\nimport {\n  FIELD_BASE,\n  FIELD_FLOATING_PAD,\n  FIELD_INVALID,\n  FieldChevron,\n  FieldGroup,\n  FloatingField,\n  SELECT_MENU_DRESS,\n  SELECT_SM,\n  fieldBelow,\n} from \"./field-base\";\n\nexport interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, \"size\">, FieldHelpProps {\n  label?: ReactNode;\n  /** See {@link Input}'s `invalid`. */\n  invalid?: boolean;\n  /** See {@link Input}'s `error`. */\n  error?: ReactNode;\n  /** A {@link FieldHint} for the label line — see {@link FloatingField}. Plain\n   *  TEXT (a string or a number) is a caption instead, and goes UNDER the field\n   *  like every other field's hint, attached through `aria-describedby`: the label\n   *  line is 11px of strip shared with the label, and a sentence placed there was\n   *  set in the value's type on top of both the label and the value. On an\n   *  UNLABELLED Select (no label line) a FieldHint sits at the field's end edge,\n   *  outside the box. Since 0.34 a FieldHint is the caption at Large and on a touch\n   *  screen, as on Input (`useInlineHint`); a `HelpPopover` stays a \"?\". Beside a\n   *  `help` (0.36) the hint is the caption at every size: the help's \"?\" is the only one. */\n  hint?: ReactNode;\n  /**\n   * `\"sm\"`: a 28px, 12px-type select for a toolbar or a table header, where the\n   * 36px field stands a head taller than the buttons beside it. `\"md\"` (default)\n   * is the field every form uses. Unlabelled selects only — a floating label needs\n   * the tall box to float in, so a labelled Select ignores `\"sm\"`.\n   *\n   * A NUMBER is still the native attribute (the rows of a list box) and is passed\n   * straight through, so the one HTML meaning of `size` keeps working. Above 1 (as\n   * with `multiple`) the browser draws a list box, and the Select drops its chevron\n   * and the end padding reserved for it.\n   */\n  size?: \"sm\" | \"md\" | number;\n  /** Classes for the `<select>` itself. `className` styles the WRAPPER — the box\n   *  the chevron is positioned against — so it could set a width and nothing\n   *  else; this is the way to the element. See {@link Input}'s `inputClassName`. */\n  selectClassName?: string;\n  /**\n   * Why the choice cannot be changed — {@link Button}'s `disabledReason`, for a select\n   * that SAVES on change (a role picker in a members table, a status in a row). keksdose\n   * K3: those sat inside a hand-rolled `SaveGuard` that forced a native `disabled`, which\n   * took the field out of the tab order so the reason never reached a keyboard.\n   *\n   * With a reason the select is `aria-disabled` instead — still focusable, still showing\n   * its value — its list does not open (pointer and keys are swallowed, Tab and Escape\n   * excepted), `onChange` is never called, and the reason is a line under the field at\n   * Large and on a touch screen, else in the kit {@link Tooltip} (`disabledReasonDisplay`),\n   * and on `aria-describedby`. It wears the settled look of a disabled field and drops\n   * its chevron, as a disabled Select does (dev#474). It wins over `disabled`.\n   *\n   * Use it CONTROLLED (`value` + `onChange`): React puts a controlled value back after\n   * the swallowed change. A touch platform's own picker may still open; nothing it picks\n   * is kept or reported.\n   */\n  disabledReason?: ReactNode;\n  /**\n   * Where the reason shows — {@link Button}'s `disabledReasonDisplay`: by default a line\n   * under the field at Large and on a touch screen, the tooltip otherwise (§4 \"No fact\n   * only in a tooltip\"; DUP-3, refactor audit 2026-10).\n   */\n  disabledReasonDisplay?: DisabledReasonDisplay;\n  /**\n   * This select COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is\n   * locked the `disabledReason` way with the lock's reason (which wins over its own).\n   * No provider, or an unlocked one: no effect. Button's `commit`, for keksdose K3; a\n   * {@link CommitScope} since 0.33.\n   */\n  commit?: CommitScope;\n  /** The `<select>`. A React 19 ref prop since 0.34 — see {@link InputProps.ref}. */\n  ref?: Ref<HTMLSelectElement>;\n}\n\n/** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every\n *  other key would open the list or step the value. */\nconst LOCKED_SELECT_KEYS = new Set([\"Tab\", \"Escape\", \"Shift\"]);\n\n/** FIELD_BASE's `disabled:` look, for a select that is locked without being `disabled`\n *  (the `:disabled` variants cannot match it). */\nconst FIELD_LOCKED = \"cursor-not-allowed bg-surface-2 text-muted\";\n\nexport function Select(props: SelectProps) {\n  const {\n    ref,\n    className,\n    label,\n    id,\n    children,\n    invalid,\n    error,\n    hint: hintProp,\n    help,\n    size,\n    selectClassName,\n    disabledReason,\n    disabledReasonDisplay,\n    commit,\n    onMouseDown,\n    onKeyDown,\n    onChange,\n    ...rest\n  } = props;\n  // See Input's `reserve`.\n  const reserve = \"error\" in props || \"hint\" in props || \"showCount\" in props;\n  const generated = useId();\n  const lock = useLockReason(commit, disabledReason);\n  const locked = lock.locked;\n  // Only a number reaches the DOM; the two words are this component's own.\n  const nativeSize = typeof size === \"number\" ? size : undefined;\n  // A numeric size above 1 (or `multiple`) makes the browser draw a LIST BOX — all\n  // the rows in the field, no menu to drop. The dropdown dress did not fit it: the\n  // chevron was centred on a box several rows tall, sat on top of the rows' text\n  // at the end edge, and `pe-9` clipped every option nine units early. A list box\n  // gets the plain field instead — its own native scroll, no chevron, even padding.\n  const listBox = (nativeSize !== undefined && nativeSize > 1) || Boolean(rest.multiple);\n  const small = size === \"sm\" && label === undefined;\n  const fieldId = id ?? generated;\n  // Text is a caption under the field; a FieldHint rides the label line — and at Large\n  // and on a touch screen is its words, a caption like any text (§4; a HelpPopover stays\n  // on the label line, §10.23). See `hint` above. Through useFieldHint since 0.34, not a\n  // copy of its rule (DUP-2, refactor audit 2026-10).\n  const hintParts = useFieldHint(hintProp, rest[\"aria-describedby\"], { help, name: label ?? rest[\"aria-label\"] });\n  const hint = hintParts.labelHint;\n  const { isInvalid, describedBy, errorEl } = useFieldError(\n    error,\n    invalid,\n    // The caption goes in BEFORE the error — the standing advice first, the news\n    // second, the order useFieldError keeps for a caller's own description. A lock's\n    // reason sits between the two.\n    mergeDescribedBy(hintParts.describedBy, locked && lock.reasonId),\n    rest[\"aria-invalid\"],\n  );\n  const below = fieldBelow(hintParts, null, errorEl);\n  // Custom chevron (native arrow hidden via appearance-none) so it sits a touch\n  // in from the end border and matches both themes — feedback #223. A DISABLED\n  // select has no menu to drop, so it drops the chevron too: the arrow is the one\n  // thing on the control that promises a choice (Keksdose dev#474, where the\n  // account type became read-only and still looked exactly like a picker). A locked\n  // one has no menu either.\n  const chevron =\n    rest.disabled || listBox || locked ? null : <FieldChevron className={small ? \"end-1.5 size-3.5\" : undefined} />;\n  // `pe-9` is the room the chevron takes; a list box has none to make room for.\n  //\n  // A list box's height is `size` rows plus its padding, but its rows are clipped at\n  // the PADDING edge, not the content edge — so FIELD_BASE's `pb-2` showed the next\n  // row through the bottom padding: `size={4}` drew four and a half. The vertical room\n  // moves onto the rows instead (option padding counts toward the row height the\n  // browser sizes the box by), and the box keeps no bottom padding: exactly `size`\n  // whole rows, at any width.\n  const dress = listBox ? \"overflow-y-auto [&_option]:py-1\" : SELECT_MENU_DRESS;\n  // Locked: focusable, but nothing opens the list or moves the value, and nothing is\n  // reported. The no-op `onChange` keeps a controlled select's value where React put\n  // it (and keeps React from warning about a `value` with no handler).\n  const interaction = locked\n    ? {\n        disabled: undefined,\n        \"aria-disabled\": true as const,\n        onMouseDown: (e: MouseEvent<HTMLSelectElement>) => e.preventDefault(),\n        onKeyDown: (e: KeyboardEvent<HTMLSelectElement>) => {\n          if (!LOCKED_SELECT_KEYS.has(e.key) && !e.ctrlKey && !e.metaKey) e.preventDefault();\n        },\n        onChange: () => {},\n      }\n    : { onMouseDown, onKeyDown, onChange };\n  // While locked the field sits in the reason's frame (the line, or the Tooltip), which\n  // becomes the outermost box — so `className` (a width, a grid cell) moves onto it, and\n  // the form keeps its layout. `block` so a full-width field stays full width inside it.\n  const boxClass = locked ? undefined : className;\n  const withReason = (box: ReactNode) => (\n    <LockFrame lock={lock} display={disabledReasonDisplay} className={className}>\n      {box}\n    </LockFrame>\n  );\n  if (label === undefined) {\n    const select = (\n      <select\n        ref={ref}\n        // `id` is destructured out of the props to feed `fieldId`, and this branch\n        // never put it back — so an UNLABELLED Select swallowed it and the\n        // consumer's own `<label for=\"…\">` pointed at nothing. The control stayed\n        // in the tab order with no accessible name at all: reachable, and silent\n        // when it was reached. Input and Textarea both forward it here; this is\n        // the third one doing the same thing.\n        id={id}\n        size={nativeSize}\n        {...rest}\n        {...interaction}\n        // OR-ed with the spread for the reason spelled out on Input's copy: this\n        // branch wrote `invalid || undefined`, so passing `aria-invalid` by hand\n        // to a Select — which is what a caller does when the validity is\n        // `\"grammar\"` or `\"spelling\"`, or when the paint is not wanted — had the\n        // attribute silently dropped. Input has never done that.\n        aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n        aria-describedby={describedBy}\n        className={cn(\n          FIELD_BASE,\n          dress,\n          listBox && \"py-0\",\n          small && SELECT_SM,\n          locked && FIELD_LOCKED,\n          selectClassName,\n          isInvalid && FIELD_INVALID,\n        )}\n      >\n        {children}\n      </select>\n    );\n    // A FieldHint with no label line to ride (0.15.5 P8): an unlabelled Select — named\n    // by `aria-label` or a `<label>` of the caller's — dropped a non-text `hint`\n    // without a trace, so the \"?\" a caller passed never rendered and a test looking\n    // for its button found none. It goes at the end of the field instead, outside the\n    // box, as the label line's own hint goes at the end of the label.\n    if (hint !== undefined) {\n      return (\n        <FieldGroup errorEl={below} reserve={reserve}>\n          {withReason(\n            <div className={cn(\"flex items-center gap-1.5\", boxClass)}>\n              <div className=\"relative min-w-0 flex-1\">\n                {select}\n                {chevron}\n              </div>\n              <span className=\"flex shrink-0 items-center\">{hint}</span>\n            </div>,\n          )}\n        </FieldGroup>\n      );\n    }\n    return (\n      <FieldGroup errorEl={below} reserve={reserve}>\n        {withReason(\n          <div className={cn(\"relative\", boxClass)}>\n            {select}\n            {chevron}\n          </div>,\n        )}\n      </FieldGroup>\n    );\n  }\n  return (\n    <FieldGroup errorEl={below} reserve={reserve}>\n      {withReason(\n        <FloatingField className={boxClass} htmlFor={fieldId} label={label} staticLabel hint={hint}>\n          <select\n            ref={ref}\n            id={fieldId}\n            size={nativeSize}\n            {...rest}\n            {...interaction}\n            aria-invalid={isInvalid || rest[\"aria-invalid\"] || undefined}\n            aria-describedby={describedBy}\n            className={cn(\n              FIELD_BASE,\n              // The floated label takes the top strip of a list box too, so its first\n              // row starts under the label rather than behind it. No bottom padding — see\n              // `dress`.\n              // At Large the label stands above the field (§10.17): no strip.\n              listBox ? \"pt-5 pb-0 large:pt-2\" : FIELD_FLOATING_PAD,\n              \"peer\",\n              dress,\n              locked && FIELD_LOCKED,\n              selectClassName,\n              isInvalid && FIELD_INVALID,\n            )}\n          >\n            {children}\n          </select>\n          {chevron}\n        </FloatingField>,\n      )}\n    </FieldGroup>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/series-chart-labels.d.ts

@@ -14,5 +14,14 @@ export interface SeriesChartLabels {
      *  periods — one tab stop, arrow keys between them; buttons with `onPointClick`, and
      *  since 0.52 images to read without. */
     points: string;
+    /**
+     * The chart's name when the caller passes no `aria-label` and a y axis is titled (0.55,
+     * Kurvenschmiede 0.52 adoption): "Rack force (N) over Travel (mm)". `ordinates` is the
+     * titles of the drawn y axes, already joined as a list in the chart's locale
+     * (`Intl.ListFormat`: "Force (N) and Speed (mm/s)"); `abscissa` the x axis' title, absent
+     * on a chart that leaves it to another — an upper chart of a stack sharing one x window,
+     * named by its ordinates alone.
+     */
+    nameFromAxes: (ordinates: string, abscissa?: string) => string;
 }
 export declare const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels;

package/dist/components/series-chart-labels.js

@@ -4,7 +4,9 @@ const DEFAULT_SERIES_CHART_LABELS = {
   zoomHint: "Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.",
   empty: "No data",
   legend: "Series",
-  points: "Chart values"
+  points: "Chart values",
+  // Kurvenschmiede's `common.chart_name`, "{{y}} over {{x}}", as the catalogues take theirs.
+  nameFromAxes: (ordinates, abscissa) => abscissa ? `${ordinates} over ${abscissa}` : ordinates
 };
 export {
   DEFAULT_SERIES_CHART_LABELS

package/dist/components/series-chart-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/series-chart-labels.ts"],"sourcesContent":["// All user-facing strings for the series chart family — `SeriesChart`, its drag-to-zoom\n// layer and `ToggleLegend` — as the `seriesChart` namespace of `<UiKitProvider labels>`,\n// and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, so the label registry (src/i18n) can\n// import the defaults without pulling the chart library in behind them.\n\nexport interface SeriesChartLabels {\n  /** The button that puts a zoomed chart back to its full extent. Visible text. */\n  resetZoom: string;\n  /** The drag-to-zoom gesture, said at the end of a zoomable chart's description (the\n   *  figure's `aria-describedby`; until 0.52 the name of the drag surface, an\n   *  `application` nothing could focus). It is the only place the gesture is explained,\n   *  so it says how the drag is read and how to undo it. */\n  zoomHint: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */\n  legend: string;\n  /** Accessible name of the group of keyboard stops a chart lays over its bars or\n   *  periods — one tab stop, arrow keys between them; buttons with `onPointClick`, and\n   *  since 0.52 images to read without. */\n  points: string;\n}\n\nexport const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {\n  resetZoom: \"Reset zoom\",\n  zoomHint:\n    \"Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.\",\n  empty: \"No data\",\n  legend: \"Series\",\n  points: \"Chart values\",\n};\n"],"mappings":";AAyBO,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UACE;AAAA,EACF,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV;","names":[]}
+{"version":3,"sources":["../../src/components/series-chart-labels.ts"],"sourcesContent":["// All user-facing strings for the series chart family — `SeriesChart`, its drag-to-zoom\n// layer and `ToggleLegend` — as the `seriesChart` namespace of `<UiKitProvider labels>`,\n// and per chart the `labels` prop over that.\n//\n// A module of its own, with no recharts in it, so the label registry (src/i18n) can\n// import the defaults without pulling the chart library in behind them.\n\nexport interface SeriesChartLabels {\n  /** The button that puts a zoomed chart back to its full extent. Visible text. */\n  resetZoom: string;\n  /** The drag-to-zoom gesture, said at the end of a zoomable chart's description (the\n   *  figure's `aria-describedby`; until 0.52 the name of the drag surface, an\n   *  `application` nothing could focus). It is the only place the gesture is explained,\n   *  so it says how the drag is read and how to undo it. */\n  zoomHint: string;\n  /** What a chart with nothing to draw says, when the caller passes no `empty`. */\n  empty: string;\n  /** Accessible name of a `ToggleLegend` — a group of switches, one per series. */\n  legend: string;\n  /** Accessible name of the group of keyboard stops a chart lays over its bars or\n   *  periods — one tab stop, arrow keys between them; buttons with `onPointClick`, and\n   *  since 0.52 images to read without. */\n  points: string;\n  /**\n   * The chart's name when the caller passes no `aria-label` and a y axis is titled (0.55,\n   * Kurvenschmiede 0.52 adoption): \"Rack force (N) over Travel (mm)\". `ordinates` is the\n   * titles of the drawn y axes, already joined as a list in the chart's locale\n   * (`Intl.ListFormat`: \"Force (N) and Speed (mm/s)\"); `abscissa` the x axis' title, absent\n   * on a chart that leaves it to another — an upper chart of a stack sharing one x window,\n   * named by its ordinates alone.\n   */\n  nameFromAxes: (ordinates: string, abscissa?: string) => string;\n}\n\nexport const DEFAULT_SERIES_CHART_LABELS: SeriesChartLabels = {\n  resetZoom: \"Reset zoom\",\n  zoomHint:\n    \"Drag to zoom: a roughly square selection zooms both axes, a long thin one only its own. Double-click to reset.\",\n  empty: \"No data\",\n  legend: \"Series\",\n  points: \"Chart values\",\n  // Kurvenschmiede's `common.chart_name`, \"{{y}} over {{x}}\", as the catalogues take theirs.\n  nameFromAxes: (ordinates, abscissa) => (abscissa ? `${ordinates} over ${abscissa}` : ordinates),\n};\n"],"mappings":";AAkCO,MAAM,8BAAiD;AAAA,EAC5D,WAAW;AAAA,EACX,UACE;AAAA,EACF,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA;AAAA,EAER,cAAc,CAAC,WAAW,aAAc,WAAW,GAAG,SAAS,SAAS,QAAQ,KAAK;AACvF;","names":[]}

package/dist/components/series-chart.d.ts

@@ -574,6 +574,11 @@ export interface SeriesChartProps<TRow extends object = object> {
      * The chart's name. The chart is a `role="figure"` (0.52, refactor audit 2026-10-30,
      * DSP-5), and a figure is found and told apart by its name — "Net worth", "Load over
      * travel". Its values are read stop by stop (see {@link SeriesChartProps.onPointClick}).
+     *
+     * Default (0.55, Kurvenschmiede 0.52 adoption): the axes' titles — the drawn y axes' as
+     * a list in the chart's locale, over the abscissa's: "Rack force (N) over Travel (mm)"
+     * (`seriesChart.nameFromAxes`). A chart without an x title — an upper chart of a stack —
+     * is named by its ordinates alone; one without a titled y axis has no name, as before.
      */
     "aria-label"?: string;
     /**

package/dist/components/series-chart.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import {
   Area,
   Bar,
@@ -71,7 +71,7 @@ import {
 import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { useTextSize } from "../theme/text-size.js";
 import { chartHeightProps } from "./chart-height.js";
-import { useChartEdge, useEdgesInForce } from "./chart-edge.js";
+import { useChartShade, useEdgesInForce } from "./chart-edge.js";
 import { cn } from "../lib/cn.js";
 import { formatWithMinus } from "../lib/minus.js";
 function resolveTooltipPlacement(own, fromProvider, phone) {
@@ -102,6 +102,12 @@ function withUnit(label, unit) {
     ")"
   ] });
 }
+function axesName(axes, abscissa, locale, nameFromAxes) {
+  const titles = axes.flatMap((axis) => !axis.hide && axis.title ? [axis.title] : []);
+  if (titles.length === 0) return void 0;
+  const ordinates = new Intl.ListFormat(locale, { type: "conjunction" }).format(titles);
+  return nameFromAxes(ordinates, abscissa || void 0);
+}
 function seriesLegendEntries(series, { axes, budgeted } = {}) {
   const undrawn = /* @__PURE__ */ new Map();
   for (const axis of axes ?? []) {
@@ -131,12 +137,7 @@ const LINE_WIDTH = 2;
 const STEP_WIDTH = 1.5;
 const BAR_RADIUS = [3, 3, 0, 0];
 const ALL_STOPS_UP_TO = 100;
-function focusedBarShape(index) {
-  return function FocusedBar(props) {
-    const focused = props.originalDataIndex === index;
-    return /* @__PURE__ */ jsx(Rectangle, { ...props, ...focused ? { stroke: "var(--text-primary)", strokeWidth: 2 } : {} });
-  };
-}
+const FOCUSED_BAR = { stroke: "var(--text-primary)", strokeWidth: 2 };
 const MARKER_LABEL_SIZE = 11;
 const REFERENCE_LABEL_SIZE = 10;
 function MarkerLabel({ viewBox, value }) {
@@ -170,17 +171,70 @@ function MarkerLabel({ viewBox, value }) {
     }
   );
 }
+function createStopStore() {
+  let stop = 0;
+  let focus;
+  const listeners = /* @__PURE__ */ new Set();
+  const emit = () => listeners.forEach((onChange) => onChange());
+  return {
+    stop: () => stop,
+    focus: () => focus,
+    subscribe: (onChange) => {
+      listeners.add(onChange);
+      return () => listeners.delete(onChange);
+    },
+    focused: (at) => {
+      if (stop === at && focus === at) return;
+      stop = at;
+      focus = at;
+      emit();
+    },
+    blurred: () => {
+      if (focus === void 0) return;
+      focus = void 0;
+      emit();
+    }
+  };
+}
+function useFocusedStop(keys, stops) {
+  const at = useSyncExternalStore(keys.subscribe, keys.focus, keys.focus);
+  return at === void 0 ? void 0 : stops[at];
+}
+function StopTooltip({
+  keys,
+  stops,
+  ...props
+}) {
+  const focused = useFocusedStop(keys, stops);
+  return /* @__PURE__ */ jsx(ChartTooltip, { ...props, defaultIndex: focused?.index });
+}
+function StopRect({
+  keys,
+  stops,
+  seriesKey: seriesKey2,
+  ...props
+}) {
+  const focused = useSyncExternalStore(
+    keys.subscribe,
+    () => {
+      const at = keys.focus();
+      const stop = at === void 0 ? void 0 : stops[at];
+      return stop !== void 0 && stop.key === seriesKey2 && stop.index === props.originalDataIndex;
+    },
+    () => false
+  );
+  return /* @__PURE__ */ jsx(Rectangle, { ...props, ...focused ? FOCUSED_BAR : {} });
+}
 function PointKeys({
   stops,
-  current,
+  keys,
   label,
-  onFocusStop,
-  onBlurStops,
   onPick
 }) {
   const plot = usePlotArea();
   const scale = useXAxisScale();
   const refs = useRef([]);
+  const current = Math.min(useSyncExternalStore(keys.subscribe, keys.stop, keys.stop), stops.length - 1);
   if (!plot || !scale || plot.width <= 0 || plot.height <= 0) return null;
   const onKeyDown = (at) => (event) => {
     const stop = stops[at];
@@ -227,11 +281,11 @@ function PointKeys({
           stop.key === void 0 && "focus-visible:stroke-[var(--brand)]"
         ),
         onFocus: (event) => {
-          onFocusStop(at);
+          keys.focused(at);
           pointAt(event.currentTarget, (x0 + x1) / 2, middle);
         },
         onBlur: (event) => {
-          onBlurStops();
+          keys.blurred();
           const next = event.relatedTarget;
           if (!next || !refs.current.includes(next)) {
             pointAt(event.currentTarget, left - 1, middle);
@@ -253,6 +307,7 @@ function pointAt(within, x, y) {
     new MouseEvent("mousemove", { bubbles: true, clientX: box.left + x * scaleX, clientY: box.top + y * scaleY })
   );
 }
+const SeriesPlotView = memo(SeriesPlot);
 function SeriesPlot({
   model,
   xAxis,
@@ -284,12 +339,11 @@ function SeriesPlot({
   const locale = useKitLocale(localeProp);
   const number = useDefaultFormat(localeProp);
   const { scale } = useTextSize();
-  const edgeFor = useChartEdge();
+  const edgeFor = useChartShade();
   const edges = useEdgesInForce("auto");
   const ticksAim = tickTarget(scale);
   const grow = (px) => scale === 1 ? px : Math.round(px * scale);
-  const [keyStop, setKeyStop] = useState(0);
-  const [keyFocus, setKeyFocus] = useState(void 0);
+  const [keys] = useState(createStopStore);
   const phone = useBreakpoint("max-sm", false);
   const placement = resolveTooltipPlacement(tooltip?.placement, useKitChartTooltipPlacement(), phone);
   const [readout, setReadout] = useState(null);
@@ -315,9 +369,9 @@ function SeriesPlot({
   const [windowFrom, windowTo] = zoom?.xDomain ?? [void 0, void 0];
   const thin = useMemo(() => {
     if (model.kind === "category" || maxRows === void 0) return void 0;
-    const keys = thinKeys ? thinKeys.split("\n") : [];
+    const keys2 = thinKeys ? thinKeys.split("\n") : [];
     const window = windowFrom !== void 0 && windowTo !== void 0 ? [windowFrom, windowTo] : void 0;
-    const kept = thinnedRows(model.rows, model.plotKey, keys, maxRows, window);
+    const kept = thinnedRows(model.rows, model.plotKey, keys2, maxRows, window);
     if (!kept) return void 0;
     return {
       kept,
@@ -335,7 +389,8 @@ function SeriesPlot({
   const drawable = model.source.length > 0 && series.length > 0;
   const spoken = [description, drawable && zoom?.layer ? labels.zoomHint : void 0].filter(Boolean).join(" ");
   const about = useFigureDescription(spoken || void 0);
-  const figure = { role: "figure", "aria-label": ariaLabel, "aria-describedby": about.describedBy };
+  const chartName = ariaLabel ?? axesName(axes, xAxis.title, locale, labels.nameFromAxes);
+  const figure = { role: "figure", "aria-label": chartName, "aria-describedby": about.describedBy };
   if (!drawable) {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -484,7 +539,6 @@ function SeriesPlot({
       }
     });
   }
-  const focusedStop = keyFocus === void 0 ? void 0 : stops[keyFocus];
   const dotFor = (entry) => {
     const want = entry.dot;
     if (!want) return false;
@@ -531,7 +585,7 @@ function SeriesPlot({
   const chart = /* @__PURE__ */ jsx(
     ChartContainer,
     {
-      ...inRow ? {} : { role: "figure", "aria-label": ariaLabel, description: spoken || void 0 },
+      ...inRow ? {} : { role: "figure", "aria-label": chartName, description: spoken || void 0 },
       ref: setBox,
       "data-axis-budget": budgeted.length ? budgetKey.replace(/\n/g, " ") : void 0,
       "data-thinned": thin ? `${thin.kept.length}/${allPlotted.length}` : void 0,
@@ -614,11 +668,12 @@ function SeriesPlot({
               // Not before the row exists: without its own portal recharts would float this
               // content over the plot for the first frame.
               readout && /* @__PURE__ */ jsx(
-                ChartTooltip,
+                StopTooltip,
                 {
+                  keys,
+                  stops,
                   portal: readout,
                   wrapperStyle: { visibility: "visible" },
-                  defaultIndex: focusedStop?.index,
                   content: /* @__PURE__ */ jsx(
                     ChartTooltipContent,
                     {
@@ -632,11 +687,12 @@ function SeriesPlot({
                 }
               )
             ) : /* @__PURE__ */ jsx(
-              ChartTooltip,
+              StopTooltip,
               {
+                keys,
+                stops,
                 ...tooltip?.allowEscapeViewBox || tooltip?.boundary ? { allowEscapeViewBox: tooltip.allowEscapeViewBox ?? { x: true } } : {},
                 ...tooltip?.boundary ? { offset: 0 } : {},
-                defaultIndex: focusedStop?.index,
                 content: /* @__PURE__ */ jsx(
                   ChartTooltipContent,
                   {
@@ -668,10 +724,10 @@ function SeriesPlot({
                     fillOpacity: entry.fillOpacity,
                     ...edge ? { stroke: edge, strokeWidth: 1 } : {},
                     radius: entry.stack === void 0 ? BAR_RADIUS : 0,
+                    shape: (bar) => /* @__PURE__ */ jsx(StopRect, { ...bar, keys, stops, seriesKey: entry.key }),
                     ...stub ? {
                       minPointSize: (_value, index) => finite(plotted[index]?.[entry.key]) === void 0 ? 0 : stub
                     } : {},
-                    ...focusedStop?.key === entry.key ? { shape: focusedBarShape(focusedStop.index) } : {},
                     onClick: onPointClick ? (_bar, index, event) => {
                       event.stopPropagation();
                       const hit = hitAt(index, entry.key);
@@ -782,13 +838,8 @@ function SeriesPlot({
               PointKeys,
               {
                 stops,
-                current: Math.min(keyStop, stops.length - 1),
+                keys,
                 label: labels.points,
-                onFocusStop: (at) => {
-                  setKeyStop(at);
-                  setKeyFocus(at);
-                },
-                onBlurStops: () => setKeyFocus(void 0),
                 onPick: onPointClick ? (stop) => {
                   const hit = hitAt(stop.index, stop.key);
                   if (hit) onPointClick(hit);
@@ -821,17 +872,19 @@ function SeriesPlot({
     about.node
   ] });
 }
-const ZoomablePlot = withChartZoom(SeriesPlot);
+const ZoomablePlot = withChartZoom(SeriesPlotView);
+const NO_X = {};
 function usePlotProps(typed) {
   const props = typed;
-  const x = props.x ?? {};
+  const x = props.x ?? NO_X;
   const { rows } = props;
   const { type, key } = x;
   const model = useMemo(() => xModel(rows, { type, key }), [rows, type, key]);
-  return { ...props, rows: model.rows, x: { key: model.plotKey }, model, xAxis: x };
+  const plotted = useMemo(() => ({ key: model.plotKey }), [model.plotKey]);
+  return { ...props, rows: model.rows, x: plotted, model, xAxis: x };
 }
 function StaticSeriesChart(props) {
-  return /* @__PURE__ */ jsx(SeriesPlot, { ...usePlotProps(props) });
+  return /* @__PURE__ */ jsx(SeriesPlotView, { ...usePlotProps(props) });
 }
 function SeriesChart(props) {
   return /* @__PURE__ */ jsx(ZoomablePlot, { ...usePlotProps(props) });