リリースノート · React向けMaterial 3 Expressive

1.3.0-rc.1 — 2026-09-12

状態：npmのnextタグで公開前リリース中です。latestは引き続き1.2.2です。これは追加のテストリリースです。pickerのインベントリは、別途昇格レビューが完了するまで実験的な扱いです。

追加

DatePickerとDateRangePicker。 厳密なGregorian ISO暦日、カレンダー／テキストモード、ドック表示／モーダル表示、範囲制限、選択不可の日付、ロケールに応じた書式、キーボード対応のグリッド、ネイティブフォーム検証、縦方向に移動できる月範囲を実装しました。
TimePicker。 厳密なHH:mm暦時刻、ダイヤル／数値入力モード、縦／横のレイアウト、12／24時間表示、分単位の正確な選択、範囲制限、フォーム検証、ネイティブのモーダル下書きを実装しました。
DateTimePicker。 公開されている日付・時刻コンポーネントを組み合わせ、暦時刻を保持し、境界時刻を検証して、1つのISO値として送信します。

このリリースにランタイム依存関係はなく、4つの公開エクスポートパスを維持し、既存コンポーネントのAPIも変更しません。ソースの固定リビジョンとWeb向けの調整については、ADR 0044とpickerコンポーネントのドキュメントをご覧ください。

1.2.2 — 2026-08-13

状態：パッチリリースとして準備済みです。エクスポート、prop、トークン、依存関係の変更はありません。公開APIは1.2.1と同一です。

修正

Switch：トラックの見える両端をタップしても反応しませんでした。 ラベルのないSwitchで報告されました。ルートは縦横ともにボックスを最小インタラクティブターゲットの48pxに設定する一方、トラックは幅52pxで描画されます。また、ネイティブの<input>はposition: absolute; inset: 0のため、ヒット領域は48pxのボックスより広がりませんでした。その結果、両端の描画済みトラック各2pxが反応せず、クリックを転送する仕組みもありませんでした。トラックはaria-hiddenでハンドラーを持たず、ルートも<label>ではなく<span>です。

これは操作性だけでなく、準拠上の欠陥でした。固定されたAndroidXソースではminimumInteractiveComponentSize()を使ってターゲットを合成し、軸ごとにmaxOf(placeable.width, sizePx)を測定します。これは、大きな子要素を収めるためにターゲットを大きくする下限であり、子要素を切り取る上限ではありません。そのため、上流のSwitchターゲットは52×48となり、トラック全体をタップできます。CSSのinline-sizeは上限として働くため、このWebコントロールは52×32の表示に対して48×48で出荷されていました。現在のターゲットはmax(minimum-interactive-target, track-width)×max(minimum-interactive-target, track-height)です。ソースは両軸でmaxを取るため、両軸に記述しています。いずれも利用側が上書きできるトークンです（T59）。

すべてのSwitchTokens.ktの寸法はすでに登録値と一致していました。欠陥はルートでminimum-interactive-targetを使う方法にあり、トークン値は変わっていません。この欠陥は1.0.0より前から存在し、コンポーネントが最初に追加されたコミットにも含まれています。

playgroundの例のようにSwitchを<label>で囲む利用側は影響を受けていません。ラベルは自身のボックス内のどこで発生したクリックも転送するためです。

1.2.1 — 2026-08-04

状態：パッチリリースとして準備済みです。エクスポート、prop、トークン、依存関係の変更はありません。公開APIは1.2.0と同一です。

修正

Tabs：スクロールした行でスライドインジケーターの位置がずれていました。 モバイルだけで起きる欠陥として報告されました。インジケーターはスクロール可能なtablistの内側に絶対配置されるため、スクロールされたコンテンツの座標系にあります。しかし位置の測定にはビューポート座標系を使っていました。両者が一致するのはscrollLeft === 0の場合だけです。そのため、スクロールしていない状態での初回表示は正しく見えても、行をスクロールした後にタブを選ぶ、回転やキーボード表示でResizeObserverが発火する、ウィンドウのサイズを変更するなどのタイミングで再測定すると、インジケーターがちょうどscrollLeftピクセルだけ先頭方向にずれていました。測定値をコンテンツ座標系に変換して修正しました（T56）。

