Item

media（アイコン・画像・アバター）+ title/description + actions からなる汎用リスト行を表現する shadcn/ui Item 相当の部品です（参照軸はイシュー #2001、shadcn/ui 追加はイシュー #2004）。fandhe-frontend-headless-ui の item mod が構造・アクセシビリティ（WAI-ARIA）・表示状態（data-*）のみを提供する unstyled 部品で、root / media / content / title / description / actions / header / footer / group / separator の 10 anatomy パーツを持ちます。

root は href を指定すると div ではなく a として描画されます。external=true を渡すと target="_blank" と rel="noopener noreferrer" を不可分に付与します（reverse tabnabbing 対策）。variant（default / outline / muted）・size（default / sm）を data-variant / data-size として固定出力します。

アクセシビリティ

group は role="group" を固定付与します。shadcn/ui の ItemGroup は role="list" ですが、a[href] は WAI-ARIA 上 listitem ロールを持てず list/listitem 対を成立させられないため、意図的に role="group" へ差分化しています。label を渡すと aria-label を出力します（空文字列のときは省略します）。
separator は role="separator" + aria-orientation="horizontal" を固定付与します。group は常に縦並びのコンテナのため、水平固定です。
root が a として描画されるときのみ、キーボード操作はネイティブ a[href] の Tab/Shift+Tab/Enter に依存します。div のときはキー操作を提供しません。role は付与せず、a の暗黙の link ロールに委ねます。

fandhe-frontend-pre-styled-ui に対応するスタイル済み部品があります。Themes 版は Item を参照してください。

自前 CSS の最小例:

CSS

[data-scope="item"][data-part="root"] {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
}
[data-scope="item"][data-part="root"][data-variant="outline"] {
  border: 1px solid currentColor;
}
[data-scope="item"][data-part="separator"] {
  border-top: 1px solid currentColor;
}

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

New

🔔

First item

A short description.

Updated just now

Second item

Features

media（アイコン・画像・アバター）+ title/description + actions からなる汎用リスト行を表現する 10 anatomy パーツ（root/media/content/title/description/actions/header/footer/group/separator）を提供する（item.rs）。
root は href 指定時に div ではなく a として描画し、external=true で target="_blank"/rel="noopener noreferrer" を不可分に付与する（reverse tabnabbing 対策、mod@link と同型の判断、item.rs「root を a として描画する経路」節）。
group は role="group"（shadcn/ui の role="list" から意図的に差分化。a[href] が listitem ロールを持てないため list/listitem 対を成立させられない、item.rs「group は role="group"」節）。
参照実体は shadcn/ui の Item のみ（ark-ui・chakra-ui・Radix に対応部品なし、docs/design/component-coverage-map.md、参照軸 #2001）。状態機械を持たない静的部品であり wasm-full 側の配線は不要。

Anatomy

group
  root
    header
    media
    content
      title
      description
    actions
    footer
  separator

API Reference

Arguments

Name	Type	Default	Description
`root: props.href`	`Option<&str>`	`None`	Some のとき a として描画し href へ固定付与する（item.rs）。
`root: props.external`	`bool`	`false`	href が Some のときのみ意味を持つ。true で target/rel を不可分に付与する（item.rs）。
`root: props.variant`	`ItemVariant`	`ItemVariant::Default`	見た目バリアント（default/outline/muted）。data-variant へ出力する（item.rs）。
`root: props.size`	`ItemSize`	`ItemSize::Default`	サイズバリアント（default/sm）。data-size へ出力する（item.rs）。
`media: variant`	`ItemMediaVariant`	`ItemMediaVariant::Default`	media パーツの見た目バリアント（default/icon/image）。data-variant へ出力する（item.rs）。
`group: label`	`&str`	`""`	空でなければ aria-label へ出力する（item.rs）。

Data Attributes

Part	Attribute	Observed Values
`media`	`data-variant`	`icon`, `image`
`root`	`data-size`	`default`
`root`	`data-variant`	`default`, `outline`
`separator`	`data-orientation`	`horizontal`

Examples

Link item

href 指定で root が a として描画される例です。

→

Browse Primitives

href 指定時は a として描画されます。

Group with separator

group（role="group"）の中に root と separator を並べる例です。

🔔

First item

A short description.

🔔

Second item

自前 CSS の最小例

data-scope/data-part/data-variant/data-size 属性セレクタでスタイルを当てる例です。

data-scope / data-part / data-variant / data-size 属性セレクタで行間の区切り・角丸・境界線を当てる最小例です。headless-ui 自体はスタイルを持ちません。

First item

Second item

CSS

[data-scope="item"][data-part="root"] {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.5rem;
}
[data-scope="item"][data-part="root"][data-variant="outline"] {
  border: 1px solid currentColor;
}
[data-scope="item"][data-part="separator"] {
  border-top: 1px solid currentColor;
}

Accessibility

Keyboard Interactions

Key	Description
Tab / Shift+Tab / Enter	root が a として描画されたときのみ、ネイティブ a[href] のフォーカス移動・起動に委ねる（item.rs「root を a として描画する経路」節）。div のときはキー操作を提供しない。

WAI-ARIA

Attribute	Description
role="group" / aria-label	group パーツに固定付与する。label が空でなければ aria-label を出力する（item.rs）。
role="separator" / aria-orientation="horizontal"	separator パーツに固定付与する（item.rs「separator は group 内専用の水平固定パーツ」節）。