@lism-css/ui 0.9.3 → 0.10.0

package/src/components/Modal/setModal.ts

@@ -4,100 +4,100 @@ import { waitAnimation } from '../../helper/animation';
  * モーダルの開閉イベントを設定する
  */
 export function setEvent(modal: HTMLDialogElement): void {
-	// modalがない、またはidがない場合は処理を終了
-	if (!modal || !modal.id) return;
-
-	// オープンした時のトリガー要素を記憶する（data属性を戻すため）
-	let theTrigger: HTMLElement | null = null;
-
-	// モーダルを開くトリガーと閉じるトリガーを取得
-	const openTriggers = document.querySelectorAll<HTMLElement>(`[data-modal-open="${modal.id}"]`);
-	const closeTriggers = modal.querySelectorAll<HTMLElement>(`[data-modal-close="${modal.id}"]`);
-
-	/**
-	 * ダイアログを開く処理
-	 *   Point: showModal() してから、CSSアニメーション用の data-is-open属性を付与する
-	 */
-	const openDialog = () => {
-		// すでに open & data-is-open が付いていれば何もしない（連打防止）
-		if (modal.open && modal.hasAttribute('data-is-open')) return;
-
-		// showModal() でモーダルを開く（ open 属性の付与）
-		modal.showModal();
-
-		// 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
-		requestAnimationFrame(() => {
-			modal.dataset.isOpen = '1';
-		});
-	};
-
-	/**
-	 * ダイアログを閉じる処理
-	 *   Point: data-is-open属性を削除してCSSアニメーションが終わってから、close() を実行する
-	 */
-	const closeDialog = async (): Promise<void> => {
-		// すでに閉じている場合は何もしない
-		if (!modal.hasAttribute('data-is-open')) {
-			return;
-		}
-
-		// data-is-open 属性を削除（CSS側でフェードアウトアニメーション開始）
-		modal.removeAttribute('data-is-open');
-
-		// アニメーション完了を待機
-		await waitAnimation(modal);
-
-		// アニメーション終了後、dialog を閉じる（open属性の削除）
-		modal.close();
-	};
-
-	// openボタンにイベント登録
-	openTriggers.forEach((trigger) => {
-		trigger?.addEventListener('click', () => {
-			// button側にもdata属性付与
-			trigger.dataset.targetOpened = '1';
-			theTrigger = trigger; // close() 時にdata属性削除するために記憶
-
-			// モーダルを開く
-			openDialog();
-		});
-	});
-
-	// closeボタンにイベント登録
-	closeTriggers.forEach((trigger) => {
-		trigger?.addEventListener('click', () => {
-			void closeDialog();
-		});
-	});
-
-	// 余白クリックで閉じる
-	modal.addEventListener('click', (e) => {
-		if (e.target === modal) {
-			void closeDialog();
-		}
-	});
-
-	// close() 完了時にトリガーのdata属性をリセット
-	modal.addEventListener('close', () => {
-		if (theTrigger) {
-			theTrigger.removeAttribute('data-target-opened');
-			theTrigger = null;
-		}
-	});
-
-	/**
-	 * ESCキーで閉じた時もアニメーションを実行する処理
-	 */
-	modal.addEventListener('cancel', (e) => {
-		e.preventDefault(); // デフォルトの即時 close() を防ぐ
-		void closeDialog(); // 自分で用意したクローズ処理
-	});
+  // modalがない、またはidがない場合は処理を終了
+  if (!modal || !modal.id) return;
+
+  // オープンした時のトリガー要素を記憶する（data属性を戻すため）
+  let theTrigger: HTMLElement | null = null;
+
+  // モーダルを開くトリガーと閉じるトリガーを取得
+  const openTriggers = document.querySelectorAll<HTMLElement>(`[data-modal-open="${modal.id}"]`);
+  const closeTriggers = modal.querySelectorAll<HTMLElement>(`[data-modal-close="${modal.id}"]`);
+
+  /**
+   * ダイアログを開く処理
+   *   Point: showModal() してから、CSSアニメーション用の data-is-open属性を付与する
+   */
+  const openDialog = () => {
+    // すでに open & data-is-open が付いていれば何もしない（連打防止）
+    if (modal.open && modal.hasAttribute('data-is-open')) return;
+
+    // showModal() でモーダルを開く（ open 属性の付与）
+    modal.showModal();
+
+    // 次フレームで data-is-open を付与（CSS側でフェードインアニメーション開始）
+    requestAnimationFrame(() => {
+      modal.dataset.isOpen = '1';
+    });
+  };
+
+  /**
+   * ダイアログを閉じる処理
+   *   Point: data-is-open属性を削除してCSSアニメーションが終わってから、close() を実行する
+   */
+  const closeDialog = async (): Promise<void> => {
+    // すでに閉じている場合は何もしない
+    if (!modal.hasAttribute('data-is-open')) {
+      return;
+    }
+
+    // data-is-open 属性を削除（CSS側でフェードアウトアニメーション開始）
+    modal.removeAttribute('data-is-open');
+
+    // アニメーション完了を待機
+    await waitAnimation(modal);
+
+    // アニメーション終了後、dialog を閉じる（open属性の削除）
+    modal.close();
+  };
+
+  // openボタンにイベント登録
+  openTriggers.forEach((trigger) => {
+    trigger?.addEventListener('click', () => {
+      // button側にもdata属性付与
+      trigger.dataset.targetOpened = '1';
+      theTrigger = trigger; // close() 時にdata属性削除するために記憶
+
+      // モーダルを開く
+      openDialog();
+    });
+  });
+
+  // closeボタンにイベント登録
+  closeTriggers.forEach((trigger) => {
+    trigger?.addEventListener('click', () => {
+      void closeDialog();
+    });
+  });
+
+  // 余白クリックで閉じる
+  modal.addEventListener('click', (e) => {
+    if (e.target === modal) {
+      void closeDialog();
+    }
+  });
+
+  // close() 完了時にトリガーのdata属性をリセット
+  modal.addEventListener('close', () => {
+    if (theTrigger) {
+      theTrigger.removeAttribute('data-target-opened');
+      theTrigger = null;
+    }
+  });
+
+  /**
+   * ESCキーで閉じた時もアニメーションを実行する処理
+   */
+  modal.addEventListener('cancel', (e) => {
+    e.preventDefault(); // デフォルトの即時 close() を防ぐ
+    void closeDialog(); // 自分で用意したクローズ処理
+  });
 }
 
 const setModal = () => {
-	const modals = document.querySelectorAll('.c--modal');
-	modals?.forEach((target) => {
-		setEvent(target as HTMLDialogElement);
-	});
+  const modals = document.querySelectorAll('.c--modal');
+  modals?.forEach((target) => {
+    setEvent(target as HTMLDialogElement);
+  });
 };
 export default setModal;

