@cakejp/design-system 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -11,6 +11,32 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [0.22.0] - 2026-10-26
+
+### 🎨 Changed
+
+- **ブランドカラーをオレンジ（`#E04B00`）からベリー（`#E5175C`）へ変更**: `--Brand-Cake-Orange` 系・`--Surface/Text/Object/Border-Accent-Primary` 系・Primary/Secondary ボタンの hover/active など、ブランド色を参照する semantic トークンを `--Primitive-Berry-*` 参照に切り替えた（light/dark、`preset-standalone.css`、`tokens.json`）
+  - 変数名（`--Brand-Cake-Orange` など）は据え置き。利用側のコード変更は不要で、バージョンを上げると色が変わる
+  - 旧カラー（オレンジ）は `--Primitive-Orange-*` に元の値のまま残している。`bg-orange-*` などの Tailwind ユーティリティもオレンジのまま
+  - accent-primary の文字・地のコントラストが 4.5:1 を満たすようになったため、コントラスト検査の例外 3 件を削除
+  - 薄いアクセント地（`--Surface-Accent-Primary-Light`）の上の文字を `--Brand-Cake-Orange` から `--Text-Accent-Primary` に変更（Button `secondary`・Pagination の選択中・Chip / Tag の accent・RadioGroup の chip・ToggleGroup・AnniversaryCard）。light は Berry-800（薄地で 4.81:1・白地で 6.48:1）、dark は Berry-600（4.61:1）。`--Text-Accent-Primary` を使う価格などの文字も light では一段濃い赤になる。コントラスト検査の例外は不要になり削除
+
+### 🐛 Fixed
+
+- **Button `secondary` の hover / active の線が太すぎた**（[#300](https://github.com/flashpark/cake-design-system/issues/300)）: 1px の枠線と 2px の outline が同色で重なり約 3px に見えていた。hover / active は 1px の枠線の色替えだけにした（Pagination の選択中も同じ）。フォーカス表示は従来どおり共通のリング
+- **PaginationEllipsis の「その他のページ」が読み上げられなかった**（[#300](https://github.com/flashpark/cake-design-system/issues/300)）: 外側の `aria-hidden` を外し、アイコンだけを読み上げから外した。見た目は変わらない
+
+---
+
+## [0.21.1] - 2026-10-21
+
+### 🐛 Fixed
+
+- **`ContentCarousel` の矢印が、複数枚表示（`itemsPerView`）でも 1 枚ずつしか送らなかった**（[#325](https://github.com/flashpark/cake-design-system/pull/325)）: 見えている枚数を実際の幅から求め、その枚数ずつ送る（PC で 4 枚表示なら 4 枚ずつ）。SP・peek（1 枚表示）は従来どおり 1 枚ずつ。末尾から次へで先頭、先頭から前へで末尾に戻る動きは変えない
+  - `autoPlay` も同じく 1 画面ずつ送る。既存の `itemsPerView` 2 以上の利用箇所は、矢印の送り幅が表示枚数に変わる
+
+---
+
 ## [0.21.0] - 2026-10-15
 
 ### ✨ Added

package/contracts/components.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Component Contracts",
-    "version": "0.21.0",
+    "version": "0.22.0",
     "description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
     "kind": "kind:\"shell\" は複数ページで再利用されるレイアウト枠（AdminShell / WorkspaceShell / MypageShell 等）。無印は部品コンポーネント。固有ページを組むときは該当 shell から始める。src/components/pages/ 配下のストーリーは特定ページ専用・非配布のため contracts の対象外。",
     "naming": "コンポーネント名は**用途ではなく機能**で付ける。用途名（QuantitySelector = カート数量）にすると、同じ機能を別の文脈で探した人が見つけられず二重実装が生まれる（実例: 用途名だったため NumberInput が別途作られ、意匠の違うステッパーが 2 つになった）。「〜Selector」「〜Picker」等の用途接尾辞を付ける前に、その部品が何をするものかで名前が付けられないかを先に検討する。既存名を機能名へ変える場合は deprecatedAliases に旧名を残す。",
@@ -528,7 +528,7 @@
         "variant='tile'（既定）=ラジオ丸+ラベル+補足説明+展開コンテンツのタイル型",
         "⚠️ タイルの枠（border/角丸/余白/選択状態の意匠）は RadioGroupItem 自身が描画する。consumer 側で <div className='border rounded-lg ...'> 等で囲むと枠が二重になる。囲まずにそのまま並べる",
         "ラベルは children で渡す。<RadioGroupItem/> と <Label htmlFor> を兄弟に並べる書き方は誤り（枠の二重化＋ラベル重複を招く）",
-        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariants（filled）を再利用し、選択状態は入力部品のオン状態としてブランド色の薄い地（Chipのaccent意匠と同じトークン: 静止=薄オレンジ/hover=ベタ塗り）で示す。Chip の selected（グレー地 + 黒系の枠）とは別の見た目。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持",
+        "variant='chip'=ラベルを内包したChoice Chip意匠の排他選択（タグ選択・絞り込み等）。ラジオ丸は描画せず、Chip本体と同じchipVariants（filled）を再利用し、選択状態は入力部品のオン状態としてブランド色の薄い地（Chipのaccent意匠と同じトークン: 静止=薄いブランド色/hover=ベタ塗り）で示す。Chip の selected（グレー地 + 黒系の枠）とは別の見た目。description/expandedContentは持たない。Radixのキーボード操作・a11yは維持",
         "tile の未選択の枠は高コントラストのとき --Border-Control（3:1 以上）に切り替わる。枠色は border-[var(--Border-Control,var(--Border-Medium-Emphasis))] の形で書く"
       ]
     },
@@ -631,7 +631,7 @@
         "範囲スライダーの Home / End はフォーカス中のつまみを、そのつまみが動ける範囲の端（隣のつまみ ± minStepsBetweenThumbs × step、無ければ min / max）へ動かす（WAI-ARIA APG Multi-Thumb Slider）。つまみが 1 つのときは Radix の既定のまま",
         "つまみの数は value / defaultValue の配列の長さ。どちらも無いときは Radix の既定値 [min] に合わせて 1 つ",
         "forced-colors（Windows のハイコントラスト）では選択範囲を Highlight、レールを CanvasText の輪郭線（outline）で示す。通常表示は変わらない",
-        "溝は高コントラストのとき --Surface-Control-Track（3:1 以上）に切り替わる。溝の色は bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] の形で書く。高コントラスト時の溝と選択範囲（オレンジ）は明るさが近く、区別は色相が中心。値はつまみの位置で伝わる（つまみは 3:1 を満たす）"
+        "溝は高コントラストのとき --Surface-Control-Track（3:1 以上）に切り替わる。溝の色は bg-[var(--Surface-Control-Track,var(--Surface-Tertiary))] の形で書く。高コントラスト時の溝と選択範囲（ブランド色）は明るさが近く、区別は色相が中心。値はつまみの位置で伝わる（つまみは 3:1 を満たす）"
       ]
     },
     {

package/contracts/composition.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Composition Contracts",
-    "version": "0.21.0",
+    "version": "0.22.0",
     "description": "ページ骨格・視覚階層・余白リズムの機械可読な正本。画面パターンを選んだ後の「実際の組み方」を規定する。ページの外枠（モバイル/デスクトップ/管理）、商品グリッドの列数、余白の4段リズム、Surface のネスト階層、テキスト階層、CTA の優先順位を構造化する。人間向けの解説は guidelines/composition/layout.md・guidelines/composition/hierarchy.md・guidelines/overview.md。",
     "source": "guidelines/composition/layout.md, guidelines/composition/hierarchy.md, guidelines/overview.md, guidelines/components/button.md（CTA 密度ルール）を正本化",
     "roleSeparation": "screen-patterns.json はページ種別（Standard Page / Focused Workspace / ResponsiveDialog / Dialog）を選ぶための契約。composition.json は選んだ後、その骨格をどう組むか（外枠構造・余白リズム・階層）の契約。前者=何を使うか、後者=どう並べるか。",
@@ -142,12 +142,12 @@
       { "role": "meta", "typo": "typo-body-sm", "color": "--Text-Low-Emphasis", "usage": "メタ情報・タイムスタンプ" },
       { "role": "smallest-label", "typo": "typo-label-xs", "color": "--Text-Low-Emphasis" }
     ],
