@eifi1/ui-kit 0.33.1 → 0.35.0

package/src/components/choice-card.tsx

@@ -1,4 +1,4 @@
-import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useRef } from "react";
 import type {
   ButtonHTMLAttributes,
   ChangeEvent,
@@ -11,7 +11,8 @@ import type {
 } from "react";
 import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/cn";
-import { assignRef, hasMessage, mergeDescribedBy } from "./choice-parts";
+import { hasContent } from "../lib/presence";
+import { assignRef, FIELD_ERROR_CLASS, mergeDescribedBy, useFieldError } from "./field-parts";
 import { useKitLink } from "../i18n/kit-labels";
 import { pickLinkRenderer } from "./text-link";
 
@@ -67,6 +68,9 @@ export interface ChoiceCardProps extends Omit<InputHTMLAttributes<HTMLInputEleme
    * {@link ChoiceCardGroup} the star goes on the legend instead, once.
    */
   required?: boolean;
+  /** The `<input>`. A React 19 ref prop since 0.34 (MOD-4, refactor audit 2026-10); it
+   *  was `forwardRef`. */
+  ref?: Ref<HTMLInputElement>;
 }
 
 /** Set by {@link ChoiceCardGroup}: its legend carries the one required mark, so the
@@ -78,7 +82,7 @@ const InGroupContext = createContext(false);
  *  announced from the control and a star read out in the name is only noise. */
 function RequiredMark() {
   return (
-    <span aria-hidden className="ms-0.5 text-[var(--danger)]">
+    <span aria-hidden className="ms-0.5 text-danger">
       *
     </span>
   );
@@ -87,63 +91,61 @@ function RequiredMark() {
 // The card. `has-[:checked]` and `has-[:focus-visible]` read the INPUT's state, so an
 // uncontrolled card (`defaultChecked`, a plain form) looks right with no React state.
 const CARD =
-  "flex cursor-pointer items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 shadow-sm transition-colors " +
-  "hover:border-[var(--border-strong)] hover:bg-[var(--bg-hover)] " +
-  "has-[:checked]:border-[var(--brand)] has-[:checked]:bg-[var(--brand-bg)] has-[:checked]:ring-1 has-[:checked]:ring-[var(--brand)] " +
+  "flex cursor-pointer items-start gap-3 rounded-lg border border-subtle bg-surface p-3 shadow-sm transition-colors " +
+  "hover:border-strong hover:bg-hover " +
+  "has-[:checked]:border-brand has-[:checked]:bg-brand-soft has-[:checked]:ring-1 has-[:checked]:ring-brand " +
   // The focus mark is the CARD's, not the 16px box's: the card is what was clicked and
   // what the eye is on. An OUTLINE rather than a ring, because the checked state already
   // spends the ring — two `ring-*` widths on one element are decided by stylesheet
   // order, and the loser would be the focus mark. Offset, so the two never merge. Its
   // width is the kit's focus frame (0.32, §5: `--focus-ring-width`, 3 px under More
   // contrast) — `FOCUS_RING` itself is a ring, which this mark cannot be.
-  "has-[:focus-visible]:outline-[length:var(--focus-ring-width)] has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--brand)] " +
+  "has-[:focus-visible]:outline-focus has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-brand " +
   // Read from the input too, so a card disabled by its `<fieldset>` fades as well.
   "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-60";
 
 // No hover offer on a card that cannot be changed.
-const CARD_DISABLED = "hover:border-[var(--border)] hover:bg-[var(--bg-surface)]";
+const CARD_DISABLED = "hover:border-subtle hover:bg-surface";
 
 const CARD_INVALID =
-  "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] has-[:checked]:border-[var(--danger-border-strong)] has-[:checked]:ring-[var(--danger-border-strong)]";
+  "border-danger-strong ring-1 ring-danger-strong has-[:checked]:border-danger-strong has-[:checked]:ring-danger-strong";
 
 const BOX =
-  "peer size-4 shrink-0 appearance-none border border-[var(--border-strong)] bg-[var(--bg-surface)] transition-colors " +
-  "checked:border-[var(--brand)] focus:outline-none disabled:cursor-not-allowed";
-const CHECKBOX = "rounded checked:bg-[var(--brand)]";
+  "peer size-4 shrink-0 appearance-none border border-strong bg-surface transition-colors " +
+  "checked:border-brand focus:outline-none disabled:cursor-not-allowed";
+const CHECKBOX = "rounded checked:bg-brand";
 // A radio's dot is its BORDER: a 0.3125rem brand border (5px at Normal) round a
 // surface-coloured 0.375rem centre. No glyph to lay over it, and in rem since 0.32
 // (§3.2) it scales with the box — a 5px border on a 24px box at 150 % was a ring, not a
 // dot.
 const RADIO = "rounded-full checked:border-[0.3125rem]";
 
-export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function ChoiceCard(
-  {
-    type = "checkbox",
-    title,
-    description,
-    icon: Icon,
-    indeterminate = false,
-    invalid,
-    error,
-    onCheckedChange,
-    onChange,
-    className,
-    inputClassName,
-    id,
-    disabled,
-    required,
-    ...rest
-  },
+export function ChoiceCard({
   ref,
-) {
+  type = "checkbox",
+  title,
+  description,
+  icon: Icon,
+  indeterminate = false,
+  invalid,
+  error,
+  onCheckedChange,
+  onChange,
+  className,
+  inputClassName,
+  id,
+  disabled,
+  required,
+  ...rest
+}: ChoiceCardProps) {
   const inGroup = useContext(InGroupContext);
   const generated = useId();
   const inputId = id ?? generated;
   const titleId = `${inputId}-title`;
   const descriptionId = `${inputId}-description`;
   const errorId = `${inputId}-error`;
-  const showDescription = hasMessage(description);
-  const showError = hasMessage(error);
+  const showDescription = hasContent(description);
+  const showError = hasContent(error);
   const isInvalid = Boolean(invalid) || showError;
   const mixed = type === "checkbox" && indeterminate;
 
@@ -188,7 +190,7 @@ export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function
           className={cn(
             BOX,
             type === "radio" ? RADIO : CHECKBOX,
-            mixed && "border-[var(--brand)] bg-[var(--brand)]",
+            mixed && "border-brand bg-brand",
             inputClassName,
           )}
         />
@@ -197,41 +199,40 @@ export const ChoiceCard = forwardRef<HTMLInputElement, ChoiceCardProps>(function
             <Minus
               aria-hidden
               strokeWidth={3}
-              className="pointer-events-none absolute inset-0 m-auto size-3 text-[var(--brand-contrast)]"
+              className="pointer-events-none absolute inset-0 m-auto size-3 text-brand-contrast"
             />
           ) : (
             <Check
               aria-hidden
               strokeWidth={3}
-              className="pointer-events-none invisible absolute inset-0 m-auto size-3 text-[var(--brand-contrast)] peer-checked:visible"
+              className="pointer-events-none invisible absolute inset-0 m-auto size-3 text-brand-contrast peer-checked:visible"
             />
           ))}
       </span>
-      {Icon && <Icon aria-hidden className="mt-0.5 size-4 shrink-0 text-[var(--text-secondary)]" />}
+      {Icon && <Icon aria-hidden className="mt-0.5 size-4 shrink-0 text-secondary" />}
       <span className="min-w-0 flex-1">
         <span
           id={titleId}
           // `select-none`: a double-click to toggle twice would otherwise select the words.
-          className="block select-none text-sm font-medium leading-5 text-[var(--text-primary)]"
+          className="block select-none text-sm font-medium leading-5 text-primary"
         >
           {title}
           {required && !inGroup && <RequiredMark />}
         </span>
         {showDescription && (
-          <span id={descriptionId} className="mt-0.5 block text-xs text-[var(--text-muted)]">
+          <span id={descriptionId} className="mt-0.5 block text-xs text-muted">
             {description}
           </span>
         )}
         {showError && (
-          <span id={errorId} className="mt-1 block text-caption leading-tight text-[var(--danger)]">
+          <span id={errorId} className={cn("block", FIELD_ERROR_CLASS)}>
             {error}
           </span>
         )}
       </span>
     </label>
   );
-});
-ChoiceCard.displayName = "ChoiceCard";
+}
 
 /* ── ActionCard ──────────────────────────────────────────────────────────── */
 
