@cakejp/design-system 0.22.1 → 0.24.0

package/dist/components/primitives/image-carousel.js

@@ -1,37 +1,37 @@
 "use client";
-import { jsxs as C, jsx as t, Fragment as M } from "react/jsx-runtime";
+import { jsxs as E, jsx as t, Fragment as q } from "react/jsx-runtime";
 import * as n from "react";
-import q from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import B from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import B from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import G from "iconsax-reactjs/dist/esm/ArrowRight2.js";
 import { cn as l } from "../../lib/utils.js";
-import { FOCUS_RING_ONLY as G } from "../../lib/focus-ring.js";
+import { FOCUS_RING_ONLY as x } from "../../lib/focus-ring.js";
 import { usePrefersReducedMotion as _ } from "../../lib/use-prefers-reduced-motion.js";
 function J({
-  images: x,
-  aspectRatio: v = "banner",
-  showDots: E = !0,
-  showArrows: z = !0,
+  images: v,
+  aspectRatio: b = "banner",
+  showDots: z = !0,
+  showArrows: L = !0,
   autoPlay: h = 0,
   peek: c = !1,
   pcSlidesPerView: u = 1,
   centeredSlides: d = !1,
-  linkComponent: L,
-  className: j,
-  ...A
+  linkComponent: j,
+  className: A,
+  ...O
 }) {
-  const O = L ?? "a", p = n.useRef(null), [s, T] = n.useState(0), f = _(), a = x.length, g = v === "square" ? "aspect-square" : v === "video" ? "aspect-video" : v === "ogp" ? "aspect-[1.91/1]" : "aspect-[311/162.5]";
+  const T = j ?? "a", p = n.useRef(null), [s, F] = n.useState(0), f = _(), a = v.length, y = b === "square" ? "aspect-square" : b === "video" ? "aspect-video" : b === "ogp" ? "aspect-[1.91/1]" : "aspect-[311/162.5]";
   n.useEffect(() => {
     const e = p.current;
     if (!e) return;
     let r = 0;
     const o = () => {
       cancelAnimationFrame(r), r = requestAnimationFrame(() => {
-        const y = Array.from(e.querySelectorAll("[data-slide]")), S = y[0]?.offsetLeft ?? 0;
-        let N = 0, w = Number.POSITIVE_INFINITY;
-        y.forEach((R, k) => {
-          const I = Math.abs(R.offsetLeft - S - e.scrollLeft);
-          I < w && (w = I, N = k);
-        }), T(N);
+        const N = Array.from(e.querySelectorAll("[data-slide]")), R = N[0]?.offsetLeft ?? 0;
+        let w = 0, I = Number.POSITIVE_INFINITY;
+        N.forEach((k, M) => {
+          const C = Math.abs(k.offsetLeft - R - e.scrollLeft);
+          C < I && (I = C, w = M);
+        }), F(w);
       });
     };
     o(), e.addEventListener("scroll", o, { passive: !0 });
@@ -51,24 +51,24 @@ function J({
       });
     },
     [f]
-  ), b = n.useCallback(() => {
+  ), g = n.useCallback(() => {
     const e = p.current, r = e ? e.scrollLeft >= e.scrollWidth - e.clientWidth - 1 : !1;
     m(s >= a - 1 || r ? 0 : s + 1);
   }, [s, a, m]);
   n.useEffect(() => {
     if (f || h <= 0 || a <= 1) return;
-    const e = setInterval(b, h);
+    const e = setInterval(g, h);
     return () => clearInterval(e);
-  }, [h, a, f, b]);
-  function F() {
+  }, [h, a, f, g]);
+  function S() {
     m(s <= 0 ? a - 1 : s - 1);
   }
-  return a === 0 ? null : /* @__PURE__ */ C(
+  return a === 0 ? null : /* @__PURE__ */ E(
     "div",
     {
       "data-slot": "image-carousel",
-      className: l("@container group/carousel relative", j),
-      ...A,
+      className: l("@container group/carousel relative", A),
+      ...O,
       children: [
         /* @__PURE__ */ t(
           "div",
@@ -76,8 +76,8 @@ function J({
             ref: p,
             tabIndex: 0,
             className: l(
-              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-none",
-              `focus-visible:outline-none ${G}`,
+              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-hide",
+              `focus-visible:outline-none ${x}`,
               // peek: 端の余白 = Container の gutter（外に置いたときは 16px）。Container の中では
               // gutter 分だけ外へはみ出して画面端までスクロールさせる。scroll-padding も同じ幅にして、
               // スナップ後も端の余白が消えないようにする。PC (@[960px]:) では peek しないので外す
@@ -95,7 +95,7 @@ function J({
               u > 1 && "@[960px]:gap-6"
             ),
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-            children: x.map((e, r) => /* @__PURE__ */ t(
+            children: v.map((e, r) => /* @__PURE__ */ t(
               "div",
               {
                 "data-slide": !0,
@@ -110,13 +110,13 @@ function J({
                   // スライドの間隔は scroller の gap-3
                   c ? u > 1 ? "w-[calc(100%-44px)] @[960px]:w-[calc((100%-48px)/3)]" : "w-[calc(100%-44px)] @[960px]:w-full" : u > 1 ? "w-full @[960px]:w-[calc((100%-48px)/3)]" : "w-full"
                 ),
-                children: e.href ? /* @__PURE__ */ t(O, { href: e.href, className: "block", children: /* @__PURE__ */ t(
+                children: e.href ? /* @__PURE__ */ t(T, { href: e.href, className: "block", children: /* @__PURE__ */ t(
                   "img",
                   {
                     src: e.src,
                     alt: e.alt,
                     loading: r === 0 ? "eager" : "lazy",
-                    className: l("w-full rounded-md object-cover @[960px]:rounded-lg", g)
+                    className: l("w-full rounded-md object-cover @[960px]:rounded-lg", y)
                   }
                 ) }) : /* @__PURE__ */ t(
                   "img",
@@ -124,7 +124,7 @@ function J({
                     src: e.src,
                     alt: e.alt,
                     loading: r === 0 ? "eager" : "lazy",
-                    className: l("w-full rounded-md object-cover @[960px]:rounded-lg", g)
+                    className: l("w-full rounded-md object-cover @[960px]:rounded-lg", y)
                   }
                 )
               },
@@ -132,29 +132,29 @@ function J({
             ))
           }
         ),
-        z && a > 1 && /* @__PURE__ */ C(M, { children: [
+        L && a > 1 && /* @__PURE__ */ E(q, { children: [
           /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: F,
+              onClick: S,
               "aria-label": "前へ",
-              className: "absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
-              children: /* @__PURE__ */ t(q, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+              className: `absolute left-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Neutral-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100 @[960px]:focus-visible:opacity-100 focus-visible:outline-none ${x}`,
+              children: /* @__PURE__ */ t(B, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           ),
           /* @__PURE__ */ t(
             "button",
             {
               type: "button",
-              onClick: b,
+              onClick: g,
               "aria-label": "次へ",
-              className: "absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
-              children: /* @__PURE__ */ t(B, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
+              className: `absolute right-2 top-1/2 z-10 hidden size-10 -translate-y-1/2 items-center justify-center rounded-full border border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Neutral-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Neutral-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100 @[960px]:focus-visible:opacity-100 focus-visible:outline-none ${x}`,
+              children: /* @__PURE__ */ t(G, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           )
         ] }),
-        E && a > 1 && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: x.map((e, r) => /* @__PURE__ */ t(
+        z && a > 1 && /* @__PURE__ */ t("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: v.map((e, r) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
@@ -162,8 +162,9 @@ function J({
             "aria-label": `スライド ${r + 1}`,
             className: l(
               // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
-              "size-2 shrink-0 rounded-full transition-colors",
-              r === s ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+              "size-2 shrink-0 rounded-full transition-colors focus-visible:outline-none",
+              x,
+              r === s ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Neutral-Tertiary)]"
             )
           },
           r

package/dist/components/primitives/image-gallery.js

@@ -1,80 +1,82 @@
 "use client";
-import { jsxs as n, jsx as t, Fragment as g } from "react/jsx-runtime";
-import * as i from "react";
-import w from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import N from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as o } from "../../lib/utils.js";
-import { reconcileImageIndex as k } from "../../lib/image-index.js";
-function z({
+import { jsxs as o, jsx as t, Fragment as w } from "react/jsx-runtime";
+import * as u from "react";
+import N from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import k from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as a } from "../../lib/utils.js";
+import { FOCUS_RING_ONLY as c } from "../../lib/focus-ring.js";
+import { reconcileImageIndex as C } from "../../lib/image-index.js";
+function M({
   images: r,
-  alts: c,
+  alts: i,
   aspectRatio: p = "square",
-  showThumbnails: v = !1,
-  showDots: b = !0,
-  layout: x = "default",
-  className: u,
-  ...d
+  showThumbnails: b = !1,
+  showDots: x = !0,
+  layout: y = "default",
+  className: d,
+  ...f
 }) {
-  const [y, h] = i.useState(0), f = i.useRef(r);
-  if (i.useEffect(() => {
+  const [g, h] = u.useState(0), m = u.useRef(r);
+  if (u.useEffect(() => {
     h(
-      (l) => k(f.current, r, l)
-    ), f.current = r;
+      (l) => C(m.current, r, l)
+    ), m.current = r;
   }, [r]), r.length === 0) return null;
-  const a = Math.min(y, r.length - 1), s = (l) => {
+  const n = Math.min(g, r.length - 1), s = (l) => {
     const e = (l % r.length + r.length) % r.length;
-    e !== a && h(e);
-  }, m = {
+    e !== n && h(e);
+  }, v = {
     square: "aspect-square",
     "4:3": "aspect-[4/3]",
     "16:9": "aspect-video",
     auto: ""
   }[p];
-  return x === "pc-detail" ? /* @__PURE__ */ n(
+  return y === "pc-detail" ? /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "image-gallery",
-      className: o("flex flex-row-reverse gap-6", u),
-      ...d,
+      className: a("flex flex-row-reverse gap-6", d),
+      ...f,
       children: [
-        /* @__PURE__ */ n("div", { className: o("relative min-w-0 grow overflow-hidden rounded-lg", m), children: [
+        /* @__PURE__ */ o("div", { className: a("relative min-w-0 grow overflow-hidden rounded-lg", v), children: [
           /* @__PURE__ */ t(
             "div",
             {
               className: "flex h-full transition-transform duration-[var(--Motion-Duration-Slow)] ease-out",
-              style: { transform: `translateX(-${a * 100}%)` },
+              style: { transform: `translateX(-${n * 100}%)` },
               children: r.map((l, e) => /* @__PURE__ */ t(
                 "img",
                 {
                   src: l,
-                  alt: c?.[e] ?? `画像 ${e + 1}`,
+                  alt: i?.[e] ?? `画像 ${e + 1}`,
                   className: "h-full w-full shrink-0 object-contain"
                 },
                 e
               ))
             }
           ),
-          r.length > 1 && /* @__PURE__ */ n("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
-            a + 1,
+          r.length > 1 && /* @__PURE__ */ o("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
+            n + 1,
             " / ",
             r.length
           ] })
         ] }),
-        r.length > 1 && /* @__PURE__ */ t("div", { className: "flex w-16 shrink-0 flex-col gap-2 overflow-y-auto scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
+        r.length > 1 && /* @__PURE__ */ t("div", { className: "-m-1 box-content flex w-16 shrink-0 flex-col gap-2 overflow-y-auto p-1 scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             onClick: () => s(e),
             onMouseOver: () => s(e),
-            className: o(
-              "size-16 shrink-0 overflow-hidden rounded-lg border-2 transition-colors",
-              e === a ? "border-[var(--Border-Accent-Primary)]" : "border-transparent opacity-60 hover:opacity-100"
+            className: a(
+              "size-16 shrink-0 overflow-hidden rounded-lg border-2 transition-colors focus-visible:outline-none",
+              c,
+              e === n ? "border-[var(--Border-Accent-Primary)]" : "border-transparent opacity-60 hover:opacity-100"
             ),
             children: /* @__PURE__ */ t(
               "img",
               {
                 src: l,
-                alt: c?.[e] ?? `サムネイル ${e + 1}`,
+                alt: i?.[e] ?? `サムネイル ${e + 1}`,
                 className: "h-full w-full object-cover"
               }
             )
@@ -83,91 +85,92 @@ function z({
         )) })
       ]
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ o(
     "div",
     {
       "data-slot": "image-gallery",
-      className: o("space-y-2", u),
-      ...d,
+      className: a("space-y-2", d),
+      ...f,
       children: [
-        /* @__PURE__ */ n("div", { className: o("relative w-full overflow-hidden", m), children: [
+        /* @__PURE__ */ o("div", { className: a("relative w-full overflow-hidden", v), children: [
           /* @__PURE__ */ t(
             "div",
             {
               className: "flex h-full transition-transform duration-[var(--Motion-Duration-Slow)] ease-out",
-              style: { transform: `translateX(-${a * 100}%)` },
+              style: { transform: `translateX(-${n * 100}%)` },
               children: r.map((l, e) => /* @__PURE__ */ t(
                 "img",
                 {
                   src: l,
-                  alt: c?.[e] ?? `画像 ${e + 1}`,
+                  alt: i?.[e] ?? `画像 ${e + 1}`,
                   className: "h-full w-full shrink-0 object-cover"
                 },
                 e
               ))
             }
           ),
-          r.length > 1 && /* @__PURE__ */ n(g, { children: [
+          r.length > 1 && /* @__PURE__ */ o(w, { children: [
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                className: "absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]",
-                onClick: () => s(a - 1),
+                className: `absolute left-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)] focus-visible:outline-none ${c}`,
+                onClick: () => s(n - 1),
                 "aria-label": "前の画像",
-                children: /* @__PURE__ */ t(w, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+                children: /* @__PURE__ */ t(N, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
               }
             ),
             /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                className: "absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)]",
-                onClick: () => s(a + 1),
+                className: `absolute right-2 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-[var(--Surface-Primary)]/80 shadow-sm transition-colors hover:bg-[var(--Surface-Primary)] focus-visible:outline-none ${c}`,
+                onClick: () => s(n + 1),
                 "aria-label": "次の画像",
-                children: /* @__PURE__ */ t(N, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
+                children: /* @__PURE__ */ t(k, { size: 20, className: "text-[var(--Text-High-Emphasis)]" })
               }
             )
           ] }),
-          r.length > 1 && /* @__PURE__ */ n("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
-            a + 1,
+          r.length > 1 && /* @__PURE__ */ o("span", { className: "absolute bottom-2 right-2 rounded-full bg-[var(--Overlay-Medium)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: [
+            n + 1,
             " / ",
             r.length
           ] })
         ] }),
-        b && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex flex-wrap justify-center gap-0.5", children: r.map((l, e) => /* @__PURE__ */ t(
+        x && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex flex-wrap justify-center gap-0.5", children: r.map((l, e) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             onClick: () => s(e),
-            className: "flex h-6 shrink-0 items-center justify-center px-0.5",
+            className: `flex h-6 shrink-0 items-center justify-center rounded-full px-0.5 focus-visible:outline-none ${c}`,
             "aria-label": `画像 ${e + 1}`,
             children: /* @__PURE__ */ t(
               "span",
               {
-                className: o(
+                className: a(
                   "h-1.5 shrink-0 rounded-full transition-all",
-                  e === a ? "w-4 bg-[var(--Brand-Cake-Orange)]" : "w-1.5 bg-[var(--Text-Low-Emphasis)]/30"
+                  e === n ? "w-4 bg-[var(--Brand-Cake-Orange)]" : "w-1.5 bg-[var(--Text-Low-Emphasis)]/30"
                 )
               }
             )
           },
           e
         )) }),
-        v && r.length > 1 && /* @__PURE__ */ t("div", { className: "flex gap-1.5 overflow-x-auto scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
+        b && r.length > 1 && /* @__PURE__ */ t("div", { className: "-my-1 -ml-1 flex gap-1.5 overflow-x-auto p-1 scrollbar-hide", children: r.map((l, e) => /* @__PURE__ */ t(
           "button",
           {
             type: "button",
             onClick: () => s(e),
-            className: o(
-              "size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors",
-              e === a ? "border-[var(--Brand-Cake-Orange)]" : "border-transparent opacity-60 hover:opacity-100"
+            className: a(
+              "size-14 shrink-0 overflow-hidden rounded-md border-2 transition-colors focus-visible:outline-none",
+              c,
+              e === n ? "border-[var(--Brand-Cake-Orange)]" : "border-transparent opacity-60 hover:opacity-100"
             ),
             children: /* @__PURE__ */ t(
               "img",
               {
                 src: l,
-                alt: c?.[e] ?? `サムネイル ${e + 1}`,
+                alt: i?.[e] ?? `サムネイル ${e + 1}`,
                 className: "h-full w-full object-cover"
               }
             )
@@ -179,5 +182,5 @@ function z({
   );
 }
 export {
-  z as ImageGallery
+  M as ImageGallery
 };

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

@@ -45,7 +45,7 @@ function ee(e) {
   return e >= 1 ? Number.isInteger(e) ? `${e}MB` : `${e.toFixed(1)}MB` : `${Math.round(e * 1024)}KB`;
 }
 const re = J(
-  "relative w-full overflow-hidden rounded-lg bg-[var(--Surface-Tertiary)]",
+  "relative w-full overflow-hidden rounded-lg bg-[var(--Surface-Neutral-Tertiary)]",
   {
     variants: {
       aspect: {
@@ -131,7 +131,7 @@ function ce({
             className: h(
               re({ aspect: F, size: L }),
               c ? "border border-[var(--Border-Low-Emphasis)]" : (
-                // 未選択の破線枠は地（Surface-Tertiary）とのコントラストを確保するため High-Emphasis。
+                // 未選択の破線枠は地（Surface-Neutral-Tertiary）とのコントラストを確保するため High-Emphasis。
                 // Medium-Emphasis はダークモードで地と同値になり枠が消える
                 "border-2 border-dashed border-[var(--Border-High-Emphasis)]"
               )

package/dist/components/primitives/image-uploader.js

@@ -26,7 +26,7 @@ function z({
         i.map((r, a) => /* @__PURE__ */ t(
           "div",
           {
-            className: "relative aspect-square rounded-xl bg-[var(--Surface-Tertiary)] border border-[var(--Border-Low-Emphasis)] overflow-hidden group",
+            className: "relative aspect-square rounded-xl bg-[var(--Surface-Neutral-Tertiary)] border border-[var(--Border-Low-Emphasis)] overflow-hidden group",
             children: [
               /* @__PURE__ */ e(
                 "img",

package/dist/components/primitives/kebab-menu.js

@@ -1,28 +1,32 @@
-import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as o } from "../../lib/utils.js";
-import { DropdownMenu as i, DropdownMenuTrigger as l, DropdownMenuContent as s, DropdownMenuItem as c } from "../foundations/dropdown-menu.js";
-import d from "iconsax-reactjs/dist/esm/More.js";
-function f({ items: a, className: t }) {
-  return /* @__PURE__ */ n(i, { children: [
-    /* @__PURE__ */ r(l, { asChild: !0, children: /* @__PURE__ */ r(
+import { cn as n } from "../../lib/utils.js";
+import { DropdownMenu as l, DropdownMenuTrigger as s, DropdownMenuContent as c, DropdownMenuItem as u } from "../foundations/dropdown-menu.js";
+import { FOCUS_RING_ONLY as d } from "../../lib/focus-ring.js";
+import m from "iconsax-reactjs/dist/esm/More.js";
+function v({ items: t, menuLabel: a = "メニュー", className: i }) {
+  return /* @__PURE__ */ o(l, { children: [
+    /* @__PURE__ */ r(s, { asChild: !0, children: /* @__PURE__ */ r(
       "button",
       {
-        className: o(
+        className: n(
           // shrink-0 必須: 長いタイトルと同じ flex row に並ぶため、既定の flex-shrink:1 だと 32px が潰れる
-          "flex items-center justify-center size-8 shrink-0 rounded-md hover:bg-[var(--Surface-Secondary)] transition-colors",
-          t
+          // tap-target: 見た目は 32px のまま、透明な疑似要素で当たり判定だけ 44px に広げる
+          "tap-target flex items-center justify-center size-8 shrink-0 rounded-md hover:bg-[var(--Surface-Neutral-Secondary)] transition-colors focus-visible:outline-none",
+          // 枠が無いのでリングだけ（フォーカスしていないときの見た目は変わらない）
+          d,
+          i
         ),
-        "aria-label": "メニュー",
+        "aria-label": a,
         "data-slot": "kebab-menu",
-        children: /* @__PURE__ */ r(d, { size: 16, className: "text-[var(--Text-Low-Emphasis)]" })
+        children: /* @__PURE__ */ r(m, { size: 16, className: "text-[var(--Text-Low-Emphasis)]" })
       }
     ) }),
-    /* @__PURE__ */ r(s, { align: "end", children: a.map((e) => /* @__PURE__ */ n(
-      c,
+    /* @__PURE__ */ r(c, { align: "end", children: t.map((e) => /* @__PURE__ */ o(
+      u,
       {
         onClick: e.onClick,
-        className: o(
+        className: n(
           "gap-2",
           e.destructive && "text-[var(--Text-Caution)]"
         ),
@@ -36,5 +40,5 @@ function f({ items: a, className: t }) {
   ] });
 }
 export {
-  f as KebabMenu
+  v as KebabMenu
 };

package/dist/components/primitives/list-item.js

@@ -12,13 +12,13 @@ const R = "focus-visible:ring-inset forced-colors:focus-visible:-outline-offset-
 ].join(" ");
 function q({
   title: x,
-  caption: n,
+  caption: l,
   rightType: o = "arrow-right",
-  rightText: d,
-  badgeCount: u,
-  toggleChecked: y = !1,
-  onToggleChange: N,
-  leftIcon: l,
+  rightText: m,
+  badgeCount: d,
+  toggleChecked: N = !1,
+  onToggleChange: y,
+  leftIcon: n,
   leftImageUrl: a,
   size: w = "sm",
   selected: k = !1,
@@ -29,39 +29,39 @@ function q({
   className: C,
   ...i
 }) {
-  const L = E ?? "a", h = I.useId(), r = n ? "md" : !!(l || a) ? "lg" : w, m = !!c, s = !m && typeof i.onClick == "function", _ = m || s, j = s ? (t) => {
+  const L = E ?? "a", h = I.useId(), r = l ? "md" : !!(n || a) ? "lg" : w, u = !!c, s = !u && typeof i.onClick == "function", _ = u || s, j = s ? (t) => {
     i.onKeyDown?.(t), !t.defaultPrevented && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.currentTarget.click());
   } : i.onKeyDown, O = r === "lg" ? "min-h-16 py-4" : r === "md" ? "min-h-14 py-2" : "min-h-11 py-2", z = r === "lg" ? "typo-body-lg text-[var(--Text-High-Emphasis)]" : "typo-body-md text-[var(--Text-High-Emphasis)]", v = p(
     "relative flex w-full items-center gap-2 bg-[var(--Surface-Primary)] px-4 rounded-lg",
     O,
-    k && "bg-[var(--Surface-Secondary)]",
-    _ && "transition-colors hover:bg-[var(--Surface-Tertiary)]",
+    k && "bg-[var(--Surface-Neutral-Secondary)]",
+    _ && "transition-colors hover:bg-[var(--Surface-Neutral-Tertiary)]",
     s && `cursor-pointer focus-visible:outline-none ${K}`,
     s && R,
-    m && M,
+    u && M,
     C
   ), g = /* @__PURE__ */ b(H, { children: [
     a && /* @__PURE__ */ e("div", { className: "relative shrink-0 size-8 overflow-hidden rounded-[var(--radius-sm,4px)]", children: /* @__PURE__ */ e("img", { src: a, alt: "", className: "size-full object-cover" }) }),
-    l && !a && /* @__PURE__ */ e("div", { className: "shrink-0 size-5 flex items-center justify-center text-[var(--Object-High-Emphasis)]", children: l }),
+    n && !a && /* @__PURE__ */ e("div", { className: "shrink-0 size-5 flex items-center justify-center text-[var(--Object-High-Emphasis)]", children: n }),
     /* @__PURE__ */ b("div", { className: "flex flex-1 min-w-0 flex-col gap-0", children: [
       /* @__PURE__ */ e("span", { id: h, className: p("truncate", z), children: x }),
-      n && /* @__PURE__ */ e("span", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: n })
+      l && /* @__PURE__ */ e("span", { className: "truncate typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: l })
     ] }),
     o === "arrow-right" && /* @__PURE__ */ e(T, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
     o === "arrow-down" && /* @__PURE__ */ e(D, { size: 20, className: "shrink-0 text-[var(--Object-Low-Emphasis)]" }),
-    o === "text" && d && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: d }),
-    o === "badge" && u !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: u }),
+    o === "text" && m && /* @__PURE__ */ e("span", { className: "shrink-0 typo-body-md text-[var(--Text-High-Emphasis)]", children: m }),
+    o === "badge" && d !== void 0 && /* @__PURE__ */ e("span", { className: "flex shrink-0 h-[13px] min-w-[13px] items-center justify-center rounded-full bg-[var(--Surface-Caution,#ec0000)] px-1 typo-label-xs text-white", children: d }),
     o === "toggle" && /* @__PURE__ */ e(
       F,
       {
-        checked: y,
-        onCheckedChange: N,
+        checked: N,
+        onCheckedChange: y,
         "aria-labelledby": h,
         className: "shrink-0"
       }
     ),
     S && /* @__PURE__ */ e("span", { className: "absolute left-1 top-1/2 -translate-y-1/2 size-2 rounded-full bg-[var(--Surface-Caution,#ec0000)]", "aria-hidden": !0 }),
-    f && r !== "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Secondary)]", "aria-hidden": !0 }),
+    f && r !== "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Surface-Neutral-Secondary)]", "aria-hidden": !0 }),
     f && r === "lg" && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-4 right-4 h-px bg-[var(--Border-Medium-Emphasis)]", "aria-hidden": !0 })
   ] });
   return c ? /* @__PURE__ */ e(