@cakejp/design-system 0.19.0 → 0.20.0

package/dist/components/primitives/header.js

@@ -8,21 +8,21 @@ import { Button as k } from "../foundations/button.js";
 import { DropdownMenu as F, DropdownMenuTrigger as G, DropdownMenuContent as Z, DropdownMenuItem as V } from "../foundations/dropdown-menu.js";
 import { containerVariants as q } from "./container.js";
 function E({
-  containerSize: l,
+  containerSize: r,
   shellClass: c,
   layoutClass: a,
   containerQuery: u = !1,
   children: p,
   ...d
 }) {
-  return l ? /* @__PURE__ */ e("header", { "data-slot": "header", className: c, ...d, children: /* @__PURE__ */ e(
+  return r ? /* @__PURE__ */ e("header", { "data-slot": "header", className: c, ...d, children: /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "header-container",
-      "data-container-size": l,
+      "data-container-size": r,
       className: f(
         u && "@container",
-        q({ size: l, gutter: "none" }),
+        q({ size: r, gutter: "none" }),
         a
       ),
       children: p
@@ -37,33 +37,33 @@ function E({
     }
   );
 }
-function R(l) {
+function R(r) {
   return f(
     "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)]"
+    r ? "text-[var(--Text-High-Emphasis)] font-bold" : "text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]"
   );
 }
 const P = 2;
 function J({
-  items: l,
+  items: r,
   overflowLabel: c = "その他"
 }) {
-  const a = y.useRef(null), u = y.useRef(null), [p, d] = y.useState(l.length);
+  const a = y.useRef(null), u = y.useRef(null), [p, d] = y.useState(r.length);
   y.useEffect(() => {
-    const r = a.current, m = u.current;
-    if (!r || !m) return;
+    const l = a.current, m = u.current;
+    if (!l || !m) return;
     const i = () => {
-      const N = Array.from(m.children), v = N.slice(0, l.length).map((t) => t.getBoundingClientRect().width), z = N[l.length]?.getBoundingClientRect().width ?? 0, w = r.clientWidth;
+      const N = Array.from(m.children), v = N.slice(0, r.length).map((t) => t.getBoundingClientRect().width), z = N[r.length]?.getBoundingClientRect().width ?? 0, w = l.clientWidth;
       if (w === 0 || v.some((t) => t === 0)) {
-        d(l.length);
+        d(r.length);
         return;
       }
-      if (v.reduce((t, h) => t + h, 0) + P * (l.length - 1) <= w) {
-        d(l.length);
+      if (v.reduce((t, h) => t + h, 0) + P * (r.length - 1) <= w) {
+        d(r.length);
         return;
       }
       let g = z, A = 0;
-      for (let t = 0; t < l.length; t++) {
+      for (let t = 0; t < r.length; t++) {
         const h = g + v[t] + P;
         if (h > w) break;
         g = h, A = t + 1;
@@ -72,11 +72,11 @@ function J({
     };
     i(), window.addEventListener("resize", i);
     const b = typeof ResizeObserver < "u" ? new ResizeObserver(i) : null;
-    return b?.observe(r), b?.observe(m), () => {
+    return b?.observe(l), b?.observe(m), () => {
       window.removeEventListener("resize", i), b?.disconnect();
     };
-  }, [l]);
-  const x = l.slice(0, p), o = l.slice(p);
+  }, [r]);
+  const x = r.slice(0, p), o = r.slice(p);
   return /* @__PURE__ */ s("div", { ref: a, className: "relative min-w-0 flex-1", children: [
     /* @__PURE__ */ e(
       "div",
@@ -89,7 +89,7 @@ function J({
             ref: u,
             className: "invisible flex w-max items-center gap-0.5",
             children: [
-              l.map((r) => /* @__PURE__ */ e("span", { className: R(r.isActive), children: r.label }, r.label)),
+              r.map((l) => /* @__PURE__ */ e("span", { className: R(l.isActive), children: l.label }, l.label)),
               /* @__PURE__ */ s("span", { className: f(R(!1), "inline-flex items-center gap-1"), children: [
                 c,
                 /* @__PURE__ */ e(M, { size: 16 })
@@ -100,16 +100,16 @@ function J({
       }
     ),
     /* @__PURE__ */ s("nav", { className: "flex items-center gap-0.5", children: [
-      x.map((r) => {
-        const m = r.href ? "a" : "button", i = r.href ? { href: r.href } : { type: "button", onClick: r.onClick };
+      x.map((l) => {
+        const m = l.href ? "a" : "button", i = l.href ? { href: l.href } : { type: "button", onClick: l.onClick };
         return /* @__PURE__ */ e(
           m,
           {
-            className: R(r.isActive),
+            className: R(l.isActive),
             ...i,
-            children: r.label
+            children: l.label
           },
-          r.label
+          l.label
         );
       }),
       o.length > 0 && /* @__PURE__ */ s(F, { children: [
@@ -117,7 +117,7 @@ function J({
           G,
           {
             className: f(
-              R(o.some((r) => r.isActive)),
+              R(o.some((l) => l.isActive)),
               "inline-flex items-center gap-1"
             ),
             children: [
@@ -127,21 +127,21 @@ function J({
           }
         ),
         /* @__PURE__ */ e(Z, { align: "end", children: o.map(
-          (r) => r.href ? /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
+          (l) => l.href ? /* @__PURE__ */ e(V, { asChild: !0, children: /* @__PURE__ */ e(
             "a",
             {
-              href: r.href,
-              onClick: r.onClick,
-              "aria-current": r.isActive ? "page" : void 0,
-              children: r.label
+              href: l.href,
+              onClick: l.onClick,
+              "aria-current": l.isActive ? "page" : void 0,
+              children: l.label
             }
-          ) }, r.label) : /* @__PURE__ */ e(
+          ) }, l.label) : /* @__PURE__ */ e(
             V,
             {
-              onSelect: () => r.onClick?.(),
-              children: r.label
+              onSelect: () => l.onClick?.(),
+              children: l.label
             },
-            r.label
+            l.label
           )
         ) })
       ] })
@@ -149,7 +149,7 @@ function J({
   ] });
 }
 function S({
-  className: l,
+  className: r,
   variant: c = "logo",
   logo: a,
   title: u,
@@ -157,7 +157,7 @@ function S({
   backLabel: d = "戻る",
   actions: x,
   navItems: o,
-  navBreakpoint: r = "md",
+  navBreakpoint: l = "md",
   navOverflowLabel: m,
   searchSlot: i,
   searchBreakpoint: b,
@@ -168,7 +168,13 @@ function S({
   containerSize: C,
   ...g
 }) {
-  const h = f(w ? "" : "sticky top-0 z-[var(--Z-Nav)]", "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)]", l), _ = r === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", B = r === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", O = b === "lg" ? "hidden @[960px]:block" : b === "md" ? "hidden @[768px]:block" : void 0;
+  const h = f(
+    w ? "" : "sticky top-0 z-[var(--Z-Nav)]",
+    // 地は Surface-Elevated: sticky バーはスクロールするコンテンツの上に重なるため
+    // 不透明が必須（dark の Surface-Primary は 10% 透過で下の文字が透ける）。light は同値
+    "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Elevated)]",
+    r
+  ), _ = l === "lg" ? "@[960px]:hidden" : "@[768px]:hidden", B = l === "lg" ? "hidden @[960px]:flex" : "hidden @[768px]:flex", O = b === "lg" ? "hidden @[960px]:block" : b === "md" ? "hidden @[768px]:block" : void 0;
   if (c === "logo") {
     const H = typeof a == "string" ? /* @__PURE__ */ e("span", { className: "typo-heading-lg text-[var(--Text-High-Emphasis)]", children: a }) : a ?? null, j = x && x.length > 0 && /* @__PURE__ */ e("div", { className: "flex shrink-0 items-center gap-1", children: x.map((n) => {
       const L = n.showLabel ? {

package/dist/components/primitives/sticky-action-bar.js

@@ -12,7 +12,8 @@ function n({
     {
       "data-slot": "sticky-action-bar",
       className: i(
-        "sticky bottom-0 z-[var(--Z-Nav)] bg-[var(--Surface-Primary)] px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
+        // Surface-Elevated: スクロール内容の上に重なる固定バーは不透明が必須（dark で透けない）
+        "sticky bottom-0 z-[var(--Z-Nav)] bg-[var(--Surface-Elevated)] px-4 py-3 pb-[max(0.75rem,env(safe-area-inset-bottom))]",
         t && "border-t border-[var(--Border-Low-Emphasis)]",
         r
       ),