@@ -239,11 +240,11 @@ ChoiceCard.displayName = "ChoiceCard";
 export type ActionCardMetaTone = "muted" | "warning" | "danger" | "info" | "success";
 
 const META_TONE: Record<ActionCardMetaTone, string> = {
-  muted: "text-[var(--text-muted)]",
-  warning: "text-[var(--warning)]",
-  danger: "text-[var(--danger)]",
-  info: "text-[var(--info)]",
-  success: "text-[var(--success)]",
+  muted: "text-muted",
+  warning: "text-warning",
+  danger: "text-danger",
+  info: "text-info",
+  success: "text-success",
 };
 
 /** The colour of {@link ActionCardProps.icon}. `default` is the secondary text colour
@@ -253,7 +254,7 @@ const META_TONE: Record<ActionCardMetaTone, string> = {
 export type ActionCardIconTone = "default" | "muted" | "brand" | "warning" | "danger" | "info" | "success";
 
 const ICON_TONE: Record<ActionCardIconTone, string> = {
-  default: "text-[var(--text-secondary)]",
+  default: "text-secondary",
   ...META_TONE,
   brand: "text-brand-muted",
 };
@@ -303,6 +304,9 @@ export interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
   /** Your router's link for an in-app `href`. Default: the `<UiKitProvider
    *  linkComponent>`, then a plain `<a>`. Ignored without `href`. */
   renderLink?: (props: ActionCardLinkProps) => ReactElement;
