@cakejp/design-system 0.16.0 → 0.17.0

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

@@ -0,0 +1,115 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import "react";
+import { cn as a } from "../../lib/utils.js";
+import { Button as p } from "../foundations/button.js";
+function y({
+  className: t,
+  "aria-label": e,
+  ...i
+}) {
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      viewBox: "0 0 200 170",
+      fill: "none",
+      role: e ? "img" : void 0,
+      "aria-label": e,
+      "aria-hidden": e ? void 0 : !0,
+      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(
+          "path",
+          {
+            d: "M42 96 h116 v26 a14 14 0 0 1 -14 14 H56 a14 14 0 0 1 -14 -14 Z",
+            fill: "var(--Surface-Accent-Primary-Light)",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M42 96 q9 -15 18 0 q9 15 18 0 q9 -15 18 0 q9 15 18 0 q9 -15 18 0 q9 15 18 0 v4 H42 Z",
+            fill: "var(--Brand-Cake-Orange)",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ r(
+          "path",
+          {
+            d: "M118 100 L150 132 H118 Z",
+            fill: "var(--Surface-Primary)",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinejoin: "round",
+            strokeDasharray: "4 6"
+          }
+        ),
+        /* @__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)" })
+      ]
+    }
+  );
+}
+const d = {
+  error: { title: "エラーが発生しました" },
+  notFound: {
+    title: "ページが見つかりません",
+    description: "URL が間違っているか、ページが移動または削除された可能性があります。"
+  }
+};
+function N({
+  className: t,
+  kind: e = "error",
+  icon: i,
+  title: u,
+  description: m,
+  onRetry: c,
+  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);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      "data-slot": "error-state",
+      "data-kind": e,
+      className: a(
+        "flex flex-col items-center justify-center px-4 py-20 text-center",
+        t
+      ),
+      ...h,
+      children: [
+        s && /* @__PURE__ */ r(
+          "div",
+          {
+            className: a(
+              "shrink-0",
+              l ? "text-[var(--Border-Medium-Emphasis)]" : "text-[var(--Object-Caution)]"
+            ),
+            children: s
+          }
+        ),
+        /* @__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 }),
+          v
+        ] })
+      ]
+    }
+  );
+}
+export {
+  N as ErrorState,
+  y as NotFoundIllustration
+};

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

@@ -0,0 +1,144 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import "react";
+import x from "iconsax-reactjs/dist/esm/Setting4.js";
+import m from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import y from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import { cn as c } from "../../lib/utils.js";
+import { Button as v } from "../foundations/button.js";
+function z({
+  filters: n,
+  resultCount: s,
+  sortLabel: t,
+  onSortClick: i,
+  onMoreFilters: o,
+  onBack: d,
+  activeFilterCount: l,
+  className: p,
+  variant: g,
+  ...h
+}) {
+  return /* @__PURE__ */ a(
+    "nav",
+    {
+      "aria-label": "商品フィルター",
+      "data-slot": "filter-bar",
+      className: c("@container space-y-2", p),
+      ...h,
+      children: [
+        /* @__PURE__ */ a("div", { className: "flex items-center gap-1 overflow-x-auto scrollbar-hide", children: [
+          d && /* @__PURE__ */ e(
+            v,
+            {
+              variant: "tertiary",
+              size: "icon-sm",
+              onClick: d,
+              "aria-label": "戻る",
+              className: "shrink-0",
+              children: /* @__PURE__ */ e(y, { size: 16 })
+            }
+          ),
+          /* @__PURE__ */ a(
+            "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",
+              onClick: o,
+              "aria-label": "絞り込み",
+              children: [
+                /* @__PURE__ */ e(x, { size: 20 }),
+                l != null && l > 0 && /* @__PURE__ */ e("span", { className: "absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-[var(--Brand-Cake-Orange)] typo-label-xs text-[var(--Text-on-Inverse)]", children: l })
+              ]
+            }
+          ),
+          n.map((r) => /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              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"
+              ),
+              children: [
+                /* @__PURE__ */ e("span", { className: "truncate", children: r.isActive && r.value ? r.value : r.label }),
+                /* @__PURE__ */ e(m, { size: 16, className: "shrink-0" })
+              ]
+            },
+            r.label
+          )),
+          o && /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: o,
+              className: "shrink-0 whitespace-nowrap py-2 typo-body-md text-[var(--Text-Accent-Primary)]",
+              children: "他のフィルタ"
+            }
+          )
+        ] }),
+        (s !== void 0 || t || i) && /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-0", children: [
+          s !== void 0 && /* @__PURE__ */ a("span", { className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: [
+            "対象商品:",
+            /* @__PURE__ */ e("strong", { className: "mx-1 typo-heading-md", children: s.toLocaleString() }),
+            "件"
+          ] }),
+          i && /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              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"
+              ),
+              children: [
+                /* @__PURE__ */ e(u, { className: "size-4" }),
+                /* @__PURE__ */ e("span", { children: t ?? "並べ替え" })
+              ]
+            }
+          ),
+          t && /* @__PURE__ */ a("div", { className: "hidden @md:flex items-center gap-2", children: [
+            /* @__PURE__ */ e("span", { className: "typo-body-md text-[var(--Text-High-Emphasis)]", children: "並べ替え：" }),
+            /* @__PURE__ */ a(
+              "button",
+              {
+                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",
+                children: [
+                  t,
+                  /* @__PURE__ */ e(m, { size: 12 })
+                ]
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function u({ className: n }) {
+  return /* @__PURE__ */ a(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: n,
+      children: [
+        /* @__PURE__ */ e("line", { x1: "4", y1: "6", x2: "13", y2: "6" }),
+        /* @__PURE__ */ e("line", { x1: "4", y1: "12", x2: "11", y2: "12" }),
+        /* @__PURE__ */ e("line", { x1: "4", y1: "18", x2: "9", y2: "18" }),
+        /* @__PURE__ */ e("polyline", { points: "17 9 20 6 23 9" }),
+        /* @__PURE__ */ e("line", { x1: "20", y1: "6", x2: "20", y2: "18" })
+      ]
+    }
+  );
+}
+export {
+  z as FilterBar
+};

package/dist/components/primitives/footer.js

@@ -0,0 +1,247 @@
+import { jsxs as t, Fragment as u, jsx as e } from "react/jsx-runtime";
+import * as h from "react";
+import { cn as c } from "../../lib/utils.js";
+function y({
+  title: l,
+  children: s
+}) {
+  const [i, a] = h.useState(!1), o = h.useRef(null), [d, m] = h.useState(0);
+  return h.useEffect(() => {
+    o.current && m(o.current.scrollHeight);
+  }, [i]), /* @__PURE__ */ t("div", { "data-slot": "footer-accordion", children: [
+    /* @__PURE__ */ t(
+      "button",
+      {
+        type: "button",
+        className: c(
+          "flex w-full items-center justify-between",
+          "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5",
+          "typo-body-md text-[var(--Text-High-Emphasis)]",
+          "cursor-pointer"
+        ),
+        onClick: () => a(!i),
+        "aria-expanded": i,
+        children: [
+          /* @__PURE__ */ e("span", { children: l }),
+          /* @__PURE__ */ t("span", { className: "relative size-3 shrink-0", children: [
+            /* @__PURE__ */ e("span", { className: "absolute top-1/2 left-0 block h-px w-3 -translate-y-1/2 bg-[var(--Text-High-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]" }),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: c(
+                  "absolute top-1/2 left-0 block h-px w-3 -translate-y-1/2 bg-[var(--Text-High-Emphasis)] transition-transform duration-[var(--Motion-Duration-Base)]",
+                  i ? "rotate-0" : "rotate-90"
+                )
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        ref: o,
+        className: "overflow-hidden transition-[max-height] duration-[var(--Motion-Duration-Base)] ease-in-out",
+        style: { maxHeight: i ? `${d}px` : "0px" },
+        children: /* @__PURE__ */ e("div", { className: "bg-[var(--Surface-Secondary)]", children: s })
+      }
+    )
+  ] });
+}
+function N({ groups: l }) {
+  const s = l.length <= 4 ? "@lg:grid-cols-4" : l.length === 5 ? "@lg:grid-cols-5" : "@lg:grid-cols-6";
+  return /* @__PURE__ */ e("div", { className: c("grid grid-cols-3 gap-6", s), children: l.map((i) => /* @__PURE__ */ t("div", { children: [
+    /* @__PURE__ */ e("h3", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: i.title }),
+    /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: i.links.map((a) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+      "a",
+      {
+        href: a.href,
+        className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
+        ...a.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        children: a.label
+      }
+    ) }, a.label)) }),
+    i.subGroups?.map((a) => /* @__PURE__ */ t("div", { className: "mt-4", children: [
+      /* @__PURE__ */ e("h4", { className: "typo-label-md text-[var(--Text-High-Emphasis)] mb-3", children: a.title }),
+      /* @__PURE__ */ e("ul", { className: "space-y-1.5", children: a.links.map((o) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(
+        "a",
+        {
+          href: o.href,
+          className: "typo-body-sm text-[var(--Text-Medium-Emphasis)] hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
+          ...o.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+          children: o.label
+        }
+      ) }, o.label)) })
+    ] }, a.title))
+  ] }, i.title)) });
+}
+function b({ links: l }) {
+  return /* @__PURE__ */ e("ul", { children: l.map((s) => /* @__PURE__ */ e("li", { className: "border-b border-[var(--Border-Low-Emphasis)] last:border-b-0", children: /* @__PURE__ */ t(
+    "a",
+    {
+      href: s.href,
+      className: c(
+        "flex items-center justify-between px-5 py-5",
+        "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
+        "hover:text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]"
+      ),
+      ...s.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+      children: [
+        /* @__PURE__ */ e("span", { children: s.label }),
+        /* @__PURE__ */ e(
+          "svg",
+          {
+            className: "size-2.5 shrink-0 text-[var(--Text-Low-Emphasis)]",
+            viewBox: "0 0 10 10",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            children: /* @__PURE__ */ e("path", { d: "M3.5 1.5L7 5L3.5 8.5" })
+          }
+        )
+      ]
+    }
+  ) }, s.label)) });
+}
+function w({
+  className: l,
+  linkGroups: s = [],
+  copyright: i = "© Cake.jp Co., Ltd.",
+  logo: a,
+  logoHref: o = "/",
+  socialLinks: d = [],
+  description: m,
+  paymentMethods: x = [],
+  trustBadge: n,
+  bottomLinks: v = [],
+  ...f
+}) {
+  return /* @__PURE__ */ t(
+    "footer",
+    {
+      "data-slot": "footer",
+      style: { containerType: "inline-size" },
+      className: c(
+        "bg-[var(--Surface-Primary)] text-[var(--Text-Medium-Emphasis)]",
+        l
+      ),
+      ...f,
+      children: [
+        s.length > 0 && /* @__PURE__ */ t(u, { children: [
+          /* @__PURE__ */ e("nav", { "aria-label": "フッターナビゲーション", "data-slot": "footer-links", className: "border-t border-[var(--Border-Medium-Emphasis)] @lg:hidden", children: s.map((r) => /* @__PURE__ */ t(y, { title: r.title, children: [
+            /* @__PURE__ */ e(b, { links: r.links }),
+            r.subGroups?.map((p) => /* @__PURE__ */ t("div", { children: [
+              /* @__PURE__ */ e("div", { className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-5 typo-body-md text-[var(--Text-High-Emphasis)]", children: p.title }),
+              /* @__PURE__ */ e(b, { links: p.links })
+            ] }, p.title))
+          ] }, r.title)) }),
+          /* @__PURE__ */ e(
+            "nav",
+            {
+              "aria-label": "フッターナビゲーション",
+              "data-slot": "footer-links-pc",
+              className: "hidden @lg:block border-t border-[var(--Border-Medium-Emphasis)]",
+              children: /* @__PURE__ */ e("div", { className: "mx-auto max-w-[1065px] px-5 py-16", children: /* @__PURE__ */ e(N, { groups: s }) })
+            }
+          )
+        ] }),
+        d.length > 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            "data-slot": "footer-social",
+            className: "flex flex-wrap items-center justify-center gap-4 px-4 py-6 @sm:gap-8 @sm:px-0 @sm:py-8",
+            children: d.map((r) => /* @__PURE__ */ e(
+              "a",
+              {
+                href: r.href,
+                className: c(
+                  // shrink-0 必須: SNS アイコンの 40px タッチターゲットを flex row で保つ
+                  "flex size-10 shrink-0 items-center justify-center",
+                  "text-[var(--Text-High-Emphasis)]",
+                  "transition-colors duration-[var(--Motion-Duration-Fast)] hover:text-[var(--Text-Medium-Emphasis)]"
+                ),
+                "aria-label": r.label,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: r.icon
+              },
+              r.label
+            ))
+          }
+        ),
+        x.length > 0 && /* @__PURE__ */ t(
+          "div",
+          {
+            "data-slot": "footer-payment",
+            className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-6",
+            children: [
+              /* @__PURE__ */ e("p", { className: "typo-label-sm text-[var(--Text-Low-Emphasis)] text-center mb-3", children: "お支払い方法" }),
+              /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-1.5 @sm:gap-2", children: x.map((r) => /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "flex items-center justify-center",
+                  "aria-label": r.label,
+                  children: r.icon
+                },
+                r.label
+              )) })
+            ]
+          }
+        ),
+        n && /* @__PURE__ */ t(
+          "div",
+          {
+            "data-slot": "footer-trust",
+            className: "flex items-center gap-3 border-t border-[var(--Border-Low-Emphasis)] px-5 py-5",
+            children: [
+              n.href ? /* @__PURE__ */ e(
+                "a",
+                {
+                  href: n.href,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  className: "shrink-0",
+                  children: n.icon
+                }
+              ) : /* @__PURE__ */ e("div", { className: "shrink-0", children: n.icon }),
+              n.description && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: n.description })
+            ]
+          }
+        ),
+        v.length > 0 && /* @__PURE__ */ e(
+          "div",
+          {
+            "data-slot": "footer-bottom-links",
+            className: "border-t border-[var(--Border-Low-Emphasis)] px-5 py-4",
+            children: /* @__PURE__ */ e("div", { className: "flex flex-wrap items-center justify-center gap-x-3 gap-y-2 @sm:gap-x-4", children: v.map((r) => /* @__PURE__ */ e(
+              "a",
+              {
+                href: r.href,
+                className: "typo-body-xs text-[var(--Text-Low-Emphasis)] hover:text-[var(--Text-Medium-Emphasis)] transition-colors duration-[var(--Motion-Duration-Fast)]",
+                ...r.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+                children: r.label
+              },
+              r.label
+            )) })
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            "data-slot": "footer-bottom",
+            className: "border-t border-[var(--Border-Medium-Emphasis)] px-5 pt-8 pb-9 text-center",
+            children: [
+              a && /* @__PURE__ */ e("div", { className: "mx-auto w-fit max-w-[160px]", children: /* @__PURE__ */ e("a", { href: o, className: "block text-[var(--Text-High-Emphasis)]", children: a }) }),
+              m && /* @__PURE__ */ e("p", { className: "mt-6 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: m }),
+              /* @__PURE__ */ e("p", { className: "mt-5 typo-body-sm text-[var(--Text-Low-Emphasis)]", children: i })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  w as Footer
+};

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

@@ -0,0 +1,38 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as u 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";
+function L({
+  label: m,
+  required: p,
+  optional: x,
+  description: o,
+  descriptionPosition: l = "above",
+  error: a,
+  htmlFor: v,
+  children: b,
+  className: f
+}) {
+  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: [
+    /* @__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: "任意" })
+    ] }),
+    l === "above" && d,
+    /* @__PURE__ */ e(
+      N.Provider,
+      {
+        value: { labelId: r, controlId: s, descriptionId: n, errorId: i },
+        children: b
+      }
+    ),
+    l === "below" && d,
+    a && /* @__PURE__ */ e("p", { id: i, className: "typo-body-xs text-[var(--Text-Caution)]", children: a })
+  ] });
+}
+export {
+  L as FormField
+};

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

@@ -0,0 +1,99 @@
+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";
+function L({
+  logo: o,
+  title: c,
+  onBack: u,
+  backLabel: h = "戻る",
+  steps: e,
+  activeStep: x,
+  children: v,
+  bottomAction: d,
+  className: b,
+  mainId: m = "main-content",
+  skipLink: g
+}) {
+  const t = e?.findIndex((n) => n.key === x) ?? -1;
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-slot": "funnel-shell",
+      className: r(
+        // 地が Surface-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)]",
+        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,
+        e && e.length > 0 && /* @__PURE__ */ a(
+          "nav",
+          {
+            "data-slot": "funnel-steps",
+            "aria-label": "購入ステップ",
+            className: "border-b border-[var(--Border-Low-Emphasis)] bg-[var(--Surface-Primary)] px-4 py-3",
+            children: /* @__PURE__ */ a("ol", { className: "mx-auto flex max-w-[640px] items-start", children: e.map((n, s) => {
+              const i = t >= 0 && s < t, l = s === t, y = i || l, k = s === e.length - 1;
+              return /* @__PURE__ */ p(
+                "li",
+                {
+                  className: "relative flex flex-1 flex-col items-center",
+                  "aria-current": l ? "step" : void 0,
+                  children: [
+                    !k && /* @__PURE__ */ a(
+                      "span",
+                      {
+                        className: r(
+                          "absolute left-1/2 right-[-50%] top-[3px] h-0.5 rounded-full transition-colors",
+                          i ? "bg-[var(--Brand-Cake-Orange)]" : "bg-[var(--Border-Medium-Emphasis)]"
+                        ),
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      "span",
+                      {
+                        className: r(
+                          "relative z-10 size-2 shrink-0 rounded-full transition-colors",
+                          y ? "bg-[var(--Brand-Cake-Orange)]" : "bg-[var(--Border-Medium-Emphasis)]"
+                        ),
+                        "aria-hidden": "true"
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      "span",
+                      {
+                        className: r(
+                          "mt-1.5 px-1 text-center whitespace-nowrap transition-colors",
+                          l ? "typo-label-sm text-[var(--Text-High-Emphasis)]" : i ? "typo-body-sm text-[var(--Text-Medium-Emphasis)]" : "typo-body-sm text-[var(--Text-Low-Emphasis)]"
+                        ),
+                        children: n.label
+                      }
+                    )
+                  ]
+                },
+                n.key
+              );
+            }) })
+          }
+        ),
+        /* @__PURE__ */ a(
+          "main",
+          {
+            id: m,
+            className: r("@container flex-1", d && "pb-20"),
+            children: v
+          }
+        ),
+        d
+      ]
+    }
+  );
+}
+export {
+  L as FunnelShell
+};