@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/shell/company-switcher.js

@@ -5,16 +5,10 @@ import { Building2 } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { useAnnounce } from "../hooks/use-announce.js";
-import { Spinner } from "../components/ui.js";
+import { Spinner } from "../components/spinner.js";
 import { OptionSwitcherMenu } from "./option-switcher-menu.js";
 import { TOPBAR_TRIGGER_CLASS } from "./topbar-controls.js";
-const DEFAULT_COMPANY_SWITCHER_LABELS = {
-  switchCompany: "Switch company",
-  heading: "Companies",
-  current: (name) => `Company: ${name}`,
-  currentMark: "(current)",
-  switching: "Switching company\u2026"
-};
+import { DEFAULT_COMPANY_SWITCHER_LABELS } from "./company-switcher-labels.js";
 function CompanySwitcher({
   companies,
   currentId,
@@ -54,7 +48,7 @@ function CompanySwitcher({
     ) : /* @__PURE__ */ jsx(
       OptionSwitcherMenu,
       {
-        ariaLabel: labels.switchCompany,
+        "aria-label": labels.switchCompany,
         title: current ? labels.current(current.name) : void 0,
         heading: labels.heading,
         icon: icon ?? /* @__PURE__ */ jsx(Building2, { className: "size-5" }),

package/dist/shell/company-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/company-switcher.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Building2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { Spinner } from \"../components/ui\";\nimport { OptionSwitcherMenu } from \"./option-switcher-menu\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/** Every string the switcher renders or speaks — the `companySwitcher` namespace. A\n *  different context (keksdose's budgets) renames them all. */\nexport interface CompanySwitcherLabels {\n  /** The trigger's and the menu's accessible name. */\n  switchCompany: string;\n  /** The small heading over the list. */\n  heading: string;\n  /** The trigger's tooltip (and description), given the current company's name. */\n  current: (name: string) => string;\n  /** Read after the current company's name in the list, where the eye sees a check. */\n  currentMark: string;\n  /** Said while a switch is running. */\n  switching: string;\n}\n\nexport const DEFAULT_COMPANY_SWITCHER_LABELS: CompanySwitcherLabels = {\n  switchCompany: \"Switch company\",\n  heading: \"Companies\",\n  current: (name) => `Company: ${name}`,\n  currentMark: \"(current)\",\n  switching: \"Switching company…\",\n};\n\n/** One company the user belongs to — kastlan's `/auth/me` `companies[]` (§5.3). */\nexport interface CompanySwitcherCompany<Id extends string | number = string | number> {\n  /** kastlan's ids are numbers; a string works the same. */\n  id: Id;\n  name: string;\n}\n\nexport interface CompanySwitcherProps<Id extends string | number> {\n  /** Every company the user belongs to. With fewer than two there is nothing to\n   *  switch, and nothing renders. */\n  companies: readonly CompanySwitcherCompany<Id>[];\n  /** The company the session is in — `/auth/me`'s `current_company_id`. */\n  currentId: Id;\n  /**\n   * Another company was picked: `POST /auth/switch-company {company_id}`, store the\n   * fresh tokens, reload what is company-scoped. While the promise runs the switcher is\n   * disabled, so a second pick cannot race the first; a rejection frees it (the app\n   * says why). Picking the current company does nothing.\n   */\n  onSwitch: (id: Id) => Promise<unknown> | void;\n  /** The trigger's glyph. Default a building; keksdose's budgets would pass a wallet. */\n  icon?: ReactNode;\n  labels?: Partial<CompanySwitcherLabels>;\n}\n\n/**\n * The company switcher in the top bar (docs/auth-harmonization.md §5.3, §8): a kastlan\n * user may belong to several companies, and the access token carries the current one,\n * so switching is a request for new tokens — `onSwitch`, the app's. Built on\n * {@link OptionSwitcherMenu}, like `RoleSwitcher`: the icon trigger, the current company\n * in its tooltip, the list with a check on the current one.\n *\n * **Only for more than one company** — a user in one company has nothing to switch, and\n * the top bar stays as it was. **Disabled while a switch runs**: the trigger is swapped\n * for a disabled one with a spinner (`aria-busy`), and \"Switching company…\" is said, so\n * a second pick cannot race the first. The kit never sends the request.\n *\n * A generic context switcher: the labels rename it (\"Switch budget\", \"Budgets\"), `icon`\n * replaces the building, and `id` may be a number (kastlan's) or a string.\n */\nexport function CompanySwitcher<Id extends string | number>({\n  companies,\n  currentId,\n  onSwitch,\n  icon,\n  labels: labelsProp,\n}: CompanySwitcherProps<Id>) {\n  const labels = useKitLabels(\"companySwitcher\", DEFAULT_COMPANY_SWITCHER_LABELS, labelsProp);\n  const [pending, setPending] = useState(false);\n  const { announce, regionProps } = useAnnounce();\n  if (companies.length < 2) return null;\n\n  const current = companies.find((c) => c.id === currentId);\n  const select = (value: string) => {\n    if (pending) return;\n    const picked = companies.find((c) => String(c.id) === value);\n    if (!picked || picked.id === currentId) return;\n    const result = onSwitch(picked.id);\n    if (typeof (result as PromiseLike<unknown> | undefined)?.then !== \"function\") return;\n    setPending(true);\n    announce(labels.switching);\n    (result as PromiseLike<unknown>).then(\n      () => setPending(false),\n      () => setPending(false),\n    );\n  };\n\n  return (\n    <>\n      {pending ? (\n        <button\n          type=\"button\"\n          disabled\n          aria-busy=\"true\"\n          aria-label={labels.switchCompany}\n          className={cn(TOPBAR_TRIGGER_CLASS, \"cursor-wait opacity-60 hover:bg-transparent\")}\n        >\n          <Spinner label={null} />\n        </button>\n      ) : (\n        <OptionSwitcherMenu<string>\n          ariaLabel={labels.switchCompany}\n          title={current ? labels.current(current.name) : undefined}\n          heading={labels.heading}\n          icon={icon ?? <Building2 className=\"size-5\" />}\n          options={companies.map((c) => ({\n            value: String(c.id),\n            label:\n              c.id === currentId ? (\n                // `relative`: the sr-only mark needs a local containing block.\n                <span className=\"relative\">\n                  {c.name}\n                  <span className=\"sr-only\"> {labels.currentMark}</span>\n                </span>\n              ) : (\n                c.name\n              ),\n          }))}\n          value={String(currentId)}\n          onSelect={select}\n        />\n      )}\n      {/* Outside both triggers, so it survives the swap and is read when it changes. */}\n      <span {...regionProps} />\n    </>\n  );\n}\n"],"mappings":";AAqGI,mBASM,KAeQ,YAxBd;AArGJ,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,oBAAoB;AAC7B,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AAiB9B,MAAM,kCAAyD;AAAA,EACpE,eAAe;AAAA,EACf,SAAS;AAAA,EACT,SAAS,CAAC,SAAS,YAAY,IAAI;AAAA,EACnC,aAAa;AAAA,EACb,WAAW;AACb;AA0CO,SAAS,gBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAA6B;AAC3B,QAAM,SAAS,aAAa,mBAAmB,iCAAiC,UAAU;AAC1F,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,EAAE,UAAU,YAAY,IAAI,YAAY;AAC9C,MAAI,UAAU,SAAS,EAAG,QAAO;AAEjC,QAAM,UAAU,UAAU,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS;AACxD,QAAM,SAAS,CAAC,UAAkB;AAChC,QAAI,QAAS;AACb,UAAM,SAAS,UAAU,KAAK,CAAC,MAAM,OAAO,EAAE,EAAE,MAAM,KAAK;AAC3D,QAAI,CAAC,UAAU,OAAO,OAAO,UAAW;AACxC,UAAM,SAAS,SAAS,OAAO,EAAE;AACjC,QAAI,OAAQ,QAA6C,SAAS,WAAY;AAC9E,eAAW,IAAI;AACf,aAAS,OAAO,SAAS;AACzB,IAAC,OAAgC;AAAA,MAC/B,MAAM,WAAW,KAAK;AAAA,MACtB,MAAM,WAAW,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SACE,iCACG;AAAA,cACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,aAAU;AAAA,QACV,cAAY,OAAO;AAAA,QACnB,WAAW,GAAG,sBAAsB,6CAA6C;AAAA,QAEjF,8BAAC,WAAQ,OAAO,MAAM;AAAA;AAAA,IACxB,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,OAAO;AAAA,QAClB,OAAO,UAAU,OAAO,QAAQ,QAAQ,IAAI,IAAI;AAAA,QAChD,SAAS,OAAO;AAAA,QAChB,MAAM,QAAQ,oBAAC,aAAU,WAAU,UAAS;AAAA,QAC5C,SAAS,UAAU,IAAI,CAAC,OAAO;AAAA,UAC7B,OAAO,OAAO,EAAE,EAAE;AAAA,UAClB,OACE,EAAE,OAAO;AAAA;AAAA,YAEP,qBAAC,UAAK,WAAU,YACb;AAAA,gBAAE;AAAA,cACH,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,gBAAE,OAAO;AAAA,iBAAY;AAAA,eACjD;AAAA,cAEA,EAAE;AAAA,QAER,EAAE;AAAA,QACF,OAAO,OAAO,SAAS;AAAA,QACvB,UAAU;AAAA;AAAA,IACZ;AAAA,IAGF,oBAAC,UAAM,GAAG,aAAa;AAAA,KACzB;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/company-switcher.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Building2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useAnnounce } from \"../hooks/use-announce\";\nimport { Spinner } from \"../components/spinner\";\nimport { OptionSwitcherMenu } from \"./option-switcher-menu\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { DEFAULT_COMPANY_SWITCHER_LABELS } from \"./company-switcher-labels\";\n\n/** Every string the switcher renders or speaks — the `companySwitcher` namespace. A\n *  different context (keksdose's budgets) renames them all. */\nexport interface CompanySwitcherLabels {\n  /** The trigger's and the menu's accessible name. */\n  switchCompany: string;\n  /** The small heading over the list. */\n  heading: string;\n  /** The trigger's tooltip (and description), given the current company's name. */\n  current: (name: string) => string;\n  /** Read after the current company's name in the list, where the eye sees a check. */\n  currentMark: string;\n  /** Said while a switch is running. */\n  switching: string;\n}\n\n// Defined in ./company-switcher-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_COMPANY_SWITCHER_LABELS };\n\n/** One company the user belongs to — kastlan's `/auth/me` `companies[]` (§5.3). */\nexport interface CompanySwitcherCompany<Id extends string | number = string | number> {\n  /** kastlan's ids are numbers; a string works the same. */\n  id: Id;\n  name: string;\n}\n\nexport interface CompanySwitcherProps<Id extends string | number> {\n  /** Every company the user belongs to. With fewer than two there is nothing to\n   *  switch, and nothing renders. */\n  companies: readonly CompanySwitcherCompany<Id>[];\n  /** The company the session is in — `/auth/me`'s `current_company_id`. */\n  currentId: Id;\n  /**\n   * Another company was picked: `POST /auth/switch-company {company_id}`, store the\n   * fresh tokens, reload what is company-scoped. While the promise runs the switcher is\n   * disabled, so a second pick cannot race the first; a rejection frees it (the app\n   * says why). Picking the current company does nothing.\n   */\n  onSwitch: (id: Id) => Promise<unknown> | void;\n  /** The trigger's glyph. Default a building; keksdose's budgets would pass a wallet. */\n  icon?: ReactNode;\n  labels?: LabelOverride<CompanySwitcherLabels>;\n}\n\n/**\n * The company switcher in the top bar (docs/auth-harmonization.md §5.3, §8): a kastlan\n * user may belong to several companies, and the access token carries the current one,\n * so switching is a request for new tokens — `onSwitch`, the app's. Built on\n * {@link OptionSwitcherMenu}, like `RoleSwitcher`: the icon trigger, the current company\n * in its tooltip, the list with a check on the current one.\n *\n * **Only for more than one company** — a user in one company has nothing to switch, and\n * the top bar stays as it was. **Disabled while a switch runs**: the trigger is swapped\n * for a disabled one with a spinner (`aria-busy`), and \"Switching company…\" is said, so\n * a second pick cannot race the first. The kit never sends the request.\n *\n * A generic context switcher: the labels rename it (\"Switch budget\", \"Budgets\"), `icon`\n * replaces the building, and `id` may be a number (kastlan's) or a string.\n */\nexport function CompanySwitcher<Id extends string | number>({\n  companies,\n  currentId,\n  onSwitch,\n  icon,\n  labels: labelsProp,\n}: CompanySwitcherProps<Id>) {\n  const labels = useKitLabels(\"companySwitcher\", DEFAULT_COMPANY_SWITCHER_LABELS, labelsProp);\n  const [pending, setPending] = useState(false);\n  const { announce, regionProps } = useAnnounce();\n  if (companies.length < 2) return null;\n\n  const current = companies.find((c) => c.id === currentId);\n  const select = (value: string) => {\n    if (pending) return;\n    const picked = companies.find((c) => String(c.id) === value);\n    if (!picked || picked.id === currentId) return;\n    const result = onSwitch(picked.id);\n    if (typeof (result as PromiseLike<unknown> | undefined)?.then !== \"function\") return;\n    setPending(true);\n    announce(labels.switching);\n    (result as PromiseLike<unknown>).then(\n      () => setPending(false),\n      () => setPending(false),\n    );\n  };\n\n  return (\n    <>\n      {pending ? (\n        <button\n          type=\"button\"\n          disabled\n          aria-busy=\"true\"\n          aria-label={labels.switchCompany}\n          className={cn(TOPBAR_TRIGGER_CLASS, \"cursor-wait opacity-60 hover:bg-transparent\")}\n        >\n          <Spinner label={null} />\n        </button>\n      ) : (\n        <OptionSwitcherMenu<string>\n          aria-label={labels.switchCompany}\n          title={current ? labels.current(current.name) : undefined}\n          heading={labels.heading}\n          icon={icon ?? <Building2 className=\"size-5\" />}\n          options={companies.map((c) => ({\n            value: String(c.id),\n            label:\n              c.id === currentId ? (\n                // `relative`: the sr-only mark needs a local containing block.\n                <span className=\"relative\">\n                  {c.name}\n                  <span className=\"sr-only\"> {labels.currentMark}</span>\n                </span>\n              ) : (\n                c.name\n              ),\n          }))}\n          value={String(currentId)}\n          onSelect={select}\n        />\n      )}\n      {/* Outside both triggers, so it survives the swap and is read when it changes. */}\n      <span {...regionProps} />\n    </>\n  );\n}\n"],"mappings":";AAiGI,mBASM,KAeQ,YAxBd;AAjGJ,SAAS,gBAAgB;AAEzB,SAAS,iBAAiB;AAC1B,SAAS,UAAU;AACnB,SAAS,oBAAwC;AACjD,SAAS,mBAAmB;AAC5B,SAAS,eAAe;AACxB,SAAS,0BAA0B;AACnC,SAAS,4BAA4B;AACrC,SAAS,uCAAuC;AA4DzC,SAAS,gBAA4C;AAAA,EAC1D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,GAA6B;AAC3B,QAAM,SAAS,aAAa,mBAAmB,iCAAiC,UAAU;AAC1F,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,EAAE,UAAU,YAAY,IAAI,YAAY;AAC9C,MAAI,UAAU,SAAS,EAAG,QAAO;AAEjC,QAAM,UAAU,UAAU,KAAK,CAAC,MAAM,EAAE,OAAO,SAAS;AACxD,QAAM,SAAS,CAAC,UAAkB;AAChC,QAAI,QAAS;AACb,UAAM,SAAS,UAAU,KAAK,CAAC,MAAM,OAAO,EAAE,EAAE,MAAM,KAAK;AAC3D,QAAI,CAAC,UAAU,OAAO,OAAO,UAAW;AACxC,UAAM,SAAS,SAAS,OAAO,EAAE;AACjC,QAAI,OAAQ,QAA6C,SAAS,WAAY;AAC9E,eAAW,IAAI;AACf,aAAS,OAAO,SAAS;AACzB,IAAC,OAAgC;AAAA,MAC/B,MAAM,WAAW,KAAK;AAAA,MACtB,MAAM,WAAW,KAAK;AAAA,IACxB;AAAA,EACF;AAEA,SACE,iCACG;AAAA,cACC;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,aAAU;AAAA,QACV,cAAY,OAAO;AAAA,QACnB,WAAW,GAAG,sBAAsB,6CAA6C;AAAA,QAEjF,8BAAC,WAAQ,OAAO,MAAM;AAAA;AAAA,IACxB,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,cAAY,OAAO;AAAA,QACnB,OAAO,UAAU,OAAO,QAAQ,QAAQ,IAAI,IAAI;AAAA,QAChD,SAAS,OAAO;AAAA,QAChB,MAAM,QAAQ,oBAAC,aAAU,WAAU,UAAS;AAAA,QAC5C,SAAS,UAAU,IAAI,CAAC,OAAO;AAAA,UAC7B,OAAO,OAAO,EAAE,EAAE;AAAA,UAClB,OACE,EAAE,OAAO;AAAA;AAAA,YAEP,qBAAC,UAAK,WAAU,YACb;AAAA,gBAAE;AAAA,cACH,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,gBAAE,OAAO;AAAA,iBAAY;AAAA,eACjD;AAAA,cAEA,EAAE;AAAA,QAER,EAAE;AAAA,QACF,OAAO,OAAO,SAAS;AAAA,QACvB,UAAU;AAAA;AAAA,IACZ;AAAA,IAGF,oBAAC,UAAM,GAAG,aAAa;AAAA,KACzB;AAEJ;","names":[]}

package/dist/shell/option-switcher-menu.d.ts

@@ -1,24 +1,34 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface OptionSwitcherOption<T extends string> {
+import type { ReactNode } from "react";
+export interface OptionSwitcherOption<T extends string> {
     value: T;
     label: ReactNode;
 }
+/**
+ * Names the trigger and the menu: one of the two spellings is required (API-1, refactor
+ * audit 2026-10). `aria-label` wins when both are given. TopBarActionMenu has the same
+ * type; both become a plain required `aria-label` when `ariaLabel` goes in 0.35.
+ */
+type RequiredMenuName = {
+    "aria-label": string;
+    /** @deprecated 0.34 — use `aria-label`; removed in 0.35. */
+    ariaLabel?: string;
+} | {
+    "aria-label"?: string;
+    /** @deprecated 0.34 — use `aria-label`; removed in 0.35. */
+    ariaLabel: string;
+};
 /**
  * A top-bar hover menu that switches between a small set of options, with a
  * check on the active one and an optional heading. Generic glue over
  * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment
  * picker. Controlled: the app owns `value` and `onSelect`.
  */
-declare function OptionSwitcherMenu<T extends string>({ icon, ariaLabel, title, heading, options, value, onSelect, }: {
+export declare function OptionSwitcherMenu<T extends string>({ icon, "aria-label": ariaLabelAttr, ariaLabel: ariaLabelProp, title, heading, options, value, onSelect, }: {
     icon: ReactNode;
-    ariaLabel: string;
     title?: string;
     heading?: string;
     options: OptionSwitcherOption<T>[];
     value: T;
     onSelect: (value: T) => void;
-}): react.JSX.Element;
-
-export { OptionSwitcherMenu, type OptionSwitcherOption };
+} & RequiredMenuName): import("react").JSX.Element;
+export {};

package/dist/shell/option-switcher-menu.js

@@ -6,20 +6,22 @@ import { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from "./topbar-controls.
 import { Tooltip } from "../components/tooltip.js";
 function OptionSwitcherMenu({
   icon,
-  ariaLabel,
+  "aria-label": ariaLabelAttr,
+  ariaLabel: ariaLabelProp,
   title,
   heading,
   options,
   value,
   onSelect
 }) {
+  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
-      ariaLabel,
+      "aria-label": ariaLabel,
       trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: title, portal: true, children: /* @__PURE__ */ jsx("button", { type: "button", onClick: toggle, "aria-label": ariaLabel, className: TOPBAR_TRIGGER_CLASS, children: icon }) }),
       children: (close) => /* @__PURE__ */ jsxs("ul", { className: "py-1", children: [
-        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children: heading }),
+        heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder", children: heading }),
         options.map((opt) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
           "button",
           {
@@ -31,7 +33,7 @@ function OptionSwitcherMenu({
             className: TOPBAR_MENU_ITEM_CLASS,
             children: [
               /* @__PURE__ */ jsx("span", { children: opt.label }),
-              value === opt.value && /* @__PURE__ */ jsx(Check, { className: "size-4 text-[var(--text-secondary)]" })
+              value === opt.value && /* @__PURE__ */ jsx(Check, { className: "size-4 text-secondary" })
             ]
           }
         ) }, opt.value))

package/dist/shell/option-switcher-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/option-switcher-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { Tooltip } from \"../components/tooltip\";\n\nexport interface OptionSwitcherOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/**\n * A top-bar hover menu that switches between a small set of options, with a\n * check on the active one and an optional heading. Generic glue over\n * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment\n * picker. Controlled: the app owns `value` and `onSelect`.\n */\nexport function OptionSwitcherMenu<T extends string>({\n  icon,\n  ariaLabel,\n  title,\n  heading,\n  options,\n  value,\n  onSelect,\n}: {\n  icon: ReactNode;\n  ariaLabel: string;\n  title?: string;\n  heading?: string;\n  options: OptionSwitcherOption<T>[];\n  value: T;\n  onSelect: (value: T) => void;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      trigger={({ toggle }) => (\n        <Tooltip label={title} portal>\n          <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n            {icon}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n              {heading}\n            </li>\n          )}\n          {options.map((opt) => (\n            <li key={opt.value}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onSelect(opt.value);\n                  close();\n                }}\n                className={TOPBAR_MENU_ITEM_CLASS}\n              >\n                <span>{opt.label}</span>\n                {value === opt.value && <Check className=\"size-4 text-[var(--text-secondary)]\" />}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AAuCU,cAeI,YAfJ;AAtCV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,eAAe;AAajB,SAAS,mBAAqC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,WAAQ,OAAO,OAAO,QAAM,MAC3B,8BAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH,GACF;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAU,QACX;AAAA,mBACC,oBAAC,QAAG,WAAU,6FACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,IAAI,KAAK;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,kCAAC,UAAM,cAAI,OAAM;AAAA,cAChB,UAAU,IAAI,SAAS,oBAAC,SAAM,WAAU,uCAAsC;AAAA;AAAA;AAAA,QACjF,KAXO,IAAI,KAYb,CACD;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/option-switcher-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { Tooltip } from \"../components/tooltip\";\n\nexport interface OptionSwitcherOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/**\n * Names the trigger and the menu: one of the two spellings is required (API-1, refactor\n * audit 2026-10). `aria-label` wins when both are given. TopBarActionMenu has the same\n * type; both become a plain required `aria-label` when `ariaLabel` goes in 0.35.\n */\ntype RequiredMenuName =\n  | {\n      \"aria-label\": string;\n      /** @deprecated 0.34 — use `aria-label`; removed in 0.35. */\n      ariaLabel?: string;\n    }\n  | {\n      \"aria-label\"?: string;\n      /** @deprecated 0.34 — use `aria-label`; removed in 0.35. */\n      ariaLabel: string;\n    };\n\n/**\n * A top-bar hover menu that switches between a small set of options, with a\n * check on the active one and an optional heading. Generic glue over\n * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment\n * picker. Controlled: the app owns `value` and `onSelect`.\n */\nexport function OptionSwitcherMenu<T extends string>({\n  icon,\n  \"aria-label\": ariaLabelAttr,\n  ariaLabel: ariaLabelProp,\n  title,\n  heading,\n  options,\n  value,\n  onSelect,\n}: {\n  icon: ReactNode;\n  title?: string;\n  heading?: string;\n  options: OptionSwitcherOption<T>[];\n  value: T;\n  onSelect: (value: T) => void;\n} & RequiredMenuName) {\n  // The DOM spelling wins; `ariaLabel` is the fallback for call sites not moved yet.\n  const ariaLabel = ariaLabelAttr ?? ariaLabelProp;\n  return (\n    <HoverMenu\n      aria-label={ariaLabel}\n      trigger={({ toggle }) => (\n        <Tooltip label={title} portal>\n          <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n            {icon}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n              {heading}\n            </li>\n          )}\n          {options.map((opt) => (\n            <li key={opt.value}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onSelect(opt.value);\n                  close();\n                }}\n                className={TOPBAR_MENU_ITEM_CLASS}\n              >\n                <span>{opt.label}</span>\n                {value === opt.value && <Check className=\"size-4 text-secondary\" />}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA0DU,cAeI,YAfJ;AAzDV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,eAAe;AA8BjB,SAAS,mBAAqC;AAAA,EACnD;AAAA,EACA,cAAc;AAAA,EACd,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOsB;AAEpB,QAAM,YAAY,iBAAiB;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,SAAS,CAAC,EAAE,OAAO,MACjB,oBAAC,WAAQ,OAAO,OAAO,QAAM,MAC3B,8BAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH,GACF;AAAA,MAGD,WAAC,UACA,qBAAC,QAAG,WAAU,QACX;AAAA,mBACC,oBAAC,QAAG,WAAU,+EACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,IAAI,KAAK;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,kCAAC,UAAM,cAAI,OAAM;AAAA,cAChB,UAAU,IAAI,SAAS,oBAAC,SAAM,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnE,KAXO,IAAI,KAYb,CACD;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell/role-switcher.d.ts

@@ -1,10 +1,11 @@
-import * as react from 'react';
-
-interface RoleSwitcherProps<R extends string> {
+export interface RoleSwitcherProps<R extends string> {
     roles: readonly R[];
     value: R;
     onChange: (role: R) => void;
     /** Default: `topBar.switchRole` from the {@link UiKitProvider}, else English. */
+    "aria-label"?: string;
+    /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).
+     *  Names the switcher only when `aria-label` is absent. */
     ariaLabel?: string;
     heading?: string;
     /** The trigger's tooltip. Default: `topBar.role(value)`. */
@@ -20,6 +21,4 @@ interface RoleSwitcherProps<R extends string> {
  * marker — the app is not showing you your own role — and the token carries that
  * amber across both themes instead of pinning one hue onto every palette.
  */
-declare function RoleSwitcher<R extends string>({ roles, value, onChange, ariaLabel, heading, title, }: RoleSwitcherProps<R>): react.JSX.Element;
-
-export { RoleSwitcher, type RoleSwitcherProps };
+export declare function RoleSwitcher<R extends string>({ roles, value, onChange, "aria-label": ariaLabelAttr, ariaLabel, heading, title, }: RoleSwitcherProps<R>): import("react").JSX.Element;

package/dist/shell/role-switcher.js

@@ -7,18 +7,19 @@ function RoleSwitcher({
   roles,
   value,
   onChange,
+  "aria-label": ariaLabelAttr,
   ariaLabel,
   heading,
   title
 }) {
-  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { switchRole: ariaLabel });
+  const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { switchRole: ariaLabelAttr ?? ariaLabel });
   return /* @__PURE__ */ jsx(
     OptionSwitcherMenu,
     {
-      ariaLabel: labels.switchRole,
+      "aria-label": labels.switchRole,
       title: title ?? labels.role(value),
       heading,
-      icon: /* @__PURE__ */ jsx(FlaskConical, { className: "size-5 text-[var(--warning)]" }),
+      icon: /* @__PURE__ */ jsx(FlaskConical, { className: "size-5 text-warning" }),
       options: roles.map((r) => ({ value: r, label: r })),
       value,
       onSelect: onChange

package/dist/shell/role-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/role-switcher.tsx"],"sourcesContent":["import { FlaskConical } from \"lucide-react\";\nimport { OptionSwitcherMenu } from \"./option-switcher-menu\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface RoleSwitcherProps<R extends string> {\n  roles: readonly R[];\n  value: R;\n  onChange: (role: R) => void;\n  /** Default: `topBar.switchRole` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  heading?: string;\n  /** The trigger's tooltip. Default: `topBar.role(value)`. */\n  title?: string;\n}\n\n/**\n * A reusable user-role switcher (feedback #337): a thin wrapper over\n * {@link OptionSwitcherMenu} with the standard flask icon, so an app drops it in\n * the top bar with just the role list + current value + a handler. Typically\n * dev-only / UI-only, but the app decides where and whether to render it.\n *\n * The flask wears `--warning` rather than a fixed `amber-500`: it is a caution\n * marker — the app is not showing you your own role — and the token carries that\n * amber across both themes instead of pinning one hue onto every palette.\n */\nexport function RoleSwitcher<R extends string>({\n  roles,\n  value,\n  onChange,\n  ariaLabel,\n  heading,\n  title,\n}: RoleSwitcherProps<R>) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { switchRole: ariaLabel });\n  return (\n    <OptionSwitcherMenu<R>\n      ariaLabel={labels.switchRole}\n      title={title ?? labels.role(value)}\n      heading={heading}\n      icon={<FlaskConical className=\"size-5 text-[var(--warning)]\" />}\n      options={roles.map((r) => ({ value: r, label: r }))}\n      value={value}\n      onSelect={onChange}\n    />\n  );\n}\n"],"mappings":";AAuCY;AAvCZ,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,wBAAwB,oBAAoB;AAuB9C,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,SAAS,aAAa,UAAU,wBAAwB,EAAE,YAAY,UAAU,CAAC;AACvF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,OAAO;AAAA,MAClB,OAAO,SAAS,OAAO,KAAK,KAAK;AAAA,MACjC;AAAA,MACA,MAAM,oBAAC,gBAAa,WAAU,gCAA+B;AAAA,MAC7D,SAAS,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,MAClD;AAAA,MACA,UAAU;AAAA;AAAA,EACZ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/role-switcher.tsx"],"sourcesContent":["import { FlaskConical } from \"lucide-react\";\nimport { OptionSwitcherMenu } from \"./option-switcher-menu\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\nexport interface RoleSwitcherProps<R extends string> {\n  roles: readonly R[];\n  value: R;\n  onChange: (role: R) => void;\n  /** Default: `topBar.switchRole` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** @deprecated 0.34 — use `aria-label`; removed in 0.35 (refactor audit 2026-10, API-1).\n   *  Names the switcher only when `aria-label` is absent. */\n  ariaLabel?: string;\n  heading?: string;\n  /** The trigger's tooltip. Default: `topBar.role(value)`. */\n  title?: string;\n}\n\n/**\n * A reusable user-role switcher (feedback #337): a thin wrapper over\n * {@link OptionSwitcherMenu} with the standard flask icon, so an app drops it in\n * the top bar with just the role list + current value + a handler. Typically\n * dev-only / UI-only, but the app decides where and whether to render it.\n *\n * The flask wears `--warning` rather than a fixed `amber-500`: it is a caution\n * marker — the app is not showing you your own role — and the token carries that\n * amber across both themes instead of pinning one hue onto every palette.\n */\nexport function RoleSwitcher<R extends string>({\n  roles,\n  value,\n  onChange,\n  \"aria-label\": ariaLabelAttr,\n  ariaLabel,\n  heading,\n  title,\n}: RoleSwitcherProps<R>) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { switchRole: ariaLabelAttr ?? ariaLabel });\n  return (\n    <OptionSwitcherMenu<R>\n      aria-label={labels.switchRole}\n      title={title ?? labels.role(value)}\n      heading={heading}\n      icon={<FlaskConical className=\"size-5 text-warning\" />}\n      options={roles.map((r) => ({ value: r, label: r }))}\n      value={value}\n      onSelect={onChange}\n    />\n  );\n}\n"],"mappings":";AA2CY;AA3CZ,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,wBAAwB,oBAAoB;AA0B9C,SAAS,aAA+B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,SAAS,aAAa,UAAU,wBAAwB,EAAE,YAAY,iBAAiB,UAAU,CAAC;AACxG,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,OAAO;AAAA,MACnB,OAAO,SAAS,OAAO,KAAK,KAAK;AAAA,MACjC;AAAA,MACA,MAAM,oBAAC,gBAAa,WAAU,uBAAsB;AAAA,MACpD,SAAS,MAAM,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,EAAE,EAAE;AAAA,MAClD;AAAA,MACA,UAAU;AAAA;AAAA,EACZ;AAEJ;","names":[]}

package/dist/shell/top-bar-brand.d.ts

@@ -1,106 +1,6 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { e2 as KitLinkProps, e1 as KitLinkComponent } from '../delete-account-setting-DiPX4Vue.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import '../components/data-table-sort.js';
-import '../components/swipeable-row.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import 'lucide-react';
-import '../components/field-parts.js';
-import '../components/write-lock.js';
-import '../components/mini-calendar.js';
-import '../components/calendar-heatmap.js';
-import '../components/popover.js';
-import '../hooks/use-breakpoint.js';
-import '../components/field-sync.js';
-import '../wizard/types.js';
-import '../tour/tour.js';
-import '../search/command-palette.js';
-import '../search/global-search.js';
-import '../search/search-index.js';
-import '../components/month-picker.js';
-import '../components/page-contents.js';
-import '../components/series-chart-labels.js';
-import '../components/pie-chart-labels.js';
-import '../components/sparkline.js';
-import '../components/signature-pad.js';
-import '../components/password-strength.js';
-import '../components/swatch-picker.js';
-import '../components/tile-radio.js';
-import '../components/icon-picker.js';
-import '../components/dialog-frame.js';
-import '../components/modal.js';
-import '../hooks/use-search-param-state.js';
-import '../components/measured-grid.js';
-import '../components/user-avatar.js';
-import '../lib/person-name.js';
-import './topbar-action-menu.js';
-import '../components/menu-item.js';
-import '../components/floating-panel.js';
-import '../hooks/use-authed-src.js';
-import '../components/account-settings-labels.js';
-import '../components/bulk-action-bar.js';
-import '../components/list.js';
-import '../components/breadcrumbs.js';
-import '../components/toast.js';
-import '../components/description-list.js';
-import '../components/line-items.js';
-import '../components/error-boundary.js';
-import '../components/authed-image.js';
-import '../components/image-grid.js';
-import '../components/lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import './topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import './company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import '../components/account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../components/appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import '../components/reauth-dialog.js';
-import '../components/server-wake.js';
-import '../lib/server-wake.js';
-import '../components/translation-review-labels.js';
-import '../lib/translation-review.js';
-import '../components/country-select.js';
-import '../components/inline-edit-field.js';
-import '../lib/iban.js';
-import '../lib/phone.js';
-import '../components/sign-chip.js';
-import '../components/column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import '../components/focus-ring.js';
-
-interface TopBarBrandProps extends Omit<KitLinkProps, "href" | "children"> {
+import type { ReactNode } from "react";
+import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels.js";
+export interface TopBarBrandProps extends Omit<KitLinkProps, "href" | "children"> {
     /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */
     logo: ReactNode;
     /** The product name beside the logo, and the link's accessible name. */
@@ -123,6 +23,4 @@ interface TopBarBrandProps extends Omit<KitLinkProps, "href" | "children"> {
  * because the name could be cut. Here the name is `sr-only` below the breakpoint, so
  * the logo is the whole visible link there and the name is still what it is called.
  */
-declare function TopBarBrand({ logo, name, to, collapseBelow, renderLink, className, ...rest }: TopBarBrandProps): react.JSX.Element;
-
-export { TopBarBrand, type TopBarBrandProps };
+export declare function TopBarBrand({ logo, name, to, collapseBelow, renderLink, className, ...rest }: TopBarBrandProps): import("react").JSX.Element;

package/dist/shell/top-bar-brand.js

@@ -29,7 +29,7 @@ function TopBarBrand({
       href: to,
       className: cn(
         // `relative` contains the sr-only name.
-        "relative flex min-w-0 items-center gap-2 rounded-md font-semibold text-[var(--text-primary)] hover:opacity-80",
+        "relative flex min-w-0 items-center gap-2 rounded-md font-semibold text-primary hover:opacity-80",
         FOCUS_RING,
         className
       ),

package/dist/shell/top-bar-brand.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/top-bar-brand.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link as RouterLink } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"../components/focus-ring\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"../components/text-link\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\nconst routerLink: KitLinkComponent = ({ href, ...p }) => <RouterLink to={href} {...p} />;\nconst plainLink: KitLinkComponent = ({ children, ...p }) => <a {...p}>{children}</a>;\n\n/** Below which width only the logo shows. The name stays in the link's accessible\n *  name at every width. */\nconst COLLAPSE = {\n  sm: \"sr-only sm:not-sr-only sm:truncate\",\n  md: \"sr-only md:not-sr-only md:truncate\",\n} as const;\n\nexport interface TopBarBrandProps extends Omit<KitLinkProps, \"href\" | \"children\"> {\n  /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */\n  logo: ReactNode;\n  /** The product name beside the logo, and the link's accessible name. */\n  name: ReactNode;\n  /** Where the brand links to. Default `/`. */\n  to?: string;\n  /** Hide the name below `sm` (default) or `md`; `false` always shows it. It is\n   *  visually hidden, not removed, so the link keeps its name on a phone. */\n  collapseBelow?: \"sm\" | \"md\" | false;\n  /** The app's router link for this one link. Default: the provider's\n   *  `linkComponent`, else react-router's `Link`. */\n  renderLink?: KitLinkComponent;\n}\n\n/**\n * The top bar's home link: logo + product name, collapsing to the logo on a phone.\n * Pass it as {@link TopBar}'s `brand`.\n *\n * kastlan's (top-bar.tsx:66) hid nothing and truncated the name instead — on a phone\n * with five actions that left \"Ka…\" beside the logo — and needed an `aria-label`\n * because the name could be cut. Here the name is `sr-only` below the breakpoint, so\n * the logo is the whole visible link there and the name is still what it is called.\n */\nexport function TopBarBrand({\n  logo,\n  name,\n  to = \"/\",\n  collapseBelow = \"sm\",\n  renderLink,\n  className,\n  ...rest\n}: TopBarBrandProps) {\n  const kitLink = useKitLink();\n  return (\n    <RenderedLink\n      // The kit's one link rule (`pickLinkRenderer`): an external `to` or an in-page\n      // `#anchor` is a plain `<a>`, never the router's link.\n      render={pickLinkRenderer(renderLink, kitLink ?? routerLink, to) ?? plainLink}\n      {...rest}\n      href={to}\n      className={cn(\n        // `relative` contains the sr-only name.\n        \"relative flex min-w-0 items-center gap-2 rounded-md font-semibold text-[var(--text-primary)] hover:opacity-80\",\n        FOCUS_RING,\n        className,\n      )}\n    >\n      <span aria-hidden className=\"flex shrink-0 items-center [&_svg]:h-6 [&_svg]:w-auto\">\n        {logo}\n      </span>\n      <span className={collapseBelow ? COLLAPSE[collapseBelow] : \"truncate\"}>{name}</span>\n    </RenderedLink>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAQyD,cA6CrD,YA7CqD;AAPzD,SAAS,QAAQ,kBAAkB;AACnC,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAGjC,MAAM,aAA+B,CAAC,EAAE,MAAM,GAAG,EAAE,MAAM,oBAAC,cAAW,IAAI,MAAO,GAAG,GAAG;AACtF,MAAM,YAA8B,CAAC,EAAE,UAAU,GAAG,EAAE,MAAM,oBAAC,OAAG,GAAG,GAAI,UAAS;AAIhF,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AACN;AA0BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MAGC,QAAQ,iBAAiB,YAAY,WAAW,YAAY,EAAE,KAAK;AAAA,MAClE,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,QAET;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,UAAK,eAAW,MAAC,WAAU,yDACzB,gBACH;AAAA,QACA,oBAAC,UAAK,WAAW,gBAAgB,SAAS,aAAa,IAAI,YAAa,gBAAK;AAAA;AAAA;AAAA,EAC/E;AAEJ;AAGA,SAAS,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACvF,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/shell/top-bar-brand.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Link as RouterLink } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"../components/focus-ring\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"../components/text-link\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\nconst routerLink: KitLinkComponent = ({ href, ...p }) => <RouterLink to={href} {...p} />;\nconst plainLink: KitLinkComponent = ({ children, ...p }) => <a {...p}>{children}</a>;\n\n/** Below which width only the logo shows. The name stays in the link's accessible\n *  name at every width. */\nconst COLLAPSE = {\n  sm: \"sr-only sm:not-sr-only sm:truncate\",\n  md: \"sr-only md:not-sr-only md:truncate\",\n} as const;\n\nexport interface TopBarBrandProps extends Omit<KitLinkProps, \"href\" | \"children\"> {\n  /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */\n  logo: ReactNode;\n  /** The product name beside the logo, and the link's accessible name. */\n  name: ReactNode;\n  /** Where the brand links to. Default `/`. */\n  to?: string;\n  /** Hide the name below `sm` (default) or `md`; `false` always shows it. It is\n   *  visually hidden, not removed, so the link keeps its name on a phone. */\n  collapseBelow?: \"sm\" | \"md\" | false;\n  /** The app's router link for this one link. Default: the provider's\n   *  `linkComponent`, else react-router's `Link`. */\n  renderLink?: KitLinkComponent;\n}\n\n/**\n * The top bar's home link: logo + product name, collapsing to the logo on a phone.\n * Pass it as {@link TopBar}'s `brand`.\n *\n * kastlan's (top-bar.tsx:66) hid nothing and truncated the name instead — on a phone\n * with five actions that left \"Ka…\" beside the logo — and needed an `aria-label`\n * because the name could be cut. Here the name is `sr-only` below the breakpoint, so\n * the logo is the whole visible link there and the name is still what it is called.\n */\nexport function TopBarBrand({\n  logo,\n  name,\n  to = \"/\",\n  collapseBelow = \"sm\",\n  renderLink,\n  className,\n  ...rest\n}: TopBarBrandProps) {\n  const kitLink = useKitLink();\n  return (\n    <RenderedLink\n      // The kit's one link rule (`pickLinkRenderer`): an external `to` or an in-page\n      // `#anchor` is a plain `<a>`, never the router's link.\n      render={pickLinkRenderer(renderLink, kitLink ?? routerLink, to) ?? plainLink}\n      {...rest}\n      href={to}\n      className={cn(\n        // `relative` contains the sr-only name.\n        \"relative flex min-w-0 items-center gap-2 rounded-md font-semibold text-primary hover:opacity-80\",\n        FOCUS_RING,\n        className,\n      )}\n    >\n      <span aria-hidden className=\"flex shrink-0 items-center [&_svg]:h-6 [&_svg]:w-auto\">\n        {logo}\n      </span>\n      <span className={collapseBelow ? COLLAPSE[collapseBelow] : \"truncate\"}>{name}</span>\n    </RenderedLink>\n  );\n}\n\n/** Calls the link renderer as a component, so a router link's hooks are its own. */\nfunction RenderedLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAQyD,cA6CrD,YA7CqD;AAPzD,SAAS,QAAQ,kBAAkB;AACnC,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAGjC,MAAM,aAA+B,CAAC,EAAE,MAAM,GAAG,EAAE,MAAM,oBAAC,cAAW,IAAI,MAAO,GAAG,GAAG;AACtF,MAAM,YAA8B,CAAC,EAAE,UAAU,GAAG,EAAE,MAAM,oBAAC,OAAG,GAAG,GAAI,UAAS;AAIhF,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,IAAI;AACN;AA0BO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,KAAK;AAAA,EACL,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,UAAU,WAAW;AAC3B,SACE;AAAA,IAAC;AAAA;AAAA,MAGC,QAAQ,iBAAiB,YAAY,WAAW,YAAY,EAAE,KAAK;AAAA,MAClE,GAAG;AAAA,MACJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA,QAET;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,UAAK,eAAW,MAAC,WAAU,yDACzB,gBACH;AAAA,QACA,oBAAC,UAAK,WAAW,gBAAgB,SAAS,aAAa,IAAI,YAAa,gBAAK;AAAA;AAAA;AAAA,EAC/E;AAEJ;AAGA,SAAS,aAAa,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACvF,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/shell/top-bar.d.ts

@@ -1,14 +1,13 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithRef, ReactNode } from "react";
 /**
- * `extends ComponentPropsWithoutRef<"header">` because this IS the `<header>`, and it is
+ * `extends ComponentPropsWithRef<"header">` because this IS the `<header>`, and it is
  * the `sticky top-0` element itself: a consumer cannot wrap it to add an attribute
  * without the sticking moving to the wrapper. The one that matters most is `aria-label`
  * — a `<header>` is a `banner` landmark, and a landmark with no name is how two of them
- * become indistinguishable in a screen reader's landmark list.
+ * become indistinguishable in a screen reader's landmark list. The `ref` too since 0.34
+ * (API-2, refactor audit 2026-10).
  */
-interface TopBarProps extends ComponentPropsWithoutRef<"header"> {
+export interface TopBarProps extends ComponentPropsWithRef<"header"> {
     brand: ReactNode;
     actions?: ReactNode;
     className?: string;
@@ -18,6 +17,4 @@ interface TopBarProps extends ComponentPropsWithoutRef<"header"> {
  * on the right (theme/palette/language controls, account menu, etc.). Domain-free
  * — each app composes its own actions from the shared controls plus its own menus.
  */
-declare function TopBar({ brand, actions, className, ...rest }: TopBarProps): react.JSX.Element;
-
-export { TopBar, type TopBarProps };
+export declare function TopBar({ brand, actions, className, ...rest }: TopBarProps): import("react").JSX.Element;

package/dist/shell/top-bar.js

@@ -11,7 +11,7 @@ function TopBar({ brand, actions, className, ...rest }) {
         // expanded transaction editor (z-30), which on mobile shares the page
         // scroll and otherwise slid over the header while scrolling (feedback
         // #320). Modals/tour (z-50/60) still sit above it.
-        "sticky top-0 z-40 flex h-12 items-center justify-between gap-2 border-b border-[var(--border)] bg-[var(--bg-surface)] px-3 md:px-6",
+        "sticky top-0 z-40 flex h-12 items-center justify-between gap-2 border-b border-subtle bg-surface px-3 md:px-6",
         className
       ),
       children: [

package/dist/shell/top-bar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * `extends ComponentPropsWithoutRef<\"header\">` because this IS the `<header>`, and it is\n * the `sticky top-0` element itself: a consumer cannot wrap it to add an attribute\n * without the sticking moving to the wrapper. The one that matters most is `aria-label`\n * — a `<header>` is a `banner` landmark, and a landmark with no name is how two of them\n * become indistinguishable in a screen reader's landmark list.\n */\nexport interface TopBarProps extends ComponentPropsWithoutRef<\"header\"> {\n  brand: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n}\n\n/**\n * The sticky app header frame: a `brand` slot on the left and an `actions` slot\n * on the right (theme/palette/language controls, account menu, etc.). Domain-free\n * — each app composes its own actions from the shared controls plus its own menus.\n */\nexport function TopBar({ brand, actions, className, ...rest }: TopBarProps) {\n  return (\n    <header\n      {...rest}\n      className={cn(\n        // z-40 keeps the app header above sticky page content — notably the\n        // expanded transaction editor (z-30), which on mobile shares the page\n        // scroll and otherwise slid over the header while scrolling (feedback\n        // #320). Modals/tour (z-50/60) still sit above it.\n        \"sticky top-0 z-40 flex h-12 items-center justify-between gap-2 border-b border-[var(--border)] bg-[var(--bg-surface)] px-3 md:px-6\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n      <div className=\"flex items-center gap-1\">{actions}</div>\n    </header>\n  );\n}\n"],"mappings":";AAuBI,SAWE,KAXF;AAtBJ,SAAS,UAAU;AAoBZ,SAAS,OAAO,EAAE,OAAO,SAAS,WAAW,GAAG,KAAK,GAAgB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAU,mCAAmC,iBAAM;AAAA,QACxD,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA;AAAA;AAAA,EACpD;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/top-bar.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * `extends ComponentPropsWithRef<\"header\">` because this IS the `<header>`, and it is\n * the `sticky top-0` element itself: a consumer cannot wrap it to add an attribute\n * without the sticking moving to the wrapper. The one that matters most is `aria-label`\n * — a `<header>` is a `banner` landmark, and a landmark with no name is how two of them\n * become indistinguishable in a screen reader's landmark list. The `ref` too since 0.34\n * (API-2, refactor audit 2026-10).\n */\nexport interface TopBarProps extends ComponentPropsWithRef<\"header\"> {\n  brand: ReactNode;\n  actions?: ReactNode;\n  className?: string;\n}\n\n/**\n * The sticky app header frame: a `brand` slot on the left and an `actions` slot\n * on the right (theme/palette/language controls, account menu, etc.). Domain-free\n * — each app composes its own actions from the shared controls plus its own menus.\n */\nexport function TopBar({ brand, actions, className, ...rest }: TopBarProps) {\n  return (\n    <header\n      {...rest}\n      className={cn(\n        // z-40 keeps the app header above sticky page content — notably the\n        // expanded transaction editor (z-30), which on mobile shares the page\n        // scroll and otherwise slid over the header while scrolling (feedback\n        // #320). Modals/tour (z-50/60) still sit above it.\n        \"sticky top-0 z-40 flex h-12 items-center justify-between gap-2 border-b border-subtle bg-surface px-3 md:px-6\",\n        className,\n      )}\n    >\n      <div className=\"flex min-w-0 items-center gap-2\">{brand}</div>\n      <div className=\"flex items-center gap-1\">{actions}</div>\n    </header>\n  );\n}\n"],"mappings":";AAwBI,SAWE,KAXF;AAvBJ,SAAS,UAAU;AAqBZ,SAAS,OAAO,EAAE,OAAO,SAAS,WAAW,GAAG,KAAK,GAAgB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,4BAAC,SAAI,WAAU,mCAAmC,iBAAM;AAAA,QACxD,oBAAC,SAAI,WAAU,2BAA2B,mBAAQ;AAAA;AAAA;AAAA,EACpD;AAEJ;","names":[]}

package/dist/shell/topbar-action-menu.d.ts

@@ -1,20 +1,7 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-import { MenuItemTone } from '../components/menu-item.js';
-import { UserAvatarBadge } from '../components/user-avatar.js';
-import 'lucide-react';
-import '../lib/person-name.js';
-import '../components/status-dot.js';
-import '../components/progress-bar.js';
-import '../components/signed-amount.js';
-import '../components/stat-tile.js';
-import '../components/chip.js';
-import '../components/field-parts.js';
-import '../components/tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../components/write-lock.js';
-
+import type { ReactNode } from "react";
+import { type HoverMenuProps } from "../components/hover-menu.js";
+import type { MenuItemTone } from "../components/menu-item.js";
+import type { UserAvatarBadge } from "../components/user-avatar.js";
 /**
  * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a
  * `link` navigates via react-router, a `divider` draws a rule, and a `heading` names
@@ -25,7 +12,7 @@ import '../components/write-lock.js';
  * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the
  * page already open, `disabled`.
  */
-type TopBarMenuEntry = {
+export type TopBarMenuEntry = {
     kind?: "action";
     key: string;
     icon?: ReactNode;
@@ -73,7 +60,7 @@ type TopBarMenuEntry = {
      *
      * The menu-wide `heading` prop is the panel's title, drawn once above everything;
      * with group headings it is usually redundant (two stacked caps lines read as one),
-     * and the trigger's `ariaLabel` already names the menu.
+     * and the trigger's `aria-label` already names the menu.
      */
     kind: "heading";
     key: string;
@@ -86,7 +73,7 @@ type TopBarMenuEntry = {
  * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the
  * arrow keys pass over it.
  */
-interface TopBarMenuHeader {
+export interface TopBarMenuHeader {
     /** The first line — the user's name. */
     title: ReactNode;
     /** The muted second line — an email, a role. */
@@ -101,6 +88,20 @@ interface TopBarMenuHeader {
      */
     extra?: ReactNode | ((close: () => void) => ReactNode);
 }
+/**
+ * Names the trigger and the menu: one of the two spellings is required (API-1, refactor
+ * audit 2026-10). `aria-label` wins when both are given. OptionSwitcherMenu has the same
+ * type; both become a plain required `aria-label` when `ariaLabel` goes in 0.35.
+ */
+type RequiredMenuName = {
+    "aria-label": string;
+    /** @deprecated 0.34 — use `aria-label`; removed in 0.35. */
+    ariaLabel?: string;
+} | {
+    "aria-label"?: string;
+    /** @deprecated 0.34 — use `aria-label`; removed in 0.35. */
+    ariaLabel: string;
+};
 /**
  * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,
  * with an optional uppercase heading and divider rules. Generic glue over the
@@ -118,7 +119,7 @@ interface TopBarMenuHeader {
  * hover panel at 390px, kept inside the viewport by `HoverMenu`, and a heading wraps
  * rather than widening it.
  */
-declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, href, ariaLabel, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
+export declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, href, "aria-label": ariaLabelAttr, ariaLabel: ariaLabelProp, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
     /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */
     icon?: ReactNode;
     /**
@@ -133,11 +134,11 @@ declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName,
      * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,
      * the toggle, the keyboard. `open` is there for a chevron that turns.
      *
-     * The button is named by `ariaLabel` followed by any readable text in the face — a
+     * The button is named by `aria-label` followed by any readable text in the face — a
      * `UserAvatar` `badge` label reaches a screen reader that way ("Account menu 3
      * unread"), where an `aria-label` on the button would have hidden it. A
      * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the
-     * name if `ariaLabel` carries it ("Marcel Eifert, account menu").
+     * name if `aria-label` carries it ("Marcel Eifert, account menu").
      */
     trigger?: (state: {
         open: boolean;
@@ -152,12 +153,10 @@ declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName,
      * row, so the rows stay reachable by keyboard. A tap on a touch screen follows the
      * link — so use it where the destination offers everything the menu does. Rendered as
      * an `<a>` (the router's `Link`) with `aria-haspopup="menu"` and `aria-expanded`,
-     * named by `ariaLabel`: a link inside the kit's button would be interactive content
+     * named by `aria-label`: a link inside the kit's button would be interactive content
      * inside interactive content.
      */
     href?: string;
-    /** Names the trigger and the menu. */
-    ariaLabel: string;
     heading?: string;
     /** A non-interactive identity block above the rows. */
     header?: TopBarMenuHeader;
@@ -176,9 +175,9 @@ declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName,
     footer?: ReactNode | ((close: () => void) => ReactNode);
     /** Wraps the footer in a `<nav>` with this name ("Legal"). Without it, a plain block. */
     footerLabel?: string;
-    /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */
-    align?: "start" | "end" | "left" | "right";
+    /** Which edge of the trigger the panel lines up with (see `HoverMenu`, whose type this
+     *  is: `left`/`right` are deprecated 0.34). Default `end`. */
+    align?: HoverMenuProps["align"];
     panelClassName?: string;
-}): react.JSX.Element;
-
-export { TopBarActionMenu, type TopBarMenuEntry, type TopBarMenuHeader };
+} & RequiredMenuName): import("react").JSX.Element;
+export {};