lism-css 0.12.0 → 0.13.1

package/README.ja.md

@@ -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-reset → lism-base → lism-modules → lism-custom → lism-utility）を使用した明確な詳細度管理。`lism-custom` はユーザー独自プレフィックスのクラス用レイヤーです。詳細度の衝突を最小限に抑えます。
+- **レイアウト優先のプリミティブアーキテクチャ** — レイアウトプリミティブ（`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 カスタムプロパティで管理。変数を上書きするだけで簡単にカスタマイズできます。
 - **柔軟なプロップクラス** — `-{prop}:{value}` の命名規則（例: `-p:20`、`-bgc:base-2`、`-fz:l`）で CSS プロパティをユーティリティクラスにマッピングし、素早く読みやすいスタイリングを実現します。
 - **レスポンシブシステム** — ブレークポイント固有のクラスと CSS 変数（例: `-p_sm`、`-p_md`）にデフォルトでコンテナクエリを採用し、親要素ベースのレスポンシブデザインを実現。メディアクエリへの切り替えも可能。
@@ -131,7 +131,7 @@ Lism CSS は以下の React / Astro コンポーネントを提供します:
 Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
 
 **構造コンポーネント:**
-Container, Wrapper, Layer, LinkBox
+Container, Wrapper, Layer, BoxLink
 
 **コンテンツコンポーネント:**
 Text, Heading, Inline, Link, Group, List
@@ -147,8 +147,8 @@ Lism CSS は構造化された命名規則を CSS クラスに使用していま
 
 | タイプ | パターン | 例 |
 |--------|---------|-----|
-| レイアウトモジュール | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
-| ステートモジュール | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| レイアウトプリミティブ | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
+| トレイトプリミティブ | `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` |
 | ユーティリティクラス | `u--{name}` | `u--cbox` |

package/README.md

@@ -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 Module Architecture** — Pre-built layout modules (`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-reset → lism-base → lism-modules → lism-custom → lism-utility) for clear specificity management. `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--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.
 - **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.
@@ -130,7 +130,7 @@ Lism CSS provides the following React and Astro components:
 Lism, Box, Flow, Flex, Cluster, Stack, Grid, FluidCols, SwitchCols, SideMain, Center, Columns, Frame
 
 **Structure Components:**
-Container, Wrapper, Layer, LinkBox
+Container, Wrapper, Layer, BoxLink
 
 **Content Components:**
 Text, Heading, Inline, Link, Group, List
@@ -146,8 +146,8 @@ Lism CSS uses a structured naming convention for CSS classes:
 
 | Type | Pattern | Examples |
 |------|---------|----------|
-| Layout Module | `l--{name}` | `l--flex`, `l--grid`, `l--stack`, `l--center`, `l--columns`, `l--sideMain` |
-| State Module | `is--{name}` | `is--wrapper`, `is--container`, `is--layer` |
+| 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` |
 | 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` |
@@ -244,7 +244,7 @@ claude mcp add lism-css -- npx -y @lism-css/mcp
 
 ## Documentation
 
-For full documentation, visit [lism-css.com](https://lism-css.com).
+For full documentation, visit [lism-css.com/en](https://lism-css.com/en/).
 
 ## Community
 

package/config/default-config.ts

@@ -1,9 +1,9 @@
 import TOKENS from './defaults/tokens';
 import PROPS from './defaults/props';
-import STATES from './defaults/states';
+import TRAITS from './defaults/traits';
 
 export default {
   tokens: TOKENS,
   props: PROPS,
-  states: STATES,
+  traits: TRAITS,
 } as const;

package/config/defaults/{states.ts → traits.ts}

@@ -8,7 +8,8 @@ export default {
     tokenKey: 'sz',
   },
   isLayer: 'is--layer',
-  isLinkBox: 'is--linkBox',
+  isBoxLink: 'is--boxLink',
+  isCoverLink: 'is--coverLink',
   isSide: 'is--side',
   isSkipFlow: 'is--skipFlow',
   isVertical: 'is--vertical',

package/config/index.ts

@@ -17,7 +17,7 @@ if (typeof window !== 'undefined' && window._LISM_CSS_CONFIG_) {
 
 export const CONFIG = mergedConfig;
 
-const { tokens, props, states } = CONFIG;
+const { tokens, props, traits } = CONFIG;
 
 const tokensWithColor = {
   color: [...tokens.c.values, ...tokens.palette.values],
@@ -28,8 +28,8 @@ const tokensWithColor = {
 export const TOKENS = arrayConvertToSet(structuredClone(tokensWithColor));
 export const PROPS = arrayConvertToSet(structuredClone(props));
 
-// STATES は objDeepMerge の型推論により literal types が保持される
-export const STATES = states;
+// TRAITS は objDeepMerge の型推論により literal types が保持される
+export const TRAITS = traits;
 
 // ブレイクポイント
 export const BREAK_POINTS = ['sm', 'md', 'lg', 'xl'] as const;

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

@@ -1,2 +1,9 @@
-import { DecoratorProps } from './getProps';
+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/Decorator/index.js

@@ -1,9 +1,8 @@
 import { jsx as o } from "react/jsx-runtime";
-import t from "./getProps.js";
-import m from "../../Lism/index.js";
-function p(r) {
-  return /* @__PURE__ */ o(m, { ...t(r) });
+import t from "../../Lism/index.js";
+function i(r) {
+  return /* @__PURE__ */ o(t, { atomic: "decorator", "aria-hidden": "true", ...r });
 }
 export {
-  p as default
+  i as default
 };

package/dist/components/atomic/Divider/index.js

@@ -1,9 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
-import { getDividerProps as o } from "./getProps.js";
+import { jsx as r } from "react/jsx-runtime";
 import t from "../../Lism/index.js";
-function p(r) {
-  return /* @__PURE__ */ i(t, { ...o(r) });
+function d(i) {
+  return /* @__PURE__ */ r(t, { atomic: "divider", "aria-hidden": "true", ...i });
 }
 export {
-  p as default
+  d as default
 };

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

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

package/dist/components/atomic/Spacer/index.js

@@ -1,9 +1,8 @@
-import { jsx as o } from "react/jsx-runtime";
-import t from "./getProps.js";
-import m from "../../Lism/index.js";
-function i(r) {
-  return /* @__PURE__ */ o(m, { ...t(r) });
+import { jsx as t } from "react/jsx-runtime";
+import a from "../../Lism/index.js";
+function o(r) {
+  return /* @__PURE__ */ t(a, { atomic: "spacer", "aria-hidden": "true", ...r });
 }
 export {
-  i as default
+  o as default
 };

package/dist/components/index.d.ts

@@ -23,7 +23,7 @@ export * from './layout/SwitchCols';
 export * from './layout/TileGrid';
 export * from './state/Container';
 export * from './state/Layer';
-export * from './state/LinkBox';
+export * from './state/BoxLink';
 export * from './state/Wrapper';
 export * from './atomic/Decorator';
 export * from './atomic/Divider';

package/dist/components/index.js

@@ -1,23 +1,23 @@
 import { default as o } from "./layout/Box/index.js";
-import { default as t } from "./layout/Center/index.js";
-import { default as l } from "./layout/Cluster/index.js";
-import { default as s } from "./layout/Columns/index.js";
-import { default as u } from "./state/Container/index.js";
-import { default as x } from "./atomic/Decorator/index.js";
-import { default as n } from "./atomic/Divider/index.js";
-import { default as L } from "./Dummy/index.js";
-import { default as F } from "./layout/Flex/index.js";
-import { default as k } from "./layout/Flow/index.js";
-import { default as G } from "./layout/FluidCols/index.js";
-import { default as w } from "./layout/Frame/index.js";
-import { default as B } from "./layout/Grid/index.js";
-import { default as T } from "./Group/index.js";
-import { default as h } from "./Heading/index.js";
-import { default as H } from "./atomic/Icon/index.js";
-import { default as b } from "./Inline/index.js";
-import { default as q } from "./state/Layer/index.js";
-import { default as A } from "./Link/index.js";
-import { default as J } from "./state/LinkBox/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 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 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";
@@ -31,25 +31,25 @@ import { default as le } from "./layout/TileGrid/index.js";
 import { default as se } from "./state/Wrapper/index.js";
 export {
   o as Box,
-  t as Center,
-  l as Cluster,
-  s as Columns,
-  u as Container,
-  x as Decorator,
-  n as Divider,
-  L as Dummy,
-  F as Flex,
-  k as Flow,
-  G as FluidCols,
-  w as Frame,
-  B as Grid,
-  T as Group,
-  h as Heading,
-  H as Icon,
-  b as Inline,
-  q as Layer,
-  A as Link,
-  J as LinkBox,
+  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,
+  B as Frame,
+  T as Grid,
+  h as Group,
+  H as Heading,
+  b as Icon,
+  q as Inline,
+  A as Layer,
+  J as Link,
   N as Lism,
   P as List,
   R as ListItem,

package/dist/components/state/BoxLink/BoxLink.d.ts

@@ -0,0 +1,5 @@
+import { ElementType } from 'react';
+import { LismComponentProps } from '../../Lism';
+type BoxLinkProps<T extends ElementType = 'a'> = LismComponentProps<T>;
+export default function BoxLink<T extends ElementType = 'a'>({ as, children, ...props }: BoxLinkProps<T>): import("react").JSX.Element;
+export {};

package/dist/components/state/{LinkBox/LinkBox.stories.d.ts → BoxLink/BoxLink.stories.d.ts}

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

package/dist/components/state/BoxLink/index.d.ts

@@ -0,0 +1 @@
+export { default as BoxLink } from './BoxLink';

package/dist/components/state/{LinkBox → BoxLink}/index.js

@@ -2,7 +2,7 @@ import { jsx as i } from "react/jsx-runtime";
 import e from "../../Lism/index.js";
 function m({ as: r, children: o, ...t }) {
   const a = !!!t.href && (r ?? "a") === "a" ? "div" : r ?? "a";
-  return /* @__PURE__ */ i(e, { isLinkBox: !0, as: a, ...t, children: o });
+  return /* @__PURE__ */ i(e, { isBoxLink: !0, as: a, ...t, children: o });
 }
 export {
   m as default

package/dist/components/state/BoxLink/script.d.ts

@@ -0,0 +1,4 @@
+/**
+ * altKey押下時の処理 テスト用
+ */
+export default function enableSelectTextWithAltKeyAtBoxLink(): void;

package/dist/components/state/Container/Container.d.ts

@@ -1,6 +1,2 @@
 import { LismComponentProps } from '../../Lism';
-type ContainerProps = LismComponentProps & {
-    size?: LismComponentProps['isWrapper'];
-};
-export default function Container({ size, ...props }: ContainerProps): import("react").JSX.Element;
-export {};
+export default function Container(props: LismComponentProps): import("react").JSX.Element;

package/dist/components/state/Container/Container.stories.d.ts

@@ -4,5 +4,5 @@ declare const meta: Meta<typeof Container>;
 export default meta;
 type Story = StoryObj<typeof Container>;
 export declare const Default: Story;
-export declare const SizeS: Story;
-export declare const SizeL: Story;
+export declare const WrapperS: Story;
+export declare const WrapperL: Story;

package/dist/components/state/Container/index.js

@@ -1,8 +1,8 @@
-import { jsx as i } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import o from "../../Lism/index.js";
-function a({ size: r, ...t }) {
-  return /* @__PURE__ */ i(o, { isContainer: !0, isWrapper: r, ...t });
+function e(r) {
+  return /* @__PURE__ */ t(o, { isContainer: !0, ...r });
 }
 export {
-  a as default
+  e as default
 };

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

@@ -788,7 +788,7 @@ declare const _default: {
             readonly presets: readonly ["isolate"];
         };
     };
-    readonly states: {
+    readonly traits: {
         readonly isContainer: "is--container";
         readonly isWrapper: {
             readonly className: "is--wrapper";
@@ -798,7 +798,8 @@ declare const _default: {
             readonly tokenKey: "sz";
         };
         readonly isLayer: "is--layer";
-        readonly isLinkBox: "is--linkBox";
+        readonly isBoxLink: "is--boxLink";
+        readonly isCoverLink: "is--coverLink";
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";

package/dist/config/default-config.js

@@ -1,11 +1,11 @@
 import o from "./defaults/tokens.js";
 import t from "./defaults/props.js";
-import r from "./defaults/states.js";
-const s = {
+import r from "./defaults/traits.js";
+const i = {
   tokens: o,
   props: t,
-  states: r
+  traits: r
 };
 export {
-  s as default
+  i as default
 };

package/dist/config/defaults/{states.d.ts → traits.d.ts}

@@ -8,7 +8,8 @@ declare const _default: {
         readonly tokenKey: "sz";
     };
     readonly isLayer: "is--layer";
-    readonly isLinkBox: "is--linkBox";
+    readonly isBoxLink: "is--boxLink";
+    readonly isCoverLink: "is--coverLink";
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";

package/dist/config/defaults/{states.js → traits.js}

@@ -1,4 +1,4 @@
-const s = {
+const i = {
   isContainer: "is--container",
   isWrapper: {
     className: "is--wrapper",
@@ -8,11 +8,12 @@ const s = {
     tokenKey: "sz"
   },
   isLayer: "is--layer",
-  isLinkBox: "is--linkBox",
+  isBoxLink: "is--boxLink",
+  isCoverLink: "is--coverLink",
   isSide: "is--side",
   isSkipFlow: "is--skipFlow",
   isVertical: "is--vertical"
 };
 export {
-  s as default
+  i as default
 };

package/dist/config/index.d.ts

@@ -788,7 +788,7 @@ export declare const CONFIG: {
             readonly presets: readonly ["isolate"];
         };
     };
-    states: {
+    traits: {
         readonly isContainer: "is--container";
         readonly isWrapper: {
             readonly className: "is--wrapper";
@@ -798,7 +798,8 @@ export declare const CONFIG: {
             readonly tokenKey: "sz";
         };
         readonly isLayer: "is--layer";
-        readonly isLinkBox: "is--linkBox";
+        readonly isBoxLink: "is--boxLink";
+        readonly isCoverLink: "is--coverLink";
         readonly isSide: "is--side";
         readonly isSkipFlow: "is--skipFlow";
         readonly isVertical: "is--vertical";
@@ -1594,7 +1595,7 @@ export declare const PROPS: {
         readonly presets: readonly ["isolate"];
     };
 };
-export declare const STATES: {
+export declare const TRAITS: {
     readonly isContainer: "is--container";
     readonly isWrapper: {
         readonly className: "is--wrapper";
@@ -1604,7 +1605,8 @@ export declare const STATES: {
         readonly tokenKey: "sz";
     };
     readonly isLayer: "is--layer";
-    readonly isLinkBox: "is--linkBox";
+    readonly isBoxLink: "is--boxLink";
+    readonly isCoverLink: "is--coverLink";
     readonly isSide: "is--side";
     readonly isSkipFlow: "is--skipFlow";
     readonly isVertical: "is--vertical";

package/dist/config/index.js

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