@squadbase/vantage 0.6.1 → 0.6.2-dev1.0017a4d

package/docs/en/slide/slide-kpi-hero.md

@@ -0,0 +1,58 @@
+# SlideKpiHero
+
+> One number as the hero — value, change and a trend line.
+
+One number, large. The label, value and change take the left 6 columns and the trend line the right 6. Without `trend` the number takes the full width.
+
+```tsx
+import { SlideKpiHero } from "@squadbase/vantage/slide";
+import type { SlideKpiHeroProps, SlideKpiHeroDelta } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **the content of one `<Slide>`**. It does not include `<Slide>` itself, so put it directly inside one. The root fills the canvas (1920×1080) at 100% and takes no `className`. Margins, text sizes and the grid are fixed inside the block (a 12-column grid on 1920×1080), so don't add your own dimensions. For how to build a deck, see [Slide](page-types/slide). The labels the block adds (「… 時点」, 「出典: …」, 「増」/「減」/「横ばい」) are fixed in Japanese and cannot be overridden; `title`, `label`, `comparisonLabel` and `display` are your own text.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` |  | The conclusion as one sentence (an action title). **Required.** |
+| `label` | `string` |  | What the number is ("Monthly revenue"). **Required.** |
+| `value` | `number \| null` |  | The number. `null` shows 「—」. **Required.** Formatted with `format` (the number is kept as `data-raw` for export and tests). |
+| `format` | `ValueFormat` |  | How to format the value (`"currency"`, `"percent"`, …). Also the default format of `delta`. |
+| `display` | `string` |  | Replaces the shown text only (the number behind it stays `value`). |
+| `delta` | `SlideKpiHeroDelta` |  | `{ value: number; format?: ValueFormat }`. The size of the change, signed (e.g. `0.074` with `format: "percent"` shows 「+7.4%」). The direction comes from the sign, and ▲ ▼ with 「増」「減」 always show. `format` defaults to the metric's `format`. Omit for no change. |
+| `betterWhen` | `"up" \| "down"` | `"up"` | Which direction of `delta` is good. Drives the colour. |
+| `comparisonLabel` | `string` |  | What `delta` is against (e.g. 「前月比」). |
+| `trend` | `{ x: string; y: number }[]` |  | Points of the line on the right; leave out for a number alone. |
+| `asOf` | `string` |  | The date the numbers were taken, date only (e.g. `"2026-10-01"`). The block adds 「時点」 once, so don't write it. The label is fixed in Japanese. |
+| `source` | `string` |  | Where the numbers come from (e.g. `"社内 BI"`). Shown as 「出典: 社内 BI」; the "出典:" label is fixed in Japanese. |
+
+## Usage
+
+```tsx
+import { Slide, SlideKpiHero } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideKpiHero
+    title="9 月の売上は過去最高の 5.4 億円"
+    label="月次売上"
+    value={540_000_000}
+    format="currency"
+    delta={{ value: 0.074, format: "percent" }}
+    comparisonLabel="前月比"
+    trend={[
+      { x: "4 月", y: 460_000_000 }, { x: "5 月", y: 480_000_000 }, { x: "6 月", y: 490_000_000 },
+      { x: "7 月", y: 500_000_000 }, { x: "8 月", y: 503_000_000 }, { x: "9 月", y: 540_000_000 },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## Notes
+
+- For a metric where a fall is good (cost), write `betterWhen="down"`. The colour follows `betterWhen`; the direction (▲ ▼ and 「増」/「減」) comes from the sign of `delta.value`.
+- 「増」, 「減」, 「… 時点」 and 「出典: …」 are wording the block adds, fixed in Japanese.
+- The chart is an `EChart` with animation off; the pptx export waits for it.

package/docs/en/slide/slide-next-actions.md

@@ -0,0 +1,49 @@
+# SlideNextActions
+
+> What happens next — 3–5 actions with owner, due date and the metric to check.
+
+The closing slide of most reports: what happens next. Each action can carry an owner, a due date and the metric that shows it worked.
+
+```tsx
+import { SlideNextActions } from "@squadbase/vantage/slide";
+import type { SlideNextActionsProps, SlideNextActionsItem } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **the content of one `<Slide>`**. It does not include `<Slide>` itself, so put it directly inside one. The root fills the canvas (1920×1080) at 100% and takes no `className`. Margins, text sizes and the grid are fixed inside the block (a 12-column grid on 1920×1080), so don't add your own dimensions. For how to build a deck, see [Slide](page-types/slide). The labels the block adds (the column headers 担当 / 期限 / 確認する指標, 「… 時点」, 「出典: …」) are fixed in Japanese and cannot be overridden; `title` and the `items[]` fields are your own text.
+
+## Props
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `title` | `string` | The decision or plan as one sentence. **Required.** |
+| `items` | `SlideNextActionsItem[]` | Actions, 3–5. **Required.** Each item is described in the `items[].…` rows below. |
+| `items[].action` | `string` | What to do, as one sentence starting from the object (about 40 characters at most). **Required.** |
+| `items[].owner` | `string` | The owner. |
+| `items[].due` | `string` | The due date, shown as written on one line ("10/31"; about 10 characters at most). |
+| `items[].metric` | `string` | What to look at to know it worked. |
+| `asOf` | `string` | The date the numbers were taken, date only (e.g. `"2026-10-01"`). The block adds 「時点」 once, so don't write it. The label is fixed in Japanese. |
+| `source` | `string` | Where the numbers come from (e.g. `"社内 BI"`). Shown as 「出典: 社内 BI」; the "出典:" label is fixed in Japanese. |
+
+## Usage
+
+```tsx
+import { Slide, SlideNextActions } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideNextActions
+    title="解約と新規獲得の施策を 3 つ、11 月末までに始める"
+    items={[
+      { action: "解約予兆スコアの上位 50 社に CS が連絡する", owner: "CS 部 山田", due: "10/31", metric: "解約率 1.5% 以下" },
+      { action: "紹介プログラムの特典を見直す", owner: "マーケ 佐藤", due: "11/15", metric: "紹介経由の新規 20 社" },
+      { action: "料金ページの導線を改善する", owner: "プロダクト 鈴木", due: "11/30", metric: "申込率 +1pt" },
+    ]}
+  />
+</Slide>
+```
+
+## Notes
+
+- The owner, due and metric columns appear only when at least one item has a value.
+- The column headers (担当 / 期限 / 確認する指標) are fixed in Japanese and cannot be overridden.
+- `due` is shown as written ("10/31", "by next week"). More than 5 items log a `console.warn`.

