@godxjp/ui 28.6.0 → 28.7.0

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

@@ -1,10 +1,15 @@
 import {
-  BookPlus,
+  BookOpen,
+  Boxes,
+  Calendar,
   Clock3,
   Database,
+  FileText,
   LayoutGrid,
+  Mail,
   PlugZap,
   ReceiptText,
+  Server,
   ShieldCheck,
 } from "lucide-react";
 
@@ -13,132 +18,287 @@ import {
   ServiceLauncherCard,
   ServiceLauncherCardSkeleton,
 } from "@godxjp/ui/data-display";
-import { Button } from "@godxjp/ui/general";
+import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 
 /**
- * ServiceLauncherCard — organization-scoped launcher states. The consumer supplies every status,
- * entitlement reason and action; the component owns only the shared visual contract.
+ * ServiceLauncherCard — one tile for one application in an organization's launcher.
+ *
+ * WHY THIS PAGE IS GENERIC. It used to render this product's own service catalogue —
+ * `attendance.godx.jp`, plans `Standard/Enterprise/Free`, a 「カタログを見る」 link — which made a
+ * reader ask whether the component belonged in a UI framework at all. A fair question: a page that
+ * demonstrates a product cannot demonstrate a component. The data here is therefore ANY
+ * organization's internal tools, on RFC 2606 reserved domains, with no plan names of ours.
+ *
+ * WHAT IS NOT NEGOTIABLE is the state set — available / restricted / suspended / archived /
+ * loading / catalog entry. Those ARE the component's API surface, because the component infers
+ * nothing: `statusLabel`, `statusTone`, `disabledReason` and `action` all come from the consumer's
+ * 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.
  */
