@cakejp/design-system 0.22.1 → 0.24.0

package/dist/components/primitives/number-input.js

@@ -1,83 +1,105 @@
 "use client";
-import { jsxs as V, jsx as r } from "react/jsx-runtime";
+import { jsx as r, jsxs as q } from "react/jsx-runtime";
 import * as l from "react";
-import J from "iconsax-reactjs/dist/esm/Add.js";
-import Q from "iconsax-reactjs/dist/esm/Minus.js";
-import q from "iconsax-reactjs/dist/esm/Trash.js";
+import W from "iconsax-reactjs/dist/esm/Add.js";
+import X from "iconsax-reactjs/dist/esm/Minus.js";
+import Y from "iconsax-reactjs/dist/esm/Trash.js";
 import { cn as n } from "../../lib/utils.js";
 import { FOCUS_RING as c } from "../../lib/focus-ring.js";
-import { HIGH_CONTRAST_OUTLINE as le } from "../../lib/high-contrast.js";
-import { useFieldLabelling as ce, mergeIdRefs as ue } from "../../lib/field-labelling.js";
-function de({
+import { HIGH_CONTRAST_OUTLINE as ge } from "../../lib/high-contrast.js";
+import { useFieldLabelling as ye, mergeIdRefs as xe } from "../../lib/field-labelling.js";
+function Ne({
   className: D,
-  value: M,
-  defaultValue: W,
+  value: O,
+  defaultValue: Z,
   min: u = 1,
-  max: S = 99,
-  step: O = 1,
-  onChange: X,
+  max: I = 99,
+  step: H = 1,
+  onChange: ee,
   disabled: a = !1,
-  error: Y,
-  size: Z = "md",
-  editable: h = !0,
-  showTrash: ee = !1,
-  onDelete: re,
-  formatOptions: I,
-  locale: te = "ja-JP",
-  inputId: ae,
-  label: H,
+  error: re,
+  size: te = "md",
+  editable: d = !0,
+  showTrash: ae = !1,
+  onDelete: ne,
+  formatOptions: p,
+  locale: ie = "ja-JP",
+  inputId: oe,
+  name: S,
+  inputRef: se,
+  inputProps: B,
+  label: M,
   ...z
 }) {
-  const p = H ?? "数量", o = ce(), ne = l.useId(), s = H === void 0 ? o?.labelId : void 0, f = Y ?? !!o?.errorId, $ = s ? { "aria-labelledby": s } : { "aria-label": p }, L = ae ?? o?.controlId, A = {
-    ...s ? { "aria-labelledby": s } : { "aria-label": `${p}を入力` },
-    "aria-describedby": o ? ue(o.descriptionId, o.errorId) : void 0,
+  const h = M ?? "数量", o = ye(), le = l.useId(), s = M === void 0 ? o?.labelId : void 0, f = re ?? !!o?.errorId, $ = s ? { "aria-labelledby": s } : { "aria-label": h }, ce = oe ?? o?.controlId, F = {
+    ...s ? { "aria-labelledby": s } : { "aria-label": `${h}を入力` },
+    "aria-describedby": o ? xe(o.descriptionId, o.errorId) : void 0,
     "aria-invalid": f || void 0
-  }, B = (e, i, se) => {
-    if (!s) return { "aria-label": se };
-    const G = `${ne}-${e}`;
-    return { id: G, "aria-label": i, "aria-labelledby": `${s} ${G}` };
-  }, F = M !== void 0, P = l.useCallback(
-    (e) => Math.min(S, Math.max(u, e)),
-    [u, S]
-  ), [ie, oe] = l.useState(() => P(W ?? u)), t = F ? M : ie, [E, N] = l.useState(!1), [T, d] = l.useState(String(t)), m = ee && t <= u, v = t > u && !a, b = t < S && !a, g = m && !a, R = m ? B("decrement", "削除", "削除") : B("decrement", "減らす", `${p}を減らす`), K = B("increment", "増やす", `${p}を増やす`), y = (e) => a ? { disabled: !0 } : { "aria-disabled": e ? void 0 : !0 };
+  }, E = (e, i, fe) => {
+    if (!s) return { "aria-label": fe };
+    const Q = `${le}-${e}`;
+    return { id: Q, "aria-label": i, "aria-labelledby": `${s} ${Q}` };
+  }, L = O !== void 0, P = l.useCallback(
+    (e) => Math.min(I, Math.max(u, e)),
+    [u, I]
+  ), [ue, de] = l.useState(() => P(Z ?? u)), t = L ? O : ue, [T, A] = l.useState(!1), [k, g] = l.useState(String(t)), m = ae && t <= u, v = t > u && !a, b = t < I && !a, y = m && !a, R = m ? E("decrement", "削除", "削除") : E("decrement", "減らす", `${h}を減らす`), K = E("increment", "増やす", `${h}を増やす`), x = (e) => a ? { disabled: !0 } : { "aria-disabled": e ? void 0 : !0 };
   l.useEffect(() => {
-    E || d(String(t));
-  }, [t, E]);
-  const k = (e) => {
+    T || g(String(t));
+  }, [t, T]);
+  const j = (e) => {
     const i = P(e);
-    F || oe(i), d(String(i)), X?.(i);
-  }, j = () => {
+    L || de(i), g(String(i)), ee?.(i);
+  }, w = () => {
     if (m) {
-      re?.();
+      ne?.();
       return;
     }
-    v && k(t - O);
-  }, w = () => {
-    b && k(t + O);
-  }, U = (e) => {
-    const i = e.target.value;
-    (i === "" || /^-?\d*$/.test(i)) && d(i);
+    v && j(t - H);
   }, C = () => {
-    const e = parseInt(T, 10);
-    k(Number.isNaN(e) ? t : e), N(!1);
-  }, _ = (e) => {
-    if (e.key === "Enter") {
-      C();
-      return;
+    b && j(t + H);
+  }, me = (e) => {
+    const i = e.target.value;
+    (i === "" || /^-?\d*$/.test(i)) && g(i);
+  }, U = () => {
+    const e = parseInt(k, 10);
+    j(Number.isNaN(e) ? t : e), A(!1);
+  }, ve = (e) => {
+    if (B?.onKeyDown?.(e), !e.defaultPrevented) {
+      if (e.key === "Enter") {
+        U();
+        return;
+      }
+      e.key === "ArrowUp" && (e.preventDefault(), C()), e.key === "ArrowDown" && (e.preventDefault(), w());
     }
-    e.key === "ArrowUp" && (e.preventDefault(), w()), e.key === "ArrowDown" && (e.preventDefault(), j());
-  }, x = E ? T : I ? new Intl.NumberFormat(te, I).format(t).replace(/￥/g, "¥") : T;
-  return Z === "sm" ? /* @__PURE__ */ V(
+  }, { onFocus: be, onBlur: pe, className: V, ...he } = B ?? {}, _ = d && !p ? S : void 0, G = S !== void 0 && _ === void 0 ? /* @__PURE__ */ r("input", { type: "hidden", name: S, value: t, disabled: a, form: B?.form }) : null, J = {
+    ...he,
+    ref: se,
+    name: _,
+    type: "text",
+    inputMode: "numeric",
+    pattern: "[0-9]*",
+    id: ce,
+    onFocus: (e) => {
+      A(!0), g(String(t)), be?.(e);
+    },
+    onChange: me,
+    onBlur: (e) => {
+      U(), pe?.(e);
+    },
+    onKeyDown: ve,
+    disabled: a
+  }, N = T ? k : p ? new Intl.NumberFormat(ie, p).format(t).replace(/￥/g, "¥") : k;
+  return te === "sm" ? /* @__PURE__ */ q(
     "div",
     {
       "data-slot": "number-input",
-      "data-editable": h || void 0,
+      "data-editable": d || void 0,
       className: n(
         // 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",
-        le,
+        "inline-flex h-9 w-[108px] shrink-0 items-center justify-between rounded-full bg-[var(--Surface-Neutral-Tertiary)] px-1",
+        ge,
         f && "ring-2 ring-[var(--Surface-Caution)]",
         a && "cursor-not-allowed",
         D
@@ -93,36 +115,27 @@ function de({
             className: n(
               "flex size-7 shrink-0 items-center justify-center rounded-full transition-colors outline-none",
               c,
-              v || g ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
+              v || y ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
             ),
-            onClick: j,
-            ...y(v || g),
+            onClick: w,
+            ...x(v || y),
             ...R,
-            children: m ? /* @__PURE__ */ r(q, { size: 14 }) : /* @__PURE__ */ r(Q, { size: 14 })
+            children: m ? /* @__PURE__ */ r(Y, { size: 14 }) : /* @__PURE__ */ r(X, { size: 14 })
           }
         ),
-        h ? /* @__PURE__ */ r(
+        d ? /* @__PURE__ */ r(
           "input",
           {
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            id: L,
-            value: x,
-            onFocus: () => {
-              N(!0), d(String(t));
-            },
-            onChange: U,
-            onBlur: C,
-            onKeyDown: _,
-            disabled: a,
+            ...J,
+            value: N,
             className: n(
               "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)]",
               c,
-              a ? "text-[var(--Text-Disable)]" : "text-[var(--Text-High-Emphasis)]"
+              a ? "text-[var(--Text-Disable)]" : "text-[var(--Text-High-Emphasis)]",
+              V
             ),
-            ...A,
+            ...F,
             "aria-live": "polite"
           }
         ) : /* @__PURE__ */ r(
@@ -134,7 +147,7 @@ function de({
             ),
             "aria-live": "polite",
             "aria-atomic": "true",
-            children: x
+            children: N
           }
         ),
         /* @__PURE__ */ r(
@@ -146,19 +159,20 @@ function de({
               c,
               b ? "text-[var(--Object-High-Emphasis)] hover:bg-[var(--Overlay-Light)] active:bg-[var(--Overlay-Medium)]" : "text-[var(--Object-Disable)]"
             ),
-            onClick: w,
-            ...y(b),
+            onClick: C,
+            ...x(b),
             ...K,
-            children: /* @__PURE__ */ r(J, { size: 14 })
+            children: /* @__PURE__ */ r(W, { size: 14 })
           }
-        )
+        ),
+        G
       ]
     }
-  ) : /* @__PURE__ */ V(
+  ) : /* @__PURE__ */ q(
     "div",
     {
       "data-slot": "number-input",
-      "data-editable": h || void 0,
+      "data-editable": d || void 0,
       className: n("inline-flex shrink-0 items-center gap-3", D),
       role: "group",
       ...$,
@@ -171,40 +185,31 @@ function de({
             className: n(
               "flex size-10 shrink-0 items-center justify-center rounded-full border transition-colors outline-none",
               c,
-              v || g ? "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-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
+              v || y ? "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: j,
-            ...y(v || g),
+            onClick: w,
+            ...x(v || y),
             ...R,
-            children: m ? /* @__PURE__ */ r(q, { size: 18 }) : /* @__PURE__ */ r(Q, { size: 18 })
+            children: m ? /* @__PURE__ */ r(Y, { size: 18 }) : /* @__PURE__ */ r(X, { size: 18 })
           }
         ),
-        h ? /* @__PURE__ */ r(
+        d ? /* @__PURE__ */ r(
           "input",
           {
-            type: "text",
-            inputMode: "numeric",
-            pattern: "[0-9]*",
-            id: L,
-            value: x,
-            onFocus: () => {
-              N(!0), d(String(t));
-            },
-            onChange: U,
-            onBlur: C,
-            onKeyDown: _,
-            disabled: a,
+            ...J,
+            value: N,
             className: n(
               // formatOptions で桁が増えるため、内容に応じて広がるよう min-w にしている
               "h-10 shrink-0 rounded-lg border text-center typo-label-lg outline-none transition-colors",
               // 既定は Figma 準拠の固定幅。桁区切り・通貨表示のときだけ内容に追従させる
               // （input は size 属性由来の既定幅を持つため、w-12 を外すと 200px 超に広がる）
-              I ? "field-sizing-content min-w-12 max-w-40 px-2" : "w-12",
+              p ? "field-sizing-content min-w-12 max-w-40 px-2" : "w-12",
               f ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Control,var(--Border-Medium-Emphasis))] hover:border-[var(--Border-High-Emphasis)]",
               c,
-              a ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
+              a ? "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Disable)]" : "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-High-Emphasis)]",
+              V
             ),
-            ...A,
+            ...F,
             "aria-live": "polite"
           }
         ) : /* @__PURE__ */ r(
@@ -214,11 +219,11 @@ function de({
               // span は内容幅なので min-w-12 で Figma の 48px を下限にする
               "flex h-10 min-w-12 shrink-0 items-center justify-center rounded-lg border px-2 text-center typo-label-lg",
               f ? "border-[var(--Border-Caution)]" : "border-[var(--Border-Control,var(--Border-Medium-Emphasis))]",
-              a ? "bg-[var(--Surface-Tertiary)] text-[var(--Text-Disable)]" : "bg-[var(--Surface-Secondary)] text-[var(--Text-High-Emphasis)]"
+              a ? "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",
-            children: x
+            children: N
           }
         ),
         /* @__PURE__ */ r(
@@ -228,20 +233,21 @@ function de({
             className: n(
               "flex size-10 shrink-0 items-center justify-center rounded-full border transition-colors outline-none",
               c,
-              b ? "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-Medium-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Object-Disable)]"
+              b ? "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: w,
-            ...y(b),
+            onClick: C,
+            ...x(b),
             ...K,
-            children: /* @__PURE__ */ r(J, { size: 18 })
+            children: /* @__PURE__ */ r(W, { size: 18 })
           }
-        )
+        ),
+        G
       ]
     }
   );
 }
-const xe = de;
+const Ce = Ne;
 export {
-  de as NumberInput,
-  xe as QuantitySelector
+  Ne as NumberInput,
+  Ce as QuantitySelector
 };

package/dist/components/primitives/progress-steps.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as m } from "react/jsx-runtime";
 import "react";
 import { Check as p } from "lucide-react";
 import { cn as s } from "../../lib/utils.js";
-function b({
+function N({
   className: d,
   steps: a,
   currentStep: i,
@@ -26,7 +26,7 @@ function b({
               {
                 className: s(
                   "flex size-7 items-center justify-center rounded-full typo-label-sm transition-colors",
-                  o ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-Low-Emphasis)]"
+                  o ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-Low-Emphasis)]"
                 ),
                 "aria-current": n ? "step" : void 0,
                 children: x && t ? /* @__PURE__ */ e(p, { className: "size-4 shrink-0" }) : r + 1
@@ -58,5 +58,5 @@ function b({
   );
 }
 export {
-  b as ProgressSteps
+  N as ProgressSteps
 };

package/dist/components/primitives/search-bar.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as N, Fragment as S, jsx as o } from "react/jsx-runtime";
+import { jsxs as g, Fragment as S, jsx as o } from "react/jsx-runtime";
 import * as s from "react";
 import E from "iconsax-reactjs/dist/esm/SearchNormal1.js";
 import { cn as i } from "../../lib/utils.js";
@@ -28,7 +28,7 @@ const B = s.forwardRef(
       )));
     }, w = (r) => {
       r.key === "Enter" && !t && h(), d.onKeyDown?.(r);
-    }, g = (r) => {
+    }, N = (r) => {
       const b = n.current?.value ?? "";
       if (!b.trim()) {
         r.preventDefault();
@@ -36,14 +36,14 @@ const B = s.forwardRef(
       }
       l?.(b);
     }, f = i(
-      "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)]",
       R,
       a === "sm" ? "h-9" : "h-11",
       v
-    ), p = /* @__PURE__ */ N(S, { children: [
+    ), p = /* @__PURE__ */ g(S, { children: [
       /* @__PURE__ */ o(
         "input",
         {
@@ -65,7 +65,7 @@ const B = s.forwardRef(
         {
           type: t ? "submit" : "button",
           className: i(
-            "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 なので外向きリングは切れる。内側に描く。
             C,
             // 高さは親の枠（border 1px）の内側いっぱい（h-full）。以前は親と同じ高さ（h-9 / h-11）で、
@@ -86,7 +86,7 @@ const B = s.forwardRef(
         action: m,
         method: "get",
         role: "search",
-        onSubmit: g,
+        onSubmit: N,
         className: f,
         children: p
       }

package/dist/components/primitives/section-nav.js

@@ -61,7 +61,7 @@ function m({
             onClick: () => s?.(r.key),
             className: t(
               "flex items-center gap-3 px-4 py-2.5 typo-body-md transition-colors cursor-pointer",
-              e ? "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)]"
+              e ? "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-Neutral-Secondary)] hover:text-[var(--Text-High-Emphasis)]"
             ),
             "aria-current": e ? "location" : void 0,
             children: [

package/dist/components/primitives/side-nav.js

@@ -71,7 +71,7 @@ function M({
               className: x(
                 // 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",
                 v ? "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"
               ),
               "aria-current": v ? "page" : void 0,

package/dist/components/primitives/sub-nav.js

@@ -2,25 +2,25 @@ import { jsx as a, jsxs as f } from "react/jsx-runtime";
 import "react";
 import { cn as e } from "../../lib/utils.js";
 import { containerVariants as m } from "./container.js";
-const u = "px-4 md:px-6";
-function E({
+const v = "px-4 md:px-6";
+function N({
   className: o,
   items: x,
   variant: n = "text",
   linkComponent: b,
-  containerSize: s,
+  containerSize: t,
   ...l
 }) {
   const i = () => x.map((r) => {
-    const p = r.href ? b ?? "a" : "button", v = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+    const p = r.href ? b ?? "a" : "button", u = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
     return n === "chip" ? /* @__PURE__ */ a(
       p,
       {
         className: e(
           "shrink-0 rounded-full px-3 typo-label-sm transition-colors h-8 inline-flex items-center justify-center",
-          r.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)]"
+          r.isActive ? "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)]" : "bg-[var(--Surface-Neutral-Secondary)] text-[var(--Text-Medium-Emphasis)] hover:bg-[var(--Surface-Neutral-Tertiary)]"
         ),
-        ...v,
+        ...u,
         children: r.label
       },
       r.label
@@ -31,7 +31,7 @@ function E({
           "relative shrink-0 py-2.5 typo-label-md transition-colors",
           r.isActive ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)]"
         ),
-        ...v,
+        ...u,
         children: [
           r.label,
           r.isActive && /* @__PURE__ */ a("span", { className: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--Text-High-Emphasis)]" })
@@ -39,14 +39,14 @@ function E({
       },
       r.label
     );
-  }), t = n === "chip", c = t ? "div" : "nav", d = t ? e("flex gap-2 overflow-x-auto py-2 scrollbar-hide", u) : e("flex gap-4 overflow-x-auto scrollbar-hide", u), h = t ? void 0 : "border-b border-[var(--Border-Low-Emphasis)]";
-  return s ? /* @__PURE__ */ a(c, { "data-slot": "sub-nav", className: e(h, o), ...l, children: /* @__PURE__ */ a(
+  }), s = n === "chip", c = s ? "div" : "nav", d = s ? e("flex gap-2 overflow-x-auto py-2 scrollbar-hide", v) : e("flex gap-4 overflow-x-auto scrollbar-hide", v), h = s ? void 0 : "border-b border-[var(--Border-Low-Emphasis)]";
+  return t ? /* @__PURE__ */ a(c, { "data-slot": "sub-nav", className: e(h, o), ...l, children: /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "sub-nav-container",
-      "data-container-size": s,
+      "data-container-size": t,
       className: e(
-        m({ size: s, gutter: "none" }),
+        m({ size: t, gutter: "none" }),
         d
       ),
       children: i()
@@ -62,5 +62,5 @@ function E({
   );
 }
 export {
-  E as SubNav
+  N as SubNav
 };

package/dist/components/primitives/tag.js

@@ -1,13 +1,13 @@
 import { jsxs as n } from "react/jsx-runtime";
 import "react";
-import { cva as o } from "class-variance-authority";
-import { cn as s } from "../../lib/utils.js";
-const x = o(
+import { cva as s } from "class-variance-authority";
+import { cn as o } from "../../lib/utils.js";
+const x = s(
   "inline-flex items-center gap-1 rounded text-nowrap",
   {
     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)]",
+        default: "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)]",
         caution: "bg-[var(--Caution-Ultra-Light)] text-[var(--Text-Caution)] dark:bg-[var(--Text-Caution)]/20 dark:text-[var(--Text-Caution)]",
@@ -15,7 +15,7 @@ const x = o(
         warning: "bg-[var(--Primitive-Wood-100)] text-[var(--Text-Warning)]",
         info: "bg-[var(--Primitive-Sea-50)] text-[var(--Primitive-Sea-600)] dark:bg-[var(--Primitive-Sea-600)] dark:text-[var(--Primitive-White-alpha-1000)]",
         "info-fill": "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
-        success: "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
+        success: "bg-[var(--Surface-Success-Light)] text-[var(--Text-Success)]",
         accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
         timesale: "bg-[var(--Primitive-Wood-400)] text-[var(--Text-on-Inverse)]",
         berry: "bg-[var(--Primitive-Berry-700)] text-[var(--Text-on-Inverse)]",
@@ -32,7 +32,7 @@ const x = o(
     }
   }
 );
-function p({
+function d({
   className: a,
   variant: r,
   size: t,
@@ -44,7 +44,7 @@ function p({
     "span",
     {
       "data-slot": "tag",
-      className: s(x({ variant: r, size: t }), a),
+      className: o(x({ variant: r, size: t }), a),
       ...v,
       children: [
         e,
@@ -54,6 +54,6 @@ function p({
   );
 }
 export {
-  p as Tag,
+  d as Tag,
   x as tagVariants
 };

package/dist/components/primitives/workspace-shell.js

@@ -4,7 +4,7 @@ import { cn as p } from "../../lib/utils.js";
 import { SkipLink as g } from "../foundations/skip-link.js";
 import { Header as h } from "./header.js";
 import { Container as v } from "./container.js";
-function b({
+function N({
   title: o,
   onBack: s,
   backLabel: n = "戻る",
@@ -12,9 +12,9 @@ function b({
   sectionNav: a,
   asidePanel: e,
   children: i,
-  className: m,
+  className: t,
   mainId: l = "main-content",
-  skipLink: t,
+  skipLink: m,
   headerLayout: f = "start"
 }) {
   return /* @__PURE__ */ c(
@@ -22,13 +22,13 @@ function b({
     {
       "data-slot": "workspace-shell",
       className: p(
-        // 地が 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)]",
-        m
+        "@container min-h-screen bg-[var(--Surface-Neutral-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+        t
       ),
       children: [
-        t !== !1 && /* @__PURE__ */ r(g, { href: `#${l}` }),
+        m !== !1 && /* @__PURE__ */ r(g, { href: `#${l}` }),
         /* @__PURE__ */ r(
           h,
           {
@@ -53,5 +53,5 @@ function b({
   );
 }
 export {
-  b as WorkspaceShell
+  N as WorkspaceShell
 };