@eifi1/ui-kit 0.9.0 → 0.10.0

package/src/components/ui.tsx

@@ -57,6 +57,40 @@ const buttonVariantClasses: Record<ButtonVariant, string> = {
     "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]",
 };
 
+/**
+ * The text colour of a `link` or `ghost` button, over the variant's own.
+ *
+ * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's "Mark
+ * undone", transaction-fields:176/215's "Add line" / "Fill total",
+ * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the
+ * body colour under the pointer, for an action that must be findable but not compete
+ * with the brand-coloured one beside it. `danger` is the same quiet look turning
+ * `--danger` on hover — transaction-editor:401's "Remove split", which is a text
+ * action that destroys something.
+ *
+ * A `tone` rather than a `link-muted` variant, because it is the axis IconButton
+ * already has (`tone="muted"`, `tone="danger"`, same quiet-until-hover meaning), and
+ * because the same two looks are wanted on `ghost`. The filled and bordered variants
+ * carry their meaning in the box, not the text, so a tone on them does nothing.
+ */
+export type ButtonTone = "default" | "muted" | "danger";
+
+const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
+  muted:
+    "text-[var(--text-secondary)] hover:text-[var(--text-primary)] disabled:hover:text-[var(--text-secondary)]",
+  danger:
+    "text-[var(--text-secondary)] hover:text-[var(--danger)] focus:ring-[var(--danger-border)] disabled:hover:text-[var(--text-secondary)]",
+};
+
+/** Only the two transparent variants take a tone; see {@link ButtonTone}. */
+const TONED_VARIANTS = new Set<ButtonVariant>(["link", "ghost"]);
+
+// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what
+// lenkbank's "All speeds" toggle paints by hand (gear/hysteresis-charts.tsx:482). After
+// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey.
+const BUTTON_LINK_PRESSED =
+  "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
+
 /** The second argument of {@link buttonClasses} in its options form. */
 export interface ButtonClassesOptions {
   /** See {@link ButtonProps.size}. */
@@ -105,12 +139,75 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
    *  declared here only because `ButtonHTMLAttributes` does not carry it. */
   ref?: Ref<HTMLButtonElement>;
+  /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
+   *  `danger` (quiet, `--danger` on hover). Ignored by the other variants. See
+   *  {@link ButtonTone}. */
+  tone?: ButtonTone;
+  /**
+   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets
+   * `aria-pressed="true"` and draws the "on" look — on a `link`, the brand colour and a
+   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and
+   * `false` sets `aria-pressed="false"` with the ordinary look. Left out, no
+   * `aria-pressed` (or the caller's own). For lenkbank's "All speeds" text toggle
+   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`
+   * swapping two class strings; with `variant="link" tone="muted"` it is this.
+   */
+  pressed?: boolean;
+  /**
+   * Why the action is not available — the button's half of DangerConfirm's
+   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).
+   *
+   * A disabled button that cannot say why is a dead end: the native `disabled` takes it
+   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a
+   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`
+   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form
+   * submission they stand for) do nothing, and the reason is shown in the kit
+   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it
+   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is
+   * the point of giving a reason.
+   *
+   * The description is a `hidden` copy of the reason rather than the bubble itself: the
+   * bubble exists only while hovered or focused once it is portalled, and a description
+   * that comes and goes is read inconsistently. The bubble is kept visual, the way
+   * DangerConfirm keeps its own.
+   */
+  disabledReason?: ReactNode;
 }
 
