@eifi1/ui-kit 0.47.0 → 0.48.0

package/src/i18n/german.ts

@@ -339,6 +339,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       opensInNewTab: "öffnet in einem neuen Tab",
       aboutField: (field) => `Hilfe zu „${field}“`,
       help: "Hilfe",
+      showMore: "Mehr",
+      showLess: "Weniger",
     },
     dataTable: {
       columns: "Spalten",
@@ -351,6 +353,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       cancelSelection: "Abbrechen",
       rowDetails: "Details",
       autoSize: "Spaltenbreiten anpassen",
+      hiddenForWidth: "aus Platzgründen ausgeblendet",
       loading: "Wird geladen…",
       filters: "Filter",
       // Resets every active filter; "Alle löschen" would read as deleting the filters.
@@ -402,6 +405,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       booleanTrue: "Ja",
       booleanFalse: "Nein",
       booleanUnset: "Nicht festgelegt",
+      loadMore: "Mehr laden",
+      allLoaded: "Alle Zeilen geladen",
       sortBy: "Sortieren nach",
       sortDefault: "Standardreihenfolge",
       sortAscending: "Aufsteigend",

package/src/i18n/kit-labels.tsx

@@ -189,6 +189,10 @@ export interface CommonLabels {
   aboutField: (field: string) => string;
   /** …and of a `help` "?" on a field with no label and no `aria-label` to name it by. */
   help: string;
+  /** 0.48: the toggle that shows the rest of a clamped text (`AlertBanner clampMobile`)… */
+  showMore: string;
+  /** …and folds it back to its one line. */
+  showLess: string;
 }
 
 /** `DatePicker` / `DateRangePicker` chrome. The calendar inside has its own

package/src/i18n/locales/es.ts

@@ -330,6 +330,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       opensInNewTab: "se abre en una pestaña nueva",
       aboutField: (field) => `Acerca de «${field}»`,
       help: "Ayuda",
+      showMore: "Más",
+      showLess: "Menos",
     },
     dataTable: {
       columns: "Columnas",
@@ -342,6 +344,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       cancelSelection: "Cancelar",
       rowDetails: "Detalles",
       autoSize: "Ajustar ancho de columnas",
+      hiddenForWidth: "oculta por falta de espacio",
       loading: "Cargando…",
       filters: "Filtros",
       clearAll: "Borrar todo",
@@ -391,6 +394,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       booleanTrue: "Sí",
       booleanFalse: "No",
       booleanUnset: "Sin definir",
+      loadMore: "Cargar más",
+      allLoaded: "Todas las filas cargadas",
       sortBy: "Ordenar por",
       sortDefault: "Orden predeterminado",
       sortAscending: "Ascendente",

package/src/i18n/locales/fr.ts

@@ -336,6 +336,8 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       opensInNewTab: "s’ouvre dans un nouvel onglet",
       aboutField: (field) => `À propos de «\u202f${field}\u202f»`,
       help: "Aide",
+      showMore: "Plus",
+      showLess: "Moins",
     },
     dataTable: {
       columns: "Colonnes",
@@ -348,6 +350,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       cancelSelection: "Annuler",
       rowDetails: "Détails",
       autoSize: "Ajuster la largeur des colonnes",
+      hiddenForWidth: "masquée faute de place",
       loading: "Chargement…",
       filters: "Filtres",
       clearAll: "Tout effacer",
@@ -397,6 +400,8 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       booleanTrue: "Oui",
       booleanFalse: "Non",
       booleanUnset: "Non défini",
+      loadMore: "Charger plus",
+      allLoaded: "Toutes les lignes sont chargées",
       sortBy: "Trier par",
       sortDefault: "Ordre par défaut",
       sortAscending: "Croissant",

package/src/i18n/locales/hu.ts

@@ -328,6 +328,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       opensInNewTab: "új lapon nyílik meg",
       aboutField: (field) => `Súgó: ${field}`,
       help: "Súgó",
+      showMore: "Több",
+      showLess: "Kevesebb",
     },
     dataTable: {
       columns: "Oszlopok",
@@ -340,6 +342,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       cancelSelection: "Mégse",
       rowDetails: "Részletek",
       autoSize: "Oszlopszélességek igazítása",
+      hiddenForWidth: "szélesség miatt rejtve",
       loading: "Betöltés…",
       filters: "Szűrők",
       clearAll: "Összes törlése",
@@ -389,6 +392,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       booleanTrue: "Igen",
       booleanFalse: "Nem",
       booleanUnset: "Nincs megadva",
+      loadMore: "Továbbiak betöltése",
+      allLoaded: "Minden sor betöltve",
       sortBy: "Rendezés alapja",
       sortDefault: "Alapértelmezett sorrend",
       sortAscending: "Növekvő",

package/src/i18n/locales/it.ts

@@ -332,6 +332,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       opensInNewTab: "si apre in una nuova scheda",
       aboutField: (field) => `Informazioni su «${field}»`,
       help: "Aiuto",
+      showMore: "Altro",
+      showLess: "Meno",
     },
     dataTable: {
       columns: "Colonne",
@@ -344,6 +346,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       cancelSelection: "Annulla",
       rowDetails: "Dettagli",
       autoSize: "Adatta larghezza colonne",
+      hiddenForWidth: "nascosta per mancanza di spazio",
       loading: "Caricamento…",
       filters: "Filtri",
       clearAll: "Cancella tutto",
@@ -393,6 +396,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       booleanTrue: "Sì",
       booleanFalse: "No",
       booleanUnset: "Non impostato",
+      loadMore: "Carica altro",
+      allLoaded: "Tutte le righe caricate",
       sortBy: "Ordina per",
       sortDefault: "Ordine predefinito",
       sortAscending: "Crescente",

package/src/i18n/locales/zh.ts

@@ -320,6 +320,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       opensInNewTab: "在新标签页中打开",
       aboutField: (field) => `关于“${field}”`,
       help: "帮助",
+      showMore: "更多",
+      showLess: "收起",
     },
     dataTable: {
       columns: "列",
@@ -332,6 +334,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       cancelSelection: "取消",
       rowDetails: "详情",
       autoSize: "自动调整列宽",
+      hiddenForWidth: "宽度不足，已隐藏",
       loading: "加载中…",
       filters: "筛选条件",
       clearAll: "全部清除",
@@ -380,6 +383,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       booleanTrue: "是",
       booleanFalse: "否",
       booleanUnset: "未设置",
+      loadMore: "加载更多",
+      allLoaded: "已加载全部行",
       sortBy: "排序依据",
       sortDefault: "默认顺序",
       sortAscending: "升序",

package/src/i18n/shared-labels.ts

@@ -39,6 +39,8 @@ export const DEFAULT_COMMON_LABELS: CommonLabels = {
   opensInNewTab: "opens in a new tab",
   aboutField: (field) => `About “${field}”`,
   help: "Help",
+  showMore: "More",
+  showLess: "Less",
 };
 
 export const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels = {

package/src/index.ts

@@ -430,6 +430,9 @@ export * from "./components/progress-bar";
 // Named: skeleton.tsx also holds SKELETON_CLASS, the look StatTile shares — internal.
 export { Skeleton } from "./components/skeleton";
 export type { SkeletonProps, SkeletonShape } from "./components/skeleton";
+// 0.48 (keksdose dev #628): the table/list loading preset, one status label.
+export { TableSkeleton } from "./components/table-skeleton";
+export type { TableSkeletonProps } from "./components/table-skeleton";
 // 0.12.0: a centred spinner with words, signed figures and deltas, a render-error fallback.
 export * from "./components/loading-state";
 export * from "./components/signed-amount";

package/src/lib/float-clearance.ts

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+
+/**
+ * The room the floating launchers take above the bottom nav, published as
+ * `--app-float-clearance` on `<html>` so `AppShell` can pad `<main>` past them.
+ *
+ * keksdose dev#612 (UX-1.3, "the help button covers content"): the shell padded `<main>`
+ * for the nav plus 1.5rem, so on a phone the last row of every page ended under the help
+ * launcher — and on /transactions under the action group below it, exactly where the
+ * row's amount is. keksdose patched it with its own `--help-launcher-clearance` and an
+ * unlayered app.css rule. Here every kit launcher (`FloatingActionButton`, so
+ * `FloatingPanel`'s too, and `FloatingActionGroup`) declares its own room while it is
+ * mounted and shown, and the shell takes the largest.
+ *
+ * Declared, not measured: a launcher knows its `offset` and its 3rem height exactly, as
+ * CSS lengths, and the variable then follows the nav and the text size by itself. A
+ * `hidden` launcher keeps its claim: the room is its own while it is mounted, so the page
+ * does not change length as it hides and shows (keksdose's launcher steps aside while an
+ * editor covers its corner). Unmount it to give the room back.
+ *
+ * Internal: not exported from the barrel.
+ */
+
+const claims = new Map<symbol, string>();
+
+function publish() {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  const values = [...claims.values()];
+  if (values.length === 0) root.style.removeProperty("--app-float-clearance");
+  else root.style.setProperty("--app-float-clearance", values.length === 1 ? values[0] : `max(${values.join(", ")})`);
+}
+
+/** Claim `value` (a CSS length: the launcher's top edge above the nav, plus a gap) until
+ *  the returned function is called. */
+export function claimFloatClearance(value: string): () => void {
+  const key = Symbol("float-clearance");
+  claims.set(key, value);
+  publish();
+  return () => {
+    claims.delete(key);
+    publish();
+  };
+}
+
+/**
+ * A launcher at `offset` above the nav claims its 3rem height plus a 0.5rem gap while
+ * mounted (`extra`: what its frame adds, the group's 1px borders).
+ */
+export function useFloatClearance(offset: string, extra?: string): void {
+  useEffect(() => {
+    return claimFloatClearance(`calc(${offset} + 3.5rem${extra ? ` + ${extra}` : ""})`);
+  }, [offset, extra]);
+}

package/src/settings/settings-catalogue.ts

@@ -23,6 +23,16 @@ export interface SettingsGroup<G extends string = string> {
   title: string;
   /** One line under the heading and in the phone list, where it is cut to one line. */
   help: string;
+  /**
+   * 0.48 (keksdose live #450): a count or a mark drawn on the group's ROW — at the end of
+   * its desktop sidebar row and before the chevron of its phone list row — never on the
+   * heading over its cards. The admin area's waiting work: `<AdminWaitingBadge count={n} />`
+   * (nothing for 0), so the account menu's badge leads to the section that holds it. It
+   * sits inside the row's link and is read with its name, so say what the number is (the
+   * waiting pill does: "3, 3 waiting"). While the page is searched the sidebar shows the
+   * hit count in its place. Default: none.
+   */
+  badge?: ReactNode;
   /**
    * `false` hides the group: no row, no hits, and its path acts as an unknown one — it
    * lands on the default group (desktop) or the list (phone), never on a 404 (§3.1).

package/src/settings/settings-layout.tsx

@@ -369,7 +369,17 @@ export function SettingsLayout<G extends string>({
                   }
                   title={g.title}
                   subtitle={g.help}
-                  trailing={<ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />}
+                  trailing={
+                    g.badge == null ? (
+                      <ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />
+                    ) : (
+                      // The group's badge (0.48) before the chevron, the two as one end.
+                      <span className="flex items-center gap-2">
+                        {g.badge}
+                        <ChevronRight aria-hidden className="size-4 rtl:-scale-x-100" />
+                      </span>
+                    )
+                  }
                 />
               ))}
             </List>
@@ -421,13 +431,17 @@ export function SettingsLayout<G extends string>({
                   name: g.title,
                   label: <span className={cn(dim && "opacity-40")}>{g.title}</span>,
                   icon: <span className={cn("inline-flex [&_svg]:size-4", dim && "opacity-40")}>{g.icon}</span>,
-                  badge:
-                    searching && count > 0 ? (
+                  // While searching, the hit count; otherwise the group's own badge (0.48).
+                  badge: searching ? (
+                    count > 0 ? (
                       <Chip size="sm" tone="brand">
                         <span aria-hidden>{count}</span>
                         <span className="sr-only-fixed">{labels.matchCount(count)}</span>
                       </Chip>
-                    ) : undefined,
+                    ) : undefined
+                  ) : (
+                    g.badge
+                  ),
                 };
               })}
               active={(open?.id ?? route.groups[0]?.id) as G}

package/src/shell/app-shell.tsx

@@ -18,7 +18,7 @@ import { useAnchoredRect } from "../hooks/use-anchored-rect";
 import { anchoredInline } from "../hooks/use-anchored-panel";
 import { useDismissLayer } from "../hooks/use-dismiss";
 import { useBreakpoint } from "../hooks/use-breakpoint";
-import { useTextSize } from "../theme/text-size";
+import { TEXT_SIZES, useTextSize } from "../theme/text-size";
 import type { TextSize } from "../theme/text-size";
 import { DEFAULT_APP_SHELL_LABELS, useKitLabels, useKitLink, type LabelOverride } from "../i18n/kit-labels";
 import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
@@ -45,6 +45,11 @@ export interface AppShellNavItem {
    *  shortening the real label, which the sidebar has ample room for and which is the
    *  name the rest of the product uses. */
   shortLabel?: string;
+  /** 0.48: the text size from which the bar uses {@link shortLabel} — `"large"` keeps the
+   *  full label at Normal, where five cells hold "Transactions" whole, and shortens it
+   *  from Large up (keksdose dev#613, which read `useTextSize()` in its layout to decide).
+   *  Default `"normal"`: the short label at every size, as before. */
+  shortLabelFrom?: TextSize;
   /** 0.31.0: leave this entry out of the MOBILE BOTTOM BAR; the sidebar keeps it.
    *  For an entry a phone reaches another way — the brand link to the start page —
    *  when one cell fewer is what keeps the others' labels whole (the bar divides its
@@ -544,9 +549,13 @@ export function AppShell({
                 one that scrolls into empty space. Guarding it per component (see
                 sr-only-containment.test) could never be complete: any page's own
                 `sr-only` span re-opened it. Here it is closed for every child at once. */}
+            {/* Below `md` the bottom room is the nav plus the larger of 1.5rem and what the
+                floating launchers take above it (`--app-float-clearance`, published by
+                every kit FAB, FloatingPanel and FloatingActionGroup while mounted — keksdose
+                dev#612: the last row ended under the help launcher). */}
             <main
               className={cn(
-                "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+1.5rem)] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
+                "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+max(1.5rem,var(--app-float-clearance,0px)))] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
                 // The list page's fill (0.40, docs/page-layout-harmonization.md §1.3): while
                 // a `fillHeight` DataTable is inside, a flex column — a banner above the
                 // page keeps its own height and the page (a `FillHeight`) takes the rest,
@@ -764,6 +773,11 @@ function MobileCellLabel({ children }: { children: ReactNode }) {
  *  nothing marked on every sub-page (the same defect the sidebar had). */
 function MobileNavItem({ item }: { item: AppShellNavItem }) {
   const subActive = useSubItemActive(item);
+  const { size } = useTextSize();
+  const short =
+    item.shortLabel !== undefined && TEXT_SIZES.indexOf(size) >= TEXT_SIZES.indexOf(item.shortLabelFrom ?? "normal")
+      ? item.shortLabel
+      : undefined;
   return (
     <NavLink
       to={item.to}
@@ -774,7 +788,7 @@ function MobileNavItem({ item }: { item: AppShellNavItem }) {
       <span className="relative">
         <item.icon className="size-5" />
       </span>
-      <MobileCellLabel>{item.shortLabel ?? item.label}</MobileCellLabel>
+      <MobileCellLabel>{short ?? item.label}</MobileCellLabel>
     </NavLink>
   );
 }

package/src/shell/option-switcher-menu.tsx

@@ -28,6 +28,8 @@ export function OptionSwitcherMenu<T extends string>({
   /** Names the trigger and the menu. Required: the trigger is an icon (refactor audit
    *  2026-10, API-1 — the `ariaLabel` spelling went in 0.35). */
   "aria-label": string;
+  /** The trigger's tooltip. Default: `aria-label` (0.48) — the name, shown on hover and
+   *  focus. A different text also describes the trigger (`aria-describedby`). */
   title?: string;
   heading?: string;
   options: OptionSwitcherOption<T>[];
@@ -37,13 +39,23 @@ export function OptionSwitcherMenu<T extends string>({
   return (
     <HoverMenu
       aria-label={ariaLabel}
-      trigger={({ toggle }) => (
-        <Tooltip label={title} portal>
+      trigger={({ toggle }) => {
+        const button = (
           <button type="button" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>
             {icon}
           </button>
-        </Tooltip>
-      )}
+        );
+        // The name on hover and focus even without a `title` (0.48, keksdose dev#610). A
+        // bubble that repeats the name sits round the button in a fragment, as IconButton's
+        // does, so it does not describe the button by its own name — a reader heard "Text
+        // size, button, Text size". A `title` that says more still describes it.
+        const tip = title ?? ariaLabel;
+        return (
+          <Tooltip label={tip} portal>
+            {tip === ariaLabel ? <>{button}</> : button}
+          </Tooltip>
+        );
+      }}
     >
       {(close) => (
         <ul className="py-1">

package/src/shell/topbar-action-menu.tsx

@@ -6,6 +6,7 @@ import { HoverMenu, type HoverMenuProps } from "../components/hover-menu";
 import { MenuItem } from "../components/menu-item";
 import type { MenuItemTone } from "../components/menu-item";
 import { StatusDot } from "../components/status-dot";
+import { Tooltip } from "../components/tooltip";
 import type { UserAvatarBadge } from "../components/user-avatar";
 import { TOPBAR_TRIGGER_CLASS } from "./topbar-controls";
 
@@ -296,16 +297,27 @@ export function TopBarActionMenu({
       trigger={({ open, toggle, close }) => {
         // One element for both kinds: the router's link when `href` is set, else the
         // kit's button. Same classes and face either way.
-        const control = (className: string, children: ReactNode, label?: string) =>
-          href ? (
-            <Link {...triggerAttributes} to={href} onClick={close} aria-label={label} className={className}>
-              {children}
-            </Link>
-          ) : (
-            <button {...triggerAttributes} type="button" onClick={toggle} aria-label={label} className={className}>
-              {children}
-            </button>
-          );
+        //
+        // Its name in the kit's Tooltip on hover and focus (0.48, keksdose dev#610): an
+        // icon alone told a sighted user nothing the screen reader was told. In a
+        // fragment, as IconButton does it, so the bubble is not the trigger's
+        // `aria-describedby` — the name it repeats is the trigger's own, and a reader
+        // would hear it twice. Portalled, like the top bar's other triggers.
+        const control = (className: string, children: ReactNode, label?: string) => (
+          <Tooltip label={ariaLabel} portal>
+            <>
+              {href ? (
+                <Link {...triggerAttributes} to={href} onClick={close} aria-label={label} className={className}>
+                  {children}
+                </Link>
+              ) : (
+                <button {...triggerAttributes} type="button" onClick={toggle} aria-label={label} className={className}>
+                  {children}
+                </button>
+              )}
+            </>
+          </Tooltip>
+        );
         if (trigger) {
           return control(
             cn(TOPBAR_TRIGGER_CLASS, "relative", triggerClassName),

package/src/shell/topbar-controls.tsx

@@ -58,19 +58,25 @@ export function ThemeToggle({
   // icon button with no name — a reader heard "button" and nothing else.
   const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });
   const Icon = mode === "dark" ? Moon : Sun;
+  const button = (
+    <button
+      type="button"
+      onClick={() => {
+        onChange?.(mode === "dark" ? "light" : "dark");
+        onToggle?.();
+      }}
+      aria-label={labels.theme}
+      className={cn(TOPBAR_TRIGGER_CLASS, className)}
+    >
+      <Icon className="size-5" />
+    </button>
+  );
+  // The name on hover and focus even without a `title` (0.48, keksdose dev#610); a bubble
+  // that only repeats it is visual, in a fragment as on IconButton — see OptionSwitcherMenu.
+  const tip = title ?? labels.theme;
   return (
-    <Tooltip label={title} portal>
-      <button
-        type="button"
-        onClick={() => {
-          onChange?.(mode === "dark" ? "light" : "dark");
-          onToggle?.();
-        }}
-        aria-label={labels.theme}
-        className={cn(TOPBAR_TRIGGER_CLASS, className)}
-      >
-        <Icon className="size-5" />
-      </button>
+    <Tooltip label={tip} portal>
+      {tip === labels.theme ? <>{button}</> : button}
     </Tooltip>
   );
 }

package/src/tour/tour.tsx

@@ -615,6 +615,11 @@ function TourOverlay({
       className={cn("pointer-events-none fixed inset-0", interactive ? "z-[45]" : "z-[60]")}
       role="dialog"
       aria-modal={interactive ? undefined : "true"}
+      // A stable marker for the overlay, on every step (0.48, keksdose dev#611–613): an
+      // app that hides its floating help launcher while a modal is open excepts the
+      // tour, which may spotlight that launcher — `[aria-modal="true"]:not([data-tour-overlay])`.
+      // keksdose matched the `pointer-events-none` class until now, which is the kit's to change.
+      data-tour-overlay=""
       data-tour-interactive={interactive ? "" : undefined}
       aria-label={step.title}
       dir={dir}