@godxjp/ui 23.4.4 → 23.4.5

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/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/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/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,12 @@
     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));
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;
@@ -223,7 +238,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 +390,7 @@
   }
 
   .ui-dropdown-menu-item[data-variant="destructive"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-dropdown-menu-separator,
@@ -461,7 +477,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 +606,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 +725,7 @@
   }
 
   .ui-steps-title[data-status="error"] {
-    color: hsl(var(--destructive));
+    color: hsl(var(--text-error));
   }
 
   .ui-steps-subtitle {

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={[
                   {

package/package.json

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