@eifi1/ui-kit 0.31.0 → 0.32.0

package/dist/components/ui.js

@@ -1,67 +1,96 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, forwardRef, useContext, useId, useLayoutEffect, useRef, useState } from "react";
-import { ChevronDown, Eye, EyeOff, HelpCircle, Plus, X } from "lucide-react";
+import { ChevronDown, Eye, EyeOff, Plus, X } from "lucide-react";
 import { cn } from "../lib/cn.js";
+import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring.js";
 import { scrollIntoStrip, useStripFade } from "../lib/strip-fade.js";
 import { horizontalStep } from "../lib/direction.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { usePhoneLayout } from "../hooks/use-breakpoint.js";
+import { useLargeText } from "../hooks/use-large-text.js";
 import { Tooltip } from "./tooltip.js";
 import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link.js";
 import { useCommitReason } from "./write-lock.js";
 import { mergeDescribedBy } from "./choice-parts.js";
 import {
+  CompactControlsContext,
+  DisabledReasonLine,
   EndHintRow,
   FieldCaption,
   LockedReason,
+  useDisabledReasonLine,
   useFieldHint,
   useLockReason,
   FLOATING_LABEL_STATIC,
   STATIC_LABEL_TYPE
 } from "./field-parts.js";
-import { FieldLabel, FLOATING_LABEL_STATIC as FLOATING_LABEL_STATIC2 } from "./field-parts.js";
-const BUTTON_BASE = "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 disabled:opacity-50 disabled:cursor-not-allowed";
+import { FieldLabel, FLOATING_LABEL_STATIC as FLOATING_LABEL_STATIC2, FieldHint } from "./field-parts.js";
+import { FOCUS_RING as FOCUS_RING2, FOCUS_RING_WIDTH as FOCUS_RING_WIDTH2 } from "./focus-ring.js";
+const BUTTON_BASE = cn(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+  FOCUS_RING_WIDTH
+);
+const TOUCH_TARGET_LARGE = "large:min-h-[48px] large:min-w-[48px]";
 const BUTTON_SIZES = {
   md: "gap-2 px-3 py-2 text-sm",
   sm: "gap-1.5 px-2 py-1 text-xs"
 };
+const BUTTON_SIZES_LARGE = {
+  md: "large:min-h-[48px]",
+  sm: "large:min-h-[48px] large:py-2.5"
+};
 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-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus:ring-[var(--danger-border-strong)]",
-  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus:ring-[var(--brand)]",
+  primary: "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-[var(--border)] focus-visible:ring-[var(--brand)]",
+  secondary: "border border-[var(--border)] bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus-visible:ring-[var(--brand)]",
+  ghost: "bg-transparent text-[var(--text-primary)] hover:bg-[var(--bg-surface-2)] focus-visible:ring-[var(--brand)]",
+  danger: "bg-[var(--danger)] text-[var(--danger-contrast)] hover:bg-[var(--danger-hover)] focus-visible:ring-[var(--danger-border-strong)]",
+  brand: "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)] focus-visible:ring-[var(--brand)]",
   // A text link that is still a `<button>` — keksdose's six hand-rolled
   // `<button className="text-brand underline">` sites ("Resend code", "Show all",
   // "Undo" in a toast…), which act rather than navigate and so must not be anchors.
   // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but
-  // the base's `focus:ring-2` stays: those copies had `outline-none` and no ring, so
+  // the base's focus ring stays: those copies had `outline-none` and no ring, so
   // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that
   // ring hugging the word instead of drawing a pill round it.
-  link: "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus:ring-[var(--brand)]"
+  link: "rounded-sm p-0 bg-transparent text-[var(--brand)] underline-offset-4 hover:underline focus-visible:ring-[var(--brand)]"
 };
 const BUTTON_TONES = {
   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-strong)] disabled:hover:text-[var(--text-secondary)]"