package/src/components/NavMenu/_style.css

@@ -1,21 +1,21 @@
-@layer lism.modules {
-	.c--navMenu {
-		--link-td: none;
-		--hl: var(--hl--s);
-		--_item-p: var(--s20);
-		--focus-offset: -1px; /* アコーディオン化した時にoutlineが一部見えなくなるのを防ぐ */
-	}
+@layer lism-modules {
+  .c--navMenu {
+    --link-td: none;
+    --hl: var(--hl--s);
+    --_item-p: var(--s20);
+    --focus-offset: -1px; /* アコーディオン化した時にoutlineが一部見えなくなるのを防ぐ */
+  }
 
-	.c--navMenu_nest {
-		--_item-p: inherit;
-	}
+  .c--navMenu_nest {
+    --_item-p: inherit;
+  }
 
-	.c--navMenu_link {
-		padding: var(--_item-p);
-	}
+  .c--navMenu_link {
+    padding: var(--_item-p);
+  }
 
-	.c--navMenu_nest,
-	.c--navMenu_item {
-		--bdc: inherit;
-	}
+  .c--navMenu_nest,
+  .c--navMenu_item {
+    --bdc: inherit;
+  }
 }

package/src/components/NavMenu/astro/Item.astro

@@ -4,5 +4,5 @@ import { getItemProps } from '../getProps';
 ---
 
 <Lism {...getItemProps(Astro.props)}>
-	<slot />
+  <slot />
 </Lism>

package/src/components/NavMenu/astro/Link.astro

@@ -4,5 +4,5 @@ import { getLinkProps } from '../getProps';
 ---
 
 <Flex {...getLinkProps(Astro.props)}>
-	<slot />
+  <slot />
 </Flex>

package/src/components/NavMenu/astro/Nest.astro

@@ -4,5 +4,5 @@ import { getNestProps } from '../getProps';
 ---
 
 <Stack {...getNestProps(Astro.props)}>
-	<slot />
+  <slot />
 </Stack>

package/src/components/NavMenu/astro/Root.astro

@@ -5,5 +5,5 @@ import '../_style.css';
 ---
 
 <Stack {...getRootProps(Astro.props)}>
-	<slot />
+  <slot />
 </Stack>

package/src/components/NavMenu/getProps.js

@@ -12,41 +12,41 @@ import getMaybeCssVar from 'lism-css/lib/getMaybeCssVar';
  * @param {object} [props.style] - スタイルオブジェクト
  */
 export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }) {
-	const computedStyle = { ...style };
+  const computedStyle = { ...style };
 
-	if (hovBgc) computedStyle['--hov-bgc'] = getMaybeCssVar(hovBgc, 'color');
-	if (hovC) computedStyle['--hov-c'] = getMaybeCssVar(hovC, 'color');
-	if (itemP) computedStyle['--_item-p'] = getMaybeCssVar(itemP, 'space');
+  if (hovBgc) computedStyle['--hov-bgc'] = getMaybeCssVar(hovBgc, 'color');
+  if (hovC) computedStyle['--hov-c'] = getMaybeCssVar(hovC, 'color');
+  if (itemP) computedStyle['--_item-p'] = getMaybeCssVar(itemP, 'space');
 
-	return {
-		lismClass: 'c--navMenu',
-		as: 'ul',
-		style: computedStyle,
-		...props,
-	};
+  return {
+    lismClass: 'c--navMenu',
+    as: 'ul',
+    style: computedStyle,
+    ...props,
+  };
 }
 
 /**
  * NavMenu.Nest のプロパティを処理
  */
 export function getNestProps(props) {
-	return {
-		lismClass: 'c--navMenu_nest',
-		as: 'ul',
-		'px-s': '20',
-		...props,
-	};
+  return {
+    lismClass: 'c--navMenu_nest',
+    as: 'ul',
+    'px-s': '20',
+    ...props,
+  };
 }
 
 /**
  * NavMenu.Item のプロパティを処理
  */
 export function getItemProps(props) {
-	return {
-		lismClass: 'c--navMenu_item',
-		as: 'li',
-		...props,
-	};
+  return {
+    lismClass: 'c--navMenu_item',
+    as: 'li',
+    ...props,
+  };
 }
 
 /**
@@ -55,11 +55,11 @@ export function getItemProps(props) {
  * @param {string} [props.as='span'] - HTML タグ
  */
 export function getLinkProps({ href, as = 'span', ...props }) {
-	return {
-		lismClass: 'c--navMenu_link',
-		as: href ? 'a' : as,
-		href,
-		c: 'inherit',
-		...props,
-	};
+  return {
+    lismClass: 'c--navMenu_link',
+    as: href ? 'a' : as,
+    href,
+    c: 'inherit',
+    ...props,
+  };
 }