package/docs/en/slide/slide-scorecard-table.md

@@ -0,0 +1,54 @@
+# SlideScorecardTable
+
+> A scorecard table — target vs actual per metric, with a status.
+
+A table of target, actual and attainment per metric with a status (on track / at risk / off track). The status is a coloured dot and a word, so colour is never the only cue.
+
+```tsx
+import { SlideScorecardTable } from "@squadbase/vantage/slide";
+import type { SlideScorecardTableProps, SlideScorecardRow, SlideScorecardStatus } from "@squadbase/vantage/slide";
+```
+
+> [!NOTE]
+> This is **the content of one `<Slide>`**. It does not include `<Slide>` itself, so put it directly inside one. The root fills the canvas (1920×1080) at 100% and takes no `className`. Margins, text sizes and the grid are fixed inside the block (a 12-column grid on 1920×1080), so don't add your own dimensions. For how to build a deck, see [Slide](page-types/slide). The labels the block adds are fixed in Japanese: the status words (順調 / 要注意 / 遅延) and the `asOf` / `source` line (「… 時点」, 「出典: …」) cannot be overridden. The header words can be replaced with `columns` (default 指標 / 目標 / 実績 / 達成率 / 状態); `title`, `rows[].metric` and `rows[].display` are your own text.
+
+## Props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `string` |  | The conclusion as one sentence (an action title). **Required.** |
+| `rows` | `SlideScorecardRow[]` |  | Rows, up to 8. **Required.** Each row is described in the `rows[].…` rows below. |
+| `rows[].metric` | `string` |  | The metric name (about 20 characters at most). **Required.** |
+| `rows[].value` | `number \| null` |  | The actual. `null` shows 「—」. **Required.** |
+| `rows[].format` | `ValueFormat` |  | How to format `value` and `target` (`"currency"`, `"percent"`, …). |
+| `rows[].display` | `string` |  | Replaces the shown actual only (the number behind it stays `value`). |
+| `rows[].target` | `number` |  | The target, in the same `format` as `value`. When any row has a target, the attainment column appears (value ÷ target). |
+| `rows[].betterWhen` | `"up" \| "down"` | `"up"` | Which direction is good. With `"down"` the rate is target ÷ value, so beating a cost target reads above 100%. |
+| `rows[].status` | `SlideScorecardStatus` |  | `"on"` (順調) / `"risk"` (要注意) / `"off"` (遅延). Given, not derived from the values. **Required.** |
+| `columns` | `Partial<Record<"metric" \| "target" \| "actual" \| "attainment" \| "status", string>>` |  | Override header words; omitted columns keep the default (指標 / 目標 / 実績 / 達成率 / 状態). The status words (順調 / 要注意 / 遅延) cannot be overridden. |
+| `asOf` | `string` |  | The date the numbers were taken, date only (e.g. `"2026-10-01"`). The block adds 「時点」 once, so don't write it. The label is fixed in Japanese. |
+| `source` | `string` |  | Where the numbers come from (e.g. `"社内 BI"`). Shown as 「出典: 社内 BI」; the "出典:" label is fixed in Japanese. |
+
+## Usage
+
+```tsx
+import { Slide, SlideScorecardTable } from "@squadbase/vantage/slide";
+
+<Slide>
+  <SlideScorecardTable
+    title="4 指標のうち 2 つが目標どおり、解約と新規が遅れている"
+    rows={[
+      { metric: "月次売上", value: 540_000_000, target: 520_000_000, format: "currency", status: "on" },
+      { metric: "継続率", value: 0.982, target: 0.98, format: { type: "percent", digits: 1 }, status: "on" },
+      { metric: "解約率", value: 0.018, target: 0.015, format: { type: "percent", digits: 1 }, betterWhen: "down", status: "risk" },
+      { metric: "新規獲得", value: 38, target: 50, format: { type: "number", unit: "社" }, status: "off" },
+    ]}
+    asOf="2026-10-01"
+    source="社内 BI"
+  />
+</Slide>
+```
+
+## Notes
+
+- From 7 rows the text drops from body to caption size. More than 8 are drawn with a `console.warn`.

