@eifi1/ui-kit 0.4.1 → 0.5.0

package/dist/components/ui.js

@@ -1,26 +1,23 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useId, useState } from "react";
 import { ChevronDown, Eye, EyeOff, HelpCircle } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { useMediaQuery } from "../hooks/use-media-query.js";
 import { Tooltip } from "./tooltip.js";
+import { DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 const BUTTON_BASE = "inline-flex items-center justify-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
 const buttonVariantClasses = {
   primary: "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus:ring-[var(--brand)]",
   secondary: "border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
   ghost: "bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus:ring-[var(--brand)]",
-  danger: "bg-red-600 text-white hover:bg-red-500 focus:ring-red-300",
+  danger: "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border)]",
   brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]"
 };
 function buttonClasses(variant = "primary", className) {
   return cn(BUTTON_BASE, buttonVariantClasses[variant], className);
 }
-function Button({
-  variant = "primary",
-  stretch,
-  className,
-  ...rest
-}) {
+function Button({ variant = "primary", stretch, className, ...rest }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
@@ -54,46 +51,45 @@ const IconButton = forwardRef(function IconButton2({ variant = "ghost", size = "
   );
 });
 IconButton.displayName = "IconButton";
-const FIELD_BASE = "block w-full rounded-md border border-[var(--border)] bg-white px-3 py-2 text-sm text-slate-900 shadow-sm placeholder:text-slate-400 focus:border-[var(--brand)] focus:ring-[var(--brand)] dark:bg-slate-900 dark:text-slate-100 dark:placeholder:text-slate-500 disabled:cursor-default disabled:bg-slate-50 disabled:text-slate-500 dark:disabled:bg-slate-800/60 dark:disabled:text-slate-400 [&[readonly]]:bg-slate-50 [&[readonly]]:text-slate-500 dark:[&[readonly]]:bg-slate-800/60 dark:[&[readonly]]:text-slate-400";
-const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-white [&[readonly]]:text-slate-900 dark:[&[readonly]]:bg-slate-900 dark:[&[readonly]]:text-slate-100";
+const FIELD_BASE = "block w-full rounded-md border border-[var(--border)] bg-[var(--bg-surface)] px-3 py-2 text-sm text-[var(--text-primary)] shadow-sm placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:ring-[var(--brand)] disabled:cursor-default disabled:bg-[var(--bg-surface-2)] disabled:text-[var(--text-muted)] [&[readonly]]:bg-[var(--bg-surface-2)] [&[readonly]]:text-[var(--text-muted)]";
+const FIELD_WRITABLE_LOOK = "[&[readonly]]:bg-[var(--bg-surface)] [&[readonly]]:text-[var(--text-primary)]";
 const FIELD_FLOATING_PAD = "pt-4 pb-1";
-const FIELD_INVALID = "border-rose-400 ring-1 ring-rose-400 focus:border-rose-500 focus:ring-rose-500 dark:border-rose-500/80 dark:ring-rose-500/80 dark:focus:border-rose-400";
+const FIELD_INVALID = "border-[var(--danger-border)] ring-1 ring-[var(--danger-border)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
 const FLOATING_INPUT_CLASS = cn(FIELD_BASE, FIELD_FLOATING_PAD, "peer placeholder:text-transparent");
 const PHONE_QUERY = "(max-width: 767px)";
-const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-slate-400 focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60 dark:placeholder:text-slate-500";
+const FIELD_DISPLAY = "block w-full border-x-0 border-t-0 border-b border-[var(--border)] bg-transparent px-0 pt-0 pb-1 text-[var(--text-primary)] shadow-none placeholder:text-[var(--text-placeholder)] focus:border-[var(--brand)] focus:outline-none focus:ring-0 disabled:opacity-60";
 const FIELD_TRIGGER = cn(
   FIELD_BASE,
-  "relative flex items-center justify-between gap-2 text-left hover:bg-slate-50 dark:hover:bg-slate-800"
+  "relative flex items-center justify-between gap-2 text-left hover:bg-[var(--bg-hover)]"
 );
-function FieldChevron({ className }) {
+function FieldChevron({ className, ...rest }) {
   return /* @__PURE__ */ jsx(
     ChevronDown,
     {
+      ...rest,
       "aria-hidden": true,
       className: cn(
-        "pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-slate-400 dark:text-slate-500",
+        "pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 text-[var(--text-placeholder)]",
         className
       )
     }
   );
 }
 const FLOATING_LABEL_CLASS = cn(
-  "pointer-events-none absolute left-3 top-2.5 text-sm text-slate-400 transition-all",
+  "pointer-events-none absolute left-3 top-2.5 text-sm text-[var(--text-placeholder)] transition-all",
   "max-w-[calc(100%-1.5rem)] truncate",
-  "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-slate-600",
-  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-slate-600",
-  "dark:text-slate-500 dark:peer-focus:text-slate-300 dark:peer-[:not(:placeholder-shown)]:text-slate-300",
+  "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
   "peer-disabled:opacity-50"
 );
 const FLOATING_ROW_CLASS = cn(
   "pointer-events-none absolute left-3 top-2.5 flex items-center gap-1 transition-all",
-  "max-w-[calc(100%-3rem)] text-sm text-slate-400",
-  "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-slate-600",
-  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-slate-600",
-  "dark:text-slate-500 dark:peer-focus:text-slate-300 dark:peer-[:not(:placeholder-shown)]:text-slate-300",
+  "max-w-[calc(100%-3rem)] text-sm text-[var(--text-placeholder)]",
+  "peer-focus:top-1 peer-focus:text-[11px] peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-[11px] peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
   "peer-disabled:opacity-50"
 );
-const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-slate-500 dark:text-slate-400 peer-disabled:opacity-50";
+const STATIC_LABEL_TYPE = "text-[11px] leading-tight text-[var(--text-muted)] peer-disabled:opacity-50";
 const FLOATING_LABEL_STATIC = cn(
   "pointer-events-none absolute left-3 top-1",
   STATIC_LABEL_TYPE,
@@ -106,7 +102,8 @@ function FloatingField({
   staticLabel,
   srOnlyLabel,
   hint,
-  children
+  children,
+  ...rest
 }) {
   const withHint = hint !== void 0 && !srOnlyLabel;
   const atEnd = withHint && staticLabel;
@@ -118,46 +115,105 @@ function FloatingField({
       children: label
     }
   );
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    children,
-    withHint ? (
-      // Static: `inset-x-3` rather than `left-3`, so a long label truncates at
-      // the field's own right padding instead of running under the chevron.
-      // Animated: the row floats with the label and is only as wide as it needs
-      // to be. Either way the hint keeps its width (`shrink-0`) and the label
-      // is the one that gives way.
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: atEnd ? "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1" : FLOATING_ROW_CLASS,
-          children: [
-            labelEl,
-            /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
-          ]
-        }
-      )
-    ) : labelEl
-  ] });
+  return (
+    // `relative` is the whole contract of this wrapper — the floating label and every
+    // control that hangs off it (a reveal toggle, a chevron) are positioned against
+    // this box — so it is merged through `cn` after the spread rather than left where
+    // a caller's stray `className` or `style` could unset it.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
+      children,
+      withHint ? (
+        // Static: `inset-x-3` rather than `left-3`, so a long label truncates at
+        // the field's own right padding instead of running under the chevron.
+        // Animated: the row floats with the label and is only as wide as it needs
+        // to be. Either way the hint keeps its width (`shrink-0`) and the label
+        // is the one that gives way.
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: atEnd ? "pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1" : FLOATING_ROW_CLASS,
+            children: [
+              labelEl,
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+            ]
+          }
+        )
+      ) : labelEl
+    ] })
+  );
 }
