@cakejp/design-system 0.22.1 → 0.23.0

package/dist/lib/focus-restore.js

@@ -0,0 +1,67 @@
+"use client";
+import * as n from "react";
+function l(e) {
+  if (!(e instanceof HTMLElement) || !e.isConnected) return !1;
+  const t = e.ownerDocument;
+  return e === t.body || e === t.documentElement ? !1 : !e.matches(":disabled, [inert], [inert] *");
+}
+function a(e) {
+  const t = e.activeElement;
+  return t == null || t === e.body || t === e.documentElement;
+}
+const d = n.createContext(null), m = typeof window > "u" ? n.useEffect : n.useLayoutEffect;
+function R(e, t, r) {
+  const s = n.useRef(null), u = n.useRef(e ?? t ?? !1), o = n.useRef(0);
+  m(() => {
+    e !== void 0 && (u.current = e);
+  }, [e]);
+  const c = n.useCallback(
+    (i) => {
+      e === void 0 && (u.current = i), r?.(i);
+    },
+    [e, r]
+  );
+  return { root: n.useMemo(
+    () => ({
+      openerRef: s,
+      isOpen: () => u.current,
+      registerContent: () => (o.current += 1, () => {
+        o.current -= 1;
+      }),
+      hasContent: () => o.current > 0
+    }),
+    []
+  ), handleOpenChange: c };
+}
+function p(e) {
+  if (typeof document > "u" || a(document) && l(e.current)) return;
+  const t = document.activeElement;
+  e.current = t instanceof HTMLElement ? t : null;
+}
+function C({
+  onOpenAutoFocus: e,
+  onCloseAutoFocus: t
+}) {
+  const r = n.useContext(d), s = n.useRef(null), u = r?.openerRef ?? s;
+  return n.useEffect(() => r?.registerContent(), [r]), {
+    onOpenAutoFocus: (o) => {
+      p(u), e?.(o);
+    },
+    onCloseAutoFocus: (o) => {
+      const c = r != null && r.isOpen() && r.hasContent(), f = c ? null : u.current;
+      if (c || (u.current = null), t?.(o), !o.defaultPrevented) {
+        if (c) {
+          o.preventDefault();
+          return;
+        }
+        typeof document > "u" || !a(document) || l(f) && (o.preventDefault(), f.focus({ preventScroll: !0 }));
+      }
+    }
+  };
+}
+export {
+  d as OverlayFocusRootContext,
+  l as canRestoreFocusTo,
+  R as useOverlayFocusRoot,
+  C as useRestoreFocusToOpener
+};

package/dist/lib/focus-ring.js