package/docs/en/ui/alert-dialog.md

@@ -0,0 +1,42 @@
+# Alert Dialog
+
+> A modal that asks for confirmation before an irreversible action.
+
+A modal that asks for an explicit answer before an action that can't be undone, such as a delete.
+Unlike [`Dialog`](ui/dialog), it does not close when the backdrop is clicked.
+
+```tsx
+import {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from "@squadbase/vantage/ui";
+```
+
+## Parts
+
+| Part | Role |
+| --- | --- |
+| `AlertDialog` | The state: `open` / `defaultOpen` / `onOpenChange` |
+| `AlertDialogTrigger` | What opens it; `render` turns it into a button |
+| `AlertDialogContent` | The panel. `size` picks the width |
+| `AlertDialogMedia` | The icon tile beside the heading |
+| `AlertDialogHeader` / `AlertDialogTitle` / `AlertDialogDescription` | The heading block |
+| `AlertDialogFooter` | The button row |
+| `AlertDialogCancel` | The dismiss button (`variant="outline"` by default; also takes `size`) |
+| `AlertDialogAction` | The confirm button. Takes the `Button` props as they are |
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `"default" \| "sm"` | `"default"` | Passed to `AlertDialogContent`. `sm` lays the buttons out in two columns. |
+
+`AlertDialogAction` **does not close the dialog on its own**. Set `open` to `false` when your work
+finishes. If it is fine to close immediately, use `AlertDialogCancel` instead and give it the
+`variant` you want, since it closes the dialog.

package/docs/en/ui/avatar.md

@@ -0,0 +1,31 @@
+# Avatar
+
+> A user's photo or initials.
+
+Shows a user or owner as a small circle. When the image fails to load, or there is no `src`, it
+shows the content of `AvatarFallback` (initials, for example).
+
+```tsx
+import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
+  AvatarBadge,
+  AvatarGroup,
+  AvatarGroupCount,
+} from "@squadbase/vantage/ui";
+```
+
+## Parts
+
+| Part | Role |
+| --- | --- |
+| `Avatar` | The frame. `size` picks the dimensions |
+| `AvatarImage` | The image. Not rendered if loading fails |
+| `AvatarFallback` | What shows when there is no image |
+| `AvatarBadge` | A small dot at the bottom right (an online indicator, say) |
+| `AvatarGroup` / `AvatarGroupCount` | Overlapping row. `AvatarGroupCount` is the remainder, such as "+4" |
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `"default" \| "sm" \| "lg"` | `"default"` | Passed to `Avatar`. `sm` is 24px, `default` is 32px, `lg` is 40px. |

