@cakejp/design-system 0.22.0 → 0.23.0

package/dist/components/foundations/input.js

@@ -1,12 +1,13 @@
+"use client";
 import { jsx as d, jsxs as s } from "react/jsx-runtime";
 import "react";
-import { cn as c } from "../../lib/utils.js";
+import { cn as u } from "../../lib/utils.js";
 import { useValueLength as g } from "../../lib/use-value-length.js";
 import { FOCUS_RING as y } from "../../lib/focus-ring.js";
 import { resolveNativeFieldAria as w, useFieldLabelling as N } from "../../lib/field-labelling.js";
 function R({
-  className: p,
-  type: u,
+  className: c,
+  type: p,
   showCount: r,
   maxLength: e,
   value: o,
@@ -23,7 +24,7 @@ function R({
   }), n = /* @__PURE__ */ d(
     "input",
     {
-      type: u,
+      type: p,
       "data-slot": "input",
       ref: m,
       value: o,
@@ -32,18 +33,18 @@ function R({
       onChange: r ? (x) => {
         h(), i?.(x);
       } : i,
-      className: c(
+      className: u(
         // h-11（44px）= 入力コントロールの共通高さ。
         // SelectTrigger(default) / DatePicker trigger / Button(default) と同値。
         // 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 の枠線に必ず勝つ。
         y,
         "aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20",
-        p
+        c
       ),
       ...a,
       ...b
@@ -57,7 +58,7 @@ function R({
       "span",
       {
         "data-slot": "input-count",
-        className: c(
+        className: u(
           "typo-body-xs",
           v ? "text-[var(--Text-Caution)]" : "text-[var(--Text-Low-Emphasis)]"
         ),

package/dist/components/foundations/popover.js

@@ -2,22 +2,24 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import { Popover as e } from "radix-ui";
-import { cn as i } from "../../lib/utils.js";
-function l({
+import { cn as d } from "../../lib/utils.js";
+import { composeEscapeKeyDownWithImeGuard as p } from "../../lib/ime.js";
+function v({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Root, { "data-slot": "popover", ...o });
 }
-function c({
+function u({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Trigger, { "data-slot": "popover-trigger", ...o });
 }
-function v({
+function g({
   className: o,
   align: r = "center",
   sideOffset: a = 4,
-  ...n
+  onEscapeKeyDown: n,
+  ...i
 }) {
   return /* @__PURE__ */ t(e.Portal, { children: /* @__PURE__ */ t(
     e.Content,
@@ -25,22 +27,23 @@ function v({
       "data-slot": "popover-content",
       align: r,
       sideOffset: a,
-      className: i(
+      onEscapeKeyDown: p(n),
+      className: d(
         "z-[var(--Z-Popover)] w-72 max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 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",
         o
       ),
-      ...n
+      ...i
     }
   ) });
 }
-function f({
+function h({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Anchor, { "data-slot": "popover-anchor", ...o });
 }
 export {
-  l as Popover,
-  f as PopoverAnchor,
-  v as PopoverContent,
-  c as PopoverTrigger
+  v as Popover,
+  h as PopoverAnchor,
+  g as PopoverContent,
+  u as PopoverTrigger
 };

package/dist/components/foundations/progress.js

@@ -1,38 +1,39 @@
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import "react";
-import { Progress as l } from "radix-ui";
-import { cn as t } from "../../lib/utils.js";
-function f({
-  className: a,
-  value: e,
-  ...r
+import { Progress as i } from "radix-ui";
+import { cn as m } from "../../lib/utils.js";
+function b({
+  className: l,
+  value: r,
+  ...o
 }) {
-  const s = r["aria-label"] !== void 0 || r["aria-labelledby"] !== void 0;
-  return /* @__PURE__ */ o(
-    l.Root,
+  const n = o["aria-label"] !== void 0 || o["aria-labelledby"] !== void 0, a = typeof o.max == "number" && Number.isFinite(o.max) && o.max > 0 ? o.max : 100, e = typeof r == "number" && Number.isFinite(r) ? Math.min(a, Math.max(0, r)) : void 0, s = e === void 0 ? 0 : e / a * 100;
+  return /* @__PURE__ */ t(
+    i.Root,
     {
       "data-slot": "progress",
-      "aria-label": s ? void 0 : "進捗",
-      className: t(
+      value: e,
+      "aria-label": n ? void 0 : "進捗",
+      className: m(
         "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
         // forced-colors（Windows ハイコントラスト）ではレールも帯も Canvas に置き換わり進み具合が
         // 見えなかった。レールは輪郭線（レイアウトに影響しない outline）、帯は OS の選択色で示す。
         // 通常表示は不変
         "forced-colors:outline forced-colors:outline-1 forced-colors:outline-[CanvasText]",
-        a
+        l
       ),
-      ...r,
-      children: /* @__PURE__ */ o(
-        l.Indicator,
+      ...o,
+      children: /* @__PURE__ */ t(
+        i.Indicator,
         {
           "data-slot": "progress-indicator",
           className: "h-full w-full flex-1 bg-primary transition-all forced-colors:bg-[Highlight]",
-          style: { transform: `translateX(-${100 - (e || 0)}%)` }
+          style: { transform: `translateX(-${100 - s}%)` }
         }
       )
     }
   );
 }
 export {
-  f as Progress
+  b as Progress
 };

package/dist/components/foundations/radio-group.js

@@ -3,14 +3,16 @@ import { jsx as r, jsxs as s } from "react/jsx-runtime";
 import * as l from "react";
 import { RadioGroup as i } from "radix-ui";
 import { cn as e } from "../../lib/utils.js";
-import { FOCUS_RING as m } from "../../lib/focus-ring.js";
-import { chipVariants as u } from "./chip-variants.js";
+import { FOCUS_RING as u } from "../../lib/focus-ring.js";
+import { resolveFieldAria as m, useFieldLabelling as p } from "../../lib/field-labelling.js";
+import { chipVariants as h } from "./chip-variants.js";
 const n = l.createContext("tile");
-function x({
-  className: o,
+function S({
+  className: d,
   variant: a = "tile",
   ...t
 }) {
+  const o = m(t, p());
   return /* @__PURE__ */ r(n.Provider, { value: a, children: /* @__PURE__ */ r(
     i.Root,
     {
@@ -18,17 +20,18 @@ function x({
       "data-variant": a,
       className: e(
         a === "chip" ? "flex flex-wrap gap-2" : "grid gap-3",
-        o
+        d
       ),
-      ...t
+      ...t,
+      ...o
     }
   ) });
 }
-function y({
-  className: o,
+function k({
+  className: d,
   children: a,
   description: t,
-  expandedContent: d,
+  expandedContent: o,
   ...c
 }) {
   return l.useContext(n) === "chip" ? /* @__PURE__ */ r(
@@ -39,7 +42,7 @@ function y({
       className: e(
         // Chip 本体と同一の chipVariants（CVA）を再利用。unselected=filled 意匠。
         // レイアウト・サイズ・角丸・typo・focus リングはここから供給され、Chip 意匠変更に自動追従する。
-        u({ variant: "filled", size: "md", shape: "pill" }),
+        h({ variant: "filled", size: "md", shape: "pill" }),
         "cursor-pointer outline-none",
         // checked = 入力部品のオン状態なのでブランド色のまま（brandColorUsage の allowed）。
         // Chip の selected はグレー地 + 黒系の枠に変わったため、見た目は Chip と別（Chip の accent と同一トークン）。
@@ -51,7 +54,7 @@ function y({
         // form 固有の状態（chipVariants に無い分のみ compose）。disabled の配色は chipVariants filled が担う。
         "aria-invalid:border aria-invalid:border-[var(--Border-Caution)]",
         "disabled:cursor-not-allowed",
-        o
+        d
       ),
       ...c,
       children: a
@@ -63,19 +66,19 @@ function y({
       className: e(
         // 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",
-        d ? "flex-col items-stretch" : "items-center",
-        "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
+        o ? "flex-col items-stretch" : "items-center",
+        "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 状態（同じくブランド色の枠）と紛らわしかったため統一した。
-        m,
+        u,
         "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)]",
-        o
+        "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)]",
+        d
       ),
       ...c,
       children: [
-        /* @__PURE__ */ s("span", { className: e("flex items-center gap-2", d && "w-full"), children: [
+        /* @__PURE__ */ s("span", { className: e("flex items-center gap-2", o && "w-full"), children: [
           /* @__PURE__ */ r(
             "span",
             {
@@ -83,14 +86,14 @@ function y({
               className: e(
                 "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)]"
               ),
               children: /* @__PURE__ */ r(
                 i.Indicator,
                 {
                   "data-slot": "radio-group-indicator",
                   className: "flex items-center justify-center",
-                  children: /* @__PURE__ */ r("span", { className: "size-2.5 rounded-full bg-[var(--Object-Accent-Primary)]" })
+                  children: /* @__PURE__ */ r("span", { className: "size-2.5 rounded-full bg-[var(--Object-Accent-Primary)] forced-colors:bg-[Highlight] forced-colors:group-data-[disabled]:bg-[GrayText]" })
                 }
               )
             }
@@ -120,12 +123,12 @@ function y({
             )
           ] })
         ] }),
-        d && /* @__PURE__ */ r(
+        o && /* @__PURE__ */ r(
           "span",
           {
             "data-slot": "radio-group-expanded",
             className: "hidden border-t border-[var(--Border-Medium-Emphasis)] pt-3 group-data-[state=checked]:block",
-            children: d
+            children: o
           }
         )
       ]
@@ -133,6 +136,6 @@ function y({
   );
 }
 export {
-  x as RadioGroup,
-  y as RadioGroupItem
+  S as RadioGroup,
+  k as RadioGroupItem
 };

package/dist/components/foundations/select.js

@@ -1,6 +1,7 @@
-import { jsx as t, jsxs as d } from "react/jsx-runtime";
+"use client";
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
 import "react";
-import { CheckIcon as c, ChevronDownIcon as i, ChevronUpIcon as u } from "lucide-react";
+import { CheckIcon as c, ChevronDownIcon as d, ChevronUpIcon as u } from "lucide-react";
 import { Select as a } from "radix-ui";
 import { cn as s } from "../../lib/utils.js";
 import { FOCUS_RING as m, FORCED_COLORS_MENU_ITEM as p } from "../../lib/focus-ring.js";
@@ -27,13 +28,13 @@ function B({
   ...l
 }) {
   const n = f(l, g());
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     a.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": r,
       className: s(
-        "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）。
         m,
         // 高さは「素のクラス」で当てる。data 属性セレクタ（data-[size=default]:h-10）だと
@@ -47,7 +48,7 @@ function B({
       ...n,
       children: [
         o,
-        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "size-4 text-[var(--Text-High-Emphasis)]" }) })
+        /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(d, { className: "size-4 text-[var(--Text-High-Emphasis)]" }) })
       ]
     }
   );
@@ -59,7 +60,7 @@ function E({
   align: l = "center",
   ...n
 }) {
-  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ d(
+  return /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ i(
     a.Content,
     {
       "data-slot": "select-content",
@@ -110,7 +111,7 @@ function T({
   children: r,
   ...o
 }) {
-  return /* @__PURE__ */ d(
+  return /* @__PURE__ */ i(
     a.Item,
     {
       "data-slot": "select-item",
@@ -177,7 +178,7 @@ function h({
         e
       ),
       ...r,
-      children: /* @__PURE__ */ t(i, { className: "size-4" })
+      children: /* @__PURE__ */ t(d, { className: "size-4" })
     }
   );
 }

package/dist/components/foundations/sheet.js

@@ -1,31 +1,49 @@
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+"use client";
+import { jsx as o, jsxs as u } from "react/jsx-runtime";
 import "react";
-import { XIcon as p } from "lucide-react";
+import { XIcon as v } from "lucide-react";
 import { Dialog as a } from "radix-ui";
 import { cn as r } from "../../lib/utils.js";
-function N({ ...t }) {
-  return /* @__PURE__ */ e(a.Root, { "data-slot": "sheet", ...t });
+import { useOverlayFocusRoot as x, OverlayFocusRootContext as y, useRestoreFocusToOpener as b } from "../../lib/focus-restore.js";
+import { composeEscapeKeyDownWithImeGuard as S } from "../../lib/ime.js";
+function M({
+  open: t,
+  defaultOpen: e,
+  onOpenChange: s,
+  ...l
+}) {
+  const { root: d, handleOpenChange: i } = x(t, e, s);
+  return /* @__PURE__ */ o(y.Provider, { value: d, children: /* @__PURE__ */ o(
+    a.Root,
+    {
+      "data-slot": "sheet",
+      open: t,
+      defaultOpen: e,
+      onOpenChange: i,
+      ...l
+    }
+  ) });
 }
-function C({
+function H({
   ...t
 }) {
-  return /* @__PURE__ */ e(a.Trigger, { "data-slot": "sheet-trigger", ...t });
+  return /* @__PURE__ */ o(a.Trigger, { "data-slot": "sheet-trigger", ...t });
 }
-function D({
+function R({
   ...t
 }) {
-  return /* @__PURE__ */ e(a.Close, { "data-slot": "sheet-close", ...t });
+  return /* @__PURE__ */ o(a.Close, { "data-slot": "sheet-close", ...t });
 }
-function g({
+function w({
   ...t
 }) {
-  return /* @__PURE__ */ e(a.Portal, { "data-slot": "sheet-portal", ...t });
+  return /* @__PURE__ */ o(a.Portal, { "data-slot": "sheet-portal", ...t });
 }
-function x({
+function C({
   className: t,
-  ...o
+  ...e
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ o(
     a.Overlay,
     {
       "data-slot": "sheet-overlay",
@@ -33,38 +51,43 @@ function x({
         "fixed inset-0 z-[var(--Z-Overlay)] bg-[var(--Overlay-Medium)] data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
         t
       ),
-      ...o
+      ...e
     }
   );
 }
-const d = {
+const c = {
   sm: "sm:max-w-sm",
   md: "sm:max-w-[576px]",
   lg: "sm:max-w-[768px]"
 };
-function T({
+function j({
   className: t,
-  children: o,
+  children: e,
   side: s = "right",
-  size: u = "sm",
-  showCloseButton: c = !0,
-  autoFocus: l = !0,
+  size: l = "sm",
+  showCloseButton: d = !0,
+  autoFocus: i = !0,
   onOpenAutoFocus: m,
-  onCloseAutoFocus: f,
-  ...h
+  onCloseAutoFocus: h,
+  onEscapeKeyDown: f,
+  ...p
 }) {
-  return /* @__PURE__ */ i(g, { children: [
-    /* @__PURE__ */ e(x, {}),
-    /* @__PURE__ */ i(
+  const g = b({
+    onOpenAutoFocus: (n) => {
+      i || n.preventDefault(), m?.(n);
+    },
+    onCloseAutoFocus: (n) => {
+      i || n.preventDefault(), h?.(n);
+    }
+  });
+  return /* @__PURE__ */ u(w, { children: [
+    /* @__PURE__ */ o(C, {}),
+    /* @__PURE__ */ u(
       a.Content,
       {
         "data-slot": "sheet-content",
-        onOpenAutoFocus: (n) => {
-          l || n.preventDefault(), m?.(n);
-        },
-        onCloseAutoFocus: (n) => {
-          l || n.preventDefault(), f?.(n);
-        },
+        ...g,
+        onEscapeKeyDown: S(f),
         className: r(
           "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)]",
           s === "right" && "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
@@ -72,74 +95,74 @@ function T({
           s === "top" && "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
           s === "bottom" && "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
           // 型に無い size（AlertDialog の "default" と取り違えた JSX など）でも幅の上限を消さず、既定の sm にする
-          (s === "right" || s === "left") && (d[u] ?? d.sm),
+          (s === "right" || s === "left") && (c[l] ?? c.sm),
           t
         ),
-        ...h,
+        ...p,
         children: [
-          o,
-          c && /* @__PURE__ */ i(a.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", children: [
-            /* @__PURE__ */ e(p, { className: "size-5" }),
-            /* @__PURE__ */ e("span", { className: "sr-only", children: "閉じる" })
+          e,
+          d && /* @__PURE__ */ u(a.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", children: [
+            /* @__PURE__ */ o(v, { className: "size-5" }),
+            /* @__PURE__ */ o("span", { className: "sr-only", children: "閉じる" })
           ] })
         ]
       }
     )
   ] });
 }
-function z({ className: t, ...o }) {
-  return /* @__PURE__ */ e(
+function P({ className: t, ...e }) {
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "sheet-header",
       className: r("flex flex-col gap-1.5 p-4", t),
-      ...o
+      ...e
     }
   );
 }
-function E({ className: t, ...o }) {
-  return /* @__PURE__ */ e(
+function A({ className: t, ...e }) {
+  return /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "sheet-footer",
       className: r("mt-auto flex flex-col gap-2 p-4", t),
-      ...o
+      ...e
     }
   );
 }
-function M({
+function I({
   className: t,
-  ...o
+  ...e
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ o(
     a.Title,
     {
       "data-slot": "sheet-title",
       className: r("typo-heading-lg text-foreground", t),
-      ...o
+      ...e
     }
   );
 }
-function O({
+function K({
   className: t,
-  ...o
+  ...e
 }) {
-  return /* @__PURE__ */ e(
+  return /* @__PURE__ */ o(
     a.Description,
     {
       "data-slot": "sheet-description",
       className: r("typo-body-sm text-muted-foreground", t),
-      ...o
+      ...e
     }
   );
 }
 export {
-  N as Sheet,
-  D as SheetClose,
-  T as SheetContent,
-  O as SheetDescription,
-  E as SheetFooter,
-  z as SheetHeader,
-  M as SheetTitle,
-  C as SheetTrigger
+  M as Sheet,
+  R as SheetClose,
+  j as SheetContent,
+  K as SheetDescription,
+  A as SheetFooter,
+  P as SheetHeader,
+  I as SheetTitle,
+  H as SheetTrigger
 };

package/dist/components/foundations/skeleton.js

@@ -1,12 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { cn as t } from "../../lib/utils.js";
-function m({ className: e, ...o }) {
-  return /* @__PURE__ */ r(
+import { jsx as t } from "react/jsx-runtime";
+import { cn as o } from "../../lib/utils.js";
+function m({ className: e, ...r }) {
+  return /* @__PURE__ */ t(
     "div",
     {
       "data-slot": "skeleton",
-      className: t("animate-pulse motion-reduce:animate-none rounded-md bg-[var(--Surface-Tertiary)]", e),
-      ...o
+      className: o("animate-pulse motion-reduce:animate-none rounded-md bg-[var(--Surface-Neutral-Tertiary)]", e),
+      ...r
     }
   );
 }

package/dist/components/foundations/slider.js

@@ -24,13 +24,13 @@ function Q({
   "aria-labelledby": C,
   ...z
 }) {
-  const S = G(), i = Array.isArray(l), g = i ? l.length : Array.isArray(o) ? o.length : 1, s = g > 1, [D, T] = K.useState(
+  const S = G(), i = Array.isArray(l), g = i ? l.length : Array.isArray(o) ? o.length : 1, s = g > 1, [D, N] = K.useState(
     () => Array.isArray(o) ? o : [n]
   ), t = i ? l : D, O = (r, a) => {
-    const e = v * h, H = a === "start" ? r === 0 ? n : (t[r - 1] ?? n) + e : r === t.length - 1 ? f : (t[r + 1] ?? f) - e, I = Math.max(R(h), R(e)), N = Number(H.toFixed(I));
-    if (N === t[r]) return;
-    const m = t.map((j, B) => B === r ? N : j);
-    i || T(m), y?.(m), k?.(m);
+    const e = v * h, H = a === "start" ? r === 0 ? n : (t[r - 1] ?? n) + e : r === t.length - 1 ? f : (t[r + 1] ?? f) - e, I = Math.max(R(h), R(e)), T = Number(H.toFixed(I));
+    if (T === t[r]) return;
+    const m = t.map((j, B) => B === r ? T : j);
+    i || N(m), y?.(m), k?.(m);
   }, $ = (r) => (a) => {
     !s || p || a.key !== "Home" && a.key !== "End" || (a.preventDefault(), O(r, a.key === "Home" ? "start" : "end"));
   }, F = (r, a) => {
@@ -51,7 +51,7 @@ function Q({
       defaultValue: s ? void 0 : o,
       value: s ? t : l,
       onValueChange: (r) => {
-        s && !i && T(r), y?.(r);
+        s && !i && N(r), y?.(r);
       },
       onValueCommit: k,
       min: n,
@@ -67,7 +67,7 @@ function Q({
           {
             "data-slot": "slider-track",
             className: d(
-              "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]"