-function FieldHint({ label, side = "left" }) {
+function FieldHint({
+  label,
+  side = "left",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
   return /* @__PURE__ */ jsx(Tooltip, { label, side, portal: true, children: /* @__PURE__ */ jsx(
     "button",
     {
+      ...rest,
       type: "button",
-      "aria-label": label,
+      "aria-label": ariaLabel ?? label,
       onClick: (e) => e.preventDefault(),
-      className: "flex text-slate-400 transition-colors hover:text-slate-600 dark:hover:text-slate-200",
+      className: cn(
+        "flex text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]",
+        className
+      ),
       children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-3.5" })
     }
   ) });
 }
-function FieldLabel({ children, className }) {
-  return /* @__PURE__ */ jsx("span", { className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
+function FieldLabel({ children, className, ...rest }) {
+  return /* @__PURE__ */ jsx("span", { ...rest, className: cn(FLOATING_LABEL_STATIC, "z-10", className), children });
+}
+const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+function useFieldError(error, invalid, describedBy) {
+  const errorId = useId();
+  const hasError = error !== void 0 && error !== null && error !== false && error !== "";
+  return {
+    /** A field carrying a message that says what is wrong with it IS wrong. */
+    isInvalid: Boolean(invalid) || hasError,
+    describedBy: hasError ? describedBy ? `${describedBy} ${errorId}` : errorId : describedBy,
+    errorEl: hasError ? /* @__PURE__ */ jsx("p", { id: errorId, className: FIELD_ERROR_CLASS, children: error }) : null
+  };
+}
+function FieldGroup({ errorEl, children }) {
+  if (errorEl === null) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsxs("div", { children: [
+    children,
+    errorEl
+  ] });
+}
+const DEFAULT_PASSWORD_REVEAL_LABELS = {
+  show: "Show password",
+  hide: "Hide password"
+};
+function resolvePasswordRevealLabels(partial) {
+  if (!partial) return DEFAULT_PASSWORD_REVEAL_LABELS;
+  return { ...DEFAULT_PASSWORD_REVEAL_LABELS, ...partial };
 }
 const PICKER_TYPES = /* @__PURE__ */ new Set(["date", "datetime-local", "month", "time", "week"]);
-const Input = forwardRef(function Input2({ className, inputClassName, label, id, placeholder, type, variant = "field", invalid, ...rest }, ref) {
+const Input = forwardRef(function Input2({
+  className,
+  inputClassName,
+  label,
+  id,
+  placeholder,
+  type,
+  variant = "field",
+  invalid,
+  error,
+  passwordLabels,
+  ...rest
+}, ref) {
   const generated = useId();
   const fieldId = id ?? generated;
+  const { isInvalid, describedBy, errorEl } = useFieldError(
+    error,
+    invalid,
+    rest["aria-describedby"]
+  );
   const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
   const isPassword = type === "password";
   const [revealed, setRevealed] = useState(false);
@@ -169,21 +225,22 @@ const Input = forwardRef(function Input2({ className, inputClassName, label, id,
     } catch {
     }
   } : rest.onClick;
+  const passwordText = useKitLabels("passwordReveal", DEFAULT_PASSWORD_REVEAL_LABELS, passwordLabels);
   const revealToggle = isPassword ? /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      tabIndex: -1,
       onClick: () => setRevealed((v) => !v),
-      "aria-label": revealed ? "Hide password" : "Show password",
+      disabled: rest.disabled,
+      "aria-label": revealed ? passwordText.hide : passwordText.show,
       "aria-pressed": revealed,
-      className: "absolute inset-y-0 right-0 flex items-center px-2.5 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300",
+      className: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--brand)] disabled:cursor-default disabled:opacity-50",
       children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
     }
   ) : null;
   if (label === void 0) {
     if (!isPassword) {
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(
         "input",
         {
           ref,
@@ -191,13 +248,14 @@ const Input = forwardRef(function Input2({ className, inputClassName, label, id,
           type,
           placeholder,
           ...rest,
-          "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+          "aria-describedby": describedBy,
           onClick: handleClick,
-          className: cn(FIELD_BASE, className, inputClassName, invalid && FIELD_INVALID)
+          className: cn(FIELD_BASE, className, inputClassName, isInvalid && FIELD_INVALID)
         }
-      );
+      ) });
     }
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -206,14 +264,15 @@ const Input = forwardRef(function Input2({ className, inputClassName, label, id,
           type: effectiveType,
           placeholder,
           ...rest,
-          "aria-invalid": invalid || rest["aria-invalid"] || void 0,
-          className: cn(FIELD_BASE, "pr-9", inputClassName, invalid && FIELD_INVALID)
+          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+          "aria-describedby": describedBy,
+          className: cn(FIELD_BASE, "pr-9", inputClassName, isInvalid && FIELD_INVALID)
         }
       ),
       revealToggle
-    ] });
+    ] }) });
   }
