@eifi1/ui-kit 0.47.0 → 0.48.1

package/src/feedback/feedback-table.tsx

@@ -7,6 +7,7 @@ import { EMPTY_FORMATTED_VALUE, formatDate, toDate } from "../lib/format";
 import { useKitDateFormatter, useKitLabels, useKitLink, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import type { KitLinkProps } from "../i18n/kit-labels";
 import { Chip } from "../components/chip";
+import { Tooltip } from "../components/tooltip";
 import { FloatingAction, FloatingActionGroup } from "../components/floating-panel";
 import type { FloatingCorner } from "../components/floating-panel";
 import { pickLinkRenderer } from "../components/text-link";
@@ -449,6 +450,11 @@ function statusRank(status: FeedbackStatus): number {
  *   filter that never offered it.
  * - The status column owns the status filter, and only it (keksdose live #330's revert:
  *   the phone's filter sheet already exposes every column filter).
+ * - Fitted to the table's width (0.48, keksdose live #451): Subject `grow`s and
+ *   ellipsises, and a narrow table leaves out URL, then Email, then Resolved
+ *   (`fitPriority` 1–3) — the open report repeats all three — then Votes and Category
+ *   (4, 5) before Subject would drop below 10rem. Drop the two keys with
+ *   `{ ...col, grow: undefined, fitPriority: undefined }` for the 0.47 layout.
  * - `/my-feedback` shows the same nine: the Email cell's context fallback exists for it
  *   (the admin list's join is absent there, §3.1), and its phone card drops the submitter
  *   instead ({@link FeedbackMobileCardProps.showSubmitter}).
@@ -479,6 +485,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
           sortBy: (row) => row.votes ?? 0,
           filter: { type: "number", getValue: (row) => row.votes ?? 0 },
           mobileHidden: true,
+          // Fourth to go (Kurvenschmiede S1, 0.48): with only the first three, Subject was
+          // crushed to 24px at 1100px. Still reachable from the Columns panel.
+          fitPriority: 4,
         },
       ]
     : [];
@@ -508,6 +517,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
         getValue: (row) => row.category,
         options: FEEDBACK_CATEGORY_ORDER.map((value) => ({ value, label: categoryLabels[value] })),
       },
+      // Last to go (Kurvenschmiede S1, 0.48), before Subject would drop below 10rem:
+      // the open report's Subject section repeats the badge.
+      fitPriority: 5,
     },
     {
       key: "title",
@@ -521,11 +533,25 @@ export function feedbackColumns<T extends FeedbackTableRow>({
         return env ? `${row.title} ${labels.environment(env)}` : row.title;
       },
       mobilePrimary: true,
+      // The rest of the row, one line and an ellipsis (0.48, keksdose live #451: one long
+      // crash title pushed Status and the row actions off the edge).
+      grow: true,
     },
     {
       key: "user",
       header: labels.columnUser,
-      cell: (row) => <span className="text-secondary">{feedbackSubmitter(row, labels)}</span>,
+      // At most 12rem, one line and an ellipsis, the whole value in the kit's Tooltip (0.48 build
+      // review 2, keksdose N2): beside the grow Subject every other cell keeps one line, so
+      // an email standing in for a missing name widened the column and cost Votes and
+      // Category their room first. The open report shows both in full.
+      cell: (row) => {
+        const who = feedbackSubmitter(row, labels);
+        return (
+          <Tooltip label={who} portal lazy>
+            <span className="block max-w-[12rem] truncate-until-large text-secondary">{who}</span>
+          </Tooltip>
+        );
+      },
       sortBy: (row) => feedbackSubmitter(row, labels),
       // Name AND email, so either finds the person; the erased ones by the placeholder
       // (their context holds no name any more).
@@ -552,6 +578,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: feedbackSubmitterEmail,
       filterBy: feedbackSubmitterEmail,
       mobileHidden: true,
+      // Second to go when the table is narrow: the open report shows the submitter.
+      fitPriority: 2,
     },
     {
       key: "url",
@@ -566,6 +594,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: (row) => feedbackPagePath(row.context) ?? "",
       filterBy: (row) => feedbackPagePath(row.context) ?? "",
       mobileHidden: true,
+      // First to go when the table is narrow (0.48): the open report repeats the page.
+      fitPriority: 1,
     },
     ...votesColumn,
     {
@@ -600,6 +630,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       sortBy: (row) => instant(row.resolved_at),
       filter: { type: "date", getValue: (row) => row.resolved_at },
       mobileHidden: true,
+      // Third to go (0.48).
+      fitPriority: 3,
     },
   ];
 }

package/src/hooks/use-dismiss.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef } from "react";
 import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
 import { isComposing } from "../lib/ime";
 
