@godxjp/ui 31.2.0 → 31.4.0

package/dist/styles/control.css

@@ -1282,13 +1282,29 @@
     margin-inline-start: var(--segmented-count-gap);
     border-radius: var(--segmented-count-radius);
     padding-inline: var(--segmented-count-space-inline);
-    background: var(--segmented-count-background, hsl(var(--primary)));
-    color: var(--segmented-count-color, hsl(var(--primary-foreground)));
+
+    background: var(--segmented-count-background, hsl(var(--background)));
+    color: var(--segmented-count-color, hsl(var(--muted-foreground)));
     font-size: var(--segmented-count-font-size);
     line-height: 1;
     font-variant-numeric: tabular-nums;
   }
 
+  .ui-segmented-item[data-state="checked"] .ui-segmented-count {
+    background: var(
+      --segmented-count-selected-background,
+      hsl(var(--primary) / var(--segmented-count-selected-background-alpha, 100%))
+    );
+    color: var(--segmented-count-selected-color, hsl(var(--primary-foreground)));
+  }
+
+  @media (forced-colors: active) {
+    .ui-segmented-item[data-state="checked"] .ui-segmented-count {
+      outline: var(--segmented-count-forced-outline-width, var(--stroke-hairline)) solid
+        currentColor;
+    }
+  }
+
   .ui-tag-input {
     display: flex;
     flex-wrap: wrap;

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

@@ -361,6 +361,10 @@
     color: hsl(var(--muted-foreground));
   }
 
+  .ui-upload-trigger {
+    align-self: start;
+  }
+
   .ui-upload-grid {
     display: flex;
     flex-wrap: wrap;

package/dist/styles/form-layout.css

@@ -60,6 +60,9 @@
     inline-size: 100%;
 
     align-self: start;
+
+    --form-field-control-band: initial;
+    --form-field-first-line: initial;
   }
 
   .ui-form-field[data-layout="inline"] {
@@ -84,6 +87,40 @@
 
     min-height: var(--control-height);
     align-content: center;
+
+    grid-template-rows: minmax(var(--form-field-control-band, auto), auto);
+    align-items: center;
+  }
+
+  .ui-form-field-control:has(> .ui-form-field-note:first-child) {
+    grid-template-rows: none;
+  }
+
+  .ui-form-field-control
+    > fieldset
+    > :is(.ui-choice-group[data-orientation="vertical"], .ui-choice-field) {
+    align-self: start;
+    margin-block-start: max(
+      0px,
+      calc(
+        (
+            var(--form-field-control-band, 0px) - var(--font-size-base) *
+              var(--control-label-line-height)
+          ) /
+          2
+      )
+    );
+  }
+
+  .ui-form-field:has(
+    > .ui-form-field-control
+      > fieldset
+      > :is(.ui-control-multiline, [data-slot="textarea-affix-wrapper"])
+  ) {
+    --form-field-first-line: calc(
+      var(--control-border-width, var(--stroke-hairline)) + var(--control-multiline-padding-block) +
+        0.5lh
+    );
   }
 
   .ui-form-field-control > * {
@@ -96,13 +133,14 @@
     ) {
     grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
     align-items: start;
+    --form-field-control-band: var(--control-height);
     column-gap: var(--form-label-gap);
     row-gap: var(--space-stack-xs);
   }
 
   .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
     > .ui-form-field-label {
-    min-block-size: var(--control-height);
+    min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
     flex-wrap: wrap;
   }
   .ui-form-field[data-collapse-below="false"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -131,12 +169,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="sm"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -165,12 +204,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="md"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -199,12 +239,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="lg"]:is([data-layout="horizontal"], [data-layout="inline"])
@@ -233,12 +274,13 @@
       ) {
       grid-template-columns: var(--form-label-width, max-content) minmax(0, 1fr);
       align-items: start;
+      --form-field-control-band: var(--control-height);
       column-gap: var(--form-label-gap);
       row-gap: var(--space-stack-xs);
     }
     .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])
       > .ui-form-field-label {
-      min-block-size: var(--control-height);
+      min-block-size: calc(2 * var(--form-field-first-line, var(--control-height) / 2));
       flex-wrap: wrap;
     }
     .ui-form-field[data-collapse-below="xl"]:is([data-layout="horizontal"], [data-layout="inline"])

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "31.2.0",
+  "version": "31.4.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -67,6 +67,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css"
       ]
     },
@@ -74,6 +76,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
@@ -83,6 +86,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
@@ -99,6 +103,7 @@
         "shell-layout.css",
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
@@ -157,6 +162,9 @@
         "layout.css"
       ]
     },
+    "AuthExpiryProvider": {
+      "layers": []
+    },
     "AuthFooter": {
       "layers": [
         "shell-layout.css"
@@ -195,6 +203,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css"
       ]
     },
@@ -241,6 +251,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css"
       ]
     },
@@ -357,6 +369,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
@@ -390,6 +403,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css"
       ]
     },
