@eifi1/ui-kit 0.32.2 → 0.33.0

package/dist/components/ui.d.ts

@@ -1,19 +1,24 @@
 import 'react';
 import './tooltip.js';
-export { bI as Button, bJ as ButtonClassesOptions, bK as ButtonLinkProps, bL as ButtonProps, bM as ButtonSize, bN as ButtonTone, bO as ButtonVariant, bQ as Card, bR as CardAction, bS as CardActionProps, bT as CardContent, bU as CardContentProps, bV as CardDensity, bW as CardDescription, bX as CardDescriptionProps, bY as CardFooter, bZ as CardFooterProps, b_ as CardHeader, b$ as CardHeaderProps, c0 as CardProps, c1 as CardTitle, c2 as CardTitleLevel, c3 as CardTitleProps, c4 as CardTone, c5 as CharacterCountLabels, cr as DEFAULT_CHARACTER_COUNT_LABELS, cI as DEFAULT_PASSWORD_REVEAL_LABELS, cR as DEFAULT_TABS_LABELS, d5 as EmptyState, d6 as EmptyStateProps, d7 as FIELD_BASE, d8 as FIELD_DISPLAY, d9 as FIELD_FLOATING_PAD, da as FIELD_INVALID, db as FIELD_TOUCH_TEXT, dc as FIELD_TRIGGER, dd as FIELD_WRITABLE_LOOK, de as FLOATING_INPUT_CLASS, df as FLOATING_LABEL_CLASS, dg as FieldChevron, dh as FieldChevronProps, dq as FloatingField, dr as FloatingFieldProps, dF as IconButton, dG as IconButtonGlyphSize, dH as IconButtonLinkProps, dI as IconButtonProps, dJ as IconButtonSize, dK as IconButtonTone, dL as IconButtonToneColor, dM as IconButtonVariant, dN as Input, dO as InputProps, e3 as Label, e5 as LabelProps, eo as PHONE_QUERY, ep as PasswordRevealLabels, eX as Select, eY as SelectProps, f9 as Spinner, fa as SpinnerProps, fd as TOUCH_TARGET_LARGE, fe as TabItem, ff as Tabs, fg as TabsLabels, fh as TabsProps, fi as Textarea, fj as TextareaProps, fN as buttonClasses, fX as resolvePasswordRevealLabels } from '../delete-account-setting-Dy4kJgUm.js';
+export { bI as Button, bJ as ButtonClassesOptions, bK as ButtonLinkProps, bL as ButtonProps, bM as ButtonSize, bN as ButtonTone, bO as ButtonVariant, bQ as Card, bR as CardAction, bS as CardActionProps, bT as CardContent, bU as CardContentProps, bV as CardDensity, bW as CardDescription, bX as CardDescriptionProps, bY as CardFooter, bZ as CardFooterProps, b_ as CardHeader, b$ as CardHeaderProps, c0 as CardProps, c1 as CardTitle, c2 as CardTitleLevel, c3 as CardTitleProps, c4 as CardTone, c5 as CharacterCountLabels, cr as DEFAULT_CHARACTER_COUNT_LABELS, cI as DEFAULT_PASSWORD_REVEAL_LABELS, cS as DEFAULT_TABS_LABELS, d6 as EmptyState, d7 as EmptyStateProps, d8 as FIELD_BASE, d9 as FIELD_DISPLAY, da as FIELD_FLOATING_PAD, db as FIELD_INVALID, dc as FIELD_TOUCH_TEXT, dd as FIELD_TRIGGER, de as FIELD_WRITABLE_LOOK, df as FLOATING_INPUT_CLASS, dg as FLOATING_LABEL_CLASS, dh as FieldChevron, di as FieldChevronProps, dr as FloatingField, ds as FloatingFieldProps, dG as IconButton, dH as IconButtonGlyphSize, dI as IconButtonLinkProps, dJ as IconButtonProps, dK as IconButtonSize, dL as IconButtonTone, dM as IconButtonToneColor, dN as IconButtonVariant, dO as Input, dP as InputProps, e4 as Label, e6 as LabelProps, ep as PHONE_QUERY, eq as PasswordRevealLabels, f7 as Select, f8 as SelectProps, fl as Spinner, fm as SpinnerProps, fp as TOUCH_TARGET_LARGE, fq as TabItem, fr as Tabs, fs as TabsLabels, ft as TabsProps, fu as Textarea, fv as TextareaProps, fZ as buttonClasses, g8 as resolvePasswordRevealLabels } from '../delete-account-setting-DiPX4Vue.js';
+import './write-lock.js';
 export { CompactControls, DISABLED_REASON_LINE_CLASS, DisabledReasonDisplay, DisabledReasonLine, FLOATING_LABEL_STATIC, FieldHint, FieldHintProps, FieldLabel, FieldLabelProps, useDisabledReasonLine } from './field-parts.js';
 export { FOCUS_RING, FOCUS_RING_WIDTH } from './focus-ring.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