+  /** The `<button>` — or, with `href`, the `<a>`. A React 19 ref prop since 0.34 (MOD-4,
+   *  refactor audit 2026-10); it was `forwardRef`. */
+  ref?: Ref<HTMLButtonElement>;
 }
 
 /**
@@ -318,39 +322,37 @@ export interface ActionCardProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
  * Named by the title alone and described by the rest, so a screen reader hears
  * "Keep the key yourself, button" and then the explanation, not one long name.
  */
-export const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(function ActionCard(
-  {
-    title,
-    description,
-    meta,
-    metaTone = "muted",
-    icon: Icon,
-    iconTone = "default",
-    iconClassName,
-    href,
-    renderLink,
-    className,
-    id,
-    type = "button",
-    ...rest
-  },
+export function ActionCard({
   ref,
-) {
+  title,
+  description,
+  meta,
+  metaTone = "muted",
+  icon: Icon,
+  iconTone = "default",
+  iconClassName,
+  href,
+  renderLink,
+  className,
+  id,
+  type = "button",
+  ...rest
+}: ActionCardProps) {
   const kitLink = useKitLink();
   const generated = useId();
   const baseId = id ?? generated;
   const titleId = `${baseId}-title`;
   const descriptionId = `${baseId}-description`;
   const metaId = `${baseId}-meta`;
-  const showDescription = hasMessage(description);
-  const showMeta = hasMessage(meta);
+  const showDescription = hasContent(description);
+  const showMeta = hasContent(meta);
   const look = cn(
-    "flex w-full items-start gap-3 rounded-lg border border-[var(--border)] bg-[var(--bg-surface)] p-3 text-start shadow-sm transition-colors",
-    "hover:border-[var(--brand)] hover:bg-[var(--bg-hover)]",
+    "flex w-full items-start gap-3 rounded-lg border border-subtle bg-surface p-3 text-start shadow-sm transition-colors",
+    "hover:border-brand hover:bg-hover",
     // The outline, as on ChoiceCard: the card is what the eye is on — the focus frame's
     // width (§5).
-    "focus:outline-none focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-2 focus-visible:outline-[var(--brand)]",
-    "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-[var(--border)] disabled:hover:bg-[var(--bg-surface)]",
+    "focus:outline-none focus-visible:outline-focus focus-visible:outline-offset-2 focus-visible:outline-brand",
+    "disabled:cursor-not-allowed disabled:opacity-60 disabled:hover:border-subtle disabled:hover:bg-surface",
     className,
   );
   const labelledBy = rest["aria-labelledby"] ?? titleId;
@@ -363,11 +365,11 @@ export const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(functio
     <>
       {Icon && <Icon aria-hidden className={cn("mt-0.5 size-5 shrink-0", ICON_TONE[iconTone], iconClassName)} />}
       <span className="min-w-0 flex-1 space-y-1">
-        <span id={titleId} className="block text-sm font-medium leading-5 text-[var(--text-primary)]">
+        <span id={titleId} className="block text-sm font-medium leading-5 text-primary">
           {title}
         </span>
         {showDescription && (
-          <span id={descriptionId} className="block text-sm text-[var(--text-secondary)]">
+          <span id={descriptionId} className="block text-sm text-secondary">
             {description}
           </span>
         )}
@@ -421,8 +423,7 @@ export const ActionCard = forwardRef<HTMLButtonElement, ActionCardProps>(functio
       {body}
     </button>
   );
-});
-ActionCard.displayName = "ActionCard";
+}
 
 /** Calls the link renderer as a component, so a router link's hooks are its own. */
 function RenderedActionLink({
@@ -501,8 +502,9 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
   const { options, legend, name, className, cardClassName, disabled, error, required } = props;
   const generated = useId();
   const groupName = name ?? generated;
-  const errorId = `${generated}-error`;
-  const showError = hasMessage(error);
+  // Every field's error wiring (DUP-8): the message under the cards, the group's
+  // description, and every card painted.
+  const field = useFieldError(error, false, undefined);
 
   const isChecked = (v: T) => (props.multiple ? props.value.includes(v) : props.value === v);
   const toggle = (v: T, on: boolean) => {
@@ -520,12 +522,12 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
     <InGroupContext.Provider value={true}>
       <fieldset
         aria-label={props["aria-label"]}
-        aria-describedby={showError ? errorId : undefined}
+        aria-describedby={field.describedBy}
         disabled={disabled}
         className="min-w-0"
       >
         {legend !== undefined && (
-          <legend className="mb-2 text-sm font-medium text-[var(--text-primary)]">
+          <legend className="mb-2 text-sm font-medium text-primary">
             {legend}
             {required && <RequiredMark />}
           </legend>
@@ -541,7 +543,7 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
               description={o.description}
               icon={o.icon}
               disabled={o.disabled}
-              invalid={showError}
+              invalid={field.isInvalid}
               required={required && (!props.multiple || props.value.length === 0) ? true : undefined}
               checked={isChecked(o.value)}
               onCheckedChange={(on) => toggle(o.value, on)}
@@ -549,11 +551,7 @@ export function ChoiceCardGroup<T extends string>(props: ChoiceCardGroupProps<T>
             />
           ))}
         </div>
-        {showError && (
-          <p id={errorId} className="mt-1 text-caption leading-tight text-[var(--danger)]">
-            {error}
-          </p>
-        )}
+        {field.errorEl}
       </fieldset>
     </InGroupContext.Provider>
   );

package/src/components/column-mapper-labels.ts

@@ -0,0 +1,45 @@
+// The English words of ./column-mapper, in a module with no component code: the English
+// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
+// chunk like the other languages (0.34, KS U8). ./column-mapper re-exports them.
+
+import type { ColumnMapperLabels } from "./column-mapper";
+
+/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a
+ *  provider whose labels predate the key. */
+export const markedShort = (role: string) => `${role} *`;
+
+export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
+  paste: "Paste a table",
+  pasteHint:
+    "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
+  chooseFile: "Choose a file",
+  readError: (name) => `“${name}” could not be read`,
+  headerRow: "The first line names the columns",
+  summary: (columns, rows) =>
+    `${columns} ${columns === 1 ? "column" : "columns"}, ${rows} ${rows === 1 ? "row" : "rows"}`,
+  separatorSemicolon: "separated by semicolons",
+  separatorComma: "separated by commas",
+  separatorTab: "separated by tabs",
+  separatorSpace: "separated by spaces",
+  decimalComma: "decimal comma (1,5)",
+  decimalPoint: "decimal point (1.5)",
+  unreadCount: (count) =>
+    count === 1
+      ? "1 line could not be read"
+      : `${count} lines could not be read`,
+  unreadLine: (line) => `Line ${line} could not be read`,
+  unreadMore: (count) => `…and ${count} more`,
+  noRows: "No line of this text reads as a row of the table.",
+  table: "Columns and their roles",
+  columnN: (n) => `Column ${n}`,
+  roleOf: (column) => `What does column “${column}” hold?`,
+  ignore: "Ignore",
+  requiredRole: (role) => `${role} (required)`,
+  requiredRoleShort: markedShort,
+  previewOf: (shown, total) =>
+    shown === 1
+      ? `The first of ${total} rows`
+      : `The first ${shown} of ${total} rows`,
+  oneOf: (roles) => `either ${roles}`,
+  missing: (roles) => `Still needed: ${roles}.`,
+};

package/src/components/column-mapper.tsx

@@ -2,7 +2,7 @@ import { useEffect, useEffectEvent, useState } from "react";
 import type { ChangeEvent, DragEvent, HTMLAttributes, ReactNode } from "react";
 import { Upload } from "lucide-react";
 
-import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
   assignColumnRole,
@@ -31,7 +31,9 @@ import {
   TableHeaderCell,
   TableRow,
 } from "./table";
-import { Select, Textarea } from "./ui";
+import { Select } from "./select";
+import { Textarea } from "./textarea";
+import { DEFAULT_COLUMN_MAPPER_LABELS, markedShort } from "./column-mapper-labels";
 
 /**
  * A table pasted, dropped or chosen as a file, and which of its columns plays which
@@ -119,45 +121,8 @@ export interface ColumnMapperLabels {
   missing: (roles: string) => string;
 }
 
-/** {@link ColumnMapperLabels.requiredRoleShort}'s English — and its fallback for a
- *  provider whose labels predate the key. */
-const markedShort = (role: string) => `${role} *`;
-
-export const DEFAULT_COLUMN_MAPPER_LABELS: ColumnMapperLabels = {
-  paste: "Paste a table",
-  pasteHint:
-    "Copy the rows out of a spreadsheet and paste them here, or drop a CSV or text file.",
-  chooseFile: "Choose a file",
-  readError: (name) => `“${name}” could not be read`,
-  headerRow: "The first line names the columns",
-  summary: (columns, rows) =>
-    `${columns} ${columns === 1 ? "column" : "columns"}, ${rows} ${rows === 1 ? "row" : "rows"}`,
-  separatorSemicolon: "separated by semicolons",
-  separatorComma: "separated by commas",
-  separatorTab: "separated by tabs",
-  separatorSpace: "separated by spaces",
-  decimalComma: "decimal comma (1,5)",
-  decimalPoint: "decimal point (1.5)",
-  unreadCount: (count) =>
-    count === 1
-      ? "1 line could not be read"
-      : `${count} lines could not be read`,
-  unreadLine: (line) => `Line ${line} could not be read`,
-  unreadMore: (count) => `…and ${count} more`,
-  noRows: "No line of this text reads as a row of the table.",
-  table: "Columns and their roles",
-  columnN: (n) => `Column ${n}`,
-  roleOf: (column) => `What does column “${column}” hold?`,
-  ignore: "Ignore",
-  requiredRole: (role) => `${role} (required)`,
-  requiredRoleShort: markedShort,
-  previewOf: (shown, total) =>
-    shown === 1
-      ? `The first of ${total} rows`
-      : `The first ${shown} of ${total} rows`,
-  oneOf: (roles) => `either ${roles}`,
-  missing: (roles) => `Still needed: ${roles}.`,
-};
+// Defined in ./column-mapper-labels, which holds no component code (0.34, KS U8).
+export { DEFAULT_COLUMN_MAPPER_LABELS };
 
 const SEPARATOR_LABEL: Record<
   TableSeparator,
@@ -259,7 +224,7 @@ export interface ColumnRoleTableProps<
    * to protect; a `className` is added after its classes.
    */
   rowProps?: (row: readonly string[], index: number) => ColumnRoleTableRowProps | undefined;
-  labels?: Partial<ColumnMapperLabels>;
+  labels?: LabelOverride<ColumnMapperLabels>;
   className?: string;
 }
 
@@ -367,7 +332,7 @@ export function ColumnRoleTable<
                   scope="col"
                   className="min-w-36 py-2 align-top"
                 >
-                  <span className="block max-w-56 truncate pb-1 text-caption font-normal text-[var(--text-muted)]">
+                  <span className="block max-w-56 truncate pb-1 text-caption font-normal text-muted">
                     {name}
                   </span>
                   <Select
@@ -432,7 +397,7 @@ export function ColumnRoleTable<
                     // Dimmed, not hidden: its values are what tell you whether ignoring
                     // it was right.
                     roleOfColumn(roles, mapping, column) === null &&
-                      "text-[var(--text-muted)]",
+                      "text-muted",
                   )}
                 >
                   <span className="block max-w-56 truncate">
