is--container

is--containerを使用すると、その要素に contaner-type:inline-size を適用します。

Lism CSSではコンテナクエリでプロパティを変更できる仕様になっていますので、 コンテナクエリの判定基準としたしたいラッパー要素にこのクラスを使用しておく必要があります。

is--wrapper

.is--wrapper クラスを使うと、内部のコンテンツ幅を制御できます。

.-contentSize:

.is--wrapper クラスは--contentSizeで内部のコンテンツ幅を制御できます。
.-contentSize:s|l クラスは、 --sz--s,--sz--lをセットできるユーティリティクラスです。

wrapper要素のネスト

is--wrapper は子要素の幅を変数で制御しているため、直下にネストすると子ラッパー自身の幅も（同じ変数名なので）影響を受けます。

コンテナクエリの挙動について

コンテナクエリの判定値は直前の親コンテナの幅になりますが、 .-contentSize:s|l は子要素の幅を制限しているだけで、自身の横幅は100%です。
つまり、コンテナクエリの判定値もこの100%サイズが基準となります。

以下の例では、コンテナ直下のdivのサイズは var(--sz--s) ですが、100cqw がそのSサイズになるのではなく、windowサイズと一致します。

ここでのコンテナクエリの判定値( cqw )は、外側の 緑色の点線 で囲われたコンテナ要素のサイズです。

もし、内部の要素のサイズ（ここでは var(--sz--s)) を 100cqw となるようにコンテナクエリを内部のdivで使いたい場合は、コンテナ自身のサイズを明示的にSサイズにするか、もしくは、is--wrapper の内部にコンテナを配置します。

以下は、コンテナ自体のサイズを明示的に指定した例です。

以下は、コンテナをwrapper内に配置した例です。