@lism-css/ui 0.1.0 → 0.1.2

package/dist/components/Accordion/setAccordion.d.ts

@@ -1,3 +1,3 @@
-export function setEvent(currentRef: any): (() => void) | undefined;
+export function setEvent(details: any): (() => void) | undefined;
 export default setAccordion;
 declare function setAccordion(): void;

package/dist/components/Accordion/setAccordion.js

@@ -1,37 +1,48 @@
-const s = (t) => Promise.all(t.getAnimations().map((e) => e.finished)), d = async (t, e = !1) => {
-  if (t.dataset.animating && !e) return;
-  t.dataset.animating = "1";
-  const n = t.querySelector(".d--accordion_body");
-  t.open ? t.open && (t.removeAttribute("data-opened"), await s(n), delete t.dataset.animating, t.open = !1) : (t.open = !0, setTimeout(async () => {
-    t.setAttribute("data-opened", ""), await s(n), delete t.dataset.animating;
-  }, 5));
-}, u = (t, e) => {
-  const n = e.open, o = e.hasAttribute("data-opened");
-  n && !o && e.setAttribute("data-opened", ""), !n && o && e.removeAttribute("data-opened");
-}, p = (t) => {
-  const e = t, n = e.querySelector('[data-role="trigger"]') || e.querySelector("summary");
-  if (!n) return;
-  let o = !1;
-  const r = e.parentNode;
-  r != null && (o = r.dataset.accordionMultiple !== "disallow");
-  const c = (a) => {
-    if (a.preventDefault(), !o && !e.open) {
-      const l = r.querySelector("[data-opened]");
-      l != null && d(l, !0);
+const l = (e) => {
+  const t = e.querySelector(".d--accordion_body"), n = t ? t.getAnimations() : [];
+  return Promise.allSettled(n.map((o) => o.finished));
+}, s = async (e) => {
+  e.open && e.hasAttribute("data-opened") || (e.open = !0, requestAnimationFrame(() => {
+    e.setAttribute("data-opened", "");
+  }));
+}, a = async (e) => {
+  !e.open && !e.hasAttribute("data-opened") || (e.removeAttribute("data-opened"), await l(e), e.open = !1);
+}, i = (e) => {
+  let t = !1;
+  const n = e.parentNode;
+  return n != null && (t = n.dataset.multiple !== "disallow"), t;
+}, p = (e, t) => {
+  if (e.open)
+    e.open && a(e);
+  else {
+    if (!t) {
+      const o = e.parentNode.querySelector("[data-opened]");
+      requestAnimationFrame(() => {
+        o != null && a(o);
+      });
     }
-    d(e);
-  }, i = (a) => {
-    u(a, e);
+    s(e);
+  }
+}, u = (e) => {
+  const t = e.open, n = e.hasAttribute("data-opened");
+  t && !n && e.setAttribute("data-opened", ""), !t && n && e.removeAttribute("data-opened");
+}, d = (e) => {
+  const t = i(e), n = e.querySelector("summary");
+  if (!n) return;
+  const o = (c) => {
+    c.preventDefault(), p(e, t);
+  }, r = () => {
+    u(e);
   };
-  return n.addEventListener("click", c), e.addEventListener("toggle", i), () => {
-    n.removeEventListener("click", c), e.removeEventListener("toggle", i);
+  return n.addEventListener("click", o), e.addEventListener("toggle", r), () => {
+    n.removeEventListener("click", o), e.removeEventListener("toggle", r);
   };
 }, m = () => {
-  document.querySelectorAll(".d--accordion").forEach((e) => {
-    p(e);
+  document.querySelectorAll(".d--accordion").forEach((t) => {
+    d(t);
   });
 };
 export {
   m as default,
-  p as setEvent
+  d as setEvent
 };

package/dist/components/Avatar/astro/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Avatar/react/Avatar.d.ts

@@ -0,0 +1,6 @@
+export default function Avatar({ size, src, alt, ...props }: {
+    [x: string]: any;
+    size?: string | undefined;
+    src?: string | undefined;
+    alt?: string | undefined;
+}): import("react").JSX.Element;

package/dist/components/Avatar/react/index.d.ts

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

package/dist/components/Badge/astro/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Badge/react/Badge.d.ts

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

package/dist/components/Badge/react/index.d.ts

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

package/dist/components/Button/astro/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/react/Button.d.ts

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

package/dist/components/Button/react/index.d.ts

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

package/dist/components/astro.d.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Avatar } from './Avatar/astro';
+export { default as Badge } from './Badge/astro';
+export { default as Button } from './Button/astro';
 export { default as Modal } from './Modal/astro';
 export { default as Tabs } from './Tabs/astro';

package/dist/components/react.d.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Avatar } from './Avatar/react';
+export { default as Badge } from './Badge/react';
+export { default as Button } from './Button/react';
 export { default as Modal } from './Modal/react';
 export { default as Tabs } from './Tabs/react';

package/dist/style.css

@@ -1 +1 @@
-@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.4s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;outline-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon .a--icon{rotate:var(--_isOpen,-180deg);transition-duration:var(--duration)}}
+@layer lism.modules{.d--accordion{--duration:var(--acc-duration,0.25s)}.d--accordion[data-opened]{--_notOpen: }.d--accordion:not([data-opened]){--_isOpen: }.d--accordion_header{align-items:center;display:grid;gap:.5em;grid:auto/1fr auto;--focus-offset:-1px;&::-webkit-details-marker{display:none}}.d--accordion_body{display:grid;grid:1fr/auto;transition-duration:var(--duration);transition-property:margin-block,padding-block,opacity,grid-template}.d--accordion_inner{overflow:hidden}.d--accordion:not([data-opened])>.d--accordion_body{grid:0fr/auto;margin-block:0!important;padding-block:0!important}.d--accordion_icon{display:grid}.d--accordion_icon>.a--icon{transform:var(--_isOpen,scaleY(-1));transition:transform var(--duration)}.c--badge{--c:var(--base);--bgc:var(--text);--bdc:transparent;background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c)}.c--badge--outline{--c:var(--text);--bgc:transparent;--bdc:currentColor}.c--button{--c:var(--base);--bgc:var(--text);--bdc:var(--bgc);background-color:var(--bgc);border:1px solid var(--bdc);color:var(--c);gap:var(--s10);place-content:center;place-items:center;text-decoration:none}.c--button--outline{--c:var(--text);--bgc:transparent;--bdc:var(--c)}}@layer lism.modules{}@layer lism.modules{:where(.c--button)>.a--icon{scale:1.05}.c--button:where(.l--grid){grid-template-columns:minmax(1em,auto) 1fr minmax(1em,auto);justify-items:center}.c--button:where(.l--grid)>:not(.a--icon){grid-column:2}}.-hov\:reverse{--hov-c:var(--bgc);--hov-bgc:var(--c)}.-hov\:reverse:where(.c--button--fill){--hov-bgc:transparent}.-hov\:reverse:where(.c--button--outline){--hov-c:var(--base)}@media (any-hover:hover){.-hov\:reverse:hover{background-color:var(--hov-bgc)!important;color:var(--hov-c)!important}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -39,7 +39,7 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.8.0"
+    "lism-css": "0.8.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.27.2",

package/src/components/Accordion/_style.css

@@ -1,6 +1,6 @@
 @layer lism.modules {
 	.d--accordion {
-		--duration: var(--acc-duration, 0.4s);
+		--duration: var(--acc-duration, 0.25s);
 	}
 	.d--accordion[data-opened] {
 		--_notOpen: ;
@@ -14,7 +14,7 @@
 		grid: auto / 1fr auto;
 		gap: 0.5em;
 		align-items: center;
-		outline-offset: -1px; /* overflow:clip|hidden; で見えなくなってしまうのを防ぐ */
+		--focus-offset: -1px; /* overflow:hidden; で見えなくなってしまいがちなので内側に寄せておく */
 
 		/* Safariで表示されるデフォルトの三角形アイコンを消す */
 		&::-webkit-details-marker {
@@ -47,8 +47,8 @@
 	}
 
 	/* .d--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
-	.d--accordion_icon .a--icon {
-		transition-duration: var(--duration);
-		rotate: var(--_isOpen, -180deg);
+	.d--accordion_icon > .a--icon {
+		transition: transform var(--duration);
+		transform: var(--_isOpen, scaleY(-1));
 	}
 }

package/src/components/Accordion/react/Accordion.jsx

@@ -7,9 +7,6 @@ import AccIcon from './AccIcon';
 
 import '../_style.css';
 
-// import { AccContext } from './context';
-
-// duration: [s]
 export function Accordion({ children, ...props }) {
 	const ref = React.useRef(null);
 
@@ -22,12 +19,10 @@ export function Accordion({ children, ...props }) {
 
 	return (
 		<details ref={ref} {...lismProps}>
-			{/* <AccContext.Provider value={deliverState}>{children}</AccContext.Provider> */}
 			{children}
 		</details>
 	);
 }
-
 export function Header({ children, ...props }) {
 	return (
 		<Lism tag='summary' {...defaultProps.header} {...props}>
@@ -42,7 +37,6 @@ export function Label({ children, ...props }) {
 		</Lism>
 	);
 }
-
 export function Body({ children, flow, innerProps, ...props }) {
 	return (
 		<Lism {...defaultProps.body} {...props}>

package/src/components/Accordion/setAccordion.js

@@ -1,99 +1,112 @@
-// open 属性付与からクラスの付与まで、ほんの少しだけ遅らせた方が動作が安定する
-const DELAY = 5;
+// アニメーションが完了するのを待つ
+const waitAnimation = (details) => {
+	// アニメーション対象の要素を直接取得.（getAnimations({subtree: true}) は iOS Safari で動作しない場合があるので __body を直接監視）
+	const body = details.querySelector('.d--accordion_body');
+	const animations = body ? body.getAnimations() : [];
 
-// モーダルのアニメーションが完了するのを待つ.
-const waitAnimation = (element) => {
-	return Promise.all(element.getAnimations().map((a) => a.finished));
+	// allSettled を使うことで、キャンセル時も reject せずに完了する
+	return Promise.allSettled(animations.map((a) => a.finished));
 };
 
 // animationTime: [ms]
-const clickedEvent = async (details, force = false) => {
-	// アニメーション中かどうか
-	if (details.dataset.animating && !force) return;
-	details.dataset.animating = '1';
+const open = async (details) => {
+	// すでに開いている場合は何もしない
+	if (details.open && details.hasAttribute('data-opened')) return;
 
-	const body = details.querySelector('.d--accordion_body');
+	// open属性をセット
+	details.open = true;
 
-	// オープン / クローズ 処理
-	if (!details.open) {
-		details.open = true;
-		// 少しだけ遅らせた方が動作が安定する
-		setTimeout(async () => {
-			details.setAttribute('data-opened', ''); // クラスの追加
-
-			// アニメーション完了後に dataset を除去。
-			await waitAnimation(body);
-			delete details.dataset.animating;
-		}, DELAY);
-	} else if (details.open) {
-		details.removeAttribute('data-opened'); // クラスを削除
+	// 次フレームで data-opened 属性を付与（CSS側でフェードインアニメーション開始）
+	requestAnimationFrame(() => {
+		details.setAttribute('data-opened', ''); // 属性の追加
+	});
+};
+
+const close = async (details) => {
+	// すでに閉じている場合は何もしない
+	if (!details.open && !details.hasAttribute('data-opened')) return;
+
+	details.removeAttribute('data-opened'); // 属性を削除
 
-		// アニメーション完了後に open属性 を除去。
-		await waitAnimation(body);
+	// アニメーションを待つ
+	await waitAnimation(details);
 
-		delete details.dataset.animating;
-		details.open = false;
+	// アニメーション完了後にopen属性 を除去。
+	details.open = false;
+};
+
+// 複数展開を許可するかどうかを、親要素の [data-multiple] でチェック.
+const getAllowMultiple = (details) => {
+	let allowMultiple = false;
+	const parent = details.parentNode;
+	if (null != parent) {
+		const dataMultiple = parent.dataset.multiple;
+		allowMultiple = 'disallow' !== dataMultiple;
 	}
+	return allowMultiple;
 };
 
-const toggleEvent = (e, details) => {
-	// e.preventDefault();
-	// console.log('toggleEvent', e.target, e.currentTarget);
+const onClick = (details, allowMultiple) => {
+	if (!details.open) {
+		if (!allowMultiple) {
+			// （複数展開が禁止されている場合）他の開いているアイテムがあるかどうかを先に探して閉じる
+			const parent = details.parentNode;
+			const openedItem = parent.querySelector(`[data-opened]`);
+			requestAnimationFrame(() => {
+				// 1フレーム待機（safariでは requestAnimationFrame() がないと動かなかった）
+				if (null != openedItem) close(openedItem);
+			});
+		}
+
+		// 開く処理
+		open(details);
+	} else if (details.open) {
+		// 閉じる処理
+		close(details);
+	}
+};
 
+const onToggle = (details) => {
 	const hasOpen = details.open;
-	const hasOpenedClass = details.hasAttribute('data-opened');
+	const hasDataOpen = details.hasAttribute('data-opened');
 
-	// open はセットされたのに data-opened がついてない時
-	if (hasOpen && !hasOpenedClass) {
+	// open はセットされたのに data-opened 属性がついてない時
+	if (hasOpen && !hasDataOpen) {
 		details.setAttribute('data-opened', '');
 	}
-	// open は削除されたのに data-opened がまだついている時
-	if (!hasOpen && hasOpenedClass) {
+	// open は削除されたのに data-opened 属性がまだついている時
+	if (!hasOpen && hasDataOpen) {
 		details.removeAttribute('data-opened');
 	}
 };
 
-export const setEvent = (currentRef) => {
-	const details = currentRef;
-	// トリガーが明示的に指定されていない場合は、<summary> 要素をトリガーとする
-	const clickBtn = details.querySelector(`[data-role="trigger"]`) || details.querySelector('summary');
+export const setEvent = (details) => {
+	// 複数展開を制限するかどうか
+	const allowMultiple = getAllowMultiple(details);
 
-	if (!clickBtn) return;
+	// <summary> 要素をトリガーとする
+	const summary = details.querySelector('summary');
+	if (!summary) return;
 
-	// 複数展開を許可するかどうかを、親要素の [data-accordion-multiple] でチェック.
-	let allowMultiple = false;
-	const parent = details.parentNode;
-	if (null != parent) {
-		const dataMultiple = parent.dataset.accordionMultiple;
-		allowMultiple = 'disallow' !== dataMultiple;
-	}
-
-	const _clickedEvent = (e) => {
+	const _clickEvent = (e) => {
 		// すぐに open 属性が切り替わらないようにする
 		e.preventDefault();
-
-		// 複数展開が禁止されている場合、（開く処理の直前で）他の開いているアイテムがあれば閉じる
-		if (!allowMultiple && !details.open) {
-			const openedItem = parent.querySelector(`[data-opened]`);
-			if (null != openedItem) clickedEvent(openedItem, true);
-		}
-
-		// 自身のクリック処理
-		clickedEvent(details);
+		onClick(details, allowMultiple);
 	};
-	const _toggleEvent = (e) => {
-		toggleEvent(e, details);
+	const _toggleEvent = () => {
+		onToggle(details);
 	};
 
 	// <summary> 'click' イベント
-	clickBtn.addEventListener('click', _clickedEvent);
+	summary.addEventListener('click', _clickEvent);
 
 	// <details> の'toggle' イベントで、ページ内検索時にも開閉されるようにする
 	details.addEventListener('toggle', _toggleEvent);
 
-	// useEffectでアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
+	// react用
 	return () => {
-		clickBtn.removeEventListener('click', _clickedEvent);
+		// useEffect でアンマウントされた時にremoveEventListenerしないと2重でイベントが登録してしまう。
+		summary.removeEventListener('click', _clickEvent);
 		details.removeEventListener('toggle', _toggleEvent);
 	};
 };

package/src/components/Avatar/_style.css

@@ -0,0 +1,2 @@
+/* Avatar component styles */
+/* このコンポーネントは現時点でカスタムスタイルを必要としません */

package/src/components/Avatar/astro/Avatar.astro

@@ -0,0 +1,10 @@
+---
+import { Frame } from 'lism-css/astro';
+// import '../_style.css';
+
+const { size = '1.5em', src = '', alt = '', ...props } = Astro.props;
+---
+
+<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
+	<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
+</Frame>

package/src/components/Avatar/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Avatar.astro';

package/src/components/Avatar/react/Avatar.jsx

@@ -0,0 +1,10 @@
+import { Frame } from 'lism-css/react';
+// import '../_style.css';
+
+export default function Avatar({ size = '1.5em', src = '', alt = '', ...props }) {
+	return (
+		<Frame lismClass='c--avatar' ar='1/1' w={size} bdrs='99' {...props}>
+			<img src={src} alt={alt} width='100%' height='100%' decoding='async' />
+		</Frame>
+	);
+}

package/src/components/Avatar/react/index.js

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

package/src/components/Badge/_style.css

@@ -0,0 +1,15 @@
+@layer lism.modules {
+	.c--badge {
+		--c: var(--base);
+		--bgc: var(--text);
+		--bdc: transparent;
+		color: var(--c);
+		background-color: var(--bgc);
+		border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+	}
+	.c--badge--outline {
+		--c: var(--text);
+		--bgc: transparent;
+		--bdc: currentColor;
+	}
+}

package/src/components/Badge/astro/Badge.astro

@@ -0,0 +1,16 @@
+---
+import { Lism } from 'lism-css/astro';
+import '../_style.css';
+
+const props = Astro.props;
+
+// c--badge では c, bgc は 変数で受け取る
+const _propConfig = {
+	c: { isVar: 1 },
+	bgc: { isVar: 1 },
+};
+---
+
+<Lism lismClass='c--badge' tag='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props}>
+	<slot />
+</Lism>

package/src/components/Badge/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Badge.astro';

package/src/components/Badge/react/Badge.jsx

@@ -0,0 +1,14 @@
+import { Lism } from 'lism-css/react';
+import '../_style.css';
+
+export default function Badge(props) {
+	// c--badge では c, bgc は 変数で受け取る
+	const _propConfig = {
+		c: { isVar: 1 },
+		bgc: { isVar: 1 },
+	};
+
+	return (
+		<Lism lismClass='c--badge' tag='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props} />
+	);
+}

package/src/components/Badge/react/index.js

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

package/src/components/Button/_style.css

@@ -0,0 +1,54 @@
+@layer lism.modules {
+	.c--button {
+		--c: var(--base);
+		--bgc: var(--text);
+		--bdc: var(--bgc);
+
+		color: var(--c);
+		background-color: var(--bgc);
+		border: solid 1px var(--bdc); /* 異なる variant を並べてもサイズに差が出ないようにborderを常に指定 */
+
+		gap: var(--s10);
+		text-decoration: none;
+		place-content: center;
+		place-items: center;
+	}
+	.c--button--outline {
+		--c: var(--text);
+		--bgc: transparent;
+		--bdc: var(--c);
+	}
+
+	:where(.c--button) > .a--icon {
+		scale: 1.05;
+	}
+
+	/* l--gridを使用する場合の追加スタイル */
+	.c--button:where(.l--grid) {
+		grid-template-columns: minmax(1em, auto) 1fr minmax(1em, auto);
+		justify-items: center;
+	}
+	.c--button:where(.l--grid) > :not(.a--icon) {
+		grid-column: 2;
+	}
+}
+
+/* --------------------
+  reverse
+ -------------------- */
+.-hov\:reverse {
+	--hov-c: var(--bgc);
+	--hov-bgc: var(--c);
+}
+.-hov\:reverse:where(.c--button--fill) {
+	--hov-bgc: transparent;
+}
+.-hov\:reverse:where(.c--button--outline) {
+	--hov-c: var(--base);
+}
+@media (any-hover: hover) {
+	.-hov\:reverse:hover {
+		background-color: var(--hov-bgc) !important;
+		color: var(--hov-c) !important;
+	}
+}

package/src/components/Button/astro/Button.astro

@@ -0,0 +1,16 @@
+---
+import { Flex } from 'lism-css/astro';
+import '../_style.css';
+
+const props = Astro.props;
+
+// c--button では c, bgc は 変数で受け取る
+const _propConfig = {
+	c: { isVar: 1 },
+	bgc: { isVar: 1 },
+};
+---
+
+<Flex lismClass='c--button' tag='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props}>
+	<slot />
+</Flex>

package/src/components/Button/astro/index.js

@@ -0,0 +1 @@
+export { default } from './Button.astro';

package/src/components/Button/react/Button.jsx

@@ -0,0 +1,14 @@
+import { Flex } from 'lism-css/react';
+import '../_style.css';
+
+export default function Button(props) {
+	// c--button では c, bgc は 変数で受け取る
+	const _propConfig = {
+		c: { isVar: 1 },
+		bgc: { isVar: 1 },
+	};
+
+	return (
+		<Flex lismClass='c--button' tag='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props} />
+	);
+}

package/src/components/Button/react/index.js

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

package/src/components/astro.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/astro';
+export { default as Avatar } from './Avatar/astro';
+export { default as Badge } from './Badge/astro';
+export { default as Button } from './Button/astro';
 export { default as Modal } from './Modal/astro';
 export { default as Tabs } from './Tabs/astro';

package/src/components/react.ts

@@ -1,3 +1,6 @@
 export { default as Accordion } from './Accordion/react';
+export { default as Avatar } from './Avatar/react';
+export { default as Badge } from './Badge/react';
+export { default as Button } from './Button/react';
 export { default as Modal } from './Modal/react';
 export { default as Tabs } from './Tabs/react';

package/src/style.scss

@@ -1 +1,4 @@
-@use './components/Accordion/_style.css';
+@use './components/Accordion/_style.css' as accordion;
+@use './components/Avatar/_style.css' as avatar;
+@use './components/Badge/_style.css' as badge;
+@use './components/Button/_style.css' as button;