@cakejp/design-system 0.22.1 → 0.24.0

package/dist/index.js

@@ -1,507 +1,506 @@
 /* empty css          */
 import { cn as t } from "./lib/utils.js";
-import { FOCUS_RING as n, FOCUS_RING_INSET as i, FOCUS_RING_ONLY as p, FOCUS_RING_WITHIN as l, FORCED_COLORS_COMMAND_ITEM as m, FORCED_COLORS_FOCUS as x, FORCED_COLORS_FOCUS_INSET as u, FORCED_COLORS_FOCUS_WITHIN as C, FORCED_COLORS_MENU_ITEM as f } from "./lib/focus-ring.js";
-import { toast as g } from "sonner";
-import { Accordion as S, AccordionContent as s, AccordionItem as D, AccordionTrigger as b } from "./components/foundations/accordion.js";
-import { Alert as M, AlertDescription as I, AlertTitle as F } from "./components/foundations/alert.js";
-import { AlertDialog as h, AlertDialogAction as R, AlertDialogCancel as P, AlertDialogContent as w, AlertDialogDescription as A, AlertDialogFooter as O, AlertDialogHeader as k, AlertDialogOverlay as B, AlertDialogPortal as L, AlertDialogTitle as N, AlertDialogTrigger as y } from "./components/foundations/alert-dialog.js";
-import { AspectRatio as _ } from "./components/foundations/aspect-ratio.js";
-import { Avatar as E, AvatarFallback as V, AvatarImage as U } from "./components/foundations/avatar.js";
-import { Badge as Q, badgeVariants as z } from "./components/foundations/badge.js";
-import { Breadcrumb as Y, BreadcrumbEllipsis as j, BreadcrumbItem as q, BreadcrumbLink as J, BreadcrumbList as X, BreadcrumbPage as Z, BreadcrumbSeparator as $ } from "./components/foundations/breadcrumb.js";
-import { Button as oe, buttonVariants as re } from "./components/foundations/button.js";
-import { Calendar as ae } from "./components/foundations/calendar.js";
-import { Card as ie, CardAction as pe, CardContent as le, CardDescription as me, CardFooter as xe, CardHeader as ue, CardTitle as Ce, cardVariants as fe } from "./components/foundations/card.js";
-import { Checkbox as ge } from "./components/foundations/checkbox.js";
-import { CheckboxCardGroup as Se, CheckboxCardItem as se } from "./components/foundations/checkbox-card.js";
-import { CheckboxGroup as be, CheckboxGroupItem as Te } from "./components/foundations/checkbox-group.js";
-import { Collapsible as Ie, CollapsibleContent as Fe, CollapsibleTrigger as ve } from "./components/foundations/collapsible.js";
-import { Command as Re, CommandDialog as Pe, CommandEmpty as we, CommandGroup as Ae, CommandInput as Oe, CommandItem as ke, CommandList as Be, CommandSeparator as Le, CommandShortcut as Ne } from "./components/foundations/command.js";
-import { ConfirmDialogProvider as Ge, useConfirm as _e } from "./components/foundations/confirm-dialog.js";
-import { ContextMenu as Ee, ContextMenuCheckboxItem as Ve, ContextMenuContent as Ue, ContextMenuGroup as We, ContextMenuItem as Qe, ContextMenuLabel as ze, ContextMenuPortal as Ke, ContextMenuRadioGroup as Ye, ContextMenuRadioItem as je, ContextMenuSeparator as qe, ContextMenuShortcut as Je, ContextMenuSub as Xe, ContextMenuSubContent as Ze, ContextMenuSubTrigger as $e, ContextMenuTrigger as eo } from "./components/foundations/context-menu.js";
-import { DataTable as ro, DataTableActionCell as to, DataTableAddRow as ao, DataTableAvatarCell as no, DataTableBody as io, DataTableBulkActions as po, DataTableCell as lo, DataTableCheckboxCell as mo, DataTableDragHandleCell as xo, DataTableEmptyState as uo, DataTableHead as Co, DataTableHeader as fo, DataTableImageCell as go, DataTableInputCell as co, DataTableLinkCell as So, DataTableNumberCell as so, DataTableRow as Do, DataTableSectionRow as bo, DataTableSelectCell as To, DataTableTable as Mo } from "./components/foundations/data-table.js";
-import { Dialog as Fo, DialogClose as vo, DialogContent as ho, DialogDescription as Ro, DialogFooter as Po, DialogHeader as wo, DialogOverlay as Ao, DialogPortal as Oo, DialogTitle as ko, DialogTrigger as Bo } from "./components/foundations/dialog.js";
-import { Drawer as No, DrawerClose as yo, DrawerContent as Go, DrawerDescription as _o, DrawerFooter as Ho, DrawerHeader as Eo, DrawerOverlay as Vo, DrawerPortal as Uo, DrawerTitle as Wo, DrawerTrigger as Qo } from "./components/foundations/drawer.js";
-import { DropdownMenu as Ko, DropdownMenuCheckboxItem as Yo, DropdownMenuContent as jo, DropdownMenuGroup as qo, DropdownMenuItem as Jo, DropdownMenuLabel as Xo, DropdownMenuPortal as Zo, DropdownMenuRadioGroup as $o, DropdownMenuRadioItem as er, DropdownMenuSeparator as or, DropdownMenuShortcut as rr, DropdownMenuSub as tr, DropdownMenuSubContent as ar, DropdownMenuSubTrigger as nr, DropdownMenuTrigger as ir } from "./components/foundations/dropdown-menu.js";
-import { Field as lr, FieldDescription as mr, FieldError as xr, FieldGroup as ur, FieldLabel as Cr, FieldLegend as fr, FieldSeparator as dr, FieldSet as gr, fieldVariants as cr } from "./components/foundations/field.js";
-import { FileInput as sr, formatFileNames as Dr, validateFileSize as br } from "./components/foundations/file-input.js";
-import { Form as Mr, FormControl as Ir, FormDescription as Fr, FormField as vr, FormItem as hr, FormLabel as Rr, FormMessage as Pr, useFormField as wr } from "./components/foundations/form.js";
-import { HoverCard as Or, HoverCardContent as kr, HoverCardTrigger as Br } from "./components/foundations/hover-card.js";
-import { IconBadge as Nr, iconBadgeVariants as yr } from "./components/foundations/icon-badge.js";
-import { Input as _r } from "./components/foundations/input.js";
-import { Label as Er } from "./components/foundations/label.js";
-import { Menubar as Ur, MenubarCheckboxItem as Wr, MenubarContent as Qr, MenubarGroup as zr, MenubarItem as Kr, MenubarLabel as Yr, MenubarMenu as jr, MenubarPortal as qr, MenubarRadioGroup as Jr, MenubarRadioItem as Xr, MenubarSeparator as Zr, MenubarShortcut as $r, MenubarSub as et, MenubarSubContent as ot, MenubarSubTrigger as rt, MenubarTrigger as tt } from "./components/foundations/menubar.js";
-import { NavigationMenu as nt, NavigationMenuContent as it, NavigationMenuIndicator as pt, NavigationMenuItem as lt, NavigationMenuLink as mt, NavigationMenuList as xt, NavigationMenuTrigger as ut, NavigationMenuViewport as Ct, navigationMenuTriggerStyle as ft } from "./components/foundations/navigation-menu.js";
-import { Pagination as gt, PaginationContent as ct, PaginationEllipsis as St, PaginationItem as st, PaginationLink as Dt, PaginationNext as bt, PaginationPrevious as Tt } from "./components/foundations/pagination.js";
-import { getPaginationRange as It } from "./lib/pagination-range.js";
-import { Popover as vt, PopoverAnchor as ht, PopoverContent as Rt, PopoverTrigger as Pt } from "./components/foundations/popover.js";
-import { Progress as At } from "./components/foundations/progress.js";
-import { ResponsiveDialog as kt, ResponsiveDialogClose as Bt, ResponsiveDialogContent as Lt, ResponsiveDialogDescription as Nt, ResponsiveDialogFooter as yt, ResponsiveDialogHeader as Gt, ResponsiveDialogTitle as _t, ResponsiveDialogTrigger as Ht, useIsMobile as Et } from "./components/foundations/responsive-dialog.js";
-import { RadioGroup as Ut, RadioGroupItem as Wt } from "./components/foundations/radio-group.js";
-import { ScrollArea as zt, ScrollBar as Kt } from "./components/foundations/scroll-area.js";
-import { Select as jt, SelectContent as qt, SelectGroup as Jt, SelectItem as Xt, SelectLabel as Zt, SelectScrollDownButton as $t, SelectScrollUpButton as ea, SelectSeparator as oa, SelectTrigger as ra, SelectValue as ta } from "./components/foundations/select.js";
-import { Separator as na } from "./components/foundations/separator.js";
-import { Sheet as pa, SheetClose as la, SheetContent as ma, SheetDescription as xa, SheetFooter as ua, SheetHeader as Ca, SheetTitle as fa, SheetTrigger as da } from "./components/foundations/sheet.js";
-import { Skeleton as ca } from "./components/foundations/skeleton.js";
-import { SkipLink as sa } from "./components/foundations/skip-link.js";
-import { Slider as ba } from "./components/foundations/slider.js";
-import { Spinner as Ma } from "./components/foundations/spinner.js";
-import { SocialIcon as Fa } from "./components/foundations/social-icon.js";
-import { Switch as ha } from "./components/foundations/switch.js";
-import { Table as Pa, TableBody as wa, TableCaption as Aa, TableCell as Oa, TableFooter as ka, TableHead as Ba, TableHeader as La, TableRow as Na } from "./components/foundations/table.js";
-import { Tabs as Ga, TabsContent as _a, TabsList as Ha, TabsTrigger as Ea } from "./components/foundations/tabs.js";
-import { Textarea as Ua } from "./components/foundations/textarea.js";
-import { Toaster as Qa } from "./components/foundations/sonner.js";
-import { Toggle as Ka, toggleVariants as Ya } from "./components/foundations/toggle.js";
-import { ToggleGroup as qa, ToggleGroupItem as Ja } from "./components/foundations/toggle-group.js";
-import { Tooltip as Za, TooltipContent as $a, TooltipProvider as en, TooltipTrigger as on } from "./components/foundations/tooltip.js";
-import { AdminSideNav as tn } from "./components/primitives/admin-side-nav.js";
-import { AdminHeader as nn } from "./components/primitives/admin-header.js";
+import { FOCUS_RING as n, FOCUS_RING_INSET as i, FOCUS_RING_ONLY as l, FOCUS_RING_WITHIN as p, FORCED_COLORS_COMMAND_ITEM as m, FORCED_COLORS_FOCUS as x, FORCED_COLORS_FOCUS_INSET as u, FORCED_COLORS_FOCUS_WITHIN as C, FORCED_COLORS_MENU_ITEM as f } from "./lib/focus-ring.js";
+import { Accordion as g, AccordionContent as c, AccordionItem as S, AccordionTrigger as s } from "./components/foundations/accordion.js";
+import { Alert as b, AlertDescription as T, AlertTitle as M } from "./components/foundations/alert.js";
+import { AlertDialog as F, AlertDialogAction as v, AlertDialogCancel as h, AlertDialogContent as R, AlertDialogDescription as P, AlertDialogFooter as w, AlertDialogHeader as A, AlertDialogOverlay as O, AlertDialogPortal as k, AlertDialogTitle as B, AlertDialogTrigger as L } from "./components/foundations/alert-dialog.js";
+import { AspectRatio as y } from "./components/foundations/aspect-ratio.js";
+import { Avatar as _, AvatarFallback as H, AvatarImage as E } from "./components/foundations/avatar.js";
+import { Badge as U, badgeVariants as W } from "./components/foundations/badge.js";
+import { Breadcrumb as z, BreadcrumbEllipsis as K, BreadcrumbItem as Y, BreadcrumbLink as j, BreadcrumbList as q, BreadcrumbPage as J, BreadcrumbSeparator as X } from "./components/foundations/breadcrumb.js";
+import { Button as $, buttonVariants as ee } from "./components/foundations/button.js";
+import { Calendar as re } from "./components/foundations/calendar.js";
+import { Card as ae, CardAction as ne, CardContent as ie, CardDescription as le, CardFooter as pe, CardHeader as me, CardTitle as xe, cardVariants as ue } from "./components/foundations/card.js";
+import { Checkbox as fe } from "./components/foundations/checkbox.js";
+import { CheckboxCardGroup as ge, CheckboxCardItem as ce } from "./components/foundations/checkbox-card.js";
+import { CheckboxGroup as se, CheckboxGroupItem as De } from "./components/foundations/checkbox-group.js";
+import { Collapsible as Te, CollapsibleContent as Me, CollapsibleTrigger as Ie } from "./components/foundations/collapsible.js";
+import { Command as ve, CommandDialog as he, CommandEmpty as Re, CommandGroup as Pe, CommandInput as we, CommandItem as Ae, CommandList as Oe, CommandSeparator as ke, CommandShortcut as Be } from "./components/foundations/command.js";
+import { ConfirmDialogProvider as Ne, useConfirm as ye } from "./components/foundations/confirm-dialog.js";
+import { ContextMenu as _e, ContextMenuCheckboxItem as He, ContextMenuContent as Ee, ContextMenuGroup as Ve, ContextMenuItem as Ue, ContextMenuLabel as We, ContextMenuPortal as Qe, ContextMenuRadioGroup as ze, ContextMenuRadioItem as Ke, ContextMenuSeparator as Ye, ContextMenuShortcut as je, ContextMenuSub as qe, ContextMenuSubContent as Je, ContextMenuSubTrigger as Xe, ContextMenuTrigger as Ze } from "./components/foundations/context-menu.js";
+import { DataTable as eo, DataTableActionCell as oo, DataTableAddRow as ro, DataTableAvatarCell as to, DataTableBody as ao, DataTableBulkActions as no, DataTableCell as io, DataTableCheckboxCell as lo, DataTableDragHandleCell as po, DataTableEmptyState as mo, DataTableHead as xo, DataTableHeader as uo, DataTableImageCell as Co, DataTableInputCell as fo, DataTableLinkCell as go, DataTableNumberCell as co, DataTableRow as So, DataTableSectionRow as so, DataTableSelectCell as Do, DataTableTable as bo } from "./components/foundations/data-table.js";
+import { Dialog as Mo, DialogClose as Io, DialogContent as Fo, DialogDescription as vo, DialogFooter as ho, DialogHeader as Ro, DialogOverlay as Po, DialogPortal as wo, DialogTitle as Ao, DialogTrigger as Oo } from "./components/foundations/dialog.js";
+import { Drawer as Bo, DrawerClose as Lo, DrawerContent as No, DrawerDescription as yo, DrawerFooter as Go, DrawerHeader as _o, DrawerOverlay as Ho, DrawerPortal as Eo, DrawerTitle as Vo, DrawerTrigger as Uo } from "./components/foundations/drawer.js";
+import { DropdownMenu as Qo, DropdownMenuCheckboxItem as zo, DropdownMenuContent as Ko, DropdownMenuGroup as Yo, DropdownMenuItem as jo, DropdownMenuLabel as qo, DropdownMenuPortal as Jo, DropdownMenuRadioGroup as Xo, DropdownMenuRadioItem as Zo, DropdownMenuSeparator as $o, DropdownMenuShortcut as er, DropdownMenuSub as or, DropdownMenuSubContent as rr, DropdownMenuSubTrigger as tr, DropdownMenuTrigger as ar } from "./components/foundations/dropdown-menu.js";
+import { Field as ir, FieldDescription as lr, FieldError as pr, FieldGroup as mr, FieldLabel as xr, FieldLegend as ur, FieldSeparator as Cr, FieldSet as fr, fieldVariants as dr } from "./components/foundations/field.js";
+import { FileInput as cr, formatFileNames as Sr, validateFileSize as sr } from "./components/foundations/file-input.js";
+import { Form as br, FormControl as Tr, FormDescription as Mr, FormField as Ir, FormItem as Fr, FormLabel as vr, FormMessage as hr, useFormField as Rr } from "./components/foundations/form.js";
+import { HoverCard as wr, HoverCardContent as Ar, HoverCardTrigger as Or } from "./components/foundations/hover-card.js";
+import { IconBadge as Br, iconBadgeVariants as Lr } from "./components/foundations/icon-badge.js";
+import { Input as yr } from "./components/foundations/input.js";
+import { Label as _r } from "./components/foundations/label.js";
+import { Menubar as Er, MenubarCheckboxItem as Vr, MenubarContent as Ur, MenubarGroup as Wr, MenubarItem as Qr, MenubarLabel as zr, MenubarMenu as Kr, MenubarPortal as Yr, MenubarRadioGroup as jr, MenubarRadioItem as qr, MenubarSeparator as Jr, MenubarShortcut as Xr, MenubarSub as Zr, MenubarSubContent as $r, MenubarSubTrigger as et, MenubarTrigger as ot } from "./components/foundations/menubar.js";
+import { NavigationMenu as tt, NavigationMenuContent as at, NavigationMenuIndicator as nt, NavigationMenuItem as it, NavigationMenuLink as lt, NavigationMenuList as pt, NavigationMenuTrigger as mt, NavigationMenuViewport as xt, navigationMenuTriggerStyle as ut } from "./components/foundations/navigation-menu.js";
+import { Pagination as ft, PaginationContent as dt, PaginationEllipsis as gt, PaginationItem as ct, PaginationLink as St, PaginationNext as st, PaginationPrevious as Dt } from "./components/foundations/pagination.js";
+import { getPaginationRange as Tt } from "./lib/pagination-range.js";
+import { Popover as It, PopoverAnchor as Ft, PopoverContent as vt, PopoverTrigger as ht } from "./components/foundations/popover.js";
+import { Progress as Pt } from "./components/foundations/progress.js";
+import { ResponsiveDialog as At, ResponsiveDialogClose as Ot, ResponsiveDialogContent as kt, ResponsiveDialogDescription as Bt, ResponsiveDialogFooter as Lt, ResponsiveDialogHeader as Nt, ResponsiveDialogTitle as yt, ResponsiveDialogTrigger as Gt, useIsMobile as _t } from "./components/foundations/responsive-dialog.js";
+import { RadioGroup as Et, RadioGroupItem as Vt } from "./components/foundations/radio-group.js";
+import { ScrollArea as Wt, ScrollBar as Qt } from "./components/foundations/scroll-area.js";
+import { Select as Kt, SelectContent as Yt, SelectGroup as jt, SelectItem as qt, SelectLabel as Jt, SelectScrollDownButton as Xt, SelectScrollUpButton as Zt, SelectSeparator as $t, SelectTrigger as ea, SelectValue as oa } from "./components/foundations/select.js";
+import { Separator as ta } from "./components/foundations/separator.js";
+import { Sheet as na, SheetClose as ia, SheetContent as la, SheetDescription as pa, SheetFooter as ma, SheetHeader as xa, SheetTitle as ua, SheetTrigger as Ca } from "./components/foundations/sheet.js";
+import { Skeleton as da } from "./components/foundations/skeleton.js";
+import { SkipLink as ca } from "./components/foundations/skip-link.js";
+import { Slider as sa } from "./components/foundations/slider.js";
+import { Spinner as ba } from "./components/foundations/spinner.js";
+import { SocialIcon as Ma } from "./components/foundations/social-icon.js";
+import { Switch as Fa } from "./components/foundations/switch.js";
+import { Table as ha, TableBody as Ra, TableCaption as Pa, TableCell as wa, TableFooter as Aa, TableHead as Oa, TableHeader as ka, TableRow as Ba } from "./components/foundations/table.js";
+import { Tabs as Na, TabsContent as ya, TabsList as Ga, TabsTrigger as _a } from "./components/foundations/tabs.js";
+import { Textarea as Ea } from "./components/foundations/textarea.js";
+import { Toaster as Ua, toast as Wa } from "./components/foundations/sonner.js";
+import { Toggle as za, toggleVariants as Ka } from "./components/foundations/toggle.js";
+import { ToggleGroup as ja, ToggleGroupItem as qa } from "./components/foundations/toggle-group.js";
+import { Tooltip as Xa, TooltipContent as Za, TooltipProvider as $a, TooltipTrigger as en } from "./components/foundations/tooltip.js";
+import { AdminSideNav as rn } from "./components/primitives/admin-side-nav.js";
+import { AdminHeader as an } from "./components/primitives/admin-header.js";
 import { CoachMark as ln } from "./components/primitives/coach-mark.js";
