lism-css 0.9.4 → 0.10.0

package/src/scss/modules/state/_layer.scss

@@ -1,5 +1,5 @@
 .is--layer {
-	position: absolute;
-	inset: 0;
-	overflow: hidden;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
 }

package/src/scss/modules/state/_linkbox.scss

@@ -1,19 +1,19 @@
 @use '../../_mixin' as mixin;
 
 .is--linkBox {
-	position: relative;
-	display: block;
-	color: inherit;
-	pointer-events: auto;
-	text-decoration: none;
-	cursor: pointer;
-	isolation: isolate; // 内部のz-index順位と外部のz-indexを混同させない。
+  position: relative;
+  display: block;
+  color: inherit;
+  pointer-events: auto;
+  text-decoration: none;
+  cursor: pointer;
+  isolation: isolate; // 内部のz-index順位と外部のz-indexを混同させない。
 }
 
 // リンクをクリック可能にするためにz-indexあげる
 .is--linkBox a {
-	position: relative;
-	z-index: 2; // .u-linkExpand::before + 1
+  position: relative;
+  z-index: 2; // .u-linkExpand::before + 1
 }
 
 /* これをしてしまうと z-index 関係がややこしくなる。リンク以外のz-indexはデフォのままにする。 */

package/src/scss/modules/state/_vertical.scss

@@ -1,9 +1,9 @@
 .is--vertical {
-	writing-mode: var(--vertical-mode);
+  writing-mode: var(--vertical-mode);
 }
 .is--vertical\@sm {
-	writing-mode: var(--_is_sm) var(--vertical-mode);
+  writing-mode: var(--_is_sm) var(--vertical-mode);
 }
 .is--vertical\@md {
-	writing-mode: var(--_is_md) var(--vertical-mode);
+  writing-mode: var(--_is_md) var(--vertical-mode);
 }

package/src/scss/modules/state/_wrapper.scss

@@ -1,17 +1,17 @@
 .is--wrapper {
-	// 子要素の制御
-	--contentSize: var(--sz--m, 100%);
-	> * {
-		max-inline-size: min(100%, var(--contentSize)); // min ないとimg要素等がはみ出す
-		margin-inline: auto;
-	}
+  // 子要素の制御
+  --contentSize: var(--sz--m, 100%);
+  > * {
+    max-inline-size: min(100%, var(--contentSize)); // min ないとimg要素等がはみ出す
+    margin-inline: auto;
+  }
 }
 
 // Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
 .-contentSize\:s {
-	--contentSize: var(--sz--s);
+  --contentSize: var(--sz--s);
 }
 
 .-contentSize\:l {
-	--contentSize: var(--sz--l);
+  --contentSize: var(--sz--l);
 }

package/src/scss/props/_border.scss

