@eifi1/ui-kit 0.31.1 → 0.32.1

package/dist/components/use-table-state.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import './data-table-sort.js';
-export { I as DEFAULT_PERSIST_PREFIX, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, w as readTableUrlState, J as useTableState, E as useTableUrlState } from '../data-table-labels-DUELeXpa.js';
+export { I as DEFAULT_PERSIST_PREFIX, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, w as readTableUrlState, J as useTableState, E as useTableUrlState } from '../data-table-labels-kpAAVi6g.js';
 import './swipeable-row.js';

package/dist/components/user-avatar.d.ts

@@ -7,6 +7,10 @@ import './signed-amount.js';
 import './stat-tile.js';
 import './chip.js';
 import 'lucide-react';
+import './field-parts.js';
+import './tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 
 /** Initials from a display name (first + last) or, failing that, an email —
  *  e.g. "Marcel Eifert" → "ME", "marcel@x.com" → "MA". App-agnostic.
@@ -21,7 +25,7 @@ import 'lucide-react';
  *  answered it at the wrong end. */
 declare function avatarInitials(name?: string | null, email?: string | null): string;
 declare const AVATAR_SIZES: {
-    readonly sm: "size-7 text-[11px]";
+    readonly sm: "size-7 text-caption";
     readonly md: "size-8 text-xs";
     readonly lg: "size-12 text-base";
 };

package/dist/components/user-avatar.js

@@ -11,7 +11,7 @@ function avatarInitials(name, email) {
   return source.slice(0, 2).toUpperCase();
 }
 const AVATAR_SIZES = {
-  sm: "size-7 text-[11px]",
+  sm: "size-7 text-caption",
   md: "size-8 text-xs",
   lg: "size-12 text-base"
 };