+  danger: "text-[var(--text-secondary)] hover:text-[var(--danger)] focus-visible:ring-[var(--danger-border-strong)] disabled:hover:text-[var(--text-secondary)]"
 };
 const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
 const BUTTON_BOXED_DANGER = {
-  secondary: "border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]",
-  primary: "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus:ring-[var(--danger-border-strong)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]"
+  secondary: "border-[var(--danger-border)] bg-transparent text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:ring-[var(--danger-border-strong)]",
+  primary: "border-[var(--danger-border)] bg-[var(--danger-bg)] text-[var(--danger)] hover:border-[var(--danger)] hover:bg-[var(--danger)] hover:text-[var(--danger-contrast)] focus-visible:ring-[var(--danger-border-strong)] disabled:hover:border-[var(--danger-border)] disabled:hover:bg-[var(--danger-bg)] disabled:hover:text-[var(--danger)]"
 };
 const BUTTON_LINK_PRESSED = "font-medium text-[var(--brand)] hover:text-[var(--brand)] disabled:hover:text-[var(--brand)]";
 function buttonClasses(variant = "primary", classNameOrOptions) {
   const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
-  return cn(BUTTON_BASE, BUTTON_SIZES[size], buttonVariantClasses[variant], className);
+  return cn(
+    BUTTON_BASE,
+    BUTTON_SIZES[size],
+    variant !== "link" && BUTTON_SIZES_LARGE[size],
+    buttonVariantClasses[variant],
+    className
+  );
 }
 function hasContent(node) {
   return node !== void 0 && node !== null && node !== false && node !== "";
 }
+import {
+  CompactControls,
+  DisabledReasonLine as DisabledReasonLine2,
+  DISABLED_REASON_LINE_CLASS,
+  useDisabledReasonLine as useDisabledReasonLine2
+} from "./field-parts.js";
 function buttonLook(variant, size, stretch, tone) {
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
+    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the
+    // order `buttonClasses` has it, so the two strings stay identical.
+    variant !== "link" && BUTTON_SIZES_LARGE[size],
     // In a flex row next to a taller labelled field, `stretch` makes the button
     // fill the field's height so the two line up (self-stretch overrides the row's
     // align-items). No effect outside a flex row / when it's already the tallest.
@@ -157,6 +186,7 @@ function ButtonElement({
   tone = "default",
   pressed,
   disabledReason: ownDisabledReason,
+  disabledReasonDisplay,
   commit,
   pending,
   className,
@@ -213,18 +243,39 @@ function ButtonElement({
     }
   );
   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.
-    /* @__PURE__ */ jsx(Tooltip, { label: disabledReason, className: stretch ? "self-stretch" : void 0, children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      button,
-      /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
-    ] }) })
+  return /* @__PURE__ */ jsx(
+    ReasonFrame,
+    {
+      reason: disabledReason,
+      reasonId,
+      display: disabledReasonDisplay,
+      className: stretch ? "self-stretch" : void 0,
+      children: 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";
+function ReasonFrame({
+  reason,
+  reasonId,
+  display,
+  className,
+  side,
+  portal,
+  children
+}) {
+  const line = useDisabledReasonLine(display);
+  if (line) {
+    return /* @__PURE__ */ jsx(DisabledReasonLine, { id: reasonId, reason, className, children });
+  }
+  return /* @__PURE__ */ jsx(Tooltip, { label: reason, side, portal, className, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: reason })
+  ] }) });
+}
+const ICON_BUTTON_BASE = cn(
+  "inline-flex items-center justify-center rounded-md transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed",
+  FOCUS_RING_WIDTH
+);
 const ICON_BUTTON_SIZES = {
   // 64px with a 28px glyph: a camera's shutter (keksdose invoices/camera-capture.tsx:248,
   // `size-16` by hand) — the one control of a full-screen capture view, thumb-sized.
@@ -249,29 +300,56 @@ const ICON_BUTTON_STRETCH_SIZES = {
   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"
 };
+const ICON_BUTTON_TEXT_SIZES = {
+  "2xl": "h-16 gap-2 px-4 text-base [&_svg]:size-7",
+  xl: "h-12 gap-2 px-3.5 text-sm [&_svg]:size-6",
+  lg: "h-11 gap-2 px-3 text-sm [&_svg]:size-5",
+  md: "h-9 gap-1.5 px-2.5 text-sm [&_svg]:size-5",
+  sm: "h-8 gap-1.5 px-2 text-sm [&_svg]:size-5",
+  xs: "h-7 gap-1 rounded px-1.5 text-xs [&_svg]:size-4",
+  "2xs": "h-6 gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5"
+};
+const ICON_BUTTON_TEXT_STRETCH_SIZES = {
+  "2xl": "min-h-16 self-stretch gap-2 px-4 text-base [&_svg]:size-7",
+  xl: "min-h-12 self-stretch gap-2 px-3.5 text-sm [&_svg]:size-6",
+  lg: "min-h-11 self-stretch gap-2 px-3 text-sm [&_svg]:size-5",
+  md: "min-h-9 self-stretch gap-1.5 px-2.5 text-sm [&_svg]:size-5",
+  sm: "min-h-8 self-stretch gap-1.5 px-2 text-sm [&_svg]:size-5",
+  xs: "min-h-7 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-4",
+  "2xs": "min-h-6 self-stretch gap-1 rounded px-1.5 text-xs [&_svg]:size-3.5"
+};
+const ICON_BUTTON_TOUCH_LARGE = {
+  "2xl": "",
+  xl: "",
+  lg: "",
+  md: TOUCH_TARGET_LARGE,
+  sm: TOUCH_TARGET_LARGE,
+  xs: TOUCH_TARGET_LARGE,
+  "2xs": "relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']"
+};
 const ICON_BUTTON_TONES = {
   danger: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus:ring-[var(--danger-border-strong)]",
-    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus:ring-[var(--danger-border-strong)]"
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--danger-bg)] hover:text-[var(--danger)] focus-visible:ring-[var(--danger-border-strong)]",
+    toned: "text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:ring-[var(--danger-border-strong)]"
   },
   warning: {
-    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus:ring-[var(--warning-border)]",
-    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus:ring-[var(--warning-border)]"
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus-visible:ring-[var(--warning-border)]",
+    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus-visible:ring-[var(--warning-border)]"
   },
   info: {
-    quiet: "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)]"
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus-visible:ring-[var(--info-border)]",
+    toned: "text-[var(--info)] hover:bg-[var(--info-bg)] focus-visible: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)]"
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--success-bg)] hover:text-[var(--success)] focus-visible:ring-[var(--success-border)]",
+    toned: "text-[var(--success)] hover:bg-[var(--success-bg)] focus-visible: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)]"
+    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-visible: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-visible: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)]";
@@ -301,8 +379,8 @@ const ICON_BUTTON_DISABLED_REST = {
 };
 const ICON_BUTTON_QUIET_DISABLED_REST = "disabled:hover:text-[var(--text-placeholder)]";
 const ICON_BUTTON_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-[var(--brand)] disabled:hover:bg-[var(--brand-bg)] disabled:hover:text-[var(--brand)]";