同じ修正で関連する2つの欠陥も直しました。インジケーターの基準位置は論理プロパティのinset-inline-startでしたが、物理的な測定値で変換を駆動しているのに対し、RTLでは反対側の端に解決されて行全体から外れていました。物理的な測定値に合わせて、基準位置を物理プロパティのleftに変更しました。また、タブ選択時にはscrollIntoViewを呼んでいましたが、これはスクロール可能な祖先すべてを移動させ、ページ全体をスクロールすることがありました。固定されたAndroidXのScrollableTabRowに合わせ、タブ行だけをスクロールし、選択項目を中央に配置するようにしました。

詳しい分析はADR 0019のCorrectionsセクションをご覧ください。
ページ独自のfixed／sticky領域の下でCarouselをスクロールすると、Carouselがその上に描画されていました。 視差描画では、ソースの小数値のfocal Modifier.zIndexを変換するために、焦点項目へ最大1000のz-indexを指定します。しかしCarousel自身はスタッキングコンテキストを作らなかったため、ソースと同じく自身のレイアウト内にレベルを保つのではなく、ページのスタッキングコンテキストに加わっていました。そのため報告されたstickyヘッダーなど、z-index: 1000未満のページ領域が、その下をスクロールするCarouselに隠れていました。isolation: isolateを1つ宣言して修正し、ソースの兄弟要素単位のzIndex修飾子と同様に、視差要素のスタッキングをCarousel内に収めました（T57）。ADR 0040のCorrectionsセクションをご覧ください。

検証対象

1.2.0と同じです。npm run check:docsとnpm run verifyを実行します。1.2.1の監査についてはRELEASE_READINESS.mdをご覧ください。

1.2.0 — 2026-07-26

状態：マイナーリリースとして準備済みです。追加のみです。新たに準拠する7つのファミリーで、公開済み1.1.0の34種類から41種類になります。また、既存コンポーネントのトークン値に出典訂正が1件あります。既存のエクスポート、prop、トークン名、依存関係、エクスポートマップのパスは削除も変更もされません。1.1.0を使う利用者は編集なしでアップグレードできます。

追加

