lism-css 0.23.0-beta.0 → 0.24.0

package/README.ja.md

@@ -5,32 +5,32 @@
 [![npm version](https://img.shields.io/npm/v/lism-css.svg)](https://www.npmjs.com/package/lism-css)
 [![License: MIT](https://img.shields.io/npm/l/lism-css.svg)](https://github.com/lism-css/lism-css/blob/main/LICENSE)
 
-## lism-css とは？
+## lism-cssとは？
 
-Lism CSS は、WEBサイトのレイアウトを素早く、かつ美しく構築するための軽量な **CSS設計フレームワーク**です。
+Lism CSSは、Webサイトのレイアウトを素早く、かつ美しく構築するための軽量な **CSS設計フレームワーク**です。
 
 [Every Layout](https://every-layout.dev/) のレイアウトプリミティブやハーモニックモジュラースケーリング、[Tailwind CSS](https://tailwindcss.com/) のCSSプロパティ単位でのユーティリティファーストなアプローチから着想を得て、独自のCSS設計を組み立てました。
 
-ビルドステップや設定は不要です。CDN 経由で CSS ファイルを読み込むか、npm からインポートするだけですぐに使い始められます。  
-React / Astro 向けのコンポーネントも提供しており、propsを通じてCSSクラスとカスタムプロパティに変換されるため、ランタイムでのスタイル生成なしにコンポーネントベースの開発が可能です。
+ビルドステップや設定は不要です。CDN経由でCSSファイルを読み込むか、npmからインポートするだけですぐに使い始められます。  
+React / Astro向けのコンポーネントも提供しており、propsを通じてCSSクラスとカスタムプロパティに変換されるため、ランタイムでのスタイル生成なしにコンポーネントベースの開発が可能です。
 
 ## 特徴
 
-- **軽量** - CSS バンドル全体で約 30 KB（gzip 圧縮時 約 8 KB）と、軽量です。
-- **ゼロビルドフレームワーク** — CSS ファイルを読み込むだけで、プレーン HTML でも動作します。ビルドツール、プリプロセッサ、設定は不要。CDN または npm で利用可能。
-- **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--withSide` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
-- **CSS レイヤー構造** — `@layer`（lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-trait` は `is--` / `has--` の Trait クラス用レイヤー、`lism-primitive` の内部は `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` は BEM 構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
-- **デザイントークン** — カラー、余白、フォントサイズ、シャドウ、ボーダー半径を CSS カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
-- **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
-- **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
-- **React & Astro コンポーネント** — React と Astro の両方に対応した専用コンポーネントが、props を Lism CSS のクラスと変数に自動変換します。`class="l--stack -g:20"` の代わりに `<Stack g="20">` と書けます。
+- **軽量** - CSSバンドル全体で約30 KB（gzip圧縮時約8 KB）と、軽量です。
+- **ゼロビルドフレームワーク** — CSSファイルを読み込むだけで、プレーンHTMLでも動作します。ビルドツール、プリプロセッサ、設定は不要。CDNまたはnpmで利用可能。
+- **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--withSide` など）で、カスタムCSSを書かずに一般的なレイアウトパターンを組み立てられます。
+- **CSSレイヤー構造** — `@layer`（lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-trait` は `is--` / `has--` のTraitクラス用レイヤー、`lism-primitive` の内部は `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` はBEM構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
+- **デザイントークン** — カラー、余白、フォントサイズ、シャドウ、ボーダー半径をCSSカスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
+- **柔軟なProperty Class** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）でCSSプロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
+- **レスポンシブシステム** — ブレークポイント固有のクラスとCSS変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
+- **React & Astroコンポーネント** — ReactとAstroの両方に対応した専用コンポーネントが、propsをLism CSSのクラスと変数に自動変換します。`class="l--stack -g:20"` の代わりに `<Stack g="20">` と書けます。
 
 ## インストール
 
 ### CDN（ビルド不要）
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.24.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm
@@ -47,15 +47,15 @@ pnpm add lism-css
 
 ## セットアップ
 
-グローバルスタイルとして CSS をインポートします:
+グローバルスタイルとしてCSSをインポートします:
 
 ```js
 import 'lism-css/main.css';
 ```
 
-**Next.js** の場合は、`layout.js`（App Router）または `_app.js`（Pages Router）で読み込みます。
+**Next.js**の場合は、`layout.js`（App Router）または `_app.js`（Pages Router）で読み込みます。
 
-**Astro** の場合は、`node_modules` から `.astro` コンポーネントをインポートできるよう、`astro.config.js` に以下を追加します:
+**Astro**の場合は、`node_modules` から `.astro` コンポーネントをインポートできるよう、`astro.config.js` に以下を追加します:
 
 ```js
 export default defineConfig({
@@ -107,7 +107,7 @@ import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
 </Stack>
 ```
 
-### HTML（CSS のみ）
+### HTML（CSSのみ）
 
 ```html
 <div class="l--stack -g:20">
@@ -125,37 +125,38 @@ import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
 
 ## コアコンポーネント
 
-Lism CSS は以下の React / Astro コンポーネントを提供します:
+Lism CSSは以下の React / Astroコンポーネントを提供します:
 
 **レイアウトコンポーネント:**
-Lism, Box, Flow, Flex, Cluster, Stack, Grid, AutoColumns, SwitchColumns, WithSide, Center, Columns, Frame
+Lism, Box, Flow, Flex, Cluster, Stack, Grid, AutoColumns, SwitchColumns, WithSide, Center, Columns, Frame, TileGrid
 
 **構造コンポーネント:**
 Container, Wrapper, Layer, BoxLink
 
 **コンテンツコンポーネント:**
-Text, Heading, Inline, Link, Group, List
+Text, Heading, Inline, Link, Group, List, Media
 
 **アトミックコンポーネント:**
-Icon, Media, Decorator, Divider, Spacer
+Icon, Decorator, Divider, Spacer
 
-すべてのコンポーネントは Lism props（例: `p`、`m`、`g`、`fz`、`bgc`、`bdrs`）を受け取り、CSS クラスと変数に自動的にマッピングされます。
+すべてのコンポーネントはLism props（例: `p`、`m`、`g`、`fz`、`bgc`、`bdrs`）を受け取り、CSSクラスと変数に自動的にマッピングされます。
 
-## CSS クラスシステム
+## CSSクラスシステム
 
-Lism CSS は構造化された命名規則を CSS クラスに使用しています:
+Lism CSSは構造化された命名規則をCSSクラスに使用しています:
 
 | タイプ | パターン | 例 |
 |--------|---------|-----|
 | レイアウトプリミティブ | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--withSide` |
-| トレイトプリミティブ | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
-| プロップクラス | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
+| Trait Class（役割） | `is--{name}` | `is--wrapper`, `is--container`, `is--layer`, `is--boxLink` |
+| Trait Class（機能） | `has--{name}` | `has--transition`, `has--gutter`, `has--snap` |
+| Property Class | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
 | ブレークポイント | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
 | ユーティリティクラス | `u--{name}` | `u--cbox` |
 
 ## レスポンシブシステム
 
-レスポンシブ値は、ブレークポイント固有のクラスと CSS 変数を使って設定します:
+レスポンシブ値は、ブレークポイント固有のクラスとCSS変数を使って設定します:
 
 **HTML:**
 
@@ -177,36 +178,36 @@ Lism CSS は構造化された命名規則を CSS クラスに使用していま
 
 ## デザイントークン
 
-Lism CSS は一貫したデザインのための CSS カスタムプロパティを提供します:
+Lism CSSは一貫したデザインのためのCSSカスタムプロパティを提供します:
 
-- **カラー:** `--base`、`--base-2`、`--text`、`--text-2`、`--link`、`--divider`、`--brand`、`--accent`、パレットカラー（`--red`、`--blue`、`--green` など）
-- **余白:** `--s5`, `--s10`, `--s15`, `--s20`, `--s25`, `--s30`, `--s35`, `--s40` … `--s80`（rem 値にマッピング）
+- **カラー:** `--base`、`--base-2`、`--text`、`--text-2`、`--link`、`--divider`、`--brand`、`--accent`、`--neutral`、パレットカラー（`--red`、`--blue`、`--green` など）
+- **余白:** `--s5`, `--s10`, `--s15`, `--s20`, `--s25`, `--s30`, `--s35`, `--s40` … `--s80`（rem値にマッピング）
 - **フォントサイズ:** `--fz--2xs` 〜 `--fz--5xl`
 - **ボーダー半径:** `--bdrs--10`（0.25rem）〜 `--bdrs--99`（99rem）
 - **シャドウ:** `--bxsh--10` 〜 `--bxsh--50`（シャドウカラー設定可能）
 - **コンテナサイズ:** `--sz--xs`（400px）、`--sz--s`（640px）、`--sz--m`（880px）、`--sz--l`（1200px）、`--sz--xl`（1600px）
 
-## UI コンポーネント
+## UIコンポーネント
 
-インタラクティブな UI コンポーネント（Accordion、Modal、Tabs、Alert、Avatar、Badge、Button など）については、別パッケージの [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui) を参照してください。
+インタラクティブなUIコンポーネント（Accordion、Modal、Tabs、Alert、Avatar、Badge、Buttonなど）については、別パッケージの [@lism-css/ui](https://www.npmjs.com/package/@lism-css/ui) を参照してください。
 
 ```bash
 npm i @lism-css/ui
 ```
 
-## AI ツール連携
+## AIツール連携
 
 ### llms.txt
 
-AI アシスタントや LLM ベースのツール向けに、機械可読なドキュメントインデックスを提供しています:
+AIアシスタントやLLMベースのツール向けに、機械可読なドキュメントインデックスを提供しています:
 
 ```
 https://lism-css.com/llms.txt
 ```
 
-### MCP サーバー
+### MCPサーバー
 
-AI コーディングツール向けの MCP（Model Context Protocol）サーバーが利用可能です:
+AIコーディングツール向けのMCP（Model Context Protocol）サーバーが利用可能です:
 
 **Claude Code:**
 
@@ -249,7 +250,7 @@ claude mcp add lism-css -- npx -y @lism-css/mcp
 
 ## コミュニティ
 
-フィードバックや質問は、[Lism CSS Discord サーバー](https://discord.gg/6PMcFHvc4h)までお気軽にどうぞ。
+フィードバックや質問は、[Lism CSS Discordサーバー](https://discord.gg/6PMcFHvc4h)までお気軽にどうぞ。
 
 ## クレジット
 

package/README.md

@@ -29,7 +29,7 @@ No build step or configuration is required. Simply load the CSS file via CDN or
 ### CDN (no build required)
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.24.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm
@@ -127,16 +127,16 @@ import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
 Lism CSS provides the following React and Astro components:
 
 **Layout Components:**
-Lism, Box, Flow, Flex, Cluster, Stack, Grid, AutoColumns, SwitchColumns, WithSide, Center, Columns, Frame
+Lism, Box, Flow, Flex, Cluster, Stack, Grid, AutoColumns, SwitchColumns, WithSide, Center, Columns, Frame, TileGrid
 
 **Structure Components:**
 Container, Wrapper, Layer, BoxLink
 
 **Content Components:**
-Text, Heading, Inline, Link, Group, List
+Text, Heading, Inline, Link, Group, List, Media
 
 **Atomic Components:**
-Icon, Media, Decorator, Divider, Spacer
+Icon, Decorator, Divider, Spacer
 
 All components accept Lism props (e.g., `p`, `m`, `g`, `fz`, `bgc`, `bdrs`) that automatically map to CSS classes and variables.
 
@@ -179,7 +179,7 @@ Default breakpoints: `sm` = 480px, `md` = 800px, `lg` = 1120px (container querie
 
 Lism CSS provides CSS custom properties for consistent design:
 
-- **Colors:** `--base`, `--base-2`, `--text`, `--text-2`, `--link`, `--divider`, `--brand`, `--accent`, plus palette colors (`--red`, `--blue`, `--green`, etc.)
+- **Colors:** `--base`, `--base-2`, `--text`, `--text-2`, `--link`, `--divider`, `--brand`, `--accent`, `--neutral`, plus palette colors (`--red`, `--blue`, `--green`, etc.)
 - **Spacing:** `--s5`, `--s10`, `--s15`, `--s20`, `--s25`, `--s30`, `--s35`, `--s40` … `--s80` (mapped to rem values)
 - **Font Sizes:** `--fz--2xs` through `--fz--5xl`
 - **Border Radius:** `--bdrs--10` (0.25rem) through `--bdrs--99` (99rem)

package/dist/config/default-config.d.ts

@@ -56,8 +56,8 @@ declare const _default: {
             readonly xl: "0.1em";
         };
         readonly ff: {
-            readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'";
-            readonly accent: "'Garamond', 'Baskerville', 'Times New Roman', serif";
+            readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif";
+            readonly accent: "Georgia, serif";
             readonly mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace";
         };
         readonly fw: {
@@ -159,6 +159,9 @@ declare const _default: {
             readonly token: "hl";
             readonly tokenClass: 1;
             readonly bp: 1;
+            readonly utils: {
+                readonly '0': "0px";
+            };
         };
         readonly lts: {
             readonly prop: "letterSpacing";

package/dist/config/defaults/breakpoints.d.ts

@@ -13,3 +13,10 @@ declare const BREAKPOINTS: {
     readonly xl: 0;
 };
 export default BREAKPOINTS;
+/** ブレイクポイントの全キー集合（`base` を除く）。config 執筆時の型・prop の bp リスト等の単一 source。 */
+export type BreakpointKey = keyof typeof BREAKPOINTS;
+export declare const BREAK_POINTS: readonly ["sm", "md", "lg", "xl"];
+/** 配列記法の位置順（`base` を除く）。位置は固定の契約（変更しない）。 */
+export type BreakpointSequence = typeof BREAK_POINTS;
+export declare const BREAK_POINTS_ALL: readonly ["base", "sm", "md", "lg", "xl"];
+export declare const BREAK_POINTS_OBJ: readonly ["base", "xs", "sm", "md", "lg", "xl"];

package/dist/config/defaults/breakpoints.js

@@ -4,7 +4,10 @@ const x = {
   md: "800px",
   lg: "1120px",
   xl: 0
-};
+}, s = ["sm", "md", "lg", "xl"], t = ["base", ...s], l = ["base", "xs", ...s];
 export {
+  s as BREAK_POINTS,
+  t as BREAK_POINTS_ALL,
+  l as BREAK_POINTS_OBJ,
   x as default
 };

package/dist/config/defaults/props.d.ts

@@ -59,6 +59,9 @@ declare const _default: {
         readonly token: "hl";
         readonly tokenClass: 1;
         readonly bp: 1;
+        readonly utils: {
+            readonly '0': "0px";
+        };
     };
     readonly lts: {
         readonly prop: "letterSpacing";

package/dist/config/defaults/props.js

@@ -21,7 +21,10 @@ const e = ["start", "center", "end"], r = ["flex-start", "flex-end"], p = { s: "
     isVar: 1,
     token: "hl",
     tokenClass: 1,
-    bp: 1
+    bp: 1,
+    // hl="0" で half-leading なし (--hl:0px) を表現できるようにする互換ユーティリティ。
+    // lh="1"（互換ショートカット）の .-lh:1 と同じ出力にし、正規 prop の hl 側でも揃えられるようにする。
+    utils: { 0: "0px" }
   },
   lts: { prop: "letterSpacing", token: "lts", tokenClass: 1 },
   ta: { prop: "textAlign", presets: ["center", "left", "right"] },

package/dist/config/defaults/tokens.d.ts

@@ -63,8 +63,8 @@ declare const _default: {
         readonly xl: "0.1em";
     };
     readonly ff: {
-        readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'";
-        readonly accent: "'Garamond', 'Baskerville', 'Times New Roman', serif";
+        readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif";
+        readonly accent: "Georgia, serif";
         readonly mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace";
     };
     readonly fw: {

package/dist/config/defaults/tokens.js

@@ -52,8 +52,17 @@ const a = {
   lts: { base: "normal", s: "-0.025em", l: "0.05em", xl: "0.1em" },
   // font-family
   ff: {
-    base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'",
-    accent: "'Garamond', 'Baskerville', 'Times New Roman', serif",
+    /* Base:
+     *   -apple-system/BlinkMacSystemFont → Macで英数字をSan Franciscoに。（前者がSafari/Firefox、後者がChrome用）
+     *   'Hiragino Sans' → Macでの和文フォントの指定。ここを省くと、Chromeで sans-serifが Hiragino Kaku Gothic ProN になってしまう
+     *   sans-serif: Mac=Hiragino系 / Win=Noto|Meiryo
+     *
+     *   Note: system-ui は和文に游ゴシックが当たるため使わない。
+     */
+    base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif",
+    // Accent: 装飾用セリフ。初期状態はあくまで一例で実際はカスタマイズしてもらう想定。
+    accent: "Georgia, serif",
+    // Mono: ui-monospace=各OSのUI等幅 / SFMono・Menlo→Mac・Consolas→Win のフォールバック
     mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace"
   },
   // font-weight

package/dist/config/index.d.ts

@@ -43,6 +43,9 @@ export declare const CONFIG: {
             readonly token: "hl";
             readonly tokenClass: 1;
             readonly bp: 1;
+            readonly utils: {
+                readonly '0': "0px";
+            };
         };
         readonly lts: {
             readonly prop: "letterSpacing";
@@ -809,8 +812,8 @@ export declare const CONFIG: {
             readonly xl: "0.1em";
         };
         readonly ff: {
-            readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'";
-            readonly accent: "'Garamond', 'Baskerville', 'Times New Roman', serif";
+            readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif";
+            readonly accent: "Georgia, serif";
             readonly mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace";
         };
         readonly fw: {
@@ -957,8 +960,8 @@ export declare const TOKENS: {
         readonly xl: "0.1em";
     };
     readonly ff: {
-        readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'";
-        readonly accent: "'Garamond', 'Baskerville', 'Times New Roman', serif";
+        readonly base: "-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif";
+        readonly accent: "Georgia, serif";
         readonly mono: "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace";
     };
     readonly fw: {
@@ -1060,6 +1063,9 @@ export declare const PROPS: {
         readonly token: "hl";
         readonly tokenClass: 1;
         readonly bp: 1;
+        readonly utils: {
+            readonly '0': "0px";
+        };
     };
     readonly lts: {
         readonly prop: "letterSpacing";
@@ -1782,6 +1788,5 @@ export declare const TRAITS: {
     readonly hasSnap: "has--snap";
     readonly hasMask: "has--mask";
 };
-export declare const BREAK_POINTS: readonly ["sm", "md", "lg", "xl"];
-export declare const BREAK_POINTS_ALL: readonly ["base", "sm", "md", "lg", "xl"];
-export declare const BREAK_POINTS_OBJ: readonly ["base", "xs", "sm", "md", "lg", "xl"];
+export { BREAK_POINTS, BREAK_POINTS_ALL, BREAK_POINTS_OBJ } from './defaults/breakpoints';
+export type { BreakpointKey, BreakpointSequence } from './defaults/breakpoints';

package/dist/config/index.js

@@ -1,20 +1,17 @@
-import s from "./default-config.js";
-import l from "./presets/props-full.js";
-import r from "lism-css/config.js";
-import { arrayConvertToSet as n, objDeepMerge as e } from "./helper.js";
-const i = r.isFullMode, c = i ? e(s, { props: l }) : s;
-let t = e(c, r);
+import r from "./default-config.js";
+import i from "./presets/props-full.js";
+import n from "lism-css/config.js";
+import { arrayConvertToSet as s, objDeepMerge as e } from "./helper.js";
+const l = n.isFullMode, p = l ? e(r, { props: i }) : r;
+let t = e(p, n);
 typeof window < "u" && window._LISM_CSS_CONFIG_ && (t = e(t, window._LISM_CSS_CONFIG_));
-const p = t, { tokens: o, props: d, traits: m } = p, C = {
+const C = t, { tokens: o, props: c, traits: f } = C, d = {
   ...o,
   color: { ...o.color, ...o.palette }
-}, O = n(structuredClone(C)), a = n(structuredClone(d)), g = m, S = ["sm", "md", "lg", "xl"], N = ["base", ...S], T = ["base", "xs", "sm", "md", "lg", "xl"];
+}, a = s(structuredClone(d)), g = s(structuredClone(c)), w = f;
 export {
-  S as BREAK_POINTS,
-  N as BREAK_POINTS_ALL,
-  T as BREAK_POINTS_OBJ,
-  p as CONFIG,
-  a as PROPS,
-  O as TOKENS,
-  g as TRAITS
+  C as CONFIG,
+  g as PROPS,
+  a as TOKENS,
+  w as TRAITS
 };

package/dist/config/types.d.ts

@@ -0,0 +1,38 @@
+/**
+ * `lism.config.*` を書く側の静的型。`lism-css/config-types` として公開する。
+ *
+ * 使い方:
+ * - `.ts`: `export default { ... } satisfies LismConfig`（typo 検出・補完・literal 保持）
+ * - `.js`: `/** @type {import('lism-css/config-types').LismConfig} *\/`
+ *
+ * - `lism-env.d.ts`（ビルド時生成物）や副作用付きの `config/index.ts` には依存しない。
+ * - typo 検出が目的なので index signature は付けない（object literal の excess property check を効かせる）。
+ * - ランタイム側の `PropConfig`（`src/lib/getLismProps.ts` の Set 化後の形）とは別物。
+ */
+export type { BreakpointKey } from './defaults/breakpoints';
+import type { BreakpointKey } from './defaults/breakpoints';
+/** prop 1 件分の設定（config 執筆時の形）。 */
+export interface PropConfig {
+    prop?: string;
+    token?: string;
+    tokenClass?: 0 | 1;
+    presets?: readonly (string | number)[];
+    utils?: Record<string, string | number>;
+    shorthands?: Record<string, string>;
+    isVar?: 0 | 1;
+    bp?: 0 | 1 | readonly BreakpointKey[];
+    alwaysVar?: 0 | 1;
+    important?: 0 | 1;
+    exUtility?: Record<string, string | Record<string, string>>;
+}
+/** `lism.config.*` の default export（および `window._LISM_CSS_CONFIG_`）の型。 */
+export interface LismConfig {
+    tokens?: Record<string, Record<string, string | number> | readonly (string | number)[]>;
+    props?: Record<string, PropConfig>;
+    traits?: Record<string, string>;
+    breakpoints?: Partial<Record<BreakpointKey, string | number>>;
+    defaultImportant?: boolean;
+    isFullMode?: boolean;
+    /** lism-cli の UI 設定。スキーマは lism-cli 側が管理するため緩い型にとどめる。 */
+    ui?: Record<string, unknown>;
+}

package/dist/config/types.js

@@ -0,0 +1 @@
+

package/dist/css/base.css

@@ -1 +1 @@
-@property --hl{syntax:"<length>";inherits:true;initial-value:.25rem}@property --sz--bleed{syntax:"<length-percentage>";initial-value:100svi;inherits:true}:root{--L:60%;--C:0.2;--red:oklch(var(--L) var(--C) 20);--orange:oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48);--yellow:oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80);--green:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);--blue:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264);--purple:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288);--pink:oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352);--gray:oklch(calc(var(--L) - 4%) calc(var(--C)/10) 240);--brand:#1e5f8c;--accent:#d94a6a;--base:#fcfcfc;--base-2:#f2f2f3;--text:#141414;--text-2:#4e5155;--link:oklch(50% 0.3 240);--divider:#dfe0e2;--shadow:rgba(20,20,21,.12);--neutral:#cbcccd;--shc:var(--shadow);--shsz--10:0px 1px 3px;--shsz--20:0px 2px 6px;--shsz--30:0px 4px 12px;--shsz--40:0px 8px 24px;--shsz--50:0px 16px 48px;--fz-mol:8;--hl-unit:calc(var(--fz--base)*0.125);--s-unit:calc(var(--fz--base)*0.5);--gutter--base:var(--s30);--flow--base:var(--s30);--flow--s:var(--s20)}:root:where([lang=ja]){--flow--base:var(--s35)}:root{--white:#fff;--black:#000;--fz--base:1rem;--fz--5xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 6));--fz--4xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 5));--fz--3xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 4));--fz--2xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 3));--fz--xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 2));--fz--l:calc(1em*var(--fz-mol)/(var(--fz-mol) - 1));--fz--m:1em;--fz--s:calc(1em*var(--fz-mol)/(var(--fz-mol) + 1));--fz--xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 2));--fz--2xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 3));--hl--base:calc(var(--hl-unit)*3);--hl--xs:var(--hl-unit);--hl--s:calc(var(--hl-unit)*2);--hl--l:calc(var(--hl-unit)*4);--lts--base:normal;--lts--s:-0.025em;--lts--l:0.05em;--lts--xl:0.1em;--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Sans",sans-serif,"Segoe UI Emoji";--ff--accent:"Garamond","Baskerville","Times New Roman",serif;--ff--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--fw--light:300;--fw--normal:400;--fw--bold:600;--o--mp:0.9;--o--p:0.75;--o--pp:0.5;--o--ppp:0.25;--bdrs--10:0.25rem;--bdrs--20:0.5rem;--bdrs--30:1rem;--bdrs--40:1.5rem;--bdrs--99:99rem;--sz--xs:400px;--sz--s:640px;--sz--m:880px;--sz--l:1200px;--sz--xl:1600px;--ar--og:1.91/1}.set--bxsh,:root{--bxsh--10:var(--shsz--10) var(--shc);--bxsh--20:var(--shsz--20) var(--shc);--bxsh--30:var(--shsz--30) var(--shc);--bxsh--40:var(--shsz--40) var(--shc);--bxsh--50:var(--shsz--50) var(--shc)}.set--s,:root{--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--s20:calc(var(--s-unit)*2);--s25:calc(var(--s-unit)*2.5);--s30:calc(var(--s-unit)*3);--s35:calc(var(--s-unit)*4);--s40:calc(var(--s-unit)*5);--s50:calc(var(--s-unit)*8);--s60:calc(var(--s-unit)*13);--s70:calc(var(--s-unit)*21);--s80:calc(var(--s-unit)*34)}body{--hl:var(--hl--base);background-color:var(--base);color:var(--text);font-family:var(--ff--base);font-size:var(--fz--base);letter-spacing:var(--lts--base);-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-underline-offset:.125em}*{line-height:calc(1em + var(--hl)*2)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--headings-ff,inherit);font-weight:var(--headings-fw,var(--fw--bold))}h1{font-size:var(--fz--3xl)}h2{font-size:var(--fz--2xl)}h3{font-size:var(--fz--xl)}h4{font-size:var(--fz--l)}h5,h6{font-size:var(--fz--m)}a{color:var(--link-c,var(--link));-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline)}small{--hl:var(--hl--s);font-size:var(--fz--xs)}b,strong{font-weight:var(--fw--bold)}sub,sup{--hl:var(--hl--xs);font-size:80%}code,kbd,samp,var{font-family:var(--ff--mono);letter-spacing:normal}:where(blockquote>p)+p{margin-block-start:var(--s10)}blockquote,q{font-style:italic}blockquote,pre{background-color:var(--base-2);padding:var(--s20)}caption,figcaption{font-size:var(--fz--s)}hr{block-size:0;border:none;border-block-start:1px solid var(--divider)}:is(ul,ol):where(:not([class])){list-style:revert;padding-inline-start:var(--list-ps,1.75em)}dt{font-weight:var(--fw--bold)}dd+dt{margin-block-start:var(--s20)}td,th{padding:var(--cells-p,.625em .875em)}::file-selector-button,button,input:not([type=range]),select,textarea{background-color:var(--controls-bgc,var(--base-2));border:1px solid var(--controls-bdc,var(--divider));padding:var(--controls-p,.25em .5em)}:disabled{opacity:var(--o--pp)}:focus-visible{outline-offset:var(--focus-offset,0)}@media (any-hover:hover){.set--hov:hover{--_notHov: }.set--hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--hov{--_isHov: }}.set--hov:is(:focus-visible,:focus-within){--_notHov: }.set--bdrsInner{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--bleed{--bleed:max(var(--gutter,var(--gutter--base)),calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}:is(ul,ol).set--revert{list-style:revert;padding-inline-start:var(--list-ps,1.75em)}.set--s{--s-unit:0.5em}
+@property --hl{syntax:"<length>";inherits:true;initial-value:.25rem}@property --sz--bleed{syntax:"<length-percentage>";initial-value:100svi;inherits:true}:root{--L:60%;--C:0.2;--red:oklch(var(--L) var(--C) 20);--orange:oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48);--yellow:oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80);--green:oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);--blue:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264);--purple:oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288);--pink:oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352);--gray:oklch(calc(var(--L) - 4%) calc(var(--C)/10) 240);--brand:#1e5f8c;--accent:#d94a6a;--base:#fcfcfc;--base-2:#f2f2f3;--text:#141414;--text-2:#4e5155;--link:oklch(50% 0.3 240);--divider:#dfe0e2;--shadow:rgba(20,20,21,.12);--neutral:#cbcccd;--shc:var(--shadow);--shsz--10:0px 1px 3px;--shsz--20:0px 2px 6px;--shsz--30:0px 4px 12px;--shsz--40:0px 8px 24px;--shsz--50:0px 16px 48px;--fz-mol:8;--hl-unit:calc(var(--fz--base)*0.125);--s-unit:calc(var(--fz--base)*0.5);--gutter--base:var(--s30);--flow--base:var(--s30);--flow--s:var(--s20)}:root:where([lang=ja]){--flow--base:var(--s35)}:root{--white:#fff;--black:#000;--fz--base:1rem;--fz--5xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 6));--fz--4xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 5));--fz--3xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 4));--fz--2xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 3));--fz--xl:calc(1em*var(--fz-mol)/(var(--fz-mol) - 2));--fz--l:calc(1em*var(--fz-mol)/(var(--fz-mol) - 1));--fz--m:1em;--fz--s:calc(1em*var(--fz-mol)/(var(--fz-mol) + 1));--fz--xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 2));--fz--2xs:calc(1em*var(--fz-mol)/(var(--fz-mol) + 3));--hl--base:calc(var(--hl-unit)*3);--hl--xs:var(--hl-unit);--hl--s:calc(var(--hl-unit)*2);--hl--l:calc(var(--hl-unit)*4);--lts--base:normal;--lts--s:-0.025em;--lts--l:0.05em;--lts--xl:0.1em;--ff--base:-apple-system,"BlinkMacSystemFont","Hiragino Sans",sans-serif;--ff--accent:Georgia,serif;--ff--mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;--fw--light:300;--fw--normal:400;--fw--bold:600;--o--mp:0.9;--o--p:0.75;--o--pp:0.5;--o--ppp:0.25;--bdrs--10:0.25rem;--bdrs--20:0.5rem;--bdrs--30:1rem;--bdrs--40:1.5rem;--bdrs--99:99rem;--sz--xs:400px;--sz--s:640px;--sz--m:880px;--sz--l:1200px;--sz--xl:1600px;--ar--og:1.91/1}.set--bxsh,:root{--bxsh--10:var(--shsz--10) var(--shc);--bxsh--20:var(--shsz--20) var(--shc);--bxsh--30:var(--shsz--30) var(--shc);--bxsh--40:var(--shsz--40) var(--shc);--bxsh--50:var(--shsz--50) var(--shc)}.set--s,:root{--s5:calc(var(--s-unit)*0.5);--s10:var(--s-unit);--s15:calc(var(--s-unit)*1.5);--s20:calc(var(--s-unit)*2);--s25:calc(var(--s-unit)*2.5);--s30:calc(var(--s-unit)*3);--s35:calc(var(--s-unit)*4);--s40:calc(var(--s-unit)*5);--s50:calc(var(--s-unit)*8);--s60:calc(var(--s-unit)*13);--s70:calc(var(--s-unit)*21);--s80:calc(var(--s-unit)*34)}body{--hl:var(--hl--base);background-color:var(--base);color:var(--text);font-family:var(--ff--base);font-size:var(--fz--base);letter-spacing:var(--lts--base);-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-underline-offset:.125em}*{line-height:calc(1em + var(--hl)*2)}:is(h1,h2,h3,h4,h5,h6){font-family:var(--headings-ff,inherit);font-weight:var(--headings-fw,var(--fw--bold))}h1{font-size:var(--fz--3xl)}h2{font-size:var(--fz--2xl)}h3{font-size:var(--fz--xl)}h4{font-size:var(--fz--l)}h5,h6{font-size:var(--fz--m)}a{color:var(--link-c,var(--link));-webkit-text-decoration:var(--link-td,underline);text-decoration:var(--link-td,underline)}small{--hl:var(--hl--s);font-size:var(--fz--xs)}b,strong{font-weight:var(--fw--bold)}sub,sup{--hl:var(--hl--xs);font-size:80%}code,kbd,samp,var{font-family:var(--ff--mono);letter-spacing:normal}:where(blockquote>p)+p{margin-block-start:var(--s10)}blockquote,q{font-style:italic}blockquote{background-color:var(--base-2);padding:var(--s20)}caption,figcaption{font-size:var(--fz--s)}hr{block-size:0;border:none;border-block-start:1px solid var(--divider)}:is(ul,ol):where(:not([class])){list-style:revert;padding-inline-start:var(--list-ps,1.75em)}dt{font-weight:var(--fw--bold)}dd+dt{margin-block-start:var(--s20)}td,th{padding:var(--cells-p,.625em .875em)}::file-selector-button,button,input:not([type=range]),select,textarea{background-color:var(--controls-bgc,var(--base-2));border:1px solid var(--controls-bdc,var(--divider));padding:var(--controls-p,.25em .5em)}:disabled{opacity:var(--o--pp)}:focus-visible{outline-offset:var(--focus-offset,0)}@media (any-hover:hover){.set--hov:hover{--_notHov: }.set--hov:not(:is(:hover,:focus-within)){--_isHov: }}@media (any-hover:none){.set--hov{--_isHov: }}.set--hov:is(:focus-visible,:focus-within){--_notHov: }.set--bdrsInner{--bdrs--inner:calc(var(--bdrs, 0px) - var(--p, 0px))}.set--bleed{--bleed:max(var(--gutter,var(--gutter--base)),calc((100cqi - min(100cqi, var(--contentSize, var(--sz--m)))) / 2))}.set--plain{background:none;border:none;border-radius:0;color:inherit;font:inherit;height:auto;line-height:calc(1em + var(--hl)*2);margin:0;max-height:none;max-width:none;min-height:0;min-width:0;padding:0;text-decoration:none;width:auto}:is(ul,ol).set--revert{list-style:revert;padding-inline-start:var(--list-ps,1.75em)}.set--s{--s-unit:0.5em}