lism-css 0.18.0 → 0.21.0

package/dist/lib/getLismProps.js

@@ -1,21 +1,22 @@
-import { TRAITS as C, PROPS as c } from "../config/index.js";
-import V from "./getLayoutProps.js";
-import E from "./getAtomicProps.js";
-import g from "./isPresetValue.js";
-import x from "./isTokenValue.js";
-import $ from "./getUtilKey.js";
-import d from "./getMaybeCssVar.js";
-import w from "./getBpData.js";
-import A from "./helper/atts.js";
-import _ from "./helper/isEmptyObj.js";
+import { TRAITS as P, PROPS as d } from "../config/index.js";
+import j from "./getLayoutProps.js";
+import k from "./getAtomicProps.js";
+import E from "./isPresetValue.js";
+import w from "./isTokenValue.js";
+import g from "./getUtilKey.js";
+import C from "./getMaybeCssVar.js";
+import x from "./getBpData.js";
+import z from "./warnUnsupportedBp.js";
+import _ from "./helper/atts.js";
+import A from "./helper/isEmptyObj.js";
 import S from "./helper/filterEmptyObj.js";
 import b from "./helper/mergeSet.js";
-import z from "./helper/splitWithComma.js";
-const L = (n) => {
-  const s = c[n];
-  return s && s?.token || "";
+import U from "./helper/splitWithComma.js";
+const W = (n) => {
+  const t = d[n];
+  return t && t?.token || "";
 };
-class T {
+class L {
   // 最終出力 className
   className = "";
   primitiveClass = [];
@@ -26,28 +27,25 @@ class T {
   styles = {};
   attrs = {};
   _propConfig;
-  constructor(s) {
-    const { forwardedRef: t, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: a = {}, ...u } = s;
-    this.styles = { ...r }, this._propConfig = { ...a }, o && o.length && (this.primitiveClass = [...o]), _(u) || (this.attrs = { ...u }, this.analyzeProps()), t && (this.attrs.ref = t), this.className = this.buildClassName(e, i);
+  constructor(t) {
+    const { forwardedRef: s, class: i, className: e, primitiveClass: o, style: r = {}, _propConfig: u = {}, ...h } = t;
+    this.styles = { ...r }, this._propConfig = { ...u }, o && o.length && (this.primitiveClass = [...o]), A(h) || (this.attrs = { ...h }, this.analyzeProps()), s && (this.attrs.ref = s), this.className = this.buildClassName(e, i);
   }
   // 最終クラス文字列の組み立て（出力順の唯一の確定地点）
   // 出力順: [className&class] [primitiveClass] [setClasses] [traitClasses] [uClasses] [propClasses]
   // className と class が両方来た場合は両方マージする（atts 内で重複は除去される）。
-  buildClassName(s, t) {
-    return A(s, t, this.primitiveClass, this.setClasses, this.traitClasses, this.uClasses, this.propClasses);
-  }
-  analyzeTrait(s, t) {
-    const { className: i, preset: e, presetClass: o, customVar: r, tokenKey: a } = s;
-    t === !0 ? this.traitClasses.push(i) : e && g(e, t) ? this.traitClasses.push(`${i} ${o}:${String(t)}`) : t && (this.traitClasses.push(i), a && r && this.addStyle(r, d(t, a)));
+  buildClassName(t, s) {
+    return _(t, s, this.primitiveClass, this.setClasses, this.traitClasses, this.uClasses, this.propClasses);
   }
   // prop解析
   analyzeProps() {
-    const s = this.extractProp("set"), t = this.extractProp("util");
-    b(void 0, s).forEach((i) => this.addSet(i)), b(void 0, t).forEach((i) => this.addUtil(`u--${i}`)), Object.keys(this.attrs).forEach((i) => {
-      if (Object.hasOwn(C, i)) {
-        const e = this.extractProp(i), o = C[i];
-        typeof o == "string" ? e && this.traitClasses.push(o) : this.analyzeTrait(o, e);
-      } else if (Object.hasOwn(c, i)) {
+    this.normalizeIsWrapper();
+    const t = this.extractProp("set"), s = this.extractProp("util");
+    b(void 0, t).forEach((i) => this.addSet(i)), b(void 0, s).forEach((i) => this.addUtil(`u--${i}`)), Object.keys(this.attrs).forEach((i) => {
+      if (Object.hasOwn(P, i)) {
+        const e = this.extractProp(i), o = P[i];
+        e && this.traitClasses.push(o);
+      } else if (Object.hasOwn(d, i)) {
         const e = this.attrs[i];
         delete this.attrs[i], this.analyzeLismProp(i, e);
       } else if (i === "hov") {
@@ -59,91 +57,96 @@ class T {
       }
     });
   }
+  // isWrapper="s" 形式のサイズ指定は contentSize Prop に寄せる。
+  normalizeIsWrapper() {
+    const t = this.attrs.isWrapper;
+    t == null || t === !1 || t === "" || t !== !0 && (this.attrs.contentSize === void 0 && (this.attrs.contentSize = t), this.attrs.isWrapper = !0);
+  }
   // Lism Prop 解析
-  analyzeLismProp(s, t) {
-    if (t == null) return;
-    let i = c[s] || null;
+  analyzeLismProp(t, s) {
+    if (s == null) return;
+    let i = d[t] || null;
     if (i === null) return;
-    this._propConfig?.[s] && (i = Object.assign({}, i, this._propConfig[s]));
-    const { base: e, ...o } = w(t);
-    this.setAttrs(s, e, i), Object.keys(o).forEach((r) => {
-      i && this.setAttrs(s, o[r], i, r);
+    this._propConfig?.[t] && (i = Object.assign({}, i, this._propConfig[t]));
+    const { base: e, ...o } = x(s);
+    process.env.NODE_ENV !== "production" && !i.bp && Object.keys(o).length > 0 && z(t), this.setAttrs(t, e, i), Object.keys(o).forEach((r) => {
+      i && this.setAttrs(t, o[r], i, r);
     });
   }
-  addSet(s) {
-    this.setClasses.push(`set--${s}`);
+  addSet(t) {
+    this.setClasses.push(`set--${t}`);
   }
-  addUtil(s) {
-    this.uClasses.push(s);
+  addUtil(t) {
+    this.uClasses.push(t);
   }
-  addUtils(s) {
-    this.uClasses.push(...s);
+  addUtils(t) {
+    this.uClasses.push(...t);
   }
-  addProp(s) {
-    this.propClasses.push(s);
+  addProp(t) {
+    this.propClasses.push(t);
   }
-  addStyle(s, t) {
-    this.styles[s] = t;
+  addStyle(t, s) {
+    this.styles[t] = s;
   }
-  addStyles(s) {
-    this.styles = { ...this.styles, ...s };
+  addStyles(t) {
+    this.styles = { ...this.styles, ...t };
   }
-  addAttrs(s) {
-    this.addStyles(s.styles || {}), this.addUtils(s.utils || []);
+  addAttrs(t) {
+    this.addStyles(t.styles || {}), this.addUtils(t.utils || []);
   }
-  extractProp(s) {
-    const t = this.attrs[s];
-    return this.attrs[s] === void 0 ? null : (delete this.attrs[s], t);
+  extractProp(t) {
+    const s = this.attrs[t];
+    return this.attrs[t] === void 0 ? null : (delete this.attrs[t], s);
   }
-  extractProps(s) {
-    const t = {};
-    return s.forEach((i) => {
-      this.attrs[i] !== void 0 && (t[i] = this.attrs[i], delete this.attrs[i]);
-    }), t;
+  extractProps(t) {
+    const s = {};
+    return t.forEach((i) => {
+      this.attrs[i] !== void 0 && (s[i] = this.attrs[i], delete this.attrs[i]);
+    }), s;
   }
   // propertyクラスを追加するか、styleにセットするかの分岐処理 @base
   // 値が null, undefined, '', false の時はスキップ
-  setAttrs(s, t, i = {}, e = "") {
-    if (t == null || t === "" || t === !1) return;
-    let o = `--${s}`, r = `-${String(i.utilKey || s)}`;
-    if (e && (o = `--${s}_${e}`, r += `_${e}`), typeof t == "string" && t.startsWith(":")) {
-      this.addProp(`${r}:${t.replace(":", "")}`);
+  setAttrs(t, s, i = {}, e = "") {
+    if (s == null || s === "" || s === !1) return;
+    let o = `--${t}`, r = `-${String(i.utilKey || t)}`;
+    if (e && (o = `--${t}_${e}`, r += `_${e}`), typeof s == "string" && s.startsWith(":")) {
+      this.addProp(`${r}:${s.replace(":", "")}`);
       return;
     }
     if (!e) {
-      const { presets: m, tokenClass: j, utils: p, shorthands: P } = i;
-      if (m && g(m, t)) {
-        const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addProp(`${r}:${h}`);
+      const { presets: p, tokenClass: V, utils: y, shorthands: m } = i;
+      if (p && E(p, s)) {
+        const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
+        f && this.addProp(`${r}:${f}`);
         return;
       }
-      if (j && i.token && x(i.token, t)) {
-        const h = typeof t == "string" || typeof t == "number" ? String(t) : "";
-        h && this.addProp(`${r}:${h}`);
+      if (V && i.token && w(i.token, s)) {
+        const f = typeof s == "string" || typeof s == "number" ? String(s) : "";
+        f && this.addProp(`${r}:${f}`);
         return;
       }
-      let f = "";
-      if (p && typeof t == "string" && (f = $(p, t)), !f && P && typeof t == "string" && (f = $(P, t, !0)), f) {
-        this.addProp(`${r}:${f}`);
+      let l = "";
+      if (y && typeof s == "string" && (l = g(y, s)), !l && m && typeof s == "string" && (l = g(m, s, !0)), l) {
+        this.addProp(`${r}:${l}`);
         return;
       }
     }
-    if (t === !0) {
+    if (s === !0) {
       this.addProp(r);
       return;
     }
-    const { prop: a, isVar: u, alwaysVar: O, token: y, bp: k } = i;
-    let l;
-    if (y && (typeof t == "string" || typeof t == "number") ? l = d(t, y) : typeof t == "string" || typeof t == "number" ? l = t : l = JSON.stringify(t), !e) {
-      if (u) {
-        this.addStyle(`--${s}`, l);
+    const { prop: u, isVar: h, alwaysVar: $, token: c, bp: O } = i;
+    let a;
+    if (c && (typeof s == "string" || typeof s == "number") ? a = C(s, c) : typeof s == "string" || typeof s == "number" ? a = s : a = JSON.stringify(s), !e) {
+      if (h) {
+        this.addStyle(`--${t}`, a);
         return;
-      } else if (!k && !O) {
-        this.addStyle(a, l);
+      } else if (!O && !$) {
+        this.addStyle(u, a);
         return;
       }
     }
-    this.addProp(r), this.addStyle(o, l);
+    this.addProp(r), this.addStyle(o, a);
   }
   // setPassProps(passVars) {
   // 	let dataList = [];
@@ -158,26 +161,26 @@ class T {
   // 		this.addStyle(`--pass_${propName}`, value);
   // 	});
   // }
-  setHovProps(s) {
-    s && (s === !0 ? this.addProp("-hov") : typeof s == "string" ? z(s).forEach((t) => {
-      this.addProp(`-hov:${t}`);
-    }) : typeof s == "object" && Object.keys(s).forEach((t) => {
-      const i = s[t];
+  setHovProps(t) {
+    t && (t === !0 ? this.addProp("-hov") : typeof t == "string" ? U(t).forEach((s) => {
+      this.addProp(`-hov:${s}`);
+    }) : typeof t == "object" && Object.keys(t).forEach((s) => {
+      const i = t[s];
       if (!(i == null || i === "" || i === !1)) {
         if (i === !0)
-          this.addProp(`-hov:${t}`);
+          this.addProp(`-hov:${s}`);
         else if (typeof i == "string" || typeof i == "number") {
-          const e = d(i, L(t));
-          this.addProp(`-hov:-${t}`), this.addStyle(`--hov-${t}`, e);
+          const e = C(i, W(s));
+          this.addProp(`-hov:-${s}`), this.addStyle(`--hov-${s}`, e);
         }
       }
     }));
   }
 }
-function Y(n) {
+function D(n) {
   if (Object.keys(n).length === 0)
     return {};
-  const { atomic: s, layout: t, ...i } = n, e = E(s, i), o = V(t, e), r = new T(o);
+  const { atomic: t, layout: s, ...i } = n, e = k(t, i), o = j(s, e), r = new L(o);
   return {
     ...S({
       className: r.className,
@@ -188,6 +191,6 @@ function Y(n) {
   };
 }
 export {
-  T as LismPropsData,
-  Y as default
+  L as LismPropsData,
+  D as default
 };

package/dist/lib/types/PropValueTypes.d.ts

@@ -1,4 +1,4 @@
-import { TOKENS, PROPS } from '../../../config/index';
+import { TOKENS, PROPS, BREAK_POINTS } from '../../../config/index';
 import { WithArbitraryString, ArrayElement, ExtractArrayValues, ExtractObjectKeys, ExtractPropertyValue } from './utils';
 import { MakeResponsive } from './ResponsiveProps';
 type PropsConfig = typeof PROPS;
@@ -33,43 +33,47 @@ type ExtractPropValues<T> = ExtractArrayValues<T, 'presets'> | ExtractObjectKeys
  * - ない場合: string | number（フォールバック）
  */
 type PropValueType<T> = ExtractPropValues<T> extends never ? string | number | boolean : WithArbitraryString<ExtractPropValues<T>> | number | boolean | null;
+/** bp で指定できるブレークポイント名（'lg' など個別指定用） */
+type BreakpointName = (typeof BREAK_POINTS)[number];
 /**
- * bp プロパティが 1 に設定されているかを判定
- * never チェックを先に行うことで、bp プロパティが存在しない場合を正しく判定
+ * bp プロパティでレスポンシブ（配列・オブジェクト形式）が有効かを判定
+ * - bp 未設定 / bp: 0 → false
+ * - bp: 1 → 全 BP からユーティリティクラス生成
+ * - bp: 'lg' 等 → 指定 BP 以降のみ（配列形式の型は bp: 1 と同様に許可）
  */
-type HasBreakpointSupport<T> = [ExtractPropertyValue<T, 'bp'>] extends [never] ? false : ExtractPropertyValue<T, 'bp'> extends 1 ? true : false;
+type HasBreakpointSupport<T> = [ExtractPropertyValue<T, 'bp'>] extends [never] ? false : ExtractPropertyValue<T, 'bp'> extends 0 ? false : ExtractPropertyValue<T, 'bp'> extends 1 | BreakpointName ? true : false;
 type AllPropKeys = keyof PropsConfig;
 /**
- * bp: 1 が設定されているプロパティのキーを抽出
+ * bp が有効（1 またはブレークポイント名）なプロパティのキーを抽出
  */
 type PropsWithBreakpoint = {
     [K in AllPropKeys]: HasBreakpointSupport<PropsConfig[K]> extends true ? K : never;
 }[AllPropKeys];
 /**
- * bp: 1 が設定されていないプロパティのキーを抽出
+ * bp が無効なプロパティのキーを抽出
  */
 type PropsWithoutBreakpoint = Exclude<AllPropKeys, PropsWithBreakpoint>;
 /**
- * bp: 1 が設定されているプロパティの型（レスポンシブ対応あり）
+ * bp が有効なプロパティの型（レスポンシブ対応あり）
  */
 export type ResponsivePropValueTypes = {
     [K in PropsWithBreakpoint]?: PropValueType<PropsConfig[K]>;
 };
 /**
- * bp: 1 が設定されていないプロパティの型（レスポンシブ対応なし）
+ * bp が無効なプロパティの型（レスポンシブ対応なし）
  */
 export type NonResponsivePropValueTypes = {
     [K in PropsWithoutBreakpoint]?: PropValueType<PropsConfig[K]>;
 };
 /**
  * PROPS 設定から生成される Props 型（レスポンシブ対応含む）
- * - bp: 1 のプロパティ: レスポンシブ対応（配列・オブジェクト形式可）
+ * - bp が有効なプロパティ: レスポンシブ対応（配列・オブジェクト形式可）
  * - bp なしのプロパティ: 単一値のみ
  * - presets/utils/token なしのプロパティ: string | number（フォールバック）
  *
  * @example
  * ```ts
- * // bp: 1 のプロパティ（fz など）
+ * // bp が有効なプロパティ（fz など）
  * fz?: 'root' | 'base' | ... | ['root', 'base'] | { base: 'root', md: 'base' }
  *
  * // bp なしのプロパティ（fw など）

package/dist/lib/types/TraitProps.d.ts

@@ -1,29 +1,28 @@
 import { TRAITS } from '../../../config/index';
-import { WithArbitraryString, ArrayElement } from './utils';
+import { PropValueTypes } from './PropValueTypes';
+import { WithArbitraryString } from './utils';
 /**
  * config/index.ts から TRAITS の型を取得
  * objDeepMerge の DeepMergeResult 型により literal types が保持される
  */
 type TraitsConfig = typeof TRAITS;
-/** preset を持つ Trait の値の型を抽出 */
-type PresetElement<T> = T extends {
-    preset: readonly unknown[];
-} ? ArrayElement<T['preset']> : never;
 /**
  * Trait 設定から Props の値の型を抽出するユーティリティ型
  */
-type ExtractTraitValue<T> = T extends string ? boolean : T extends {
-    preset: readonly unknown[];
-} ? WithArbitraryString<PresetElement<T>> | boolean : never;
+type ExtractTraitValue<T> = T extends string ? boolean : never;
+type GeneratedTraitProps = {
+    [K in keyof TraitsConfig]?: ExtractTraitValue<TraitsConfig[K]>;
+};
+type ContentSizeStringValue = Extract<NonNullable<PropValueTypes['contentSize']>, string>;
 /**
  * config/index.ts の TRAITS から自動生成される Trait Props の型
  * config/index.ts の TRAITS に新しいトレイトを追加すると自動的に反映される
  */
-export type TraitProps = {
-    [K in keyof TraitsConfig]?: ExtractTraitValue<TraitsConfig[K]>;
+export type TraitProps = Omit<GeneratedTraitProps, 'isWrapper'> & {
+    isWrapper?: boolean | ContentSizeStringValue;
 };
 /** set prop で使われるプリセット値（エディタ補完用） */
-type SetPreset = 'plain' | 'revert' | 'var:hov' | 'var:bxsh' | 'var:bdrsInner' | 'var:s';
+type SetPreset = 'plain' | 'revert' | 'hov' | 'bxsh' | 'bdrsInner' | 'bleed' | 's';
 /**
  * set prop の値の型。プリセット値がサジェストされつつ、任意の文字列も受け付ける。
  *

package/dist/lib/types/allowedTags.d.ts

@@ -1,6 +1,6 @@
 export type GroupAllowedTag = 'div' | 'section' | 'article' | 'figure' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'fieldset' | 'hgroup';
 export type TextAllowedTag = 'p' | 'div' | 'blockquote' | 'address' | 'figcaption' | 'pre';
-export type InlineAllowedTag = 'span' | 'em' | 'strong' | 'small' | 'code' | 'time' | 'i' | 'b' | 'mark' | 'abbr' | 'cite' | 'kbd';
+export type InlineAllowedTag = 'span' | 'em' | 'strong' | 'small' | 'code' | 'time' | 'i' | 'b' | 'mark' | 'abbr' | 'cite' | 'kbd' | 'label';
 export type ListAllowedTag = 'ul' | 'ol' | 'dl';
 export type ListItemAllowedTag = 'li' | 'dt' | 'dd';
 export type MediaAllowedTag = 'img' | 'video' | 'iframe' | 'picture';

package/dist/lib/warnUnsupportedBp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * bp デフォルト非対応のプロパティに BP 指定（配列 / { sm, md, ... }）が渡された時に、
+ * 開発環境でのみ警告を出す。呼び出し側で dev 判定・BP 指定有無の判定を済ませてから呼ぶ。
+ *
+ * 判定基準は JS ランタイムの propConfig.bp（config/defaults/props.ts）。
+ * SCSS の $props 上書きは CSS 出力だけを変え JS には届かないため、SCSS で BP を
+ * 再有効化済みのケースは誤検知になる。そのため抑制フラグは設けず、警告文に
+ * 「SCSS でカスタマイズ済みなら無視して OK」の注記を添える方針とする。
+ */
+export default function warnUnsupportedBp(propName: string): void;

package/dist/lib/warnUnsupportedBp.js

@@ -0,0 +1,20 @@
+const o = {
+  pl: "ps",
+  pr: "pe",
+  pt: "pbs",
+  pb: "pbe",
+  ml: "ms",
+  mr: "me",
+  mt: "mbs",
+  mb: "mbe"
+}, n = /* @__PURE__ */ new Set();
+function i(s) {
+  if (n.has(s)) return;
+  n.add(s);
+  const e = o[s], t = [`[lism-css] \`${s}\` does not support breakpoint values by default.`];
+  e && t.push(`  - Use the logical property \`${e}\` instead`), t.push(`  - ${e ? "Or e" : "E"}nable it via SCSS $props: \`'${s}': ( bp: 1 )\``), t.push("  Docs: https://lism-css.com/en/docs/customize/"), t.push("  * If you've already customized this via SCSS, you can ignore this warning."), console.warn(t.join(`
+`));
+}
+export {
+  i as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lism-css",
-  "version": "0.18.0",
+  "version": "0.21.0",
   "description": "Lism CSS is a layout-first CSS framework for websites.",
   "author": {
     "name": "ddryo",

package/packages/astro/state/Wrapper/Wrapper.astro

@@ -1,15 +1,9 @@
 ---
 import type { HTMLTag, Polymorphic } from 'astro/types';
 import type { AstroLismBaseProps } from '../../types';
-import type { LismProps } from 'lism-css/lib/getLismProps';
 import { Lism } from '../../Lism';
 
-type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> &
-  AstroLismBaseProps & {
-    contentSize?: LismProps['isWrapper'];
-  };
-
-const { contentSize = true, ...props } = Astro.props;
+type Props<Tag extends HTMLTag = 'div'> = Polymorphic<{ as: Tag }> & AstroLismBaseProps;
 ---
 
-<Lism isWrapper={contentSize} {...props}><slot /></Lism>
+<Lism isWrapper {...Astro.props}><slot /></Lism>