Heading
fandhe-frontend-pre-styled-ui の heading mod が提供するスタイル済み Heading 部品です。
size（xs〜xl6 の 10 段階、イシュー #2440 で xl5/xl6 を追加）に加え、イシュー #2056 で shadcn/ui Typography と突合し weight（normal/medium/semibold（既定）/bold）軸と、呼び出し側が明示的に付与したときのみ下罫線が出る data-bordered opt-in 状態（shadcn h2 の border-b pb-2 相当）を追加しました。letter-spacing・レイアウトユーティリティ（text-center 等）は既存基準（chakra-ui / Radix Themes）を維持しています。
Demo
素の h1〜h6 意味論を size（xs〜xl6 の 10 段階、イシュー #2440）・weight（normal/medium/semibold/bold の 4 段階、イシュー #2056）でスタイル化した見出し部品。data-bordered opt-in 状態（shadcn h2 の下罫線相当）と、shadcn/ui Typography の h1〜h4 との対応例も示す。
見出し（size=Xs）
見出し（size=Sm）
見出し（size=Md）
見出し（size=Lg）
見出し（size=Xl）
見出し（size=Xl2）
見出し（size=Xl3）
見出し（size=Xl4）
見出し（size=Xl5）
見出し（size=Xl6）
見出し（weight=Normal）
見出し（weight=Medium）
見出し（weight=Semibold）
見出し（weight=Bold）
見出し（data-bordered opt-in）
h1 相当（size=Xl4 + weight=Bold）
h2 相当（size=Xl3 + data-bordered）
h3 相当（size=Xl2）
h4 相当（size=Xl）
Features
- 素の h1〜h6 意味論をタグとしてそのまま維持しつつ、視覚サイズを variant として独立に切り替える
- colorPalette 軸を持たない単一 recipe 静的部品
- chakra-ui の 9 段階サイズをテーマトークン範囲（xs〜6xl の 10 段階、イシュー #2440 で xl5/xl6 を追加）へ縮約済み
- フォントウェイト軸（normal/medium/semibold/bold）と data-bordered opt-in 状態を shadcn/ui 突合で追加（イシュー #2056）
Anatomy
rootAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
level | HeadingLevel | （必須） | レンダリングする HTML タグ（h1〜h6）。意味論レベルを表す。 |
props.size | HeadingSize | Xl | 視覚サイズ（xs/sm/md/lg/xl/xl2/xl3/xl4/xl5/xl6）。タグ選択（意味論）とは独立した軸。 |
props.weight | HeadingWeight | Semibold | フォントウェイト（normal/medium/semibold/bold）。イシュー #2056 で shadcn/ui 突合により追加。 |
attrs: data-bordered | 属性（値なし） | （付与時のみ） | shadcn h2 の下罫線相当を opt-in する状態属性。呼び出し側が attrs へ明示的に渡したときのみ通過する（イシュー #2056）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
root | data-bordered | （値なし） |
Examples
タグとサイズの独立軸
レンダリングするタグ（h1〜h6）と視覚サイズ（xs〜xl6）を独立に選べます。
見出し (h2, size=xl2)
見出し (h3, size=xl)
shadcn/ui Typography との対応
shadcn/ui の h1・h2 相当を size/weight/data-bordered の合成で再現します。
h1 相当（size=Xl4 + weight=Bold）
h2 相当（size=Xl3 + data-bordered）
data-bordered opt-in 状態
呼び出し側が data-bordered を付与したときのみ下罫線が出ます。