lism-css 0.9.4 → 0.10.1

package/src/scss/base/tokens/_tokens.scss

@@ -1,110 +1,110 @@
 :root {
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	  コンテンツサイズ
 	------------------------------------------------------------ */
-	--sz--xl: 1600px; // 80*20
-	--sz--l: 1280px; // 80*16
-	--sz--m: 56rem; // 読みやすいのが50文字程度。
-	--sz--s: 42rem;
-	--sz--xs: 32rem;
-	--sz--min: 18rem; // 最低限維持したいコンテンツサイズの標準値。 sideMain等 で使用
+  --sz--xl: 1600px; // 80*20
+  --sz--l: 1280px; // 80*16
+  --sz--m: 56rem; // 読みやすいのが50文字程度。
+  --sz--s: 42rem;
+  --sz--xs: 32rem;
+  --sz--min: 18rem; // 最低限維持したいコンテンツサイズの標準値。 sideMain等 で使用
 
-	/* --------------------------------------------
+  /* --------------------------------------------
 		カラーパレット
 		1) 赤を基準として 明度L・彩度C を決める。
 		2) 各色は 色相H を固定セット。 L,C は色によって微調整。
    * -------------------------------------------- */
-	--black: #000;
-	--white: #fff;
-	// --gray: hsl(210 16% 40%);
-	// --red: hsl(4 72% 50%);
-	// --orange: hsl(26 80% 48%);
-	// --yellow: hsl(48 80% 48%);
-	// --green: hsl(132 76% 42%);
-	// --blue: hsl(204 74% 50%);
-	// --purple: hsl(260 72% 50%);
-	// --pink: hsl(320 72% 50%);
+  --black: #000;
+  --white: #fff;
+  // --gray: hsl(210 16% 40%);
+  // --red: hsl(4 72% 50%);
+  // --orange: hsl(26 80% 48%);
+  // --yellow: hsl(48 80% 48%);
+  // --green: hsl(132 76% 42%);
+  // --blue: hsl(204 74% 50%);
+  // --purple: hsl(260 72% 50%);
+  // --pink: hsl(320 72% 50%);
 
-	/* 基準の明度と彩度（red)*/
-	--L: 60%;
-	--C: 0.22;
+  /* 基準の明度と彩度（red)*/
+  --L: 60%;
+  --C: 0.22;
 
-	/* カラートークン（OKLCH） */
-	--red: oklch(var(--L) var(--C) 20);
-	--orange: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52);
-	--yellow: oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84);
-	--green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);
-	--blue: oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);
-	--purple: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292);
-	--pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);
-	--gray: oklch(calc(var(--L) - 4%) 0.04 256);
+  /* カラートークン（OKLCH） */
+  --red: oklch(var(--L) var(--C) 20);
+  --orange: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 52);
+  --yellow: oklch(calc(var(--L) + 12%) calc(var(--C) - 0.025) 84);
+  --green: oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152);
+  --blue: oklch(calc(var(--L) - 2%) calc(var(--C) + 0.01) 260);
+  --purple: oklch(calc(var(--L) - 4%) calc(var(--C) + 0.02) 292);
+  --pink: oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348);
+  --gray: oklch(calc(var(--L) - 4%) 0.04 256);
 
-	// --------------------
-	// キーワードカラー
-	// --------------------
+  // --------------------
+  // キーワードカラー
+  // --------------------
 
-	// Main Color
-	--brand: #1e5f8c;
-	--accent: #d94a6a;
-	// --accent-2: #000;
-	// --accent-3: #000;
+  // Main Color
+  --brand: #1e5f8c;
+  --accent: #d94a6a;
+  // --accent-2: #000;
+  // --accent-3: #000;
 
-	// base
-	--base: hsl(224 4% 99%);
-	--base-2: hsl(224 8% 95%);
+  // base
+  --base: hsl(224 4% 99%);
+  --base-2: hsl(224 8% 95%);
 
