@cakejp/design-system 0.22.1 → 0.24.0

package/dist/components/foundations/alert.js

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

package/dist/components/foundations/badge.js

@@ -11,18 +11,18 @@ const u = o(
         // ── 塗りつぶし（濃い背景 + 白文字） ──
         default: "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] [a&]:hover:bg-[var(--Hover-Primary-Button)]",
         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)]",
+        success: "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)]",
+        "success-subtle": "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
         "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"
       }
     },
@@ -31,7 +31,7 @@ const u = o(
     }
   }
 );
-function m({
+function f({
   className: e,
   variant: r = "default",
   asChild: a = !1,
@@ -49,6 +49,6 @@ function m({
   );
 }
 export {
-  m as Badge,
+  f as Badge,
   u as badgeVariants
 };

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
 };