@@ -2,7 +2,7 @@ const o = "forced-colors:focus-visible:outline-solid forced-colors:focus-visible
   "focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
   o
 ].join(" "), l = [
-  "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50",
+  "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
   i
 ].join(" "), t = [
   "focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",

package/dist/lib/ime.js

@@ -0,0 +1,17 @@
+function n(e) {
+  const r = e.nativeEvent ?? e;
+  return r.isComposing === !0 || r.keyCode === 229;
+}
+function o(e) {
+  return n(e) ? (e.preventDefault(), !0) : !1;
+}
+function u(e) {
+  return (r) => {
+    e?.(r), o(r);
+  };
+}
+export {
+  u as composeEscapeKeyDownWithImeGuard,
+  o as guardEscapeDuringIme,
+  n as isImeComposing
+};

package/dist/lib/search-normalize.js

@@ -0,0 +1,30 @@
+const A = new RegExp("\\p{Script=Han}", "u"), m = 12449, C = 12534, K = 96, S = "ゖ", h = new Set([12438, 12369, 12437, 12364].map((n) => String.fromCharCode(n)));
+function a(n) {
+  return Array.from(n.normalize("NFKC").toLowerCase(), (t) => {
+    const r = t.charCodeAt(0);
+    return r >= m && r <= C ? String.fromCharCode(r - K) : t;
+  }).join("");
+}
+function i(n, t) {
+  const r = Array.from(n);
+  return r.map((e, o) => {
+    if (!h.has(e)) return e;
+    const s = r[o - 1], c = r[o + 1], u = s === void 0 ? t : A.test(s), f = c === void 0 || A.test(c);
+    return u && f ? S : e;
+  }).join("");
+}
+function N(n, t) {
+  const r = a(t.trim());
+  if (r === "") return !0;
+  const e = i(r, !0);
+  return n.some((o) => {
+    if (!o) return !1;
+    const s = a(o);
+    return s.includes(r) || i(s, !1).includes(e);
+  });
+}
+export {
+  N as matchesSearch,
+  i as normalizeKeVariants,
+  a as normalizeSearchText
+};

package/dist/types/components/ec/admin-shell.d.ts

@@ -17,7 +17,7 @@
  *
  * ## 配下 Card のサーフェス
  *
- * 地が Surface-Secondary なので、シェルが配下 `Card` の既定サーフェスを白にする文脈
+ * 地が Surface-Neutral-Secondary なので、シェルが配下 `Card` の既定サーフェスを白にする文脈
  * （`--card-surface`）を宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
  *
  * 参照元:

package/dist/types/components/foundations/alert-dialog.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { AlertDialog as AlertDialogPrimitive } from "radix-ui";
 import { Button } from "../../components/foundations/button";
-declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function AlertDialog({ open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+declare function AlertDialogContent({ className, size, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
     size?: "default" | "sm";
 }): import("react/jsx-runtime").JSX.Element;
 declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/alert.d.ts

@@ -25,7 +25,20 @@ import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: {
     variant?: "success" | "info" | "error" | "warning" | "inline-info" | "inline-caution" | "inline-warning";
 } & import("class-variance-authority/types").ClassProp) => string;
+/**
+ * 読み上げの強さ（ライブリージョンの種類）。
+ * - `"alert"`: 即時に割り込んで読み上げる。エラー・警告向け
+ * - `"status"`: 読み上げ中の内容を遮らず、区切りで読み上げる。補足・成功向け
+ * - `"off"`: 読み上げ領域にしない（role を付けない）。画面表示時から出ている静的な補足向け
+ */
+type AlertLive = "alert" | "status" | "off";
 type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+    /**
+     * 読み上げの強さ。未指定は variant で決まる
+     * （error / warning / inline-caution / inline-warning は "alert"、success / info / inline-info は "status"）。
+     * "off" で role を付けない。`role` を直接渡した場合はそちらが優先。
+     */
+    live?: AlertLive;
     /**
      * prop-based API のタイトル（旧 Banner.title 相当）。
      * children と排他（children 優先）。bordered / inline 両 variant で有効。
@@ -38,7 +51,7 @@ type AlertProps = React.ComponentProps<"div"> & VariantProps<typeof alertVariant
     /** 右側アクション（Button など、旧 Banner.action 相当） */
     action?: React.ReactNode;
 };
-declare function Alert({ className, variant, children, title, description, icon, action, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
+declare function Alert({ className, variant, children, title, description, icon, action, live, role, ...props }: AlertProps): import("react/jsx-runtime").JSX.Element;
 declare const alertTitleVariants: Record<string, string>;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare const alertDescriptionVariants: Record<string, string>;

package/dist/types/components/foundations/card.d.ts

@@ -9,12 +9,12 @@ import { type VariantProps } from "class-variance-authority";
  * ## サーフェス文脈の伝播（#150）
  *
  * `Section background="subtle" | "accent-subtle"` は配下に `--card-surface: var(--Surface-Primary)`
- * を流す。そのため**グレー地の Section に置いた Card は `surface` 未指定でも自動で白**になり、
- * 「あとからカードを1枚足したら prop を付け忘れてグレー地に沈む」事故が構造的に起きない。
+ * を流す。そのため**色地の Section に置いた Card は `surface` 未指定でも自動で白**になり、
+ * 「あとからカードを1枚足したら prop を付け忘れて色地に沈む」事故が構造的に起きない。
  *
  * 伝播は CSS カスタムプロパティのカスケードだけで成立する（React context 不使用）。
  * したがって Card / Section は Server Component のまま使え、DS の `Section` を使わない
- * 自前のグレー地でも同じ効果を得られる:
+ * 自前の色地でも同じ効果を得られる:
  *
  * ```tsx
  * // 任意の要素にサーフェス文脈を宣言する（consumer 側の escape hatch）

package/dist/types/components/foundations/confirm-dialog.d.ts

@@ -31,9 +31,9 @@ interface ConfirmDialogProviderProps {
  * - 同時に複数呼ばれたら待ち行列にして 1 件ずつ表示する。
  * - Provider が unmount されたとき、未解決の confirm は false で resolve する
  *   （画面遷移で await が宙に浮いたままにならないようにする）。unmount 後の呼び出しも即 false。
- * - 閉じた後は confirm() を呼んだ時点でフォーカスがあった要素へ戻す（Trigger を持たないため、
- *   Radix の既定のままだと body へ落ちる）。閉じるアニメーション中に次の confirm() が来ても、
- *   最後に閉じたときは元の呼び出し元へ戻る。
+ * - 閉じた後は confirm() を呼んだ時点でフォーカスがあった要素へ戻す（AlertDialogContent の
+ *   共通の復帰は「開いた時点の要素」を使うため、メニューから呼んだときに戻せない。ここで上書きする）。
+ *   閉じるアニメーション中に次の confirm() が来ても、最後に閉じたときは元の呼び出し元へ戻る。
  */
 declare function ConfirmDialogProvider({ children }: ConfirmDialogProviderProps): import("react/jsx-runtime").JSX.Element;
 /**

package/dist/types/components/foundations/data-table.d.ts

@@ -8,7 +8,7 @@ declare function DataTableBody({ className, ...props }: React.ComponentProps<"tb
 declare const dataTableRowVariants: (props?: {
     state?: "default" | "selected";
 } & import("class-variance-authority/types").ClassProp) => string;
-declare function DataTableRow({ className, state, ...props }: React.ComponentProps<"tr"> & VariantProps<typeof dataTableRowVariants>): import("react/jsx-runtime").JSX.Element;
+declare function DataTableRow({ className, state, onClick, onKeyDown, ...props }: React.ComponentProps<"tr"> & VariantProps<typeof dataTableRowVariants>): import("react/jsx-runtime").JSX.Element;
 type SortDirection = "asc" | "desc" | null;
 declare function DataTableHead({ className, sortable, sortDirection, onSort, width, srLabel, children, ...props }: React.ComponentProps<"th"> & {
     sortable?: boolean;

package/dist/types/components/foundations/dialog.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
-declare function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Dialog({ open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof DialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
 type DialogSize = "sm" | "md" | "lg" | "xl";
-declare function DialogContent({ className, children, showCloseButton, size, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+declare function DialogContent({ className, children, showCloseButton, size, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
     showCloseButton?: boolean;
     /**
      * 幅の段。sm 以上の画面で効く（SP は段に関係なく画面端から 16px を残して収まる）。

package/dist/types/components/foundations/drawer.d.ts

@@ -5,7 +5,7 @@ declare function DrawerTrigger({ ...props }: React.ComponentProps<typeof DrawerP
 declare function DrawerPortal({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerClose({ ...props }: React.ComponentProps<typeof DrawerPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerOverlay({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DrawerContent({ className, children, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DrawerContent({ className, children, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }: React.ComponentProps<typeof DrawerPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof DrawerPrimitive.Title>): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/field.d.ts

@@ -47,16 +47,35 @@ declare function Field({ className, orientation, ...props }: React.ComponentProp
  * 無効時の色を当てたもの。`htmlFor` で入力と関連付ける。
  */
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react/jsx-runtime").JSX.Element;
+/** FieldSet の子の間隔の段。sm=8px / md=16px / lg=24px */
+type FieldSetGap = "sm" | "md" | "lg";
 /**
  * FieldSet — フォーム全体 or 大きなセクションの枠。
  * `<fieldset>` の既定スタイル（ブラウザ枠線・padding）をリセットし、
- * legend + 複数 `FieldGroup` を gap-6 の縦リズムで並べる。
+ * 複数 `FieldGroup` を gap-6 の縦リズムで並べる。
+ *
+ * `<legend>` は flex の並びに入らないため、`gap` 未指定のときは legend の直下の間隔が 0 になる
+ * （従来の見た目。既定は変えない）。`gap` を指定すると子の間隔をその段にし、legend の下にも同じ間隔を空ける。
  */
-declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react/jsx-runtime").JSX.Element;
+declare function FieldSet({ className, gap, ...props }: React.ComponentProps<"fieldset"> & {
+    /**
+     * 子の間隔（opt-in）。"sm"=8px / "md"=16px / "lg"=24px。
+     * 指定すると FieldLegend の下にも同じ間隔を空ける。未指定は従来どおり gap-6 で legend の直下は 0px。
+     * 絞り込みの選択肢グループのような詰めた並びは `gap="sm"` + `<FieldLegend size="sm">`。
+     */
+    gap?: FieldSetGap;
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * FieldLegend — FieldSet の見出し。`<legend>` として描画。
  */
-declare function FieldLegend({ className, ...props }: React.ComponentProps<"legend">): import("react/jsx-runtime").JSX.Element;
+declare function FieldLegend({ className, size, ...props }: React.ComponentProps<"legend"> & {
+    /**
+     * 見出しの大きさ。
+     * - "md"（既定）: typo-label-lg + Text-High-Emphasis（フォームのセクション見出し・従来）
+     * - "sm": typo-label-md + Text-Medium-Emphasis（絞り込みの選択肢グループ等の小見出し）
+     */
+    size?: "md" | "sm";
+}): import("react/jsx-runtime").JSX.Element;
 /**
  * FieldGroup — 関連する複数フィールドを束ねるコンテナ。
  * section-content リズム（gap-4）で縦に並べる。
@@ -78,4 +97,5 @@ declare function FieldError({ className, children, ...props }: React.ComponentPr
 declare function FieldSeparator({ className, children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 export { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator, };
 export { fieldVariants };
+export type { FieldSetGap };
 export type FieldProps = React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>;

package/dist/types/components/foundations/popover.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Popover as PopoverPrimitive } from "radix-ui";
 declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, onEscapeKeyDown, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): import("react/jsx-runtime").JSX.Element;
 declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/foundations/sheet.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { Dialog as SheetPrimitive } from "radix-ui";
-declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function Sheet({ open, defaultOpen, onOpenChange, ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
 declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
 declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 type SheetSize = "sm" | "md" | "lg";
-declare function SheetContent({ className, children, side, size, showCloseButton, autoFocus, onOpenAutoFocus, onCloseAutoFocus, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
+declare function SheetContent({ className, children, side, size, showCloseButton, autoFocus, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
     side?: "top" | "right" | "bottom" | "left";
     /**
      * 幅の段。`side="left"` / `"right"` のときだけ効く（top / bottom は全幅なので無視）。
@@ -18,7 +18,8 @@ declare function SheetContent({ className, children, side, size, showCloseButton
     size?: SheetSize;
     showCloseButton?: boolean;
     /**
-     * 開閉時のフォーカス自動移動。既定 true（Radix 既定＝開いたら中へ入り、閉じたらトリガーへ戻る）。
+     * 開閉時のフォーカス自動移動。既定 true（開いたら中へ入り、閉じたらその回に開いた要素へ戻る。
+     * Trigger を使わず state で開いたときも戻る）。
      * WCAG 2.4.3 を満たすため、止めたい特別な事情があるときだけ false にする。
      */
     autoFocus?: boolean;

package/dist/types/components/foundations/sonner.d.ts

@@ -1,3 +1,4 @@
-import { type ToasterProps } from "sonner";
+import { toast as sonnerToast, type ToasterProps } from "sonner";
 declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
-export { Toaster };
+declare const toast: typeof sonnerToast;
+export { Toaster, toast };

package/dist/types/components/primitives/admin-side-nav.d.ts

@@ -41,6 +41,8 @@ export interface AdminSideNavProps {
      * モバイルドロワーの開閉要求ハンドラ。背景・閉じるボタンに加え、ドロワー内のリンク
      * （項目・サブ項目）を押したときも `onOpenChange(false)` が呼ばれる
      * （`linkComponent` でクライアント遷移するとページが再読み込みされず、開いたままになるため）。
+     * ただし Cmd/Ctrl/Shift/Alt 付きクリック・中クリック・`target="_blank"` のリンクは、
+     * 今の画面が移らないので閉じない。
      */
     onOpenChange?: (open: boolean) => void;
     /** nav の aria-label */

package/dist/types/components/primitives/combobox.d.ts

@@ -1,6 +1,10 @@
 export interface ComboboxOption {
     value: string;
     label: string;
+    /**
+     * 絞り込みに使う別名（読み・略称など）。label と同じく、大文字小文字・全角半角・
+     * ひらがな/カタカナ・漢字に挟まれた「ヶ/ケ/ヵ/が」の違いを区別せずに部分一致で当てる
+     */
     keywords?: string[];
     disabled?: boolean;
 }
@@ -28,6 +32,8 @@ export interface ComboboxProps {
      * トリガーのアクセシブルネーム（日本語）。
      * `role="combobox"` は内容からは名前が付かないため、FormField の外で単体利用する
      * ときはこれか `aria-labelledby` を指定する（未指定時は placeholder を名前に使う）。
+     * 選択中は、この名前（FormField 配下では FormField のラベル）の後ろに選択中の値が続く
+     * （例「都道府県 東京都」）。
      */
     "aria-label"?: string;
     /** ラベル要素の id を直接指定する場合 */

package/dist/types/components/primitives/date-picker.d.ts

@@ -12,13 +12,18 @@ export interface DatePickerProps {
     max?: Date;
     /** 個別に無効化する日（Calendar の disabled マッチャーをそのまま透過） */
     disabledDates?: Matcher | Matcher[];
+    /**
+     * カレンダーを開いたときに表示する月。指定すると `value` より優先する。
+     * 未指定なら、値があるときは選択中の日の月、無いときは今月を開く
+     */
+    defaultMonth?: Date;
     /** trigger を無効化する */
     disabled?: boolean;
     /**
      * 選択済みの値を消すクリアボタン（×）を trigger 右端に出す。既定 false（後方互換）。
      * `value` があり `disabled` でないときだけ描画し、押すと `onChange(undefined)` を呼ぶ。
-     * 未指定だと「カレンダーを開いて選択済みの日付を再クリック」しかクリア手段が無く、
-     * 画面から発見できないため、任意項目（null 許容）では true にする。
+     * カレンダーで選択中の日を再び押しても値は消えないため、値を空に戻せるのはこの × だけ。
+     * 任意項目（null 許容）では true にする。
      */
     clearable?: boolean;
     /** クリアボタンの aria-label。既定「日付をクリア」 */
@@ -38,7 +43,7 @@ export interface DatePickerProps {
      */
     className?: string;
 }
-declare function DatePicker({ value, onChange, placeholder, min, max, disabledDates, disabled, clearable, clearLabel, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePicker({ value, onChange, placeholder, min, max, disabledDates, defaultMonth, disabled, clearable, clearLabel, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedby, className, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 export interface DateTimePickerProps extends DatePickerProps {
     /** 分の刻み（分 Select の選択肢間隔）。既定 5 分 */
     minuteStep?: number;

package/dist/types/components/primitives/funnel-shell.d.ts

@@ -86,7 +86,7 @@ export interface FunnelShellProps {
  *   で表す。各ステップはドット（上）＋ラベル（下）の縦積みで、コネクタ線はドット中心の
  *   高さで隣ステップ中心まで引く。ラベルは SP でも省略しない。
  * - `bottomAction` を渡すと本文の下余白はシェルが管理する（二重がけ／付け忘れの構造的防止）。
- * - 地が Surface-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
+ * - 地が Surface-Neutral-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
  *   （`--card-surface`）をシェルが宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
  *
  * 管理画面の集中編集は `WorkspaceShell`（EC 購入導線＝本コンポーネント）。

package/dist/types/components/primitives/kebab-menu.d.ts

@@ -13,9 +13,13 @@
  * | Prop | 型 | デフォルト | 説明 |
  * |------|-----|-----------|------|
  * | items | { label, icon?, onClick, destructive? }[] | — | メニュー項目 |
+ * | menuLabel | string | "メニュー" | トリガーの読み上げ名（aria-label） |
  *
  * ### AI 向け使用ルール
  * - テーブル行のアクション列に使用
+ * - 一覧の各行に置くときは `menuLabel` に行を特定できる名前を渡す（例: `${商品名}のメニュー`）。
+ *   全部「メニュー」だと読み上げで区別できない
+ * - 見た目は 32px のまま、当たり判定は `tap-target` で 44px に広げている。隣のボタンとの間は 12px 以上空ける
  * - DropdownMenu を内部で利用
  */
 import * as React from "react";
@@ -32,7 +36,12 @@ export interface KebabMenuItem {
 export interface KebabMenuProps {
     /** メニュー項目 */
     items: KebabMenuItem[];
+    /**
+     * トリガーボタンの読み上げ名（aria-label）。既定は「メニュー」。
+     * 一覧の各行に置くときは「○○のメニュー」のように対象が分かる名前にする
+     */
+    menuLabel?: string;
     /** 追加クラス */
     className?: string;
 }
-export declare function KebabMenu({ items, className }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function KebabMenu({ items, menuLabel, className }: KebabMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/components/primitives/number-input.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+/** NumberInput の inputProps。値・id・aria・disabled 等の部品が管理する属性は除く */
+export type NumberInputInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "id" | "name" | "disabled" | "inputMode" | "pattern" | "aria-label" | "aria-labelledby" | "aria-describedby" | "aria-invalid" | "aria-live">;
 export interface NumberInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
     /** 現在の値（制御） */
     value?: number;
@@ -33,6 +35,23 @@ export interface NumberInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
     locale?: string;
     /** 入力欄の id。FormField 配下では未指定でも FormField の htmlFor と同じ id になる */
     inputId?: string;
+    /**
+     * フォーム送信時の名前。`<form>` の FormData に現在値（素の数値）が `name` で入る。
+     * editable かつ formatOptions 無しのときは表示中の入力欄に付く。表示が数値そのものでないとき
+     * （formatOptions で桁区切り・通貨表示する / editable=false）は、素の数値を持つ hidden input に付ける
+     * （`inputProps.form` で form 外から関連付けた場合は hidden input にも同じ form が付く）
+     */
+    name?: string;
+    /** 内部の入力欄（`<input>`）への ref。フォーカス制御・フォームライブラリの登録に使う。editable=false では入力欄が無いので null */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /**
+     * 内部の入力欄（`<input>`）に渡す属性。onFocus / onBlur / onKeyDown 等の入力欄だけのイベントや
+     * autoComplete・data-* に使う（その他の props は従来どおりグループの div に付く）。
+     * onFocus / onBlur は部品内部の処理（編集開始・値の確定）の後に呼ぶ。onKeyDown は部品のキー処理
+     * （Enter で確定・矢印キーで増減）の前に呼び、preventDefault するとそれを止める。
+     * 値・id・name・aria・disabled は部品が管理するため渡せない
+     */
+    inputProps?: NumberInputInputProps;
     /**
      * 入力欄・増減ボタンの読み上げラベル。既定はカート数量向けの「数量」。
      * 価格・在庫など数量以外に使うときは必ず指定する（例: "販売価格"）。
@@ -84,7 +103,7 @@ export interface NumberInputProps extends Omit<React.HTMLAttributes<HTMLDivEleme
  *   同じものを探した人が見つけられず別実装が生まれた。機能名に改名し、
  *   旧名は deprecated alias として残している。
  */
-declare function NumberInput({ className, value, defaultValue, min, max, step, onChange, disabled, error, size, editable, showTrash, onDelete, formatOptions, locale, inputId, label: labelProp, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+declare function NumberInput({ className, value, defaultValue, min, max, step, onChange, disabled, error, size, editable, showTrash, onDelete, formatOptions, locale, inputId, name, inputRef, inputProps, label: labelProp, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 export { NumberInput };
 /**
  * @deprecated 用途名（カート数量）ではなく機能名の `NumberInput` を使ってください。

package/dist/types/components/primitives/progress-steps.d.ts

@@ -21,7 +21,7 @@ export interface ProgressStepsProps extends React.HTMLAttributes<HTMLDivElement>
  * - チェックアウト・会員登録など段階フロー画面で使用
  * - `currentStep` で現在のステップをハイライト
  * - 完了済みステップにはチェックマークアイコン
- * - アクティブ/完了: Brand-Cake-Orange、未到達: Surface-Tertiary
+ * - アクティブ/完了: Brand-Cake-Orange、未到達: Surface-Neutral-Tertiary
  */
 declare function ProgressSteps({ className, steps, currentStep, showCheckmark, ...props }: ProgressStepsProps): import("react/jsx-runtime").JSX.Element;
 export { ProgressSteps };

package/dist/types/components/primitives/section.d.ts

@@ -34,7 +34,7 @@ export interface SectionProps extends Omit<React.ComponentProps<"section">, "bac
  * `--card-surface: var(--Surface-Primary)` を配下に流すことで、**Section 配下の Card は
  * `surface` 未指定でも白**になる（`Card surface="primary"` の明示指定は従来通り優先）。
  *
- * 「グレー地の上の Card は白」を**構造で**保証するのが狙いで、あとからカードを足しても
+ * 「色地の上の Card は白」を**構造で**保証するのが狙いで、あとからカードを足しても
  * prop の付け忘れが起きない。伝播は CSS カスタムプロパティのカスケードのみで、React context は
  * 使わない（Server Component のまま使える／DS 外の要素は影響を受けない）。
  *

package/dist/types/components/primitives/workspace-shell.d.ts

@@ -61,8 +61,8 @@ export interface WorkspaceShellProps {
  * - ヘッダーは既存 `Header`（variant="back"）を使う。左上=戻る導線、
  *   右上=`primaryAction`（ワークスペース全体の上位アクションがある場合のみ）。
  * - `sectionNav` は編集内ナビのみ。グロナビは置かない。
- * - `sectionNav` は Surface-Secondary から浮いた独立パネルとして、シェル側で角丸パネルにラップされる。
- * - 地が Surface-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
+ * - `sectionNav` は Surface-Neutral-Secondary から浮いた独立パネルとして、シェル側で角丸パネルにラップされる。
+ * - 地が Surface-Neutral-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
  *   （`--card-surface`）をシェルが宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
  * - 標準的な編集は `AdminShell`（Standard Page（Edit）／旧 Form Page）。複雑・集中編集・没入執筆のみ本コンポーネント。
  *

package/dist/types/index.d.ts

@@ -3,7 +3,6 @@ export { cn } from "./lib/utils";
 export { FOCUS_RING, FOCUS_RING_WITHIN, FOCUS_RING_INSET, FOCUS_RING_ONLY } from "./lib/focus-ring";
 export { FORCED_COLORS_FOCUS, FORCED_COLORS_FOCUS_WITHIN, FORCED_COLORS_FOCUS_INSET, FORCED_COLORS_MENU_ITEM, FORCED_COLORS_COMMAND_ITEM, } from "./lib/focus-ring";
 export type { LinkComponent } from "./lib/link-component";
-export { toast } from "sonner";
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/foundations/accordion";
 export { Alert, AlertDescription, AlertTitle } from "./components/foundations/alert";
 export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from "./components/foundations/alert-dialog";
@@ -30,7 +29,7 @@ export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, Di
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from "./components/foundations/drawer";
 export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/foundations/dropdown-menu";
 export { Field, FieldLabel, FieldSet, FieldLegend, FieldGroup, FieldDescription, FieldError, FieldSeparator, fieldVariants } from "./components/foundations/field";
-export type { FieldProps } from "./components/foundations/field";
+export type { FieldProps, FieldSetGap } from "./components/foundations/field";
 export { FileInput, formatFileNames, validateFileSize } from "./components/foundations/file-input";
 export type { FileInputProps, FileInputError } from "./components/foundations/file-input";
 export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField } from "./components/foundations/form";
@@ -65,7 +64,7 @@ export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, Tabl
 export { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/foundations/tabs";
 export { Textarea } from "./components/foundations/textarea";
 export type { TextareaProps } from "./components/foundations/textarea";
-export { Toaster } from "./components/foundations/sonner";
+export { Toaster, toast } from "./components/foundations/sonner";
 export { Toggle, toggleVariants } from "./components/foundations/toggle";
 export { ToggleGroup, ToggleGroupItem } from "./components/foundations/toggle-group";
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/foundations/tooltip";
@@ -153,7 +152,7 @@ export type { ProgressStepsProps } from "./components/primitives/progress-steps"
 export { Timeline } from "./components/primitives/timeline";
 export type { TimelineItem, TimelineProps } from "./components/primitives/timeline";
 export { NumberInput, QuantitySelector } from "./components/primitives/number-input";
-export type { NumberInputProps, QuantitySelectorProps } from "./components/primitives/number-input";
+export type { NumberInputProps, NumberInputInputProps, QuantitySelectorProps } from "./components/primitives/number-input";
 export { SearchBar } from "./components/primitives/search-bar";
 export type { SearchBarProps } from "./components/primitives/search-bar";
 export { SearchPanel } from "./components/primitives/search-panel";

package/dist/types/lib/focus-restore.d.ts

@@ -0,0 +1,52 @@
+import * as React from "react";
+/**
+ * オーバーレイ（Dialog / Sheet / AlertDialog / Drawer）を閉じたときに、その回に開く直前に
+ * フォーカスがあった要素（opener）へフォーカスを戻す共通処理。
+ *
+ * Radix の既定は「Trigger へ戻す」だけなので、Trigger を使わず state で開く使い方
+ * （一覧の行のボタンから 1 つのダイアログを開く等）では閉じたあとのフォーカスが body に落ちる。
+ *
+ * - 記録は開くたびに上書きし、閉じるときに取り出して空に戻す（開閉をまたいで古い opener を残さない）
+ * - opener が DOM から消えている・disabled・inert の中・body のときは戻さず、Radix の既定に任せる
+ *   （Safari / iOS はクリックでボタンにフォーカスが乗らないため、body が記録されることがある）
+ * - consumer の `onCloseAutoFocus` を先に呼び、`preventDefault()` されたら何もしない
+ * - 閉じた時点でフォーカスが body 以外（非モーダルで外側の要素を押した等）にあるなら奪わない
+ * - 戻すときは `preventScroll: true`（画面外の行へ一覧がスクロールで飛ばないように）
+ */
+/** opener へ戻してよいか（DOM 上にあり、disabled / inert ではなく、body / html でない）。 */
+export declare function canRestoreFocusTo(el: Element | null | undefined): el is HTMLElement;
+/**
+ * Root 部品（Dialog / Sheet / AlertDialog）が持つ、開閉 1 回分の記録。
+ * opener を Content ごとではなく Root 側に置くことで、開いたまま consumer が Content を
+ * 作り直した（key の変更など）ときも記録を引き継ぐ。
+ */
+export interface OverlayFocusRoot {
+    openerRef: React.RefObject<HTMLElement | null>;
+    /** 今開いているか（controlled なら open、uncontrolled なら onOpenChange で追う）。 */
+    isOpen: () => boolean;
+    /** Content のマウント中に数える。0 なら Content ごと外された（閉じたのと同じ扱い）。 */
+    registerContent: () => () => void;
+    hasContent: () => boolean;
+}
+/**
+ * Content が読む Root の記録。Drawer のように Root 側の記録を持たない部品は null を流して、
+ * 外側の Dialog などの記録を誤って使わないようにする。
+ */
+export declare const OverlayFocusRootContext: React.Context<OverlayFocusRoot>;
+/**
+ * Root 部品で使う。開閉状態を追い、Content へ流す記録と、Radix Root へ渡す `onOpenChange` を返す。
+ */
+export declare function useOverlayFocusRoot(open: boolean | undefined, defaultOpen: boolean | undefined, onOpenChange: ((open: boolean) => void) | undefined): {
+    root: OverlayFocusRoot;
+    handleOpenChange: (open: boolean) => void;
+};
+interface AutoFocusHandlers {
+    onOpenAutoFocus?: (event: Event) => void;
+    onCloseAutoFocus?: (event: Event) => void;
+}
+/**
+ * Content 部品で使う。consumer の `onOpenAutoFocus` / `onCloseAutoFocus` を合成した
+ * ハンドラーを返す。Radix の Content にそのまま渡す。
+ */
+export declare function useRestoreFocusToOpener({ onOpenAutoFocus, onCloseAutoFocus, }: AutoFocusHandlers): Required<AutoFocusHandlers>;
+export {};

package/dist/types/lib/focus-ring.d.ts

@@ -79,6 +79,9 @@ export declare const FOCUS_RING: string;
  * ラッパーが枠を描き、内側の要素がフォーカスを受け取る合成コントロール用
  * （SearchBar の枠、FileInput の label 等）。
  *
+ * リングの色は {@link FOCUS_RING} と同じ（既定は緑の 50% 透過、高コントラストのときだけ
+ * `--Focus-Ring-Control` の不透明な緑に切り替わる）。
+ *
  * hover で同じプロパティを変える場合は `hover:not-focus-within:*` で書くこと。
  *
  * @example