@lism-css/ui 0.11.0 → 0.12.0

package/dist/ui.css

@@ -1 +1 @@
-@layer lism-modules{.c--accordion{--duration: var(--acc-duration, .25s)}.c--accordion_item{--_panel-h: 0px;--_icon-transform: rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform: rotate(90deg);--_panel-h: auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;width:1em;height:1em}.c--accordion_icon:before,.c--accordion_icon:after{content:"";display:block;grid-area:1 / 1;background-color:currentColor}.c--accordion_icon:before{width:.1em;height:100%;transition:transform var(--duration);transform:var(--_icon-transform)}.c--accordion_icon:after{height:.1em;width:100%}.c--accordion_button:focus-visible{outline:solid 2px currentColor;outline-color:revert;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.c--accordion_item{--duration: 0s}}@media(scripting:none){.c--accordion_panel{height:auto!important;content-visibility:visible!important}.c--accordion_content{position:static!important}}}@layer lism-modules{.c--details{--duration: var(--acc-duration, .25s);--_icon-scale: 1.1;--_icon-transform: rotate(0deg);--_content-gtr: 0fr}.c--details[open]{--_icon-transform: scaleY(-1);--_content-gtr: 1fr}.c--details_summary::-webkit-details-marker{display:none}.c--details_icon{--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');display:inline-grid;background-color:currentColor;-webkit-mask:var(--svg) no-repeat center center / contain;mask:var(--svg) no-repeat center center / contain;scale:var(--_icon-scale);transition:transform var(--duration);transform:var(--_icon-transform)}.c--details::details-content{display:grid;grid-template-rows:var(--_content-gtr);transition-duration:var(--duration);transition-property:content-visibility,grid-template;transition-behavior:allow-discrete}.c--details_body{overflow:hidden}}@layer lism-modules{.c--modal{--flow: 0;--duration: var(--modal-duration, .4s);width:100%;height:100%;max-width:100%;max-height:100%;overflow:unset;background:var(--backdrop-bg, rgb(0 0 0 / .6));transition-duration:var(--duration);transition-property:opacity}.c--modal::backdrop{background:none}.c--modal[open]{display:flex;flex-direction:column;justify-content:center}.c--modal_inner{--offset: 0 0;background-color:var(--base);transition:translate var(--duration);max-height:100%}.c--modal:not([data-is-open]){opacity:0}.c--modal:not([data-is-open])>.c--modal_inner{translate:var(--offset)}}@layer lism-modules{.c--navMenu{--link-td: none;--hl: var(--hl--s);--_item-p: var(--s20);--focus-offset: -1px}.c--navMenu_nest{--_item-p: inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_nest,.c--navMenu_item{--bdc: inherit}}@layer lism-modules{.c--tabs{display:grid;grid:"list" "panel" / 100%}.c--tabs_list{grid-area:list;display:flex;overflow-x:auto}.c--tabs_tab[aria-selected=true]{--_notSelected: }.c--tabs_tab[aria-selected=false]{--_isSelected: }:where(.c--tabs_tab){color:var(--_notSelected, var(--text-2))}.c--tabs_panel{grid-area:panel;width:100%}.c--tabs_panel:where([aria-hidden=true]){display:none}}@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)}.c--badge--outline{--c: var(--text);--bgc: transparent;--bdc: currentColor}}@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);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}.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}}@layer lism-modules{.c--chat{--cbox-bgPct: 8%;--gta: "avatar name" "avatar body";--gtc: auto 1fr;--gtr: minmax(1.5rem, auto) auto;--_avator-size: clamp(48px, 32px + 5cqw, 64px);--_deco-size: calc(min(var(--_avator-size), 80px)/4 + .25rem) ;--_deco-mask: none;--_deco-t: 0;--_deco-scale: 1;--_deco-inset-x: 0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{top:var(--_deco-t);inset-inline:var(--_deco-inset-x);width:var(--_deco-size);height:var(--_deco-size);scale:var(--_deco-scale);-webkit-mask:var(--_deco-mask) center / contain no-repeat;mask:var(--_deco-mask) center / contain no-repeat}.c--chat--speak{--_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x: auto calc(100% - 1px) }[data-chat-dir=end]{--_deco-scale: -1 1;--_deco-inset-x: calc(100% - 1px) auto;--gta: "name avatar" "body avatar";--gtc: 1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism-modules{.c--shapeDivider{--level: 0;--_inner-offset: 0px;--_inner-stretch: 1;--_flipX: 1;--_flipY: 1;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: .5px;--offsetX: -.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{transform-origin:100% 0;animation:lism--slideShape 12s infinite alternate linear}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translate(75%)}}
+@layer lism-modules{.c--accordion{--duration: var(--acc-duration, .25s)}.c--accordion_item{--_panel-h: 0px;--_icon-transform: rotate(0deg)}.c--accordion_item[data-opened]{--_icon-transform: rotate(90deg);--_panel-h: auto}.c--accordion_panel{height:var(--_panel-h);transition:height var(--duration)}[hidden]>.c--accordion_content{position:absolute}.c--accordion_icon{display:grid;width:1em;height:1em}.c--accordion_icon:before,.c--accordion_icon:after{content:"";display:block;grid-area:1 / 1;background-color:currentColor}.c--accordion_icon:before{width:.1em;height:100%;transition:transform var(--duration);transform:var(--_icon-transform)}.c--accordion_icon:after{height:.1em;width:100%}.c--accordion_button:focus-visible{outline:solid 2px currentColor;outline-color:revert;outline-offset:-3px}@media(prefers-reduced-motion:reduce){.c--accordion_item{--duration: 0s}}@media(scripting:none){.c--accordion_panel{height:auto!important;content-visibility:visible!important}.c--accordion_content{position:static!important}}}@layer lism-modules{.c--details{--duration: var(--acc-duration, .25s);--_icon-scale: 1.1;--_icon-transform: rotate(0deg);--_content-gtr: 0fr}.c--details[open]{--_icon-transform: scaleY(-1);--_content-gtr: 1fr}.c--details_summary::-webkit-details-marker{display:none}.c--details_icon{--svg: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>');display:inline-grid;background-color:currentColor;-webkit-mask:var(--svg) no-repeat center center / contain;mask:var(--svg) no-repeat center center / contain;scale:var(--_icon-scale);transition:transform var(--duration);transform:var(--_icon-transform)}.c--details::details-content{display:grid;grid-template-rows:var(--_content-gtr);transition-duration:var(--duration);transition-property:content-visibility,grid-template;transition-behavior:allow-discrete}.c--details_body{overflow:hidden}}@layer lism-modules{.c--modal{--flow: 0;--duration: var(--modal-duration, .4s);width:100%;height:100%;max-width:100%;max-height:100%;overflow:unset;background:var(--backdrop-bg, rgb(0 0 0 / .6));transition-duration:var(--duration);transition-property:opacity}.c--modal::backdrop{background:none}.c--modal[open]{display:flex;flex-direction:column;justify-content:center}.c--modal_inner{--offset: 0 0;background-color:var(--base);transition:translate var(--duration);max-height:100%}.c--modal:not([data-is-open]){opacity:0}.c--modal:not([data-is-open])>.c--modal_inner{translate:var(--offset)}}@layer lism-modules{.c--navMenu{--link-td: none;--hl: var(--hl--s);--_item-p: var(--s20);--focus-offset: -1px}.c--navMenu_nest{--_item-p: inherit}.c--navMenu_link{padding:var(--_item-p)}.c--navMenu_nest,.c--navMenu_item{--bdc: inherit}}@layer lism-modules{.c--tabs{display:grid;grid:"list" "panel" / 100%}.c--tabs_list{grid-area:list;display:flex;overflow-x:auto}.c--tabs_tab[aria-selected=true]{--_notSelected: }.c--tabs_tab[aria-selected=false]{--_isSelected: }:where(.c--tabs_tab){color:var(--_notSelected, var(--text-2))}.c--tabs_panel{grid-area:panel;width:100%}.c--tabs_panel:where([aria-hidden=true]){display:none}}@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)}.c--badge--outline{--c: var(--text);--bgc: transparent;--bdc: currentColor}}@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);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}.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}}@layer lism-modules{.c--chat{--cbox-bgPct: 8%;grid-template-areas:"avatar name" "avatar body";grid-template-columns:auto 1fr;grid-template-rows:minmax(1.5rem,auto) auto;--_avator-size: clamp(48px, 32px + 5cqw, 64px);--_deco-size: calc(min(var(--_avator-size), 80px)/4 + .25rem) ;--_deco-mask: none;--_deco-t: 0;--_deco-scale: 1;--_deco-inset-x: 0;gap:0 calc(var(--_deco-size) + 1px)}.c--chat_avatar{grid-area:avatar;width:var(--_avator-size)}.c--chat_name{grid-area:name}.c--chat_body{grid-area:body}.c--chat_content{max-width:var(--sz--s)}.c--chat_deco{top:var(--_deco-t);inset-inline:var(--_deco-inset-x);width:var(--_deco-size);height:var(--_deco-size);scale:var(--_deco-scale);-webkit-mask:var(--_deco-mask) center / contain no-repeat;mask:var(--_deco-mask) center / contain no-repeat}.c--chat--speak{--_deco-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><path d="M8,8L8,8C7.4,4.8,5.4,2,2.6,0.4L2,0h6V8z"/></svg>')}[data-chat-dir=start]{--_deco-inset-x: auto calc(100% - 1px) }[data-chat-dir=end]{--_deco-scale: -1 1;--_deco-inset-x: calc(100% - 1px) auto;grid-template-areas:"name avatar" "body avatar";grid-template-columns:1fr auto}}.c--chat--speak[data-chat-dir=start]>div>.c--chat_content{border-start-start-radius:0}.c--chat--speak[data-chat-dir=end]>div>.c--chat_content{border-start-end-radius:0}@layer lism-modules{.c--shapeDivider{--level: 0;--_inner-offset: 0px;--_inner-stretch: 1;--_flipX: 1;--_flipY: 1;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: .5px;--offsetX: -.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{transform-origin:100% 0;animation:lism--slideShape 12s infinite alternate linear}}@keyframes lism--slideShape{0%{transform:scaleX(4)}to{transform:scaleX(4) translate(75%)}}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lism-css/ui",
-  "version": "0.11.0",
-  "description": "UI components by lism-css.",
+  "version": "0.12.0",
+  "description": "UI components for React and Astro, powered by Lism CSS.",
   "author": {
     "name": "ddryo",
     "url": "https://github.com/ddryo"
@@ -21,11 +21,10 @@
   "exports": {
     "./react": {
       "import": "./dist/components/react.js",
-      "types": "./dist/components/index.d.ts"
+      "types": "./dist/components/react.d.ts"
     },
     "./astro": {
-      "import": "./src/components/astro.js",
-      "types": "./dist/components/index.d.ts"
+      "import": "./src/components/astro.ts"
     },
     "./scripts/*": "./dist/scripts/*.js",
     "./style.css": "./dist/style.css"
@@ -39,9 +38,13 @@
     "url": "https://github.com/lism-css/lism-css/issues"
   },
   "dependencies": {
-    "lism-css": "0.11.0"
+    "lism-css": "0.12.0"
   },
   "devDependencies": {
+    "@storybook/react-vite": "^10.3.3",
+    "eslint": "^9.39.4",
+    "storybook": "^10.3.3",
+    "stylelint": "^17.4.0",
     "@babel/cli": "^7.28.6",
     "@babel/core": "^7.29.0",
     "@babel/preset-env": "^7.29.0",
@@ -67,6 +70,10 @@
     "format": "prettier --write . --ignore-path ../../.prettierignore",
     "dev": "vite",
     "build": "vite build && pnpm build:css",
-    "build:css": "node build-css.js"
+    "build:css": "node build-css.js",
+    "typecheck": "tsc --noEmit",
+    "lint": "pnpm lint:eslint && pnpm lint:style",
+    "lint:eslint": "eslint '**/*.{js,mjs,ts,tsx}'",
+    "lint:style": "stylelint '**/*.{css,scss}'"
   }
 }

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,105 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within, waitFor } from 'storybook/test';
+import Accordion from './react';
+
+const meta: Meta = {
+  title: 'UI/Accordion',
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion.Root>
+      <Accordion.Item>
+        <Accordion.Heading>
+          <Accordion.Button>アコーディオン 1</Accordion.Button>
+        </Accordion.Heading>
+        <Accordion.Panel>
+          <p>アコーディオン 1 のコンテンツです。</p>
+        </Accordion.Panel>
+      </Accordion.Item>
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole('button');
+
+    // 初期状態: 閉じている
+    await expect(button).toHaveAttribute('aria-expanded', 'false');
+
+    // クリックで開く
+    await userEvent.click(button);
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'true'));
+
+    // 再クリックで閉じる
+    await userEvent.click(button);
+    await waitFor(() => expect(button).toHaveAttribute('aria-expanded', 'false'));
+  },
+};
+
+export const Multiple: Story = {
+  name: '複数アイテム',
+  render: () => (
+    <Accordion.Root>
+      {[1, 2, 3].map((i) => (
+        <Accordion.Item key={i}>
+          <Accordion.Heading>
+            <Accordion.Button>アコーディオン {i}</Accordion.Button>
+          </Accordion.Heading>
+          <Accordion.Panel>
+            <p>アコーディオン {i} のコンテンツです。</p>
+          </Accordion.Panel>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+    const [btn1, btn2] = buttons;
+
+    // 1つ目を開く
+    await userEvent.click(btn1);
+    await waitFor(() => expect(btn1).toHaveAttribute('aria-expanded', 'true'));
+
+    // 2つ目を開く → 1つ目が閉じる（allowMultiple なし）
+    await userEvent.click(btn2);
+    await waitFor(() => expect(btn2).toHaveAttribute('aria-expanded', 'true'));
+    await waitFor(() => expect(btn1).toHaveAttribute('aria-expanded', 'false'));
+  },
+};
+
+export const AllowMultiple: Story = {
+  name: 'allowMultiple（複数同時展開可）',
+  render: () => (
+    <Accordion.Root allowMultiple>
+      {[1, 2, 3].map((i) => (
+        <Accordion.Item key={i}>
+          <Accordion.Heading>
+            <Accordion.Button>アコーディオン {i}</Accordion.Button>
+          </Accordion.Heading>
+          <Accordion.Panel>
+            <p>アコーディオン {i} のコンテンツです。複数同時に開けます。</p>
+          </Accordion.Panel>
+        </Accordion.Item>
+      ))}
+    </Accordion.Root>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const buttons = canvas.getAllByRole('button');
+    const [btn1, btn2] = buttons;
+
+    // 1つ目を開く
+    await userEvent.click(btn1);
+    await waitFor(() => expect(btn1).toHaveAttribute('aria-expanded', 'true'));
+
+    // 2つ目を開く → 1つ目はそのまま開いている
+    await userEvent.click(btn2);
+    await waitFor(() => expect(btn2).toHaveAttribute('aria-expanded', 'true'));
+    await expect(btn1).toHaveAttribute('aria-expanded', 'true');
+  },
+};

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

@@ -1,13 +1,13 @@
 ---
 import { Lism } from 'lism-css/astro';
 import Icon from './Icon.astro';
-import { defaultProps } from '../getProps';
+import { getButtonProps } 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'}>
+<Lism {...getButtonProps(props)} aria-controls={accID} aria-expanded={isOpen ? 'true' : 'false'}>
   <slot />
   <Icon />
 </Lism>

package/src/components/Accordion/getProps.ts

@@ -0,0 +1,91 @@
+import atts from 'lism-css/lib/helper/atts';
+import mergeSet from 'lism-css/lib/helper/mergeSet';
+
+export type AccordionRootProps = {
+  lismClass?: string;
+  allowMultiple?: boolean;
+  [key: string]: unknown;
+};
+
+export type AccordionItemProps = {
+  lismClass?: string;
+  [key: string]: unknown;
+};
+
+export type AccordionHeadingProps = {
+  as?: string;
+  role?: string;
+  lismClass?: string;
+  [key: string]: unknown;
+};
+
+export type AccordionPanelProps = {
+  lismClass?: string;
+  _contextID?: string;
+  accID?: string;
+  isOpen?: boolean;
+  [key: string]: unknown;
+};
+
+export function getRootProps({ lismClass, allowMultiple, ...props }: AccordionRootProps) {
+  props.lismClass = atts(lismClass, 'c--accordion');
+  if (allowMultiple) props['data-allow-multiple'] = '';
+  return props;
+}
+
+export function getItemProps({ lismClass, ...props }: AccordionItemProps) {
+  props.lismClass = atts(lismClass, 'c--accordion_item');
+  return props;
+}
+
+export function getHeadingProps({ as = 'div', role, lismClass, set, unset, ...props }: AccordionHeadingProps) {
+  const returnProps = {
+    lismClass: atts(lismClass, 'c--accordion_heading'),
+    as,
+    set: mergeSet('plain', set, unset),
+    ...props,
+  };
+
+  if (returnProps.as === 'div') {
+    (returnProps as Record<string, unknown>).role = role ?? 'heading';
+  }
+  return returnProps;
+}
+
+export function getButtonProps({ set, unset, ...props }: Record<string, unknown>) {
+  return {
+    lismClass: 'c--accordion_button',
+    as: 'button',
+    layout: 'flex',
+    set: mergeSet('plain', set, unset),
+    g: '10',
+    w: '100%',
+    ai: 'center',
+    jc: 'between',
+    ...props,
+  };
+}
+
+export function getPanelProps({ lismClass, _contextID, accID = '__LISM_ACC_ID__', isOpen = false, ...props }: AccordionPanelProps) {
+  const panelProps = {
+    lismClass: atts(lismClass, 'c--accordion_panel'),
+    id: _contextID || accID,
+    hidden: isOpen ? undefined : ('until-found' as unknown as boolean),
+    pos: 'relative',
+    ov: 'hidden',
+  };
+
+  const contentProps = { lismClass: 'c--accordion_content', layout: 'flow' as const, ...props };
+
+  return { panelProps, contentProps };
+}
+
+export const defaultProps = {
+  icon: {
+    lismClass: 'c--accordion_icon a--icon',
+    as: 'span',
+    pi: 'center',
+    fxsh: '0',
+    'aria-hidden': 'true',
+  },
+} as const;

package/src/components/Accordion/react/{AccIcon.jsx → AccIcon.tsx}

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

package/src/components/Accordion/react/{Accordion.jsx → Accordion.tsx}

@@ -1,21 +1,34 @@
 'use client';
 import { createContext, useRef, useId, useEffect, useContext } from 'react';
+import type { ElementType } from 'react';
 import getLismProps from 'lism-css/lib/getLismProps';
-import { Lism, Stack } from 'lism-css/react';
-import { getRootProps, getItemProps, getHeadingProps, getPanelProps, defaultProps } from '../getProps';
+import { Lism, Stack, type LismComponentProps } from 'lism-css/react';
+import {
+  getRootProps,
+  getItemProps,
+  getHeadingProps,
+  getPanelProps,
+  getButtonProps,
+  type AccordionRootProps,
+  type AccordionItemProps,
+  type AccordionHeadingProps,
+  type AccordionPanelProps,
+} from '../getProps';
 import { setEvent } from '../setAccordion';
 import AccIcon from './AccIcon';
 
 import '../_style.css';
 
+type AccordionContextType = { accID: string } | null;
+
 // Context: 純粋なReact環境で AccordionItem → Button / Panel へ accID を共有
 // Astro 環境では Context が使えないため null がフォールバック
-const AccordionContext = createContext(null);
+const AccordionContext = createContext<AccordionContextType>(null);
 
 /**
  * 複数の AccordionItem をラップするルート要素
  */
-export function AccordionRoot({ children, ...props }) {
+export function AccordionRoot({ children, ...props }: AccordionRootProps & LismComponentProps) {
   const rootProps = getRootProps(props);
   return <Stack {...rootProps}>{children}</Stack>;
 }
@@ -23,8 +36,8 @@ export function AccordionRoot({ children, ...props }) {
 /**
  * 個別のアコーディオンアイテム（<div> ベース、setEvent で開閉イベントを登録）
  */
-export function AccordionItem({ children, ...props }) {
-  const ref = useRef(null);
+export function AccordionItem({ children, ...props }: AccordionItemProps & LismComponentProps) {
+  const ref = useRef<HTMLDivElement>(null);
 
   // コンポーネント単位でユニークIDを生成
   const accID = useId();
@@ -50,20 +63,29 @@ export function AccordionItem({ children, ...props }) {
  * 見出しエリアのラッパー（デフォルトは <div role="heading">）
  * as に h2〜h6 を指定すると role は付与されない
  */
-export function Heading({ children, ...props }) {
-  return <Lism {...getHeadingProps(props)}>{children}</Lism>;
+export function Heading({ children, ...props }: AccordionHeadingProps & LismComponentProps) {
+  const { as: headingAs, ...headingProps } = getHeadingProps(props);
+  return (
+    <Lism as={headingAs as ElementType} {...headingProps}>
+      {children}
+    </Lism>
+  );
 }
 
+type ButtonProps<T extends ElementType = 'button'> = LismComponentProps<T> & {
+  accID?: string;
+};
+
 /**
  * 開閉トリガーボタン
  * accID: Context から取得できればそれを優先、なければ props / プレースホルダー
  */
-export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }) {
+export function Button<T extends ElementType = 'button'>({ children, accID: _accID = '__LISM_ACC_ID__', ...props }: ButtonProps<T>) {
   const ctx = useContext(AccordionContext);
   const accID = ctx?.accID || _accID;
 
   return (
-    <Lism {...defaultProps.button} {...props} aria-controls={accID} aria-expanded="false">
+    <Lism {...(getButtonProps(props as Record<string, unknown>) as object)} aria-controls={accID} aria-expanded="false">
       {children}
       <AccIcon />
     </Lism>
@@ -73,7 +95,7 @@ export function Button({ children, accID: _accID = '__LISM_ACC_ID__', ...props }
 /**
  * パネル
  */
-export function Panel({ children, ...props }) {
+export function Panel({ children, ...props }: AccordionPanelProps & LismComponentProps) {
   const ctx = useContext(AccordionContext);
   const { panelProps, contentProps } = getPanelProps({ _contextID: ctx?.accID, ...props });
 

package/src/components/Accordion/setAccordion.ts

@@ -0,0 +1,120 @@
+import { waitFrame, waitAnimation, maybePauseAnimation } from '../../helper/animation';
+
+// hidden を付け外しする時の値
+let ACCORDION_HIDDEN_VALUE = 'until-found';
+
+type AccordionElements = {
+  heading: HTMLElement;
+  button: HTMLButtonElement;
+  panel: HTMLElement;
+  content: HTMLElement;
+};
+
+// アコーディオン要素から必要な要素を取得
+const getAccordionElements = (accordionItem: HTMLElement): AccordionElements => {
+  const heading = accordionItem.querySelector<HTMLElement>('.c--accordion_heading')!;
+  const panel = accordionItem.querySelector<HTMLElement>('.c--accordion_panel')!;
+  return {
+    heading,
+    button: heading.querySelector('button')!,
+    panel,
+    content: panel.querySelector<HTMLElement>('.c--accordion_content')!,
+  };
+};
+
+// 親に data-allow-multiple がついていなければ、展開中のアコーディオンを閉じる
+const maybeCloseOpenedItems = (accordionItem: HTMLElement): void => {
+  const parent = accordionItem.parentNode as HTMLElement | null;
+  if (!parent) return;
+
+  if (parent.hasAttribute('data-allow-multiple')) return;
+
+  parent.querySelectorAll<HTMLElement>(':scope > [data-opened]').forEach((_a) => void closeAccordion(_a));
+};
+
+async function openAccordion(accordionItem: HTMLElement): Promise<void> {
+  const { panel, content, button } = getAccordionElements(accordionItem);
+
+  maybePauseAnimation(panel);
+  panel.removeAttribute('hidden');
+  await waitFrame();
+
+  accordionItem.style.setProperty('--_panel-h', `${content.offsetHeight}px`);
+  await waitFrame();
+
+  accordionItem.setAttribute('data-opened', '');
+  button.setAttribute('aria-expanded', 'true');
+
+  const status = await waitAnimation(panel);
+
+  if ('canceled' !== status) {
+    accordionItem.style.removeProperty('--_panel-h');
+  }
+}
+
+async function closeAccordion(accordionItem: HTMLElement): Promise<void> {
+  const { panel, button } = getAccordionElements(accordionItem);
+
+  maybePauseAnimation(panel);
+  accordionItem.style.setProperty('--_panel-h', `${panel.offsetHeight}px`);
+  await waitFrame();
+
+  accordionItem.removeAttribute('data-opened');
+  button.setAttribute('aria-expanded', 'false');
+  accordionItem.style.removeProperty('--_panel-h');
+
+  const status = await waitAnimation(panel);
+
+  if ('canceled' !== status) {
+    panel.setAttribute('hidden', ACCORDION_HIDDEN_VALUE);
+  }
+}
+
+function toggleAccordion(accordionItem: HTMLElement): void {
+  if (accordionItem.hasAttribute('data-opened')) {
+    void closeAccordion(accordionItem);
+  } else {
+    maybeCloseOpenedItems(accordionItem);
+    void openAccordion(accordionItem);
+  }
+}
+
+/**
+ * 個別のアコーディオンにイベントをセット（React用にクリーンアップ関数を返す）
+ */
+export const setEvent = (accordionItem: HTMLElement): (() => void) => {
+  const { button, panel } = getAccordionElements(accordionItem);
+
+  if (panel.hasAttribute('hidden')) {
+    ACCORDION_HIDDEN_VALUE = panel.getAttribute('hidden') ?? 'until-found';
+  }
+
+  const _clickEvent = (e: Event): void => {
+    e.preventDefault();
+    toggleAccordion(accordionItem);
+  };
+
+  const _beforematchEvent = (e: Event): void => {
+    e.preventDefault();
+    toggleAccordion(accordionItem);
+  };
+
+  button.addEventListener('click', _clickEvent);
+  panel.addEventListener('beforematch', _beforematchEvent);
+
+  return () => {
+    button.removeEventListener('click', _clickEvent);
+    panel.removeEventListener('beforematch', _beforematchEvent);
+  };
+};
+
+/**
+ * ページ内の全アコーディオンにイベントをセット（Astro用）
+ */
+const setAccordion = (): void => {
+  const accordionAll = document.querySelectorAll<HTMLElement>('.c--accordion_item');
+  accordionAll.forEach((accordionItem) => {
+    setEvent(accordionItem);
+  });
+};
+export default setAccordion;

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Alert from './react/Alert';
+import PRESETS from './presets';
+
+const presetTypes = Object.keys(PRESETS);
+
+const meta: Meta<typeof Alert> = {
+  title: 'UI/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    children: { control: false },
+    type: { control: 'select', options: presetTypes },
+    layout: { control: 'select', options: ['flex', 'sideMain'] },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Alert>;
+
+export const Default: Story = {
+  args: {
+    type: 'alert',
+    children: 'アラートのメッセージです。',
+  },
+};
+
+export const Point: Story = {
+  args: { type: 'point', children: 'ポイントのメッセージです。' },
+};
+
+export const Warning: Story = {
+  args: { type: 'warning', children: '警告のメッセージです。' },
+};
+
+export const Check: Story = {
+  args: { type: 'check', children: 'チェックのメッセージです。' },
+};
+
+export const Help: Story = {
+  args: { type: 'help', children: 'ヘルプのメッセージです。' },
+};
+
+export const Info: Story = {
+  args: { type: 'info', children: '情報のメッセージです。' },
+};
+
+export const SideMain: Story = {
+  name: 'layout: sideMain',
+  args: {
+    type: 'alert',
+    layout: 'sideMain',
+    children: 'サイドメインレイアウトのアラートです。',
+  },
+};
+
+export const CustomIcon: Story = {
+  name: 'カスタムアイコン',
+  args: {
+    icon: 'star',
+    keycolor: 'purple',
+    children: 'カスタムアイコンとカラー指定。',
+  },
+};

package/src/components/Alert/getProps.ts

@@ -1,17 +1,19 @@
 import PRESETS from './presets';
+import type { LayoutType } from 'lism-css/lib/getLismProps';
+import type { IconProps } from 'lism-css/react';
 
 export type AlertProps = {
   type?: string;
   keycolor?: string;
-  layout?: string;
-  icon?: string;
+  layout?: LayoutType;
+  icon?: IconProps['icon'];
   flow?: string;
   [key: string]: unknown;
 };
 
 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 _icon = (icon || presetData?.icon || 'info') as IconProps['icon'];
   const _color = keycolor || presetData?.color || 'currentColor';
 
   return {

package/src/components/Alert/react/Alert.tsx

@@ -1,8 +1,8 @@
-import type { ReactNode } from 'react';
-import { Flow, Lism, Center, Icon } from 'lism-css/react';
+import type { ElementType } from 'react';
+import { Flow, Lism, Center, Icon, type LismComponentProps } from 'lism-css/react';
 import getAlertProps, { type AlertProps } from '../getProps';
 
-export default function Alert({ children, ...inputProps }: AlertProps & { children?: ReactNode }) {
+export default function Alert<T extends ElementType = 'div'>({ children, ...inputProps }: AlertProps & LismComponentProps<T>) {
   const { icon, layout, flow, ...alertProps } = getAlertProps(inputProps);
 
   return (

package/src/components/Avatar/Avatar.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import Avatar from './react/Avatar';
+
+const meta: Meta<typeof Avatar> = {
+  title: 'UI/Avatar',
+  component: Avatar,
+  tags: ['autodocs'],
+  argTypes: {
+    src: { control: 'text' },
+    alt: { control: 'text' },
+    size: { control: 'text' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Avatar>;
+
+export const Default: Story = {
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: 'ユーザーアバター',
+    size: '4rem',
+  },
+};
+
+export const Small: Story = {
+  name: '小サイズ',
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: '',
+    size: '2rem',
+  },
+};
+
+export const Large: Story = {
+  name: '大サイズ',
+  args: {
+    src: 'https://cdn.lism-css.com/dummy-image.jpg',
+    alt: '',
+    size: '8rem',
+  },
+};