-	// text
-	--text: hsl(224 4% 8%);
-	--text-2: hsl(224 6% 32%);
-	--link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);
+  // text
+  --text: hsl(224 4% 8%);
+  --text-2: hsl(224 6% 32%);
+  --link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);
 
-	--divider: hsl(224 8% 88%);
+  --divider: hsl(224 8% 88%);
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	  opacity
 	------------------------------------------------------------ */
-	// 質感で表現
-	--o--n10: 0.75;
-	--o--n20: 0.5;
-	--o--n30: 0.25;
+  // 質感で表現
+  --o--n10: 0.75;
+  --o--n20: 0.5;
+  --o--n30: 0.25;
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	  radius
 	------------------------------------------------------------ */
-	// 等比
-	--bdrs--5: 2px;
-	--bdrs--10: 0.25rem; // ≒ 4px
-	--bdrs--20: 0.5rem; // ≒ 8px
-	--bdrs--30: 1rem; // ≒ 16px
-	--bdrs--40: 1.5rem; // ≒ 24px
-	--bdrs--50: 2rem; // ≒ 32px
-	--bdrs--99: 99rem;
+  // 等比
+  --bdrs--5: 2px;
+  --bdrs--10: 0.25rem; // ≒ 4px
+  --bdrs--20: 0.5rem; // ≒ 8px
+  --bdrs--30: 1rem; // ≒ 16px
+  --bdrs--40: 1.5rem; // ≒ 24px
+  --bdrs--50: 2rem; // ≒ 32px
+  --bdrs--99: 99rem;
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	shadow color, shadow inset, shadow size
 	------------------------------------------------------------ */
-	--sh-inset: ; // for inset
-	--shc: hsl(220 4% 8% / 5%);
+  --sh-inset: ; // for inset
+  --shc: hsl(220 4% 8% / 5%);
 
-	// x:fibo, y=fibo, blur=x+y*2
-	--shsz--5: 0px 2px 4px;
-	--shsz--10: 1px 3px 6px;
-	--shsz--20: 1px 5px 10px;
-	--shsz--30: 2px 8px 16px;
-	--shsz--40: 3px 13px 26px;
-	--shsz--50: 5px 21px 42px;
+  // x:fibo, y=fibo, blur=x+y*2
+  --shsz--5: 0px 2px 4px;
+  --shsz--10: 1px 3px 6px;
+  --shsz--20: 1px 5px 10px;
+  --shsz--30: 2px 8px 16px;
+  --shsz--40: 3px 13px 26px;
+  --shsz--50: 5px 21px 42px;
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	  aspect-ratio
 	------------------------------------------------------------ */
-	--ar--og: 1.91/1;
+  --ar--og: 1.91/1;
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	  State Module用の初期値
 	------------------------------------------------------------ */
-	// サイトコンテンツの左右につける余白
-	--gutter-size: var(--s30);
+  // サイトコンテンツの左右につける余白
+  --gutter-size: var(--s30);
 
-	// 縦書きモード
-	--vertical-mode: vertical-rl;
+  // 縦書きモード
+  --vertical-mode: vertical-rl;
 }

package/src/scss/base/tokens/_typography.scss

