@lism-css/ui 0.2.2 → 0.8.0

package/package.json

@@ -1,69 +1,69 @@
 {
-	"name": "@lism-css/ui",
-	"version": "0.2.2",
-	"description": "UI components by lism-css.",
-	"author": {
-		"name": "ddryo",
-		"url": "https://github.com/ddryo"
-	},
-	"license": "MIT",
-	"keywords": [
-		"css-framework",
-		"astro-component",
-		"react-component"
-	],
-	"scripts": {
-		"dev": "vite",
-		"build": "vite build && pnpm build:css",
-		"build:css": "node build-css.js"
-	},
-	"files": [
-		"dist",
-		"src"
-	],
-	"type": "module",
-	"main": "./dist/index.js",
-	"exports": {
-		"./react": {
-			"import": "./src/components/react.js",
-			"types": "./dist/components/index.d.ts"
-		},
-		"./astro": {
-			"import": "./src/components/astro.js",
-			"types": "./dist/components/index.d.ts"
-		},
-		"./scripts/*": "./dist/scripts/*.js",
-		"./style.css": "./dist/style.css"
-	},
-	"homepage": "https://www.lism.style",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
-	},
-	"bugs": {
-		"url": "https://github.com/lism-css/lism-css/issues"
-	},
-	"dependencies": {
-		"lism-css": "workspace:*"
-	},
-	"devDependencies": {
-		"@babel/cli": "^7.27.2",
-		"@babel/core": "^7.27.3",
-		"@babel/preset-env": "^7.27.2",
-		"@babel/preset-react": "^7.27.1",
-		"@rollup/plugin-babel": "^6.0.4",
-		"@vitejs/plugin-react-swc": "^3.10.0",
-		"glob": "^11.0.2",
-		"rollup": "^4.41.1",
-		"typescript": "~5.8.3",
-		"unplugin-dts": "1.0.0-beta.6",
-		"vite": "^6.3.5"
-	},
-	"peerDependencies": {
-		"@types/react": "*",
-		"@types/react-dom": "*",
-		"react": "^18 || ^19",
-		"react-dom": "^18 || ^19"
-	},
-	"sideEffects": false
-}
+  "name": "@lism-css/ui",
+  "version": "0.8.0",
+  "description": "UI components by lism-css.",
+  "author": {
+    "name": "ddryo",
+    "url": "https://github.com/ddryo"
+  },
+  "license": "MIT",
+  "keywords": [
+    "css-framework",
+    "astro-component",
+    "react-component"
+  ],
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    "./react": {
+      "import": "./src/components/react.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./astro": {
+      "import": "./src/components/astro.js",
+      "types": "./dist/components/index.d.ts"
+    },
+    "./scripts/*": "./dist/scripts/*.js",
+    "./style.css": "./dist/style.css"
+  },
+  "homepage": "https://www.lism.style",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
+  },
+  "bugs": {
+    "url": "https://github.com/lism-css/lism-css/issues"
+  },
+  "dependencies": {
+    "lism-css": "0.8.4"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.27.2",
+    "@babel/core": "^7.27.3",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@vitejs/plugin-react-swc": "^3.10.0",
+    "glob": "^11.0.2",
+    "rollup": "^4.41.1",
+    "typescript": "~5.8.3",
+    "unplugin-dts": "1.0.0-beta.6",
+    "vite": "^6.3.5"
+  },
+  "peerDependencies": {
+    "@types/react": "*",
+    "@types/react-dom": "*",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build && pnpm build:css",
+    "build:css": "node build-css.js"
+  }
+}

package/src/components/Accordion/_style.css

