@cakejp/design-system 0.20.0 → 0.21.0

package/dist/components/foundations/button.js

@@ -1,11 +1,12 @@
-import { jsx as o } from "react/jsx-runtime";
-import "react";
-import { cva as n } from "class-variance-authority";
-import { Slot as s } from "radix-ui";
-import { cn as d } from "../../lib/utils.js";
-import { FOCUS_RING as l } from "../../lib/focus-ring.js";
-const b = n(
-  `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${l} disabled:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import * as h from "react";
+import { cva as y } from "class-variance-authority";
+import { Loader2Icon as B } from "lucide-react";
+import { Slot as p } from "radix-ui";
+import { cn as c } from "../../lib/utils.js";
+import { FOCUS_RING as T } from "../../lib/focus-ring.js";
+const u = y(
+  `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${T} disabled:pointer-events-none aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
   {
     variants: {
       variant: {
@@ -14,7 +15,18 @@ const b = n(
         tertiary: "bg-[var(--Surface-Tertiary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Tertiary-Button)] active:bg-[var(--Active-Tertiary-Button)] disabled:text-[var(--Text-Disable)]",
         destructive: "bg-[var(--Surface-Caution)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Primitive-Sun-900)] active:bg-[var(--Primitive-Sun-900)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
         ghost: "text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Text-Button)] active:bg-[var(--Active-Text-Button)] disabled:text-[var(--Text-Disable)]",
-        link: "text-[var(--Brand-Cake-Orange)] underline-offset-4 hover:underline disabled:text-[var(--Text-Disable)]",
+        /**
+         * outline — 白地 + 黒系の 1px 枠。ブランド色を使わない「準主役」の前進アクション
+         * （一覧・カードで繰り返す操作、「一覧を見る」等の移動ボタン）。
+         * hover / active は ghost と同じ薄い下地（Hover-Text-Button / Active-Text-Button）。
+         * 枠は常時 Border-High-Emphasis（hover でも変えない）。disabled は枠・文字とも薄くする。
+         */
+        outline: "border border-[var(--Border-High-Emphasis)] bg-[var(--Surface-Primary)] text-[var(--Text-High-Emphasis)] hover:bg-[var(--Hover-Text-Button)] active:bg-[var(--Active-Text-Button)] disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Primary)] disabled:text-[var(--Text-Disable)]",
+        /**
+         * link — 補助リンク（「もっと見る」「利用規約を見る」等）。ブランド色を使わず、
+         * 控えめなグレー（Text-Medium-Emphasis）+ 常時下線。hover で Text-High-Emphasis に濃くする。
+         */
+        link: "text-[var(--Text-Medium-Emphasis)] underline underline-offset-4 hover:text-[var(--Text-High-Emphasis)] disabled:text-[var(--Text-Disable)]",
         /**
          * inverse — 暗背景の上で使う primary CTA。
          * 白背景 + accent text (Brand Cake Orange)。
@@ -79,27 +91,134 @@ const b = n(
       size: "default"
     }
   }
-);
-function m({
-  className: a,
-  variant: e = "default",
-  size: r = "default",
-  asChild: t = !1,
-  ...i
+), P = "relative [-webkit-text-fill-color:transparent] [&>*:not([data-slot=button-spinner])]:opacity-0 no-underline forced-colors:[forced-color-adjust:none] forced-colors:[color:ButtonText]! forced-colors:[border-color:ButtonText]!", k = {
+  default: "forced-colors:[background-color:ButtonFace]!",
+  secondary: "forced-colors:[background-color:ButtonFace]!",
+  tertiary: "forced-colors:[background-color:ButtonFace]!",
+  destructive: "forced-colors:[background-color:ButtonFace]!",
+  inverse: "forced-colors:[background-color:ButtonFace]!",
+  outline: "forced-colors:[background-color:ButtonFace]!",
+  ghost: "forced-colors:[background-color:transparent]!",
+  link: "forced-colors:[background-color:transparent]!",
+  "ghost-inverse": "forced-colors:[background-color:transparent]!",
+  overlay: "forced-colors:[background-color:color-mix(in_srgb,Canvas_80%,transparent)]! forced-colors:shadow-none"
+};
+function n(e) {
+  e.preventDefault(), e.stopPropagation();
+}
+function S() {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return !1;
+  }
+}
+function C(e) {
+  if (!e?.id) return;
+  e.ownerDocument.querySelectorAll(`[id="${e.id.replace(/["\\]/g, "\\$&")}"]`).length > 1 && console.warn(
+    `[Button] loading の読み上げ文言の id「${e.id}」が重複しています。同じ aria-labelledby を複数のボタンで共有して loading にする場合は、各ボタンに id を付けてください。`
+  );
+}
+function D(e, r) {
+  const t = e["aria-labelledby"]?.trim();
+  if (t) {
+    const s = `${e.id ?? t.split(/\s+/).join("-")}-loading-label`;
+    return { labelId: s, attrs: { "aria-labelledby": `${t} ${s}` } };
+  }
+  const a = e["aria-label"];
+  return a && (typeof r == "string" || typeof r == "number") ? { attrs: { "aria-label": `${a} ${r}` } } : { attrs: {} };
+}
+function W({
+  className: e,
+  variant: r = "default",
+  size: t = "default",
+  asChild: a = !1,
+  loading: s = !1,
+  loadingLabel: o = "処理中",
+  ...b
 }) {
-  const v = t ? s.Root : "button";
-  return /* @__PURE__ */ o(
-    v,
+  const m = a ? p.Root : "button";
+  if (!s)
+    return /* @__PURE__ */ i(
+      m,
+      {
+        "data-slot": "button",
+        "data-variant": r,
+        "data-size": t,
+        className: c(u({ variant: r, size: t, className: e })),
+        ...b
+      }
+    );
+  const { children: l, ...d } = b;
+  if (a) {
+    const x = h.isValidElement(l) ? h.cloneElement(l, {
+      "aria-disabled": !0,
+      tabIndex: -1,
+      onClick: n,
+      onClickCapture: n,
+      onAuxClickCapture: n
+    }) : l;
+    return /* @__PURE__ */ i(
+      p.Root,
+      {
+        "data-slot": "button",
+        "data-variant": r,
+        "data-size": t,
+        className: c(u({ variant: r, size: t, className: e })),
+        ...d,
+        onClick: void 0,
+        onClickCapture: void 0,
+        "aria-busy": "true",
+        children: x
+      }
+    );
+  }
+  const g = o != null && o !== !1 && o !== "", v = g ? D(d, o) : { attrs: {} };
+  return /* @__PURE__ */ f(
+    "button",
     {
       "data-slot": "button",
-      "data-variant": e,
-      "data-size": r,
-      className: d(b({ variant: e, size: r, className: a })),
-      ...i
+      "data-variant": r,
+      "data-size": t,
+      className: c(
+        u({
+          variant: r,
+          size: t,
+          className: c(P, k[r ?? "default"], e)
+        })
+      ),
+      ...d,
+      ...v.attrs,
+      "aria-busy": "true",
+      "aria-disabled": "true",
+      onClickCapture: n,
+      onClick: n,
+      children: [
+        l,
+        g ? /* @__PURE__ */ i(
+          "span",
+          {
+            id: v.labelId,
+            ref: v.labelId && !d.id && S() ? C : void 0,
+            "data-slot": "button-loading-label",
+            className: "sr-only",
+            children: o
+          }
+        ) : null,
+        /* @__PURE__ */ i(
+          "span",
+          {
+            "data-slot": "button-spinner",
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            children: /* @__PURE__ */ i(B, { className: "animate-spin motion-reduce:animate-none" })
+          }
+        )
+      ]
     }
   );
 }
 export {
-  m as Button,
-  b as buttonVariants
+  W as Button,
+  u as buttonVariants
 };

package/dist/components/foundations/calendar.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import * as m from "react";
-import { ChevronLeftIcon as y, ChevronRightIcon as x, ChevronDownIcon as h } from "lucide-react";
-import { getDefaultClassNames as f, DayPicker as w } from "react-day-picker";
+import { ChevronLeftIcon as h, ChevronRightIcon as x, ChevronDownIcon as y } from "lucide-react";
+import { getDefaultClassNames as p, DayPicker as _ } from "react-day-picker";
 import { cn as e } from "../../lib/utils.js";
-import { buttonVariants as p, Button as _ } from "./button.js";
-function j({
+import { buttonVariants as f, Button as v } from "./button.js";
+function R({
   className: c,
   classNames: i,
   showOutsideDays: r = !0,
@@ -15,9 +15,9 @@ function j({
   components: b,
   ...g
 }) {
-  const t = f();
-  return /* @__PURE__ */ n(
-    w,
+  const t = p();
+  return /* @__PURE__ */ o(
+    _,
     {
       showOutsideDays: r,
       className: e(
@@ -43,12 +43,12 @@ function j({
           t.nav
         ),
         button_previous: e(
-          p({ variant: l }),
+          f({ variant: l }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           t.button_previous
         ),
         button_next: e(
-          p({ variant: l }),
+          f({ variant: l }),
           "size-(--cell-size) p-0 select-none aria-disabled:opacity-50",
           t.button_next
         ),
@@ -61,7 +61,9 @@ function j({
           t.dropdowns
         ),
         dropdown_root: e(
-          "relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50",
+          "relative rounded-md border border-[var(--Border-Control,var(--input))] shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))]",
+          // forced-colors では ring（box-shadow）が消える。中の select は透明なので、枠のほうに輪郭線を出す
+          "forced-colors:has-focus:outline-solid forced-colors:has-focus:outline-2 forced-colors:has-focus:outline-offset-2 forced-colors:has-focus:outline-[Highlight]",
           t.dropdown_root
         ),
         dropdown: e(
@@ -115,41 +117,41 @@ function j({
         ...i
       },
       components: {
-        Root: ({ className: a, rootRef: d, ...o }) => /* @__PURE__ */ n(
+        Root: ({ className: a, rootRef: n, ...d }) => /* @__PURE__ */ o(
           "div",
           {
             "data-slot": "calendar",
-            ref: d,
+            ref: n,
             className: e(a),
-            ...o
+            ...d
           }
         ),
-        Chevron: ({ className: a, orientation: d, ...o }) => d === "left" ? /* @__PURE__ */ n(y, { className: e("size-4", a), ...o }) : d === "right" ? /* @__PURE__ */ n(
+        Chevron: ({ className: a, orientation: n, ...d }) => n === "left" ? /* @__PURE__ */ o(h, { className: e("size-4", a), ...d }) : n === "right" ? /* @__PURE__ */ o(
           x,
           {
             className: e("size-4", a),
-            ...o
+            ...d
           }
-        ) : /* @__PURE__ */ n(h, { className: e("size-4", a), ...o }),
-        DayButton: v,
-        WeekNumber: ({ children: a, ...d }) => /* @__PURE__ */ n("td", { ...d, children: /* @__PURE__ */ n("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: a }) }),
+        ) : /* @__PURE__ */ o(y, { className: e("size-4", a), ...d }),
+        DayButton: w,
+        WeekNumber: ({ children: a, ...n }) => /* @__PURE__ */ o("td", { ...n, children: /* @__PURE__ */ o("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: a }) }),
         ...b
       },
       ...g
     }
   );
 }
-function v({
+function w({
   className: c,
   day: i,
   modifiers: r,
   ...s
 }) {
-  const l = f(), u = m.useRef(null);
+  const l = p(), u = m.useRef(null);
   return m.useEffect(() => {
     r.focused && u.current?.focus();
-  }, [r.focused]), /* @__PURE__ */ n(
-    _,
+  }, [r.focused]), /* @__PURE__ */ o(
+    v,
     {
       ref: u,
       variant: "ghost",
@@ -160,7 +162,7 @@ function v({
       "data-range-end": r.range_end,
       "data-range-middle": r.range_middle,
       className: e(
-        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 typo-body-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-[var(--Surface-Accent-Primary-Light)] data-[range-middle=true]:text-[var(--Text-High-Emphasis)] data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:typo-body-xs [&>span]:opacity-70",
+        "flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 typo-body-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-[3px] group-data-[focused=true]/day:ring-[color:var(--Focus-Ring-Control,color-mix(in_oklab,var(--ring)_50%,transparent))] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-[var(--Surface-Accent-Primary-Light)] data-[range-middle=true]:text-[var(--Text-High-Emphasis)] data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground [&>span]:typo-body-xs [&>span]:opacity-70",
         l.day,
         c
       ),
@@ -169,6 +171,6 @@ function v({
   );
 }
 export {
-  j as Calendar,
-  v as CalendarDayButton
+  R as Calendar,
+  w as CalendarDayButton
 };

package/dist/components/foundations/checkbox-card.js

@@ -1,104 +1,128 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import "react";
-import m from "iconsax-reactjs/dist/esm/TickSquare.js";
-import { Checkbox as i } from "radix-ui";
-import { cn as e } from "../../lib/utils.js";
-import { FOCUS_RING as n } from "../../lib/focus-ring.js";
-function f({
-  className: d,
-  ...a
+"use client";
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+import * as x from "react";
+import M from "iconsax-reactjs/dist/esm/TickSquare.js";
+import { Checkbox as f } from "radix-ui";
+import { cn as a } from "../../lib/utils.js";
+import { FOCUS_RING as j } from "../../lib/focus-ring.js";
+import { mergeIdRefs as T } from "../../lib/field-labelling.js";
+function A({
+  className: c,
+  ...r
 }) {
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ e(
     "div",
     {
       "data-slot": "checkbox-card-group",
-      className: e("grid gap-3", d),
-      ...a
+      className: a("grid gap-3", c),
+      ...r
     }
   );
 }
-function g({
-  className: d,
-  children: a,
-  description: c,
-  expandedContent: t,
-  badge: o,
-  ...l
+function G({
+  className: c,
+  children: r,
+  description: s,
+  expandedContent: o,
+  badge: d,
+  checked: i,
+  defaultChecked: n,
+  onCheckedChange: g,
+  "aria-label": b,
+  "aria-labelledby": k,
+  "aria-describedby": y,
+  ...S
 }) {
-  return /* @__PURE__ */ s(
-    i.Root,
+  const l = x.useId(), m = `${l}-label`, p = `${l}-description`, h = `${l}-expanded`, [N, B] = x.useState(n === !0), E = (i !== void 0 ? i : N) === !0, u = !!(r || d), C = k ?? (b === void 0 && u ? m : void 0), I = T(
+    // ラベルが無いカードは名前が内容（= 説明）になるので、説明を重ねて 2 回読ませない
+    s && u ? p : void 0,
+    o && E ? h : void 0,
+    y
+  );
+  return /* @__PURE__ */ t(
+    f.Root,
     {
       "data-slot": "checkbox-card-item",
-      className: e(
+      checked: i,
+      defaultChecked: n,
+      onCheckedChange: (v) => {
+        B(v === !0), g?.(v);
+      },
+      "aria-label": b,
+      "aria-labelledby": C,
+      "aria-describedby": I,
+      className: a(
         // 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",
-        t ? "flex-col items-stretch" : "items-center",
+        "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",
+        o ? "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)]",
         // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング）。以前はオレンジの
         // ring-2 で選択状態と紛らわしかったため統一した。
-        n,
+        j,
         "aria-invalid:border-[var(--Border-Caution)]",
         "disabled:cursor-not-allowed disabled:border-[var(--Border-Medium-Emphasis)] disabled:bg-[var(--Surface-Secondary)] disabled:hover:border-[var(--Border-Medium-Emphasis)] disabled:hover:bg-[var(--Surface-Secondary)]",
-        d
+        c
       ),
-      ...l,
+      ...S,
       children: [
-        /* @__PURE__ */ s("span", { className: e("flex items-center gap-2", t && "w-full"), children: [
-          /* @__PURE__ */ r(
+        /* @__PURE__ */ t("span", { className: a("flex items-center gap-2", o && "w-full"), children: [
+          /* @__PURE__ */ e(
             "span",
             {
               "data-slot": "checkbox-card-icon",
-              className: e(
+              className: a(
                 // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
-                "flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] transition-colors",
+                "flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] transition-colors",
                 "group-data-[state=checked]:border-transparent group-data-[state=checked]:bg-transparent",
                 "group-data-[disabled]:border-[var(--Border-Medium-Emphasis)] group-data-[disabled]:bg-[var(--Surface-Secondary)]"
               ),
-              children: /* @__PURE__ */ r(
-                i.Indicator,
+              children: /* @__PURE__ */ e(
+                f.Indicator,
                 {
                   "data-slot": "checkbox-card-indicator",
                   className: "flex items-center justify-center",
-                  children: /* @__PURE__ */ r(m, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" })
+                  children: /* @__PURE__ */ e(M, { size: 24, variant: "Bold", className: "text-[var(--Object-Accent-Primary)]" })
                 }
               )
             }
           ),
-          (a || c || o) && /* @__PURE__ */ s("span", { className: "flex min-w-0 flex-1 flex-col", children: [
-            (a || o) && /* @__PURE__ */ s("span", { className: "flex items-center gap-1.5", children: [
-              a && /* @__PURE__ */ r(
+          (r || s || d) && /* @__PURE__ */ t("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+            (r || d) && /* @__PURE__ */ t("span", { id: m, className: "flex items-center gap-1.5", children: [
+              r && /* @__PURE__ */ e(
                 "span",
                 {
                   "data-slot": "checkbox-card-label",
-                  className: e(
+                  className: a(
                     "typo-body-lg text-[var(--Text-High-Emphasis)]",
                     "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
                   ),
-                  children: a
+                  children: r
                 }
               ),
-              o && /* @__PURE__ */ r("span", { "data-slot": "checkbox-card-badge", children: o })
+              d && /* @__PURE__ */ e("span", { "data-slot": "checkbox-card-badge", children: d })
             ] }),
-            c && /* @__PURE__ */ r(
+            s && /* @__PURE__ */ e(
               "span",
               {
+                id: p,
                 "data-slot": "checkbox-card-description",
-                className: e(
+                className: a(
                   "typo-body-sm text-[var(--Text-Medium-Emphasis)]",
                   "group-data-[disabled]:text-[var(--Text-Low-Emphasis)]"
                 ),
-                children: c
+                children: s
               }
             )
           ] })
         ] }),
-        t && /* @__PURE__ */ r(
+        o && /* @__PURE__ */ e(
           "span",
           {
+            id: h,
             "data-slot": "checkbox-card-expanded",
             className: "hidden border-t border-[var(--Border-Medium-Emphasis)] pt-3 group-data-[state=checked]:block",
-            children: t
+            children: o
           }
         )
       ]
@@ -106,6 +130,6 @@ function g({
   );
 }
 export {
-  f as CheckboxCardGroup,
-  g as CheckboxCardItem
+  A as CheckboxCardGroup,
+  G as CheckboxCardItem
 };

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

@@ -1,13 +1,14 @@
 "use client";
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
 import * as p from "react";
 import x from "iconsax-reactjs/dist/esm/TickSquare.js";
-import { Checkbox as l } from "radix-ui";
-import { cn as s } from "../../lib/utils.js";
+import { Checkbox as c } from "radix-ui";
+import { cn as o } from "../../lib/utils.js";
+import { FOCUS_RING as u } from "../../lib/focus-ring.js";
 import { Label as b } from "./label.js";
-function g({
-  label: o,
-  required: c,
+function k({
+  label: i,
+  required: l,
   helpText: r,
   error: a,
   columns: t = 2,
@@ -15,51 +16,53 @@ function g({
   className: n
 }) {
   const m = t === 1 ? "grid-cols-1" : t === 3 ? "grid-cols-3" : "grid-cols-2";
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "fieldset",
     {
       "data-slot": "checkbox-group",
-      className: s("flex flex-col gap-3", n),
+      className: o("flex flex-col gap-3", n),
       "aria-invalid": !!a || void 0,
       children: [
-        /* @__PURE__ */ i("legend", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ e("span", { className: "typo-label-md", children: o }),
-          c && /* @__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: "必須" })
+        /* @__PURE__ */ s("legend", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ e("span", { className: "typo-label-md", children: i }),
+          l && /* @__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: "必須" })
         ] }),
-        /* @__PURE__ */ e("div", { className: s("grid gap-2", m), children: d }),
+        /* @__PURE__ */ e("div", { className: o("grid gap-2", m), children: d }),
         r && !a && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Low-Emphasis)]", children: r }),
         a && /* @__PURE__ */ e("p", { className: "typo-body-xs text-[var(--Text-Caution)]", role: "alert", children: a })
       ]
     }
   );
 }
-function N({
-  className: o,
-  children: c,
+function C({
+  className: i,
+  children: l,
   description: r,
   ...a
 }) {
   const t = p.useId();
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ s(
     "div",
     {
       "data-slot": "checkbox-group-item",
-      className: s("flex items-start gap-2", o),
+      className: o("flex items-start gap-2", i),
       children: [
         /* @__PURE__ */ e(
-          l.Root,
+          c.Root,
           {
             id: t,
-            className: s(
+            className: o(
               // lint-scratch-allow: rounded-[5px] は Figma チェックボックス固有値（トークン外）
-              "peer flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] transition-colors outline-none mt-0.5",
+              "peer flex size-5 shrink-0 items-center justify-center rounded-[5px] border-2 border-[var(--Border-Control,var(--Border-Medium-Emphasis))] bg-[var(--Surface-Primary)] transition-colors outline-none mt-0.5",
               "data-[state=checked]:border-transparent data-[state=checked]:bg-transparent",
-              "focus-visible:border-[var(--Object-Accent-Primary)] focus-visible:ring-2 focus-visible:ring-[var(--Object-Accent-Primary)]/20",
+              // フォーカス意匠は DS 共通（FOCUS_RING = 緑リング。rules.json A005）。
+              // 以前はオレンジの ring-2 で、選択状態の色と紛らわしかった（Checkbox と揃える）。
+              u,
               "aria-invalid:border-[var(--Border-Caution)]",
               "disabled:opacity-50 disabled:cursor-not-allowed"
             ),
             ...a,
-            children: /* @__PURE__ */ e(l.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+            children: /* @__PURE__ */ e(c.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
               x,
               {
                 size: 24,
@@ -69,16 +72,16 @@ function N({
             ) })
           }
         ),
-        /* @__PURE__ */ i("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-0.5", children: [
           /* @__PURE__ */ e(
             b,
             {
               htmlFor: t,
-              className: s(
+              className: o(
                 "typo-body-md cursor-pointer",
                 "peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"
               ),
-              children: c
+              children: l
             }
           ),
           r && /* @__PURE__ */ e("span", { className: "typo-body-xs text-[var(--Text-Medium-Emphasis)]", children: r })
@@ -88,6 +91,6 @@ function N({
   );
 }
 export {
-  g as CheckboxGroup,
-  N as CheckboxGroupItem
+  k as CheckboxGroup,
+  C as CheckboxGroupItem
 };