package/docs/en/ui/combobox.md

@@ -0,0 +1,74 @@
+# Combobox
+
+> A select you filter by typing.
+
+An input where you type to narrow the options and pick one (or several). For just a few options,
+[`Select`](ui/select) takes fewer steps. It is built on Base UI's `Combobox`.
+
+```tsx
+import {
+  Combobox,
+  ComboboxInput,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxList,
+  ComboboxItem,
+  ComboboxGroup,
+  ComboboxLabel,
+  ComboboxCollection,
+  ComboboxSeparator,
+  ComboboxChips,
+  ComboboxChip,
+  ComboboxChipsInput,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+} from "@squadbase/vantage/ui";
+```
+
+## Parts
+
+| Part | Role |
+| --- | --- |
+| `Combobox` | The state: `items` / `value` / `defaultValue` / `onValueChange` / `multiple` |
+| `ComboboxInput` | The input. `showTrigger` (default `true`) and `showClear` (default `false`) toggle the buttons on the right |
+| `ComboboxContent` | The popup. `side` / `align` / `anchor` |
+| `ComboboxList` | The options. Pass a function as the child and it receives the filtered `items` one by one |
+| `ComboboxItem` | One option. `value` is required |
+| `ComboboxEmpty` | Shown when nothing matches |
+| `ComboboxGroup` / `ComboboxLabel` / `ComboboxCollection` / `ComboboxSeparator` | Grouping |
+| `ComboboxChips` / `ComboboxChip` / `ComboboxChipsInput` | Show a multiple selection as chips. `ComboboxChip` has a remove button; `showRemove={false}` hides it |
+| `ComboboxTrigger` / `ComboboxValue` | The button-opened form, without the input |
+| `useComboboxAnchor` | A ref that makes the chip frame the popup's reference |
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `readonly unknown[]` |  | The options passed to `Combobox`. They are filtered as the user types and handed to the function in `ComboboxList`. |
+| `multiple` | `boolean` | `false` | Allow selecting several. |
+| `onValueChange` | `(value) => void` |  | Called when the selection changes. In single-select mode it can also receive `null` for no selection. |
+
+## Multiple selection
+
+Add `multiple`, and place the chips and a `ComboboxChipsInput` inside `ComboboxChips`. To match the
+popup's width to the chip frame, give the ref from `useComboboxAnchor()` to both
+`ComboboxChips` and `ComboboxContent`.
+
+```tsx
+const anchor = useComboboxAnchor();
+
+<Combobox items={metrics} multiple>
+  <ComboboxChips ref={anchor}>
+    <ComboboxValue>
+      {(values: string[]) =>
+        values.map((v) => <ComboboxChip key={v}>{v}</ComboboxChip>)
+      }
+    </ComboboxValue>
+    <ComboboxChipsInput placeholder="Add a metric" />
+  </ComboboxChips>
+  <ComboboxContent anchor={anchor}>
+    <ComboboxList>
+      {(item: string) => <ComboboxItem key={item} value={item}>{item}</ComboboxItem>}
+    </ComboboxList>
+  </ComboboxContent>
+</Combobox>;
+```

package/docs/en/ui/drawer.md

