@godxjp/ui 28.10.0 → 28.12.0

package/docs/data-display/service-launcher-card.tsx

@@ -19,8 +19,20 @@ import {
   ServiceLauncherCardSkeleton,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
+import { useTranslation } from "@godxjp/ui/i18n";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
+/* Committed SVGs, imported so the bundler rewrites each URL against PREVIEW_BASE. A docs page must
+ * never fetch a third-party image: offline it cannot render, and on CI the request never settles,
+ * `networkidle` never fires and `page.goto` times out. */
+import serviceMarkRose from "../assets/service-mark-rose.svg";
+import serviceMarkTeal from "../assets/service-mark-teal.svg";
+
+/* A URL that is GUARANTEED to fail, with no network round-trip to hang on: the bytes are not an
+ * image, so the browser's decode fails locally. That is the production case this section exists to
+ * show — `logo_path` in the database outlives the file on disk. */
+const BROKEN_LOGO_URL = "data:image/svg+xml,not-an-image";
+
 /**
  * ServiceLauncherCard — one tile for one application in an organization's launcher.
  *
@@ -36,6 +48,10 @@ import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
  * own entitlement contract. There is no `href`, no `available`, no `entitlement` prop to find.
  *
  * ResponsiveGrid owns the 3 → 2 → 1 ladder. The page writes no grid tracks and no page-local CSS.
+ *
+ * All copy is localized through useTranslation() — see docs/showcase/table-pagination.tsx for the
+ * pattern this follows. `metadata` (hostnames, version strings, pixel dimensions) is domain DATA
+ * and stays literal; it is what the gate does not scan and what localizing would be wrong for.
  */
 
 /** A section heading. Headings are headings, not Cards — a Card here would nest borders. */
@@ -62,240 +78,364 @@ function Section({
 }
 
 export default function Demo() {
+  const { t } = useTranslation();
+
+  // Status-tone labels are consumer copy, not the component's — shared across the tiles that
+  // reuse the same real-world status (e.g. "stopped" appears on both the data-sync and analytics
+  // tiles). `attentionRequired` / `openServiceEnglish` stay identical across locales on purpose:
+  // section 5's third tile is deliberately an English-named service in a JP admin portal.
+  const status = {
+    available: t("serviceLauncherShowcase.status.available"),
+    active: t("serviceLauncherShowcase.status.active"),
+    maintenance: t("serviceLauncherShowcase.status.maintenance"),
+    stopped: t("serviceLauncherShowcase.status.stopped"),
+    adminOnly: t("serviceLauncherShowcase.status.adminOnly"),
+    preparing: t("serviceLauncherShowcase.status.preparing"),
+    archived: t("serviceLauncherShowcase.status.archived"),
+    unapplied: t("serviceLauncherShowcase.status.unapplied"),
+    noPermission: t("serviceLauncherShowcase.status.noPermission"),
+    attentionRequired: t("serviceLauncherShowcase.status.attentionRequired"),
+  };
+
+  const action = {
+    openService: t("serviceLauncherShowcase.action.openService"),
+    open: t("serviceLauncherShowcase.action.open"),
+    viewStatus: t("serviceLauncherShowcase.action.viewStatus"),
+    viewHistory: t("serviceLauncherShowcase.action.viewHistory"),
+    checkPermissions: t("serviceLauncherShowcase.action.checkPermissions"),
+    openSettings: t("serviceLauncherShowcase.action.openSettings"),
+    viewArchive: t("serviceLauncherShowcase.action.viewArchive"),
+    openRequestForm: t("serviceLauncherShowcase.action.openRequestForm"),
+    openList: t("serviceLauncherShowcase.action.openList"),
+    openServiceEnglish: t("serviceLauncherShowcase.action.openServiceEnglish"),
+  };
+
   return (
     <PageContainer
-      title="ServiceLauncherCard"
-      subtitle="社内アプリケーション一覧のタイル — 利用可能・制限・停止・アーカイブ・読み込み中・カタログ導線"
+      title={t("serviceLauncherShowcase.page.title")}
+      subtitle={t("serviceLauncherShowcase.page.subtitle")}
     >
       <Flex direction="col" gap="lg">
         <Section
-          title="1 · 基本 · 利用できるサービス"
-          why="アイコン・名称・ステータス・説明・識別子・操作。ステータスの文言は常に利用側のコピーで、コンポーネントが決めるのは tone に対応する Badge の意味づけだけです。"
+          title={t("serviceLauncherShowcase.sections.basics.heading")}
+          why={t("serviceLauncherShowcase.sections.basics.why")}
         >
           <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
             <ServiceLauncherCard
               icon={Clock3}
-              title="勤怠管理"
-              statusLabel="利用可能"
+              title={t("serviceLauncherShowcase.sections.basics.attendance.title")}
+              statusLabel={status.available}
               statusTone="success"
-              description="打刻、シフト、休暇申請を一つのワークスペースで管理します。"
+              description={t("serviceLauncherShowcase.sections.basics.attendance.description")}
               metadata="attend.corp.example.jp · v4.2"
-              action={<Button>サービスを開く</Button>}
+              action={<Button>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={ReceiptText}
-              title="経費精算"
-              statusLabel="利用可能"
+              title={t("serviceLauncherShowcase.sections.basics.expense.title")}
+              statusLabel={status.available}
               statusTone="success"
-              description="領収書の提出から承認、仕訳連携までを扱います。"
+              description={t("serviceLauncherShowcase.sections.basics.expense.description")}
               metadata="keihi.corp.example.jp · v2.8"
-              action={<Button>サービスを開く</Button>}
+              action={<Button>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={Calendar}
-              title="会議室予約"
-              statusLabel="利用可能"
+              title={t("serviceLauncherShowcase.sections.basics.meetingRoom.title")}
+              statusLabel={status.available}
               statusTone="success"
-              description="拠点ごとの会議室と備品を予約します。"
+              description={t("serviceLauncherShowcase.sections.basics.meetingRoom.description")}
               metadata="rooms.corp.example.jp · v1.9"
-              action={<Button>サービスを開く</Button>}
+              action={<Button>{action.openService}</Button>}
             />
           </ResponsiveGrid>
         </Section>
 
         <Section
-          title="2 · statusTone の 6 値すべて"
-          why="success / warning / destructive / info / neutral / muted。tone は Badge の意味づけだけを決め、文言・判定・操作の可否はすべて利用側が渡します。"
+          title={t("serviceLauncherShowcase.sections.statusTones.heading")}
+          why={t("serviceLauncherShowcase.sections.statusTones.why")}
         >
           <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
             <ServiceLauncherCard
               icon={Mail}
               titleLevel={3}
-              title="社内メール"
-              statusLabel="稼働中"
+              title={t("serviceLauncherShowcase.sections.statusTones.mail.title")}
+              statusLabel={status.active}
               statusTone="success"
-              description="メールボックス、配布リスト、共有署名を管理します。"
+              description={t("serviceLauncherShowcase.sections.statusTones.mail.description")}
               metadata="mail.corp.example.jp"
-              action={<Button>サービスを開く</Button>}
+              action={<Button>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={Server}
               titleLevel={3}
-              title="ファイル共有"
-              statusLabel="メンテナンス中"
+              title={t("serviceLauncherShowcase.sections.statusTones.fileShare.title")}
+              statusLabel={status.maintenance}
               statusTone="warning"
-              description="部門フォルダと外部共有リンクを扱います。"
+              description={t("serviceLauncherShowcase.sections.statusTones.fileShare.description")}
               metadata="files.corp.example.jp"
-              action={<Button variant="outline">状況を見る</Button>}
+              action={<Button variant="outline">{action.viewStatus}</Button>}
             />
             <ServiceLauncherCard
               icon={Database}
               titleLevel={3}
-              title="データ連携基盤"
-              statusLabel="停止中"
+              title={t("serviceLauncherShowcase.sections.statusTones.dataSync.title")}
+              statusLabel={status.stopped}
               statusTone="destructive"
-              description="外部システムとのデータ同期ジョブを管理します。"
+              description={t("serviceLauncherShowcase.sections.statusTones.dataSync.description")}
               metadata="sync.corp.example.jp"
-              action={<Button variant="outline">履歴を見る</Button>}
+              action={<Button variant="outline">{action.viewHistory}</Button>}
             />
             <ServiceLauncherCard
               icon={ShieldCheck}
               titleLevel={3}
-              title="権限管理"
-              statusLabel="管理者限定"
+              title={t("serviceLauncherShowcase.sections.statusTones.iam.title")}
+              statusLabel={status.adminOnly}
               statusTone="info"
-              description="ロール、二要素認証ポリシー、監査イベントを確認します。"
+              description={t("serviceLauncherShowcase.sections.statusTones.iam.description")}
               metadata="iam.corp.example.jp"
-              action={<Button variant="outline">権限を確認</Button>}
+              action={<Button variant="outline">{action.checkPermissions}</Button>}
             />
             <ServiceLauncherCard
               icon={PlugZap}
               titleLevel={3}
-              title="連携アプリ"
-              statusLabel="準備中"
+              title={t("serviceLauncherShowcase.sections.statusTones.integrations.title")}
+              statusLabel={status.preparing}
               statusTone="neutral"
-              description="サードパーティ連携の接続とスコープを設定します。"
+              description={t(
+                "serviceLauncherShowcase.sections.statusTones.integrations.description",
+              )}
               metadata="connect.corp.example.jp"
-              action={<Button variant="outline">設定を開く</Button>}
+              action={<Button variant="outline">{action.openSettings}</Button>}
             />
             <ServiceLauncherCard
               icon={BookOpen}
               titleLevel={3}
-              title="旧ナレッジベース"
-              statusLabel="アーカイブ"
+              title={t("serviceLauncherShowcase.sections.statusTones.legacyKb.title")}
+              statusLabel={status.archived}
               statusTone="muted"
-              description="2024 年度までの運用手順を読み取り専用で保管しています。"
+              description={t("serviceLauncherShowcase.sections.statusTones.legacyKb.description")}
               metadata="kb-archive.corp.example.jp"
-              action={<Button variant="outline">アーカイブを見る</Button>}
+              action={<Button variant="outline">{action.viewArchive}</Button>}
             />
           </ResponsiveGrid>
         </Section>
 
         <Section
-          title="3 · disabledReason · 操作が効かない理由は操作より先に置かれる"
-          why="無効化されたボタンは「なぜ」を一切伝えません。だから理由は DOM 順で操作より先に置かれ（WCAG 2.2 · 1.3.2）、タイルは data-unavailable を帯びてメダリオンが沈みます。disabledReason はボタンを無効化しません — それは利用側の Button prop のままです。"
+          title={t("serviceLauncherShowcase.sections.disabledReason.heading")}
+          why={t("serviceLauncherShowcase.sections.disabledReason.why")}
         >
           <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
             <ServiceLauncherCard
               icon={Boxes}
               titleLevel={3}
-              title="在庫管理"
-              statusLabel="未申請"
+              title={t("serviceLauncherShowcase.sections.disabledReason.inventory.title")}
+              statusLabel={status.unapplied}
               statusTone="warning"
-              description="拠点別の在庫、入出庫、棚卸を管理します。"
+              description={t(
+                "serviceLauncherShowcase.sections.disabledReason.inventory.description",
+              )}
               metadata="zaiko.corp.example.jp"
-              disabledReason="この部門ではまだ利用申請が承認されていません。"
-              action={<Button disabled>サービスを開く</Button>}
+              disabledReason={t("serviceLauncherShowcase.sections.disabledReason.inventory.reason")}
+              action={<Button disabled>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={FileText}
               titleLevel={3}
-              title="契約書管理"
-              statusLabel="権限なし"
+              title={t("serviceLauncherShowcase.sections.disabledReason.contracts.title")}
+              statusLabel={status.noPermission}
               statusTone="info"
-              description="契約書の保管、期限通知、電子署名の依頼を扱います。"
+              description={t(
+                "serviceLauncherShowcase.sections.disabledReason.contracts.description",
+              )}
               metadata="keiyaku.corp.example.jp"
-              disabledReason="閲覧には法務部門のロールが必要です。IT ヘルプデスクへ申請してください。"
-              action={<Button disabled>サービスを開く</Button>}
+              disabledReason={t("serviceLauncherShowcase.sections.disabledReason.contracts.reason")}
+              action={<Button disabled>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={Database}
               titleLevel={3}
-              title="分析基盤"
-              statusLabel="停止中"
+              title={t("serviceLauncherShowcase.sections.disabledReason.analytics.title")}
+              statusLabel={status.stopped}
               statusTone="destructive"
-              description="全社ダッシュボードとデータマートを提供します。"
+              description={t(
+                "serviceLauncherShowcase.sections.disabledReason.analytics.description",
+              )}
               metadata="bi.corp.example.jp"
-              disabledReason="このサービスは組織の管理者によって停止されています。"
-              action={<Button disabled>サービスを開く</Button>}
+              disabledReason={t("serviceLauncherShowcase.sections.disabledReason.analytics.reason")}
+              action={<Button disabled>{action.openService}</Button>}
             />
           </ResponsiveGrid>
         </Section>
 
         <Section
-          title="4 · 読み込み中とカタログ導線"
-          why="ServiceLauncherCardSkeleton は同じ骨格の初期プレースホルダーで、label が必須・aria-busy を持ち、ライブリージョンは意図的に開きません。ServiceCatalogCta は実在する追加導線がある場合にだけ並べる相棒タイルで、既定の Plus 以外のグリフも受け取ります。"
+          title={t("serviceLauncherShowcase.sections.loadingCatalog.heading")}
+          why={t("serviceLauncherShowcase.sections.loadingCatalog.why")}
         >
           <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
-            <ServiceLauncherCardSkeleton label="サービスを読み込み中" />
+            <ServiceLauncherCardSkeleton
+              label={t("serviceLauncherShowcase.sections.loadingCatalog.skeletonLabel")}
+            />
             <ServiceCatalogCta
-              title="アプリを追加"
-              action={<Button variant="outline">申請フォームを開く</Button>}
+              title={t("serviceLauncherShowcase.sections.loadingCatalog.addApp.title")}
+              action={<Button variant="outline">{action.openRequestForm}</Button>}
             />
             <ServiceCatalogCta
               icon={LayoutGrid}
-              title="すべての社内アプリを見る"
-              action={<Button variant="ghost">一覧を開く</Button>}
+              title={t("serviceLauncherShowcase.sections.loadingCatalog.allApps.title")}
+              action={<Button variant="ghost">{action.openList}</Button>}
             />
           </ResponsiveGrid>
         </Section>
 
         <Section
-          title="5 · 端に触れる · 3 行の名称、説明なし、切れない長いホスト名"
-          why="整った例はタイルが崩れる場所を何も見せません。ここは崩れる側です：3 行になる名称と 2 語の名称が同じ行に並び、説明のないタイルが説明のあるタイルの隣に置かれ、空白のないホスト名が列幅を広げようとします。見苦しく見えるなら、このセクションは仕事をしています — 耐えるのはサンプルデータではなくコンポーネントの側です。"
+          title={t("serviceLauncherShowcase.sections.edgeCases.heading")}
+          why={t("serviceLauncherShowcase.sections.edgeCases.why")}
         >
           <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
             <ServiceLauncherCard
               icon={ShieldCheck}
               titleLevel={3}
-              title="グローバル人事情報基盤・従業員セルフサービスポータル（アジア太平洋地域）"
-              statusLabel="利用可能"
+              title={t("serviceLauncherShowcase.sections.edgeCases.hrPortal.title")}
+              statusLabel={status.available}
               statusTone="success"
-              description="人事マスタ、勤怠、給与、評価を一元管理する統合ワークスペースです。"
+              description={t("serviceLauncherShowcase.sections.edgeCases.hrPortal.description")}
               metadata="workforce-identity-administration.ap-northeast-1.corp.example.jp · v11.0"
-              action={<Button>サービスを開く</Button>}
+              action={<Button>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={Clock3}
               titleLevel={3}
-              title="日報"
-              statusLabel="利用可能"
+              title={t("serviceLauncherShowcase.sections.edgeCases.dailyReport.title")}
+              statusLabel={status.available}
               statusTone="success"
               metadata="nippo.corp.example.jp"
-              action={<Button>サービスを開く</Button>}
+              action={<Button>{action.openService}</Button>}
             />
             <ServiceLauncherCard
               icon={Server}
               titleLevel={3}
-              title="Global Workforce Identity & Entitlement Administration Console"
-              statusLabel="Attention required"
+              title={t("serviceLauncherShowcase.sections.edgeCases.warningConsole.title")}
+              statusLabel={status.attentionRequired}
               statusTone="warning"
-              description="Review pending entitlement requests before the next access certification."
+              description={t(
+                "serviceLauncherShowcase.sections.edgeCases.warningConsole.description",
+              )}
               metadata="workforce-identity-administration.ap-southeast-1.corp.example.com"
-              disabledReason="Your organization has no approved request for this service yet."
-              action={<Button disabled>Open service</Button>}
+              disabledReason={t("serviceLauncherShowcase.sections.edgeCases.warningConsole.reason")}
+              action={<Button disabled>{action.openServiceEnglish}</Button>}
             />
           </ResponsiveGrid>
         </Section>
 
         <Section
-          title="6 · 最小のタイル"
-          why="必須は icon・title・action の 3 つだけです。statusLabel を省けば Badge の行ごと消え、description と metadata を省いても骨格は保たれます — 隣の満載のタイルと高さを比べてください。"
+          title={t("serviceLauncherShowcase.sections.minimalTiles.heading")}
+          why={t("serviceLauncherShowcase.sections.minimalTiles.why")}
         >
           <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
             <ServiceLauncherCard
               icon={BookOpen}
               titleLevel={3}
-              title="社内 Wiki"
-              action={<Button variant="outline">開く</Button>}
+              title={t("serviceLauncherShowcase.sections.minimalTiles.wiki.title")}
+              action={<Button variant="outline">{action.open}</Button>}
             />
             <ServiceLauncherCard
               icon={Mail}
               titleLevel={3}
-              title="問い合わせ窓口"
-              description="社内のシステム相談はこちらで受け付けています。"
-              action={<Button variant="outline">開く</Button>}
+              title={t("serviceLauncherShowcase.sections.minimalTiles.contact.title")}
+              description={t("serviceLauncherShowcase.sections.minimalTiles.contact.description")}
+              action={<Button variant="outline">{action.open}</Button>}
             />
             <ServiceLauncherCard
               icon={Calendar}
               titleLevel={3}
-              title="全社カレンダー"
-              statusLabel="利用可能"
+              title={t("serviceLauncherShowcase.sections.minimalTiles.calendar.title")}
+              statusLabel={status.available}
               statusTone="success"
-              description="全社行事、休業日、拠点別の予定を共有します。"
+              description={t("serviceLauncherShowcase.sections.minimalTiles.calendar.description")}
               metadata="calendar.corp.example.jp · v3.1"
-              disabledReason="読み取り専用で公開されています。"
-              action={<Button variant="outline">開く</Button>}
+              disabledReason={t("serviceLauncherShowcase.sections.minimalTiles.calendar.reason")}
+              action={<Button variant="outline">{action.open}</Button>}
+            />
+          </ResponsiveGrid>
+        </Section>
+
+        <Section
+          title={t("serviceLauncherShowcase.sections.logo.heading")}
+          why={t("serviceLauncherShowcase.sections.logo.why")}
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            {/* 1 · a real uploaded mark, square */}
+            <ServiceLauncherCard
+              icon={Clock3}
+              logo={serviceMarkTeal}
+              titleLevel={3}
+              title={t("serviceLauncherShowcase.sections.logo.uploaded.title")}
+              statusLabel={status.available}
+              statusTone="success"
+              description={t("serviceLauncherShowcase.sections.logo.uploaded.description")}
+              metadata="attend.corp.example.jp · v4.2"
+              action={<Button>{action.openService}</Button>}
+            />
+            {/* 2 · the SAME tile with no upload yet — the fallback, side by side */}
+            <ServiceLauncherCard
+              icon={Clock3}
+              titleLevel={3}
+              title={t("serviceLauncherShowcase.sections.logo.missing.title")}
+              statusLabel={status.available}
+              statusTone="success"
+              description={t("serviceLauncherShowcase.sections.logo.missing.description")}
+              metadata="attend.corp.example.jp · v4.2"
+              action={<Button>{action.openService}</Button>}
+            />
+            {/* 3 · the URL is set but the file is gone — the state that reaches production */}
+            <ServiceLauncherCard
+              icon={Database}
+              logo={BROKEN_LOGO_URL}
+              titleLevel={3}
+              title={t("serviceLauncherShowcase.sections.logo.broken.title")}
+              statusLabel={status.available}
+              statusTone="success"
+              description={t("serviceLauncherShowcase.sections.logo.broken.description")}
+              metadata="sync.corp.example.jp"
+              action={<Button>{action.openService}</Button>}
+            />
+            {/* 4 · a WIDE wordmark — contain letterboxes it, never crops it */}
+            <ServiceLauncherCard
+              icon={ReceiptText}
+              logo={serviceMarkRose}
+              titleLevel={3}
+              title={t("serviceLauncherShowcase.sections.logo.wideMark.title")}
+              statusLabel={status.available}
+              statusTone="success"
+              description={t("serviceLauncherShowcase.sections.logo.wideMark.description")}
+              metadata="keihi.corp.example.jp · v2.8"
+              action={<Button>{action.openService}</Button>}
+            />
+            {/* 5 · logo + disabledReason — the medallion mutes, the mark stays the mark */}
+            <ServiceLauncherCard
+              icon={ShieldCheck}
+              logo={serviceMarkTeal}
+              titleLevel={3}
+              title={t("serviceLauncherShowcase.sections.logo.withReason.title")}
+              statusLabel={status.noPermission}
+              statusTone="info"
+              description={t("serviceLauncherShowcase.sections.logo.withReason.description")}
+              metadata="iam.corp.example.jp"
+              disabledReason={t("serviceLauncherShowcase.sections.logo.withReason.reason")}
+              action={<Button disabled>{action.openService}</Button>}
+            />
+            {/* 6 · logo="" — an empty projection value is the same as no logo */}
+            <ServiceLauncherCard
+              icon={Mail}
+              logo=""
+              titleLevel={3}
+              title={t("serviceLauncherShowcase.sections.logo.emptyString.title")}
+              statusLabel={status.active}
+              statusTone="success"
+              description={t("serviceLauncherShowcase.sections.logo.emptyString.description")}
+              metadata="mail.corp.example.jp"
+              action={<Button>{action.openService}</Button>}
             />
           </ResponsiveGrid>
         </Section>

package/docs/showcase/table-pagination.tsx

@@ -334,15 +334,26 @@ function CursorPeriodCard() {
       <CardContent flush>
         <DataTable data={rows} columns={columns} getRowId={(row) => row.id} density="compact" />
       </CardContent>
-      {/* `DataTable.Pagination` owns its own inline inset, because it is normally the lone child
-       * of a FLUSH container. Here it shares a padded `CardContent` with the period label, so the
-       * two insets stack — measured 28px against the columns' 16px before this. Zeroing the slot's
-       * own knob hands the inset to the container that already supplies it; that is what
-       * `--table-pagination-padding-x` is for, and an instance override is the right tier for one
-       * element in one arrangement (docs/CUSTOMER-THEMING.md, tier 4). */}
+      {/* `DataTable.Pagination` owns its own insets ON BOTH AXES, because it is normally the lone
+       * child of a FLUSH container. Here it shares a padded `CardContent` with the period label,
+       * so both stack.
+       *
+       * The first pass at this zeroed only the INLINE knob and declared it done — a two-axis
+       * defect fixed on one axis, which looks fixed from the side you were measuring. The block
+       * one kept stacking: 16px from the CardContent plus 7.36px of the slot's own, so this
+       * footer sat 27px off the last row while the other two cards sat at 20px.
+       *
+       * Zeroing both hands the insets to the container that already supplies them; that is what
+       * these knobs are for, and an instance override is the right tier for one element in one
+       * arrangement (docs/CUSTOMER-THEMING.md, tier 4). */}
       <CardContent
         className="border-t"
-        style={{ "--table-pagination-padding-x": "0" } as React.CSSProperties}
+        style={
+          {
+            "--table-pagination-padding-x": "0",
+            "--table-pagination-padding-y": "0",
+          } as React.CSSProperties
+        }
       >
         <Flex direction="row" align="center" justify="between" wrap gap="sm">
           <Text size="xs" tone="muted" tabular>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.10.0",
-  "godxUiMcp": "28.10.0",
+  "version": "28.12.0",
+  "godxUiMcp": "28.12.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -414,7 +414,8 @@
     "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-width-wins && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:frame-coverage && pnpm test",
     "verify:browser": "pnpm check:contrast && pnpm check:text-ink-clip && pnpm check:frame-overflow && pnpm check:font-fallback-metrics && pnpm check:visual-audit",
     "verify:ci": "pnpm verify:ci:static && pnpm check:frame-contracts && pnpm test",
-    "verify:ci:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-width-wins && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm run audit && pnpm check:frame-coverage-report && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets && pnpm check:absorbed-names && pnpm check:agent-catalog",
+    "verify:ci:static:gates": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:registry && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-width-wins && pnpm check:no-external-assets && pnpm check:token-scale-bypass && pnpm check:no-antd-runtime && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:measurement-contract && pnpm check:mcp-token-sync && pnpm check:email-token-sync && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-catalog-completeness && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm run audit && pnpm check:frame-coverage-report && pnpm check:gate-coverage && pnpm check:mcp-prop-sync && pnpm check:catalog-contradictions && pnpm check:catalog-snippets && pnpm check:absorbed-names && pnpm check:agent-catalog",
+    "verify:ci:static": "node scripts/run-gate-list.mjs verify:ci:static:gates",
     "verify:publish-tree": "pnpm build && pnpm check:packed-public-contract && pnpm check:use-client && pnpm check:dist-tokens-resolve",
     "verify:release": "pnpm verify:static && pnpm check:frame-contracts && pnpm check:frame-coverage",
     "verify:static": "pnpm build && pnpm check:packed-public-contract && pnpm typecheck && pnpm typecheck:docs && pnpm lint && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:no-consumer-coupling && pnpm check:use-client && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:token-scale-bypass && pnpm check:radix-surface && pnpm check:dist-tokens-resolve && pnpm check:no-hardcoded-geometry && pnpm check:no-hardcoded-css-values && pnpm check:disclosure-duplication && pnpm check:no-inline-magic-numbers && pnpm check:no-tailwind-class-assertions && pnpm check:control-sizing && pnpm check:rtl && pnpm check:typography && pnpm check:mcp-lockstep && pnpm check:mcp-sync && pnpm check:doc-prop-existence && pnpm check:mcp-catalog-coverage && pnpm check:mcp-orphans && pnpm check:mcp-pattern-imports && pnpm check:audit-sync && pnpm check:mcp-prop-sync && pnpm check:contrast && pnpm check:visual-audit && pnpm test",