@squadbase/vantage 0.7.1-dev1.9d223a2 → 0.7.1-dev1.bb6bd72

package/registry/ui/category-bar.tsx

@@ -163,10 +163,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -390,6 +405,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1439,8 +1456,11 @@ export const CategoryBar = forwardRef<HTMLDivElement, CategoryBarProps>(function
     />
   )
 
+  // aria-label is prohibited on a role-less div: a labelled bar is a group (the label names it, the marker stays reachable).
+  const labelled = props["aria-label"] != null || props["aria-labelledby"] != null
+
   return (
-    <div ref={ref} data-slot="category-bar" className={cn("w-full", className)} {...props}>
+    <div ref={ref} data-slot="category-bar" role={labelled ? "group" : undefined} className={cn("w-full", className)} {...props}>
       {showLabels && labels.length > 0 && (
         <div data-slot="category-bar-labels" className="relative mb-2 h-4 text-xs text-muted-foreground tabular-nums">
           {labels.map((label, i) => (
@@ -1481,7 +1501,7 @@ export const CategoryBar = forwardRef<HTMLDivElement, CategoryBarProps>(function
           >
             {marker.tooltip ? (
               <Tooltip>
-                <TooltipTrigger render={<span aria-label={marker.tooltip} className="block py-1" />}>
+                <TooltipTrigger render={<button type="button" aria-label={marker.tooltip} className="block cursor-default py-1" />}>
                   {markerDot}
                 </TooltipTrigger>
                 <TooltipContent>{marker.tooltip}</TooltipContent>

package/registry/ui/chart-frame.tsx

@@ -8,20 +8,23 @@
  * by the title and described by the summary, so a screen reader hears what the
  * chart says, not just that there is one.
  *
- * The plot area is the frame's one `role="img"` (`EChart` inside it drops its
- * own); `dataTable` adds the numbers as a visually-hidden table beside it, so a
- * screen reader can read the values the canvas only draws.
+ * The plot is the frame's one `role="img"`. When it is an `EChart`, that
+ * canvas takes the role (and the frame's name and description) and the plot
+ * area drops it, so the copy / download buttons are not inside the image;
+ * any other plot keeps the role on the plot area. `dataTable` adds the numbers
+ * as a visually-hidden table beside it, so a screen reader can read the values
+ * the canvas only draws.
  *
  * The plot area keeps its height in every state: while loading it shows a
  * skeleton shaped like the final chart, and with no data it says so (and offers
  * one action) instead of drawing empty axes.
  */
-import { forwardRef, useId, type HTMLAttributes, type ReactNode } from "react"
+import { forwardRef, useCallback, useId, useMemo, useState, type HTMLAttributes, type ReactNode } from "react"
 
 import { cn } from "@squadbase/vantage/ui"
 import type { ChartEmptyState } from "@squadbase/vantage/components"
 import { useSyncExternalStore } from "react"
-import { createContext, useCallback, useEffect, useRef, useState, type ForwardedRef, type RefObject } from "react"
+import { createContext, useEffect, useRef, type ForwardedRef, type RefObject } from "react"
 import type { ChartTone } from "@squadbase/vantage/components"
 import { EMPTY_VALUE, formatValue, toValueFormatter, type ValueFormat } from "@squadbase/vantage/components"
 import type { ChartColor, ChartColors, ChartSeriesColor, ValueFormatter } from "@squadbase/vantage/components"
@@ -170,10 +173,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -397,6 +415,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,
@@ -1422,7 +1442,8 @@ export interface ChartFrameProps extends Omit<HTMLAttributes<HTMLElement>, "titl
   /** 見出しが無いときのプロット領域のラベル。 */
   ariaLabel?: string
   /**
-   * プロット領域の役割。既定 `"img"`(canvas のグラフ)。行がボタンやリンクになる
+   * プロットの役割。既定 `"img"`(canvas のグラフ。`role="img"` と名前・要約は
+   * `EChart` が canvas にだけ付け、操作ボタンは画像の外に置く)。行がボタンやリンクになる
    * HTML のグラフ(BarList・FunnelSteps)は `"group"` にして、中身を読ませる。
    */
   plotRole?: "img" | "group"
@@ -1462,6 +1483,18 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
   const titleId = title ? `${id}-title` : undefined
   const summaryId = summary ? `${id}-summary` : undefined
   const state = isLoading ? "loading" : isEmpty ? "empty" : "ready"
+  // An EChart inside takes the image role for its canvas (see ChartFramePlot).
+  const [claims, setClaims] = useState(0)
+  const claim = useCallback(() => {
+    setClaims((n) => n + 1)
+    return () => setClaims((n) => n - 1)
+  }, [])
+  const claimed = claims > 0 && plotRole === "img"
+  const plotOwnsImage = state === "ready" && claimed
+  const plot = useMemo(
+    () => ({ image: plotRole === "img", claimed, claim, ariaLabel: titleId ? undefined : ariaLabel, ariaLabelledBy: titleId, ariaDescribedBy: summaryId }),
+    [plotRole, claimed, claim, titleId, ariaLabel, summaryId],
+  )
 
   return (
     <figure data-slot="chart-frame" className={cn("m-0 flex w-full min-w-0 flex-col gap-3", className)} {...props}>
@@ -1483,10 +1516,10 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
         ref={ref}
         data-slot="chart-frame-body"
         data-state={state}
-        role={state === "ready" ? plotRole : "group"}
-        aria-label={titleId ? undefined : ariaLabel}
-        aria-labelledby={titleId}
-        aria-describedby={summaryId}
+        role={plotOwnsImage ? undefined : state === "ready" ? plotRole : "group"}
+        aria-label={plotOwnsImage || titleId ? undefined : ariaLabel}
+        aria-labelledby={plotOwnsImage ? undefined : titleId}
+        aria-describedby={plotOwnsImage ? undefined : summaryId}
         aria-busy={isLoading || undefined}
         className="relative w-full min-w-0"
         style={{ height: typeof height === "number" ? `${height}px` : height }}
@@ -1496,7 +1529,7 @@ export const ChartFrame = forwardRef<HTMLDivElement, ChartFrameProps>(function C
         ) : state === "empty" ? (
           <ChartEmpty {...emptyState} defaultTitle={t.emptyTitle} />
         ) : (
-          <ChartFrameContext.Provider value>{children}</ChartFrameContext.Provider>
+          <ChartFrameContext.Provider value={plot}>{children}</ChartFrameContext.Provider>
         )}
       </div>
       {footnote && (

package/registry/ui/checkbox.tsx

@@ -5,14 +5,14 @@
 import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"
 
 import { cn } from "@squadbase/vantage/ui"
-import { CheckIcon } from "lucide-react"
+import { CheckIcon, MinusIcon } from "lucide-react"
 
 function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
   return (
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
+        "group/checkbox peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground dark:data-indeterminate:bg-primary",
         className
       )}
       {...props}
@@ -21,7 +21,8 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
         data-slot="checkbox-indicator"
         className="grid place-content-center text-current transition-none [&>svg]:size-3.5"
       >
-        <CheckIcon />
+        <CheckIcon className="group-data-indeterminate/checkbox:hidden" />
+        <MinusIcon className="hidden group-data-indeterminate/checkbox:block" />
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   )

package/registry/ui/code-block.tsx

@@ -0,0 +1,44 @@
+// Copied by `vantage add ui code-block`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/code-block.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { CheckIcon, CopyIcon } from "lucide-react"
+
+import { cn } from "@squadbase/vantage/ui"
+import { Button } from "@squadbase/vantage/ui"
+
+type CodeBlockProps = Omit<React.ComponentProps<"div">, "children"> & {
+  /** The text shown and copied. No syntax highlighting. */
+  code: string
+  /** Plain-text label above the code (a file name or language). */
+  title?: string
+}
+
+/** Monospace text with a copy button. */
+function CodeBlock({ code, title, className, ...props }: CodeBlockProps) {
+  const [copied, setCopied] = React.useState(false)
+
+  const copy = async () => {
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  return (
+    <div data-slot="code-block" className={cn("rounded-lg bg-muted", className)} {...props}>
+      <div className="flex items-center justify-between gap-2 border-b border-border px-3 py-1.5">
+        <span className="truncate text-xs text-muted-foreground">{title}</span>
+        <Button type="button" variant="ghost" size="xs" onClick={copy} aria-label="Copy code">
+          {copied ? <CheckIcon /> : <CopyIcon />}
+          {copied ? "Copied" : "Copy"}
+        </Button>
+      </div>
+      <pre className="overflow-x-auto p-3 font-mono text-sm text-foreground">
+        <code>{code}</code>
+      </pre>
+    </div>
+  )
+}
+
+export { CodeBlock, type CodeBlockProps }

package/registry/ui/combo-chart.tsx

@@ -171,10 +171,25 @@ function useLocale(locale?: string | null): string {
 const CHART_OTHER_COLOR = "color-mix(in oklab, var(--neutral) 50%, var(--background))"
 
 /**
- * True inside `ChartFrame`. The frame's plot area carries the chart's single
- * `role="img"` and label, so `EChart` drops its own when it sees this.
+ * What a `ChartFrame` tells the plot inside it. A frame whose plot is an image
+ * (`image`) puts `role="img"` on its plot area, unless an `EChart` inside it
+ * `claim`s the image: then the canvas alone carries `role="img"` with this name
+ * and description (`claimed`), so the action buttons beside the canvas are not
+ * inside the image (an interactive control inside `role="img"` is a
+ * nested-interactive violation and is not exposed). A `group` frame never
+ * hands the role to the canvas. `false` outside a frame.
  */
-const ChartFrameContext = createContext(false)
+interface ChartFramePlot {
+  image: boolean
+  /** An `EChart` inside has taken over the `role="img"`. */
+  claimed: boolean
+  /** Take over the image role; returns the release. */
+  claim: () => () => void
+  ariaLabel?: string
+  ariaLabelledBy?: string
+  ariaDescribedBy?: string
+}
+const ChartFrameContext = createContext<ChartFramePlot | false>(false)
 
 /** Series palette, in order. Missing tokens are skipped, not defaulted. */
 const SERIES_TOKENS = ["--chart-1", "--chart-2", "--chart-3", "--chart-4", "--chart-5"] as const
@@ -398,6 +413,8 @@ function buildChartTheme(tokens: ChartTokens): Record<string, unknown> {
     tooltip: {
       // ECharts' default 0.4s transform lags the tooltip ~300ms behind the cursor.
       transitionDuration: 0,
+      // Stay inside the chart: cards are often narrow and overflow-hidden.
+      confine: true,
       backgroundColor: tokens.popover ?? undefined,
       borderColor: line,
       borderWidth: 1,

package/registry/ui/combobox.tsx

@@ -29,6 +29,7 @@ function ComboboxTrigger({
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
+      aria-label="Toggle options"
       className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
       {...props}
     >
@@ -44,6 +45,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {
   return (
     <ComboboxPrimitive.Clear
       data-slot="combobox-clear"
+      aria-label="Clear"
       render={<InputGroupButton variant="ghost" size="icon-xs" />}
       className={cn(className)}
       {...props}
@@ -263,6 +265,11 @@ function ComboboxChip({
           render={<Button variant="ghost" size="icon-xs" />}
           className="-ml-1 opacity-50 hover:opacity-100"
           data-slot="combobox-chip-remove"
+          aria-label={
+            typeof children === "string" || typeof children === "number"
+              ? `Remove ${children}`
+              : "Remove"
+          }
         >
           <XIcon
             className="pointer-events-none"

package/registry/ui/context-menu.tsx

@@ -0,0 +1,71 @@
+// Copied by `vantage add ui context-menu`. This file is yours to edit.
+// Generated from @squadbase/squadkit registry/ui/context-menu.tsx by `pnpm run registry` (in Vantage, edit packages/squadkit, not registry/).
+"use client"
+
+import * as React from "react"
+import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"
+
+import { cn } from "@squadbase/vantage/ui"
+import {
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from "@squadbase/vantage/ui"
+
+function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
+}
+
+/** The area that opens the menu on right-click (long-press on touch). */
+function ContextMenuTrigger({ className, ...props }: ContextMenuPrimitive.Trigger.Props) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn("select-none", className)}
+      {...props}
+    />
+  )
+}
+
+// The popup is the same as DropdownMenu's (same look); only the anchor differs: the pointer, not a button.
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuContent>) {
+  return (
+    <DropdownMenuContent
+      data-slot="context-menu-content"
+      align="start"
+      side="right"
+      sideOffset={0}
+      className={cn("w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  DropdownMenuGroup as ContextMenuGroup,
+  DropdownMenuLabel as ContextMenuLabel,
+  DropdownMenuItem as ContextMenuItem,
+  DropdownMenuCheckboxItem as ContextMenuCheckboxItem,
+  DropdownMenuRadioGroup as ContextMenuRadioGroup,
+  DropdownMenuRadioItem as ContextMenuRadioItem,
+  DropdownMenuSeparator as ContextMenuSeparator,
+  DropdownMenuShortcut as ContextMenuShortcut,
+  DropdownMenuSub as ContextMenuSub,
+  DropdownMenuSubTrigger as ContextMenuSubTrigger,
+  DropdownMenuSubContent as ContextMenuSubContent,
+}

package/registry/ui/dashboard-card.tsx

@@ -129,7 +129,7 @@ export const DashboardCardFooter = forwardRef<HTMLDivElement, DashboardCardFoote
     <div
       ref={ref}
       data-slot="dashboard-card-footer"
-      className={cn("flex items-center px-3 py-1.5 group-data-[size=sm]:px-2", className)}
+      className={cn("-mx-1 -mb-1 flex min-w-0 items-center justify-between gap-3 border-t px-4 py-2.5 text-xs text-muted-foreground tabular-nums group-data-[size=sm]:px-3", className)}
       {...props}
     />
   ),
@@ -161,7 +161,10 @@ export interface DashboardCardPresetProps
     Pick<DashboardCardProps, "subgrid" | "size"> {
   title?: ReactNode
   description?: ReactNode
+  /** One headline number or status at the right end of the header ("212 tasks", a `StatusBadge`). Put the number in `<span className="font-medium text-foreground">`. */
+  headline?: ReactNode
   actions?: ReactNode
+  /** One line at the bottom of the card: a summary fact on the left, an action or hint on the right. */
   footer?: ReactNode
   headerClassName?: string
   contentClassName?: string
@@ -171,6 +174,7 @@ export interface DashboardCardPresetProps
 export function DashboardCardPreset({
   title,
   description,
+  headline,
   actions,
   footer,
   children,
@@ -183,21 +187,28 @@ export function DashboardCardPreset({
 }: DashboardCardPresetProps) {
   // Inside SampleData the card shows the mark in its header, and the parts inside it do not repeat it.
   const sample = useSampleMark()
-  const hasHeader = title || description || actions || sample
+  const hasTitle = Boolean(title || description)
+  // A card with no title of its own (the chart inside has it) floats the mark in the corner instead of adding a row of its own.
+  const floatingMark = sample && !hasTitle && !headline && !actions
+  const hasHeader = hasTitle || headline || actions || (sample && !floatingMark)
   return (
-    <DashboardCard className={className} subgrid={subgrid} {...props}>
+    <DashboardCard className={cn(floatingMark && "relative", className)} subgrid={subgrid} {...props}>
       <SampleClaim>
+        {floatingMark && <SampleBadge label={sample.label} className="absolute top-2 right-2 z-10" />}
         {hasHeader && (
           <DashboardCardHeader className={cn(subgrid && "row-start-1", headerClassName)}>
-            {(title || description) && (
-              <div>
-                {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
+            {(hasTitle || sample) && (
+              <div className="min-w-0">
+                <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                  {title && <DashboardCardTitle>{title}</DashboardCardTitle>}
+                  {sample && <SampleBadge label={sample.label} />}
+                </div>
                 {description && <DashboardCardDescription>{description}</DashboardCardDescription>}
               </div>
             )}
-            {(actions || sample) && (
-              <DashboardCardAction className={cn(sample && actions && "flex items-center gap-2")}>
-                {sample && <SampleBadge label={sample.label} />}
+            {(headline || actions) && (
+              <DashboardCardAction className="flex items-center gap-2">
+                {headline && <div data-slot="dashboard-card-headline" className="text-sm tabular-nums text-muted-foreground">{headline}</div>}
                 {actions}
               </DashboardCardAction>
             )}

package/registry/ui/data-table.tsx

@@ -311,6 +311,8 @@ const TEXT = {
     trend: (points: number, first: string, last: string, min: string, max: string) =>
       `${points}点の推移、${first}から${last}、最小${min}、最大${max}`,
     noData: "データがありません",
+    search: "検索",
+    pageSizeLabel: "1ページの表示件数",
     pageSize: (size: number) => `${size}件`,
     range: (total: number, start: number, end: number) => `${total}件中 ${start} - ${end} を表示`,
     first: "最初",
@@ -328,6 +330,8 @@ const TEXT = {
     trend: (points: number, first: string, last: string, min: string, max: string) =>
       `Trend over ${points} points: ${first} to ${last}, min ${min}, max ${max}`,
     noData: "No results.",
+    search: "Search",
+    pageSizeLabel: "Rows per page",
     pageSize: (size: number) => `${size} / page`,
     range: (total: number, start: number, end: number) => `Showing ${start}–${end} of ${total}`,
     first: "First",
@@ -920,6 +924,7 @@ export const DataTableToolbar = forwardRef<HTMLDivElement, DataTableToolbarProps
   ({ showSearch, toolbar, bulkActions, className, ...props }, ref) => {
     const { globalFilter, setGlobalFilter, hasSelection, selectedRows, enableFiltering } =
       useDataTable()
+    const t = useText()
 
     const showSearchEffective = showSearch ?? enableFiltering
 
@@ -938,6 +943,7 @@ export const DataTableToolbar = forwardRef<HTMLDivElement, DataTableToolbarProps
           <div className="relative">
             <Search className="absolute top-2.5 left-2.5 size-4 text-muted-foreground" />
             <Input
+              aria-label={t.search}
               value={globalFilter}
               onChange={(e) => setGlobalFilter(e.target.value)}
               className="max-w-sm pl-8"
@@ -1207,7 +1213,7 @@ export const DataTablePagination = forwardRef<HTMLDivElement, DataTablePaginatio
             value={String(currentPageSize)}
             onValueChange={(value) => table.setPageSize(Number(value))}
           >
-            <SelectTrigger size="sm" className="min-w-[80px]">
+            <SelectTrigger size="sm" className="min-w-[80px]" aria-label={t.pageSizeLabel}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>

package/registry/ui/date-range-picker.tsx

@@ -12,6 +12,7 @@ import { forwardRef, useCallback, useMemo, useState } from "react"
 import { CalendarIcon } from "lucide-react"
 import {
   addMonths,
+  differenceInCalendarDays,
   endOfDay,
   endOfMonth,
   endOfWeek,
@@ -20,6 +21,7 @@ import {
   startOfMonth,
   startOfWeek,
   subDays,
+  subYears,
   subMonths,
   subWeeks,
 } from "date-fns"
@@ -28,7 +30,7 @@ import type { DateRange as RdpDateRange } from "react-day-picker"
 
 import { cn } from "@squadbase/vantage/ui"
 import { useIsMobile } from "@squadbase/vantage/ui"
-import { formatDate } from "@squadbase/vantage/components"
+import { formatDate, formatDateRange as formatRange } from "@squadbase/vantage/components"
 import { Button } from "@squadbase/vantage/ui"
 import { Calendar } from "@squadbase/vantage/ui"
 import { Popover, PopoverContent, PopoverTrigger } from "@squadbase/vantage/ui"
@@ -213,6 +215,23 @@ export function fiscalPeriodRange(
   return { from: periodStart, to: endOfMonth(addMonths(periodStart, length - 1)) }
 }
 
+/**
+ * 選択範囲の比較期間を計算する。`previous-period` は同じ日数だけ直前にずらした範囲、
+ * `previous-year` は両端を 1 年前にした範囲（うるう日は 2/28 に丸める）。
+ *
+ * @example
+ * comparisonRange({ from: new Date(2026, 2, 1), to: new Date(2026, 2, 31) }, "previous-period")
+ * // 2026-01-29〜2026-02-28
+ */
+export function comparisonRange(
+  { from, to }: { from: Date; to: Date },
+  kind: "previous-period" | "previous-year",
+): { from: Date; to: Date } {
+  if (kind === "previous-year") return { from: subYears(from, 1), to: subYears(to, 1) }
+  const days = differenceInCalendarDays(to, from) + 1
+  return { from: subDays(from, days), to: subDays(from, 1) }
+}
+
 const PRESET_LABELS = {
   ja: {
     today: "今日",
@@ -251,8 +270,14 @@ const PRESET_LABELS = {
 } as const
 
 const TEXT = {
-  ja: { placeholder: "期間を選択", rangeSeparator: " - " },
-  en: { placeholder: "Pick a date range", rangeSeparator: " – " },
+  ja: {
+    placeholder: "期間を選択",
+    comparison: { "previous-period": "前期間", "previous-year": "前年同期" },
+  },
+  en: {
+    placeholder: "Pick a date range",
+    comparison: { "previous-period": "vs. previous period", "previous-year": "vs. same period last year" },
+  },
 }
 
 /** カレンダーに渡す date-fns の locale。`ja*` なら日本語、それ以外は react-day-picker の既定（英語）。 */
@@ -398,6 +423,14 @@ export interface DateRangePickerProps {
    * <DateRangePicker fiscalYearStartMonth={1} />
    */
   fiscalYearStartMonth?: number
+  /**
+   * 比較期間。渡すと選択範囲から比較する範囲を計算し、トリガーに添える。
+   * `previous-period` は直前の同じ日数、`previous-year` は 1 年前の同じ日付。比較の日付は渡さない。
+   *
+   * @example
+   * <DateRangePicker comparison="previous-year" />
+   */
+  comparison?: "previous-period" | "previous-year"
   maxDate?: Date
   minDate?: Date
   placeholder?: string
@@ -415,6 +448,7 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
       showPresets = true,
       locale: localeProp,
       fiscalYearStartMonth,
+      comparison,
       maxDate,
       minDate,
       placeholder,
@@ -451,11 +485,19 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
     const formatDateRange = () => {
       if (!value?.from) return placeholder ?? t.placeholder
       if (!value.to) return formatDate(value.from, "date", locale)
-      return `${formatDate(value.from, "date", locale)}${t.rangeSeparator}${formatDate(value.to, "date", locale)}`
+      // The same writer as the page header's period chip, so one range reads the same in both places.
+      return formatRange(value.from, value.to, { locale })
     }
     // 選んだ期間がプリセットの結果と一致するときは、日付の前にそのプリセット名を出す。
     const selectedPreset = findMatchingPreset(presets, value)
     const presetLabel = selectedPreset?.label
+    const comparisonText =
+      comparison && value?.from && value.to
+        ? (() => {
+            const c = comparisonRange({ from: value.from, to: value.to }, comparison)
+            return `${t.comparison[comparison]} ${formatRange(c.from, c.to, { locale })}`
+          })()
+        : undefined
 
     // 開いたとき、右の月が終了月・左がその前月になるよう、表示月（左の月）を決める。1 か月表示（モバイル）は終了月。
     const endMonth = value?.to ?? value?.from
@@ -492,6 +534,11 @@ export const DateRangePicker = forwardRef<HTMLDivElement, DateRangePickerProps>(
             ) : (
               <span>{formatDateRange()}</span>
             )}
+            {comparisonText && (
+              <span data-slot="date-range-picker-comparison" className="text-muted-foreground">
+                {comparisonText}
+              </span>
+            )}
           </PopoverTrigger>
           <PopoverContent
             align={align}