-    "accentNote": "価格などの最強調は typo-label-lg + --Text-Accent-Primary（オレンジ）。強調は色ではなく typo 系（heading/label）で表現し、font-bold を足さない。"
+    "accentNote": "価格などの最強調は typo-label-lg + --Text-Accent-Primary（ブランド色＝ベリー）。強調は色ではなく typo 系（heading/label）で表現し、font-bold を足さない。"
   },
   "ctaHierarchy": {
     "description": "Button の variant 優先順位。1ビューポート内での CTA 密度を制御する。⚠️ これは「前進アクションの強さ」の序列であり、画面に並べた2番目のボタンが自動的に secondary になるわけではない。戻る/キャンセル/閉じるのような後退・中立アクションは序列ではなく役割で選ぶ（→ tertiary）。選ぶ前に各項目の appearance（実際の意匠）を必ず確認すること。",
     "priority": [
-      { "variant": "default", "role": "Primary CTA（前進・確定）", "appearance": "ブランドオレンジのベタ塗り", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
+      { "variant": "default", "role": "Primary CTA（前進・確定）", "appearance": "ブランド色（ベリー）のベタ塗り", "note": "1ビューポートに1つまで（唯一の主 CTA）" },
       { "variant": "secondary", "role": "Secondary action（前進系の副 CTA。例: 「サンプルを見る」「詳細を見る」）", "appearance": "⚠️ ブランドアクセント（Surface-Accent-Primary-Light 地 + Brand-Cake-Orange 文字）。Material / Bootstrap / shadcn の secondary（グレー・控えめ）とは別物", "note": "アクセント色が付くため、戻る・キャンセル・閉じる等の後退/中立アクションには使わない（→ tertiary）" },
       { "variant": "tertiary", "role": "Tertiary action / 後退・中立アクション（戻る・キャンセル・閉じる・スキップ・あとで）", "appearance": "ニュートラルなグレー（Surface-Tertiary 地 + Text-High-Emphasis 文字）", "note": "他 DS の secondary に相当する見た目。主 CTA の隣に置く「戻る」「キャンセル」はこれを使う" },
       { "variant": "outline", "role": "準主役の前進アクション（ブランド色を使わない）。「一覧を見る」等の移動ボタン、一覧・カードで1件ごとに繰り返す操作（商品カードの「カートに追加」等）、ブックマーク等の保存トグルのボタン本体", "appearance": "白地（Surface-Primary）+ 1px の黒系の枠（Border-High-Emphasis）+ Text-High-Emphasis 文字。hover / active は薄い下地（Hover-Text-Button / Active-Text-Button）", "note": "ブランド色を使わないので何個並んでもよい。ただし繰り返す操作は見た目が増えるので、ボタンに頼らずカード全体のリンクで足りるときは置かない" },
@@ -155,7 +155,7 @@
       { "variant": "link", "role": "補助リンク（「もっと見る」「利用規約を見る」等のインラインの移動）", "appearance": "ブランド色を使わない。Text-Medium-Emphasis（グレー）+ 常時下線。hover で Text-High-Emphasis", "note": "セクション見出し横の「もっと見る」は SectionHeader が同じ意匠で描く" }
     ],
     "rules": [
-      "default（オレンジ）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
+      "default（ブランド色）の CTA は1ビューポートに1つまで。主アクションを1つに絞る",
       "複数アクションを並べる時は default を tertiary / ghost と組み合わせる",
       "「戻る」「キャンセル」「閉じる」「スキップ」「あとで」は tertiary（グレー）。secondary はアクセント色なので後退アクションに使わない",
       "ブランド色を使わずに「押せるボタン」の存在感がほしい前進アクション（「一覧を見る」、1件ごとに繰り返す操作、保存トグルのボタン本体）は outline。黒ベタ塗りにしない",

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.21.0",
+    "version": "0.22.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [

package/contracts/screen-patterns.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Screen Patterns Contracts",
-    "version": "0.21.0",
+    "version": "0.22.0",
     "description": "CRUD 機能でどの画面パターンを使うかの機械可読な判断基準。5パターンの定義・CRUD 対応・決定木・編集UIの観点比較を構造化する。人間向けの解説は guidelines/foundations/screen-patterns.md。",
     "source": "GitHub issue #37 CRUDの画面設計の型化と基本パターンの整備",
     "relatedContract": "本契約はページ種別の選択（何を使うか）を担う。選んだ後の骨格の組み方（外枠構造・余白リズム・視覚階層）は contracts/composition.json を参照する。",

package/dist/components/ec/anniversary-card.js

@@ -1,64 +1,64 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import "react";
-import u from "iconsax-reactjs/dist/esm/Calendar.js";
-import { cn as v } from "../../lib/utils.js";
-import { Button as i } from "../foundations/button.js";
-function T({
+import y from "iconsax-reactjs/dist/esm/Calendar.js";
+import { cn as u } from "../../lib/utils.js";
+import { Button as s } from "../foundations/button.js";
+function A({
   name: n,
-  relation: d,
+  relation: c,
   type: l,
-  date: c,
+  date: d,
   daysLeft: m,
-  memo: r,
-  editHref: s,
-  onEdit: t,
+  memo: a,
+  editHref: t,
+  onEdit: i,
   linkComponent: p,
   className: o,
   ...x
 }) {
-  const h = s ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e(p ?? "a", { href: s, children: "編集" }) }) : t ? /* @__PURE__ */ e(i, { variant: "tertiary", size: "xs", onClick: t, children: "編集" }) : null;
-  return /* @__PURE__ */ a(
+  const h = t ? /* @__PURE__ */ e(s, { variant: "tertiary", size: "xs", asChild: !0, children: /* @__PURE__ */ e(p ?? "a", { href: t, children: "編集" }) }) : i ? /* @__PURE__ */ e(s, { variant: "tertiary", size: "xs", onClick: i, children: "編集" }) : null;
+  return /* @__PURE__ */ r(
     "div",
     {
       "data-slot": "anniversary-card",
-      className: v(
+      className: u(
         "min-w-[200px] rounded-xl border border-[var(--Border-Medium-Emphasis)] bg-[var(--Surface-Primary)] p-4 space-y-2",
         o
       ),
       ...x,
       children: [
-        /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ e("p", { className: "typo-label-md text-[var(--Text-High-Emphasis)]", children: n }),
-            /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full", children: d })
+            /* @__PURE__ */ e("span", { className: "typo-label-xs text-[var(--Text-Medium-Emphasis)] bg-[var(--Surface-Secondary)] px-2 py-0.5 rounded-full", children: c })
           ] }),
           h
         ] }),
-        /* @__PURE__ */ a("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
+        /* @__PURE__ */ r("p", { className: "typo-body-sm text-[var(--Text-Medium-Emphasis)]", children: [
           l,
           " — ",
-          c
+          d
         ] }),
-        /* @__PURE__ */ a("div", { className: "flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2", children: [
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2 bg-[var(--Surface-Accent-Primary-Light)] rounded-lg px-3 py-2", children: [
           /* @__PURE__ */ e(
-            u,
+            y,
             {
               size: 16,
-              className: "text-[var(--Brand-Cake-Orange)]",
+              className: "text-[var(--Text-Accent-Primary)]",
               "aria-hidden": "true"
             }
           ),
-          /* @__PURE__ */ a("span", { className: "typo-label-md text-[var(--Brand-Cake-Orange)]", children: [
+          /* @__PURE__ */ r("span", { className: "typo-label-md text-[var(--Text-Accent-Primary)]", children: [
             "あと",
             m,
             "日"
           ] })
         ] }),
-        r && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: r })
+        a && /* @__PURE__ */ e("p", { className: "typo-body-sm text-[var(--Text-Low-Emphasis)]", children: a })
       ]
     }
   );
 }
 export {
-  T as AnniversaryCard
+  A as AnniversaryCard
 };

package/dist/components/foundations/button.js

@@ -1,17 +1,17 @@
 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 { Loader2Icon as T } 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";
+import { FOCUS_RING as B } 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`,
+  `inline-flex shrink-0 items-center justify-center gap-2 rounded-lg typo-label-md whitespace-nowrap transition-all outline-none ${B} 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: {
         default: "bg-[var(--Brand-Cake-Orange)] text-[var(--Text-on-Inverse)] hover:bg-[var(--Hover-Primary-Button)] active:bg-[var(--Active-Primary-Button)] disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
-        secondary: "border border-transparent outline outline-2 outline-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)] hover:border-[var(--Hover-Primary-Button)] hover:outline-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:outline-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:outline-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
+        secondary: "border border-transparent bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)] hover:border-[var(--Hover-Primary-Button)] hover:bg-[var(--Hover-Secondary-Button)] hover:text-[var(--Hover-Primary-Button)] active:border-[var(--Active-Primary-Button)] active:bg-[var(--Active-Secondary-Button)] active:text-[var(--Active-Primary-Button)] disabled:border-transparent disabled:bg-[var(--Surface-Tertiary)] disabled:text-[var(--Text-Disable)]",
         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)]",
