lism-css 0.3.4 → 0.5.0

package/config/defaults/props.js

@@ -0,0 +1,370 @@
+/**
+ * isVar: 1 → クラス出力はせずstyle属性での変数出力のみ (--bdw, --keycolor など)
+ * bp: 0 → Prop-valユーティリティクラス化されなければ、style属性で出力するだけ。
+ * bp: 1 → .-prop と --prop の セットがベースにあり、.-prop_bp と .--prop_bp で ブレイクポイント指定できる。
+ *       .-prop{propaty:var(--prop)} が基本で、ユーティリティクラスは .-prop:val{propaty:value} となる。
+ *
+ * ↓コンポーネント処理で使用される
+ * tokenClass: 1 → 対応するトークン値がそのまま全てユーティリティクラス化されるもの。
+ * shorthands: → コンポーネント側で短く書くための設定
+ *
+ * ↓SCSS出力で使用される
+ * alwaysVar: 1 → .-prop,[class*=-prop:] {propaty:var(--prop)} で、ユーティリティクラス時も常に変数管理となる。
+ * overwriteBaseVar: 1 → ブレイクポイントクラスで --prop: var(--prop_$bp) がセットされ、常にベース変数の --prop で値が取得できるようになる。
+ * important: 1 → !important を付けて最終的に出力する
+ */
+
+const PLACE_PRESETS = ['start', 'center', 'end'];
+const PLACE_UTILS = { 'flex-s': 'flex-start', 'flex-e': 'flex-end' };
+const PLACE_SHORTHANDS = { s: 'start', e: 'end', c: 'center', fs: 'flex-s', fe: 'flex-e' };
+
+export default {
+	f: { prop: 'font', presets: ['inherit'] },
+	fz: { prop: 'fontSize', token: 'fz', tokenClass: 1, bp: 1, alwaysVar: 1 },
+	fw: { prop: 'fontWeight', token: 'fw', tokenClass: 1 },
+	ff: { prop: 'fontFamily', token: 'ff', tokenClass: 1 },
+	fs: { prop: 'fontStyle', presets: ['italic'], shorthands: { i: 'italic' } },
+	lh: { prop: 'lineHeight', presets: ['1'], token: 'lh', tokenClass: 1, bp: 1, alwaysVar: 1 },
+	lts: { prop: 'letterSpacing', token: 'lts', tokenClass: 1 },
+	ta: { prop: 'textAlign', presets: ['center', 'left', 'right'] },
+	td: { prop: 'textDecoration', utils: { under: 'underline', none: 'none' } },
+	// tt: { prop: 'textTransform', utils: { upper: 'uppercase', lower: 'lowercase' } },
+	// te: { prop: 'textEmphasis', presets: ['filled'] },
+	// tsh: { prop: 'textShadow' },
+
+	d: {
+		prop: 'display',
+		presets: ['none', 'block'],
+		utils: { 'in-flex': 'inline-flex' },
+		bp: 1,
+	},
+	o: { prop: 'opacity', presets: ['0'], token: 'o', tokenClass: 1 },
+	v: { prop: 'visibility', presets: ['hidden'] },
+	ov: { prop: 'overflow', presets: ['hidden', 'auto', 'clip'] },
+	'ov-x': { prop: 'overflowX', presets: ['clip', 'auto', 'scroll'] },
+	'ov-y': { prop: 'overflowY', presets: ['clip', 'auto', 'scroll'] },
+	// overflow-clip-margin → safariで使えない
+	ar: {
+		prop: 'aspectRatio',
+		presets: ['21/9', '16/9', '3/2', '1/1'], // 4/3, 2/1
+		token: 'ar',
+		tokenClass: 1,
+		bp: 1,
+	},
+
+	// size
+	w: { prop: 'width', utils: { fit: 'fit-content' }, presets: ['100%'], token: 'sz', bp: 1 },
+	h: { prop: 'height', presets: ['100%'], token: 'sz', bp: 1 },
+	'min-w': { prop: 'minWidth', presets: ['100%'], token: 'sz', bp: 1 },
+	'max-w': { prop: 'maxWidth', presets: ['100%'], token: 'sz', bp: 1 },
+	'min-h': { prop: 'minHeight', presets: ['100%'], token: 'sz', bp: 1 },
+	'max-h': { prop: 'maxHeight', presets: ['100%'], token: 'sz', bp: 1 },
+
+	sz: { prop: 'inlineSize', token: 'sz' },
+	'min-sz': { prop: 'minInlineSize', token: 'sz' },
+	'max-sz': {
+		prop: 'maxInlineSize',
+		token: 'sz',
+		tokenClass: 1,
+		exUtility: {
+			min: '',
+			full: '',
+			outer: '',
+		},
+	},
+	ysz: { prop: 'blockSize', token: 'sz' },
+	'min-ysz': { prop: 'minBlockSize', token: 'sz' },
+	'max-ysz': { prop: 'maxBlockSize', token: 'sz' },
+
+	// bg
+	bg: { prop: 'background', bp: 1 },
+	bgi: { prop: 'backgroundImage' },
+	bgr: { prop: 'backgroundRepeat', utils: { no: 'no-repeat' } },
+	bgp: { prop: 'backgroundPosition', presets: ['center'] },
+	bgsz: { prop: 'backgroundSize', presets: ['cover', 'contain'] },
+	bga: { prop: 'backgroundAttachment' }, // fixed
+	bgo: { prop: 'backgroundOrigin' }, // border, padding, content
+	bgblend: { prop: 'backgroundBlendMode' },
+	bgclip: {
+		prop: 'backgroundClip',
+		presets: ['text'],
+	},
+	bgc: {
+		prop: 'backgroundColor',
+		presets: ['base', 'base-2', 'text', 'inherit', 'main', 'accent'],
+		utils: { trsp: 'transparent' },
+		token: 'color',
+		exUtility: { inherit: { 'background-color': 'inherit' } },
+		alwaysVar: 1,
+	},
+
+	c: {
+		// Note: bg系（bgclip）より後にくるように。
+		prop: 'color',
+		presets: ['base', 'text', 'text-2', 'main', 'accent', 'inherit'],
+		utils: { trsp: 'transparent' },
+		// tt
+		token: 'color',
+		exUtility: {
+			inherit: { color: 'inherit' }, // --c ではなく color で出力したい
+			// mix: {'--_c1:currentColor;--_c2:transparent;--c:color-mix(in srgb, var(--_c1) var(--_mix-c, 50%), var(--_c2))'},
+		},
+		alwaysVar: 1,
+	},
+	keycolor: { isVar: 1, token: 'color' },
+	bd: { prop: 'border', presets: ['none'] },
+	bds: { isVar: 1, presets: ['dashed', 'dotted', 'double'] },
+	bdc: {
+		isVar: 1,
+		presets: ['main', 'accent', 'line', 'inherit'],
+		utils: { trsp: 'transparent' },
+		token: 'color',
+	},
+	bdw: { isVar: 1, bp: 1 }, // --bdw のみ
+	'bd-x': { prop: 'borderInline' },
+	'bd-y': { prop: 'borderBlock' },
+	'bd-x-s': { prop: 'borderInlineStart' },
+	'bd-x-e': { prop: 'borderInlineEnd' },
+	'bd-y-s': { prop: 'borderBlockStart' },
+	'bd-y-e': { prop: 'borderBlockEnd' },
+	'bd-t': { prop: 'borderTop' },
+	'bd-b': { prop: 'borderBottom' },
+	'bd-l': { prop: 'borderLeft' },
+	'bd-r': { prop: 'borderRight' },
+
+	bdrs: {
+		prop: 'borderRadius',
+		presets: ['0'],
+		token: 'bdrs',
+		tokenClass: 1,
+		bp: 1,
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+	},
+	'bdrs-tl': { prop: 'borderTopLeftRadius', token: 'bdrs' },
+	'bdrs-tr': { prop: 'borderTopRightRadius', token: 'bdrs' },
+	'bdrs-br': { prop: 'borderBottomRightRadius', token: 'bdrs' },
+	'bdrs-bl': { prop: 'borderBottomLeftRadius', token: 'bdrs' },
+	'bdrs-ss': { prop: 'borderStartStartRadius', token: 'bdrs' },
+	'bdrs-se': { prop: 'borderStartEndRadius', token: 'bdrs' },
+	'bdrs-es': { prop: 'borderEndStartRadius', token: 'bdrs' },
+	'bdrs-ee': { prop: 'borderEndEndRadius', token: 'bdrs' },
+
+	bxsh: { prop: 'boxShadow', utils: { 0: 'none' }, token: 'bxsh', tokenClass: 1, bp: 1, alwaysVar: 1 },
+
+	// position
+	pos: {
+		prop: 'position',
+		presets: ['static', 'fixed', 'sticky'],
+		utils: { rel: 'relative', abs: 'absolute' },
+	},
+	z: { prop: 'zIndex', presets: ['-1', '0', '1', '99'] },
+	t: { prop: 'top', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
+	l: { prop: 'left', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
+	r: { prop: 'right', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
+	b: { prop: 'bottom', utils: { 0: '0%' }, presets: ['50%', '100%'], token: 'space' },
+	i: { prop: 'inset', utils: { 0: '0%' }, token: 'space' },
+	'i-x': { prop: 'insetInline', token: 'space' },
+	'i-y': { prop: 'insetBlock', token: 'space' },
+	'i-x-s': { prop: 'insetInlineStart', token: 'space' },
+	'i-x-e': { prop: 'insetInlineEnd', token: 'space' },
+	'i-y-s': { prop: 'insetBlockStart', token: 'space' },
+	'i-y-e': { prop: 'insetBlockEnd', token: 'space' },
+
+	// space
+	p: {
+		prop: 'padding',
+		presets: ['0'],
+		token: 'space',
+		tokenClass: 1,
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		bp: 1,
+	},
+	px: { prop: 'paddingInline', presets: ['0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+	py: { prop: 'paddingBlock', presets: ['0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+	'px-s': { prop: 'paddingInlineStart', token: 'space', bp: 1 },
+	'px-e': { prop: 'paddingInlineEnd', token: 'space', bp: 1 },
+	'py-s': { prop: 'paddingBlockStart', token: 'space', bp: 1 },
+	'py-e': { prop: 'paddingBlockEnd', token: 'space', bp: 1 },
+	pl: { prop: 'paddingLeft', token: 'space', bp: 1 },
+	pr: { prop: 'paddingRight', token: 'space', bp: 1 },
+	pt: { prop: 'paddingTop', token: 'space', bp: 1 },
+	pb: { prop: 'paddingBottom', token: 'space', bp: 1 },
+	m: {
+		prop: 'margin',
+		presets: ['auto', '0'],
+		token: 'space',
+		tokenClass: 1,
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		bp: 1,
+	},
+	mx: { prop: 'marginInline', presets: ['auto', '0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+	my: { prop: 'marginBlock', presets: ['auto', '0'], token: 'space', tokenClass: 1, alwaysVar: 1, bp: 1 },
+	'mx-s': { prop: 'marginInlineStart', presets: ['auto'], token: 'space', bp: 1 },
+	'mx-e': { prop: 'marginInlineEnd', presets: ['auto'], token: 'space', bp: 1 },
+	'my-s': { prop: 'marginBlockStart', token: 'space', bp: 1, presets: ['auto', '0'], tokenClass: 1 },
+	'my-e': { prop: 'marginInlineEnd', presets: ['auto'], token: 'space', bp: 1 },
+	ml: { prop: 'marginLeft', token: 'space', bp: 1 },
+	mr: { prop: 'marginRight', token: 'space', bp: 1 },
+	mt: { prop: 'marginTop', token: 'space', bp: 1 },
+	mb: { prop: 'marginBottom', token: 'space', bp: 1 },
+
+	g: {
+		prop: 'gap',
+		presets: ['0', 'inherit'],
+		exUtility: { inherit: { gap: 'inherit' } },
+		token: 'space',
+		tokenClass: 1,
+		alwaysVar: 1,
+		overwriteBaseVar: 1,
+		bp: 1,
+	},
+	'g-x': { prop: 'columnGap', token: 'space', bp: 1 },
+	'g-y': { prop: 'rowGap', token: 'space', bp: 1 },
+	cols: { isVar: 1, bp: 1 },
+	rows: { isVar: 1, bp: 1 },
+
+	// flex
+	fxf: { prop: 'flexFlow' },
+	fxw: { prop: 'flexWrap', presets: ['wrap'], bp: 1 },
+	fxd: { prop: 'flexDirection', utils: { col: 'column', 'col-r': 'column-reverse', 'row-r': 'row-reverse' }, bp: 1 },
+	fx: { prop: 'flex', presets: ['1'], bp: 1 },
+	fxg: { prop: 'flexGrow', presets: ['1'] },
+	fxsh: { prop: 'flexShrink', presets: ['0'] },
+	fxb: { prop: 'flexBasis', bp: 1 },
+
+	// grid
+	// gd: { prop: 'grid' },
+	gt: {
+		prop: 'gridTemplate',
+		presets: ['repeat'],
+		exUtility: {
+			repeat: {
+				'--cols': '1',
+				'--rows': '1',
+				'grid-template': 'repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr)',
+			},
+		},
+		bp: 1,
+	},
+	gta: { prop: 'gridTemplateAreas', bp: 1 },
+	gtc: {
+		prop: 'gridTemplateColumns',
+		presets: ['subgrid', 'liquid'],
+		exUtility: {
+			// repeat: { '--cols': '1', '--gtc': 'repeat(var(--cols), 1fr)' },
+			liquid: { '--cols': 'var(--sz--min)', '--gtc': 'repeat(auto-fill, minmax(min(var(--cols), 100%), 1fr))' },
+		},
+		bp: 1,
+	},
+	gtr: {
+		prop: 'gridTemplateRows',
+		presets: ['subgrid'],
+		// exUtility: { repeat: { '--rows': '1', '--gtr': 'repeat(var(--rows), 1fr)' } },
+		bp: 1,
+	},
+	gaf: { prop: 'gridAutoFlow', utils: { row: 'row', col: 'column' }, bp: 1 }, //dense
+	gac: { prop: 'gridAutoColumns' },
+	gar: { prop: 'gridAutoRows' },
+
+	// grid item
+	ga: { prop: 'gridArea', utils: { '1/1': '1 / 1' }, bp: 1 },
+	gc: { prop: 'gridColumn', utils: { '1/-1': '1 / -1' }, bp: 1 },
+	gr: { prop: 'gridRow', utils: { '1/-1': '1 / -1' }, bp: 1 },
+	gcs: { prop: 'gridColumnStart' },
+	gce: { prop: 'gridColumnEnd' },
+	grs: { prop: 'gridRowStart' },
+	gre: { prop: 'gridRowEnd' },
+
+	// places
+	// -(ai|ac|ji|jc|aslf|jslf):   /    -$1:
+	ai: {
+		prop: 'alignItems',
+		presets: [...PLACE_PRESETS, 'stretch'],
+		utils: PLACE_UTILS,
+		shorthands: PLACE_SHORTHANDS,
+		bp: 1,
+	},
+	ac: {
+		prop: 'alignContent',
+		presets: PLACE_PRESETS,
+		utils: { ...PLACE_UTILS, between: 'space-between' },
+		shorthands: PLACE_SHORTHANDS,
+		bp: 1,
+	},
+	ji: {
+		prop: 'justifyItems',
+		presets: [...PLACE_PRESETS, 'stretch'],
+		utils: PLACE_UTILS,
+		shorthands: PLACE_SHORTHANDS,
+		bp: 1,
+	},
+	jc: {
+		prop: 'justifyContent',
+		presets: PLACE_PRESETS,
+		utils: { ...PLACE_UTILS, between: 'space-between' },
+		shorthands: PLACE_SHORTHANDS,
+		bp: 1,
+	},
+	aslf: {
+		prop: 'alignSelf',
+		presets: [...PLACE_PRESETS, 'stretch'],
+		shorthands: PLACE_SHORTHANDS,
+	},
+	jslf: {
+		prop: 'justifySelf',
+		presets: [...PLACE_PRESETS, 'stretch'],
+		shorthands: PLACE_SHORTHANDS,
+	},
+	pi: { prop: 'placeItems' },
+	pc: { prop: 'placeContent' },
+	pslf: { prop: 'placeSelf' },
+	order: { prop: 'order', presets: ['0', '-1', '1'] },
+
+	// transform
+	translate: {
+		prop: 'translate',
+		utils: {
+			'-50X': '-50% 0',
+			'-50Y': '0 -50%',
+			'-50XY': '-50% -50%',
+		},
+	},
+	//rtt
+	rotate: {
+		prop: 'rotate',
+		utils: {
+			[`45`]: '45deg',
+			'-45': '-45deg',
+			[`90`]: '90deg',
+			'-90': '-90deg',
+			// '180': '180deg',
+		},
+	},
+	//scl
+	scale: {
+		prop: 'scale',
+		utils: {
+			'-X': '-1 1',
+			'-Y': '1 -1',
+			'-XY': '-1 -1',
+		},
+	},
+
+	// others
+	// msk: { prop: 'mask', bp: 1 },
+	ovw: { prop: 'overflowWrap', utils: { any: 'anywhere' } },
+	whitespace: { prop: 'whiteSpace', presets: ['nowrap'] },
+	// wordbreak: { prop: 'wordBreak', utils: { keep: 'keep-all', all: 'break-all' } },
+	writing: { prop: 'writingMode', token: 'writing', tokenClass: 1, bp: 1 },
+	float: { prop: 'float', presets: ['left', 'right'] },
+	clear: { prop: 'clear', presets: ['both'] },
+	isolation: { prop: 'isolation', presets: ['isolate'] },
+
+	// transition
+	duration: { isVar: 1 },
+	delay: { isVar: 1 },
+	ease: { isVar: 1 },
+};

package/config/defaults/states.js

@@ -0,0 +1,42 @@
+import getSvgUrl from '../helper/getSvgUrl.js';
+// import minifyHtml from '../helper/minifyHtml.js';
+
+export default {
+	isContainer: {
+		className: 'is--container',
+		preset: ['s', 'm', 'l'],
+		presetClass: '-container',
+		customVar: '--contentSz',
+		tokenKey: 'sz',
+	},
+	isLayer: 'is--layer',
+	isLinkBox: 'is--linkBox',
+	isSide: 'is--side',
+	isSkipFlow: 'is--skipFlow',
+	hasGutter: 'has--gutter',
+
+	// set class
+
+	setShadow: 'set-shadow',
+	setHov: 'set-hov',
+	setTransition: 'set-transition',
+	setSnap: 'set-snap',
+	setMask: {
+		// 'set-mask',
+		className: 'set-mask',
+		setStyles: (propVal) => {
+			// minify化
+			// propVal = minifyHtml(propVal);
+			let imgUrl = propVal;
+			if (imgUrl.startsWith('<svg')) {
+				imgUrl = getSvgUrl(propVal, 'base64');
+			}
+			return {
+				'--maskImg': imgUrl,
+			};
+		},
+	},
+	setPlain: 'set-plain',
+	setRevert: 'set-revert',
+	setInnerRs: 'set-innerRs',
+};

package/config/defaults/tokens.js

@@ -0,0 +1,26 @@
+export default {
+	fz: ['root', 'base', '5xl', '4xl', '3xl', '2xl', 'xl', 'l', 'm', 's', 'xs', '2xs'],
+	lh: ['base', 'xs', 's', 'l', 'xl'],
+	lts: ['base', 's', 'l'],
+	ff: ['base', 'accent', 'mono'],
+	fw: ['thin', 'light', 'normal', 'medium', 'bold', 'black'],
+	o: ['-10', '-20', '-30'],
+	bdrs: ['5', '10', '20', '30', '40', '50', '99', 'inner'],
+	bxsh: ['5', '10', '20', '30', '40', '50'],
+	sz: ['xs', 's', 'm', 'l', 'xl', 'min', 'full', 'outer'],
+	ar: ['og'],
+	space: {
+		pre: '--s',
+		values: ['5', '10', '20', '30', '40', '50', '60', '70', '80'],
+	},
+	c: {
+		pre: '--c--',
+		values: ['base', 'base-2', 'text', 'text-2', 'line', 'link', 'main', 'accent'],
+	},
+	palette: {
+		pre: '--',
+		values: ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'gray', 'white', 'black', 'keycolor'],
+	},
+	writing: ['vertical'],
+	flow: ['s', 'base', 'l'],
+};

package/config/helper/getSvgUrl.js

@@ -0,0 +1,28 @@
+// import minifyHtml from './minifyHtml.js';
+
+/**
+ * svgをcssの image url に変換
+ */
+const getSvgUrl = (svg, encode = '') => {
+	if (!svg) return '';
+
+	// minify化
+	// svg = minifyHtml(svg);
+
+	if ('base64' === encode) {
+		// memo: btoa() だけだとマルチバイト文字が入った時にエラーになる。
+		// encodeURIComponent() でそれを回避できるがそれだとSVGとして描画できず、 unescape() と組み合わせることで期待する動作になった。 see: https://www.softel.co.jp/blogs/tech/archives/4133
+		// svg = window.btoa(unescape(encodeURIComponent(svg)));
+
+		// memo: Buffer 使えば非推奨な関数を使わなくてもいい see: https://hackersheet.com/naopoyo/sheets/bvtrkwt
+		svg = Buffer.from(svg).toString('base64');
+		return `url(data:image/svg+xml;base64,${svg})`;
+	}
+
+	// シングルクォートをダブルクォートに変換
+	svg = svg.replace(/'/g, '"');
+	// カラーコードの先頭の # → %23 に置換
+	svg = svg.replace(/="#/g, '="%23');
+	return `url('data:image/svg+xml,${svg}')`;
+};
+export default getSvgUrl;

package/config/helper/minifyHtml.js

@@ -0,0 +1,22 @@
+/**
+ * html文字列をminify
+ */
+const minifyHtml = (html) => {
+	if (!html) return '';
+
+	// 改行先に削除
+	html = html.replace(/\r?\n/g, '');
+
+	// タブ → スペース
+	html = html.replace(/\t/g, ' ');
+
+	// 複数のスペースを１つに
+	html = html.replace(/\s\s+/g, ' ');
+
+	// タグとタグの間のスペースを削除
+	html = html.replace(/> </g, '><');
+
+	return html;
+};
+
+export default minifyHtml;

package/config/helper.js

@@ -0,0 +1,67 @@
+function isObj(value) {
+	return value && typeof value === 'object' && !Array.isArray(value);
+}
+
+/**
+ * 深いマージを行う関数
+ * @param {Object} origin - マージ先となる元オブジェクト
+ * @param {Object} source - マージするソース（このデータに更新される）
+ * @returns {Object} マージされたオブジェクト
+ */
+export function objDeepMerge(origin, source) {
+	// originとsourceがオブジェクトかどうかをチェック
+	if (!origin || typeof origin !== 'object' || Array.isArray(origin)) {
+		return source;
+	}
+	if (!source || typeof source !== 'object' || Array.isArray(source)) {
+		return origin;
+	}
+
+	const result = { ...origin };
+
+	for (const key in source) {
+		if (Object.hasOwn(source, key)) {
+			const originValue = result[key];
+			const sourceValue = source[key];
+
+			if (!originValue) {
+				// origin側に存在しない新たなキーの場合はそのまま追加する
+				result[key] = sourceValue;
+			} else if (isObj(sourceValue) && isObj(originValue)) {
+				// どちらもオブジェクトの場合は再帰的にマージ
+				result[key] = objDeepMerge(originValue, sourceValue);
+			} else {
+				// どちらかのデータがobjectではない場合、そのまま上書き
+				result[key] = sourceValue;
+			}
+		}
+	}
+
+	return result;
+}
+
+/**
+ * オブジェクト内の配列を再帰的にSetに変換する関数
+ * @param {any} obj - 変換対象のオブジェクト
+ * @returns {any} 変換されたオブジェクト
+ */
+export function arrayConvertToSet(obj) {
+	// 配列の場合はSetに変換
+	if (Array.isArray(obj)) {
+		return new Set(obj);
+	}
+
+	// オブジェクトの場合は再帰的に処理
+	if (isObj(obj)) {
+		const result = {};
+		for (const key in obj) {
+			if (Object.hasOwn(obj, key)) {
+				result[key] = arrayConvertToSet(obj[key]);
+			}
+		}
+		return result;
+	}
+
+	// その他の値はそのまま返す
+	return obj;
+}

package/config/index.js

@@ -0,0 +1,15 @@
+import defaultConfig from './default-config.js';
+import userConfig from 'lism-css/config.js'; // ユーザーが上書きできる
+import { objDeepMerge, arrayConvertToSet } from './helper.js';
+
+export const CONFIG = objDeepMerge(defaultConfig, userConfig);
+
+const { tokens, props, states } = CONFIG;
+
+// 配列を Set化.
+export const TOKENS = arrayConvertToSet(structuredClone(tokens));
+export const PROPS = arrayConvertToSet(structuredClone(props));
+export const STATES = states;
+
+// ブレイクポイント
+export const BREAK_POINTS = ['sm', 'md', 'lg', 'xl'];

package/config.js

@@ -0,0 +1,2 @@
+// ユーザーのプロジェクトファイルから上書きできる設定
+export default {};

package/dist/components/Accordion/AccIcon.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { getAccIconProps as n } from "./getProps.js";
 import i from "../Lism/index.js";
-import e from "../Icon/index.js";
+import e from "../atomic/Icon/index.js";
 function u({ icon: r = "caret-down", viewBox: c, children: t = null, ...m }) {
   return /* @__PURE__ */ o(i, { ...n(m), children: t || /* @__PURE__ */ o(e, { viewBox: c, icon: r }) });
 }

package/dist/components/Accordion/getProps.js

@@ -1,29 +1,27 @@
-import i from "../../lib/helper/atts.js";
-function c({ lismClass: a, ...o }) {
-  return o.lismClass = i(a, "d--accordion"), o;
+import n from "../../lib/helper/atts.js";
+function r({ lismClass: a, ...o }) {
+  return o.lismClass = n(a, "d--accordion"), o;
 }
-function d({ isTrigger: a, ...o }) {
-  const n = {
+function t({ isTrigger: a, ...o }) {
+  const s = {
     lismClass: "d--accordion_icon",
-    tag: "span",
-    d: "inline-grid"
+    tag: "span"
+    // d: 'inline-grid',
   };
-  return a && (n.tag = "button", o["data-role"] = "trigger"), { ...n, ...o };
+  return a && (s.tag = "button", o["data-role"] = "trigger"), { ...s, ...o };
 }
-const r = {
-  header: { lismClass: "d--accordion_header", ai: "c" },
-  label: { lismClass: "d--accordion_label", tag: "span", fx: "1" },
+const i = {
+  header: { lismClass: "d--accordion_header" },
+  label: { lismClass: "d--accordion_label", tag: "span" },
   body: {
     lismClass: "d--accordion_body"
-    // trs: true,
   },
   inner: {
-    lismClass: "d--accordion_inner",
-    ov: "hidden"
+    lismClass: "d--accordion_inner"
   }
 };
 export {
-  r as defaultProps,
-  d as getAccIconProps,
-  c as getAccProps
+  i as defaultProps,
+  t as getAccIconProps,
+  r as getAccProps
 };

package/dist/components/Accordion/index.js

@@ -1,6 +1,6 @@
-import { Body as o, Label as c, Header as r, Accordion as e } from "./index2.js";
-import t from "./AccIcon.js";
-const a = { Root: e, Header: r, Label: c, Icon: t, Body: o };
+import { HeaderLabel as o, Body as e, Label as r, Header as c, Accordion as a } from "./index2.js";
+import d from "./AccIcon.js";
+const i = { Root: a, Header: c, Label: r, Icon: d, Body: e, HeaderLabel: o };
 export {
-  a as default
+  i as default
 };