@lism-css/ui 0.8.0 → 0.9.1

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

@@ -34,7 +34,7 @@ export function getPanelProps({ lismClass, _contextID, accID, isOpen, ...props }
 export namespace defaultProps {
     namespace button {
         let lismClass: string;
-        let tag: string;
+        let as: string;
         let layout: string;
         let setPlain: number;
         let g: string;
@@ -44,7 +44,7 @@ export namespace defaultProps {
     }
     let icon: {
         lismClass: string;
-        tag: string;
+        as: string;
         pi: string;
         fxsh: string;
         'aria-hidden': string;

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

@@ -15,7 +15,7 @@ export function AccordionItem({ children, ...props }: {
 }): React.JSX.Element;
 /**
  * 見出しエリアのラッパー（デフォルトは <div role="heading">）
- * tag に h2〜h6 を指定すると role は付与されない
+ * as に h2〜h6 を指定すると role は付与されない
  */
 export function Heading({ children, ...props }: {
     [x: string]: any;

package/dist/components/Details/getProps.d.ts

@@ -17,13 +17,13 @@ export namespace defaultProps {
     namespace title {
         let lismClass_1: string;
         export { lismClass_1 as lismClass };
-        export let tag: string;
+        export let as: string;
         export let fx: string;
         export let setPlain: number;
     }
     let icon: {
         lismClass: string;
-        tag: string;
+        as: string;
         'aria-hidden': string;
     };
     namespace body {

package/dist/components/Modal/getProps.d.ts

@@ -7,7 +7,7 @@ export function getProps({ lismClass, duration, style, ...props }: {
     style: {};
     lismClass: string;
     setPlain: boolean;
-    tag: string;
+    as: string;
 };
 export function getInnerProps({ lismClass, offset, style, ...props }: {
     [x: string]: any;
@@ -23,14 +23,14 @@ export namespace defaultProps {
         let lismClass: string;
     }
     namespace closeBtn {
-        let tag: string;
+        let as: string;
         let setPlain: boolean;
         let hov: string;
         let d: string;
     }
     namespace openBtn {
-        let tag_1: string;
-        export { tag_1 as tag };
+        let as_1: string;
+        export { as_1 as as };
         let setPlain_1: boolean;
         export { setPlain_1 as setPlain };
         let hov_1: string;

package/dist/components/NavMenu/getProps.d.ts

@@ -13,7 +13,7 @@ export function getRootProps({ hovC, hovBgc, itemP, style, ...props }: {
     style?: object | undefined;
 }): {
     lismClass: string;
-    tag: string;
+    as: string;
     style: {};
 };
 /**
@@ -27,6 +27,6 @@ export function getItemProps(props: any): any;
 /**
  * NavMenu.Link のプロパティを処理
  * @param {string} [props.href] - リンク先URL。指定時は a タグになる
- * @param {string} [props.tag='span'] - HTML タグ
+ * @param {string} [props.as='span'] - HTML タグ
  */
-export function getLinkProps({ href, tag, ...props }?: string): any;
+export function getLinkProps({ href, as, ...props }?: string): any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "UI components by lism-css.",
   "author": {
     "name": "ddryo",
@@ -39,20 +39,21 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.8.4"
+    "lism-css": "0.9.1"
   },
   "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",
+    "@babel/cli": "^7.28.6",
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@babel/preset-react": "^7.28.5",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@types/node": "^25.5.0",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "glob": "^13.0.6",
+    "rollup": "^4.59.0",
     "typescript": "~5.8.3",
     "unplugin-dts": "1.0.0-beta.6",
-    "vite": "^6.3.5"
+    "vite": "^6.4.1"
   },
   "peerDependencies": {
     "@types/react": "*",

package/src/components/Accordion/getProps.js

@@ -2,7 +2,7 @@ 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';
+	if (allowMultiple) props['data-allow-multiple'] = '';
 	return props;
 }
 
@@ -15,14 +15,14 @@ export function getItemProps({ lismClass, ...props }) {
 export function getHeadingProps(props) {
 	const defaultProps = {
 		lismClass: 'c--accordion_heading',
-		tag: 'div',
+		as: 'div',
 		setPlain: 1,
 	};
 
 	const returnProps = { ...defaultProps, ...props };
 
 	// div の時は role 付与
-	if (returnProps.tag === 'div') {
+	if (returnProps.as === 'div') {
 		returnProps.role = 'heading';
 	}
 	return returnProps;
@@ -58,7 +58,7 @@ export const defaultProps = {
 	// header: { lismClass: 'c--accordion_header' },
 	button: {
 		lismClass: 'c--accordion_button',
-		tag: 'button',
+		as: 'button',
 		layout: 'flex',
 		setPlain: 1,
 		g: '10',
@@ -68,7 +68,7 @@ export const defaultProps = {
 	},
 	icon: {
 		lismClass: 'c--accordion_icon a--icon',
-		tag: 'span',
+		as: 'span',
 		// d: 'grid',
 		pi: 'center',
 		fxsh: '0',

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

@@ -47,7 +47,7 @@ export function AccordionItem({ children, ...props }) {
 
 /**
  * 見出しエリアのラッパー（デフォルトは <div role="heading">）
- * tag に h2〜h6 を指定すると role は付与されない
+ * as に h2〜h6 を指定すると role は付与されない
  */
 export function Heading({ children, ...props }) {
 	return <Lism {...getHeadingProps(props)}>{children}</Lism>;

package/src/components/Alert/getProps.ts

@@ -9,14 +9,7 @@ export type AlertProps = {
 	[key: string]: unknown;
 };
 
-export default function getAlertProps({
-	type = 'alert',
-	keycolor,
-	layout = 'flex',
-	icon,
-	flow = 's',
-	...props
-}: AlertProps) {
+export default function getAlertProps({ type = 'alert', keycolor, layout = 'flex', icon, flow = 's', ...props }: AlertProps) {
 	const presetData = type ? PRESETS[type] : null;
 	const _icon = icon || presetData?.icon || 'info';
 	const _color = keycolor || presetData?.color || 'currentColor';
@@ -25,7 +18,7 @@ export default function getAlertProps({
 		icon: _icon,
 		layout,
 		flow,
-		lismClass: 'c--alert u-cbox',
+		lismClass: 'c--alert u--cbox',
 		keycolor: _color,
 		ai: 'center',
 		p: '15',

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

@@ -11,6 +11,6 @@ const _propConfig = {
 };
 ---
 
-<Lism lismClass='c--badge' tag='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props}>
+<Lism lismClass='c--badge' as='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props}>
 	<slot />
 </Lism>

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

@@ -8,7 +8,5 @@ export default function Badge(props) {
 		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} />
-	);
+	return <Lism lismClass='c--badge' as='span' d='inline-flex' fz='xs' lh='xs' py='5' px='10' bdrs='10' _propConfig={_propConfig} {...props} />;
 }

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

@@ -11,6 +11,6 @@ const _propConfig = {
 };
 ---
 
-<Flex lismClass='c--button' tag='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props}>
+<Flex lismClass='c--button' as='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props}>
 	<slot />
 </Flex>

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

@@ -8,7 +8,5 @@ export default function Button(props) {
 		bgc: { isVar: 1 },
 	};
 
-	return (
-		<Flex lismClass='c--button' tag='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props} />
-	);
+	return <Flex lismClass='c--button' as='a' lh='s' py='10' px='20' hov='o' _propConfig={_propConfig} {...props} />;
 }

package/src/components/Callout/getProps.ts

@@ -18,7 +18,7 @@ export default function getCalloutProps({ type = 'note', keycolor, icon, title,
 		icon: _icon,
 		title,
 		flow,
-		lismClass: 'c--callout u-cbox',
+		lismClass: 'c--callout u--cbox',
 		keycolor: _keycolor,
 		p: '20',
 		g: '10',

package/src/components/Chat/astro/Chat.astro

@@ -33,8 +33,8 @@ const { 'data-chat-dir': direction, ...chatProps } = getChatProps(inputProps);
 	}
 	{name && <Lism {...defaultProps.name}>{name}</Lism>}
 	<Lism {...defaultProps.body}>
-		<Decorator {...defaultProps.deco} class='u-cbox is--skipFlow' />
-		<Flow {...defaultProps.content} class='u-cbox' flow={flow} jslf={direction}>
+		<Decorator {...defaultProps.deco} class='u--cbox is--skipFlow' />
+		<Flow {...defaultProps.content} class='u--cbox' flow={flow} jslf={direction}>
 			<slot />
 		</Flow>
 	</Lism>

package/src/components/Chat/react/Chat.jsx

@@ -14,8 +14,8 @@ export default function Chat({ name, avatar, flow = 's', children, ...props }) {
 			)}
 			{name && <Lism {...defaultProps.name}>{name}</Lism>}
 			<Lism {...defaultProps.body}>
-				<Decorator {...defaultProps.deco} className='u-cbox is--skipFlow' />
-				<Flow {...defaultProps.content} className='u-cbox' flow={flow} jslf={direction}>
+				<Decorator {...defaultProps.deco} className='u--cbox is--skipFlow' />
+				<Flow {...defaultProps.content} className='u--cbox' flow={flow} jslf={direction}>
 					{children}
 				</Flow>
 			</Lism>

package/src/components/Details/astro/Summary.astro

@@ -5,6 +5,6 @@ import { defaultProps } from '../getProps';
 const props = Astro.props || {};
 ---
 
-<Lism tag='summary' {...defaultProps.summary} {...props}>
+<Lism as='summary' {...defaultProps.summary} {...props}>
 	<slot />
 </Lism>

package/src/components/Details/getProps.js

@@ -16,8 +16,8 @@ export function getDetailsProps({ lismClass, ...props }) {
  */
 export const defaultProps = {
 	summary: { lismClass: 'c--details_summary', layout: 'flex', g: '10', ai: 'center' },
-	title: { lismClass: 'c--details_title', tag: 'span', fx: '1', setPlain: 1 },
-	icon: { lismClass: 'c--details_icon a--icon', tag: 'span', 'aria-hidden': 'true' },
+	title: { lismClass: 'c--details_title', as: 'span', fx: '1', setPlain: 1 },
+	icon: { lismClass: 'c--details_icon a--icon', as: 'span', 'aria-hidden': 'true' },
 	body: { lismClass: 'c--details_body' },
 	content: { lismClass: 'c--details_content', layout: 'flow', flow: 's' },
 };

package/src/components/Details/react/Details.jsx

@@ -24,7 +24,7 @@ export function Details({ children, ...props }) {
  */
 export function Summary({ children, ...props }) {
 	return (
-		<Lism tag='summary' {...defaultProps.summary} {...props}>
+		<Lism as='summary' {...defaultProps.summary} {...props}>
 			{children}
 		</Lism>
 	);

package/src/components/Modal/astro/CloseBtn.astro

@@ -17,7 +17,7 @@ const btnProps = { ...defaultProps.closeBtn, ...props };
 	) : (
 		<Lism data-modal-close={modalId} {...btnProps}>
 			<Icon icon={icon || 'x'} />
-			<span class='u-hidden'>{srText || 'Close'}</span>
+			<span class='u--srOnly'>{srText || 'Close'}</span>
 		</Lism>
 	)
 }

package/src/components/Modal/getProps.js

@@ -9,7 +9,7 @@ export function getProps({ lismClass = '', duration, style = {}, ...props }) {
 		style['--duration'] = duration;
 	}
 
-	return { tag: 'dialog', ...theProps, style, ...props };
+	return { as: 'dialog', ...theProps, style, ...props };
 }
 
 export function getInnerProps({ lismClass = '', offset, style = {}, ...props }) {
@@ -25,6 +25,6 @@ export function getInnerProps({ lismClass = '', offset, style = {}, ...props })
 
 export const defaultProps = {
 	body: { lismClass: 'c--modal_body' },
-	closeBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
-	openBtn: { tag: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
+	closeBtn: { as: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
+	openBtn: { as: 'button', setPlain: true, hov: 'o', d: 'in-flex' },
 };

package/src/components/Modal/react/CloseBtn.jsx

@@ -12,7 +12,7 @@ export default function CloseBtn({ children, modalId = '', icon, srText = 'Close
 			) : (
 				<>
 					<Icon icon={icon || 'x'} />
-					<span className='u-hidden'>{srText || 'Close'}</span>
+					<span className='u--srOnly'>{srText || 'Close'}</span>
 				</>
 			)}
 		</Lism>

package/src/components/NavMenu/getProps.js

@@ -20,7 +20,7 @@ export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }) {
 
 	return {
 		lismClass: 'c--navMenu',
-		tag: 'ul',
+		as: 'ul',
 		style: computedStyle,
 		...props,
 	};
@@ -32,7 +32,7 @@ export function getRootProps({ hovC, hovBgc, itemP, style = {}, ...props }) {
 export function getNestProps(props) {
 	return {
 		lismClass: 'c--navMenu_nest',
-		tag: 'ul',
+		as: 'ul',
 		'px-s': '20',
 		...props,
 	};
@@ -44,7 +44,7 @@ export function getNestProps(props) {
 export function getItemProps(props) {
 	return {
 		lismClass: 'c--navMenu_item',
-		tag: 'li',
+		as: 'li',
 		...props,
 	};
 }
@@ -52,12 +52,12 @@ export function getItemProps(props) {
 /**
  * NavMenu.Link のプロパティを処理
  * @param {string} [props.href] - リンク先URL。指定時は a タグになる
- * @param {string} [props.tag='span'] - HTML タグ
+ * @param {string} [props.as='span'] - HTML タグ
  */
-export function getLinkProps({ href, tag = 'span', ...props }) {
+export function getLinkProps({ href, as = 'span', ...props }) {
 	return {
 		lismClass: 'c--navMenu_link',
-		tag: href ? 'a' : tag,
+		as: href ? 'a' : as,
 		href,
 		c: 'inherit',
 		...props,

package/src/components/Tabs/astro/Tab.astro

@@ -12,6 +12,6 @@ const { tabId = 'tab', index = 0, isActive, ...props } = Astro.props;
 const controlId = `${tabId}-${index}`;
 ---
 
-<Lism tag='button' lismClass='c--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
+<Lism as='button' lismClass='c--tabs_tab' setPlain role='tab' aria-controls={controlId} aria-selected={isActive ? 'true' : 'false'} {...props}>
 	<slot />
 </Lism>

package/src/components/Tabs/react/Tab.jsx

@@ -6,7 +6,7 @@ export default function Tab({ tabId = 'tab', index = 0, isActive = false, ...pro
 
 	return (
 		<Lism
-			tag='button'
+			as='button'
 			lismClass='c--tabs_tab'
 			setPlain
 			role='tab'