@@ -29,7 +29,7 @@ const u = y(
         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)。
+         * 白背景 + accent text (Brand-Cake-Orange＝ベリー)。
          * hover で薄く陰り、active で更に。
          */
         inverse: "bg-[var(--Surface-Primary)] text-[var(--Brand-Cake-Orange)] hover:bg-[var(--Primitive-White-alpha-900)] active:bg-[var(--Primitive-White-alpha-800)] disabled:bg-[var(--Primitive-White-alpha-300)] disabled:text-[var(--Text-Disable)]",
@@ -211,7 +211,7 @@ function W({
             "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" })
+            children: /* @__PURE__ */ i(T, { className: "animate-spin motion-reduce:animate-none" })
           }
         )
       ]

package/dist/components/foundations/chip-variants.js

@@ -12,7 +12,7 @@ const t = e(
         ].join(" "),
         /** accent — 薄いブランド色地 + ブランド色文字。Chip の selected は使わなくなった（明示指定の互換のために残す） */
         accent: [
-          "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+          "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
           "hover:bg-[var(--Surface-Accent-Primary)] hover:text-[var(--Text-on-Inverse)]",
           "disabled:bg-[var(--Surface-Secondary)] disabled:text-[var(--Text-Disable)] disabled:hover:bg-[var(--Surface-Secondary)] disabled:hover:text-[var(--Text-Disable)]"
         ].join(" "),