-  return /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, srOnlyLabel: asDisplay, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
@@ -222,97 +281,110 @@ const Input = forwardRef(function Input2({ className, inputClassName, label, id,
         type: effectiveType,
         placeholder: asDisplay ? placeholder ?? (typeof label === "string" ? label : " ") : " ",
         ...rest,
-        "aria-invalid": invalid || rest["aria-invalid"] || void 0,
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
         onClick: handleClick,
         className: cn(
           asDisplay ? cn(FIELD_DISPLAY, "text-xl font-semibold leading-snug") : FLOATING_INPUT_CLASS,
           isPassword && "pr-9",
           inputClassName,
-          invalid && FIELD_INVALID
+          isInvalid && FIELD_INVALID
         )
       }
     ),
     revealToggle
-  ] });
+  ] }) });
 });
 Input.displayName = "Input";
-const Select = forwardRef(function Select2({ className, label, id, children, invalid, hint, ...rest }, ref) {
+const Select = forwardRef(function Select2({ className, label, id, children, invalid, error, hint, ...rest }, ref) {
   const generated = useId();
   const fieldId = id ?? generated;
+  const { isInvalid, describedBy, errorEl } = useFieldError(
+    error,
+    invalid,
+    rest["aria-describedby"]
+  );
   const chevron = rest.disabled ? null : /* @__PURE__ */ jsx(FieldChevron, {});
   if (label === void 0) {
-    return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx(
         "select",
         {
           ref,
+          id,
           ...rest,
-          "aria-invalid": invalid || void 0,
-          className: cn(FIELD_BASE, "appearance-none pr-9", invalid && FIELD_INVALID),
+          "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+          "aria-describedby": describedBy,
+          className: cn(FIELD_BASE, "appearance-none pr-9", isInvalid && FIELD_INVALID),
           children
         }
       ),
       chevron
-    ] });
+    ] }) });
   }