package/src/components/NavMenu/react/NavMenu.jsx

@@ -3,17 +3,17 @@ import { getRootProps, getNestProps, getItemProps, getLinkProps } from '../getPr
 import '../_style.css';
 
 export function Root({ children, ...props }) {
-	return <Stack {...getRootProps(props)}>{children}</Stack>;
+  return <Stack {...getRootProps(props)}>{children}</Stack>;
 }
 
 export function Nest({ children, ...props }) {
-	return <Stack {...getNestProps(props)}>{children}</Stack>;
+  return <Stack {...getNestProps(props)}>{children}</Stack>;
 }
 
 export function Item({ children, ...props }) {
-	return <Lism {...getItemProps(props)}>{children}</Lism>;
+  return <Lism {...getItemProps(props)}>{children}</Lism>;
 }
 
 export function Link({ children, ...props }) {
-	return <Flex {...getLinkProps(props)}>{children}</Flex>;
+  return <Flex {...getLinkProps(props)}>{children}</Flex>;
 }

package/src/components/ShapeDivider/_style.css

@@ -1,56 +1,56 @@
 /* Note: scale 反転は、__inner に対して行う。shapeDivider自身を反転させると、X方向に隙間ができてしまう。 */
-@layer lism.modules {
-	.c--shapeDivider {
-		--level: 0;
-
-		/* svg配置調整用 */
-		--_inner-offset: 0px;
-		--_inner-stretch: 1;
-
-		/* flip がオンなら -1 にセット */
-		--_flipX: 1;
-		--_flipY: 1;
-
-		/* 500px時点を最小値, 1200px時点を最大値にして、clampで高さを変動させる */
-		height: clamp(calc(5px * var(--level)), calc(1cqw * var(--level)), calc(12px * var(--level)));
-		overflow: visible;
-	}
-
-	.c--shapeDivider:where([data-flip^='X']) {
-		--_flipX: -1;
-	}
-
-	.c--shapeDivider:where([data-flip$='Y']) {
-		--_flipY: -1;
-	}
-	.c--shapeDivider_inner {
-		/* 隙間ができるのを防ぐ */
-		--offsetY: 0.5px;
-		--offsetX: -0.5px;
-		height: 100%;
-		width: calc(100% + 1px);
-		scale: calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);
-		translate: calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY));
-	}
-
-	.c--shapeDivider_svg {
-		/* 位置ずれ防止 */
-		display: block;
-	}
-
-	/* 左右にスライドするアニメーション */
-	:where([data-has-animation='true']) .c--shapeDivider_svg {
-		/* ↓ X 100% にしてるのは translateXのcalc計算で * -1 をしなくていいように。*/
-		transform-origin: 100% 0;
-		animation: lism--slideShape 12s infinite alternate linear;
-	}
+@layer lism-modules {
+  .c--shapeDivider {
+    --level: 0;
+
+    /* svg配置調整用 */
+    --_inner-offset: 0px;
+    --_inner-stretch: 1;
+
+    /* flip がオンなら -1 にセット */
+    --_flipX: 1;
+    --_flipY: 1;
+
+    /* 500px時点を最小値, 1200px時点を最大値にして、clampで高さを変動させる */
+    height: clamp(calc(5px * var(--level)), calc(1cqw * var(--level)), calc(12px * var(--level)));
+    overflow: visible;
+  }
+
+  .c--shapeDivider:where([data-flip^='X']) {
+    --_flipX: -1;
+  }
+
+  .c--shapeDivider:where([data-flip$='Y']) {
+    --_flipY: -1;
+  }
+  .c--shapeDivider_inner {
+    /* 隙間ができるのを防ぐ */
+    --offsetY: 0.5px;
+    --offsetX: -0.5px;
+    height: 100%;
+    width: calc(100% + 1px);
+    scale: calc(var(--_flipX) * var(--_inner-stretch)) var(--_flipY);
+    translate: calc(var(--offsetX) + var(--_inner-offset)) calc(var(--offsetY) * var(--_flipY));
+  }
+
+  .c--shapeDivider_svg {
+    /* 位置ずれ防止 */
+    display: block;
+  }
+
+  /* 左右にスライドするアニメーション */
+  :where([data-has-animation='true']) .c--shapeDivider_svg {
+    /* ↓ X 100% にしてるのは translateXのcalc計算で * -1 をしなくていいように。*/
+    transform-origin: 100% 0;
+    animation: lism--slideShape 12s infinite alternate linear;
+  }
 }
 
 @keyframes lism--slideShape {
-	0% {
-		transform: scaleX(4);
-	}
-	100% {
-		transform: scaleX(4) translateX(calc(100% - 25%));
-	}
+  0% {
+    transform: scaleX(4);
+  }
+  100% {
+    transform: scaleX(4) translateX(calc(100% - 25%));
+  }
 }

