lism-css 0.8.3 → 0.9.0

package/src/scss/base/set/_cqUnit.scss

@@ -0,0 +1,31 @@
+/* ------------------------------------------------------------
+	cqUnit: コンテナクエリ単位の再セット
+------------------------------------------------------------ */
+.set--cqUnit {
+	--REM: var(--REM--cq);
+	font-size: var(--REM--cq);
+
+	--fz--base: var(--REM);
+
+	// ハーフレディング単位
+	--hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
+
+	// --- ハーフレディング ---
+	--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);
+
+	// --- スペーシング ---
+	--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/{modules/state → base/set}/_gutter.scss

@@ -1,3 +1,3 @@
-.has--gutter {
+.set--gutter {
 	padding-inline: var(--gutter-size);
 }

package/src/scss/base/set/_hov.scss

@@ -1,16 +1,16 @@
 @media (any-hover: hover) {
-	.set-hov:hover {
+	.set--hov:hover {
 		--_notHov: ;
 	}
-	.set-hov:not(:is(:hover, :focus-within)) {
+	.set--hov:not(:is(:hover, :focus-within)) {
 		--_isHov: ;
 	}
 }
 @media (any-hover: none) {
-	.set-hov {
+	.set--hov {
 		--_isHov: ;
 	}
 }
-.set-hov:is(:focus-visible, :focus-within) {
+.set--hov:is(:focus-visible, :focus-within) {
 	--_notHov: ;
 }

package/src/scss/base/set/_innerRs.scss

@@ -1,3 +1,3 @@
-.set-innerRs {
+.set--innerRs {
 	--bdrs--inner: calc(var(--bdrs, 0px) - var(--p, 0px));
 }

package/src/scss/base/set/_mask.scss

@@ -1,4 +1,4 @@
-// .set-mask {
+// .set--mask {
 // 	--maskPos: 50%;
 // 	--maskSize: contain;
 // 	--maskRepeat: no-repeat;

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

@@ -1,7 +1,7 @@
 // ボタンやリンク、モーダルスタイルをリセットするためのユーティリティクラス
 // Memo: font:inherit は書いていない。→  .-font:inherit がある + フォーム系には reset.css で記述済み + line-height に影響が出るため。
 
-.set-plain {
+.set--plain {
 	width: auto;
 	height: auto;
 	min-width: 0;
@@ -9,6 +9,8 @@
 	max-width: none;
 	max-height: none;
 	color: inherit;
+	font: inherit;
+	line-height: calc(1em + var(--hl) * 2); /* 全称セレクタ と同じ値 */
 	background: none;
 	padding: 0;
 	margin: 0;

package/src/scss/base/set/_transition.scss

@@ -1,6 +1,6 @@
 @use '../../_mixin' as mixin;
 
-.set-transition {
+.set--transition {
 	transition: var(--hov-duration, 0.25s) var(--hov-ease, linear) var(--hov-delay, 0s);
 	transition-property: var(--hov-prop, all);
 }

package/src/scss/base/set/index.scss

@@ -1,8 +1,8 @@
-@forward './shadow';
+@forward './cqUnit';
 @forward './bp';
 @forward './hov';
 @forward './transition';
-@forward './snap';
 @forward './mask';
 @forward './innerRs';
 @forward './plain';
+@forward './gutter';

package/src/scss/base/{set → tokens}/_shadow.scss

@@ -1,9 +1,9 @@
 /* ------------------------------------------------------------
 	shadow
-	    Memo: :root だけで変数をセットしてしまうと--shc がその時点で固定されるので、再セットできる set-shadow クラスを用意。
+	    Memo: :root だけで変数をセットしてしまうと--shc がその時点で固定されるので、再セットできる set--shadow クラスを用意。
 ------------------------------------------------------------ */
 :root,
-.set-shadow {
+.set--shadow {
 	--sh--5: var(--sh-inset) var(--shsz--5) var(--shc);
 	--sh--10: var(--sh-inset) var(--shsz--10) var(--shc);
 	--sh--20: var(--sh-inset) var(--shsz--20) var(--shc);

package/src/scss/base/{_typography.scss → tokens/_typography.scss}

@@ -1,4 +1,4 @@
-@use '../_setting' as setting;
+@use '../../_setting' as setting;
 @use 'sass:math';
 
 // フォントサイズ計算用の関数
@@ -70,8 +70,7 @@
 	Spacing
 	フィボナッチ数列 0, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89,
 ------------------------------------------------------------ */
-:root,
-.set-cqUnit {
+:root {
 	--fz--base: var(--REM);
 
 	// ハーフレディング単位
@@ -108,8 +107,3 @@
 	--s70: calc(21 * var(--s-unit));
 	--s80: calc(34 * var(--s-unit));
 }
-
-.set-cqUnit {
-	--REM: var(--REM--cq);
-	font-size: var(--REM--cq);
-}

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

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

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

@@ -1,5 +1,5 @@
 .l--flow {
-	// コンテンツ間の余白バリエーションを定義（--s は set-cqUnit で再セットされるので、:rootではなく .l--flowで定義する）
+	// コンテンツ間の余白バリエーションを定義（--s は set--cqUnit で再セットされるので、:rootではなく .l--flowで定義する）
 	--flow--base: var(--s30);
 	--flow--s: var(--s20);
 

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

@@ -5,4 +5,8 @@
 	display: grid;
 	grid-template: var(--gtr) / var(--gtc);
 	grid-template-areas: var(--gta);
+
+	> * {
+		min-width: 0;
+	}
 }

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

@@ -6,7 +6,7 @@
 .is--container > * {
 	--sz--container: 100cqi;
 }
-// has--gutterがある場合はその分を加算
-.is--container.has--gutter > * {
+// set--gutterがある場合はその分を加算
+.is--container.set--gutter > * {
 	--sz--container: calc(100cqi + var(--gutter-size) * 2);
 }

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

@@ -8,10 +8,10 @@
 }
 
 // Memo: それぞれの直下要素( > * ) に対してスタイルをセットした方がネスト時の影響をなくせるが、wrapper のネストが多様されることは少ないので親側の変数管理のみで実装。
-.-content\:s {
+.-contentSize\:s {
 	--contentSize: var(--sz--s);
 }
 
-.-content\:l {
+.-contentSize\:l {
 	--contentSize: var(--sz--l);
 }

package/src/scss/modules/state/index.scss

@@ -1,5 +1,4 @@
 // state
-@forward './gutter';
 @forward './container';
 @forward './wrapper';
 @forward './linkbox';

package/src/scss/props/_size.scss

@@ -1,7 +1,7 @@
 .-max-sz\:full {
 	max-inline-size: 100%;
 
-	:where(.has--gutter) > & {
+	:where(.set--gutter) > & {
 		max-inline-size: calc(100% + var(--gutter-size) * 2);
 		margin-inline: calc(var(--gutter-size) * -1);
 	}

package/src/scss/reset.scss

@@ -14,7 +14,7 @@
 ------------------------------------------------------------ */
 
 /* @layer で 優先度を下げる */
-@layer lism-reset {
+@layer reset {
 	/* ------------------------------------------------------------
 	 Universal
 	------------------------------------------------------------ */
@@ -54,7 +54,7 @@
 
 		/* モーダルが開いている時はコンテンツをスクロールさせない */
 		&:has(:modal[open]) {
-			overflow: hidden;
+			overflow: clip; /* sticky 要素がくずれないように clip */
 		}
 	}
 
@@ -145,7 +145,6 @@
 	/* ------------------------------------------------------------
 	 cursor 初期セット
 	------------------------------------------------------------ */
-
 	label[for],
 	select,
 	summary,
@@ -171,4 +170,12 @@
 	:disabled {
 		cursor: not-allowed;
 	}
+
+	/* ------------------------------------------------------------
+	 その他
+	------------------------------------------------------------ */
+	[hidden='until-found'] {
+		/* 意図せず他の要素の上にかぶってしまうのを防ぐ (until-found は stacking context を生成する) */
+		z-index: -1;
+	}
 }

package/src/scss/utility/_cbox.scss

@@ -2,7 +2,7 @@
 		Note: c,bgc,bdc Prop Class より優先度を下げること。
 		Memo: bgcの mix は transparent にする。半透明だと背景があると可読性が落ちる + chatのように同じ背景色の装飾を重ねても大丈夫なように。
 */
-.u-cbox {
+.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%));

package/src/scss/utility/_clipText.scss

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

package/src/scss/utility/_hidden.scss

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

package/src/scss/utility/_itemDivider.scss

@@ -1,4 +1,4 @@
-.u-collapseGrid {
+.u--collapseGrid {
 	--bdw: 1px;
 	--bdc: var(--divider);
 	gap: var(--bdw);

package/src/scss/utility/_linkExpand.scss

@@ -1,4 +1,4 @@
-.u-expandedLink {
+.u--expandedLink {
 	position: static;
 	text-decoration: none;
 	color: inherit;

package/src/scss/{base/set → utility}/_snap.scss

@@ -1,4 +1,4 @@
-.set-snap {
+.u--snap {
 	scroll-snap-type: var(--snapType, both mandatory);
 
 	& > * {

package/src/scss/utility/_trimHL.scss

@@ -1,12 +1,13 @@
-// そのうち text-box-trim が使える
+// Memo: そのうち text-box-trim が使える
 
-.u-trim {
+.u--trim {
 	// 詰まりすぎにならないようにほんの少しだけ余裕を持たせる
 	// margin-block: calc(0.5px + var(--HL) * -1);
 	margin-block: calc(var(--hl) * -1);
 }
 
-.u-trimItems {
+// 子要素の一括トリミング
+.u--trimChildren {
 	> * {
 		--my: calc(var(--hl) * -1);
 		margin-block: var(--my);
@@ -21,7 +22,7 @@
 	}
 }
 
-// .u-trimBox {
+// .u--trimBox {
 // 	:where(&) > * {
 // 		--trimHL: calc(0.5px + var(--HL) * -1);
 // 	}

package/src/scss/utility/index.scss

@@ -3,3 +3,5 @@
 @forward './itemDivider';
 @forward './linkExpand';
 @forward './hidden';
+@forward './snap';
+@forward './clipText';

package/config/default-config.js

@@ -1,9 +0,0 @@
-import TOKENS from './defaults/tokens.js';
-import PROPS from './defaults/props.js';
-import STATES from './defaults/states.js';
-
-export default {
-	tokens: TOKENS,
-	props: PROPS,
-	states: STATES,
-};

package/config/helper.js

@@ -1,67 +0,0 @@
-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/dist/components/Lism/Link.d.ts

@@ -1 +0,0 @@
-export default function Link(props: any): import("react").JSX.Element;

package/dist/components/Lism/Link.js

@@ -1,8 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import o from "./index.js";
-function a(r) {
-  return /* @__PURE__ */ t(o, { tag: "a", ...r });
-}
-export {
-  a as default
-};

package/dist/components/Lism/Text.d.ts

@@ -1 +0,0 @@
-export default function Text(props: any): import("react").JSX.Element;

package/dist/components/Lism/Text.js

@@ -1,8 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import o from "./index.js";
-function f(t) {
-  return /* @__PURE__ */ r(o, { tag: "p", ...t });
-}
-export {
-  f as default
-};

package/dist/components/Lism/__Lism_with_forwardRef.d.ts

@@ -1,5 +0,0 @@
-export default Lism;
-/**
- * Lism Propsを処理できるだけのコンポーネント
- */
-declare const Lism: import('react').ForwardRefExoticComponent<import('react').RefAttributes<any>>;

package/dist/components/Test/Test.d.ts

@@ -1,9 +0,0 @@
-declare namespace _default {
-    export { Test as Root };
-    export { Item };
-}
-export default _default;
-declare function Test({ ...props }: {
-    [x: string]: any;
-}): import("react").JSX.Element;
-declare function Item(props: any): import("react").JSX.Element;

package/dist/components/Test/TestItem.d.ts

@@ -1,2 +0,0 @@
-export default Item;
-declare function Item(props: any): import("react").JSX.Element;

package/dist/components/Test/TestRoot.d.ts

@@ -1,4 +0,0 @@
-export default TestRoot;
-declare function TestRoot({ ...props }: {
-    [x: string]: any;
-}): import("react").JSX.Element;

package/dist/components/Test/index.d.ts

@@ -1,7 +0,0 @@
-import { default as TestRoot } from './TestRoot';
-import { default as TestItem } from './TestItem';
-declare namespace _default {
-    export { TestRoot as Root };
-    export { TestItem as Item };
-}
-export default _default;

package/dist/components/__Core/Core.d.ts

@@ -1,11 +0,0 @@
-/**
- * Lism Propsを処理できるだけのコンポーネント
- */
-export default function Core({ children, as, tag, layout, exProps, ...props }: {
-    [x: string]: any;
-    children: any;
-    as: any;
-    tag: any;
-    layout: any;
-    exProps: any;
-}): import("react").JSX.Element;

package/dist/components/__Core/index.d.ts

@@ -1 +0,0 @@
-export { default as Core } from './Core';

package/packages/astro/Lism/Link.astro

@@ -1,10 +0,0 @@
----
-import type { LismProps } from '../../types';
-import Lism from './Lism.astro';
-
-interface Props extends LismProps {}
----
-
-<Lism tag='a' {...Astro.props || {}}>
-	<slot />
-</Lism>

package/packages/astro/Lism/Text.astro

@@ -1,10 +0,0 @@
----
-import type { LismProps } from '../../types';
-import Lism from './Lism.astro';
-
-interface Props extends LismProps {}
----
-
-<Lism tag='p' {...Astro.props || {}}>
-	<slot />
-</Lism>

package/packages/astro/Test/Test.astro

@@ -1,14 +0,0 @@
----
-import type { LismProps } from '../../types';
-import { Lism } from '../Lism';
-
-// Propsの定義
-interface Props extends LismProps {
-	duration?: string | number;
-}
-const props = Astro.props || {};
----
-
-<Lism data-lism='test' bd p='15' {...props}>
-	<slot />
-</Lism>

package/packages/astro/Test/TestItem.astro

@@ -1,14 +0,0 @@
----
-import type { LismProps } from '../../types';
-import { Lism } from '../Lism';
-
-// Propsの定義
-interface Props extends LismProps {
-	duration?: string | number;
-}
-const props = Astro.props || {};
----
-
-<Lism data-lism='test-item' bd bds='dashed' {...props}>
-	<slot />
-</Lism>

package/packages/astro/Test/index.js

@@ -1,4 +0,0 @@
-import { default as Root } from './Test.astro';
-import { default as Item } from './TestItem.astro';
-
-export default { Root, Item };