@cakejp/design-system 0.20.0 → 0.21.0

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

@@ -1,32 +1,31 @@
 "use client";
-import { jsxs as l, jsx as e, Fragment as c } from "react/jsx-runtime";
-import * as z from "react";
-import j from "iconsax-reactjs/dist/esm/ArrowDown2.js";
-import S from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import B from "iconsax-reactjs/dist/esm/ArrowUp2.js";
-import L from "iconsax-reactjs/dist/esm/Add.js";
+import { jsxs as l, jsx as e, Fragment as n } from "react/jsx-runtime";
+import * as E from "react";
+import T from "iconsax-reactjs/dist/esm/ArrowDown2.js";
+import z from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import j from "iconsax-reactjs/dist/esm/ArrowUp2.js";
+import S from "iconsax-reactjs/dist/esm/Add.js";
 import { X as M } from "lucide-react";
 import { cn as A } from "../../lib/utils.js";
-import { resolveLinkComponent as m } from "../../lib/link-component.js";
 import { Button as x } from "../foundations/button.js";
 const v = "flex min-h-12 items-center gap-1 mx-2 rounded-lg px-2 py-3 typo-body-md text-[var(--Text-High-Emphasis)] transition-colors duration-[var(--Motion-Duration-Base)] ease-[var(--Motion-Easing-Standard)] hover:bg-[var(--Surface-Secondary)] active:bg-[var(--Surface-Tertiary)]";
-function _({
+function U({
   userName: r,
   isLoggedIn: t = !1,
-  hideLoginLink: d = !1,
+  hideLoginLink: o = !1,
   sections: g,
-  banners: o,
-  onClose: h,
-  onLogin: p,
+  banners: c,
+  onClose: d,
+  onLogin: m,
   loginHref: N = "/security/login_link/",
   className: b,
-  linkComponent: n,
+  linkComponent: h,
   ...y
 }) {
-  const w = m(n), k = m(n), [f, E] = z.useState(
+  const p = h ?? "a", [f, w] = E.useState(
     /* @__PURE__ */ new Set()
-  ), T = (a) => {
-    E((i) => {
+  ), k = (a) => {
+    w((i) => {
       const s = new Set(i);
       return s.has(a) ? s.delete(a) : s.add(a), s;
     });
@@ -41,33 +40,33 @@ function _({
       ),
       ...y,
       children: [
-        (t || h) && /* @__PURE__ */ l("div", { className: "flex items-center justify-between px-4 py-3", children: [
+        (t || d) && /* @__PURE__ */ l("div", { className: "flex items-center justify-between px-4 py-3", children: [
           t ? /* @__PURE__ */ e("div", { children: /* @__PURE__ */ l("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: [
             r ?? "ゲスト",
             "さま"
           ] }) }) : /* @__PURE__ */ e("div", {}),
-          h && /* @__PURE__ */ e(
+          d && /* @__PURE__ */ e(
             x,
             {
               variant: "ghost",
               size: "icon-sm",
-              onClick: h,
+              onClick: d,
               "aria-label": "メニューを閉じる",
               children: /* @__PURE__ */ e(M, { className: "size-5" })
             }
           )
         ] }),
-        !t && !d && /* @__PURE__ */ l(c, { children: [
+        !t && !o && /* @__PURE__ */ l(n, { children: [
           /* @__PURE__ */ e("div", { className: "py-2", children: /* @__PURE__ */ e("ul", { children: /* @__PURE__ */ e("li", { children: /* @__PURE__ */ l(
-            w,
+            p,
             {
               href: N,
-              onClick: p ? (a) => {
-                a.preventDefault(), p();
+              onClick: m ? (a) => {
+                a.preventDefault(), m();
               } : void 0,
               className: v,
               children: [
-                /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--Text-Medium-Emphasis)]", children: /* @__PURE__ */ e(L, { size: 16 }) }),
+                /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--Text-Medium-Emphasis)]", children: /* @__PURE__ */ e(S, { size: 16 }) }),
                 /* @__PURE__ */ e("span", { className: "flex-1", children: "ログイン・新規会員登録" })
               ]
             }
@@ -82,29 +81,29 @@ function _({
                 a.icon && /* @__PURE__ */ e("span", { className: "flex size-5 shrink-0 items-center justify-center", children: a.icon }),
                 /* @__PURE__ */ e("span", { children: a.title })
               ] }) }),
-              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: n, item: s }) }, s.label)) }),
-              a.itemsExtra && a.itemsExtra.length > 0 && /* @__PURE__ */ l(c, { children: [
-                f.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: n, item: s }) }, s.label)) }),
+              /* @__PURE__ */ e("ul", { children: a.items.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: h, item: s }) }, s.label)) }),
+              a.itemsExtra && a.itemsExtra.length > 0 && /* @__PURE__ */ l(n, { children: [
+                f.has(i) && /* @__PURE__ */ e("ul", { children: a.itemsExtra.map((s) => /* @__PURE__ */ e("li", { children: /* @__PURE__ */ e(u, { linkComponent: h, item: s }) }, s.label)) }),
                 /* @__PURE__ */ e(
                   x,
                   {
                     variant: "ghost",
                     className: "flex w-full items-center justify-center gap-1 rounded-none px-4 py-3 typo-label-md text-[var(--Text-Accent-Primary)]",
-                    onClick: () => T(i),
-                    children: f.has(i) ? /* @__PURE__ */ l(c, { children: [
+                    onClick: () => k(i),
+                    children: f.has(i) ? /* @__PURE__ */ l(n, { children: [
                       /* @__PURE__ */ e("span", { children: "折りたたむ" }),
-                      /* @__PURE__ */ e(B, { size: 16 })
-                    ] }) : /* @__PURE__ */ l(c, { children: [
-                      /* @__PURE__ */ e("span", { children: "すべて表示" }),
                       /* @__PURE__ */ e(j, { size: 16 })
+                    ] }) : /* @__PURE__ */ l(n, { children: [
+                      /* @__PURE__ */ e("span", { children: "すべて表示" }),
+                      /* @__PURE__ */ e(T, { size: 16 })
                     ] })
                   }
                 )
               ] })
             ] })
           ] }, i)),