@@ -0,0 +1,41 @@
+# Drawer
+
+> A panel you swipe in and out from the edge of the screen.
+
+A panel that comes in from the bottom of the screen (or any edge). You can dismiss it by
+swiping, so it suits detail views and action lists on mobile. For a large form on desktop,
+[`Sheet`](ui/sheet) is the more natural choice. It is built on Base UI's `Drawer`.
+
+```tsx
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerClose,
+} from "@squadbase/vantage/ui";
+```
+
+## Parts
+
+| Part | Role |
+| --- | --- |
+| `Drawer` | The state: `open` / `defaultOpen` / `onOpenChange`, direction, snap points |
+| `DrawerTrigger` | What opens it; `render` turns it into a button |
+| `DrawerContent` | The panel. It includes the overlay and the portal |
+| `DrawerHeader` / `DrawerTitle` / `DrawerDescription` | The heading block |
+| `DrawerFooter` | The button row |
+| `DrawerClose` | Anything that closes it |
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `swipeDirection` | `"down" \| "up" \| "left" \| "right"` | `"down"` | Passed to `Drawer`. The direction you swipe to dismiss it (which is also the edge it comes from). |
+| `showSwipeHandle` | `boolean` | `false` | Passed to `Drawer`. Shows a grab handle. |
+| `snapPoints` | `(number \| string)[]` |  | Passed to `Drawer`. Heights where it can rest part-way (`0.5` or `"20rem"`). |
+| `modal` | `boolean` | `true` | Passed to `Drawer`. With `false` the page behind stays interactive and no overlay is shown. |
+
+`DrawerTitle` is required for assistive technology. If you don't want it visible, keep it and add
+`className="sr-only"`.

package/docs/en/ui/empty.md

@@ -10,7 +10,7 @@ import { Empty } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `title` | `string` | `"Nothing here yet"` | The heading. |
+| `title` | `string` | `"表示できるデータがありません"` | The heading. |
 | `description` | `string` |  | Supporting text under the heading. |
 | `icon` | `ReactNode` |  | Artwork above the heading. |
 | `action` | `ReactNode` |  | The next step — a button or link — at the bottom. |

package/docs/en/ui/error-state.md

@@ -11,8 +11,9 @@ import { ErrorState } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `title` | `string` | `"Something went wrong"` | The heading. |
-| `message` | `ReactNode` |  | The details — an error message can go straight in. |
+| `title` | `string` | `"データを読み込めませんでした"` | The heading. |
+| `message` | `ReactNode` | `"時間をおいて再試行してください。解決しない場合は管理者にお問い合わせください。"` | What happened and what to do next, in plain words. |
+| `details` | `ReactNode` |  | Technical detail (error message, status code). Folded behind a "詳細を表示" disclosure. |
 | `action` | `ReactNode` |  | A retry button, typically. |
 | `className` | `string` |  | Classes to add. |
 