package/dist/components/user-avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { personInitials } from \"../lib/person-name\";\nimport type { PersonName } from \"../lib/person-name\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { StatusDot } from \"./status-dot\";\nimport type { StatusDotSize, StatusDotTone } from \"./status-dot\";\n\n/** Initials from a display name (first + last) or, failing that, an email —\n *  e.g. \"Marcel Eifert\" → \"ME\", \"marcel@x.com\" → \"MA\". App-agnostic.\n *\n *  \"Failing that\" means BLANK, not merely absent. This was `name ?? email ?? \"?\"`,\n *  and `??` falls through on null/undefined alone — so an empty or whitespace-only\n *  display name short-circuited the email it had in hand and landed on the guard\n *  below, returning \"?\" for a user whose address says \"MA\" perfectly well. Keksdose\n *  cannot reach it (its `display_name` has `min_length=1`), but this is exported as\n *  app-agnostic, and any consumer whose profile name is optional free text got a wall\n *  of \"?\" chips. The guard is what shows the empty case was foreseen; it just\n *  answered it at the wrong end. */\nexport function avatarInitials(name?: string | null, email?: string | null): string {\n  const source = [name, email].map((s) => s?.trim()).find(Boolean) ?? \"?\";\n  const parts = source.split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return source.slice(0, 2).toUpperCase();\n}\n\nconst AVATAR_SIZES = {\n  sm: \"size-7 text-[11px]\",\n  md: \"size-8 text-xs\",\n  lg: \"size-12 text-base\",\n} as const;\n\nconst CHIP =\n  \"inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--bg-inverse)] font-semibold text-[var(--text-inverse)]\";\n\n/** The dot grows with the avatar: 8px on `sm`, 10px on `md` (keksdose's), 12px on `lg`. */\nconst BADGE_SIZES: Record<keyof typeof AVATAR_SIZES, StatusDotSize> = { sm: \"sm\", md: \"md\", lg: \"lg\" };\n\n/** A status dot in the avatar's top corner — an unread count, presence. */\nexport interface UserAvatarBadge {\n  /** What the dot MEANS, for a screen reader (\"3 unread\"). Required: a coloured circle\n   *  says nothing to someone who cannot see it. */\n  label: ReactNode;\n  /** Default `danger`, the unread dot both apps draw by hand. */\n  tone?: StatusDotTone;\n}\n\n/** A `<span>`'s props, minus `children`: the content is the initials this computes\n *  from `person`/`name`/`email`, so there is nothing for a caller to put inside. */\nexport interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  name?: string | null;\n  email?: string | null;\n  /**\n   * The person's first and last name (0.29.0, docs/auth-harmonization.md §3.2) —\n   * preferred over `name` whenever either part is filled in. The initials follow the\n   * READER's language, the provider's `locale`: \"AE\" for Ada Example, \"EA\" in Hungarian\n   * (family name first), the family name's first character alone in Chinese. See\n   * {@link personInitials}.\n   *\n   * `name` stays the fallback for an API that still sends only `display_name`, and\n   * `email` after it: a person whose two parts are both blank falls through to them.\n   * A migrated user (the whole old display name in `first`, no `last`, §3.3) keeps the\n   * initials they had.\n   */\n  person?: PersonName | null;\n  size?: keyof typeof AVATAR_SIZES;\n  /**\n   * A status dot in the top-end corner (the top-right in LTR, top-left in RTL), ringed\n   * in the surface colour so it reads as its own mark (keksdose account-menu ~385,\n   * top-bar :152). Its `label` is read as text where the dot sits — inside a button\n   * named by its content it joins that name. In `TopBarActionMenu`'s `trigger` the\n   * button is named by the menu's `ariaLabel` followed by this label: \"Account menu\n   * 3 unread\". The initials stay hidden either way, so the person's name is NOT part\n   * of it — put it in `ariaLabel` (\"Marcel Eifert, account menu\") if it should be.\n   */\n  badge?: UserAvatarBadge | null;\n}\n\n/**\n * A round initials avatar — the common user chip shared across apps (feedback\n * #333). Purely presentational; wrap it in a button for the account menu trigger.\n */\nexport function UserAvatar({ name, email, person, size = \"md\", badge, className, ...rest }: UserAvatarProps) {\n  const locale = useKitLocale();\n  const initials = (person ? personInitials(person, locale) : \"\") || avatarInitials(name, email);\n  if (badge) {\n    // A wrapper, because the chip itself is `aria-hidden` and the badge label must not\n    // be. `className` stays on the chip (a size override still sizes the circle); the\n    // other attributes go on the wrapper, which is what a caller addresses. `relative`\n    // also contains the sr-only text.\n    return (\n      <span {...rest} className=\"relative inline-flex shrink-0\">\n        <span\n          aria-hidden\n          className={cn(\n            CHIP,\n            AVATAR_SIZES[size],\n            className,\n          )}\n        >\n          {initials}\n        </span>\n        <StatusDot\n          ring\n          tone={badge.tone ?? \"danger\"}\n          size={BADGE_SIZES[size]}\n          className=\"absolute -end-0.5 -top-0.5\"\n        />\n        <span className=\"sr-only\">{badge.label}</span>\n      </span>\n    );\n  }\n  return (\n    <span\n      // `aria-hidden` sits BEFORE the spread, unlike the structural attributes on the\n      // other components here, because it is a DEFAULT rather than an invariant. The\n      // avatar is decorative next to the name it belongs to — which is where all three\n      // apps render it — so hiding it stops a screen reader saying \"ME\" after the word\n      // \"Marcel Eifert\". A caller who renders one ALONE (an assignee column, a\n      // presence dot) needs the opposite, and now has it: `aria-hidden={false}` plus an\n      // `aria-label` arrives through `...rest` and wins.\n      aria-hidden\n      {...rest}\n      className={cn(\n        CHIP,\n        AVATAR_SIZES[size],\n        className,\n      )}\n    >\n      {initials}\n    </span>\n  );\n}\n"],"mappings":";AA2FM,SACE,KADF;AA1FN,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAcnB,SAAS,eAAe,MAAsB,OAA+B;AAClF,QAAM,SAAS,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,KAAK,OAAO,KAAK;AACpE,QAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AAChD,MAAI,MAAM,UAAU,EAAG,SAAQ,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY;AACtE,SAAO,OAAO,MAAM,GAAG,CAAC,EAAE,YAAY;AACxC;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OACJ;AAGF,MAAM,cAAgE,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AA8C9F,SAAS,WAAW,EAAE,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,WAAW,GAAG,KAAK,GAAoB;AAC3G,QAAM,SAAS,aAAa;AAC5B,QAAM,YAAY,SAAS,eAAe,QAAQ,MAAM,IAAI,OAAO,eAAe,MAAM,KAAK;AAC7F,MAAI,OAAO;AAKT,WACE,qBAAC,UAAM,GAAG,MAAM,WAAU,iCACxB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,aAAa,IAAI;AAAA,YACjB;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAI;AAAA,UACJ,MAAM,MAAM,QAAQ;AAAA,UACpB,MAAM,YAAY,IAAI;AAAA,UACtB,WAAU;AAAA;AAAA,MACZ;AAAA,MACA,oBAAC,UAAK,WAAU,WAAW,gBAAM,OAAM;AAAA,OACzC;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAQC,eAAW;AAAA,MACV,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/user-avatar.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { personInitials } from \"../lib/person-name\";\nimport type { PersonName } from \"../lib/person-name\";\nimport { useKitLocale } from \"../i18n/kit-labels\";\nimport { StatusDot } from \"./status-dot\";\nimport type { StatusDotSize, StatusDotTone } from \"./status-dot\";\n\n/** Initials from a display name (first + last) or, failing that, an email —\n *  e.g. \"Marcel Eifert\" → \"ME\", \"marcel@x.com\" → \"MA\". App-agnostic.\n *\n *  \"Failing that\" means BLANK, not merely absent. This was `name ?? email ?? \"?\"`,\n *  and `??` falls through on null/undefined alone — so an empty or whitespace-only\n *  display name short-circuited the email it had in hand and landed on the guard\n *  below, returning \"?\" for a user whose address says \"MA\" perfectly well. Keksdose\n *  cannot reach it (its `display_name` has `min_length=1`), but this is exported as\n *  app-agnostic, and any consumer whose profile name is optional free text got a wall\n *  of \"?\" chips. The guard is what shows the empty case was foreseen; it just\n *  answered it at the wrong end. */\nexport function avatarInitials(name?: string | null, email?: string | null): string {\n  const source = [name, email].map((s) => s?.trim()).find(Boolean) ?? \"?\";\n  const parts = source.split(/\\s+/).filter(Boolean);\n  if (parts.length >= 2) return (parts[0][0] + parts[1][0]).toUpperCase();\n  return source.slice(0, 2).toUpperCase();\n}\n\nconst AVATAR_SIZES = {\n  sm: \"size-7 text-caption\",\n  md: \"size-8 text-xs\",\n  lg: \"size-12 text-base\",\n} as const;\n\nconst CHIP =\n  \"inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--bg-inverse)] font-semibold text-[var(--text-inverse)]\";\n\n/** The dot grows with the avatar: 8px on `sm`, 10px on `md` (keksdose's), 12px on `lg`. */\nconst BADGE_SIZES: Record<keyof typeof AVATAR_SIZES, StatusDotSize> = { sm: \"sm\", md: \"md\", lg: \"lg\" };\n\n/** A status dot in the avatar's top corner — an unread count, presence. */\nexport interface UserAvatarBadge {\n  /** What the dot MEANS, for a screen reader (\"3 unread\"). Required: a coloured circle\n   *  says nothing to someone who cannot see it. */\n  label: ReactNode;\n  /** Default `danger`, the unread dot both apps draw by hand. */\n  tone?: StatusDotTone;\n}\n\n/** A `<span>`'s props, minus `children`: the content is the initials this computes\n *  from `person`/`name`/`email`, so there is nothing for a caller to put inside. */\nexport interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\"> {\n  name?: string | null;\n  email?: string | null;\n  /**\n   * The person's first and last name (0.29.0, docs/auth-harmonization.md §3.2) —\n   * preferred over `name` whenever either part is filled in. The initials follow the\n   * READER's language, the provider's `locale`: \"AE\" for Ada Example, \"EA\" in Hungarian\n   * (family name first), the family name's first character alone in Chinese. See\n   * {@link personInitials}.\n   *\n   * `name` stays the fallback for an API that still sends only `display_name`, and\n   * `email` after it: a person whose two parts are both blank falls through to them.\n   * A migrated user (the whole old display name in `first`, no `last`, §3.3) keeps the\n   * initials they had.\n   */\n  person?: PersonName | null;\n  size?: keyof typeof AVATAR_SIZES;\n  /**\n   * A status dot in the top-end corner (the top-right in LTR, top-left in RTL), ringed\n   * in the surface colour so it reads as its own mark (keksdose account-menu ~385,\n   * top-bar :152). Its `label` is read as text where the dot sits — inside a button\n   * named by its content it joins that name. In `TopBarActionMenu`'s `trigger` the\n   * button is named by the menu's `ariaLabel` followed by this label: \"Account menu\n   * 3 unread\". The initials stay hidden either way, so the person's name is NOT part\n   * of it — put it in `ariaLabel` (\"Marcel Eifert, account menu\") if it should be.\n   */\n  badge?: UserAvatarBadge | null;\n}\n\n/**\n * A round initials avatar — the common user chip shared across apps (feedback\n * #333). Purely presentational; wrap it in a button for the account menu trigger.\n */\nexport function UserAvatar({ name, email, person, size = \"md\", badge, className, ...rest }: UserAvatarProps) {\n  const locale = useKitLocale();\n  const initials = (person ? personInitials(person, locale) : \"\") || avatarInitials(name, email);\n  if (badge) {\n    // A wrapper, because the chip itself is `aria-hidden` and the badge label must not\n    // be. `className` stays on the chip (a size override still sizes the circle); the\n    // other attributes go on the wrapper, which is what a caller addresses. `relative`\n    // also contains the sr-only text.\n    return (\n      <span {...rest} className=\"relative inline-flex shrink-0\">\n        <span\n          aria-hidden\n          className={cn(\n            CHIP,\n            AVATAR_SIZES[size],\n            className,\n          )}\n        >\n          {initials}\n        </span>\n        <StatusDot\n          ring\n          tone={badge.tone ?? \"danger\"}\n          size={BADGE_SIZES[size]}\n          className=\"absolute -end-0.5 -top-0.5\"\n        />\n        <span className=\"sr-only\">{badge.label}</span>\n      </span>\n    );\n  }\n  return (\n    <span\n      // `aria-hidden` sits BEFORE the spread, unlike the structural attributes on the\n      // other components here, because it is a DEFAULT rather than an invariant. The\n      // avatar is decorative next to the name it belongs to — which is where all three\n      // apps render it — so hiding it stops a screen reader saying \"ME\" after the word\n      // \"Marcel Eifert\". A caller who renders one ALONE (an assignee column, a\n      // presence dot) needs the opposite, and now has it: `aria-hidden={false}` plus an\n      // `aria-label` arrives through `...rest` and wins.\n      aria-hidden\n      {...rest}\n      className={cn(\n        CHIP,\n        AVATAR_SIZES[size],\n        className,\n      )}\n    >\n      {initials}\n    </span>\n  );\n}\n"],"mappings":";AA2FM,SACE,KADF;AA1FN,SAAS,UAAU;AACnB,SAAS,sBAAsB;AAE/B,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB;AAcnB,SAAS,eAAe,MAAsB,OAA+B;AAClF,QAAM,SAAS,CAAC,MAAM,KAAK,EAAE,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,EAAE,KAAK,OAAO,KAAK;AACpE,QAAM,QAAQ,OAAO,MAAM,KAAK,EAAE,OAAO,OAAO;AAChD,MAAI,MAAM,UAAU,EAAG,SAAQ,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,CAAC,EAAE,CAAC,GAAG,YAAY;AACtE,SAAO,OAAO,MAAM,GAAG,CAAC,EAAE,YAAY;AACxC;AAEA,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,OACJ;AAGF,MAAM,cAAgE,EAAE,IAAI,MAAM,IAAI,MAAM,IAAI,KAAK;AA8C9F,SAAS,WAAW,EAAE,MAAM,OAAO,QAAQ,OAAO,MAAM,OAAO,WAAW,GAAG,KAAK,GAAoB;AAC3G,QAAM,SAAS,aAAa;AAC5B,QAAM,YAAY,SAAS,eAAe,QAAQ,MAAM,IAAI,OAAO,eAAe,MAAM,KAAK;AAC7F,MAAI,OAAO;AAKT,WACE,qBAAC,UAAM,GAAG,MAAM,WAAU,iCACxB;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW;AAAA,UACX,WAAW;AAAA,YACT;AAAA,YACA,aAAa,IAAI;AAAA,YACjB;AAAA,UACF;AAAA,UAEC;AAAA;AAAA,MACH;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAI;AAAA,UACJ,MAAM,MAAM,QAAQ;AAAA,UACpB,MAAM,YAAY,IAAI;AAAA,UACtB,WAAU;AAAA;AAAA,MACZ;AAAA,MACA,oBAAC,UAAK,WAAU,WAAW,gBAAM,OAAM;AAAA,OACzC;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAQC,eAAW;AAAA,MACV,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA,aAAa,IAAI;AAAA,QACjB;AAAA,MACF;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/wizard-stepper.js