ListItemとSegmentedListItem。 受動的な行、ネイティブボタンのアクション、radioを使った単一選択、checkboxを使った複数選択を、ネイティブセマンティクスを持つ1つのファミリーで扱います。固定されたAndroidXソースの56／72／88pxの行ジオメトリー、セグメントの間隔と角、選択／無効／ドラッグ中の状態解決、ReorderListTokens独自の管理を維持します（ADR 0032、T40）。制御／非制御の選択、ネイティブフォームとリセット、SSR、論理方向に沿ったRTLレイアウト、強制カラー、モーションの軽減、スコープ付きコンポーネントトークンの上書きを扱います。
Divider。 リストとレイアウト内のコンテンツを区切る細い線です。固定リビジョンa90df2fc27e026b9ad2ed569f203a260c1041fabのAndroidX Divider.ktを移植しました（ADR 0034、T42）。1つのorientation propでソースの両方のComposableに対応します。as propでhr（デフォルト）、div、liを選びます。<ul>／<ol>内ではコンテンツモデルがhrを許可しないため、liが必要です。decorative propを指定するとアクセシビリティツリーから線を除外し、デフォルトではネイティブのセパレーターとして公開します。太さと色はpropsではなくコンポーネントトークンのため、テーマと組み合わせて上書きでき、インラインスタイルも出力されません。生成されたトークンファイルに未読の残りがない初めてのファミリーです。
BadgeとBadgeAnchor。 アイコンに重ねる通知マーカーです。固定リビジョンa90df2fc27e026b9ad2ed569f203a260c1041fabのAndroidX Badge.ktを移植しました（ADR 0035、T43）。ソースと同じく内容でバリアントが決まります。<Badge />は6pxのドット、<Badge>3</Badge>は数値に応じて大きくなる16pxのピルです。BadgeAnchorは内容に応じて変わるオフセット、RTLで反転する相対位置、アンカーが自身の内容だけを測定するフロー外サイズ処理など、ソースの配置を再現します。バッジを配置するコンポーネントはアイコンの領域をアクセシビリティツリーから隠します。そのためComposeソースにはないlabel propを設け、Webの支援技術向けにバッジ名を指定できるようにしています。
ナビゲーション項目とタブ項目のbadge。 固定ソースでバッジの領域が用意されている5つのコンポーネント、NavigationBar、NavigationRail、NavigationDrawer、NavigationSuite、Tabsに、各項目の任意のbadgeを追加しました。Bar、Rail、Tabsではアイコンにアンカーします。Drawerでは末尾側のラベルとして表示します。これはNavigationDrawerItem自身のbadgeとは別の見せ方で、そちらはエラー色のピルではなく、項目のテキスト色で表示する末尾のカウントです。
BottomSheet。 tranche Cで最初の複合コンポーネントです。固定リビジョンa90df2fc27e026b9ad2ed569f203a260c1041fabのAndroidX BottomSheet.kt、ModalBottomSheet.kt、SheetDefaults.ktを移植しました（ADR 0037、T45）。上流ではファミリーが「sheetかどうか」では分けられない3つの公開Composableに分かれています。そのためvariant propでインラインサーフェスまたはモーダルを選び、スクリーン、フォーカスの閉じ込め、外側クリックと戻る操作による閉じ方も、別コンポーネントではなくバリアントに応じて設定します。ドラッグはソースと同じくハンドルだけで操作できます。BottomSheetScaffoldはアプリシェルとしてエクスポートせず、AppBarとこのコンポーネントを使うレシピとして説明しています。新しいエクスポート：BottomSheet、BottomSheetProps、BottomSheetState、BottomSheetVariant。
AppBar。 ソースの6つのトップバーComposableを1つのエクスポートで扱います。同じ固定リビジョンのAppBar.ktを移植しました（ADR 0038、T46）。sizeでsmall／medium／largeの段階と2行形式を選び、titleAlignmentで中央揃えの見本に対応します。ComposeのNestedScrollConnectionによるスクロール動作にはWeb上の同等機能がないため、Webネイティブのプリミティブを使ってscrollBehaviorを再構築します。固定表示にはposition: sticky、折りたたみ表示には名前付きコンテナーのスクロール位置を使い、出典に基づく色と高さの一覧を維持します。カタログ内の行は3つに分かれます。ボトムバーは対象外です（デザインカタログでToolbarsに移動し、FlexibleBottomAppBarはすでにDockedToolbarTokensを参照します）。また、Searchファミリーの出典に含まれる検索用app barはSearchファミリーから出荷します。新しいエクスポート：AppBar、AppBarProps、AppBarScrollBehavior、AppBarSize、AppBarTitleAlignment。
SearchBarとSearchAppBar。 デザインの2つの軸に対応する2つのエクスポートです。同じ固定リビジョンのSearchBar.ktを移植しました（ADR 0039、T47）。ソースにある現在の6つのComposableは、appearance（containedまたはdivided）とlayout（dockedまたはfull-screen）で表現できます。上流では展開された検索をDialogまたはPopupに表示しますが、その実装は移植できなくても構造は移植可能です。展開したサーフェスが自身のフィールドを持ち、折りたたんだバーは背後に残ります。layoutのデフォルトはadaptiveで、dockedとfull-screenの形式を固定値ではなくビューポートに応じて選びます。SearchAppBarはapp barを上部に合成せず、AppBarTokensの色を使うapp-bar外観です。新しいエクスポート：SearchBar、SearchBarAppearance、SearchBarLayout、SearchBarProps、SearchAppBar、SearchAppBarProps、SearchAppBarScrollBehavior。
Carousel。 ソースの3つの公開Composableを1つのエクスポートで扱います。同じ固定リビジョンの19個のcarouselファイルを移植しました（ADR 0040、T48。決定6はT50、T54、T55で修正）。上流の3つのComposableはいずれも内部のCarouselに処理を委譲し、keylineリストと表示項目数だけが異なるため、layoutで選びます。アスペクト比用の別エンジンもkeylineエンジンとともに移植しました。そのためMultiAspectCarouselItemは独立した項目型です。生成されたトークンファイルに同等項目がなかったトークンレジストリは仕様から取得しました。初期移植後、マスク形状、項目サイズの分類、アダプティブなコンテンツフェードを実際のChromiumで確認し、それぞれ修正しました。新しいエクスポート：Carousel、CarouselItem、CarouselLayout、CarouselProps、CarouselScroll、MultiAspectCarouselItem。