@@ -220,6 +220,29 @@ export function useEscapeKey(handler: () => void, enabled = true): void {
   useDismissLayer(enabled, handler);
 }
 
+/** Called with each native press an owner's React tree saw — see {@link useOutsideClick}. */
+type PressMark = (press: Event) => void;
+
+/** The outside-click hooks watching each ref, for {@link pressInside}. */
+const watchers = new WeakMap<RefObject<HTMLElement | null>, Set<PressMark>>();
+
+/** What an `onPointerDownCapture` hands over: a React event, its press inside. */
+type ReactPress = { nativeEvent: Event };
+
+/**
+ * An `onPointerDownCapture` for a panel whose `ref` an outside-click hook watches but
+ * whose element the hook's owner does not render — {@link DropdownPanel} and
+ * `ComboboxPanel` take `panelRef` from `useDropdown` / `useComboboxCore`. Every press
+ * that reaches the panel through the React tree, a portalled list opened inside it
+ * included, is marked inside for each hook watching `ref`. See {@link useOutsideClick}.
+ */
+export function pressInside(ref: RefObject<HTMLElement | null> | undefined): ((e: ReactPress) => void) | undefined {
+  if (!ref) return undefined;
+  return (e) => {
+    watchers.get(ref)?.forEach((mark) => mark(e.nativeEvent));
+  };
+}
+
 /**
  * Calls `handler` on a press that lands outside every supplied element, while
  * `enabled` — the outside-click-to-close half of the same dismissal story. Pass one
@@ -227,6 +250,23 @@ export function useEscapeKey(handler: () => void, enabled = true): void {
  * `handler` are read live, so an inline `[triggerRef, panelRef]` array is fine and
  * won't churn the listener.
  *
+ * ## A panel opened from inside is inside (0.48, keksdose dev#623)
+ *
+ * A CurrencySelect in a Popover: the currency list is portalled to `<body>`, so in the
+ * DOM it is outside the popover's panel, and the first press on a currency closed the
+ * POPOVER at pointerdown — the list went with it and the choice never landed. The same
+ * for a combobox, a menu, a date picker's popover, a dropdown, at any depth.
+ *
+ * In the React tree the portal is still where it was opened from, and React passes a
+ * press up that tree, through portals. So the hook hands back an
+ * `onPointerDownCapture`: put it on the element the press should count as inside of —
+ * the kit's Popover panel, HoverMenu, DropdownPanel and ComboboxPanel do — and every
+ * press that travels through that element in React, portalled panels opened inside it
+ * included, is not outside. React's listeners sit on the root and on each portal's
+ * container, so they hear the press before this document listener does. No owner chain
+ * to keep: depth is free, and an app's own portal inside a kit panel is covered too. A
+ * panel the hook's owner does not render takes {@link pressInside} with the watched ref.
+ *
  * **`pointerdown`, not `mousedown`** — one event covering mouse, touch and pen.
  * This listened for `mousedown` alone, which on a touch platform is a SYNTHESISED
  * event: the browser emits it for most taps, which is why nothing obviously broke,
@@ -245,17 +285,35 @@ export function useOutsideClick(
   refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
   handler: () => void,
   enabled = true,
-): void {
+): (e: ReactPress) => void {
   const refsRef = useRef(refs);
   const handlerRef = useRef(handler);
+  // The last press this owner's React tree saw: the one the document listener is about
+  // to hear, when it went through a panel the owner marked.
+  const insideRef = useRef<Event | null>(null);
   // In an effect rather than during render — see the note in useDismissLayer.
   useEffect(() => {
     refsRef.current = refs;
     handlerRef.current = handler;
   });
+  const markInside = useCallback((e: ReactPress) => {
+    insideRef.current = e.nativeEvent;
+  }, []);
   useEffect(() => {
     if (!enabled) return;
+    const mark: PressMark = (press) => {
+      insideRef.current = press;
+    };
+    const watched = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
+    for (const r of watched) {
+      const set = watchers.get(r) ?? new Set<PressMark>();
+      set.add(mark);
+      watchers.set(r, set);
+    }
     const onPointerDown = (e: Event) => {
+      const inside = insideRef.current === e;
+      insideRef.current = null;
+      if (inside) return;
       const target = e.target as Node;
       const list = Array.isArray(refsRef.current) ? refsRef.current : [refsRef.current];
       for (const r of list) {
@@ -264,6 +322,10 @@ export function useOutsideClick(
       handlerRef.current();
     };
     document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      for (const r of watched) watchers.get(r)?.delete(mark);
+    };
   }, [enabled]);
+  return markInside;
 }

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),