-import '../data-table-labels-kpAAVi6g.js';
+import '../data-table-labels-BJ5JE_X2.js';
 import './data-table-sort.js';
 import './swipeable-row.js';
+import './status-dot.js';
+import './progress-bar.js';
+import './signed-amount.js';
+import './stat-tile.js';
+import './chip.js';
+import 'lucide-react';
 import './mini-calendar.js';
 import './calendar-heatmap.js';
 import './popover.js';
 import '../hooks/use-breakpoint.js';
-import './chip.js';
-import 'lucide-react';
 import './field-sync.js';
 import '../wizard/types.js';
 import '../tour/tour.js';
@@ -25,7 +30,6 @@ import './page-contents.js';
 import './series-chart-labels.js';
 import './pie-chart-labels.js';
 import './sparkline.js';
-import './stat-tile.js';
 import './signature-pad.js';
 import './password-strength.js';
 import './swatch-picker.js';
@@ -37,9 +41,6 @@ import '../hooks/use-search-param-state.js';
 import './measured-grid.js';
 import './user-avatar.js';
 import '../lib/person-name.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
 import '../shell/topbar-action-menu.js';
 import './menu-item.js';
 import './floating-panel.js';
@@ -55,7 +56,6 @@ import './error-boundary.js';
 import './authed-image.js';
 import './image-grid.js';
 import './lightbox.js';
-import './write-lock.js';
 import '../auth/sign-in-form.js';
 import '../landing/access.js';
 import '../landing/landing-labels.js';

package/dist/components/ui.js

@@ -23,6 +23,8 @@ import {
   useFieldHint,
   useLockReason,
   FLOATING_LABEL_STATIC,
+  LABEL_ABOVE_AT_LARGE,
+  LABEL_ABOVE_BOX,
   STATIC_LABEL_TYPE
 } from "./field-parts.js";
 import { FieldLabel, FLOATING_LABEL_STATIC as FLOATING_LABEL_STATIC2, FieldHint } from "./field-parts.js";
@@ -40,10 +42,15 @@ const BUTTON_SIZES_LARGE = {
   md: "large:min-h-[48px]",
   sm: "large:min-h-[48px] large:py-2.5"
 };