-export function Button({ variant = "primary", size = "md", stretch, className, ...rest }: ButtonProps) {
-  return (
+function hasContent(node: ReactNode): boolean {
+  return node !== undefined && node !== null && node !== false && node !== "";
+}
+
+export function Button({
+  variant = "primary",
+  size = "md",
+  stretch,
+  tone = "default",
+  pressed,
+  disabledReason,
+  className,
+  onClick,
+  ...rest
+}: ButtonProps) {
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
+  const button = (
     <button
       {...rest}
+      disabled={locked ? undefined : rest.disabled}
+      aria-disabled={locked || rest["aria-disabled"]}
+      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}
+      aria-pressed={pressed ?? rest["aria-pressed"]}
+      onClick={(e) => {
+        // `preventDefault` as well as not calling through: a locked submit button must
+        // not submit its form, and the browser does that after this handler returns.
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.(e);
+      }}
       className={cn(
         BUTTON_BASE,
         BUTTON_SIZES[size],
@@ -119,10 +216,29 @@ export function Button({ variant = "primary", size = "md", stretch, className, .
         // align-items). No effect outside a flex row / when it's already the tallest.
         stretch && "self-stretch",
         buttonVariantClasses[variant],
+        tone !== "default" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],
+        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
+        // The disabled look for the focusable kind of disabled.
+        locked && "cursor-not-allowed opacity-50",
         className,
       )}
     />
   );
+  if (!locked) return button;
+  return (
+    // The button in a FRAGMENT so Tooltip does not clone its bubble into the
+    // description as well — the hidden copy below already describes it, and the same
+    // sentence twice would be read on every focus. `stretch` moves to the wrapper,
+    // which is now the flex item.
+    <Tooltip label={disabledReason} className={stretch ? "self-stretch" : undefined}>
+      <>
+        {button}
+        <span id={reasonId} hidden>
+          {disabledReason}
+        </span>
+      </>
+    </Tooltip>
+  );
 }
 
 // Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2
@@ -305,16 +421,59 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
    *  The pair look exactly like the nested version, click exactly like it, and
    *  are two tab stops a screen reader can tell apart. */
   stopPropagation?: boolean;
+  /**
+   * The button's name, said once: it becomes the `aria-label` AND the text of a kit
+   * {@link Tooltip} round the button.
+   *
+   * Every app writes the pair by hand. lenkbank's nine icon actions all carry
+   * `aria-label={t(x)} title={t(x)}` (shared/lib/table-columns.tsx:103,
+   * projects-page.tsx:83, setpoint/segment-list.tsx:198/207, profile-bar.tsx:128/142,
+   * shortcut-dialog.tsx:815/857/1007) — and `title` is the browser's own tooltip,
+   * which shows late, never on focus and never on touch, and looks like no other
+   * label in the kit. kastlan's RowAction (shared/components/data-table/row-action.tsx)
+   * and keksdose's icon wrappers each exist to put a Tooltip round an IconButton.
+   *
+   * A caller's own `aria-label` still wins, for the rare name that should be longer
+   * than the bubble. The bubble is visual only: it would otherwise describe the button
+   * with its own name, and a screen reader would read the same word twice. Tooltip's
+   * default placement applies — in place, or portalled inside a scroll container —
+   * unless `tooltipPortal` says otherwise.
+   */
+  label?: string;
+  /** Show `label` as a tooltip. Default `true`; `false` keeps `label` as the
+   *  accessible name only — for a button whose glyph is universally read (a close ✕ in
+   *  a dialog header) or that already sits under a tooltip of its own. */
+  tooltip?: boolean;
+  /** Where the `label` tooltip opens. See {@link Tooltip}'s `side`. */
+  tooltipSide?: TooltipSide;
+  /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */
+  tooltipPortal?: boolean;
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
-  { variant = "ghost", size = "md", tone = "default", quiet, pressed, stopPropagation, className, onClick, onKeyDown, ...rest },
+  {
+    variant = "ghost",
+    size = "md",
+    tone = "default",
+    quiet,
+    pressed,
+    stopPropagation,
+    label,
+    tooltip = true,
+    tooltipSide,
+    tooltipPortal,
+    className,
+    onClick,
+    onKeyDown,
+    ...rest
+  },
   ref,
 ) {
-  return (
+  const button = (
     <button
       ref={ref}
       {...rest}
+      aria-label={rest["aria-label"] ?? label}
       aria-pressed={pressed ?? rest["aria-pressed"]}
       onClick={(e) => {
         if (stopPropagation) e.stopPropagation();
@@ -338,6 +497,14 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       )}
     />
   );
+  if (!tooltip || label === undefined || label === "") return button;
+  return (
+    // A fragment, so Tooltip leaves the button's description alone: the bubble says
+    // exactly what `aria-label` already does.
+    <Tooltip label={label} side={tooltipSide} portal={tooltipPortal}>
+      <>{button}</>
+    </Tooltip>
+  );
 });
 IconButton.displayName = "IconButton";
 
@@ -1400,10 +1567,72 @@ export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "
    *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
    *  caller renders; the box only places them. */
   action?: ReactNode;
+  /**
+   * `box` (default): the dashed, padded card that stands in for a whole section.
+   * `inline`: one quiet line with no box — for the empty state INSIDE something that
+   * already has its own frame, where a dashed card would be a box in a box. keksdose
+   * writes that line by hand five times as a muted `<p className="py-6 text-center">`:
+   * the notification inbox (notification-inbox:140), a support thread
+   * (support-thread:144), the assistant (assistant-page:321), the admin support panel
+   * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks
+   * to the text's size and sits before the title, the hint follows on the same line,
+   * and the row wraps only when it must. Centred like the box; `className="justify-start"`
+   * for a list that reads from the start edge (funding-dialog).
+   */
+  variant?: "box" | "inline";
+  /**
+   * Colour the icon and the title: `danger` for an error standing where the content
+   * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and
+   * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a
+   * message — and `success` for an empty state that is GOOD news, kastlan's "No defects
+   * recorded for this room" (handover defects-step.tsx:142, a green check). Left out,
+   * both stay muted. The hint stays muted either way: it is the explanation, not the
+   * verdict.
+   */
+  tone?: "danger" | "success";
 }
 