-const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus:ring-[var(--text-inverse)]";
-const ICON_BUTTON_SHUTTER = "rounded-full border-4 border-[var(--media-ink)] bg-[var(--media-scrim)] text-[var(--media-ink)] backdrop-blur-sm hover:bg-[var(--media-scrim-hover)] focus:ring-[var(--media-ink)] focus:ring-offset-2 focus:ring-offset-[var(--media-scrim-hover)]";
+const ICON_BUTTON_OVERLAY = "rounded-full bg-[color-mix(in_srgb,var(--bg-inverse)_60%,transparent)] text-[var(--text-inverse)] backdrop-blur-sm hover:bg-[color-mix(in_srgb,var(--bg-inverse)_75%,transparent)] focus-visible:ring-[var(--text-inverse)]";
+const ICON_BUTTON_SHUTTER = "rounded-full border-4 border-[var(--media-ink)] bg-[var(--media-scrim)] text-[var(--media-ink)] backdrop-blur-sm hover:bg-[var(--media-scrim-hover)] focus-visible:ring-[var(--media-ink)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--media-scrim-hover)]";
 const ICON_BUTTON_GLYPH_SIZES = {
   12: "[&_svg]:size-3",
   14: "[&_svg]:size-3.5",
@@ -328,6 +406,16 @@ const ICON_BUTTON_SPINNER_GLYPH = {
   24: "size-6",
   28: "size-7"
 };
+function useIconButtonText(label, labelVisible, variant, tooltip) {
+  const large = useLargeText();
+  const compact = useContext(CompactControlsContext);
+  if (!large || label === void 0 || label === "" || !tooltip) return false;
+  const visible = labelVisible ?? (!compact && variant !== "overlay" && variant !== "shutter");
+  return visible;
+}
+function IconButtonText({ label }) {
+  return /* @__PURE__ */ jsx("span", { "data-slot": "icon-button-label", children: label });
+}
 const ICON_BUTTON_TONE_PAIR = "[--icon-button-tone:var(--icon-button-tone-light)] dark:[--icon-button-tone:var(--icon-button-tone-dark)]";
 function toneColorStyle(toneColor, style) {
   if (toneColor === void 0) return style;
@@ -342,11 +430,14 @@ function iconButtonLook({
   shape,
   tone,
   quiet,
-  toneColor
+  toneColor,
+  withText = false
 }) {
   return cn(
     ICON_BUTTON_BASE,
-    stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
+    withText ? cn("font-medium whitespace-nowrap", stretch ? ICON_BUTTON_TEXT_STRETCH_SIZES[size] : ICON_BUTTON_TEXT_SIZES[size]) : stretch ? ICON_BUTTON_STRETCH_SIZES[size] : ICON_BUTTON_SIZES[size],
+    // With text the pill is a 48 px target at any size; the square follows its size.
+    withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],
     glyphSize !== void 0 && ICON_BUTTON_GLYPH_SIZES[glyphSize],
     // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
     variant === "overlay" ? ICON_BUTTON_OVERLAY : variant === "shutter" ? ICON_BUTTON_SHUTTER : buttonVariantClasses[variant],
@@ -392,6 +483,7 @@ function IconButtonLink({
   shape = "square",
   toneColor,
   label,
+  labelVisible,
   tooltip = true,
   tooltipSide,
   tooltipPortal,
@@ -404,10 +496,15 @@ function IconButtonLink({
   rel,
   onClick,
   onKeyDown,
-  children,
+  children: glyph,
   ref,
   ...rest
 }) {
+  const withText = useIconButtonText(label, labelVisible, variant, tooltip);
+  const children = withText ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    glyph,
+    /* @__PURE__ */ jsx(IconButtonText, { label })
+  ] }) : glyph;
   const kitLink = useKitLink();
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
@@ -424,7 +521,7 @@ function IconButtonLink({
     onKeyDown?.(e);
   };
   const cls = cn(
-    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor }),
+    iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),
     // BASE's `disabled:` classes never match an `<a>` — Button's disabled link look.
     disabled && "pointer-events-none cursor-not-allowed opacity-50",
     className
@@ -469,7 +566,7 @@ function IconButtonLink({
     );
   }
   control = withIconButtonBadge(control, badge, stretch);
-  if (!tooltip || label === void 0 || label === "") return control;
+  if (!tooltip || withText || label === void 0 || label === "") return control;
   return (
     // A fragment, as on the button: the bubble says what `aria-label` already does.
     /* @__PURE__ */ jsx(
@@ -496,11 +593,13 @@ function IconButtonElement({
   shape = "square",
   toneColor,
   label,
+  labelVisible,
   tooltip = true,
   tooltipSide,
   tooltipPortal,
   tooltipLazy = true,
   disabledReason: ownDisabledReason,
+  disabledReasonDisplay,
   commit,
   pending,
   glyphSize,
@@ -521,12 +620,13 @@ function IconButtonElement({
 }) {
   const tone = toneProp ?? (toneColor !== void 0 ? "custom" : "default");
   const keep = disabledStyle === "keep";
+  const withText = useIconButtonText(label, labelVisible, variant, tooltip);
   const reasonId = useId();
   const disabledReason = useCommitReason(commit, ownDisabledReason);
   const locked = hasContent(disabledReason);
   const inert = locked || Boolean(pending);
   const ownDescribedBy = rest["aria-describedby"];
-  const button = /* @__PURE__ */ jsx(
+  const button = /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
@@ -551,7 +651,7 @@ function IconButtonElement({
         onKeyDown?.(e);
       },
       className: cn(
-        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor }),
+        iconButtonLook({ variant, size, stretch, glyphSize, shape, tone, quiet, toneColor, withText }),
         pressed && ICON_BUTTON_PRESSED,
         // The disabled look for the focusable kind of disabled, as on Button.
         locked && (keep ? "cursor-default" : "cursor-not-allowed opacity-50"),
@@ -559,43 +659,45 @@ function IconButtonElement({
         pending && "cursor-progress",
         className
       ),
-      children: pending ? (
-        // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands
-        // in for, in the glyph's colour, so the swap does not change the button's look.
-        /* @__PURE__ */ jsx(
-          Spinner,
-          {
-            label: null,
-            className: cn(
-              "border-current/30 border-t-current",
-              glyphSize !== void 0 ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size]
-            )
-          }
-        )
-      ) : children
+      children: [
+        pending ? (
+          // Decorative, as on Button: `aria-busy` says it. Sized to the glyph it stands
+          // in for, in the glyph's colour, so the swap does not change the button's look.
+          /* @__PURE__ */ jsx(
+            Spinner,
+            {
+              label: null,
+              className: cn(
+                "border-current/30 border-t-current",
+                glyphSize !== void 0 ? ICON_BUTTON_SPINNER_GLYPH[glyphSize] : ICON_BUTTON_SPINNER[size]
+              )
+            }
+          )
+        ) : children,
+        withText && /* @__PURE__ */ jsx(IconButtonText, { label })
+      ]
     }
   );
   const control = withIconButtonBadge(button, badge, stretch);
   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.
+      // Button's shape: the reason as a line under it, or the bubble with a hidden copy
+      // for the description (see ReasonFrame).
       /* @__PURE__ */ jsx(
-        Tooltip,
+        ReasonFrame,
         {
-          label: disabledReason,
+          reason: disabledReason,
+          reasonId,
+          display: disabledReasonDisplay,
           side: tooltipSide,
           portal: tooltipPortal,
           className: stretch ? "self-stretch" : void 0,
-          children: /* @__PURE__ */ jsxs(Fragment, { children: [
-            control,
-            /* @__PURE__ */ jsx("span", { id: reasonId, hidden: true, children: disabledReason })
-          ] })
+          children: control
         }
       )
     );
   }
-  if (!tooltip || label === void 0 || label === "") return control;
+  if (!tooltip || withText || label === void 0 || label === "") return control;
   return (
     // A fragment, so Tooltip leaves the button's description alone: the bubble says
     // exactly what `aria-label` already does. Lazy by default — see `tooltipLazy`.
@@ -612,7 +714,9 @@ function IconButtonElement({
     )
   );
 }
-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_TOUCH_TEXT = "pointer-coarse:text-[length:max(0.875rem,16px)]";
+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)] " + // §10.1: at least 16 px on a touch screen, or iOS zooms the page on focus.
+FIELD_TOUCH_TEXT + " 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-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] focus:border-[var(--danger)] focus:ring-[var(--danger)]";
@@ -640,15 +744,15 @@ function FieldChevron({ className, ...rest }) {
 const FLOATING_LABEL_CLASS = cn(
   "pointer-events-none absolute start-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-[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-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption 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 start-3 top-2.5 flex items-center gap-1 transition-all",
   "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-focus:top-1 peer-focus:text-caption peer-focus:leading-tight peer-focus:text-[var(--text-secondary)]",
+  "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:text-caption peer-[:not(:placeholder-shown)]:leading-tight peer-[:not(:placeholder-shown)]:text-[var(--text-secondary)]",
   "peer-disabled:opacity-50"
 );
 function FloatingField({
@@ -698,33 +802,6 @@ function FloatingField({
     ] })
   );
 }
-function FieldHint({
-  label,
-  side = "start",
-  className,
-  "aria-label": ariaLabel,
-  ...rest
-}) {
-  return (
-    // `tap="toggle"` (0.25): the "?" exists only to explain, so a tap on a phone shows
-    // the bubble and the next tap hides it — the touch rule (no bubble left behind by a
-    // tap) would otherwise make it show nothing at all.
-    /* @__PURE__ */ jsx(Tooltip, { label, side, portal: true, tap: "toggle", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        ...rest,
-        type: "button",
-        "aria-label": ariaLabel ?? label,
-        onClick: (e) => e.preventDefault(),
-        className: cn(
-          "flex text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)]",
-          className
-        ),
-        children: /* @__PURE__ */ jsx(HelpCircle, { className: "size-3.5" })
-      }
-    ) })
-  );
-}
 function Label({ required, size = "md", disabled, className, children, ...rest }) {
   return /* @__PURE__ */ jsxs(
     "label",
@@ -743,7 +820,7 @@ function Label({ required, size = "md", disabled, className, children, ...rest }
     }
   );
 }
