@cakejp/design-system 0.15.0 → 0.17.0

package/dist/types/components/primitives/notification-list.d.ts

@@ -5,7 +5,7 @@
  *
  * ### インポート
  * ```tsx
- * import { NotificationList } from '../../components/primitives/notification-list'
+ * import { NotificationList } from '../../../components/primitives/notification-list'
  * ```
  *
  * ### Props（主要なもの）

package/dist/types/components/primitives/search-panel.d.ts

@@ -6,7 +6,7 @@
  *
  * ### インポート
  * ```tsx
- * import { SearchPanel } from '../../components/primitives/search-panel'
+ * import { SearchPanel } from '../../../components/primitives/search-panel'
  * ```
  *
  * ### Props

package/dist/types/components/primitives/section-nav.d.ts

@@ -43,7 +43,7 @@ export interface SectionNavProps extends React.HTMLAttributes<HTMLElement> {
  *
  * ### インポート
  * ```tsx
- * import { SectionNav } from '../../components/primitives/section-nav'
+ * import { SectionNav } from '../../../components/primitives/section-nav'
  * ```
  *
  * ### 使い方（vertical＝既定）

package/dist/types/components/primitives/side-nav.d.ts

@@ -51,7 +51,7 @@ export interface SideNavProps extends React.HTMLAttributes<HTMLElement> {
  *
  * ### インポート
  * ```tsx
- * import { SideNav } from '../../components/primitives/side-nav'
+ * import { SideNav } from '../../../components/primitives/side-nav'
  * ```
  *
  * ### 使い方

package/dist/types/components/primitives/social-login-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type SocialPlatform } from "../../components/foundations/social-icon";
+import { type SocialPlatform } from "../../../components/foundations/social-icon";
 export type SocialProvider = Extract<SocialPlatform, "line" | "amazon" | "google" | "apple">;
 export interface SocialLoginButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** ソーシャルプロバイダー */

package/dist/types/index.d.ts

@@ -1,5 +1,6 @@
 import "./index.css";
 export { cn } from "./lib/utils";
+export { FOCUS_RING, FOCUS_RING_WITHIN, FOCUS_RING_INSET } from "./lib/focus-ring";
 export { toast } from "sonner";
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/foundations/accordion";
 export { Alert, AlertDescription, AlertTitle } from "./components/foundations/alert";

package/dist/types/lib/field-labelling.d.ts

@@ -0,0 +1,66 @@
+/**
+ * ## フィールドのラベル関連付け（DS 全体の方針 / issue #202）
+ *
+ * Radix ベースのコントロール（Select / Switch / Checkbox / Slider 等）は
+ * `<button>` や `<span role="...">` として描画されるため、**隣に `<Label htmlFor>` を
+ * 置いてもアクセシブルネームにならない**（`<label for>` が名前を与えるのは
+ * labelable な要素だけで、`<button>` は対象外）。
+ *
+ * そこで DS は次の方針を採る:
+ *
+ * 1. フィールドのラッパー（`FormField`）がラベル要素に **id を採番**し、
+ *    その id を context で配下のコントロールへ渡す。
+ * 2. コントロール側は `aria-labelledby` を **既定値として** その id にする。
+ *    利用側が `aria-label` / `aria-labelledby` を明示した場合はそちらを優先する。
+ * 3. ラッパー無しで単体利用するときは、利用側が `aria-label`（日本語）を書く。
+ *
+ * `<label for>` が有効なネイティブ入力（Input / Textarea）は従来どおり
+ * `htmlFor` ↔ `id` の関連付けで足りるため、context の `controlId` を使う。
+ */
+import * as React from "react";
+export interface FieldLabellingValue {
+    /** ラベル要素の id。コントロールの aria-labelledby 既定値になる */
+    labelId: string;
+    /** コントロールに割り当てる id（ネイティブ入力の htmlFor 対応用） */
+    controlId: string;
+    /** 説明文の id。存在するときだけ設定される */
+    descriptionId?: string;
+    /** エラーメッセージの id。存在するときだけ設定される */
+    errorId?: string;
+}
+/**
+ * ラッパー（FormField 等）が配下のコントロールへ id を渡す context。
+ * Provider は利用側で `<FieldLabellingContext.Provider value={...}>` として使う
+ * （このファイルはコンポーネントを export しない = fast refresh の制約に合わせる）。
+ */
+declare const FieldLabellingContext: React.Context<FieldLabellingValue>;
+/** ラッパー内かどうかを問わず使える。ラッパー外では null。 */
+declare function useFieldLabelling(): FieldLabellingValue | null;
+/**
+ * Radix トリガー系コントロール向けの aria 属性を解決する。
+ *
+ * 利用側の明示指定（aria-label / aria-labelledby / id / aria-describedby）を必ず優先し、
+ * 何も指定が無いときだけラッパーの id を当てる。
+ */
+declare function resolveFieldAria(props: {
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}, field: FieldLabellingValue | null): {
+    id?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+};
+/**
+ * ネイティブ入力（Input / Textarea）向け。
+ * 名前は `<label for>` ↔ `id` で付くので、ここでは id と説明の関連付けだけ行う。
+ */
+declare function resolveNativeFieldAria(props: {
+    id?: string;
+    "aria-describedby"?: string;
+}, field: FieldLabellingValue | null): {
+    id?: string;
+    "aria-describedby"?: string;
+};
+export { FieldLabellingContext, useFieldLabelling, resolveFieldAria, resolveNativeFieldAria, };

package/dist/types/lib/focus-ring.d.ts

@@ -0,0 +1,42 @@
+/**
+ * DS 正規のフォーカス可視化（フォーカスリング）。
+ *
+ * 入力系・操作系のコンポーネントは **必ず**このどちらかを適用する。
+ * 意匠は `--Focus-High-Emphasis`（緑）の 3px リング + 同色ボーダーで統一され、
+ * Button / Input / Select / Checkbox / RadioGroup / Switch / Slider /
+ * NumberInput / SearchBar / FileInput すべてが同じ見え方になる。
+ *
+ * ## hover と focus の優先順位
+ * Tailwind v4 の variant 出力順は `focus-within` → `hover` → `focus` →
+ * `focus-visible` の並びで固定されている。つまり
+ *
+ * - `focus-visible:*` は同一プロパティの `hover:*` を**常に上書きする**（後勝ち）
+ * - `focus-within:*` は `hover:*` に**負ける**
+ *
+ * そのため {@link FOCUS_RING_WITHIN} を使う（＝ラッパーが枠を描く）
+ * コンポーネントでは、同じプロパティを触る hover を
+ * `hover:not-focus-within:*` と書いてフォーカス中は hover を抑制すること。
+ * この順序は `__tests__/focus-visible-contract.test.ts` で固定している。
+ */
+/**
+ * 要素自身がフォーカスを受け取るコントロール用（input / button / trigger 等）。
+ *
+ * @example
+ * <input className={cn("border ...", FOCUS_RING)} />
+ */
+export declare const FOCUS_RING = "focus-visible:border-[var(--Focus-High-Emphasis)] focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50";
+/**
+ * ラッパーが枠を描き、内側の要素がフォーカスを受け取る合成コントロール用
+ * （SearchBar の枠、FileInput の label 等）。
+ *
+ * hover で同じプロパティを変える場合は `hover:not-focus-within:*` で書くこと。
+ *
+ * @example
+ * <div className={cn("border hover:not-focus-within:border-x", FOCUS_RING_WITHIN)}>
+ */
+export declare const FOCUS_RING_WITHIN = "focus-within:border-[var(--Focus-High-Emphasis)] focus-within:ring-[3px] focus-within:ring-[var(--Focus-High-Emphasis)]/50";
+/**
+ * `overflow-hidden` なコンテナの内側にある要素用（リングが外にはみ出すと
+ * 切り取られてしまうため内側に描く）。SearchBar の検索ボタン等。
+ */
+export declare const FOCUS_RING_INSET = "focus-visible:ring-[3px] focus-visible:ring-inset focus-visible:ring-[var(--Focus-High-Emphasis)]/50";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cakejp/design-system",
-  "version": "0.15.0",
+  "version": "0.17.0",
   "type": "module",
   "description": "Cake.jp Design System — UI コンポーネント・カラートークン・タイポグラフィ",
   "license": "UNLICENSED",
@@ -80,7 +80,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "build:lib": "vite build --config vite.config.lib.ts && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
+    "build:lib": "vite build --config vite.config.lib.ts && node scripts/append-tailwind-source-manifest.mjs && tsc --project tsconfig.lib.json && tsc-alias --project tsconfig.lib.json",
     "prepack": "npm run build:lib",
     "prepare": "npm run build:lib",
     "postinstall": "node ./bin/init.js postinstall",

package/scripts/codemod/README.md

@@ -9,6 +9,15 @@ node scripts/codemod/v1-to-v2.mjs --dry ./src
 node scripts/codemod/v1-to-v2.mjs ./src
 ```
 
+ここに置いたファイル名がそのまま consumer 側の codemod 名になります（dispatch の
+書き換えは不要）。`template.mjs` と `check-migration.mjs` は一覧から除外されます。
+
+```bash
+npx cakejp-ds codemod              # 使える codemod 名の一覧
+npx cakejp-ds codemod v1-to-v2 --dry ./src
+npx cakejp-ds codemod v1-to-v2 ./src
+```
+
 正規表現ベースのため、必ずコミット済みの利用側で `--dry` を先に実行し、
 適用後は `git diff` と ESLint の `@cakejp/design-system/eslint/deprecated`
 で残件を確認してください。

package/src/components/COMPONENT_LOOKUP.md

@@ -136,7 +136,7 @@
 | OrderSection | `@/components/ec/order-section` | — | 入力済み, 未入力, エラー, 購入確認画面 |
 | OrderSummary | `@/components/ec/order-summary` | — | カート合計, チェックアウト合計, クーポン適用時, 合計のみ |
 | PaymentMethodDisplay, CreditCardIcon | `@/components/ec/payment-method` | — | 登録済み, 未登録, 期限切れ, 対応ブランド一覧, カードブランドアイコン |
-| ProductCard, BookmarkRibbonIcon | `@/components/ec/product-card` | — | ストロベリーショートケーキ 5号（15cm）, お気に入りボタン付き, タグ付き, ランキング, 配送日表示, 規格・仕様キャプション, 横向き, グリッドレイアウト（標準コンテナクエリ）, 割引バッジ, カートボタン付き, ショップ名リンク付き, 最小構成 |
+| ProductCard, BookmarkRibbonIcon | `@/components/ec/product-card` | — | ストロベリーショートケーキ 5号（15cm）, お気に入りボタン付き, タグ付き, ランキング, 配送日表示, 規格・仕様キャプション, 横向き, グリッドレイアウト（標準コンテナクエリ）, 割引バッジ, カートボタン付き, ショップ名リンク付き, 最小構成, 回帰: 列はみ出し / 価格の縦位置揃え (#210) |
 | ProductCarousel | `@/components/ec/product-carousel` | — | Default, WithRanking, LargeCards, WithSectionImage, WithDescription, WithCartButton |
 | ProductCTA | `@/components/ec/product-cta` | — | カートに追加, タイムセール中, 完売, 全バリエーション |
 | ProductDetailBar | `@/components/ec/product-detail-bar` | — | — |

package/src/preset-standalone.css

@@ -480,3 +480,18 @@
   height: max(100%, 2.75rem);
   transform: translate(-50%, -50%);
 }
+
+/* --- Base layer（ルート地色 / #208） ---
+ * Tailwind を使わない consumer でも、html を透明のままにしない。
+ * 透明だとダークモード設定のブラウザでキャンバス既定色（黒）が透け、
+ * ページ全体が真っ黒に見える。preset.css の @layer base と同じ宣言。
+ * 背景を body ではなく html にだけ置く理由も preset.css 側のコメント参照。
+ * @layer に入れているのは、consumer 側の非レイヤー CSS が常に勝つようにするため。 */
+@layer base {
+  html {
+    background-color: var(--background);
+  }
+  body {
+    color: var(--foreground);
+  }
+}

package/src/preset.css

@@ -374,7 +374,21 @@
   * {
     @apply border-border outline-ring/50;
   }
+  /* ルート地色（#208）
+   * html を透明のままにすると、ダークモード設定のブラウザではキャンバス既定色（黒）が
+   * 透けてページ全体が真っ黒になる。面トークンで明示的に確定させる。
+   *
+   * 背景は html にだけ置き、body には置かない。ルート要素に背景があれば
+   * キャンバスへはそこから伝播するので body で塗り直す必要が無く、
+   * ダークの面トークン（--Surface-Primary が半透明の黒）を二重に重ねて
+   * body の高さで濃さが変わる継ぎ目が出るのを避けられる。
+   *
+   * @apply ではなく素の CSS で書くのは、Tailwind を通さない経路
+   * （preset-standalone.css）と同じ宣言を両ファイルで保てるようにするため。 */
+  html {
+    background-color: var(--background);
+  }
   body {
-    @apply bg-background text-foreground;
+    color: var(--foreground);
   }
 }