CSS API リファレンス

CSS API リファレンスは、トークンシステム上に構築された pantoken のクラスベースのコンポーネント層（コンポーネント、ユーティリティ、グローバルルール、宣言）を扱います。

コンポーネント

名前	クラス	概要
agent-shell	.instui-agent-shell	AI エージェント用のサーフェスコンテナー。
alert	.instui-alert	ステータス色のバーと共有アイコンセットからのマスクされたステータスグリフを持つインラインメッセージ。
avatar	.instui-avatar	イニシャルまたは画像を表示するユーザーアバター。デフォルトは円形。
badge	.instui-badge	ターゲットの角に配置された小さなカウントまたはステータスドット。
banner	.instui-banner	ページレベルまたは文脈内の告知用に閉じることができるアイコン付きメッセージサーフェス。
billboard	.instui-billboard	大きな空状態またはコールトゥアクションのブロック：ヒーローアイコンや画像、見出し、メッセージ。
breadcrumb	.instui-breadcrumb	区切り記号を持つパンくずトレイル；最後のパンくずが現在のページ。
breadcrumb.link	li	パンくず（InstUI Breadcrumb.Link）、親の <ol> の中の <li>；最後のものが現在のページです。
button	.instui-button	アクセシブルなアクションコントロールで、トークンパレットからスタイル付けされています；デフォルトはプライマリ。
byline	.instui-byline	メディアオブジェクト：タイトルと説明の横に配置されたヒーロー図。
calendar	.instui-calendar	ナビゲーション、曜日ヘッダー、日セルを持つ静的な月グリッド。
calendar.day	.day	日セル（InstUI Calendar.Day）；-today, -selected, -outside-month がその状態を示します。
card	.instui-card	任意のコンテンツを受け入れるサーフェスコンテナー。
checkbox	.instui-checkbox	ネイティブのチェックボックスとそのラベル、または -variant-toggle によるスイッチ。
close-button	.instui-close-button	独自の × グリフを描く透明なアイコンボタン。3 サイズとオンカラーバリアントあり。
context-view	.instui-context-view	ケアット付きの高められたコールアウト。任意の辺に配置可能；ネイティブの [popover] として機能します。
drawer-layout	.instui-drawer-layout	折りたたみ可能なサイドトレイと主要なスクロール可能コンテンツペインを持つ分割レイアウト。
drawer-layout.content	.content	トレイの横の残りスペースを埋める主要コンテンツペイン。
drawer-layout.tray	.tray	メインコンテンツ横のサイドパネル。オプションでオーバーレイやトレイ状のサーフェス修飾子あり。
file-drop	.instui-file-drop	ホバー、受け入れ、拒否状態を持つファイルドロップゾーン。
form-field	.instui-form-field	フォームフィールドのラッパー：ラベル、コントロール、およびインライン／必須／読み取り専用のレイアウト。
form-field-group	.instui-form-field-group	<fieldset> グループで、レジェンド、カラムまたはインラインレイアウト、調整可能な間隔を持ちます。
form-field-messages	.instui-form-field-messages	フィールドのヘルプとバリデーションメッセージ — ヒント、エラー、成功、スクリーンリーダー専用。エラーと成功にはグリフ付き。
heading	.instui-heading	-level-h1 から -level-h6 までの見出しタイポグラフィ。
img	.instui-img	表示、トリミング、エフェクト修飾子が重ねられるスタイル付きの <img>。
in-place-edit	.instui-in-place-edit	フォーカスされるまでテキストとして読まれ、フォーカス時に入力のクロームを表示する [contenteditable] の表面。
input-group	.instui-input-group	先頭と末尾のアイコンスロットを持つテキスト入力のファサード。
link	.instui-link	サイズ、ダーク背景用のインバースバリアント、インラインまたは無スタイル形式を持つスタイル付きハイパーリンク。
list	.instui-list	トークン駆動のアイテム間隔を持つリスト。
list.item	.instui-list	リスト項目（InstUI List.Item）。
mask	.instui-mask	配置された親を埋め、コンテンツを中央に配置するインフローオーバーレイ（例：カード上のスピナー）。モーダルにはネイティブの <dialog> を推奨（その ::backdrop がマスク）。これらの修飾子は全てグローバルでも利用可能（単体または他コンポーネントにチェーンして）— mask グローバルユーティリティを参照。
menu	.instui-menu	アイテム、グループ、区切りを持つドロップダウンサーフェス。
menu.group	.group	ラベル付きグループ見出し（InstUI Menu.Group/Menu.ItemGroup）。
menu.item	.item	メニューエントリ（InstUI Menu.Item）；-disabled、-highlighted、または -active/[aria-checked] を追加。
menu.separator	.separator	アイテム間の区切りルール（InstUI Menu.Separator）。
metric	.instui-metric	ラベル付き統計表示 — 大きな値とキャプション。
modal	.instui-modal	ダイアログサーフェス（ネイティブの <dialog> 上で動作）；ヘッダー／本文／フッターのパーツ。
modal.body	.body	コンテンツ領域（InstUI Modal.Body）；単独の <img> はフルブリードになります。
modal.footer	.footer	アクション行（InstUI Modal.Footer）。
modal.header	.header	タイトル行（InstUI Modal.Header）。
number-input	.instui-number-input	± スピナー列を持つ数値入力のファサード。
pagination	.instui-pagination	ページナビゲーション：番号付きページ、先頭・前・次・末尾の矢印、ギャップ用の省略記号。
pagination.page	.page	ページへのリンクまたはボタン（InstUI Pagination.Page）；現在のページは [aria-current] を持ちます。
pill	.instui-pill	コンパクトなステータスラベル；先頭に共有の -icon-<name> 形式でグリフを追加可能。
popover	.instui-popover	ネイティブの [popover] 用の高められたサーフェス。CSS アンカーポジショニングで配置。
progress	.instui-progress	色付きメーター、サイズ、オプションの値ラベルを持つ決定型プログレスバー。
progress-circle	.instui-progress-circle	--value と --value-max カスタムプロパティによって駆動される円形のプログレスリング。
radio	.instui-radio	ネイティブのラジオボタンとそのラベル。
radio-input-group	.instui-radio-input-group	単一選択のラジオ <fieldset>。プレーン、または接続されたセグメントトグルとして。
range-input	.instui-range-input	逆色の値バブルを持つスタイル付きレンジスライダー。
rating	.instui-rating	塗りつぶしと空のグリフを持つ星評価。数値ラベルは任意。
side-nav-bar	.instui-side-nav-bar	アイコン上にラベルが付いたアイテムの縦方向ナビゲーションレール。最小化してアイコンのみ表示するモードあり。
side-nav-bar.item	.item	ナビゲーション項目（InstUI SideNavBar.Item）；-selected がアクティブな項目を示す。
simple-select	.instui-simple-select	キャレットを備えたスタイル付きネイティブの <select>。テキスト入力の状態とサイズに一致。
spinner	.instui-spinner	アニメーションする読み込みリング。role="status" と aria-label を付与すること。
table	.instui-table	th と td 用のスタイル付きデータテーブルと任意のキャプション。ホバー、固定、スタックカードのレイアウトをサポート。
table.body	tbody	テーブルのデータ行グループ（InstUI Table.Body）。
table.cell	td	データセル（InstUI Table.Cell）。
table.col-header	th	列ヘッダーセル（InstUI Table.ColHeader）。デフォルトの th スタイリングは、th[scope="row"] のために table.row-header によって上書きされる。
table.head	thead	テーブルのヘッダ行グループ（InstUI Table.Head）。
table.row	tr	テーブル行（InstUI Table.Row）。
table.row-header	th[scope="row"]	行ヘッダーセル（InstUI Table.RowHeader）；列ヘッダーのトークンではなく、行ヘッダーのトークンからスタイルが適用される。
tabs	.instui-tabs	タブパネルのセット：タブリスト、選択可能なタブ、それらのパネル。
tabs.panel	.panel	タブのコンテンツパネル（InstUI Tabs.Panel）。
tabs.tab	.tab	単一のタブボタン（InstUI Tabs.Tab、親の Tabs のタブリストで構成）；-selected がアクティブなタブを示す。
tag	.instui-tag	キーワードやフィルター用のインラインチップ。
text	.instui-text	本文テキストのタイポグラフィ（サイズ、ウェイト、色、スタイルの修飾子）。
text-area	.instui-text-area	リサイズ可能なスタイル付きネイティブ <textarea>。テキスト入力と同じ状態とサイズを持つ。
text-input	.instui-text-input	スタイル付きネイティブの <input> — ブラウザがピッカーを提供する date、time、datetime-local を含む — 検証状態とサイズをサポート。
toggle-details	.instui-toggle-details	回転するシェブロンを持つスタイル付きネイティブ <details> の開閉要素。
toggle-group	.instui-toggle-group	<details> 上に構築された境界付きの開閉要素：シェブロンのサマリ行と折りたたみ可能なコンテンツ。
tooltip	.instui-tooltip	CSS のホバーおよびフォーカスで表示されるツールチップバブル。任意の辺に配置可能。
tray	.instui-tray	任意の辺からスライドインするエッジ固定パネル。ネイティブの [popover] または <dialog>。
tree-browser	.instui-tree-browser	回転するシェブロンを持つ入れ子のコレクションとリーフアイテムによる開閉ツリー。
view	.instui-view	View プリミティブ：背景、境界、半径、シャドウ、表示、位置、オーバーフロー、カーソルのためのキーと値の修飾子を持つ中立のボックス。これらの修飾子はすべてグローバルでも利用可能（ベア、または他のコンポーネントにチェーン）— background/border/shadow/display/position/overflow/cursor ユーティリティを参照。