@@ -3,9 +3,9 @@
 
 // フォントサイズ計算用の関数
 @function fz-calc($offset) {
-	$fzmol: setting.$fzmol;
-	$fz: math.div($fzmol, ($fzmol - $offset));
-	@return math.div(math.round($fz * 1000), 1000);
+  $fzmol: setting.$fzmol;
+  $fz: math.div($fzmol, ($fzmol - $offset));
+  @return math.div(math.round($fz * 1000), 1000);
 }
 
 /* ------------------------------------------------------------
@@ -13,57 +13,57 @@
 ------------------------------------------------------------ */
 /* ハーフレディング */
 @property --hl {
-	syntax: '<length>';
-	inherits: true;
-	initial-value: 0.25rem;
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0.25rem;
 }
 
 :root {
-	--REM: clamp(0.95rem, 0.915rem + 0.15vw, 1.05rem); /* 変動幅: 360px ~ 1400px */
-	--REM--cq: clamp(0.95rem, 0.9rem + 0.22vw, 1.05rem); /* 変動幅: 360px ~ 1440px */
+  --REM: clamp(0.95rem, 0.915rem + 0.15vw, 1.05rem); /* 変動幅: 360px ~ 1400px */
+  --REM--cq: clamp(0.95rem, 0.9rem + 0.22vw, 1.05rem); /* 変動幅: 360px ~ 1440px */
 
-	// font-size: 倍音列でのスケーリング。単位は em
-	--fz--5xl: #{fz-calc(6)}em;
-	--fz--4xl: #{fz-calc(5)}em;
-	--fz--3xl: #{fz-calc(4)}em;
-	--fz--2xl: #{fz-calc(3)}em;
-	--fz--xl: #{fz-calc(2)}em;
-	--fz--l: #{fz-calc(1)}em;
-	--fz--m: 1em;
-	--fz--s: #{fz-calc(-1)}em;
-	--fz--xs: #{fz-calc(-2)}em;
-	--fz--2xs: #{fz-calc(-3)}em;
+  // font-size: 倍音列でのスケーリング。単位は em
+  --fz--5xl: #{fz-calc(6)}em;
+  --fz--4xl: #{fz-calc(5)}em;
+  --fz--3xl: #{fz-calc(4)}em;
+  --fz--2xl: #{fz-calc(3)}em;
+  --fz--xl: #{fz-calc(2)}em;
+  --fz--l: #{fz-calc(1)}em;
+  --fz--m: 1em;
+  --fz--s: #{fz-calc(-1)}em;
+  --fz--xs: #{fz-calc(-2)}em;
+  --fz--2xs: #{fz-calc(-3)}em;
 
-	// ------------------------------
-	// font-family
-	// ------------------------------
-	// system-ui は　游ゴシックが適用されてしまう。-apple-system: safari, firefox用 / 'BlinkMacSystemFont': Chrome用
-	--ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji';
-	--ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
+  // ------------------------------
+  // font-family
+  // ------------------------------
+  // system-ui は　游ゴシックが適用されてしまう。-apple-system: safari, firefox用 / 'BlinkMacSystemFont': Chrome用
+  --ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji';
+  --ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
 
-	// Mac: SFMono Menlo Monaco / Win: Consolas / Linux 'Liberation Mono'
-	--ff--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
+  // Mac: SFMono Menlo Monaco / Win: Consolas / Linux 'Liberation Mono'
+  --ff--mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
 
-	// ------------------------------
-	// font-weight
-	// ------------------------------
-	--fw--thin: 100;
-	--fw--light: 300;
-	--fw--normal: 400;
-	--fw--medium: 500;
-	--fw--bold: 700;
-	--fw--black: 900;
+  // ------------------------------
+  // font-weight
+  // ------------------------------
+  --fw--thin: 100;
+  --fw--light: 300;
+  --fw--normal: 400;
+  --fw--medium: 500;
+  --fw--bold: 700;
+  --fw--black: 900;
 
-	// ------------------------------
-	// letter-spacing
-	// ------------------------------
-	--lts--base: normal;
-	--lts--s: -0.05em;
-	--lts--l: 0.05em;
-	// --lts--xl: 0.125em;
+  // ------------------------------
+  // letter-spacing
+  // ------------------------------
+  --lts--base: normal;
+  --lts--s: -0.05em;
+  --lts--l: 0.05em;
+  // --lts--xl: 0.125em;
 
-	// remに相当する単位
-	// --REM: var(--fz--base);
+  // remに相当する単位
+  // --REM: var(--fz--base);
 }
 
 /* ------------------------------------------------------------
@@ -71,22 +71,22 @@
 	フィボナッチ数列 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
 ------------------------------------------------------------ */
 :root {
-	--fz--base: var(--REM);
+  --fz--base: var(--REM);
 
-	// ハーフレディング単位
-	--hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
+  // ハーフレディング単位
+  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
 
-	// --- ハーフレディング ---
-	// unit の倍数で構成する
-	--hl--xs: var(--hl-unit);
-	--hl--s: calc(var(--hl-unit) * 2);
-	--hl--base: calc(var(--hl-unit) * 3);
-	--hl--l: calc(var(--hl-unit) * 4);
-	// --hl--xl: calc(var(--hl-unit) * 5);
+  // --- ハーフレディング ---
+  // unit の倍数で構成する
+  --hl--xs: var(--hl-unit);
+  --hl--s: calc(var(--hl-unit) * 2);
+  --hl--base: calc(var(--hl-unit) * 3);
+  --hl--l: calc(var(--hl-unit) * 4);
+  // --hl--xl: calc(var(--hl-unit) * 5);
 
-	// --- スペーシング ---
+  // --- スペーシング ---
 
-	/*
+  /*
 ```
 --s:   5  10  15  20  30  40  50   ..
   4:   4   8  12  20  32  52  84   136   220
@@ -94,16 +94,16 @@
 ```
 */
 
-	/* スペーシング単位 8 で フィボナッチ*/
-	--s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
-	--s5: calc(0.5 * var(--s-unit)); /* 例外 */
-	--s10: var(--s-unit);
-	--s15: calc(1.5 * var(--s-unit)); /* 例外 */
-	--s20: calc(2 * var(--s-unit));
-	--s30: calc(3 * var(--s-unit));
-	--s40: calc(5 * var(--s-unit));
-	--s50: calc(8 * var(--s-unit));
-	--s60: calc(13 * var(--s-unit));
-	--s70: calc(21 * var(--s-unit));
-	--s80: calc(34 * var(--s-unit));
+  /* スペーシング単位 8 で フィボナッチ*/
+  --s-unit: calc(var(--REM) * 0.5); /* ≒ 8px */
+  --s5: calc(0.5 * var(--s-unit)); /* 例外 */
+  --s10: var(--s-unit);
+  --s15: calc(1.5 * var(--s-unit)); /* 例外 */
+  --s20: calc(2 * var(--s-unit));
+  --s30: calc(3 * var(--s-unit));
+  --s40: calc(5 * var(--s-unit));
+  --s50: calc(8 * var(--s-unit));
+  --s60: calc(13 * var(--s-unit));
+  --s70: calc(21 * var(--s-unit));
+  --s80: calc(34 * var(--s-unit));
 }