-const FIELD_ERROR_CLASS = "mt-1 text-[11px] leading-tight text-[var(--danger)]";
+const FIELD_ERROR_CLASS = "mt-1 text-caption leading-tight text-[var(--danger)]";
 function useFieldError(error, invalid, describedBy, ariaInvalid) {
   const errorId = useId();
   const hasError = error !== void 0 && error !== null && error !== false && error !== "";
@@ -816,7 +893,7 @@ function CharacterCount({
         {
           "aria-hidden": true,
           className: cn(
-            "shrink-0 text-[11px] leading-tight tabular-nums",
+            "shrink-0 text-caption leading-tight tabular-nums",
             zone === "limit" ? "text-[var(--danger)]" : zone === "near" ? "text-[var(--warning)]" : "text-[var(--text-muted)]"
           ),
           children: [
@@ -892,7 +969,7 @@ const Input = forwardRef(function Input2(props, ref) {
     length.track(e.target.value);
     rest.onChange?.(e);
   } : rest.onChange;
-  const asDisplay = useMediaQuery(PHONE_QUERY, false) && variant === "display";
+  const asDisplay = usePhoneLayout() && variant === "display";
   const isPassword = type === "password";
   const [revealed, setRevealed] = useState(false);
   const effectiveType = isPassword && revealed ? "text" : type;
@@ -912,7 +989,10 @@ const Input = forwardRef(function Input2(props, ref) {
       disabled: rest.disabled,
       "aria-label": revealed ? passwordText.hide : passwordText.show,
       "aria-pressed": revealed,
-      className: "absolute inset-y-0 end-0 flex items-center rounded-e-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",
+      className: cn(
+        "absolute inset-y-0 end-0 flex items-center rounded-e-md px-2.5 text-[var(--text-placeholder)] transition-colors hover:text-[var(--text-secondary)] focus:outline-none disabled:cursor-default disabled:opacity-50",
+        FOCUS_RING
+      ),
       children: revealed ? /* @__PURE__ */ jsx(EyeOff, { className: "size-4" }) : /* @__PURE__ */ jsx(Eye, { className: "size-4" })
     }
   ) : null;
@@ -1031,7 +1111,7 @@ const Select = forwardRef(function Select2(props, ref) {
     rest["aria-invalid"]
   );
   const below = textHint || errorEl !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
-    textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-[11px] leading-tight text-[var(--text-muted)]", children: hint }),
+    textHint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 text-caption leading-tight text-[var(--text-muted)]", children: hint }),
     errorEl
   ] }) : null;
   const chevron = rest.disabled || listBox || locked ? null : /* @__PURE__ */ jsx(FieldChevron, { className: small ? "end-1.5 size-3.5" : void 0 });
@@ -1145,7 +1225,7 @@ function labelEdge(scrollTop, lineHeight) {
   return { height: Math.min(gone, LABEL_EDGE_SOFT_PX), solid: 0 };
 }
 const TEXTAREA_LABEL_STRIP = cn(
-  "pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[5px] bg-[var(--bg-surface)]",
+  "pointer-events-none absolute inset-x-px top-px hidden h-4 rounded-t-[calc(0.375rem-1px)] bg-[var(--bg-surface)]",
   "peer-focus:block peer-[:not(:placeholder-shown)]:block",
   "peer-disabled:bg-[var(--bg-surface-2)] peer-[[readonly]]:bg-[var(--bg-surface-2)]",
   TEXTAREA_LABEL_EDGE
@@ -1298,8 +1378,8 @@ const CARD_PADDING = {
 };
 const CARD_PADDING_STRONG = {
   none: "p-0",
-  sm: "p-[11px]",
-  md: "p-[15px]"
+  sm: "p-[calc(0.75rem-1px)]",
+  md: "p-[calc(1rem-1px)]"
 };
 const CARD_TONE_WASH = {
   warning: "bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]",
@@ -1540,19 +1620,19 @@ const DEFAULT_TABS_LABELS = {
 };
 const TABLIST_CLASSES = "flex gap-1 overflow-x-auto overflow-y-hidden border-b border-[var(--border)]";
 const TABLIST_VERTICAL_CLASSES = "flex flex-col gap-0.5";
-const TAB_VERTICAL_CLASSES = "flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)]";
+const TAB_VERTICAL_CLASSES = FOCUS_RING_WIDTH + " flex w-full items-center rounded-md px-3 py-2 text-start text-sm font-medium transition-colors focus:outline-none focus-visible:ring-[var(--border-strong)]";
 const TAB_VERTICAL_ACTIVE_CLASSES = "bg-[var(--bg-active)] text-[var(--text-primary)]";
 const TAB_VERTICAL_INACTIVE_CLASSES = "text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]";
 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 = "max-w-full 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_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap px-3 py-2 text-sm font-medium transition-colors border-b-2 -mb-px focus:outline-none focus-visible: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 = "max-w-full 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_CLASSES = FOCUS_RING_WIDTH + " max-w-full whitespace-nowrap rounded-md px-2.5 py-2 text-xs font-medium transition-colors focus:outline-none focus-visible: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)]";
 const TAB_REMOVABLE_CLASSES = "pe-8 md:pe-8";
 const TAB_EMPTY_CLASSES = "-mx-1.5 rounded border border-dashed border-[var(--border-strong)] px-1.5";
-const TAB_ADD_CLASSES = "inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
+const TAB_ADD_CLASSES = FOCUS_RING_WIDTH + " inline-flex items-center gap-1 whitespace-nowrap rounded-md px-3 py-2 text-sm font-medium text-[var(--text-muted)] transition-colors hover:text-[var(--text-primary)] focus:outline-none focus-visible:ring-[var(--border-strong)] disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:size-4";
 const TAB_ADD_WRAP_CLASSES = "px-2.5 text-xs md:px-3 md:text-sm";
 const TAB_ADD_PHONE_CLASSES = "relative max-md:px-2";
 function Tabs({
@@ -1574,7 +1654,7 @@ function Tabs({
   ...rest
 }) {
   const text = useKitLabels("tabs", DEFAULT_TABS_LABELS, labels);
-  const phone = useMediaQuery(PHONE_QUERY, false);
+  const phone = usePhoneLayout();
   const vertical = orientation === "vertical" && !phone;
   const stripRef = useRef(null);
   const fade = useStripFade(stripRef);
@@ -1694,7 +1774,7 @@ function Tabs({
                     "span",
                     {
                       className: cn(
-                        "max-w-full truncate text-[11px] font-normal leading-tight text-[var(--text-muted)]",
+                        "max-w-full truncate text-caption font-normal leading-tight text-[var(--text-muted)]",
                         // On a wrapped strip's filled chip (below `md`) the muted grey
                         // was dark text on the brand fill — "loop 2" all but vanished
                         // under the one label that most needed reading. It takes the
@@ -1816,19 +1896,25 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  CompactControls,
   DEFAULT_CHARACTER_COUNT_LABELS,
   DEFAULT_PASSWORD_REVEAL_LABELS,
   DEFAULT_TABS_LABELS,
+  DISABLED_REASON_LINE_CLASS,
+  DisabledReasonLine2 as DisabledReasonLine,
   EmptyState,
   FIELD_BASE,
   FIELD_DISPLAY,
   FIELD_FLOATING_PAD,
   FIELD_INVALID,
+  FIELD_TOUCH_TEXT,
   FIELD_TRIGGER,
   FIELD_WRITABLE_LOOK,
   FLOATING_INPUT_CLASS,
   FLOATING_LABEL_CLASS,
   FLOATING_LABEL_STATIC2 as FLOATING_LABEL_STATIC,
+  FOCUS_RING2 as FOCUS_RING,
+  FOCUS_RING_WIDTH2 as FOCUS_RING_WIDTH,
   FieldChevron,
   FieldHint,
   FieldLabel,
@@ -1839,9 +1925,11 @@ export {
   PHONE_QUERY,
   Select,
   Spinner,
+  TOUCH_TARGET_LARGE,
   Tabs,
   Textarea,
   buttonClasses,
-  resolvePasswordRevealLabels
+  resolvePasswordRevealLabels,
+  useDisabledReasonLine2 as useDisabledReasonLine
 };
 //# sourceMappingURL=ui.js.map