変更

プリミティブのtrancheが1つの上流スナップショットを共有します。 15個のプリミティブファミリーは、散在する3つのリビジョングループに固定されていました。各ファミリーについて、固定されたソース、トークン、テストの各ファイルをファミリー固有のリビジョン、参照スナップショットa90df2fc27e026b9ad2ed569f203a260c1041fab、androidx-mainのHEADから再取得して比較しました（ADR 0036、T44）。調査したすべてのプリミティブファイルで参照スナップショットとHEADが一致したため、このtrancheが現在の状態であることを確認し、比較可能な単一のスナップショットを記述するようになりました。コンポーネントの追加も、レンダリング出力の変更もありません。ソース台帳の出典情報を変更しました。上記の4つの複合コンポーネントも同じスナップショットを使うため、tranche Cはtranche Pと一貫したリビジョンに固定されています。

修正

タブ行の区切り線を、ソースが実際に描画する色に変更しました。 TabsはSecondaryNavigationTabTokens.DividerColor（surfaceVariant）からdivider-colorを登録していましたが、固定されたTabRow.ktは生成されたこのロールを参照していません。両バリアント、両スクロール形式、非推奨のオーバーロードにあるdividerパラメーターはすべてHorizontalDivider()をデフォルトとし、これはoutlineVariantです。T19の時点ではDividerコンポーネントがなく、汎用Composableの出典を追えませんでした。T42で追加されたため、色を修正しました（ADR 0034）。タブ行下の線をsurfaceVariantからoutlineVariantに変更します。どちらも控えめなアウトラインのロールであり、他のすべてのMaterial dividerと一致します。--m3e-comp-tabs-divider-colorと-heightの名前は維持し、引き続き上書き可能です。テーマ設定のAPIは変わりません。

1.1.0 — 2026-07-23

状態：マイナーリリースとして準備済みです。追加のみです。新しいコンポーネントが2つあり、既存のエクスポート、prop、トークン、依存関係、エクスポートマップのパスに変更はありません。1.0.3を使う利用者は編集なしでアップグレードできます。

追加

SliderとRangeSlider。 固定リビジョン225f50d42bf0adeb2abf4b6109befb5ab6ce4efcのAndroidX Material 3 Slider.ktを移植した、ネイティブrangeのスライダーファミリーです（ADR 0031、T39）。Sliderはorientationオプションで連続、段階式、中央基準、垂直の操作に対応し、従来のreverseDirectionはtopToBottomに置き換えました。RangeSliderは交差しないよう制約された、意味を持つ2つのサムを管理します。意味を持つサムはそれぞれ実際の<input type="range">で、role、値、名前、フォーカス、無効状態、フォーム参加、refを持ちます。その下にはaria-hiddenのMaterial描画ツリーがあります。ポインタージェスチャーとキーボードによる増減は、ブラウザー標準のrange増分ではなく、固定ソースのtap／slop／RTL／垂直／最寄りのサムに関する規則に従います。48pxのトラック全体がインタラクティブターゲットとなり、ルートには4pxのハンドルだけでなくターゲット全体に合うcursor: pointerを表示します。
Chip。 Assist、filter、input、suggestionの用途を、型レベルで無効なpropの組み合わせを拒否する判別可能なAPIで扱う小型のアクション／選択コントロールです。ネイティブの<button>としてレンダリングされます。

検証対象

npm run verify（13ゲート）です。1.1.0の監査についてはRELEASE_READINESS.mdをご覧ください。

1.0.3 — 2026-07-22

状態：パッチリリースとして準備済みです。エクスポート、prop、トークン、依存関係の変更はありません。公開APIは1.0.0と同一です。

修正