@@ -1,54 +1,79 @@
 @layer lism.modules {
-	.d--accordion {
+	.c--accordion {
 		--duration: var(--acc-duration, 0.25s);
 	}
-	.d--accordion[data-opened] {
-		--_notOpen: ;
+	.c--accordion_item {
+		--_panel-h: 0px;
+		--_icon-transform: rotate(0deg);
 	}
-	.d--accordion:not([data-opened]) {
-		--_isOpen: ;
+
+	/* 開いている時 */
+	.c--accordion_item[data-opened] {
+		--_icon-transform: rotate(90deg);
+		--_panel-h: auto; /* Note: アニメーション時、jsでセットされる */
 	}
 
-	.d--accordion_header {
-		display: grid;
-		grid: auto / 1fr auto;
-		gap: 0.5em;
-		align-items: center;
-		--focus-offset: -1px; /* overflow:hidden; で見えなくなってしまいがちなので内側に寄せておく */
-
-		/* Safariで表示されるデフォルトの三角形アイコンを消す */
-		&::-webkit-details-marker {
-			display: none;
-		}
+	/* .c--accordion_button {} */
+	.c--accordion_panel {
+		height: var(--_panel-h);
+		transition: height var(--duration);
 	}
 
-	.d--accordion_body {
-		display: grid;
-		grid: 1fr / auto;
-		transition-property: margin-block, padding-block, opacity, grid-template;
-		transition-duration: var(--duration);
+	/* コンテンツの paddingは __panel ではなくこっちにつける */
+	/* .c--accordion_content {} */
+
+	/* パネルが完全に閉じている時にabsoluteで飛ばしておくと、Chromeでも検索時に正常にハイライトされるようになる（なぜかは不明） */
+	[hidden] > .c--accordion_content {
+		position: absolute;
 	}
 
-	/* ※ 正常な animation には必須 */
-	.d--accordion_inner {
-		overflow: hidden;
+	/* アイコンの描画 */
+	.c--accordion_icon {
+		display: grid;
+		width: 1em;
+		height: 1em;
+
+		&::before,
+		&::after {
+			content: '';
+			display: block;
+			grid-area: 1 / 1;
+			background-color: currentColor;
+		}
+		&::before {
+			width: 0.1em;
+			height: 100%;
+			transition: transform var(--duration);
+			transform: var(--_icon-transform);
+		}
+		&::after {
+			height: 0.1em;
+			width: 100%;
+		}
 	}
 
-	/* 閉じている時 */
-	.d--accordion:not([data-opened]) > .d--accordion_body {
-		grid: 0fr / auto;
-		padding-block: 0 !important;
-		margin-block: 0 !important;
+	/* フォーカス時のアウトラインを少し内側に寄せる( overflow:hidden によって途切れてしまうので)  */
+	.c--accordion_button:focus-visible {
+		outline: solid 2px currentColor;
+		outline-color: revert;
+		outline-offset: -3px; /* offset 調整だけだとブラウザ間の差が大きい */
 	}
 
-	/* アコーディオンブロックのネスト時、別のアイコンタイプにすると表示が崩れるがそこまでは考慮しない。 */
-	.d--accordion_icon {
-		display: grid;
+	/* --- 「視差効果を減らす」設定を考慮 --- */
+	@media (prefers-reduced-motion: reduce) {
+		.c--accordion_item {
+			--duration: 0s;
+		}
 	}
 
-	/* .d--accordion_icon 自体にborderつけたりすると回転が見えてしまうので、中にある .a--icon を回転させる。 */
-	.d--accordion_icon > .a--icon {
-		transition: transform var(--duration);
-		transform: var(--_isOpen, scaleY(-1));
+	/* --- JSオフ環境の考慮 --- */
+	@media (scripting: none) {
+		.c--accordion_panel {
+			height: auto !important;
+			content-visibility: visible !important;
+		}
+		.c--accordion_content {
+			position: static !important;
+		}
 	}
 }

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

@@ -0,0 +1,13 @@
+---
+import { Lism } from 'lism-css/astro';
+import Icon from './Icon.astro';
+import { defaultProps } from '../getProps';
+
+// interface Props extends LismProps {}
+const { isOpen = false, accID = '__LISM_ACC_ID__', ...props } = Astro.props || {};
+---
+
+<Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded={isOpen ? 'true' : 'false'}>
+	<slot />
+	<Icon />
+</Lism>

package/src/components/Accordion/astro/Heading.astro

@@ -0,0 +1,10 @@
+---
+import { Lism } from 'lism-css/astro';
+import { getHeadingProps } from '../getProps';
+
+// interface Props extends LismProps {}
+---
+
+<Lism {...getHeadingProps(Astro.props || {})}>
+	<slot />
+</Lism>

package/src/components/Accordion/astro/Icon.astro

@@ -0,0 +1,15 @@
+---
+import { Lism } from 'lism-css/astro';
+import { defaultProps } from '../getProps';
+
+// Propsの定義
+// interface Props extends LismProps {
+// 	icon?: string;
+// 	size?: string;
+// 	iconProps?: Object;
+// }
+
+const props = Astro.props || {};
+---
+
+<Lism {...defaultProps.icon} {...props} />

package/src/components/Accordion/astro/Item.astro

@@ -0,0 +1,31 @@
+---
+// scriptを使うので ref の関係で <Lism> ではなく getLismProps() を使う
+import getLismProps from 'lism-css/lib/getLismProps';
+import { getItemProps } from '../getProps';
+import uuid from '../../../helper/uuid.js';
+
+import '../_style.css';
+
+const { accID: _accID, ...restProps } = Astro.props || {};
+
+// aria-controls / id 紐付け用のIDを生成（カスタム指定があればそれを使用、なければ自動生成）
+const accID = _accID || uuid();
+
+const lismProps = getLismProps(getItemProps(restProps));
+
+// 子要素のHTMLを取得し、プレースホルダーの有無で出力方法を切り替え
+// - プレースホルダーあり → 置換して set:html で出力
+// - プレースホルダーなし → 通常の slot 出力（Button/Panel に直接 accID を指定しているケース）
+const rendered = await Astro.slots.render('default');
+const slotHtml = rendered.includes('__LISM_ACC_ID__') ? rendered.replaceAll('__LISM_ACC_ID__', accID) : null;
+---
+
+{
+	slotHtml !== null ? (
+		<div {...lismProps} set:html={slotHtml} />
+	) : (
+		<div {...lismProps}>
+			<slot />
+		</div>
+	)
+}

package/src/components/Accordion/astro/Panel.astro

@@ -0,0 +1,14 @@
+---
+// import type { LismProps } from 'lism-css/types';
+import { Lism } from 'lism-css/astro';
+import { getPanelProps } from '../getProps';
+
+// interface Props extends LismProps {}
+const { panelProps, contentProps } = getPanelProps(Astro.props || {});
+---
+
+<Lism {...panelProps}>
+	<Lism {...contentProps}>
+		<slot />
+	</Lism>
+</Lism>

package/src/components/Accordion/astro/Root.astro

@@ -0,0 +1,17 @@
+---
+import { Stack } from 'lism-css/astro';
+import { getRootProps } from '../getProps';
+
+import '../_style.css';
+
+const rootProps = getRootProps(Astro.props || {});
+---
+
+<Stack {...rootProps}>
+	<slot />
+</Stack>
+
+<script>
+	import setAccordion from '../setAccordion';
+	setAccordion();
+</script>

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

@@ -1,8 +1,11 @@
-import Root from './Accordion.astro';
-import Header from './AccHeader.astro';
-import Label from './AccLabel.astro';
-import Icon from './AccIcon.astro';
-import Body from './AccBody.astro';
-import HeaderLabel from './AccHeaderLabel.astro';
+import Root from './Root.astro';
+import Item from './Item.astro';
+import Heading from './Heading.astro';
+import Button from './Button.astro';
+import Icon from './Icon.astro';
+import Panel from './Panel.astro';
 
-export default { Root, Header, HeaderLabel, Body, Icon, Label };
+// Header: Heading, Button, Iconのセット
+// Body: Panel の別名（ドキュメント向け）
+
+export default { Root, Item, Heading, Panel, Icon, Button };

package/src/components/Accordion/getProps.js

@@ -1,32 +1,77 @@
 import atts from 'lism-css/lib/helper/atts';
 
+export function getRootProps({ lismClass, allowMultiple, ...props }) {
+	props.lismClass = atts(lismClass, 'c--accordion');
+	if (allowMultiple) props['data-allow-multiple'] = 'true';
+	return props;
+}
+
 // duration: [s]
-export function getAccProps({ lismClass, ...props }) {
-	props.lismClass = atts(lismClass, 'd--accordion');
+export function getItemProps({ lismClass, ...props }) {
+	props.lismClass = atts(lismClass, 'c--accordion_item');
 	return props;
 }
 
-export function getAccIconProps({ isTrigger, ...props }) {
+export function getHeadingProps(props) {
 	const defaultProps = {
-		lismClass: 'd--accordion_icon',
-		tag: 'span',
+		lismClass: 'c--accordion_heading',
+		tag: 'div',
+		setPlain: 1,
 	};
-	// isTrigger なら、buttun にする
-	if (isTrigger) {
-		defaultProps.tag = 'button';
-		props['data-role'] = 'trigger';
+
+	const returnProps = { ...defaultProps, ...props };
+
+	// div の時は role 付与
+	if (returnProps.tag === 'div') {
+		returnProps.role = 'heading';
 	}
+	return returnProps;
+}
+
+// id: Context から取得できればそれを優先（React用）
+export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }) {
+	// panel側は必要最低限のプロパティのみ。
+	const panelProps = {
+		lismClass: atts(lismClass, 'c--accordion_panel'),
+		id: _contextID || accID,
+		hidden: isOpen ? undefined : 'until-found',
+		pos: 'relative',
+		ov: 'hidden',
+	};
 
-	return { ...defaultProps, ...props };
+	// 余白などその他の指定は全て _content 側へ渡す
+	const contentProps = { lismClass: 'c--accordion_content', layout: 'flow', ...props };
+
+	// content側へ移すprops
+	// ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb', 'px-s', 'px-e', 'py-s', 'py-e'].forEach((prop) => {
+	// 	if (props[prop]) {
+	// 		contentProps[prop] = props[prop];
+	// 		delete props[prop];
+	// 	}
+	// });
+
+	// 2つ返す
+	return { panelProps, contentProps };
 }
 
 export const defaultProps = {
-	header: { lismClass: 'd--accordion_header' },
-	label: { lismClass: 'd--accordion_label', tag: 'span' },
-	body: {
-		lismClass: 'd--accordion_body',
+	// header: { lismClass: 'c--accordion_header' },
+	button: {
+		lismClass: 'c--accordion_button',
+		tag: 'button',
+		layout: 'flex',
+		setPlain: 1,
+		g: '10',
+		w: '100%',
+		ai: 'center',
+		jc: 'between',
 	},
-	inner: {
-		lismClass: 'd--accordion_inner',
+	icon: {
+		lismClass: 'c--accordion_icon a--icon',
+		tag: 'span',
+		// d: 'grid',
+		pi: 'center',
+		fxsh: '0',
+		'aria-hidden': 'true',
 	},
 };

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

@@ -1,6 +1,7 @@
-import { Lism, Icon } from 'lism-css/react';
-import { getAccIconProps } from '../getProps';
+import { Lism } from 'lism-css/react';
+import { defaultProps } from '../getProps';
 
-export default function AccIcon({ icon = 'caret-down', viewBox, children = null, ...props }) {
-	return <Lism {...getAccIconProps(props)}>{children || <Icon viewBox={viewBox} icon={icon} />}</Lism>;
+// CSS疑似要素（::before / ::after）でアイコンを描画するコンポーネント
+export default function AccIcon(props) {
+	return <Lism {...defaultProps.icon} {...props} />;
 }

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

@@ -1,56 +1,84 @@
 import React from 'react';
 import getLismProps from 'lism-css/lib/getLismProps';
-import { Lism } from 'lism-css/react';
-import { getAccProps, defaultProps } from '../getProps';
+import { Lism, Stack } from 'lism-css/react';
+import { getRootProps, getItemProps, getHeadingProps, getPanelProps, defaultProps } from '../getProps';
 import { setEvent } from '../setAccordion';
 import AccIcon from './AccIcon';
 
 import '../_style.css';
 
-export function Accordion({ children, ...props }) {
+// Context: 純粋なReact環境で AccordionItem → Button / Panel へ accID を共有
+// Astro 環境では Context が使えないため null がフォールバック
+const AccordionContext = React.createContext(null);
+
+/**
+ * 複数の AccordionItem をラップするルート要素
+ */
+export function AccordionRoot({ children, ...props }) {
+	const rootProps = getRootProps(props);
+	return <Stack {...rootProps}>{children}</Stack>;
+}
+
+/**
+ * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
+ */
+export function AccordionItem({ children, ...props }) {
 	const ref = React.useRef(null);
 
+	// コンポーネント単位でユニークIDを生成
+	const accID = React.useId();
+
+	// マウント時に開閉イベントを登録（アンマウント時にクリーンアップ）
 	React.useEffect(() => {
 		if (!ref.current) return;
 		return setEvent(ref.current);
 	}, []);
 
-	const lismProps = getLismProps(getAccProps(props));
+	const lismProps = getLismProps(getItemProps(props));
 
 	return (
-		<details ref={ref} {...lismProps}>
-			{children}
-		</details>
+		<AccordionContext.Provider value={{ accID }}>
+			<div ref={ref} {...lismProps}>
+				{children}
+			</div>
+		</AccordionContext.Provider>
 	);
 }
-export function Header({ children, ...props }) {
-	return (
-		<Lism tag='summary' {...defaultProps.header} {...props}>
-			{children}
-		</Lism>
-	);
+
+/**
+ * 見出しエリアのラッパー（デフォルトは <div role="heading">）
+ * tag に h2〜h6 を指定すると role は付与されない
+ */
+export function Heading({ children, ...props }) {
+	return <Lism {...getHeadingProps(props)}>{children}</Lism>;
 }
-export function Label({ children, ...props }) {
+
+/**
+ * 開閉トリガーボタン
+ * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
+ */
+export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
+	const ctx = React.useContext(AccordionContext);
+	const accID = ctx?.accID || _accID;
+
 	return (
-		<Lism {...defaultProps.label} {...props}>
+		<Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded='false'>
 			{children}
+			<AccIcon />
 		</Lism>
 	);
 }
-export function Body({ children, flow, innerProps, ...props }) {
+
+/**
+ * パネル
+ */
+export function Panel({ children, ...props }) {
+	const ctx = React.useContext(AccordionContext);
+	const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });
+
 	return (
-		<Lism {...defaultProps.body} {...props}>
-			<Lism layout='flow' flow={flow} {...defaultProps.inner} {...innerProps}>
-				{children}
-			</Lism>
+		<Lism {...panelProps}>
+			<Lism {...contentProps}>{children}</Lism>
 		</Lism>
 	);
 }
-export function HeaderLabel({ children, ...props }) {
-	return (
-		<Header {...props}>
-			<Label>{children}</Label>
-			<AccIcon />
-		</Header>
-	);
-}

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

@@ -1,4 +1,7 @@
-import { Accordion as Root, Header, Label, Body, HeaderLabel } from './Accordion';
-import { default as Icon } from './AccIcon';
+import { AccordionRoot as Root, AccordionItem as Item, Heading, Button, Panel } from './Accordion';
+import Icon from './AccIcon';
 
-export default { Root, Header, Label, Icon, Body, HeaderLabel };
+// Header は Heading のエイリアス
+const Header = Heading;
+
+export default { Root, Item, Header, Heading, Panel, Icon, Button };