Lism CSS
検索

Changelog

v.1.0リリースまでしばらく激しい変更が続く可能性があるため、変更点をここに記載して行く予定です。

lism-css v.0.17.0 (2026.05.09)

破壊的変更を含むリリースです。

-max-sz:bleed の新設 (#360)

  • -max-sz:container を廃止し、最外側の is--container 幅まで広がる full-bleed 用途のクラスとして -max-sz:bleed を新設
  • --sz--bleed の initial-value を 100svi にすることで、is--container 祖先がない場合は viewport 幅まで広がる fallback を提供

--REM 廃止と --fz--base の簡素化

  • --REM を廃止し、--fz--base を 1rem に統一
  • --hl-unit / --s-unit を --fz--base 経由に統一

a タグのリンク装飾スタイル廃止

  • a タグから --link-td-thickness / --link-td-color のスタイルを廃止

Bug Fixes

  • is--wrapper 直下に inline-size: 100% を付与し、stack 配下でのガタつきを解消 (#356)
  • --td-p のデフォルト値を var(--s10) から var(--s10) var(--s15) に変更

その他

  • blockquote, pre のスタイルを共通化し、q, blockquote にイタリックを追加
  • lts トークンを微調整し xl を追加

@lism-css/ui v.0.17.0 (2026.05.09)

Deep path import 対応 (#354)

  • 各コンポーネントを @lism-css/ui/react/{Name} / @lism-css/ui/astro/{Name} の deep path から個別に import できるよう exports に追加
  • 未使用コンポーネントの混入を確実に避けられるため、ドキュメント・サンプルでは原則 deep path 形式を推奨

その他

  • 全コンポーネントを named export に統一（barrel 経由は従来から named のため互換）
  • src/components/ から exports を自動生成する gen:exports スクリプトを追加し、ビルド時に再生成・commit

lism-css v.0.16.1 (2026.04.29)

  • --list-px-s のフォールバック値を 1.75em に変更
  • l--withSide の flex 子要素に min-width: 0 を追加

lism-css v.0.16.0 (2026.04.21)

破壊的変更を含むリリースです。

u--trimChildren のリネームと除外方式の整理 (#324, #326)

子要素のハーフレディング分の余白を一括トリミングするユーティリティクラスを整理しました。

旧新
u--trimChildren / util="trimChildren"u--trimAll / util="trimAll"

旧 u--trimChildren / util="trimChildren" は削除されました（後方互換エイリアスなし）。直接使用している箇所はすべて置き換えが必要です。

トリミング対象の指定方式も整理され、トリムすべきでない要素（:empty, figure, picture, video, button, textarea, table）のみを除外するシンプルな形になりました。:empty により img や hr などの void element、中身のない装飾 div（a--divider / a--spacer 等）は自動で除外されます。追加で除外したい要素は、利用側で .u--trimAll > xxx { margin-block: 0 } のように個別打ち消しで対応してください。

u--collapseGrid のリネームと u--divide の追加 (#323)

Grid / Flex の子要素間に区切り線を表示するユーティリティクラスを整理しました。

旧新用途
—u--divide子要素間にのみ区切り線を表示（外周なし）
u--collapseGridu--cells各セルを枠で囲む（table セル／カレンダー風）

u--collapseGrid + p="0" + ov="clip" の組み合わせで実現していた「間の区切りのみ」のパターンは、新規の u--divide に一本化されました。

旧 u--collapseGrid / util="collapseGrid" は削除されました（後方互換エイリアスなし）。直接使用している箇所はすべて置き換えが必要です。

opacity トークンの命名変更 (#316)

opacity トークンを「ハイフン3連続（--o---10）」の数値段階命名から、音楽の強弱記号（piano 系列）を用いたセマンティック命名に変更しました。合わせて、従来トークン化されていなかった軽い減衰帯 (0.9) を新規トークンとして追加し、4段階構成としています。

旧新値
—--o--mp / -o:mp0.9（新規）
--o---10 / -o:-10--o--p / -o:p0.75
--o---20 / -o:-20--o--pp / -o:pp0.5
--o---30 / -o:-30--o--ppp / -o:ppp0.25

旧トークン (--o---10/-20/-30) および旧 utility クラス (-o:-10/-20/-30) は削除されました。直接使用している箇所はすべて新命名への置き換えが必要です。-o:0（完全透明）は変更ありません。

Layout Primitive の命名整理 (#319)

以下の Layout Primitive のクラス名・コンポーネント名・layout リテラル値を変更しました。

旧新
l--sideMain / <SideMain> / layout="sideMain"l--withSide / <WithSide> / layout="withSide"
l--fluidCols / <FluidCols> / layout="fluidCols"l--autoColumns / <AutoColumns> / layout="autoColumns"
l--switchCols / <SwitchCols> / layout="switchCols"l--switchColumns / <SwitchColumns> / layout="switchColumns"

React / Astro のコンポーネント名については、旧名 (<SideMain> / <FluidCols> / <SwitchCols>) を @deprecated エイリアスとして暫定的に残しています。次のメジャーアップデートで削除予定のため、新名称への置き換えを推奨します。 SCSS クラス (l--sideMain 等) と layout リテラル値 (layout="sideMain" 等) には後方互換はありません。直接使用している箇所はすべて置き換えが必要です。

その他

  • l--flow の見出し上部マージン計算式を変更
  • -hov:-o の opacity フォールバック値を 0.7 から var(--o--p) に変更
  • trait の SCSS を is/ と has/ サブディレクトリに整理（内部リファクタ）

@lism-css/ui v.0.16.0 (2026.04.21)

破壊的変更を含むリリースです。

  • lism-css 0.16.0 への追従（Layout Primitive 命名整理）
  • Alert コンポーネントの layout プロパティで受け付けるリテラル値を "sideMain" → "withSide" に変更

lism-css v.0.15.0 (2026.04.21)

破壊的変更を含むリリースです。

CSSレイヤー構造の再編 (#304)

  • レイヤー順序を lism-trait → lism-primitive → lism-component に変更
  • lism-trait レイヤーを独立させ、has--* Trait Class を復活
  • クラス出力順を set-- → trait(is--/has--) → u-- → -prop に再設計
  • set--mask を has--mask として trait レイヤーに移行

set-- クラスの刷新 (#304)

  • var: プレフィックスによる分類刷新
    • set--hov → set--var:hov
    • set--shadow → set--var:sh
    • set--innerRs → set--var:bdrsInner
  • set--mask を has--mask として trait レイヤーに移行
  • set--revert を新設（ul / ol の自動判定を明示的なクラス運用に変更）

-hov: クラスの命名整理 (#300)

  • Property Class 合成系を -hov:-{prop} 形式に変更
    • -hov:c → -hov:-c
    • -hov:bgc → -hov:-bgc
    • -hov:bdc → -hov:-bdc
    • -hov:o → -hov:-o
    • -hov:bxsh → -hov:-bxsh
  • set--var:hov 連動系を -hov:to:* → -hov:in:* に変更
  • -hov:underline プリセットを追加
  • -hov:neutral などは据え置き
  • hov 文字列指定の短縮名自動変換を廃止、オブジェクト true 値の挙動を統一
  • hov prop のオブジェクト指定から class: キー処理を削除

シャドウトークンの刷新 (#311)

--shsz-- のサイズスケールを 1段階ずつずらし、--shsz--5 を削除しました。旧来と同じシャドウを使うには段階を +10 してください。

旧トークン値新トークン
--shsz--100px 2px 6px--shsz--20
--shsz--200px 4px 12px--shsz--30
--shsz--300px 8px 24px--shsz--40
--shsz--400px 16px 48px--shsz--50
  • 新しい --shsz--10 は 0px 1px 3px（新規の最小サイズ）
  • --bxsh--50 / --shsz--50 を新規追加
  • --shc の透明度を 12% → 15% に調整

その他

  • prop="-" 指定を廃止し true に一本化 (#310)
  • overwriteBaseVar を廃止し alwaysVar に統合、BPクラス出力を改善
  • has--transition の変数整理（--transProp → --transitionProps、--hov-duration → --transition-duration）とデフォルト duration を 0.25s に調整
  • has--snap の CSS 変数デフォルト値を要素側初期化に変更
  • AstroLayoutProps<L> を導入し AstroFlowProps / AstroFlexProps を削除
  • LismElementProps の className 型を string | undefined に明示化

@lism-css/ui v.0.15.0 (2026.04.21)

破壊的変更を含むリリースです。

破壊的変更

  • lism-css 0.15.0 への追従（-hov:-{prop} / -hov:in:* / set--var:* / シャドウトークンスケール変更など）
  • NavMenu.Link（Astro / React）のデフォルト要素を span → a に変更。href を渡さずに使用していた場合は as="span" を明示してください

Astro コンポーネントの TypeScript 対応

  • 以下の Astro コンポーネントに Props 型を追加
    • Accordion / Alert / Avatar / Badge / Button / Callout / Chat / Details / Modal / NavMenu / ShapeDivider / Tabs
  • Astro コンポーネントに Polymorphic<{as: Tag}> ジェネリクスを追加
  • AstroFlowProps / AstroFlexProps を AstroLayoutProps<L> に統一

型システムの整備

  • React コンポーネントに LismComponentProps<T> ジェネリクスを追加
  • レイアウトコンポーネントに LayoutComponentProps<T, L> を適用

バグ修正・内部改善

  • クライアントスクリプトをタグ非依存なセレクタ・型に変更（Accordion / Tabs / Modal）
  • Accordion / react / Panel をジェネリクス化
  • Details/Summary で Flex コンポーネントを使用
  • Details/Content React 実装を Astro に合わせ Flow を使用
  • Accordion/Button / Panel で Flex / Flow を使用
  • registry-index.json を生成する gen:registry スクリプトを追加

lism-css v.0.14.0 (2026.04.17)

破壊的変更を含むリリースです。

Props システムの整理

  • lismClass / variant props を削除し、className 一本に集約
  • Decorator から clipPath / boxSizing 専用 props を削除

Property Class のリネーム

  • ysz → bsz（block-size 系）
  • isolation → iso
  • whspace → whs（white-space）
  • ovwrap → ovw（overflow-wrap）

Trait Class / トークンの整理

  • is--vertical を削除し、Property Class -wm:vertical-rl に移行
  • set--bp を無効化
  • ネガティブトークン変数を --o--n{N} から --o---{N} に変更
  • --sz--min / --sz--full トークンを削除

その他

  • fluidCols のデフォルト min サイズを 20rem に変更

@lism-css/ui v.0.14.0 (2026.04.17)

破壊的変更を含むリリースです。

  • lism-css 0.14.0 への追従（lismClass / variant props を削除し className 一本に集約）
  • DummyImage コンポーネントを削除（cdn.lism-css.com のダミー画像URL を直接使用してください）
  • Details / Tabs の内部ファイルを Root 命名規則にリネーム
  • BEM modifier 組み立て用の buildModifierClass ヘルパーを追加
  • import したコンポーネント CSS がビルド出力に含まれず読み込まれない不具合を修正（vite.config 調整）
  • React/Astro 初期 props 不一致の修正（6件）
  • React 側コンポーネントを Astro と同じファイル構成に分割
  • getProps をコンポーネントにインライン化し不要ファイルを削除

lism-css v.0.13.1 (2026.04.15)

  • atomic prop を新設

@lism-css/ui v.0.13.1 (2026.04.15)

  • lism-css 0.13.1 の変更に追従
  • Tabs のスタイルを整理

lism-css v.0.13.0 (2026.04.14)

破壊的変更を含むリリースです。

Module → Primitive 概念リネーム

  • 概念名 Module → Primitive にリネーム
    • CSS レイヤー lism-modules → lism-primitive
    • SCSS ディレクトリ src/scss/modules → src/scss/primitives
  • 新規 CSS レイヤー lism-component を追加

State → Trait 識別子の統一

Props システムの State 系識別子を Trait に統一リネーム。

  • 型 StateProps → TraitProps
  • 定数 STATES → TRAITS
  • lism.config.js の設定キー states → traits
  • 参照ファイル config/defaults/states.ts → config/defaults/traits.ts

※ isContainer, isWrapper 等の props 名や is--* クラス名は変更なし。

set / util props の統一

  • util prop を追加し、set / util を string に統一。- prefix で除外する仕様に変更

Trait Class / 命名整理

  • is--linkBox を is--boxLink にリネーム
  • u--expandedLink を is--coverLink にリネーム
  • Container の size プロパティを廃止し、isWrapper に統一

その他

  • c-- コンポーネントの BEM element 記法を単一 _ に統一
  • クラス出力順を整理（set-- / u-- を property class より前に移動）

@lism-css/ui v.0.13.0 (2026.04.14)

  • lism-css 0.13.0 への追従
  • util prop を追加し、set / util を string に統一。- prefix で除外する仕様に変更
  • c-- コンポーネントを lism-component レイヤーに移動
  • CSS レイヤー名を単数形に統一（lism-components → lism-component）

@lism-css/ui v.0.12.0 (2026.04.10)

  • lism-css 0.12.0 への追従
  • .js/.jsx を TypeScript (.ts/.tsx) に全面移行
  • 全コンポーネントに Storybook stories を追加
  • Tabs の useId() 条件呼び出しを修正（Rules of Hooks 違反を修正）

@lism-css/ui v.0.11.0 (2026.04.05)

  • Callout コンポーネントのスタイルを lism-css v0.11.0 の shadow 設計変更に合わせて調整

v.0.12.0 (2026.04.10)

  • TileGrid レイアウトモジュールを追加（-gt:repeat から昇格）
  • d (display) に flex, grid, inline-grid, inline, inline-block を追加
  • gap 系 shorthand を g-x/g-y から cg/rg に変更
  • setXxxx 個別 props を廃止し、set="" unset="" に統一
  • @layer lism-custom を modules と utility の間に再配置
  • リストの padding-inline-start を --list-px-s カスタムプロパティに変更
  • 非推奨の HTML コンポーネントファイルを削除
  • Property Class の値略記を CSS 実値ベースに変更（in-flex→inline-flex, rel→relative, abs→absolute, col→column, cc→current 等）
  • 用語「Prop Class」を「Property Class」にリネーム
  • l--grid から --gtr/--gtc/--gta CSS 変数と grid-template 宣言を削除
  • 未使用トークン --bdrs--5 の削除

v.0.11.0 (2026.04.05)

  • bdrs・bxsh トークン削減、shadow 設計変更、--sh-inset 廃止
  • ユーティリティクラス（u--）の詳細度を改善
  • --td-p をシンプルに s10 へ変更

v.0.10.5 (2026.04.05)

  • set--cqUnit をコアから削除し、docs 側に移設

v.0.10.4 (2026.04.04)

  • @layer 命名変更（lism.xxx → lism-xxx）の移行漏れを修正しました。

v.0.10.3 (2026.04.04)

  • --fw--bold を 600 に変更し、fw トークンを light / normal / bold に整理しました。
  • フォントサイズの計算を CSS 変数ベース（--fz-mol）に変更し、SCSS 関数を削除しました。

v.0.10.2 (2026.04.04)

  • Media.astro で as="img" / as="picture" 指定時に Astro の Image / Picture コンポーネントへ自動マッピングされるようになりました。
  • Media.astro に MediaPolymorphic 型を導入し、Image / Picture 固有 props の型補完に対応しました。
  • セマンティックラッパー（Group, Text, Inline, List, Heading 等）の as prop に AllowedTag 型制約を導入しました（React / Astro 共通）。
  • CSS 変数名 --heading- を --headings- に改名しました。
  • テーブル要素のスタイルを --td- / --th- トークンに整理しました。
  • ベースのフォームコントロール初期スタイルを調整しました。
  • OmitIndexSignature の distributive conditional type 対応など型周りの修正を行いました。

v.0.10.1 (2026.04.03)

  • ネガティブマージンをスペーストークンで指定できるようになりました。（例: my-s="-20", mt="-10")
  • <Layer>,<Decorator>, <Media> など一部のコンポーネントでの特殊なpropの扱い（translate, rotate, scale, transform, blur, contrast 等の filter 系、および objectFit / objectPosition の prop sugar） を廃止しました。
  • <HTML.xxx> コンポーネントを廃止し、用途に応じた名前付きコンポーネントに置き換えました。
  • <Dummy> コンポーネントを @lism-css/ui へ移動し、DummyText（テキスト用）と DummyImage（画像用）として再実装しました。

<HTML.xxx> を廃止し、セマンティックラッパーコンポーネントに置き換え

コンポーネントデフォルト as用途
Textpテキストコンテンツ系ブロック要素
Inlinespan文中要素
Groupdiv構造ラッパー
Headingh2見出し（lv prop で h1〜h6）
Linkaリンク
Listulリスト（as="ol" で順序付き）
ListItemliリストアイテム

lism-css v.0.9.4 (2026.03.31)

  • -bxsh:5クラスにシャドウが適用されない問題を修正。
  • Astroコンポーネントに型を追加しました。

@lism-css/ui v.0.9.3 (2026.03.30)

  • packageのsrcをコンポーネントとして配信していたものを dist に修正.
  • “use client” がビルドで消えていた問題を修正。

v.0.9.2 (2026.03.18)

  • README.md 更新

v.0.9.1 (2026.03.18)

  • <Lism>コンポーネントからtagプロパティを削除し、asプロパティへ統合しました。

v.0.9.0 (2026.03.17)

  • lism-cssの変更点
    • React コンポーネントのts化を行いました。これにより、プロパティのサジェストが効くようになりました。
    • set-xxx → set--xxx に変更しました。
    • u-xxx → u--xxx に変更しました。
    • u-trimItems → u--trimChildren に変更しました。
    • set-snap → u--snap に変更しました。
    • -content: → -contentSize: に変更しました。
  • @lism-css/uiの大幅調整を行いました。
  • @lism-css/mcp を v.0.9.0に合わせて公開しました。

v.0.8.3

  • linkboxのCSSを微調整
  • デフォルト —dividerカラーの微調整

v.0.8.2

  • -hov:to:zoom をコアに追加しました。
  • l--flow の微調整を行いました

v.0.8 (大幅な変更)

[重要] line-heightの仕様を変更しました。

ハーフレディングで管理するシステムへ変更しました。

詳しくは タイポグラフィ・スケーリングの説明 を参照してください。

レイアウトモジュールの変更点

変更前変更後備考
WithSide(l--withSide)SideMain(l--sideMain)レイアウトモジュール名の変更
<Grid gtc="liquid"> (-gtc:liquid)<FluidCols>(l--fluidCols)レイアウトモジュールとして独立
SwitchCols(l--switchCols)レイアウトモジュールの新規追加

ダイナミックモジュールの削除

d--accordion, d--modal, d--tabs を削除しました。

<Accordion>, <Modal>, <Tabs> も lism-cssからは使用できなくなりました。

代わりに、@lism-css/ui パッケージで提供しています。

トークン・CSS変数の変更点

変更前変更後備考
--c--main--brandカラートークン名の変更
--c--line--dividerカラートークン名の変更
--duration, --ease, --delay--hov-duration, --hov-ease, --hov-delayhover関連の変数名を明確化
--isHov_--_isHov命名規則の変更
--gutter--gutter-size変数名の明確化
  • 余白スケーリングを全体的に変更しました。
  • カラートークンを全体的に調整しました。

Property Class の変更点

変更前変更後備考
ovwovwrapoverflow-wrap
whitespaewhspace
-td:under廃止
--tt:upper, -tt:lower新規追加
  • translate, scale, rotate を Property Class から削除しました。

ユーティリティクラスの変更点

変更前変更後備考
-writing:verticalis--verticalState Classへ移行
u-bgclipText廃止（オプトアウト）
u-itemDivideru--collapseGridクラス名変更
-gtc:liquidl--fluidColsレイアウトクラスとして独立
-bd--bdc のデフォルト値変更-bdc:current を追加
  • set--bp を追加しました。

コンテンツサイズ管理クラスの変更点

is--container は container-type のセットのみを担当するように変更しました。
コンテンツサイズ管理機能は is--wrapper へ分離しました。

変更前変更後
-max-sz:outer-max-sz:container
--sz--outer--sz--container

© Lism CSS. All rights reserved.

目次