ポータルで表示されるオーバーレイがテーマを無視していました。Menu、Selectのポップアップリストボックス、Tooltip、Snackbarはdocument.bodyにレンダリングされます。これはMaterial3Providerがレンダリングする要素の子孫ではなく兄弟要素のため、そのスコープを継承せず、すべてのカスタムプロパティが:rootを基準に解決されていました。:rootはJavaScriptがない場合の表示契約として常にライトスキームを持ちます。現在は各オーバーレイのポータルルートに周囲のスコープを再構成します（ADR 0029、T36）。

その結果、ユーザーに見える次の3つの問題がありました。
- カラーモード。 ダークスコープで開いたメニューにライトスキームが描画されていました。修正前の測定値では、同じドキュメント内で--m3e-sys-color-surface-containerがプロバイダー要素では#211f26、ポータル内のメニューでは#f3edf7として解決されていました。
- カスタムテーマ。 プロバイダーのインラインブロックは密度、タイポグラフィ、シェイプ、モーション、コンポーネントトークンの上書きも持つため、カスタムテーマではポータル内のオーバーレイに色だけでなく、すべての領域でデフォルトテーマが描画されていました。
- TooltipとSnackbarの色が逆方向になっていました。 どちらもinverseSurfaceを描画するため、ダークページで明るく見えるのが正しい動作です。実際には誤ったスキームのinverseを使っていたため、ダークページにライトスキームの暗いチップが表示されていました。ロール自体は正しく、スキームが誤っていました。
ネストしたスコープにも対応します。ネストしたプロバイダー内で開いたオーバーレイには、そのスコープが引き継がれます。上位にプロバイダーがない場合、オーバーレイはスコープを出力しません。そのため、アプリケーションが.m3e-themeとdata-m3e-color-modeを<html>自体に設定していれば、引き続きその設定がdocument.bodyを制御します。

この欠陥は1.0.0より前から存在し、これまでの公開済みバージョンすべてに含まれていました。

検証対象

1.0.0と同じです。npm run check:docsとnpm run verifyを実行します。1.0.3の監査についてはRELEASE_READINESS.mdをご覧ください。

1.0.2 — 2026-07-22

状態：パッチリリースとして準備済みです。エクスポート、prop、トークン、依存関係の変更はありません。公開APIは1.0.0と同一です。

1.0.1は準備・タグ付けされましたが、レジストリには公開されませんでした。そのため1.0.2には2件の修正が両方とも含まれます。1.0.0からアップグレードする利用者には、以下のNavigationDrawer修正に加えてFabMenu修正も適用されます。

修正

NavigationDrawer：'modal'バリアントをポインター操作で閉じられませんでした。showModal()／close()とネイティブのcloseリスナーを設定していましたが、外側クリックを処理せず、独自の閉じるコントロールも表示しませんでした。そのため、画面上に案内のないEscape操作だけが閉じる方法でした。現在はスクリーンをクリックすると閉じます。コンポーネントの説明する契約（「Escape／外側クリックで閉じる」）と、固定ソースのクリック可能なスクリーンに一致します。閉じる動作は常に行われます。無効にしたい利用者は、先に実行されるonClickでpreventDefault()を呼び出せます。
FabMenu（未公開の1.0.1から引き継ぎ）：.m3e-fab-menu__item-slot { overflow: hidden }によって項目のエレベーションシャドウが矩形に切られ、角だけが残るため、角丸の項目に四角い光彩が見えていました。このスロットのクリップをなくしました。既定のモーション、prefers-reduced-motion: reduce、forced-colors: activeのいずれでも、段階的な表示アニメーションは変わりません。

追加

未公開の1.0.1から引き継いだ内容：scripts/audit-rendering.mjs（npm run audit:rendering）とm3e.language-lit.comのリポジトリ内ドキュメントサイト（ADR 0028）です。どちらも公開パッケージには含まれません。

検証対象

1.0.0と同じです。npm run check:docsとnpm run verifyを実行します。1.0.2の監査についてはRELEASE_READINESS.mdをご覧ください。

1.0.1 — 2026-07-21

状態：準備されましたが、公開されませんでした。v1.0.1タグはmainにありますが、バージョンはレジストリにpushされていません。レジストリでは1.0.0から1.0.2へ直接移行し、このパッチの内容は後者に含まれます。エクスポート、prop、トークン、依存関係の変更はなく、公開APIは1.0.0と同一です。

