技術仕様：型推論システム

Lism UI Vue では、Vue テンプレート上での Lism プロパティ（p, m, fz など）の型補完およびサジェストをサポートしています。

Lism CSS 仕様への準拠

本ライブラリの型定義は、Lism CSS 公式の lism-css パッケージが提供するコアの型定義を直接再利用しています。

• PropValueTypes: 各プロパティ（p, fz 等）に渡せるトークン値やレスポンシブ構文。

• StateProps: is-hover, is-active などの状態プロップ。

• LayoutProps: layout プロパティの定義。

これにより、本家の Lism CSS と完全に互換性のある開発体験を Vue 環境でも提供しています。

型推論の仕組み（個別継承方式）

各コンポーネントが明示的に Lism プロパティを継承する方式を採用しています。

実装パターン

ライブラリ内の各コンポーネント（Lism.vue や AccordionRoot.vue など）の Props 定義にて、以下のように LismCoreBaseProps を継承します。

import type { LismCoreBaseProps } from '../Lism/types'

export interface Props extends /* @vue-ignore */ LismCoreBaseProps {
  // コンポーネント固有のProps
  allowMultiple?: boolean
}

@vue-ignore の役割

Vue 3.3 以降の機能である /* @vue-ignore */ を使用することで、以下のメリットがあります。

• エディタ上のサジェスト: TypeScript としては Props を持っていると認識されるため、Volar 等で補完が効きます。

• ランタイムの最適化: Vue のコンパイラはこのプロパティを「Vue の Props」としては生成しません。そのため、渡された属性はすべて $attrs（HTML属性）として扱われ、ルート要素（<Lism> など）へ透過的に引き継がれます。

なぜこの方式なのか

1. サジェスト汚染の防止: グローバル拡張 (ComponentCustomProps) を行うと、Lism と無関係な自作コンポーネントや標準 HTML タグすべてに大量のサジェストが出てしまいます。個別継承にすることで、ライブラリが意図したコンポーネントのみに限定できます。

2. 明示的な設計: どのコンポーネントが Lism のスタイル機能をサポートしているかがコード上で明確になります。

対応状況