ksk-design-system 2.6.4 → 2.7.0

package/dist/types/native/components/Alert.d.ts

@@ -1,9 +1,12 @@
 import React from "react";
 export type AlertTone = "info" | "success" | "warning" | "caution";
+export type AlertVariant = "inline-info" | "inline-warning" | "inline-caution";
 export interface AlertProps {
+    /** Borderless inline presentation, matching the Web Alert variants. Overrides tone. */
+    variant?: AlertVariant;
     tone?: AlertTone;
     title?: string;
     description?: string;
     children?: React.ReactNode;
 }
-export declare function Alert({ tone, title, description, children }: AlertProps): React.JSX.Element;
+export declare function Alert({ tone, variant, title, description, children }: AlertProps): React.JSX.Element;

package/dist/types/native/components/StatCard.d.ts

@@ -1,8 +1,15 @@
 import React from "react";
+import { type StyleProp, type ViewStyle, type TextProps } from "react-native";
 export interface StatCardProps {
+    /** Card surface layout, including stretch within an equal-height row. */
+    style?: StyleProp<ViewStyle>;
+    /** Minimum label slot height; grows naturally when Dynamic Type needs more space. */
+    labelMinHeight?: number;
+    /** Reports natural label layout, independently of the label slot minimum. */
+    onLabelLayout?: TextProps["onLayout"];
     label: string;
     value: string | number;
     delta?: string;
     trend?: "up" | "down" | "neutral";
 }
-export declare function StatCard({ label, value, delta, trend }: StatCardProps): React.JSX.Element;
+export declare function StatCard({ label, value, delta, trend, style, labelMinHeight, onLabelLayout }: StatCardProps): React.JSX.Element;

package/dist/types/native/components/index.d.ts

@@ -41,7 +41,7 @@ export { Slider, type SliderProps } from "./Slider";
 export { NumberInput, type NumberInputProps } from "./NumberInput";
 export { FormField, type FormFieldProps } from "./FormField";
 export { FormRoot, FormSection, FormActions, type FormRootProps, type FormSectionProps, type FormActionsProps, } from "./Form";
-export { Alert, type AlertProps, type AlertTone } from "./Alert";
+export { Alert, type AlertProps, type AlertTone, type AlertVariant } from "./Alert";
 export { Dialog, type DialogProps, type DialogPosition } from "./Dialog";
 export { Scrim, type ScrimProps, type ScrimAlign } from "./Scrim";
 export { AlertDialog, type AlertDialogProps } from "./AlertDialog";

package/dist/types/native/sheet-snap-gesture.d.ts

@@ -51,3 +51,5 @@ export type ReleaseAction = {
 };
 /** 指を離した時の着地先。close は dismissible のときだけ返す。 */
 export declare function resolveRelease(startTY: number, dy: number, startActive: number, config: SnapGestureConfig): ReleaseAction;
+/** The dedicated handle is draggable even when body content is scrolled. */
+export declare function shouldStartHandleDrag(animating: boolean, keyboardReducedViewport: boolean): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "type": "module",
   "description": "KSK Design System — フリーランス向けマルチテーマ対応デザインシステム",
   "license": "MIT",
@@ -26,6 +26,7 @@
     "CLAUDE.md",
     "DESIGN.md",
     "src/preset.css",
+    "src/preset-core.css",
     "src/styles",
     "src/themes",
     "src/components/COMPONENT_LOOKUP.md",
@@ -65,6 +66,14 @@
       "import": "./src/preset.css",
       "default": "./src/preset.css"
     },