@@ -397,6 +412,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "table-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
@@ -423,6 +439,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
@@ -490,6 +507,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
       ]
@@ -498,6 +517,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css"
       ]
     },
@@ -505,6 +526,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
       ]
@@ -516,6 +539,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
       ]
@@ -524,6 +549,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
       ]
@@ -549,6 +576,8 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
+        "dialog-layout.css",
         "alert-layout.css"
       ]
     },
@@ -649,6 +678,7 @@
         "shell-layout.css",
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"
@@ -666,6 +696,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css",
@@ -1103,6 +1134,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "data-display-layout.css",
@@ -1150,6 +1182,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "data-display-layout.css",
@@ -1162,6 +1195,7 @@
       "layers": [
         "layout.css",
         "control.css",
+        "text-layout.css",
         "dialog-layout.css",
         "alert-layout.css",
         "form-layout.css"

package/dist/styles/layout.css

@@ -918,7 +918,8 @@
 
     .ui-page-header-extra {
       width: auto;
-      flex-shrink: 1;
+      flex-shrink: 0;
+      max-inline-size: var(--page-header-extra-max-measure, 60%);
       min-inline-size: auto;
       justify-content: flex-end;
     }

package/dist/tokens/components/feedback.css

@@ -133,6 +133,8 @@
   --query-load-more-space-block-start: var(--space-stack-md);
   --query-loading-more-space-block-start: var(--space-stack-sm);
 
+  --query-auth-alert-max-inline-size: 36rem;
+
   --tooltip-max-width: 20rem;
   --tooltip-space-inline: var(--space-2);
   --tooltip-space-block: var(--space-1);

package/dist/tokens/components/segmented.css

@@ -46,4 +46,8 @@
   --segmented-count-gap: var(--space-1);
   --segmented-count-background: initial;
   --segmented-count-color: initial;
+  --segmented-count-selected-background: initial;
+  --segmented-count-selected-background-alpha: initial;
+  --segmented-count-selected-color: initial;
+  --segmented-count-forced-outline-width: initial;
 }

package/dist/tokens/semantic/layout.css

@@ -51,6 +51,8 @@
   --page-footer-pad-block-end: var(--space-stack-md);
   --page-header-divider: none;
 
+  --page-header-extra-max-measure: initial;
+
   --page-toolbar-background: transparent;
   --page-toolbar-pad-block: 0px;
   --page-toolbar-divider: initial;

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **175**
-- With ≥1 frame: **152** · zero-frame: **23**
+- Public components: **176**
+- With ≥1 frame: **152** · zero-frame: **24**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -20,6 +20,7 @@
 - [ ] `Paragraph`
 - [ ] `Link`
 - [ ] `ServiceCatalogCta`
+- [ ] `AuthExpiryProvider`
 - [ ] `SkeletonRows`
 - [ ] `OverlayPortalProvider`
 - [ ] `SkeletonDetail`
@@ -101,6 +102,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | TimelineGrid | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | Table | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | DataState | ✓ | N/A | · | N/A | · | · | · | · | · | · |
+| AuthExpiryProvider | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | InfiniteQueryState | ✓ | N/A | · | N/A | · | · | · | · | · | · |
 | Form | ✓ | ✓ | · | N/A | · | · | · | · | · | · |
 | FormField | ✓ | N/A | · | N/A | · | · | · | · | · | · |

package/docs/data-entry/segmented.tsx

