@godxjp/ui 23.4.4 → 23.4.6

package/dist/components/data-display/data-table.js

@@ -73,6 +73,7 @@ import {
   tableCellPaddingClass,
   tableRowHeightClass
 } from "../../lib/control-styles.js";
+import { isDevelopment } from "../../lib/dev.js";
 function resolveColumnHideBelow(col) {
   if (col.hideBelow) return col.hideBelow;
   if (col.hiddenOnMobile) return "md";
@@ -796,7 +797,7 @@ DataTable.Content = function DataTableContent() {
   const fixedTableLayout = scroll?.x !== void 0 || visibleColumns.some((col) => col.ellipsis || columnWidth(col.width).style !== void 0);
   const missingHeaderNames = visibleColumns.filter((col) => isEmptyHeader(col.header) && !col.ariaLabel).map((col) => col.key).join("|");
   React.useEffect(() => {
-    if (process.env.NODE_ENV === "production" || !missingHeaderNames) return;
+    if (!isDevelopment() || !missingHeaderNames) return;
     for (const key of missingHeaderNames.split("|")) {
       console.warn(
         `[DataTable] Column "${key}" renders a <th> with no visible or accessible text. Give it a visible \`header\`, or set \`ariaLabel\` (e.g. "Actions"/"Select") so screen readers can announce the column and axe reports no empty-table-header violation.`

package/dist/components/data-entry/form-field.js

@@ -10,6 +10,7 @@ import { FieldIdentityContext, FieldNameContext, mergeAriaIds } from "../../lib/
 import { useOptionalAppContext } from "../../app/app-provider.js";
 import { useFormLayout } from "./form.js";
 import { firstBagMessage, useClaimErrorKey, useFormErrorsRegistry } from "./form-errors.js";
+import { isDevelopment } from "../../lib/dev.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const FOCUSABLE_SELECTOR = 'input:not([type="hidden"]), select, textarea, button, [tabindex]:not([tabindex="-1"])';
 function FormField({
@@ -55,7 +56,7 @@ function FormField({
   const fieldKey = field ?? name ?? id;
   const emitFieldNames = useOptionalAppContext()?.emitFieldNames ?? false;
   const isStatic = staticText !== void 0;
-  if (!isStatic && typeof process !== "undefined" && process.env?.NODE_ENV !== "production" && !React.isValidElement(children)) {
+  if (!isStatic && isDevelopment() && !React.isValidElement(children)) {
     console.warn(
       "FormField expects a single React element child to receive aria-describedby/aria-errormessage; the helper text and error message will not be associated with the control. Pass plain text via `staticText` instead of `children` for a read-only value row."
     );

package/dist/components/general/float-button.js

@@ -8,6 +8,7 @@ import { numberFormat } from "../../lib/intl-cache.js";
 import { cn } from "../../lib/utils.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Button } from "./button.js";
+import { isDevelopment } from "../../lib/dev.js";
 const GroupContext = React.createContext(null);
 const DEFAULT_ICON = /* @__PURE__ */ jsx(FileText, { "aria-hidden": "true" });
 const BUTTON_VARIANT = {
@@ -67,7 +68,7 @@ const FloatButtonRoot = React.forwardRef(function FloatButton({
   const mergedContent = isRenderable(content) ? content : description;
   const hasContent = isRenderable(mergedContent);
   const mergedIcon = !hasContent && icon == null ? DEFAULT_ICON : icon;
-  if (process.env.NODE_ENV !== "production" && mergedShape === "circle" && hasContent) {
+  if (isDevelopment() && mergedShape === "circle" && hasContent) {
     console.warn(
       "[@godxjp/ui] FloatButton: `content` is supported only when `shape` is `square` \u2014 a circle has no room for a line of text."
     );
@@ -153,7 +154,7 @@ function FloatButtonGroup({
   const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
   const isControlled = open != null;
   const isOpen = isControlled ? open : uncontrolledOpen;
-  if (process.env.NODE_ENV !== "production" && isControlled && !trigger) {
+  if (isDevelopment() && isControlled && !trigger) {
     console.warn(
       "[@godxjp/ui] FloatButton.Group: `open` needs to be used together with `trigger`."
     );

package/dist/components/general/typography.js

@@ -6,6 +6,7 @@ import { cn } from "../../lib/utils.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../feedback/tooltip.js";
 import { Textarea } from "../data-entry/textarea.js";
+import { isDevelopment } from "../../lib/dev.js";
 const COPIED_RESET_MS = 3e3;
 const DECORATION_ELEMENTS = [
   ["strong", "strong"],
@@ -409,7 +410,7 @@ const TextBase = React.forwardRef((props, ref) => {
   const ellipsisRowCount = ellipsis ? ellipsisRows(ellipsis) : 0;
   const effectiveClamp = ellipsisRowCount > 1 ? ellipsisRowCount : ellipsis ? void 0 : clampLines;
   const truncating = (truncate === true || ellipsisRowCount === 1) && effectiveClamp === void 0;
-  if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+  if (isDevelopment()) {
     if (clamp !== void 0 && clampLines === void 0) {
       console.warn(`Text: \`clamp\` must be a finite number \u2265 1 (got ${String(clamp)}); ignored.`);
     }

package/dist/components/layout/app-shell.js

@@ -7,6 +7,7 @@ import { useTranslation } from "../../i18n/use-translation.js";
 import { Sheet, SheetBody, SheetContent, SheetHeader, SheetTrigger } from "../feedback/sheet.js";
 import { NavSurfaceProvider } from "./nav-surface.js";
 import { TopbarItem } from "./topbar-item.js";
+import { isDevelopment } from "../../lib/dev.js";
 function useAppShellNavigationMode() {
   return useMediaQuery("(width <= 56.25rem)") ? "drawer" : "docked";
 }
@@ -59,7 +60,7 @@ function AppShell({
     }
   };
   const hasTopbarContent = topbar !== void 0 || topbarLeft !== void 0 || topbarRight !== void 0 || logo !== void 0;
-  if (process.env.NODE_ENV !== "production" && topbar !== void 0) {
+  if (isDevelopment() && topbar !== void 0) {
     const ignored = [
       topbarLeft !== void 0 && "topbarLeft",
       topbarRight !== void 0 && "topbarRight"

package/dist/components/layout/error-surface.js

@@ -9,6 +9,7 @@ import { Progress } from "../data-display/progress.js";
 import { Text } from "../general/typography.js";
 import { CenteredShell } from "./centered-shell.js";
 import { dateTimeFormat, numberFormat } from "../../lib/intl-cache.js";
+import { isDevelopment } from "../../lib/dev.js";
 const STATUS_META = {
   400: { icon: TriangleAlert, tone: "warning" },
   403: { icon: ShieldAlert, tone: "warning" },
@@ -23,7 +24,7 @@ function singleAction(action) {
   const flattened = React.Children.toArray(action).flatMap(
     (child) => React.isValidElement(child) && child.type === React.Fragment ? React.Children.toArray(child.props.children) : [child]
   );
-  if (flattened.length > 1 && process.env.NODE_ENV !== "production") {
+  if (flattened.length > 1 && isDevelopment()) {
     console.error(
       "[@godxjp/ui] ErrorSurface: `action` takes EXACTLY ONE recovery action. The extra elements were dropped. Put support contact or secondary guidance in `description`."
     );

package/dist/components/navigation/tabs.js

@@ -166,6 +166,12 @@ function Tabs({
   const needsBar = Boolean(extraStart || extraEnd || showAdd || collapsible);
   const card = variant === "card" || variant === "editable-card";
   const sizeTriggerClassName = triggerSizeClassName(size);
+  const CARD_FACE = {
+    top: "rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] data-[state=active]:border-b-background",
+    bottom: "rounded-[0_0_var(--tabs-card-radius)_var(--tabs-card-radius)] data-[state=active]:border-t-background",
+    start: "rounded-s-[var(--tabs-card-radius)] rounded-e-none data-[state=active]:border-e-background",
+    end: "rounded-e-[var(--tabs-card-radius)] rounded-s-none data-[state=active]:border-s-background"
+  };
   const list = items ? /* @__PURE__ */ jsx(
     TabsList,
     {
@@ -239,11 +245,21 @@ function Tabs({
               // pixel and `justify-content` has nothing left to centre — measured, the leading and
               // trailing gaps were both 0px with `centered` on and off.
               centered && "flex-none",
-              // CARD face: a real boundary on every side, rounded on the leading block edge only.
-              // The ACTIVE face's block-end edge is the SURFACE colour, never `transparent`: the
-              // rail is an inset shadow at the strip's padding-box edge, so a see-through border
-              // would let that 1px of rail run straight across the tab it is joined to.
-              card && "data-[state=active]:border-b-background rounded-[var(--tabs-card-radius)_var(--tabs-card-radius)_0_0] border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]"
+              // The merged edge is the SURFACE colour, never `transparent`: the rail is an inset
+              // shadow at the strip's padding-box edge, so a see-through border would let that 1px
+              // of rail run straight across the tab it is joined to.
+              // CARD face: a real boundary on every side, opened toward the panel by
+              // `CARD_FACE`. `flex-none` is antd's geometry, not a preference — its
+              // `nav-list` is a plain `display: flex` with no `flex-grow` on the tab, so a
+              // card tab is CONTENT-WIDTH. The base trigger is `flex-1`, which made every
+              // card tab stretch to an equal share of the strip: measured, three tabs in a
+              // 942px strip came out 311px each for labels needing ~70px, and with
+              // `justify-center` the label and its × floated in the middle of that box —
+              // the × ended up 90px from the tab's own trailing edge (179px on a two-tab
+              // strip). antd's is 8px away. This is also why the face read as a free-standing
+              // bordered box rather than a tab.
+              card && "flex-none border-[color:hsl(var(--border))] bg-[hsl(var(--tabs-card-background,var(--muted)))]",
+              card && CARD_FACE[placement]
             ),
             children: [
               item.icon ? /* @__PURE__ */ jsx(
@@ -463,7 +479,7 @@ const TabsTrigger = React.forwardRef(
           // The line indicator lives in src/styles/navigation-layout.css so it reads --tabs-indicator-*.
           // Selected and focused stay visually distinct (WCAG 2.4.7): selected is a 1px hairline in the
           // border, focused is the 2px ring plus its halo outside it.
-          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
+          "text-muted-foreground ring-offset-background hover:text-foreground ui-focus-ring data-[state=active]:bg-background data-[state=active]:text-foreground group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:border-primary/25 relative inline-flex flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-3 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:flex-none group-data-[orientation=vertical]/tabs:justify-start group-data-[variant=line]/tabs-list:border-e-0 group-data-[variant=line]/tabs-list:border-b-0 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs:group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none",
           // The tier the root was given. Without this the compound form ignored `size` outright.
           triggerSizeClassName(size),
           className

package/dist/components/ui/password-input.js

@@ -5,6 +5,7 @@ import { Eye, EyeOff } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
 import { Input } from "../data-entry/input.js";
+import { isDevelopment } from "../../lib/dev.js";
 const PasswordInput = React.forwardRef(
   ({ className, visibilityToggle = true, iconRender, suffix, trailingIcon, allowClear, ...props }, ref) => {
     const { t } = useTranslation();
@@ -19,7 +20,7 @@ const PasswordInput = React.forwardRef(
       onVisibleChange?.(next);
     };
     const toggleOwnsTrailing = showToggle;
-    if (toggleOwnsTrailing && process.env?.NODE_ENV !== "production" && (suffix != null || trailingIcon != null || allowClear)) {
+    if (toggleOwnsTrailing && isDevelopment() && (suffix != null || trailingIcon != null || allowClear)) {
       console.warn(
         "[godxjp-ui] PasswordInput: the reveal toggle owns the trailing slot, so `suffix` / `trailingIcon` / `allowClear` are ignored. Use `leadingIcon` (or `prefix`), or pass `visibilityToggle={false}` to hand the slot back."
       );

package/dist/components/ui/separator.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import { Separator as AriaSeparator } from "react-aria-components";
 import { padStepToken } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
+import { isDevelopment } from "../../lib/dev.js";
 const Separator = React.forwardRef(
   ({
     className,
@@ -20,7 +21,7 @@ const Separator = React.forwardRef(
   }, ref) => {
     const hasLabel = typeof label === "string" && label.trim() !== "";
     const labelled = hasLabel && orientation === "horizontal";
-    if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
+    if (isDevelopment()) {
       if (hasLabel && orientation === "vertical") {
         console.warn(
           'Separator: `label` is rendered on orientation="horizontal" only; it was ignored. Use a horizontal rule for a day divider / unread watermark.'

package/dist/email/tokens.generated.d.ts

@@ -33,7 +33,7 @@ export declare const EMAIL_COLOR_SOURCE: {
     };
     readonly border: {
         readonly cssVar: "--border";
-        readonly hsl: "30 7% 83%";
+        readonly hsl: "30 7% 93%";
     };
     readonly primary: {
         readonly cssVar: "--primary";
@@ -92,7 +92,7 @@ export declare const EMAIL_COLOR_SOURCE_DARK: {
     };
     readonly border: {
         readonly cssVar: "--border";
-        readonly hsl: "45 6% 22%";
+        readonly hsl: "45 6% 19%";
     };
     readonly primary: {
         readonly cssVar: "--primary";

package/dist/email/tokens.generated.js

@@ -25,7 +25,7 @@ const EMAIL_COLOR_SOURCE = {
   },
   "border": {
     "cssVar": "--border",
-    "hsl": "30 7% 83%"
+    "hsl": "30 7% 93%"
   },
   "primary": {
     "cssVar": "--primary",
@@ -83,7 +83,7 @@ const EMAIL_COLOR_SOURCE_DARK = {
   },
   "border": {
     "cssVar": "--border",
-    "hsl": "45 6% 22%"
+    "hsl": "45 6% 19%"
   },
   "primary": {
     "cssVar": "--primary",

package/dist/lib/dev.d.ts

@@ -0,0 +1,45 @@
+/**
+ * `isDevelopment()` — the ONE place this package is allowed to ask whether it is in a dev build.
+ *
+ * WHY THIS EXISTS, and it is a crash rather than a tidiness question. Eight shipped modules read
+ * `process.env.NODE_ENV` to decide whether to emit a development warning. Three of them guarded
+ * the read with `typeof process !== "undefined"`; five did not, and `process` is not a browser
+ * global. Nothing in the build replaces it either — `tsup.config.ts` declares no `define`, and
+ * `grep -o 'process\.env' dist` on the published tarball of 23.4.4 returns 9 hits, raw.
+ *
+ * Measured, not theorised: this repo's own preview app (Vite 8, dev mode) renders
+ * `/isolate/data-entry-password-strength` as **"Preview render failed — process is not defined"**,
+ * six DOM nodes and nothing else. `PasswordInput` is one of the five unguarded modules and that
+ * page renders it. A bundler that happens to define `process.env.NODE_ENV` papers over it, which
+ * is exactly why it survived: most consumers' toolchains do, and the ones that do not get a blank
+ * screen rather than a warning.
+ *
+ * The helper reads the guard ONCE so the two halves cannot drift apart again, and it fails SAFE:
+ * where `process` is absent we cannot tell dev from production, so the answer is `false` and the
+ * warnings go quiet. A missing warning is a cost; a component that throws while rendering is not
+ * a cost, it is a broken page.
+ *
+ * A new bare `process.env` read in `src/components/**` is a CI failure — see
+ * `src/lib/__tests__/dev-guard.test.ts`.
+ *
+ * TWO THINGS ABOUT THE SHAPE BELOW, and the first one is why the three "guarded" modules were
+ * only half guarded.
+ *
+ * NO OPTIONAL CHAINING ON `process.env`. It does not survive the build. Written as
+ * `process.env?.NODE_ENV`, the transformed output measured in this repo's own vitest pipeline is
+ *
+ *     return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+ *
+ * — the `?.` is GONE, because a bundler `define` matches the text `process.env` and substitutes
+ * through it, discarding the chain. So `?.` is not a guard here; it reads like one, which is
+ * worse than nothing. `typeof process` does survive (measured in the same dump), and a truthiness
+ * test on `process.env` survives as a truthiness test whatever it is replaced with.
+ *
+ * THE LITERAL IS KEPT ON THE LAST LINE ON PURPOSE. `process.env.NODE_ENV` is the exact text every
+ * bundler's `define` looks for, and that substitution is what lets a consumer's production build
+ * fold these branches away and drop the warning strings entirely. Reading the global indirectly
+ * (`globalThis.process`) would be equally crash-proof and would cost every consumer that
+ * dead-code elimination, so the order of the checks does the work instead: the guard runs first,
+ * and the replaceable literal is only reached once `env` is known to exist.
+ */
+export declare function isDevelopment(): boolean;

package/dist/lib/dev.js

@@ -0,0 +1,7 @@
+function isDevelopment() {
+  if (typeof process === "undefined" || !process.env) return false;
+  return process.env.NODE_ENV !== "production";
+}
+export {
+  isDevelopment
+};

package/dist/styles/alert-layout.css

@@ -76,19 +76,19 @@
   }
 
   [data-slot="alert-icon"][data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   [data-slot="alert-icon"][data-tone="warning"] {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
 
   [data-slot="alert-icon"][data-tone="success"] {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
 
   [data-slot="alert-icon"][data-tone="info"] {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   [data-slot="alert-body"] {

package/dist/styles/chart-layout.css

@@ -27,6 +27,10 @@
   color: hsl(var(--muted-foreground));
 }
 
+.ui-chart .recharts-legend-item-text {
+  color: hsl(var(--muted-foreground)) !important;
+}
+
 .ui-chart .recharts-default-tooltip {
   border-radius: var(--radius);
   border: 1px solid hsl(var(--border)) !important;

package/dist/styles/control.css

@@ -1053,6 +1053,7 @@
     width: 1.25rem;
     height: 1.25rem;
   }
+
   .ui-rating-star-filled {
     color: hsl(var(--warning));
   }
@@ -1572,7 +1573,7 @@
   }
 
   .ui-search-select-placeholder[data-tone="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-search-select-footer {

package/dist/styles/data-entry-layout.css

@@ -87,15 +87,15 @@
   }
 
   .ui-password-strength-segment[data-tone="destructive"] {
-    background: hsl(var(--destructive));
+    background: hsl(var(--mark-destructive));
   }
 
   .ui-password-strength-segment[data-tone="warning"] {
-    background: hsl(var(--warning));
+    background: hsl(var(--mark-warning));
   }
 
   .ui-password-strength-segment[data-tone="success"] {
-    background: hsl(var(--success));
+    background: hsl(var(--mark-success));
   }
 
   .ui-password-strength-meta {
@@ -133,11 +133,11 @@
   }
 
   .ui-password-strength-checklist-item[data-state="passed"] svg {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
 
   .ui-password-strength-checklist-item[data-state="failed"] svg {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 }
 

package/dist/styles/form-layout.css

@@ -8,7 +8,7 @@
 
   .ui-form-field-required {
     margin-inline-start: var(--space-inline-xs);
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-form {

package/dist/styles/layout.css

@@ -1247,7 +1247,7 @@
   }
 
   .ui-filter-bar-error {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-legal-document-scope {

package/dist/styles/motion.css

@@ -76,16 +76,16 @@
     color: hsl(var(--primary));
   }
   .ui-activity[data-tone="success"] .ui-activity-mark {
-    color: hsl(var(--success));
+    color: hsl(var(--text-success));
   }
   .ui-activity[data-tone="warning"] .ui-activity-mark {
-    color: hsl(var(--warning));
+    color: hsl(var(--text-warning));
   }
   .ui-activity[data-tone="destructive"] .ui-activity-mark {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
   .ui-activity[data-tone="info"] .ui-activity-mark {
-    color: hsl(var(--info));
+    color: hsl(var(--text-info));
   }
 
   .ui-activity-dot {

package/dist/styles/navigation-layout.css

@@ -60,7 +60,16 @@
 
   [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
     [data-slot="tabs-trigger"]::after {
-    inset-block-end: calc(-1 * var(--tabs-indicator-offset));
+    inset-block-end: calc(
+      -1 *
+        (
+          var(--tabs-indicator-offset) + var(--tabs-list-line-space-inset) +
+            var(
+              --tabs-list-focus-ring-space-inset,
+              calc(var(--focus-ring-width) + var(--focus-ring-glow-width))
+            )
+        )
+    );
     block-size: var(--tabs-indicator-size);
     inline-size: calc(100% - 2 * var(--tabs-indicator-inset));
     inset-inline-start: var(--tabs-indicator-inset);
@@ -204,6 +213,38 @@
     box-shadow: inset 0 calc(-1 * var(--tabs-card-rail-border-width)) 0 hsl(var(--border));
   }
 
+  [data-slot="tabs"][data-variant="card"][data-placement="bottom"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="bottom"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset 0 var(--tabs-card-rail-border-width) 0 hsl(var(--border));
+  }
+
+  [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
+  }
+
+  [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
+  }
+
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
+    [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
+  }
+
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
+    [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+    [data-slot="tabs-list"] {
+    box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;
@@ -223,7 +264,8 @@
     color: hsl(var(--accent-foreground));
   }
 
-  .ui-tabs-tab-remove-icon {
+  .ui-tabs-tab-remove-icon,
+  .ui-tabs-tab-remove > :is(svg, img) {
     inline-size: var(--tabs-tab-remove-icon-size);
     block-size: var(--tabs-tab-remove-icon-size);
   }
@@ -374,7 +416,7 @@
   }
 
   .ui-dropdown-menu-item[data-variant="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-dropdown-menu-separator,
@@ -461,7 +503,7 @@
   }
 
   .ui-steps-inline-item[data-status="error"] .ui-steps-inline-control {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control {
@@ -590,7 +632,7 @@
 
   .ui-dropdown-menu-item[data-variant="destructive"][data-highlighted] {
     background: hsl(var(--destructive) / 0.1);
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-dropdown-menu-item[data-disabled],
@@ -709,7 +751,7 @@
   }
 
   .ui-steps-title[data-status="error"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-steps-subtitle {

package/dist/styles/table-layout.css

@@ -121,6 +121,7 @@
   }
 
   .ui-data-table-sort-button {
+    position: relative;
     display: inline-flex;
     align-items: center;
     gap: var(--space-inline-xs);
@@ -132,6 +133,18 @@
     outline: none;
   }
 
+  .ui-data-table-sort-button::after {
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   .ui-data-table-bulk {
     display: flex;
     align-items: center;

package/dist/tokens/foundation.css

@@ -20,7 +20,8 @@
   --accent-foreground: 48 8% 13%;
   --destructive: 357 64% 44%;
   --destructive-foreground: 60 33% 99%;
-  --border: 30 7% 83%;
+
+  --border: 30 7% 93%;
 
   --input: 30 7% 53%;
 
@@ -331,7 +332,8 @@
 
   --destructive: 357 55% 48%;
   --destructive-foreground: 0 0% 100%;
-  --border: 45 6% 22%;
+
+  --border: 45 6% 19%;
 
   --input: 45 6% 47%;
 

package/docs/data-entry/password-strength.tsx

@@ -11,7 +11,9 @@ import { Flex, PageContainer } from "@godxjp/ui/layout";
  */
 export default function Demo() {
   const [signupPassword, setSignupPassword] = useState("");
-  const [resetPassword, setResetPassword] = useState("");
+  /* Seeded so the PASSED state is on screen without typing: the checklist's success icon is
+   * otherwise only reachable by interaction, which means no sweep can measure it (gh#612). */
+  const [resetPassword, setResetPassword] = useState("Passw0rdSeed");
 
   return (
     <PageContainer

package/docs/navigation/dropdown-menu.tsx

@@ -300,6 +300,38 @@ export default function Demo() {
             </DropdownMenu>
           </CardContent>
         </Card>
+        {/* defaultOpen — OPEN ON MOUNT, on purpose, and this is the only example on the page that
+            is. A menu paints nothing until it is opened, so for as long as this page has existed
+            no sweep has ever measured a single menu pixel: that is how
+            `.ui-dropdown-menu-item[data-variant="destructive"]` — the label on a Delete row, i.e.
+            prose — kept the destructive FILL tier at 2.95:1 on dark (gh#612). Same reasoning as
+            `?toast=` in check-contrast's route list: a surface that needs an interaction is a
+            surface no gate sees. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>defaultOpen · 計測できる状態で開いておく</CardTitle>
+            <CardDescription>
+              antd の open/defaultOpen。ここだけはマウント時から開いたままにしてある。
+              閉じたメニューは 1 ピクセルも描かないので、どのスイープにも測れない。
+              destructive の行が読める色で描かれているかは、開いていて初めて測れる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <DropdownMenu defaultOpen>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm">
+                  仕訳アクション
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="start">
+                <DropdownMenuItem>編集</DropdownMenuItem>
+                <DropdownMenuItem>複製</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">削除</DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </CardContent>
+        </Card>
       </Flex>
     </PageContainer>
   );

package/docs/navigation/filter-bar.tsx

@@ -128,6 +128,26 @@ export default function Demo() {
           />
         </Flex>
 
+        {/* error — the ONE sentence that says why a filter set was refused, and the reason this
+            page has an example at all: `.ui-filter-bar-error` was painted with the destructive
+            FILL tier (2.95:1 on dark, gh#612) and NO route rendered it, so no sweep could ever
+            have caught that. Static, not behind a submit: a surface that needs an interaction is
+            a surface `check:contrast` does not measure. */}
+        <Flex direction="col" gap="xs">
+          <Text size="xs" tone="muted">
+            error · role=&quot;alert&quot; line under the bar, painted from the TEXT tier
+          </Text>
+          <FilterBar
+            search={{
+              value: modelQuery,
+              onValueChange: setModelQuery,
+              placeholder: "氏名・メールで検索",
+              ariaLabel: "メンバーを検索",
+            }}
+            error="期間の開始日が終了日より後です。条件を修正してください。"
+          />
+        </Flex>
+
         {/* overflow="wrap" (default) — stacked below 640px, wrapping rows above. */}
         <Flex direction="col" gap="xs">
           <Text size="xs" tone="muted">

package/docs/navigation/steps.tsx

@@ -27,7 +27,11 @@ const onboardingSteps = [
 export default function Demo() {
   const [approvalCurrent, setApprovalCurrent] = useState(1);
   const [wizardCurrent, setWizardCurrent] = useState(0);
-  const [hasError, setHasError] = useState(false);
+  /* Seeded TRUE so `status="error"` paints on mount. The toggle below is still the point of the
+   * demo, but starting from `false` meant the error state was reachable only by clicking —
+   * and a surface that needs an interaction is a surface no sweep measures (gh#612), which is
+   * how `.ui-steps-title[data-status="error"]` kept the destructive FILL tier unnoticed. */
+  const [hasError, setHasError] = useState(true);
 
   return (
     <PageContainer
@@ -256,6 +260,15 @@ export default function Demo() {
                 value={1}
                 items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
               />
+              {/* status="error" on the INLINE form too. The vertical/horizontal error title had a
+                  route; `.ui-steps-inline-item[data-status="error"] .ui-steps-inline-control` did
+                  not, and it reads the same tone token (gh#612). */}
+              <Steps
+                type="inline"
+                status="error"
+                value={1}
+                items={[{ title: "コード入力" }, { title: "確認" }, { title: "完了" }]}
+              />
             </Flex>
           </CardContent>
         </Card>

package/docs/navigation/tabs.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { Trash2 } from "lucide-react";
+import { CircleX } from "lucide-react";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
@@ -547,7 +547,7 @@ export default function Demo() {
                 id="antd-remove-icon"
                 variant="editable-card"
                 defaultValue="je-0042"
-                closeIcon={<Trash2 aria-hidden="true" />}
+                closeIcon={<CircleX aria-hidden="true" />}
                 onEdit={() => undefined}
                 items={[
                   {
@@ -600,6 +600,26 @@ export default function Demo() {
                 size="lg"
                 items={journalItems}
               />
+              {/* CARD on the vertical axis. `card` + `bottom` above had shipped upside down, and
+                  `start`/`end` had no card example at all — so the rail, which is drawn with a
+                  box-shadow and therefore cannot be logical, had nothing to be measured against
+                  in either direction. */}
+              <Tabs
+                id="antd-card-start"
+                defaultValue="pending"
+                variant="card"
+                tabPlacement="start"
+                size="sm"
+                items={journalItems}
+              />
+              <Tabs
+                id="antd-card-end"
+                defaultValue="pending"
+                variant="card"
+                tabPlacement="end"
+                size="sm"
+                items={journalItems}
+              />
             </Flex>
           </CardContent>
         </Card>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.4",
-  "godxUiMcp": "23.4.4",
+  "version": "23.4.6",
+  "godxUiMcp": "23.4.6",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",