ksk-design-system 2.6.4 → 2.8.0

package/dist/{native-BsJ3ntN3.js → native-_H0V_r0X.js}

@@ -73,6 +73,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -170,7 +172,9 @@ var e = {
 				primary: "#60A5FA",
 				action: "#93C5FD",
 				light: "#1E3A8A",
-				"ultra-light": "#1E3A8A"
+				"ultra-light": "#1E3A8A",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#3B82F6",
@@ -273,6 +277,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -370,7 +376,9 @@ var e = {
 				primary: "#60A5FA",
 				action: "#93C5FD",
 				light: "#1E3A8A",
-				"ultra-light": "#1E3A8A"
+				"ultra-light": "#1E3A8A",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#3B82F6",
@@ -473,6 +481,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -570,7 +580,9 @@ var e = {
 				primary: "#4398F8",
 				action: "#7FAAFB",
 				light: "#03155A",
-				"ultra-light": "#03155A"
+				"ultra-light": "#03155A",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#2053F5",
@@ -673,6 +685,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -770,7 +784,9 @@ var e = {
 				primary: "#FB923C",
 				action: "#FDBA74",
 				light: "#431407",
-				"ultra-light": "#431407"
+				"ultra-light": "#431407",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#F97316",
@@ -873,6 +889,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -970,7 +988,9 @@ var e = {
 				primary: "#4ADE80",
 				action: "#86EFAC",
 				light: "#052E16",
-				"ultra-light": "#052E16"
+				"ultra-light": "#052E16",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#16A34A",
@@ -1073,6 +1093,8 @@ var e = {
 				line: "#06C755",
 				"google-border": "#DADCE0",
 				apple: "#000000",
+				"apple-surface": "#000000",
+				"on-apple": "#FFFFFF",
 				amazon: "#232F3E"
 			},
 			hover: {
@@ -1170,7 +1192,9 @@ var e = {
 				primary: "#A78BFA",
 				action: "#C4B5FD",
 				light: "#3B0764",
-				"ultra-light": "#3B0764"
+				"ultra-light": "#3B0764",
+				"apple-surface": "#FFFFFF",
+				"on-apple": "#000000"
 			},
 			hover: {
 				"primary-button": "#7C3AED",

package/dist/native.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./native-BsJ3ntN3.js";
+import { a as e, i as t, n, r, t as i } from "./native-_H0V_r0X.js";
 export { i as getTheme, r as primitives, t as scales, n as themeNames, e as themes };

package/dist/types/components/patterns/commerce/bottom-tab-bar.d.ts

@@ -173,5 +173,33 @@ interface BottomTabBarProps extends React.ComponentProps<"nav"> {
  * いずれも呼び出し側の義務にしていない（明示値があればそちらが優先）。
  */
 declare function BottomTabBar({ className, items, centerAction, showLabels, tone, maxWidth, variant, pillPosition, floatingPosition, keyboardBehavior, scrollEdge, navLabel, showOnDesktop, ...props }: BottomTabBarProps): React.JSX.Element;
+interface PlatterRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/**
+ * platter overlay の配置量を求める。
+ *
+ * overlay は nav の絶対配置子 (`absolute left-0 top-0`) なので、原点は nav の
+ * **padding box**。一方 rect 同士の差は **border box** 基準なので、そのまま
+ * translate に渡すと nav の border 分だけ右下にずれる (#591)。border 幅
+ * (clientLeft / clientTop) を引いて padding box 基準へ揃える。
+ *
+ * テストから参照するため named export（公開 API ではない）。
+ */
+export declare function computePlatterOffset(navBox: {
+    left: number;
+    top: number;
+}, anchorBox: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}, navBorder: {
+    left: number;
+    top: number;
+}): PlatterRect;
 export { BottomTabBar };
 export type { BottomTabBarAction, BottomTabBarFloatingPosition, BottomTabBarItem, BottomTabBarKeyboardBehavior, BottomTabBarProps, };

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/dist/types/tokens/native/themes.d.ts

@@ -72,6 +72,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -178,6 +180,8 @@ export declare const themes: {
                 readonly action: "#93C5FD";
                 readonly light: "#1E3A8A";
                 readonly "ultra-light": "#1E3A8A";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#3B82F6";
@@ -288,6 +292,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -394,6 +400,8 @@ export declare const themes: {
                 readonly action: "#93C5FD";
                 readonly light: "#1E3A8A";
                 readonly "ultra-light": "#1E3A8A";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#3B82F6";
@@ -504,6 +512,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -610,6 +620,8 @@ export declare const themes: {
                 readonly action: "#7FAAFB";
                 readonly light: "#03155A";
                 readonly "ultra-light": "#03155A";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#2053F5";
@@ -720,6 +732,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -826,6 +840,8 @@ export declare const themes: {
                 readonly action: "#FDBA74";
                 readonly light: "#431407";
                 readonly "ultra-light": "#431407";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#F97316";
@@ -936,6 +952,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -1042,6 +1060,8 @@ export declare const themes: {
                 readonly action: "#86EFAC";
                 readonly light: "#052E16";
                 readonly "ultra-light": "#052E16";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#16A34A";
@@ -1152,6 +1172,8 @@ export declare const themes: {
                 readonly line: "#06C755";
                 readonly "google-border": "#DADCE0";
                 readonly apple: "#000000";
+                readonly "apple-surface": "#000000";
+                readonly "on-apple": "#FFFFFF";
                 readonly amazon: "#232F3E";
             };
             readonly hover: {
@@ -1258,6 +1280,8 @@ export declare const themes: {
                 readonly action: "#C4B5FD";
                 readonly light: "#3B0764";
                 readonly "ultra-light": "#3B0764";
+                readonly "apple-surface": "#FFFFFF";
+                readonly "on-apple": "#000000";
             };
             readonly hover: {
                 readonly "primary-button": "#7C3AED";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksk-design-system",
-  "version": "2.6.4",
+  "version": "2.8.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/components/COMPONENT_LOOKUP.md

@@ -69,7 +69,7 @@
 | Slider | `@/components/ui/slider` | — | Default, Range, WithLabel, Range — 最小値/最大値を別々にラベル付け, Disabled |
 | SOCIAL_ICON_LABELS, SOCIAL_ICON_DATA, SOCIAL_ICON_PLATFORMS | `@/components/ui/social-icon-data` | — | — |
 | SocialIcon, SOCIAL_ICON_PLATFORMS, SOCIAL_ICON_LABELS | `@/components/ui/social-icon` | — | Default, AllPlatforms, AllMono, Tones |
-| SocialLoginButton | `@/components/ui/social-login-button` | — | Line, Google, Apple, Amazon, AllProviders, Loading |
+| SocialLoginButton | `@/components/ui/social-login-button` | — | Line, Google, Apple, Amazon, AllProviders, LightAndDark, Loading |
 | Spinner | `@/components/ui/spinner` | — | Default, AllSizes |
 | StarRating | `@/components/ui/star-rating` | — | Interactive, AllowClear, ReadOnly, Sizes |
 | StatusActionBadge, SyncStatusButton | `@/components/ui/status-action-badge` | — | AllStates, Actionable, Compact |

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);
+  }
+}