lism-css 0.8.4 → 0.9.0

package/src/scss/base/set/_bp.scss

@@ -6,12 +6,12 @@
 	--_is_md: unset;
 }
 @include query.bp-up('sm') {
-	.set-bp {
+	.set--bp {
 		--_is_sm: ;
 	}
 }
 @include query.bp-up('md') {
-	.set-bp {
+	.set--bp {
 		--_is_md: ;
 	}
 }

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;
@@ -10,6 +10,7 @@
 	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
 	------------------------------------------------------------ */
@@ -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/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 };