lism-css 0.13.1 → 0.15.0

package/README.ja.md

@@ -19,7 +19,7 @@ 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` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
+- **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`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
@@ -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

@@ -18,7 +18,7 @@ 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.
+- **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.
@@ -147,7 +147,8 @@ 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` |
+| 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',
@@ -83,15 +85,15 @@ export default {
     prop: 'maxInlineSize',
     token: 'sz',
     tokenClass: 1,
+    presets: ['full'],
     exUtility: {
-      min: '',
       full: '',
       container: '',
     },
   },
-  ysz: { prop: 'blockSize', token: 'sz' },
-  'min-ysz': { prop: 'minBlockSize', token: 'sz' },
-  'max-ysz': { prop: 'maxBlockSize', token: 'sz' },
+  bsz: { prop: 'blockSize', token: 'sz' },
+  'min-bsz': { prop: 'minBlockSize', token: 'sz' },
+  'max-bsz': { prop: 'maxBlockSize', token: 'sz' },
 
   // bg
   bg: { prop: 'background', bp: 1 },
@@ -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 },
@@ -353,10 +350,11 @@ export default {
   // },
 
   // others
-  ovwrap: { prop: 'overflowWrap', presets: ['anywhere'] },
-  whspace: { prop: 'whiteSpace', presets: ['nowrap'] },
+  ovw: { prop: 'overflowWrap', presets: ['anywhere'] },
+  whs: { prop: 'whiteSpace', presets: ['nowrap'] },
   // wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
   float: { prop: 'float', presets: ['left', 'right'] },
   clear: { prop: 'clear', presets: ['both'] },
-  isolation: { prop: 'isolation', presets: ['isolate'] },
+  iso: { prop: 'isolation', presets: ['isolate'] },
+  wm: { prop: 'writingMode', presets: ['vertical-rl'], bp: 1 },
 } as const;

package/config/defaults/tokens.ts

@@ -7,8 +7,8 @@ export default {
   fw: ['light', 'normal', 'bold'],
   o: ['-10', '-20', '-30'],
   bdrs: ['10', '20', '30', '40', '99', 'inner'],
-  bxsh: ['10', '20', '30', '40'],
-  sz: ['xs', 's', 'm', 'l', 'xl', 'min', 'full', 'container'],
+  bxsh: ['10', '20', '30', '40', '50'],
+  sz: ['xs', 's', 'm', 'l', 'xl', 'container'],
   ar: ['og'],
   space: {
     pre: '--s',

package/config/defaults/traits.ts

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

package/dist/components/Dummy/Dummy.d.ts

@@ -1,6 +1,6 @@
 import { LismComponentProps } from '../Lism';
 /**
- * @deprecated DummyText / DummyImage (@lism-css/ui) を使用してください。
+ * @deprecated DummyText (@lism-css/ui) を使用してください。
  */
 export default function Dummy({ lang, ...props }: LismComponentProps & {
     lang?: string;

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/Lism/Lism.stories.d.ts

@@ -10,8 +10,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
 export declare const AsParagraph: Story;
-export declare const WithLismClass: Story;
-export declare const WithVariant: Story;
+export declare const WithClassName: Story;
 export declare const WithLayout: Story;
 export declare const ResponsiveArray: Story;
 export declare const ResponsiveObject: Story;

package/dist/components/atomic/Decorator/Decorator.d.ts

@@ -2,8 +2,6 @@ import { LismComponentProps } from '../../Lism/Lism';
 import { CssValue } from '../../../lib/types/LayoutProps';
 export interface DecoratorOwnProps {
     size?: CssValue;
-    clipPath?: string;
-    boxSizing?: string;
 }
 export type DecoratorProps = LismComponentProps & DecoratorOwnProps;
 export default function Decorator(props: DecoratorProps): import("react").JSX.Element;

package/dist/components/atomic/Icon/getProps.d.ts

@@ -15,7 +15,7 @@ export interface IconOwnProps {
     exProps?: Record<string, unknown>;
 }
 export type IconProps = LismProps & IconOwnProps;
-export default function getProps({ lismClass, as, icon, label, exProps, ..._props }: IconProps): {
+export default function getProps({ as, icon, label, exProps, ..._props }: IconProps): {
     Component: ElementType | "_SVG_";
     lismProps: {
         [key: string]: unknown;

package/dist/components/atomic/Icon/getProps.js

@@ -1,55 +1,55 @@
-import p from "./presets.js";
-function S(m) {
-  const c = {}, e = m.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
-  if (e) {
-    const [, f, t] = e, u = /([\w-]+)=["']([^"']*)["']/g;
-    let a;
-    for (; (a = u.exec(f)) !== null; ) {
-      const [, n, g] = a;
-      if (n === "style") {
-        const o = {};
-        g.split(";").forEach((s) => {
-          const [r, i] = s.split(":").map((l) => l.trim());
-          r && i && (o[r] = i);
-        }), c[n] = o;
+import _ from "./presets.js";
+function p(m) {
+  const s = {}, n = m.match(/<svg([^>]*?)>([\s\S]*?)<\/svg>/i);
+  if (n) {
+    const [, t, u] = n, a = /([\w-]+)=["']([^"']*)["']/g;
+    let r;
+    for (; (r = a.exec(t)) !== null; ) {
+      const [, c, o] = r;
+      if (c === "style") {
+        const e = {};
+        o.split(";").forEach((f) => {
+          const [i, l] = f.split(":").map((g) => g.trim());
+          i && l && (e[i] = l);
+        }), s[c] = e;
       } else
-        c[n] = g;
+        s[c] = o;
     }
-    return { svgProps: c, svgContent: t };
+    return { svgProps: s, svgContent: u };
   }
   return {};
 }
-function C({ lismClass: m, as: c, icon: e, label: f, exProps: t = {}, ...u }) {
-  let a = c || "span", n = "";
+function d({ as: m, icon: s, label: n, exProps: t = {}, ...u }) {
+  let a = m || "span", r = "";
   const {
-    style: g = {},
+    style: c = {},
     className: o = "",
-    ...s
+    ...e
   } = u;
-  let r = g, i = o;
-  if (s.viewBox) {
+  let f = c, i = o;
+  if (e.viewBox) {
     a = "svg";
-    const l = s.size;
-    l && delete s.size, s.width || (t.width = l || "1em"), s.height || (t.height = l || "1em");
-  } else if (s.src)
+    const l = e.size;
+    l && delete e.size, e.width || (t.width = l || "1em"), e.height || (t.height = l || "1em");
+  } else if (e.src)
     a = "img";
-  else if (e)
-    if (typeof e == "string")
-      if (e.startsWith("<svg")) {
+  else if (s)
+    if (typeof s == "string")
+      if (s.startsWith("<svg")) {
         a = "_SVG_";
-        const { svgProps: l = {}, svgContent: v = "" } = S(e), { class: h, style: y, ..._ } = l;
-        h && (i = i ? `${i} ${h}` : h), r = { ...r, ...y }, t = { ...t, ..._, fill: "currentColor" }, n = v;
+        const { svgProps: l = {}, svgContent: g = "" } = p(s), { class: v, style: h, ...y } = l;
+        v && (i = i ? `${i} ${v}` : v), f = { ...f, ...h }, t = { ...t, ...y, fill: "currentColor" }, r = g;
       } else {
-        const l = p[e] || null;
+        const l = _[s] || null;
         l != null && (a = "_SVG_", t = { ...t, ...l });
       }
-    else if (typeof e == "object" && e.as) {
-      const { as: l, ...v } = e;
-      a = l, t = { ...t, ...v };
+    else if (typeof s == "object" && s.as) {
+      const { as: l, ...g } = s;
+      a = l, t = { ...t, ...g };
     } else
-      a = e;
-  return f ? (t["aria-label"] = f, t.role = "img") : t["aria-hidden"] = "true", s.lismClass = m, s.atomic = "icon", i && (s.className = i), s.style = { ...r }, { Component: a, lismProps: s, exProps: t, content: n };
+      a = s;
+  return n ? (t["aria-label"] = n, t.role = "img") : t["aria-hidden"] = "true", e.atomic = "icon", i && (e.className = i), e.style = { ...f }, { Component: a, lismProps: e, exProps: t, content: r };
 }
 export {
-  C as default
+  d as default
 };

package/dist/components/index.d.ts

@@ -1,5 +1,5 @@
 export * from './Lism';
-/** @deprecated DummyText / DummyImage (@lism-css/ui) を使用してください */
+/** @deprecated DummyText (@lism-css/ui) を使用してください */
 export * from './Dummy';
 export * from './Text';
 export * from './Inline';

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

@@ -8,8 +8,8 @@ declare const _default: {
         readonly fw: readonly ["light", "normal", "bold"];
         readonly o: readonly ["-10", "-20", "-30"];
         readonly bdrs: readonly ["10", "20", "30", "40", "99", "inner"];
-        readonly bxsh: readonly ["10", "20", "30", "40"];
-        readonly sz: readonly ["xs", "s", "m", "l", "xl", "min", "full", "container"];
+        readonly bxsh: readonly ["10", "20", "30", "40", "50"];
+        readonly sz: readonly ["xs", "s", "m", "l", "xl", "container"];
         readonly ar: readonly ["og"];
         readonly space: {
             readonly pre: "--s";
@@ -36,7 +36,6 @@ declare const _default: {
             readonly token: "fz";
             readonly tokenClass: 1;
             readonly bp: 1;
-            readonly alwaysVar: 1;
         };
         readonly fw: {
             readonly prop: "fontWeight";
@@ -181,21 +180,21 @@ declare const _default: {
             readonly prop: "maxInlineSize";
             readonly token: "sz";
             readonly tokenClass: 1;
+            readonly presets: readonly ["full"];
             readonly exUtility: {
-                readonly min: "";
                 readonly full: "";
                 readonly container: "";
             };
         };
-        readonly ysz: {
+        readonly bsz: {
             readonly prop: "blockSize";
             readonly token: "sz";
         };
-        readonly 'min-ysz': {
+        readonly 'min-bsz': {
             readonly prop: "minBlockSize";
             readonly token: "sz";
         };
-        readonly 'max-ysz': {
+        readonly 'max-bsz': {
             readonly prop: "maxBlockSize";
             readonly token: "sz";
         };
@@ -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: {
@@ -767,11 +756,11 @@ declare const _default: {
             readonly prop: "order";
             readonly presets: readonly ["0", "-1", "1"];
         };
-        readonly ovwrap: {
+        readonly ovw: {
             readonly prop: "overflowWrap";
             readonly presets: readonly ["anywhere"];
         };
-        readonly whspace: {
+        readonly whs: {
             readonly prop: "whiteSpace";
             readonly presets: readonly ["nowrap"];
         };
@@ -783,10 +772,15 @@ declare const _default: {
             readonly prop: "clear";
             readonly presets: readonly ["both"];
         };
-        readonly isolation: {
+        readonly iso: {
             readonly prop: "isolation";
             readonly presets: readonly ["isolate"];
         };
+        readonly wm: {
+            readonly prop: "writingMode";
+            readonly presets: readonly ["vertical-rl"];
+            readonly bp: 1;
+        };
     };
     readonly traits: {
         readonly isContainer: "is--container";
@@ -802,7 +796,10 @@ declare const _default: {
         readonly isCoverLink: "is--coverLink";
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
-        readonly isVertical: "is--vertical";
+        readonly hasTransition: "has--transition";
+        readonly hasGutter: "has--gutter";
+        readonly hasSnap: "has--snap";
+        readonly hasMask: "has--mask";
     };
 };
 export default _default;