@@ -14,47 +14,47 @@
 // bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
 // .-bd .set--bd
 @include mixin.maybe_where('.-bd,[class*=" -bd-"],[class^="-bd-"]', '@base') {
-	--bds: solid;
-	--bdw: 1px;
-	--bdc: var(--divider);
-	border-width: var(--bdw) #{mixin.$maybe_important};
-	border-color: var(--bdc) #{mixin.$maybe_important};
+  --bds: solid;
+  --bdw: 1px;
+  --bdc: var(--divider);
+  border-width: var(--bdw) #{mixin.$maybe_important};
+  border-color: var(--bdc) #{mixin.$maybe_important};
 }
 
 .-bd {
-	// --bd: var(--bdw) var(--bds) var(--bdc);
-	// border: var(--bd) #{mixin.$maybe_important};
-	border-style: var(--bds) #{mixin.$maybe_important};
+  // --bd: var(--bdw) var(--bds) var(--bdc);
+  // border: var(--bd) #{mixin.$maybe_important};
+  border-style: var(--bds) #{mixin.$maybe_important};
 }
 
 // 方向指定
 .-bd-x {
-	border-inline-style: var(--bds) #{mixin.$maybe_important};
+  border-inline-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-y {
-	border-block-style: var(--bds) #{mixin.$maybe_important};
+  border-block-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-x-s {
-	border-inline-start-style: var(--bds) #{mixin.$maybe_important};
+  border-inline-start-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-x-e {
-	border-inline-end-style: var(--bds) #{mixin.$maybe_important};
+  border-inline-end-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-t {
-	border-top-style: var(--bds) #{mixin.$maybe_important};
+  border-top-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-b {
-	border-bottom-style: var(--bds) #{mixin.$maybe_important};
+  border-bottom-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-l {
-	border-left-style: var(--bds) #{mixin.$maybe_important};
+  border-left-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-r {
-	border-right-style: var(--bds) #{mixin.$maybe_important};
+  border-right-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-y-s {
-	border-block-start-style: var(--bds) #{mixin.$maybe_important};
+  border-block-start-style: var(--bds) #{mixin.$maybe_important};
 }
 .-bd-y-e {
-	border-block-end-style: var(--bds) #{mixin.$maybe_important};
+  border-block-end-style: var(--bds) #{mixin.$maybe_important};
 }

package/src/scss/props/_hover.scss

@@ -1,26 +1,26 @@
 @use '../_mixin' as mixin;
 
 @media (any-hover: hover) {
-	.-hov\:c:hover {
-		color: var(--hov-c, var(--link)) #{mixin.$maybe_important};
-	}
-	.-hov\:bdc:hover {
-		border-color: var(--hov-bdc, currentColor) #{mixin.$maybe_important};
-	}
-	.-hov\:bgc:hover {
-		background-color: var(--hov-bgc, var(--base-2)) #{mixin.$maybe_important};
-	}
-	.-hov\:o:hover {
-		opacity: var(--hov-o, 0.7) #{mixin.$maybe_important};
-	}
-	.-hov\:bxsh:hover {
-		box-shadow: var(--hov-bxsh, var(--bxsh--40)) #{mixin.$maybe_important};
-	}
+  .-hov\:c:hover {
+    color: var(--hov-c, var(--link)) #{mixin.$maybe_important};
+  }
+  .-hov\:bdc:hover {
+    border-color: var(--hov-bdc, currentColor) #{mixin.$maybe_important};
+  }
+  .-hov\:bgc:hover {
+    background-color: var(--hov-bgc, var(--base-2)) #{mixin.$maybe_important};
+  }
+  .-hov\:o:hover {
+    opacity: var(--hov-o, 0.7) #{mixin.$maybe_important};
+  }
+  .-hov\:bxsh:hover {
+    box-shadow: var(--hov-bxsh, var(--bxsh--40)) #{mixin.$maybe_important};
+  }
 
-	// 背景色が暗くも明るくても使えるように、ニュートラルグレーを配色。黒からの変化の方がわかりづらいため、グレーの中でも少し明るめを混ぜる。
-	.-hov\:neutral:hover {
-		background-color: color-mix(in srgb, var(--bgc, var(--base)), hsl(220, 5%, 75%) 25%) #{mixin.$maybe_important};
-	}
+  // 背景色が暗くも明るくても使えるように、ニュートラルグレーを配色。黒からの変化の方がわかりづらいため、グレーの中でも少し明るめを混ぜる。
+  .-hov\:neutral:hover {
+    background-color: color-mix(in srgb, var(--bgc, var(--base)), hsl(220, 5%, 75%) 25%) #{mixin.$maybe_important};
+  }
 }
 
 // ------------------------------------------------------------
@@ -28,17 +28,17 @@
 // ------------------------------------------------------------
 
 .-hov\:to\:hide {
-	--transProp: opacity;
-	opacity: var(--_isHov, 0) #{mixin.$maybe_important};
+  --transProp: opacity;
+  opacity: var(--_isHov, 0) #{mixin.$maybe_important};
 }
 
 .-hov\:to\:show {
-	--transProp: opacity, visibility;
-	opacity: var(--_notHov, 0) #{mixin.$maybe_important};
-	visibility: var(--_notHov, hidden) #{mixin.$maybe_important};
+  --transProp: opacity, visibility;
+  opacity: var(--_notHov, 0) #{mixin.$maybe_important};
+  visibility: var(--_notHov, hidden) #{mixin.$maybe_important};
 }
 
 .-hov\:to\:zoom {
-	--transProp: scale;
-	scale: var(--_isHov, 1.1);
+  --transProp: scale;
+  scale: var(--_isHov, 1.1);
 }

package/src/scss/props/_lh.scss

@@ -1,16 +1,16 @@
 .-lh\:1 {
-	--hl: 0px;
-	// line-height: 1;
+  --hl: 0px;
+  // line-height: 1;
 }
 .-lh\:base {
-	--hl: var(--hl--base);
+  --hl: var(--hl--base);
 }
 .-lh\:xs {
-	--hl: var(--hl--xs);
+  --hl: var(--hl--xs);
 }
 .-lh\:s {
-	--hl: var(--hl--s);
+  --hl: var(--hl--s);
 }
 .-lh\:l {
-	--hl: var(--hl--l);
+  --hl: var(--hl--l);
 }

package/src/scss/props/_size.scss

@@ -1,15 +1,15 @@
 .-max-sz\:full {
-	max-inline-size: 100%;
+  max-inline-size: 100%;
 
-	:where(.set--gutter) > & {
-		max-inline-size: calc(100% + var(--gutter-size) * 2);
-		margin-inline: calc(var(--gutter-size) * -1);
-	}
+  :where(.set--gutter) > & {
+    max-inline-size: calc(100% + var(--gutter-size) * 2);
+    margin-inline: calc(var(--gutter-size) * -1);
+  }
 }
 
 .-max-sz\:container {
-	max-inline-size: var(--sz--container, 100cqi);
-	margin-inline: calc(50% - var(--sz--container) / 2);
+  max-inline-size: var(--sz--container, 100cqi);
+  margin-inline: calc(50% - var(--sz--container) / 2);
 }
 
 // .-max-sz\:wide {

package/src/scss/reset.scss

@@ -15,167 +15,167 @@
 
 /* @layer で 優先度を下げる */
 @layer reset {
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	 Universal
 	------------------------------------------------------------ */
-	*,
-	::before,
-	::after {
-		/* box-sizing は 全要素に対して border-box で統一 */
-		box-sizing: border-box;
-	}
-
-	/* 
+  *,
+  ::before,
+  ::after {
+    /* box-sizing は 全要素に対して border-box で統一 */
+    box-sizing: border-box;
+  }
+
+  /* 
 	 - margin は dialog以外 0 にリセット
 	 - padding はそのままにする
 	*/
-	*:not(dialog) {
-		margin: 0;
-	}
+  *:not(dialog) {
+    margin: 0;
+  }
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	 Documents
 	------------------------------------------------------------ */
-	html {
-		/* iOSで横向きにした時のフォントサイズ自動調節をオフにする. */
-		-webkit-text-size-adjust: none;
-		text-size-adjust: none;
+  html {
+    /* iOSで横向きにした時のフォントサイズ自動調節をオフにする. */
+    -webkit-text-size-adjust: none;
+    text-size-adjust: none;
 
-		/* 文章の折り返し指定 see: https://ics.media/entry/240411/ */
-		word-break: normal; /* 単語の分割はデフォルトに依存 */
-		line-break: strict; /* 禁則処理を厳格に適用 */
-		overflow-wrap: anywhere; /* 収まらない場合に折り返す */
+    /* 文章の折り返し指定 see: https://ics.media/entry/240411/ */
+    word-break: normal; /* 単語の分割はデフォルトに依存 */
+    line-break: strict; /* 禁則処理を厳格に適用 */
+    overflow-wrap: anywhere; /* 収まらない場合に折り返す */
 
-		/* デフォルトの 8 はでかすぎる */
-		tab-size: 4;
+    /* デフォルトの 8 はでかすぎる */
+    tab-size: 4;
 
-		/* 要素はみ出しによる横スクロールの発生を防止. (overflow は 継承プロパティではないので両方記述） */
-		overflow-x: clip;
+    /* 要素はみ出しによる横スクロールの発生を防止. (overflow は 継承プロパティではないので両方記述） */
+    overflow-x: clip;
 
-		/* モーダルが開いている時はコンテンツをスクロールさせない */
-		&:has(:modal[open]) {
-			overflow: clip; /* sticky 要素がくずれないように clip */
-		}
-	}
+    /* モーダルが開いている時はコンテンツをスクロールさせない */
+    &:has(:modal[open]) {
+      overflow: clip; /* sticky 要素がくずれないように clip */
+    }
+  }
 
-	body {
-		/* htmlから継承する */
-		overflow: inherit;
+  body {
+    /* htmlから継承する */
+    overflow: inherit;
 
-		/* bodyの高さを最低限確保する (子要素でheight:100%が効くわけではない) */
-		min-height: 100dvh;
-	}
+    /* bodyの高さを最低限確保する (子要素でheight:100%が効くわけではない) */
+    min-height: 100dvh;
+  }
 
-	/* ------------------------------------------------------------
+  /* ------------------------------------------------------------
 	 Texts
 	------------------------------------------------------------ */
-	abbr[title] {
-		/* Safar で アンダーラインが出ないので明示的に指定して統一する */
-		text-decoration: underline;
-		text-decoration-style: dotted;
-	}
-
-	pre {
-		/* 水平スクロールできるようにする */
-		overflow-x: auto;
-	}
-
-	/* クラスを持つリストのみスタイルをリセットする。（ブラウザ標準スタイルを利用できる余地を残す） */
-	menu,
-	:is(ul, ol)[class] {
-		list-style: none;
-		padding: 0;
-	}
-
-	/* ------------------------------------------------------------
+  abbr[title] {
+    /* Safar で アンダーラインが出ないので明示的に指定して統一する */
+    text-decoration: underline;
+    text-decoration-style: dotted;
+  }
+
+  pre {
+    /* 水平スクロールできるようにする */
+    overflow-x: auto;
+  }
+
+  /* クラスを持つリストのみスタイルをリセットする。（ブラウザ標準スタイルを利用できる余地を残す） */
+  menu,
+  :is(ul, ol)[class] {
+    list-style: none;
+    padding: 0;
+  }
+
+  /* ------------------------------------------------------------
 	 Medias
 	------------------------------------------------------------ */
 
-	svg,
-	img,
-	video,
-	audio,
-	iframe,
-	object,
-	canvas {
-		/* 隙間ができるのを防ぐ。( display はいじらない。) */
-		vertical-align: middle;
-
-		/* 親要素をはみ出さないようにする */
-		max-inline-size: 100%;
-	}
-
-	img,
-	video {
-		/* img,video の縦横比を維持。（svg,iframe や audioは 高さがつぶれるので指定しない */
-		block-size: auto;
-	}
-
-	iframe {
-		border: none;
-	}
-
-	/* ------------------------------------------------------------
+  svg,
+  img,
+  video,
+  audio,
+  iframe,
+  object,
+  canvas {
+    /* 隙間ができるのを防ぐ。( display はいじらない。) */
+    vertical-align: middle;
+
+    /* 親要素をはみ出さないようにする */
+    max-inline-size: 100%;
+  }
+
+  img,
+  video {
+    /* img,video の縦横比を維持。（svg,iframe や audioは 高さがつぶれるので指定しない */
+    block-size: auto;
+  }
+
+  iframe {
+    border: none;
+  }
+
+  /* ------------------------------------------------------------
 	 Form Fields
 	------------------------------------------------------------ */
-	input,
-	button,
-	textarea,
-	select,
-	::file-selector-button {
-		/* 基本要素のフォントとカラーを本文から継承 */
-		font: inherit;
-		color: inherit;
-
-		/* iOSで入力時の拡大を防ぐ. ( button には必要ないが、フォーム全体のフォントサイズを揃えるために一括で適用する ) */
-		font-size: max(16px, 1em);
-	}
-
-	fieldset {
-		/* デフォルトの min-content によってコンテンツ( colsの大きい textarea など )がはみ出すのを防ぐ */
-		min-inline-size: 0;
-	}
-
-	textarea {
-		/* リサイズ方向を制限する. */
-		resize: block;
-		max-inline-size: 100%;
-	}
-
-	/* ------------------------------------------------------------
+  input,
+  button,
+  textarea,
+  select,
+  ::file-selector-button {
+    /* 基本要素のフォントとカラーを本文から継承 */
+    font: inherit;
+    color: inherit;
+
+    /* iOSで入力時の拡大を防ぐ. ( button には必要ないが、フォーム全体のフォントサイズを揃えるために一括で適用する ) */
+    font-size: max(16px, 1em);
+  }
+
+  fieldset {
+    /* デフォルトの min-content によってコンテンツ( colsの大きい textarea など )がはみ出すのを防ぐ */
+    min-inline-size: 0;
+  }
+
+  textarea {
+    /* リサイズ方向を制限する. */
+    resize: block;
+    max-inline-size: 100%;
+  }
+
+  /* ------------------------------------------------------------
 	 cursor 初期セット
 	------------------------------------------------------------ */
-	label[for],
-	select,
-	summary,
-	[type='radio'],
-	[type='checkbox'] {
-		cursor: pointer;
-	}
-
-	button,
-	[role='tab'],
-	[role='button'],
-	[role='option'],
-	[type='button'],
-	[type='reset'],
-	[type='submit'],
-	::file-selector-button {
-		cursor: pointer;
-
-		/* ダブルタップ時のズームアクションを無効化 */
-		touch-action: manipulation;
-	}
-
-	:disabled {
-		cursor: not-allowed;
-	}
-
-	/* ------------------------------------------------------------
+  label[for],
+  select,
+  summary,
+  [type='radio'],
+  [type='checkbox'] {
+    cursor: pointer;
+  }
+
+  button,
+  [role='tab'],
+  [role='button'],
+  [role='option'],
+  [type='button'],
+  [type='reset'],
+  [type='submit'],
+  ::file-selector-button {
+    cursor: pointer;
+
+    /* ダブルタップ時のズームアクションを無効化 */
+    touch-action: manipulation;
+  }
+
+  :disabled {
+    cursor: not-allowed;
+  }
+
+  /* ------------------------------------------------------------
 	 その他
 	------------------------------------------------------------ */
-	[hidden='until-found'] {
-		/* 意図せず他の要素の上にかぶってしまうのを防ぐ (until-found は stacking context を生成する) */
-		z-index: -1;
-	}
+  [hidden='until-found'] {
+    /* 意図せず他の要素の上にかぶってしまうのを防ぐ (until-found は stacking context を生成する) */
+    z-index: -1;
+  }
 }

package/src/scss/utility/_cbox.scss

@@ -3,15 +3,15 @@
 		Memo: bgcの mix は transparent にする。半透明だと背景があると可読性が落ちる + chatのように同じ背景色の装飾を重ねても大丈夫なように。
 */
 .u--cbox {
-	--c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 32%));
-	--bgc: color-mix(in srgb, var(--base), var(--keycolor) var(--cbox-bgPct, 4%));
-	--bdc: color-mix(in srgb, transparent, var(--keycolor) var(--cbox-bdPct, 64%));
-	--link-c: var(--keycolor); // --link を上書きすると、keycolorに --link が使えなくなる
-	color: var(--c);
-	background-color: var(--bgc);
+  --c: color-mix(in srgb, var(--text), var(--keycolor) var(--cbox-cPct, 32%));
+  --bgc: color-mix(in srgb, var(--base), var(--keycolor) var(--cbox-bgPct, 4%));
+  --bdc: color-mix(in srgb, transparent, var(--keycolor) var(--cbox-bdPct, 64%));
+  --link-c: var(--keycolor); // --link を上書きすると、keycolorに --link が使えなくなる
+  color: var(--c);
+  background-color: var(--bgc);
 
-	/* 相対カラー構文をサポートしているブラウザ向け */
-	@supports (color: oklch(from red l c h)) {
-		--shc: oklch(from var(--keycolor) calc(l / 1.5) calc(c / 1.5) h / 0.1);
-	}
+  /* 相対カラー構文をサポートしているブラウザ向け */
+  @supports (color: oklch(from red l c h)) {
+    --shc: oklch(from var(--keycolor) calc(l / 1.5) calc(c / 1.5) h / 0.1);
+  }
 }

package/src/scss/utility/_clipText.scss

@@ -1,4 +1,4 @@
 .u--clipText {
-	background-clip: text !important;
-	color: transparent !important;
+  background-clip: text !important;
+  color: transparent !important;
 }

package/src/scss/utility/_hidden.scss

@@ -2,13 +2,13 @@
 
 // .u--srOnly--focusable:not(:focus),
 .u--srOnly.u--srOnly {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-	clip-path: inset(50%);
-	white-space: nowrap;
-	border: 0;
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }

package/src/scss/utility/_itemDivider.scss

@@ -1,10 +1,10 @@
 .u--collapseGrid {
-	--bdw: 1px;
-	--bdc: var(--divider);
-	gap: var(--bdw);
-	padding: var(--bdw);
+  --bdw: 1px;
+  --bdc: var(--divider);
+  gap: var(--bdw);
+  padding: var(--bdw);
 
-	& > * {
-		box-shadow: 0 0 0 var(--bdw) var(--bdc);
-	}
+  & > * {
+    box-shadow: 0 0 0 var(--bdw) var(--bdc);
+  }
 }