@eifi1/ui-kit 0.15.4 → 0.16.0

package/dist/components/passkeys-setting.js

@@ -20,7 +20,9 @@ function PasskeysSetting({
   formatDate,
   locale: localeProp,
   labels: labelsProp,
-  className
+  className,
+  rowProps,
+  ...rest
 }) {
   const labels = useAccountSettingsLabels("passkeys", labelsProp);
   const locale = useKitLocale(localeProp);
@@ -50,6 +52,7 @@ function PasskeysSetting({
           item,
           created: date(item.createdAt),
           lastUsed: date(item.lastUsedAt),
+          attributes: rowProps?.(item),
           busy: busyId !== void 0 && busyId !== null && busyId === item.id,
           onRename,
           onDelete,
@@ -81,18 +84,22 @@ function PasskeysSetting({
       ] })
     ] });
   })();
-  return /* @__PURE__ */ jsxs(Card, { className: cn("p-4 space-y-3", className), children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
-      /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: labels.description })
-    ] }),
-    body
-  ] });
+  return (
+    // `rest` is only `id` and `data-*`: everything else the props name is destructured.
+    /* @__PURE__ */ jsxs(Card, { ...rest, className: cn("p-4 space-y-3", className), children: [
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: labels.title }),
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-[var(--text-muted)]", children: labels.description })
+      ] }),
+      body
+    ] })
+  );
 }
 function PasskeyRow({
   item,
   created,
   lastUsed,
+  attributes,
   busy,
   onRename,
   onDelete,
@@ -138,9 +145,10 @@ function PasskeyRow({
     Promise.resolve(onDelete(item.id)).then(() => setMode("view")).catch(() => {
     });
   };
+  const li = { ...attributes, "data-passkey-id": String(item.id) };
   const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed].filter(Boolean).join(" \xB7 ");
   if (mode === "rename") {
-    return /* @__PURE__ */ jsxs("li", { className: "flex flex-wrap items-center gap-2 py-2", children: [
+    return /* @__PURE__ */ jsxs("li", { ...li, className: "flex flex-wrap items-center gap-2 py-2", children: [
       /* @__PURE__ */ jsx(
         Input,
         {
@@ -167,7 +175,7 @@ function PasskeyRow({
     ] });
   }
   if (mode === "delete") {
-    return /* @__PURE__ */ jsxs("li", { className: "space-y-2 py-2", children: [
+    return /* @__PURE__ */ jsxs("li", { ...li, className: "space-y-2 py-2", children: [
       /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm", children: labels.deleteConfirm(item.name) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
         /* @__PURE__ */ jsx(Button, { size: "sm", variant: "danger", onClick: confirmDelete, onKeyDown: escapeLeaves, disabled: busy, children: labels.confirmDelete }),
@@ -175,7 +183,7 @@ function PasskeyRow({
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 py-2", children: [
+  return /* @__PURE__ */ jsxs("li", { ...li, className: "flex items-center gap-3 py-2", children: [
     /* @__PURE__ */ jsx(KeyRound, { className: "size-4 shrink-0 text-[var(--text-muted)]", "aria-hidden": true }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium", children: item.name }),

package/dist/components/passkeys-setting.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/passkeys-setting.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { KeyRound } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { Button, Card, EmptyState, Input } from \"./ui\";\nimport { Skeleton } from \"./skeleton\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport type { PasskeysSettingLabels } from \"./account-settings-labels\";\n\n/** One registered passkey, as the app's API lists it. */\nexport interface PasskeyItem {\n  id: string | number;\n  name: string;\n  /** A `Date`, an ISO string or epoch ms. */\n  createdAt?: Date | string | number | null;\n  /** Null (or left out) reads as \"Never used\". */\n  lastUsedAt?: Date | string | number | null;\n}\n\nexport interface PasskeysSettingProps {\n  /** `undefined` while the first load is in flight (or pass `loading`). */\n  passkeys: readonly PasskeyItem[] | undefined;\n  loading?: boolean;\n  /**\n   * Run the WebAuthn ceremony and register the passkey — app-side, since the options\n   * and the attestation are the app's server's business. Called with the trimmed name\n   * field, which may be EMPTY: pick your own default (\"Passkey\", the device name).\n   * Return the promise and the field clears when it resolves; a rejection (including\n   * the user cancelling the OS prompt) keeps what was typed.\n   */\n  onAdd: (name: string) => void | Promise<unknown>;\n  /** The ceremony is running. The add button says so and does not start a second one. */\n  adding?: boolean;\n  /** Offer \"Rename\" on each row. Return a promise to leave edit mode only on success. */\n  onRename?: (id: PasskeyItem[\"id\"], name: string) => void | Promise<unknown>;\n  /** Offer \"Delete\" on each row — always behind an inline confirmation. */\n  onDelete?: (id: PasskeyItem[\"id\"]) => void | Promise<unknown>;\n  /** A row whose rename or delete is in flight; its buttons are disabled. */\n  busyId?: PasskeyItem[\"id\"] | null;\n  /** Show the name field above the add button. Default true. */\n  nameField?: boolean;\n  /**\n   * Shown INSTEAD of the list and the add button — passkeys are not supported by this\n   * browser, or the page is not a secure context. Its wording is the app's: only the\n   * app knows which of those it detected.\n   */\n  unavailable?: ReactNode;\n  /** A date for the \"Added …\" / \"Last used …\" lines. Default: the locale's medium date. */\n  formatDate?: (date: Date) => string;\n  /** Overrides the provider's locale for the default date format. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */\n  labels?: Partial<PasskeysSettingLabels>;\n  className?: string;\n}\n\n/**\n * The passkeys section of an account page: what is registered, when it was last used,\n * rename and delete, and \"Add passkey\" — the fourth card beside `ProfileSetting`,\n * `PasswordSetting` and `TwoFactorSetting`, and built the same way (a self-contained\n * `<Card>` owning its transient form state; the app owns the data and the API).\n *\n * Lifted from kastlan's passkeys-card. **The WebAuthn ceremony stays app-side**:\n * `navigator.credentials.create` needs options minted by the app's server and hands\n * back an attestation only that server can verify, so the kit calls `onAdd` and waits.\n *\n * **Delete confirms inline**, in the row, rather than through `useConfirm`: this card\n * must work in an app without a `ConfirmProvider`, and the question belongs next to\n * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the\n * kit, so the Enter that pressed Delete cannot also answer it.\n */\nexport function PasskeysSetting({\n  passkeys,\n  loading,\n  onAdd,\n  adding = false,\n  onRename,\n  onDelete,\n  busyId,\n  nameField = true,\n  unavailable,\n  formatDate,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n}: PasskeysSettingProps) {\n  const labels = useAccountSettingsLabels(\"passkeys\", labelsProp);\n  const locale = useKitLocale(localeProp);\n  const [name, setName] = useState(\"\");\n\n  const date = (value: PasskeyItem[\"createdAt\"]): string | null => {\n    if (value === null || value === undefined || value === \"\") return null;\n    const d = value instanceof Date ? value : new Date(value);\n    if (Number.isNaN(d.getTime())) return null;\n    return formatDate ? formatDate(d) : new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(d);\n  };\n\n  const add = () => {\n    if (adding) return;\n    const typed = name;\n    Promise.resolve(onAdd(typed.trim()))\n      // Clear only what was sent: the field stays editable while the OS prompt is up.\n      .then(() => setName((current) => (current === typed ? \"\" : current)))\n      .catch(() => {});\n  };\n\n  const isLoading = loading || passkeys === undefined;\n  const items = passkeys ?? [];\n\n  const body = (() => {\n    if (unavailable != null && unavailable !== false) {\n      return <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={unavailable} />;\n    }\n    return (\n      <>\n        {isLoading ? (\n          <Skeleton lines={2} label={labels.loading} />\n        ) : items.length === 0 ? (\n          <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={labels.empty} />\n        ) : (\n          <ul aria-label={labels.list} className=\"divide-y divide-[var(--border)]\">\n            {items.map((item) => (\n              <PasskeyRow\n                key={item.id}\n                item={item}\n                created={date(item.createdAt)}\n                lastUsed={date(item.lastUsedAt)}\n                busy={busyId !== undefined && busyId !== null && busyId === item.id}\n                onRename={onRename}\n                onDelete={onDelete}\n                labels={labels}\n              />\n            ))}\n          </ul>\n        )}\n        <div className=\"space-y-2 pt-1\">\n          {nameField && (\n            <Input\n              label={labels.nameLabel}\n              placeholder={labels.namePlaceholder}\n              value={name}\n              maxLength={120}\n              onChange={(e) => setName(e.target.value)}\n              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                  add();\n                }\n              }}\n            />\n          )}\n          <Button onClick={add} disabled={adding} aria-busy={adding || undefined}>\n            <KeyRound className=\"size-4\" aria-hidden />\n            {adding ? labels.adding : labels.add}\n          </Button>\n        </div>\n      </>\n    );\n  })();\n\n  return (\n    <Card className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <div className=\"text-sm font-medium\">{labels.title}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">\n          {labels.description}\n        </div>\n      </div>\n      {body}\n    </Card>\n  );\n}\n\ntype RowMode = \"view\" | \"rename\" | \"delete\";\n\nfunction PasskeyRow({\n  item,\n  created,\n  lastUsed,\n  busy,\n  onRename,\n  onDelete,\n  labels,\n}: {\n  item: PasskeyItem;\n  created: string | null;\n  lastUsed: string | null;\n  busy: boolean;\n  onRename?: PasskeysSettingProps[\"onRename\"];\n  onDelete?: PasskeysSettingProps[\"onDelete\"];\n  labels: PasskeysSettingLabels;\n}) {\n  const [mode, setMode] = useState<RowMode>(\"view\");\n  const [draft, setDraft] = useState(item.name);\n  // Which button opened the sub-mode, so leaving it puts focus back there — the\n  // confirm or the field unmounts under the focus, which otherwise falls to <body>.\n  const [returnTo, setReturnTo] = useState<\"rename\" | \"delete\" | null>(null);\n  const cancelDeleteRef = useRef<HTMLButtonElement>(null);\n  const renameRef = useRef<HTMLInputElement>(null);\n  const renameButtonRef = useRef<HTMLButtonElement>(null);\n  const deleteButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (mode === \"delete\") cancelDeleteRef.current?.focus();\n    else if (mode === \"rename\") renameRef.current?.select();\n    else if (returnTo) (returnTo === \"rename\" ? renameButtonRef : deleteButtonRef).current?.focus();\n  }, [mode, returnTo]);\n\n  const open = (next: \"rename\" | \"delete\") => {\n    setReturnTo(next);\n    setDraft(item.name);\n    setMode(next);\n  };\n  const leave = () => setMode(\"view\");\n  const escapeLeaves = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      e.stopPropagation();\n      leave();\n    }\n  };\n\n  const saveRename = () => {\n    const next = draft.trim();\n    if (!onRename || !next || busy) return;\n    if (next === item.name) {\n      leave();\n      return;\n    }\n    Promise.resolve(onRename(item.id, next))\n      .then(leave)\n      .catch(() => {});\n  };\n\n  const confirmDelete = () => {\n    if (!onDelete || busy) return;\n    // The row unmounts once the list refreshes; on a failure it stays, confirm open.\n    Promise.resolve(onDelete(item.id))\n      .then(() => setMode(\"view\"))\n      .catch(() => {});\n  };\n\n  const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed]\n    .filter(Boolean)\n    .join(\" · \");\n\n  if (mode === \"rename\") {\n    return (\n      <li className=\"flex flex-wrap items-center gap-2 py-2\">\n        <Input\n          ref={renameRef}\n          aria-label={labels.renameField(item.name)}\n          className=\"min-w-0 flex-1\"\n          value={draft}\n          maxLength={120}\n          onChange={(e) => setDraft(e.target.value)}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              saveRename();\n            } else if (e.key === \"Escape\") {\n              e.preventDefault();\n              e.stopPropagation();\n              leave();\n            }\n          }}\n        />\n        <Button size=\"sm\" onClick={saveRename} disabled={busy || !draft.trim()}>\n          {labels.save}\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" onClick={leave}>\n          {labels.cancel}\n        </Button>\n      </li>\n    );\n  }\n\n  if (mode === \"delete\") {\n    return (\n      <li className=\"space-y-2 py-2\">\n        <p role=\"alert\" className=\"text-sm\">\n          {labels.deleteConfirm(item.name)}\n        </p>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button size=\"sm\" variant=\"danger\" onClick={confirmDelete} onKeyDown={escapeLeaves} disabled={busy}>\n            {labels.confirmDelete}\n          </Button>\n          <Button ref={cancelDeleteRef} size=\"sm\" variant=\"ghost\" onClick={leave} onKeyDown={escapeLeaves}>\n            {labels.cancel}\n          </Button>\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li className=\"flex items-center gap-3 py-2\">\n      <KeyRound className=\"size-4 shrink-0 text-[var(--text-muted)]\" aria-hidden />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm font-medium\">{item.name}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">{meta}</div>\n      </div>\n      {onRename && (\n        <Button\n          ref={renameButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={busy}\n          onClick={() => open(\"rename\")}\n          aria-label={labels.renameItem(item.name)}\n        >\n          {labels.rename}\n        </Button>\n      )}\n      {onDelete && (\n        <Button\n          ref={deleteButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          tone=\"danger\"\n          disabled={busy}\n          onClick={() => open(\"delete\")}\n          aria-label={labels.deleteItem(item.name)}\n        >\n          {labels.delete}\n        </Button>\n      )}\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/passkeys-setting.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { KeyRound } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { Button, Card, EmptyState, Input } from \"./ui\";\nimport { Skeleton } from \"./skeleton\";\nimport { useAccountSettingsLabels } from \"./account-settings-labels\";\nimport type { PasskeysSettingLabels } from \"./account-settings-labels\";\n\n/** What a passkey's `id` may be: the app's own key type, string or numeric. */\nexport type PasskeyId = string | number;\n\n/**\n * One registered passkey, as the app's API lists it.\n *\n * Generic in its `id` (0.16.0): `PasskeysSetting` infers `Id` from `passkeys`, so an\n * app whose ids are numbers gets numbers back in `onRename` / `onDelete` — keksdose\n * cast `id as number` in both. Left unparameterised it is the old `string | number`.\n */\nexport interface PasskeyItem<Id extends PasskeyId = PasskeyId> {\n  id: Id;\n  name: string;\n  /** A `Date`, an ISO string or epoch ms. */\n  createdAt?: Date | string | number | null;\n  /** Null (or left out) reads as \"Never used\". */\n  lastUsedAt?: Date | string | number | null;\n}\n\n/** `data-*` attributes, passed through to the element they are given for. */\nexport type PasskeyDataAttributes = { [key: `data-${string}`]: string | number | boolean | undefined };\n\nexport interface PasskeysSettingProps<Id extends PasskeyId = PasskeyId> extends PasskeyDataAttributes {\n  /** `undefined` while the first load is in flight (or pass `loading`). */\n  passkeys: readonly PasskeyItem<Id>[] | undefined;\n  loading?: boolean;\n  /**\n   * Run the WebAuthn ceremony and register the passkey — app-side, since the options\n   * and the attestation are the app's server's business. Called with the trimmed name\n   * field, which may be EMPTY: pick your own default (\"Passkey\", the device name).\n   * Return the promise and the field clears when it resolves; a rejection (including\n   * the user cancelling the OS prompt) keeps what was typed.\n   */\n  onAdd: (name: string) => void | Promise<unknown>;\n  /** The ceremony is running. The add button says so and does not start a second one. */\n  adding?: boolean;\n  /** Offer \"Rename\" on each row. Return a promise to leave edit mode only on success. */\n  onRename?: (id: Id, name: string) => void | Promise<unknown>;\n  /** Offer \"Delete\" on each row — always behind an inline confirmation. */\n  onDelete?: (id: Id) => void | Promise<unknown>;\n  /** A row whose rename or delete is in flight; its buttons are disabled. */\n  busyId?: Id | null;\n  /** Show the name field above the add button. Default true. */\n  nameField?: boolean;\n  /**\n   * Shown INSTEAD of the list and the add button — passkeys are not supported by this\n   * browser, or the page is not a secure context. Its wording is the app's: only the\n   * app knows which of those it detected.\n   */\n  unavailable?: ReactNode;\n  /** A date for the \"Added …\" / \"Last used …\" lines. Default: the locale's medium date. */\n  formatDate?: (date: Date) => string;\n  /** Overrides the provider's locale for the default date format. */\n  locale?: string;\n  /** Prop > `<UiKitProvider labels={{ accountSettings: { passkeys } }}>` > English. */\n  labels?: Partial<PasskeysSettingLabels>;\n  className?: string;\n  /** On the card (0.16.0), for an in-page link (`#passkeys`) or a test hook. `data-*`\n   *  attributes go there too. */\n  id?: string;\n  /** Extra attributes for one row's `<li>` (0.16.0) — an `id` to scroll a just-added\n   *  key into view, `data-*` for a test. Every row also carries `data-passkey-id`. */\n  rowProps?: (item: PasskeyItem<Id>) => ({ id?: string } & PasskeyDataAttributes) | undefined;\n}\n\n/**\n * The passkeys section of an account page: what is registered, when it was last used,\n * rename and delete, and \"Add passkey\" — the fourth card beside `ProfileSetting`,\n * `PasswordSetting` and `TwoFactorSetting`, and built the same way (a self-contained\n * `<Card>` owning its transient form state; the app owns the data and the API).\n *\n * Lifted from kastlan's passkeys-card. **The WebAuthn ceremony stays app-side**:\n * `navigator.credentials.create` needs options minted by the app's server and hands\n * back an attestation only that server can verify, so the kit calls `onAdd` and waits.\n *\n * **Delete confirms inline**, in the row, rather than through `useConfirm`: this card\n * must work in an app without a `ConfirmProvider`, and the question belongs next to\n * the passkey it names. Focus moves to Cancel, as in every destructive confirm in the\n * kit, so the Enter that pressed Delete cannot also answer it.\n */\nexport function PasskeysSetting<Id extends PasskeyId = PasskeyId>({\n  passkeys,\n  loading,\n  onAdd,\n  adding = false,\n  onRename,\n  onDelete,\n  busyId,\n  nameField = true,\n  unavailable,\n  formatDate,\n  locale: localeProp,\n  labels: labelsProp,\n  className,\n  rowProps,\n  ...rest\n}: PasskeysSettingProps<Id>) {\n  const labels = useAccountSettingsLabels(\"passkeys\", labelsProp);\n  const locale = useKitLocale(localeProp);\n  const [name, setName] = useState(\"\");\n\n  const date = (value: PasskeyItem[\"createdAt\"]): string | null => {\n    if (value === null || value === undefined || value === \"\") return null;\n    const d = value instanceof Date ? value : new Date(value);\n    if (Number.isNaN(d.getTime())) return null;\n    return formatDate ? formatDate(d) : new Intl.DateTimeFormat(locale, { dateStyle: \"medium\" }).format(d);\n  };\n\n  const add = () => {\n    if (adding) return;\n    const typed = name;\n    Promise.resolve(onAdd(typed.trim()))\n      // Clear only what was sent: the field stays editable while the OS prompt is up.\n      .then(() => setName((current) => (current === typed ? \"\" : current)))\n      .catch(() => {});\n  };\n\n  const isLoading = loading || passkeys === undefined;\n  const items = passkeys ?? [];\n\n  const body = (() => {\n    if (unavailable != null && unavailable !== false) {\n      return <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={unavailable} />;\n    }\n    return (\n      <>\n        {isLoading ? (\n          <Skeleton lines={2} label={labels.loading} />\n        ) : items.length === 0 ? (\n          <EmptyState variant=\"inline\" size=\"sm\" icon={<KeyRound />} title={labels.empty} />\n        ) : (\n          <ul aria-label={labels.list} className=\"divide-y divide-[var(--border)]\">\n            {items.map((item) => (\n              <PasskeyRow\n                key={item.id}\n                item={item}\n                created={date(item.createdAt)}\n                lastUsed={date(item.lastUsedAt)}\n                attributes={rowProps?.(item)}\n                busy={busyId !== undefined && busyId !== null && busyId === item.id}\n                onRename={onRename}\n                onDelete={onDelete}\n                labels={labels}\n              />\n            ))}\n          </ul>\n        )}\n        <div className=\"space-y-2 pt-1\">\n          {nameField && (\n            <Input\n              label={labels.nameLabel}\n              placeholder={labels.namePlaceholder}\n              value={name}\n              maxLength={120}\n              onChange={(e) => setName(e.target.value)}\n              onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n                if (e.key === \"Enter\") {\n                  e.preventDefault();\n                  add();\n                }\n              }}\n            />\n          )}\n          <Button onClick={add} disabled={adding} aria-busy={adding || undefined}>\n            <KeyRound className=\"size-4\" aria-hidden />\n            {adding ? labels.adding : labels.add}\n          </Button>\n        </div>\n      </>\n    );\n  })();\n\n  return (\n    // `rest` is only `id` and `data-*`: everything else the props name is destructured.\n    <Card {...rest} className={cn(\"p-4 space-y-3\", className)}>\n      <div>\n        <div className=\"text-sm font-medium\">{labels.title}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">\n          {labels.description}\n        </div>\n      </div>\n      {body}\n    </Card>\n  );\n}\n\ntype RowMode = \"view\" | \"rename\" | \"delete\";\n\nfunction PasskeyRow<Id extends PasskeyId>({\n  item,\n  created,\n  lastUsed,\n  attributes,\n  busy,\n  onRename,\n  onDelete,\n  labels,\n}: {\n  item: PasskeyItem<Id>;\n  created: string | null;\n  lastUsed: string | null;\n  attributes?: { id?: string } & PasskeyDataAttributes;\n  busy: boolean;\n  onRename?: PasskeysSettingProps<Id>[\"onRename\"];\n  onDelete?: PasskeysSettingProps<Id>[\"onDelete\"];\n  labels: PasskeysSettingLabels;\n}) {\n  const [mode, setMode] = useState<RowMode>(\"view\");\n  const [draft, setDraft] = useState(item.name);\n  // Which button opened the sub-mode, so leaving it puts focus back there — the\n  // confirm or the field unmounts under the focus, which otherwise falls to <body>.\n  const [returnTo, setReturnTo] = useState<\"rename\" | \"delete\" | null>(null);\n  const cancelDeleteRef = useRef<HTMLButtonElement>(null);\n  const renameRef = useRef<HTMLInputElement>(null);\n  const renameButtonRef = useRef<HTMLButtonElement>(null);\n  const deleteButtonRef = useRef<HTMLButtonElement>(null);\n\n  useEffect(() => {\n    if (mode === \"delete\") cancelDeleteRef.current?.focus();\n    else if (mode === \"rename\") renameRef.current?.select();\n    else if (returnTo) (returnTo === \"rename\" ? renameButtonRef : deleteButtonRef).current?.focus();\n  }, [mode, returnTo]);\n\n  const open = (next: \"rename\" | \"delete\") => {\n    setReturnTo(next);\n    setDraft(item.name);\n    setMode(next);\n  };\n  const leave = () => setMode(\"view\");\n  const escapeLeaves = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      e.stopPropagation();\n      leave();\n    }\n  };\n\n  const saveRename = () => {\n    const next = draft.trim();\n    if (!onRename || !next || busy) return;\n    if (next === item.name) {\n      leave();\n      return;\n    }\n    Promise.resolve(onRename(item.id, next))\n      .then(leave)\n      .catch(() => {});\n  };\n\n  const confirmDelete = () => {\n    if (!onDelete || busy) return;\n    // The row unmounts once the list refreshes; on a failure it stays, confirm open.\n    Promise.resolve(onDelete(item.id))\n      .then(() => setMode(\"view\"))\n      .catch(() => {});\n  };\n\n  // On every mode's <li>, so an id the app scrolls to survives a rename or a confirm.\n  const li = { ...attributes, \"data-passkey-id\": String(item.id) };\n\n  const meta = [created && labels.created(created), lastUsed ? labels.lastUsed(lastUsed) : labels.neverUsed]\n    .filter(Boolean)\n    .join(\" · \");\n\n  if (mode === \"rename\") {\n    return (\n      <li {...li} className=\"flex flex-wrap items-center gap-2 py-2\">\n        <Input\n          ref={renameRef}\n          aria-label={labels.renameField(item.name)}\n          className=\"min-w-0 flex-1\"\n          value={draft}\n          maxLength={120}\n          onChange={(e) => setDraft(e.target.value)}\n          onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              saveRename();\n            } else if (e.key === \"Escape\") {\n              e.preventDefault();\n              e.stopPropagation();\n              leave();\n            }\n          }}\n        />\n        <Button size=\"sm\" onClick={saveRename} disabled={busy || !draft.trim()}>\n          {labels.save}\n        </Button>\n        <Button size=\"sm\" variant=\"ghost\" onClick={leave}>\n          {labels.cancel}\n        </Button>\n      </li>\n    );\n  }\n\n  if (mode === \"delete\") {\n    return (\n      <li {...li} className=\"space-y-2 py-2\">\n        <p role=\"alert\" className=\"text-sm\">\n          {labels.deleteConfirm(item.name)}\n        </p>\n        <div className=\"flex flex-wrap gap-2\">\n          <Button size=\"sm\" variant=\"danger\" onClick={confirmDelete} onKeyDown={escapeLeaves} disabled={busy}>\n            {labels.confirmDelete}\n          </Button>\n          <Button ref={cancelDeleteRef} size=\"sm\" variant=\"ghost\" onClick={leave} onKeyDown={escapeLeaves}>\n            {labels.cancel}\n          </Button>\n        </div>\n      </li>\n    );\n  }\n\n  return (\n    <li {...li} className=\"flex items-center gap-3 py-2\">\n      <KeyRound className=\"size-4 shrink-0 text-[var(--text-muted)]\" aria-hidden />\n      <div className=\"min-w-0 flex-1\">\n        <div className=\"truncate text-sm font-medium\">{item.name}</div>\n        <div className=\"text-xs text-[var(--text-muted)]\">{meta}</div>\n      </div>\n      {onRename && (\n        <Button\n          ref={renameButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          disabled={busy}\n          onClick={() => open(\"rename\")}\n          aria-label={labels.renameItem(item.name)}\n        >\n          {labels.rename}\n        </Button>\n      )}\n      {onDelete && (\n        <Button\n          ref={deleteButtonRef}\n          size=\"sm\"\n          variant=\"ghost\"\n          tone=\"danger\"\n          disabled={busy}\n          onClick={() => open(\"delete\")}\n          aria-label={labels.deleteItem(item.name)}\n        >\n          {labels.delete}\n        </Button>\n      )}\n    </li>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/progress-bar.d.ts

@@ -48,6 +48,12 @@ interface ProgressBarSegment {
     legendOnly?: boolean;
 }
 interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "role"> {
+    /**
+     * `"span"` builds the bar from spans, for a place only phrasing content may go: inside
+     * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off
+     * there. Default `"div"`.
+     */
+    as?: "div" | "span";
     /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way
      *  and nobody knows how much is left (an import that reports no count). */
     value?: number;
@@ -98,8 +104,11 @@ interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
     legend?: boolean;
     /**
      * What a legend row shows at its end, in place of the part's formatted value — which
-     * it is handed, with the segment and its index. keksdose's cut card shows the share
-     * AND a private outflow amount per bucket (cut-card:150), which one figure could not:
+     * it is handed, with the segment and its index. That value is the part's OWN, signed
+     * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a
+     * 0–100 scale says "-40%" though the bar draws nothing for it. keksdose's cut card
+     * shows the share AND a private outflow amount per bucket (cut-card:150), which one
+     * figure could not:
      * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.
      */
     legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;
@@ -133,6 +142,6 @@ interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<"div">, "childr
  * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an
  * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.
  */
-declare function ProgressBar({ value, min, max: maxProp, variant, label, showValue, formatValue, tone, size, locale, segments, legend, legendValue, hint, overage, labels, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ProgressBarProps): react.JSX.Element;
+declare function ProgressBar({ value, min, max: maxProp, variant, label, showValue, formatValue, tone, size, locale, segments, legend, legendValue, hint, overage, labels, className, as, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ProgressBarProps): react.JSX.Element;
 
 export { DEFAULT_PROGRESS_BAR_LABELS, ProgressBar, type ProgressBarLabels, type ProgressBarProps, type ProgressBarSegment, type ProgressBarSize, type ProgressBarTone };

package/dist/components/progress-bar.js

@@ -55,11 +55,14 @@ function ProgressBar({
   overage,
   labels,
   className,
+  as = "div",
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
   ...rest
 }) {
+  const Tag = as;
+  const inlineClass = as === "span" ? "block [&_span:not(.flex):not(.inline-flex)]:block" : void 0;
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const text = useKitLabels("progressBar", DEFAULT_PROGRESS_BAR_LABELS, labels);
   const kitLocale = useKitLocale(locale);
@@ -68,8 +71,8 @@ function ProgressBar({
   const hintNode = hint != null ? /* @__PURE__ */ jsx("p", { id: hintId, "data-part": "hint", className: "mt-1 text-xs text-[var(--text-muted)]", children: hint }) : null;
   if (maxProp === null) {
     const shown = value === void 0 || !Number.isFinite(value) ? void 0 : formatValue ? formatValue(value, Infinity, min) : new Intl.NumberFormat(kitLocale).format(value);
-    return /* @__PURE__ */ jsxs("div", { ...rest, className: cn("min-w-0", className), "data-state": "unlimited", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-2 text-sm", children: [
+    return /* @__PURE__ */ jsxs(Tag, { ...rest, className: cn("min-w-0", inlineClass, className), "data-state": "unlimited", children: [
+      /* @__PURE__ */ jsxs(Tag, { className: "flex items-baseline gap-2 text-sm", children: [
         label != null && /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 text-[var(--text-secondary)]", children: label }),
         /* @__PURE__ */ jsxs("span", { "data-part": "unlimited", className: "ms-auto shrink-0 tabular-nums text-[var(--text-muted)]", children: [
           shown !== void 0 && `${shown} \xB7 `,
@@ -90,8 +93,15 @@ function ProgressBar({
   const format = (v) => formatValue ? formatValue(v, max, min) : new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
     span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span
   );
+  const formatPart = (v) => {
+    if (!Number.isFinite(v)) return format(min);
+    if (formatValue) return formatValue(v, max, min);
+    return new Intl.NumberFormat(kitLocale, { style: "percent", maximumFractionDigits: 0 }).format(
+      span <= 0 ? 0 : (v - min) / span
+    );
+  };
   const partTexts = stacked ? barParts.map((seg) => {
-    const text2 = format(min + partValue(seg.value));
+    const text2 = formatPart(seg.value);
     return typeof seg.label === "string" || typeof seg.label === "number" ? common.fieldValue(String(seg.label), text2) : text2;
   }) : [];
   const current = partTotal ?? (value === void 0 || !Number.isFinite(value) ? meter ? min : void 0 : value);
@@ -105,15 +115,15 @@ function ProgressBar({
   const describedBy = [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(" ") || void 0;
   const labelledBy = ariaLabelledBy ?? (label != null ? labelId : void 0);
   const name = labelledBy ? void 0 : ariaLabel ?? (indeterminate ? common.loading : void 0);
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0", className), "data-state": indeterminate ? "indeterminate" : "determinate", children: [
-    (label != null || showValue && valueText !== void 0) && /* @__PURE__ */ jsxs("div", { className: "mb-1 flex items-baseline gap-2 text-sm", children: [
+  return /* @__PURE__ */ jsxs(Tag, { className: cn("min-w-0", inlineClass, className), "data-state": indeterminate ? "indeterminate" : "determinate", children: [
+    (label != null || showValue && valueText !== void 0) && /* @__PURE__ */ jsxs(Tag, { className: "mb-1 flex items-baseline gap-2 text-sm", children: [
       label != null && /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 text-[var(--text-secondary)]", children: label }),
       showValue && valueText !== void 0 && // Hidden: the same words are the bar's aria-valuetext, and reading them
       // twice in a row is noise.
       /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "ms-auto shrink-0 tabular-nums text-[var(--text-muted)]", children: valueText })
     ] }),
     /* @__PURE__ */ jsx(
-      "div",
+      Tag,
       {
         ...rest,
         role: meter ? "meter" : "progressbar",
@@ -129,9 +139,9 @@ function ProgressBar({
         children: stacked ? (
           // The parts in a flex row with a 2px gap, so two neighbouring steps of one
           // hue are parted by the track rather than by their difference in lightness.
-          /* @__PURE__ */ jsx("div", { className: "flex h-full w-full gap-0.5", children: segments.map(
+          /* @__PURE__ */ jsx(Tag, { className: "flex h-full w-full gap-0.5", children: segments.map(
             (seg, i) => seg.legendOnly ? null : /* @__PURE__ */ jsx(
-              "div",
+              Tag,
               {
                 "data-part": "segment",
                 className: cn(
@@ -147,7 +157,7 @@ function ProgressBar({
             )
           ) })
         ) : indeterminate ? /* @__PURE__ */ jsx(
-          "div",
+          Tag,
           {
             "data-part": "fill",
             className: cn(
@@ -163,7 +173,7 @@ function ProgressBar({
             )
           }
         ) : /* @__PURE__ */ jsx(
-          "div",
+          Tag,
           {
             "data-part": "fill",
             className: cn("h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none", FILL[tone]),
@@ -185,7 +195,7 @@ function ProgressBar({
         }
       ),
       seg.label != null && /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[var(--text-secondary)]", children: seg.label }),
-      /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]", children: legendValue ? legendValue(seg, format(min + partValue(seg.value)), i) : format(min + partValue(seg.value)) })
+      /* @__PURE__ */ jsx("span", { className: "ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]", children: legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value) })
     ] }, seg.key ?? i)) }),
     overageNode,
     hintNode

package/dist/components/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/** The words a progress bar adds of its own. */\nexport interface ProgressBarLabels {\n  /** Shown after the value when `max={null}`: a quota with no ceiling. */\n  unlimited: string;\n  /** The `overage` line: how far past `max` the value is. `amount` is formatted. */\n  overLimit: (amount: string) => string;\n}\n\nexport const DEFAULT_PROGRESS_BAR_LABELS: ProgressBarLabels = {\n  unlimited: \"Unlimited\",\n  overLimit: (amount) => `${amount} over the limit`,\n};\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n  \"bg-[var(--chart-9)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n  /**\n   * List it in the `legend` but leave it out of the bar — its value, its share of the\n   * `aria-valuetext`, and the sum. keksdose's cut card (reports/cut-card:132) names\n   * EVERY bucket under its bar, the empty ones included, while the bar draws only the\n   * ones with a share: pass the empty buckets as `legendOnly` entries.\n   */\n  legendOnly?: boolean;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  /**\n   * The top of the scale (default 100). `null` is a quota with NO ceiling — kastlan's\n   * billing usage on an unlimited plan (usage-progress-bar:25): nothing to fill, so no\n   * bar is drawn; the label row shows the value and \"Unlimited\" (`progressBar.unlimited`)\n   * as plain text. `formatValue` is then called with `max` = `Infinity`; without it,\n   * the value is a plain number in the kit's locale.\n   */\n  max?: number | null;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n  /**\n   * What a legend row shows at its end, in place of the part's formatted value — which\n   * it is handed, with the segment and its index. keksdose's cut card shows the share\n   * AND a private outflow amount per bucket (cut-card:150), which one figure could not:\n   * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.\n   */\n  legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;\n  /** A muted line under the bar — the plan's reset date, \"3 of 5 seats in use\". It\n   *  describes the bar (`aria-describedby`). */\n  hint?: ReactNode;\n  /**\n   * When `value` is past `max`, say by how much, in a danger-coloured line under the bar\n   * (kastlan usage-progress-bar:46): `true` prints `progressBar.overLimit` with the\n   * excess as a plain number; a function renders the line itself from the excess (a\n   * currency, \"2 seats\"). The bar stays full at `max` either way — colour it with\n   * `tone=\"danger\"` if it should read as over. Ignored for `segments` and `max={null}`.\n   */\n  overage?: boolean | ((over: number) => ReactNode);\n  labels?: Partial<ProgressBarLabels>;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max: maxProp = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  legendValue,\n  hint,\n  overage,\n  labels,\n  className,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: ProgressBarProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = useKitLabels(\"progressBar\", DEFAULT_PROGRESS_BAR_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n  const hintId = useId();\n  const hintNode =\n    hint != null ? (\n      <p id={hintId} data-part=\"hint\" className=\"mt-1 text-xs text-[var(--text-muted)]\">\n        {hint}\n      </p>\n    ) : null;\n\n  if (maxProp === null) {\n    // No ceiling: no bar, no role — a meter with no maximum is not one. The value and\n    // \"Unlimited\" are the content, so they are plain visible text.\n    const shown =\n      value === undefined || !Number.isFinite(value)\n        ? undefined\n        : formatValue\n          ? formatValue(value, Infinity, min)\n          : new Intl.NumberFormat(kitLocale).format(value);\n    return (\n      <div {...rest} className={cn(\"min-w-0\", className)} data-state=\"unlimited\">\n        <div className=\"flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          <span data-part=\"unlimited\" className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n            {shown !== undefined && `${shown} · `}\n            {text.unlimited}\n          </span>\n        </div>\n        {hintNode}\n      </div>\n    );\n  }\n  const max = maxProp;\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  // Colours are dealt over EVERY segment, legend-only ones included, so an entry keeps\n  // its swatch whether or not it is in the bar this time.\n  const fills = stacked ? segmentFills(segments) : [];\n  const barParts = stacked ? segments.filter((seg) => !seg.legendOnly) : [];\n  const partTotal = stacked ? min + barParts.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  const partTexts = stacked\n    ? barParts.map((seg) => {\n        const text = format(min + partValue(seg.value));\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const over =\n    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;\n  const overageNode =\n    over > 0 ? (\n      <p id={`${hintId}-over`} data-part=\"overage\" className=\"mt-1 text-xs text-[var(--danger)]\">\n        {typeof overage === \"function\"\n          ? overage(over)\n          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}\n      </p>\n    ) : null;\n  const describedBy =\n    [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(\" \") || undefined;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <div className={cn(\"min-w-0\", className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <div className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <div className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) =>\n              seg.legendOnly ? null : (\n                <div\n                  key={seg.key ?? i}\n                  data-part=\"segment\"\n                  className={cn(\n                    \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                    fills[i],\n                  )}\n                  style={{\n                    width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                    backgroundColor: seg.className ? undefined : seg.color,\n                  }}\n                />\n              ),\n            )}\n          </div>\n        ) : indeterminate ? (\n          <div\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <div\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </div>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                <span className=\"min-w-0 flex-1 truncate text-[var(--text-secondary)]\">{seg.label}</span>\n              )}\n              <span className=\"ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]\">\n                {legendValue\n                  ? legendValue(seg, format(min + partValue(seg.value)), i)\n                  : format(min + partValue(seg.value))}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {overageNode}\n      {hintNode}\n    </div>\n  );\n}\n"],"mappings":"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","names":["text"]}
+{"version":3,"sources":["../../src/components/progress-bar.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\n\n/** The words a progress bar adds of its own. */\nexport interface ProgressBarLabels {\n  /** Shown after the value when `max={null}`: a quota with no ceiling. */\n  unlimited: string;\n  /** The `overage` line: how far past `max` the value is. `amount` is formatted. */\n  overLimit: (amount: string) => string;\n}\n\nexport const DEFAULT_PROGRESS_BAR_LABELS: ProgressBarLabels = {\n  unlimited: \"Unlimited\",\n  overLimit: (amount) => `${amount} over the limit`,\n};\n\n/**\n * `income` / `expense` are the money pair (`--money-income` / `--money-expense`), the\n * names `Chip`, `StatTile` and `Sparkline` already use for them: a share bar of what\n * came in or went out is money, and painting it `success` / `warning` said \"good\" and\n * \"careful\" about a figure that is neither. keksdose's report meters (food-group-card,\n * drilldown-modal) sit beside amounts that are already in the money colours.\n */\nexport type ProgressBarTone =\n  | \"brand\"\n  | \"neutral\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\"\n  | \"info\"\n  | \"income\"\n  | \"expense\";\n/**\n * Track heights: `sm` 4px, `slim` 6px, `md` 8px, `lg` 12px. `slim` is a word and not a\n * letter because the letters are taken in order — an `xs` at 6px would be THICKER than\n * `sm` — and renaming `sm` would move every bar already on it. 6px is the Slider's\n * track and keksdose's hand-drawn meters (`h-1.5`, landing-visuals), for a bar under a\n * line of text where 8px outweighs the text.\n */\nexport type ProgressBarSize = \"sm\" | \"slim\" | \"md\" | \"lg\";\n\nconst FILL: Record<ProgressBarTone, string> = {\n  brand: \"bg-[var(--brand)]\",\n  neutral: \"bg-[var(--text-muted)]\",\n  success: \"bg-[var(--success)]\",\n  warning: \"bg-[var(--warning)]\",\n  danger: \"bg-[var(--danger)]\",\n  info: \"bg-[var(--info)]\",\n  income: \"bg-[var(--money-income)]\",\n  expense: \"bg-[var(--money-expense)]\",\n};\n\nconst TRACK_HEIGHT: Record<ProgressBarSize, string> = { sm: \"h-1\", slim: \"h-1.5\", md: \"h-2\", lg: \"h-3\" };\n\n// A segment with no tone of its own takes the next categorical chart colour, so a\n// stacked bar of unnamed parts is still a set of tellable parts rather than one fill.\nconst SERIES_FILL = [\n  \"bg-[var(--chart-1)]\",\n  \"bg-[var(--chart-2)]\",\n  \"bg-[var(--chart-3)]\",\n  \"bg-[var(--chart-4)]\",\n  \"bg-[var(--chart-5)]\",\n  \"bg-[var(--chart-6)]\",\n  \"bg-[var(--chart-7)]\",\n  \"bg-[var(--chart-8)]\",\n  \"bg-[var(--chart-9)]\",\n];\n\n/** Each segment's fill classes: its own classes, else its tone, else (with no `color`)\n *  the next chart colour. \"Next\" counts the UNCOLOURED segments only — a segment with\n *  its own `className`/`tone`/`color` does not use up `--chart-1`, so an \"Other\" in grey\n *  ahead of two plain parts leaves them `--chart-1` and `--chart-2`. */\nfunction segmentFills(segments: ProgressBarSegment[]): Array<string | undefined> {\n  let next = 0;\n  return segments.map((seg) => {\n    if (seg.className) return seg.className;\n    if (seg.tone) return FILL[seg.tone];\n    return seg.color ? undefined : SERIES_FILL[next++ % SERIES_FILL.length];\n  });\n}\n\n/** One part of a stacked bar. See {@link ProgressBarProps.segments}. */\nexport interface ProgressBarSegment {\n  /** Its size, on the bar's own `min`–`max` scale. */\n  value: number;\n  /** A kit tone. Left out (and no `color`/`className`), the next `--chart-N` colour. */\n  tone?: ProgressBarTone;\n  /** Any CSS colour (`var(--token)`), for a palette the tones do not cover. Wins over `tone`. */\n  color?: string;\n  /** Classes for the segment's fill — keksdose's `STEP_CLASS` ramp. Wins over `tone`. */\n  className?: string;\n  /** The part's name: said in the bar's `aria-valuetext` and shown in the legend. */\n  label?: ReactNode;\n  /** A stable React key, when `label` is not a string. */\n  key?: string;\n  /**\n   * List it in the `legend` but leave it out of the bar — its value, its share of the\n   * `aria-valuetext`, and the sum. keksdose's cut card (reports/cut-card:132) names\n   * EVERY bucket under its bar, the empty ones included, while the bar draws only the\n   * ones with a share: pass the empty buckets as `legendOnly` entries.\n   */\n  legendOnly?: boolean;\n}\n\nexport interface ProgressBarProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"role\"> {\n  /**\n   * `\"span\"` builds the bar from spans, for a place only phrasing content may go: inside\n   * a button or a link (ListItem's `content`). The `legend` stays a list, so leave it off\n   * there. Default `\"div\"`.\n   */\n  as?: \"div\" | \"span\";\n  /** Where it stands. Leave it undefined for an INDETERMINATE bar — work is under way\n   *  and nobody knows how much is left (an import that reports no count). */\n  value?: number;\n  min?: number;\n  /**\n   * The top of the scale (default 100). `null` is a quota with NO ceiling — kastlan's\n   * billing usage on an unlimited plan (usage-progress-bar:25): nothing to fill, so no\n   * bar is drawn; the label row shows the value and \"Unlimited\" (`progressBar.unlimited`)\n   * as plain text. `formatValue` is then called with `max` = `Infinity`; without it,\n   * the value is a plain number in the kit's locale.\n   */\n  max?: number | null;\n  /**\n   * `progress` (default): a task moving toward completion — `role=\"progressbar\"`.\n   * `meter`: a share of a known whole that is not going anywhere (budget used, disk\n   * space, one category's slice of spending) — `role=\"meter\"`. keksdose's share bars\n   * were progress bars to a screen reader, which reads \"busy\" into a figure that is\n   * simply a figure. A meter is never indeterminate; a missing value reads as `min`.\n   */\n  variant?: \"progress\" | \"meter\";\n  /** Visible label above the bar, and its accessible name. Without it, pass\n   *  `aria-label` (an indeterminate bar with neither is named `common.loading`). */\n  label?: ReactNode;\n  /** Show the value text at the end of the label row. */\n  showValue?: boolean;\n  /**\n   * The value as words — both the visible `showValue` text and `aria-valuetext`.\n   * Default: the fraction as a percentage in the kit's locale (\"42 %\" in French).\n   * Pass one for anything that is not a percentage: `(v, max) => \\`${v} of ${max} files\\``.\n   */\n  formatValue?: (value: number, max: number, min: number) => string;\n  tone?: ProgressBarTone;\n  size?: ProgressBarSize;\n  locale?: string;\n  /**\n   * Draw a METER OF PARTS: one bar, several fills side by side in order, a 2px gap\n   * between them — keksdose's discretionary-spending bar (cut-card:133), a whole\n   * split into the steps of a scale. Forces `variant=\"meter\"`: parts of a whole are\n   * never \"busy\". `aria-valuenow` is the sum; `aria-valuetext` names every part\n   * (\"Rent: 40%, Food: 25%\"), each part's value through `formatValue` and joined in the\n   * kit's locale — the words keksdose's hand-drawn bar had to hide from a reader\n   * altogether, leaving the legend as the only way in. The sum is clamped to `max`,\n   * and parts past it are cut off at the track's end.\n   */\n  segments?: ProgressBarSegment[];\n  /** With `segments`: a list under the bar naming each part with its swatch and value\n   *  — the table view of the bar, in text tokens rather than the segment colour. */\n  legend?: boolean;\n  /**\n   * What a legend row shows at its end, in place of the part's formatted value — which\n   * it is handed, with the segment and its index. That value is the part's OWN, signed\n   * and unclamped (`formatValue`, or a percentage of the scale): a part of −40 on a\n   * 0–100 scale says \"-40%\" though the bar draws nothing for it. keksdose's cut card\n   * shows the share AND a private outflow amount per bucket (cut-card:150), which one\n   * figure could not:\n   * `legendValue={(seg, share) => <>{share} <Amount … /></>}`.\n   */\n  legendValue?: (segment: ProgressBarSegment, formatted: string, index: number) => ReactNode;\n  /** A muted line under the bar — the plan's reset date, \"3 of 5 seats in use\". It\n   *  describes the bar (`aria-describedby`). */\n  hint?: ReactNode;\n  /**\n   * When `value` is past `max`, say by how much, in a danger-coloured line under the bar\n   * (kastlan usage-progress-bar:46): `true` prints `progressBar.overLimit` with the\n   * excess as a plain number; a function renders the line itself from the excess (a\n   * currency, \"2 seats\"). The bar stays full at `max` either way — colour it with\n   * `tone=\"danger\"` if it should read as over. Ignored for `segments` and `max={null}`.\n   */\n  overage?: boolean | ((over: number) => ReactNode);\n  labels?: Partial<ProgressBarLabels>;\n}\n\n/**\n * A horizontal bar that fills toward `max`.\n *\n * keksdose (import progress, budget share bars) and kastlan (upload and job\n * progress) each drew their own div-in-a-div. None had a role, so a reader heard\n * nothing at all; the share bars that did have one claimed to be progress.\n *\n * `aria-valuetext` is always set when there is a value: a bare `aria-valuenow=\"37\"`\n * is read as \"37\" by some readers and \"37 percent\" by others, and neither is right\n * when `max` is 212 files.\n *\n * The indeterminate sweep stops under `prefers-reduced-motion`. It becomes a still,\n * half-strength bar across the whole track — still visibly \"something is happening\",\n * with nothing moving. The sweep is a Tailwind arbitrary `animate-[…]` rather than\n * tokens.css's `.animate-indeterminate` class because that one is UNLAYERED, and an\n * unlayered rule beats every layered utility, `motion-reduce:animate-none` included.\n */\nexport function ProgressBar({\n  value,\n  min = 0,\n  max: maxProp = 100,\n  variant = \"progress\",\n  label,\n  showValue = false,\n  formatValue,\n  tone = \"brand\",\n  size = \"md\",\n  locale,\n  segments,\n  legend = false,\n  legendValue,\n  hint,\n  overage,\n  labels,\n  className,\n  as = \"div\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: ProgressBarProps) {\n  // `as=\"span\"`: the same bar from phrasing elements only, so it is valid inside a\n  // <button> or <a> — ListItem's `content` puts a budget bar inside the row's target\n  // (keksdose P2). Every span is made a block except those already laid out as flex.\n  const Tag = as;\n  const inlineClass = as === \"span\" ? \"block [&_span:not(.flex):not(.inline-flex)]:block\" : undefined;\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n  const text = useKitLabels(\"progressBar\", DEFAULT_PROGRESS_BAR_LABELS, labels);\n  const kitLocale = useKitLocale(locale);\n  const labelId = useId();\n  const hintId = useId();\n  const hintNode =\n    hint != null ? (\n      <p id={hintId} data-part=\"hint\" className=\"mt-1 text-xs text-[var(--text-muted)]\">\n        {hint}\n      </p>\n    ) : null;\n\n  if (maxProp === null) {\n    // No ceiling: no bar, no role — a meter with no maximum is not one. The value and\n    // \"Unlimited\" are the content, so they are plain visible text.\n    const shown =\n      value === undefined || !Number.isFinite(value)\n        ? undefined\n        : formatValue\n          ? formatValue(value, Infinity, min)\n          : new Intl.NumberFormat(kitLocale).format(value);\n    return (\n      <Tag {...rest} className={cn(\"min-w-0\", inlineClass, className)} data-state=\"unlimited\">\n        <Tag className=\"flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          <span data-part=\"unlimited\" className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n            {shown !== undefined && `${shown} · `}\n            {text.unlimited}\n          </span>\n        </Tag>\n        {hintNode}\n      </Tag>\n    );\n  }\n  const max = maxProp;\n\n  const stacked = segments !== undefined;\n  const meter = stacked || variant === \"meter\";\n  const span = max - min;\n  const partValue = (v: number) => (Number.isFinite(v) ? Math.max(0, v - min) : 0);\n  // Colours are dealt over EVERY segment, legend-only ones included, so an entry keeps\n  // its swatch whether or not it is in the bar this time.\n  const fills = stacked ? segmentFills(segments) : [];\n  const barParts = stacked ? segments.filter((seg) => !seg.legendOnly) : [];\n  const partTotal = stacked ? min + barParts.reduce((sum, seg) => sum + partValue(seg.value), 0) : undefined;\n  const format = (v: number) =>\n    formatValue\n      ? formatValue(v, max, min)\n      : new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n          span <= 0 ? 0 : (Math.min(max, Math.max(min, v)) - min) / span,\n        );\n  // A PART is stated as its own value, sign and all — not as the slice of track it\n  // draws. The bar cannot draw a negative part (a refund inside a month's spending) or\n  // one past `max`, but the legend and the reader can still say it: before 0.16 a\n  // −CHF 40 part read \"0 %\" in both, and keksdose had to pass `legendValue` just to get\n  // the minus back. For a part inside `min`–`max` this is the same text as before.\n  const formatPart = (v: number) => {\n    if (!Number.isFinite(v)) return format(min);\n    if (formatValue) return formatValue(v, max, min);\n    return new Intl.NumberFormat(kitLocale, { style: \"percent\", maximumFractionDigits: 0 }).format(\n      span <= 0 ? 0 : (v - min) / span,\n    );\n  };\n  const partTexts = stacked\n    ? barParts.map((seg) => {\n        const text = formatPart(seg.value);\n        return typeof seg.label === \"string\" || typeof seg.label === \"number\"\n          ? common.fieldValue(String(seg.label), text)\n          : text;\n      })\n    : [];\n  const current =\n    partTotal ?? (value === undefined || !Number.isFinite(value) ? (meter ? min : undefined) : value);\n  const indeterminate = current === undefined;\n  const clamped = indeterminate ? undefined : Math.min(max, Math.max(min, current));\n  const fraction = clamped === undefined || span <= 0 ? 0 : (clamped - min) / span;\n\n  const valueText = clamped === undefined ? undefined : format(clamped);\n  const ariaValueText =\n    stacked && partTexts.length > 0\n      ? new Intl.ListFormat(kitLocale, { style: \"short\", type: \"unit\" }).format(partTexts)\n      : valueText;\n\n  const over =\n    overage && !stacked && value !== undefined && Number.isFinite(value) && value > max ? value - max : 0;\n  const overageNode =\n    over > 0 ? (\n      <p id={`${hintId}-over`} data-part=\"overage\" className=\"mt-1 text-xs text-[var(--danger)]\">\n        {typeof overage === \"function\"\n          ? overage(over)\n          : text.overLimit(new Intl.NumberFormat(kitLocale).format(over))}\n      </p>\n    ) : null;\n  const describedBy =\n    [ariaDescribedBy, hintNode && hintId, overageNode && `${hintId}-over`].filter(Boolean).join(\" \") || undefined;\n\n  const labelledBy = ariaLabelledBy ?? (label != null ? labelId : undefined);\n  const name = labelledBy ? undefined : (ariaLabel ?? (indeterminate ? common.loading : undefined));\n\n  return (\n    <Tag className={cn(\"min-w-0\", inlineClass, className)} data-state={indeterminate ? \"indeterminate\" : \"determinate\"}>\n      {(label != null || (showValue && valueText !== undefined)) && (\n        <Tag className=\"mb-1 flex items-baseline gap-2 text-sm\">\n          {label != null && (\n            <span id={labelId} className=\"min-w-0 text-[var(--text-secondary)]\">\n              {label}\n            </span>\n          )}\n          {showValue && valueText !== undefined && (\n            // Hidden: the same words are the bar's aria-valuetext, and reading them\n            // twice in a row is noise.\n            <span aria-hidden className=\"ms-auto shrink-0 tabular-nums text-[var(--text-muted)]\">\n              {valueText}\n            </span>\n          )}\n        </Tag>\n      )}\n      <Tag\n        {...rest}\n        role={meter ? \"meter\" : \"progressbar\"}\n        aria-label={name}\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        aria-valuemin={indeterminate ? undefined : min}\n        aria-valuemax={indeterminate ? undefined : max}\n        aria-valuenow={clamped}\n        aria-valuetext={ariaValueText}\n        aria-busy={!meter && indeterminate ? true : undefined}\n        // `relative` + `overflow-hidden`: the indeterminate segment is positioned in\n        // here and must not paint past the rounded ends.\n        className={cn(\"relative w-full overflow-hidden rounded-full bg-[var(--bg-active)]\", TRACK_HEIGHT[size])}\n      >\n        {stacked ? (\n          // The parts in a flex row with a 2px gap, so two neighbouring steps of one\n          // hue are parted by the track rather than by their difference in lightness.\n          <Tag className=\"flex h-full w-full gap-0.5\">\n            {segments.map((seg, i) =>\n              seg.legendOnly ? null : (\n                <Tag\n                  key={seg.key ?? i}\n                  data-part=\"segment\"\n                  className={cn(\n                    \"h-full shrink-0 rounded-full transition-[width] duration-300 motion-reduce:transition-none\",\n                    fills[i],\n                  )}\n                  style={{\n                    width: `${span <= 0 ? 0 : (partValue(seg.value) / span) * 100}%`,\n                    backgroundColor: seg.className ? undefined : seg.color,\n                  }}\n                />\n              ),\n            )}\n          </Tag>\n        ) : indeterminate ? (\n          <Tag\n            data-part=\"fill\"\n            className={cn(\n              // `left-0`, deliberately physical: the keyframes (tokens.css\n              // `indeterminate-sweep`) translate along the physical x axis, and under\n              // RTL the same keyframes are run in REVERSE — from the right edge back\n              // to the left. A logical `start-0` would park the segment at the right\n              // in RTL and the reversed sweep would then start off-screen.\n              \"absolute inset-y-0 left-0 w-1/3 rounded-full\",\n              \"animate-[indeterminate-sweep_1.4s_ease-in-out_infinite] rtl:[animation-direction:reverse]\",\n              \"motion-reduce:w-full motion-reduce:animate-none motion-reduce:opacity-50\",\n              FILL[tone],\n            )}\n          />\n        ) : (\n          <Tag\n            data-part=\"fill\"\n            // Block flow starts at the inline start, so a plain width fills from the\n            // right under `dir=\"rtl\"` with nothing extra.\n            className={cn(\"h-full rounded-full transition-[width] duration-300 motion-reduce:transition-none\", FILL[tone])}\n            style={{ width: `${fraction * 100}%` }}\n          />\n        )}\n      </Tag>\n      {stacked && legend && segments.length > 0 && (\n        <ul className=\"mt-2 space-y-1 text-sm\" data-part=\"legend\">\n          {segments.map((seg, i) => (\n            <li key={seg.key ?? i} className=\"flex items-center gap-2\">\n              <span\n                aria-hidden\n                className={cn(\n                  \"size-2.5 shrink-0 rounded-sm\",\n                  fills[i],\n                )}\n                style={{ backgroundColor: seg.className ? undefined : seg.color }}\n              />\n              {seg.label != null && (\n                <span className=\"min-w-0 flex-1 truncate text-[var(--text-secondary)]\">{seg.label}</span>\n              )}\n              <span className=\"ms-auto shrink-0 text-xs tabular-nums text-[var(--text-muted)]\">\n                {legendValue ? legendValue(seg, formatPart(seg.value), i) : formatPart(seg.value)}\n              </span>\n            </li>\n          ))}\n        </ul>\n      )}\n      {overageNode}\n      {hintNode}\n    </Tag>\n  );\n}\n"],"mappings":"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","names":["text"]}

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

@@ -5,7 +5,7 @@ import { LegendEntry } from './toggle-legend.js';
 import { SeriesChartLabels } from './series-chart-labels.js';
 import { TimeTickUnit } from './series-chart-ticks.js';
 import { SeriesChartAxisBudget } from './series-chart-budget.js';
-import { v as ChartTooltipPlacement } from '../kit-labels-CnnBd-2N.js';
+import { w as ChartTooltipPlacement } from '../kit-labels-DE--LmCk.js';
 import 'recharts';
 import './data-table-labels.js';
 import './mini-calendar.js';
@@ -37,8 +37,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback/feedback-attachment.js';
-import '../feedback/feedback-dialog.js';
+import '../feedback-attachment-WFiXJ8We.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
@@ -46,12 +45,12 @@ import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
+import './signed-amount.js';
 import './breadcrumbs.js';
 import './toast.js';
 import './description-list.js';
 import './line-items.js';
 import './progress-bar.js';
-import './signed-amount.js';
 import './error-boundary.js';
 import './authed-image.js';
 import '../hooks/use-authed-src.js';

package/dist/components/settings-fields.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { aK as SelectProps } from '../kit-labels-CnnBd-2N.js';
+import { aN as SelectProps } from '../kit-labels-DE--LmCk.js';
 import { ThemePreference } from '../theme/theme-store.js';
 import './data-table-labels.js';
 import './mini-calendar.js';
@@ -33,8 +33,7 @@ import './dialog-frame.js';
 import './modal.js';
 import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
-import '../feedback/feedback-attachment.js';
-import '../feedback/feedback-dialog.js';
+import '../feedback-attachment-WFiXJ8We.js';
 import '../feedback/feedback-thread.js';
 import '../feedback/feedback-inbox.js';
 import './account-settings-labels.js';
@@ -42,12 +41,12 @@ import './confirm-dialog.js';
 import './floating-panel.js';
 import './bulk-action-bar.js';
 import './list.js';
+import './signed-amount.js';
 import './breadcrumbs.js';
 import './toast.js';
 import './description-list.js';
 import './line-items.js';
 import './progress-bar.js';
-import './signed-amount.js';
 import './error-boundary.js';
 import './authed-image.js';
 import '../hooks/use-authed-src.js';

package/dist/components/signed-amount.d.ts

@@ -39,6 +39,16 @@ type GoodDirection = "up" | "down";
  *    news `success`, bad news `danger`, zero muted. Setting `goodDirection` implies it.
  */
 type SignedAmountTone = "signed" | "income" | "expense" | "neutral" | "verdict";
+/**
+ * The colours a VERDICT is painted in (`goodDirection` set, or `tone="verdict"`):
+ *  - `status` (default) — `success` / `danger`: good news, bad news.
+ *  - `money` — `income` / `expense` (the `.text-money-pos` / `.text-money-neg` pair):
+ *    the app's ONE money palette (keksdose dev#434). A grocery price going UP is money
+ *    going out, so with `goodDirection="down"` it wears the expense colour every other
+ *    outflow in the app wears — not a red that says "error". keksdose coloured its
+ *    three price-change sites by hand for want of this.
+ */
+type VerdictPalette = "status" | "money";
 /** What a signed figure says to a screen reader, whose readers disagree about a
  *  leading "+" (most skip it) and a "−" (some read "dash", some nothing). */
 interface SignedAmountLabels {
@@ -69,8 +79,16 @@ interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithou
     value: number;
     /** See {@link SignedAmountTone}. Default `signed`, or `verdict` with `goodDirection`. */
     tone?: SignedAmountTone;
-    /** Which way is good news — colours by verdict (`success` / `danger`). */
+    /** Which way is good news — colours by verdict (`success` / `danger`, or the money
+     *  pair with `palette="money"`). */
     goodDirection?: GoodDirection;
+    /** See {@link VerdictPalette}. Default `status`. Only a verdict reads it. */
+    palette?: VerdictPalette;
+    /** A magnitude up to which the figure counts as NO change: no sign, no arrow but the
+     *  flat dash, muted, spoken without "plus"/"minus" (inclusive; default 0). The digits
+     *  still print `|value|` — use a band below the display precision, where they round
+     *  to zero anyway (`flatWithin={0.005}` at two digits). */
+    flatWithin?: number;
     /** Print "+" before a positive figure (default `true`). A negative always shows its
      *  minus; zero shows neither. */
     showPlus?: boolean;
@@ -92,13 +110,19 @@ interface SignedAmountProps extends SignedFormatProps, Omit<ComponentPropsWithou
  * words instead ("plus CHF 50.00" / "minus CHF 50.00", `signedAmount.*`): a "+" is
  * skipped by most screen readers, and `Intl`'s "−" is read as "dash" or not at all.
  */
-declare function SignedAmount({ value, currency, unit, compact, digits, format, locale, tone, goodDirection, showPlus, arrow, sensitive, labels, className, ...rest }: SignedAmountProps): react.JSX.Element;
+declare function SignedAmount({ value, currency, unit, compact, digits, format, locale, tone, goodDirection, palette, flatWithin, showPlus, arrow, sensitive, labels, className, ...rest }: SignedAmountProps): react.JSX.Element;
 interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"span">, "children"> {
     /** The change. Above zero is "up". */
     value: number;
     /** Which way is good news. Unset, the change is stated and not judged (muted); set,
      *  it is coloured `success` / `danger` and its sentence says "(better)" / "(worse)". */
     goodDirection?: GoodDirection;
+    /** See {@link VerdictPalette}: `money` paints good news `income` and bad news
+     *  `expense` instead of `success` / `danger`. Default `status`. */
+    palette?: VerdictPalette;
+    /** See {@link SignedAmountProps.flatWithin}: up to this magnitude the change is
+     *  "unchanged" — flat dash, muted, no verdict. Default 0. */
+    flatWithin?: number;
     /** What it is measured against, after it: "vs last month". */
     label?: ReactNode;
     /** Hide the arrow (shown by default, as on a StatTile). At zero the arrow is a flat
@@ -117,6 +141,6 @@ interface DeltaProps extends SignedFormatProps, Omit<ComponentPropsWithoutRef<"s
  * (lease-columns:219, a "+1.25%" chip), the breakdown rows of the rent calculator
  * (breakdown-row:5, a trend icon coloured by hand).
  */
-declare function Delta({ value, currency, unit, compact, digits, format, locale, goodDirection, label, arrow, sensitive, labels, className, ...rest }: DeltaProps): react.JSX.Element | null;
+declare function Delta({ value, currency, unit, compact, digits, format, locale, goodDirection, palette, flatWithin, label, arrow, sensitive, labels, className, ...rest }: DeltaProps): react.JSX.Element | null;
 
-export { DEFAULT_SIGNED_AMOUNT_LABELS, Delta, type DeltaProps, type GoodDirection, SignedAmount, type SignedAmountLabels, type SignedAmountProps, type SignedAmountTone, type TextTone, Tone, type ToneProps, toneTextClass };
+export { DEFAULT_SIGNED_AMOUNT_LABELS, Delta, type DeltaProps, type GoodDirection, SignedAmount, type SignedAmountLabels, type SignedAmountProps, type SignedAmountTone, type TextTone, Tone, type ToneProps, type VerdictPalette, toneTextClass };