package/dist/components/foundations/pagination.js

@@ -105,12 +105,11 @@ function j({
   return /* @__PURE__ */ e(
     "span",
     {
-      "aria-hidden": !0,
       "data-slot": "pagination-ellipsis",
       className: t("flex size-10 shrink-0 items-center justify-center text-muted-foreground", a),
       ...n,
       children: [
-        /* @__PURE__ */ i(c, { className: "size-4" }),
+        /* @__PURE__ */ i(c, { "aria-hidden": !0, className: "size-4" }),
         /* @__PURE__ */ i("span", { className: "sr-only", children: "その他のページ" })
       ]
     }

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

@@ -43,9 +43,9 @@ function y({
         "cursor-pointer outline-none",
         // 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]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=checked]:text-[var(--Text-Accent-Primary)]",
         "data-[state=checked]:hover:bg-[var(--Surface-Accent-Primary)] data-[state=checked]:hover:text-[var(--Text-on-Inverse)]",
-        // forced-colors（Windows ハイコントラスト）では薄オレンジ地が Canvas に置き換わり、未選択と
+        // 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 が担う。
@@ -67,7 +67,7 @@ function y({
         "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 で checked 状態（同じくオレンジ枠）と紛らわしかったため統一した。
+        // ring-2 で checked 状態（同じくブランド色の枠）と紛らわしかったため統一した。
         m,
         "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)]",

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

@@ -2,8 +2,8 @@
 import { jsx as n } from "react/jsx-runtime";
 import * as s from "react";
 import { cva as l } from "class-variance-authority";
-import { ToggleGroup as d } from "radix-ui";
-import { cn as g } from "../../lib/utils.js";
+import { ToggleGroup as c } from "radix-ui";
+import { cn as d } from "../../lib/utils.js";
 import { FORCED_COLORS_FOCUS_INSET as u } from "../../lib/focus-ring.js";
 const p = l(
   "flex items-center gap-1.5 py-1.5 overflow-x-auto scrollbar-none",
@@ -42,7 +42,7 @@ const p = l(
         default: [
           "bg-[var(--Surface-Tertiary)] text-[var(--Text-Medium-Emphasis)]",
           "hover:bg-[var(--Surface-Tertiary)]/80",
-          "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Brand-Cake-Orange)] data-[state=on]:font-bold",
+          "data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] data-[state=on]:text-[var(--Text-Accent-Primary)] data-[state=on]:font-bold",
           "dark:bg-[var(--Surface-Secondary)] dark:text-[var(--Text-Low-Emphasis)]",
           "dark:data-[state=on]:bg-[var(--Surface-Accent-Primary-Light)] dark:data-[state=on]:text-[var(--Text-Accent-Primary)]"
         ].join(" "),
@@ -63,7 +63,7 @@ const p = l(
       size: "default"
     }
   }
-), c = s.createContext({
+), g = s.createContext({
   variant: "default",
   size: "default"
 });
@@ -76,12 +76,12 @@ function T({
   ...t
 }) {
   return /* @__PURE__ */ n(
-    d.Root,
+    c.Root,
     {
       "data-slot": "toggle-group",
-      className: g(p({ width: o }), a),
+      className: d(p({ width: o }), a),
       ...t,
-      children: /* @__PURE__ */ n(c.Provider, { value: { variant: e, size: r }, children: i })
+      children: /* @__PURE__ */ n(g.Provider, { value: { variant: e, size: r }, children: i })
     }
   );
 }
@@ -92,12 +92,12 @@ function y({
   size: o,
   ...i
 }) {
-  const t = s.useContext(c);
+  const t = s.useContext(g);
   return /* @__PURE__ */ n(
-    d.Item,
+    c.Item,
     {
       "data-slot": "toggle-group-item",
-      className: g(
+      className: d(
         f({
           variant: t.variant || r,
           size: t.size || o

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

@@ -1,156 +1,165 @@
 "use client";
-import { jsxs as w, jsx as a, Fragment as k } from "react/jsx-runtime";
+import { jsxs as w, jsx as n, Fragment as j } from "react/jsx-runtime";
 import * as s from "react";
 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 { cn as f } from "../../lib/utils.js";
 import { usePrefersReducedMotion as F } from "../../lib/use-prefers-reduced-motion.js";
-const M = {
+const W = {
   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 q({
+function _({
   slides: p,
   showDots: E = !0,
-  showArrows: C = !0,
-  autoPlay: f = 0,
-  peek: x = !1,
-  itemsPerView: v = 1,
-  ariaLabel: I = "コンテンツカルーセル",
-  className: N,
-  ...S
+  showArrows: I = !0,
+  autoPlay: m = 0,
+  peek: v = !1,
+  itemsPerView: b = 1,
+  ariaLabel: N = "コンテンツカルーセル",
+  className: S,
+  ...L
 }) {
-  const c = s.useRef(null), [n, z] = s.useState(0), i = F(), t = p.length;
+  const i = s.useRef(null), [c, z] = s.useState(0), l = F(), r = p.length;
   s.useEffect(() => {
-    const r = c.current;
-    if (!r) return;
-    let e = 0;
+    const e = i.current;
+    if (!e) return;
+    let t = 0;
     const o = () => {
-      cancelAnimationFrame(e), e = requestAnimationFrame(() => {
-        const h = Array.from(
-          r.querySelectorAll("[data-slide]")
-        ), 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);
+      cancelAnimationFrame(t), t = requestAnimationFrame(() => {
+        const u = Array.from(
+          e.querySelectorAll("[data-slide]")
+        ), M = u[0]?.offsetLeft ?? 0;
+        let g = 0, y = Number.POSITIVE_INFINITY;
+        u.forEach((k, T) => {
+          const C = Math.abs(k.offsetLeft - M - e.scrollLeft);
+          C < y && (y = C, g = T);
+        }), z(g);
       });
     };
-    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();
+    o(), e.addEventListener("scroll", o, { passive: !0 });
+    const a = typeof ResizeObserver > "u" ? void 0 : new ResizeObserver(o);
+    return a?.observe(e), () => {
+      cancelAnimationFrame(t), e.removeEventListener("scroll", o), a?.disconnect();
     };
-  }, [t]);
+  }, [r]);
   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"
+    (e) => {
+      const t = i.current;
+      if (!t) return;
+      const o = t.children[e], a = t.children[0];
+      o && a && t.scrollTo({
+        left: o.offsetLeft - a.offsetLeft,
+        behavior: l ? "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]);
+    [l]
+  ), h = s.useCallback(() => {
+    const e = i.current, t = e?.children[0], o = e?.children[1];
+    if (!e || !t || !o) return 1;
+    const a = o.offsetLeft - t.offsetLeft;
+    if (a <= 0) return 1;
+    const u = a - t.offsetWidth;
+    return Math.max(1, Math.floor((e.clientWidth + u + 1) / a));
+  }, []), x = s.useCallback(() => {
+    const e = i.current, t = e ? e.scrollLeft >= e.scrollWidth - e.clientWidth - 1 : !1;
+    d(
+      c >= r - 1 || t ? 0 : Math.min(c + h(), r - 1)
+    );
+  }, [c, r, d, h]);
   s.useEffect(() => {
-    if (i || f <= 0 || t <= 1) return;
-    const r = setInterval(m, f);
-    return () => clearInterval(r);
-  }, [f, t, i, m]);
+    if (l || m <= 0 || r <= 1) return;
+    const e = setInterval(x, m);
+    return () => clearInterval(e);
+  }, [m, r, l, x]);
   function A() {
-    d(n <= 0 ? t - 1 : n - 1);
+    d(c <= 0 ? r - 1 : Math.max(0, c - h()));
   }
-  return t === 0 ? null : /* @__PURE__ */ w(
+  return r === 0 ? null : /* @__PURE__ */ w(
     "div",
     {
       "data-slot": "content-carousel",
       role: "region",
       "aria-roledescription": "carousel",
-      "aria-label": I,
-      className: u("@container group/carousel relative", N),
-      ...S,
+      "aria-label": N,
+      className: f("@container group/carousel relative", S),
+      ...L,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ n(
           "div",
           {
-            ref: c,
-            className: u(
+            ref: i,
+            className: f(
               "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"
+              v && "-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",
+              b > 1 && "@[960px]:gap-4"
             ),
             style: { scrollbarWidth: "none", msOverflowStyle: "none" },
-            children: p.map((r, e) => /* @__PURE__ */ a(
+            children: p.map((e, t) => /* @__PURE__ */ n(
               "div",
               {
                 "data-slide": !0,
-                "data-index": e,
+                "data-index": t,
                 role: "group",
                 "aria-roledescription": "スライド",
-                "aria-label": `${e + 1} / ${t}`,
-                className: u(
+                "aria-label": `${t + 1} / ${r}`,
+                className: f(
                   "shrink-0 snap-start",
                   // peek: 端の余白 16px のとき、カード幅は導入前（全幅に置いた場合）と同じ「全幅 - 76px」
-                  x ? "w-[calc(100%-44px)]" : "w-full",
-                  M[v]
+                  v ? "w-[calc(100%-44px)]" : "w-full",
+                  W[b]
                 ),
-                children: r
+                children: e
               },
-              e
+              t
             ))
           }
         ),
-        C && t > 1 && /* @__PURE__ */ w(k, { children: [
-          /* @__PURE__ */ a(
+        I && r > 1 && /* @__PURE__ */ w(j, { children: [
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
               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-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)]" })
+              children: /* @__PURE__ */ n(O, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ n(
             "button",
             {
               type: "button",
-              onClick: m,
+              onClick: x,
               "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-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)]" })
+              children: /* @__PURE__ */ n(R, { size: 20, className: "text-[var(--Object-High-Emphasis)]" })
             }
           )
         ] }),
-        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(
+        E && r > 1 && /* @__PURE__ */ n("div", { className: "mt-2 flex flex-wrap items-center justify-center gap-1.5 @[960px]:hidden", children: p.map((e, t) => /* @__PURE__ */ n(
           "button",
           {
             type: "button",
-            onClick: () => d(e),
-            "aria-label": `スライド ${e + 1}`,
-            className: u(
+            onClick: () => d(t),
+            "aria-label": `スライド ${t + 1}`,
+            className: f(
               // shrink-0 必須: 空要素なので min-content 幅が 0、既定の flex-shrink:1 だとドットが消える
               "size-2 shrink-0 rounded-full transition-colors",
-              e === n ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
+              t === c ? "bg-[var(--Text-High-Emphasis)]" : "bg-[var(--Surface-Tertiary)]"
             )
           },
-          e
+          t
         )) })
       ]
     }
   );
 }
 export {
-  q as ContentCarousel
+  _ as ContentCarousel
 };

package/dist/components/primitives/tag.js

@@ -16,7 +16,7 @@ const x = o(
         info: "bg-[var(--Primitive-Sea-50)] text-[var(--Primitive-Sea-600)] dark:bg-[var(--Primitive-Sea-600)] dark:text-[var(--Primitive-White-alpha-1000)]",
         "info-fill": "bg-[var(--Primitive-Sea-600)] text-[var(--Text-on-Inverse)]",
         success: "bg-[var(--Primitive-Forest-50)] text-[var(--Text-Success)]",
-        accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Brand-Cake-Orange)]",
+        accent: "bg-[var(--Surface-Accent-Primary-Light)] text-[var(--Text-Accent-Primary)]",
         timesale: "bg-[var(--Primitive-Wood-400)] text-[var(--Text-on-Inverse)]",
         berry: "bg-[var(--Primitive-Berry-700)] text-[var(--Text-on-Inverse)]",
         coupon: "bg-[var(--Primitive-Sea-500)] text-[var(--Text-on-Inverse)]"