@godxjp/ui 28.0.0 → 28.2.0

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -258,9 +258,19 @@ export type ToneProp = "default" | "success" | "warning" | "destructive" | "info
  * Alert STRUCTURAL axis (orthogonal to `tone`, which owns colour/semantics):
  * `default` — the inline card (rounded, framed on all sides);
  * `banner` — the full-bleed page/shell attention strip the `Banner` export renders
- * (square corners, hairline block-end rule only, `--banner-*` token geometry).
+ * (square corners, hairline block-end rule only, `--banner-*` token geometry);
+ * `callout` — the in-prose aside the `Callout` export renders (leading rail, `--callout-*`
+ * geometry) and, uniquely, the one value that is NOT a live region: it carries `role="note"`
+ * because it is part of the document being read, not an update to it (gh#765).
  */
-export type AlertVariantProp = "default" | "banner";
+export type AlertVariantProp = "default" | "banner" | "callout";
+/**
+ * Callout kind — the five admonitions GitHub documents (`> [!NOTE]`, `[!TIP]`, `[!IMPORTANT]`,
+ * `[!WARNING]`, `[!CAUTION]`), which Obsidian's lower-case spelling maps onto one-for-one. It is a
+ * PRESET, not a second colour axis: each kind resolves to a `tone` and a leading glyph that
+ * `tone`/`icon` still override per instance.
+ */
+export type CalloutKindProp = "note" | "tip" | "important" | "warning" | "caution";
 /** Sort direction for table columns. */
 export type SortDirectionProp = "asc" | "desc";
 /** Table column text alignment. */

package/dist/styles/alert-layout.css

@@ -62,6 +62,34 @@
     padding-inline-end: calc(var(--banner-space-inset-inline) + var(--space-8));
   }
 