@@ -35,7 +36,7 @@ export default function Customers() {
   if (error)
     return (
       <ErrorState
-        message={error.message}
+        details={error.message}
         action={<Button variant="outline" onClick={() => refetch()}>Retry</Button>}
       />
     );

package/docs/en/ui/field.md

@@ -0,0 +1,42 @@
+# Field
+
+> A form layout part that binds a label, description and error to an input.
+
+Lays out one input's label, helper text and error message with fixed spacing and direction. Put the
+input itself, such as [`Input`](ui/input) or [`Switch`](ui/switch),
+inside it.
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldContent,
+  FieldTitle,
+  FieldGroup,
+  FieldSet,
+  FieldLegend,
+  FieldSeparator,
+} from "@squadbase/vantage/ui";
+```
+
+## Parts
+
+| Part | Role |
+| --- | --- |
+| `Field` | The frame for one input. `orientation` picks the layout |
+| `FieldLabel` | The label (uses `Label`). Tie it to the input with `htmlFor` |
+| `FieldDescription` | Helper text |
+| `FieldError` | The error. Pass `children` or `errors` (`{ message }[]`). Renders nothing when empty |
+| `FieldContent` | A column that groups the label and description in a horizontal layout |
+| `FieldTitle` | A heading that is not a `<label>` |
+| `FieldGroup` | Stacks several `Field`s vertically |
+| `FieldSet` / `FieldLegend` | `<fieldset>` / `<legend>`. `FieldLegend` takes `variant` (`"legend"` by default, or `"label"` for smaller text) |
+| `FieldSeparator` | A divider line. You can put text in the middle |
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `orientation` | `"vertical" \| "horizontal" \| "responsive"` | `"vertical"` | Passed to `Field`. `responsive` goes horizontal only when the container is wide. |
+| `data-invalid` | `boolean` |  | Set on `Field` to turn the label and description the error colour. Also put `aria-invalid` on the input. |
+| `errors` | `Array<{ message?: string } \| undefined>` |  | Passed to `FieldError`. Several are shown as a bulleted list, and duplicates are merged into one. |

package/docs/en/ui/hover-card.md

@@ -0,0 +1,21 @@
+# Hover Card
+
+> A preview card that appears when you hover a link.
+
+Shows supplementary content in a card when the pointer rests on a link or term (or when it receives
+keyboard focus). Meant for **read-only** information such as a metric definition or a user profile.
+For anything interactive use [`Popover`](ui/popover); for a short phrase use
+[`Tooltip`](ui/tooltip). Built on Base UI's `PreviewCard`.
+
+```tsx
+import { HoverCard, HoverCardTrigger, HoverCardContent } from "@squadbase/vantage/ui";
+```
+
+`HoverCardTrigger` renders an `<a>` by default. Pass `render` to use another element.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `side` | `"top" \| "right" \| "bottom" \| "left"` | `"bottom"` | Passed to `HoverCardContent`. Which side of the trigger it appears on. |
+| `align` | `"start" \| "center" \| "end"` | `"center"` | Passed to `HoverCardContent`. |
+| `sideOffset` | `number` | `4` | Distance in px between `HoverCardContent` and the trigger. |
+| `delay` | `number` | `600` | Passed to `HoverCardTrigger`. Milliseconds before it opens. |

package/docs/en/ui/kbd.md

@@ -0,0 +1,17 @@
+# Kbd
+
+> A keyboard key.
+
+A small part for showing shortcut keys. Line several keys up with `KbdGroup`.
+
+```tsx
+import { Kbd, KbdGroup } from "@squadbase/vantage/ui";
+```
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `Kbd` | `ComponentProps<"kbd">` | A single key. |
+| `KbdGroup` | `ComponentProps<"div">` | Lays the keys out side by side. |
+
+Placed inside a button or a [`Tooltip`](ui/tooltip), it blends in with the
+surrounding text colour.

package/docs/en/ui/loading.md

@@ -12,7 +12,7 @@ import { Loading } from "@squadbase/vantage/ui";
 
 | Prop | Type | Default | Description |
 | --- | --- | --- | --- |
-| `label` | `string` | `"Loading…"` | Text shown next to the spinner. |
+| `label` | `string` | `"読み込んでいます…"` | Text shown next to the spinner. |
 | `className` | `string` |  | Classes to add. By default it centres within a 30vh minimum height. |
 
 To hold the layout while waiting use [`Skeleton`](ui/skeleton); in tight spots such

package/docs/en/ui/pagination.md

@@ -0,0 +1,36 @@
+# Pagination
+
+> A row of page links.
+
+Page navigation for a list split into pages. It is purely visual and holds neither the current page
+nor the total — the caller owns that state (URL search params or `useState`).
+
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+  PaginationEllipsis,
+} from "@squadbase/vantage/ui";
+```
+
+## Parts
+
+| Part | Role |
+| --- | --- |
+| `Pagination` | The `<nav>`, with `aria-label="pagination"` |
+| `PaginationContent` / `PaginationItem` | The `<ul>` / `<li>` |
+| `PaginationLink` | One page's `<a>`. `isActive` marks the current page |
+| `PaginationPrevious` / `PaginationNext` | The `<a>` to the previous / next page. `text` changes the wording |
+| `PaginationEllipsis` | The ellipsis |
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `isActive` | `boolean` |  | Passed to `PaginationLink`. Sets `aria-current="page"` and an outlined look. |
+| `text` | `string` | `"Previous" / "Next"` | Label of `PaginationPrevious` / `PaginationNext` (hidden below 640px). |
+
+The links are plain `<a>` elements, so passing `href` navigates as usual. To change only in-page
+state, call `preventDefault()` in `onClick`.

package/docs/en/ui/radio-group.md

@@ -0,0 +1,21 @@
+# Radio Group
+
+> Radio buttons for choosing one of a few options.
+
+An input that keeps every option visible and lets the user pick one. With many options consider
+[`Select`](ui/select); to switch with side-by-side buttons consider
+[`SegmentedControl`](parts/segmented-control).
+
+```tsx
+import { RadioGroup, RadioGroupItem } from "@squadbase/vantage/ui";
+```
+
+`RadioGroupItem` has no label of its own. Give it an `id` and tie it to a
+[`Label`](ui/label) through `htmlFor`.
+
+| Prop | Type | Description |
+| --- | --- | --- |
+| `value` | `unknown` | The selected value of `RadioGroup` (controlled). |
+| `defaultValue` | `unknown` | The initial value of `RadioGroup` (uncontrolled). |
+| `onValueChange` | `(value: unknown) => void` | Passed to `RadioGroup`. Receives the `value` of the chosen `RadioGroupItem`. |
+| `disabled` | `boolean` | Disables the whole group, or a single item. |