-          o && o.length > 0 && /* @__PURE__ */ e("div", { className: "px-6 py-6", children: /* @__PURE__ */ e("ul", { className: "flex justify-center", children: o.map((a, i) => /* @__PURE__ */ e("li", { className: "w-1/2 max-w-28 px-2", children: /* @__PURE__ */ e(
-            k,
+          c && c.length > 0 && /* @__PURE__ */ e("div", { className: "px-6 py-6", children: /* @__PURE__ */ e("ul", { className: "flex justify-center", children: c.map((a, i) => /* @__PURE__ */ e("li", { className: "w-1/2 max-w-28 px-2", children: /* @__PURE__ */ e(
+            p,
             {
               href: a.href ?? "#",
               className: "block overflow-hidden rounded",
@@ -125,9 +124,8 @@ function _({
   );
 }
 function u({ item: r, linkComponent: t }) {
-  const d = m(t);
   return /* @__PURE__ */ l(
-    d,
+    t ?? "a",
     {
       href: r.href ?? "#",
       onClick: r.onClick,
@@ -148,11 +146,11 @@ function u({ item: r, linkComponent: t }) {
           r.badge && /* @__PURE__ */ e("span", { className: "rounded-full bg-[var(--Brand-Cake-Orange)] px-2 py-0.5 typo-label-xs text-[var(--Text-on-Inverse)]", children: r.badge }),
           r.subText && /* @__PURE__ */ e("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r.subText })
         ] }),
-        r.hasChildren && /* @__PURE__ */ e(S, { size: 16, className: "shrink-0 text-[var(--Object-High-Emphasis)]" })
+        r.hasChildren && /* @__PURE__ */ e(z, { size: 16, className: "shrink-0 text-[var(--Object-High-Emphasis)]" })
       ]
     }
   );
 }
 export {
-  _ as MenuDrawer
+  U as MenuDrawer
 };

package/dist/components/primitives/multi-select.js

@@ -1,75 +1,103 @@
 "use client";
-import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import * as E from "react";
-import { ChevronsUpDown as P, Check as S } from "lucide-react";
-import { cn as b } from "../../lib/utils.js";
-import { Button as k } from "../foundations/button.js";
-import { Command as O, CommandInput as T, CommandList as A, CommandEmpty as F, CommandGroup as I, CommandItem as M } from "../foundations/command.js";
-import { Popover as R, PopoverTrigger as B, PopoverContent as G } from "../foundations/popover.js";
-import { useFieldLabelling as H, resolveFieldAria as U } from "../../lib/field-labelling.js";
-import { Chip as $ } from "./chip.js";
-function W({
-  options: n,
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import * as t from "react";
+import { ChevronsUpDown as I, Check as O } from "lucide-react";
+import { cn as m } from "../../lib/utils.js";
+import { Button as P } from "../foundations/button.js";
+import { Command as k, CommandInput as B, CommandList as H, CommandEmpty as F, CommandGroup as G, CommandItem as L } from "../foundations/command.js";
+import { Popover as M, PopoverTrigger as U, PopoverContent as _ } from "../foundations/popover.js";
+import { useFieldLabelling as $, resolveFieldAria as q } from "../../lib/field-labelling.js";
+import { HIGH_CONTRAST_OUTLINE as z } from "../../lib/high-contrast.js";
+import { Chip as D } from "./chip.js";
+function le({
+  options: u,
   value: l = [],
-  onValueChange: f,
-  placeholder: d = "選択してください",
-  searchPlaceholder: v = "検索",
-  emptyLabel: g = "候補がありません",
-  disabled: m,
-  className: x,
-  id: o,
-  "aria-invalid": y,
-  "aria-describedby": c,
-  "aria-label": t,
-  "aria-labelledby": s
+  onValueChange: R,
+  placeholder: f = "選択してください",
+  searchPlaceholder: w = "検索",
+  emptyLabel: E = "候補がありません",
+  disabled: v,
+  className: T,
+  id: h,
+  "aria-invalid": p,
+  "aria-describedby": b,
+  "aria-label": s,
+  "aria-labelledby": c
 }) {
-  const [p, C] = E.useState(!1), i = n.filter((e) => l.includes(e.value)), h = H(), w = U(
+  const [g, S] = t.useState(!1), n = u.filter((e) => l.includes(e.value)), x = $(), j = q(
     {
-      id: o,
-      "aria-label": t,
-      "aria-labelledby": s,
-      "aria-describedby": c
+      id: h,
+      "aria-label": s,
+      "aria-labelledby": c,
+      "aria-describedby": b,
+      // 渡さないと、利用側の明示指定が FormField 由来の値（error の有無）で上書きされる
+      "aria-invalid": p
     },
-    h
-  ), N = !h && !t && !s ? d : void 0, u = (e) => f?.(l.includes(e) ? l.filter((j) => j !== e) : [...l, e]);
-  return /* @__PURE__ */ r("div", { "data-slot": "multi-select", className: b("flex flex-col gap-2", x), children: [
-    /* @__PURE__ */ r(R, { open: p, onOpenChange: C, children: [
-      /* @__PURE__ */ a(B, { asChild: !0, children: /* @__PURE__ */ r(
-        k,
+    x
+  ), A = !x && !s && !c ? f : void 0, C = (e) => R?.(l.includes(e) ? l.filter((a) => a !== e) : [...l, e]), y = t.useRef(null), d = t.useRef(null), o = t.useRef(null);
+  return t.useEffect(() => {
+    const e = o.current;
+    if (!e) return;
+    const a = document.activeElement;
+    if (l.includes(e.value)) {
+      a?.isConnected && d.current?.contains(a) || (o.current = null);
+      return;
+    }
+    if (o.current = null, a && a !== document.body && a.isConnected) return;
+    const N = Array.from(
+      d.current?.querySelectorAll('[data-slot="chip-remove"]') ?? []
+    );
+    (N[e.index] ?? N[e.index - 1] ?? y.current)?.focus();
+  }, [l]), /* @__PURE__ */ i("div", { "data-slot": "multi-select", className: m("flex flex-col gap-2", T), children: [
+    /* @__PURE__ */ i(M, { open: g, onOpenChange: S, children: [
+      /* @__PURE__ */ r(U, { asChild: !0, children: /* @__PURE__ */ i(
+        P,
         {
+          ref: y,
           type: "button",
           variant: "tertiary",
           role: "combobox",
-          id: o,
-          "aria-expanded": p,
+          id: h,
+          "aria-expanded": g,
           "aria-haspopup": "listbox",
-          "aria-invalid": y,
-          "aria-describedby": c,
-          "aria-label": t ?? N,
-          "aria-labelledby": s,
-          ...w,
-          disabled: m,
-          className: "w-full justify-between bg-[var(--Surface-Primary)]",
+          "aria-invalid": p,
+          "aria-describedby": b,
+          "aria-label": s ?? A,
+          "aria-labelledby": c,
+          ...j,
+          disabled: v,
+          className: m(
+            "w-full justify-between bg-[var(--Surface-Primary)]",
+            // 高コントラスト（prefers-contrast: more / data-contrast="more"）のときだけ見える内側 1px の輪郭（#301）
+            z,
+            // エラー時の赤枠。トリガーは 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]"
+          ),
           children: [
-            /* @__PURE__ */ a("span", { className: i.length ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: i.length ? `${i.length}件選択中` : d }),
-            /* @__PURE__ */ a(P, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
+            /* @__PURE__ */ r("span", { className: n.length ? "text-[var(--Text-High-Emphasis)]" : "text-[var(--Text-Low-Emphasis)]", children: n.length ? `${n.length}件選択中` : f }),
+            /* @__PURE__ */ r(I, { "aria-hidden": "true", className: "text-[var(--Object-Medium-Emphasis)]" })
           ]
         }
       ) }),
-      /* @__PURE__ */ a(G, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ r(O, { children: [
-        /* @__PURE__ */ a(T, { placeholder: v }),
-        /* @__PURE__ */ r(A, { children: [
-          /* @__PURE__ */ a(F, { children: g }),
-          /* @__PURE__ */ a(I, { children: n.map((e) => /* @__PURE__ */ r(
-            M,
+      /* @__PURE__ */ r(_, { align: "start", className: "w-[var(--radix-popover-trigger-width)] p-0", children: /* @__PURE__ */ i(k, { children: [
+        /* @__PURE__ */ r(B, { placeholder: w }),
+        /* @__PURE__ */ i(H, { children: [
+          /* @__PURE__ */ r(F, { children: E }),
+          /* @__PURE__ */ r(G, { children: u.map((e) => /* @__PURE__ */ i(
+            L,
             {
               value: [e.label, ...e.keywords ?? []].join(" "),
               disabled: e.disabled,
-              onSelect: () => u(e.value),
+              onSelect: () => C(e.value),
               children: [
-                /* @__PURE__ */ a(S, { "aria-hidden": "true", className: b(l.includes(e.value) ? "opacity-100" : "opacity-0") }),
+                /* @__PURE__ */ r(O, { "aria-hidden": "true", className: m(l.includes(e.value) ? "opacity-100" : "opacity-0") }),
                 e.label,
-                l.includes(e.value) && /* @__PURE__ */ a("span", { className: "sr-only", children: "選択済み" })
+                l.includes(e.value) && /* @__PURE__ */ r("span", { className: "sr-only", children: "選択済み" })
               ]
             },
             e.value
@@ -77,12 +105,15 @@ function W({
         ] })
       ] }) })
     ] }),
-    i.length > 0 && /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-1.5", role: "group", "aria-label": "選択済み", children: i.map((e) => /* @__PURE__ */ a(
-      $,
+    n.length > 0 && /* @__PURE__ */ r("div", { ref: d, className: "flex flex-wrap gap-1.5", role: "group", "aria-label": "選択済み", children: n.map((e, a) => /* @__PURE__ */ r(
+      D,
       {
         removable: !0,
-        onRemove: () => u(e.value),
-        disabled: m,
+        removeLabel: `${e.label}を削除`,
+        onRemove: () => {
+          o.current = { value: e.value, index: a }, C(e.value);
+        },
+        disabled: v,
         children: e.label
       },
       e.value
@@ -90,5 +121,5 @@ function W({
   ] });
 }
 export {
-  W as MultiSelect
+  le as MultiSelect
 };

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

@@ -1,13 +1,14 @@
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
 import "react";
-import d from "iconsax-reactjs/dist/esm/Notification.js";
-import h from "iconsax-reactjs/dist/esm/ArrowRight2.js";
-import { Badge as m } from "../foundations/badge.js";
+import h from "iconsax-reactjs/dist/esm/Notification.js";
+import m from "iconsax-reactjs/dist/esm/ArrowRight2.js";
+import { Badge as p } from "../foundations/badge.js";
 import { cn as l } from "../../lib/utils.js";
-function g({
+function u({
   notifications: r,
   variant: n = "vertical",
   emptyMessage: c = "新着のお知らせはありません",
+  linkComponent: d,
   className: i,
   ...t
 }) {
@@ -21,7 +22,7 @@ function g({
       ),
       ...t,
       children: [
-        /* @__PURE__ */ a(d, { size: 48, className: "text-[var(--Text-Low-Emphasis)]" }),
+        /* @__PURE__ */ a(h, { size: 48, className: "text-[var(--Text-Low-Emphasis)]" }),
         /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: c })
       ]
     }
@@ -32,7 +33,7 @@ function g({
       className: l("w-full divide-y divide-[var(--Border-Low-Emphasis)]", i),
       ...t,
       children: r.map((e) => {
-        const o = e.href ? "a" : "div";
+        const o = e.href ? d ?? "a" : "div";
         return n === "horizontal" ? /* @__PURE__ */ s(
           o,
           {
@@ -41,10 +42,10 @@ function g({
             children: [
               /* @__PURE__ */ a("span", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)] shrink-0 w-[88px]", children: e.date }),
               /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
-                e.isUnread && /* @__PURE__ */ a(m, { variant: "destructive", className: "shrink-0 w-fit", children: "NEW" }),
+                e.isUnread && /* @__PURE__ */ a(p, { variant: "destructive", className: "shrink-0 w-fit", children: "NEW" }),
                 /* @__PURE__ */ a("span", { className: "typo-body-md text-[var(--Text-High-Emphasis)] truncate", children: e.message })
               ] }),
-              /* @__PURE__ */ a(h, { size: 16, className: "text-[var(--Text-Low-Emphasis)] shrink-0 ml-auto" })
+              /* @__PURE__ */ a(m, { size: 16, className: "text-[var(--Text-Low-Emphasis)] shrink-0 ml-auto" })
             ]
           },
           e.id
@@ -68,5 +69,5 @@ function g({
   );
 }
 export {
-  g as NotificationList
+  u as NotificationList
 };