@@ -7,20 +7,26 @@ function WizardStepper({
   ariaLabel
 }) {
   const currentIndex = steps.findIndex((s) => s.key === current);
-  return /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-1 text-xs", "aria-label": ariaLabel, children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
-    i > 0 && /* @__PURE__ */ jsx("span", { className: "w-4 border-t border-[var(--border)]" }),
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        "aria-current": step.key === current ? "step" : void 0,
-        className: cn(
-          "rounded-full px-2 py-0.5",
-          i === currentIndex ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium" : i < currentIndex ? "text-[var(--text-secondary)]" : "text-[var(--text-placeholder)]"
-        ),
-        children: step.label
-      }
-    )
-  ] }, step.key)) });
+  return (
+    // `flex-wrap`: the steps flow onto a second line rather than past the screen
+    // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).
+    // "Upload — Map columns — Confirm" ran 22 px past a 360 px phone at Extra large.
+    // Where the steps fit, they stay one row.
+    /* @__PURE__ */ jsx("ol", { className: "flex flex-wrap items-center gap-1 text-xs", "aria-label": ariaLabel, children: steps.map((step, i) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
+      i > 0 && /* @__PURE__ */ jsx("span", { className: "w-4 border-t border-[var(--border)]" }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "aria-current": step.key === current ? "step" : void 0,
+          className: cn(
+            "rounded-full px-2 py-0.5",
+            i === currentIndex ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium" : i < currentIndex ? "text-[var(--text-secondary)]" : "text-[var(--text-placeholder)]"
+          ),
+          children: step.label
+        }
+      )
+    ] }, step.key)) })
+  );
 }
 export {
   WizardStepper

package/dist/components/wizard-stepper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/wizard-stepper.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Compact step indicator for the import wizards. Past steps are plain, the\n * current one is highlighted, future ones muted. */\nexport function WizardStepper({\n  steps,\n  current,\n  ariaLabel,\n}: {\n  steps: { key: string; label: string }[];\n  current: string;\n  ariaLabel?: string;\n}) {\n  const currentIndex = steps.findIndex((s) => s.key === current);\n  return (\n    <ol className=\"flex items-center gap-1 text-xs\" aria-label={ariaLabel}>\n      {steps.map((step, i) => (\n        <li key={step.key} className=\"flex items-center gap-1\">\n          {i > 0 && <span className=\"w-4 border-t border-[var(--border)]\" />}\n          <span\n            aria-current={step.key === current ? \"step\" : undefined}\n            className={cn(\n              \"rounded-full px-2 py-0.5\",\n              i === currentIndex\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium\"\n                : i < currentIndex\n                  ? \"text-[var(--text-secondary)]\"\n                  : \"text-[var(--text-placeholder)]\",\n            )}\n          >\n            {step.label}\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";AAiBQ,SACY,KADZ;AAjBR,SAAS,UAAU;AAIZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAe,MAAM,UAAU,CAAC,MAAM,EAAE,QAAQ,OAAO;AAC7D,SACE,oBAAC,QAAG,WAAU,mCAAkC,cAAY,WACzD,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAkB,WAAU,2BAC1B;AAAA,QAAI,KAAK,oBAAC,UAAK,WAAU,uCAAsC;AAAA,IAChE;AAAA,MAAC;AAAA;AAAA,QACC,gBAAc,KAAK,QAAQ,UAAU,SAAS;AAAA,QAC9C,WAAW;AAAA,UACT;AAAA,UACA,MAAM,eACF,kEACA,IAAI,eACF,iCACA;AAAA,QACR;AAAA,QAEC,eAAK;AAAA;AAAA,IACR;AAAA,OAdO,KAAK,GAed,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/wizard-stepper.tsx"],"sourcesContent":["import { cn } from \"../lib/cn\";\n\n/** Compact step indicator for the import wizards. Past steps are plain, the\n * current one is highlighted, future ones muted. */\nexport function WizardStepper({\n  steps,\n  current,\n  ariaLabel,\n}: {\n  steps: { key: string; label: string }[];\n  current: string;\n  ariaLabel?: string;\n}) {\n  const currentIndex = steps.findIndex((s) => s.key === current);\n  return (\n    // `flex-wrap`: the steps flow onto a second line rather than past the screen\n    // (0.32.1, the 360 px Extra-large sweep; docs/text-size-harmonization.md §4).\n    // \"Upload — Map columns — Confirm\" ran 22 px past a 360 px phone at Extra large.\n    // Where the steps fit, they stay one row.\n    <ol className=\"flex flex-wrap items-center gap-1 text-xs\" aria-label={ariaLabel}>\n      {steps.map((step, i) => (\n        <li key={step.key} className=\"flex items-center gap-1\">\n          {i > 0 && <span className=\"w-4 border-t border-[var(--border)]\" />}\n          <span\n            aria-current={step.key === current ? \"step\" : undefined}\n            className={cn(\n              \"rounded-full px-2 py-0.5\",\n              i === currentIndex\n                ? \"bg-[var(--bg-inverse)] text-[var(--text-inverse)] font-medium\"\n                : i < currentIndex\n                  ? \"text-[var(--text-secondary)]\"\n                  : \"text-[var(--text-placeholder)]\",\n            )}\n          >\n            {step.label}\n          </span>\n        </li>\n      ))}\n    </ol>\n  );\n}\n"],"mappings":";AAqBQ,SACY,KADZ;AArBR,SAAS,UAAU;AAIZ,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AACF,GAIG;AACD,QAAM,eAAe,MAAM,UAAU,CAAC,MAAM,EAAE,QAAQ,OAAO;AAC7D;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,oBAAC,QAAG,WAAU,6CAA4C,cAAY,WACnE,gBAAM,IAAI,CAAC,MAAM,MAChB,qBAAC,QAAkB,WAAU,2BAC1B;AAAA,UAAI,KAAK,oBAAC,UAAK,WAAU,uCAAsC;AAAA,MAChE;AAAA,QAAC;AAAA;AAAA,UACC,gBAAc,KAAK,QAAQ,UAAU,SAAS;AAAA,UAC9C,WAAW;AAAA,YACT;AAAA,YACA,MAAM,eACF,kEACA,IAAI,eACF,iCACA;AAAA,UACR;AAAA,UAEC,eAAK;AAAA;AAAA,MACR;AAAA,SAdO,KAAK,GAed,CACD,GACH;AAAA;AAEJ;","names":[]}

package/dist/{data-table-labels-DUELeXpa.d.ts → data-table-labels-kpAAVi6g.d.ts}

@@ -509,6 +509,27 @@ interface DataTableProps<T> {
      * of unfolding it inline (feedback #204). Desktop always uses inline expansion.
      */
     mobileExpandAsDialog?: boolean;
+    /**
+     * Show the `mobileHidden` columns in the OPENED row on the phone layout — inline
+     * under the card, or in the `mobileExpandAsDialog` dialog — so a column dropped from
+     * the card to keep it short is not lost (0.32, docs/text-size-harmonization.md §4:
+     * "a new `mobileDetailsInRow` puts the `mobileHidden` columns into the opened row, so
+     * nothing is lost"). At Large a card holds fewer facts per screen, and dropping one
+     * from the card must not drop it from the phone.
+     *
+     * Each column is a label above its value, BEFORE what `expandedRow` renders: the
+     * row's own facts first, then the app's detail or editor. A row opens as it always
+     * does (`onRowClick` toggling `isExpanded`); with this set it may open without an
+     * `expandedRow` at all. `rowActions`' column is one of them — the actions, which the
+     * card otherwise offers only as swipes, reachable by a tap. Desktop is unaffected.
+     */
+    mobileDetailsInRow?: boolean;
+    /**
+     * The row's name, as plain text — for the "⋯" menu its `rowActions` collapse into at
+     * Large ("Actions for Ada Example", §10.8). Without it every row's menu button is
+     * named "Actions", which a screen reader cannot tell apart down the list.
+     */
+    rowName?: (row: T) => string | undefined;
     /**
      * The phone row dialog's `backCloses` ({@link FullBleedDialog}): whether it pushes
      * its own history entry so Back dismisses it. On by default — right for a row whose
@@ -669,7 +690,10 @@ interface DataTableProps<T> {
     /**
      * Per-row actions: an actions column of icon buttons at the row's end on desktop,
      * and the same actions as swipe actions on a phone card (where the column is not
-     * shown). kastlan's `ResourceListPage` appended this column by hand to every CRUD
+     * shown; with `mobileDetailsInRow` also as buttons in the opened row). At Large and
+     * Extra large two or more collapse into one "⋯" menu with each action's words
+     * (0.32, §10.8, `RowActions`) — name the rows with `rowName` so each menu button is
+     * "Actions for …". kastlan's `ResourceListPage` appended this column by hand to every CRUD
      * list — the edit pencil, the delete bin, a `useConfirm` before the delete, and a
      * `stopPropagation` on each so a press did not also open the row.
      *
@@ -778,7 +802,7 @@ interface DataTableSortLabels {
  *  (DataTableLabels extends DataTableSortLabels; one source for the English). */
 declare const DEFAULT_DATA_TABLE_SORT_LABELS: DataTableSortLabels;
 
-declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): react.JSX.Element;
+declare function DataTable<T>({ rows, columns: columnsProp, rowKey, defaultPageSize, onRowClick, rowHref, expandedRow, isExpanded, rowClassName, rowAttributes, paginated, empty, storageKey, urlSync, fillHeight, maxBodyHeight, serverPagination, filters: filtersProp, onFiltersChange, sorts: sortsProp, onSortsChange, selection, labels: labelsProp, locale: localeProp, storageKeyPrefix, mobileExpandAsDialog, mobileDetailsInRow, rowName, mobileDialogBackCloses, mobileGroupBy, mobileGroupLabel, mobileCard, mobileSort, mobileSwipeActions, leadingRow, density, sortCycle, chrome, columnSettings: columnSettingsProp, resizable: resizableProp, multiSort: multiSortProp, frame, edgeFade, className, rowActions, toolbar, footerLabel, footer: footerProp, }: DataTableProps<T>): react.JSX.Element;
 
 /** The phone sort control's four keys (`sortBy`, `sortDefault`, `sortAscending`,
  *  `sortDescending`, 0.22.0) are {@link DataTableSortLabels}', declared beside the

package/dist/data-table.d.ts

@@ -1,4 +1,4 @@
-export { C as ColumnFilter, D as DEFAULT_DATA_TABLE_LABELS, a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, f as DataTableLabels, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, j as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, n as dateFilter, o as decodeFilterValue, p as decodeFilterValueOfType, q as defaultFilterState, r as encodeFilterValue, s as filterHref, t as isFilterActive, u as missingDataTableLabels, v as numberFilter, w as readTableUrlState, x as resolveDataTableLabels, y as resolveFilter, z as rowMatches, A as selectFilter, B as textFilter, E as useTableUrlState } from './data-table-labels-DUELeXpa.js';
+export { C as ColumnFilter, D as DEFAULT_DATA_TABLE_LABELS, a as DEFAULT_DATA_TABLE_SORT_LABELS, b as DataTable, c as DataTableChrome, d as DataTableColumn, e as DataTableDensity, f as DataTableLabels, g as DataTableProps, h as DataTableRowAction, i as DataTableSortLabels, F as FilterState, j as FilterValue, M as MobileSwipeActions, S as ServerPagination, T as TableUrlState, k as TableUrlStateProps, l as TableUrlSync, U as UseTableUrlStateOptions, m as UseTableUrlStateReturn, n as dateFilter, o as decodeFilterValue, p as decodeFilterValueOfType, q as defaultFilterState, r as encodeFilterValue, s as filterHref, t as isFilterActive, u as missingDataTableLabels, v as numberFilter, w as readTableUrlState, x as resolveDataTableLabels, y as resolveFilter, z as rowMatches, A as selectFilter, B as textFilter, E as useTableUrlState } from './data-table-labels-kpAAVi6g.js';
 export { SortCycle, SortDir, SortState, SortStepOptions, decodeSorts, encodeSorts, nextSorts, normalizeSorts } from './components/data-table-sort.js';
 export { PAGE_SIZE_OPTIONS, Pagination } from './components/data-table-pagination.js';
 export { FilterPopover } from './components/data-table-filter-popover.js';