lism-css 0.6.0 → 0.7.0

package/dist/lib/getLismProps.js

@@ -1,40 +1,41 @@
-var E = Object.defineProperty;
-var A = (r, t, s) => t in r ? E(r, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[t] = s;
-var d = (r, t, s) => A(r, typeof t != "symbol" ? t + "" : t, s);
-import { STATES as U, PROPS as P } from "../config/index.js";
+var k = Object.defineProperty;
+var E = (r, t, s) => t in r ? k(r, t, { enumerable: !0, configurable: !0, writable: !0, value: s }) : r[t] = s;
+var f = (r, t, s) => E(r, typeof t != "symbol" ? t + "" : t, s);
+import { STATES as U, PROPS as S } from "../config/index.js";
+import A from "./getLayoutProps.js";
 import g from "./isPresetValue.js";
 import V from "./isTokenValue.js";
 import O from "./getUtilKey.js";
-import S from "./getMaybeCssVar.js";
+import $ from "./getMaybeCssVar.js";
 import _ from "./getBpData.js";
-import b from "./helper/atts.js";
-import x from "./helper/isEmptyObj.js";
-import j from "./helper/filterEmptyObj.js";
-import k from "./helper/splitWithComma.js";
-const z = (r) => {
-  const t = P[r];
+import x from "./helper/atts.js";
+import z from "./helper/isEmptyObj.js";
+import b from "./helper/filterEmptyObj.js";
+import j from "./helper/splitWithComma.js";
+const w = (r) => {
+  const t = S[r];
   return t && (t == null ? void 0 : t.token) || "";
 };
-class w {
+class L {
   constructor(t) {
     // propList = {};
-    d(this, "className", "");
-    d(this, "uClasses", []);
-    d(this, "lismState", []);
-    d(this, "styles", {});
-    d(this, "attrs", {});
-    const { forwardedRef: s, class: i, className: l, lismClass: a, layout: e, variant: h, style: f = {}, _propConfig: m = {}, ...o } = t;
-    this.styles = { ...f }, this._propConfig = { ...m };
-    let n = a || "";
-    if (h && a) {
-      const u = a.split(" "), y = u[0], $ = `${y}--${h}`;
-      n = [y, $, ...u.slice(1)].join(" ");
+    f(this, "className", "");
+    f(this, "uClasses", []);
+    f(this, "lismState", []);
+    f(this, "styles", {});
+    f(this, "attrs", {});
+    const { forwardedRef: s, class: i, className: l, lismClass: a, variant: e, style: h = {}, _propConfig: n = {}, ...c } = t;
+    this.styles = { ...h }, this._propConfig = { ...n };
+    let o = a || "";
+    if (e && a) {
+      const y = a.split(" "), d = y[0], m = `${d}--${e}`;
+      o = [d, m, ...y.slice(1)].join(" ");
     }
-    typeof e == "string" && e && (n = b(n, `l--${e}`)), x(o) || (this.attrs = { ...o }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = b(l || i, n, this.lismState, this.uClasses);
+    z(c) || (this.attrs = { ...c }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = x(l || i, o, this.lismState, this.uClasses);
   }
   analyzeState(t, s) {
-    const { className: i, preset: l, presetClass: a, customVar: e, tokenKey: h, setStyles: f } = t;
-    s === !0 ? this.lismState.push(i) : l && g(l, s) ? this.lismState.push(`${i} ${a}:${s}`) : s && (this.lismState.push(i), h ? this.addStyle(e, S(s, h)) : f && this.addStyles(f(s)));
+    const { className: i, preset: l, presetClass: a, customVar: e, tokenKey: h, setStyles: n } = t;
+    s === !0 ? this.lismState.push(i) : l && g(l, s) ? this.lismState.push(`${i} ${a}:${s}`) : s && (this.lismState.push(i), h ? this.addStyle(e, $(s, h)) : n && this.addStyles(n(s)));
   }
   // prop解析
   analyzeProps() {
@@ -42,7 +43,7 @@ class w {
       if (Object.hasOwn(U, t)) {
         const s = this.extractProp(t), i = U[t];
         typeof i == "string" ? s && this.lismState.push(i) : this.analyzeState(i, s);
-      } else if (Object.hasOwn(P, t)) {
+      } else if (Object.hasOwn(S, t)) {
         const s = this.attrs[t];
         delete this.attrs[t], this.analyzeLismProp(t, s);
       } else if (t === "hov") {
@@ -57,7 +58,7 @@ class w {
   // Lism Prop 解析
   analyzeLismProp(t, s) {
     if (s == null) return;
-    let i = P[t] || null;
+    let i = S[t] || null;
     if (i === null) return;
     this._propConfig[t] && (i = Object.assign({}, i, this._propConfig[t]));
     const { base: l, ...a } = _(s);
@@ -103,18 +104,18 @@ class w {
       return;
     }
     if (!l) {
-      const { presets: u, tokenClass: y, utils: $, shorthands: C } = i;
-      if (u && g(u, s)) {
+      const { presets: d, tokenClass: m, utils: P, shorthands: C } = i;
+      if (d && g(d, s)) {
         this.addUtil(`${e}:${s}`);
         return;
       }
-      if (y && V(i.token, s)) {
+      if (m && V(i.token, s)) {
         this.addUtil(`${e}:${s}`);
         return;
       }
-      let c = "";
-      if ($ && (c = O($, s)), !c && C && (c = O(C, s, !0)), c) {
-        this.addUtil(`${e}:${c}`);
+      let u = "";
+      if (P && (u = O(P, s)), !u && C && (u = O(C, s, !0)), u) {
+        this.addUtil(`${e}:${u}`);
         return;
       }
     }
@@ -122,12 +123,12 @@ class w {
       this.addUtil(e);
       return;
     }
-    let { prop: h, isVar: f, alwaysVar: m, token: o, bp: n } = i;
-    if (o && (s = S(s, o)), !l) {
-      if (f) {
+    let { prop: h, isVar: n, alwaysVar: c, token: o, bp: y } = i;
+    if (o && (s = $(s, o)), !l) {
+      if (n) {
         this.addStyle(`--${t}`, s);
         return;
-      } else if (!n && !m) {
+      } else if (!y && !c) {
         this.addStyle(h, s);
         return;
       }
@@ -148,28 +149,28 @@ class w {
   // 	});
   // }
   setHovProps(t) {
-    t && (t === "-" || t === !0 ? this.addUtil("-hov") : typeof t == "string" ? k(t).forEach((s) => {
+    t && (t === "-" || t === !0 ? this.addUtil("-hov") : typeof t == "string" ? j(t).forEach((s) => {
       this.addUtil(`-hov:${s}`);
     }) : typeof t == "object" && Object.keys(t).forEach((s) => {
       let i = t[s];
-      i == null || i === "" || i === !1 || (i === "-" || i === !0 ? this.addUtil(`-hov:${s}`) : s === "class" ? k(i).forEach((l) => {
+      i == null || i === "" || i === !1 || (i === "-" || i === !0 ? this.addUtil(`-hov:${s}`) : s === "class" ? j(i).forEach((l) => {
         this.addUtil(`-hov:${l}`);
-      }) : (i = S(i, z(s)), this.addUtil(`-hov:${s}`), this.addStyle(`--hov-${s}`, i)));
+      }) : (i = $(i, w(s)), this.addUtil(`-hov:${s}`), this.addStyle(`--hov-${s}`, i)));
     }));
   }
 }
-function J(r) {
+function X(r) {
   if (r.length === 0)
     return {};
-  const t = new w(r);
-  return j({
-    className: t.className,
-    style: j(t.styles),
+  const { layout: t, ...s } = r, i = new L(A(t, s));
+  return b({
+    className: i.className,
+    style: b(i.styles),
     //filterEmptyObj(styles), // filterEmptyObj は最後にかける
-    ...t.attrs
+    ...i.attrs
     // 処理されずに残っているprops
   });
 }
 export {
-  J as default
+  X as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lism-css",
-	"version": "0.6.0",
+	"version": "0.7.0",
 	"description": "A layout-first CSS framework for websites.",
 	"author": {
 		"name": "ddryo",

package/packages/astro/Lism/Lism.astro

@@ -1,15 +1,14 @@
 ---
 import type { LismProps } from '../../types';
 import getLismProps from '../../../dist/lib/getLismProps';
-import getLayoutProps from '../../../dist/components/getLayoutProps';
 
 // Propsの定義
 interface Props extends LismProps {}
 
-const { as, tag, layout, exProps, ...props } = Astro.props || {};
+const { as, tag, exProps, ...props } = Astro.props || {};
 const JSX = as || tag || 'div';
 ---
 
-<JSX {...getLismProps(getLayoutProps(layout, props))} {...exProps}>
+<JSX {...getLismProps(props)} {...exProps}>
 	<slot />
 </JSX>

package/packages/astro/Modal/Inner.astro

@@ -1,6 +1,6 @@
 ---
 import type { LismProps } from '../../types';
-import { defaultProps } from '../../../dist/components/Modal/getProps';
+import { getInnerProps } from '../../../dist/components/Modal/getProps';
 import { Lism } from '../Lism';
 
 // Propsの定義
@@ -8,6 +8,6 @@ interface Props extends LismProps {}
 const props = Astro.props || {};
 ---
 
-<Lism {...defaultProps.inner} {...props}>
+<Lism {...getInnerProps(props)}>
 	<slot />
 </Lism>

package/src/scss/_auto_output.scss

@@ -130,7 +130,7 @@ $bp_support_list: (); // list
 			@if (meta.type-of($exValue) == map) {
 				.-#{$key}\:#{$exKey} {
 					@each $_p, $_v in $exValue {
-						#{$_p}: #{$_v};
+						#{$_p}: #{$_v} #{get_important_str($important)};
 					}
 				}
 			}

package/src/scss/_mixin.scss

@@ -14,7 +14,7 @@ $maybe_important: '';
 // 	@return '';
 // }
 
-@mixin maybe_where($selectors, $mode) {
+@mixin maybe_where($selectors, $mode: '') {
 	// memo: セレクタリストを引数で受け取り、modeで出力方法を切り替える
 	@if $layer_mode == 1 {
 		@if $mode == '' {
@@ -25,7 +25,7 @@ $maybe_important: '';
 			:is(#{$selectors}) {
 				@content;
 			}
-		} @else if $mode == 'base' {
+		} @else if $mode == '@base' {
 			@layer lism.base {
 				#{$selectors} {
 					@content;

package/src/scss/_prop-config.scss

@@ -1,4 +1,4 @@
-// 自動生成されたファイル. 生成日時: 2025-11-01T06:03:57.181Z
+// 自動生成されたファイル. 生成日時: 2025-12-03T10:57:09.980Z
 $props: (
 	'f': (
 		prop: 'font',
@@ -661,9 +661,7 @@ $props: (
 		),
 		exUtility: (
 			'repeat': (
-				'--cols': '1',
-				'--rows': '1',
-				'grid-template': 'repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr)',
+				'grid-template': 'repeat(var(--rows,1), 1fr) / repeat(var(--cols,1), 1fr)',
 			),
 		),
 		bp: 1,

package/src/scss/_with_layer.scss

@@ -4,15 +4,17 @@
 @use 'sass:meta';
 
 // 最初に順序定義
-@layer lism.reset, lism.base, lism.modules, lism.custom, lism.utility;
+// @layer lism-reset, lism;
 
-@layer lism.reset {
-	@include meta.load-css('reset');
-}
+// resetは中で layer定義済み
+@include meta.load-css('reset');
+
+// baese
 @layer lism.base {
 	@include meta.load-css('base');
 }
 
+// modules
 @layer lism.modules {
 	@layer state {
 		@include meta.load-css('modules/state');

package/src/scss/base/_dom.scss

@@ -31,7 +31,7 @@ body {
 /* ----------------------------------------
     Heading
  ---------------------------------------- */
-@include mixin.maybe_where('h1, h2, h3, h4, h5, h6', '') {
+@include mixin.maybe_where('h1, h2, h3, h4, h5, h6') {
 	font-family: var(--heading-ff, inherit);
 	font-weight: var(--heading-fw, bolder);
 	font-size: var(--fz, revert);
@@ -64,7 +64,7 @@ h6 {
 /* ----------------------------------------
     list
  ---------------------------------------- */
-@include mixin.maybe_where('ul, ol', '') {
+@include mixin.maybe_where('ul, ol') {
 	list-style: none;
 	padding: 0;
 	padding-inline-start: var(--list-px-s, 0);
@@ -74,26 +74,31 @@ h6 {
     texts
  ---------------------------------------- */
 // link
-@include mixin.maybe_where('a', '') {
+@include mixin.maybe_where('a') {
 	color: var(--c--link);
 	text-decoration: var(--link-td, underline);
 	// text-underline-offset: var(--underline-offset, auto);
 	// text-decoration-thickness: var(--underline-thickness, 1px);
 }
 
+// フォーカス要素
+@include mixin.maybe_where(':focus-visible') {
+	outline-offset: var(--focus-offset, 0px);
+}
+
 /* ----------------------------------------
     table
  ---------------------------------------- */
-@include mixin.maybe_where('th', '') {
+@include mixin.maybe_where('th') {
 	color: var(--th--c, inherit);
 	background-color: var(--th--bgc, transparent);
 }
-// @include mixin.maybe_where('td', '') {
+// @include mixin.maybe_where('td') {
 // 	color: var(--td--c, inherit);
 // 	background-color: var(--td--bgc, transparent);
 // }
 
-@include mixin.maybe_where('td, th', '') {
+@include mixin.maybe_where('td, th') {
 	padding: var(--cell-p, 0.375em 0.5em);
 	min-inline-size: var(--cell-minW, initial);
 }
@@ -101,18 +106,18 @@ h6 {
 /* ----------------------------------------
     others
  ---------------------------------------- */
-@include mixin.maybe_where('hr', '') {
+@include mixin.maybe_where('hr') {
 	border: none;
 	border-block-start: 1px solid;
 	block-size: 0;
 }
 
-@include mixin.maybe_where('blockquote', '') {
+@include mixin.maybe_where('blockquote') {
 	border-inline-start: solid 3px currentColor;
 	padding: var(--s20) var(--s30);
 }
 
-@include mixin.maybe_where('pre', '') {
+@include mixin.maybe_where('pre') {
 	// 横にスクロールできるように（overflow-inline: auto; ← まだ使えない）
 	overflow-x: auto; // 縦書きモードにしてもこれでいけた
 }
@@ -127,11 +132,16 @@ h6 {
 /* ----------------------------------------
     dialog
  ---------------------------------------- */
+/* ダイアログ展開時のガタツキを防ぐ */
+// html:has(:modal[open]) {
+// 	scrollbar-gutter: stable;
+// }
+
 // showModal()にのみ適用するため、 dialog ではなく :modal を使用
 @include mixin.switch_selector('body:has(:modal[open])', 'body:where(:has(:modal[open]))') {
 	overflow: hidden;
 }
 
-@include mixin.switch_selector('dialog:not([open])', 'dialog:where(:not([open]))') {
-	pointer-events: none;
-}
+// @include mixin.switch_selector('dialog:not([open])', 'dialog:where(:not([open]))') {
+// 	pointer-events: none;
+// }

package/src/scss/base/_tokens.scss

@@ -38,7 +38,7 @@
 	--sz--s: 640px; // 80*8
 	--sz--xs: 480px; // 80*6
 
-	--sz--min: 16rem; // 最低限維持したいコンテンツサイズの標準値。 withSide等 で使用
+	--sz--min: 18rem; // 最低限維持したいコンテンツサイズの標準値。 withSide等 で使用
 
 	// .l--flow の余白
 	--flow--base: var(--s40);
@@ -50,12 +50,8 @@
 	    タイポグラフィ
 	------------------------------------------------------------ */
 
-	// --ff--sans: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
-	// --ff--serif: serif;
-
-	--ff--base: -apple-system, 'BlinkMacSystemFont', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif, 'Segoe UI Emoji';
-
-	// Optima, Georgia, Garamond, Baskerville;
+	// system-ui は　游ゴシックが適用されてしまう。-apple-system: safari, firefox用 / 'BlinkMacSystemFont': Chrome用
+	--ff--base: -apple-system, 'BlinkMacSystemFont', sans-serif, 'Segoe UI Emoji';
 	--ff--accent: 'Garamond', 'Baskerville', 'Times New Roman', serif;
 	--ff--mono: Menlo, Consolas, monaco, monospace;
 

package/src/scss/base/index.scss

@@ -20,11 +20,3 @@
 	--list-px-s: 1.5em;
 	list-style: revert;
 }
-
-// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
-// .-bd .set--bd
-@include mixin.maybe_where('.-bd,[class*="-bd-"]', '') {
-	--bds: solid;
-	--bdw: 1px;
-	--bdc: currentColor;
-}

package/src/scss/base/set/_plain.scss

@@ -1,7 +1,7 @@
 @use '../../_mixin' as mixin;
 
 // Note: d--modalに使われる
-@include mixin.maybe_where('.set-plain', '') {
+@include mixin.maybe_where('.set-plain') {
 	font: inherit;
 	width: auto;
 	height: auto;
@@ -10,5 +10,5 @@
 	border: none;
 	text-decoration: none;
 	padding: 0;
-	// margin: 0;
+	margin: 0;
 }

package/src/scss/main_no_layer.scss

@@ -5,8 +5,10 @@
 	$layer_mode: 0
 );
 
-// base
+// reset(ここはレイヤーあり）
 @use './reset' as reset;
+
+// base
 @use './base/index' as base;
 
 // Modules

package/src/scss/modules/dynamic/_modal.scss

@@ -1,33 +1,42 @@
-// dialog,
+/*
+ * dialog で実装.
+ *   Memo: ::backdrop のアニメーションはFirefoxで動かない
+ */
 .d--modal {
 	--my-s: 0; // flow直下にきても影響しないように
-	--offset: 0 0; // アニメーション用
 	--duration: var(--modal-duration, 0.5s);
-	--backdropBg: rgb(0 0 0 / 0.6);
+	width: 100%;
+	height: 100%;
 	max-width: 100%;
 	max-height: 100%;
-	transition-duration: var(--duration, 0.5s);
+	overflow: unset;
+	background: var(--backdrop-bg, rgb(0 0 0 / 0.6));
+	transition-duration: var(--duration);
+	transition-property: opacity;
 
 	&::backdrop {
-		transition: opacity var(--duration, 0.5s);
-		background: var(--backdropBg);
+		background: none;
 	}
 }
+.d--modal[open] {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
 
 .d--modal_inner {
-	max-height: 100%;
+	--translate: 0 0; // アニメーション用
 	background-color: var(--c--base);
+	transition: translate var(--duration);
 }
 
-.d--modal_body {
-	overflow: auto;
-	overscroll-behavior: contain;
-}
+// .d--modal_body {
+// 	overscroll-behavior: contain;
+// }
 
 .d--modal:not([data-is-open]) {
-	translate: var(--offset);
-}
-.d--modal:not([data-is-open]),
-.d--modal:not([data-is-open])::backdrop {
 	opacity: 0;
 }
+.d--modal:not([data-is-open]) > .d--modal_inner {
+	translate: var(--translate);
+}

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

@@ -1,19 +1,15 @@
-/*
-  Memo:
-	- > * + * を使えば :first-child への my-s の打ち消しは不要になるが、 my-e 0 を :first-child にも効かせたいので、 > * で書いている。
-*/
 .l--flow {
 	display: flow-root;
 	// --flow: var(--flow--base);
 
-	> * {
+	> * + * {
 		--flow: var(--flow--base);
 		--my-s: var(--flow);
-		margin-block: var(--my-s) 0;
+		margin-block-start: var(--my-s);
 	}
 
 	// flow 直下のメディア要素は block に初期リセット
-	> :where(img, video, audio) {
+	> :where(img, video) {
 		display: block;
 	}
 }
@@ -36,7 +32,6 @@
 
 // Note: 打ち消しを最後に書く
 // .l--flow > :where(.-max-sz\:full + .-max-sz\:full),
-.l--flow > :first-child,
 .is--skipFlow + * {
 	--my-s: 0px;
 }

package/src/scss/props/_border.scss

@@ -12,8 +12,12 @@
 */
 
 // Memo: base レイヤーで初期値セット済み
-.-bd,
-[class*='-bd-'] {
+// bdc, bdw などでカラーや太さを上書きできるように border 自体を変数管理
+// .-bd .set--bd
+@include mixin.maybe_where('.-bd,[class*=" -bd-"],[class^="-bd-"]', '@base') {
+	--bds: solid;
+	--bdw: 1px;
+	--bdc: currentColor;
 	border-width: var(--bdw) #{mixin.$maybe_important};
 	border-color: var(--bdc) #{mixin.$maybe_important};
 }