@godxjp/ui 28.5.0 → 28.7.0

package/docs/data-display/scroll-area.tsx

@@ -116,6 +116,7 @@ export default function Demo() {
             <Card variant="outline" className="h-64 w-full">
               <CardContent flush>
                 <ScrollArea
+                  className="h-72"
                   anchor="bottom"
                   viewportRef={streamViewport}
                   onAnchoredChange={setAnchored}
@@ -176,7 +177,7 @@ export default function Demo() {
           <CardContent>
             <Card variant="outline" className="h-40 w-full">
               <CardContent flush>
-                <ScrollArea anchor="bottom" anchorOffset={0}>
+                <ScrollArea className="h-40" anchor="bottom" anchorOffset={0}>
                   <CardContent>
                     <Flex direction="col" gap="xs">
                       {entries.map((e) => (
@@ -192,6 +193,67 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              scrollbar=&quot;always&quot; — 「スクロールバーが見えない」の答え
+            </CardTitle>
+            <CardDescription>
+              既定の <code>auto</code> はプラットフォームに任せます。macOS / iPadOS
+              のシステム既定「スクロール中にのみ表示」では、それは
+              <strong>オーバーレイのバー</strong>
+              です。つまり、すでにスクロールしている間しか存在しません。止まっている状態では、
+              この面がスクロールできることが一切わかりません（gh#798）。
+              下の2つは中身も高さも同一で、違うのは <code>scrollbar</code> だけです。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  scrollbar=&quot;auto&quot;（既定）— macOS では静止時にバーが出ない
+                </Text>
+                <Card variant="outline" className="w-full">
+                  <CardContent flush>
+                    <ScrollArea className="h-40">
+                      <CardContent>
+                        <Flex direction="col" gap="xs">
+                          {entries.map((e) => (
+                            <div key={`auto-${e}`} className="text-sm tabular-nums">
+                              {e}
+                            </div>
+                          ))}
+                        </Flex>
+                      </CardContent>
+                    </ScrollArea>
+                  </CardContent>
+                </Card>
+              </Flex>
+
+              <Flex direction="col" gap="xs">
+                <Text size="sm" tone="muted">
+                  scrollbar=&quot;always&quot; — レイアウトを占める古典的なバー
+                </Text>
+                <Card variant="outline" className="w-full">
+                  <CardContent flush>
+                    <ScrollArea className="h-40" scrollbar="always">
+                      <CardContent>
+                        <Flex direction="col" gap="xs">
+                          {entries.map((e) => (
+                            <div key={`always-${e}`} className="text-sm tabular-nums">
+                              {e}
+                            </div>
+                          ))}
+                        </Flex>
+                      </CardContent>
+                    </ScrollArea>
+                  </CardContent>
+                </Card>
+              </Flex>
+            </ResponsiveGrid>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>固定高さのリスト（縦スクロール）</CardTitle>
@@ -200,9 +262,14 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Card variant="outline" className="h-56 w-full">
+            {/* THE HEIGHT GOES ON THE SCROLLAREA, not on an ancestor. It was on the outer Card,
+                and neither CardContent nor ScrollArea inherits a height from it — so the
+                ScrollArea grew to its content, `scrollHeight === clientHeight`, and the demo for
+                a scrolling component did not scroll. Measured on the published site before this
+                change. The page header says this rule outright; the example broke it. */}
+            <Card variant="outline" className="w-full">
               <CardContent flush>
-                <ScrollArea>
+                <ScrollArea className="h-56">
                   <CardContent>
                     <Flex direction="col" gap="xs">
                       {entries.map((e) => (
@@ -288,6 +355,37 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>スクロール領域に名前を付ける（label）</CardTitle>
+            <CardDescription>
+              溢れている間、ビューポートは Tab
+              で止まる（キーボードだけで中身を送るために必要）。その停止点は名前を持つ。既定は
+              「スクロール可能な領域」の翻訳で、画面がその領域を呼べるときは label
+              で「監査ログ」と名乗る。ロールはランドマークの region ではなく group
+              にしてある。同じ名前のランドマークが一画面に並ぶと axe landmark-unique
+              に触れるため。溢れていなければ停止点も role も名前も出ない（gh#821）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="w-full">
+              <CardContent flush>
+                <ScrollArea className="h-40" label="監査ログ">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>内容が収まる場合（バー非表示）</CardTitle>
@@ -296,9 +394,12 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Card variant="outline" className="h-56 w-full">
+            {/* Same h-56 as above, DELIBERATELY not overflowing: `shortEntries` fits, so no bar
+                appears. This is the control case — it is only meaningful next to one that does
+                overflow, which is why the demo above had to be fixed first. */}
+            <Card variant="outline" className="w-full">
               <CardContent flush>
-                <ScrollArea>
+                <ScrollArea className="h-56">
                   <CardContent>
                     <Flex direction="col" gap="xs">
                       {shortEntries.map((e) => (

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>
   );