-  return /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint, children: [
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsxs(FloatingField, { className, htmlFor: fieldId, label, staticLabel: true, hint, children: [
     /* @__PURE__ */ jsx(
       "select",
       {
         ref,
         id: fieldId,
         ...rest,
-        "aria-invalid": invalid || void 0,
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
         className: cn(
           FIELD_BASE,
           FIELD_FLOATING_PAD,
           "peer appearance-none pr-9",
-          invalid && FIELD_INVALID
+          isInvalid && FIELD_INVALID
         ),
         children
       }
     ),
     chevron
-  ] });
+  ] }) });
 });
 Select.displayName = "Select";
-const Textarea = forwardRef(function Textarea2({ className, label, id, placeholder, invalid, ...rest }, ref) {
+const Textarea = forwardRef(function Textarea2({ className, label, id, placeholder, invalid, error, ...rest }, ref) {
   const generated = useId();
   const fieldId = id ?? generated;
+  const { isInvalid, describedBy, errorEl } = useFieldError(
+    error,
+    invalid,
+    rest["aria-describedby"]
+  );
   if (label === void 0) {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(
       "textarea",
       {
         ref,
         id,
         placeholder,
         ...rest,
-        "aria-invalid": invalid || rest["aria-invalid"] || void 0,
-        className: cn(FIELD_BASE, className, invalid && FIELD_INVALID)
+        "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+        "aria-describedby": describedBy,
+        className: cn(FIELD_BASE, className, isInvalid && FIELD_INVALID)
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(FieldGroup, { errorEl, children: /* @__PURE__ */ jsx(FloatingField, { className, htmlFor: fieldId, label, children: /* @__PURE__ */ jsx(
     "textarea",
     {
       ref,
       id: fieldId,
       placeholder: " ",
       ...rest,
-      "aria-invalid": invalid || rest["aria-invalid"] || void 0,
-      className: cn(FLOATING_INPUT_CLASS, invalid && FIELD_INVALID)
+      "aria-invalid": isInvalid || rest["aria-invalid"] || void 0,
+      "aria-describedby": describedBy,
+      className: cn(FLOATING_INPUT_CLASS, isInvalid && FIELD_INVALID)
     }
-  ) });
+  ) }) });
 });
 Textarea.displayName = "Textarea";
-function Card({
-  className,
-  children,
-  flush
-}) {
+function Card({ className, children, flush, ...rest }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       className: cn(
         // Surface + border are theme tokens so the palette switcher (feedback
         // #307) can re-skin every card; a caller's own bg-*/border-* override
@@ -383,50 +455,63 @@ function CardFooter({ className, ...props }) {
     }
   );
 }
-function Spinner({ className }) {
+function Spinner({ className, label, ...rest }) {
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { loading: label });
   return /* @__PURE__ */ jsx(
     "span",
     {
+      role: "status",
+      ...rest,
       className: cn(
-        "inline-block h-5 w-5 animate-spin rounded-full border-2 border-slate-300 border-t-slate-700 dark:border-slate-700 dark:border-t-slate-200",
+        "relative inline-block h-5 w-5 animate-spin rounded-full border-2 border-[var(--border)] border-t-[var(--text-primary)]",
         className
-      )
+      ),
+      children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: common.loading })
     }
   );
 }