+  [data-slot="alert"][data-variant="callout"] {
+    border-radius: var(--callout-radius);
+    border-block-width: 0;
+    border-inline-end-width: 0;
+    border-inline-start-width: var(--callout-rail-width);
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    padding-block: var(--callout-space-inset-block);
+    padding-inline: var(--callout-space-inset-inline);
+    margin-block: var(--callout-space-stack);
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="destructive"] {
+    border-color: hsl(var(--destructive));
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="warning"] {
+    border-color: hsl(var(--warning));
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="success"] {
+    border-color: hsl(var(--success));
+  }
+
+  [data-slot="alert"][data-variant="callout"][data-tone="info"] {
+    border-color: hsl(var(--info));
+  }
+
   [data-slot="alert-icon"] {
     width: var(--alert-icon-size);
     height: var(--alert-icon-size);

package/dist/styles/navigation-layout.css

@@ -220,31 +220,151 @@
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="card"][data-placement="start"]
     [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
     [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
-    [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
     [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
+  [data-slot="tabs"][data-bodied="true"] {
+    --tabs-root-gap: 0px;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-variant="card"] [data-slot="tabs-list"],
+  [data-slot="tabs"][data-bodied="true"][data-variant="editable-card"] [data-slot="tabs-list"],
+  [dir="rtl"] [data-slot="tabs"][data-bodied="true"][data-variant="card"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-bodied="true"][data-variant="editable-card"]
+    [data-slot="tabs-list"] {
+    box-shadow: none;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-bar {
+    align-items: flex-end;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] .ui-tabs-bar {
+    align-items: flex-start;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-extra[data-side="end"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] .ui-tabs-extra[data-side="end"] {
+    margin-inline-end: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] .ui-tabs-extra[data-side="start"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"]
+    .ui-tabs-extra[data-side="start"] {
+    margin-inline-start: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
+  }
+
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
+    border: var(--tabs-panel-border-width) solid hsl(var(--border));
+    border-radius: var(--tabs-panel-radius);
+    background: hsl(var(--tabs-panel-background, var(--background)));
+    padding: var(--tabs-panel-space-inset);
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="top"] > [data-slot="tabs-content"] {
+    margin-block-start: calc(-1 * var(--tabs-panel-border-width));
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="bottom"] > [data-slot="tabs-content"] {
+    margin-block-end: calc(-1 * var(--tabs-panel-border-width));
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="start"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="start"] > [data-slot="tabs-content"] {
+    margin-inline-start: calc(-1 * var(--tabs-panel-border-width));
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  [data-slot="tabs"][data-bodied="true"][data-placement="end"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"][data-placement="end"] > [data-slot="tabs-content"] {
+    margin-inline-end: calc(-1 * var(--tabs-panel-border-width));
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
+      border-color: CanvasText;
+    }
+
+    [data-slot="tabs"][data-bodied="true"][data-placement="top"]
+      [data-slot="tabs-trigger"][data-state="active"] {
+      border-block-end-style: none;
+    }
+
+    [data-slot="tabs"][data-bodied="true"][data-placement="bottom"]
+      [data-slot="tabs-trigger"][data-state="active"] {
+      border-block-start-style: none;
+    }
+  }
+
+  .ui-tabs-count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--tabs-count-min-width);
+    margin-inline-start: var(--tabs-count-gap);
+    border-radius: var(--tabs-count-radius);
+    padding-inline: var(--tabs-count-space-inline);
+    background: var(--tabs-count-background, hsl(var(--muted)));
+    color: var(--tabs-count-color, hsl(var(--muted-foreground)));
+    font-size: var(--tabs-count-font-size);
+    line-height: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  [data-slot="tabs"][data-variant="card"]
+    [data-slot="tabs-trigger"]:not([data-state="active"])
+    .ui-tabs-count,
+  [data-slot="tabs"][data-variant="editable-card"]
+    [data-slot="tabs-trigger"]:not([data-state="active"])
+    .ui-tabs-count {
+    background: var(--tabs-count-card-background, hsl(var(--background)));
+  }
+
+  [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
+    background: var(--tabs-count-active-background, hsl(var(--primary)));
+    color: var(--tabs-count-active-color, hsl(var(--primary-foreground)));
+  }
+
+  @media (forced-colors: active) {
+    [data-slot="tabs-trigger"][data-state="active"] .ui-tabs-count {
+      outline: var(--tabs-count-forced-outline-width) solid currentColor;
+    }
+  }
+
   .ui-tabs-tab-remove {
     display: inline-flex;
     flex: 0 0 auto;

package/dist/tokens/base.css

@@ -16,6 +16,7 @@
 @import "./components/table.css";
 @import "./components/feedback.css";
 @import "./components/banner.css";
+@import "./components/callout.css";
 @import "./components/sheet.css";
 @import "./components/badge.css";
 @import "./components/navigation.css";

package/dist/tokens/components/callout.css

@@ -0,0 +1,13 @@
+
+
+:root {
+
+  --callout-rail-width: var(--space-1);
+
+  --callout-radius: var(--alert-radius);
+
+  --callout-space-inset-block: var(--space-3);
+  --callout-space-inset-inline: var(--space-4);
+
+  --callout-space-stack: var(--space-4);
+}

package/dist/tokens/components/navigation.css

@@ -78,6 +78,24 @@
   --tabs-card-rail-border-width: var(--stroke-hairline);
   --tabs-card-background: initial;
 
+  --tabs-panel-background: initial;
+  --tabs-panel-border-width: var(--tabs-card-rail-border-width);
+  --tabs-panel-radius: var(--tabs-card-radius);
+  --tabs-panel-space-inset: var(--space-4);
+
+  --tabs-count-min-width: var(--space-4);
+  --tabs-count-space-inline: var(--space-1);
+  --tabs-count-gap: var(--space-1);
+  --tabs-count-font-size: var(--font-size-xs);
+  --tabs-count-radius: var(--radius-pill);
+  --tabs-count-background: initial;
+
+  --tabs-count-card-background: initial;
+  --tabs-count-color: initial;
+  --tabs-count-active-background: initial;
+  --tabs-count-active-color: initial;
+  --tabs-count-forced-outline-width: var(--stroke-hairline);
+
   --tabs-bar-gap: var(--space-2);
   --tabs-extra-gap: var(--space-2);
 

package/docs/FRAME-COVERAGE-REPORT.md

@@ -3,8 +3,8 @@
 > Generated by `scripts/frame-coverage.mjs` (issue #163). Do not edit by hand — run `pnpm check:frame-coverage`.
 > Standard: [FRAME-COVERAGE-STANDARD.md](./FRAME-COVERAGE-STANDARD.md). A missing dimension is **UNTESTED**, never a pass.
 
-- Public components: **164**
-- With ≥1 frame: **143** · zero-frame: **21**
+- Public components: **165**
+- With ≥1 frame: **144** · zero-frame: **21**
 - Fully covered (every contract axis declared): **0**
 
 ## UNTESTED — no `/frame/**` route
@@ -118,6 +118,7 @@ Legend: ✓ covered · N/A reasoned skip · · UNTESTED (blank cell = UNTESTED).
 | Sheet | ✓ | N/A | N/A | · | · | · | · | · | · | · |
 | Alert | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
 | Banner | ✓ | ✓ | N/A | N/A | · | · | · | · | · | · |
+| Callout | ✓ | · | N/A | N/A | · | · | · | · | · | · |
 | SkeletonTable | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |
 | SkeletonRows | **✗** | N/A | N/A | N/A | · | · | · | · | · | · |
 | Toaster | ✓ | N/A | N/A | N/A | · | · | · | · | · | · |

package/docs/data-entry/toggle-count.tsx

@@ -130,7 +130,10 @@ export default function Demo() {
               Badge variant="secondary" と同じ塗り）、shape="pill" が角、count
               が件数、押下が選択。variant / size / shape はグループに一度だけ書けば context
               で全アイテムに届く。default や outline
-              だとチップは押されるまで透明に見えるので、チップ列にはこの組み合わせを使う。
+              だとチップは押されるまで透明に見えるので、チップ列にはこの組み合わせを使う。タグ列は
+              件数ぶん伸びて桁を越えるので wrap を付ける（320px
+              の桁で計測：無しだと最後のチップが枠の外に 21.41px はみ出し、各ラベルが min-content
+              まで潰れて 129.13px · 有りで 3 行 80.00px、scrollWidth 267→212）。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -140,6 +143,7 @@ export default function Demo() {
                 variant="soft"
                 shape="pill"
                 size="xs"
+                wrap
                 value={tags}
                 onValueChange={setTags}
                 aria-label="タグで絞り込み"

package/docs/feedback/callout.tsx

@@ -0,0 +1,220 @@
+import { Callout } from "@godxjp/ui/feedback";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Prose,
+} from "@godxjp/ui/data-display";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+
+/**
+ * Callout · the aside INSIDE a document body — the Alert primitive with the
+ * structural axis fixed to variant="callout". It is the one variant that is NOT a
+ * live region: role="note", so a page carrying three of them stays silent on load.
+ * kind is the GitHub/Obsidian admonition preset (note/tip/important/warning/caution)
+ * and resolves tone + glyph; tone and icon still override per instance. Geometry —
+ * the leading rail, the prose insets, the block margin — is owned by the --callout-*
+ * tokens, never consumer CSS.
+ */
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Callout"
+      subtitle="kind × tone × icon · the static aside in prose (the announcing presentations are Alert and Banner)"
+    >
+      <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>The five admonitions · every kind</CardTitle>
+            <CardDescription>
+              GitHub&apos;s documented set, which Obsidian&apos;s lower-case spelling maps onto
+              one-for-one. Each kind resolves a tone and its OWN glyph, so the five are told apart
+              without colour (WCAG 1.4.1). important takes the neutral tone on purpose. This system
+              has no purple role, and borrowing info would make it indistinguishable from note.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="note">
+                <Callout.Title>補足</Callout.Title>
+                <Callout.Description>
+                  この設定は次回のログインから有効になります。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="tip">
+                <Callout.Title>ヒント</Callout.Title>
+                <Callout.Description>
+                  ⌘K でどの画面からでもコマンドパレットを開けます。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="important">
+                <Callout.Title>重要</Callout.Title>
+                <Callout.Description>
+                  組織の所有者だけが請求情報を変更できます。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="warning">
+                <Callout.Title>注意</Callout.Title>
+                <Callout.Description>
+                  APIキーを再発行すると、既存のキーは直ちに無効になります。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="caution">
+                <Callout.Title>警告</Callout.Title>
+                <Callout.Description>
+                  リポジトリを削除すると、Issue と Pull Request
+                  も一緒に削除されます。この操作は取り消せません。
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>In prose · what it is actually for</CardTitle>
+            <CardDescription>
+              A callout is part of the document being read, not an update to it, which is why it
+              carries role=&quot;note&quot; and never announces. Read this card with a screen
+              reader: the three callouts are reached in document order, and none of them interrupts.
+              An Alert in the same place would announce all three the moment the page loaded.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Prose>
+              <h3>APIキーの再発行</h3>
+              <p>
+                APIキーは組織ごとに発行され、すべての連携サービスで共有されます。ローテーションは四半期ごとを推奨しています。
+              </p>
+              <Callout kind="tip">
+                <Callout.Description>
+                  再発行の前に、連携中のサービス一覧を書き出しておくと復旧が早くなります。
+                </Callout.Description>
+              </Callout>
+              <p>
+                再発行すると新しいキーが即座に有効になり、古いキーは同じ瞬間に失効します。猶予期間はありません。
+              </p>
+              <Callout kind="warning">
+                <Callout.Title>停止時間が発生します</Callout.Title>
+                <Callout.Description>
+                  古いキーを使っている連携は、新しいキーを設定するまで認証に失敗します。
+                </Callout.Description>
+              </Callout>
+              <p>設定画面の「セキュリティ」タブから、いつでも再発行の履歴を確認できます。</p>
+              <Callout kind="note">
+                <Callout.Description>
+                  履歴は90日間保持されます。それより古い記録は監査ログからのみ参照できます。
+                </Callout.Description>
+              </Callout>
+            </Prose>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Title-less · a single paragraph</CardTitle>
+            <CardDescription>
+              Callout.Title is optional, exactly as on Alert. With one line of copy the glyph and
+              the rail carry the kind on their own, and the aside stays the height of its text.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="note">
+                <Callout.Description>
+                  Rates are shown in the organization&apos;s billing currency, not the viewer&apos;s
+                  locale.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="caution">
+                <Callout.Description>
+                  Exporting includes personal data; the download link expires after one hour.
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Overrides · tone and icon, per instance</CardTitle>
+            <CardDescription>
+              kind is a preset, not a second colour axis. Pass tone to recolour one aside without
+              changing which admonition it is, or icon={false} to drop the glyph entirely. The tone
+              vocabulary is the SAME one Alert and Banner use.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="note" tone="muted">
+                <Callout.Title>Quieter than the default note</Callout.Title>
+                <Callout.Description>
+                  tone=&quot;muted&quot; keeps the note glyph and drops the colour to the neutral
+                  surface.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="important" icon={false}>
+                <Callout.Title>Glyphless</Callout.Title>
+                <Callout.Description>
+                  icon={"{false}"} removes the leading glyph; the rail alone carries the tone.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="tip" tone="info">
+                <Callout.Title>A tip in the note colour</Callout.Title>
+                <Callout.Description>
+                  The lightbulb stays, so this is still readable as a tip without relying on the
+                  hue.
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>Long JA / EN / VI copy · 390px wrapping</CardTitle>
+            <CardDescription>
+              The text column wraps inside min-width 0 and the rail stays on the START edge in both
+              directions (logical properties throughout). Narrow this frame to 390px: nothing clips
+              and nothing overflows horizontally.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Callout kind="important">
+                <Callout.Title>
+                  ご契約中のプランでは、組織あたりのAPIリクエスト数に上限が設定されており、上限を超えた分は翌月の請求に自動的に加算されます
+                </Callout.Title>
+                <Callout.Description>
+                  現在の消費量は請求ダッシュボードで確認できます。上限の引き上げをご希望の場合は、担当者にご連絡ください。
+                </Callout.Description>
+              </Callout>
+              <Callout kind="caution">
+                <Callout.Title>
+                  Deleting an organization removes every project, dataset and audit record it owns,
+                  and this cannot be undone by support
+                </Callout.Title>
+                <Callout.Description>
+                  Members lose access immediately. Export anything you need to keep before you
+                  confirm. The deletion runs as soon as the dialog closes.
+                </Callout.Description>
+              </Callout>
+              <Callout kind="tip">
+                <Callout.Title>
+                  Bạn có thể gán vai trò cho cả một nhóm thay vì từng thành viên, và mọi thay đổi về
+                  thành viên của nhóm sẽ tự động áp dụng
+                </Callout.Title>
+                <Callout.Description>
+                  Cách này giữ cho danh sách phân quyền ngắn gọn và dễ kiểm toán hơn nhiều so với
+                  việc cấp quyền riêng lẻ.
+                </Callout.Description>
+              </Callout>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}