@eifi1/ui-kit 0.10.0 → 0.11.0

package/src/components/ui.tsx

@@ -254,12 +254,15 @@ export function Button({
 const ICON_BUTTON_BASE =
   "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 
-export type IconButtonSize = "lg" | "md" | "sm" | "xs" | "2xs";
+export type IconButtonSize = "xl" | "lg" | "md" | "sm" | "xs" | "2xs";
 
 // Box and glyph together, so a 24px chip action cannot end up holding a 20px icon
 // that touches its edges. The two small steps are lenkbank's list-row (28px) and
 // chip (24px) actions, which it had hand-rolled beside the kit's 32/36px ones.
 const ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {
+  // 48px with a 24px glyph: the one primary action of a phone screen or sheet, a step
+  // past the 44px minimum rather than on it.
+  xl: "size-12 [&_svg]:size-6",
   // The 44px touch target (WCAG 2.5.5's size) with the same 20px glyph — keksdose's
   // bulk-action bars write `size-11` by hand over an `md` button to get it on phones.
   lg: "size-11 [&_svg]:size-5",
@@ -269,6 +272,18 @@ const ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {
   "2xs": "size-6 rounded [&_svg]:size-3.5",
 };
 
+// `stretch`: the same WIDTH and glyph, and a height taken from the row instead of
+// stated — `size-*` sets a height that `self-stretch` cannot override, so the box is
+// written as a width plus a minimum height (the square it would otherwise be).
+const ICON_BUTTON_STRETCH_SIZES: Record<IconButtonSize, string> = {
+  xl: "w-12 min-h-12 self-stretch [&_svg]:size-6",
+  lg: "w-11 min-h-11 self-stretch [&_svg]:size-5",
+  md: "w-9 min-h-9 self-stretch [&_svg]:size-5",
+  sm: "w-8 min-h-8 self-stretch [&_svg]:size-5",
+  xs: "w-7 min-h-7 self-stretch rounded [&_svg]:size-4",
+  "2xs": "w-6 min-h-6 self-stretch rounded [&_svg]:size-3.5",
+};
+
 // A tone re-colours the glyph without changing what the variant draws around it.
 // Each coloured tone comes in two resting looks, picked by `quiet` (see the prop):
 // QUIET is placeholder grey until the pointer or focus arrives, then the tone's
@@ -279,9 +294,14 @@ const ICON_BUTTON_SIZES: Record<IconButtonSize, string> = {
 // on the row to notice (keksdose's "needs review" flag, its reconcile action at
 // accounts-page:867), and quiet grey would hide the very thing they point out.
 // `muted` is quiet by definition and has no toned look; `default` has no tone.
-export type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info";
+//
+// `success` is toned at rest too: the green is the news (keksdose's "in sync" chip).
+// `custom` paints from `--icon-button-tone`, which `toneColor` sets — for a glyph whose
+// colour FOLLOWS STATE across tones (keksdose's sync chip: rose, amber, sky, green as
+// the sync moves), where swapping `tone` would do but the colour is one variable.
+export type IconButtonTone = "default" | "muted" | "danger" | "warning" | "info" | "success" | "custom";
 
-type ColouredTone = "danger" | "warning" | "info";
+type ColouredTone = "danger" | "warning" | "info" | "success" | "custom";
 
 const ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }> = {
   danger: {
@@ -299,13 +319,33 @@ const ICON_BUTTON_TONES: Record<ColouredTone, { quiet: string; toned: string }>
       "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus:ring-[var(--info-border)]",
     toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus:ring-[var(--info-border)]",
   },
+  success: {
+    quiet:
+      "text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus:ring-[var(--success-border)]",
+    toned: "text-[var(--success)] hover:bg-[var(--success-bg)] focus:ring-[var(--success-border)]",
+  },
+  // The hover fill and the ring are MIXED from the one colour, since a custom tone
+  // brings no `-bg` / `-border` pair of its own. The fallback is the body colour, so a
+  // `custom` tone with no colour set is the default look rather than invisible.
+  custom: {
+    quiet:
+      "text-[var(--text-placeholder)] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] hover:text-[var(--icon-button-tone,var(--text-primary))] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
+    toned:
+      "text-[var(--icon-button-tone,var(--text-primary))] hover:bg-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_12%,transparent)] focus:ring-[color-mix(in_srgb,var(--icon-button-tone,var(--text-primary))_40%,transparent)]",
+  },
 };
 
 const ICON_BUTTON_MUTED =
   "text-[var(--text-placeholder)] hover:bg-[var(--bg-surface-2)] hover:text-[var(--text-primary)]";
 
 /** Which tones sit quiet at rest when `quiet` is left out. */
-const QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = { danger: true, warning: false, info: false };
+const QUIET_BY_DEFAULT: Record<ColouredTone, boolean> = {
+  danger: true,
+  warning: false,
+  info: false,
+  success: false,
+  custom: false,
+};
 
 function iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined): string {
   if (tone === "default") return "";
@@ -362,11 +402,31 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
    *  xs = 28px with a 16px icon (an action in a list row), 2xs = 24px with a 14px
    *  icon (an action on a chip or a tab). */
   size?: IconButtonSize;
+  /**
+   * Fill the height of the flex row it stands in, keeping its width — the delete at
+   * the end of keksdose's split line (transaction-fields:162), level with the labelled
+   * fields beside it rather than floating at half their height. {@link Button}'s
+   * `stretch`; no effect outside a flex row. With a `label`, the tooltip's wrapper is
+   * what stretches.
+   */
+  stretch?: boolean;
+  /** `round`: a circle instead of the rounded square — a compact status chip in a top
+   *  bar (keksdose's sync indicator). `overlay` is always round. */
+  shape?: "square" | "round";
+  /**
+   * The colour of `tone="custom"`, as any CSS colour — a token (`var(--warning)`),
+   * ideally. Sets `--icon-button-tone` on the button, so passing a different one per
+   * state re-colours the glyph, its hover fill and its focus ring together. Passing it
+   * implies `tone="custom"`. Or leave it out and set the variable yourself from a class
+   * (`className="[--icon-button-tone:var(--success)]"`).
+   */
+  toneColor?: string;
   /** Glyph colour over the variant. `muted`: placeholder grey, full text colour on
    *  hover. `danger`: the same grey at rest, `--danger` on hover and focus — for a
    *  remove/delete that repeats down a list. `warning`: amber at rest — a flag that
    *  wants attention. `info`: sky at rest — a notice-worthy but harmless action
-   *  (keksdose's reconcile). Default: the variant's own colours. See `quiet` for
+   *  (keksdose's reconcile). `success`: green at rest — a good state worth seeing.
+   *  `custom`: the colour of `toneColor` (see there). Default: the variant's own colours. See `quiet` for
    *  turning a coloured tone's resting look the other way. */
   tone?: IconButtonTone;
   /**
@@ -448,35 +508,73 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
   tooltipSide?: TooltipSide;
   /** Passed to the `label` tooltip's `portal`. Left out, Tooltip decides (see there). */
   tooltipPortal?: boolean;
+  /**
+   * Why the action is not available — {@link Button}'s `disabledReason`, on the icon
+   * button: keksdose's accounts page cannot hide an account with a balance or delete
+   * one with bookings (accounts-page:879/913 — "hide requires zero", "delete blocked"),
+   * nor its budgets page delete the only budget (budgets-page:330), and each wrapped a
+   * natively disabled IconButton in a Tooltip that swaps its label for the reason — a
+   * bubble a keyboard never opens, since `disabled` leaves the tab order, and a reason
+   * a screen reader never hears.
+   *
+   * The same contract as Button's: `aria-disabled` instead of `disabled`, so it stays
+   * focusable and hoverable; clicks (and the Enter/Space they stand for) are swallowed
+   * — `stopPropagation` still applies, so a locked action in a clickable row does not
+   * open the row either; the reason shows in the kit {@link Tooltip} and is attached
+   * through `aria-describedby` as a `hidden` copy. The NAME stays `aria-label` /
+   * `label` — "Delete", described by "The active budget cannot be deleted" — and the
+   * bubble shows the reason in place of the label, since the glyph already says what
+   * the button is and the reason is the news. Shown even with `tooltip={false}`: a
+   * reason nobody can see is not one. Wins over `disabled`, as on Button.
+   */
+  disabledReason?: ReactNode;
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
   {
     variant = "ghost",
     size = "md",
-    tone = "default",
+    tone: toneProp,
     quiet,
     pressed,
     stopPropagation,
+    stretch,
+    shape = "square",
+    toneColor,
     label,
     tooltip = true,
     tooltipSide,
     tooltipPortal,
+    disabledReason,
     className,
+    style,
     onClick,
     onKeyDown,
     ...rest
   },
   ref,
 ) {
+  const tone = toneProp ?? (toneColor !== undefined ? "custom" : "default");
+  const reasonId = useId();
+  const locked = hasContent(disabledReason);
+  const ownDescribedBy = rest["aria-describedby"];
   const button = (
     <button
       ref={ref}
       {...rest}
+      disabled={locked ? undefined : rest.disabled}
+      aria-disabled={locked || rest["aria-disabled"]}
+      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}
       aria-label={rest["aria-label"] ?? label}
       aria-pressed={pressed ?? rest["aria-pressed"]}
+      style={toneColor !== undefined ? { ...style, ["--icon-button-tone" as string]: toneColor } : style}
       onClick={(e) => {
         if (stopPropagation) e.stopPropagation();
+        // `preventDefault` too: a locked submit must not submit its form.
+        if (locked) {
+          e.preventDefault();
+          return;
+        }
         onClick?.(e);
       }}
       onKeyDown={(e) => {
@@ -487,21 +585,43 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       }}
       className={cn(
         ICON_BUTTON_BASE,
-        ICON_BUTTON_SIZES[size],
+        stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
         // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
         variant === "overlay" ? ICON_BUTTON_OVERLAY : buttonVariantClasses[variant],
+        shape === "round" && "rounded-full",
         ICON_BUTTON_DISABLED_REST[variant],
         iconButtonToneClass(tone, quiet),
         pressed && ICON_BUTTON_PRESSED,
+        // The disabled look for the focusable kind of disabled, as on Button.
+        locked && "cursor-not-allowed opacity-50",
         className,
       )}
     />
   );
+  if (locked) {
+    return (
+      // Button's shape: the button and the hidden reason in a FRAGMENT, so Tooltip does
+      // not add its bubble to the description as well.
+      <Tooltip
+        label={disabledReason}
+        side={tooltipSide}
+        portal={tooltipPortal}
+        className={stretch ? "self-stretch" : undefined}
+      >
+        <>
+          {button}
+          <span id={reasonId} hidden>
+            {disabledReason}
+          </span>
+        </>
+      </Tooltip>
+    );
+  }
   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}>
+    <Tooltip label={label} side={tooltipSide} portal={tooltipPortal} className={stretch ? "self-stretch" : undefined}>
       <>{button}</>
     </Tooltip>
   );
