@cakejp/design-system 0.22.0 → 0.23.0

package/dist/components/foundations/alert.js

@@ -1,13 +1,13 @@
 "use client";
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
-import * as b from "react";
-import { cva as N } from "class-variance-authority";
-import g from "iconsax-reactjs/dist/esm/Warning2.js";
-import _ from "iconsax-reactjs/dist/esm/InfoCircle.js";
-import j from "iconsax-reactjs/dist/esm/TickCircle.js";
-import E from "iconsax-reactjs/dist/esm/CloseCircle.js";
-import { cn as n } from "../../lib/utils.js";
-const p = N(
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import * as w from "react";
+import { cva as _ } from "class-variance-authority";
+import h from "iconsax-reactjs/dist/esm/Warning2.js";
+import I from "iconsax-reactjs/dist/esm/InfoCircle.js";
+import M from "iconsax-reactjs/dist/esm/TickCircle.js";
+import S from "iconsax-reactjs/dist/esm/CloseCircle.js";
+import { cn as t } from "../../lib/utils.js";
+const p = _(
   "relative w-full",
   {
     variants: {
@@ -60,7 +60,7 @@ const p = N(
       variant: "info"
     }
   }
-), y = N(
+), N = _(
   "flex w-full gap-2 items-start p-4 rounded-lg border",
   {
     variants: {
@@ -78,91 +78,97 @@ const p = N(
       variant: "info"
     }
   }
-), s = b.createContext("info"), V = (i) => i === "success" || i === "info" || i === "error" || i === "warning", M = (i) => i === "inline-info" || i === "inline-caution" || i === "inline-warning", S = {
-  success: { Icon: j, color: "text-[var(--Text-Success)]" },
-  info: { Icon: _, color: "text-[var(--Text-Medium-Emphasis)]" },
-  error: { Icon: E, color: "text-[var(--Text-Caution)]" },
-  warning: { Icon: g, color: "text-[var(--Text-Warning)]" }
-}, W = {
-  "inline-info": { Icon: _, color: "text-[var(--Text-Medium-Emphasis)]" },
-  "inline-caution": { Icon: g, color: "text-[var(--Text-Caution)]" },
-  "inline-warning": { Icon: g, color: "text-[var(--Text-Warning)]" }
+), s = w.createContext("info"), W = (r) => r === "success" || r === "info" || r === "error" || r === "warning", k = (r) => r === "inline-info" || r === "inline-caution" || r === "inline-warning", A = {
+  success: { Icon: M, color: "text-[var(--Text-Success)]" },
+  info: { Icon: I, color: "text-[var(--Text-Medium-Emphasis)]" },
+  error: { Icon: S, color: "text-[var(--Text-Caution)]" },
+  warning: { Icon: h, color: "text-[var(--Text-Warning)]" }
+}, B = {
+  "inline-info": { Icon: I, color: "text-[var(--Text-Medium-Emphasis)]" },
+  "inline-caution": { Icon: h, color: "text-[var(--Text-Caution)]" },
+  "inline-warning": { Icon: h, color: "text-[var(--Text-Warning)]" }
+}, H = (r) => r === "error" || r === "warning" || r === "inline-caution" || r === "inline-warning" ? "alert" : "status", R = (r, e, o) => {
+  if (o !== void 0) return o;
+  const n = e ?? H(r);
+  return n === "off" ? void 0 : n;
 };
-function L({
-  className: i,
+function K({
+  className: r,
   variant: e = "info",
   children: o,
-  title: t,
+  title: n,
   description: a,
   icon: C,
   action: l,
+  live: j,
+  role: E,
   ...d
 }) {
-  const m = V(e), T = M(e), w = (m || T) && !o && (t || a);
-  if (w && m) {
-    const { Icon: x, color: f } = S[e], u = h[e] ?? "", v = C ?? /* @__PURE__ */ r(x, { size: 24, className: n("shrink-0", f) });
-    return /* @__PURE__ */ r(s.Provider, { value: e, children: /* @__PURE__ */ r(
+  const m = R(e, j, E), x = W(e), T = k(e), y = (x || T) && !o && (n || a);
+  if (y && x) {
+    const { Icon: f, color: u } = A[e], v = b[e] ?? "", g = C ?? /* @__PURE__ */ i(f, { size: 24, className: t("shrink-0", u) });
+    return /* @__PURE__ */ i(s.Provider, { value: e, children: /* @__PURE__ */ i(
       "div",
       {
         "data-slot": "alert",
         "data-variant": e,
-        role: "alert",
-        className: n(p({ variant: e }), i),
+        role: m,
+        className: t(p({ variant: e }), r),
         ...d,
-        children: /* @__PURE__ */ c("div", { className: y({ variant: e }), children: [
-          v,
+        children: /* @__PURE__ */ c("div", { className: N({ variant: e }), children: [
+          g,
           /* @__PURE__ */ c("div", { className: "flex-1 min-w-0", children: [
-            t && /* @__PURE__ */ r("div", { className: n("typo-label-md", u), children: t }),
-            a && /* @__PURE__ */ r("div", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-1", children: a })
+            n && /* @__PURE__ */ i("div", { className: t("typo-label-md", v), children: n }),
+            a && /* @__PURE__ */ i("div", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] mt-1", children: a })
           ] }),
-          l && /* @__PURE__ */ r("div", { className: "shrink-0", children: l })
+          l && /* @__PURE__ */ i("div", { className: "shrink-0", children: l })
         ] })
       }
     ) });
   }
-  if (w && T) {
-    const { Icon: x, color: f } = W[e], u = h[e] ?? "", v = I[e] ?? "", P = C ?? /* @__PURE__ */ r(x, { size: 20, className: n("shrink-0", f) });
-    return /* @__PURE__ */ r(s.Provider, { value: e, children: /* @__PURE__ */ c(
+  if (y && T) {
+    const { Icon: f, color: u } = B[e], v = b[e] ?? "", g = P[e] ?? "", V = C ?? /* @__PURE__ */ i(f, { size: 20, className: t("shrink-0", u) });
+    return /* @__PURE__ */ i(s.Provider, { value: e, children: /* @__PURE__ */ c(
       "div",
       {
         "data-slot": "alert",
         "data-variant": e,
-        role: "alert",
-        className: n(p({ variant: e }), i),
+        role: m,
+        className: t(p({ variant: e }), r),
         ...d,
         children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center py-[2.5px] shrink-0", children: P }),
+          /* @__PURE__ */ i("div", { className: "flex items-center py-[2.5px] shrink-0", children: V }),
           /* @__PURE__ */ c("div", { className: "flex flex-1 flex-col", children: [
-            t && /* @__PURE__ */ r("div", { className: n("typo-label-md", u), children: t }),
-            a && /* @__PURE__ */ r(
+            n && /* @__PURE__ */ i("div", { className: t("typo-label-md", v), children: n }),
+            a && /* @__PURE__ */ i(
               "div",
               {
-                className: n(
+                className: t(
                   "typo-body-sm",
-                  v || "text-[var(--Text-Medium-Emphasis)]"
+                  g || "text-[var(--Text-Medium-Emphasis)]"
                 ),
                 children: a
               }
             )
           ] }),
-          l && /* @__PURE__ */ r("div", { className: "shrink-0", children: l })
+          l && /* @__PURE__ */ i("div", { className: "shrink-0", children: l })
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ r(s.Provider, { value: e, children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ i(s.Provider, { value: e, children: /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "alert",
       "data-variant": e,
-      role: "alert",
-      className: n(p({ variant: e }), i),
+      role: m,
+      className: t(p({ variant: e }), r),
       ...d,
-      children: m ? /* @__PURE__ */ r("div", { className: y({ variant: e }), children: o }) : o
+      children: x ? /* @__PURE__ */ i("div", { className: N({ variant: e }), children: o }) : o
     }
   ) });
 }
-const h = {
+const b = {
   success: "text-[var(--Primitive-Forest-800)]",
   info: "text-[var(--Text-High-Emphasis)]",
   error: "text-[var(--Text-Caution)]",
@@ -171,49 +177,49 @@ const h = {
   "inline-caution": "text-[var(--Text-Caution)]",
   "inline-warning": "text-[var(--Text-Warning)]"
 };
-function R({ className: i, ...e }) {
-  const o = b.useContext(s), t = h[o ?? "info"] ?? "";
-  return /* @__PURE__ */ r(
+function O({ className: r, ...e }) {
+  const o = w.useContext(s), n = b[o ?? "info"] ?? "";
+  return /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "alert-title",
-      className: n(
+      className: t(
         "typo-label-md",
-        t,
-        i
+        n,
+        r
       ),
       ...e
     }
   );
 }
-const I = {
+const P = {
   error: "text-[var(--Text-Caution)]",
   "inline-caution": "text-[var(--Text-Caution)]",
   "inline-warning": "text-[var(--Text-Warning)]"
 };
-function q({
-  className: i,
+function Q({
+  className: r,
   ...e
 }) {
-  const o = b.useContext(s), t = I[o ?? ""] ?? "";
-  return /* @__PURE__ */ r(
+  const o = w.useContext(s), n = P[o ?? ""] ?? "";
+  return /* @__PURE__ */ i(
     "div",
     {
       "data-slot": "alert-description",
-      className: n(
+      className: t(
         "typo-body-sm",
-        t || "text-[var(--Text-Medium-Emphasis)]",
-        i
+        n || "text-[var(--Text-Medium-Emphasis)]",
+        r
       ),
       ...e
     }
   );
 }
 export {
-  L as Alert,
-  q as AlertDescription,
-  R as AlertTitle,
-  I as alertDescriptionVariants,
-  h as alertTitleVariants,
+  K as Alert,
+  Q as AlertDescription,
+  O as AlertTitle,
+  P as alertDescriptionVariants,
+  b as alertTitleVariants,
   p as alertVariants
 };

package/dist/components/foundations/badge.js

@@ -18,11 +18,11 @@ const u = o(
         "accent-subtle": "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
         "caution-subtle": "bg-[var(--Surface-Caution-Light)] text-[var(--Text-Caution)]",
         "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)]",
+        "muted-subtle": "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)]",
-        outline: "border-[var(--Border-Medium-Emphasis)] text-[var(--Text-High-Emphasis)] [a&]:hover:bg-[var(--Surface-Secondary)]",
-        ghost: "text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Secondary)]",
+        secondary: "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-Neutral-Secondary)]",
+        ghost: "text-[var(--Text-Medium-Emphasis)] [a&]:hover:bg-[var(--Surface-Neutral-Secondary)]",
         link: "text-[var(--Brand-Cake-Orange)] underline-offset-4 [a&]:hover:underline"
       }
     },

package/dist/components/foundations/button.js

@@ -10,10 +10,10 @@ const u = y(
   {
     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)]",
-        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)]",
-        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)]",
-        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)]",
+        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-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-Neutral-Tertiary)] disabled:text-[var(--Text-Disable)]",
+        tertiary: "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-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)]",
         /**
          * outline — 白地 + 黒系の 1px 枠。ブランド色を使わない「準主役」の前進アクション
@@ -49,7 +49,7 @@ const u = y(
           // 下地 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: {
@@ -119,11 +119,11 @@ function C(e) {
     `[Button] loading の読み上げ文言の id「${e.id}」が重複しています。同じ aria-labelledby を複数のボタンで共有して loading にする場合は、各ボタンに id を付けてください。`
   );
 }
-function D(e, r) {
+function N(e, r) {
   const t = e["aria-labelledby"]?.trim();
   if (t) {
-    const s = `${e.id ?? t.split(/\s+/).join("-")}-loading-label`;
-    return { labelId: s, attrs: { "aria-labelledby": `${t} ${s}` } };
+    const l = `${e.id ?? t.split(/\s+/).join("-")}-loading-label`;
+    return { labelId: l, attrs: { "aria-labelledby": `${t} ${l}` } };
   }
   const a = e["aria-label"];
   return a && (typeof r == "string" || typeof r == "number") ? { attrs: { "aria-label": `${a} ${r}` } } : { attrs: {} };
@@ -133,12 +133,12 @@ function W({
   variant: r = "default",
   size: t = "default",
   asChild: a = !1,
-  loading: s = !1,
+  loading: l = !1,
   loadingLabel: o = "処理中",
   ...b
 }) {
   const m = a ? p.Root : "button";
-  if (!s)
+  if (!l)
     return /* @__PURE__ */ i(
       m,
       {
@@ -149,15 +149,15 @@ function W({
         ...b
       }
     );
-  const { children: l, ...d } = b;
+  const { children: s, ...d } = b;
   if (a) {
-    const x = h.isValidElement(l) ? h.cloneElement(l, {
+    const x = h.isValidElement(s) ? h.cloneElement(s, {
       "aria-disabled": !0,
       tabIndex: -1,
       onClick: n,
       onClickCapture: n,
       onAuxClickCapture: n
-    }) : l;
+    }) : s;
     return /* @__PURE__ */ i(
       p.Root,
       {
@@ -173,7 +173,7 @@ function W({
       }
     );
   }
-  const g = o != null && o !== !1 && o !== "", v = g ? D(d, o) : { attrs: {} };
+  const g = o != null && o !== !1 && o !== "", v = g ? N(d, o) : { attrs: {} };
   return /* @__PURE__ */ f(
     "button",
     {
@@ -194,7 +194,7 @@ function W({
       onClickCapture: n,
       onClick: n,
       children: [
-        l,
+        s,
         g ? /* @__PURE__ */ i(
           "span",
           {

package/dist/components/foundations/checkbox-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import * as x from "react";
 import M from "iconsax-reactjs/dist/esm/TickSquare.js";
 import { Checkbox as f } from "radix-ui";
@@ -22,7 +22,7 @@ function A({
 function G({
   className: c,
   children: r,
-  description: s,
+  description: t,
   expandedContent: o,
   badge: d,
   checked: i,
@@ -31,15 +31,15 @@ function G({
   "aria-label": b,
   "aria-labelledby": k,
   "aria-describedby": y,
-  ...S
+  ...N
 }) {
-  const l = x.useId(), m = `${l}-label`, p = `${l}-description`, h = `${l}-expanded`, [N, B] = x.useState(n === !0), E = (i !== void 0 ? i : N) === !0, u = !!(r || d), C = k ?? (b === void 0 && u ? m : void 0), I = T(
+  const l = x.useId(), m = `${l}-label`, u = `${l}-description`, p = `${l}-expanded`, [S, B] = x.useState(n === !0), E = (i !== void 0 ? i : S) === !0, h = !!(r || d), C = k ?? (b === void 0 && h ? m : void 0), I = T(
     // ラベルが無いカードは名前が内容（= 説明）になるので、説明を重ねて 2 回読ませない
-    s && u ? p : void 0,
-    o && E ? h : void 0,
+    t && h ? u : void 0,
+    o && E ? p : void 0,
     y
   );
-  return /* @__PURE__ */ t(
+  return /* @__PURE__ */ s(
     f.Root,
     {
       "data-slot": "checkbox-card-item",
@@ -55,18 +55,18 @@ function G({
         // 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",
         o ? "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 で選択状態と紛らわしかったため統一した。
         j,
         "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)]",
         c
       ),
-      ...S,
+      ...N,
       children: [
-        /* @__PURE__ */ t("span", { className: a("flex items-center gap-2", o && "w-full"), children: [
+        /* @__PURE__ */ s("span", { className: a("flex items-center gap-2", o && "w-full"), children: [
           /* @__PURE__ */ e(
             "span",
             {
@@ -75,7 +75,7 @@ function G({
                 // 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)]"
               ),
               children: /* @__PURE__ */ e(
                 f.Indicator,
@@ -87,8 +87,8 @@ function G({
               )
             }
           ),
-          (r || s || d) && /* @__PURE__ */ t("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-            (r || d) && /* @__PURE__ */ t("span", { id: m, className: "flex items-center gap-1.5", children: [
+          (r || t || d) && /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            (r || d) && /* @__PURE__ */ s("span", { id: m, className: "flex items-center gap-1.5", children: [
               r && /* @__PURE__ */ e(
                 "span",
                 {
@@ -102,16 +102,16 @@ function G({
               ),
               d && /* @__PURE__ */ e("span", { "data-slot": "checkbox-card-badge", children: d })
             ] }),
-            s && /* @__PURE__ */ e(
+            t && /* @__PURE__ */ e(
               "span",
               {
-                id: p,
+                id: u,
                 "data-slot": "checkbox-card-description",
                 className: a(
                   "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
                   "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
                 ),
-                children: s
+                children: t
               }
             )
           ] })
@@ -119,7 +119,7 @@ function G({
         o && /* @__PURE__ */ e(
           "span",
           {
-            id: h,
+            id: p,
             "data-slot": "checkbox-card-expanded",
             className: "hidden border-t border-[var(--Border-Medium-Emphasis)] pt-3 group-data-[state=checked]:block",
             children: o

package/dist/components/foundations/checkbox.js

@@ -53,20 +53,20 @@ function $({
   count: a,
   containerClassName: l,
   className: m,
-  id: C,
+  id: N,
   ref: u,
   ...s
 }) {
-  const c = w(), b = i.useRef(null), f = i.useRef(void 0), [I, R] = i.useState(!1), N = i.useId(), n = C ?? N, h = i.useCallback((o) => {
+  const c = w(), b = i.useRef(null), f = i.useRef(void 0), [C, I] = i.useState(!1), R = i.useId(), n = N ?? R, h = i.useCallback((o) => {
     const d = f.current;
     f.current = void 0, d ? d() : o || k(u, null), b.current = o, o && (f.current = k(u, o));
   }, [u]), v = `${n}-label`, p = r ? `${n}-description` : void 0;
   if ((typeof window > "u" ? i.useEffect : i.useLayoutEffect)(() => {
     if (e !== void 0 || !b.current || !c) return;
     const o = Array.from(b.current.labels ?? []).filter((d) => d.id !== c.labelId);
-    R(o.length > 0);
+    I(o.length > 0);
   }, [c, e]), e === void 0) {
-    const o = L({ ...s, id: n }, c, I);
+    const o = L({ ...s, id: n }, c, C);
     return /* @__PURE__ */ t(g, { ref: h, id: n, className: m, ...s, ...o });
   }
   return /* @__PURE__ */ x(
@@ -77,8 +77,8 @@ function $({
       "data-disabled": s.disabled || void 0,
       className: E(
         "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)]",
         s.disabled && "cursor-not-allowed opacity-60 hover:bg-transparent has-[:focus-visible]:bg-transparent",
         l
       ),

package/dist/components/foundations/chip-variants.js

@@ -1,20 +1,20 @@
 import { cva as e } from "class-variance-authority";
 import { FOCUS_RING as a } from "../../lib/focus-ring.js";
-const t = e(
+const i = e(
   `inline-flex items-center justify-center whitespace-nowrap transition-colors focus-visible:outline-none ${a}`,
   {
     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 の黒系の枠で示す
@@ -24,9 +24,9 @@ const t = e(
          * 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: {
@@ -50,5 +50,5 @@ const t = e(
   }
 );
 export {
-  t as chipVariants
+  i as chipVariants
 };