@cakejp/design-system 0.22.0 → 0.23.0

package/dist/components/primitives/date-picker.js

@@ -1,18 +1,18 @@
 "use client";
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import * as d from "react";
-import j from "iconsax-reactjs/dist/esm/Calendar.js";
-import { X as k } from "lucide-react";
-import { ja as B } from "react-day-picker/locale";
+import { jsxs as l, jsx as i } from "react/jsx-runtime";
+import * as c from "react";
+import k from "iconsax-reactjs/dist/esm/Calendar.js";
+import { X as B } from "lucide-react";
+import { ja as F } from "react-day-picker/locale";
 import { cn as $ } from "../../lib/utils.js";
-import { useFieldLabelling as D, resolveNativeFieldAria as F } from "../../lib/field-labelling.js";
+import { useFieldLabelling as D, resolveNativeFieldAria as R } from "../../lib/field-labelling.js";
 import { Button as A } from "../foundations/button.js";
-import { Calendar as R } from "../foundations/calendar.js";
-import { Popover as V, PopoverTrigger as _, PopoverContent as J } from "../foundations/popover.js";
+import { Calendar as V } from "../foundations/calendar.js";
+import { Popover as _, PopoverTrigger as J, PopoverContent as O } from "../foundations/popover.js";
 import { Select as T, SelectTrigger as w, SelectValue as E, SelectContent as H, SelectItem as P } from "../foundations/select.js";