+const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
 const buttonVariantClasses = {
-  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)]",
+  primary: (
+    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the
+    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.
+    "border border-[var(--border)] bg-[var(--bg-surface-2)] text-[var(--text-primary)] hover:bg-active focus-visible:ring-[var(--brand)]"
+  ),
+  secondary: `border border-[var(--border)] bg-transparent text-[var(--text-primary)] ${HOVER_INK} focus-visible:ring-[var(--brand)]`,
+  ghost: `bg-transparent text-[var(--text-primary)] ${HOVER_INK} 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
@@ -61,6 +68,10 @@ const BUTTON_TONES = {
 };
 const TONED_VARIANTS = /* @__PURE__ */ new Set(["link", "ghost"]);
 const BUTTON_BOXED_DANGER = {
+  // Not boxed, but its hover is a fill: the danger wash under the danger text, as
+  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1
+  // over a light page.
+  ghost: "hover:bg-[var(--danger-bg)]",
   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)]"
 };
@@ -333,8 +344,10 @@ const ICON_BUTTON_TONES = {
     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-visible:ring-[var(--warning-border)]",
-    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus-visible:ring-[var(--warning-border)]"
+    quiet: "text-[var(--text-placeholder)] hover:bg-[var(--warning-bg)] hover:text-[var(--warning)] focus-visible:ring-warning-strong",
+    // The ring is warning's loud line (0.33, k27): `--warning-border`, amber-300, was a
+    // focus ring at 1.1:1 on the light surfaces.
+    toned: "text-[var(--warning)] hover:bg-[var(--warning-bg)] focus-visible:ring-warning-strong"
   },
   info: {
     quiet: "text-[var(--text-placeholder)] hover:bg-[var(--info-bg)] hover:text-[var(--info)] focus-visible:ring-[var(--info-border)]",
@@ -352,7 +365,7 @@ const ICON_BUTTON_TONES = {
     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)]";
+const ICON_BUTTON_MUTED = `text-[var(--text-placeholder)] ${HOVER_INK} hover:text-[var(--text-primary)]`;
 const QUIET_BY_DEFAULT = {
   danger: true,
   warning: false,
@@ -378,7 +391,7 @@ const ICON_BUTTON_DISABLED_REST = {
   shutter: "disabled:hover:bg-[var(--media-scrim)]"
 };
 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_PRESSED = "bg-[var(--brand-bg)] text-[var(--brand)] hover:bg-[var(--brand-bg-hover)] hover:text-brand-muted 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-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 = {
@@ -718,7 +731,7 @@ 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_FLOATING_PAD = "pt-4 pb-1 large:py-2";
 const FIELD_INVALID = "border-[var(--danger-border-strong)] ring-1 ring-[var(--danger-border-strong)] 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)";
@@ -741,20 +754,27 @@ function FieldChevron({ className, ...rest }) {
     }
   );
 }
+const LABEL_FLOATED_AT_LARGE = "large:text-caption large:leading-tight large:text-secondary large:transition-none";
 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",
+  "max-w-[calc(100%-1.5rem)] truncate-until-large",
   "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"
+  "peer-disabled:opacity-50",
+  LABEL_ABOVE_AT_LARGE,
+  "large:block",
+  LABEL_FLOATED_AT_LARGE
 );
 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-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"
+  "peer-disabled:opacity-50",
+  LABEL_ABOVE_AT_LARGE,
+  LABEL_FLOATED_AT_LARGE
 );
+const STATIC_ROW_CLASS = cn("pointer-events-none absolute inset-x-3 top-1 flex items-center gap-1", LABEL_ABOVE_AT_LARGE);
 function FloatingField({
   className,
   htmlFor,
@@ -767,11 +787,13 @@ function FloatingField({
 }) {
   const withHint = hint !== void 0 && !srOnlyLabel;
   const atEnd = withHint && staticLabel;
+  const above = label !== void 0 && !srOnlyLabel;
   const labelEl = label !== void 0 && /* @__PURE__ */ jsx(
     "label",
     {
       htmlFor,
-      className: srOnlyLabel ? "sr-only" : atEnd ? cn("pointer-events-none min-w-0 truncate", STATIC_LABEL_TYPE) : withHint ? "pointer-events-none min-w-0 truncate" : staticLabel ? FLOATING_LABEL_STATIC : FLOATING_LABEL_CLASS,
+      "data-field-label": above && !withHint ? "" : void 0,
+      className: srOnlyLabel ? "sr-only" : atEnd ? cn("pointer-events-none min-w-0 truncate-until-large", STATIC_LABEL_TYPE) : withHint ? "pointer-events-none min-w-0 truncate-until-large" : staticLabel ? FLOATING_LABEL_STATIC : FLOATING_LABEL_CLASS,
       children: label
     }
   );
@@ -779,8 +801,9 @@ function FloatingField({
     // `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: [
+    // a caller's stray `className` or `style` could unset it. At Large, with a label
+    // above, a grid: the label's row over the field's, the field's parts in the latter.
+    /* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", above && LABEL_ABOVE_BOX, className), children: [
       children,
       withHint ? (
         // Static: `inset-x-3` rather than `start-3`, so a long label truncates at
@@ -788,16 +811,10 @@ function FloatingField({
         // 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 })
-            ]
-          }
-        )
+        /* @__PURE__ */ jsxs("div", { "data-field-label": "", className: atEnd ? STATIC_ROW_CLASS : FLOATING_ROW_CLASS, children: [
+          labelEl,
+          /* @__PURE__ */ jsx("span", { className: "pointer-events-auto flex shrink-0 items-center", children: hint })
+        ] })
       ) : labelEl
     ] })
   );
@@ -1194,7 +1211,8 @@ const Select = forwardRef(function Select2(props, ref) {
                 // The floated label takes the top strip of a list box too, so its first
                 // row starts under the label rather than behind it. No bottom padding — see
                 // `dress`.
-                listBox ? "pt-5 pb-0" : FIELD_FLOATING_PAD,
+                // At Large the label stands above the field (§10.17): no strip.
+                listBox ? "pt-5 pb-0 large:pt-2" : FIELD_FLOATING_PAD,
                 "peer",
                 dress,
                 locked && FIELD_LOCKED,
@@ -1226,7 +1244,9 @@ function labelEdge(scrollTop, lineHeight) {
 }
 const TEXTAREA_LABEL_STRIP = cn(
   "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",
+  // Never at Large (0.33, §10.17): the label stands above the field, so there is no
+  // strip to keep scrolled text out of, and a layer here would hide the first line.
+  "not-large:peer-focus:block not-large:peer-[:not(:placeholder-shown)]:block",
   "peer-disabled:bg-[var(--bg-surface-2)] peer-[[readonly]]:bg-[var(--bg-surface-2)]",
   TEXTAREA_LABEL_EDGE
 );
@@ -1388,7 +1408,7 @@ const CARD_TONE_WASH = {
   success: "bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]"
 };
 const CARD_TONES_STRONG = {
-  warning: "border-2 border-[var(--warning)]",
+  warning: "border-2 border-warning-strong",
   danger: "border-2 border-[var(--danger-border-strong)]",
   info: "border-2 border-[var(--info)]",
   success: "border-2 border-[var(--success)]"