-import { Combobox as xn } from "./components/primitives/combobox.js";
-import { BannerCarousel as Cn } from "./components/primitives/banner-carousel.js";
-import { ContentCarousel as dn } from "./components/primitives/content-carousel.js";
-import { MultiSelect as cn } from "./components/primitives/multi-select.js";
-import { StickyActionBar as sn } from "./components/primitives/sticky-action-bar.js";
-import { BottomTabBar as bn } from "./components/primitives/bottom-tab-bar.js";
-import { BulkActionBar as Mn } from "./components/primitives/bulk-action-bar.js";
-import { CategoryShortcuts as Fn } from "./components/primitives/category-shortcuts.js";
-import { CategoryScroll as hn } from "./components/primitives/category-scroll.js";
-import { ChatComposer as Pn } from "./components/primitives/chat-composer.js";
-import { Chip as An } from "./components/primitives/chip.js";
-import { Prose as kn } from "./components/primitives/prose.js";
-import { ContentCard as Ln, ContentList as Nn } from "./components/primitives/content-card.js";
-import { StandardPageShell as Gn, StandardPageShell as _n } from "./components/primitives/standard-page-shell.js";
-import { EmptyState as En } from "./components/primitives/empty-state.js";
-import { DatePicker as Un, DateTimePicker as Wn } from "./components/primitives/date-picker.js";
-import { ErrorState as zn, NotFoundIllustration as Kn } from "./components/primitives/error-state.js";
-import { FilterBar as jn } from "./components/primitives/filter-bar.js";
-import { Footer as Jn } from "./components/primitives/footer.js";
-import { FormField as Zn } from "./components/primitives/form-field.js";
-import { FunnelShell as ei } from "./components/primitives/funnel-shell.js";
-import { Header as ri } from "./components/primitives/header.js";
-import { ImageCarousel as ai } from "./components/primitives/image-carousel.js";
-import { ImageGallery as ii } from "./components/primitives/image-gallery.js";
-import { ImageInput as li, imageInputPreviewVariants as mi } from "./components/primitives/image-input.js";
-import { ImageUploader as ui } from "./components/primitives/image-uploader.js";
-import { KebabMenu as fi } from "./components/primitives/kebab-menu.js";
-import { ListItem as gi } from "./components/primitives/list-item.js";
-import { MenuDrawer as Si } from "./components/primitives/menu-drawer.js";
-import { SubNav as Di } from "./components/primitives/sub-nav.js";
-import { NotificationBadge as Ti, notificationBadgeVariants as Mi } from "./components/primitives/notification-badge.js";
-import { NotificationList as Fi } from "./components/primitives/notification-list.js";
-import { PriceDisplay as hi, priceDisplayVariants as Ri } from "./components/primitives/price-display.js";
-import { ProgressSteps as wi } from "./components/primitives/progress-steps.js";
-import { Timeline as Oi } from "./components/primitives/timeline.js";
-import { NumberInput as Bi, QuantitySelector as Li } from "./components/primitives/number-input.js";
-import { SearchBar as yi } from "./components/primitives/search-bar.js";
-import { SearchPanel as _i } from "./components/primitives/search-panel.js";
-import { Container as Ei, containerVariants as Vi } from "./components/primitives/container.js";
-import { ScrollRow as Wi } from "./components/primitives/scroll-row.js";
-import { Section as zi, sectionScrimVariants as Ki, sectionVariants as Yi } from "./components/primitives/section.js";
-import { SectionHeader as qi } from "./components/primitives/section-header.js";
-import { SectionNav as Xi } from "./components/primitives/section-nav.js";
-import { ShareButtons as $i } from "./components/primitives/share-buttons.js";
-import { SideNav as op } from "./components/primitives/side-nav.js";
-import { SocialLoginButton as tp } from "./components/primitives/social-login-button.js";
-import { StatusCountTabs as np } from "./components/primitives/status-count-tabs.js";
-import { Tag as pp, tagVariants as lp } from "./components/primitives/tag.js";
-import { WorkspaceShell as xp, WorkspaceShell as up } from "./components/primitives/workspace-shell.js";
-import { AdminShell as fp, AdminShell as dp, MissingComponent as gp } from "./components/ec/admin-shell.js";
-import { AnniversaryCard as Sp } from "./components/ec/anniversary-card.js";
-import { CakeLogo as Dp } from "./components/ec/cake-logo.js";
-import { ChartControls as Tp } from "./components/ec/chart-controls.js";
-import { CountdownTimer as Ip } from "./components/ec/countdown-timer.js";
-import { CouponCard as vp } from "./components/ec/coupon-card.js";
-import { DeliveryCalendar as Rp } from "./components/ec/delivery-calendar.js";
-import { mypageMenuGroups as wp } from "./components/ec/_mypage-menu-data.js";
-import { OrderSection as Op } from "./components/ec/order-section.js";
-import { OrderSummary as Bp } from "./components/ec/order-summary.js";
-import { CreditCardIcon as Np, PaymentMethodDisplay as yp } from "./components/ec/payment-method.js";
-import { BookmarkRibbonIcon as _p, ProductCard as Hp } from "./components/ec/product-card.js";
-import { ProductCarousel as Vp } from "./components/ec/product-carousel.js";
-import { ProductCTA as Wp } from "./components/ec/product-cta.js";
-import { ProductDetailBar as zp } from "./components/ec/product-detail-bar.js";
-import { ProductDetailSidebar as Yp } from "./components/ec/product-detail-sidebar.js";
-import { ProductListItem as qp } from "./components/ec/product-list-item.js";
-import { OptionImageUpload as Xp, OptionQuantity as Zp, OptionSelect as $p, OptionText as el, ProductOption as ol } from "./components/ec/product-option.js";
-import { RatingStars as tl, SparkleIcon as al } from "./components/ec/rating-stars.js";
-import { ReviewCard as il } from "./components/ec/review-card.js";
-import { ReviewForm as ll } from "./components/ec/review-form.js";
-import { ReviewItem as xl, ReviewSummary as ul } from "./components/ec/review-summary.js";
-import { MypageShell as fl } from "./components/ec/mypage-shell.js";
-import { ShopCard as gl } from "./components/ec/shop-card.js";
-import { StatCard as Sl } from "./components/ec/stat-card.js";
-import { chipVariants as Dl } from "./components/foundations/chip-variants.js";
+import { Combobox as mn } from "./components/primitives/combobox.js";
+import { BannerCarousel as un } from "./components/primitives/banner-carousel.js";
+import { ContentCarousel as fn } from "./components/primitives/content-carousel.js";
+import { MultiSelect as gn } from "./components/primitives/multi-select.js";
+import { StickyActionBar as Sn } from "./components/primitives/sticky-action-bar.js";
+import { BottomTabBar as Dn } from "./components/primitives/bottom-tab-bar.js";
+import { BulkActionBar as Tn } from "./components/primitives/bulk-action-bar.js";
+import { CategoryShortcuts as In } from "./components/primitives/category-shortcuts.js";
+import { CategoryScroll as vn } from "./components/primitives/category-scroll.js";
+import { ChatComposer as Rn } from "./components/primitives/chat-composer.js";
+import { Chip as wn } from "./components/primitives/chip.js";
+import { Prose as On } from "./components/primitives/prose.js";
+import { ContentCard as Bn, ContentList as Ln } from "./components/primitives/content-card.js";
+import { StandardPageShell as yn, StandardPageShell as Gn } from "./components/primitives/standard-page-shell.js";
+import { EmptyState as Hn } from "./components/primitives/empty-state.js";
+import { DatePicker as Vn, DateTimePicker as Un } from "./components/primitives/date-picker.js";
+import { ErrorState as Qn, NotFoundIllustration as zn } from "./components/primitives/error-state.js";
+import { FilterBar as Yn } from "./components/primitives/filter-bar.js";
+import { Footer as qn } from "./components/primitives/footer.js";
+import { FormField as Xn } from "./components/primitives/form-field.js";
+import { FunnelShell as $n } from "./components/primitives/funnel-shell.js";
+import { Header as oi } from "./components/primitives/header.js";
+import { ImageCarousel as ti } from "./components/primitives/image-carousel.js";
+import { ImageGallery as ni } from "./components/primitives/image-gallery.js";
+import { ImageInput as li, imageInputPreviewVariants as pi } from "./components/primitives/image-input.js";
+import { ImageUploader as xi } from "./components/primitives/image-uploader.js";
+import { KebabMenu as Ci } from "./components/primitives/kebab-menu.js";
+import { ListItem as di } from "./components/primitives/list-item.js";
+import { MenuDrawer as ci } from "./components/primitives/menu-drawer.js";
+import { SubNav as si } from "./components/primitives/sub-nav.js";
+import { NotificationBadge as bi, notificationBadgeVariants as Ti } from "./components/primitives/notification-badge.js";
+import { NotificationList as Ii } from "./components/primitives/notification-list.js";
+import { PriceDisplay as vi, priceDisplayVariants as hi } from "./components/primitives/price-display.js";
+import { ProgressSteps as Pi } from "./components/primitives/progress-steps.js";
+import { Timeline as Ai } from "./components/primitives/timeline.js";
+import { NumberInput as ki, QuantitySelector as Bi } from "./components/primitives/number-input.js";
+import { SearchBar as Ni } from "./components/primitives/search-bar.js";
+import { SearchPanel as Gi } from "./components/primitives/search-panel.js";
+import { Container as Hi, containerVariants as Ei } from "./components/primitives/container.js";
+import { ScrollRow as Ui } from "./components/primitives/scroll-row.js";
+import { Section as Qi, sectionScrimVariants as zi, sectionVariants as Ki } from "./components/primitives/section.js";
+import { SectionHeader as ji } from "./components/primitives/section-header.js";
+import { SectionNav as Ji } from "./components/primitives/section-nav.js";
+import { ShareButtons as Zi } from "./components/primitives/share-buttons.js";
+import { SideNav as el } from "./components/primitives/side-nav.js";
+import { SocialLoginButton as rl } from "./components/primitives/social-login-button.js";
+import { StatusCountTabs as al } from "./components/primitives/status-count-tabs.js";
+import { Tag as il, tagVariants as ll } from "./components/primitives/tag.js";
+import { WorkspaceShell as ml, WorkspaceShell as xl } from "./components/primitives/workspace-shell.js";
+import { AdminShell as Cl, AdminShell as fl, MissingComponent as dl } from "./components/ec/admin-shell.js";
+import { AnniversaryCard as cl } from "./components/ec/anniversary-card.js";
+import { CakeLogo as sl } from "./components/ec/cake-logo.js";
+import { ChartControls as bl } from "./components/ec/chart-controls.js";
+import { CountdownTimer as Ml } from "./components/ec/countdown-timer.js";
+import { CouponCard as Fl } from "./components/ec/coupon-card.js";
+import { DeliveryCalendar as hl } from "./components/ec/delivery-calendar.js";
+import { mypageMenuGroups as Pl } from "./components/ec/_mypage-menu-data.js";
+import { OrderSection as Al } from "./components/ec/order-section.js";
+import { OrderSummary as kl } from "./components/ec/order-summary.js";
+import { CreditCardIcon as Ll, PaymentMethodDisplay as Nl } from "./components/ec/payment-method.js";
+import { BookmarkRibbonIcon as Gl, ProductCard as _l } from "./components/ec/product-card.js";
+import { ProductCarousel as El } from "./components/ec/product-carousel.js";
+import { ProductCTA as Ul } from "./components/ec/product-cta.js";
+import { ProductDetailBar as Ql } from "./components/ec/product-detail-bar.js";
+import { ProductDetailSidebar as Kl } from "./components/ec/product-detail-sidebar.js";
+import { ProductListItem as jl } from "./components/ec/product-list-item.js";
+import { OptionImageUpload as Jl, OptionQuantity as Xl, OptionSelect as Zl, OptionText as $l, ProductOption as ep } from "./components/ec/product-option.js";
+import { RatingStars as rp, SparkleIcon as tp } from "./components/ec/rating-stars.js";
+import { ReviewCard as np } from "./components/ec/review-card.js";
+import { ReviewForm as lp } from "./components/ec/review-form.js";
+import { ReviewItem as mp, ReviewSummary as xp } from "./components/ec/review-summary.js";
+import { MypageShell as Cp } from "./components/ec/mypage-shell.js";
+import { ShopCard as dp } from "./components/ec/shop-card.js";
+import { StatCard as cp } from "./components/ec/stat-card.js";
+import { chipVariants as sp } from "./components/foundations/chip-variants.js";
 export {
-  S as Accordion,
-  s as AccordionContent,
-  D as AccordionItem,
-  b as AccordionTrigger,
-  nn as AdminHeader,
-  fp as AdminLayout,
-  dp as AdminShell,
-  tn as AdminSideNav,
-  M as Alert,
-  I as AlertDescription,
-  h as AlertDialog,
-  R as AlertDialogAction,
-  P as AlertDialogCancel,
-  w as AlertDialogContent,
-  A as AlertDialogDescription,
-  O as AlertDialogFooter,
-  k as AlertDialogHeader,
-  B as AlertDialogOverlay,
-  L as AlertDialogPortal,
-  N as AlertDialogTitle,
-  y as AlertDialogTrigger,
-  F as AlertTitle,
-  Sp as AnniversaryCard,
-  _ as AspectRatio,
-  E as Avatar,
-  V as AvatarFallback,
-  U as AvatarImage,
-  Q as Badge,
-  Cn as BannerCarousel,
-  _p as BookmarkRibbonIcon,
-  bn as BottomTabBar,
-  Y as Breadcrumb,
-  j as BreadcrumbEllipsis,
-  q as BreadcrumbItem,
-  J as BreadcrumbLink,
-  X as BreadcrumbList,
-  Z as BreadcrumbPage,
-  $ as BreadcrumbSeparator,
-  Mn as BulkActionBar,
-  oe as Button,
-  Zn as CakeFormField,
-  Dp as CakeLogo,
-  ae as Calendar,
-  ie as Card,
-  pe as CardAction,
-  le as CardContent,
-  me as CardDescription,
-  xe as CardFooter,
-  ue as CardHeader,
-  Ce as CardTitle,
-  hn as CategoryScroll,
-  Fn as CategoryShortcuts,
-  Tp as ChartControls,
-  Pn as ChatComposer,
-  ge as Checkbox,
-  Se as CheckboxCardGroup,
-  se as CheckboxCardItem,
-  be as CheckboxGroup,
-  Te as CheckboxGroupItem,
-  An as Chip,
+  g as Accordion,
+  c as AccordionContent,
+  S as AccordionItem,
+  s as AccordionTrigger,
+  an as AdminHeader,
+  Cl as AdminLayout,
+  fl as AdminShell,
+  rn as AdminSideNav,
+  b as Alert,
+  T as AlertDescription,
+  F as AlertDialog,
+  v as AlertDialogAction,
+  h as AlertDialogCancel,
+  R as AlertDialogContent,
+  P as AlertDialogDescription,
+  w as AlertDialogFooter,
+  A as AlertDialogHeader,
+  O as AlertDialogOverlay,
+  k as AlertDialogPortal,
+  B as AlertDialogTitle,
+  L as AlertDialogTrigger,
+  M as AlertTitle,
+  cl as AnniversaryCard,
+  y as AspectRatio,
+  _ as Avatar,
+  H as AvatarFallback,
+  E as AvatarImage,
+  U as Badge,
+  un as BannerCarousel,
+  Gl as BookmarkRibbonIcon,
+  Dn as BottomTabBar,
+  z as Breadcrumb,
+  K as BreadcrumbEllipsis,
+  Y as BreadcrumbItem,
+  j as BreadcrumbLink,
+  q as BreadcrumbList,
+  J as BreadcrumbPage,
+  X as BreadcrumbSeparator,
+  Tn as BulkActionBar,
+  $ as Button,
+  Xn as CakeFormField,
+  sl as CakeLogo,
+  re as Calendar,
+  ae as Card,
+  ne as CardAction,
+  ie as CardContent,
+  le as CardDescription,
+  pe as CardFooter,
+  me as CardHeader,
+  xe as CardTitle,
+  vn as CategoryScroll,
+  In as CategoryShortcuts,
+  bl as ChartControls,
+  Rn as ChatComposer,
+  fe as Checkbox,
+  ge as CheckboxCardGroup,
+  ce as CheckboxCardItem,
+  se as CheckboxGroup,
+  De as CheckboxGroupItem,
+  wn as Chip,
   ln as CoachMark,
-  Ie as Collapsible,
-  Fe as CollapsibleContent,
-  ve as CollapsibleTrigger,
-  xn as Combobox,
-  Re as Command,
-  Pe as CommandDialog,
-  we as CommandEmpty,
-  Ae as CommandGroup,
-  Oe as CommandInput,
-  ke as CommandItem,
-  Be as CommandList,
-  Le as CommandSeparator,
-  Ne as CommandShortcut,
-  Ge as ConfirmDialogProvider,
-  Ei as Container,
-  Ln as ContentCard,
-  dn as ContentCarousel,
-  Nn as ContentList,
-  Ee as ContextMenu,
-  Ve as ContextMenuCheckboxItem,
-  Ue as ContextMenuContent,
-  We as ContextMenuGroup,
-  Qe as ContextMenuItem,
-  ze as ContextMenuLabel,
-  Ke as ContextMenuPortal,
-  Ye as ContextMenuRadioGroup,
-  je as ContextMenuRadioItem,
-  qe as ContextMenuSeparator,
-  Je as ContextMenuShortcut,
-  Xe as ContextMenuSub,
-  Ze as ContextMenuSubContent,
-  $e as ContextMenuSubTrigger,
-  eo as ContextMenuTrigger,
-  Ip as CountdownTimer,
-  vp as CouponCard,
-  Np as CreditCardIcon,
-  ro as DataTable,
-  to as DataTableActionCell,
-  ao as DataTableAddRow,
-  no as DataTableAvatarCell,
-  io as DataTableBody,
-  po as DataTableBulkActions,
-  lo as DataTableCell,
-  mo as DataTableCheckboxCell,
-  xo as DataTableDragHandleCell,
-  uo as DataTableEmptyState,
-  Co as DataTableHead,
-  fo as DataTableHeader,
-  go as DataTableImageCell,
-  co as DataTableInputCell,
-  So as DataTableLinkCell,
-  so as DataTableNumberCell,
-  Do as DataTableRow,
-  bo as DataTableSectionRow,
-  To as DataTableSelectCell,
-  Mo as DataTableTable,
-  Un as DatePicker,
-  Wn as DateTimePicker,
-  Rp as DeliveryCalendar,
-  Fo as Dialog,
-  vo as DialogClose,
-  ho as DialogContent,
-  Ro as DialogDescription,
-  Po as DialogFooter,
-  wo as DialogHeader,
-  Ao as DialogOverlay,
-  Oo as DialogPortal,
-  ko as DialogTitle,
-  Bo as DialogTrigger,
-  No as Drawer,
-  yo as DrawerClose,
-  Go as DrawerContent,
-  _o as DrawerDescription,
-  Ho as DrawerFooter,
-  Eo as DrawerHeader,
-  Vo as DrawerOverlay,
-  Uo as DrawerPortal,
-  Wo as DrawerTitle,
-  Qo as DrawerTrigger,
-  Ko as DropdownMenu,
-  Yo as DropdownMenuCheckboxItem,
-  jo as DropdownMenuContent,
-  qo as DropdownMenuGroup,
-  Jo as DropdownMenuItem,
-  Xo as DropdownMenuLabel,
-  Zo as DropdownMenuPortal,
-  $o as DropdownMenuRadioGroup,
-  er as DropdownMenuRadioItem,
-  or as DropdownMenuSeparator,
-  rr as DropdownMenuShortcut,
-  tr as DropdownMenuSub,
-  ar as DropdownMenuSubContent,
-  nr as DropdownMenuSubTrigger,
-  ir as DropdownMenuTrigger,
-  Gn as EcPageShell,
-  En as EmptyState,
-  zn as ErrorState,
+  Te as Collapsible,
+  Me as CollapsibleContent,
+  Ie as CollapsibleTrigger,
+  mn as Combobox,
+  ve as Command,
+  he as CommandDialog,
+  Re as CommandEmpty,
+  Pe as CommandGroup,
+  we as CommandInput,
+  Ae as CommandItem,
+  Oe as CommandList,
+  ke as CommandSeparator,
+  Be as CommandShortcut,
+  Ne as ConfirmDialogProvider,
+  Hi as Container,
+  Bn as ContentCard,
+  fn as ContentCarousel,
+  Ln as ContentList,
+  _e as ContextMenu,
+  He as ContextMenuCheckboxItem,
+  Ee as ContextMenuContent,
+  Ve as ContextMenuGroup,
+  Ue as ContextMenuItem,
+  We as ContextMenuLabel,
+  Qe as ContextMenuPortal,
+  ze as ContextMenuRadioGroup,
+  Ke as ContextMenuRadioItem,
+  Ye as ContextMenuSeparator,
+  je as ContextMenuShortcut,
+  qe as ContextMenuSub,
+  Je as ContextMenuSubContent,
+  Xe as ContextMenuSubTrigger,
+  Ze as ContextMenuTrigger,
+  Ml as CountdownTimer,
+  Fl as CouponCard,
+  Ll as CreditCardIcon,
+  eo as DataTable,
+  oo as DataTableActionCell,
+  ro as DataTableAddRow,
+  to as DataTableAvatarCell,
+  ao as DataTableBody,
+  no as DataTableBulkActions,
+  io as DataTableCell,
+  lo as DataTableCheckboxCell,
+  po as DataTableDragHandleCell,
+  mo as DataTableEmptyState,
+  xo as DataTableHead,
+  uo as DataTableHeader,
+  Co as DataTableImageCell,
+  fo as DataTableInputCell,
+  go as DataTableLinkCell,
+  co as DataTableNumberCell,
+  So as DataTableRow,
+  so as DataTableSectionRow,
+  Do as DataTableSelectCell,
+  bo as DataTableTable,
+  Vn as DatePicker,
+  Un as DateTimePicker,
+  hl as DeliveryCalendar,
+  Mo as Dialog,
+  Io as DialogClose,
+  Fo as DialogContent,
+  vo as DialogDescription,
+  ho as DialogFooter,
+  Ro as DialogHeader,
+  Po as DialogOverlay,
+  wo as DialogPortal,
+  Ao as DialogTitle,
+  Oo as DialogTrigger,
+  Bo as Drawer,
+  Lo as DrawerClose,
+  No as DrawerContent,
+  yo as DrawerDescription,
+  Go as DrawerFooter,
+  _o as DrawerHeader,
+  Ho as DrawerOverlay,
+  Eo as DrawerPortal,
+  Vo as DrawerTitle,
+  Uo as DrawerTrigger,
+  Qo as DropdownMenu,
+  zo as DropdownMenuCheckboxItem,
+  Ko as DropdownMenuContent,
+  Yo as DropdownMenuGroup,
+  jo as DropdownMenuItem,
+  qo as DropdownMenuLabel,
+  Jo as DropdownMenuPortal,
+  Xo as DropdownMenuRadioGroup,
+  Zo as DropdownMenuRadioItem,
+  $o as DropdownMenuSeparator,
+  er as DropdownMenuShortcut,
+  or as DropdownMenuSub,
+  rr as DropdownMenuSubContent,
+  tr as DropdownMenuSubTrigger,
+  ar as DropdownMenuTrigger,
+  yn as EcPageShell,
+  Hn as EmptyState,
+  Qn as ErrorState,
   n as FOCUS_RING,
   i as FOCUS_RING_INSET,
-  p as FOCUS_RING_ONLY,
-  l as FOCUS_RING_WITHIN,
+  l as FOCUS_RING_ONLY,
+  p as FOCUS_RING_WITHIN,
   m as FORCED_COLORS_COMMAND_ITEM,
   x as FORCED_COLORS_FOCUS,
   u as FORCED_COLORS_FOCUS_INSET,
   C as FORCED_COLORS_FOCUS_WITHIN,
   f as FORCED_COLORS_MENU_ITEM,
-  lr as Field,
-  mr as FieldDescription,
-  xr as FieldError,
-  ur as FieldGroup,
-  Cr as FieldLabel,
-  fr as FieldLegend,
-  dr as FieldSeparator,
-  gr as FieldSet,
-  sr as FileInput,
-  jn as FilterBar,
-  Jn as Footer,
-  Mr as Form,
-  Ir as FormControl,
-  Fr as FormDescription,
-  vr as FormField,
-  hr as FormItem,
-  Rr as FormLabel,
-  Pr as FormMessage,
-  ei as FunnelShell,
-  ri as Header,
-  Or as HoverCard,
-  kr as HoverCardContent,
-  Br as HoverCardTrigger,
-  Nr as IconBadge,
-  ai as ImageCarousel,
-  ii as ImageGallery,
+  ir as Field,
+  lr as FieldDescription,
+  pr as FieldError,
+  mr as FieldGroup,
+  xr as FieldLabel,
+  ur as FieldLegend,
+  Cr as FieldSeparator,
+  fr as FieldSet,
+  cr as FileInput,
+  Yn as FilterBar,
+  qn as Footer,
+  br as Form,
+  Tr as FormControl,
+  Mr as FormDescription,
+  Ir as FormField,
+  Fr as FormItem,
+  vr as FormLabel,
+  hr as FormMessage,
+  $n as FunnelShell,
+  oi as Header,
+  wr as HoverCard,
+  Ar as HoverCardContent,
+  Or as HoverCardTrigger,
+  Br as IconBadge,
+  ti as ImageCarousel,
+  ni as ImageGallery,
   li as ImageInput,
-  ui as ImageUploader,
-  _r as Input,
-  fi as KebabMenu,
-  Er as Label,
-  gi as ListItem,
-  Si as MenuDrawer,
-  Ur as Menubar,
-  Wr as MenubarCheckboxItem,
-  Qr as MenubarContent,
-  zr as MenubarGroup,
-  Kr as MenubarItem,
-  Yr as MenubarLabel,
-  jr as MenubarMenu,
-  qr as MenubarPortal,
-  Jr as MenubarRadioGroup,
-  Xr as MenubarRadioItem,
-  Zr as MenubarSeparator,
-  $r as MenubarShortcut,
-  et as MenubarSub,
-  ot as MenubarSubContent,
-  rt as MenubarSubTrigger,
-  tt as MenubarTrigger,
-  gp as MissingComponent,
-  cn as MultiSelect,
-  fl as MypageShell,
-  nt as NavigationMenu,
-  it as NavigationMenuContent,
-  pt as NavigationMenuIndicator,
-  lt as NavigationMenuItem,
-  mt as NavigationMenuLink,
-  xt as NavigationMenuList,
-  ut as NavigationMenuTrigger,
-  Ct as NavigationMenuViewport,
-  Kn as NotFoundIllustration,
-  Ti as NotificationBadge,
-  Fi as NotificationList,
-  Bi as NumberInput,
-  Xp as OptionImageUpload,
-  Zp as OptionQuantity,
-  $p as OptionSelect,
-  el as OptionText,
-  Op as OrderSection,
-  Bp as OrderSummary,
-  gt as Pagination,
-  ct as PaginationContent,
-  St as PaginationEllipsis,
-  st as PaginationItem,
-  Dt as PaginationLink,
-  bt as PaginationNext,
-  Tt as PaginationPrevious,
-  yp as PaymentMethodDisplay,
-  vt as Popover,
-  ht as PopoverAnchor,
-  Rt as PopoverContent,
-  Pt as PopoverTrigger,
-  hi as PriceDisplay,
-  Wp as ProductCTA,
-  Hp as ProductCard,
-  Vp as ProductCarousel,
-  zp as ProductDetailBar,
-  Yp as ProductDetailSidebar,
-  qp as ProductListItem,
-  ol as ProductOption,
-  At as Progress,
-  wi as ProgressSteps,
-  kn as Prose,
-  Li as QuantitySelector,
-  Ut as RadioGroup,
-  Wt as RadioGroupItem,
-  tl as RatingStars,
-  kt as ResponsiveDialog,
-  Bt as ResponsiveDialogClose,
-  Lt as ResponsiveDialogContent,
-  Nt as ResponsiveDialogDescription,
-  yt as ResponsiveDialogFooter,
-  Gt as ResponsiveDialogHeader,
-  _t as ResponsiveDialogTitle,
-  Ht as ResponsiveDialogTrigger,
-  il as ReviewCard,
-  ll as ReviewForm,
-  xl as ReviewItem,
-  ul as ReviewSummary,
-  zt as ScrollArea,
-  Kt as ScrollBar,
-  Wi as ScrollRow,
-  yi as SearchBar,
-  _i as SearchPanel,
-  zi as Section,
-  qi as SectionHeader,
-  Xi as SectionNav,
-  jt as Select,
-  qt as SelectContent,
-  Jt as SelectGroup,
-  Xt as SelectItem,
-  Zt as SelectLabel,
-  $t as SelectScrollDownButton,
-  ea as SelectScrollUpButton,
-  oa as SelectSeparator,
-  ra as SelectTrigger,
-  ta as SelectValue,
-  na as Separator,
-  $i as ShareButtons,
-  pa as Sheet,
-  la as SheetClose,
-  ma as SheetContent,
-  xa as SheetDescription,
-  ua as SheetFooter,
-  Ca as SheetHeader,
-  fa as SheetTitle,
-  da as SheetTrigger,
-  gl as ShopCard,
-  op as SideNav,
-  ca as Skeleton,
-  sa as SkipLink,
-  ba as Slider,
-  Fa as SocialIcon,
-  tp as SocialLoginButton,
-  al as SparkleIcon,
-  Ma as Spinner,
-  _n as StandardPageShell,
-  Sl as StatCard,
-  np as StatusCountTabs,
-  sn as StickyActionBar,
-  Di as SubNav,
-  ha as Switch,
-  Pa as Table,
-  wa as TableBody,
-  Aa as TableCaption,
-  Oa as TableCell,
-  ka as TableFooter,
-  Ba as TableHead,
-  La as TableHeader,
-  Na as TableRow,
-  Ga as Tabs,
-  _a as TabsContent,
-  Ha as TabsList,
-  Ea as TabsTrigger,
-  pp as Tag,
-  Ua as Textarea,
-  Oi as Timeline,
-  Qa as Toaster,
-  Ka as Toggle,
-  qa as ToggleGroup,
-  Ja as ToggleGroupItem,
-  Za as Tooltip,
-  $a as TooltipContent,
-  en as TooltipProvider,
-  on as TooltipTrigger,
-  xp as WorkspaceLayout,
-  up as WorkspaceShell,
-  z as badgeVariants,
-  re as buttonVariants,
-  fe as cardVariants,
-  Dl as chipVariants,
+  xi as ImageUploader,
+  yr as Input,
+  Ci as KebabMenu,
+  _r as Label,
+  di as ListItem,
+  ci as MenuDrawer,
+  Er as Menubar,
+  Vr as MenubarCheckboxItem,
+  Ur as MenubarContent,
+  Wr as MenubarGroup,
+  Qr as MenubarItem,
+  zr as MenubarLabel,
+  Kr as MenubarMenu,
+  Yr as MenubarPortal,
+  jr as MenubarRadioGroup,
+  qr as MenubarRadioItem,
+  Jr as MenubarSeparator,
+  Xr as MenubarShortcut,
+  Zr as MenubarSub,
+  $r as MenubarSubContent,
+  et as MenubarSubTrigger,
+  ot as MenubarTrigger,
+  dl as MissingComponent,
+  gn as MultiSelect,
+  Cp as MypageShell,
+  tt as NavigationMenu,
+  at as NavigationMenuContent,
+  nt as NavigationMenuIndicator,
+  it as NavigationMenuItem,
+  lt as NavigationMenuLink,
+  pt as NavigationMenuList,
+  mt as NavigationMenuTrigger,
+  xt as NavigationMenuViewport,
+  zn as NotFoundIllustration,
+  bi as NotificationBadge,
+  Ii as NotificationList,
+  ki as NumberInput,
+  Jl as OptionImageUpload,
+  Xl as OptionQuantity,
+  Zl as OptionSelect,
+  $l as OptionText,
+  Al as OrderSection,
+  kl as OrderSummary,
+  ft as Pagination,
+  dt as PaginationContent,
+  gt as PaginationEllipsis,
+  ct as PaginationItem,
+  St as PaginationLink,
+  st as PaginationNext,
+  Dt as PaginationPrevious,
+  Nl as PaymentMethodDisplay,
+  It as Popover,
+  Ft as PopoverAnchor,
+  vt as PopoverContent,
+  ht as PopoverTrigger,
+  vi as PriceDisplay,
+  Ul as ProductCTA,
+  _l as ProductCard,
+  El as ProductCarousel,
+  Ql as ProductDetailBar,
+  Kl as ProductDetailSidebar,
+  jl as ProductListItem,
+  ep as ProductOption,
+  Pt as Progress,
+  Pi as ProgressSteps,
+  On as Prose,
+  Bi as QuantitySelector,
+  Et as RadioGroup,
+  Vt as RadioGroupItem,
+  rp as RatingStars,
+  At as ResponsiveDialog,
+  Ot as ResponsiveDialogClose,
+  kt as ResponsiveDialogContent,
+  Bt as ResponsiveDialogDescription,
+  Lt as ResponsiveDialogFooter,
+  Nt as ResponsiveDialogHeader,
+  yt as ResponsiveDialogTitle,
+  Gt as ResponsiveDialogTrigger,
+  np as ReviewCard,
+  lp as ReviewForm,
+  mp as ReviewItem,
+  xp as ReviewSummary,
+  Wt as ScrollArea,
+  Qt as ScrollBar,
+  Ui as ScrollRow,
+  Ni as SearchBar,
+  Gi as SearchPanel,
+  Qi as Section,
+  ji as SectionHeader,
+  Ji as SectionNav,
+  Kt as Select,
+  Yt as SelectContent,
+  jt as SelectGroup,
+  qt as SelectItem,
+  Jt as SelectLabel,
+  Xt as SelectScrollDownButton,
+  Zt as SelectScrollUpButton,
+  $t as SelectSeparator,
+  ea as SelectTrigger,
+  oa as SelectValue,
+  ta as Separator,
+  Zi as ShareButtons,
+  na as Sheet,
+  ia as SheetClose,
+  la as SheetContent,
+  pa as SheetDescription,
+  ma as SheetFooter,
+  xa as SheetHeader,
+  ua as SheetTitle,
+  Ca as SheetTrigger,
+  dp as ShopCard,
+  el as SideNav,
+  da as Skeleton,
+  ca as SkipLink,
+  sa as Slider,
+  Ma as SocialIcon,
+  rl as SocialLoginButton,
+  tp as SparkleIcon,
+  ba as Spinner,
+  Gn as StandardPageShell,
+  cp as StatCard,
+  al as StatusCountTabs,
+  Sn as StickyActionBar,
+  si as SubNav,
+  Fa as Switch,
+  ha as Table,
+  Ra as TableBody,
+  Pa as TableCaption,
+  wa as TableCell,
+  Aa as TableFooter,
+  Oa as TableHead,
+  ka as TableHeader,
+  Ba as TableRow,
+  Na as Tabs,
+  ya as TabsContent,
+  Ga as TabsList,
+  _a as TabsTrigger,
+  il as Tag,
+  Ea as Textarea,
+  Ai as Timeline,
+  Ua as Toaster,
+  za as Toggle,
+  ja as ToggleGroup,
+  qa as ToggleGroupItem,
+  Xa as Tooltip,
+  Za as TooltipContent,
+  $a as TooltipProvider,
+  en as TooltipTrigger,
+  ml as WorkspaceLayout,
+  xl as WorkspaceShell,
+  W as badgeVariants,
+  ee as buttonVariants,
+  ue as cardVariants,
+  sp as chipVariants,
   t as cn,
-  Vi as containerVariants,
-  cr as fieldVariants,
-  Dr as formatFileNames,
-  It as getPaginationRange,
-  yr as iconBadgeVariants,
-  mi as imageInputPreviewVariants,
-  wp as mypageMenuGroups,
-  ft as navigationMenuTriggerStyle,
-  Mi as notificationBadgeVariants,
-  Ri as priceDisplayVariants,
-  Ki as sectionScrimVariants,
-  Yi as sectionVariants,
-  lp as tagVariants,
-  g as toast,
-  Ya as toggleVariants,
-  _e as useConfirm,
-  wr as useFormField,
-  Et as useIsMobile,
-  br as validateFileSize
+  Ei as containerVariants,
+  dr as fieldVariants,
+  Sr as formatFileNames,
+  Tt as getPaginationRange,
+  Lr as iconBadgeVariants,
+  pi as imageInputPreviewVariants,
+  Pl as mypageMenuGroups,
+  ut as navigationMenuTriggerStyle,
+  Ti as notificationBadgeVariants,
+  hi as priceDisplayVariants,
+  zi as sectionScrimVariants,
+  Ki as sectionVariants,
+  ll as tagVariants,
+  Wa as toast,
+  Ka as toggleVariants,
+  ye as useConfirm,
+  Rr as useFormField,
+  _t as useIsMobile,
+  sr as validateFileSize
 };
 
 
