lism-css 0.14.0 → 0.16.0

package/README.ja.md

@@ -9,7 +9,7 @@
 
 Lism CSS は、WEBサイトのレイアウトを素早く、かつ美しく構築するための軽量な **CSS設計フレームワーク**です。
 
-[Every Layout](https://every-layout.dev/) のレイアウトプリミティブ、[Tailwind CSS](https://tailwindcss.com/) のユーティリティファーストアプローチ、[ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/) のレイヤリング等に着想を得て、それらを統合して設計されています。
+[Every Layout](https://every-layout.dev/) のレイアウトプリミティブやハーモニックモジュラースケーリング、[Tailwind CSS](https://tailwindcss.com/) のCSSプロパティ単位でのユーティリティファーストなアプローチから着想を得て、独自のCSS設計を組み立てました。
 
 ビルドステップや設定は不要です。CDN 経由で CSS ファイルを読み込むか、npm からインポートするだけですぐに使い始められます。  
 React / Astro 向けのコンポーネントも提供しており、propsを通じてCSSクラスとカスタムプロパティに変換されるため、ランタイムでのスタイル生成なしにコンポーネントベースの開発が可能です。
@@ -18,8 +18,8 @@ React / Astro 向けのコンポーネントも提供しており、propsを通
 
 - **軽量** - CSS バンドル全体で約 30 KB（gzip 圧縮時 約 8 KB）と、軽量です。
 - **ゼロビルドフレームワーク** — CSS ファイルを読み込むだけで、プレーン HTML でも動作します。ビルドツール、プリプロセッサ、設定は不要。CDN または npm で利用可能。
-- **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`l--flex`、`l--stack`、`l--grid`、`l--columns`、`l--center`、`l--sideMain` など）で、カスタム CSS を書かずに一般的なレイアウトパターンを組み立てられます。
-- **CSS レイヤー構造** — `@layer`（lism-base → lism-primitive → lism-component → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-primitive` の内部は `trait` / `layout` / `atomic` のサブレイヤーに分かれています。`lism-component` は BEM 構造の `c--` コンポーネント用レイヤー、`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
+- **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`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`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
@@ -128,7 +128,7 @@ import { Box, Flex, Stack, Text, Heading } from 'lism-css/astro';
 Lism CSS は以下の React / Astro コンポーネントを提供します:
 
 **レイアウトコンポーネント:**
-Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
+Lism, Box, Flow, Flex, Cluster, Stack, Grid, AutoColumns, SwitchColumns, WithSide, Center, Columns, Frame
 
 **構造コンポーネント:**
 Container, Wrapper, Layer, BoxLink
@@ -147,7 +147,7 @@ Lism CSS は構造化された命名規則を CSS クラスに使用していま
 
 | タイプ | パターン | 例 |
 |--------|---------|-----|
-| レイアウトプリミティブ | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
+| レイアウトプリミティブ | `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` |
 | ブレークポイント | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
@@ -183,7 +183,7 @@ Lism CSS は一貫したデザインのための CSS カスタムプロパティ
 - **スペーシング:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80`（rem 値にマッピング）
 - **フォントサイズ:** `--fz--2xs` 〜 `--fz--5xl`
 - **ボーダー半径:** `--bdrs--10`（0.25rem）〜 `--bdrs--99`（99rem）
-- **シャドウ:** `--bxsh--10` 〜 `--bxsh--40`（シャドウカラー設定可能）
+- **シャドウ:** `--bxsh--10` 〜 `--bxsh--50`（シャドウカラー設定可能）
 - **コンテナサイズ:** `--sz--xs`（32rem）〜 `--sz--xl`（1600px）
 
 ## UI コンポーネント

package/README.md

@@ -9,7 +9,7 @@
 
 Lism CSS is a lightweight **CSS design framework** for quickly and beautifully building website layouts.
 
-Inspired by [Every Layout](https://every-layout.dev/)'s layout primitives, [Tailwind CSS](https://tailwindcss.com/)'s utility-first approach, and [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/)'s layering concept, Lism CSS integrates these ideas into a cohesive architecture.
+Inspired by [Every Layout](https://every-layout.dev/)'s layout primitives and harmonic modular scaling, and by [Tailwind CSS](https://tailwindcss.com/)'s utility-first approach of single-property classes, Lism CSS is built as an original CSS design.
 
 No build step or configuration is required. Simply load the CSS file via CDN or import it from npm to get started. It also provides React and Astro components whose props are converted into CSS classes and custom properties, enabling component-based development without runtime style generation.
 
@@ -17,8 +17,8 @@ No build step or configuration is required. Simply load the CSS file via CDN or
 
 - **Lightweight** — The entire CSS bundle is approximately 30 KB (~8 KB gzipped).
 - **Zero-Build Framework** — Works with plain HTML by simply loading a CSS file. No build tool, preprocessor, or configuration needed. Available via CDN or npm.
-- **Layout-First Primitive Architecture** — Pre-built layout primitives (`l--flex`, `l--stack`, `l--grid`, `l--columns`, `l--center`, `l--sideMain`, etc.) let you compose common layout patterns without writing custom CSS.
-- **CSS Layer Structure** — Uses `@layer` (lism-base → lism-primitive → lism-component → lism-custom → lism-utility) for clear specificity management. `lism-primitive` contains `trait` / `layout` / `atomic` sub-layers. `lism-component` is the layer for BEM-structured `c--` components. `lism-custom` is the layer for user-defined classes with custom prefixes. Minimizes specificity conflicts.
+- **Layout-First Primitive Architecture** — Pre-built layout primitives (`l--flex`, `l--stack`, `l--grid`, `l--columns`, `l--center`, `l--withSide`, etc.) let you compose common layout patterns without writing custom CSS.
+- **CSS Layer Structure** — Uses `@layer` (lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility) for clear specificity management. `lism-trait` is the layer for `is--` / `has--` trait classes. `lism-primitive` contains `layout` / `atomic` sub-layers. `lism-component` is the layer for BEM-structured `c--` components. `lism-custom` is the layer for user-defined classes with custom prefixes. Minimizes specificity conflicts.
 - **Design Tokens** — Colors, spacing, font sizes, shadows, and border radii are managed as CSS custom properties. Easy to customize by overriding variables.
 - **Flexible Property Classes** — A `-{prop}:{value}` naming convention (e.g., `-p:20`, `-bgc:base-2`, `-fz:l`) maps CSS properties to utility classes for quick, readable styling.
 - **Responsive System** — Breakpoint-specific classes and CSS variables (e.g., `-p_sm`, `-p_md`) use container queries by default for parent-based responsive design. Switchable to media queries.
@@ -127,7 +127,7 @@ 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, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
+Lism, Box, Flow, Flex, Cluster, Stack, Grid, AutoColumns, SwitchColumns, WithSide, Center, Columns, Frame
 
 **Structure Components:**
 Container, Wrapper, Layer, BoxLink
@@ -146,8 +146,9 @@ Lism CSS uses a structured naming convention for CSS classes:
 
 | Type | Pattern | Examples |
 |------|---------|----------|
-| Layout Primitive | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
-| Trait Primitive | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| Layout Primitive | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--withSide` |
+| Trait Class (role) | `is--{name}` | `is--wrapper`, `is--container`, `is--layer`, `is--boxLink` |
+| Trait Class (feature) | `has--{name}` | `has--transition`, `has--gutter`, `has--snap` |
 | Property Class | `-{prop}:{value}` | `-p:20`, `-m:auto`, `-bgc:base-2`, `-fz:l`, `-ta:center` |
 | Breakpoint | `-{prop}_{bp}` | `-p_sm`, `-g_md`, `-fz_lg` |
 | Utility Class | `u--{name}` | `u--cbox` |
@@ -182,7 +183,7 @@ Lism CSS provides CSS custom properties for consistent design:
 - **Spacing:** `--s5`, `--s10`, `--s15`, `--s20`, `--s30`, `--s40` … `--s80` (mapped to rem values)
 - **Font Sizes:** `--fz--2xs` through `--fz--5xl`
 - **Border Radius:** `--bdrs--10` (0.25rem) through `--bdrs--99` (99rem)
-- **Shadows:** `--bxsh--10` through `--bxsh--40` with configurable shadow colors
+- **Shadows:** `--bxsh--10` through `--bxsh--50` with configurable shadow colors
 - **Container Sizes:** `--sz--xs` (32rem) through `--sz--xl` (1600px)
 
 ## UI Components

package/bin/build-config.js

@@ -51,7 +51,7 @@ function generateUtilities(propConfig, TOKENS) {
  * @returns {string} SCSS形式の文字列
  */
 function generatePropScss(propKey, propConfig, TOKENS) {
-  const { prop = '', bp, isVar, alwaysVar, overwriteBaseVar, important } = propConfig;
+  const { prop = '', bp, isVar, alwaysVar, important } = propConfig;
 
   // styleが定義されている場合はそれを使用、なければpropKeyをそのまま使用
   const utilities = generateUtilities(propConfig, TOKENS);
@@ -114,9 +114,6 @@ function generatePropScss(propKey, propConfig, TOKENS) {
   if (alwaysVar !== undefined) {
     scss += `    alwaysVar: ${alwaysVar},\n`;
   }
-  if (overwriteBaseVar !== undefined) {
-    scss += `    overwriteBaseVar: ${overwriteBaseVar},\n`;
-  }
   if (important !== undefined) {
     scss += `    important: ${important},\n`;
   }

package/bin/cli.mjs

@@ -17,7 +17,17 @@ console.log('🤖 projectRoot:', projectRoot);
 
 // 設定ファイルのパス
 const defaultConfigPath = path.resolve(__dirname, '../config/default-config.js');
-const userConfigPath = path.resolve(projectRoot, 'lism.config.js');
+
+// ユーザー設定ファイルを検索（優先順: .js → .mjs）
+const CONFIG_SEARCH = ['lism.config.js', 'lism.config.mjs'];
+function findUserConfigPath() {
+  for (const name of CONFIG_SEARCH) {
+    const abs = path.resolve(projectRoot, name);
+    if (fs.existsSync(abs)) return abs;
+  }
+  return null;
+}
+const userConfigPath = findUserConfigPath();
 
 // コマンドライン引数の先頭をサブコマンドとして解釈（デフォルトは build-config）
 const args = process.argv.slice(2);
@@ -30,9 +40,9 @@ async function main() {
     const defaultConfigModule = await import(pathToFileURL(defaultConfigPath).href);
     const defaultConfig = defaultConfigModule?.default || {};
 
-    // user の lism.config.js は存在する時のみ読み込む
+    // user の lism.config.{js,mjs} は存在する時のみ読み込む
     let userConfig = {};
-    if (fs.existsSync(userConfigPath)) {
+    if (userConfigPath) {
       const userConfigModule = await import(pathToFileURL(userConfigPath).href);
       userConfig = userConfigModule?.default || {};
 

package/config/defaults/props.ts

@@ -2,7 +2,7 @@
  * isVar: 1 → クラス出力はせずstyle属性での変数出力のみ (--bdw, --keycolor など)
  * bp: 0 → Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
  * bp: 1 → .-prop と --prop の セットがベースにあり、.-prop_bp と .--prop_bp で ブレイクポイント指定できる。
- *       .-prop{propaty:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{propaty:value} となる。
+ *       .-prop{property:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{property:value} となる。
  *
  * ↓コンポーネント処理で使用される
  * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
@@ -10,8 +10,10 @@
  * shorthands: → コンポーネント側で短く書くための設定
  *
  * ↓SCSS出力で使用される
- * alwaysVar: 1 → .-prop,[class*=-prop:] {propaty:var(--prop)} で、ユーティリティクラス時も常に変数管理となる。
- * overwriteBaseVar: 1 → ブレイクポイントクラスで --prop: var(--prop_$bp) がセットされ、常にベース変数の --prop で値が取得できるようになる。
+ * alwaysVar: 1 → state変数扱い。 .-prop,[class*=-prop:] {property:var(--prop)} の base 出力となり、
+ *   ユーティリティクラスは --prop をセットする形になる。
+ *   加えて BPクラスも .-prop_$bp { property: var(--prop); --prop: var(--prop_$bp) !important; } を出力し、
+ *   常に --prop が当該要素の現在値になるよう上書きされる（consumer が --prop を参照できる）。
  * important: 1 → !important を付けて最終的に出力する
  */
 
@@ -21,7 +23,7 @@ const PLACE_SHORTHANDS = { s: 'start', e: 'end', c: 'center', fs: 'flex-start',
 
 export default {
   f: { prop: 'font', presets: ['inherit'] },
-  fz: { prop: 'fontSize', token: 'fz', tokenClass: 1, bp: 1, alwaysVar: 1 },
+  fz: { prop: 'fontSize', token: 'fz', tokenClass: 1, bp: 1 },
   fw: {
     prop: 'fontWeight',
     token: 'fw',
@@ -153,7 +155,6 @@ export default {
     tokenClass: 1,
     bp: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
   },
   'bdrs-tl': { prop: 'borderTopLeftRadius', token: 'bdrs' },
   'bdrs-tr': { prop: 'borderTopRightRadius', token: 'bdrs' },
@@ -164,7 +165,7 @@ export default {
   'bdrs-es': { prop: 'borderEndStartRadius', token: 'bdrs' },
   'bdrs-ee': { prop: 'borderEndEndRadius', token: 'bdrs' },
 
-  bxsh: { prop: 'boxShadow', utils: { 0: 'none' }, token: 'bxsh', tokenClass: 1, bp: 1, alwaysVar: 1 },
+  bxsh: { prop: 'boxShadow', utils: { 0: 'none' }, token: 'bxsh', tokenClass: 1, bp: 1 },
 
   // position
   pos: {
@@ -191,11 +192,10 @@ export default {
     token: 'space',
     tokenClass: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1,
   },
-  px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
-  py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+  px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
+  py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 1, bp: 1 },
   'px-s': { prop: 'paddingInlineStart', token: 'space', bp: 1 },
   'px-e': { prop: 'paddingInlineEnd', token: 'space', bp: 1 },
   'py-s': { prop: 'paddingBlockStart', token: 'space', bp: 1 },
@@ -210,11 +210,10 @@ export default {
     token: 'space',
     tokenClass: 1,
     alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1,
   },
-  mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
-  my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+  mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
+  my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 1, bp: 1 },
   'mx-s': { prop: 'marginInlineStart', presets: ['auto'], token: 'space', bp: 1 },
   'mx-e': { prop: 'marginInlineEnd', presets: ['auto'], token: 'space', bp: 1 },
   'my-s': { prop: 'marginBlockStart', token: 'space', bp: 1, presets: ['auto', '0'], tokenClass: 1 },
@@ -230,8 +229,6 @@ export default {
     exUtility: { inherit: { gap: 'inherit' } },
     token: 'space',
     tokenClass: 1,
-    alwaysVar: 1,
-    overwriteBaseVar: 1,
     bp: 1,
   },
   cg: { prop: 'columnGap', token: 'space', bp: 1 },

package/config/defaults/tokens.ts

@@ -5,9 +5,9 @@ export default {
   lts: ['base', 's', 'l'],
   ff: ['base', 'accent', 'mono'],
   fw: ['light', 'normal', 'bold'],
-  o: ['-10', '-20', '-30'],
+  o: ['mp', 'p', 'pp', 'ppp'],
   bdrs: ['10', '20', '30', '40', '99', 'inner'],
-  bxsh: ['10', '20', '30', '40'],
+  bxsh: ['10', '20', '30', '40', '50'],
   sz: ['xs', 's', 'm', 'l', 'xl', 'container'],
   ar: ['og'],
   space: {

package/config/defaults/traits.ts

@@ -12,4 +12,8 @@ export default {
   isCoverLink: 'is--coverLink',
   isSide: 'is--side',
   isSkipFlow: 'is--skipFlow',
+  hasTransition: 'has--transition',
+  hasGutter: 'has--gutter',
+  hasSnap: 'has--snap',
+  hasMask: 'has--mask',
 } as const;

package/dist/components/Lism/Lism.d.ts

@@ -3,9 +3,10 @@ import { LismProps } from '../../lib/getLismProps';
 import { LayoutSpecificProps } from '../../lib/types/LayoutProps';
 type ReactStyleWithCustomProps = CSSProperties & Record<`--${string}`, string | number | undefined>;
 /** 要素固有の HTML Props + 共通オプション */
-type LismElementProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'style'> & {
+type LismElementProps<T extends ElementType> = Omit<ComponentPropsWithoutRef<T>, 'style' | 'className'> & {
     as?: T;
     children?: ReactNode;
+    className?: string;
     exProps?: Record<string, unknown>;
     /** React では camelCase のみ有効（kebab-case は実行時に無視される） */
     style?: ReactStyleWithCustomProps;

package/dist/components/index.d.ts

@@ -14,12 +14,12 @@ export * from './layout/Cluster';
 export * from './layout/Columns';
 export * from './layout/Flex';
 export * from './layout/Flow';
-export * from './layout/FluidCols';
+export * from './layout/AutoColumns';
 export * from './layout/Frame';
 export * from './layout/Grid';
-export * from './layout/SideMain';
+export * from './layout/WithSide';
 export * from './layout/Stack';
-export * from './layout/SwitchCols';
+export * from './layout/SwitchColumns';
 export * from './layout/TileGrid';
 export * from './state/Container';
 export * from './state/Layer';

package/dist/components/index.js

@@ -1,64 +1,67 @@
-import { default as o } from "./layout/Box/index.js";
-import { default as t } from "./state/BoxLink/index.js";
-import { default as l } from "./layout/Center/index.js";
-import { default as s } from "./layout/Cluster/index.js";
-import { default as u } from "./layout/Columns/index.js";
-import { default as x } from "./state/Container/index.js";
-import { default as n } from "./atomic/Decorator/index.js";
-import { default as L } from "./atomic/Divider/index.js";
-import { default as F } from "./Dummy/index.js";
-import { default as k } from "./layout/Flex/index.js";
-import { default as G } from "./layout/Flow/index.js";
-import { default as w } from "./layout/FluidCols/index.js";
+import { default as t, default as o } from "./layout/AutoColumns/index.js";
+import { default as f } from "./layout/Box/index.js";
+import { default as s } from "./state/BoxLink/index.js";
+import { default as u } from "./layout/Center/index.js";
+import { default as p } from "./layout/Cluster/index.js";
+import { default as i } from "./layout/Columns/index.js";
+import { default as C } from "./state/Container/index.js";
+import { default as L } from "./atomic/Decorator/index.js";
+import { default as F } from "./atomic/Divider/index.js";
+import { default as k } from "./Dummy/index.js";
+import { default as D } from "./layout/Flex/index.js";
+import { default as I } from "./layout/Flow/index.js";
 import { default as B } from "./layout/Frame/index.js";
 import { default as T } from "./layout/Grid/index.js";
-import { default as h } from "./Group/index.js";
-import { default as H } from "./Heading/index.js";
+import { default as g } from "./Group/index.js";
+import { default as A } from "./Heading/index.js";
 import { default as b } from "./atomic/Icon/index.js";
 import { default as q } from "./Inline/index.js";
-import { default as A } from "./state/Layer/index.js";
-import { default as J } from "./Link/index.js";
-import { default as N } from "./Lism/index.js";
-import { default as P } from "./List/index.js";
-import { default as R } from "./List/ListItem.js";
-import { default as V } from "./Media/index.js";
-import { default as Y } from "./layout/SideMain/index.js";
-import { default as _ } from "./atomic/Spacer/index.js";
-import { default as ee } from "./layout/Stack/index.js";
-import { default as oe } from "./layout/SwitchCols/index.js";
-import { default as te } from "./Text/index.js";
-import { default as le } from "./layout/TileGrid/index.js";
-import { default as se } from "./state/Wrapper/index.js";
+import { default as E } from "./state/Layer/index.js";
+import { default as K } from "./Link/index.js";
+import { default as O } from "./Lism/index.js";
+import { default as Q } from "./List/index.js";
+import { default as U } from "./List/ListItem.js";
+import { default as X } from "./Media/index.js";
+import { default as Z, default as _ } from "./layout/WithSide/index.js";
+import { default as ee } from "./atomic/Spacer/index.js";
+import { default as te } from "./layout/Stack/index.js";
+import { default as re, default as fe } from "./layout/SwitchColumns/index.js";
+import { default as se } from "./Text/index.js";
+import { default as ue } from "./layout/TileGrid/index.js";
+import { default as pe } from "./state/Wrapper/index.js";
 export {
-  o as Box,
-  t as BoxLink,
-  l as Center,
-  s as Cluster,
-  u as Columns,
-  x as Container,
-  n as Decorator,
-  L as Divider,
-  F as Dummy,
-  k as Flex,
-  G as Flow,
-  w as FluidCols,
+  t as AutoColumns,
+  f as Box,
+  s as BoxLink,
+  u as Center,
+  p as Cluster,
+  i as Columns,
+  C as Container,
+  L as Decorator,
+  F as Divider,
+  k as Dummy,
+  D as Flex,
+  I as Flow,
+  o as FluidCols,
   B as Frame,
   T as Grid,
-  h as Group,
-  H as Heading,
+  g as Group,
+  A as Heading,
   b as Icon,
   q as Inline,
-  A as Layer,
-  J as Link,
-  N as Lism,
-  P as List,
-  R as ListItem,
-  V as Media,
-  Y as SideMain,
-  _ as Spacer,
-  ee as Stack,
-  oe as SwitchCols,
-  te as Text,
-  le as TileGrid,
-  se as Wrapper
+  E as Layer,
+  K as Link,
+  O as Lism,
+  Q as List,
+  U as ListItem,
+  X as Media,
+  Z as SideMain,
+  ee as Spacer,
+  te as Stack,
+  re as SwitchCols,
+  fe as SwitchColumns,
+  se as Text,
+  ue as TileGrid,
+  _ as WithSide,
+  pe as Wrapper
 };

package/dist/components/layout/AutoColumns/AutoColumns.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { LayoutComponentProps } from '../../Lism';
+import { AutoColumnsProps } from '../../../lib/types/LayoutProps';
+export default function AutoColumns<T extends ElementType = 'div'>(props: LayoutComponentProps<T, AutoColumnsProps>): import("react").JSX.Element;

package/dist/components/layout/{FluidCols/FluidCols.stories.d.ts → AutoColumns/AutoColumns.stories.d.ts}

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { FluidCols } from './index';
-declare const meta: Meta<typeof FluidCols>;
+import { AutoColumns } from './index';
+declare const meta: Meta<typeof AutoColumns>;
 export default meta;
-type Story = StoryObj<typeof FluidCols>;
+type Story = StoryObj<typeof AutoColumns>;
 export declare const Default: Story;
 export declare const WithAutoFill: Story;

package/dist/components/layout/AutoColumns/index.d.ts

@@ -0,0 +1,3 @@
+export { default as AutoColumns } from './AutoColumns';
+/** @deprecated `AutoColumns` に名称変更されました。 */
+export { default as FluidCols } from './AutoColumns';

package/dist/components/layout/AutoColumns/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import u from "../../Lism/index.js";
+function n(o) {
+  return /* @__PURE__ */ t(u, { layout: "autoColumns", ...o });
+}
+export {
+  n as default
+};

package/dist/components/layout/SwitchColumns/SwitchColumns.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { LayoutComponentProps } from '../../Lism';
+import { SwitchColumnsProps } from '../../../lib/types/LayoutProps';
+export default function SwitchColumns<T extends ElementType = 'div'>(props: LayoutComponentProps<T, SwitchColumnsProps>): import("react").JSX.Element;

package/dist/components/layout/{SwitchCols/SwitchCols.stories.d.ts → SwitchColumns/SwitchColumns.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { SwitchCols } from './index';
-declare const meta: Meta<typeof SwitchCols>;
+import { SwitchColumns } from './index';
+declare const meta: Meta<typeof SwitchColumns>;
 export default meta;
-type Story = StoryObj<typeof SwitchCols>;
+type Story = StoryObj<typeof SwitchColumns>;
 export declare const Default: Story;
 export declare const WithBreakSize: Story;
 export declare const ThreeColumns: Story;

package/dist/components/layout/SwitchColumns/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SwitchColumns } from './SwitchColumns';
+/** @deprecated `SwitchColumns` に名称変更されました。 */
+export { default as SwitchCols } from './SwitchColumns';

package/dist/components/layout/SwitchColumns/index.js

@@ -0,0 +1,8 @@
+import { jsx as t } from "react/jsx-runtime";
+import m from "../../Lism/index.js";
+function s(o) {
+  return /* @__PURE__ */ t(m, { layout: "switchColumns", ...o });
+}
+export {
+  s as default
+};

package/dist/components/layout/WithSide/WithSide.d.ts

@@ -0,0 +1,4 @@
+import { ElementType } from 'react';
+import { LayoutComponentProps } from '../../Lism';
+import { WithSideProps } from '../../../lib/types/LayoutProps';
+export default function WithSide<T extends ElementType = 'div'>(props: LayoutComponentProps<T, WithSideProps>): import("react").JSX.Element;

package/dist/components/layout/{SideMain/SideMain.stories.d.ts → WithSide/WithSide.stories.d.ts}

@@ -1,8 +1,8 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
-import { SideMain } from './index';
-declare const meta: Meta<typeof SideMain>;
+import { WithSide } from './index';
+declare const meta: Meta<typeof WithSide>;
 export default meta;
-type Story = StoryObj<typeof SideMain>;
+type Story = StoryObj<typeof WithSide>;
 export declare const Default: Story;
 export declare const WithSideWidth: Story;
 export declare const WithMainWidth: Story;

package/dist/components/layout/WithSide/index.d.ts

@@ -0,0 +1,3 @@
+export { default as WithSide } from './WithSide';
+/** @deprecated `WithSide` に名称変更されました。 */
+export { default as SideMain } from './WithSide';

package/dist/components/layout/WithSide/index.js

@@ -0,0 +1,8 @@
+import { jsx as i } from "react/jsx-runtime";
+import o from "../../Lism/index.js";
+function m(t) {
+  return /* @__PURE__ */ i(o, { layout: "withSide", ...t });
+}
+export {
+  m as default
+};

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

@@ -6,9 +6,9 @@ declare const _default: {
         readonly lts: readonly ["base", "s", "l"];
         readonly ff: readonly ["base", "accent", "mono"];
         readonly fw: readonly ["light", "normal", "bold"];
-        readonly o: readonly ["-10", "-20", "-30"];
+        readonly o: readonly ["mp", "p", "pp", "ppp"];
         readonly bdrs: readonly ["10", "20", "30", "40", "99", "inner"];
-        readonly bxsh: readonly ["10", "20", "30", "40"];
+        readonly bxsh: readonly ["10", "20", "30", "40", "50"];
         readonly sz: readonly ["xs", "s", "m", "l", "xl", "container"];
         readonly ar: readonly ["og"];
         readonly space: {
@@ -36,7 +36,6 @@ declare const _default: {
             readonly token: "fz";
             readonly tokenClass: 1;
             readonly bp: 1;
-            readonly alwaysVar: 1;
         };
         readonly fw: {
             readonly prop: "fontWeight";
@@ -301,7 +300,6 @@ declare const _default: {
             readonly tokenClass: 1;
             readonly bp: 1;
             readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
         };
         readonly 'bdrs-tl': {
             readonly prop: "borderTopLeftRadius";
@@ -343,7 +341,6 @@ declare const _default: {
             readonly token: "bxsh";
             readonly tokenClass: 1;
             readonly bp: 1;
-            readonly alwaysVar: 1;
         };
         readonly pos: {
             readonly prop: "position";
@@ -422,7 +419,6 @@ declare const _default: {
             readonly token: "space";
             readonly tokenClass: 1;
             readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
         readonly px: {
@@ -430,7 +426,6 @@ declare const _default: {
             readonly presets: readonly ["0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly py: {
@@ -438,7 +433,6 @@ declare const _default: {
             readonly presets: readonly ["0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly 'px-s': {
@@ -487,7 +481,6 @@ declare const _default: {
             readonly token: "space";
             readonly tokenClass: 1;
             readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
         readonly mx: {
@@ -495,7 +488,6 @@ declare const _default: {
             readonly presets: readonly ["auto", "0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly my: {
@@ -503,7 +495,6 @@ declare const _default: {
             readonly presets: readonly ["auto", "0"];
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
             readonly bp: 1;
         };
         readonly 'mx-s': {
@@ -561,8 +552,6 @@ declare const _default: {
             };
             readonly token: "space";
             readonly tokenClass: 1;
-            readonly alwaysVar: 1;
-            readonly overwriteBaseVar: 1;
             readonly bp: 1;
         };
         readonly cg: {
@@ -807,6 +796,10 @@ declare const _default: {
         readonly isCoverLink: "is--coverLink";
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
+        readonly hasTransition: "has--transition";
+        readonly hasGutter: "has--gutter";
+        readonly hasSnap: "has--snap";
+        readonly hasMask: "has--mask";
     };
 };
 export default _default;