package/src/components/ShapeDivider/astro/ShapeDivider.astro

@@ -8,24 +8,24 @@ const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps || {};
 ---
 
 {
-	componentProps && (
-		<Lism {...lismProps}>
-			{isEmpty ? null : (
-				<div class='c--shapeDivider_inner'>
-					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						class='c--shapeDivider_svg'
-						viewBox={viewBox}
-						width='100%'
-						height='100%'
-						fill='currentColor'
-						focusable='false'
-						preserveAspectRatio='none'
-					>
-						<slot />
-					</svg>
-				</div>
-			)}
-		</Lism>
-	)
+  componentProps && (
+    <Lism {...lismProps}>
+      {isEmpty ? null : (
+        <div class="c--shapeDivider_inner">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="c--shapeDivider_svg"
+            viewBox={viewBox}
+            width="100%"
+            height="100%"
+            fill="currentColor"
+            focusable="false"
+            preserveAspectRatio="none"
+          >
+            <slot />
+          </svg>
+        </div>
+      )}
+    </Lism>
+  )
 }

package/src/components/ShapeDivider/getProps.js

@@ -9,32 +9,32 @@
  * @param {string} [props.flip] - X/Y/XY で反転方向を指定
  */
 export default function getProps({ viewBox, isAnimation, isEmpty, level = 5, stretch, offset, flip, style = {}, ...restProps }) {
-	// level が 0 の場合は非表示
-	if (level === 0) return null;
+  // level が 0 の場合は非表示
+  if (level === 0) return null;
 
-	// CSS変数をセット
-	const computedStyle = { ...style };
-	computedStyle['--level'] = level || null;
-	computedStyle['--_inner-offset'] = offset || null;
-	computedStyle['--_inner-stretch'] = stretch || null;
+  // CSS変数をセット
+  const computedStyle = { ...style };
+  computedStyle['--level'] = level || null;
+  computedStyle['--_inner-offset'] = offset || null;
+  computedStyle['--_inner-stretch'] = stretch || null;
 
-	const _props = {
-		lismClass: 'c--shapeDivider',
-		'max-sz': 'full',
-		'aria-hidden': 'true',
-	};
-	if (flip) _props['data-flip'] = flip;
-	if (isAnimation) _props['data-has-animation'] = 'true';
+  const _props = {
+    lismClass: 'c--shapeDivider',
+    'max-sz': 'full',
+    'aria-hidden': 'true',
+  };
+  if (flip) _props['data-flip'] = flip;
+  if (isAnimation) _props['data-has-animation'] = 'true';
 
-	return {
-		..._props,
-		style: computedStyle,
+  return {
+    ..._props,
+    style: computedStyle,
 
-		// SVG用のprops
-		viewBox,
-		isEmpty,
+    // SVG用のprops
+    viewBox,
+    isEmpty,
 
-		// その他のprops
-		...restProps,
-	};
+    // その他のprops
+    ...restProps,
+  };
 }