-export function EmptyState({ title, hint, icon, action, headingAs, className, ...rest }: EmptyStateProps) {
+const EMPTY_STATE_TONE: Record<"danger" | "success", string> = {
+  danger: "text-[var(--danger)]",
+  success: "text-[var(--success)]",
+};
+
+export function EmptyState({
+  title,
+  hint,
+  icon,
+  action,
+  headingAs,
+  variant = "box",
+  tone,
+  className,
+  ...rest
+}: EmptyStateProps) {
   const Title = headingAs ?? "div";
+  const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;
+  const hasHint = hint != null && hint !== false && hint !== "";
+  if (variant === "inline") {
+    return (
+      <div
+        {...rest}
+        className={cn(
+          "flex flex-wrap items-center justify-center gap-x-2 gap-y-1 py-4 text-center text-sm text-[var(--text-muted)]",
+          className,
+        )}
+      >
+        {icon != null && (
+          <span aria-hidden className={cn("flex text-[var(--text-placeholder)] [&_svg]:size-4", toneClass)}>
+            {icon}
+          </span>
+        )}
+        {/* No weight of its own: one muted line is what these sites were, and a
+            bold title would turn a quiet "nothing here" into a heading. */}
+        <Title className={cn("text-sm", toneClass)}>{title}</Title>
+        {hasHint && <span className="text-xs">{hint}</span>}
+        {action != null && <span className="flex flex-wrap items-center gap-2">{action}</span>}
+      </div>
+    );
+  }
   return (
     <div
       {...rest}
@@ -1413,13 +1642,13 @@ export function EmptyState({ title, hint, icon, action, headingAs, className, ..
       )}
     >
       {icon != null && (
-        <div aria-hidden className="mb-3 text-[var(--text-placeholder)] [&_svg]:size-8">
+        <div aria-hidden className={cn("mb-3 text-[var(--text-placeholder)] [&_svg]:size-8", toneClass)}>
           {icon}
         </div>
       )}
       {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}
-      <Title className="text-sm font-medium text-[var(--text-secondary)]">{title}</Title>
-      {hint != null && hint !== false && hint !== "" && <div className="mt-1 text-xs">{hint}</div>}
+      <Title className={cn("text-sm font-medium text-[var(--text-secondary)]", toneClass)}>{title}</Title>
+      {hasHint && <div className="mt-1 text-xs">{hint}</div>}
       {action != null && (
         <div className="mt-4 flex flex-wrap items-center justify-center gap-2">{action}</div>
       )}

package/src/hooks/use-close-transition.ts

@@ -6,6 +6,19 @@ import { useCallback, useEffect, useRef, useState } from "react";
  *  by a copy of it. */
 export const OVERLAY_EXIT_MS = 220;
 
+/**
+ * Whether the user has asked for no motion, read NOW. `true` where `matchMedia` is
+ * absent (jsdom, SSR): nothing is painting there, so "no animation" is the only
+ * correct answer. Shared by every exit timer in the package, so they agree.
+ */
+export function prefersReducedMotion(): boolean {
+  return (
+    typeof window === "undefined" ||
+    typeof window.matchMedia !== "function" ||
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
 /**
  * The state machine an exit animation needs, written once for every overlay in this
  * package (Keksdose live #320 rework: *"Recognized the opening transition. Choose
@@ -66,11 +79,7 @@ export function useCloseTransition(
     // Read at close time, not at mount: the setting can change under a long-lived
     // page, and `matchMedia` is absent in jsdom and in SSR — where "no animation" is
     // also the only correct answer, since nothing is painting.
-    const reduced =
-      typeof window === "undefined" ||
-      typeof window.matchMedia !== "function" ||
-      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    if (reduced || ms <= 0) {
+    if (prefersReducedMotion() || ms <= 0) {
       latest.current();
       return;
     }

package/src/hooks/use-copy-to-clipboard.ts

@@ -42,7 +42,7 @@ function legacyCopy(text: string): boolean {
   area.style.opacity = "0";
   document.body.appendChild(area);
   area.select();
-  let ok = false;
+  let ok: boolean;
   try {
     ok = document.execCommand("copy");
   } catch {

package/src/i18n/defaults.ts

@@ -25,6 +25,10 @@ import { DEFAULT_CONFIRM_DIALOG_LABELS } from "../components/confirm-dialog";
 import { DEFAULT_FLOATING_PANEL_LABELS } from "../components/floating-panel";
 import { DEFAULT_FEEDBACK_ATTACHMENT_LABELS } from "../feedback/feedback-attachment";
 import { DEFAULT_COPY_BUTTON_LABELS } from "../components/copy-button";
+import { DEFAULT_BULK_ACTION_BAR_LABELS } from "../components/bulk-action-bar";
+import { DEFAULT_LIST_LABELS } from "../components/list";
+import { DEFAULT_BREADCRUMBS_LABELS } from "../components/breadcrumbs";
+import { DEFAULT_TOAST_LABELS } from "../components/toast";
 import {
   DEFAULT_APP_SHELL_LABELS,
   DEFAULT_CALCULATOR_LABELS,
@@ -88,4 +92,8 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   confirmDialog: DEFAULT_CONFIRM_DIALOG_LABELS,
   floatingPanel: DEFAULT_FLOATING_PANEL_LABELS,
   copyButton: DEFAULT_COPY_BUTTON_LABELS,
+  bulkActionBar: DEFAULT_BULK_ACTION_BAR_LABELS,
+  list: DEFAULT_LIST_LABELS,
+  breadcrumbs: DEFAULT_BREADCRUMBS_LABELS,
+  toast: DEFAULT_TOAST_LABELS,
 };

package/src/i18n/kit-labels.tsx

@@ -27,6 +27,10 @@ import type { FeedbackAttachmentFieldLabels } from "../feedback/feedback-attachm
 import type { ConfirmDialogLabels } from "../components/confirm-dialog";
 import type { FloatingPanelLabels } from "../components/floating-panel";
 import type { CopyButtonLabels } from "../components/copy-button";
+import type { BulkActionBarLabels } from "../components/bulk-action-bar";
+import type { ListLabels } from "../components/list";
+import type { BreadcrumbsLabels } from "../components/breadcrumbs";
+import type { ToastLabels } from "../components/toast";
 
 /**
  * EVERY string the kit renders, as one typed tree — and an optional provider that
@@ -229,6 +233,10 @@ export interface UiKitLabels {
   confirmDialog: ConfirmDialogLabels;
   floatingPanel: FloatingPanelLabels;
   copyButton: CopyButtonLabels;
+  bulkActionBar: BulkActionBarLabels;
+  list: ListLabels;
+  breadcrumbs: BreadcrumbsLabels;
+  toast: ToastLabels;
 }
 
 /** Any subset of the tree, one level deep — each namespace may be partial, and a

package/src/i18n/locales/de.ts

@@ -239,6 +239,11 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
     dialogFrame: {
       close: "Schließen",
     },
+    bulkActionBar: {
+      selected: (count) => `${n(count)} ausgewählt`,
+      clear: "Auswahl aufheben",
+      cleared: "Auswahl aufgehoben",
+    },
     swipeableRow: {
       actions: "Zeilenaktionen",
     },
@@ -379,6 +384,7 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
         "Zum Zoomen ziehen: Eine annähernd quadratische Auswahl zoomt beide Achsen, eine lange, schmale nur ihre eigene. Doppelklick setzt zurück.",
       empty: "Keine Daten",
       legend: "Datenreihen",
+      points: "Diagrammwerte",
     },
     confirmDialog: {
       confirm: "Bestätigen",
@@ -394,6 +400,20 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       copiedAnnouncement: "In die Zwischenablage kopiert",
       failedAnnouncement: "Kopieren in die Zwischenablage fehlgeschlagen",
     },
+    list: {
+      unread: "Ungelesen",
+      opensInNewTab: "öffnet in einem neuen Tab",
+    },
+    breadcrumbs: {
+      label: "Brotkrümelnavigation",
+      showAll: "Vollständigen Pfad anzeigen",
+    },
+    toast: {
+      close: "Benachrichtigung schließen",
+      notifications: "Benachrichtigungen",
+      undo: "Rückgängig",
+      redo: "Wiederholen",
+    },
   };
 }
 

package/src/i18n/locales/es.ts

@@ -236,6 +236,11 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
     dialogFrame: {
       close: "Cerrar",
     },
+    bulkActionBar: {
+      selected: (count) => `${n(count)} ${count === 1 ? "seleccionado" : "seleccionados"}`,
+      clear: "Borrar selección",
+      cleared: "Selección borrada",
+    },
     swipeableRow: {
       actions: "Acciones de la fila",
     },
@@ -372,6 +377,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
         "Arrastra para ampliar: una selección más o menos cuadrada amplía ambos ejes; una larga y estrecha, solo el suyo. Haz doble clic para restablecer.",
       empty: "Sin datos",
       legend: "Series",
+      points: "Valores del gráfico",
     },
     confirmDialog: {
       confirm: "Confirmar",
@@ -387,6 +393,20 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       copiedAnnouncement: "Copiado al portapapeles",
       failedAnnouncement: "No se pudo copiar al portapapeles",
     },
+    list: {
+      unread: "No leído",
+      opensInNewTab: "se abre en una pestaña nueva",
+    },
+    breadcrumbs: {
+      label: "Ruta de navegación",
+      showAll: "Mostrar la ruta completa",
+    },
+    toast: {
+      close: "Cerrar notificación",
+      notifications: "Notificaciones",
+      undo: "Deshacer",
+      redo: "Rehacer",
+    },
   };
 }
 

package/src/i18n/locales/fr.ts

@@ -241,6 +241,11 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
     dialogFrame: {
       close: "Fermer",
     },
+    bulkActionBar: {
+      selected: (count) => `${n(count)} ${count === 1 ? "sélectionné" : "sélectionnés"}`,
+      clear: "Effacer la sélection",
+      cleared: "Sélection effacée",
+    },
     swipeableRow: {
       actions: "Actions de la ligne",
     },
@@ -385,6 +390,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
         "Faites glisser pour zoomer\u00a0: une sélection à peu près carrée zoome sur les deux axes, une sélection longue et étroite sur son seul axe. Double-cliquez pour réinitialiser.",
       empty: "Aucune donnée",
       legend: "Séries",
+      points: "Valeurs du graphique",
     },
     confirmDialog: {
       confirm: "Confirmer",
@@ -400,6 +406,20 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       copiedAnnouncement: "Copié dans le presse-papiers",
       failedAnnouncement: "Impossible de copier dans le presse-papiers",
     },
+    list: {
+      unread: "Non lu",
+      opensInNewTab: "s’ouvre dans un nouvel onglet",
+    },
+    breadcrumbs: {
+      label: "Fil d’Ariane",
+      showAll: "Afficher le chemin complet",
+    },
+    toast: {
+      close: "Fermer la notification",
+      notifications: "Notifications",
+      undo: "Annuler",
+      redo: "Rétablir",
+    },
   };
 }
 

package/src/i18n/locales/hu.ts

@@ -234,6 +234,11 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
     dialogFrame: {
       close: "Bezárás",
     },
+    bulkActionBar: {
+      selected: (count) => `${n(count)} kijelölve`,
+      clear: "Kijelölés törlése",
+      cleared: "Kijelölés törölve",
+    },
     swipeableRow: {
       actions: "Sorműveletek",
     },
@@ -373,6 +378,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         "Húzással nagyíthat: a nagyjából négyzetes kijelölés mindkét tengelyt nagyítja, a hosszú, keskeny csak a saját tengelyét. Dupla kattintással visszaállíthatja.",
       empty: "Nincs adat",
       legend: "Adatsorok",
+      points: "Diagramértékek",
     },
     confirmDialog: {
       confirm: "Megerősítés",
@@ -388,6 +394,20 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       copiedAnnouncement: "Vágólapra másolva",
       failedAnnouncement: "Nem sikerült a vágólapra másolni",
     },
+    list: {
+      unread: "Olvasatlan",
+      opensInNewTab: "új lapon nyílik meg",
+    },
+    breadcrumbs: {
+      label: "Morzsamenü",
+      showAll: "Teljes útvonal megjelenítése",
+    },
+    toast: {
+      close: "Értesítés bezárása",
+      notifications: "Értesítések",
+      undo: "Visszavonás",
+      redo: "Újra",
+    },
   };
 }
 

package/src/i18n/locales/it.ts

@@ -237,6 +237,11 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
     dialogFrame: {
       close: "Chiudi",
     },
+    bulkActionBar: {
+      selected: (count) => `${n(count)} ${count === 1 ? "selezionato" : "selezionati"}`,
+      clear: "Annulla selezione",
+      cleared: "Selezione annullata",
+    },
     swipeableRow: {
       actions: "Azioni della riga",
     },
@@ -374,6 +379,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         "Trascina per ingrandire: una selezione più o meno quadrata ingrandisce entrambi gli assi, una lunga e sottile solo il proprio. Fai doppio clic per ripristinare.",
       empty: "Nessun dato",
       legend: "Serie",
+      points: "Valori del grafico",
     },
     confirmDialog: {
       confirm: "Conferma",
@@ -389,6 +395,20 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       copiedAnnouncement: "Copiato negli appunti",
       failedAnnouncement: "Impossibile copiare negli appunti",
     },
+    list: {
+      unread: "Non letto",
+      opensInNewTab: "si apre in una nuova scheda",
+    },
+    breadcrumbs: {
+      label: "Percorso di navigazione",
+      showAll: "Mostra percorso completo",
+    },
+    toast: {
+      close: "Chiudi notifica",
+      notifications: "Notifiche",
+      undo: "Annulla",
+      redo: "Ripeti",
+    },
   };
 }
 

package/src/i18n/locales/zh.ts

@@ -231,6 +231,11 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     dialogFrame: {
       close: "关闭",
     },
+    bulkActionBar: {
+      selected: (count) => `已选择 ${n(count)} 项`,
+      clear: "清除选择",
+      cleared: "已清除选择",
+    },
     swipeableRow: {
       actions: "行操作",
     },
@@ -362,6 +367,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         "拖动以缩放：近似正方形的选区同时缩放两条坐标轴，细长的选区只缩放其所沿的那条轴。双击可重置。",
       empty: "无数据",
       legend: "数据系列",
+      points: "图表数值",
     },
     confirmDialog: {
       confirm: "确认",
@@ -377,6 +383,20 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       copiedAnnouncement: "已复制到剪贴板",
       failedAnnouncement: "无法复制到剪贴板",
     },
+    list: {
+      unread: "未读",
+      opensInNewTab: "在新标签页中打开",
+    },
+    breadcrumbs: {
+      label: "面包屑导航",
+      showAll: "显示完整路径",
+    },
+    toast: {
+      close: "关闭通知",
+      notifications: "通知",
+      undo: "撤销",
+      redo: "重做",
+    },
   };
 }