-function EmptyState({
-  title,
-  hint,
-  className
-}) {
+function EmptyState({ title, hint, className, ...rest }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ...rest,
       className: cn(
-        "flex flex-col items-center justify-center rounded-lg border border-dashed border-slate-300 bg-slate-50/50 px-4 py-10 text-center text-sm text-slate-500 dark:border-slate-700 dark:bg-slate-900/40 dark:text-slate-400",
+        "flex flex-col items-center justify-center rounded-lg border border-dashed border-[var(--border-strong)] bg-[var(--bg-surface-2)] px-4 py-10 text-center text-sm text-[var(--text-muted)]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "font-medium text-slate-700 dark:text-slate-200", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "font-medium text-[var(--text-secondary)]", children: title }),
         hint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint })
       ]
     }
   );
 }
-const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-slate-200 dark:border-slate-800";
-const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-slate-200 md:dark:border-slate-800";
-const TAB_CLASSES = "whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-slate-300";
-const TAB_ACTIVE_CLASSES = "border-slate-900 text-slate-900 dark:border-slate-100 dark:text-slate-100";
-const TAB_INACTIVE_CLASSES = "border-transparent text-slate-500 hover:text-slate-700 hover:border-slate-300 dark:text-slate-400 dark:hover:text-slate-200";
-const TAB_WRAP_CLASSES = "whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-300 md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
-const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-slate-900 md:text-slate-900 md:dark:border-slate-100 md:dark:text-slate-100";
-const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-slate-500 md:hover:border-slate-300 md:hover:text-slate-700 md:dark:text-slate-400 md:dark:hover:text-slate-200";
-function Tabs({ tabs, active, onChange, className, wrap = false, label }) {
-  const onListKeyDown = (e) => {
+const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
+const TABLIST_WRAP_CLASSES = "flex flex-wrap gap-1.5 md:flex-nowrap md:gap-1 md:overflow-x-auto md:overflow-y-hidden md:border-b md:border-[var(--border)]";
+const TAB_CLASSES = "whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+const TAB_ACTIVE_CLASSES = "border-[var(--text-primary)] text-[var(--text-primary)]";
+const TAB_INACTIVE_CLASSES = "border-transparent text-[var(--text-muted)] hover:text-[var(--text-secondary)] hover:border-[var(--border-strong)]";
+const TAB_WRAP_CLASSES = "whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] md:rounded-none md:border-b-2 md:-mb-px md:bg-transparent md:px-3 md:py-2 md:text-sm";
+const TAB_WRAP_ACTIVE_CLASSES = "bg-[var(--brand)] text-[var(--brand-contrast)] md:border-[var(--text-primary)] md:text-[var(--text-primary)]";
+const TAB_WRAP_INACTIVE_CLASSES = "bg-[var(--bg-surface)] text-[var(--text-primary)] md:border-transparent md:text-[var(--text-muted)] md:hover:border-[var(--border-strong)] md:hover:text-[var(--text-secondary)]";
+function Tabs({
+  tabs,
+  active,
+  onChange,
+  className,
+  wrap = false,
+  label,
+  panelId,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const onTabKeyDown = (e) => {
     const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
     if (step === 0 && e.key !== "Home" && e.key !== "End") return;
-    const items = Array.from(e.currentTarget.querySelectorAll('[role="tab"]'));
-    const from = items.indexOf(document.activeElement);
+    const strip = e.currentTarget.closest('[role="tablist"]');
+    if (!strip) return;
+    const items = Array.from(strip.querySelectorAll('[role="tab"]'));
+    const from = items.indexOf(e.currentTarget);
     if (from === -1) return;
     e.preventDefault();
     const to = e.key === "Home" ? 0 : e.key === "End" ? items.length - 1 : (from + step + items.length) % items.length;
@@ -435,15 +520,32 @@ function Tabs({ tabs, active, onChange, className, wrap = false, label }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ...rest,
       role: "tablist",
-      "aria-label": label,
-      onKeyDown: onListKeyDown,
+      "aria-label": ariaLabel ?? label,
       className: cn(wrap ? TABLIST_WRAP_CLASSES : TABLIST_CLASSES, className),
       children: tabs.map((tab) => {
         const isActive = tab.id === active;
         const shared = {
           role: "tab",
           "aria-selected": isActive,
+          // Roving tabindex: the whole strip is ONE stop in the page's tab order, and
+          // it is the open tab. Ten report tabs otherwise cost ten Tab presses to step
+          // over on the way to the table below them (live #262's strip is the extreme
+          // case, but every strip in the app paid it).
+          //
+          // The stop follows the SELECTION, not the focus. Arrowing is a look around —
+          // activation here is manual, because a tab can be a real route — so re-
+          // pointing the stop at a report the user only arrowed past would hand the
+          // strip back on the next visit in a state they never chose. The cost is that
+          // Tab out and back returns to the open tab rather than to the last one
+          // looked at; the ARIA pattern allows either, and this one needs no second
+          // piece of state shadowing `active`.
+          tabIndex: isActive ? 0 : -1,
+          // Only the open tab: see `panelId`.
+          "aria-controls": isActive ? panelId : void 0,
+          id: isActive && panelId ? `${panelId}-tab` : void 0,
+          onKeyDown: onTabKeyDown,
           className: cn(
             wrap ? TAB_WRAP_CLASSES : TAB_CLASSES,
             wrap ? isActive ? TAB_WRAP_ACTIVE_CLASSES : TAB_WRAP_INACTIVE_CLASSES : isActive ? TAB_ACTIVE_CLASSES : TAB_INACTIVE_CLASSES
@@ -465,7 +567,8 @@ function Tabs({ tabs, active, onChange, className, wrap = false, label }) {
               onChange(tab.id);
             },
             onKeyDown: (e) => {
-              if (e.key !== " ") return;
+              onTabKeyDown(e);
+              if (e.defaultPrevented || e.key !== " ") return;
               e.preventDefault();
               onChange(tab.id);
             },
@@ -486,6 +589,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  DEFAULT_PASSWORD_REVEAL_LABELS,
   EmptyState,
   FIELD_BASE,
   FIELD_DISPLAY,
@@ -507,6 +611,7 @@ export {
   Spinner,
   Tabs,
   Textarea,
-  buttonClasses
+  buttonClasses,
+  resolvePasswordRevealLabels
 };
 //# sourceMappingURL=ui.js.map