package/src/scss/main_no_layer.scss

@@ -2,7 +2,7 @@
   @layerなし
 */
 @use './mixin' with (
-	$layer_mode: 0
+  $layer_mode: 0
 );
 
 // reset(ここはレイヤーあり）

package/src/scss/modules/atomic/_divider.scss

@@ -1,6 +1,6 @@
 .a--divider {
-	--bdc: var(--divider);
-	--bds: solid;
-	--bdw: 1px;
-	border-block-start: var(--bdw) var(--bds) var(--bdc);
+  --bdc: var(--divider);
+  --bds: solid;
+  --bdw: 1px;
+  border-block-start: var(--bdw) var(--bds) var(--bdc);
 }

package/src/scss/modules/atomic/_icon.scss

@@ -1,14 +1,14 @@
 .a--icon {
-	flex-shrink: 0; // Callout など、アイコンはflex直下の子要素にしたい場合も多いので、指定しておく
+  flex-shrink: 0; // Callout など、アイコンはflex直下の子要素にしたい場合も多いので、指定しておく
 }
 
 /* fill指定のない svg にテキストカラーを継承させる */
 .a--icon:where(:not([fill])) {
-	fill: currentcolor;
+  fill: currentcolor;
 }
 
 /* 属性によるサイズ指定がない場合　*/
 .a--icon:where(:not([width])) {
-	width: 1em;
-	height: 1em;
+  width: 1em;
+  height: 1em;
 }