package/src/components/ShapeDivider/react/ShapeDivider.jsx

@@ -3,31 +3,31 @@ import getProps from '../getProps';
 import '../_style.css';
 
 export default function ShapeDivider({ children, ...props }) {
-	const componentProps = getProps(props);
+  const componentProps = getProps(props);
 
-	// level が 0 の場合は非表示
-	if (!componentProps) return null;
+  // level が 0 の場合は非表示
+  if (!componentProps) return null;
 
-	const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;
+  const { viewBox, isAnimation, isEmpty, ...lismProps } = componentProps;
 
-	return (
-		<Lism {...lismProps}>
-			{isEmpty ? null : (
-				<div className='c--shapeDivider_inner'>
-					<svg
-						xmlns='http://www.w3.org/2000/svg'
-						className='c--shapeDivider_svg'
-						viewBox={viewBox}
-						width='100%'
-						height='100%'
-						fill='currentColor'
-						focusable='false'
-						preserveAspectRatio='none'
-					>
-						{children}
-					</svg>
-				</div>
-			)}
-		</Lism>
-	);
+  return (
+    <Lism {...lismProps}>
+      {isEmpty ? null : (
+        <div className="c--shapeDivider_inner">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            className="c--shapeDivider_svg"
+            viewBox={viewBox}
+            width="100%"
+            height="100%"
+            fill="currentColor"
+            focusable="false"
+            preserveAspectRatio="none"
+          >
+            {children}
+          </svg>
+        </div>
+      )}
+    </Lism>
+  );
 }