ユーティリティ

名前	クラス	概要
color	.--text-danger	セマンティックカラーのユーティリティ：.--bg-<name>、.--text-<name>（別名 .--color-<name>）、およびキュレーションされたセマンティックパレット用の .--border-<name>。これらはそれぞれコンポーネント添付のエイリアス修飾子（例：任意の .instui-<component> 上の -bg-danger）も持つ。
cursor	.--cursor-pointer	cursor を合成可能なグローバルクラス — .--cursor-<value> — として、ベアでも任意のコンポーネントにチェーンして使用可能（.instui-button.--cursor-pointer）。
gap	.--gap-md	スペーシングスケール上のフレックス/グリッド用 gap ユーティリティ。短縮形（--gap-sm）または長形（--gap-small）の表記。ベアでも任意のコンポーネントにチェーンして使用可能（.instui-view.--gap-sm） — コンポーネント固有のトークンから既に自分の gap を設定しているコンポーネントは上書きされる可能性がある。
icon	.instui-icon	アイコンシステム：.instui-icon のサイズ指定と、要素の前にグリフをマスクする共通の -icon-<name> ペインター（currentColor 内）。
layout	.--display-flex	表示とテキストアラインのユーティリティ — .--display-<value> と .--text-align-<value> — を合成可能なグローバルクラスとして、ベアでも任意のコンポーネントにチェーンして使用可能。
maskglobal	.--mask-overlay	グローバルで二重コピーされた mask コンポーネントのオーバーレイ修飾子 — --mask-overlay、--mask-fullscreen、--mask-blur — をベアでも任意のコンポーネントにチェーンして使用可能。.instui-mask 要素でラップする必要はない。
overflow	.--overflow-x-hidden	overflow-x/overflow-y を合成可能なグローバルクラス — .--overflow-x-<value> / .--overflow-y-<value> — として、ベアでも任意のコンポーネントにチェーンして使用可能。
position	.--position-relative	position を合成可能なグローバルクラス — .--position-<value> — として、ベアでも任意のコンポーネントにチェーンして使用可能（.instui-button.--position-relative）。
responsive	[class*="-hidden-"],[class*="-show-"]	テーマ化されたブレークポイントスケールに沿ったビューポート幅またはコンテナ幅での表示/非表示クラス。
screen-reader-content	.instui-screen-reader-content	表示上は非表示にするが支援技術には利用可能な状態を保つ（標準的なクリップパターン）。
spacing	.--p-md	マージンとパディングのユーティリティ — スペーシングスケールの .--m<side>-<step> / .--margin-<side>-<step> と .--p<side>-<step> / .--padding-<side>-<step>（サイド t/b/s/e/x/y またはなし、短表記/長表記どちらも可 — 例えば --mb-sm と --margin-bottom-small は同じルール; マージンは auto も受け取ります）。単体で使うか任意のコンポーネントにチェーンして使えます（例: class="instui-view --mb-sm"）。
stacking	.--stack-topmost	z-index（深さ）ユーティリティ — .--stack-<level>（deepest, below, above, topmost） — 単体でも任意のコンポーネントにチェーンしても使え、層が手作業の数値ではなく予測可能に積まれます。
transition	.instui-transition.-transition-fade-entering	Transition コンポーネント用のアニメーション状態クラス — .instui-transition と状態クラス（-transition-fade-entering, -transition-scale-exited, 等） — 単体でも任意のコンポーネントにチェーンして使用可能です。
truncate	.--truncate	行数制限（line clamping）で制御される省略記号（ellipsis）トランケーション — --lines によって制御され、単体でも任意のコンポーネントにチェーンして使用できます（.instui-button.--truncate）。
visual-debug	.-with-visual-debug	レイアウトデバッグ用アウトライン: 任意の要素に複合的に .-with-visual-debug を適用するとボックスと直下の子要素をアウトライン表示し、レイアウト構造を一目で確認できます。