修正

FabMenu：.m3e-fab-menu__item-slot { overflow: hidden }によって項目のエレベーションシャドウが矩形に切られ、角だけが残るため、角丸の項目に四角い光彩が見えていました。このスロットのクリップをなくしました。既定のモーション、prefers-reduced-motion: reduce、forced-colors: activeのいずれでも、段階的な表示アニメーションは変わりません。

追加

scripts/audit-rendering.mjs（npm run audit:rendering）：ビルド済みplaygroundを対象とするブラウザーベースの監査です。祖先要素によるエレベーションシャドウのクリッピングと、WCAG 2.2 SC 2.5.8の最小値を下回るインタラクティブターゲットを確認します。コンパイルが成功し、jsdomベースの単体テストに合格しても、画面上では誤って見える欠陥を検出します。実ブラウザーが必要なためnpm run verifyには含まれません。AGENTS.mdに記載されています。
ライブラリ自身のコンポーネントを使い、公開エクスポートだけを利用するリポジトリ内ドキュメントサイトm3e.language-lit.comです（ADR 0028）。

検証対象

1.0.0と同じです。npm run check:docsとnpm run verifyを実行します。1.0.1の監査についてはRELEASE_READINESS.mdをご覧ください。

1.0.0 — 2026-07-21

状態：安定版リリースとして準備済みです。この切り替えでは0.3のAPIを置き換えますが、レジストリへの公開やリモートリリースの作成は行いません。

追加

公開API全体として.、/theme、/tokens、/styles.cssを追加しました。
ライト、ダーク、システム、カスタム、ネストしたプロバイダースコープに対応する、検証可能でシリアライズ可能なテーマ／トークンシステムを追加しました。
生成されたサポート対象コンポーネントの一覧に記載の、準拠する公開コンポーネント32種類を追加しました。
コンポーネントの準拠ゲートで、ネイティブフォーム、キーボード操作、フォーカス、RTL、モーションの軽減、強制カラー、SSR、ハイドレーションの動作を検証します。
フレームワークに依存しないViteおよびNext.jsのパッケージング済みフィクスチャを追加しました。
インストール、テーマ、SSR、移行、Webでの相違に関する公開ガイドを追加しました。

削除

唯一の既知の利用者が先に移行を完了したため、0.3の実装は非推奨として残さず削除しました。移行の準備ができていないアプリケーション向けに、0.3.xは引き続き公開されています。

0.3のコンポーネント、フック、ユーティリティ、プロバイダー、ショーケース、トークンCSS。
components/*、hooks、utils、context/*、showcase、styles、tailwind-presetのサブパスエクスポート。
Tailwindプリセットと、任意のpeer依存関係tailwindcss。
14個すべてのランタイム依存関係。peer依存関係はReactとReact DOMのみです。

破壊的変更

1.0.0では新APIにパッケージルートを再利用するため、0.3.xからのアップグレードは単なるバージョン更新ではなく、意図的な移行が必要です。

コンポーネントのimportパスと、多くのprop契約。
スタイルシートとCSSカスタムプロパティの名前空間。
プロバイダーの責任範囲とテーマ表現。
アイコンソースの扱い。
複合コンポーネントの状態とセマンティックモデル。
サポート対象の範囲。

公開概念の対応についてはMIGRATION.mdをご覧ください。

制限事項

サポート対象のスタイルシートは/styles.css全体です。コンポーネントCSSのサブパスとトークンのみのCSSは、公開パッケージのエクスポートではありません。
サポートの保証範囲は生成された準拠コンポーネント一覧に限られます。Chip、slider、search、sheet、list item、app bar、carouselなど、1.xで追加される可能性のあるコンポーネントは含まれません。
Material 3 Expressiveのソースは変化し続けます。各準拠記録には、このリリースで使ったソースリビジョンが固定されています。
公開、レジストリのdist-tag、リモートリリースの作成には、それぞれ別途明示的な承認が必要です。

検証対象

パッケージング済みVite／Nextビルド、リリース契約、バンドル容量の上限を含め、npm run check:docsとnpm run verifyに合格する必要があります。リリース準備の記録はRELEASE_READINESS.mdです。