@@ -445,7 +410,7 @@ export function ColumnRoleTable<
         </TableBody>
       </Table>
       {total > shown.length && (
-        <p className="text-xs text-[var(--text-muted)]">
+        <p className="text-xs text-muted">
           {labels.previewOf(shown.length, total)}
         </p>
       )}
@@ -497,7 +462,7 @@ export interface ColumnMapperProps<R extends string> {
   /** One preview row's `<tr>` attributes — {@link ColumnRoleTableProps.rowProps}
    *  (0.24). `row` is the row as read, `index` its place in the preview. */
   rowProps?: (row: readonly string[], index: number) => ColumnRoleTableRowProps | undefined;
-  labels?: Partial<ColumnMapperLabels>;
+  labels?: LabelOverride<ColumnMapperLabels>;
   className?: string;
 }
 
@@ -649,7 +614,7 @@ export function ColumnMapper<R extends string>({
         disabled={disabled}
         className={cn(
           "font-mono text-xs",
-          dragOver && "rounded-md ring-2 ring-[var(--brand)]",
+          dragOver && "rounded-md ring-2 ring-brand",
         )}
         data-drag-over={dragOver || undefined}
         onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
@@ -716,7 +681,7 @@ export function ColumnMapper<R extends string>({
       {table.width > 0 && (
         <>
           <p
-            className="text-xs text-[var(--text-secondary)]"
+            className="text-xs text-secondary"
             data-slot="column-mapper-summary"
           >
             {[
@@ -752,16 +717,16 @@ export function ColumnMapper<R extends string>({
               <ul className="space-y-1 text-xs">
                 {unread.slice(0, UNREAD_LISTED).map((line) => (
                   <li key={line.line} className="min-w-0">
-                    <span className="block text-[var(--text-secondary)]">
+                    <span className="block text-secondary">
                       {labels.unreadLine(line.line)}
                     </span>
-                    <code className="block truncate font-mono text-[var(--text-muted)]">
+                    <code className="block truncate font-mono text-muted">
                       {line.text}
                     </code>
                   </li>
                 ))}
                 {unread.length > UNREAD_LISTED && (
-                  <li className="text-[var(--text-muted)]">
+                  <li className="text-muted">
                     {labels.unreadMore(unread.length - UNREAD_LISTED)}
                   </li>
                 )}