package/src/scss/modules/atomic/_spacer.scss

@@ -1,4 +1,4 @@
 .a--spacer {
-	min-height: 1px;
-	min-width: 1px;
+  min-height: 1px;
+  min-width: 1px;
 }

package/src/scss/modules/atomic/index.scss

@@ -3,4 +3,3 @@
 // @forward './decorator';
 @forward './icon';
 @forward './spacer';
-@forward './media';

package/src/scss/modules/layout/_center.scss

@@ -1,5 +1,5 @@
 .l--center {
-	display: grid;
-	place-content: center;
-	place-items: center;
+  display: grid;
+  place-content: center;
+  place-items: center;
 }

package/src/scss/modules/layout/_cluster.scss

@@ -1,5 +1,5 @@
 .l--cluster {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center; // stretch を解除
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center; // stretch を解除
 }

package/src/scss/modules/layout/_columns.scss

@@ -2,7 +2,7 @@
     memo: グリッドアイテムにはデフォルトでmin-width: autoが適用され、1frだけだとカラムサイズが揃わないことがあり、minmax() を使う。
 */
 .l--columns {
-	--cols: 2; // 初期値
-	display: grid;
-	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
+  --cols: 2; // 初期値
+  display: grid;
+  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
 }

package/src/scss/modules/layout/_flex.scss

@@ -1,7 +1,7 @@
 .l--flex {
-	display: flex;
+  display: flex;
 
-	> * {
-		min-width: 0;
-	}
+  > * {
+    min-width: 0;
+  }
 }

package/src/scss/modules/layout/_flow.scss

@@ -1,36 +1,36 @@
 .l--flow {
-	// コンテンツ間の余白バリエーションを定義（--s は set--cqUnit で再セットされるので、:rootではなく .l--flowで定義する）
-	--flow--base: var(--s30);
-	--flow--s: var(--s20);
+  // コンテンツ間の余白バリエーションを定義（--s は set--cqUnit で再セットされるので、:rootではなく .l--flowで定義する）
+  --flow--base: var(--s30);
+  --flow--s: var(--s20);
 
-	display: flow-root;
+  display: flow-root;
 
-	> * + * {
-		--flow: var(--flow--base);
-		margin-block-start: var(--flow);
-	}
+  > * + * {
+    --flow: var(--flow--base);
+    margin-block-start: var(--flow);
+  }
 
-	// flow 直下のメディア要素は block に初期リセット
-	> :where(img, video, iframe) {
-		display: block;
-	}
+  // flow 直下のメディア要素は block に初期リセット
+  > :where(img, video, iframe) {
+    display: block;
+  }
 }
 
 .-flow\:s > * {
-	--flow: var(--flow--s);
+  --flow: var(--flow--s);
 }
 
 .-flow\: > * {
-	--flow: inherit;
+  --flow: inherit;
 }
 
 // 見出しの上部の余白は広くする.
 .l--flow > :where(h1, h2, h3, h4, h5, h6) {
-	margin-block-start: calc(var(--flow) * var(--flow-hScale, 2));
+  margin-block-start: calc(var(--flow) * var(--flow-hScale, 2));
 }
 
 // 打ち消し
 .is--skipFlow + *,
 .l--flow > :first-child {
-	--flow: 0px;
+  --flow: 0px;
 }

package/src/scss/modules/layout/_fluidCols.scss

@@ -2,8 +2,8 @@
     Memo: オーバーフロー回避のため、 min({cols}, 100%) とする。
 */
 .l--fluidCols {
-	--cols: var(--sz--min);
-	--autoMode: auto-fit;
-	display: grid;
-	grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));
+  --cols: var(--sz--min);
+  --autoMode: auto-fit;
+  display: grid;
+  grid-template-columns: repeat(var(--autoMode), minmax(min(var(--cols), 100%), 1fr));
 }

