@cakejp/design-system 0.20.1 → 0.21.0

package/dist/components/foundations/popover.js

@@ -2,7 +2,7 @@
 import { jsx as t } from "react/jsx-runtime";
 import "react";
 import { Popover as e } from "radix-ui";
-import { cn as d } from "../../lib/utils.js";
+import { cn as i } from "../../lib/utils.js";
 function l({
   ...o
 }) {
@@ -13,7 +13,7 @@ function c({
 }) {
   return /* @__PURE__ */ t(e.Trigger, { "data-slot": "popover-trigger", ...o });
 }
-function f({
+function v({
   className: o,
   align: r = "center",
   sideOffset: a = 4,
@@ -25,22 +25,22 @@ function f({
       "data-slot": "popover-content",
       align: r,
       sideOffset: a,
-      className: d(
-        "z-[var(--Z-Popover)] w-72 origin-(--radix-popover-content-transform-origin) rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+      className: i(
+        "z-[var(--Z-Popover)] w-72 max-w-(--radix-popover-content-available-width) origin-(--radix-popover-content-transform-origin) rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         o
       ),
       ...n
     }
   ) });
 }
-function u({
+function f({
   ...o
 }) {
   return /* @__PURE__ */ t(e.Anchor, { "data-slot": "popover-anchor", ...o });
 }
 export {
   l as Popover,
-  u as PopoverAnchor,
-  f as PopoverContent,
+  f as PopoverAnchor,
+  v as PopoverContent,
   c as PopoverTrigger
 };

package/dist/components/foundations/progress.js

@@ -1,28 +1,32 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import "react";
 import { Progress as l } from "radix-ui";
 import { cn as t } from "../../lib/utils.js";
 function f({
-  className: o,
+  className: a,
   value: e,
   ...r
 }) {
   const s = r["aria-label"] !== void 0 || r["aria-labelledby"] !== void 0;
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ o(
     l.Root,
     {
       "data-slot": "progress",
       "aria-label": s ? void 0 : "進捗",
       className: t(
         "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
-        o
+        // forced-colors（Windows ハイコントラスト）ではレールも帯も Canvas に置き換わり進み具合が
+        // 見えなかった。レールは輪郭線（レイアウトに影響しない outline）、帯は OS の選択色で示す。
+        // 通常表示は不変
+        "forced-colors:outline forced-colors:outline-1 forced-colors:outline-[CanvasText]",
+        a
       ),
       ...r,
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ o(
         l.Indicator,
         {
           "data-slot": "progress-indicator",
-          className: "h-full w-full flex-1 bg-primary transition-all",
+          className: "h-full w-full flex-1 bg-primary transition-all forced-colors:bg-[Highlight]",
           style: { transform: `translateX(-${100 - (e || 0)}%)` }
         }
       )

package/dist/components/foundations/radio-group.js

@@ -41,10 +41,13 @@ function y({
         // レイアウト・サイズ・角丸・typo・focus リングはここから供給され、Chip 意匠変更に自動追従する。
         u({ variant: "filled", size: "md", shape: "pill" }),
         "cursor-pointer outline-none",
-        // checked = Chip の accent（selected）意匠。Chip accent と同一トークンを参照し、
-        // 静止=薄オレンジ / hover=ベタ塗りオレンジ（Text-on-Inverse）まで一致させる。
+        // checked = 入力部品のオン状態なのでブランド色のまま（brandColorUsage の allowed）。
+        // Chip の selected はグレー地 + 黒系の枠に変わったため、見た目は Chip と別（Chip の accent と同一トークン）。
         "data-[state=checked]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Brand-Cake-Orange)]",
         "data-[state=checked]:hover:bg-[var(--Surface-Accent-Primary)] data-[state=checked]:hover:text-[var(--Text-on-Inverse)]",
+        // forced-colors（Windows ハイコントラスト）では薄オレンジ地が Canvas に置き換わり、未選択と
+        // 見分けがつかないため、選択中だけ OS の選択色で示す（Chip の selected と同じ。通常表示は不変）
+        "forced-colors:data-[state=checked]:bg-[Highlight] forced-colors:data-[state=checked]:text-[HighlightText]",
         // form 固有の状態（chipVariants に無い分のみ compose）。disabled の配色は chipVariants filled が担う。
         "aria-invalid:border aria-invalid:border-[var(--Border-Caution)]",
         "disabled:cursor-not-allowed",
@@ -59,7 +62,7 @@ function y({
       "data-slot": "radio-group-item",
       className: e(
         // lint-scratch-allow: p-[15px] は border-2 を含めた見た目余白を Figma に合わせる補正値
-        "group flex cursor-pointer gap-2 rounded-lg border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-[15px] text-left outline-none transition-colors",
+        "group flex cursor-pointer gap-2 rounded-lg border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] p-[15px] text-left outline-none transition-colors",
         d ? "flex-col items-stretch" : "items-center",
         "hover:border-[var(--Text-High-Emphasis)] hover:bg-[var(--Surface-Secondary)]",
         "data-[state=checked]:border-[var(--Object-Accent-Primary)] data-[state=checked]:bg-[var(--Surface-Primary)]",

package/dist/components/foundations/responsive-dialog.js

@@ -1,77 +1,95 @@
 "use client";
 import { jsx as t } from "react/jsx-runtime";
-import * as l from "react";
-import { cn as c } from "../../lib/utils.js";
-import { Dialog as D, DialogClose as g, DialogContent as u, DialogDescription as m, DialogFooter as p, DialogHeader as M, DialogTitle as b, DialogTrigger as f } from "./dialog.js";
-import { Drawer as C, DrawerClose as v, DrawerContent as w, DrawerDescription as R, DrawerFooter as d, DrawerHeader as T, DrawerTitle as x, DrawerTrigger as h } from "./drawer.js";
-function s(o = 768) {
-  const [e, n] = l.useState(!1);
-  return l.useEffect(() => {
-    const i = window.matchMedia(`(max-width: ${o - 1}px)`), r = (a) => {
-      n(a.matches);
+import * as s from "react";
+import { cn as d } from "../../lib/utils.js";
+import { DialogClose as w, DialogContent as C, DialogDescription as v, DialogFooter as h, DialogHeader as R, DialogTitle as x, DialogTrigger as I, Dialog as T } from "./dialog.js";
+import { DrawerClose as O, DrawerContent as E, DrawerDescription as F, DrawerFooter as H, DrawerHeader as S, DrawerTitle as y, DrawerTrigger as L, Drawer as P } from "./drawer.js";
+function M(e = 768) {
+  const [o, i] = s.useState(!1);
+  return s.useEffect(() => {
+    const n = window.matchMedia(`(max-width: ${e - 1}px)`), l = (c) => {
+      i(c.matches);
     };
-    return r(i), i.addEventListener("change", r), () => i.removeEventListener("change", r);
-  }, [o]), e;
+    return l(n), n.addEventListener("change", l), () => n.removeEventListener("change", l);
+  }, [e]), o;
 }
-function L({ children: o, ...e }) {
-  return s() ? /* @__PURE__ */ t(C, { ...e, children: o }) : /* @__PURE__ */ t(D, { ...e, children: o });
+const m = s.createContext(null);
+function r() {
+  const e = s.useContext(m), o = M();
+  return e?.isMobile ?? o;
 }
-function j({
-  className: o,
-  ...e
+function A({ children: e, ...o }) {
+  const i = M(), n = o.open !== void 0, [l, c] = s.useState(!1), f = n ? o.open : l, [p, u] = s.useState(!1), g = s.useRef(!1);
+  s.useEffect(() => {
+    if (g.current)
+      f || u(i);
+    else {
+      const a = typeof window < "u" && typeof window.matchMedia == "function" && window.matchMedia("(max-width: 767px)").matches;
+      u(a), g.current = !0;
+    }
+  }, [f, i]);
+  const D = { ...o, onOpenChange: (a) => {
+    n || (a && u(i), c(a)), o.onOpenChange?.(a);
+  } }, b = p ? /* @__PURE__ */ t(P, { ...D, children: e }) : /* @__PURE__ */ t(T, { ...D, children: e });
+  return /* @__PURE__ */ t(m.Provider, { value: { isMobile: p }, children: b });
+}
+function B({
+  className: e,
+  ...o
 }) {
-  const i = s() ? h : f;
-  return /* @__PURE__ */ t(i, { className: o, ...e });
+  const n = r() ? L : I;
+  return /* @__PURE__ */ t(n, { className: e, ...o });
 }
-function q({
-  className: o,
-  children: e,
+function G({
+  className: e,
+  children: o,
+  size: i,
   ...n
 }) {
-  return s() ? /* @__PURE__ */ t(w, { className: c("px-4 pb-6", o), ...n, children: e }) : /* @__PURE__ */ t(u, { className: o, ...n, children: e });
+  return r() ? /* @__PURE__ */ t(E, { className: d("px-4 pb-6", e), ...n, children: o }) : /* @__PURE__ */ t(C, { className: e, size: i, ...n, children: o });
 }
-function S({
-  className: o,
-  ...e
+function J({
+  className: e,
+  ...o
 }) {
-  const i = s() ? T : M;
-  return /* @__PURE__ */ t(i, { className: o, ...e });
+  const n = r() ? S : R;
+  return /* @__PURE__ */ t(n, { className: e, ...o });
 }
-function $({
-  className: o,
-  ...e
+function K({
+  className: e,
+  ...o
 }) {
-  const i = s() ? d : p;
-  return /* @__PURE__ */ t(i, { className: o, ...e });
+  const n = r() ? H : h;
+  return /* @__PURE__ */ t(n, { className: e, ...o });
 }
-function y({
-  className: o,
-  ...e
+function N({
+  className: e,
+  ...o
 }) {
-  const i = s() ? x : b;
-  return /* @__PURE__ */ t(i, { className: o, ...e });
+  const n = r() ? y : x;
+  return /* @__PURE__ */ t(n, { className: e, ...o });
 }
-function z({
-  className: o,
-  ...e
+function Q({
+  className: e,
+  ...o
 }) {
-  const i = s() ? R : m;
-  return /* @__PURE__ */ t(i, { className: o, ...e });
+  const n = r() ? F : v;
+  return /* @__PURE__ */ t(n, { className: e, ...o });
 }
-function A({
-  ...o
+function U({
+  ...e
 }) {
-  const n = s() ? v : g;
-  return /* @__PURE__ */ t(n, { ...o });
+  const i = r() ? O : w;
+  return /* @__PURE__ */ t(i, { ...e });
 }
 export {
-  L as ResponsiveDialog,
-  A as ResponsiveDialogClose,
-  q as ResponsiveDialogContent,
-  z as ResponsiveDialogDescription,
-  $ as ResponsiveDialogFooter,
-  S as ResponsiveDialogHeader,
-  y as ResponsiveDialogTitle,
-  j as ResponsiveDialogTrigger,
-  s as useIsMobile
+  A as ResponsiveDialog,
+  U as ResponsiveDialogClose,
+  G as ResponsiveDialogContent,
+  Q as ResponsiveDialogDescription,
+  K as ResponsiveDialogFooter,
+  J as ResponsiveDialogHeader,
+  N as ResponsiveDialogTitle,
+  B as ResponsiveDialogTrigger,
+  M as useIsMobile
 };

package/dist/components/foundations/scroll-area.js

@@ -1,30 +1,34 @@
-import { jsxs as s, jsx as l } from "react/jsx-runtime";
+import { jsxs as s, jsx as o } from "react/jsx-runtime";
 import "react";
-import { ScrollArea as o } from "radix-ui";
+import { ScrollArea as l } from "radix-ui";
 import { cn as t } from "../../lib/utils.js";
-function b({
+import { FORCED_COLORS_FOCUS as n } from "../../lib/focus-ring.js";
+function f({
   className: e,
   children: r,
   ...a
 }) {
   return /* @__PURE__ */ s(
-    o.Root,
+    l.Root,
     {
       "data-slot": "scroll-area",
       className: t("relative", e),
       ...a,
       children: [
-        /* @__PURE__ */ l(
-          o.Viewport,
+        /* @__PURE__ */ o(
+          l.Viewport,
           {
             "data-slot": "scroll-area-viewport",
             tabIndex: 0,
-            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            className: t(
+              "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] focus-visible:outline-1",
+              n
+            ),
             children: r
           }
         ),
-        /* @__PURE__ */ l(c, {}),
-        /* @__PURE__ */ l(o.Corner, {})
+        /* @__PURE__ */ o(c, {}),
+        /* @__PURE__ */ o(l.Corner, {})
       ]
     }
   );
@@ -34,8 +38,8 @@ function c({
   orientation: r = "vertical",
   ...a
 }) {
-  return /* @__PURE__ */ l(
-    o.ScrollAreaScrollbar,
+  return /* @__PURE__ */ o(
+    l.ScrollAreaScrollbar,
     {
       "data-slot": "scroll-area-scrollbar",
       orientation: r,
@@ -46,8 +50,8 @@ function c({
         e
       ),
       ...a,
-      children: /* @__PURE__ */ l(
-        o.ScrollAreaThumb,
+      children: /* @__PURE__ */ o(
+        l.ScrollAreaThumb,
         {
           "data-slot": "scroll-area-thumb",
           className: "relative flex-1 rounded-full bg-border"
@@ -57,6 +61,6 @@ function c({
   );
 }
 export {
-  b as ScrollArea,
+  f as ScrollArea,
   c as ScrollBar
 };

package/dist/components/foundations/select.js

@@ -2,15 +2,15 @@ import { jsx as t, jsxs as d } from "react/jsx-runtime";
 import "react";
 import { CheckIcon as c, ChevronDownIcon as i, ChevronUpIcon as u } from "lucide-react";
 import { Select as a } from "radix-ui";
-import { cn as o } from "../../lib/utils.js";
-import { FOCUS_RING as m } from "../../lib/focus-ring.js";
-import { resolveFieldAria as p, useFieldLabelling as f } from "../../lib/field-labelling.js";
-function z({
+import { cn as s } from "../../lib/utils.js";
+import { FOCUS_RING as m, FORCED_COLORS_MENU_ITEM as p } from "../../lib/focus-ring.js";
+import { resolveFieldAria as f, useFieldLabelling as g } from "../../lib/field-labelling.js";
+function _({
   ...e
 }) {
   return /* @__PURE__ */ t(a.Root, { "data-slot": "select", ...e });
 }
-function B({
+function C({
   ...e
 }) {
   return /* @__PURE__ */ t(a.Group, { "data-slot": "select-group", ...e });
@@ -20,19 +20,19 @@ function I({
 }) {
   return /* @__PURE__ */ t(a.Value, { "data-slot": "select-value", ...e });
 }
-function C({
+function B({
   className: e,
   size: r = "default",
-  children: s,
+  children: o,
   ...l
 }) {
-  const n = p(l, f());
+  const n = f(l, g());
   return /* @__PURE__ */ d(
     a.Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": r,
-      className: o(
+      className: s(
         "flex w-full items-center justify-between gap-2 rounded-lg border border-[var(--Border-High-Emphasis)] bg-transparent px-3 py-2 typo-body-md whitespace-nowrap transition-[color,box-shadow,border-color] outline-none hover:border-[var(--Focus-High-Emphasis)] hover:bg-[var(--Surface-Secondary)] disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)] aria-invalid:border-[var(--Border-Caution)] aria-invalid:ring-[var(--Border-Caution)]/20 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
         // フォーカス意匠は DS 共通（FOCUS_RING）。
         m,
@@ -46,16 +46,16 @@ function C({
       ...l,
       ...n,
       children: [
-        s,
+        o,
         /* @__PURE__ */ t(a.Icon, { asChild: !0, children: /* @__PURE__ */ t(i, { className: "size-4 text-[var(--Text-High-Emphasis)]" }) })
       ]
     }
   );
 }
-function _({
+function E({
   className: e,
   children: r,
-  position: s = "item-aligned",
+  position: o = "item-aligned",
   align: l = "center",
   ...n
 }) {
@@ -63,27 +63,31 @@ function _({
     a.Content,
     {
       "data-slot": "select-content",
-      className: o(
+      className: s(
         "relative z-[var(--Z-Popover)] max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-[var(--Border-Medium-Emphasis)] bg-popover text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
-        s === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        o === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        // 画面内に使える幅まで（popper のときだけ Radix が変数を出す）。長い選択肢があると
+        // 一覧が 1 行の長さまで伸び、幅 390px の画面で右端 684px まではみ出していた。
+        // 収まる一覧には効かない（既定の見た目は変わらない）。item-aligned（既定）は Radix が画面内に寄せる。
+        o === "popper" && "max-w-(--radix-select-content-available-width)",
         e
       ),
-      position: s,
+      position: o,
       align: l,
       ...n,
       children: [
-        /* @__PURE__ */ t(g, {}),
+        /* @__PURE__ */ t(v, {}),
         /* @__PURE__ */ t(
           a.Viewport,
           {
-            className: o(
+            className: s(
               "p-1",
-              s === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+              o === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
             ),
             children: r
           }
         ),
-        /* @__PURE__ */ t(v, {})
+        /* @__PURE__ */ t(h, {})
       ]
     }
   ) });
@@ -96,25 +100,26 @@ function j({
     a.Label,
     {
       "data-slot": "select-label",
-      className: o("px-2 py-1.5 typo-body-sm text-muted-foreground", e),
+      className: s("px-2 py-1.5 typo-body-sm text-muted-foreground", e),
       ...r
     }
   );
 }
-function E({
+function T({
   className: e,
   children: r,
-  ...s
+  ...o
 }) {
   return /* @__PURE__ */ d(
     a.Item,
     {
       "data-slot": "select-item",
-      className: o(
-        "relative flex w-full cursor-default items-center gap-2 rounded-md py-2.5 pr-8 pl-3 typo-body-md outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+      className: s(
+        "relative flex w-full cursor-default items-center gap-2 rounded-md py-2.5 pr-8 pl-3 typo-body-md outline-none select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        p,
         e
       ),
-      ...s,
+      ...o,
       children: [
         /* @__PURE__ */ t(
           "span",
@@ -129,7 +134,7 @@ function E({
     }
   );
 }
-function T({
+function D({
   className: e,
   ...r
 }) {
@@ -137,12 +142,12 @@ function T({
     a.Separator,
     {
       "data-slot": "select-separator",
-      className: o("pointer-events-none -mx-1 my-1 h-px bg-border", e),
+      className: s("pointer-events-none -mx-1 my-1 h-px bg-border", e),
       ...r
     }
   );
 }
-function g({
+function v({
   className: e,
   ...r
 }) {
@@ -150,7 +155,7 @@ function g({
     a.ScrollUpButton,
     {
       "data-slot": "select-scroll-up-button",
-      className: o(
+      className: s(
         "flex cursor-default items-center justify-center py-1",
         e
       ),
@@ -159,7 +164,7 @@ function g({
     }
   );
 }
-function v({
+function h({
   className: e,
   ...r
 }) {
@@ -167,7 +172,7 @@ function v({
     a.ScrollDownButton,
     {
       "data-slot": "select-scroll-down-button",
-      className: o(
+      className: s(
         "flex cursor-default items-center justify-center py-1",
         e
       ),
@@ -177,14 +182,14 @@ function v({
   );
 }
 export {
-  z as Select,
-  _ as SelectContent,
-  B as SelectGroup,
-  E as SelectItem,
+  _ as Select,
+  E as SelectContent,
+  C as SelectGroup,
+  T as SelectItem,
   j as SelectLabel,
-  v as SelectScrollDownButton,
-  g as SelectScrollUpButton,
-  T as SelectSeparator,
-  C as SelectTrigger,
+  h as SelectScrollDownButton,
+  v as SelectScrollUpButton,
+  D as SelectSeparator,
+  B as SelectTrigger,
   I as SelectValue
 };