package/docs/en/ui/toast.md

@@ -0,0 +1,44 @@
+# Toast
+
+> A transient notification in the corner of the screen.
+
+A short notice about the result of an action, such as a save succeeding or failing. Built on Base
+UI's `Toast`; it does not depend on `sonner`.
+
+```tsx
+import { Toaster, toast } from "@squadbase/vantage/ui";
+```
+
+## Usage
+
+**Wrap the app root in `Toaster` once**, then call `toast.add()` from anywhere. `Toaster` renders
+its children and adds a stack for notifications at the bottom right (bottom centre on mobile).
+
+```tsx
+<Toaster>
+  <App />
+</Toaster>;
+
+toast.add({ title: "レポートを保存しました", type: "success" });
+```
+
+`toast` is a manager created once per module, with `add` / `close` / `update` / `promise`.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` | `ReactNode` |  | The heading. |
+| `description` | `ReactNode` |  | The body. |
+| `type` | `"success" \| "info" \| "warning" \| "error" \| "loading" \| string` |  | Picks the icon shown on the left. No icon if omitted. |
+| `timeout` | `number` | `5000` | Milliseconds until it closes itself. `0` keeps it open. |
+| `actionProps` | `ButtonProps` |  | Shows an action button when given (`children` is the label, `onClick` the handler). |
+
+`toast.add()` returns an ID. Replace the contents with `toast.update(id, {...})` and close it with
+`toast.close(id)`. For async work use `toast.promise(promise, { loading, success, error })`.
+
+> [!NOTE]
+> The call style differs from shadcn/ui's `sonner` version (`toast("…")` / `toast.success("…")`).
+> This has the same API as shadcn/ui's Base UI `toast`. When you need a separate manager outside
+> `Toaster`, create one with `createToastManager()` and pass it as `<Toaster toastManager={manager}>`.
+> You can also recompose the parts (`Toast` / `ToastTitle` / `ToastDescription` / `ToastAction` /
+> `ToastClose` / `ToastViewport` / `ToastPortal` / `ToastProvider`, `useToastManager`) into your own
+> layout.

package/docs/en/ui/toggle-group.md

@@ -14,13 +14,14 @@ import { ToggleGroup, ToggleGroupItem } from "@squadbase/vantage/ui";
 | --- | --- | --- | --- |
 | `value` | `string[]` |  | The selected values — **an array even for single choice**. |
 | `onValueChange` | `(value: string[]) => void` |  | Fired on change, with an array. |
-| `toggleMultiple` | `boolean` |  | Allow more than one selection. |
+| `multiple` | `boolean` | `false` | `true` allows more than one selection. |
 | `variant` | `"default" \| "outline"` | `"default"` |  |
 | `size` | `"default" \| "sm" \| "lg"` | `"default"` |  |
 | `spacing` | `number` | `2` | Gap between items; `0` welds them into one band. |
 | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` |  |
 
 > [!WARNING]
-> There is no Radix-style `type="single"` / `type="multiple"`. Single choice means keeping the array's
-> length at one yourself. [`SegmentedControl`](parts/segmented-control) already does
+> There is no Radix-style `type="single"` / `type="multiple"`. Instead there is a boolean `multiple`;
+> by default (`false`) only one item can be pressed at a time. Even then `value` is an array of at
+> most one element. [`SegmentedControl`](parts/segmented-control) already handles
 > that, so prefer it when you want single choice.

package/docs/en/ui-and-theming.md

@@ -36,7 +36,7 @@ In `/ui` (a selection): `Button`, `Card`, the `Table` primitives, `Tabs`, `Input
 `DropdownMenu`, `Sidebar`, `Alert` / `Skeleton` / `Spinner`, `Loading` / `Empty` / `ErrorState`.
 
 In `/components` (a selection): `PageShell`, `AppShell`, `DashboardCard`, `DataTable`, `EChart`,
-`FunnelSteps`, `FilterBar`, `DateRangePicker`, `MetricValue`, `TrendIndicator`.
+`FunnelSteps`, `FilterBar`, `DateRangePicker`, `KpiCard`, `Delta`.
 
 Props and usage for every component live in the [Components](components) tab.