package/src/scss/modules/layout/_frame.scss

@@ -1,11 +1,11 @@
 .l--frame {
-	overflow: hidden; // Memo: clip だと stack の直下で aspect-ratio が効かない。
+  overflow: hidden; // Memo: clip だと stack の直下で aspect-ratio が効かない。
 
-	// 直下のメディアを frame いっぱいに広げる。
-	> :where(img, video, iframe, .a--media) {
-		display: block;
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+  // 直下のメディアを frame いっぱいに広げる。
+  > :where(img, video, iframe) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 }

package/src/scss/modules/layout/_grid.scss

@@ -1,12 +1,12 @@
 .l--grid {
-	--gtr: none;
-	--gtc: none;
-	--gta: none;
-	display: grid;
-	grid-template: var(--gtr) / var(--gtc);
-	grid-template-areas: var(--gta);
+  --gtr: none;
+  --gtc: none;
+  --gta: none;
+  display: grid;
+  grid-template: var(--gtr) / var(--gtc);
+  grid-template-areas: var(--gta);
 
-	> * {
-		min-width: 0;
-	}
+  > * {
+    min-width: 0;
+  }
 }

package/src/scss/modules/layout/_sideMain.scss

@@ -3,18 +3,18 @@
       flex-grow は 変数指定だと挙動が変になることにも注意。
  */
 .l--sideMain {
-	--sideW: auto;
-	--mainW: max(var(--sz--min), 50%);
-	display: flex;
-	flex-wrap: wrap;
+  --sideW: auto;
+  --mainW: max(var(--sz--min), 50%);
+  display: flex;
+  flex-wrap: wrap;
 
-	> .is--side {
-		flex-basis: var(--sideW);
-		flex-grow: 1; /* 0 だと折り返されたときに広がらない */
-	}
+  > .is--side {
+    flex-basis: var(--sideW);
+    flex-grow: 1; /* 0 だと折り返されたときに広がらない */
+  }
 
-	> :not(.is--side) {
-		flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
-		flex-basis: min(100%, var(--mainW)); /* このサイズが折り返しポイントの基準となる */
-	}
+  > :not(.is--side) {
+    flex-grow: 9999999; /* できるだけ fix側を 指定値ピッタリに近づけるためにかなり大きな数値を指定 */
+    flex-basis: min(100%, var(--mainW)); /* このサイズが折り返しポイントの基準となる */
+  }
 }

package/src/scss/modules/layout/_stack.scss

@@ -1,4 +1,4 @@
 .l--stack {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }

package/src/scss/modules/layout/_switchCols.scss

@@ -1,10 +1,10 @@
 .l--switchCols {
-	--breakSize: var(--sz--xs); /* 横並びを維持する幅（親のサイズで指定する） */
-	display: flex;
-	flex-wrap: wrap;
+  --breakSize: var(--sz--xs); /* 横並びを維持する幅（親のサイズで指定する） */
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .l--switchCols > * {
-	flex-grow: 1;
-	flex-basis: calc((var(--breakSize) - 100%) * 9999);
+  flex-grow: 1;
+  flex-basis: calc((var(--breakSize) - 100%) * 9999);
 }

package/src/scss/modules/state/_container.scss

@@ -1,12 +1,12 @@
 // コンテナ定義 + 併用クラスで内部のコンテンツ幅を制御する。
 .is--container {
-	container-type: inline-size;
-	// container-name: lismContainer;
+  container-type: inline-size;
+  // container-name: lismContainer;
 }
 .is--container > * {
-	--sz--container: 100cqi;
+  --sz--container: 100cqi;
 }
 // set--gutterがある場合はその分を加算
 .is--container.set--gutter > * {
-	--sz--container: calc(100cqi + var(--gutter-size) * 2);
+  --sz--container: calc(100cqi + var(--gutter-size) * 2);
 }