+    "./preset-core": {
+      "import": "./src/preset-core.css",
+      "default": "./src/preset-core.css"
+    },
+    "./safelist": {
+      "import": "./src/styles/source-safelist.css",
+      "default": "./src/styles/source-safelist.css"
+    },
     "./styles": {
       "import": "./src/preset.css",
       "default": "./src/preset.css"

package/src/preset-core.css

@@ -0,0 +1,252 @@
+/* =============================================================
+   KSK Design System — Preset Core CSS
+
+   preset から「DS 部品用の safelist（styles/source-safelist.css）」だけを
+   除いたもの。トークン・shadcn 互換ブリッジ・アニメーション・
+   container 幅・scrollbar-hide・base layer の保険はすべて含む。
+
+   使い方（DS 部品を使わないページだけの consumer）:
+   @import "tailwindcss";
+   @import "ksk-design-system/preset-core";
+   @import "ksk-design-system/themes/default";
+
+   DS 部品（Button 等）を使う consumer は従来どおり
+   `ksk-design-system/preset`（= preset-core + safelist）を使うこと。
+   safelist が無いと、DS 部品内部でしか使わないユーティリティは
+   consumer の @source が DS の dist を走査したときにしか生成されない。
+
+   preset.css はこのファイルと safelist を読み込むだけの薄い入口。
+   トークンや base layer を足すときはこのファイルに書く。
+   ============================================================= */
+
+@import "./styles/primitive.css";
+/* 角丸の意味別トークン（issue #553）。定義元は styles/radius.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/radius.css";
+/* ページセクション間の縦リズム（issue #560）。定義元は
+   styles/section-spacing.css の1箇所で、product-theme.css からも読み込まれる
+   （個別 subpath 構成の消費側対策）。 */
+@import "./styles/section-spacing.css";
+/* 重なり順（issue #563）。定義元は styles/z-index.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/z-index.css";
+/* 影（issue #563）。定義元は styles/shadow.css の1箇所で、
+   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
+@import "./styles/shadow.css";
+@import "./styles/semantic.css";
+@import "./styles/categorical.css";
+@import "./styles/typography.css";
+@import "./styles/glass.css";
+@import "./styles/bottom-nav.css";
+@import "./styles/motion.css";
+@import "./styles/sheet-keyboard.css";
+/* プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）。
+   許可リストの正本は contracts/product-theme-overrides.json。 */
+@import "./styles/product-theme.css";
+
+/* ─── Bridge Layer: shadcn/ui 互換マッピング ───
+
+   命名が 2 系統あるのは意図的な設計。統一しない。
+
+   - `--Surface-Primary` のような **PascalCase-ケバブ** は KSK の semantic 層。
+     UI を書くときに参照するのは常にこちら（CLAUDE.md のセルフチェック参照）。
+   - `--primary` / `--muted-foreground` のような **小文字ケバブ** は shadcn/ui
+     （および Radix ベースの外部コンポーネント）が決め打ちで参照する名前。
+     shadcn の CLI で追加したコンポーネントや、consumer が別途入れた
+     shadcn 資産をそのまま動かすための互換レイヤーであり、名前は
+     shadcn 側の仕様なので KSK 側では変えられない。
+
+   つまり小文字ケバブ側は「外部規約への適合」であって命名の揺れではない。
+   新しいトークンを増やすときは PascalCase 側（semantic.css）に足し、
+   shadcn 互換名が必要な場合だけここで var() でエイリアスすること。 */
+:root {
+  --radius: 0.5rem;
+
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+
+  --card: var(--Surface-Primary);
+  --card-foreground: var(--Text-High-Emphasis);
+
+  --popover: var(--Surface-Primary);
+  --popover-foreground: var(--Text-High-Emphasis);
+
+  --primary: var(--Brand-Primary);
+  --primary-foreground: var(--Text-on-Inverse);
+
+  --secondary: var(--Surface-Secondary);
+  --secondary-foreground: var(--Text-High-Emphasis);
+
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+
+  --accent: var(--Surface-Secondary);
+  --accent-foreground: var(--Text-High-Emphasis);
+
+  --destructive: var(--Caution-Base);
+  --destructive-foreground: var(--Text-on-Inverse);
+
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+
+  --sidebar-background: var(--Surface-Primary);
+  --sidebar-foreground: var(--Text-High-Emphasis);
+  --sidebar-primary: var(--Brand-Primary);
+  --sidebar-primary-foreground: var(--Text-on-Inverse);
+  --sidebar-accent: var(--Surface-Accent-Primary-Light);
+  --sidebar-accent-foreground: var(--Text-Accent-Primary);
+  --sidebar-border: var(--Border-Low-Emphasis);
+  --sidebar-ring: var(--Focus-High-Emphasis);
+}
+
+.dark {
+  --background: var(--Surface-Primary);
+  --foreground: var(--Text-High-Emphasis);
+  --card: var(--Surface-Secondary);
+  --card-foreground: var(--Text-High-Emphasis);
+  --popover: var(--Surface-Secondary);
+  --popover-foreground: var(--Text-High-Emphasis);
+  --primary: var(--Brand-Primary);
+  --primary-foreground: var(--Text-on-Inverse);
+  --secondary: var(--Surface-Tertiary);
+  --secondary-foreground: var(--Text-High-Emphasis);
+  --muted: var(--Surface-Tertiary);
+  --muted-foreground: var(--Text-Low-Emphasis);
+  --accent: var(--Surface-Tertiary);
+  --accent-foreground: var(--Text-High-Emphasis);
+  --destructive: var(--Caution-Base);
+  --destructive-foreground: var(--Text-on-Inverse);
+  --border: var(--Border-Medium-Emphasis);
+  --input: var(--Border-Medium-Emphasis);
+  --ring: var(--Focus-High-Emphasis);
+}
+
+/* ─── Radius Tokens ───
+   定義はこのファイルから styles/radius.css へ切り出した（issue #553）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Section Spacing Tokens ───
+   定義はこのファイルから styles/section-spacing.css へ切り出した（issue #560）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Z-Index Scale ───
+   定義はこのファイルから styles/z-index.css へ切り出した（issue #563）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Shadow Tokens ───
+   定義はこのファイルから styles/shadow.css へ切り出した（issue #563）。
+   ファイル先頭の @import 群で読み込んでいる。 */
+
+/* ─── Animation ─── */
+@keyframes slide-in-right {
+  from { transform: translateX(100%); opacity: 0; }
+  to   { transform: translateX(0);    opacity: 1; }
+}
+@keyframes slide-in-left {
+  from { transform: translateX(-100%); opacity: 0; }
+  to   { transform: translateX(0);     opacity: 1; }
+}
+@keyframes fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+@keyframes scale-in {
+  from { opacity: 0; transform: scale(0.95); }
+  to   { opacity: 1; transform: scale(1); }
+}
+@keyframes celebration-confetti-fall {
+  from {
+    opacity: 1;
+    transform: translate3d(0, -16px, 0) rotate(0deg);
+  }
+  to {
+    opacity: 0;
+    transform: translate3d(var(--celebration-drift, 0), 110vh, 0) rotate(var(--celebration-rotate, 360deg));
+  }
+}
+@keyframes celebration-confetti-burst {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
+  }
+  60% {
+    opacity: 1;
+    transform: translate3d(var(--celebration-burst-mid-x, 0), var(--celebration-burst-mid-y, 0), 0)
+      rotate(calc(var(--celebration-rotate, 360deg) * 0.75)) scale(1);
+  }
+  80% {
+    opacity: 0.9;
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(var(--celebration-burst-x, 0), var(--celebration-burst-y, 0), 0)
+      rotate(var(--celebration-rotate, 360deg)) scale(1);
+  }
+}
+@keyframes celebration-pop {
+  from { opacity: 0; transform: translateY(8px) scale(0.94); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+@keyframes celebration-emoji-pop {
+  0%   { transform: scale(0); }
+  50%  { transform: scale(1.4); }
+  70%  { transform: scale(0.9); }
+  100% { transform: scale(1); }
+}
+
+@theme inline {
+  /* duration / easing は src/styles/motion.css のトークンを参照する
+     （値は従来どおり slide/fade-up=200ms・fade/scale=150ms の ease-out）。 */
+  --animate-slide-in-right: slide-in-right var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
+  --animate-slide-in-left:  slide-in-left var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
+  --animate-fade-in:        fade-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
+  --animate-fade-in-up:     fade-in-up var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
+  --animate-scale-in:       scale-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
+}
+
+/* ─── Container Query Breakpoints ───
+   @sm: / @md: などは viewport の sm: / md: と別スケール。
+   tokens.json の breakpoints.container と同じ値を publish 側にも固定し、
+   Tailwind の既定値変更や consumer 側設定に依存させない。 */
+@theme {
+  --container-sm: 24rem;   /* 384px */
+  --container-md: 28rem;   /* 448px */
+  --container-xl: 36rem;   /* 576px */
+  --container-2xl: 42rem;  /* 672px */
+  --container-3xl: 48rem;  /* 768px */
+  --container-4xl: 56rem;  /* 896px */
+}
+
+/* ─── Scrollbar Hide Utility ─── */
+@utility scrollbar-hide {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* ─── Base Layer: ボーダー / アウトライン色のセーフティネット ───
+   Tailwind CSS v4 の破壊的変更で、border / outline の既定色は
+   gray-200 ではなく `currentColor`（＝要素の文字色）になった。
+   そのため `border` `border-b` のように「幅だけで色を指定しない」
+   クラスは、消費側が親に濃い文字色（例: --Text-High-Emphasis = #1C1A1A）
+   を敷くと枠線が黒ずむ。これを防ぐため、shadcn / 多くの DS と同じく
+   全要素のフォールバック色をテーマ追従の --border / --ring に固定する。
+
+   ※ これは「保険」。コンポーネント側は引き続き
+     border-[var(--Border-Low-Emphasis)] のように明示色を指定すること
+     （明示色を持つ要素は utilities レイヤが base を上書きするため不変）。 */
+@layer base {
+  *,
+  ::after,
+  ::before {
+    border-color: var(--border);
+    outline-color: var(--ring);
+  }
+}

package/src/preset.css

@@ -7,6 +7,10 @@
    使い方:
    @import "ksk-design-system/preset";
 
+   中身は preset-core.css（トークン・ブリッジ・base layer 等）と
+   DS 内部ユーティリティの safelist の 2 つ。DS 部品を 1 つも使わない
+   consumer は safelist を除いた `ksk-design-system/preset-core` を使える。
+
    ─── Tailwind CSS v4 の @source 設定（重要） ───────────────────
    Tailwind v4 はデフォルトで node_modules を走査しません。
    コンポーネントの Tailwind クラスを検出するため、CSS ファイルに
@@ -14,237 +18,8 @@
    詳細は CLAUDE.md / README を参照。
    ============================================================= */
 
-@import "./styles/primitive.css";
-/* 角丸の意味別トークン（issue #553）。定義元は styles/radius.css の1箇所で、
-   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
-@import "./styles/radius.css";
-/* ページセクション間の縦リズム（issue #560）。定義元は
-   styles/section-spacing.css の1箇所で、product-theme.css からも読み込まれる
-   （個別 subpath 構成の消費側対策）。 */
-@import "./styles/section-spacing.css";
-/* 重なり順（issue #563）。定義元は styles/z-index.css の1箇所で、
-   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
-@import "./styles/z-index.css";
-/* 影（issue #563）。定義元は styles/shadow.css の1箇所で、
-   product-theme.css からも読み込まれる（個別 subpath 構成の消費側対策）。 */
-@import "./styles/shadow.css";
-@import "./styles/semantic.css";
-@import "./styles/categorical.css";
-@import "./styles/typography.css";
-@import "./styles/glass.css";
-@import "./styles/bottom-nav.css";
-@import "./styles/motion.css";
-@import "./styles/sheet-keyboard.css";
-/* プロダクト単位で上書きしてよい寸法・面の公開変数（issue #364）。
-   許可リストの正本は contracts/product-theme-overrides.json。 */
-@import "./styles/product-theme.css";
+@import "./preset-core.css";
 /* DS 内部ユーティリティの safelist（自動生成 / issue #258）。
-   消費側の @source が無い・パスがずれていても DS のクラス CSS が生成される保険。 */
+   消費側の @source が無い・パスがずれていても DS のクラス CSS が生成される保険。
+   単体では `ksk-design-system/safelist` として読める。 */
 @import "./styles/source-safelist.css";
-
-/* ─── Bridge Layer: shadcn/ui 互換マッピング ───
-
-   命名が 2 系統あるのは意図的な設計。統一しない。
-
-   - `--Surface-Primary` のような **PascalCase-ケバブ** は KSK の semantic 層。
-     UI を書くときに参照するのは常にこちら（CLAUDE.md のセルフチェック参照）。
-   - `--primary` / `--muted-foreground` のような **小文字ケバブ** は shadcn/ui
-     （および Radix ベースの外部コンポーネント）が決め打ちで参照する名前。
-     shadcn の CLI で追加したコンポーネントや、consumer が別途入れた
-     shadcn 資産をそのまま動かすための互換レイヤーであり、名前は
-     shadcn 側の仕様なので KSK 側では変えられない。
-
-   つまり小文字ケバブ側は「外部規約への適合」であって命名の揺れではない。
-   新しいトークンを増やすときは PascalCase 側（semantic.css）に足し、
-   shadcn 互換名が必要な場合だけここで var() でエイリアスすること。 */
-:root {
-  --radius: 0.5rem;
-
-  --background: var(--Surface-Primary);
-  --foreground: var(--Text-High-Emphasis);
-
-  --card: var(--Surface-Primary);
-  --card-foreground: var(--Text-High-Emphasis);
-
-  --popover: var(--Surface-Primary);
-  --popover-foreground: var(--Text-High-Emphasis);
-
-  --primary: var(--Brand-Primary);
-  --primary-foreground: var(--Text-on-Inverse);
-
-  --secondary: var(--Surface-Secondary);
-  --secondary-foreground: var(--Text-High-Emphasis);
-
-  --muted: var(--Surface-Tertiary);
-  --muted-foreground: var(--Text-Low-Emphasis);
-
-  --accent: var(--Surface-Secondary);
-  --accent-foreground: var(--Text-High-Emphasis);
-
-  --destructive: var(--Caution-Base);
-  --destructive-foreground: var(--Text-on-Inverse);
-
-  --border: var(--Border-Medium-Emphasis);
-  --input: var(--Border-Medium-Emphasis);
-  --ring: var(--Focus-High-Emphasis);
-
-  --sidebar-background: var(--Surface-Primary);
-  --sidebar-foreground: var(--Text-High-Emphasis);
-  --sidebar-primary: var(--Brand-Primary);
-  --sidebar-primary-foreground: var(--Text-on-Inverse);
-  --sidebar-accent: var(--Surface-Accent-Primary-Light);
-  --sidebar-accent-foreground: var(--Text-Accent-Primary);
-  --sidebar-border: var(--Border-Low-Emphasis);
-  --sidebar-ring: var(--Focus-High-Emphasis);
-}
-
-.dark {
-  --background: var(--Surface-Primary);
-  --foreground: var(--Text-High-Emphasis);
-  --card: var(--Surface-Secondary);
-  --card-foreground: var(--Text-High-Emphasis);
-  --popover: var(--Surface-Secondary);
-  --popover-foreground: var(--Text-High-Emphasis);
-  --primary: var(--Brand-Primary);
-  --primary-foreground: var(--Text-on-Inverse);
-  --secondary: var(--Surface-Tertiary);
-  --secondary-foreground: var(--Text-High-Emphasis);
-  --muted: var(--Surface-Tertiary);
-  --muted-foreground: var(--Text-Low-Emphasis);
-  --accent: var(--Surface-Tertiary);
-  --accent-foreground: var(--Text-High-Emphasis);
-  --destructive: var(--Caution-Base);
-  --destructive-foreground: var(--Text-on-Inverse);
-  --border: var(--Border-Medium-Emphasis);
-  --input: var(--Border-Medium-Emphasis);
-  --ring: var(--Focus-High-Emphasis);
-}
-
-/* ─── Radius Tokens ───
-   定義はこのファイルから styles/radius.css へ切り出した（issue #553）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Section Spacing Tokens ───
-   定義はこのファイルから styles/section-spacing.css へ切り出した（issue #560）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Z-Index Scale ───
-   定義はこのファイルから styles/z-index.css へ切り出した（issue #563）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Shadow Tokens ───
-   定義はこのファイルから styles/shadow.css へ切り出した（issue #563）。
-   ファイル先頭の @import 群で読み込んでいる。 */
-
-/* ─── Animation ─── */
-@keyframes slide-in-right {
-  from { transform: translateX(100%); opacity: 0; }
-  to   { transform: translateX(0);    opacity: 1; }
-}
-@keyframes slide-in-left {
-  from { transform: translateX(-100%); opacity: 0; }
-  to   { transform: translateX(0);     opacity: 1; }
-}
-@keyframes fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-@keyframes fade-in-up {
-  from { opacity: 0; transform: translateY(8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-@keyframes scale-in {
-  from { opacity: 0; transform: scale(0.95); }
-  to   { opacity: 1; transform: scale(1); }
-}
-@keyframes celebration-confetti-fall {
-  from {
-    opacity: 1;
-    transform: translate3d(0, -16px, 0) rotate(0deg);
-  }
-  to {
-    opacity: 0;
-    transform: translate3d(var(--celebration-drift, 0), 110vh, 0) rotate(var(--celebration-rotate, 360deg));
-  }
-}
-@keyframes celebration-confetti-burst {
-  0% {
-    opacity: 1;
-    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.7);
-  }
-  60% {
-    opacity: 1;
-    transform: translate3d(var(--celebration-burst-mid-x, 0), var(--celebration-burst-mid-y, 0), 0)
-      rotate(calc(var(--celebration-rotate, 360deg) * 0.75)) scale(1);
-  }
-  80% {
-    opacity: 0.9;
-  }
-  100% {
-    opacity: 0;
-    transform: translate3d(var(--celebration-burst-x, 0), var(--celebration-burst-y, 0), 0)
-      rotate(var(--celebration-rotate, 360deg)) scale(1);
-  }
-}
-@keyframes celebration-pop {
-  from { opacity: 0; transform: translateY(8px) scale(0.94); }
-  to   { opacity: 1; transform: translateY(0) scale(1); }
-}
-@keyframes celebration-emoji-pop {
-  0%   { transform: scale(0); }
-  50%  { transform: scale(1.4); }
-  70%  { transform: scale(0.9); }
-  100% { transform: scale(1); }
-}
-
-@theme inline {
-  /* duration / easing は src/styles/motion.css のトークンを参照する
-     （値は従来どおり slide/fade-up=200ms・fade/scale=150ms の ease-out）。 */
-  --animate-slide-in-right: slide-in-right var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
-  --animate-slide-in-left:  slide-in-left var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
-  --animate-fade-in:        fade-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
-  --animate-fade-in-up:     fade-in-up var(--Motion-Duration-Base) var(--Motion-Easing-Standard);
-  --animate-scale-in:       scale-in var(--Motion-Duration-Fast) var(--Motion-Easing-Standard);
-}
-
-/* ─── Container Query Breakpoints ───
-   @sm: / @md: などは viewport の sm: / md: と別スケール。
-   tokens.json の breakpoints.container と同じ値を publish 側にも固定し、
-   Tailwind の既定値変更や consumer 側設定に依存させない。 */
-@theme {
-  --container-sm: 24rem;   /* 384px */
-  --container-md: 28rem;   /* 448px */
-  --container-xl: 36rem;   /* 576px */
-  --container-2xl: 42rem;  /* 672px */
-  --container-3xl: 48rem;  /* 768px */
-  --container-4xl: 56rem;  /* 896px */
-}
-
-/* ─── Scrollbar Hide Utility ─── */
-@utility scrollbar-hide {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-/* ─── Base Layer: ボーダー / アウトライン色のセーフティネット ───
-   Tailwind CSS v4 の破壊的変更で、border / outline の既定色は
-   gray-200 ではなく `currentColor`（＝要素の文字色）になった。
-   そのため `border` `border-b` のように「幅だけで色を指定しない」
-   クラスは、消費側が親に濃い文字色（例: --Text-High-Emphasis = #1C1A1A）
-   を敷くと枠線が黒ずむ。これを防ぐため、shadcn / 多くの DS と同じく
-   全要素のフォールバック色をテーマ追従の --border / --ring に固定する。
-
-   ※ これは「保険」。コンポーネント側は引き続き
-     border-[var(--Border-Low-Emphasis)] のように明示色を指定すること
-     （明示色を持つ要素は utilities レイヤが base を上書きするため不変）。 */
-@layer base {
-  *,
-  ::after,
-  ::before {
-    border-color: var(--border);
-    outline-color: var(--ring);
-  }
-}