@@ -90,6 +90,8 @@ export default function Demo() {
             <CardDescription>
               一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
               ます。ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
+              件数は Tabs と同じ扱いで、選択中の項目だけ強調し、ほかは控えめな色です。0 件を隠す
+              ときは `showZero: false`。
             </CardDescription>
           </CardHeader>
           <CardContent>

package/docs/feedback/auth-expiry.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { QueryClient, QueryClientProvider, useMutation, useQuery } from "@tanstack/react-query";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  DataTable,
+  type ColumnDef,
+} from "@godxjp/ui/data-display";
+import { SkeletonTable } from "@godxjp/ui/feedback";
+import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { AlertMutationFeedback, AuthExpiryProvider, DataState } from "@godxjp/ui/query";
+
+/**
+ * AuthExpiryProvider · the app root owns an expired session (gh#1022). Every DataState /
+ * InfiniteQueryState / AlertMutationFeedback / AlertQueryError underneath calls `onAuthExpired`
+ * automatically, once for any number of simultaneous 401s, and shows a neutral pending state
+ * instead of an error alert. A real app redirects to its IdP here:
+ *   window.location.assign(`/auth/login?return_to=${encodeURIComponent(location.href)}`)
+ */
+const queryClient = new QueryClient({
+  defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+});
+
+type Member = { id: string; name: string };
+
+const expired = () => Object.assign(new Error("Access token expired"), { status: 401 });
+
+function MembersCard() {
+  const { t } = useTranslation();
+  const columns: ColumnDef<Member>[] = [
+    { key: "id", header: "ID" },
+    { key: "name", header: t("authExpiryDocs.nameColumn") },
+  ];
+  const query = useQuery<Member[]>({
+    queryKey: ["auth-expiry-members"],
+    queryFn: async () => {
+      throw expired();
+    },
+  });
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>{t("authExpiryDocs.membersTitle")}</CardTitle>
+        <CardDescription>A 401 keeps the skeleton and announces the redirect.</CardDescription>
+      </CardHeader>
+      <CardContent flush>
+        <DataState query={query} skeleton={<SkeletonTable rows={3} columns={2} />}>
+          {(d) => <DataTable data={d} columns={columns} getRowId={(r) => r.id} />}
+        </DataState>
+      </CardContent>
+    </Card>
+  );
+}
+
+function InviteCard() {
+  const { t } = useTranslation();
+  const mutation = useMutation({
+    mutationFn: async () => {
+      throw expired();
+    },
+  });
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle level={2}>{t("authExpiryDocs.inviteTitle")}</CardTitle>
+        <CardDescription>A 401 on submit shows a muted status line, not an alert.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Flex direction="col" gap="md" align="start">
+          <Button onClick={() => mutation.mutate()}>{t("authExpiryDocs.send")}</Button>
+          <AlertMutationFeedback mutation={mutation} />
+        </Flex>
+      </CardContent>
+    </Card>
+  );
+}
+
+export default function Demo() {
+  const [calls, setCalls] = useState(0);
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthExpiryProvider onAuthExpired={() => setCalls((n) => n + 1)}>
+        <PageContainer
+          title="AuthExpiryProvider"
+          subtitle="Expired session handled once at the app root, never as a page error"
+        >
+          <Flex direction="col" gap="lg">
+            <Text size="sm" tone="muted">
+              onAuthExpired calls: {calls}
+            </Text>
+            <MembersCard />
+            <InviteCard />
+          </Flex>
+        </PageContainer>
+      </AuthExpiryProvider>
+    </QueryClientProvider>
+  );
+}

package/docs/i18n/messages/en.json

@@ -1444,5 +1444,11 @@
       "sample": "Sample",
       "date": "September 2026 · demo date"
     }
+  },
+  "authExpiryDocs": {
+    "membersTitle": "Members",
+    "nameColumn": "Name",
+    "inviteTitle": "Send invitation",
+    "send": "Send"
   }
 }

package/docs/i18n/messages/ja.json

@@ -1438,5 +1438,11 @@
       "sample": "サンプル",
       "date": "2026年9月 · 予定日はデモ用"
     }
+  },
+  "authExpiryDocs": {
+    "membersTitle": "メンバー",
+    "nameColumn": "氏名",
+    "inviteTitle": "招待を送信",
+    "send": "送信"
   }
 }

package/docs/i18n/messages/vi.json

@@ -1438,5 +1438,11 @@
       "sample": "Mẫu",
       "date": "Tháng 9/2026 · ngày dùng cho demo"
     }
+  },
+  "authExpiryDocs": {
+    "membersTitle": "Thành viên",
+    "nameColumn": "Họ tên",
+    "inviteTitle": "Gửi lời mời",
+    "send": "Gửi"
   }
 }

package/docs/navigation/tabs.tsx

@@ -146,6 +146,7 @@ export default function Demo() {
     },
   ]);
   const [editableTab, setEditableTab] = useState("je-0042");
+  const [inboxStatus, setInboxStatus] = useState("open");
 
   return (
     <PageContainer
@@ -646,6 +647,48 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        {/* STRIP-ONLY (gh#1021). The strip drives a region OUTSIDE the Tabs, so no tabpanel is
+            rendered and the view below is never remounted by a tab switch. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>controls · タブ列だけ(外部の領域を切り替える)</CardTitle>
+            <CardDescription>
+              controls に外部領域の id を渡すと tabpanel を描かず、選択中のタブの aria-controls
+              がその領域を指す。領域は Tabs の外にあるのでタブを切り替えても再マウントされない。
+              compound の TabsTrigger も items と同じ count を描く。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Tabs
+                aria-label="対応状況"
+                controls="tabs-inbox-view"
+                variant="line"
+                value={inboxStatus}
+                onValueChange={setInboxStatus}
+                items={[
+                  { value: "open", label: "未対応", count: 12, countLabel: "件" },
+                  { value: "doing", label: "対応中", count: 3, countLabel: "件" },
+                  { value: "done", label: "完了", count: 128, countLabel: "件" },
+                ]}
+              />
+              <section id="tabs-inbox-view" aria-label="スレッド一覧">
+                <Text as="p">表示中: {inboxStatus}</Text>
+              </section>
+              <Tabs aria-label="保存ビュー" controls="tabs-inbox-view" defaultValue="mine">
+                <TabsList variant="line">
+                  <TabsTrigger value="mine" count={4} countLabel="件">
+                    自分の担当
+                  </TabsTrigger>
+                  <TabsTrigger value="all" count={143} countLabel="件">
+                    すべて
+                  </TabsTrigger>
+                </TabsList>
+              </Tabs>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>indicator · animated</CardTitle>