@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/primitives/combobox.js

@@ -1,39 +1,42 @@
 "use client";
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import * as w from "react";
-import { ChevronsUpDown as N, Check as j } from "lucide-react";
-import { cn as h } from "../../lib/utils.js";
-import { Button as k } from "../foundations/button.js";
-import { Command as E, CommandInput as P, CommandList as O, CommandEmpty as S, CommandGroup as T, CommandItem as A } from "../foundations/command.js";
-import { Popover as F, PopoverTrigger as I, PopoverContent as B } from "../foundations/popover.js";
-import { useFieldLabelling as G, resolveFieldAria as H } from "../../lib/field-labelling.js";
-function K({
-  options: s,
-  value: l,
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import * as N from "react";
+import { ChevronsUpDown as w, Check as T } from "lucide-react";
+import { cn as f } from "../../lib/utils.js";
+import { Button as j } from "../foundations/button.js";
+import { Command as E, CommandInput as O, CommandList as k, CommandEmpty as P, CommandGroup as S, CommandItem as A } from "../foundations/command.js";
+import { Popover as H, PopoverTrigger as I, PopoverContent as B } from "../foundations/popover.js";
+import { useFieldLabelling as F, resolveFieldAria as G } from "../../lib/field-labelling.js";
+import { HIGH_CONTRAST_OUTLINE as L } from "../../lib/high-contrast.js";
+function Q({
+  options: n,
+  value: i,
   onValueChange: u,
-  placeholder: o = "選択してください",
-  searchPlaceholder: f = "検索",
-  emptyLabel: v = "候補がありません",
+  placeholder: t = "選択してください",
+  searchPlaceholder: h = "検索",
+  emptyLabel: C = "候補がありません",
   disabled: x,
   className: y,
   id: d,
-  "aria-invalid": C,
-  "aria-describedby": n,
-  "aria-label": i,
-  "aria-labelledby": t
+  "aria-invalid": s,
+  "aria-describedby": c,
+  "aria-label": l,
+  "aria-labelledby": o
 }) {
-  const [m, c] = w.useState(!1), p = s.find((e) => e.value === l), b = G(), g = H(
+  const [m, p] = N.useState(!1), v = n.find((a) => a.value === i), b = F(), g = G(
     {
       id: d,
-      "aria-label": i,
-      "aria-labelledby": t,
-      "aria-describedby": n
+      "aria-label": l,
+      "aria-labelledby": o,
+      "aria-describedby": c,
+      // 渡さないと、利用側の明示指定が FormField 由来の値（error の有無）で上書きされる
+      "aria-invalid": s
     },
     b
   );
-  return /* @__PURE__ */ r(F, { open: m, onOpenChange: c, children: [
-    /* @__PURE__ */ a(I, { asChild: !0, children: /* @__PURE__ */ r(
-      k,
+  return /* @__PURE__ */ r(H, { open: m, onOpenChange: p, children: [
+    /* @__PURE__ */ e(I, { asChild: !0, children: /* @__PURE__ */ r(
+      j,
       {
         type: "button",
         variant: "tertiary",
@@ -41,49 +44,62 @@ function K({
         id: d,
         "aria-expanded": m,
         "aria-haspopup": "listbox",
-        "aria-invalid": C,
-        "aria-describedby": n,
-        "aria-label": i ?? (!b && !i && !t ? o : void 0),
-        "aria-labelledby": t,
+        "aria-invalid": s,
+        "aria-describedby": c,
+        "aria-label": l ?? (!b && !l && !o ? t : void 0),
+        "aria-labelledby": o,
         ...g,
         disabled: x,
-        className: h("w-full justify-between bg-[var(--Surface-Primary)]", y),
+        className: f(
+          "w-full justify-between bg-[var(--Surface-Primary)]",
+          // 高コントラスト（prefers-contrast: more / data-contrast="more"）のときだけ見える内側 1px の輪郭。
+          // トリガーは枠を持たず地もページ地と同色で、既定では境界が 3:1 に届かない（#301）
+          L,
+          // エラー時の赤枠。トリガーは Button tertiary（枠幅 0）なので border 色だけ変えても見えず、
+          // border を足すと 1px 広がる。内側リング（inset-ring）で描いて高さを変えない。
+          // inset-ring は ring（フォーカスリング）と別の box-shadow 層なので同時に表示される。
+          "aria-invalid:inset-ring-1 aria-invalid:inset-ring-[var(--Border-Caution)]",
+          // forced-colors（Windows ハイコントラスト）では box-shadow が消えるため、エラー時だけ輪郭線
+          // （outline。レイアウトに影響しない）で境界を出す。forced-colors 以外では効かない
+          "forced-colors:aria-invalid:outline-solid forced-colors:aria-invalid:outline-1 forced-colors:aria-invalid:-outline-offset-1 forced-colors:aria-invalid:outline-[CanvasText]",
+          y
+        ),
         children: [
-          /* @__PURE__ */ a("span", { className: p ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: p?.label ?? o }),
-          /* @__PURE__ */ a(N, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
+          /* @__PURE__ */ e("span", { className: v ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: v?.label ?? t }),
+          /* @__PURE__ */ e(w, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
         ]
       }
     ) }),
-    /* @__PURE__ */ a(B, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ r(E, { children: [
-      /* @__PURE__ */ a(P, { placeholder: f }),
-      /* @__PURE__ */ r(O, { children: [
-        /* @__PURE__ */ a(S, { children: v }),
-        /* @__PURE__ */ a(T, { children: s.map((e) => /* @__PURE__ */ r(
+    /* @__PURE__ */ e(B, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ r(E, { children: [
+      /* @__PURE__ */ e(O, { placeholder: h }),
+      /* @__PURE__ */ r(k, { children: [
+        /* @__PURE__ */ e(P, { children: C }),
+        /* @__PURE__ */ e(S, { children: n.map((a) => /* @__PURE__ */ r(
           A,
           {
-            value: [e.label, ...e.keywords ?? []].join(" "),
-            disabled: e.disabled,
+            value: [a.label, ...a.keywords ?? []].join(" "),
+            disabled: a.disabled,
             onSelect: () => {
-              u?.(e.value), c(!1);
+              u?.(a.value), p(!1);
             },
             children: [
-              /* @__PURE__ */ a(
-                j,
+              /* @__PURE__ */ e(
+                T,
                 {
                   "aria-hidden": "true",
-                  className: h(e.value === l ? "opacity-100" : "opacity-0")
+                  className: f(a.value === i ? "opacity-100" : "opacity-0")
                 }
               ),
-              e.label,
-              e.value === l && /* @__PURE__ */ a("span", { className: "sr-only", children: "選択済み" })
+              a.label,
+              a.value === i && /* @__PURE__ */ e("span", { className: "sr-only", children: "選択済み" })
             ]
           },
-          e.value
+          a.value
         )) })
       ] })
     ] }) })
   ] });
 }
 export {
-  K as Combobox
+  Q as Combobox
 };

package/dist/components/primitives/container.js

@@ -16,11 +16,11 @@ const p = o("mx-auto w-full", {
       // 上限なし（全幅）
     },
     gutter: {
-      default: "px-4 md:px-6",
+      default: "px-4 md:px-6 [--Container-Gutter:16px] md:[--Container-Gutter:24px]",
       // SP 16 / PC 24
-      tight: "px-3 md:px-4",
+      tight: "px-3 md:px-4 [--Container-Gutter:12px] md:[--Container-Gutter:16px]",
       // SP 12 / PC 16
-      none: "px-0"
+      none: "px-0 [--Container-Gutter:0px]"
     }
   },
   defaultVariants: {
@@ -28,9 +28,9 @@ const p = o("mx-auto w-full", {
     gutter: "default"
   }
 });
-function u({
-  className: t,
-  size: a,
+function s({
+  className: a,
+  size: t,
   gutter: r,
   ...e
 }) {
@@ -38,13 +38,13 @@ function u({
     "div",
     {
       "data-slot": "container",
-      "data-size": a ?? "page",
-      className: i(p({ size: a, gutter: r }), t),
+      "data-size": t ?? "page",
+      className: i(p({ size: t, gutter: r }), a),
       ...e
     }
   );
 }
 export {
-  u as Container,
+  s as Container,
   p as containerVariants
 };

package/dist/components/primitives/content-card.js

@@ -1,23 +1,22 @@
 import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import "react";
 import { cn as s } from "../../lib/utils.js";
-import { FOCUS_RING as v } from "../../lib/focus-ring.js";
-import { resolveLinkComponent as h } from "../../lib/link-component.js";
-import { Tag as u } from "./tag.js";
-const x = {
+import { FOCUS_RING as f } from "../../lib/focus-ring.js";
+import { Tag as h } from "./tag.js";
+const v = {
   "16/10": "aspect-[16/10]",
   "16/9": "aspect-[16/9]",
   "1/1": "aspect-[1/1]"
-}, w = {
+}, u = {
   vertical: "flex-col gap-2",
   horizontal: "flex-row items-start gap-3",
   list: "flex-row-reverse items-start gap-3"
-}, g = {
+}, x = {
   vertical: "w-full",
   horizontal: "w-28 shrink-0",
   list: "w-24 shrink-0"
 };
-function k({
+function E({
   className: a,
   title: e,
   href: c,
@@ -29,17 +28,16 @@ function k({
   linkComponent: m,
   ...p
 }) {
-  const f = h(m);
   return /* @__PURE__ */ l(
-    f,
+    m ?? "a",
     {
       "data-slot": "content-card",
       "data-orientation": o,
       href: c,
       className: s(
         "group flex rounded-lg bg-[var(--card-surface,var(--Surface-Primary))]",
-        w[o],
-        v,
+        u[o],
+        f,
         a
       ),
       ...p,
@@ -50,13 +48,13 @@ function k({
             "data-slot": "content-card-media",
             className: s(
               "relative overflow-hidden rounded-lg",
-              x[d],
-              g[o]
+              v[d],
+              x[o]
             ),
             children: [
               /* @__PURE__ */ t("div", { className: "h-full w-full transition-transform duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] group-hover:scale-[1.02]", children: i }),
               r && /* @__PURE__ */ t(
-                u,
+                h,
                 {
                   variant: r.variant,
                   className: "absolute bottom-2 left-2 max-w-[calc(100%-1rem)] overflow-hidden text-ellipsis",
@@ -88,7 +86,7 @@ function k({
     }
   );
 }
-function M({
+function L({
   className: a,
   ...e
 }) {
@@ -106,6 +104,6 @@ function M({
   );
 }
 export {
-  k as ContentCard,
-  M as ContentList
+  E as ContentCard,
+  L as ContentList
 };

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

@@ -1,87 +1,97 @@
 "use client";
-import { jsxs as v, jsx as a, Fragment as z } from "react/jsx-runtime";
+import { jsxs as w, jsx as a, Fragment as k } from "react/jsx-runtime";
 import * as s from "react";
-import F from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
-import L from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { cn as i } from "../../lib/utils.js";
-const k = {
+import O from "iconsax-reactjs/dist/esm/ArrowLeft2.js";
+import R from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { cn as u } from "../../lib/utils.js";
+import { usePrefersReducedMotion as F } from "../../lib/use-prefers-reduced-motion.js";
+const M = {
   1: "@[960px]:w-full",
   2: "@[960px]:w-[calc((100%-16px)/2)]",
   3: "@[960px]:w-[calc((100%-32px)/3)]",
   4: "@[960px]:w-[calc((100%-48px)/4)]"
 };
-function M({
-  slides: c,
-  showDots: b = !0,
-  showArrows: y = !0,
-  autoPlay: u = 0,
-  peek: p = !1,
-  itemsPerView: f = 1,
-  ariaLabel: g = "コンテンツカルーセル",
-  className: w,
-  ...E
+function q({
+  slides: p,
+  showDots: E = !0,
+  showArrows: C = !0,
+  autoPlay: f = 0,
+  peek: x = !1,
+  itemsPerView: v = 1,
+  ariaLabel: I = "コンテンツカルーセル",
+  className: N,
+  ...S
 }) {
-  const d = s.useRef(null), [o, I] = s.useState(0), t = c.length;
+  const c = s.useRef(null), [n, z] = s.useState(0), i = F(), t = p.length;
   s.useEffect(() => {
-    const r = d.current;
+    const r = c.current;
     if (!r) return;
     let e = 0;
-    const n = () => {
+    const o = () => {
       cancelAnimationFrame(e), e = requestAnimationFrame(() => {
-        const A = Array.from(
+        const h = Array.from(
           r.querySelectorAll("[data-slide]")
-        );
-        let m = 0, h = Number.POSITIVE_INFINITY;
-        A.forEach((T, j) => {
-          const x = Math.abs(T.offsetLeft - r.scrollLeft);
-          x < h && (h = x, m = j);
-        }), I(m);
+        ), L = h[0]?.offsetLeft ?? 0;
+        let b = 0, g = Number.POSITIVE_INFINITY;
+        h.forEach((T, j) => {
+          const y = Math.abs(T.offsetLeft - L - r.scrollLeft);
+          y < g && (g = y, b = j);
+        }), z(b);
       });
     };
-    return n(), r.addEventListener("scroll", n, { passive: !0 }), () => {
-      cancelAnimationFrame(e), r.removeEventListener("scroll", n);
+    o(), r.addEventListener("scroll", o, { passive: !0 });
+    const l = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(o);
+    return l?.observe(r), () => {
+      cancelAnimationFrame(e), r.removeEventListener("scroll", o), l?.disconnect();
     };
   }, [t]);
-  function l(r) {
-    const e = d.current;
-    if (!e) return;
-    const n = e.children[r];
-    n && e.scrollTo({ left: n.offsetLeft, behavior: "smooth" });
-  }
+  const d = s.useCallback(
+    (r) => {
+      const e = c.current;
+      if (!e) return;
+      const o = e.children[r], l = e.children[0];
+      o && l && e.scrollTo({
+        left: o.offsetLeft - l.offsetLeft,
+        behavior: i ? "auto" : "smooth"
+      });
+    },
+    [i]
+  ), m = s.useCallback(() => {
+    const r = c.current, e = r ? r.scrollLeft >= r.scrollWidth - r.clientWidth - 1 : !1;
+    d(n >= t - 1 || e ? 0 : n + 1);
+  }, [n, t, d]);
   s.useEffect(() => {
-    if (u <= 0 || t <= 1) return;
-    const r = setInterval(() => {
-      l((o + 1) % t);
-    }, u);
+    if (i || f <= 0 || t <= 1) return;
+    const r = setInterval(m, f);
     return () => clearInterval(r);
-  }, [u, o, t]);
-  function N() {
-    l(o <= 0 ? t - 1 : o - 1);
-  }
-  function S() {
-    l(o >= t - 1 ? 0 : o + 1);
+  }, [f, t, i, m]);
+  function A() {
+    d(n <= 0 ? t - 1 : n - 1);
   }
-  return t === 0 ? null : /* @__PURE__ */ v(
+  return t === 0 ? null : /* @__PURE__ */ w(
     "div",
     {
       "data-slot": "content-carousel",
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": g,
-      className: i("@container group/carousel relative", w),
-      ...E,
+      "aria-label": I,
+      className: u("@container group/carousel relative", N),
+      ...S,
       children: [
         /* @__PURE__ */ a(
           "div",
           {
-            ref: d,
-            className: i(
-              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-none",
-              p && "pl-4 @[960px]:pl-0",
-              f > 1 && "@[960px]:gap-4"
+            ref: c,
+            className: u(
+              "flex snap-x snap-mandatory overflow-x-auto scroll-smooth motion-reduce:scroll-auto scrollbar-none",
+              // peek: 端の余白 = Container の gutter（外に置いたときは 16px）。Container の中では
+              // gutter 分だけ外へはみ出して画面端までスクロールさせる。scroll-padding も同じ幅にして、
+              // スナップ後も端の余白が消えないようにする。PC (@[960px]:) では peek しないので外す
+              x && "-mx-[var(--Container-Gutter,0px)] gap-3 px-[var(--Container-Gutter,16px)] scroll-px-[var(--Container-Gutter,16px)] @[960px]:mx-0 @[960px]:gap-0 @[960px]:px-0 @[960px]:scroll-px-0",
+              v > 1 && "@[960px]:gap-4"
             ),
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-            children: c.map((r, e) => /* @__PURE__ */ a(
+            children: p.map((r, e) => /* @__PURE__ */ a(
               "div",
               {
                 "data-slide": !0,
@@ -89,10 +99,11 @@ function M({
                 role: "group",
                 "aria-roledescription": "スライド",
                 "aria-label": `${e + 1} / ${t}`,
-                className: i(
+                className: u(
                   "shrink-0 snap-start",
-                  p ? "w-[calc(100%-48px)] pr-3 @[960px]:pr-0" : "w-full",
-                  k[f]
+                  // peek: 端の余白 16px のとき、カード幅は導入前（全幅に置いた場合）と同じ「全幅 - 76px」
+                  x ? "w-[calc(100%-44px)]" : "w-full",
+                  M[v]
                 ),
                 children: r
               },
@@ -100,38 +111,38 @@ function M({
             ))
           }
         ),
-        y && t > 1 && /* @__PURE__ */ v(z, { children: [
+        C && t > 1 && /* @__PURE__ */ w(k, { children: [
           /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: N,
+              onClick: A,
               "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-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__ */ a(F, { 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-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ a(O, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           ),
           /* @__PURE__ */ a(
             "button",
             {
               type: "button",
-              onClick: S,
+              onClick: m,
               "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-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__ */ a(L, { 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-Secondary)] shadow-md transition-opacity hover:bg-[var(--Surface-Tertiary)] @md:flex @[960px]:opacity-0 @[960px]:group-hover/carousel:opacity-100",
+              children: /* @__PURE__ */ a(R, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           )
         ] }),
-        b && t > 1 && /* @__PURE__ */ a("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: c.map((r, e) => /* @__PURE__ */ a(
+        E && t > 1 && /* @__PURE__ */ a("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: p.map((r, e) => /* @__PURE__ */ a(
           "button",
           {
             type: "button",
-            onClick: () => l(e),
+            onClick: () => d(e),
             "aria-label": `スライド ${e + 1}`,
-            className: i(
+            className: u(
               // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
               "size-2 shrink-0 rounded-full transition-colors",
-              e === o ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+              e === n ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
             )
           },
           e
@@ -141,5 +152,5 @@ function M({
   );
 }
 export {
-  M as ContentCarousel
+  q as ContentCarousel
 };