@eifi1/ui-kit 0.51.3 → 0.51.4

package/dist/shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\nexport * from \"./shell/top-bar-brand\";\nexport * from \"./shell/auth-layout\";\n// 0.40.0: the list page's fill (docs/page-layout-harmonization.md §1.3).\nexport { FillHeight, FILL_HEIGHT_CLASS } from \"./shell/fill-height\";\nexport type { FillHeightProps } from \"./shell/fill-height\";\n// 0.42.0: the account menu's \"Administration\" row, as an entry and as a HoverMenu row\n// (docs/admin-harmonization.md §2.1, §6.6).\nexport { adminMenuEntry, AdminMenuRow } from \"./shell/admin-menu\";\nexport type { AdminMenuEntryOptions, AdminMenuRowProps } from \"./shell/admin-menu\";\n// 0.43.0 (kastlan): the entry with the provider's words.\nexport { useAdminMenuEntry } from \"./shell/admin-menu\";\nexport type { UseAdminMenuEntryOptions } from \"./shell/admin-menu\";\n// 0.45.0 (docs/admin-harmonization.md §9.3.4): the row's waiting pill on its own, for\n// IconButton's `badge` (kastlan's platform button); its name is `adminArea.waitingLabel`.\nexport { AdminWaitingBadge } from \"./shell/admin-menu\";\nexport type { AdminWaitingBadgeProps } from \"./shell/admin-menu\";\n// 0.31.0: the settings and admin pages' shell (docs/settings-harmonization.md §3, §5).\nexport { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from \"./settings/settings-layout\";\nexport type { SettingsLayoutProps, SettingsLayoutWidth, SettingsDocumentTitleParts } from \"./settings/settings-layout\";\nexport {\n  useSettingsRoute,\n  resolveSettingsLocation,\n  settingsFromListState,\n  SETTINGS_FROM_LIST_STATE,\n} from \"./settings/use-settings-route\";\nexport type {\n  UseSettingsRouteOptions,\n  SettingsRoute,\n  SettingsLayoutMode,\n  SettingsLocation,\n  SettingsLocationRules,\n  SettingsLocationResult,\n} from \"./settings/use-settings-route\";\nexport { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from \"./settings/use-settings-focus\";\nexport { SettingsSection } from \"./settings/settings-section\";\nexport type { SettingsSectionProps } from \"./settings/settings-section\";\nexport { useSettingsLayout } from \"./settings/settings-context\";\nexport type { SettingsLayoutContextValue } from \"./settings/settings-context\";\nexport { SettingsHeadingLevel, useSettingsHeadingLevel } from \"./settings/settings-heading\";\nexport type { SettingsHeadingLevelProps, SettingsHeadingTag } from \"./settings/settings-heading\";\nexport {\n  settingsSearchEntries,\n  visibleSettingsGroups,\n  visibleSettingsEntries,\n  settingsHref,\n} from \"./settings/settings-catalogue\";\nexport type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from \"./settings/settings-catalogue\";\n// 0.31.0: the public pages' header and the resume (docs/landing-demo-harmonization.md §3, §4.1).\nexport {\n  RootEntry,\n  RedirectIfAuthed,\n  useLastVisitedPage,\n  readLastVisitedPage,\n  clearLastVisitedPage,\n  safeNextPath,\n  NEXT_PARAM,\n  DEFAULT_LAST_VISITED_EXCLUDES,\n} from \"./landing/routing\";\nexport type {\n  RootEntryProps,\n  RedirectIfAuthedProps,\n  RoutingSession,\n  LastVisitedPageOptions,\n  PathPattern,\n} from \"./landing/routing\";\nexport { PublicHeader } from \"./landing/public-header\";\nexport type { PublicHeaderProps, PublicHeaderBrand } from \"./landing/public-header\";\n// 0.42.0: the top bar's shared parts (docs/top-bar-harmonization.md §3.1) — the slots in\n// §2.1's order, the account menu's language sub-list, the tours menu, the sync status, the\n// local-dev switchers, and their words.\nexport { TopBarActions, TOP_BAR_ACTION_ORDER } from \"./shell/top-bar-actions\";\nexport type { TopBarActionsProps } from \"./shell/top-bar-actions\";\nexport { AccountMenuLanguage } from \"./shell/account-menu-language\";\nexport type { AccountMenuLanguageProps, AccountMenuLanguageOption } from \"./shell/account-menu-language\";\n// 0.46.0 (keksdose live #426): A− / A+ for the text size, beside the language.\nexport { AccountMenuTextSize } from \"./shell/account-menu-text-size\";\nexport type { AccountMenuTextSizeProps } from \"./shell/account-menu-text-size\";\nexport { TourMenu } from \"./shell/tour-menu\";\nexport type { TourMenuProps, TourMenuTour } from \"./shell/tour-menu\";\nexport { SyncStatusIndicator, syncState } from \"./shell/sync-status-indicator\";\nexport type { SyncStatus, SyncState, SyncStatusScope, SyncStatusIndicatorProps } from \"./shell/sync-status-indicator\";\n// 0.51 (§2.7.1, keksdose): one flask, the kit's Account section and the app's own dev\n// sections; `DevSwitchers` is a deprecated wrapper over it until 0.52.\nexport { DevMenu, DEV_ORIGINAL_ROLE_KEY } from \"./shell/dev-menu\";\nexport type { DevMenuProps, DevMenuSection } from \"./shell/dev-menu\";\nexport { DevSwitchers } from \"./shell/dev-switchers\";\nexport type { DevSwitchersProps } from \"./shell/dev-switchers\";\nexport { DEFAULT_TOP_BAR_PARTS_LABELS, useTopBarPartsLabels } from \"./shell/top-bar-parts-labels\";\nexport type {\n  TopBarPartsLabels,\n  TourMenuLabels,\n  SyncStatusLabels,\n  DevSwitchersLabels,\n} from \"./shell/top-bar-parts-labels\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,YAAY,yBAAyB;AAI9C,SAAS,gBAAgB,oBAAoB;AAG7C,SAAS,yBAAyB;AAIlC,SAAS,yBAAyB;AAGlC,SAAS,gBAAgB,iCAAiC;AAE1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,SAAS,kBAAkB,qBAAqB,yBAAyB;AACzE,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,SAAS,sBAAsB,+BAA+B;AAE9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,oBAAoB;AAK7B,SAAS,eAAe,4BAA4B;AAEpD,SAAS,2BAA2B;AAGpC,SAAS,2BAA2B;AAEpC,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB,iBAAiB;AAI/C,SAAS,SAAS,6BAA6B;AAE/C,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B,4BAA4B;","names":[]}
+{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\nexport * from \"./shell/top-bar-brand\";\nexport * from \"./shell/auth-layout\";\n// 0.40.0: the list page's fill (docs/page-layout-harmonization.md §1.3).\nexport { FillHeight, FILL_HEIGHT_CLASS } from \"./shell/fill-height\";\nexport type { FillHeightProps } from \"./shell/fill-height\";\n// 0.42.0: the account menu's \"Administration\" row, as an entry and as a HoverMenu row\n// (docs/admin-harmonization.md §2.1, §6.6).\nexport { adminMenuEntry, AdminMenuRow } from \"./shell/admin-menu\";\nexport type { AdminMenuEntryOptions, AdminMenuRowProps } from \"./shell/admin-menu\";\n// 0.43.0 (kastlan): the entry with the provider's words.\nexport { useAdminMenuEntry } from \"./shell/admin-menu\";\nexport type { UseAdminMenuEntryOptions } from \"./shell/admin-menu\";\n// 0.45.0 (docs/admin-harmonization.md §9.3.4): the row's waiting pill on its own, for\n// IconButton's `badge` (kastlan's platform button); its name is `adminArea.waitingLabel`.\nexport { AdminWaitingBadge } from \"./shell/admin-menu\";\nexport type { AdminWaitingBadgeProps } from \"./shell/admin-menu\";\n// 0.31.0: the settings and admin pages' shell (docs/settings-harmonization.md §3, §5).\nexport { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from \"./settings/settings-layout\";\nexport type { SettingsLayoutProps, SettingsLayoutWidth, SettingsDocumentTitleParts } from \"./settings/settings-layout\";\nexport {\n  useSettingsRoute,\n  resolveSettingsLocation,\n  settingsFromListState,\n  SETTINGS_FROM_LIST_STATE,\n} from \"./settings/use-settings-route\";\nexport type {\n  UseSettingsRouteOptions,\n  SettingsRoute,\n  SettingsLayoutMode,\n  SettingsLocation,\n  SettingsLocationRules,\n  SettingsLocationResult,\n} from \"./settings/use-settings-route\";\nexport { useSettingsFocus, useFocusParam, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from \"./settings/use-settings-focus\";\nexport { SettingsSection } from \"./settings/settings-section\";\nexport type { SettingsSectionProps } from \"./settings/settings-section\";\nexport { useSettingsLayout } from \"./settings/settings-context\";\nexport type { SettingsLayoutContextValue } from \"./settings/settings-context\";\nexport { SettingsHeadingLevel, useSettingsHeadingLevel } from \"./settings/settings-heading\";\nexport type { SettingsHeadingLevelProps, SettingsHeadingTag } from \"./settings/settings-heading\";\nexport {\n  settingsSearchEntries,\n  visibleSettingsGroups,\n  visibleSettingsEntries,\n  settingsHref,\n} from \"./settings/settings-catalogue\";\nexport type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from \"./settings/settings-catalogue\";\n// 0.31.0: the public pages' header and the resume (docs/landing-demo-harmonization.md §3, §4.1).\nexport {\n  RootEntry,\n  RedirectIfAuthed,\n  useLastVisitedPage,\n  readLastVisitedPage,\n  clearLastVisitedPage,\n  safeNextPath,\n  NEXT_PARAM,\n  DEFAULT_LAST_VISITED_EXCLUDES,\n} from \"./landing/routing\";\nexport type {\n  RootEntryProps,\n  RedirectIfAuthedProps,\n  RoutingSession,\n  LastVisitedPageOptions,\n  PathPattern,\n} from \"./landing/routing\";\nexport { PublicHeader } from \"./landing/public-header\";\nexport type { PublicHeaderProps, PublicHeaderBrand } from \"./landing/public-header\";\n// 0.42.0: the top bar's shared parts (docs/top-bar-harmonization.md §3.1) — the slots in\n// §2.1's order, the account menu's language sub-list, the tours menu, the sync status, the\n// local-dev switchers, and their words.\nexport { TopBarActions, TOP_BAR_ACTION_ORDER } from \"./shell/top-bar-actions\";\nexport type { TopBarActionsProps } from \"./shell/top-bar-actions\";\nexport { AccountMenuLanguage } from \"./shell/account-menu-language\";\nexport type { AccountMenuLanguageProps, AccountMenuLanguageOption } from \"./shell/account-menu-language\";\n// 0.46.0 (keksdose live #426): A− / A+ for the text size, beside the language.\nexport { AccountMenuTextSize } from \"./shell/account-menu-text-size\";\nexport type { AccountMenuTextSizeProps } from \"./shell/account-menu-text-size\";\nexport { TourMenu } from \"./shell/tour-menu\";\nexport type { TourMenuProps, TourMenuTour } from \"./shell/tour-menu\";\nexport { SyncStatusIndicator, syncState } from \"./shell/sync-status-indicator\";\nexport type { SyncStatus, SyncState, SyncStatusScope, SyncStatusIndicatorProps } from \"./shell/sync-status-indicator\";\n// 0.51 (§2.7.1, keksdose): one flask, the kit's Account section and the app's own dev\n// sections; `DevSwitchers` is a deprecated wrapper over it until 0.52.\nexport { DevMenu, DEV_ORIGINAL_ROLE_KEY } from \"./shell/dev-menu\";\nexport type { DevMenuProps, DevMenuSection } from \"./shell/dev-menu\";\nexport { DevSwitchers } from \"./shell/dev-switchers\";\nexport type { DevSwitchersProps } from \"./shell/dev-switchers\";\nexport { DEFAULT_TOP_BAR_PARTS_LABELS, useTopBarPartsLabels } from \"./shell/top-bar-parts-labels\";\nexport type {\n  TopBarPartsLabels,\n  TourMenuLabels,\n  SyncStatusLabels,\n  DevSwitchersLabels,\n} from \"./shell/top-bar-parts-labels\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,YAAY,yBAAyB;AAI9C,SAAS,gBAAgB,oBAAoB;AAG7C,SAAS,yBAAyB;AAIlC,SAAS,yBAAyB;AAGlC,SAAS,gBAAgB,iCAAiC;AAE1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,SAAS,kBAAkB,eAAe,qBAAqB,yBAAyB;AACxF,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,SAAS,sBAAsB,+BAA+B;AAE9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,oBAAoB;AAK7B,SAAS,eAAe,4BAA4B;AAEpD,SAAS,2BAA2B;AAGpC,SAAS,2BAA2B;AAEpC,SAAS,gBAAgB;AAEzB,SAAS,qBAAqB,iBAAiB;AAI/C,SAAS,SAAS,6BAA6B;AAE/C,SAAS,oBAAoB;AAE7B,SAAS,8BAA8B,4BAA4B;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.51.3",
+  "version": "0.51.4",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/components/combobox-core.tsx

@@ -22,7 +22,7 @@ import { anchoredInline, useAnchoredPanel, viewportSize, type AnchoredPanel } fr
 import { pressInside, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
 import { useOverlayHistory } from "../hooks/use-overlay-history";
 import { isImeEnter } from "../lib/ime";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { hasContent } from "../lib/presence";
 
@@ -283,10 +283,10 @@ export function useOptionSource<V extends string | number>({
   const clientResults = useMemo(() => {
     if (isAsync) return [];
     const src = options ?? [];
-    const q = foldForSearch(query.trim(), locale);
-    if (!filter || !q) return src;
-    const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);
-    return src.filter((o) => hit(o.label) || hit(o.sublabel));
+    // Every word of the query, in the label or the sublabel (0.51.4): "migros zürich".
+    const words = searchWords(query, locale);
+    if (!filter || words.length === 0) return src;
+    return src.filter((o) => matchesSearch(words, [o.label, o.sublabel], locale));
   }, [isAsync, options, query, filter, locale]);
 
   const pending = isAsync && active && !tooShort && settled.query !== query;

package/src/components/currency-option-list.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from "react";
 import type { ComponentPropsWithRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { ComboboxPanel, type ComboboxCore, type ComboOption } from "./combobox-core";
 import { CURRENCIES, type CurrencyOption } from "../currencies";
 
@@ -136,10 +136,9 @@ export function CurrencyOptionList({
   // it is written in) and the symbol — folded as every kit list folds (DUP-5).
   const query = core.query;
   const results = useMemo(() => {
-    const q = foldForSearch(query.trim(), locale);
-    const hits = q
-      ? named.filter(({ c, name }) => [c.code, name, c.symbol].some((s) => foldForSearch(s, locale).includes(q)))
-      : named;
+    // Every word of the query, in the code, the name or the symbol (0.51.4).
+    const words = searchWords(query, locale);
+    const hits = words.length > 0 ? named.filter(({ c, name }) => matchesSearch(words, [c.code, name, c.symbol], locale)) : named;
     return hits.map(
       ({ c, name }): ComboOption<string> => ({
         value: c.code,

package/src/components/data-table-fit.ts

@@ -119,17 +119,19 @@ export function useColumnFit<T>({
     () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),
     [active, order, hidden],
   );
-  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;
+  const growCol = columns.find((c) => c.grow && !hiddenCols.has(c.key));
+  const growKey = growCol?.key;
+  const growMin = growCol?.growMin ?? GROW_MIN_REM;
 
   // What `measure` reads, refreshed after each render (before the measure below runs):
   // the ResizeObserver's callback is set up once and must see the current columns.
-  const latest = useRef({ order, current, growKey, active, scroller });
+  const latest = useRef({ order, current, growKey, growMin, active, scroller });
   useLayoutEffect(() => {
-    latest.current = { order, current, growKey, active, scroller };
+    latest.current = { order, current, growKey, growMin, active, scroller };
   });
 
   const measure = useCallback(() => {
-    const { order, current, growKey, active, scroller } = latest.current;
+    const { order, current, growKey, growMin, active, scroller } = latest.current;
     // Only the measure right after a bring-back can undo it.
     const flip = lastShown.current;
     lastShown.current = null;
@@ -143,7 +145,7 @@ export function useColumnFit<T>({
     const growTh = growKey ? headRefs.get(growKey) : undefined;
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
     let need = growTh
-      ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem
+      ? table.offsetWidth - growTh.offsetWidth + growMin * rem
       : table.offsetWidth;
     if (!growTh && need <= avail + 0.5 && current.length > 0) {
       // A `w-full` table is at least the scroller's width, which says nothing about how

package/src/components/data-table-head.tsx

@@ -125,6 +125,7 @@ export function DataTableHead<T>({
           const isEndAligned = !!headClass && END_ALIGN.test(headClass);
           const width = widths[col.key];
           const ownHead = splitCellProps(col.headProps);
+          const growFloor = col.grow && col.growMin != null ? `${col.growMin}rem` : undefined;
           const pinnedHead = width ? { width, minWidth: width, maxWidth: width } : undefined;
           return (
             <th
@@ -156,8 +157,11 @@ export function DataTableHead<T>({
                   : undefined
               }
               style={
-                ownHead.style || pinnedHead || lockedWidths?.[col.key] !== undefined
+                ownHead.style || pinnedHead || lockedWidths?.[col.key] !== undefined || growFloor
                   ? {
+                      // A `grow` column's own floor (0.51.4), over the class's 10rem; a
+                      // locked width below wins, as it does over the class.
+                      ...(growFloor ? { minWidth: growFloor } : null),
                       ...ownHead.style,
                       ...(lockedWidths?.[col.key] !== undefined ? { minWidth: lockedWidths[col.key] } : null),
                       ...pinnedHead,

package/src/components/data-table.tsx

@@ -184,6 +184,14 @@ export interface DataTableColumn<T> {
    * broken in two to make room for it.
    */
   grow?: boolean;
+  /**
+   * The least this `grow` column keeps, in rem (0.51.4; default 10): the floor below which
+   * the table leaves out `fitPriority` columns, and once none is left, scrolls sideways.
+   * Lower it for a column whose first words carry it — the feedback inbox's Subject, 8,
+   * so the inbox at 768px with a sidebar keeps Subject, Status and the row actions
+   * without scrolling (Kurvenschmiede). In rem, so Large text asks for more.
+   */
+  growMin?: number;
   /**
    * Leave this column out while the TABLE is too narrow for it (0.48, keksdose live
    * #451) — measured on the table's own scroller, so a sidebar, the window and Large

package/src/components/grouped-picker.tsx

@@ -2,7 +2,7 @@ import { useCallback, useId, useMemo } from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../lib/cn";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { ComboboxPanel, useComboboxCore, type ComboOption } from "./combobox-core";
 import { assignRef } from "./field-parts";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
@@ -90,13 +90,20 @@ export function GroupedPicker({
   // plain `toLowerCase` gets wrong), and now the accents too — "zurich" finds Zürich.
   const locale = useKitLocale();
   const results = useMemo(() => {
-    const q = foldForSearch(query.trim(), locale);
-    const has = (s: string) => foldForSearch(s, locale).includes(q);
-    const kept = q
-      ? groups
-          .map((g) => (has(g.label) ? g : { ...g, items: g.items.filter((i) => has(i.label)) }))
-          .filter((g) => g.items.length > 0)
-      : groups;
+    // Every word of the query (0.51.4): all in the group's name keeps the whole group;
+    // otherwise an item stays when each word is in its label or its group's name, so
+    // "migros 8004" finds Migros' 8004 shop.
+    const words = searchWords(query, locale);
+    const kept =
+      words.length > 0
+        ? groups
+            .map((g) =>
+              matchesSearch(words, [g.label], locale)
+                ? g
+                : { ...g, items: g.items.filter((i) => matchesSearch(words, [g.label, i.label], locale)) },
+            )
+            .filter((g) => g.items.length > 0)
+        : groups;
     return kept.flatMap((g) =>
       g.items.map(
         (item): ComboOption<string> => ({

package/src/components/icon-picker.tsx

@@ -6,7 +6,7 @@ import { SearchField } from "./search-field";
 import { TILE_SIZE, TileRadioGroup } from "./tile-radio";
 import type { TileItem, TileSize } from "./tile-radio";
 import { hasContent } from "../lib/presence";
-import { foldForSearch } from "../lib/text-match";
+import { matchesSearch, searchWords } from "../lib/text-match";
 import { LabelStrip, useFieldMessages, type FieldHelpProps } from "./field-parts";
 import { DEFAULT_ICON_PICKER_LABELS } from "./icon-picker-labels";
 
@@ -147,16 +147,18 @@ export function IconPicker<T extends string>({
   });
   const [query, setQuery] = useState("");
   // Case- and accent-insensitive, so "cafe" finds "Café" — every kit list's fold (DUP-5).
-  const needle = foldForSearch(query.trim(), locale);
+  // Every word of the query, in the label or a keyword (0.51.4).
+  const words = useMemo(() => searchWords(query, locale), [query, locale]);
+  const needle = words.length > 0;
 
   const visible = useMemo(
     () =>
       needle
         ? options.filter((o) =>
-            [o.label, ...(o.keywords ?? [])].some((w) => foldForSearch(w, locale).includes(needle)),
+            matchesSearch(words, [o.label, ...(o.keywords ?? [])], locale),
           )
         : options,
-    [options, needle, locale],
+    [options, needle, words, locale],
   );
   const byValue = useMemo(() => new Map(options.map((o) => [o.value, o])), [options]);
   const items: TileItem<T>[] = [

package/src/components/inline-entity-combobox.tsx

@@ -24,7 +24,7 @@ import {
   type ComboOption,
 } from "./combobox-core";
 import { DEFAULT_COMBOBOX_LABELS, useKitLabels, useKitLocale } from "../i18n/kit-labels";
-import { foldForSearch, rankMatch } from "../lib/text-match";
+import { matchesSearch, rankMatch, searchWords } from "../lib/text-match";
 import {
   EndHintRow,
   FieldCaption,
@@ -311,8 +311,9 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
   const matches = useMemo(() => {
     let ranked = options;
     if (query) {
-      const q = foldForSearch(query, locale);
-      const hit = (s: string | undefined) => s !== undefined && foldForSearch(s, locale).includes(q);
+      // Every word of the query, in the label or the sublabel (0.51.4).
+      const words = searchWords(query, locale);
+      const hit = (o: ComboOption<V>) => matchesSearch(words, [o.label, o.sublabel], locale);
       // The label's whole name or its start first (`rankMatch` 0 and 1), then a match
       // anywhere in the label or the sublabel. Not the group (0.40, kk run 79): with
       // first-letter groups one typed letter matched its whole group.
@@ -321,7 +322,7 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
         return rank === 0 || rank === 1;
       };
       const starts = options.filter(leads);
-      const rest = options.filter((o) => !leads(o) && (hit(o.label) || hit(o.sublabel)));
+      const rest = options.filter((o) => !leads(o) && hit(o));
       ranked = [...starts, ...rest];
     }
     if (!ranked.some((o) => o.group)) return ranked;

package/src/components/legal-labels.ts

@@ -10,6 +10,8 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
     impressum: "Imprint",
     privacy: "Privacy Policy",
     terms: "Terms",
+    security: "Security",
+    accessibility: "Accessibility",
   },
   titles: {
     impressum: "Imprint",
@@ -29,6 +31,10 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
     show: (o) => `Show the ${o.bindingLanguage} version`,
   },
   updated: (date) => `Last updated: ${date}`,
+  summary: {
+    title: "In short",
+    note: "This summary is for orientation; only the full text is binding.",
+  },
   sections: {
     impressum: {
       operator: {
@@ -83,7 +89,7 @@ export const DEFAULT_LEGAL_LABELS: LegalLabels = {
       },
       changes: {
         title: "Changes to these terms",
-        body: "We may update these terms as the service evolves. We announce a material change at least 30 days before it takes effect, by email and in the app, together with the new text. If you do not agree, you can object or delete your account before that date, and you can export your data until then. If you keep using the service after that date, the changed terms apply.",
+        body: "We may update these terms as the service evolves. We announce a material change at least 30 days before it takes effect, by email and in the app, together with the new text. If you do not agree, you can object or delete your account before that date, and you can export your data until then. If you keep using the service after that date, the changed terms apply. Changes that only benefit you, or that the law requires, apply without this notice and cannot be objected to. If you object to a change, we may end your account on the date it takes effect. If you have paid for a period that runs beyond that date, we refund the unused part.",
       },
       language: {
         title: "Language",

package/src/components/legal-page.tsx

@@ -21,6 +21,7 @@ import {
   LegalSlotContext,
   LegalText,
   legalOperatorText,
+  resolveLegalRefs,
   useLegalLabels,
   warnLegalOnce,
 } from "./legal";
@@ -351,8 +352,24 @@ export interface LegalPageProps {
    *
    * An app that records which terms someone accepted (keksdose) stores the terms page's
    * date: it is the version the reader saw.
+   *
+   * The kit's sections are part of the page, so the date moves with their words too: a
+   * kit release that changes them says so in its adoption note ("Legal wording"), and
+   * the app sets the page's date to the day it ships that bump (§2, decision 10).
    */
   updated?: string;
+  /**
+   * 0.51.4: a plain-language summary before the first section (legal benchmark, Marcel
+   * 2026-10-29) — the app's three to six points, each a sentence. The kit draws them as a
+   * list under `legal.summary.title` ("In short", "Das Wichtigste in Kürze") and adds
+   * `legal.summary.note`: the summary orients, only the full text binds. Worded without
+   * "below", because on a translated page the text below is a translation too.
+   *
+   * A string point is running text with its `{ref:key}` resolved, as in a section:
+   * "You can delete your account at any time (section {ref:ending})." Unnumbered, with
+   * the id `summary`; the sections' numbers do not count it. Left out or empty, nothing.
+   */
+  summary?: readonly ReactNode[];
   /**
    * 0.28.1: switches the app to the operator's `bindingLanguage` — the button after the
    * translation note on a page read in another language. Without it the note stands
@@ -471,6 +488,7 @@ function slotSections(
  * What it adds to the column:
  * - the title, from `legal.titles`, and "← Back to home" pointing at `homeHref`;
  * - the as-of line under the title, from `updated` (0.51.3);
+ * - the plain-language summary before the sections, from `summary` (0.51.4);
  * - the default notice per page — the beta notice, or the privacy notice on the privacy
  *   policy, whose technical sections describe running code (§3.2, §7.3);
  * - numbers: the privacy and terms sections are "N. Title" in render order, the
@@ -492,6 +510,7 @@ export function LegalPage({
   homeHref = "/",
   notice,
   updated,
+  summary,
   onShowBindingLanguage,
   locale: localeProp,
   headingAs = "h1",
@@ -550,6 +569,25 @@ export function LegalPage({
       {(labels.updated ?? DEFAULT_LEGAL_LABELS.updated!)(formatDate(updated, "long", { locale }))}
     </time>
   ) : undefined;
+  const summaryLabels = labels.summary ?? DEFAULT_LEGAL_LABELS.summary!;
+  const SummaryHeading = context.sectionHeading;
+  const summaryBox =
+    summary !== undefined && summary.length > 0 ? (
+      <section id="summary" className="rounded-lg border border-subtle bg-surface p-4 sm:p-5">
+        <SummaryHeading className="text-lg font-semibold break-words text-primary">{summaryLabels.title}</SummaryHeading>
+        <ul className="mt-3 space-y-2">
+          {summary.map((point, i) => (
+            <li key={i} className="flex gap-2.5 text-sm leading-relaxed text-secondary">
+              <span aria-hidden className="mt-2 size-1.5 shrink-0 rounded-full bg-brand" />
+              <span className="min-w-0 break-words">
+                {typeof point === "string" ? resolveLegalRefs(point, context) : point}
+              </span>
+            </li>
+          ))}
+        </ul>
+        <p className="mt-3 text-xs text-muted">{summaryLabels.note}</p>
+      </section>
+    ) : undefined;
 
   return (
     <UiKitProvider labels={overrides}>
@@ -567,6 +605,7 @@ export function LegalPage({
               notice={shownNotice}
               updated={updatedLine}
               translationNote={translationNote}
+              summary={summaryBox}
               headingAs={headingAs}
             >
               {nodes}

package/src/components/legal.tsx

@@ -44,6 +44,11 @@ export const LEGAL_HREFS: Readonly<Record<LegalPageKey, string>> = Object.freeze
   terms: "/terms",
 });
 
+/** 0.51.4: the two public pages an app MAY have beside the legal ones, linked after
+ *  them in the footer (§3.3) — keksdose's /security and /accessibility. Not legal pages:
+ *  an app draws them with `PublicPage`, in its own words, at routes of its choosing. */
+export type LegalInfoPageKey = "security" | "accessibility";
+
 /**
  * Who runs the app — the values the kit's legal sections are filled in with (§5).
  *
@@ -179,8 +184,11 @@ export interface LegalFramedSectionLabels {
 export interface LegalLabels {
   /** The accessible name of {@link LegalLinks}' and {@link LegalFooter}'s `<nav>`. */
   navLabel: string;
-  /** The short labels of the three links, everywhere the links appear (§3.3). */
-  links: Record<LegalPageKey, string>;
+  /** The short labels of the three links, everywhere the links appear (§3.3), and since
+   *  0.51.4 of the two optional public pages after them (`securityHref`,
+   *  `accessibilityHref` on {@link LegalLinks}) — optional keys, as every key added to a
+   *  namespace an app may annotate: left out, the provider's, then English. */
+  links: Record<LegalPageKey, string> & Partial<Record<LegalInfoPageKey, string>>;
   /** The pages' titles — the `<h1>`, and the links of the terms checkbox. */
   titles: Record<LegalPageKey, string>;
   /** The back link above the title: "← Back to home". */
@@ -215,6 +223,15 @@ export interface LegalLabels {
    * the provider's, then English.
    */
   updated?: (date: string) => string;
+  /**
+   * 0.51.4: the plain-language summary at the top of a page ({@link LegalPage}'s
+   * `summary`, §3.2) — its heading, and the line under the points saying that only the
+   * full text binds. Optional, as `updated`.
+   */
+  summary?: {
+    title: string;
+    note: string;
+  };
   /** The kit's sections (§4.3), by page and section key. */
   sections: {
     impressum: {
@@ -363,6 +380,15 @@ export interface LegalLinksProps {
   /** Default (0.28): the three routes, `/impressum`, `/privacy` and `/terms`, with the
    *  kit's short link labels (`legal.links`), in the contract's order. */
   links?: readonly LegalLink[];
+  /**
+   * 0.51.4: the app's security page — a "Security" link after the others, with the kit's
+   * label (`legal.links.security`). Left out, no link: only an app that has the page
+   * names its route.
+   */
+  securityHref?: string;
+  /** 0.51.4: the app's accessibility statement — "Accessibility", last. As
+   *  `securityHref`. */
+  accessibilityHref?: string;
   /** The page being shown; its link is marked `aria-current="page"`. Usually the
    *  router's pathname. */
   currentHref?: string;
@@ -387,6 +413,14 @@ function defaultLinks(labels: LegalLabels): LegalLink[] {
   }));
 }
 
+/** The optional pages after them, each only where the app named its route. */
+function infoLinks(labels: LegalLabels, hrefs: Partial<Record<LegalInfoPageKey, string>>): LegalLink[] {
+  return (["security", "accessibility"] as const).flatMap((page) => {
+    const href = hrefs[page];
+    return href ? [{ href, label: labels.links[page] ?? DEFAULT_LEGAL_LABELS.links[page] }] : [];
+  });
+}
+
 /**
  * The legal pages as a row of quiet links, the one you are on marked (kastlan's
  * `LegalLinks`). Wraps on a phone.
@@ -398,6 +432,8 @@ function defaultLinks(labels: LegalLabels): LegalLink[] {
  */
 export function LegalLinks({
   links,
+  securityHref,
+  accessibilityHref,
   currentHref,
   nav = true,
   onLinkClick,
@@ -405,7 +441,10 @@ export function LegalLinks({
   className,
 }: LegalLinksProps) {
   const labels = useLegalLabels(labelsProp);
-  const shown = links ?? defaultLinks(labels);
+  const shown = [
+    ...(links ?? defaultLinks(labels)),
+    ...infoLinks(labels, { security: securityHref, accessibility: accessibilityHref }),
+  ];
   const items = shown.flatMap((link, i) => [
     ...(i > 0 ? [<span key={`sep-${link.href}`} aria-hidden="true">·</span>] : []),
     <TextLink key={link.href} href={link.href} tone="muted" current={link.href === currentHref} onClick={onLinkClick}>
@@ -429,6 +468,10 @@ export interface LegalFooterProps {
   children?: ReactNode;
   /** Default: the three routes with the kit's link labels — see {@link LegalLinks}. */
   links?: readonly LegalLink[];
+  /** 0.51.4: "Security" after the others — see {@link LegalLinksProps.securityHref}. */
+  securityHref?: string;
+  /** 0.51.4: "Accessibility", last — see {@link LegalLinksProps.accessibilityHref}. */
+  accessibilityHref?: string;
   /** Marks that link `aria-current="page"`. {@link LegalPage}'s default footer passes
    *  its own page. */
   currentHref?: string;
@@ -454,14 +497,29 @@ export interface LegalFooterProps {
  * landing, auth, legal and 404 pages; kastlan and Kurvenschmiede had them on some pages
  * only. Its palette classes (`border-slate-200 bg-white dark:…`) became the surface and
  * border tokens, so it follows the theme like the rest of the kit.
+ *
+ * 0.51.4: an app with a security page or an accessibility statement passes their routes
+ * (`securityHref`, `accessibilityHref`) and the row goes on with "Security · Accessibility"
+ * in the kit's words, so the footer reads the same in every app that has them.
  */
-export function LegalFooter({ children, links, currentHref, landmark = true, className, labels }: LegalFooterProps) {
+export function LegalFooter({
+  children,
+  links,
+  securityHref,
+  accessibilityHref,
+  currentHref,
+  landmark = true,
+  className,
+  labels,
+}: LegalFooterProps) {
   const Root = landmark ? "footer" : "div";
   return (
     <Root className={cn("border-t border-subtle bg-surface", className)}>
       <div className="mx-auto max-w-5xl px-4 py-8 text-sm text-muted">
         <LegalLinks
           links={links}
+          securityHref={securityHref}
+          accessibilityHref={accessibilityHref}
           currentHref={currentHref}
           labels={labels}
           className="justify-center gap-y-2 text-sm"
@@ -547,6 +605,8 @@ export interface LegalLayoutProps {
   /** 0.28.1: under the title, before the notice — {@link LegalPage}'s note that this
    *  page is a translation and which language is binding. */
   translationNote?: ReactNode;
+  /** 0.51.4: before the sections — {@link LegalPage}'s plain-language summary. */
+  summary?: ReactNode;
   /** The sections — {@link LegalSection}s. */
   children: ReactNode;
   /** The three pages, linked at the end of the column with the current one marked.
@@ -566,6 +626,7 @@ export function LegalLayout({
   notice,
   updated,
   translationNote,
+  summary,
   children,
   links,
   currentHref,
@@ -584,7 +645,10 @@ export function LegalLayout({
           {notice}
         </AlertBanner>
       )}
-      <div className="mt-8 space-y-8">{children}</div>
+      <div className="mt-8 space-y-8">
+        {summary}
+        {children}
+      </div>
       {links !== undefined && links.length > 0 && (
         <LegalLinks links={links} currentHref={currentHref} labels={labels} className="mt-12 border-t border-subtle pt-4" />
       )}

package/src/components/list-labels.ts

@@ -7,4 +7,6 @@ import type { ListLabels } from "./list";
 export const DEFAULT_LIST_LABELS: ListLabels = {
   unread: "Unread",
   opensInNewTab: "opens in a new tab",
+  showAll: (count) => `Show all (${count})`,
+  showFewer: "Show fewer",
 };

package/src/components/list.tsx

@@ -1,4 +1,4 @@
-import { createContext, useContext, useId, useState } from "react";
+import { Children, createContext, useContext, useId, useState } from "react";
 import type { ComponentPropsWithoutRef, HTMLAttributes, MouseEvent, ReactElement, ReactNode, Ref } from "react";
 import { ChevronDown, ExternalLink } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
@@ -14,6 +14,7 @@ import { pickLinkRenderer } from "./text-link";
 import { LockedReason, mergeDescribedBy, useLockReason, type DisabledReasonDisplay } from "./field-parts";
 import type { CommitScope } from "./write-lock";
 import { DEFAULT_LIST_LABELS } from "./list-labels";
+import { Button } from "./button";
 
 /* ── Labels ───────────────────────────────────────────────────────────────── */
 
@@ -22,6 +23,12 @@ export interface ListLabels {
   unread: string;
   /** Read after an external row's title: the row leaves the app in a new tab. */
   opensInNewTab: string;
+  /** 0.51.4: the row under a {@link ListProps.limit}ed list that opens the rest, with
+   *  the WHOLE list's count — "Show all (12)". Optional, as every key added to a
+   *  namespace an app may annotate: left out, the provider's, then English. */
+  showAll?: (count: number) => string;
+  /** 0.51.4: the same row once the list is open, folding it back. */
+  showFewer?: string;
 }
 
 // Defined in ./list-labels, which holds no component code (0.34, KS U8).
@@ -53,8 +60,26 @@ export interface ListProps extends Omit<ComponentPropsWithoutRef<"ul">, "role">
   /** The `<ul>` (or `<ol>`). A React 19 ref prop since 0.34 (MOD-4, refactor audit
    *  2026-10); it was `forwardRef`. */
   ref?: Ref<HTMLUListElement>;
+  /**
+   * Show the first `limit` rows, then a "Show all (n)" row that opens the rest and turns
+   * into "Show fewer" (0.51.4, keksdose run 89: a long "Placed only roughly" list on its
+   * Matching report could only fold as a whole, so it opened as nothing or everything).
+   * A list of `limit` rows or fewer draws them all, with no such row. Rows are counted as
+   * `Children` counts them: one per `ListItem`, a fragment as one.
+   *
+   * The row is a button with `aria-expanded`, controlling the list; it sits in the list
+   * as `role="none"`, so a reader still hears "list, 5 items" for five rows.
+   */
+  limit?: number;
 }
 
+/** The show-all row's inset, in step with each density's row padding (`PAD`). */
+const MORE_PAD: Record<ListDensity, string> = {
+  compact: "px-2 py-1",
+  default: "px-3 py-1.5",
+  comfortable: "px-4 py-2",
+};
+
 /**
  * The list of {@link ListItem}s.
  *
@@ -67,15 +92,23 @@ export function List({
   as = "ul",
   density = "default",
   separator = "gap",
+  limit,
   className,
   children,
   ...rest
 }: ListProps) {
   const Tag = as;
+  const labels = useKitLabels("list", DEFAULT_LIST_LABELS);
+  const [open, setOpen] = useState(false);
+  const generatedId = useId();
+  const id = rest.id ?? generatedId;
+  const rows = limit === undefined ? null : Children.toArray(children);
+  const folds = rows !== null && rows.length > Math.max(0, limit!);
   return (
     <ListContext.Provider value={{ density, separator }}>
       <Tag
         {...rest}
+        id={folds ? id : rest.id}
         ref={ref as Ref<HTMLUListElement & HTMLOListElement>}
         role="list"
         className={cn(
@@ -84,7 +117,24 @@ export function List({
           className,
         )}
       >
-        {children}
+        {folds && !open ? rows.slice(0, Math.max(0, limit!)) : children}
+        {folds && (
+          <li role="none" className={MORE_PAD[density]}>
+            <Button
+              type="button"
+              variant="link"
+              size="sm"
+              className="h-auto p-0"
+              aria-expanded={open}
+              aria-controls={id}
+              onClick={() => setOpen((was) => !was)}
+            >
+              {open
+                ? (labels.showFewer ?? DEFAULT_LIST_LABELS.showFewer)
+                : (labels.showAll ?? DEFAULT_LIST_LABELS.showAll!)(rows.length)}
+            </Button>
+          </li>
+        )}
       </Tag>
     </ListContext.Provider>
   );