@eifi1/ui-kit 0.51.4 → 0.51.6

package/dist/components/page-contents.js

@@ -101,28 +101,19 @@ function PageContents({
     }
   );
   if (variant === "disclosure") {
-    return /* @__PURE__ */ jsxs(
-      "details",
-      {
-        className: cn(
-          "group rounded-md border border-subtle bg-surface",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden", children: [
-            l.title,
-            /* @__PURE__ */ jsx(
-              ChevronDown,
-              {
-                "aria-hidden": true,
-                className: "size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": l.title, className: "border-t border-subtle px-2 py-2", children: list })
-        ]
-      }
-    );
+    return /* @__PURE__ */ jsxs("details", { className: cn("group rounded-md border border-subtle bg-surface", className), children: [
+      /* @__PURE__ */ jsxs("summary", { className: "flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden", children: [
+        l.title,
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            "aria-hidden": true,
+            className: "size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx("nav", { ...rest, "aria-label": l.title, className: "border-t border-subtle px-2 py-2", children: list })
+    ] });
   }
   return /* @__PURE__ */ jsxs("nav", { ...rest, "aria-label": l.title, className, children: [
     /* @__PURE__ */ jsx("p", { className: "mb-2 text-caption font-semibold uppercase tracking-wide text-muted", children: l.title }),

package/dist/components/page-contents.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-contents.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_PAGE_CONTENTS_LABELS } from \"./page-contents-labels\";\n\n/**\n * \"On this page\": a page's own table of contents, with the section being read marked.\n *\n * Three parts, because an app needs them separately:\n *\n *   - {@link useScrollSpy} — which section is current, from the headings' positions in\n *     a scroll container. No markup; usable for anything that follows the reader.\n *   - {@link PageContents} — the list. `variant=\"rail\"` for beside the page,\n *     `variant=\"disclosure\"` for a collapsed block under the title on narrow screens.\n *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.\n *\n * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it\n * works with any router, including a hash router where `#id` alone would be read as a\n * route.\n */\n\nexport interface PageContentsItem {\n  /** The id of the heading the entry jumps to. */\n  id: string;\n  label: ReactNode;\n  /** 2 indents the entry under the one before it. */\n  level?: 1 | 2;\n}\n\nexport interface PageContentsLabels {\n  /** The heading above the list, and the landmark's accessible name. */\n  title: string;\n}\n\n// Defined in ./page-contents-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PAGE_CONTENTS_LABELS };\n\nexport interface UseScrollSpyOptions {\n  /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its\n   *  `<main>` — it is the page's scroll container from `md` up. */\n  root?: Element | null;\n  /**\n   * How far down the scroller the \"reading line\" sits, as a fraction of its height.\n   * A section becomes current once its heading passes above it, and stays current\n   * until the next heading does — so a long section keeps its entry marked while it\n   * is being read, not only while its heading is on screen. Default 0.15: close to\n   * the top, so a short section followed by another does not hand its mark to the\n   * next one the moment it is scrolled to.\n   */\n  line?: number;\n}\n\n/**\n * The id of the section being read: the last of `ids` whose element has scrolled\n * above the reading line — or the first, before any has.\n */\nexport function useScrollSpy(ids: readonly string[], options: UseScrollSpyOptions = {}): string | null {\n  const { root = null, line = 0.15 } = options;\n  const [current, setCurrent] = useState<string | null>(null);\n  const key = ids.join(\"\\u0000\");\n\n  useEffect(() => {\n    if (ids.length === 0) return;\n    const scroller: Element | Window = root ?? window;\n    const measure = () => {\n      const top = root ? root.getBoundingClientRect().top : 0;\n      const height = root ? root.clientHeight : window.innerHeight;\n      const reading = top + height * line;\n      let next = ids[0];\n      for (const id of ids) {\n        const el = document.getElementById(id);\n        if (el && el.getBoundingClientRect().top <= reading) next = id;\n      }\n      // At the very bottom the last sections may never reach the line; the reader\n      // who scrolled to the end is reading the end.\n      const atEnd = root\n        ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n        : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;\n      const scrolled = root ? root.scrollTop : window.scrollY;\n      if (atEnd && scrolled > 0) next = ids[ids.length - 1];\n      setCurrent(next);\n    };\n    let frame = 0;\n    const onScroll = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n    measure();\n    scroller.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      cancelAnimationFrame(frame);\n      scroller.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n    // `key` stands for `ids`: a new array with the same entries is the same list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, root, line]);\n\n  return current;\n}\n\nexport interface PageContentsProps extends Omit<ComponentPropsWithRef<\"nav\">, \"children\"> {\n  items: PageContentsItem[];\n  /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */\n  activeId?: string | null;\n  /** The link for an entry. Default `#id`; under a hash router build it with the\n   *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */\n  hrefFor?: (id: string) => string;\n  /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,\n   *  for narrow screens where a rail has no room. */\n  variant?: \"rail\" | \"disclosure\";\n  labels?: LabelOverride<PageContentsLabels>;\n}\n\n/**\n * The list itself. The current entry gets a brand bar on the list's rule, the brand\n * colour, and `aria-current=\"location\"` — the marker documentation sites use, and the\n * one a screen reader announces.\n */\nexport function PageContents({\n  items,\n  activeId,\n  hrefFor = (id) => `#${id}`,\n  variant = \"rail\",\n  labels,\n  className,\n  ...rest\n}: PageContentsProps) {\n  const l = useKitLabels(\"pageContents\", DEFAULT_PAGE_CONTENTS_LABELS, labels);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The entry just clicked is the current one until the reader scrolls on their own.\n  // Without this, jumping to a short section near the end of a page marks whichever\n  // later section the jump also carried past the reading line — you click one entry\n  // and another lights up.\n  const [clicked, setClicked] = useState<string | null>(null);\n  useEffect(() => {\n    if (!clicked) return;\n    const release = () => setClicked(null);\n    // A user scroll — wheel, touch, keys — releases it; the programmatic scroll the\n    // jump itself causes does not fire these.\n    window.addEventListener(\"wheel\", release, { passive: true, once: true });\n    window.addEventListener(\"touchmove\", release, { passive: true, once: true });\n    window.addEventListener(\"keydown\", release, { once: true });\n    return () => {\n      window.removeEventListener(\"wheel\", release);\n      window.removeEventListener(\"touchmove\", release);\n      window.removeEventListener(\"keydown\", release);\n    };\n  }, [clicked]);\n  const shown = clicked ?? activeId;\n\n  // Keep the current entry in view when the list is taller than the window.\n  useEffect(() => {\n    if (!shown || variant !== \"rail\") return;\n    listRef.current\n      ?.querySelector<HTMLElement>(`[data-entry=\"${CSS.escape(shown)}\"]`)\n      ?.scrollIntoView?.({ block: \"nearest\" });\n  }, [shown, variant]);\n\n  if (items.length === 0) return null;\n\n  const list = (\n    <ul\n      ref={listRef}\n      className={cn(\n        \"space-y-0.5 border-s border-subtle\",\n        variant === \"rail\" && \"max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]\",\n      )}\n    >\n      {items.map((item) => {\n        const current = item.id === shown;\n        return (\n          <li key={item.id} data-entry={item.id}>\n            <a\n              href={hrefFor(item.id)}\n              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a\n              // native `title` to be read at all, which a keyboard never sees and which\n              // broke keksdose's one-tooltip rule (dev#523).\n              aria-current={current ? \"location\" : undefined}\n              onClick={() => setClicked(item.id)}\n              className={cn(\n                \"-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"[overflow-wrap:anywhere]\",\n                item.level === 2 ? \"ps-6\" : \"ps-3\",\n                current\n                  ? \"border-brand font-medium text-brand\"\n                  : \"border-transparent text-muted hover:border-strong hover:text-primary\",\n              )}\n            >\n              {item.label}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  if (variant === \"disclosure\") {\n    return (\n      <details\n        className={cn(\n          \"group rounded-md border border-subtle bg-surface\",\n          className,\n        )}\n      >\n        <summary className=\"flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden\">\n          {l.title}\n          <ChevronDown\n            aria-hidden\n            className=\"size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none\"\n          />\n        </summary>\n        <nav {...rest} aria-label={l.title} className=\"border-t border-subtle px-2 py-2\">\n          {list}\n        </nav>\n      </details>\n    );\n  }\n\n  return (\n    <nav {...rest} aria-label={l.title} className={className}>\n      <p className=\"mb-2 text-caption font-semibold uppercase tracking-wide text-muted\">\n        {l.title}\n      </p>\n      {list}\n    </nav>\n  );\n}\n\nexport interface PageContentsLayoutProps extends ComponentPropsWithRef<\"div\"> {\n  /** What goes in the rail — typically a `<PageContents variant=\"rail\">`. */\n  contents: ReactNode;\n  /**\n   * Which side of the page the rail sits on: `start` is the left in a left-to-right\n   * language (next to the app's own sidebar, so both navigations are in one place),\n   * `end` the right (the documentation-site convention, clear of the sidebar). Logical,\n   * so both flip in a right-to-left UI.\n   */\n  position?: \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that\n * the rail would squeeze the content, so it is not rendered there — pair it with a\n * `<PageContents variant=\"disclosure\" className=\"xl:hidden\">` in the page.\n *\n * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the\n * viewport, or `AppShell`'s `<main>`.\n */\nexport function PageContentsLayout({\n  contents,\n  position = \"start\",\n  children,\n  className,\n  ...rest\n}: PageContentsLayoutProps) {\n  // In DOM order on its side, not moved there with `order`: Tab and a screen reader\n  // follow the source, and a rail painted on the left but read after the page would\n  // put the page's index at its end.\n  const rail = (\n    <aside className=\"hidden xl:block\">\n      <div className=\"sticky top-6\">{contents}</div>\n    </aside>\n  );\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"xl:grid xl:gap-10\",\n        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.\n        // A fixed 13rem broke \"Select — unlabelled, labelled, invalid, disabled\" over\n        // three lines beside a page with room to spare; an index you scan should read\n        // one entry per line.\n        position === \"start\"\n          ? \"xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]\"\n          : \"xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]\",\n        className,\n      )}\n    >\n      {position === \"start\" && rail}\n      <div className=\"min-w-0\">{children}</div>\n      {position === \"end\" && rail}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/page-contents.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_PAGE_CONTENTS_LABELS } from \"./page-contents-labels\";\n\n/**\n * \"On this page\": a page's own table of contents, with the section being read marked.\n *\n * Three parts, because an app needs them separately:\n *\n *   - {@link useScrollSpy} — which section is current, from the headings' positions in\n *     a scroll container. No markup; usable for anything that follows the reader.\n *   - {@link PageContents} — the list. `variant=\"rail\"` for beside the page,\n *     `variant=\"disclosure\"` for a collapsed block under the title on narrow screens.\n *   - {@link PageContentsLayout} — the page with the rail sticky on one side of it.\n *\n * Domain-free: the app supplies the entries and how an entry links (`hrefFor`), so it\n * works with any router, including a hash router where `#id` alone would be read as a\n * route.\n */\n\nexport interface PageContentsItem {\n  /** The id of the heading the entry jumps to. */\n  id: string;\n  label: ReactNode;\n  /** 2 indents the entry under the one before it. */\n  level?: 1 | 2;\n}\n\nexport interface PageContentsLabels {\n  /** The heading above the list, and the landmark's accessible name. */\n  title: string;\n}\n\n// Defined in ./page-contents-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PAGE_CONTENTS_LABELS };\n\nexport interface UseScrollSpyOptions {\n  /** The element that scrolls. Defaults to the viewport. In `AppShell`, pass its\n   *  `<main>` — it is the page's scroll container from `md` up. */\n  root?: Element | null;\n  /**\n   * How far down the scroller the \"reading line\" sits, as a fraction of its height.\n   * A section becomes current once its heading passes above it, and stays current\n   * until the next heading does — so a long section keeps its entry marked while it\n   * is being read, not only while its heading is on screen. Default 0.15: close to\n   * the top, so a short section followed by another does not hand its mark to the\n   * next one the moment it is scrolled to.\n   */\n  line?: number;\n}\n\n/**\n * The id of the section being read: the last of `ids` whose element has scrolled\n * above the reading line — or the first, before any has.\n */\nexport function useScrollSpy(ids: readonly string[], options: UseScrollSpyOptions = {}): string | null {\n  const { root = null, line = 0.15 } = options;\n  const [current, setCurrent] = useState<string | null>(null);\n  const key = ids.join(\"\\u0000\");\n\n  useEffect(() => {\n    if (ids.length === 0) return;\n    const scroller: Element | Window = root ?? window;\n    const measure = () => {\n      const top = root ? root.getBoundingClientRect().top : 0;\n      const height = root ? root.clientHeight : window.innerHeight;\n      const reading = top + height * line;\n      let next = ids[0];\n      for (const id of ids) {\n        const el = document.getElementById(id);\n        if (el && el.getBoundingClientRect().top <= reading) next = id;\n      }\n      // At the very bottom the last sections may never reach the line; the reader\n      // who scrolled to the end is reading the end.\n      const atEnd = root\n        ? root.scrollTop + root.clientHeight >= root.scrollHeight - 2\n        : window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2;\n      const scrolled = root ? root.scrollTop : window.scrollY;\n      if (atEnd && scrolled > 0) next = ids[ids.length - 1];\n      setCurrent(next);\n    };\n    let frame = 0;\n    const onScroll = () => {\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(measure);\n    };\n    measure();\n    scroller.addEventListener(\"scroll\", onScroll, { passive: true });\n    window.addEventListener(\"resize\", onScroll);\n    return () => {\n      cancelAnimationFrame(frame);\n      scroller.removeEventListener(\"scroll\", onScroll);\n      window.removeEventListener(\"resize\", onScroll);\n    };\n    // `key` stands for `ids`: a new array with the same entries is the same list.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [key, root, line]);\n\n  return current;\n}\n\nexport interface PageContentsProps extends Omit<ComponentPropsWithRef<\"nav\">, \"children\"> {\n  items: PageContentsItem[];\n  /** The current entry — typically `useScrollSpy(items.map(i => i.id), …)`. */\n  activeId?: string | null;\n  /** The link for an entry. Default `#id`; under a hash router build it with the\n   *  router (react-router's `useHref({ hash: id })` gives `#/page#id`). */\n  hrefFor?: (id: string) => string;\n  /** `rail` — a list beside the page. `disclosure` — collapsed under a summary line,\n   *  for narrow screens where a rail has no room. */\n  variant?: \"rail\" | \"disclosure\";\n  labels?: LabelOverride<PageContentsLabels>;\n}\n\n/**\n * The list itself. The current entry gets a brand bar on the list's rule, the brand\n * colour, and `aria-current=\"location\"` — the marker documentation sites use, and the\n * one a screen reader announces.\n */\nexport function PageContents({\n  items,\n  activeId,\n  hrefFor = (id) => `#${id}`,\n  variant = \"rail\",\n  labels,\n  className,\n  ...rest\n}: PageContentsProps) {\n  const l = useKitLabels(\"pageContents\", DEFAULT_PAGE_CONTENTS_LABELS, labels);\n  const listRef = useRef<HTMLUListElement>(null);\n  // The entry just clicked is the current one until the reader scrolls on their own.\n  // Without this, jumping to a short section near the end of a page marks whichever\n  // later section the jump also carried past the reading line — you click one entry\n  // and another lights up.\n  const [clicked, setClicked] = useState<string | null>(null);\n  useEffect(() => {\n    if (!clicked) return;\n    const release = () => setClicked(null);\n    // A user scroll — wheel, touch, keys — releases it; the programmatic scroll the\n    // jump itself causes does not fire these.\n    window.addEventListener(\"wheel\", release, { passive: true, once: true });\n    window.addEventListener(\"touchmove\", release, { passive: true, once: true });\n    window.addEventListener(\"keydown\", release, { once: true });\n    return () => {\n      window.removeEventListener(\"wheel\", release);\n      window.removeEventListener(\"touchmove\", release);\n      window.removeEventListener(\"keydown\", release);\n    };\n  }, [clicked]);\n  const shown = clicked ?? activeId;\n\n  // Keep the current entry in view when the list is taller than the window.\n  useEffect(() => {\n    if (!shown || variant !== \"rail\") return;\n    listRef.current\n      ?.querySelector<HTMLElement>(`[data-entry=\"${CSS.escape(shown)}\"]`)\n      ?.scrollIntoView?.({ block: \"nearest\" });\n  }, [shown, variant]);\n\n  if (items.length === 0) return null;\n\n  const list = (\n    <ul\n      ref={listRef}\n      className={cn(\n        \"space-y-0.5 border-s border-subtle\",\n        variant === \"rail\" && \"max-h-[calc(100dvh-10rem)] overflow-y-auto [scrollbar-width:thin]\",\n      )}\n    >\n      {items.map((item) => {\n        const current = item.id === shown;\n        return (\n          <li key={item.id} data-entry={item.id}>\n            <a\n              href={hrefFor(item.id)}\n              // Entries WRAP in the rail rather than truncate: a cut-off heading needed a\n              // native `title` to be read at all, which a keyboard never sees and which\n              // broke keksdose's one-tooltip rule (dev#523).\n              aria-current={current ? \"location\" : undefined}\n              onClick={() => setClicked(item.id)}\n              className={cn(\n                \"-ms-px block border-s-2 py-1 pe-1 text-[0.8125rem] leading-snug transition-colors duration-150\",\n                variant === \"rail\" && \"[overflow-wrap:anywhere]\",\n                item.level === 2 ? \"ps-6\" : \"ps-3\",\n                current\n                  ? \"border-brand font-medium text-brand\"\n                  : \"border-transparent text-muted hover:border-strong hover:text-primary\",\n              )}\n            >\n              {item.label}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  if (variant === \"disclosure\") {\n    return (\n      <details className={cn(\"group rounded-md border border-subtle bg-surface\", className)}>\n        <summary className=\"flex cursor-pointer list-none items-center justify-between px-3 py-2 text-sm font-medium text-secondary [&::-webkit-details-marker]:hidden\">\n          {l.title}\n          <ChevronDown\n            aria-hidden\n            className=\"size-4 transition-transform duration-200 group-open:rotate-180 motion-reduce:transition-none\"\n          />\n        </summary>\n        <nav {...rest} aria-label={l.title} className=\"border-t border-subtle px-2 py-2\">\n          {list}\n        </nav>\n      </details>\n    );\n  }\n\n  return (\n    <nav {...rest} aria-label={l.title} className={className}>\n      <p className=\"mb-2 text-caption font-semibold uppercase tracking-wide text-muted\">{l.title}</p>\n      {list}\n    </nav>\n  );\n}\n\nexport interface PageContentsLayoutProps extends ComponentPropsWithRef<\"div\"> {\n  /** What goes in the rail — typically a `<PageContents variant=\"rail\">`. */\n  contents: ReactNode;\n  /**\n   * Which side of the page the rail sits on: `start` is the left in a left-to-right\n   * language (next to the app's own sidebar, so both navigations are in one place),\n   * `end` the right (the documentation-site convention, clear of the sidebar). Logical,\n   * so both flip in a right-to-left UI.\n   */\n  position?: \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The page with a sticky contents rail beside it, from `xl` (1280px) up. Below that\n * the rail would squeeze the content, so it is not rendered there — pair it with a\n * `<PageContents variant=\"disclosure\" className=\"xl:hidden\">` in the page.\n *\n * The rail is `sticky top-6`, which sticks inside the nearest scroll container — the\n * viewport, or `AppShell`'s `<main>`.\n */\nexport function PageContentsLayout({\n  contents,\n  position = \"start\",\n  children,\n  className,\n  ...rest\n}: PageContentsLayoutProps) {\n  // In DOM order on its side, not moved there with `order`: Tab and a screen reader\n  // follow the source, and a rail painted on the left but read after the page would\n  // put the page's index at its end.\n  const rail = (\n    <aside className=\"hidden xl:block\">\n      <div className=\"sticky top-6\">{contents}</div>\n    </aside>\n  );\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"xl:grid xl:gap-10\",\n        // `fit-content(22rem)`: the rail is as wide as its longest entry, up to 22rem.\n        // A fixed 13rem broke \"Select — unlabelled, labelled, invalid, disabled\" over\n        // three lines beside a page with room to spare; an index you scan should read\n        // one entry per line.\n        position === \"start\"\n          ? \"xl:grid-cols-[fit-content(22rem)_minmax(0,1fr)]\"\n          : \"xl:grid-cols-[minmax(0,1fr)_fit-content(22rem)]\",\n        className,\n      )}\n    >\n      {position === \"start\" && rail}\n      <div className=\"min-w-0\">{children}</div>\n      {position === \"end\" && rail}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/page-header.js

@@ -78,17 +78,7 @@ function PageHeader({
         children: [
           /* @__PURE__ */ jsxs("div", { ref: titleRef, className: cn("flex-1", keepsWords ? "min-w-min" : "min-w-0"), children: [
             eyebrow != null && /* @__PURE__ */ jsx("p", { className: cn(SECTION_LABEL_CLASS.xs, "mb-1"), children: eyebrow }),
-            /* @__PURE__ */ jsx(
-              Heading,
-              {
-                className: cn(
-                  truncateTitle ? "truncate-until-large" : "break-words",
-                  "text-primary",
-                  TITLE[size]
-                ),
-                children: title
-              }
-            ),
+            /* @__PURE__ */ jsx(Heading, { className: cn(truncateTitle ? "truncate-until-large" : "break-words", "text-primary", TITLE[size]), children: title }),
             description != null && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted", children: description })
           ] }),
           actions != null && /* @__PURE__ */ jsx(

package/dist/components/page-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\nimport { useDocumentTitle } from \"../hooks/use-document-title\";\nimport { PageHeaderTrailContext } from \"./page-header-context\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nconst STACK_ACTIONS_AT_LARGE =\n  \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. Inside a header with a title\n   *  it hides its current entry (the title names it) and is drawn only when an entry\n   *  other than home is left — `Breadcrumbs.hideCurrent` (0.49 KIT-9). */\n  breadcrumbs?: ReactNode;\n  /**\n   * The window's title (`document.title`) while the header is mounted (0.49 KIT-9),\n   * through `useDocumentTitle` and the provider's format (\"{page} · {section} · {app}\",\n   * `appName` as the app). A string is the page; an array is `[page, section]` (or\n   * `[page, section, app]`); `false` leaves the window's title alone.\n   *\n   * Default: the `title` when it is a string, and only for the page's own header\n   * (`as=\"h1\"`) — a tab's `h2` header does not rename the window.\n   */\n  documentTitle?: string | ReadonlyArray<string | null | undefined> | false;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   *\n   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size\n   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row\n   * with a taller title block.\n   */\n  truncateTitle?: boolean;\n}\n\nconst TITLED = { titled: true };\nconst UNTITLED = { titled: false };\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  documentTitle,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  useDocumentTitle(\n    documentTitle === false\n      ? []\n      : documentTitle === undefined\n        ? as === \"h1\" && typeof title === \"string\"\n          ? [title]\n          : []\n        : typeof documentTitle === \"string\"\n          ? [documentTitle]\n          : documentTitle,\n  );\n  const titled = title != null && title !== false && title !== \"\";\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs != null && (\n        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>{breadcrumbs}</PageHeaderTrailContext.Provider>\n      )}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading\n            className={cn(\n              truncateTitle ? \"truncate-until-large\" : \"break-words\",\n              \"text-primary\",\n              TITLE[size],\n            )}\n          >\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-muted\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\n              \"flex shrink-0 flex-wrap items-center gap-2\",\n              hasSecondary && \"sm:order-2\",\n              mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE,\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/page-header.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithRef, ElementType, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { SECTION_LABEL_CLASS } from \"./text\";\nimport { useDocumentTitle } from \"../hooks/use-document-title\";\nimport { PageHeaderTrailContext } from \"./page-header-context\";\n\n/**\n * `md` (default) is kastlan's `text-2xl` page title from `sm` up, a step smaller on a\n * phone; `sm` is lenkbank's `text-lg` title on a dense tool page (projects-page.tsx).\n *\n * `compact` (0.13) is keksdose's page title (keksdose F4): `text-xl font-semibold` at\n * EVERY width — budgets, rules, accounts, transactions and budget pages all write\n * exactly that `<h1>` by hand. It is `md`'s phone size without `md`'s step up to\n * `text-2xl` on a wider screen, and without its `tracking-tight`, which keksdose's\n * titles never had. A word and not a letter for the reason `ProgressBar`'s `slim` is\n * one: the letters are taken in order, and there is none between `sm` and `md` — an\n * `lg` or `xl` at `text-xl` would read as LARGER than `md`, which from `sm` up it is\n * not.\n */\nexport type PageHeaderSize = \"sm\" | \"compact\" | \"md\";\n\nconst TITLE: Record<PageHeaderSize, string> = {\n  sm: \"text-lg font-semibold\",\n  compact: \"text-xl font-semibold\",\n  md: \"text-xl font-semibold tracking-tight sm:text-2xl\",\n};\n\n/**\n * How the title block and the actions sit below the `sm` breakpoint. From `sm` up both\n * layouts are one row: title block at the start, actions at the end.\n */\nexport type PageHeaderMobileLayout = \"stacked\" | \"inline\";\n\n/**\n * `stacked` at Large and Extra large on a phone (0.32.2, kastlan's 0.32.1 report;\n * docs/text-size-harmonization.md §4, as FormActions does): the actions take the full\n * width, one under the other. Side by side in 240 px of layout, two buttons each wrapped\n * their label onto three lines. `large:max-sm:`, the scaled phone width, so Normal and\n * every wider screen keep their row; `inline` is for actions known to fit, and stays.\n */\nconst STACK_ACTIONS_AT_LARGE = \"large:max-sm:flex-col large:max-sm:items-stretch large:max-sm:[&>*]:w-full\";\n\nconst ROW: Record<PageHeaderMobileLayout, string> = {\n  stacked: \"flex-col gap-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4\",\n  inline: \"flex-row items-center justify-between gap-2 sm:gap-4\",\n};\n\n/**\n * Where the actions sit on the title block's height, in the one row the header is from\n * `sm` up (and on a phone too when {@link PageHeaderMobileLayout} is `inline`, the only\n * layout that has a row there). Unset keeps each layout's own: `start` for `stacked`,\n * `center` for `inline`.\n */\nexport type PageHeaderActionsAlign = \"start\" | \"center\" | \"end\";\n\n/** Applied to the ROW, so the title block and the actions are aligned against each\n *  other on one cross axis. 0.14.0 put `self-*` on the actions box alone, which moved\n *  nothing when the actions were the taller item — they already filled the row, and\n *  the title stayed at the top (keksdose H2, reports-page's two-line labelled\n *  CurrencySelect). Per layout, because `stacked` is a column on a phone, where\n *  `items-center` would centre everything HORIZONTALLY — so it aligns from `sm` up. */\nconst ROW_ALIGN: Record<PageHeaderMobileLayout, Record<PageHeaderActionsAlign, string>> = {\n  stacked: { start: \"sm:items-start\", center: \"sm:items-center\", end: \"sm:items-end\" },\n  inline: { start: \"items-start\", center: \"items-center\", end: \"items-end\" },\n};\n\nexport interface PageHeaderProps extends Omit<ComponentPropsWithRef<\"div\">, \"title\"> {\n  title: ReactNode;\n  /** A sentence under the title. */\n  description?: ReactNode;\n  /** Buttons for the page — \"New\", \"Export\". At the title's end from `sm` up; under it,\n   *  wrapping, on a phone — unless {@link mobileLayout} is `inline`. */\n  actions?: ReactNode;\n  /** A `Breadcrumbs` trail, drawn above everything else. Inside a header with a title\n   *  it hides its current entry (the title names it) and is drawn only when an entry\n   *  other than home is left — `Breadcrumbs.hideCurrent` (0.49 KIT-9). */\n  breadcrumbs?: ReactNode;\n  /**\n   * The window's title (`document.title`) while the header is mounted (0.49 KIT-9),\n   * through `useDocumentTitle` and the provider's format (\"{page} · {section} · {app}\",\n   * `appName` as the app). A string is the page; an array is `[page, section]` (or\n   * `[page, section, app]`); `false` leaves the window's title alone.\n   *\n   * Default: the `title` when it is a string, and only for the page's own header\n   * (`as=\"h1\"`) — a tab's `h2` header does not rename the window.\n   */\n  documentTitle?: string | ReadonlyArray<string | null | undefined> | false;\n  /** A small uppercase line above the title — the section or the kind of record\n   *  (\"Building\", \"Settings\"). The section-label type. */\n  eyebrow?: ReactNode;\n  /** The title's element. Default `h1`: a page has one, and this is it. `h2` for a\n   *  header inside a page that already has its `h1` (a tab's own header). */\n  as?: \"h1\" | \"h2\" | \"h3\";\n  size?: PageHeaderSize;\n  /**\n   * `stacked` (default): on a phone the actions drop under the title and wrap, so a\n   * row of three buttons never pushes the title off the screen.\n   *\n   * `inline`: the actions stay beside the title on a phone too, vertically centred on\n   * it — keksdose's headers (transactions-page.tsx:515, `flex items-center\n   * justify-between gap-2`), which carry one or two icon-sized controls and were tuned\n   * for the phone in live #263. Adopting `PageHeader` must not undo that tuning, so the\n   * row stays a row (keksdose F4). The actions do NOT wrap or shrink here: `inline` is\n   * for a header whose actions are known to fit beside a phone-width title (an icon\n   * button, a month picker); a long title wraps to make room for them instead.\n   */\n  mobileLayout?: PageHeaderMobileLayout;\n  /**\n   * A second group of actions that gets its OWN full-width row under the header on a\n   * phone, and joins the actions' row from `sm` up, between the title and\n   * {@link actions}.\n   *\n   * keksdose's budget page (budget-page.tsx, feedback #60) is the case: title and month\n   * navigation on row 1, the fold/unfold toggles on row 2 on a phone — \"two tidy rows\n   * instead of the old ragged justify-between overflow\" — and one row, title | toggles |\n   * month nav, on a wider screen. It builds that by hand with a wrapping flex row and\n   * swapped order utilities; adopting `PageHeader` (keksdose G6b) must not lose it.\n   * There: `actions` is the month navigation, this is the toggles.\n   *\n   * The DOM order is title, `actions`, `secondaryActions` — the phone's visual order,\n   * and the one a screen reader and the Tab key follow at every width. From `sm` up the\n   * two groups swap places visually only, which keeps the page's primary control (the\n   * month) at the row's end, where keksdose had it, and first in reading order. The\n   * breakpoint is `sm`, the one {@link mobileLayout} switches at, not keksdose's `md`:\n   * one header, one breakpoint.\n   */\n  secondaryActions?: ReactNode;\n  /**\n   * The actions' vertical alignment against the title block — see\n   * {@link PageHeaderActionsAlign}. Unset keeps the layout's own.\n   *\n   * keksdose's reports page (reports-page.tsx, keksdose G8) carries a LABELLED\n   * `CurrencySelect` as its action: a field with its label on top is taller than the\n   * title, and `stacked`'s default top alignment hangs it from the title's cap height\n   * with its control well below the title's line. `center` sets it on the title's\n   * middle, as that page's hand-written `items-center` row did. It aligns the whole row\n   * (title block and actions against each other), since 0.14.1: 0.14.0 moved only the\n   * actions box, which did nothing when the actions were the taller item (keksdose H2).\n   */\n  actionsAlign?: PageHeaderActionsAlign;\n  /**\n   * One line, cut with an ellipsis, instead of the default breaking of a long word onto\n   * as many lines as it needs.\n   *\n   * keksdose's payees page (payees-page.tsx, live #263, keksdose G6a) wraps its title in\n   * its own truncating span so a long name gives way to the `inline` header's actions\n   * instead of pushing them. This is that span's behaviour on the heading itself; the\n   * title block is already allowed to shrink below its content, which is what lets the\n   * cut happen inside a flex row.\n   *\n   * The full title stays in the DOM as the heading's text, so a screen reader and the\n   * document outline read all of it. There is deliberately no native `title` tooltip:\n   * the kit does not use them (not on touch, not on keyboard focus, not styled).\n   *\n   * At Normal only: from Large up the title wraps (`truncate-until-large`, text size\n   * §10.17; round 0.34 T1), as nothing is cut at Large — the actions then share the row\n   * with a taller title block.\n   */\n  truncateTitle?: boolean;\n}\n\nconst TITLED = { titled: true };\nconst UNTITLED = { titled: false };\n\n/**\n * A page's head: optional breadcrumbs, an eyebrow, the title, a description, and the\n * page's actions.\n *\n * kastlan's (shared/components/display/page-header.tsx) is the model — title and\n * description on one side, actions on the other, stacked on a phone — and this adds\n * what its pages kept writing around it: a trail above, an eyebrow, a `ReactNode`\n * title (a status chip beside the name), and actions that WRAP when there are more\n * than fit a phone's width, instead of running off it. No outer margin: the page's\n * own rhythm (`space-y-*`, a grid gap) places it.\n */\nexport function PageHeader({\n  title,\n  description,\n  actions,\n  breadcrumbs,\n  eyebrow,\n  as = \"h1\",\n  size = \"md\",\n  mobileLayout = \"stacked\",\n  secondaryActions,\n  actionsAlign,\n  truncateTitle = false,\n  documentTitle,\n  className,\n  ...rest\n}: PageHeaderProps) {\n  const Heading = as as ElementType;\n  useDocumentTitle(\n    documentTitle === false\n      ? []\n      : documentTitle === undefined\n        ? as === \"h1\" && typeof title === \"string\"\n          ? [title]\n          : []\n        : typeof documentTitle === \"string\"\n          ? [documentTitle]\n          : documentTitle,\n  );\n  const titled = title != null && title !== false && title !== \"\";\n  const hasSecondary = secondaryActions != null;\n  const wrapsSecondary = hasSecondary && mobileLayout === \"inline\";\n  const align = actionsAlign != null ? ROW_ALIGN[mobileLayout][actionsAlign] : undefined;\n  // keksdose H1: in `inline` the title block could shrink below its longest word, and\n  // `break-words` then split \"Monatsbudget\" into \"Monatsbudg\" / \"et\" beside the actions.\n  // Unless it truncates, the title keeps its longest word (min-content) and the ROW\n  // wraps instead: actions that do not fit go to a line of their own, as the app's old\n  // `flex-wrap` header did.\n  const keepsWords = mobileLayout === \"inline\" && !truncateTitle;\n  // keksdose, after H1: once the actions have wrapped below the title, the phone's\n  // header was THREE rows — title / actions / secondary — where the app's old header\n  // shared the second row between the month nav and the toggles (~48px of phone\n  // height). So the secondary group's full-width basis (G6b: a row of its own) is\n  // dropped exactly when the actions already sit below the title; then it joins their\n  // row if it fits, and wraps under them if not. While the actions share the title's\n  // row, nothing changes: the secondary group never climbs onto the title's row.\n  //\n  // CSS cannot see \"the previous item wrapped\", so it is measured — by a\n  // ResizeObserver, whose first callback runs on `observe`. It is stable: the\n  // secondary group comes after the actions, so its basis cannot move them. No\n  // ResizeObserver (jsdom) or no layout keeps the basis, the 0.14.0 layout.\n  const measuresWrap = keepsWords && hasSecondary && actions != null;\n  const titleRef = useRef<HTMLDivElement>(null);\n  const actionsRef = useRef<HTMLDivElement>(null);\n  const [actionsWrapped, setActionsWrapped] = useState(false);\n  useLayoutEffect(() => {\n    const titleBox = titleRef.current;\n    const actionsBox = actionsRef.current;\n    if (!measuresWrap || !titleBox || !actionsBox || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const t = titleBox.getBoundingClientRect();\n      const a = actionsBox.getBoundingClientRect();\n      // Unmeasured (display: none, no layout): keep the full-width basis.\n      setActionsWrapped(t.height > 0 && a.height > 0 && a.top >= t.bottom - 1);\n    });\n    observer.observe(titleBox);\n    observer.observe(actionsBox);\n    if (titleBox.parentElement) observer.observe(titleBox.parentElement);\n    return () => observer.disconnect();\n  }, [measuresWrap]);\n  return (\n    <div {...rest} className={cn(\"flex min-w-0 flex-col gap-2\", className)}>\n      {breadcrumbs != null && (\n        <PageHeaderTrailContext.Provider value={titled ? TITLED : UNTITLED}>\n          {breadcrumbs}\n        </PageHeaderTrailContext.Provider>\n      )}\n      {/* With a second group, `inline` wraps so that group's full-width basis puts it\n          on a row of its own on a phone (`stacked` is a column there already, and a\n          basis would size a column item's HEIGHT); from `sm` up the row stops wrapping\n          and the order utilities seat it between the title and the actions. Without\n          one, nothing changes. */}\n      <div\n        className={cn(\n          \"flex min-w-0\",\n          ROW[mobileLayout],\n          keepsWords ? \"flex-wrap\" : wrapsSecondary && \"flex-wrap sm:flex-nowrap\",\n          align,\n        )}\n      >\n        <div ref={titleRef} className={cn(\"flex-1\", keepsWords ? \"min-w-min\" : \"min-w-0\")}>\n          {eyebrow != null && <p className={cn(SECTION_LABEL_CLASS.xs, \"mb-1\")}>{eyebrow}</p>}\n          <Heading className={cn(truncateTitle ? \"truncate-until-large\" : \"break-words\", \"text-primary\", TITLE[size])}>\n            {title}\n          </Heading>\n          {description != null && <p className=\"mt-1 text-sm text-muted\">{description}</p>}\n        </div>\n        {actions != null && (\n          <div\n            ref={actionsRef}\n            className={cn(\n              \"flex shrink-0 flex-wrap items-center gap-2\",\n              hasSecondary && \"sm:order-2\",\n              mobileLayout === \"stacked\" && STACK_ACTIONS_AT_LARGE,\n            )}\n          >\n            {actions}\n          </div>\n        )}\n        {hasSecondary && (\n          <div\n            className={cn(\n              \"flex flex-wrap items-center gap-2 sm:order-1 sm:shrink-0\",\n              wrapsSecondary && (measuresWrap && actionsWrapped ? \"sm:basis-auto\" : \"basis-full sm:basis-auto\"),\n            )}\n          >\n            {secondaryActions}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/password-strength-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/password-strength-labels.ts"],"sourcesContent":["// The English words of ./password-strength, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./password-strength re-exports them.\n\nimport type { PasswordStrengthLabels } from \"./password-strength\";\n\nexport const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {\n  tooShort: \"Too short\",\n  weak: \"Weak\",\n  fair: \"Fair\",\n  good: \"Good\",\n  strong: \"Strong\",\n  announcement: (level) => `Password strength: ${level}`,\n  ruleLength: (minLength) => `At least ${minLength} characters`,\n  ruleCase: \"Upper and lower case\",\n  ruleDigit: \"A number\",\n  ruleSymbol: \"A symbol\",\n  optional: (rule) => `${rule} (optional)`,\n  met: \"Met:\",\n  notMet: \"Not met:\",\n  tooLong: (maxBytes) =>\n    `At most ${maxBytes} characters (accents and emoji count for more than one).`,\n};\n"],"mappings":";AAMO,MAAM,mCAA2D;AAAA,EACtE,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc,CAAC,UAAU,sBAAsB,KAAK;AAAA,EACpD,YAAY,CAAC,cAAc,YAAY,SAAS;AAAA,EAChD,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU,CAAC,SAAS,GAAG,IAAI;AAAA,EAC3B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS,CAAC,aACR,WAAW,QAAQ;AACvB;","names":[]}
+{"version":3,"sources":["../../src/components/password-strength-labels.ts"],"sourcesContent":["// The English words of ./password-strength, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./password-strength re-exports them.\n\nimport type { PasswordStrengthLabels } from \"./password-strength\";\n\nexport const DEFAULT_PASSWORD_STRENGTH_LABELS: PasswordStrengthLabels = {\n  tooShort: \"Too short\",\n  weak: \"Weak\",\n  fair: \"Fair\",\n  good: \"Good\",\n  strong: \"Strong\",\n  announcement: (level) => `Password strength: ${level}`,\n  ruleLength: (minLength) => `At least ${minLength} characters`,\n  ruleCase: \"Upper and lower case\",\n  ruleDigit: \"A number\",\n  ruleSymbol: \"A symbol\",\n  optional: (rule) => `${rule} (optional)`,\n  met: \"Met:\",\n  notMet: \"Not met:\",\n  tooLong: (maxBytes) => `At most ${maxBytes} characters (accents and emoji count for more than one).`,\n};\n"],"mappings":";AAMO,MAAM,mCAA2D;AAAA,EACtE,UAAU;AAAA,EACV,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,cAAc,CAAC,UAAU,sBAAsB,KAAK;AAAA,EACpD,YAAY,CAAC,cAAc,YAAY,SAAS;AAAA,EAChD,UAAU;AAAA,EACV,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU,CAAC,SAAS,GAAG,IAAI;AAAA,EAC3B,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,SAAS,CAAC,aAAa,WAAW,QAAQ;AAC5C;","names":[]}

package/dist/components/password-strength.js

@@ -74,10 +74,7 @@ function PasswordStrengthMeter({
         /* @__PURE__ */ jsx("div", { className: "flex flex-1 gap-1", "aria-hidden": "true", "data-score": score, children: [1, 2, 3, 4].map((step) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: cn(
-              "h-1 flex-1 rounded-full",
-              step <= score ? FILL[score] : "bg-[var(--border)]"
-            )
+            className: cn("h-1 flex-1 rounded-full", step <= score ? FILL[score] : "bg-[var(--border)]")
           },
           step
         )) }),
@@ -86,10 +83,7 @@ function PasswordStrengthMeter({
       showRequirements && /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-x-3 gap-y-0.5 text-xs", children: rules.map((r) => /* @__PURE__ */ jsxs(
         "li",
         {
-          className: cn(
-            "relative",
-            r.met ? "text-success" : "text-muted"
-          ),
+          className: cn("relative", r.met ? "text-success" : "text-muted"),
           "data-met": r.met,
           children: [
             /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [

package/dist/components/password-strength.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/password-strength.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_PASSWORD_STRENGTH_LABELS } from \"./password-strength-labels\";\n\n/**\n * The bar, the word and the advisory checklist under a field where someone is\n * CHOOSING a secret.\n *\n * Ported from Keksdose (`features/auth/password-strength-meter.tsx`), where one meter\n * sits under the sign-in password and the encryption passphrase alike — a copy per\n * form is what had let the passphrase dialogs ship with no meter at all. Three things\n * changed on the way in:\n *\n *  1. **Tokens, not palette.** The four fills were red/amber/lime/emerald utilities;\n *     they are `--danger` → `--warning` → `--success` now, so a consumer re-pointing\n *     those families re-skins the meter with them.\n *  2. **Not colour alone.** The level is always written out beside the bar, and each\n *     checklist item says \"met\" / \"not met\" to a screen reader — the ✓/○ glyphs are\n *     decoration and hidden.\n *  3. **Announced.** A level change is spoken through a polite live region\n *     ({@link useAnnounce}); the bar itself is `aria-hidden`, because four coloured\n *     strips read out as four empty groups.\n *\n * Advisory only, as in Keksdose: nothing here blocks a submit. The caller decides what\n * is required — {@link passwordRules} marks `length` as the one rule that usually is,\n * so a form can gate on it with the same function the checklist draws from.\n *\n * Dependency-free on purpose. zxcvbn is ~400 kB of dictionaries, and neither consumer\n * ships it; a host that does can pass its scorer as `score` and keep the rest.\n */\n\n/* ── The scorer ──────────────────────────────────────────────────────────── */\n\n/** 0 = too short (or empty), 4 = strong. */\nexport type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;\n\nexport type PasswordRuleId = \"length\" | \"case\" | \"digit\" | \"symbol\";\n\nexport interface PasswordRule {\n  id: PasswordRuleId;\n  met: boolean;\n  /** Only `length` is required; the rest are suggestions. */\n  required: boolean;\n}\n\nexport interface PasswordScoreOptions {\n  /** The length below which a secret is \"too short\", whatever else it has. Keep it\n   *  in step with the server's own minimum. Default 8. */\n  minLength?: number;\n}\n\nconst DEFAULT_MIN_LENGTH = 8;\n\n/** The checklist's rules, evaluated. Pure; the order is the order they are shown in. */\nexport function passwordRules(value: string, { minLength = DEFAULT_MIN_LENGTH }: PasswordScoreOptions = {}): PasswordRule[] {\n  return [\n    // Code points, not UTF-16 units: an emoji is one character to the person typing it.\n    { id: \"length\", met: [...value].length >= minLength, required: true },\n    { id: \"case\", met: /\\p{Ll}/u.test(value) && /\\p{Lu}/u.test(value), required: false },\n    { id: \"digit\", met: /\\p{Nd}/u.test(value), required: false },\n    { id: \"symbol\", met: /[^\\p{L}\\p{N}\\s]/u.test(value), required: false },\n  ];\n}\n\n/**\n * A 0–4 strength bucket. Length dominates, because it genuinely dominates real-world\n * guessing cost: one step each at `minLength`, `minLength + 4` and `minLength + 8`,\n * and one more for at least two of the three variety rules.\n *\n * One addition over Keksdose's curve: a secret with fewer than four DISTINCT\n * characters caps at 1. Sixteen `a`s are long, and nothing about them is strong.\n */\nexport function scorePassword(value: string, options: PasswordScoreOptions = {}): PasswordStrengthScore {\n  const minLength = options.minLength ?? DEFAULT_MIN_LENGTH;\n  const chars = [...value];\n  // Under the minimum is never anything but \"too short\", however varied.\n  if (chars.length === 0 || chars.length < minLength) return 0;\n  let score = 1;\n  if (chars.length >= minLength + 4) score += 1;\n  if (chars.length >= minLength + 8) score += 1;\n  const variety = passwordRules(value, { minLength }).filter((r) => !r.required && r.met).length;\n  if (variety >= 2) score += 1;\n  if (new Set(chars).size < 4) score = 1;\n  return Math.min(score, 4) as PasswordStrengthScore;\n}\n\n/** UTF-8 byte length — what a bcrypt-style ceiling counts. \"ü\" is two, an emoji four. */\nexport function passwordByteLength(value: string): number {\n  return new TextEncoder().encode(value).length;\n}\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the meter renders or speaks. */\nexport interface PasswordStrengthLabels {\n  /** The five level names, shown beside the bar. Score 0 … 4. */\n  tooShort: string;\n  weak: string;\n  fair: string;\n  good: string;\n  strong: string;\n  /** What the live region says when the level changes, given the level's name. */\n  announcement: (level: string) => string;\n  /** The length rule, given the minimum. */\n  ruleLength: (minLength: number) => string;\n  ruleCase: string;\n  ruleDigit: string;\n  ruleSymbol: string;\n  /** A suggestion rather than a requirement, given the rule's text. */\n  optional: (rule: string) => string;\n  /** Screen-reader-only state before each checklist item — the ✓/○ are hidden. */\n  met: string;\n  notMet: string;\n  /** Shown when the value is over `maxBytes`, given that ceiling. */\n  tooLong: (maxBytes: number) => string;\n}\n\n// Defined in ./password-strength-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_STRENGTH_LABELS };\n\nconst LEVEL_KEYS = [\"tooShort\", \"weak\", \"fair\", \"good\", \"strong\"] as const;\n\n/* ── The meter ───────────────────────────────────────────────────────────── */\n\n// The filled segments' colour per score. \"Good\" sits between the warning and the\n// success hue rather than borrowing either, so 3 and 4 differ in colour as well as in\n// segment count. Index 0 is never drawn — a too-short secret fills no segment.\nconst FILL: Record<PasswordStrengthScore, string> = {\n  0: \"\",\n  1: \"bg-danger\",\n  2: \"bg-warning\",\n  3: \"bg-[color-mix(in_oklab,var(--success)_60%,var(--warning))]\",\n  4: \"bg-success\",\n};\n\nexport interface PasswordStrengthMeterProps extends ComponentPropsWithRef<\"div\"> {\n  /** The secret being chosen. Nothing visible renders while it is empty. */\n  value: string;\n  /** Replace the built-in scorer (e.g. with zxcvbn's `score`). Must be pure. */\n  score?: (value: string) => PasswordStrengthScore;\n  /** See {@link PasswordScoreOptions.minLength}. Drives the built-in scorer and the\n   *  length rule's text. */\n  minLength?: number;\n  /** Show the checklist under the bar. Default `true`. */\n  showRequirements?: boolean;\n  /**\n   * A byte ceiling to warn about, if the secret has one — bcrypt reads at most 72\n   * BYTES. Leave it unset for a secret that has none (a passphrase stretched in the\n   * browser): inventing one talks people out of the long passphrase they chose.\n   */\n  maxBytes?: number;\n  /** User-facing strings; see {@link PasswordStrengthLabels}. */\n  labels?: LabelOverride<PasswordStrengthLabels>;\n}\n\n/**\n * Render directly under the password field. To have the field itself describe its\n * strength, give this an `id` and point the input's `aria-describedby` at it.\n */\nexport function PasswordStrengthMeter({\n  value,\n  score: scoreProp,\n  minLength = DEFAULT_MIN_LENGTH,\n  showRequirements = true,\n  maxBytes,\n  labels: labelsProp,\n  className,\n  ...rest\n}: PasswordStrengthMeterProps) {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  const labels = useKitLabels(\"passwordStrength\", DEFAULT_PASSWORD_STRENGTH_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n\n  const empty = value.length === 0;\n  const score = empty ? 0 : scoreProp ? scoreProp(value) : scorePassword(value, { minLength });\n  const level = labels[LEVEL_KEYS[score]];\n\n  // Speak on a CHANGE of level only — not on every keystroke, and not on mount (a\n  // prefilled field has not changed anything). Clearing the field says nothing: the\n  // user did that on purpose and the meter disappearing is the whole news.\n  const previous = useRef(score);\n  useEffect(() => {\n    if (previous.current === score) return;\n    previous.current = score;\n    if (!empty) announce(labels.announcement(level));\n  }, [score, empty, level, labels, announce]);\n\n  const rules = passwordRules(value, { minLength });\n  const ruleText: Record<PasswordRuleId, string> = {\n    length: labels.ruleLength(minLength),\n    case: labels.ruleCase,\n    digit: labels.ruleDigit,\n    symbol: labels.ruleSymbol,\n  };\n  const tooLong = maxBytes !== undefined && passwordByteLength(value) > maxBytes;\n\n  return (\n    <div {...rest} className={cn(\"mt-1.5 space-y-1\", className)}>\n      {/* Rendered from the start and never unmounted — see useAnnounce. */}\n      <div {...regionProps} />\n      {!empty && (\n        <>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex flex-1 gap-1\" aria-hidden=\"true\" data-score={score}>\n              {[1, 2, 3, 4].map((step) => (\n                <div\n                  key={step}\n                  className={cn(\n                    \"h-1 flex-1 rounded-full\",\n                    step <= score ? FILL[score] : \"bg-[var(--border)]\",\n                  )}\n                />\n              ))}\n            </div>\n            <p className=\"min-w-[4.5rem] text-end text-xs text-secondary\">{level}</p>\n          </div>\n          {showRequirements && (\n            <ul className=\"flex flex-wrap gap-x-3 gap-y-0.5 text-xs\">\n              {rules.map((r) => (\n                <li\n                  key={r.id}\n                  // `relative`: the sr-only state needs a local containing block.\n                  className={cn(\n                    \"relative\",\n                    r.met ? \"text-success\" : \"text-muted\",\n                  )}\n                  data-met={r.met}\n                >\n                  <span className=\"sr-only\">{r.met ? labels.met : labels.notMet} </span>\n                  <span aria-hidden=\"true\">{r.met ? \"✓\" : \"○\"}</span>{\" \"}\n                  {r.required ? ruleText[r.id] : labels.optional(ruleText[r.id])}\n                </li>\n              ))}\n            </ul>\n          )}\n          {tooLong && <p className=\"text-xs text-danger\">{labels.tooLong(maxBytes)}</p>}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/password-strength.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport type { ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { DEFAULT_PASSWORD_STRENGTH_LABELS } from \"./password-strength-labels\";\n\n/**\n * The bar, the word and the advisory checklist under a field where someone is\n * CHOOSING a secret.\n *\n * Ported from Keksdose (`features/auth/password-strength-meter.tsx`), where one meter\n * sits under the sign-in password and the encryption passphrase alike — a copy per\n * form is what had let the passphrase dialogs ship with no meter at all. Three things\n * changed on the way in:\n *\n *  1. **Tokens, not palette.** The four fills were red/amber/lime/emerald utilities;\n *     they are `--danger` → `--warning` → `--success` now, so a consumer re-pointing\n *     those families re-skins the meter with them.\n *  2. **Not colour alone.** The level is always written out beside the bar, and each\n *     checklist item says \"met\" / \"not met\" to a screen reader — the ✓/○ glyphs are\n *     decoration and hidden.\n *  3. **Announced.** A level change is spoken through a polite live region\n *     ({@link useAnnounce}); the bar itself is `aria-hidden`, because four coloured\n *     strips read out as four empty groups.\n *\n * Advisory only, as in Keksdose: nothing here blocks a submit. The caller decides what\n * is required — {@link passwordRules} marks `length` as the one rule that usually is,\n * so a form can gate on it with the same function the checklist draws from.\n *\n * Dependency-free on purpose. zxcvbn is ~400 kB of dictionaries, and neither consumer\n * ships it; a host that does can pass its scorer as `score` and keep the rest.\n */\n\n/* ── The scorer ──────────────────────────────────────────────────────────── */\n\n/** 0 = too short (or empty), 4 = strong. */\nexport type PasswordStrengthScore = 0 | 1 | 2 | 3 | 4;\n\nexport type PasswordRuleId = \"length\" | \"case\" | \"digit\" | \"symbol\";\n\nexport interface PasswordRule {\n  id: PasswordRuleId;\n  met: boolean;\n  /** Only `length` is required; the rest are suggestions. */\n  required: boolean;\n}\n\nexport interface PasswordScoreOptions {\n  /** The length below which a secret is \"too short\", whatever else it has. Keep it\n   *  in step with the server's own minimum. Default 8. */\n  minLength?: number;\n}\n\nconst DEFAULT_MIN_LENGTH = 8;\n\n/** The checklist's rules, evaluated. Pure; the order is the order they are shown in. */\nexport function passwordRules(\n  value: string,\n  { minLength = DEFAULT_MIN_LENGTH }: PasswordScoreOptions = {},\n): PasswordRule[] {\n  return [\n    // Code points, not UTF-16 units: an emoji is one character to the person typing it.\n    { id: \"length\", met: [...value].length >= minLength, required: true },\n    { id: \"case\", met: /\\p{Ll}/u.test(value) && /\\p{Lu}/u.test(value), required: false },\n    { id: \"digit\", met: /\\p{Nd}/u.test(value), required: false },\n    { id: \"symbol\", met: /[^\\p{L}\\p{N}\\s]/u.test(value), required: false },\n  ];\n}\n\n/**\n * A 0–4 strength bucket. Length dominates, because it genuinely dominates real-world\n * guessing cost: one step each at `minLength`, `minLength + 4` and `minLength + 8`,\n * and one more for at least two of the three variety rules.\n *\n * One addition over Keksdose's curve: a secret with fewer than four DISTINCT\n * characters caps at 1. Sixteen `a`s are long, and nothing about them is strong.\n */\nexport function scorePassword(value: string, options: PasswordScoreOptions = {}): PasswordStrengthScore {\n  const minLength = options.minLength ?? DEFAULT_MIN_LENGTH;\n  const chars = [...value];\n  // Under the minimum is never anything but \"too short\", however varied.\n  if (chars.length === 0 || chars.length < minLength) return 0;\n  let score = 1;\n  if (chars.length >= minLength + 4) score += 1;\n  if (chars.length >= minLength + 8) score += 1;\n  const variety = passwordRules(value, { minLength }).filter((r) => !r.required && r.met).length;\n  if (variety >= 2) score += 1;\n  if (new Set(chars).size < 4) score = 1;\n  return Math.min(score, 4) as PasswordStrengthScore;\n}\n\n/** UTF-8 byte length — what a bcrypt-style ceiling counts. \"ü\" is two, an emoji four. */\nexport function passwordByteLength(value: string): number {\n  return new TextEncoder().encode(value).length;\n}\n\n/* ── Labels ──────────────────────────────────────────────────────────────── */\n\n/** Every string the meter renders or speaks. */\nexport interface PasswordStrengthLabels {\n  /** The five level names, shown beside the bar. Score 0 … 4. */\n  tooShort: string;\n  weak: string;\n  fair: string;\n  good: string;\n  strong: string;\n  /** What the live region says when the level changes, given the level's name. */\n  announcement: (level: string) => string;\n  /** The length rule, given the minimum. */\n  ruleLength: (minLength: number) => string;\n  ruleCase: string;\n  ruleDigit: string;\n  ruleSymbol: string;\n  /** A suggestion rather than a requirement, given the rule's text. */\n  optional: (rule: string) => string;\n  /** Screen-reader-only state before each checklist item — the ✓/○ are hidden. */\n  met: string;\n  notMet: string;\n  /** Shown when the value is over `maxBytes`, given that ceiling. */\n  tooLong: (maxBytes: number) => string;\n}\n\n// Defined in ./password-strength-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PASSWORD_STRENGTH_LABELS };\n\nconst LEVEL_KEYS = [\"tooShort\", \"weak\", \"fair\", \"good\", \"strong\"] as const;\n\n/* ── The meter ───────────────────────────────────────────────────────────── */\n\n// The filled segments' colour per score. \"Good\" sits between the warning and the\n// success hue rather than borrowing either, so 3 and 4 differ in colour as well as in\n// segment count. Index 0 is never drawn — a too-short secret fills no segment.\nconst FILL: Record<PasswordStrengthScore, string> = {\n  0: \"\",\n  1: \"bg-danger\",\n  2: \"bg-warning\",\n  3: \"bg-[color-mix(in_oklab,var(--success)_60%,var(--warning))]\",\n  4: \"bg-success\",\n};\n\nexport interface PasswordStrengthMeterProps extends ComponentPropsWithRef<\"div\"> {\n  /** The secret being chosen. Nothing visible renders while it is empty. */\n  value: string;\n  /** Replace the built-in scorer (e.g. with zxcvbn's `score`). Must be pure. */\n  score?: (value: string) => PasswordStrengthScore;\n  /** See {@link PasswordScoreOptions.minLength}. Drives the built-in scorer and the\n   *  length rule's text. */\n  minLength?: number;\n  /** Show the checklist under the bar. Default `true`. */\n  showRequirements?: boolean;\n  /**\n   * A byte ceiling to warn about, if the secret has one — bcrypt reads at most 72\n   * BYTES. Leave it unset for a secret that has none (a passphrase stretched in the\n   * browser): inventing one talks people out of the long passphrase they chose.\n   */\n  maxBytes?: number;\n  /** User-facing strings; see {@link PasswordStrengthLabels}. */\n  labels?: LabelOverride<PasswordStrengthLabels>;\n}\n\n/**\n * Render directly under the password field. To have the field itself describe its\n * strength, give this an `id` and point the input's `aria-describedby` at it.\n */\nexport function PasswordStrengthMeter({\n  value,\n  score: scoreProp,\n  minLength = DEFAULT_MIN_LENGTH,\n  showRequirements = true,\n  maxBytes,\n  labels: labelsProp,\n  className,\n  ...rest\n}: PasswordStrengthMeterProps) {\n  // Prop > <UiKitProvider> > English, like every labelled component in the kit.\n  const labels = useKitLabels(\"passwordStrength\", DEFAULT_PASSWORD_STRENGTH_LABELS, labelsProp);\n  const { announce, regionProps } = useAnnounce();\n\n  const empty = value.length === 0;\n  const score = empty ? 0 : scoreProp ? scoreProp(value) : scorePassword(value, { minLength });\n  const level = labels[LEVEL_KEYS[score]];\n\n  // Speak on a CHANGE of level only — not on every keystroke, and not on mount (a\n  // prefilled field has not changed anything). Clearing the field says nothing: the\n  // user did that on purpose and the meter disappearing is the whole news.\n  const previous = useRef(score);\n  useEffect(() => {\n    if (previous.current === score) return;\n    previous.current = score;\n    if (!empty) announce(labels.announcement(level));\n  }, [score, empty, level, labels, announce]);\n\n  const rules = passwordRules(value, { minLength });\n  const ruleText: Record<PasswordRuleId, string> = {\n    length: labels.ruleLength(minLength),\n    case: labels.ruleCase,\n    digit: labels.ruleDigit,\n    symbol: labels.ruleSymbol,\n  };\n  const tooLong = maxBytes !== undefined && passwordByteLength(value) > maxBytes;\n\n  return (\n    <div {...rest} className={cn(\"mt-1.5 space-y-1\", className)}>\n      {/* Rendered from the start and never unmounted — see useAnnounce. */}\n      <div {...regionProps} />\n      {!empty && (\n        <>\n          <div className=\"flex items-center gap-2\">\n            <div className=\"flex flex-1 gap-1\" aria-hidden=\"true\" data-score={score}>\n              {[1, 2, 3, 4].map((step) => (\n                <div\n                  key={step}\n                  className={cn(\"h-1 flex-1 rounded-full\", step <= score ? FILL[score] : \"bg-[var(--border)]\")}\n                />\n              ))}\n            </div>\n            <p className=\"min-w-[4.5rem] text-end text-xs text-secondary\">{level}</p>\n          </div>\n          {showRequirements && (\n            <ul className=\"flex flex-wrap gap-x-3 gap-y-0.5 text-xs\">\n              {rules.map((r) => (\n                <li\n                  key={r.id}\n                  // `relative`: the sr-only state needs a local containing block.\n                  className={cn(\"relative\", r.met ? \"text-success\" : \"text-muted\")}\n                  data-met={r.met}\n                >\n                  <span className=\"sr-only\">{r.met ? labels.met : labels.notMet} </span>\n                  <span aria-hidden=\"true\">{r.met ? \"✓\" : \"○\"}</span>{\" \"}\n                  {r.required ? ruleText[r.id] : labels.optional(ruleText[r.id])}\n                </li>\n              ))}\n            </ul>\n          )}\n          {tooLong && <p className=\"text-xs text-danger\">{labels.tooLong(maxBytes)}</p>}\n        </>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/phone-input.js

@@ -3,14 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
-import {
-  PHONE_COUNTRIES,
-  PHONE_DIAL_CODES,
-  formatNationalPhone,
-  formatPhone,
-  isE164,
-  parsePhone
-} from "../lib/phone.js";
+import { PHONE_COUNTRIES, PHONE_DIAL_CODES, formatNationalPhone, formatPhone, isE164, parsePhone } from "../lib/phone.js";
 import { useFieldMessages } from "./field-parts.js";
 import { Input } from "./input.js";
 import { Select } from "./select.js";
@@ -115,55 +108,47 @@ function PhoneInput({
     ariaInvalid: rest["aria-invalid"]
   });
   const named = typeof label === "string" && label !== "";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      role: named ? "group" : void 0,
-      "aria-label": named ? label : void 0,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2 large:max-sm:flex-wrap", children: [
-          /* @__PURE__ */ jsxs(
-            Select,
-            {
-              "aria-label": text.countryCode,
-              value: country,
-              disabled,
-              onChange: (e) => handleCountry(e.target.value),
-              className: "w-28 shrink-0",
-              selectClassName: "h-full tabular-nums",
-              children: [
-                options.map((code) => /* @__PURE__ */ jsx("option", { value: code, children: `${code} +${PHONE_DIAL_CODES[code]}` }, code)),
-                /* @__PURE__ */ jsx("option", { value: "other", children: text.other })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 large:max-sm:basis-full", children: /* @__PURE__ */ jsx(
-            Input,
-            {
-              ref,
-              ...rest,
-              type: "tel",
-              autoComplete: rest.autoComplete ?? "tel",
-              label,
-              hint: messages.labelHint,
-              invalid: messages.isInvalid,
-              "aria-describedby": messages.describedBy,
-              disabled,
-              value: display,
-              onChange: handleChange,
-              onBlur: (e) => {
-                setDraft(null);
-                onBlur?.(e);
-              },
-              inputClassName: cn("tabular-nums", inputClassName)
-            }
-          ) })
-        ] }),
-        messages.below
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className, role: named ? "group" : void 0, "aria-label": named ? label : void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-stretch gap-2 large:max-sm:flex-wrap", children: [
+      /* @__PURE__ */ jsxs(
+        Select,
+        {
+          "aria-label": text.countryCode,
+          value: country,
+          disabled,
+          onChange: (e) => handleCountry(e.target.value),
+          className: "w-28 shrink-0",
+          selectClassName: "h-full tabular-nums",
+          children: [
+            options.map((code) => /* @__PURE__ */ jsx("option", { value: code, children: `${code} +${PHONE_DIAL_CODES[code]}` }, code)),
+            /* @__PURE__ */ jsx("option", { value: "other", children: text.other })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 large:max-sm:basis-full", children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref,
+          ...rest,
+          type: "tel",
+          autoComplete: rest.autoComplete ?? "tel",
+          label,
+          hint: messages.labelHint,
+          invalid: messages.isInvalid,
+          "aria-describedby": messages.describedBy,
+          disabled,
+          value: display,
+          onChange: handleChange,
+          onBlur: (e) => {
+            setDraft(null);
+            onBlur?.(e);
+          },
+          inputClassName: cn("tabular-nums", inputClassName)
+        }
+      ) })
+    ] }),
+    messages.below
+  ] });
 }
 export {
   DEFAULT_PHONE_INPUT_LABELS,

package/dist/components/phone-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport {\n  PHONE_COUNTRIES,\n  PHONE_DIAL_CODES,\n  formatNationalPhone,\n  formatPhone,\n  isE164,\n  parsePhone,\n} from \"../lib/phone\";\nimport type { ParsedPhone, PhoneCountry, PhoneCountryCode } from \"../lib/phone\";\nimport { useFieldMessages } from \"./field-parts\";\nimport { Input, type InputProps } from \"./input\";\nimport { Select } from \"./select\";\nimport { DEFAULT_PHONE_INPUT_LABELS } from \"./phone-input-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link PhoneInput} renders on its own behalf. */\nexport interface PhoneInputLabels {\n  /** The country-code select's accessible name. */\n  countryCode: string;\n  /** The select's last option: a number from a country not listed, typed with its\n   *  own \"+\". */\n  other: string;\n}\n\n// Defined in ./phone-input-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PHONE_INPUT_LABELS };\n\n/**\n * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {\n  const labels: PhoneInputLabels = useKitLabels(\"phoneInput\", DEFAULT_PHONE_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** A stored value read back: an E.164 number these rules can read, else `null`. */\nfunction storedNumber(value: string): ParsedPhone | null {\n  return isE164(value) ? parsePhone(value, \"other\") : null;\n}\n\n/** The select's country for a stored E.164 value, or `null` for free text. */\nfunction countryOf(value: string): PhoneCountry | null {\n  const parsed = storedNumber(value);\n  return parsed ? (parsed.country ?? \"other\") : null;\n}\n\n/** What the field emits for typed text: E.164 when it reads, the text unchanged when\n *  it does not. */\nfunction emitFor(raw: string, country: PhoneCountry): string {\n  return parsePhone(raw, country)?.e164 ?? raw;\n}\n\n/**\n * The text a stored value shows, outside of typing. Under its own country: the national\n * number grouped (\"21 000 00 01\" beside \"CH +41\"). Under another (a \"+33\" number while\n * the select says \"Other\"): the whole international number. Free text: as it is.\n */\nfunction displayOf(value: string, country: PhoneCountry): string {\n  const parsed = storedNumber(value);\n  if (!parsed) return value;\n  if (parsed.country !== null && parsed.country === country) {\n    return formatNationalPhone(parsed.national, parsed.country);\n  }\n  return formatPhone(parsed.e164);\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface PhoneInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The number: E.164 (\"+41210000001\") for one the field could read, or free text —\n   *  a value saved before the field existed is shown exactly as it is. `\"\"` is no\n   *  number. */\n  value: string;\n  /** On every change: E.164 when the typed text reads as a number of the selected\n   *  country (or carries its own \"+\"), otherwise the typed text UNCHANGED. Nothing is\n   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;\n   *  bind this one to a form. */\n  onValueChange?: (value: string) => void;\n  /** The country a number typed without \"+\" belongs to, until the value says\n   *  otherwise. Default `\"CH\"`. */\n  defaultCountry?: PhoneCountry;\n  /** The countries the select offers, in order; \"Other\" always follows. Default\n   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country\n   *  left out still shows under its own code. */\n  countries?: readonly PhoneCountryCode[];\n  /** See {@link PhoneInputLabels}. */\n  labels?: LabelOverride<PhoneInputLabels>;\n  /** Classes for the whole field — the select, the input and the lines under them.\n   *  `inputClassName` reaches the `<input>`. */\n  className?: string;\n}\n\n/**\n * A phone number field (kastlan): a country-code select and the number, stored as\n * E.164 and shown grouped.\n *\n * kastlan's contacts kept whatever was typed — \"079 …\", \"+41 (0)79 …\", \"0041 79 …\" —\n * which nobody could dial from the app or match against the next import. This field\n * turns all of those into one stored form, \"+41210000001\", without taking anything\n * away from the person typing:\n *\n *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT\n *    and \"Other\") says which country a number without \"+\" belongs to; the national\n *    trunk 0 may be typed or left out. Typing a \"+\" or \"00\" overrides it, and the\n *    select follows the number (\"+49 …\" switches it to DE). Changing the select moves\n *    the national number to the new country code.\n *  - **E.164 when it reads, the text when it does not.** A number the rules read is\n *    emitted as E.164; anything else (\"ask reception\", an extension) is emitted exactly\n *    as typed. Never refused, never an error of its own: a contact's number is often\n *    known only roughly, and a field that will not save \"079 … (mornings)\" makes\n *    people type it into the notes instead. An app that needs a dialable number\n *    checks {@link isE164} on submit.\n *  - **Existing values untouched.** A free-text value from before is shown exactly as\n *    it is, and normalised only when someone edits it — the field never rewrites a\n *    record just by being opened.\n *  - **Grouped when settled.** While typing the field shows what was typed; on blur a\n *    number it read is regrouped by its country (\"21 000 00 01\").\n *\n * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in\n * every bundle): the six countries have light rules (the trunk 0, a plausible length)\n * and every other country is any \"+\" with 8–15 digits. A well-formed number that does\n * not exist passes, and German and Austrian landlines, whose area codes vary in length,\n * are grouped only where the split is known (mobile prefixes, the largest cities) and\n * otherwise shown as one block. See `lib/phone.ts`.\n *\n * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in\n * the number's box, and a text hint and the error go under the whole row, attached to\n * the number with `aria-describedby`. The select is named by `labels.countryCode`, and\n * the pair is a group named by a string `label`.\n */\nexport function PhoneInput({\n  ref,\n  value,\n  onValueChange,\n  onChange,\n  onBlur,\n  defaultCountry = \"CH\",\n  countries = PHONE_COUNTRIES,\n  labels,\n  className,\n  inputClassName,\n  label,\n  hint,\n  help,\n  error,\n  invalid,\n  disabled,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: PhoneInputProps) {\n  const text = usePhoneInputLabels(labels);\n  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);\n  // What was typed, shown for as long as it still reads as the value (AmountInput's\n  // draft): the person's own spacing stays under their fingers, and is regrouped on\n  // blur.\n  const [draft, setDraft] = useState<string | null>(null);\n  // The last value this field emitted, to tell its own echo from a value set outside.\n  const [emitted, setEmitted] = useState<string | null>(null);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (value !== emitted) {\n      // Set from outside (a reset, another record): its own country, none of our text.\n      const own = countryOf(value);\n      if (own) setCountry(own);\n      setDraft(null);\n    }\n  }\n\n  const emit = (next: string) => {\n    setEmitted(next);\n    onValueChange?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const raw = e.target.value;\n    setDraft(raw);\n    const parsed = parsePhone(raw, country);\n    // A number typed with its own \"+\" takes the select with it.\n    if (parsed && parsed.country !== country) setCountry(parsed.country ?? \"other\");\n    emit(parsed?.e164 ?? raw);\n  };\n\n  const handleCountry = (next: PhoneCountry) => {\n    setCountry(next);\n    const stored = storedNumber(value);\n    if (stored) {\n      // \"Other\", the same country, or a generic number with its own \"+\": the number\n      // stays, only the way it is shown changes.\n      if (next === \"other\" || stored.country === null || stored.country === next) {\n        setDraft(null);\n        return;\n      }\n      // A different listed country: the national number moves to its code. If it does\n      // not read there, the digits are kept as text for the person to finish.\n      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);\n      setDraft(null);\n      return;\n    }\n    // Free text (or a draft): read it again under the new country.\n    const source = draft ?? value;\n    const parsed = source.trim() === \"\" ? null : parsePhone(source, next);\n    if (parsed && parsed.e164 !== value) {\n      setDraft(source);\n      emit(parsed.e164);\n    }\n  };\n\n  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);\n\n  // The select offers the configured countries, plus the stored number's own if it\n  // is not among them — a select cannot show a value it has no option for.\n  const options: PhoneCountryCode[] = [...countries];\n  if (country !== \"other\" && !options.includes(country)) options.push(country);\n\n  // A FieldHint \"?\" rides the number's label line; text — and a FieldHint at Large and\n  // on touch (§4) — goes under the whole row with the error. Through useFieldMessages\n  // since 0.34, not a copy of its rule (DUP-2, DUP-8).\n  const messages = useFieldMessages({\n    hint,\n    // The number's label line takes the help's \"?\" (0.36); the hint is then the caption.\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid: rest[\"aria-invalid\"],\n  });\n  const named = typeof label === \"string\" && label !== \"\";\n\n  return (\n    <div\n      className={className}\n      role={named ? \"group\" : undefined}\n      aria-label={named ? label : undefined}\n    >\n      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,\n          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing\n          truncates\"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left\n          the number 82 px — \"Ph…\" over \"021 (\". `large:max-sm:`, the scaled phone width,\n          so a wider screen at Large and Normal keep the one row. */}\n      <div className=\"flex items-stretch gap-2 large:max-sm:flex-wrap\">\n        <Select\n          aria-label={text.countryCode}\n          value={country}\n          disabled={disabled}\n          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}\n          className=\"w-28 shrink-0\"\n          // Stretched to the number's height: a labelled field is taller than an\n          // unlabelled select, and the pair should read as one row.\n          selectClassName=\"h-full tabular-nums\"\n        >\n          {options.map((code) => (\n            <option key={code} value={code}>\n              {`${code} +${PHONE_DIAL_CODES[code]}`}\n            </option>\n          ))}\n          <option value=\"other\">{text.other}</option>\n        </Select>\n        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}\n        <div className=\"min-w-0 flex-1 large:max-sm:basis-full\">\n          <Input\n            ref={ref}\n            {...rest}\n            type=\"tel\"\n            autoComplete={rest.autoComplete ?? \"tel\"}\n            label={label}\n            hint={messages.labelHint}\n            invalid={messages.isInvalid}\n            aria-describedby={messages.describedBy}\n            disabled={disabled}\n            value={display}\n            onChange={handleChange}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              setDraft(null);\n              onBlur?.(e);\n            }}\n            inputClassName={cn(\"tabular-nums\", inputClassName)}\n          />\n        </div>\n      </div>\n      {messages.below}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/phone-input.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ChangeEvent, FocusEvent } from \"react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { PHONE_COUNTRIES, PHONE_DIAL_CODES, formatNationalPhone, formatPhone, isE164, parsePhone } from \"../lib/phone\";\nimport type { ParsedPhone, PhoneCountry, PhoneCountryCode } from \"../lib/phone\";\nimport { useFieldMessages } from \"./field-parts\";\nimport { Input, type InputProps } from \"./input\";\nimport { Select } from \"./select\";\nimport { DEFAULT_PHONE_INPUT_LABELS } from \"./phone-input-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link PhoneInput} renders on its own behalf. */\nexport interface PhoneInputLabels {\n  /** The country-code select's accessible name. */\n  countryCode: string;\n  /** The select's last option: a number from a country not listed, typed with its\n   *  own \"+\". */\n  other: string;\n}\n\n// Defined in ./phone-input-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_PHONE_INPUT_LABELS };\n\n/**\n * The `phoneInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction usePhoneInputLabels(prop: Partial<PhoneInputLabels> | undefined): PhoneInputLabels {\n  const labels: PhoneInputLabels = useKitLabels(\"phoneInput\", DEFAULT_PHONE_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\n/** A stored value read back: an E.164 number these rules can read, else `null`. */\nfunction storedNumber(value: string): ParsedPhone | null {\n  return isE164(value) ? parsePhone(value, \"other\") : null;\n}\n\n/** The select's country for a stored E.164 value, or `null` for free text. */\nfunction countryOf(value: string): PhoneCountry | null {\n  const parsed = storedNumber(value);\n  return parsed ? (parsed.country ?? \"other\") : null;\n}\n\n/** What the field emits for typed text: E.164 when it reads, the text unchanged when\n *  it does not. */\nfunction emitFor(raw: string, country: PhoneCountry): string {\n  return parsePhone(raw, country)?.e164 ?? raw;\n}\n\n/**\n * The text a stored value shows, outside of typing. Under its own country: the national\n * number grouped (\"21 000 00 01\" beside \"CH +41\"). Under another (a \"+33\" number while\n * the select says \"Other\"): the whole international number. Free text: as it is.\n */\nfunction displayOf(value: string, country: PhoneCountry): string {\n  const parsed = storedNumber(value);\n  if (!parsed) return value;\n  if (parsed.country !== null && parsed.country === country) {\n    return formatNationalPhone(parsed.national, parsed.country);\n  }\n  return formatPhone(parsed.e164);\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface PhoneInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The number: E.164 (\"+41210000001\") for one the field could read, or free text —\n   *  a value saved before the field existed is shown exactly as it is. `\"\"` is no\n   *  number. */\n  value: string;\n  /** On every change: E.164 when the typed text reads as a number of the selected\n   *  country (or carries its own \"+\"), otherwise the typed text UNCHANGED. Nothing is\n   *  refused — see {@link PhoneInput}. Plain `onChange` still fires with the raw event;\n   *  bind this one to a form. */\n  onValueChange?: (value: string) => void;\n  /** The country a number typed without \"+\" belongs to, until the value says\n   *  otherwise. Default `\"CH\"`. */\n  defaultCountry?: PhoneCountry;\n  /** The countries the select offers, in order; \"Other\" always follows. Default\n   *  {@link PHONE_COUNTRIES} (CH, LI, DE, AT, FR, IT). A stored number from a country\n   *  left out still shows under its own code. */\n  countries?: readonly PhoneCountryCode[];\n  /** See {@link PhoneInputLabels}. */\n  labels?: LabelOverride<PhoneInputLabels>;\n  /** Classes for the whole field — the select, the input and the lines under them.\n   *  `inputClassName` reaches the `<input>`. */\n  className?: string;\n}\n\n/**\n * A phone number field (kastlan): a country-code select and the number, stored as\n * E.164 and shown grouped.\n *\n * kastlan's contacts kept whatever was typed — \"079 …\", \"+41 (0)79 …\", \"0041 79 …\" —\n * which nobody could dial from the app or match against the next import. This field\n * turns all of those into one stored form, \"+41210000001\", without taking anything\n * away from the person typing:\n *\n *  - **A country to type against.** The select (default CH, then LI, DE, AT, FR, IT\n *    and \"Other\") says which country a number without \"+\" belongs to; the national\n *    trunk 0 may be typed or left out. Typing a \"+\" or \"00\" overrides it, and the\n *    select follows the number (\"+49 …\" switches it to DE). Changing the select moves\n *    the national number to the new country code.\n *  - **E.164 when it reads, the text when it does not.** A number the rules read is\n *    emitted as E.164; anything else (\"ask reception\", an extension) is emitted exactly\n *    as typed. Never refused, never an error of its own: a contact's number is often\n *    known only roughly, and a field that will not save \"079 … (mornings)\" makes\n *    people type it into the notes instead. An app that needs a dialable number\n *    checks {@link isE164} on submit.\n *  - **Existing values untouched.** A free-text value from before is shown exactly as\n *    it is, and normalised only when someone edits it — the field never rewrites a\n *    record just by being opened.\n *  - **Grouped when settled.** While typing the field shows what was typed; on blur a\n *    number it read is regrouped by its country (\"21 000 00 01\").\n *\n * **The limitation** — there is no libphonenumber behind this (≈150 kB of metadata in\n * every bundle): the six countries have light rules (the trunk 0, a plausible length)\n * and every other country is any \"+\" with 8–15 digits. A well-formed number that does\n * not exist passes, and German and Austrian landlines, whose area codes vary in length,\n * are grouped only where the split is known (mobile prefixes, the largest cities) and\n * otherwise shown as one block. See `lib/phone.ts`.\n *\n * `label`, `hint`, `error` and `invalid` read as on {@link Input}: the label floats in\n * the number's box, and a text hint and the error go under the whole row, attached to\n * the number with `aria-describedby`. The select is named by `labels.countryCode`, and\n * the pair is a group named by a string `label`.\n */\nexport function PhoneInput({\n  ref,\n  value,\n  onValueChange,\n  onChange,\n  onBlur,\n  defaultCountry = \"CH\",\n  countries = PHONE_COUNTRIES,\n  labels,\n  className,\n  inputClassName,\n  label,\n  hint,\n  help,\n  error,\n  invalid,\n  disabled,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: PhoneInputProps) {\n  const text = usePhoneInputLabels(labels);\n  const [country, setCountry] = useState<PhoneCountry>(() => countryOf(value) ?? defaultCountry);\n  // What was typed, shown for as long as it still reads as the value (AmountInput's\n  // draft): the person's own spacing stays under their fingers, and is regrouped on\n  // blur.\n  const [draft, setDraft] = useState<string | null>(null);\n  // The last value this field emitted, to tell its own echo from a value set outside.\n  const [emitted, setEmitted] = useState<string | null>(null);\n  const [seen, setSeen] = useState(value);\n  if (seen !== value) {\n    setSeen(value);\n    if (value !== emitted) {\n      // Set from outside (a reset, another record): its own country, none of our text.\n      const own = countryOf(value);\n      if (own) setCountry(own);\n      setDraft(null);\n    }\n  }\n\n  const emit = (next: string) => {\n    setEmitted(next);\n    onValueChange?.(next);\n  };\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const raw = e.target.value;\n    setDraft(raw);\n    const parsed = parsePhone(raw, country);\n    // A number typed with its own \"+\" takes the select with it.\n    if (parsed && parsed.country !== country) setCountry(parsed.country ?? \"other\");\n    emit(parsed?.e164 ?? raw);\n  };\n\n  const handleCountry = (next: PhoneCountry) => {\n    setCountry(next);\n    const stored = storedNumber(value);\n    if (stored) {\n      // \"Other\", the same country, or a generic number with its own \"+\": the number\n      // stays, only the way it is shown changes.\n      if (next === \"other\" || stored.country === null || stored.country === next) {\n        setDraft(null);\n        return;\n      }\n      // A different listed country: the national number moves to its code. If it does\n      // not read there, the digits are kept as text for the person to finish.\n      emit(parsePhone(stored.national, next)?.e164 ?? stored.national);\n      setDraft(null);\n      return;\n    }\n    // Free text (or a draft): read it again under the new country.\n    const source = draft ?? value;\n    const parsed = source.trim() === \"\" ? null : parsePhone(source, next);\n    if (parsed && parsed.e164 !== value) {\n      setDraft(source);\n      emit(parsed.e164);\n    }\n  };\n\n  const display = draft !== null && emitFor(draft, country) === value ? draft : displayOf(value, country);\n\n  // The select offers the configured countries, plus the stored number's own if it\n  // is not among them — a select cannot show a value it has no option for.\n  const options: PhoneCountryCode[] = [...countries];\n  if (country !== \"other\" && !options.includes(country)) options.push(country);\n\n  // A FieldHint \"?\" rides the number's label line; text — and a FieldHint at Large and\n  // on touch (§4) — goes under the whole row with the error. Through useFieldMessages\n  // since 0.34, not a copy of its rule (DUP-2, DUP-8).\n  const messages = useFieldMessages({\n    hint,\n    // The number's label line takes the help's \"?\" (0.36); the hint is then the caption.\n    help,\n    name: label ?? rest[\"aria-label\"],\n    error,\n    invalid,\n    describedBy: ariaDescribedBy,\n    ariaInvalid: rest[\"aria-invalid\"],\n  });\n  const named = typeof label === \"string\" && label !== \"\";\n\n  return (\n    <div className={className} role={named ? \"group\" : undefined} aria-label={named ? label : undefined}>\n      {/* On a phone at Large the number takes a line of its own under the country (0.32.1,\n          the 360 px Extra-large sweep; docs/text-size-harmonization.md §4 \"nothing\n          truncates\"): the 7rem select is 168 px at 150 %, and on a 360 px phone it left\n          the number 82 px — \"Ph…\" over \"021 (\". `large:max-sm:`, the scaled phone width,\n          so a wider screen at Large and Normal keep the one row. */}\n      <div className=\"flex items-stretch gap-2 large:max-sm:flex-wrap\">\n        <Select\n          aria-label={text.countryCode}\n          value={country}\n          disabled={disabled}\n          onChange={(e) => handleCountry(e.target.value as PhoneCountry)}\n          className=\"w-28 shrink-0\"\n          // Stretched to the number's height: a labelled field is taller than an\n          // unlabelled select, and the pair should read as one row.\n          selectClassName=\"h-full tabular-nums\"\n        >\n          {options.map((code) => (\n            <option key={code} value={code}>\n              {`${code} +${PHONE_DIAL_CODES[code]}`}\n            </option>\n          ))}\n          <option value=\"other\">{text.other}</option>\n        </Select>\n        {/* Its own flex item, so nothing Input wraps itself in can take the sizing. */}\n        <div className=\"min-w-0 flex-1 large:max-sm:basis-full\">\n          <Input\n            ref={ref}\n            {...rest}\n            type=\"tel\"\n            autoComplete={rest.autoComplete ?? \"tel\"}\n            label={label}\n            hint={messages.labelHint}\n            invalid={messages.isInvalid}\n            aria-describedby={messages.describedBy}\n            disabled={disabled}\n            value={display}\n            onChange={handleChange}\n            onBlur={(e: FocusEvent<HTMLInputElement>) => {\n              setDraft(null);\n              onBlur?.(e);\n            }}\n            inputClassName={cn(\"tabular-nums\", inputClassName)}\n          />\n        </div>\n      </div>\n      {messages.below}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}