@godxjp/ui 19.2.0 → 19.3.1

package/docs/foundation/email-tokens.tsx

@@ -139,8 +139,12 @@ export default function Demo() {
             <iframe
               title="Transactional email specimen at 480px"
               srcDoc={specimen}
-              className="border-border bg-background w-full rounded-md border"
-              style={{ height: 560 }}
+              className="bg-background w-full"
+              style={{
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "var(--radius-md)",
+                height: 560,
+              }}
             />
           </CardContent>
         </Card>
@@ -160,8 +164,13 @@ export default function Demo() {
             <iframe
               title="Transactional email specimen at 360px"
               srcDoc={specimen}
-              className="border-border bg-background rounded-md border"
-              style={{ width: 360, height: 620 }}
+              className="bg-background"
+              style={{
+                border: "1px solid hsl(var(--border))",
+                borderRadius: "var(--radius-md)",
+                width: 360,
+                height: 620,
+              }}
             />
           </CardContent>
         </Card>
@@ -182,39 +191,41 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
-              {[
-                { label: "Inline <svg>", markup: EMAIL_BRAND_MARK.svg },
-                {
-                  // Prose label, not markup: it names the email delivery form. The real delivery
-                  // on the next line is a self-contained data: URI (email clients block remote
-                  // images) and it does carry alt="GoDX".
-                  // ui-audit-disable-next-line img-needs-alt
-                  label: "data: URL in <img>",
-                  markup: `<img src="${EMAIL_BRAND_MARK.dataUri}" width="${EMAIL_BRAND_MARK.widthPx}" height="${EMAIL_BRAND_MARK.heightPx}" alt="GoDX">`,
-                },
-                // Prose label, not markup: a raw <table> is the only brand-mark fallback that
-                // renders in email clients without SVG support, so the label names it literally.
-                // ui-audit-disable-next-line no-raw-table
-                { label: "<table> fallback", markup: EMAIL_BRAND_MARK.tableHtml },
-              ].map((item) => (
-                <Flex key={item.label} direction="col" gap="sm">
-                  <div
-                    // eslint-disable-next-line react/no-danger
-                    dangerouslySetInnerHTML={{ __html: item.markup }}
-                  />
-                  <Text size="sm" tone="muted">
-                    {item.label}
-                  </Text>
-                </Flex>
-              ))}
-            </ResponsiveGrid>
-            <Flex direction="col" gap="xs" className="mt-4">
-              <Text size="sm" tone="muted">
-                viewBox {EMAIL_BRAND_MARK.viewBox} · {EMAIL_BRAND_MARK.width}×
-                {EMAIL_BRAND_MARK.height} · capsule {EMAIL_COLORS.brand} · glyph{" "}
-                {EMAIL_COLORS.brandForeground}
-              </Text>
+            <Flex direction="col" gap="md">
+              <ResponsiveGrid columns={{ sm: 1, md: 3 }}>
+                {[
+                  { label: "Inline <svg>", markup: EMAIL_BRAND_MARK.svg },
+                  {
+                    // Prose label, not markup: it names the email delivery form. The real delivery
+                    // on the next line is a self-contained data: URI (email clients block remote
+                    // images) and it does carry alt="GoDX".
+                    // ui-audit-disable-next-line img-needs-alt
+                    label: "data: URL in <img>",
+                    markup: `<img src="${EMAIL_BRAND_MARK.dataUri}" width="${EMAIL_BRAND_MARK.widthPx}" height="${EMAIL_BRAND_MARK.heightPx}" alt="GoDX">`,
+                  },
+                  // Prose label, not markup: a raw <table> is the only brand-mark fallback that
+                  // renders in email clients without SVG support, so the label names it literally.
+                  // ui-audit-disable-next-line no-raw-table
+                  { label: "<table> fallback", markup: EMAIL_BRAND_MARK.tableHtml },
+                ].map((item) => (
+                  <Flex key={item.label} direction="col" gap="sm">
+                    <div
+                      // eslint-disable-next-line react/no-danger
+                      dangerouslySetInnerHTML={{ __html: item.markup }}
+                    />
+                    <Text size="sm" tone="muted">
+                      {item.label}
+                    </Text>
+                  </Flex>
+                ))}
+              </ResponsiveGrid>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  viewBox {EMAIL_BRAND_MARK.viewBox} · {EMAIL_BRAND_MARK.width}×
+                  {EMAIL_BRAND_MARK.height} · capsule {EMAIL_COLORS.brand} · glyph{" "}
+                  {EMAIL_COLORS.brandForeground}
+                </Text>
+              </Flex>
             </Flex>
           </CardContent>
         </Card>
@@ -235,8 +246,12 @@ export default function Demo() {
               {colorRows.map((row) => (
                 <Flex key={row.token} direction="col" gap="xs">
                   <div
-                    className="border-border h-12 rounded-md border"
-                    style={{ backgroundColor: row.hex }}
+                    className="h-12"
+                    style={{
+                      border: "1px solid hsl(var(--border))",
+                      borderRadius: "var(--radius-md)",
+                      backgroundColor: row.hex,
+                    }}
                   />
                   <Text size="sm">{row.token}</Text>
                   <Flex gap="xs" align="center">
@@ -271,33 +286,35 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="col" gap="xs" className="mb-4">
-              {fontStacks.map((stack) => (
-                <Flex key={stack.label} direction="col" gap="xs">
-                  <Badge tone="neutral" variant="outline">
-                    {stack.label}
-                  </Badge>
-                  <Text size="sm" tone="muted">
-                    {stack.value}
-                  </Text>
-                </Flex>
-              ))}
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                {fontStacks.map((stack) => (
+                  <Flex key={stack.label} direction="col" gap="xs">
+                    <Badge tone="neutral" variant="outline">
+                      {stack.label}
+                    </Badge>
+                    <Text size="sm" tone="muted">
+                      {stack.value}
+                    </Text>
+                  </Flex>
+                ))}
+              </Flex>
+              <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
+                {geometryGroups.map((group) => (
+                  <Flex key={group.title} direction="col" gap="xs">
+                    <Text weight="medium">{group.title}</Text>
+                    {group.rows.map(([label, value]) => (
+                      <Flex key={label} justify="between" gap="sm">
+                        <Text size="sm" tone="muted">
+                          {label}
+                        </Text>
+                        <Text size="sm">{value}</Text>
+                      </Flex>
+                    ))}
+                  </Flex>
+                ))}
+              </ResponsiveGrid>
             </Flex>
-            <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 4 }}>
-              {geometryGroups.map((group) => (
-                <Flex key={group.title} direction="col" gap="xs">
-                  <Text weight="medium">{group.title}</Text>
-                  {group.rows.map(([label, value]) => (
-                    <Flex key={label} justify="between" gap="sm">
-                      <Text size="sm" tone="muted">
-                        {label}
-                      </Text>
-                      <Text size="sm">{value}</Text>
-                    </Flex>
-                  ))}
-                </Flex>
-              ))}
-            </ResponsiveGrid>
           </CardContent>
         </Card>
       </Flex>

package/docs/foundation/radius-shadow.tsx

@@ -127,17 +127,19 @@ export default function Demo() {
                   </Text>
                 </Flex>
                 <Flex direction="col" gap="xs">
-                  <div
-                    className="bg-popover text-popover-foreground border-border rounded-md border p-4"
-                    style={{ boxShadow: "var(--shadow-lg)" }}
-                  >
-                    <Text as="div" weight="medium">
-                      Floating（ポップオーバー）
-                    </Text>
-                    <Text as="div" size="xs" tone="muted">
-                      --shadow-lg lifts it off the page
-                    </Text>
-                  </div>
+                  <Card>
+                    <CardContent flush>
+                      {/* ui-audit-disable-next-line no-utility-spacing — a tile showing the shadow token itself; the box IS the subject */}
+                      <div className="p-4" style={{ boxShadow: "var(--shadow-lg)" }}>
+                        <Text as="div" weight="medium">
+                          Floating（ポップオーバー）
+                        </Text>
+                        <Text as="div" size="xs" tone="muted">
+                          --shadow-lg lifts it off the page
+                        </Text>
+                      </div>
+                    </CardContent>
+                  </Card>
                   <Text as="div" size="xs" tone="muted">
                     floating surface · elevated
                   </Text>

package/docs/layout/app-shell.tsx

@@ -138,7 +138,7 @@ export default function Demo() {
           {/* Decorative brand mark — hidden below `sm` where the hamburger already anchors the
               start of a narrow mobile topbar, so functional controls (entity switcher, search)
               keep priority and the bar never overflows. */}
-          <Avatar className="hidden rounded-md sm:inline-flex">
+          <Avatar className="rounded-md">
             <AvatarFallback className="bg-primary text-primary-foreground font-bold">
               C
             </AvatarFallback>
@@ -159,7 +159,7 @@ export default function Demo() {
               <DropdownMenuSeparator />
               {ENTITIES.map((e) => (
                 <DropdownMenuItem key={e.id} onSelect={() => setActiveEntity(e.name)}>
-                  <Building2 className="me-2 size-4" />
+                  <Building2 className="size-4" />
                   {e.name}
                 </DropdownMenuItem>
               ))}

package/docs/layout/aspect-ratio.tsx

@@ -27,9 +27,13 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <AspectRatio ratio={16 / 9}>
-              <div className="bg-muted flex h-full w-full items-center justify-center rounded-md">
-                <Text tone="muted">16:9 動画プレビュー（サンプル）</Text>
-              </div>
+              <Card variant="muted" className="h-full w-full">
+                <CardContent flush>
+                  <Flex align="center" justify="center" gap="xs">
+                    <Text tone="muted">16:9 動画プレビュー（サンプル）</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
             </AspectRatio>
           </CardContent>
         </Card>
@@ -45,9 +49,13 @@ export default function Demo() {
           <CardContent>
             <div className="max-w-xs">
               <AspectRatio ratio={4 / 3}>
-                <div className="bg-muted border-border flex h-full w-full items-center justify-center rounded-md border">
-                  <Text tone="muted">領収書スキャン 4:3</Text>
-                </div>
+                <Card variant="muted" className="h-full w-full">
+                  <CardContent flush>
+                    <Flex align="center" justify="center" gap="xs">
+                      <Text tone="muted">領収書スキャン 4:3</Text>
+                    </Flex>
+                  </CardContent>
+                </Card>
               </AspectRatio>
             </div>
           </CardContent>
@@ -66,11 +74,15 @@ export default function Demo() {
               {["株式会社 A", "合同会社 B", "有限会社 C"].map((name) => (
                 <div key={name} className="w-28">
                   <AspectRatio ratio={1}>
-                    <div className="bg-muted border-border flex h-full w-full items-center justify-center rounded-md border">
-                      <Text size="xs" tone="muted" className="px-1 text-center">
-                        {name}
-                      </Text>
-                    </div>
+                    <Card variant="muted" className="h-full w-full">
+                      <CardContent flush>
+                        <Flex align="center" justify="center" gap="xs">
+                          <Text size="xs" tone="muted" className="text-center">
+                            {name}
+                          </Text>
+                        </Flex>
+                      </CardContent>
+                    </Card>
                   </AspectRatio>
                 </div>
               ))}
@@ -90,9 +102,13 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <AspectRatio ratio={21 / 9}>
-              <div className="bg-muted border-border flex h-full w-full items-center justify-center rounded-md border">
-                <Text tone="muted">月次売上推移グラフ（21:9）</Text>
-              </div>
+              <Card variant="muted" className="h-full w-full">
+                <CardContent flush>
+                  <Flex align="center" justify="center" gap="xs">
+                    <Text tone="muted">月次売上推移グラフ（21:9）</Text>
+                  </Flex>
+                </CardContent>
+              </Card>
             </AspectRatio>
           </CardContent>
         </Card>

package/docs/layout/flex.tsx

@@ -129,7 +129,8 @@ export default function Demo() {
                   direction="row"
                   gap="sm"
                   align={a}
-                  className="bg-muted min-h-20 rounded-md p-2"
+                  className="bg-muted min-h-20 rounded-md"
+                  style={{ padding: "var(--space-2)" }}
                 >
                   <Text size="xs" tone="muted" className="w-16">
                     {a}
@@ -166,7 +167,8 @@ export default function Demo() {
                     gap="xs"
                     align="center"
                     justify={j}
-                    className="bg-muted flex-1 rounded-md p-2"
+                    className="bg-muted flex-1 rounded-md"
+                    style={{ padding: "var(--space-2)" }}
                   >
                     <Badge variant="outline">借方</Badge>
                     <Badge variant="outline">貸方</Badge>
@@ -192,6 +194,7 @@ export default function Demo() {
                 <Text size="xs" tone="muted">
                   wrap=&#123;false&#125;（既定）
                 </Text>
+                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
                 <Flex direction="row" gap="xs" wrap={false} className="bg-muted rounded-md p-2">
                   <Badge variant="outline">勘定科目</Badge>
                   <Badge variant="outline">補助科目</Badge>
@@ -202,6 +205,7 @@ export default function Demo() {
                 <Text size="xs" tone="muted">
                   wrap=&#123;true&#125;
                 </Text>
+                {/* ui-audit-disable-next-line no-utility-spacing — a tinted tile so the gap between children is visible; the box IS the subject */}
                 <Flex direction="row" gap="xs" wrap className="bg-muted rounded-md p-2">
                   <Badge variant="outline">勘定科目</Badge>
                   <Badge variant="outline">補助科目</Badge>

package/docs/layout/page-container.tsx

@@ -411,6 +411,7 @@ export default function Demo() {
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
         {/* Default: top-packed. Short content does NOT stretch · the space below is
             just neutral page background, never a jarring void. */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer title="既定（top-pack）" subtitle="fill なし · 余白は中立な背景">
             <Card>
@@ -424,6 +425,7 @@ export default function Demo() {
         </div>
 
         {/* fill: body grows to fill the shell; the composer footer pins to the bottom. */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -603,6 +605,7 @@ export default function Demo() {
           帯の内側（--page-toolbar-pad-block）だけ。 */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
         {/* fill · 帯は固定、トランスクリプトだけがその下でスクロールする（帯の下に潜り込まない）。 */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -739,6 +742,7 @@ export default function Demo() {
             footer の上罫線も --page-footer-divider で消せます · 入力欄が自前で枠を持つ Card の
             場合、全幅の罫線がその真上に重なって 2 本目の線になるためです。既定は「引く」のまま
             （フォームの保存／取消バーはこの線で本文と分かれる）。 */}
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -803,6 +807,7 @@ export default function Demo() {
           テナントごとの再テーマも効かなくなるためです。帯を塗るなら内側の余白も一緒に
           （--page-toolbar-pad-block）· 既定の 0 は「透明な帯には内側がない」ことに由来します。 */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -837,6 +842,7 @@ export default function Demo() {
           </PageContainer>
         </div>
 
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border" style={TOOLBAR_CHROME_TOKENS}>
           <PageContainer
             fill
@@ -859,7 +865,7 @@ export default function Demo() {
               {[
                 "帯がカード面に乗り、本文から分離して読めます。",
                 "塗った帯には内側の余白が要るので pad-block も同じテーマで指定します。",
-                "呼び出し側の bg-card / py-1.5 は不要 · どちらもトークンの仕事です。",
+                "呼び出し側で背景色や上下の余白を足す必要はありません · どちらもトークンの仕事です。",
               ].map((message) => (
                 <Card key={message}>
                   <CardContent>
@@ -881,6 +887,7 @@ export default function Demo() {
           --app-shell-bar-height にすると帯は 48px に固定され、タイトル列も extra も帯の中心
           （y=24）に載ります。min なので、より背の高い extra は今までどおり収まります。 */}
       <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border">
           <PageContainer
             fill
@@ -911,6 +918,7 @@ export default function Demo() {
           </PageContainer>
         </div>
 
+        {/* ui-audit-disable-next-line no-hand-rolled-surface — a bounded viewport so the page-level scroll behaviour is visible in a docs page — a frame around the demo, not product chrome */}
         <div className="h-80 overflow-auto rounded-md border" style={CHROME_BAND_TOKENS}>
           <PageContainer
             fill

package/docs/layout/responsive-grid.tsx

@@ -78,10 +78,18 @@ export default function Demo() {
           <CardContent>
             <Flex direction="col" gap="md">
               {["max-w-80", "max-w-3xl"].map((width) => (
-                <div key={width} className={`${width} border p-2`}>
+                <div
+                  key={width}
+                  className={width}
+                  style={{ border: "1px solid hsl(var(--border))", padding: "var(--space-2)" }}
+                >
                   <ResponsiveGrid columns={4}>
                     {Array.from({ length: 4 }, (_, index) => (
-                      <div key={index} className="bg-muted rounded p-3 text-center">
+                      <div
+                        key={index}
+                        className="bg-muted rounded text-center"
+                        style={{ padding: "var(--space-3)" }}
+                      >
                         {index + 1}
                       </div>
                     ))}