@@ -1590,6 +1710,16 @@ export interface EmptyStateProps extends Omit<ComponentPropsWithoutRef<"div">, "
    * verdict.
    */
   tone?: "danger" | "success";
+  /**
+   * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty
+   * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where
+   * the default's 14px centred line with `py-4` read as a section of its own.
+   * keksdose's holdings panel (holdings-panel:563), asset-loan panel
+   * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote
+   * `className="justify-start py-1"` over it and still got body-size text. Default `md`,
+   * the look it had. Ignored by the box.
+   */
+  size?: "sm" | "md";
 }
 
 const EMPTY_STATE_TONE: Record<"danger" | "success", string> = {
@@ -1605,6 +1735,7 @@ export function EmptyState({
   headingAs,
   variant = "box",
   tone,
+  size = "md",
   className,
   ...rest
 }: EmptyStateProps) {
@@ -1612,22 +1743,29 @@ export function EmptyState({
   const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;
   const hasHint = hint != null && hint !== false && hint !== "";
   if (variant === "inline") {
+    const sm = size === "sm";
     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)]",
+          "flex flex-wrap items-center text-[var(--text-muted)]",
+          sm
+            ? "justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs"
+            : "justify-center gap-x-2 gap-y-1 py-4 text-center text-sm",
           className,
         )}
       >
         {icon != null && (
-          <span aria-hidden className={cn("flex text-[var(--text-placeholder)] [&_svg]:size-4", toneClass)}>
+          <span
+            aria-hidden
+            className={cn("flex text-[var(--text-placeholder)]", sm ? "[&_svg]:size-3.5" : "[&_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>
+        <Title className={cn(sm ? "text-xs" : "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>

package/src/components/user-avatar.tsx

@@ -1,5 +1,7 @@
-import type { ComponentPropsWithoutRef } from "react";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
 import { cn } from "../lib/cn";
+import { StatusDot } from "./status-dot";
+import type { StatusDotSize, StatusDotTone } from "./status-dot";
 
 /** Initials from a display name (first + last) or, failing that, an email —
  *  e.g. "Marcel Eifert" → "ME", "marcel@x.com" → "MA". App-agnostic.
@@ -25,19 +27,71 @@ const AVATAR_SIZES = {
   lg: "size-12 text-base",
 } as const;
 
+const CHIP =
+  "inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--bg-inverse)] font-semibold text-[var(--text-inverse)]";
+
+/** The dot grows with the avatar: 8px on `sm`, 10px on `md` (keksdose's), 12px on `lg`. */
+const BADGE_SIZES: Record<keyof typeof AVATAR_SIZES, StatusDotSize> = { sm: "sm", md: "md", lg: "lg" };
+
+/** A status dot in the avatar's top corner — an unread count, presence. */
+export interface UserAvatarBadge {
+  /** What the dot MEANS, for a screen reader ("3 unread"). Required: a coloured circle
+   *  says nothing to someone who cannot see it. */
+  label: ReactNode;
+  /** Default `danger`, the unread dot both apps draw by hand. */
+  tone?: StatusDotTone;
+}
+
 /** A `<span>`'s props, minus `children`: the content is the initials this computes
  *  from `name`/`email`, so there is nothing for a caller to put inside. */
 export interface UserAvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children"> {
   name?: string | null;
   email?: string | null;
   size?: keyof typeof AVATAR_SIZES;
+  /**
+   * A status dot in the top-end corner (the top-right in LTR, top-left in RTL), ringed
+   * in the surface colour so it reads as its own mark (keksdose account-menu ~385,
+   * top-bar :152). Its `label` is read as text where the dot sits — inside a button
+   * named by its content it joins that name. In `TopBarActionMenu`'s `trigger` the
+   * button is named by the menu's `ariaLabel` followed by this label: "Account menu
+   * 3 unread". The initials stay hidden either way, so the person's name is NOT part
+   * of it — put it in `ariaLabel` ("Marcel Eifert, account menu") if it should be.
+   */
+  badge?: UserAvatarBadge | null;
 }
 
 /**
  * A round initials avatar — the common user chip shared across apps (feedback
  * #333). Purely presentational; wrap it in a button for the account menu trigger.
  */
-export function UserAvatar({ name, email, size = "md", className, ...rest }: UserAvatarProps) {
+export function UserAvatar({ name, email, size = "md", badge, className, ...rest }: UserAvatarProps) {
+  if (badge) {
+    // A wrapper, because the chip itself is `aria-hidden` and the badge label must not
+    // be. `className` stays on the chip (a size override still sizes the circle); the
+    // other attributes go on the wrapper, which is what a caller addresses. `relative`
+    // also contains the sr-only text.
+    return (
+      <span {...rest} className="relative inline-flex shrink-0">
+        <span
+          aria-hidden
+          className={cn(
+            CHIP,
+            AVATAR_SIZES[size],
+            className,
+          )}
+        >
+          {avatarInitials(name, email)}
+        </span>
+        <StatusDot
+          ring
+          tone={badge.tone ?? "danger"}
+          size={BADGE_SIZES[size]}
+          className="absolute -end-0.5 -top-0.5"
+        />
+        <span className="sr-only">{badge.label}</span>
+      </span>
+    );
+  }
   return (
     <span
       // `aria-hidden` sits BEFORE the spread, unlike the structural attributes on the
@@ -50,7 +104,7 @@ export function UserAvatar({ name, email, size = "md", className, ...rest }: Use
       aria-hidden
       {...rest}
       className={cn(
-        "inline-flex shrink-0 items-center justify-center rounded-full bg-[var(--bg-inverse)] font-semibold text-[var(--text-inverse)]",
+        CHIP,
         AVATAR_SIZES[size],
         className,
       )}

package/src/i18n/defaults.ts

@@ -1,5 +1,6 @@
 import { DEFAULT_DATA_TABLE_LABELS } from "../components/data-table-labels";
 import { DEFAULT_MINI_CALENDAR_LABELS } from "../components/mini-calendar";
+import { DEFAULT_CALENDAR_HEATMAP_LABELS } from "../components/calendar-heatmap";
 import { DEFAULT_MONTH_PICKER_LABELS } from "../components/month-picker";
 import { DEFAULT_PAGE_CONTENTS_LABELS } from "../components/page-contents";
 import { DEFAULT_POPOVER_LABELS } from "../components/popover";
@@ -56,6 +57,7 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   common: DEFAULT_COMMON_LABELS,
   dataTable: DEFAULT_DATA_TABLE_LABELS,
   miniCalendar: DEFAULT_MINI_CALENDAR_LABELS,
+  calendarHeatmap: DEFAULT_CALENDAR_HEATMAP_LABELS,
   datePicker: DEFAULT_DATE_PICKER_LABELS,
   monthPicker: DEFAULT_MONTH_PICKER_LABELS,
   popover: DEFAULT_POPOVER_LABELS,

package/src/i18n/kit-labels.tsx

@@ -2,6 +2,7 @@ import { createContext, useContext, useMemo } from "react";
 import type { ReactNode } from "react";
 import type { DataTableLabels } from "../components/data-table-labels";
 import type { MiniCalendarLabels, WeekDay } from "../components/mini-calendar";
+import type { CalendarHeatmapLabels } from "../components/calendar-heatmap";
 import type { PopoverLabels } from "../components/popover";
 import type { ChipInputLabels } from "../components/chip";
 import type { FieldSyncLabels } from "../components/field-sync";
@@ -197,6 +198,7 @@ export interface UiKitLabels {
   common: CommonLabels;
   dataTable: DataTableLabels;
   miniCalendar: MiniCalendarLabels;
+  calendarHeatmap: CalendarHeatmapLabels;
   datePicker: DatePickerLabels;
   monthPicker: MonthPickerLabels;
   popover: PopoverLabels;

package/src/i18n/locales/de.ts

@@ -118,6 +118,14 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       rangeSelected: (from, to) =>
         `Zeitraum ${from} bis ${to} gewählt. Wählen Sie ein Startdatum, um neu zu beginnen.`,
     },
+    calendarHeatmap: {
+      grid: "Tageswerte",
+      day: (date, value) => `${date}: ${value}`,
+      less: "Weniger",
+      more: "Mehr",
+      truncated: (count) =>
+        `Die neuesten Tage werden angezeigt; ${n(count)} ${count === 1 ? "früherer Tag wird" : "frühere Tage werden"} nicht angezeigt.`,
+    },
     datePicker: {
       apply: "Übernehmen",
       cancel: "Abbrechen",
@@ -392,6 +400,7 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
     },
     floatingPanel: {
       close: "Schließen",
+      badge: (count) => `${n(count)} neu`,
     },
     copyButton: {
       copy: "Kopieren",

package/src/i18n/locales/es.ts

@@ -125,6 +125,14 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       panel: "Elegir un mes",
       month: (monthYear) => monthYear,
     },
+    calendarHeatmap: {
+      grid: "Valores diarios",
+      day: (date, value) => `${date}: ${value}`,
+      less: "Menos",
+      more: "Más",
+      truncated: (count) =>
+        `Se muestran los días más recientes; ${count === 1 ? "no se muestra 1 día anterior" : `no se muestran ${n(count)} días anteriores`}.`,
+    },
     datePicker: {
       apply: "Aplicar",
       cancel: "Cancelar",
@@ -385,6 +393,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
     },
     floatingPanel: {
       close: "Cerrar",
+      badge: (count) => `${n(count)} ${plural(count, "nuevo", "nuevos")}`,
     },
     copyButton: {
       copy: "Copiar",

package/src/i18n/locales/fr.ts

@@ -122,6 +122,14 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       rangeSelected: (from, to) =>
         `Période du ${from} au ${to} sélectionnée. Choisissez une date de début pour recommencer.`,
     },
+    calendarHeatmap: {
+      grid: "Valeurs quotidiennes",
+      day: (date, value) => `${date} : ${value}`,
+      less: "Moins",
+      more: "Plus",
+      truncated: (count) =>
+        `Affichage des jours les plus récents ; ${n(count)} ${count === 1 ? "jour antérieur n’est pas affiché" : "jours antérieurs ne sont pas affichés"}.`,
+    },
     datePicker: {
       apply: "Appliquer",
       cancel: "Annuler",
@@ -398,6 +406,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
     },
     floatingPanel: {
       close: "Fermer",
+      badge: (count) => `${n(count)} ${plural(count, "nouveau", "nouveaux")}`,
     },
     copyButton: {
       copy: "Copier",

package/src/i18n/locales/hu.ts

@@ -121,6 +121,14 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       panel: "Hónap kiválasztása",
       month: (monthYear) => monthYear,
     },
+    calendarHeatmap: {
+      grid: "Napi értékek",
+      day: (date, value) => `${date}: ${value}`,
+      less: "Kevesebb",
+      more: "Több",
+      truncated: (count) =>
+        `A legutóbbi napok láthatók; ${n(count)} korábbi nap nem látható.`,
+    },
     datePicker: {
       apply: "Alkalmaz",
       cancel: "Mégse",
@@ -386,6 +394,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
     },
     floatingPanel: {
       close: "Bezárás",
+      badge: (count) => `${n(count)} új`,
     },
     copyButton: {
       copy: "Másolás",

package/src/i18n/locales/it.ts

@@ -125,6 +125,14 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       panel: "Scegli un mese",
       month: (monthYear) => monthYear,
     },
+    calendarHeatmap: {
+      grid: "Valori giornalieri",
+      day: (date, value) => `${date}: ${value}`,
+      less: "Meno",
+      more: "Più",
+      truncated: (count) =>
+        `Vengono mostrati i giorni più recenti; ${count === 1 ? "1 giorno precedente non è mostrato" : `${n(count)} giorni precedenti non sono mostrati`}.`,
+    },
     datePicker: {
       apply: "Applica",
       cancel: "Annulla",
@@ -387,6 +395,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
     },
     floatingPanel: {
       close: "Chiudi",
+      badge: (count) => `${n(count)} ${plural(count, "nuovo", "nuovi")}`,
     },
     copyButton: {
       copy: "Copia",

package/src/i18n/locales/zh.ts

@@ -120,6 +120,14 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       panel: "选择月份",
       month: (monthYear) => monthYear,
     },
+    calendarHeatmap: {
+      grid: "每日数值",
+      day: (date, value) => `${date}：${value}`,
+      less: "较少",
+      more: "较多",
+      truncated: (count) =>
+        `仅显示最近的日期；另有 ${n(count)} 天未显示。`,
+    },
     datePicker: {
       apply: "应用",
       cancel: "取消",
@@ -375,6 +383,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     },
     floatingPanel: {
       close: "关闭",
+      badge: (count) => `${n(count)} 条新内容`,
     },
     copyButton: {
       copy: "复制",

package/src/index.ts

@@ -56,6 +56,8 @@ export * from "./theme/palette-store";
 
 // ── components ───────────────────────────────────────────────────────────────
 export * from "./components/ui";
+// The label-ABOVE field group (label, hint, error, required), inside wizards or out.
+export * from "./components/field";
 export * from "./components/search-field";
 export * from "./components/dropdown";
 export * from "./components/popover";
@@ -126,6 +128,8 @@ export * from "./components/series-chart-labels";
 export * from "./components/account-settings";
 export * from "./components/alert-banner";
 export * from "./components/toggle-group";
+// A wrapping set of links/buttons marked `aria-current` — Tabs-like looks, not tabs.
+export * from "./components/nav-pills";
 // A pill carrying one VALUE — inert, a link, or a toggle, depending on which prop it is
 // given — and the list field built from it. Distinct from Button on purpose: a row of
 // buttons reads as "choose an action", a row of chips as "here are the things".
@@ -137,6 +141,7 @@ export * from "./components/full-bleed-dialog";
 export * from "./components/grouped-picker";
 export * from "./components/file-dropzone";
 export * from "./components/mini-calendar";
+export * from "./components/calendar-heatmap";
 export * from "./components/date-picker";
 export * from "./components/tree-view";
 export * from "./components/chart";

package/src/lib/clipping.ts

@@ -1,14 +1,32 @@
-/** Internal (not exported from the package): the Tooltip's auto-portal check. */
+/** Internal (not exported from the package): the Tooltip's auto-portal check. The
+ *  attribute name itself IS exported, as `CLIPS_ATTRIBUTE` from the tooltip module. */
+
+/**
+ * The explicit "this element clips or scrolls" marker. A container carrying it counts
+ * as clipping whatever its computed `overflow` says.
+ *
+ * Why a marker as well as the computed style: the kit's containers get their
+ * `overflow` from Tailwind classes, and jsdom computes no stylesheet — so under test
+ * every scroller reads `overflow: visible`, the Tooltip stays in place, and its always-
+ * mounted bubble shows up in the cell's text (keksdose 0.10: "CheckingChecking"). The
+ * browser and the test then disagreed about where the bubble lives, and apps pinned
+ * `portal` on every tooltip in a table to make them agree. The kit's own scrollers
+ * (DataTable's body, Table's wrapper) carry the marker, so the answer is the same in
+ * both; an app marks its own with `{ [CLIPS_ATTRIBUTE]: "" }` or a literal `data-clips`.
+ */
+export const CLIPS_ATTRIBUTE = "data-clips";
 
 /** Whether anything between `el` and `<body>` clips or scrolls its content — the
  *  containers an absolutely positioned bubble would be cut off by, or would widen.
- *  `<body>` and `<html>` are not counted: their `overflow` belongs to the viewport (a
- *  dialog's scroll lock sets it), and the viewport clips a portalled bubble just the
- *  same. */
+ *  Either the computed `overflow` says so or the element carries
+ *  {@link CLIPS_ATTRIBUTE}. `<body>` and `<html>` are not counted: their `overflow`
+ *  belongs to the viewport (a dialog's scroll lock sets it), and the viewport clips a
+ *  portalled bubble just the same. */
 export function hasClippingAncestor(el: Element | null): boolean {
   if (typeof window === "undefined" || !el) return false;
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (node === document.body || node === document.documentElement) return false;
+    if (node.hasAttribute(CLIPS_ATTRIBUTE)) return true;
     const style = window.getComputedStyle(node);
     if (style.overflowX !== "visible" || style.overflowY !== "visible") return true;
   }