+
+/** A section heading. Headings are headings, not Cards — a Card here would nest borders. */
+function Section({
+  title,
+  why,
+  children,
+}: {
+  title: string;
+  why: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <Flex direction="col" gap="sm">
+      <Text as="div" weight="medium">
+        {title}
+      </Text>
+      <Text as="div" size="sm" tone="muted">
+        {why}
+      </Text>
+      {children}
+    </Flex>
+  );
+}
+
 export default function Demo() {
   return (
     <PageContainer
       title="ServiceLauncherCard"
-      subtitle="利用可能・制限中・読み込み中・カタログ導線"
+      subtitle="社内アプリケーション一覧のタイル — 利用可能・制限・停止・アーカイブ・読み込み中・カタログ導線"
     >
       <Flex direction="col" gap="lg">
-        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
-          <ServiceLauncherCard
-            icon={Clock3}
-            title="勤怠管理"
-            statusLabel="LIVE"
-            statusTone="success"
-            description="打刻、シフト、休暇申請を一つのワークスペースで管理します。"
-            metadata="attendance.godx.jp · Standard"
-            action={<Button>サービスを開く</Button>}
-          />
-          <ServiceLauncherCard
-            icon={ReceiptText}
-            title="請求管理"
-            statusLabel="要契約"
-            statusTone="warning"
-            description="請求書、支払い方法、利用明細を管理します。"
-            metadata="billing.godx.jp"
-            disabledReason="この組織には有効な請求管理プランがありません。"
-            action={<Button disabled>サービスを開く</Button>}
-          />
-          <ServiceLauncherCard
-            icon={ShieldCheck}
-            title="高度なセキュリティ管理と監査ログ"
-            statusLabel="管理者限定"
-            statusTone="info"
-            description="権限、二要素認証ポリシー、監査イベントを確認します。"
-            metadata="security.godx.jp · Enterprise"
-            action={<Button variant="outline">権限を確認</Button>}
-          />
-          <ServiceLauncherCardSkeleton label="サービスを読み込み中" />
-          <ServiceCatalogCta
-            title="サービスカタログから追加"
-            action={<Button variant="outline">カタログを見る</Button>}
-          />
-        </ResponsiveGrid>
+        <Section
+          title="1 · 基本 · 利用できるサービス"
+          why="アイコン・名称・ステータス・説明・識別子・操作。ステータスの文言は常に利用側のコピーで、コンポーネントが決めるのは tone に対応する Badge の意味づけだけです。"
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <ServiceLauncherCard
+              icon={Clock3}
+              title="勤怠管理"
+              statusLabel="利用可能"
+              statusTone="success"
+              description="打刻、シフト、休暇申請を一つのワークスペースで管理します。"
+              metadata="attend.corp.example.jp · v4.2"
+              action={<Button>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={ReceiptText}
+              title="経費精算"
+              statusLabel="利用可能"
+              statusTone="success"
+              description="領収書の提出から承認、仕訳連携までを扱います。"
+              metadata="keihi.corp.example.jp · v2.8"
+              action={<Button>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Calendar}
+              title="会議室予約"
+              statusLabel="利用可能"
+              statusTone="success"
+              description="拠点ごとの会議室と備品を予約します。"
+              metadata="rooms.corp.example.jp · v1.9"
+              action={<Button>サービスを開く</Button>}
+            />
+          </ResponsiveGrid>
+        </Section>
+
+        <Section
+          title="2 · statusTone の 6 値すべて"
+          why="success / warning / destructive / info / neutral / muted。tone は Badge の意味づけだけを決め、文言・判定・操作の可否はすべて利用側が渡します。"
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <ServiceLauncherCard
+              icon={Mail}
+              titleLevel={3}
+              title="社内メール"
+              statusLabel="稼働中"
+              statusTone="success"
+              description="メールボックス、配布リスト、共有署名を管理します。"
+              metadata="mail.corp.example.jp"
+              action={<Button>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Server}
+              titleLevel={3}
+              title="ファイル共有"
+              statusLabel="メンテナンス中"
+              statusTone="warning"
+              description="部門フォルダと外部共有リンクを扱います。"
+              metadata="files.corp.example.jp"
+              action={<Button variant="outline">状況を見る</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Database}
+              titleLevel={3}
+              title="データ連携基盤"
+              statusLabel="停止中"
+              statusTone="destructive"
+              description="外部システムとのデータ同期ジョブを管理します。"
+              metadata="sync.corp.example.jp"
+              action={<Button variant="outline">履歴を見る</Button>}
+            />
+            <ServiceLauncherCard
+              icon={ShieldCheck}
+              titleLevel={3}
+              title="権限管理"
+              statusLabel="管理者限定"
+              statusTone="info"
+              description="ロール、二要素認証ポリシー、監査イベントを確認します。"
+              metadata="iam.corp.example.jp"
+              action={<Button variant="outline">権限を確認</Button>}
+            />
+            <ServiceLauncherCard
+              icon={PlugZap}
+              titleLevel={3}
+              title="連携アプリ"
+              statusLabel="準備中"
+              statusTone="neutral"
+              description="サードパーティ連携の接続とスコープを設定します。"
+              metadata="connect.corp.example.jp"
+              action={<Button variant="outline">設定を開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={BookOpen}
+              titleLevel={3}
+              title="旧ナレッジベース"
+              statusLabel="アーカイブ"
+              statusTone="muted"
+              description="2024 年度までの運用手順を読み取り専用で保管しています。"
+              metadata="kb-archive.corp.example.jp"
+              action={<Button variant="outline">アーカイブを見る</Button>}
+            />
+          </ResponsiveGrid>
+        </Section>
+
+        <Section
+          title="3 · disabledReason · 操作が効かない理由は操作より先に置かれる"
+          why="無効化されたボタンは「なぜ」を一切伝えません。だから理由は DOM 順で操作より先に置かれ（WCAG 2.2 · 1.3.2）、タイルは data-unavailable を帯びてメダリオンが沈みます。disabledReason はボタンを無効化しません — それは利用側の Button prop のままです。"
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <ServiceLauncherCard
+              icon={Boxes}
+              titleLevel={3}
+              title="在庫管理"
+              statusLabel="未申請"
+              statusTone="warning"
+              description="拠点別の在庫、入出庫、棚卸を管理します。"
+              metadata="zaiko.corp.example.jp"
+              disabledReason="この部門ではまだ利用申請が承認されていません。"
+              action={<Button disabled>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={FileText}
+              titleLevel={3}
+              title="契約書管理"
+              statusLabel="権限なし"
+              statusTone="info"
+              description="契約書の保管、期限通知、電子署名の依頼を扱います。"
+              metadata="keiyaku.corp.example.jp"
+              disabledReason="閲覧には法務部門のロールが必要です。IT ヘルプデスクへ申請してください。"
+              action={<Button disabled>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Database}
+              titleLevel={3}
+              title="分析基盤"
+              statusLabel="停止中"
+              statusTone="destructive"
+              description="全社ダッシュボードとデータマートを提供します。"
+              metadata="bi.corp.example.jp"
+              disabledReason="このサービスは組織の管理者によって停止されています。"
+              action={<Button disabled>サービスを開く</Button>}
+            />
+          </ResponsiveGrid>
+        </Section>
+
+        <Section
+          title="4 · 読み込み中とカタログ導線"
+          why="ServiceLauncherCardSkeleton は同じ骨格の初期プレースホルダーで、label が必須・aria-busy を持ち、ライブリージョンは意図的に開きません。ServiceCatalogCta は実在する追加導線がある場合にだけ並べる相棒タイルで、既定の Plus 以外のグリフも受け取ります。"
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <ServiceLauncherCardSkeleton label="サービスを読み込み中" />
+            <ServiceCatalogCta
+              title="アプリを追加"
+              action={<Button variant="outline">申請フォームを開く</Button>}
+            />
+            <ServiceCatalogCta
+              icon={LayoutGrid}
+              title="すべての社内アプリを見る"
+              action={<Button variant="ghost">一覧を開く</Button>}
+            />
+          </ResponsiveGrid>
+        </Section>
 
-        {/* Remaining status tones — the label text is always the consumer's own copy; the
-         * component maps only the tone to a semantic Badge. */}
-        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
-          <ServiceLauncherCard
-            icon={Database}
-            titleLevel={3}
-            title="データ連携基盤"
-            statusLabel="停止中"
-            statusTone="destructive"
-            description="外部システムとのデータ同期ジョブを管理します。"
-            metadata="sync.godx.jp · Enterprise"
-            disabledReason="このサービスは組織の管理者によって停止されています。"
-            action={<Button disabled>サービスを開く</Button>}
-          />
-          <ServiceLauncherCard
-            icon={PlugZap}
-            titleLevel={3}
-            title="連携アプリ"
-            statusLabel="準備中"
-            statusTone="neutral"
-            description="サードパーティ連携の接続とスコープを設定します。"
-            action={<Button variant="outline">設定を開く</Button>}
-          />
-          <ServiceLauncherCard
-            icon={BookPlus}
-            titleLevel={3}
-            title="ナレッジベース"
-            statusLabel="アーカイブ"
-            statusTone="muted"
-            description="社内ドキュメントと運用手順を保管します。"
-            metadata="kb.godx.jp · Free"
-            action={<Button variant="outline">アーカイブを見る</Button>}
-          />
-          {/* The companion CTA takes an explicit glyph when the default `Plus` is too generic. */}
-          <ServiceCatalogCta
-            icon={LayoutGrid}
-            title="すべてのサービスを見る"
-            action={<Button variant="ghost">カタログ一覧</Button>}
-          />
-        </ResponsiveGrid>
+        <Section
+          title="5 · 端に触れる · 3 行の名称、説明なし、切れない長いホスト名"
+          why="整った例はタイルが崩れる場所を何も見せません。ここは崩れる側です：3 行になる名称と 2 語の名称が同じ行に並び、説明のないタイルが説明のあるタイルの隣に置かれ、空白のないホスト名が列幅を広げようとします。見苦しく見えるなら、このセクションは仕事をしています — 耐えるのはサンプルデータではなくコンポーネントの側です。"
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <ServiceLauncherCard
+              icon={ShieldCheck}
+              titleLevel={3}
+              title="グローバル人事情報基盤・従業員セルフサービスポータル（アジア太平洋地域）"
+              statusLabel="利用可能"
+              statusTone="success"
+              description="人事マスタ、勤怠、給与、評価を一元管理する統合ワークスペースです。"
+              metadata="workforce-identity-administration.ap-northeast-1.corp.example.jp · v11.0"
+              action={<Button>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Clock3}
+              titleLevel={3}
+              title="日報"
+              statusLabel="利用可能"
+              statusTone="success"
+              metadata="nippo.corp.example.jp"
+              action={<Button>サービスを開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Server}
+              titleLevel={3}
+              title="Global Workforce Identity & Entitlement Administration Console"
+              statusLabel="Attention required"
+              statusTone="warning"
+              description="Review pending entitlement requests before the next access certification."
+              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>}
+            />
+          </ResponsiveGrid>
+        </Section>
 
-        {/* Long JA / EN / VI names + an unbreakable hostname: the tile must wrap, never widen its
-         * grid column. Same 3 → 2 → 1 grid, no page-local CSS anywhere. */}
-        <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
-          <ServiceLauncherCard
-            icon={ShieldCheck}
-            titleLevel={3}
-            title="グローバル人事情報基盤・従業員セルフサービスポータル（アジア太平洋地域）"
-            statusLabel="LIVE"
-            statusTone="success"
-            description="人事マスタ、勤怠、給与、評価を一元管理する統合ワークスペースです。"
-            metadata="workforce-identity-administration.ap-northeast-1.godx.jp · Enterprise"
-            action={<Button>サービスを開く</Button>}
-          />
-          <ServiceLauncherCard
-            icon={ShieldCheck}
-            titleLevel={3}
-            title="Acme Global Workforce Identity & Entitlement Administration Console"
-            statusLabel="Attention required"
-            statusTone="warning"
-            description="Review pending entitlement requests before the next access certification."
-            metadata="workforce-identity-administration.ap-northeast-1.godx.jp · Enterprise"
-            disabledReason="Your organization has no active subscription for this service yet."
-            action={<Button disabled>Open service</Button>}
-          />
-          <ServiceLauncherCard
-            icon={ShieldCheck}
-            titleLevel={3}
-            title="Cổng quản trị định danh và phân quyền nhân sự toàn cầu của doanh nghiệp"
-            statusLabel="Chỉ quản trị viên"
-            statusTone="info"
-            description="Xem lại quyền truy cập, chính sách xác thực hai yếu tố và nhật ký kiểm toán."
-            metadata="workforce-identity-administration.ap-southeast-1.godx.jp · Enterprise"
-            action={<Button variant="outline">Xem quyền truy cập</Button>}
-          />
-        </ResponsiveGrid>
+        <Section
+          title="6 · 最小のタイル"
+          why="必須は icon・title・action の 3 つだけです。statusLabel を省けば Badge の行ごと消え、description と metadata を省いても骨格は保たれます — 隣の満載のタイルと高さを比べてください。"
+        >
+          <ResponsiveGrid columns={{ sm: 1, md: 2, lg: 3 }}>
+            <ServiceLauncherCard
+              icon={BookOpen}
+              titleLevel={3}
+              title="社内 Wiki"
+              action={<Button variant="outline">開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Mail}
+              titleLevel={3}
+              title="問い合わせ窓口"
+              description="社内のシステム相談はこちらで受け付けています。"
+              action={<Button variant="outline">開く</Button>}
+            />
+            <ServiceLauncherCard
+              icon={Calendar}
+              titleLevel={3}
+              title="全社カレンダー"
+              statusLabel="利用可能"
+              statusTone="success"
+              description="全社行事、休業日、拠点別の予定を共有します。"
+              metadata="calendar.corp.example.jp · v3.1"
+              disabledReason="読み取り専用で公開されています。"
+              action={<Button variant="outline">開く</Button>}
+            />
+          </ResponsiveGrid>
+        </Section>
       </Flex>
     </PageContainer>
   );

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "28.6.0",
-  "godxUiMcp": "28.6.0",
+  "version": "28.7.0",
+  "godxUiMcp": "28.7.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -370,6 +370,7 @@
     "check:text-ink-clip": "node scripts/check-text-ink-clip.mjs",
     "check:token-scale-bypass": "node scripts/check-token-scale-bypass.mjs",
     "check:token-tiers": "node scripts/check-token-tiers.mjs",
+    "check:token-width-wins": "node scripts/check-token-width-wins.mjs",
     "check:typography": "node scripts/check-typography.mjs",
     "check:use-client": "node scripts/check-use-client.mjs",
     "check:visual-audit": "node scripts/visual-audit-smoke.mjs",
@@ -408,10 +409,10 @@
     "typecheck:docs": "node node_modules/typescript-7/bin/tsc --noEmit -p tsconfig.docs.json",
     "typecheck:mcp": "node node_modules/typescript-7/bin/tsc --noEmit -p mcp/tsconfig.json",
     "typecheck:ts6": "tsc --noEmit -p tsconfig.json",
-    "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: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": "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: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": "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: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",

package/scripts/visual-audit.mjs

@@ -95,6 +95,32 @@ function collectInPage() {
     const cs = getComputedStyle(el);
     return r.width > 0 && r.height > 0 && cs.visibility !== "hidden" && cs.display !== "none";
   };
+  // `visible` above is ELEMENT-LOCAL — it reads the node's own box and its own visibility/display,
+  // and an ancestor can still clip the node out of the rendered page entirely. The visually-hidden
+  // idiom (Tailwind `sr-only`, react-aria `<VisuallyHidden>`) is exactly that: a 1x1 container with
+  // `overflow: hidden` + `clip: rect(0 0 0 0)` wrapping a FULL-SIZE child. The child's own
+  // getBoundingClientRect stays full size, so an element-local test calls it visible.
+  //
+  // gh#818: every `<Select>` carries react-aria's native `<select>` in one of those containers —
+  // the form-submit + browser-autofill fallback, `aria-hidden`, `tabindex="-1"`, painted nowhere.
+  // Its box is the width of its concatenated option labels (85x22 for a locale picker), so
+  // `target-size-min` reported one per Select on every consumer page, and the consumer read it as
+  // a second, undersized language control sitting beside the styled trigger. Measured in Chromium:
+  // `document.elementFromPoint` at that `<select>`'s own centre never returns the select, and at
+  // the trigger's centre +/-11px it returns the trigger — there is one target, not two.
+  //
+  // SC 2.5.8 bounds TARGETS: "the region of the display that will accept a pointer action". A node
+  // clipped to a 1px sliver accepts none at any size, so it is not a target and must not be
+  // measured as one — enlarging it would be the wrong fix twice over.
+  const clippedAway = (el) => {
+    for (let a = el.parentElement; a; a = a.parentElement) {
+      const cs = getComputedStyle(a);
+      if (cs.overflow === "visible" && cs.clip === "auto" && cs.clipPath === "none") continue;
+      const r = a.getBoundingClientRect();
+      if (r.width <= 1 || r.height <= 1) return true;
+    }
+    return false;
+  };
 
   // Accent surfaces — buttons / primary CTAs / banners whose background carries colour.
   const accents = [];
@@ -116,7 +142,9 @@ function collectInPage() {
   for (const el of document.querySelectorAll(
     "a[href], button, [role=button], input:not([type=hidden]), select, [tabindex]:not([tabindex='-1'])",
   )) {
-    if (!visible(el)) continue;
+    // Dropped BEFORE the list is built, not filtered after: a node nobody can point at must not
+    // count as a neighbour either, or it spends the Spacing exception of the real target it sits on.
+    if (!visible(el) || clippedAway(el)) continue;
     const r = el.getBoundingClientRect();
     const name = (el.getAttribute("aria-label") || el.textContent || "").trim().slice(0, 40);
     rawTargets.push({