ルール

名前	クラス	概要
base	*	オプトインのグローバルリセット: box-sizing、ページサーフェス、基本テキスト色とフォント、color-scheme、およびリンクのデフォルト。
prose	:where(body)	生のHTML向けのタイポグラフィ既定値 — 見出し、段落、リスト、リンク、コード — インポートされる場所で自動的に適用されます（デフォルト :where(body)）。別のコンテンツルートをターゲットにするには options.scope を渡してください（例: .vp-doc）。

Plugins

名前	クラス	概要
logos	.logos	Instructure 製品ロゴを CSS イメージトークンとして提供: --instui-logo-<product>-<layout>-<mode> は data-URI SVG を保持するので、例として background-image: var(--instui-logo-canvas-horizontal-color) のようにロゴを描画できます。
primitives	.instui-bg-primitive-color-white	原始パレット（primitive palette）用のオプトインユーティリティクラス: .instui-bg-/fg-/border-primitive-color-<name> は primitive colour トークンから色を塗り、さらに primitive font トークン用の font-family/font-weight ユーティリティがあります。セマンティックユーティリティから分離しているため、上書きはセマンティックの範囲にとどまります。
visual-debug	.-with-visual-debug	レイアウトデバッグ用アウトライン: 任意の要素に複合的に .-with-visual-debug を適用するとボックスと直下の子要素をアウトライン表示し、レイアウト構造を一目で確認できます。

layout

名前	クラス	概要
callout	div[class~="instui-callout"]	短いリマインダーや注記向けのインライン情報アラート。
hero	div[class~="instui-hero"]	タイトル、サブタイトル、任意の背景画像を備えたフル幅ヘッダーセクション。
page-layout	div[class~="instui-page-layout"]	ヘッダー、サイドバー、メインコンテンツを備えた標準的な三分割ページレイアウト。
rubric-note	div[class~="instui-rubric-note"]	ルーブリックカテゴリと採点指標を備えた構造化ノート。
testimonial	div[class~="instui-testimonial"]	帰属（出典）と任意の画像を含む引用または推薦表示。
two-column	div[class~="instui-two-column"]	左右のコンテンツ領域を持つ二段組レイアウト。
wrapper	body[class~="instui-display-flex"]	アプリシェル行: サイドナビ、ヘッダー付きコンテナ、任意のパネル。