@@ -712,7 +711,7 @@ export {
 //  *
 //  * ## 配下 Card のサーフェス
 //  *
-//  * 地が Surface-Secondary なので、シェルが配下 `Card` の既定サーフェスを白にする文脈
+//  * 地が Surface-Neutral-Secondary なので、シェルが配下 `Card` の既定サーフェスを白にする文脈
 //  * （`--card-surface`）を宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
 //  *
 //  * 参照元:
@@ -934,21 +933,21 @@ export {
 // 
 //   const defaultHeaderActions = (
 //     <>
-//       <button className="relative flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)]" aria-label="通知">
+//       <button className="relative flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Neutral-Secondary)]" aria-label="通知">
 //         <Notification size={20} className="text-[var(--Text-High-Emphasis)]" />
 //         <span className="absolute top-1.5 right-1.5 size-2 rounded-full bg-[var(--Surface-Caution)]" />
 //       </button>
-//       <button className="flex items-center justify-center size-10 shrink-0 rounded-full bg-[var(--Surface-Tertiary)]" aria-label="プロフィール">
+//       <button className="flex items-center justify-center size-10 shrink-0 rounded-full bg-[var(--Surface-Neutral-Tertiary)]" aria-label="プロフィール">
 //         <User size={20} className="text-[var(--Text-Medium-Emphasis)]" />
 //       </button>
 //     </>
 //   )
 // 
 //   return (
-//     // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
+//     // 地が Surface-Neutral-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
 //     // （#150 の Section と同じ仕組み。dark は半透明白が重なって浮くため据え置き）。
 //     <div
-//       className="@container flex min-h-screen bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]"
+//       className="@container flex min-h-screen bg-[var(--Surface-Neutral-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]"
 //       data-slot="admin-shell"
 //     >
 //       {/* a11y: キーボードでサイドナビ／ヘッダーを飛ばして本文へ移動（sr-only・視覚無影響）。skipLink={false} で無効化 */}
@@ -1128,7 +1127,7 @@ export {
 //           <p className="typo-label-md text-[var(--Text-High-Emphasis)]">
 //             {name}
 //           </p>
-//           <span className="typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full">
+//           <span className="typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Neutral-Secondary)] px-2 py-0.5 rounded-full">
 //             {relation}
 //           </span>
 //         </div>
@@ -1307,7 +1306,7 @@ export {
 //         "px-3 py-1 rounded typo-label-sm transition-colors",
 //         active
 //           ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"
-//           : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+//           : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]"
 //       )}
 //     >
 //       {children}
@@ -1571,7 +1570,7 @@ export {
 //     >
 //       {/* Image area */}
 //       {imageUrl && (
-//         <div className="relative aspect-[5/2] w-full overflow-hidden bg-[var(--Surface-Secondary)]">
+//         <div className="relative aspect-[5/2] w-full overflow-hidden bg-[var(--Surface-Neutral-Secondary)]">
 //           <img
 //             src={imageUrl}
 //             alt={imageAlt ?? title}
@@ -1716,14 +1715,14 @@ export {
 //   }
 //   if (status === "acquired") {
 //     return (
-//       <div className={cn(baseClass, "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5")}>
+//       <div className={cn(baseClass, "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Medium-Emphasis)] animate-in fade-in duration-[var(--Motion-Duration-Slow)] gap-1.5")}>
 //         <Check className="size-4" />
 //         獲得済み
 //       </div>
 //     )
 //   }
 //   return (
-//     <div className={cn(baseClass, "bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)]")}>
+//     <div className={cn(baseClass, "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Low-Emphasis)]")}>
 //       獲得不可
 //     </div>
 //   )
@@ -1894,7 +1893,7 @@ export {
 //                 onClick={() => clickable && onDaySelect?.(day.date)}
 //                 className={cn(
 //                   "flex flex-col items-center gap-0.5 rounded-md py-1.5 typo-body-md transition-colors",
-//                   clickable && "cursor-pointer hover:bg-[var(--Surface-Secondary)]",
+//                   clickable && "cursor-pointer hover:bg-[var(--Surface-Neutral-Secondary)]",
 //                   selected && "relative z-10 bg-[var(--Brand-Cake-Orange)]/10 ring-1 ring-inset ring-[var(--Brand-Cake-Orange)]",
 //                   // forced-colors（Windows ハイコントラスト）では薄い地が Canvas に、枠（ring = box-shadow）が
 //                   // 消えて選んだ日が見えなかった。選んだ日だけ OS の選択色で示し、日付と ○△× も
@@ -2150,7 +2149,7 @@ export {
 //   )
 // 
 //   return (
-//     <div className="@container min-h-screen bg-[var(--Surface-Secondary)]">
+//     <div className="@container min-h-screen bg-[var(--Surface-Neutral-Secondary)]">
 //       {/* a11y: キーボードでヘッダー／サイドを飛ばして本文へ移動（sr-only・視覚無影響）。skipLink={false} で無効化 */}
 //       {skipLink !== false && <SkipLink href={`#${mainId}`} />}
 // 
@@ -2272,7 +2271,7 @@ export {
 //         status === "error" || status === "empty"
 //           ? "border-[var(--Border-Caution)]"
 //           : "border-[var(--Border-Medium-Emphasis)]",
-//         onEdit && "cursor-pointer hover:bg-[var(--Surface-Secondary)] hover:border-[var(--Border-High-Emphasis)]",
+//         onEdit && "cursor-pointer hover:bg-[var(--Surface-Neutral-Secondary)] hover:border-[var(--Border-High-Emphasis)]",
 //         className
 //       )}
 //       {...props}
@@ -2450,7 +2449,9 @@ export {
 //       data-slot="order-summary"
 //       className={cn(
 //         // fixed 表示はスクロール内容の上に重なるため地は Surface-Elevated（disableFixed 側はページ内フローなので Surface-Primary のまま）
-//         "fixed inset-x-0 bottom-[52px] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
+//         // bottom: BottomTabBar（高さ 52px + 下端の safe-area）の真上に重ねる。
+//         // safe-area の分を足さないと、ホームインジケータのある iPhone（viewport-fit=cover）でタブバーに重なる。safe-area が 0 の環境では 52px のまま
+//         "fixed inset-x-0 bottom-[calc(52px+env(safe-area-inset-bottom))] z-[var(--Z-Sticky)] mx-auto max-w-[430px] border-t border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
 //         className
 //       )}
 //       {...props}
@@ -2625,6 +2626,7 @@ export {
 // import * as React from "react"
 // 
 // import { cn } from "@/lib/utils"
+// import { FOCUS_RING_ONLY } from "@/lib/focus-ring"
 // import type { LinkComponent } from "@/lib/link-component"
 // import { buttonVariants } from "@/components/foundations/button"
 // import { PriceDisplay } from "@/components/primitives/price-display"
@@ -2792,7 +2794,8 @@ export {
 //     <button
 //       type="button"
 //       className={cn(
-//         "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)]/80 backdrop-blur-sm transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)]",
+//         "relative z-10 flex items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)]/80 backdrop-blur-sm transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] focus-visible:outline-none",
+//         FOCUS_RING_ONLY,
 //         size === "sm" ? "size-[30px]" : "size-9"
 //       )}
 //       onClick={(e) => {
@@ -3781,7 +3784,7 @@ export {
 //     <div
 //       data-slot="product-detail-sidebar"
 //       className={cn(
-//         "flex w-[400px] max-w-full flex-col rounded-2xl border-2 border-[var(--Surface-Tertiary)] bg-[var(--Surface-Primary)]",
+//         "flex w-[400px] max-w-full flex-col rounded-2xl border-2 border-[var(--Surface-Neutral-Tertiary)] bg-[var(--Surface-Primary)]",
 //         className
 //       )}
 //       {...props}
@@ -4099,6 +4102,7 @@ export {
 // src/components/ec/product-list-item.tsx
 // import * as React from "react"
 // import { cn } from "@/lib/utils"
+// import { FOCUS_RING_INSET } from "@/lib/focus-ring"
 // import type { LinkComponent } from "@/lib/link-component"
 // import { Button } from "@/components/foundations/button"
 // import { Tag } from "@/components/primitives/tag"
@@ -4320,7 +4324,7 @@ export {
 //         {!leftSlot && imageUrl && isCart && (
 //           <div
 //             className={cn(
-//               "relative shrink-0 overflow-hidden rounded-lg bg-[var(--Surface-Secondary)]",
+//               "relative shrink-0 overflow-hidden rounded-lg bg-[var(--Surface-Neutral-Secondary)]",
 //               imgSize
 //             )}
 //           >
@@ -4541,7 +4545,8 @@ export {
 //         ) : showBookmark && !isReview && (
 //           <button
 //             type="button"
-//             className="flex size-9 shrink-0 items-center justify-center self-start rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
+//             // 行は overflow-hidden（lp は余白 0）なので、リングが切り取られない内側に描く
+//             className={`flex size-9 shrink-0 items-center justify-center self-start rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] transition-colors hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] focus-visible:outline-none ${FOCUS_RING_INSET}`}
 //             aria-label="ブックマーク"
 //           >
 //             <svg
@@ -4783,7 +4788,7 @@ export {
 //         onChange={(e) => onChange?.(e.target.value)}
 //         aria-label={placeholder}
 //         className={cn(
-//           "w-full appearance-none rounded-md border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 pr-8 typo-body-md text-[var(--Text-High-Emphasis)] focus:border-[var(--Focus-High-Emphasis)] focus:outline-none focus:ring-[3px] focus:ring-[var(--Focus-High-Emphasis)]/50",
+//           "w-full appearance-none rounded-md border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] px-3 py-2 pr-8 typo-body-md text-[var(--Text-High-Emphasis)] focus:border-[var(--Focus-High-Emphasis)] focus:outline-none focus:ring-[3px] focus:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--Focus-High-Emphasis)_50%,transparent))]",
 //           FORCED_COLORS_FOCUS
 //         )}
 //       >
@@ -4846,7 +4851,7 @@ export {
 //       type="button"
 //       onClick={onUpload}
 //       aria-label="画像をアップロード"
-//       className={`flex h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Brand-Cake-Orange)] hover:text-[var(--Brand-Cake-Orange)] ${FOCUS_RING_ONLY} focus-visible:outline-none`}
+//       className={`flex h-24 w-full flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Low-Emphasis)] transition-colors hover:border-[var(--Brand-Cake-Orange)] hover:text-[var(--Brand-Cake-Orange)] ${FOCUS_RING_ONLY} focus-visible:outline-none`}
 //       {...rest}
 //     >
 //       <ExportSquare size={24} />
@@ -5488,7 +5493,7 @@ export {
 //               <span className="w-3 shrink-0 text-right typo-label-sm tabular-nums text-[var(--Text-Medium-Emphasis)]">
 //                 {item.stars}
 //               </span>
-//               <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-[var(--Surface-Secondary)]">
+//               <div className="h-2.5 flex-1 overflow-hidden rounded-full bg-[var(--Surface-Neutral-Secondary)]">
 //                 <div
 //                   className="h-full rounded-full bg-[var(--Brand-Cake-Orange)] transition-all duration-[var(--Motion-Duration-Base)]"
 //                   style={{
@@ -5725,7 +5730,7 @@ export {
 //         {...compactWrapperProps}
 //         data-slot="shop-card"
 //         className={cn(
-//           "flex items-center gap-3 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Secondary)] max-w-[400px]",
+//           "flex items-center gap-3 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)] max-w-[400px]",
 //           className
 //         )}
 //         {...(props as React.HTMLAttributes<HTMLElement>)}
@@ -5757,7 +5762,7 @@ export {
 //     <div
 //       data-slot="shop-card"
 //       className={cn(
-//         "relative min-w-[200px] grid grid-rows-[auto_1fr] gap-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Secondary)]",
+//         "relative min-w-[200px] grid grid-rows-[auto_1fr] gap-2 rounded-lg border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-3 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         className
 //       )}
 //       {...props}
@@ -6030,7 +6035,7 @@ export {
 //       <AccordionPrimitive.Trigger
 //         data-slot="accordion-trigger"
 //         className={cn(
-//           "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Tertiary)]/60 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+//           "flex w-full flex-1 cursor-pointer items-center justify-between gap-4 py-4 text-left typo-label-md text-[var(--Text-High-Emphasis)] transition-all outline-none hover:bg-[var(--Surface-Neutral-Tertiary)]/60 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
 //           FORCED_COLORS_FOCUS,
 //           className
 //         )}
@@ -6063,16 +6068,39 @@ export {
 // export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
 // 
 // src/components/foundations/alert-dialog.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
 // 
 // import { cn } from "@/lib/utils"
+// import {
+//   OverlayFocusRootContext,
+//   useOverlayFocusRoot,
+//   useRestoreFocusToOpener,
+// } from "@/lib/focus-restore"
+// import { composeEscapeKeyDownWithImeGuard } from "@/lib/ime"
 // import { Button } from "@/components/foundations/button"
 // 
 // function AlertDialog({
+//   open,
+//   defaultOpen,
+//   onOpenChange,
 //   ...props
 // }: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-//   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+//   // 閉じたときに opener へフォーカスを戻すための記録（AlertDialogContent が使う）
+//   const { root, handleOpenChange } = useOverlayFocusRoot(open, defaultOpen, onOpenChange)
+//   return (
+//     <OverlayFocusRootContext.Provider value={root}>
+//       <AlertDialogPrimitive.Root
+//         data-slot="alert-dialog"
+//         open={open}
+//         defaultOpen={defaultOpen}
+//         onOpenChange={handleOpenChange}
+//         {...props}
+//       />
+//     </OverlayFocusRootContext.Provider>
+//   )
 // }
 // 
 // function AlertDialogTrigger({
@@ -6110,16 +6138,25 @@ export {
 // function AlertDialogContent({
 //   className,
 //   size = "default",
+//   onOpenAutoFocus,
+//   onCloseAutoFocus,
+//   onEscapeKeyDown,
 //   ...props
 // }: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
 //   size?: "default" | "sm"
 // }) {
+//   // 開いたときは Radix 既定（AlertDialogCancel）へ入れたまま、閉じたときは Trigger 無しで
+//   // 開いても、その回に開いた要素へ戻す
+//   const autoFocusHandlers = useRestoreFocusToOpener({ onOpenAutoFocus, onCloseAutoFocus })
 //   return (
 //     <AlertDialogPortal>
 //       <AlertDialogOverlay />
 //       <AlertDialogPrimitive.Content
 //         data-slot="alert-dialog-content"
 //         data-size={size}
+//         {...autoFocusHandlers}
+//         // 日本語入力の変換中の Esc（変換の取り消し）では閉じない
+//         onEscapeKeyDown={composeEscapeKeyDownWithImeGuard(onEscapeKeyDown)}
 //         className={cn(
 //           // 画面端との余白は上下左右 40px（calc(100%-5rem)）。
 //           // 幅上限は端末幅に応じて: SP は端末幅-80px に追従 / sm 以上は
@@ -6303,11 +6340,11 @@ export {
 //   {
 //     variants: {
 //       variant: {
-//         /** success — green border, green title, white bg */
+//         /** success — mint border, mint title, white bg（dark は従来の緑の枠） */
 //         success: [
 //           "flex flex-col items-start overflow-clip rounded-lg",
 //           "bg-[var(--Surface-Primary)]",
-//           "shadow-[0_0_0_5px_rgba(31,204,132,0.2)]",
+//           "shadow-[0_0_0_5px_rgba(62,152,122,0.2)] dark:shadow-[0_0_0_5px_rgba(31,204,132,0.2)]",
 //         ].join(" "),
 //         /** info — gray border, dark title, white bg */
 //         info: [
@@ -6359,7 +6396,7 @@ export {
 //   {
 //     variants: {
 //       variant: {
-//         success: "border-[var(--Focus-High-Emphasis)]",
+//         success: "border-[var(--Object-Success)] dark:border-[var(--Focus-High-Emphasis)]",
 //         info: "border-[var(--Border-Medium-Emphasis)]",
 //         error: "border-[var(--Border-Caution)]",
 //         warning: "border-[var(--Primitive-Wood-800)]",
@@ -6412,9 +6449,43 @@ export {
 //   "inline-warning": { Icon: Warning2, color: "text-[var(--Text-Warning)]" },
 // } as const
 // 
+// /**
+//  * 読み上げの強さ（ライブリージョンの種類）。
+//  * - `"alert"`: 即時に割り込んで読み上げる。エラー・警告向け
+//  * - `"status"`: 読み上げ中の内容を遮らず、区切りで読み上げる。補足・成功向け
+//  * - `"off"`: 読み上げ領域にしない（role を付けない）。画面表示時から出ている静的な補足向け
+//  */
+// type AlertLive = "alert" | "status" | "off"
+// 
+// /** variant ごとの既定の読み上げ。error / warning 系は assertive、info / success / 補足系は polite。 */
+// const defaultAlertLive = (variant: AlertVariant): Exclude<AlertLive, "off"> =>
+//   variant === "error" ||
+//   variant === "warning" ||
+//   variant === "inline-caution" ||
+//   variant === "inline-warning"
+//     ? "alert"
+//     : "status"
+// 
+// /** `role`（明示指定）> `live` > variant の既定、の順で role 属性の値を決める。 */
+// const resolveAlertRole = (
+//   variant: AlertVariant,
+//   live: AlertLive | undefined,
+//   role: React.AriaRole | undefined,
+// ): React.AriaRole | undefined => {
+//   if (role !== undefined) return role
+//   const effective = live ?? defaultAlertLive(variant)
+//   return effective === "off" ? undefined : effective
+// }
+// 
 // 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 で有効。
 //      */
@@ -6435,8 +6506,11 @@ export {
 //   description,
 //   icon,
 //   action,
+//   live,
+//   role,
 //   ...props
 // }: AlertProps) {
+//   const resolvedRole = resolveAlertRole(variant, live, role)
 //   const bordered = isBorderedVariant(variant)
 //   const inline = isInlineVariant(variant)
 //   const usePropBased = (bordered || inline) && !children && (title || description)
@@ -6453,7 +6527,7 @@ export {
 //         <div
 //           data-slot="alert"
 //           data-variant={variant}
-//           role="alert"
+//           role={resolvedRole}
 //           className={cn(alertVariants({ variant }), className)}
 //           {...props}
 //         >
@@ -6487,7 +6561,7 @@ export {
 //         <div
 //           data-slot="alert"
 //           data-variant={variant}
-//           role="alert"
+//           role={resolvedRole}
 //           className={cn(alertVariants({ variant }), className)}
 //           {...props}
 //         >
@@ -6516,7 +6590,7 @@ export {
 //       <div
 //         data-slot="alert"
 //         data-variant={variant}
-//         role="alert"
+//         role={resolvedRole}
 //         className={cn(alertVariants({ variant }), className)}
 //         {...props}
 //       >
@@ -6532,7 +6606,7 @@ export {
 // 
 // /* --- Title variant styles --- */
 // const alertTitleVariants: Record<string, string> = {
-//   success: "text-[var(--Primitive-Forest-800)]",
+//   success: "text-[var(--Text-Success)]",
 //   info: "text-[var(--Text-High-Emphasis)]",
 //   error: "text-[var(--Text-Caution)]",
 //   warning: "text-[var(--Text-Warning)]",
@@ -6742,13 +6816,13 @@ export {
 //         destructive:
 //           "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] focus-visible:ring-destructive/20 [a&]:hover:bg-destructive/90",
 //         success:
-//           "bg-[var(--Primitive-Forest-600)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Primitive-Forest-700)]",
+//           "bg-[var(--Surface-Success)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Primitive-Teal-900)] dark:[a&]:hover:bg-[var(--Primitive-Forest-700)]",
 // 
 //         // ── サブトル（薄い背景 + 色文字）— ステータス表示用 ──
 //         "info-subtle":
 //           "bg-[var(--Primitive-Sea-100)] text-[var(--Primitive-Sea-700)]",
 //         "success-subtle":
-//           "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+//           "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
 //         "accent-subtle":
 //           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //         "caution-subtle":
@@ -6756,15 +6830,15 @@ export {
 //         "warning-subtle":
 //           "bg-[var(--Surface-Warning)] text-[var(--Text-Warning)] border-[var(--Primitive-Wood-200)]",
 //         "muted-subtle":
-//           "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
+//           "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
 // 
 //         // ── 構造系 ──
 //         secondary:
-//           "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Tertiary)]",
+//           "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Neutral-Tertiary)]",
 //         outline:
-//           "border-[var(--Border-Medium-Emphasis)] text-[var(--Text-High-Emphasis)] [a&]:hover:bg-[var(--Surface-Secondary)]",
+//           "border-[var(--Border-Medium-Emphasis)] text-[var(--Text-High-Emphasis)] [a&]:hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         ghost:
-//           "text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Secondary)]",
+//           "text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         link: "text-[var(--Brand-Cake-Orange)] underline-offset-4 [a&]:hover:underline",
 //       },
 //     },
@@ -6931,13 +7005,13 @@ export {
 //     variants: {
 //       variant: {
 //         default:
-//           "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+//           "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] disabled:bg-[var(--Surface-Neutral-Tertiary)] disabled:text-[var(--Text-Disable)]",
 //         secondary:
-//           "border border-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] hover:border-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+//           "border border-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] hover:border-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:bg-[var(--Surface-Neutral-Tertiary)] disabled:text-[var(--Text-Disable)]",
 //         tertiary:
-//           "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] active:bg-[var(--Active-Tertiary-Button)] disabled:text-[var(--Text-Disable)]",
+//           "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] active:bg-[var(--Active-Tertiary-Button)] disabled:text-[var(--Text-Disable)]",
 //         destructive:
-//           "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-Sun-900)] active:bg-[var(--Primitive-Sun-900)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+//           "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-Sun-900)] active:bg-[var(--Primitive-Sun-900)] disabled:bg-[var(--Surface-Neutral-Tertiary)] disabled:text-[var(--Text-Disable)]",
 //         ghost:
 //           "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Text-Button)] active:bg-[var(--Active-Text-Button)] disabled:text-[var(--Text-Disable)]",
 //         /**
@@ -6977,7 +7051,7 @@ export {
 //           // 下地 Surface-Overlay-Light は「メディア上の可読性のため light/dark で切替えない」
 //           // 設計（常に白80%）。文字色にセマンティック（dark で白に反転する Text-High-Emphasis）を
 //           // 使うとダークモードで白地×白文字になり消えるため、文字も非反転の Primitive 固定にする
-//           "border border-[var(--Border-Hairline)] bg-[var(--Surface-Overlay-Light)] text-[var(--Primitive-Gray-900)] shadow-md backdrop-blur-sm hover:bg-[var(--Primitive-White-alpha-900)] active:bg-[var(--Primitive-White-alpha-1000)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)] disabled:shadow-none",
+//           "border border-[var(--Border-Hairline)] bg-[var(--Surface-Overlay-Light)] text-[var(--Primitive-Gray-900)] shadow-md backdrop-blur-sm hover:bg-[var(--Primitive-White-alpha-900)] active:bg-[var(--Primitive-White-alpha-1000)] disabled:bg-[var(--Surface-Neutral-Tertiary)] disabled:text-[var(--Text-Disable)] disabled:shadow-none",
 //       },
 //       size: {
 //         /**
@@ -7520,12 +7594,12 @@ export {
 //  * ## サーフェス文脈の伝播（#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）
@@ -7754,13 +7828,13 @@ export {
 //         // lint-scratch-allow: p-[15px] は border-2 を含めた見た目余白を Figma に合わせる補正値
 //         "group flex cursor-pointer gap-2 rounded-lg border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] p-[15px] text-left outline-none transition-colors",
 //         expandedContent ? "flex-col items-stretch" : "items-center",
-//         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
+//         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Surface-Primary)]",
 //         // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング）。以前はオレンジの
 //         // ring-2 で選択状態と紛らわしかったため統一した。
 //         FOCUS_RING,
 //         "aria-invalid:border-[var(--Border-Caution)]",
-//         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)]",
+//         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         className,
 //       )}
 //       {...props}
@@ -7774,7 +7848,7 @@ export {
 //             // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
 //             "flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] transition-colors",
 //             "group-data-[state=checked]:border-transparent group-data-[state=checked]:bg-transparent",
-//             "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Secondary)]",
+//             "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Neutral-Secondary)]",
 //           )}
 //         >
 //           <CheckboxPrimitive.Indicator
@@ -8169,8 +8243,8 @@ export {
 //       data-disabled={props.disabled || undefined}
 //       className={cn(
 //         "flex items-center gap-3 rounded-md px-3 py-2 transition-colors cursor-pointer",
-//         "hover:bg-[var(--Surface-Tertiary)]",
-//         "has-[:focus-visible]:bg-[var(--Surface-Tertiary)]",
+//         "hover:bg-[var(--Surface-Neutral-Tertiary)]",
+//         "has-[:focus-visible]:bg-[var(--Surface-Neutral-Tertiary)]",
 //         props.disabled && "cursor-not-allowed opacity-60 hover:bg-transparent has-[:focus-visible]:bg-transparent",
 //         containerClassName,
 //       )}
@@ -8223,15 +8297,15 @@ export {
 //     variants: {
 //       variant: {
 //         filled: [
-//           "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]",
-//           "hover:bg-[var(--Surface-Tertiary)]",
-//           "disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)]",
+//           "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-High-Emphasis)]",
+//           "hover:bg-[var(--Surface-Neutral-Tertiary)]",
+//           "disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         ].join(" "),
 //         /** accent — 薄いブランド色地 + ブランド色文字。Chip の selected は使わなくなった（明示指定の互換のために残す） */
 //         accent: [
 //           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //           "hover:bg-[var(--Surface-Accent-Primary)] hover:text-[var(--Text-on-Inverse)]",
-//           "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)] disabled:hover:text-[var(--Text-Disable)]",
+//           "disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Neutral-Secondary)] disabled:hover:text-[var(--Text-Disable)]",
 //         ].join(" "),
 //         /**
 //          * selected — Chip の選択中。ブランド色を使わず、グレー地 + 1px の黒系の枠で示す
@@ -8241,9 +8315,9 @@ export {
 //          * forced-colors では box-shadow が消えるため、Chip 側が Highlight の塗りで選択中を示す。
 //          */
 //         selected: [
-//           "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] inset-ring-1 inset-ring-[var(--Border-High-Emphasis)]",
+//           "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] inset-ring-1 inset-ring-[var(--Border-High-Emphasis)]",
 //           "hover:bg-[var(--Hover-Tertiary-Button)]",
-//           "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:inset-ring-transparent disabled:hover:bg-[var(--Surface-Secondary)]",
+//           "disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:text-[var(--Text-Disable)] disabled:inset-ring-transparent disabled:hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         ].join(" "),
 //       },
 //       size: {
@@ -8616,9 +8690,9 @@ export {
 //  * - 同時に複数呼ばれたら待ち行列にして 1 件ずつ表示する。
 //  * - Provider が unmount されたとき、未解決の confirm は false で resolve する
 //  *   （画面遷移で await が宙に浮いたままにならないようにする）。unmount 後の呼び出しも即 false。
-//  * - 閉じた後は confirm() を呼んだ時点でフォーカスがあった要素へ戻す（Trigger を持たないため、
-//  *   Radix の既定のままだと body へ落ちる）。閉じるアニメーション中に次の confirm() が来ても、
-//  *   最後に閉じたときは元の呼び出し元へ戻る。
+//  * - 閉じた後は confirm() を呼んだ時点でフォーカスがあった要素へ戻す（AlertDialogContent の
+//  *   共通の復帰は「開いた時点の要素」を使うため、メニューから呼んだときに戻せない。ここで上書きする）。
+//  *   閉じるアニメーション中に次の confirm() が来ても、最後に閉じたときは元の呼び出し元へ戻る。
 //  */
 // function ConfirmDialogProvider({ children }: ConfirmDialogProviderProps) {
 //   const [state, setState] = React.useState<ConfirmQueueState>(INITIAL_STATE)
@@ -8673,7 +8747,10 @@ export {
 // 
 //   // 閉じた後のフォーカスを呼び出し元へ戻す（AlertDialogContent の onCloseAutoFocus）
 //   const restoreFocus = React.useCallback((event: Event, request: ConfirmRequest) => {
-//     // Radix の既定は Trigger へ戻すが、Trigger が無いので body へ落ちる。既定を止めて自前で戻す
+//     // AlertDialogContent も「開いたときの要素」へ戻すが、確認ダイアログは自前で戻す。
+//     // 共通の復帰処理には、戻り先を confirm() を呼んだ時点で覚える（開いた時点ではメニュー項目が
+//     // 既に消えている）・消えていたらメニューのトリガーへ戻す・待ち行列の次の確認へ引き継ぐ、の
+//     // 3 点が無いため。preventDefault すると AlertDialogContent 側は何もしない
 //     event.preventDefault()
 //     // 待ち行列の次の確認が既に開いてフォーカスを持っているなら動かさない
 //     // （閉じた側の通知は Radix が setTimeout で遅らせて出すため、次の表示より後に届く）
@@ -9165,7 +9242,7 @@ export {
 //   {
 //     variants: {
 //       state: {
-//         default: "hover:bg-[var(--Surface-Tertiary)]",
+//         default: "hover:bg-[var(--Surface-Neutral-Tertiary)]",
 //         selected: "bg-[var(--Surface-Accent-Primary-Light)] hover:bg-[var(--Surface-Accent-Primary-Light)] border-l-[3px] border-l-[var(--Brand-Cake-Orange)]",
 //       },
 //     },
@@ -9175,15 +9252,95 @@ export {
 //   }
 // )
 // 
+// /**
+//  * 行の onClick / Enter・Space を発火させない「入れ子の操作要素」のセレクタ。
+//  * セル内の Select・入力欄・リンク・ボタンを操作したとき、行（詳細を開く・選択トグル等）まで
+//  * 反応させないために使う。行自身は含まない。
+//  * セルの td に `data-table-ignore-row-click` を付けると、そのセル内の操作も行へ伝えない。
+//  */
+// const DATA_TABLE_INTERACTIVE_SELECTOR = [
+//   "a[href]",
+//   "button",
+//   "input",
+//   "select",
+//   "textarea",
+//   "label",
+//   "[contenteditable]:not([contenteditable='false'])",
+//   "[role='button']",
+//   "[role='link']",
+//   "[role='menuitem']",
+//   "[role='checkbox']",
+//   "[role='radio']",
+//   "[role='switch']",
+//   "[role='combobox']",
+//   "[role='option']",
+//   "[role='listbox']",
+//   "[role='dialog']",
+//   "[data-table-ignore-row-click]",
+// ].join(",")
+// 
+// /**
+//  * イベントが行の内側の操作要素、または行の DOM の外（Radix の Portal 先）から来たかを判定する。
+//  *
+//  * Select の選択肢・Popover・Dialog の中身は body へ Portal されるため DOM 上は行の子孫ではないが、
+//  * React の合成イベントは Portal を越えて行まで届く。`closest()` だけでは判定できないので、
+//  * `currentTarget` の DOM の外から来たイベントは入れ子の操作として扱う。
+//  * `closest()` で見つけた要素は行の内側にあるものだけを数える（表ごと `role="dialog"` の中に置いても
+//  * 行クリックが全部止まらないようにする）。
+//  */
+// function isFromNestedInteractive(
+//   event: React.SyntheticEvent<HTMLElement>
+// ): boolean {
+//   const target = event.target
+//   const currentTarget = event.currentTarget
+//   if (!(target instanceof Node)) return false
+//   if (target === currentTarget) return false
+//   if (!currentTarget.contains(target)) return true
+//   if (!(target instanceof Element)) return false
+//   const interactive = target.closest(DATA_TABLE_INTERACTIVE_SELECTOR)
+//   return Boolean(
+//     interactive && interactive !== currentTarget && currentTarget.contains(interactive)
+//   )
+// }
+// 
 // function DataTableRow({
 //   className,
 //   state,
+//   onClick,
+//   onKeyDown,
 //   ...props
 // }: React.ComponentProps<"tr"> & VariantProps<typeof dataTableRowVariants>) {
 //   return (
 //     <tr
 //       data-slot="data-table-row"
 //       className={cn(dataTableRowVariants({ state }), className)}
+//       // セル内の Select・入力欄・リンク・ボタン（と Portal 先のポップアップ）の操作は、行の onClick に渡さない
+//       onClick={
+//         onClick
+//           ? (event) => {
+//               // 子の処理が preventDefault したクリック（リンクの遷移を止めた等）は行の操作として扱わない
+//               if (event.defaultPrevented || isFromNestedInteractive(event)) return
+//               onClick(event)
+//             }
+//           : undefined
+//       }
+//       // 行に付けたキー処理は、子が preventDefault したキーを（キーの種類に関わらず）渡さない。
+//       // セル内の操作要素から来た Enter / Space も渡さない（操作要素自身の確定操作のため）。Tab や矢印は、子が止めていなければ渡す
+//       onKeyDown={
+//         onKeyDown
+//           ? (event) => {
+//               // 子が preventDefault したキーは行へ渡さない
+//               if (event.defaultPrevented) return
+//               if (
+//                 (event.key === "Enter" || event.key === " ") &&
+//                 isFromNestedInteractive(event)
+//               ) {
+//                 return
+//               }
+//               onKeyDown(event)
+//             }
+//           : undefined
+//       }
 //       {...props}
 //     />
 //   )
@@ -9229,7 +9386,7 @@ export {
 //       className={cn(
 //         "h-16 px-4 text-left align-middle typo-label-sm whitespace-nowrap text-[var(--Text-Medium-Emphasis)]",
 //         "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:pr-0",
-//         sortable && "hover:bg-[var(--Surface-Tertiary)]",
+//         sortable && "hover:bg-[var(--Surface-Neutral-Tertiary)]",
 //         width === "max" && "min-w-[320px] max-w-[360px]",
 //         width === "hug" && "min-w-0 w-0",
 //         className
@@ -9518,7 +9675,7 @@ export {
 //   return (
 //     <tr
 //       data-slot="data-table-add-row"
-//       className={cn("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Tertiary)] cursor-pointer transition-colors", className)}
+//       className={cn("border-b border-[var(--Border-Low-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] cursor-pointer transition-colors", className)}
 //       onClick={onClick}
 //       {...props}
 //     >
@@ -9596,7 +9753,7 @@ export {
 //   return (
 //     <DataTableCell className={cn("min-w-[200px]", className)} {...props}>
 //       <div className="flex items-center gap-3">
-//         <div className="size-10 rounded-lg bg-[var(--Surface-Tertiary)] overflow-hidden shrink-0">
+//         <div className="size-10 rounded-lg bg-[var(--Surface-Neutral-Tertiary)] overflow-hidden shrink-0">
 //           {src && (
 //             <img
 //               src={src}
@@ -9759,7 +9916,7 @@ export {
 // }) {
 //   return (
 //     <DataTableCell
-//       className={cn("hover:bg-[var(--Surface-Tertiary)] cursor-pointer p-0", className)}
+//       className={cn("hover:bg-[var(--Surface-Neutral-Tertiary)] cursor-pointer p-0", className)}
 //       {...props}
 //     >
 //       <Select value={value} onValueChange={onValueChange}>
@@ -9823,17 +9980,40 @@ export {
 // export type { SortDirection }
 // 
 // src/components/foundations/dialog.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { XIcon } from "lucide-react"
 // import { Dialog as DialogPrimitive } from "radix-ui"
 // 
 // import { cn } from "@/lib/utils"
+// import {
+//   OverlayFocusRootContext,
+//   useOverlayFocusRoot,
+//   useRestoreFocusToOpener,
+// } from "@/lib/focus-restore"
+// import { composeEscapeKeyDownWithImeGuard } from "@/lib/ime"
 // import { Button } from "@/components/foundations/button"
 // 
 // function Dialog({
+//   open,
+//   defaultOpen,
+//   onOpenChange,
 //   ...props
 // }: React.ComponentProps<typeof DialogPrimitive.Root>) {
-//   return <DialogPrimitive.Root data-slot="dialog" {...props} />
+//   // 閉じたときに opener へフォーカスを戻すための記録（DialogContent が使う）
+//   const { root, handleOpenChange } = useOverlayFocusRoot(open, defaultOpen, onOpenChange)
+//   return (
+//     <OverlayFocusRootContext.Provider value={root}>
+//       <DialogPrimitive.Root
+//         data-slot="dialog"
+//         open={open}
+//         defaultOpen={defaultOpen}
+//         onOpenChange={handleOpenChange}
+//         {...props}
+//       />
+//     </OverlayFocusRootContext.Provider>
+//   )
 // }
 // 
 // function DialogTrigger({
@@ -9899,6 +10079,9 @@ export {
 //   children,
 //   showCloseButton = true,
 //   size,
+//   onOpenAutoFocus,
+//   onCloseAutoFocus,
+//   onEscapeKeyDown,
 //   ...props
 // }: React.ComponentProps<typeof DialogPrimitive.Content> & {
 //   showCloseButton?: boolean
@@ -9917,12 +10100,20 @@ export {
 //    */
 //   size?: DialogSize
 // }) {
+//   // 開いたときの自動フォーカスは従来どおり止める（consumer が onOpenAutoFocus を渡したときは
+//   // その指定に任せる）。閉じたときは、Trigger 無しで開いても、その回に開いた要素へ戻す
+//   const autoFocusHandlers = useRestoreFocusToOpener({
+//     onOpenAutoFocus: onOpenAutoFocus ?? ((e) => e.preventDefault()),
+//     onCloseAutoFocus,
+//   })
 //   return (
 //     <DialogPortal data-slot="dialog-portal">
 //       <DialogOverlay />
 //       <DialogPrimitive.Content
 //         data-slot="dialog-content"
-//         onOpenAutoFocus={(e) => e.preventDefault()}
+//         {...autoFocusHandlers}
+//         // 日本語入力の変換中の Esc（変換の取り消し）では閉じない
+//         onEscapeKeyDown={composeEscapeKeyDownWithImeGuard(onEscapeKeyDown)}
 //         className={cn(
 //           "fixed top-[50%] left-[50%] z-[var(--Z-Modal)] grid w-[calc(100%_-_32px)] max-w-[calc(100%_-_32px)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl bg-[var(--Surface-Elevated)] p-6 shadow-lg duration-[var(--Motion-Duration-Base)] outline-none focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
 //           // 型に無い size（AlertDialog の "default" と取り違えた JSX など）でも幅の上限を消さず、未指定と同じにする
@@ -9935,7 +10126,7 @@ export {
 //         {showCloseButton && (
 //           <DialogPrimitive.Close
 //             data-slot="dialog-close"
-//             className="absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
+//             className="absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0"
 //           >
 //             <XIcon className="size-5" />
 //             <span className="sr-only">閉じる</span>
@@ -10029,11 +10220,19 @@ export {
 // import { Drawer as DrawerPrimitive } from "vaul"
 // 
 // import { cn } from "@/lib/utils"
+// import { OverlayFocusRootContext, useRestoreFocusToOpener } from "@/lib/focus-restore"
+// import { composeEscapeKeyDownWithImeGuard } from "@/lib/ime"
 // 
 // function Drawer({
 //   ...props
 // }: React.ComponentProps<typeof DrawerPrimitive.Root>) {
-//   return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+//   // Drawer は opener の記録を DrawerContent 側に持つ。外側の Dialog / Sheet の記録を
+//   // 誤って使わないよう、ここで切る
+//   return (
+//     <OverlayFocusRootContext.Provider value={null}>
+//       <DrawerPrimitive.Root data-slot="drawer" {...props} />
+//     </OverlayFocusRootContext.Provider>
+//   )
 // }
 // 
 // function DrawerTrigger({
@@ -10073,13 +10272,21 @@ export {
 // function DrawerContent({
 //   className,
 //   children,
+//   onOpenAutoFocus,
+//   onCloseAutoFocus,
+//   onEscapeKeyDown,
 //   ...props
 // }: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+//   // 閉じたときは Trigger 無しで開いても、その回に開いた要素へ戻す
+//   const autoFocusHandlers = useRestoreFocusToOpener({ onOpenAutoFocus, onCloseAutoFocus })
 //   return (
 //     <DrawerPortal data-slot="drawer-portal">
 //       <DrawerOverlay />
 //       <DrawerPrimitive.Content
 //         data-slot="drawer-content"
+//         {...autoFocusHandlers}
+//         // 日本語入力の変換中の Esc（変換の取り消し）では閉じない
+//         onEscapeKeyDown={composeEscapeKeyDownWithImeGuard(onEscapeKeyDown)}
 //         className={cn(
 //           "group/drawer-content fixed z-[var(--Z-Modal)] flex h-auto flex-col border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)]",
 //           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
@@ -10519,17 +10726,47 @@ export {
 //   )
 // }
 // 
+// /** FieldSet の子の間隔の段。sm=8px / md=16px / lg=24px */
+// type FieldSetGap = "sm" | "md" | "lg"
+// 
+// /**
+//  * gap 指定時のクラス。`<legend>` は fieldset の枠側に描かれ flex の並びに入らないため、
+//  * 子の間隔（gap）とは別に legend の下にも同じ間隔（margin-bottom）を付ける。
+//  * Tailwind の静的抽出のため完全な文字列で持つ。
+//  */
+// const FIELD_SET_GAP_CLASSES: Record<FieldSetGap, string> = {
+//   sm: "gap-2 [&>[data-slot=field-legend]]:mb-2",
+//   md: "gap-4 [&>[data-slot=field-legend]]:mb-4",
+//   lg: "gap-6 [&>[data-slot=field-legend]]:mb-6",
+// }
+// 
 // /**
 //  * FieldSet — フォーム全体 or 大きなセクションの枠。
 //  * `<fieldset>` の既定スタイル（ブラウザ枠線・padding）をリセットし、
-//  * legend + 複数 `FieldGroup` を gap-6 の縦リズムで並べる。
+//  * 複数 `FieldGroup` を gap-6 の縦リズムで並べる。
+//  *
+//  * `<legend>` は flex の並びに入らないため、`gap` 未指定のときは legend の直下の間隔が 0 になる
+//  * （従来の見た目。既定は変えない）。`gap` を指定すると子の間隔をその段にし、legend の下にも同じ間隔を空ける。
 //  */
-// function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+// 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
+// }) {
 //   return (
 //     <fieldset
 //       data-slot="field-set"
+//       data-gap={gap}
 //       className={cn(
 //         "flex min-w-0 flex-col gap-6 border-0 p-0",
+//         gap && FIELD_SET_GAP_CLASSES[gap],
 //         className
 //       )}
 //       {...props}
@@ -10540,12 +10777,26 @@ export {
 // /**
 //  * FieldLegend — FieldSet の見出し。`<legend>` として描画。
 //  */
-// function FieldLegend({ className, ...props }: React.ComponentProps<"legend">) {
+// 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"
+// }) {
 //   return (
 //     <legend
 //       data-slot="field-legend"
+//       data-size={size}
 //       className={cn(
-//         "typo-label-lg text-[var(--Text-High-Emphasis)]",
+//         size === "sm"
+//           ? "typo-label-md text-[var(--Text-Medium-Emphasis)]"
+//           : "typo-label-lg text-[var(--Text-High-Emphasis)]",
 //         className
 //       )}
 //       {...props}
@@ -10649,6 +10900,7 @@ export {
 // }
 // // eslint-disable-next-line react-refresh/only-export-components -- shadcn 慣習: variants はコンポーネントと同居 export（分割は公開 API の破壊変更）
 // export { fieldVariants }
+// export type { FieldSetGap }
 // export type FieldProps = React.ComponentProps<"div"> &
 //   VariantProps<typeof fieldVariants>
 // 
@@ -10878,7 +11130,7 @@ export {
 //           // :hover:focus-within は詳細度が :hover より高いので確実に上書きできる。
 //           "[&:hover:focus-within]:border-[var(--Focus-High-Emphasis)] [&:hover:focus-within]:outline-transparent",
 //           disabled &&
-//             "pointer-events-none border-transparent bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]",
+//             "pointer-events-none border-transparent bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Disable)]",
 //         )}
 //       >
 //         <Paperclip className="size-4" aria-hidden="true" />
@@ -11201,6 +11453,8 @@ export {
 // export { IconBadge, iconBadgeVariants }
 // 
 // src/components/foundations/input.tsx
+// "use client"
+// 
 // import * as React from "react"
 // 
 // import { cn } from "@/lib/utils"
@@ -11262,7 +11516,7 @@ export {
 //         // tokens.json の touchTarget["text-input"].min = 44px を満たす最小サイズで、
 //         // 管理画面の情報密度とタッチターゲットのバランスが取れる（iOS HIG の 44pt とも一致）。
 //         // より大きくしたい場合は consumer が className="h-12" 等で上書きする。
-//         "h-11 w-full min-w-0 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-1 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:typo-label-sm file:text-foreground placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)]",
+//         "h-11 w-full min-w-0 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-1 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:typo-label-sm file:text-foreground placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)]",
 //         // フォーカス意匠は DS 共通（FOCUS_RING）。Tailwind の variant 順で
 //         // focus-visible は hover より後に出力されるため、hover の枠線に必ず勝つ。
 //         FOCUS_RING,
@@ -11948,6 +12202,7 @@ export {
 // import { Popover as PopoverPrimitive } from "radix-ui"
 // 
 // import { cn } from "@/lib/utils"
+// import { composeEscapeKeyDownWithImeGuard } from "@/lib/ime"
 // 
 // function Popover({
 //   ...props
@@ -11965,6 +12220,7 @@ export {
 //   className,
 //   align = "center",
 //   sideOffset = 4,
+//   onEscapeKeyDown,
 //   ...props
 // }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
 //   return (
@@ -11973,6 +12229,8 @@ export {
 //         data-slot="popover-content"
 //         align={align}
 //         sideOffset={sideOffset}
+//         // 日本語入力の変換中の Esc（変換の取り消し）では閉じない（Combobox / MultiSelect の検索欄など）
+//         onEscapeKeyDown={composeEscapeKeyDownWithImeGuard(onEscapeKeyDown)}
 //         // max-w は画面内に使える幅（Radix の available-width）まで。長い項目や className の広い幅でも
 //         // 幅 390px の画面で右へはみ出さない。収まる幅には効かない（既定の見た目は変わらない）。
 //         className={cn(
@@ -12051,9 +12309,21 @@ export {
 //   const hasName =
 //     props["aria-label"] !== undefined || props["aria-labelledby"] !== undefined
 // 
+//   // Radix の Root に value を渡すと aria-valuenow / data-state（loading / complete）が付く。
+//   // 0〜max に丸める（max 未指定は 100）。max を渡したのに 100 で丸めると、Radix の範囲検査（0〜max）に
+//   // 通らず不確定（indeterminate）になる。未指定・null・NaN も不確定のままにして、Radix の範囲外エラーを避ける
+//   const max = typeof props.max === "number" && Number.isFinite(props.max) && props.max > 0 ? props.max : 100
+//   const normalized =
+//     typeof value === "number" && Number.isFinite(value)
+//       ? Math.min(max, Math.max(0, value))
+//       : undefined
+//   // 帯の長さは 0〜max を 0〜100% に直したもの
+//   const percent = normalized === undefined ? 0 : (normalized / max) * 100
+// 
 //   return (
 //     <ProgressPrimitive.Root
 //       data-slot="progress"
+//       value={normalized}
 //       aria-label={hasName ? undefined : "進捗"}
 //       className={cn(
 //         "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
@@ -12068,7 +12338,7 @@ export {
 //       <ProgressPrimitive.Indicator
 //         data-slot="progress-indicator"
 //         className="h-full w-full flex-1 bg-primary transition-all forced-colors:bg-[Highlight]"
-//         style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+//         style={{ transform: `translateX(-${100 - percent}%)` }}
 //       />
 //     </ProgressPrimitive.Root>
 //   )
@@ -12084,6 +12354,7 @@ export {
 // 
 // import { cn } from "@/lib/utils"
 // import { FOCUS_RING } from "@/lib/focus-ring"
+// import { resolveFieldAria, useFieldLabelling } from "@/lib/field-labelling"
 // import { chipVariants } from "@/components/foundations/chip-variants"
 // 
 // /** RadioGroup の描画スタイル。tile=タイル型（既定）/ chip=チップ型（choice chip）。 */
@@ -12104,6 +12375,11 @@ export {
 //    */
 //   variant?: RadioGroupVariant
 // }) {
+//   // role="radiogroup" は <label for> では名前が付かない。FormField 配下ではラベル id を
+//   // aria-labelledby で、説明・エラーを aria-describedby / aria-invalid で受け取る
+//   // （Select / Switch 等と同じ方針 — issue #202。利用側の明示指定が優先）
+//   const fieldAria = resolveFieldAria(props, useFieldLabelling())
+// 
 //   return (
 //     <RadioGroupContext.Provider value={variant}>
 //       <RadioGroupPrimitive.Root
@@ -12114,6 +12390,7 @@ export {
 //           className,
 //         )}
 //         {...props}
+//         {...fieldAria}
 //       />
 //     </RadioGroupContext.Provider>
 //   )
@@ -12170,13 +12447,13 @@ export {
 //         // lint-scratch-allow: p-[15px] は border-2 を含めた見た目余白を Figma に合わせる補正値
 //         "group flex cursor-pointer gap-2 rounded-lg border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] p-[15px] text-left outline-none transition-colors",
 //         expandedContent ? "flex-col items-stretch" : "items-center",
-//         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
+//         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Surface-Primary)]",
 //         // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング）。以前はオレンジの
 //         // ring-2 で checked 状態（同じくブランド色の枠）と紛らわしかったため統一した。
 //         FOCUS_RING,
 //         "aria-invalid:border-[var(--Border-Caution)]",
-//         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)]",
+//         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Neutral-Secondary)]",
 //         className,
 //       )}
 //       {...props}
@@ -12189,14 +12466,17 @@ export {
 //           className={cn(
 //             "flex size-5 shrink-0 items-center justify-center rounded-full border-2 border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] transition-colors",
 //             "group-data-[state=checked]:border-[var(--Object-Accent-Primary)]",
-//             "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Secondary)]",
+//             "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Neutral-Secondary)]",
 //           )}
 //         >
 //           <RadioGroupPrimitive.Indicator
 //             data-slot="radio-group-indicator"
 //             className="flex items-center justify-center"
 //           >
-//             <span className="size-2.5 rounded-full bg-[var(--Object-Accent-Primary)]" />
+//             {/* 点は背景色で描いているため、forced-colors（Windows ハイコントラスト）では地が Canvas に
+//                 置き換わって選択中でも中が空に見える。forced-colors のときだけ OS の選択色で塗る
+//                 （無効時は GrayText）。通常表示は変わらない */}
+//             <span className="size-2.5 rounded-full bg-[var(--Object-Accent-Primary)] forced-colors:bg-[Highlight] forced-colors:group-data-[disabled]:bg-[GrayText]" />
 //           </RadioGroupPrimitive.Indicator>
 //         </span>
 // 
@@ -12581,6 +12861,8 @@ export {
 // export { ScrollArea, ScrollBar }
 // 
 // src/components/foundations/select.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 // import { Select as SelectPrimitive } from "radix-ui"
@@ -12625,7 +12907,7 @@ export {
 //       data-slot="select-trigger"
 //       data-size={size}
 //       className={cn(
-//         "flex w-full items-center justify-between gap-2 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-md whitespace-nowrap transition-[color,box-shadow,border-color] outline-none hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+//         "flex w-full items-center justify-between gap-2 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-md whitespace-nowrap transition-[color,box-shadow,border-color] outline-none hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)] disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Neutral-Secondary)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
 //         // フォーカス意匠は DS 共通（FOCUS_RING）。
 //         FOCUS_RING,
 //         // 高さは「素のクラス」で当てる。data 属性セレクタ（data-[size=default]:h-10）だと
@@ -12821,14 +13103,40 @@ export {
 // export { Separator }
 // 
 // src/components/foundations/sheet.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { XIcon } from "lucide-react"
 // import { Dialog as SheetPrimitive } from "radix-ui"
 // 
 // import { cn } from "@/lib/utils"
+// import {
+//   OverlayFocusRootContext,
+//   useOverlayFocusRoot,
+//   useRestoreFocusToOpener,
+// } from "@/lib/focus-restore"
+// import { composeEscapeKeyDownWithImeGuard } from "@/lib/ime"
 // 
-// function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
-//   return <SheetPrimitive.Root data-slot="sheet" {...props} />
+// function Sheet({
+//   open,
+//   defaultOpen,
+//   onOpenChange,
+//   ...props
+// }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+//   // 閉じたときに opener へフォーカスを戻すための記録。SheetContent ごとではなく Sheet 側に置き、
+//   // 開いたまま consumer が SheetContent を作り直しても（key の変更など）記録を引き継ぐ
+//   const { root, handleOpenChange } = useOverlayFocusRoot(open, defaultOpen, onOpenChange)
+//   return (
+//     <OverlayFocusRootContext.Provider value={root}>
+//       <SheetPrimitive.Root
+//         data-slot="sheet"
+//         open={open}
+//         defaultOpen={defaultOpen}
+//         onOpenChange={handleOpenChange}
+//         {...props}
+//       />
+//     </OverlayFocusRootContext.Provider>
+//   )
 // }
 // 
 // function SheetTrigger({
@@ -12890,6 +13198,7 @@ export {
 //   autoFocus = true,
 //   onOpenAutoFocus,
 //   onCloseAutoFocus,
+//   onEscapeKeyDown,
 //   ...props
 // }: React.ComponentProps<typeof SheetPrimitive.Content> & {
 //   side?: "top" | "right" | "bottom" | "left"
@@ -12905,24 +13214,30 @@ export {
 //   size?: SheetSize
 //   showCloseButton?: boolean
 //   /**
-//    * 開閉時のフォーカス自動移動。既定 true（Radix 既定＝開いたら中へ入り、閉じたらトリガーへ戻る）。
+//    * 開閉時のフォーカス自動移動。既定 true（開いたら中へ入り、閉じたらその回に開いた要素へ戻る。
+//    * Trigger を使わず state で開いたときも戻る）。
 //    * WCAG 2.4.3 を満たすため、止めたい特別な事情があるときだけ false にする。
 //    */
 //   autoFocus?: boolean
 // }) {
+//   const autoFocusHandlers = useRestoreFocusToOpener({
+//     onOpenAutoFocus: (e) => {
+//       if (!autoFocus) e.preventDefault()
+//       onOpenAutoFocus?.(e)
+//     },
+//     onCloseAutoFocus: (e) => {
+//       if (!autoFocus) e.preventDefault()
+//       onCloseAutoFocus?.(e)
+//     },
+//   })
 //   return (
 //     <SheetPortal>
 //       <SheetOverlay />
 //       <SheetPrimitive.Content
 //         data-slot="sheet-content"
-//         onOpenAutoFocus={(e) => {
-//           if (!autoFocus) e.preventDefault()
-//           onOpenAutoFocus?.(e)
-//         }}
-//         onCloseAutoFocus={(e) => {
-//           if (!autoFocus) e.preventDefault()
-//           onCloseAutoFocus?.(e)
-//         }}
+//         {...autoFocusHandlers}
+//         // 日本語入力の変換中の Esc（変換の取り消し）では閉じない
+//         onEscapeKeyDown={composeEscapeKeyDownWithImeGuard(onEscapeKeyDown)}
 //         className={cn(
 //           "fixed z-[var(--Z-Modal)] flex flex-col gap-4 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Elevated)] shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-[var(--Motion-Duration-Slow)] data-[state=open]:animate-in data-[state=open]:duration-[var(--Motion-Duration-Slower)]",
 //           side === "right" &&
@@ -12941,7 +13256,7 @@ export {
 //       >
 //         {children}
 //         {showCloseButton && (
-//           <SheetPrimitive.Close className="absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none">
+//           <SheetPrimitive.Close className="absolute top-2 right-2 flex size-10 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus:ring-2 focus:ring-[var(--Focus-High-Emphasis)] focus:outline-hidden disabled:pointer-events-none">
 //             <XIcon className="size-5" />
 //             <span className="sr-only">閉じる</span>
 //           </SheetPrimitive.Close>
@@ -13021,7 +13336,7 @@ export {
 //   return (
 //     <div
 //       data-slot="skeleton"
-//       className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-[var(--Surface-Tertiary)]", className)}
+//       className={cn("animate-pulse motion-reduce:animate-none rounded-md bg-[var(--Surface-Neutral-Tertiary)]", className)}
 //       {...props}
 //     />
 //   )
@@ -13243,7 +13558,7 @@ export {
 //       <SliderPrimitive.Track
 //         data-slot="slider-track"
 //         className={cn(
-//           "relative grow overflow-hidden rounded-full bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+//           "relative grow overflow-hidden rounded-full bg-[var(--Surface-Control-Track,var(--Surface-Neutral-Tertiary))] data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
 //           // forced-colors（Windows ハイコントラスト）ではレールも範囲も Canvas に置き換わり見えなかった。
 //           // レールは輪郭線（レイアウトに影響しない outline）、範囲は OS の選択色で示す。通常表示は不変
 //           "forced-colors:outline forced-colors:outline-1 forced-colors:outline-[CanvasText]"
@@ -13429,7 +13744,7 @@ export {
 //   TriangleAlertIcon,
 // } from "lucide-react"
 // import { useTheme } from "next-themes"
-// import { Toaster as Sonner, type ToasterProps } from "sonner"
+// import { Toaster as Sonner, toast as sonnerToast, type ToasterProps } from "sonner"
 // 
 // const Toaster = ({ ...props }: ToasterProps) => {
 //   const { theme = "system" } = useTheme()
@@ -13453,13 +13768,13 @@ export {
 //           actionButton:
 //             "!bg-[var(--Brand-Cake-Orange)] !text-[var(--Text-on-Inverse)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8 hover:!bg-[var(--Hover-Primary-Button)]",
 //           cancelButton:
-//             "!bg-[var(--Surface-Tertiary)] !text-[var(--Text-High-Emphasis)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8",
+//             "!bg-[var(--Surface-Neutral-Tertiary)] !text-[var(--Text-High-Emphasis)] !typo-label-sm !rounded-lg !px-4 !py-2 !h-8",
 //           // 状態トースト（success/error/warning/info）は背景を primitive の明色で固定しているため、
 //           // 中の description / cancel もモード反転しない primitive に固定する。
 //           // semantic（Text-Medium-Emphasis 等）のままだとダークモードで白系に反転し、
 //           // 明色背景の上で文字が不可視になる（デフォルトトーストは背景が反転するので semantic のままで正しい）
 //           success:
-//             "!bg-[var(--Primitive-Forest-50)] !border-[var(--Primitive-Forest-200)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
+//             "!bg-[var(--Surface-Success-Light)] !border-[var(--Border-Success)] !text-[var(--Text-Success)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
 //           error:
 //             "!bg-[var(--Surface-Caution-Light)] !border-[var(--Border-Caution)] !text-[var(--Primitive-Sun-800)] [&_[data-description]]:!text-[var(--Primitive-Gray-700)] [&_[data-cancel]]:!bg-[var(--Primitive-Gray-100)] [&_[data-cancel]]:!text-[var(--Primitive-Gray-900)]",
 //           warning:
@@ -13483,7 +13798,15 @@ export {
 //   )
 // }
 // 
-// export { Toaster }
+// // toast は src/index.ts から直接 `export { toast } from "sonner"` せず、この module で束ねて公開する。
+// // バレルが sonner を直接 import すると、sonner（package.json に sideEffects 指定が無い）が
+// // 未使用でも利用側のバンドルに残る（部品を 1 つ import しただけで約 19KB。npm run check:bundle で検査）。
+// // `export { toast } from "sonner"` のままだとビルドが再 export をたどってバレルに import を戻すため、
+// // ローカルの const にして、この module（未使用なら丸ごと消える）が sonner を持つ形にしている。
+// const toast: typeof sonnerToast = sonnerToast
+// 
+// // eslint-disable-next-line react-refresh/only-export-components -- toast は関数。Toaster と対で使うため同居 export（バレルから sonner を直接 import させないため）
+// export { Toaster, toast }
 // 
 // src/components/foundations/spinner.tsx
 // import * as React from "react"
@@ -13523,6 +13846,8 @@ export {
 // export { Spinner }
 // 
 // src/components/foundations/switch.tsx
+// "use client"
+// 
 // import * as React from "react"
 // import { Switch as SwitchPrimitive } from "radix-ui"
 // import { Check } from "lucide-react"
@@ -13775,7 +14100,7 @@ export {
 //           "w-full bg-transparent overflow-x-auto [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]",
 //         // 縦向きでは縦長の地に rounded-full だと上下が半円になり、先頭・末尾のタブの角がはみ出すため角丸を 2xl に抑える
 //         segment:
-//           "w-fit rounded-full bg-[var(--Surface-Tertiary)] p-2 data-[orientation=vertical]:rounded-2xl",
+//           "w-fit rounded-full bg-[var(--Surface-Neutral-Tertiary)] p-2 data-[orientation=vertical]:rounded-2xl",
 //       },
 //       scrollable: {
 //         true: "gap-4",
@@ -13881,6 +14206,8 @@ export {
 // export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }
 // 
 // src/components/foundations/textarea.tsx
+// "use client"
+// 
 // import * as React from "react"
 // 
 // import { cn } from "@/lib/utils"
@@ -13935,7 +14262,7 @@ export {
 //       maxLength={maxLength}
 //       onChange={showCount ? handleChange : onChange}
 //       className={cn(
-//         "flex field-sizing-content min-h-16 w-full rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
+//         "flex field-sizing-content min-h-16 w-full rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-lg md:typo-body-md transition-[color,box-shadow,border-color] outline-none placeholder:text-muted-foreground hover:border-[var(--Focus-High-Emphasis)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-[var(--Border-Low-Emphasis)] disabled:bg-[var(--Surface-Neutral-Secondary)] disabled:text-[var(--Text-Disable)] disabled:placeholder:text-[var(--Text-Disable)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
 //         // フォーカス意匠は DS 共通（FOCUS_RING）。
 //         FOCUS_RING,
 //         className
@@ -13994,7 +14321,7 @@ export {
 //  */
 // 
 // const toggleGroupVariants = cva(
-//   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
+//   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-hide",
 //   {
 //     variants: {
 //       /** グループ全体の幅 */
@@ -14030,15 +14357,15 @@ export {
 //     variants: {
 //       variant: {
 //         default: [
-//           "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
-//           "hover:bg-[var(--Surface-Tertiary)]/80",
+//           "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
+//           "hover:bg-[var(--Surface-Neutral-Tertiary)]/80",
 //           "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Text-Accent-Primary)] data-[state=on]:font-bold",
-//           "dark:bg-[var(--Surface-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
+//           "dark:bg-[var(--Surface-Neutral-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
 //           "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]",
 //         ].join(" "),
 //         outline: [
 //           "border border-[var(--Border-Control,var(--Border-Low-Emphasis))] bg-transparent text-[var(--Text-Low-Emphasis)]",
-//           "hover:bg-[var(--Surface-Tertiary)]",
+//           "hover:bg-[var(--Surface-Neutral-Tertiary)]",
 //           "data-[state=on]:border-[var(--Text-High-Emphasis)] data-[state=on]:bg-transparent data-[state=on]:text-[var(--Text-High-Emphasis)]",
 //         ].join(" "),
 //       },
@@ -14285,7 +14612,7 @@ export {
 //         {onMenuClick && (
 //           <button
 //             type="button"
-//             className="flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Secondary)] @md:hidden"
+//             className="flex items-center justify-center size-10 shrink-0 rounded-lg hover:bg-[var(--Surface-Neutral-Secondary)] @md:hidden"
 //             aria-label="メニュー"
 //             onClick={onMenuClick}
 //           >
@@ -14382,6 +14709,8 @@ export {
 //    * モバイルドロワーの開閉要求ハンドラ。背景・閉じるボタンに加え、ドロワー内のリンク
 //    * （項目・サブ項目）を押したときも `onOpenChange(false)` が呼ばれる
 //    * （`linkComponent` でクライアント遷移するとページが再読み込みされず、開いたままになるため）。
+//    * ただし Cmd/Ctrl/Shift/Alt 付きクリック・中クリック・`target="_blank"` のリンクは、
+//    * 今の画面が移らないので閉じない。
 //    */
 //   onOpenChange?: (open: boolean) => void
 //   /** nav の aria-label */
@@ -14401,6 +14730,19 @@ export {
 // // ============================================================
 // 
 // /**
+//  * ドロワー内のリンクを押したとき、ドロワーを閉じてよいかを判定する。
+//  * Cmd/Ctrl/Shift/Alt 付きクリック・中クリック・`target="_blank"` などの別タブ・別ウィンドウで開く操作は、
+//  * 今の画面が移らないのでドロワーを開いたままにする。通常の左クリック（SPA の preventDefault 含む）は閉じる。
+//  */
+// function shouldCloseDrawerOnLinkClick(event: React.MouseEvent<HTMLElement>): boolean {
+//   if (event.button !== 0) return false
+//   if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return false
+//   const target = event.currentTarget.getAttribute("target")
+//   if (target && target !== "_self") return false
+//   return true
+// }
+// 
+// /**
 //  * 管理画面向けサイドナビゲーション
 //  *
 //  * PC は左端固定の縦型アイコンレール（ホバーでサブメニューをポップアップ）、
@@ -14811,7 +15153,7 @@ export {
 //               <span className="typo-label-md text-[var(--Text-High-Emphasis)]">{drawerTitle}</span>
 //               <button
 //                 onClick={() => onOpenChange?.(false)}
-//                 className="flex size-10 shrink-0 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden"
+//                 className="flex size-10 shrink-0 items-center justify-center rounded-full text-[var(--Text-Low-Emphasis)] transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)] hover:text-[var(--Text-High-Emphasis)] focus-visible:ring-2 focus-visible:ring-[var(--Focus-High-Emphasis)] focus-visible:outline-hidden"
 //                 aria-label="閉じる"
 //               >
 //                 <XIcon className="size-5" />
@@ -14827,7 +15169,7 @@ export {
 //                       "flex w-full items-center gap-3 px-4 py-3 transition-colors",
 //                       isActive
 //                         ? "text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)]"
-//                         : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
+//                         : "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]",
 //                     )
 //                     const rowContent = (
 //                       <>
@@ -14845,7 +15187,9 @@ export {
 //                         aria-current={isActive ? "page" : undefined}
 //                         // クライアント遷移（linkComponent）ではページが再読み込みされないため、
 //                         // リンクを押したらドロワーを閉じる（素の <a> でも閉じてから遷移して問題ない）
-//                         onClick={() => onOpenChange?.(false)}
+//                         onClick={(event: React.MouseEvent<HTMLElement>) => {
+//                           if (shouldCloseDrawerOnLinkClick(event)) onOpenChange?.(false)
+//                         }}
 //                       >
 //                         {rowContent}
 //                       </LinkTag>
@@ -14856,12 +15200,14 @@ export {
 //                     )
 //                   })()}
 //                   {hasSubMenu && (
-//                     <div className="bg-[var(--Surface-Secondary)] dark:bg-[var(--Primitive-Gray-900)]">
+//                     <div className="bg-[var(--Surface-Neutral-Secondary)] dark:bg-[var(--Primitive-Gray-900)]">
 //                       {item.subMenus!.map((sub) => (
 //                         <LinkTag
 //                           key={sub.label}
 //                           href={sub.href}
-//                           onClick={() => onOpenChange?.(false)}
+//                           onClick={(event: React.MouseEvent<HTMLElement>) => {
+//                             if (shouldCloseDrawerOnLinkClick(event)) onOpenChange?.(false)
+//                           }}
 //                           // py-2.5(10px×2) + typo-body-md の行高 24.5px = 44.5px で既に 44px を満たすが、
 //                           // 行高の変動に左右されないよう min-h-11 で下限を固定する。
 //                           className="flex min-h-11 items-center px-12 py-2.5 typo-body-md text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
@@ -15545,7 +15891,7 @@ export {
 //             {...wrapperProps}
 //             className={cn(
 //               "flex shrink-0 flex-col items-center gap-1 rounded-lg p-1 transition-colors",
-//               isInteractive && "hover:bg-[var(--Surface-Secondary)]",
+//               isInteractive && "hover:bg-[var(--Surface-Neutral-Secondary)]",
 //               item.isSelected && "bg-[var(--Surface-Accent-Primary-Light)]"
 //             )}
 //           >
@@ -15779,7 +16125,7 @@ export {
 //         // 枠はこのラッパーが描く（内側の Textarea はリングを消している）
 //         FOCUS_RING_WITHIN,
 //         disabled &&
-//           "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Secondary)]",
+//           "border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Neutral-Secondary)]",
 //         className
 //       )}
 //     >
@@ -15986,7 +16332,7 @@ export {
 //   const isSoldOut = soldOut && !selected
 // 
 //   const soldOutStyles = isSoldOut
-//     ? "border border-[var(--Text-Disable)] bg-[var(--Surface-Secondary)] text-[var(--Text-Disable)]"
+//     ? "border border-[var(--Text-Disable)] bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Disable)]"
 //     : undefined
 // 
 //   const countBadge = count !== undefined && (
@@ -15995,7 +16341,7 @@ export {
 //         "inline-flex items-center justify-center rounded-full px-1.5 min-w-[1.25rem] typo-label-xs transition-colors",
 //         selected
 //           ? "bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)]"
-//           : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]"
+//           : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Medium-Emphasis)]"
 //       )}
 //     >
 //       {count}
@@ -16268,10 +16614,15 @@ export {
 // import { Popover, PopoverContent, PopoverTrigger } from "@/components/foundations/popover"
 // import { resolveFieldAria, useFieldLabelling } from "@/lib/field-labelling"
 // import { HIGH_CONTRAST_OUTLINE } from "@/lib/high-contrast"
+// import { matchesSearch } from "@/lib/search-normalize"
 // 
 // export interface ComboboxOption {
 //   value: string
 //   label: string
+//   /**
+//    * 絞り込みに使う別名（読み・略称など）。label と同じく、大文字小文字・全角半角・
+//    * ひらがな/カタカナ・漢字に挟まれた「ヶ/ケ/ヵ/が」の違いを区別せずに部分一致で当てる
+//    */
 //   keywords?: string[]
 //   disabled?: boolean
 // }
@@ -16299,6 +16650,8 @@ export {
 //    * トリガーのアクセシブルネーム（日本語）。
 //    * `role="combobox"` は内容からは名前が付かないため、FormField の外で単体利用する
 //    * ときはこれか `aria-labelledby` を指定する（未指定時は placeholder を名前に使う）。
+//    * 選択中は、この名前（FormField 配下では FormField のラベル）の後ろに選択中の値が続く
+//    * （例「都道府県 東京都」）。
 //    */
 //   "aria-label"?: string
 //   /** ラベル要素の id を直接指定する場合 */
@@ -16338,6 +16691,29 @@ export {
 //   // （role="combobox" は内容からアクセシブルネームを得られないため）
 //   const fallbackLabel =
 //     !field && !ariaLabel && !ariaLabelledby ? placeholder : undefined
+//   // 候補一覧のポップアップ（role="dialog"）の名前。トリガーと同じ名前の出どころ（利用側の
+//   // aria-labelledby → aria-label / placeholder → FormField のラベル）を使う。無名の dialog にしない
+//   const popupName = ariaLabelledby
+//     ? { "aria-labelledby": ariaLabelledby }
+//     : (ariaLabel ?? fallbackLabel)
+//       ? { "aria-label": ariaLabel ?? fallbackLabel }
+//       : field
+//         ? { "aria-labelledby": field.labelId }
+//         : {}
+//   /**
+//    * 選択中は読み上げ名に値を足す（「都道府県 東京都」）。トリガーの表示文字は
+//    * aria-label / aria-labelledby があると名前計算に使われないため、値の要素を aria-labelledby で指す。
+//    * 名前の先頭は 利用側の aria-labelledby → aria-label（または placeholder）→ FormField のラベル の順。
+//    * aria-label は id を持たないので、同じ文字の隠し要素を作って指す。
+//    * 未選択のときは従来どおり（名前に placeholder を重ねない）。
+//    */
+//   const baseId = React.useId()
+//   const valueId = `${baseId}-value`
+//   const nameTextId = `${baseId}-name`
+//   const nameText = ariaLabelledby ? undefined : (ariaLabel ?? fallbackLabel)
+//   const nameHead = ariaLabelledby ?? (nameText ? nameTextId : field?.labelId)
+//   const selectedNameAria =
+//     selected && nameHead ? { "aria-labelledby": `${nameHead} ${valueId}` } : {}
 //   return (
 //     <Popover open={open} onOpenChange={setOpen}>
 //       <PopoverTrigger asChild>
@@ -16353,6 +16729,7 @@ export {
 //           aria-label={ariaLabel ?? fallbackLabel}
 //           aria-labelledby={ariaLabelledby}
 //           {...fieldAria}
+//           {...selectedNameAria}
 //           disabled={disabled}
 //           className={cn(
 //             "w-full justify-between bg-[var(--Surface-Primary)]",
@@ -16369,14 +16746,24 @@ export {
 //             className
 //           )}
 //         >
-//           <span className={selected ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]"}>
+//           <span
+//             id={selected ? valueId : undefined}
+//             className={selected ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]"}
+//           >
 //             {selected?.label ?? placeholder}
 //           </span>
+//           {selected && nameText && (
+//             <span id={nameTextId} hidden>
+//               {nameText}
+//             </span>
+//           )}
 //           <ChevronsUpDown aria-hidden="true" className="text-[var(--Object-Medium-Emphasis)]" />
 //         </Button>
 //       </PopoverTrigger>
-//       <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] p-0">
-//         <Command>
+//       <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] p-0" {...popupName}>
+//         {/* 既定の cmdk の絞り込み（大文字小文字だけそろえる）では「しぶや」で「シブヤ」、「市ケ谷」で
+//             「市ヶ谷」に当たらないため、表記ゆれをそろえた部分一致に差し替える */}
+//         <Command filter={(itemValue, search, keywords) => (matchesSearch(keywords ?? [itemValue], search) ? 1 : 0)}>
 //           <CommandInput placeholder={searchPlaceholder} />
 //           <CommandList>
 //             <CommandEmpty>{emptyLabel}</CommandEmpty>
@@ -16385,6 +16772,7 @@ export {
 //                 <CommandItem
 //                   key={option.value}
 //                   value={[option.label, ...(option.keywords ?? [])].join(" ")}
+//                   keywords={[option.label, ...(option.keywords ?? [])]}
 //                   disabled={option.disabled}
 //                   onSelect={() => {
 //                     onValueChange?.(option.value)
@@ -16655,6 +17043,7 @@ export {
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // 
 // import { cn } from "@/lib/utils"
+// import { FOCUS_RING_ONLY } from "@/lib/focus-ring"
 // import { usePrefersReducedMotion } from "@/lib/use-prefers-reduced-motion"
 // 
 // export type ContentCarouselItemsPerView = 1 | 2 | 3 | 4
@@ -16864,7 +17253,7 @@ export {
 //       <div
 //         ref={scrollRef}
 //         className={cn(
-//           "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-none",
+//           "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-hide",
 //           // peek: 端の余白 = Container の gutter（外に置いたときは 16px）。Container の中では
 //           // gutter 分だけ外へはみ出して画面端までスクロールさせる。scroll-padding も同じ幅にして、
 //           // スナップ後も端の余白が消えないようにする。PC (@[960px]:) では peek しないので外す
@@ -16901,7 +17290,7 @@ export {
 //             type="button"
 //             onClick={prev}
 //             aria-label="前へ"
-//             className="absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100"
+//             className={`absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Neutral-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100 @[960px]:focus-visible:opacity-100 focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //           >
 //             <ArrowLeft2 size={20} className="text-[var(--Object-High-Emphasis)]" />
 //           </button>
@@ -16909,7 +17298,7 @@ export {
 //             type="button"
 //             onClick={next}
 //             aria-label="次へ"
-//             className="absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100"
+//             className={`absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Neutral-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100 @[960px]:focus-visible:opacity-100 focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //           >
 //             <ArrowRight2 size={20} className="text-[var(--Object-High-Emphasis)]" />
 //           </button>
@@ -16927,10 +17316,11 @@ export {
 //               aria-label={`スライド ${i + 1}`}
 //               className={cn(
 //                 // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
-//                 "size-2 shrink-0 rounded-full transition-colors",
+//                 "size-2 shrink-0 rounded-full transition-colors focus-visible:outline-none",
+//                 FOCUS_RING_ONLY,
 //                 i === activeIndex
 //                   ? "bg-[var(--Text-High-Emphasis)]"
-//                   : "bg-[var(--Surface-Tertiary)]"
+//                   : "bg-[var(--Surface-Neutral-Tertiary)]"
 //               )}
 //             />
 //           ))}
@@ -16967,9 +17357,9 @@ export {
 //  * そのまま読み書きする。UTC 保存が必要な consumer は送信前に自前で変換すること。
 //  *
 //  * ### クリア（任意項目のとき）
-//  * `clearable` を渡すと trigger 右端に × を出し、押すと `onChange(undefined)` を呼ぶ。
-//  * 未指定だとクリア手段が「カレンダーを開いて選択済みの日付を再クリック」だけになり
-//  * 画面から発見できないため、**null 許容の項目では `clearable` を付ける**。
+//  * カレンダーで選択中の日をもう一度押しても値は消えない（同じ日のまま閉じる）。
+//  * 値を消す手段は `clearable` の × だけで、押すと `onChange(undefined)` を呼ぶ。
+//  * **null 許容の項目では `clearable` を付ける**（付けないと一度入れた値を空に戻せない）。
 //  *
 //  * ### 日付変更時の時刻の扱い（DateTimePicker）
 //  * カレンダーが返す `Date` はその日の 00:00:00 だが、`DateTimePicker` は
@@ -17051,13 +17441,18 @@ export {
 //   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。既定「日付をクリア」 */
@@ -17085,6 +17480,7 @@ export {
 //   min,
 //   max,
 //   disabledDates,
+//   defaultMonth,
 //   disabled,
 //   clearable = false,
 //   clearLabel = "日付をクリア",
@@ -17130,7 +17526,7 @@ export {
 //             data-empty={!value}
 //             className={cn(
 //               // h-11（44px）= 入力コントロールの共通高さ（Input / SelectTrigger / Button default と揃える）
-//               "h-11 w-full justify-start gap-2 border border-[var(--Border-High-Emphasis)] bg-transparent px-3 typo-body-md text-[var(--Text-High-Emphasis)] hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] data-[empty=true]:text-[var(--Text-Low-Emphasis)]",
+//               "h-11 w-full justify-start gap-2 border border-[var(--Border-High-Emphasis)] bg-transparent px-3 typo-body-md text-[var(--Text-High-Emphasis)] hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)] data-[empty=true]:text-[var(--Text-Low-Emphasis)]",
 //               // エラー時の枠は Input / Select と同じ Border-Caution（Button 共通の destructive を上書き）
 //               "aria-invalid:border-[var(--Border-Caution)]",
 //               // クリアボタンの領域を空ける
@@ -17146,7 +17542,13 @@ export {
 //         <PopoverContent className="w-auto p-0" align="start">
 //           <Calendar
 //             mode="single"
+//             // 選択中の日の再押下で値を消さない（誤操作で消えて気付けないため）。
+//             // 再押下では同じ日が返り、そのまま閉じる。クリアは clearable の × で明示的に行う
+//             required
 //             selected={value}
+//             // 開くたびに選択中の日の月を表示する（PopoverContent は閉じると外れるので、開くたびに効く）。
+//             // 指定が無いと今月が開き、別の月の値では選択中の日が見えなかった
+//             defaultMonth={defaultMonth ?? value}
 //             onSelect={(date) => {
 //               onChange?.(date)
 //               setOpen(false)
@@ -17430,7 +17832,7 @@ export {
 //       {...props}
 //     >
 //       {/* 皿 */}
-//       <ellipse cx="100" cy="146" rx="74" ry="11" fill="var(--Surface-Tertiary)" />
+//       <ellipse cx="100" cy="146" rx="74" ry="11" fill="var(--Surface-Neutral-Tertiary)" />
 //       {/* ケーキ本体 */}
 //       <path
 //         d="M42 96 h116 v26 a14 14 0 0 1 -14 14 H56 a14 14 0 0 1 -14 -14 Z"
@@ -17461,8 +17863,8 @@ export {
 //       <circle cx="100" cy="86" r="5" fill="var(--Surface-Primary)" stroke="currentColor" strokeWidth="2.5" />
 //       {/* 宙に浮く「見つからない」感を出す小片 */}
 //       <circle cx="163" cy="66" r="4" fill="var(--Brand-Cake-Orange)" />
-//       <circle cx="150" cy="52" r="3" fill="var(--Surface-Tertiary)" />
-//       <circle cx="40" cy="70" r="3.5" fill="var(--Surface-Tertiary)" />
+//       <circle cx="150" cy="52" r="3" fill="var(--Surface-Neutral-Tertiary)" />
+//       <circle cx="40" cy="70" r="3.5" fill="var(--Surface-Neutral-Tertiary)" />
 //     </svg>
 //   )
 // }
@@ -17694,7 +18096,7 @@ export {
 //         {/* フィルターアイコン — 本番 p-search-filter-nav__icon */}
 //         <button
 //           type="button"
-//           className="relative flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80"
+//           className="relative flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80"
 //           onClick={onMoreFilters}
 //           aria-label="絞り込み"
 //         >
@@ -17716,7 +18118,7 @@ export {
 //               "flex h-9 shrink-0 items-center gap-0.5 rounded-full px-2.5 typo-body-md transition-colors max-w-[180px]",
 //               filter.isActive
 //                 ? "bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)] dark:bg-[var(--Brand-Cake-Orange)] dark:text-[var(--Primitive-White-alpha-1000)] dark:ring-0"
-//                 : "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
+//                 : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
 //             )}
 //           >
 //             <span className="truncate">{filter.isActive && filter.value ? filter.value : filter.label}</span>
@@ -17757,7 +18159,7 @@ export {
 //                 "flex h-9 shrink-0 items-center gap-0.5 rounded-full px-3 typo-body-md transition-colors @md:hidden",
 //                 sortLabel
 //                   ? "bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)] dark:bg-[var(--Brand-Cake-Orange)] dark:text-[var(--Primitive-White-alpha-1000)] dark:ring-0"
-//                   : "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
+//                   : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
 //               )}
 //             >
 //               <SortIcon className="size-4" />
@@ -17773,7 +18175,7 @@ export {
 //               <button
 //                 type="button"
 //                 onClick={onSortClick}
-//                 className="flex items-center gap-1 rounded-full bg-[var(--Surface-Tertiary)] px-3 py-1.5 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80"
+//                 className="flex items-center gap-1 rounded-full bg-[var(--Surface-Neutral-Tertiary)] px-3 py-1.5 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80"
 //               >
 //                 {sortLabel}
 //                 <ArrowDown2 size={12} />
@@ -17953,7 +18355,7 @@ export {
 //         className="overflow-hidden transition-[max-height] duration-[var(--Motion-Duration-Base)] ease-in-out"
 //         style={{ maxHeight: isOpen ? `${contentHeight}px` : "0px" }}
 //       >
-//         <div className="bg-[var(--Surface-Secondary)]">
+//         <div className="bg-[var(--Surface-Neutral-Secondary)]">
 //           {children}
 //         </div>
 //       </div>
@@ -18466,7 +18868,7 @@ export {
 //           </span>
 //         )}
 //         {optional && (
-//           <span className="inline-flex items-center px-1.5 py-0.5 rounded bg-[var(--Surface-Tertiary)] typo-label-xs text-[var(--Text-Low-Emphasis)]">
+//           <span className="inline-flex items-center px-1.5 py-0.5 rounded bg-[var(--Surface-Neutral-Tertiary)] typo-label-xs text-[var(--Text-Low-Emphasis)]">
 //             任意
 //           </span>
 //         )}
@@ -18583,7 +18985,7 @@ export {
 //  *   で表す。各ステップはドット（上）＋ラベル（下）の縦積みで、コネクタ線はドット中心の
 //  *   高さで隣ステップ中心まで引く。ラベルは SP でも省略しない。
 //  * - `bottomAction` を渡すと本文の下余白はシェルが管理する（二重がけ／付け忘れの構造的防止）。
-//  * - 地が Surface-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
+//  * - 地が Surface-Neutral-Secondary なので、配下 `Card` の既定サーフェスを白にする文脈
 //  *   （`--card-surface`）をシェルが宣言する。`Card` は `surface` 未指定のまま地から浮く（#150）。
 //  *
 //  * 管理画面の集中編集は `WorkspaceShell`（EC 購入導線＝本コンポーネント）。
@@ -18608,9 +19010,9 @@ export {
 //     <div
 //       data-slot="funnel-shell"
 //       className={cn(
-//         // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
+//         // 地が Surface-Neutral-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
 //         // （#150 の Section と同じ仕組み。dark は半透明白が重なって浮くため据え置き）。
-//         "@container flex min-h-dvh flex-col bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+//         "@container flex min-h-dvh flex-col bg-[var(--Surface-Neutral-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
 //         className
 //       )}
 //     >
@@ -18906,7 +19308,7 @@ export {
 //     "px-3 py-1.5 typo-body-md rounded-md transition-colors whitespace-nowrap",
 //     isActive
 //       ? "text-[var(--Text-High-Emphasis)] font-bold"
-//       : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+//       : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]"
 //   )
 // }
 // 
@@ -19523,7 +19925,7 @@ export {
 //         // （axe: scrollable-region-focusable）。DS 標準のフォーカスリングを併せて付ける。
 //         tabIndex={0}
 //         className={cn(
-//           "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-none",
+//           "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-hide",
 //           `focus-visible:outline-none ${FOCUS_RING_ONLY}`,
 //           // peek: 端の余白 = Container の gutter（外に置いたときは 16px）。Container の中では
 //           // gutter 分だけ外へはみ出して画面端までスクロールさせる。scroll-padding も同じ幅にして、
@@ -19597,7 +19999,7 @@ export {
 //             type="button"
 //             onClick={prev}
 //             aria-label="前へ"
-//             className="absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100"
+//             className={`absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Neutral-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100 @[960px]:focus-visible:opacity-100 focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //           >
 //             <ArrowLeft2 size={20} className="text-[var(--Object-High-Emphasis)]" />
 //           </button>
@@ -19605,7 +20007,7 @@ export {
 //             type="button"
 //             onClick={next}
 //             aria-label="次へ"
-//             className="absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100"
+//             className={`absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Neutral-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100 @[960px]:focus-visible:opacity-100 focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //           >
 //             <ArrowRight2 size={20} className="text-[var(--Object-High-Emphasis)]" />
 //           </button>
@@ -19623,10 +20025,11 @@ export {
 //               aria-label={`スライド ${i + 1}`}
 //               className={cn(
 //                 // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
-//                 "size-2 shrink-0 rounded-full transition-colors",
+//                 "size-2 shrink-0 rounded-full transition-colors focus-visible:outline-none",
+//                 FOCUS_RING_ONLY,
 //                 i === activeIndex
 //                   ? "bg-[var(--Text-High-Emphasis)]"
-//                   : "bg-[var(--Surface-Tertiary)]"
+//                   : "bg-[var(--Surface-Neutral-Tertiary)]"
 //               )}
 //             />
 //           ))}
@@ -19646,6 +20049,7 @@ export {
 // import ArrowRight2 from "iconsax-reactjs/dist/esm/ArrowRight2.js"
 // 
 // import { cn } from "@/lib/utils"
+// import { FOCUS_RING_ONLY } from "@/lib/focus-ring"
 // import { reconcileImageIndex } from "@/lib/image-index"
 // 
 // export interface ImageGalleryProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -19753,9 +20157,9 @@ export {
 //           )}
 //         </div>
 // 
-//         {/* サムネイル列（左側・縦並び） */}
+//         {/* サムネイル列（左側・縦並び）。overflow の領域がフォーカスリング（3px）を切り取るので、4px の余白を内側に取り、同じ分だけ負マージンで外へ戻す（静止時のレイアウトは不変） */}
 //         {images.length > 1 && (
-//           <div className="flex w-16 shrink-0 flex-col gap-2 overflow-y-auto scrollbar-hide">
+//           <div className="-m-1 box-content flex w-16 shrink-0 flex-col gap-2 overflow-y-auto p-1 scrollbar-hide">
 //             {images.map((img, i) => (
 //               <button
 //                 key={i}
@@ -19763,7 +20167,8 @@ export {
 //                 onClick={() => goTo(i)}
 //                 onMouseOver={() => goTo(i)}
 //                 className={cn(
-//                   "size-16 shrink-0 overflow-hidden rounded-lg border-2 transition-colors",
+//                   "size-16 shrink-0 overflow-hidden rounded-lg border-2 transition-colors focus-visible:outline-none",
+//                   FOCUS_RING_ONLY,
 //                   i === safeCurrentIndex
 //                     ? "border-[var(--Border-Accent-Primary)]"
 //                     : "border-transparent opacity-60 hover:opacity-100"
@@ -19810,7 +20215,7 @@ export {
 //           <>
 //             <button
 //               type="button"
-//               className="absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]"
+//               className={`absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)] focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //               onClick={() => goTo(safeCurrentIndex - 1)}
 //               aria-label="前の画像"
 //             >
@@ -19818,7 +20223,7 @@ export {
 //             </button>
 //             <button
 //               type="button"
-//               className="absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]"
+//               className={`absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)] focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //               onClick={() => goTo(safeCurrentIndex + 1)}
 //               aria-label="次の画像"
 //             >
@@ -19844,7 +20249,7 @@ export {
 //               type="button"
 //               onClick={() => goTo(i)}
 //               // shrink-0 必須: 中身が空なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
-//               className="flex h-6 shrink-0 items-center justify-center px-0.5"
+//               className={`flex h-6 shrink-0 items-center justify-center rounded-full px-0.5 focus-visible:outline-none ${FOCUS_RING_ONLY}`}
 //               aria-label={`画像 ${i + 1}`}
 //             >
 //               <span
@@ -19860,16 +20265,21 @@ export {
 //         </div>
 //       )}
 // 
-//       {/* Thumbnails */}
+//       {/* Thumbnails。overflow の領域がフォーカスリング（3px）を切り取るので、4px の余白を内側に取り、負マージンで外へ戻す。
+//           上下と左は余白と負マージンが相殺されるので、サムネイルの位置（先頭は root の左端）と列の高さは余白が無いときと同じ。
+//           右は負マージンを使わない: 画面幅いっぱいに置いたとき右へ 4px はみ出して横スクロールが生まれるため（左のはみ出しはスクロールにならない）。
+//           その代わり、列の中身の幅は root より 4px 狭くなる（左の余白 4px + 右の余白 4px − 左へはみ出した 4px）。
+//           サムネイルの合計幅がちょうどその境目（root − 4px 超 root 以下）のときだけ、列の中に数 px の横スクロールが出うる。許容している */}
 //       {showThumbnails && images.length > 1 && (
-//         <div className="flex gap-1.5 overflow-x-auto scrollbar-hide">
+//         <div className="-my-1 -ml-1 flex gap-1.5 overflow-x-auto p-1 scrollbar-hide">
 //           {images.map((img, i) => (
 //             <button
 //               key={i}
 //               type="button"
 //               onClick={() => goTo(i)}
 //               className={cn(
-//                 "size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors",
+//                 "size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:outline-none",
+//                 FOCUS_RING_ONLY,
 //                 i === safeCurrentIndex
 //                   ? "border-[var(--Brand-Cake-Orange)]"
 //                   : "border-transparent opacity-60 hover:opacity-100"
@@ -19987,7 +20397,7 @@ export {
 //  * landscape は OGP 相当の 1200:630（≒1.9:1）。
 //  */
 // const imageInputPreviewVariants = cva(
-//   "relative w-full overflow-hidden rounded-lg bg-[var(--Surface-Tertiary)]",
+//   "relative w-full overflow-hidden rounded-lg bg-[var(--Surface-Neutral-Tertiary)]",
 //   {
 //     variants: {
 //       aspect: {
@@ -20194,7 +20604,7 @@ export {
 //           imageInputPreviewVariants({ aspect, size }),
 //           hasPreview
 //             ? "border border-[var(--Border-Low-Emphasis)]"
-//             : // 未選択の破線枠は地（Surface-Tertiary）とのコントラストを確保するため High-Emphasis。
+//             : // 未選択の破線枠は地（Surface-Neutral-Tertiary）とのコントラストを確保するため High-Emphasis。
 //               // Medium-Emphasis はダークモードで地と同値になり枠が消える
 //               "border-2 border-dashed border-[var(--Border-High-Emphasis)]"
 //         )}
@@ -20339,7 +20749,7 @@ export {
 //       {images.map((image, i) => (
 //         <div
 //           key={i}
-//           className="relative aspect-square rounded-xl bg-[var(--Surface-Tertiary)] border border-[var(--Border-Low-Emphasis)] overflow-hidden group"
+//           className="relative aspect-square rounded-xl bg-[var(--Surface-Neutral-Tertiary)] border border-[var(--Border-Low-Emphasis)] overflow-hidden group"
 //         >
 //           <img
 //             src={image.src}
@@ -20408,9 +20818,13 @@ export {
 //  * | Prop | 型 | デフォルト | 説明 |
 //  * |------|-----|-----------|------|
 //  * | items | { label, icon?, onClick, destructive? }[] | — | メニュー項目 |
+//  * | menuLabel | string | "メニュー" | トリガーの読み上げ名（aria-label） |
 //  *
 //  * ### AI 向け使用ルール
 //  * - テーブル行のアクション列に使用
+//  * - 一覧の各行に置くときは `menuLabel` に行を特定できる名前を渡す（例: `${商品名}のメニュー`）。
+//  *   全部「メニュー」だと読み上げで区別できない
+//  * - 見た目は 32px のまま、当たり判定は `tap-target` で 44px に広げている。隣のボタンとの間は 12px 以上空ける
 //  * - DropdownMenu を内部で利用
 //  */
 // import * as React from "react"
@@ -20421,6 +20835,7 @@ export {
 //   DropdownMenuItem,
 //   DropdownMenuTrigger,
 // } from "@/components/foundations/dropdown-menu"
+// import { FOCUS_RING_ONLY } from "@/lib/focus-ring"
 // import More from "iconsax-reactjs/dist/esm/More.js"
 // 
 // export interface KebabMenuItem {
@@ -20437,21 +20852,29 @@ export {
 // export interface KebabMenuProps {
 //   /** メニュー項目 */
 //   items: KebabMenuItem[]
+//   /**
+//    * トリガーボタンの読み上げ名（aria-label）。既定は「メニュー」。
+//    * 一覧の各行に置くときは「○○のメニュー」のように対象が分かる名前にする
+//    */
+//   menuLabel?: string
 //   /** 追加クラス */
 //   className?: string
 // }
 // 
-// export function KebabMenu({ items, className }: KebabMenuProps) {
+// export function KebabMenu({ items, menuLabel = "メニュー", className }: KebabMenuProps) {
 //   return (
 //     <DropdownMenu>
 //       <DropdownMenuTrigger asChild>
 //         <button
 //           className={cn(
 //             // shrink-0 必須: 長いタイトルと同じ flex row に並ぶため、既定の flex-shrink:1 だと 32px が潰れる
-//             "flex items-center justify-center size-8 shrink-0 rounded-md hover:bg-[var(--Surface-Secondary)] transition-colors",
+//             // tap-target: 見た目は 32px のまま、透明な疑似要素で当たり判定だけ 44px に広げる
+//             "tap-target flex items-center justify-center size-8 shrink-0 rounded-md hover:bg-[var(--Surface-Neutral-Secondary)] transition-colors focus-visible:outline-none",
+//             // 枠が無いのでリングだけ（フォーカスしていないときの見た目は変わらない）
+//             FOCUS_RING_ONLY,
 //             className
 //           )}
-//           aria-label="メニュー"
+//           aria-label={menuLabel}
 //           data-slot="kebab-menu"
 //         >
 //           <More size={16} className="text-[var(--Text-Low-Emphasis)]" />
@@ -20636,8 +21059,8 @@ export {
 //   const rowClassName = cn(
 //     "relative flex w-full items-center gap-2 bg-[var(--Surface-Primary)] px-4 rounded-lg",
 //     minHeightClass,
-//     selected && "bg-[var(--Surface-Secondary)]",
-//     interactive && "transition-colors hover:bg-[var(--Surface-Tertiary)]",
+//     selected && "bg-[var(--Surface-Neutral-Secondary)]",
+//     interactive && "transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)]",
 //     isButton &&
 //       `cursor-pointer focus-visible:outline-none ${FOCUS_RING_ONLY}`,
 //     isButton && LIST_ITEM_FOCUS_INSET,
@@ -20700,7 +21123,7 @@ export {
 // 
 //       {/* Border */}
 //       {showBorder && resolvedSize !== "lg" && (
-//         <div className="absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Secondary)]" aria-hidden />
+//         <div className="absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Neutral-Secondary)]" aria-hidden />
 //       )}
 //       {showBorder && resolvedSize === "lg" && (
 //         <div className="absolute bottom-0 left-4 right-4 h-px bg-[var(--Border-Medium-Emphasis)]" aria-hidden />
@@ -20845,7 +21268,7 @@ export {
 //  *   既定値のままで prefers-reduced-motion のトークン制御が効かない。
 //  */
 // const menuRowClass =
-//   "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] active:bg-[var(--Surface-Tertiary)]"
+//   "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Neutral-Secondary)] active:bg-[var(--Surface-Neutral-Tertiary)]"
 // 
 // function MenuDrawer({
 //   userName,
@@ -21168,6 +21591,15 @@ export {
 //   // FormField の外で単体利用され、名前の指定も無いときは placeholder を名前にする
 //   const fallbackLabel =
 //     !field && !ariaLabel && !ariaLabelledby ? placeholder : undefined
+//   // 候補一覧のポップアップ（role="dialog"）の名前。トリガーと同じ名前の出どころ（利用側の
+//   // aria-labelledby → aria-label / placeholder → FormField のラベル）を使う。無名の dialog にしない
+//   const popupName = ariaLabelledby
+//     ? { "aria-labelledby": ariaLabelledby }
+//     : (ariaLabel ?? fallbackLabel)
+//       ? { "aria-label": ariaLabel ?? fallbackLabel }
+//       : field
+//         ? { "aria-labelledby": field.labelId }
+//         : {}
 //   const toggle = (next: string) =>
 //     onValueChange?.(value.includes(next) ? value.filter((item) => item !== next) : [...value, next])
 // 
@@ -21236,7 +21668,7 @@ export {
 //             <ChevronsUpDown aria-hidden="true" className="text-[var(--Object-Medium-Emphasis)]" />
 //           </Button>
 //         </PopoverTrigger>
-//         <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] p-0">
+//         <PopoverContent align="start" className="w-[var(--radix-popover-trigger-width)] p-0" {...popupName}>
 //           <Command>
 //             <CommandInput placeholder={searchPlaceholder} />
 //             <CommandList>
@@ -21500,7 +21932,7 @@ export {
 //           <Wrapper
 //             key={item.id}
 //             {...(item.href ? { href: item.href } : {})}
-//             className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-[var(--Surface-Secondary)]"
+//             className="flex items-center gap-3 px-4 py-3 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)]"
 //           >
 //             <span className="typo-body-sm text-[var(--Text-Low-Emphasis)] shrink-0 w-[88px]">
 //               {item.date}
@@ -21521,7 +21953,7 @@ export {
 //           <Wrapper
 //             key={item.id}
 //             {...(item.href ? { href: item.href } : {})}
-//             className="flex items-start gap-3 px-4 py-3.5 transition-colors hover:bg-[var(--Surface-Secondary)]"
+//             className="flex items-start gap-3 px-4 py-3.5 transition-colors hover:bg-[var(--Surface-Neutral-Secondary)]"
 //           >
 //             {/* Unread dot */}
 //             <div className="flex shrink-0 items-center pt-1.5">
@@ -21563,6 +21995,25 @@ export {
 // import { HIGH_CONTRAST_OUTLINE } from "@/lib/high-contrast"
 // import { mergeIdRefs, useFieldLabelling } from "@/lib/field-labelling"
 // 
+// /** 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"> {
 //   /** 現在の値（制御） */
@@ -21599,6 +22050,23 @@ export {
 //   /** 入力欄の 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
+//   /**
 //    * 入力欄・増減ボタンの読み上げラベル。既定はカート数量向けの「数量」。
 //    * 価格・在庫など数量以外に使うときは必ず指定する（例: "販売価格"）。
 //    * FormField 配下で未指定のときは FormField のラベルが名前になる
@@ -21667,6 +22135,9 @@ export {
 //   formatOptions,
 //   locale = "ja-JP",
 //   inputId,
+//   name,
+//   inputRef,
+//   inputProps,
 //   label: labelProp,
 //   ...props
 // }: NumberInputProps) {
@@ -21755,6 +22226,8 @@ export {
 //   }
 // 
 //   const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+//     inputProps?.onKeyDown?.(e)
+//     if (e.defaultPrevented) return
 //     if (e.key === "Enter") {
 //       handleInputBlur()
 //       return
@@ -21769,6 +22242,40 @@ export {
 //     }
 //   }
 // 
+//   /**
+//    * 入力欄に共通で付ける属性（md / sm 共通）。利用側の inputProps は先に展開し、値・id・イベントは
+//    * 部品側で上書きする（利用側の onFocus / onBlur は部品の処理の後、onKeyDown は handleInputKeyDown の
+//    * 先頭で呼ぶ。onKeyDown は restInputProps に残るが下の onKeyDown で上書きされる）
+//    */
+//   const { onFocus: onInputFocus, onBlur: onInputBlur, className: inputClassName, ...restInputProps } = inputProps ?? {}
+//   // 表示が素の数値のときだけ入力欄に name を付ける。桁区切り表示では hidden input に素の数値を持たせる
+//   const nameOnInput = editable && !formatOptions ? name : undefined
+//   const hiddenValueInput =
+//     name !== undefined && nameOnInput === undefined ? (
+//       <input type="hidden" name={name} value={current} disabled={disabled} form={inputProps?.form} />
+//     ) : null
+//   const sharedInputProps = {
+//     ...restInputProps,
+//     ref: inputRef,
+//     name: nameOnInput,
+//     type: "text",
+//     inputMode: "numeric" as const,
+//     pattern: "[0-9]*",
+//     id: resolvedInputId,
+//     onFocus: (e: React.FocusEvent<HTMLInputElement>) => {
+//       setEditing(true)
+//       setInputValue(String(current))
+//       onInputFocus?.(e)
+//     },
+//     onChange: handleInputChange,
+//     onBlur: (e: React.FocusEvent<HTMLInputElement>) => {
+//       handleInputBlur()
+//       onInputBlur?.(e)
+//     },
+//     onKeyDown: handleInputKeyDown,
+//     disabled,
+//   }
+// 
 //   /** 非編集時の表示。Intl の JPY は全角 ￥ を返すが、DS の価格表記は半角 ¥ */
 //   const display = editing
 //     ? inputValue
@@ -21788,7 +22295,7 @@ export {
 //           // px-1（4px）は上下の余白（(36-28)/2 = 4px）と揃える値。
 //           // ホバー時の円が外枠に対して上下左右とも同じ内側余白で収まる
 //           // shrink-0 必須: カート行など flex row の子として置かれるため、既定の flex-shrink:1 だと 108px が潰れる
-//           "inline-flex h-9 w-[108px] shrink-0 items-center justify-between rounded-full bg-[var(--Surface-Tertiary)] px-1",
+//           "inline-flex h-9 w-[108px] shrink-0 items-center justify-between rounded-full bg-[var(--Surface-Neutral-Tertiary)] px-1",
 //           HIGH_CONTRAST_OUTLINE,
 //           invalid && "ring-2 ring-[var(--Surface-Caution)]",
 //           disabled && "cursor-not-allowed",
@@ -21820,26 +22327,16 @@ export {
 // 
 //         {editable ? (
 //           <input
-//             type="text"
-//             inputMode="numeric"
-//             pattern="[0-9]*"
-//             id={resolvedInputId}
+//             {...sharedInputProps}
 //             value={display}
-//             onFocus={() => {
-//               setEditing(true)
-//               setInputValue(String(current))
-//             }}
-//             onChange={handleInputChange}
-//             onBlur={handleInputBlur}
-//             onKeyDown={handleInputKeyDown}
-//             disabled={disabled}
 //             className={cn(
 //               "w-7 shrink-0 rounded bg-transparent text-center typo-label-md outline-none transition-colors",
 //               "hover:bg-[var(--Overlay-Light)] focus-visible:bg-[var(--Surface-Primary)]",
 //               FOCUS_RING,
 //               disabled
 //                 ? "text-[var(--Text-Disable)]"
-//                 : "text-[var(--Text-High-Emphasis)]"
+//                 : "text-[var(--Text-High-Emphasis)]",
+//               inputClassName
 //             )}
 //             {...inputAria}
 //             aria-live="polite"
@@ -21874,6 +22371,7 @@ export {
 //         >
 //           <Add size={14} />
 //         </button>
+//         {hiddenValueInput}
 //       </div>
 //     )
 //   }
@@ -21898,7 +22396,7 @@ export {
 //           "flex size-10 shrink-0 items-center justify-center rounded-full border transition-colors outline-none",
 //           FOCUS_RING,
 //           canDecrement || canTrash
-//             ? "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)] active:bg-[var(--Surface-Tertiary)]"
+//             ? "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] active:bg-[var(--Surface-Neutral-Tertiary)]"
 //             : "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
 //         )}
 //         onClick={handleDecrement}
@@ -21915,19 +22413,8 @@ export {
 //       {/* 数値コンテナ */}
 //       {editable ? (
 //         <input
-//           type="text"
-//           inputMode="numeric"
-//           pattern="[0-9]*"
-//           id={resolvedInputId}
+//           {...sharedInputProps}
 //           value={display}
-//           onFocus={() => {
-//             setEditing(true)
-//             setInputValue(String(current))
-//           }}
-//           onChange={handleInputChange}
-//           onBlur={handleInputBlur}
-//           onKeyDown={handleInputKeyDown}
-//           disabled={disabled}
 //           className={cn(
 //             // formatOptions で桁が増えるため、内容に応じて広がるよう min-w にしている
 //             "h-10 shrink-0 rounded-lg border text-center typo-label-lg outline-none transition-colors",
@@ -21939,8 +22426,9 @@ export {
 //               : "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] hover:border-[var(--Border-High-Emphasis)]",
 //             FOCUS_RING,
 //             disabled
-//               ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]"
-//               : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
+//               ? "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Disable)]"
+//               : "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-High-Emphasis)]",
+//             inputClassName
 //           )}
 //           {...inputAria}
 //           aria-live="polite"
@@ -21954,8 +22442,8 @@ export {
 //               ? "border-[var(--Border-Caution)]"
 //               : "border-[var(--Border-Control,var(--Border-Medium-Emphasis))]",
 //             disabled
-//               ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]"
-//               : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
+//               ? "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Disable)]"
+//               : "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-High-Emphasis)]"
 //           )}
 //           aria-live="polite"
 //           aria-atomic="true"
@@ -21971,7 +22459,7 @@ export {
 //           "flex size-10 shrink-0 items-center justify-center rounded-full border transition-colors outline-none",
 //           FOCUS_RING,
 //           canIncrement
-//             ? "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Tertiary)] active:bg-[var(--Surface-Tertiary)]"
+//             ? "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] text-[var(--Object-High-Emphasis)] hover:border-[var(--Border-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)] active:bg-[var(--Surface-Neutral-Tertiary)]"
 //             : "border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
 //         )}
 //         onClick={handleIncrement}
@@ -21980,6 +22468,7 @@ export {
 //       >
 //         <Add size={18} />
 //       </button>
+//       {hiddenValueInput}
 //     </div>
 //   )
 // }
@@ -22166,7 +22655,7 @@ export {
 //  * - チェックアウト・会員登録など段階フロー画面で使用
 //  * - `currentStep` で現在のステップをハイライト
 //  * - 完了済みステップにはチェックマークアイコン
-//  * - アクティブ/完了: Brand-Cake-Orange、未到達: Surface-Tertiary
+//  * - アクティブ/完了: Brand-Cake-Orange、未到達: Surface-Neutral-Tertiary
 //  */
 // function ProgressSteps({
 //   className,
@@ -22198,7 +22687,7 @@ export {
 //                   "flex size-7 items-center justify-center rounded-full typo-label-sm transition-colors",
 //                   isActive
 //                     ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"
-//                     : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Low-Emphasis)]"
+//                     : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Low-Emphasis)]"
 //                 )}
 //                 aria-current={isCurrent ? "step" : undefined}
 //               >
@@ -22512,7 +23001,7 @@ export {
 //     }
 // 
 //     const rootClassName = cn(
-//       "group flex items-center overflow-hidden rounded-lg border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] transition-colors",
+//       "group flex items-center overflow-hidden rounded-lg border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] transition-colors",
 //       // Tailwind の variant 順では focus-within が hover より先に出力される
 //       // ＝ hover が後勝ちしてフォーカス枠を潰すため、hover 側を明示的に抑制する。
 //       "hover:not-focus-within:border-[var(--Border-High-Emphasis)]",
@@ -22539,7 +23028,7 @@ export {
 //         <button
 //           type={isFormMode ? "submit" : "button"}
 //           className={cn(
-//             "flex shrink-0 items-center justify-center border-l border-[var(--Border-Control,var(--Border-Medium-Emphasis))] text-[var(--Text-Low-Emphasis)] transition-colors outline-none hover:bg-[var(--Surface-Tertiary)] hover:text-[var(--Text-High-Emphasis)]",
+//             "flex shrink-0 items-center justify-center border-l border-[var(--Border-Control,var(--Border-Medium-Emphasis))] text-[var(--Text-Low-Emphasis)] transition-colors outline-none hover:bg-[var(--Surface-Neutral-Tertiary)] hover:text-[var(--Text-High-Emphasis)]",
 //             // 親が overflow-hidden なので外向きリングは切れる。内側に描く。
 //             FOCUS_RING_INSET,
 //             // 高さは親の枠（border 1px）の内側いっぱい（h-full）。以前は親と同じ高さ（h-9 / h-11）で、
@@ -23128,7 +23617,7 @@ export {
 //                   "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors cursor-pointer",
 //                   isActive
 //                     ? "border-l-2 border-[var(--Brand-Cake-Orange)] text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)] pl-3.5"
-//                     : "border-l-2 border-transparent text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Secondary)] hover:text-[var(--Text-High-Emphasis)]",
+//                     : "border-l-2 border-transparent text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)] hover:text-[var(--Text-High-Emphasis)]",
 //                 )}
 //                 aria-current={isActive ? "location" : undefined}
 //               >
@@ -23199,7 +23688,7 @@ export {
 //  * `--card-surface: var(--Surface-Primary)` を配下に流すことで、**Section 配下の Card は
 //  * `surface` 未指定でも白**になる（`Card surface="primary"` の明示指定は従来通り優先）。
 //  *
-//  * 「グレー地の上の Card は白」を**構造で**保証するのが狙いで、あとからカードを足しても
+//  * 「色地の上の Card は白」を**構造で**保証するのが狙いで、あとからカードを足しても
 //  * prop の付け忘れが起きない。伝播は CSS カスタムプロパティのカスケードのみで、React context は
 //  * 使わない（Server Component のまま使える／DS 外の要素は影響を受けない）。
 //  *
@@ -23730,7 +24219,7 @@ export {
 //                       className={cn(
 //                         // hover はモーショントークン参照（prefers-reduced-motion で自動停止する）。
 //                         // 素の transition-colors は Tailwind 既定値でトークン制御が効かない（#201）
-//                         "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] cursor-pointer",
+//                         "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Neutral-Secondary)] cursor-pointer",
 //                         active
 //                           ? "border-l-2 border-[var(--Brand-Cake-Orange)] text-[var(--Text-Accent-Primary)] bg-[var(--Surface-Accent-Primary-Light)] pl-3.5"
 //                           : "text-[var(--Text-High-Emphasis)] border-l-2 border-transparent",
@@ -24161,7 +24650,7 @@ export {
 //               "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
 //               item.isActive
 //                 ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]"
-//                 : "bg-[var(--Surface-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Tertiary)]"
+//                 : "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)]"
 //             )}
 //             {...compProps}
 //           >
@@ -24246,7 +24735,7 @@ export {
 //     variants: {
 //       variant: {
 //         default:
-//           "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)] dark:bg-[var(--Surface-Tertiary)] dark:text-[var(--Text-High-Emphasis)] dark:ring-1 dark:ring-[var(--Border-Medium-Emphasis)]",
+//           "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-High-Emphasis)] dark:bg-[var(--Surface-Neutral-Tertiary)] dark:text-[var(--Text-High-Emphasis)] dark:ring-1 dark:ring-[var(--Border-Medium-Emphasis)]",
 //         // 写真上のオーバーレイ用。画像の明暗に依存しない不透明な面を使う。
 //         image:
 //           "bg-[var(--Primitive-Gray-900)] text-[var(--Primitive-White-alpha-1000)]",
@@ -24261,7 +24750,7 @@ export {
 //         "info-fill":
 //           "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
 //         success:
-//           "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+//           "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
 //         accent:
 //           "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
 //         timesale:
@@ -24477,8 +24966,8 @@ export {
 //  * - ヘッダーは既存 `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）。複雑・集中編集・没入執筆のみ本コンポーネント。
 //  *
@@ -24501,9 +24990,9 @@ export {
 //     <div
 //       data-slot="workspace-shell"
 //       className={cn(
-//         // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
+//         // 地が Surface-Neutral-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
 //         // （#150 の Section と同じ仕組み。dark は半透明白が重なって浮くため据え置き）。
-//         "@container min-h-screen bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+//         "@container min-h-screen bg-[var(--Surface-Neutral-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
 //         className
 //       )}
 //     >
@@ -25345,7 +25834,6 @@ export {
 //   FORCED_COLORS_COMMAND_ITEM,
 // } from "./lib/focus-ring"
 // export type { LinkComponent } from "./lib/link-component"
-// export { toast } from "sonner"
 // 
 // // ============================================================
 // // Foundations (shadcn ベース・全事業共通)
@@ -25397,7 +25885,7 @@ export {
 // 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"
@@ -25432,7 +25920,7 @@ export {
 // 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"
@@ -25528,7 +26016,7 @@ export {
 // 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"
@@ -25773,6 +26261,166 @@ export {
 //   mergeIdRefs,
 // }
 // 
+// src/lib/focus-restore.ts
+// "use client"
+// 
+// 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 function canRestoreFocusTo(el: Element | null | undefined): el is HTMLElement {
+//   if (!(el instanceof HTMLElement) || !el.isConnected) return false
+//   const doc = el.ownerDocument
+//   if (el === doc.body || el === doc.documentElement) return false
+//   return !el.matches(":disabled, [inert], [inert] *")
+// }
+// 
+// /** フォーカスがどこにも無い（body / html / null）か。 */
+// function isFocusNowhere(doc: Document): boolean {
+//   const active = doc.activeElement
+//   return active == null || active === doc.body || active === doc.documentElement
+// }
+// 
+// /**
+//  * 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 const OverlayFocusRootContext = React.createContext<OverlayFocusRoot | null>(null)
+// 
+// /** SSR（React 18 の peer を含む）で useLayoutEffect の警告を出さないための切り替え。 */
+// const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect
+// 
+// /**
+//  * Root 部品で使う。開閉状態を追い、Content へ流す記録と、Radix Root へ渡す `onOpenChange` を返す。
+//  */
+// export function useOverlayFocusRoot(
+//   open: boolean | undefined,
+//   defaultOpen: boolean | undefined,
+//   onOpenChange: ((open: boolean) => void) | undefined
+// ): { root: OverlayFocusRoot; handleOpenChange: (open: boolean) => void } {
+//   const openerRef = React.useRef<HTMLElement | null>(null)
+//   const openRef = React.useRef(open ?? defaultOpen ?? false)
+//   const contentCountRef = React.useRef(0)
+// 
+//   // useEffect だと Radix の setTimeout(0) の onCloseAutoFocus より後に反映されうるため layout effect で追う
+//   useIsomorphicLayoutEffect(() => {
+//     if (open !== undefined) openRef.current = open
+//   }, [open])
+// 
+//   const handleOpenChange = React.useCallback(
+//     (next: boolean) => {
+//       // controlled のときは consumer が open を変えた時点（上の layout effect）で追う
+//       if (open === undefined) openRef.current = next
+//       onOpenChange?.(next)
+//     },
+//     [open, onOpenChange]
+//   )
+// 
+//   const root = React.useMemo<OverlayFocusRoot>(
+//     () => ({
+//       openerRef,
+//       isOpen: () => openRef.current,
+//       registerContent: () => {
+//         contentCountRef.current += 1
+//         return () => {
+//           contentCountRef.current -= 1
+//         }
+//       },
+//       hasContent: () => contentCountRef.current > 0,
+//     }),
+//     []
+//   )
+// 
+//   return { root, handleOpenChange }
+// }
+// 
+// /**
+//  * 開くときに呼ぶ。今フォーカスがある要素で記録を上書きする。
+//  *
+//  * 例外: 戻せる opener を記録済みで、今のフォーカスが body（どこにも無い）のときは上書きしない。
+//  * 開いたまま Content が作り直されると、新しい側の onOpenAutoFocus は「古い Content が消えて
+//  * body に落ちた」瞬間に呼ばれるため、ここで上書きすると本来の opener を失う。
+//  * 通常の開閉では閉じるときに記録を空に戻すので、この例外は作り直しのときにしか効かない。
+//  */
+// function captureOpener(ref: React.RefObject<HTMLElement | null>): void {
+//   if (typeof document === "undefined") return
+//   if (isFocusNowhere(document) && canRestoreFocusTo(ref.current)) return
+//   const active = document.activeElement
+//   ref.current = active instanceof HTMLElement ? active : null
+// }
+// 
+// interface AutoFocusHandlers {
+//   onOpenAutoFocus?: (event: Event) => void
+//   onCloseAutoFocus?: (event: Event) => void
+// }
+// 
+// /**
+//  * Content 部品で使う。consumer の `onOpenAutoFocus` / `onCloseAutoFocus` を合成した
+//  * ハンドラーを返す。Radix の Content にそのまま渡す。
+//  */
+// export function useRestoreFocusToOpener({
+//   onOpenAutoFocus,
+//   onCloseAutoFocus,
+// }: AutoFocusHandlers): Required<AutoFocusHandlers> {
+//   const root = React.useContext(OverlayFocusRootContext)
+//   const localOpenerRef = React.useRef<HTMLElement | null>(null)
+//   const openerRef = root?.openerRef ?? localOpenerRef
+// 
+//   React.useEffect(() => root?.registerContent(), [root])
+// 
+//   return {
+//     onOpenAutoFocus: (event) => {
+//       captureOpener(openerRef)
+//       onOpenAutoFocus?.(event)
+//     },
+//     onCloseAutoFocus: (event) => {
+//       // 開いたまま Content が作り直された（古い側の FocusScope が外れた）ときも呼ばれる。
+//       // そのときは記録を残し、フォーカスも新しい Content から動かさない
+//       const recreated = root != null && root.isOpen() && root.hasContent()
+//       const opener = recreated ? null : openerRef.current
+//       if (!recreated) openerRef.current = null
+//       onCloseAutoFocus?.(event)
+//       if (event.defaultPrevented) return
+//       if (recreated) {
+//         event.preventDefault()
+//         return
+//       }
+//       if (typeof document === "undefined" || !isFocusNowhere(document)) return
+//       if (!canRestoreFocusTo(opener)) return
+//       event.preventDefault()
+//       opener.focus({ preventScroll: true })
+//     },
+//   }
+// }
+// 
 // src/lib/focus-ring.ts
 // /**
 //  * DS 正規のフォーカス可視化（フォーカスリング）。
@@ -25870,13 +26518,16 @@ export {
 //  * ラッパーが枠を描き、内側の要素がフォーカスを受け取る合成コントロール用
 //  * （SearchBar の枠、FileInput の label 等）。
 //  *
+//  * リングの色は {@link FOCUS_RING} と同じ（既定は緑の 50% 透過、高コントラストのときだけ
+//  * `--Focus-Ring-Control` の不透明な緑に切り替わる）。
+//  *
 //  * hover で同じプロパティを変える場合は `hover:not-focus-within:*` で書くこと。
 //  *
 //  * @example
 //  * <div className={cn("border hover:not-focus-within:border-x", FOCUS_RING_WITHIN)}>
 //  */
 // export const FOCUS_RING_WITHIN = [
-//   "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))]",
 //   FORCED_COLORS_FOCUS_WITHIN,
 // ].join(" ")
 // 
@@ -25953,6 +26604,59 @@ export {
 //   return Math.min(currentIndex, images.length - 1)
 // }
 // 
+// src/lib/ime.ts
+// /**
+//  * 日本語入力（IME）の変換中に押されたキーを見分けるための判定。
+//  *
+//  * 判定は 2 段構え:
+//  *  1. `isComposing` — 標準。Chrome / Firefox はこれで足りる
+//  *  2. `keyCode === 229` — Safari（WebKit）は変換を終えるキーの keydown を compositionend の
+//  *     後に出すため、その keydown では `isComposing` が false になる。代わりに keyCode が
+//  *     229（"process" キー）になるので、それも変換中として扱う。一部の Android WebView も
+//  *     `isComposing` を立てずに 229 だけを送る
+//  */
+// 
+// /** 判定に必要な最小限の形（React.KeyboardEvent と DOM の KeyboardEvent の両方を受ける）。 */
+// export interface ImeKeyEventLike {
+//   nativeEvent?: { isComposing?: boolean; keyCode?: number }
+//   isComposing?: boolean
+//   keyCode?: number
+// }
+// 
+// /** 変換中の keydown なら true。 */
+// export function isImeComposing(event: ImeKeyEventLike): boolean {
+//   const source = event.nativeEvent ?? event
+//   return source.isComposing === true || source.keyCode === 229
+// }
+// 
+// /**
+//  * オーバーレイ（Dialog / Sheet / AlertDialog / Drawer / Popover）の `onEscapeKeyDown` で使う。
+//  * 変換中の Esc（変換の取り消し）なら `preventDefault()` して true を返す。
+//  *
+//  * Radix の DismissableLayer は `key === "Escape"` だけを見て閉じるため、変換を取り消すつもりの
+//  * Esc で入力中のダイアログやシートごと閉じ、入力した内容が消えていた。preventDefault すると
+//  * Radix は閉じない。変換していないときの Esc は従来どおり閉じる。
+//  * consumer の `onEscapeKeyDown` を先に呼んでから、このガードを呼ぶこと。
+//  */
+// export function guardEscapeDuringIme(event: Pick<Event, "preventDefault"> & ImeKeyEventLike): boolean {
+//   if (!isImeComposing(event)) return false
+//   event.preventDefault()
+//   return true
+// }
+// 
+// /**
+//  * consumer の `onEscapeKeyDown` を先に呼び、そのあと変換中の Esc を止めるハンドラーを作る。
+//  * Content 部品の `onEscapeKeyDown` にそのまま渡す。
+//  */
+// export function composeEscapeKeyDownWithImeGuard(
+//   handler: ((event: KeyboardEvent) => void) | undefined
+// ): (event: KeyboardEvent) => void {
+//   return (event) => {
+//     handler?.(event)
+//     guardEscapeDuringIme(event)
+//   }
+// }
+// 
 // src/lib/link-component.ts
 // import type * as React from "react"
 // 
@@ -26098,6 +26802,77 @@ export {
 //   ]
 // }
 // 
+// src/lib/search-normalize.ts
+// /**
+//  * ## 絞り込み検索の表記ゆれ吸収（Combobox 等）
+//  *
+//  * 日本語の候補を部分一致で絞り込むとき、次の違いを同じとみなす:
+//  * - 大文字 / 小文字（`Tokyo` / `tokyo`）
+//  * - 全角 / 半角（NFKC。`ＡＢＣ` / `ABC`、`ｼﾌﾞﾔ` / `シブヤ`）
+//  * - ひらがな / カタカナ（`しぶや` / `シブヤ`）
+//  * - 漢字に挟まれた「ヶ / ケ / ヵ / が」（`市ヶ谷` / `市ケ谷`、`霞が関` / `霞ケ関`）
+//  *
+//  * 「ヶ」系の同一視は漢字に挟まれたときだけに限る（`ケーキ` が `がーき` に当たらないように）。
+//  * 姉妹 DS（KSK #853）の Combobox の既定の絞り込みを移植したもの。
+//  */
+// 
+// const HAN = /\p{Script=Han}/u
+// // 文字コードの表なのでコードポイントで持つ
+// const KATAKANA_FIRST = 0x30a1 // ァ
+// const KATAKANA_LAST = 0x30f6 // ヶ
+// const KATAKANA_TO_HIRAGANA = 0x60
+// // カタカナ→ひらがな変換後の「ヶ / ケ / ヵ / が」（ゖ U+3096 / け U+3051 / ゕ U+3095 / が U+304C）
+// const KE_CANONICAL = String.fromCharCode(0x3096)
+// const KE_VARIANTS = new Set([0x3096, 0x3051, 0x3095, 0x304c].map((c) => String.fromCharCode(c)))
+// 
+// /** 文脈に依らない正規化: NFKC（全角半角）→ 小文字 → カタカナをひらがなへ */
+// function normalizeSearchText(text: string): string {
+//   return Array.from(text.normalize("NFKC").toLowerCase(), (c) => {
+//     const code = c.charCodeAt(0)
+//     return code >= KATAKANA_FIRST && code <= KATAKANA_LAST
+//       ? String.fromCharCode(code - KATAKANA_TO_HIRAGANA)
+//       : c
+//   }).join("")
+// }
+// 
+// /**
+//  * 表記ゆれ用の正規化。{@link normalizeSearchText} 済みの文字列について、漢字に挟まれた
+//  * 「ヶ / ケ / ヵ / が」を同じ字にする。直後が文字列の終わりでも同一視する（「市ヶ」まで打った途中でも
+//  * 当たるように）。`isQuery` のときは先頭の直前を漢字とみなす（「ヶ谷」と打っても候補の「漢字 + ケ」に当たるように）。
+//  */
+// function normalizeKeVariants(normalized: string, isQuery: boolean): string {
+//   const chars = Array.from(normalized)
+//   return chars
+//     .map((c, i) => {
+//       if (!KE_VARIANTS.has(c)) return c
+//       const prev = chars[i - 1]
+//       const next = chars[i + 1]
+//       const prevIsHan = prev === undefined ? isQuery : HAN.test(prev)
+//       const nextIsHanOrEnd = next === undefined || HAN.test(next)
+//       return prevIsHan && nextIsHanOrEnd ? KE_CANONICAL : c
+//     })
+//     .join("")
+// }
+// 
+// /**
+//  * 候補（ラベル・別名）のどれかが検索語を部分一致で含むか。
+//  * 素の正規化での部分一致、または「ヶ」系もそろえた正規化での部分一致のどちらかで当てる
+//  * （同一視は「追加で当てる」だけにし、`ケ谷` → `市ケ谷` のような素の一致を落とさない）。
+//  * 検索語が空白だけのときは全件に当たる。
+//  */
+// function matchesSearch(candidates: ReadonlyArray<string | undefined>, query: string): boolean {
+//   const q = normalizeSearchText(query.trim())
+//   if (q === "") return true
+//   const qKe = normalizeKeVariants(q, true)
+//   return candidates.some((candidate) => {
+//     if (!candidate) return false
+//     const c = normalizeSearchText(candidate)
+//     return c.includes(q) || normalizeKeVariants(c, false).includes(qKe)
+//   })
+// }
+// 
+// export { normalizeSearchText, normalizeKeVariants, matchesSearch }
+// 
 // src/lib/story-navigation.ts
 // /**
 //  * Storybook ストーリー間ナビゲーション