-const O = ["日", "月", "火", "水", "木", "金", "土"];
+const q = ["日", "月", "火", "水", "木", "金", "土"];
 function z(e) {
-  return `${e.getMonth() + 1}月${e.getDate()}日（${O[e.getDay()]}）`;
+  return `${e.getMonth() + 1}月${e.getDate()}日（${q[e.getDay()]}）`;
 }
 function K(e, n, a) {
   const s = [];
@@ -23,186 +23,189 @@ function W({
   onChange: n,
   placeholder: a = "日付を選択",
   min: s,
-  max: g,
-  disabledDates: S,
-  disabled: m,
-  clearable: N = !1,
-  clearLabel: h = "日付をクリア",
-  id: l,
-  "aria-invalid": b,
-  "aria-describedby": u,
-  className: M
+  max: p,
+  disabledDates: M,
+  defaultMonth: f,
+  disabled: g,
+  clearable: d = !1,
+  clearLabel: m = "日付をクリア",
+  id: b,
+  "aria-invalid": u,
+  "aria-describedby": y,
+  className: x
 }) {
-  const [y, v] = d.useState(!1), C = K(s, g, S), p = N && !!e && !m, x = d.useRef(null), f = `${d.useId()}-value`, r = D(), i = F(
-    { id: l, "aria-describedby": u, "aria-invalid": b },
-    r
-  ), o = r ? { "aria-labelledby": `${r.labelId} ${f}` } : { "aria-label": e ? z(e) : a };
+  const [C, v] = c.useState(!1), N = K(s, p, M), S = d && !!e && !g, h = c.useRef(null), r = `${c.useId()}-value`, t = D(), o = R(
+    { id: b, "aria-describedby": y, "aria-invalid": u },
+    t
+  ), I = t ? { "aria-labelledby": `${t.labelId} ${r}` } : { "aria-label": e ? z(e) : a };
   return (
     // クリアボタンは trigger の「兄弟」として絶対配置する。trigger の内側に置くと
     // button の入れ子になり a11y 上不正（Chip removable と同じ解決）。
-    /* @__PURE__ */ c("div", { className: $("relative w-full", M), children: [
-      /* @__PURE__ */ c(V, { open: y, onOpenChange: v, children: [
-        /* @__PURE__ */ t(_, { asChild: !0, children: /* @__PURE__ */ c(
+    /* @__PURE__ */ l("div", { className: $("relative w-full", x), children: [
+      /* @__PURE__ */ l(_, { open: C, onOpenChange: v, children: [
+        /* @__PURE__ */ i(J, { asChild: !0, children: /* @__PURE__ */ l(
           A,
           {
-            ref: x,
-            id: l,
-            "aria-invalid": b,
-            "aria-describedby": u,
-            ...i,
+            ref: h,
+            id: b,
+            "aria-invalid": u,
+            "aria-describedby": y,
+            ...o,
             type: "button",
             variant: "ghost",
-            disabled: m,
-            ...o,
+            disabled: g,
+            ...I,
             "data-empty": !e,
             className: $(
               // h-11（44px）= 入力コントロールの共通高さ（Input / SelectTrigger / Button default と揃える）
-              "h-11 w-full justify-start gap-2 border border-[var(--Border-High-Emphasis)] bg-transparent px-3 typo-body-md text-[var(--Text-High-Emphasis)] hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] data-[empty=true]:text-[var(--Text-Low-Emphasis)]",
+              "h-11 w-full justify-start gap-2 border border-[var(--Border-High-Emphasis)] bg-transparent px-3 typo-body-md text-[var(--Text-High-Emphasis)] hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)] data-[empty=true]:text-[var(--Text-Low-Emphasis)]",
               // エラー時の枠は Input / Select と同じ Border-Caution（Button 共通の destructive を上書き）
               "aria-invalid:border-[var(--Border-Caution)]",
               // クリアボタンの領域を空ける
-              p && "pr-10"
+              S && "pr-10"
             ),
             children: [
-              /* @__PURE__ */ t(j, { size: 16, className: "shrink-0" }),
-              /* @__PURE__ */ t("span", { id: r ? f : void 0, className: "truncate", children: e ? z(e) : a })
+              /* @__PURE__ */ i(k, { size: 16, className: "shrink-0" }),
+              /* @__PURE__ */ i("span", { id: t ? r : void 0, className: "truncate", children: e ? z(e) : a })
             ]
           }
         ) }),
-        /* @__PURE__ */ t(J, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ t(
-          R,
+        /* @__PURE__ */ i(O, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ i(
+          V,
           {
             mode: "single",
+            required: !0,
             selected: e,
-            onSelect: (I) => {
-              n?.(I), v(!1);
+            defaultMonth: f ?? e,
+            onSelect: (j) => {
+              n?.(j), v(!1);
             },
-            disabled: C,
-            locale: B,
+            disabled: N,
+            locale: F,
             autoFocus: !0
           }
         ) })
       ] }),
-      p && /* @__PURE__ */ t(
+      S && /* @__PURE__ */ i(
         A,
         {
           type: "button",
           variant: "ghost",
           size: "icon-sm",
-          "aria-label": h,
+          "aria-label": m,
           onClick: () => {
-            n?.(void 0), x.current?.focus();
+            n?.(void 0), h.current?.focus();
           },
           className: "absolute top-1/2 right-1 -translate-y-1/2 text-[var(--Text-Medium-Emphasis)]",
-          children: /* @__PURE__ */ t(k, { className: "size-4" })
+          children: /* @__PURE__ */ i(B, { className: "size-4" })
         }
       )
     ] })
   );
 }
-function te({
+function ie({
   value: e,
   onChange: n,
   minuteStep: a = 5,
   hourLabel: s = "時",
-  minuteLabel: g = "分",
-  clearLabel: S = "日時をクリア",
-  disabled: m,
-  className: N,
-  "aria-invalid": h,
-  "aria-describedby": l,
+  minuteLabel: p = "分",
+  clearLabel: M = "日時をクリア",
+  disabled: f,
+  className: g,
+  "aria-invalid": d,
+  "aria-describedby": m,
   ...b
 }) {
-  const u = D(), M = d.useId(), y = (r, i) => {
-    if (!u) return { "aria-label": i };
-    const o = `${M}-${r}`;
+  const u = D(), y = c.useId(), x = (r, t) => {
+    if (!u) return { "aria-label": t };
+    const o = `${y}-${r}`;
     return {
       id: o,
-      "aria-label": i,
+      "aria-label": t,
       "aria-labelledby": `${u.labelId} ${o}`
     };
-  }, v = d.useMemo(
-    () => Array.from({ length: 24 }, (r, i) => i),
+  }, C = c.useMemo(
+    () => Array.from({ length: 24 }, (r, t) => t),
     []
-  ), C = d.useMemo(
+  ), v = c.useMemo(
     () => Array.from(
       { length: Math.ceil(60 / a) },
-      (r, i) => i * a
+      (r, t) => t * a
     ),
     [a]
-  ), p = (r, i) => {
+  ), N = (r, t) => {
     if (!e) return;
     const o = new Date(e);
-    r === "hours" ? o.setHours(Number(i)) : o.setMinutes(Number(i)), n?.(o);
-  }, x = (r) => {
+    r === "hours" ? o.setHours(Number(t)) : o.setMinutes(Number(t)), n?.(o);
+  }, S = (r) => {
     if (!r || !e) {
       n?.(r);
       return;
     }
-    const i = new Date(r);
-    i.setHours(
+    const t = new Date(r);
+    t.setHours(
       e.getHours(),
       e.getMinutes(),
       e.getSeconds(),
       e.getMilliseconds()
-    ), n?.(i);
-  }, f = m || !e;
-  return /* @__PURE__ */ c("div", { className: $("flex items-center gap-2", N), children: [
-    /* @__PURE__ */ t(
+    ), n?.(t);
+  }, h = f || !e;
+  return /* @__PURE__ */ l("div", { className: $("flex items-center gap-2", g), children: [
+    /* @__PURE__ */ i(
       W,
       {
         ...b,
         value: e,
-        onChange: x,
-        disabled: m,
-        clearLabel: S,
-        "aria-invalid": h,
-        "aria-describedby": l,
+        onChange: S,
+        disabled: f,
+        clearLabel: M,
+        "aria-invalid": d,
+        "aria-describedby": m,
         className: "flex-1"
       }
     ),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ l(
       T,
       {
         value: e ? String(e.getHours()) : void 0,
-        onValueChange: (r) => p("hours", r),
-        disabled: f,
+        onValueChange: (r) => N("hours", r),
+        disabled: h,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ i(
             w,
             {
               size: "default",
               className: "w-[72px]",
-              ...y("hour", s),
-              "aria-invalid": h,
-              "aria-describedby": l,
-              children: /* @__PURE__ */ t(E, { placeholder: s })
+              ...x("hour", s),
+              "aria-invalid": d,
+              "aria-describedby": m,
+              children: /* @__PURE__ */ i(E, { placeholder: s })
             }
           ),
-          /* @__PURE__ */ t(H, { children: v.map((r) => /* @__PURE__ */ t(P, { value: String(r), children: String(r).padStart(2, "0") }, r)) })
+          /* @__PURE__ */ i(H, { children: C.map((r) => /* @__PURE__ */ i(P, { value: String(r), children: String(r).padStart(2, "0") }, r)) })
         ]
       }
     ),
-    /* @__PURE__ */ t("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: ":" }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ i("span", { className: "typo-body-md text-[var(--Text-Medium-Emphasis)]", children: ":" }),
+    /* @__PURE__ */ l(
       T,
       {
         value: e ? String(e.getMinutes()) : void 0,
-        onValueChange: (r) => p("minutes", r),
-        disabled: f,
+        onValueChange: (r) => N("minutes", r),
+        disabled: h,
         children: [
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ i(
             w,
             {
               size: "default",
               className: "w-[72px]",
-              ...y("minute", g),
-              "aria-invalid": h,
-              "aria-describedby": l,
-              children: /* @__PURE__ */ t(E, { placeholder: g })
+              ...x("minute", p),
+              "aria-invalid": d,
+              "aria-describedby": m,
+              children: /* @__PURE__ */ i(E, { placeholder: p })
             }
           ),
-          /* @__PURE__ */ t(H, { children: C.map((r) => /* @__PURE__ */ t(P, { value: String(r), children: String(r).padStart(2, "0") }, r)) })
+          /* @__PURE__ */ i(H, { children: v.map((r) => /* @__PURE__ */ i(P, { value: String(r), children: String(r).padStart(2, "0") }, r)) })
         ]
       }
     )
@@ -210,5 +213,5 @@ function te({
 }
 export {
   W as DatePicker,
-  te as DateTimePicker
+  ie as DateTimePicker
 };

package/dist/components/primitives/error-state.js

@@ -18,7 +18,7 @@ function y({
       className: a("h-auto w-40", t),
       ...i,
       children: [
-        /* @__PURE__ */ r("ellipse", { cx: "100", cy: "146", rx: "74", ry: "11", fill: "var(--Surface-Tertiary)" }),
+        /* @__PURE__ */ r("ellipse", { cx: "100", cy: "146", rx: "74", ry: "11", fill: "var(--Surface-Neutral-Tertiary)" }),
         /* @__PURE__ */ r(
           "path",
           {
@@ -53,8 +53,8 @@ function y({
         /* @__PURE__ */ r("circle", { cx: "70", cy: "88", r: "5", fill: "var(--Surface-Primary)", stroke: "currentColor", strokeWidth: "2.5" }),
         /* @__PURE__ */ r("circle", { cx: "100", cy: "86", r: "5", fill: "var(--Surface-Primary)", stroke: "currentColor", strokeWidth: "2.5" }),
         /* @__PURE__ */ r("circle", { cx: "163", cy: "66", r: "4", fill: "var(--Brand-Cake-Orange)" }),
-        /* @__PURE__ */ r("circle", { cx: "150", cy: "52", r: "3", fill: "var(--Surface-Tertiary)" }),
-        /* @__PURE__ */ r("circle", { cx: "40", cy: "70", r: "3.5", fill: "var(--Surface-Tertiary)" })
+        /* @__PURE__ */ r("circle", { cx: "150", cy: "52", r: "3", fill: "var(--Surface-Neutral-Tertiary)" }),
+        /* @__PURE__ */ r("circle", { cx: "40", cy: "70", r: "3.5", fill: "var(--Surface-Neutral-Tertiary)" })
       ]
     }
   );
@@ -66,18 +66,18 @@ const d = {
     description: "URL が間違っているか、ページが移動または削除された可能性があります。"
   }
 };
-function N({
+function S({
   className: t,
   kind: e = "error",
   icon: i,
   title: u,
   description: m,
-  onRetry: c,
+  onRetry: l,
   retryLabel: f = "再試行",
   action: v,
   ...h
 }) {
-  const l = e === "notFound", x = u ?? d[e].title, n = m ?? d[e].description, s = i ?? (l ? /* @__PURE__ */ r(y, {}) : null);
+  const c = e === "notFound", x = u ?? d[e].title, n = m ?? d[e].description, s = i ?? (c ? /* @__PURE__ */ r(y, {}) : null);
   return /* @__PURE__ */ o(
     "div",
     {
@@ -94,7 +94,7 @@ function N({
           {
             className: a(
               "shrink-0",
-              l ? "text-[var(--Border-Medium-Emphasis)]" : "text-[var(--Object-Caution)]"
+              c ? "text-[var(--Border-Medium-Emphasis)]" : "text-[var(--Object-Caution)]"
             ),
             children: s
           }
@@ -102,7 +102,7 @@ function N({
         /* @__PURE__ */ r("p", { className: "mt-4 typo-heading-md text-[var(--Text-High-Emphasis)]", children: x }),
         n && /* @__PURE__ */ r("div", { className: "mt-2 typo-body-md text-[var(--Text-Medium-Emphasis)] max-w-[400px]", children: n }),
         /* @__PURE__ */ o("div", { className: "mt-6 flex flex-col gap-3 items-center", children: [
-          c && /* @__PURE__ */ r(p, { variant: "secondary", size: "lg", onClick: c, children: f }),
+          l && /* @__PURE__ */ r(p, { variant: "secondary", size: "lg", onClick: l, children: f }),
           v
         ] })
       ]
@@ -110,6 +110,6 @@ function N({
   );
 }
 export {
-  N as ErrorState,
+  S as ErrorState,
   y as NotFoundIllustration
 };

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

@@ -41,7 +41,7 @@ function z({
             "button",
             {
               type: "button",
-              className: "relative flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80",
+              className: "relative flex size-9 shrink-0 items-center justify-center rounded-full bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80",
               onClick: o,
               "aria-label": "絞り込み",
               children: [
@@ -57,7 +57,7 @@ function z({
               onClick: r.onClick,
               className: c(
                 "flex h-9 shrink-0 items-center gap-0.5 rounded-full px-2.5 typo-body-md transition-colors max-w-[180px]",
-                r.isActive ? "bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)] dark:bg-[var(--Brand-Cake-Orange)] dark:text-[var(--Primitive-White-alpha-1000)] dark:ring-0" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
+                r.isActive ? "bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)] dark:bg-[var(--Brand-Cake-Orange)] dark:text-[var(--Primitive-White-alpha-1000)] dark:ring-0" : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
               ),
               children: [
                 /* @__PURE__ */ e("span", { className: "truncate", children: r.isActive && r.value ? r.value : r.label }),
@@ -89,7 +89,7 @@ function z({
               onClick: i,
               className: c(
                 "flex h-9 shrink-0 items-center gap-0.5 rounded-full px-3 typo-body-md transition-colors @md:hidden",
-                t ? "bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)] dark:bg-[var(--Brand-Cake-Orange)] dark:text-[var(--Primitive-White-alpha-1000)] dark:ring-0" : "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
+                t ? "bg-[var(--Surface-Accent-Primary-Light)] typo-label-md text-[var(--Text-Accent-Primary)] dark:bg-[var(--Brand-Cake-Orange)] dark:text-[var(--Primitive-White-alpha-1000)] dark:ring-0" : "bg-[var(--Surface-Neutral-Tertiary)] text-[var(--Text-High-Emphasis)] hover:opacity-80"
               ),
               children: [
                 /* @__PURE__ */ e(u, { className: "size-4" }),
@@ -104,7 +104,7 @@ function z({
               {
                 type: "button",
                 onClick: i,
-                className: "flex items-center gap-1 rounded-full bg-[var(--Surface-Tertiary)] px-3 py-1.5 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80",
+                className: "flex items-center gap-1 rounded-full bg-[var(--Surface-Neutral-Tertiary)] px-3 py-1.5 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors hover:opacity-80",
                 children: [
                   t,
                   /* @__PURE__ */ e(m, { size: 12 })

package/dist/components/primitives/footer.js

@@ -45,7 +45,7 @@ function H({
         ref: t,
         className: "overflow-hidden transition-[max-height] duration-[var(--Motion-Duration-Base)] ease-in-out",
         style: { maxHeight: r ? `${n}px` : "0px" },
-        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Secondary)]", children: i })
+        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Neutral-Secondary)]", children: i })
       }
     )
   ] });

package/dist/components/primitives/form-field.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import * as u from "react";
+import * as f from "react";
 import { cn as y } from "../../lib/utils.js";
 import { Label as h } from "../foundations/label.js";
 import { FieldLabellingContext as N } from "../../lib/field-labelling.js";
@@ -8,19 +8,19 @@ function L({
   label: m,
   required: p,
   optional: x,
-  description: o,
+  description: a,
   descriptionPosition: l = "above",
-  error: a,
+  error: o,
   htmlFor: v,
   children: b,
-  className: f
+  className: u
 }) {
-  const t = u.useId(), r = `${t}-label`, s = v ?? `${t}-control`, n = o ? `${t}-description` : void 0, i = a ? `${t}-error` : void 0, d = o ? /* @__PURE__ */ e("p", { id: n, className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: o }) : null;
-  return /* @__PURE__ */ c("div", { className: y("space-y-1.5", f), "data-slot": "form-field", children: [
+  const t = f.useId(), r = `${t}-label`, s = v ?? `${t}-control`, n = a ? `${t}-description` : void 0, i = o ? `${t}-error` : void 0, d = a ? /* @__PURE__ */ e("p", { id: n, className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: a }) : null;
+  return /* @__PURE__ */ c("div", { className: y("space-y-1.5", u), "data-slot": "form-field", children: [
     /* @__PURE__ */ c("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ e(h, { id: r, htmlFor: s, className: "typo-label-md", children: m }),
       p && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-[var(--Surface-Caution)] typo-label-xs text-[var(--Text-on-Inverse)]", children: "必須" }),
-      x && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-[var(--Surface-Tertiary)] typo-label-xs text-[var(--Text-Low-Emphasis)]", children: "任意" })
+      x && /* @__PURE__ */ e("span", { className: "inline-flex items-center px-1.5 py-0.5 rounded bg-[var(--Surface-Neutral-Tertiary)] typo-label-xs text-[var(--Text-Low-Emphasis)]", children: "任意" })
     ] }),
     l === "above" && d,
     /* @__PURE__ */ e(
@@ -31,7 +31,7 @@ function L({
       }
     ),
     l === "below" && d,
-    a && /* @__PURE__ */ e("p", { id: i, className: "typo-body-xs text-[var(--Text-Caution)]", children: a })
+    o && /* @__PURE__ */ e("p", { id: i, className: "typo-body-xs text-[var(--Text-Caution)]", children: o })
   ] });
 }
 export {

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

@@ -2,11 +2,11 @@ import { jsxs as p, jsx as a } from "react/jsx-runtime";
 import "react";
 import { cn as r } from "../../lib/utils.js";
 import { SkipLink as N } from "../foundations/skip-link.js";
-import { Header as f } from "./header.js";
+import { Header as u } from "./header.js";
 function L({
   logo: o,
   title: c,
-  onBack: u,
+  onBack: f,
   backLabel: h = "戻る",
   steps: e,
   activeStep: x,
@@ -22,14 +22,14 @@ function L({
     {
       "data-slot": "funnel-shell",
       className: r(
-        // 地が Surface-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
+        // 地が Surface-Neutral-Secondary なので、配下 Card の既定サーフェスを白に切り替える文脈を宣言する
         // （#150 の Section と同じ仕組み。dark は半透明白が重なって浮くため据え置き）。
-        "@container flex min-h-dvh flex-col bg-[var(--Surface-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
+        "@container flex min-h-dvh flex-col bg-[var(--Surface-Neutral-Secondary)] [--card-surface:var(--Surface-Primary)] dark:[--card-surface:var(--Surface-Secondary)]",
         b
       ),
       children: [
         g !== !1 && /* @__PURE__ */ a(N, { href: `#${m}` }),
-        o ? /* @__PURE__ */ a(f, { variant: "logo-center", logo: o }) : c ? /* @__PURE__ */ a(f, { variant: "back", title: c, onBack: u, backLabel: h }) : null,
+        o ? /* @__PURE__ */ a(u, { variant: "logo-center", logo: o }) : c ? /* @__PURE__ */ a(u, { variant: "back", title: c, onBack: f, backLabel: h }) : null,
         e && e.length > 0 && /* @__PURE__ */ a(
           "nav",
           {

package/dist/components/primitives/header.js

@@ -40,7 +40,7 @@ function A({
 function H(l) {
   return d(
     "px-3 py-1.5 typo-body-md rounded-md transition-colors whitespace-nowrap",
-    l ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
+    l ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Neutral-Secondary)]"
   );
 }
 const _ = 2;
@@ -51,10 +51,10 @@ function Q({
 }) {
   const m = a ?? "a", h = R.useRef(null), f = R.useRef(null), [g, c] = R.useState(l.length);
   R.useEffect(() => {
-    const e = h.current, p = f.current;
-    if (!e || !p) return;
-    const u = () => {
-      const k = Array.from(p.children), C = k.slice(0, l.length).map((i) => i.getBoundingClientRect().width), b = k[l.length]?.getBoundingClientRect().width ?? 0, x = e.clientWidth;
+    const e = h.current, u = f.current;
+    if (!e || !u) return;
+    const p = () => {
+      const k = Array.from(u.children), C = k.slice(0, l.length).map((i) => i.getBoundingClientRect().width), b = k[l.length]?.getBoundingClientRect().width ?? 0, x = e.clientWidth;
       if (x === 0 || C.some((i) => i === 0)) {
         c(l.length);
         return;
@@ -71,10 +71,10 @@ function Q({
       }
       c(L);
     };
-    u(), window.addEventListener("resize", u);
-    const v = typeof ResizeObserver < "u" ? new ResizeObserver(u) : null;
-    return v?.observe(e), v?.observe(p), () => {
-      window.removeEventListener("resize", u), v?.disconnect();
+    p(), window.addEventListener("resize", p);
+    const v = typeof ResizeObserver < "u" ? new ResizeObserver(p) : null;
+    return v?.observe(e), v?.observe(u), () => {
+      window.removeEventListener("resize", p), v?.disconnect();
     };
   }, [l]);
   const y = l.slice(0, g), w = l.slice(g);
@@ -102,16 +102,16 @@ function Q({
     ),
     /* @__PURE__ */ s("nav", { className: "flex items-center gap-0.5", children: [
       y.map((e) => {
-        const p = e.href ? m : "button", u = e.href ? {
+        const u = e.href ? m : "button", p = e.href ? {
           href: e.href,
           "aria-current": e.isActive ? "page" : void 0,
           onClick: e.onClick
         } : { type: "button", onClick: e.onClick };
         return /* @__PURE__ */ r(
-          p,
+          u,
           {
             className: H(e.isActive),
-            ...u,
+            ...p,
             children: e.label
           },
           e.label
@@ -165,8 +165,8 @@ function re({
   navBreakpoint: y = "md",
   navOverflowLabel: w,
   searchSlot: e,
-  searchBreakpoint: p,
-  rightSlot: u,
+  searchBreakpoint: u,
+  rightSlot: p,
   centerSlot: v,
   bottomSlot: k,
   disableSticky: C = !1,
@@ -180,7 +180,7 @@ function re({
     // 不透明が必須（dark の Surface-Primary は 10% 透過で下の文字が透ける）。light は同値
     "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
     l
-  ), O = y === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", W = y === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", F = p === "lg" ? "hidden @[960px]:block" : p === "md" ? "hidden @[768px]:block" : void 0;
+  ), O = y === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", W = y === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", F = u === "lg" ? "hidden @[960px]:block" : u === "md" ? "hidden @[768px]:block" : void 0;
   if (t === "logo") {
     const T = typeof a == "string" ? /* @__PURE__ */ r("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null, j = g && g.length > 0 && /* @__PURE__ */ r("div", { className: "flex shrink-0 items-center gap-1", children: g.map((n) => {
       const M = n.showLabel ? {
@@ -304,7 +304,7 @@ function re({
           }
         ) }),
         /* @__PURE__ */ r("h1", { className: "min-w-0 truncate text-center typo-heading-md text-[var(--Text-High-Emphasis)]", children: m }),
-        /* @__PURE__ */ r("div", { className: "justify-self-end", children: u })
+        /* @__PURE__ */ r("div", { className: "justify-self-end", children: p })
       ]
     }
   );