{ "schemaVersion": 1, "registryVersion": "1.0.0", "canonicalBaseUrl": "https://ui-atlas.pages.dev/", "counts": { "components": 306, "categories": 14, "recipes": 20, "targets": 7, "qualityRules": 35 }, "categories": [ { "id": "actions", "ja": "操作・アクション", "en": "Actions", "order": 1 }, { "id": "forms", "ja": "フォーム・入力", "en": "Forms & Inputs", "order": 2 }, { "id": "navigation", "ja": "ナビゲーション", "en": "Navigation", "order": 3 }, { "id": "layout", "ja": "レイアウト", "en": "Layout", "order": 4 }, { "id": "data-display", "ja": "情報表示", "en": "Data Display", "order": 5 }, { "id": "feedback", "ja": "状態・フィードバック", "en": "Feedback & Status", "order": 6 }, { "id": "overlays", "ja": "オーバーレイ", "en": "Overlays", "order": 7 }, { "id": "content-media", "ja": "コンテンツ・メディア", "en": "Content & Media", "order": 8 }, { "id": "commerce", "ja": "EC・料金", "en": "Commerce", "order": 9 }, { "id": "auth-account", "ja": "認証・アカウント", "en": "Auth & Account", "order": 10 }, { "id": "communication", "ja": "会話・ソーシャル", "en": "Communication", "order": 11 }, { "id": "productivity", "ja": "業務・データ操作", "en": "Productivity", "order": 12 }, { "id": "mobile", "ja": "モバイル固有", "en": "Mobile Patterns", "order": 13 }, { "id": "accessibility", "ja": "アクセシビリティ・環境", "en": "Accessibility & System", "order": 14 } ], "placements": { "top": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region.", "keywords": [ "上部", "上端", "画面上", "ヘッダー", "top" ] }, "bottom": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region.", "keywords": [ "下部", "下端", "画面下", "フッター", "bottom" ] }, "side": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content.", "keywords": [ "側面", "左右", "サイド", "横", "side" ] }, "inline": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content.", "keywords": [ "要素の近く", "行内", "インライン", "起点の近く", "anchored", "inline", "near element" ] }, "overlay": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen.", "keywords": [ "前面", "重ねる", "画面の上", "オーバーレイ", "overlay" ] }, "content": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area.", "keywords": [ "本文", "主領域", "コンテンツ内", "content", "main content" ] }, "anywhere": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context.", "keywords": [ "レイアウト全体", "文脈次第", "どこでも", "layout-wide", "contextual" ] }, "system": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position.", "keywords": [ "画面全体", "非視覚", "システム", "system-wide", "non-visual" ] } }, "targets": { "react": { "label": "React + Tailwind", "language": "TSX", "file": "ReactTailwind.tsx", "devices": [ "Web", "Desktop browser", "Mobile browser" ] }, "html": { "label": "HTML + CSS", "language": "HTML", "file": "index.html", "devices": [ "Web", "Desktop browser", "Mobile browser" ] }, "native": { "label": "React Native", "language": "TSX", "file": "ReactNative.tsx", "devices": [ "iOS", "Android" ] }, "compose": { "label": "Android Compose", "language": "Kotlin", "file": "AndroidCompose.kt", "devices": [ "Android", "ChromeOS" ] }, "swiftui": { "label": "iOS / macOS SwiftUI", "language": "Swift", "file": "SwiftUI.swift", "devices": [ "iOS", "iPadOS", "macOS", "visionOS" ] }, "winui": { "label": "Windows WinUI", "language": "XAML", "file": "WinUI.xaml", "devices": [ "Windows" ] }, "flutter": { "label": "Flutter", "language": "Dart", "file": "Flutter.dart", "devices": [ "Android", "iOS", "Web", "Windows", "macOS", "Linux" ] } }, "components": [ { "id": "primary-button", "ja": "プライマリボタン", "en": "Primary Button", "aliases": [ "主要ボタン", "CTA", "送信ボタン" ], "names": { "canonical": { "ja": "プライマリボタン", "en": "Primary Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "主要ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "CTA", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "送信ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "プライマリボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Primary Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "主要ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "CTA", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "送信ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "画面で最も重要な操作を1つ示すボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "画面で最も重要な操作を1つ示すボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Primary Buttonは「画面で最も重要な操作を1つ示すボタン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "secondary-button", "tertiary-button", "destructive-button", "icon-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Primary Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Primary Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Primary Button" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Primary Button" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Primary Button" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Primary Button" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Primary Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=primary-button", "implementations": { "react": "components/primary-button/web/ReactTailwind.tsx", "html": "components/primary-button/web/index.html", "native": "components/primary-button/mobile/ReactNative.tsx", "compose": "components/primary-button/android/AndroidCompose.kt", "swiftui": "components/primary-button/apple/SwiftUI.swift", "winui": "components/primary-button/windows/WinUI.xaml", "flutter": "components/primary-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/primary-button/figma/preview.svg", "tokens": "components/primary-button/figma/tokens.tokens.json", "spec": "components/primary-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "primary-button", "プライマリボタン", "Primary Button" ], "official": [], "aliases": [ "主要ボタン", "CTA", "送信ボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "secondary-button", "ja": "セカンダリボタン", "en": "Secondary Button", "aliases": [ "補助ボタン", "サブボタン" ], "names": { "canonical": { "ja": "セカンダリボタン", "en": "Secondary Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "補助ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "サブボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "セカンダリボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Secondary Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "補助ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "サブボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "主要操作を補助する優先度の低いボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "主要操作を補助する優先度の低いボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Secondary Buttonは「主要操作を補助する優先度の低いボタン。」ためのコンポーネントです。", "Primary Buttonより視覚的強調を下げ、主要操作と競合させません。" ], "relatedIds": [ "primary-button", "tertiary-button", "destructive-button", "icon-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Secondary Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Secondary Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Secondary Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Secondary Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Secondary Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Secondary Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Secondary Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=secondary-button", "implementations": { "react": "components/secondary-button/web/ReactTailwind.tsx", "html": "components/secondary-button/web/index.html", "native": "components/secondary-button/mobile/ReactNative.tsx", "compose": "components/secondary-button/android/AndroidCompose.kt", "swiftui": "components/secondary-button/apple/SwiftUI.swift", "winui": "components/secondary-button/windows/WinUI.xaml", "flutter": "components/secondary-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/secondary-button/figma/preview.svg", "tokens": "components/secondary-button/figma/tokens.tokens.json", "spec": "components/secondary-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "secondary-button", "セカンダリボタン", "Secondary Button" ], "official": [], "aliases": [ "補助ボタン", "サブボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "tertiary-button", "ja": "ターシャリボタン", "en": "Tertiary Button", "aliases": [ "テキストボタン", "ゴーストボタン" ], "names": { "canonical": { "ja": "ターシャリボタン", "en": "Tertiary Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "テキストボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ゴーストボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ターシャリボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tertiary Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "テキストボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ゴーストボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "背景や枠を抑えた第3優先の操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "背景や枠を抑えた第3優先の操作。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tertiary Buttonは「背景や枠を抑えた第3優先の操作。」ためのコンポーネントです。", "Secondary Buttonよりさらに低い強調で、背景塗りを持たせません。" ], "relatedIds": [ "primary-button", "secondary-button", "destructive-button", "icon-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tertiary Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tertiary Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tertiary Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tertiary Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tertiary Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tertiary Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tertiary Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tertiary-button", "implementations": { "react": "components/tertiary-button/web/ReactTailwind.tsx", "html": "components/tertiary-button/web/index.html", "native": "components/tertiary-button/mobile/ReactNative.tsx", "compose": "components/tertiary-button/android/AndroidCompose.kt", "swiftui": "components/tertiary-button/apple/SwiftUI.swift", "winui": "components/tertiary-button/windows/WinUI.xaml", "flutter": "components/tertiary-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tertiary-button/figma/preview.svg", "tokens": "components/tertiary-button/figma/tokens.tokens.json", "spec": "components/tertiary-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tertiary-button", "ターシャリボタン", "Tertiary Button" ], "official": [], "aliases": [ "テキストボタン", "ゴーストボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "destructive-button", "ja": "破壊的操作ボタン", "en": "Destructive Button", "aliases": [ "削除ボタン", "危険ボタン", "Danger Button" ], "names": { "canonical": { "ja": "破壊的操作ボタン", "en": "Destructive Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "削除ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "危険ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Danger Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "破壊的操作ボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Destructive Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "削除ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "危険ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Danger Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "削除や取消など元に戻しにくい操作を示す。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "削除や取消など元に戻しにくい操作を示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Destructive Buttonは「削除や取消など元に戻しにくい操作を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "icon-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Destructive Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Destructive Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Destructive Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Destructive Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Destructive Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Destructive Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Destructive Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=destructive-button", "implementations": { "react": "components/destructive-button/web/ReactTailwind.tsx", "html": "components/destructive-button/web/index.html", "native": "components/destructive-button/mobile/ReactNative.tsx", "compose": "components/destructive-button/android/AndroidCompose.kt", "swiftui": "components/destructive-button/apple/SwiftUI.swift", "winui": "components/destructive-button/windows/WinUI.xaml", "flutter": "components/destructive-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/destructive-button/figma/preview.svg", "tokens": "components/destructive-button/figma/tokens.tokens.json", "spec": "components/destructive-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "destructive-button", "破壊的操作ボタン", "Destructive Button" ], "official": [], "aliases": [ "削除ボタン", "危険ボタン", "Danger Button" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "icon-button", "ja": "アイコンボタン", "en": "Icon Button", "aliases": [ "丸ボタン", "ツールボタン" ], "names": { "canonical": { "ja": "アイコンボタン", "en": "Icon Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "丸ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ツールボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アイコンボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Icon Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "丸ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ツールボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "文字の代わりに既知のアイコンで操作を示すボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "文字の代わりに既知のアイコンで操作を示すボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Icon Buttonは「文字の代わりに既知のアイコンで操作を示すボタン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Icon Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Icon Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Icon Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Icon Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Icon Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Icon Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Icon Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=icon-button", "implementations": { "react": "components/icon-button/web/ReactTailwind.tsx", "html": "components/icon-button/web/index.html", "native": "components/icon-button/mobile/ReactNative.tsx", "compose": "components/icon-button/android/AndroidCompose.kt", "swiftui": "components/icon-button/apple/SwiftUI.swift", "winui": "components/icon-button/windows/WinUI.xaml", "flutter": "components/icon-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/icon-button/figma/preview.svg", "tokens": "components/icon-button/figma/tokens.tokens.json", "spec": "components/icon-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "icon-button", "アイコンボタン", "Icon Button" ], "official": [], "aliases": [ "丸ボタン", "ツールボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "floating-action-button", "ja": "フローティングアクションボタン", "en": "Floating Action Button", "aliases": [ "FAB", "フローティングボタン", "Floating Compose Button", "Compose FAB" ], "names": { "canonical": { "ja": "フローティングアクションボタン", "en": "Floating Action Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "FAB", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "フローティングボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Floating Compose Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Compose FAB", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フローティングアクションボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Floating Action Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "FAB", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "フローティングボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Floating Compose Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Compose FAB", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 6 }, "description": "画面上に浮かせて主要操作を常時示すボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "画面上に浮かせて主要操作を常時示すボタン。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Floating Action Buttonは「画面上に浮かせて主要操作を常時示すボタン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "extended-fab", "speed-dial", "back-to-top", "primary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Floating Action Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Floating Action Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Floating Action Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Floating Action Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Floating Action Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Floating Action Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Floating Action Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=floating-action-button", "implementations": { "react": "components/floating-action-button/web/ReactTailwind.tsx", "html": "components/floating-action-button/web/index.html", "native": "components/floating-action-button/mobile/ReactNative.tsx", "compose": "components/floating-action-button/android/AndroidCompose.kt", "swiftui": "components/floating-action-button/apple/SwiftUI.swift", "winui": "components/floating-action-button/windows/WinUI.xaml", "flutter": "components/floating-action-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/floating-action-button/figma/preview.svg", "tokens": "components/floating-action-button/figma/tokens.tokens.json", "spec": "components/floating-action-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "floating-action-button", "フローティングアクションボタン", "Floating Action Button" ], "official": [], "aliases": [ "FAB", "フローティングボタン", "Floating Compose Button", "Compose FAB" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "extended-fab", "ja": "拡張FAB", "en": "Extended FAB", "aliases": [ "Extended Floating Action Button" ], "names": { "canonical": { "ja": "拡張FAB", "en": "Extended FAB", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Extended Floating Action Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "拡張FAB", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Extended FAB", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Extended Floating Action Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "アイコンとラベルを併記した横長のFAB。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "アイコンとラベルを併記した横長のFAB。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Extended FABは「アイコンとラベルを併記した横長のFAB。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "floating-action-button", "speed-dial", "back-to-top", "primary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Extended FAB" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Extended FAB" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Extended FAB" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Extended FAB" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Extended FAB" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Extended FAB" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Extended FAB" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=extended-fab", "implementations": { "react": "components/extended-fab/web/ReactTailwind.tsx", "html": "components/extended-fab/web/index.html", "native": "components/extended-fab/mobile/ReactNative.tsx", "compose": "components/extended-fab/android/AndroidCompose.kt", "swiftui": "components/extended-fab/apple/SwiftUI.swift", "winui": "components/extended-fab/windows/WinUI.xaml", "flutter": "components/extended-fab/cross-platform/Flutter.dart" }, "figma": { "preview": "components/extended-fab/figma/preview.svg", "tokens": "components/extended-fab/figma/tokens.tokens.json", "spec": "components/extended-fab/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "extended-fab", "拡張FAB", "Extended FAB" ], "official": [], "aliases": [ "Extended Floating Action Button" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "split-button", "ja": "スプリットボタン", "en": "Split Button", "aliases": [ "分割ボタン" ], "names": { "canonical": { "ja": "スプリットボタン", "en": "Split Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "分割ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スプリットボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Split Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "分割ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "既定操作と追加候補メニューを一体化したボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "既定操作と追加候補メニューを一体化したボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Split Buttonは「既定操作と追加候補メニューを一体化したボタン。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "button-group", "segmented-control", "primary-button", "secondary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Split Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Split Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Split Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Split Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Split Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Split Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Split Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=split-button", "implementations": { "react": "components/split-button/web/ReactTailwind.tsx", "html": "components/split-button/web/index.html", "native": "components/split-button/mobile/ReactNative.tsx", "compose": "components/split-button/android/AndroidCompose.kt", "swiftui": "components/split-button/apple/SwiftUI.swift", "winui": "components/split-button/windows/WinUI.xaml", "flutter": "components/split-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/split-button/figma/preview.svg", "tokens": "components/split-button/figma/tokens.tokens.json", "spec": "components/split-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "split-button", "スプリットボタン", "Split Button" ], "official": [], "aliases": [ "分割ボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "button-group", "ja": "ボタングループ", "en": "Button Group", "aliases": [ "Grouped Buttons" ], "names": { "canonical": { "ja": "ボタングループ", "en": "Button Group", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Grouped Buttons", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ボタングループ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Button Group", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Grouped Buttons", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "関連する複数操作を横並びでまとめたもの。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "関連する複数操作を横並びでまとめたもの。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Button Groupは「関連する複数操作を横並びでまとめたもの。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "split-button", "segmented-control", "primary-button", "secondary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Button Group" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Button Group" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Button Group" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Button Group" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Button Group" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Button Group" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Button Group" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=button-group", "implementations": { "react": "components/button-group/web/ReactTailwind.tsx", "html": "components/button-group/web/index.html", "native": "components/button-group/mobile/ReactNative.tsx", "compose": "components/button-group/android/AndroidCompose.kt", "swiftui": "components/button-group/apple/SwiftUI.swift", "winui": "components/button-group/windows/WinUI.xaml", "flutter": "components/button-group/cross-platform/Flutter.dart" }, "figma": { "preview": "components/button-group/figma/preview.svg", "tokens": "components/button-group/figma/tokens.tokens.json", "spec": "components/button-group/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "button-group", "ボタングループ", "Button Group" ], "official": [], "aliases": [ "Grouped Buttons" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "toggle-button", "ja": "トグルボタン", "en": "Toggle Button", "aliases": [ "選択ボタン", "押下状態ボタン" ], "names": { "canonical": { "ja": "トグルボタン", "en": "Toggle Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "選択ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "押下状態ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "トグルボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Toggle Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "選択ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "押下状態ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "押すたびに選択状態が切り替わるボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Space: オン／オフを切り替え" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "押すたびに選択状態が切り替わるボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Toggle Buttonは「押すたびに選択状態が切り替わるボタン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Toggle Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Toggle Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Toggle Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Toggle Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Toggle Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Toggle Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Toggle Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=toggle-button", "implementations": { "react": "components/toggle-button/web/ReactTailwind.tsx", "html": "components/toggle-button/web/index.html", "native": "components/toggle-button/mobile/ReactNative.tsx", "compose": "components/toggle-button/android/AndroidCompose.kt", "swiftui": "components/toggle-button/apple/SwiftUI.swift", "winui": "components/toggle-button/windows/WinUI.xaml", "flutter": "components/toggle-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/toggle-button/figma/preview.svg", "tokens": "components/toggle-button/figma/tokens.tokens.json", "spec": "components/toggle-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "toggle-button", "トグルボタン", "Toggle Button" ], "official": [], "aliases": [ "選択ボタン", "押下状態ボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "segmented-control", "ja": "セグメントコントロール", "en": "Segmented Control", "aliases": [ "セグメントボタン", "Segmented Button" ], "names": { "canonical": { "ja": "セグメントコントロール", "en": "Segmented Control", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "セグメントボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Segmented Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "セグメントコントロール", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Segmented Control", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "セグメントボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Segmented Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "少数の相互排他的な表示・値を切り替える操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "composite-pattern", "single", "not-applicable" ], "semantics": { "element": "button", "role": "radiogroup", "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "必要な場合は role=\"radiogroup\" と対応するaria状態を同期する。", "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "少数の相互排他的な表示・値を切り替える操作。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Segmented Controlは「少数の相互排他的な表示・値を切り替える操作。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "split-button", "button-group", "primary-button", "secondary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Segmented Control" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Segmented Control" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Segmented Control" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Segmented Control" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Segmented Control" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Segmented Control" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Segmented Control" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=segmented-control", "implementations": { "react": "components/segmented-control/web/ReactTailwind.tsx", "html": "components/segmented-control/web/index.html", "native": "components/segmented-control/mobile/ReactNative.tsx", "compose": "components/segmented-control/android/AndroidCompose.kt", "swiftui": "components/segmented-control/apple/SwiftUI.swift", "winui": "components/segmented-control/windows/WinUI.xaml", "flutter": "components/segmented-control/cross-platform/Flutter.dart" }, "figma": { "preview": "components/segmented-control/figma/preview.svg", "tokens": "components/segmented-control/figma/tokens.tokens.json", "spec": "components/segmented-control/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "segmented-control", "セグメントコントロール", "Segmented Control" ], "official": [], "aliases": [ "セグメントボタン", "Segmented Button" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "composite-pattern", "single", "not-applicable" ] } }, { "id": "link", "ja": "テキストリンク", "en": "Text Link", "aliases": [ "アンカーリンク", "Hyperlink" ], "names": { "canonical": { "ja": "テキストリンク", "en": "Text Link", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "アンカーリンク", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Hyperlink", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "テキストリンク", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Text Link", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "アンカーリンク", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Hyperlink", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "別ページや別の場所へ移動する文字リンク。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "a", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter: リンク先へ移動" ], "accessibility": [ "移動にはhrefを持つa要素を使い、操作目的ではbuttonを使う。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "別ページや別の場所へ移動する文字リンク。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Text Linkは「別ページや別の場所へ移動する文字リンク。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Text Link" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Text Link" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Text Link" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Text Link" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Text Link" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Text Link" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Text Link" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=link", "implementations": { "react": "components/link/web/ReactTailwind.tsx", "html": "components/link/web/index.html", "native": "components/link/mobile/ReactNative.tsx", "compose": "components/link/android/AndroidCompose.kt", "swiftui": "components/link/apple/SwiftUI.swift", "winui": "components/link/windows/WinUI.xaml", "flutter": "components/link/cross-platform/Flutter.dart" }, "figma": { "preview": "components/link/figma/preview.svg", "tokens": "components/link/figma/tokens.tokens.json", "spec": "components/link/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "link", "テキストリンク", "Text Link" ], "official": [], "aliases": [ "アンカーリンク", "Hyperlink" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "back-button", "ja": "戻るボタン", "en": "Back Button", "aliases": [ "ナビバック" ], "names": { "canonical": { "ja": "戻るボタン", "en": "Back Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ナビバック", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "戻るボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Back Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ナビバック", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ひとつ前の画面や階層へ戻る操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "ひとつ前の画面や階層へ戻る操作。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Back Buttonは「ひとつ前の画面や階層へ戻る操作。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Back Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Back Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Back Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Back Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Back Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Back Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Back Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=back-button", "implementations": { "react": "components/back-button/web/ReactTailwind.tsx", "html": "components/back-button/web/index.html", "native": "components/back-button/mobile/ReactNative.tsx", "compose": "components/back-button/android/AndroidCompose.kt", "swiftui": "components/back-button/apple/SwiftUI.swift", "winui": "components/back-button/windows/WinUI.xaml", "flutter": "components/back-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/back-button/figma/preview.svg", "tokens": "components/back-button/figma/tokens.tokens.json", "spec": "components/back-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "back-button", "戻るボタン", "Back Button" ], "official": [], "aliases": [ "ナビバック" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "copy-button", "ja": "コピーボタン", "en": "Copy Button", "aliases": [ "クリップボードボタン" ], "names": { "canonical": { "ja": "コピーボタン", "en": "Copy Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "クリップボードボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コピーボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Copy Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "クリップボードボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "文字列やコードをクリップボードへコピーする操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "文字列やコードをクリップボードへコピーする操作。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Copy Buttonは「文字列やコードをクリップボードへコピーする操作。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Copy Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Copy Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Copy Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Copy Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Copy Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Copy Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Copy Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=copy-button", "implementations": { "react": "components/copy-button/web/ReactTailwind.tsx", "html": "components/copy-button/web/index.html", "native": "components/copy-button/mobile/ReactNative.tsx", "compose": "components/copy-button/android/AndroidCompose.kt", "swiftui": "components/copy-button/apple/SwiftUI.swift", "winui": "components/copy-button/windows/WinUI.xaml", "flutter": "components/copy-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/copy-button/figma/preview.svg", "tokens": "components/copy-button/figma/tokens.tokens.json", "spec": "components/copy-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "copy-button", "コピーボタン", "Copy Button" ], "official": [], "aliases": [ "クリップボードボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "share-button", "ja": "共有ボタン", "en": "Share Button", "aliases": [ "シェアボタン" ], "names": { "canonical": { "ja": "共有ボタン", "en": "Share Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "シェアボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "共有ボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Share Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "シェアボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "URLや内容を他のアプリ・人へ共有する操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "URLや内容を他のアプリ・人へ共有する操作。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Share Buttonは「URLや内容を他のアプリ・人へ共有する操作。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Share Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Share Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Share Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Share Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Share Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Share Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Share Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=share-button", "implementations": { "react": "components/share-button/web/ReactTailwind.tsx", "html": "components/share-button/web/index.html", "native": "components/share-button/mobile/ReactNative.tsx", "compose": "components/share-button/android/AndroidCompose.kt", "swiftui": "components/share-button/apple/SwiftUI.swift", "winui": "components/share-button/windows/WinUI.xaml", "flutter": "components/share-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/share-button/figma/preview.svg", "tokens": "components/share-button/figma/tokens.tokens.json", "spec": "components/share-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "share-button", "共有ボタン", "Share Button" ], "official": [], "aliases": [ "シェアボタン" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "favorite-button", "ja": "お気に入りボタン", "en": "Favorite Button", "aliases": [ "ブックマーク", "Like Button" ], "names": { "canonical": { "ja": "お気に入りボタン", "en": "Favorite Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ブックマーク", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Like Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "お気に入りボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Favorite Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ブックマーク", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Like Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "項目をお気に入りや保存済みに切り替える操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "項目をお気に入りや保存済みに切り替える操作。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Favorite Buttonは「項目をお気に入りや保存済みに切り替える操作。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Favorite Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Favorite Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Favorite Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Favorite Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Favorite Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Favorite Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Favorite Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=favorite-button", "implementations": { "react": "components/favorite-button/web/ReactTailwind.tsx", "html": "components/favorite-button/web/index.html", "native": "components/favorite-button/mobile/ReactNative.tsx", "compose": "components/favorite-button/android/AndroidCompose.kt", "swiftui": "components/favorite-button/apple/SwiftUI.swift", "winui": "components/favorite-button/windows/WinUI.xaml", "flutter": "components/favorite-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/favorite-button/figma/preview.svg", "tokens": "components/favorite-button/figma/tokens.tokens.json", "spec": "components/favorite-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "favorite-button", "お気に入りボタン", "Favorite Button" ], "official": [], "aliases": [ "ブックマーク", "Like Button" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ] } }, { "id": "overflow-button", "ja": "その他メニューボタン", "en": "Overflow Button", "aliases": [ "ケバブメニュー", "三点リーダー", "More Button" ], "names": { "canonical": { "ja": "その他メニューボタン", "en": "Overflow Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ケバブメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "三点リーダー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "More Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "その他メニューボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Overflow Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ケバブメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "三点リーダー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "More Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "主要でない操作群を三点メニューへまとめるボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "主要でない操作群を三点メニューへまとめるボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Overflow Buttonは「主要でない操作群を三点メニューへまとめるボタン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Overflow Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Overflow Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Overflow Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Overflow Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Overflow Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Overflow Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Overflow Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=overflow-button", "implementations": { "react": "components/overflow-button/web/ReactTailwind.tsx", "html": "components/overflow-button/web/index.html", "native": "components/overflow-button/mobile/ReactNative.tsx", "compose": "components/overflow-button/android/AndroidCompose.kt", "swiftui": "components/overflow-button/apple/SwiftUI.swift", "winui": "components/overflow-button/windows/WinUI.xaml", "flutter": "components/overflow-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/overflow-button/figma/preview.svg", "tokens": "components/overflow-button/figma/tokens.tokens.json", "spec": "components/overflow-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "overflow-button", "その他メニューボタン", "Overflow Button" ], "official": [], "aliases": [ "ケバブメニュー", "三点リーダー", "More Button" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "menu-button", "ja": "メニューボタン", "en": "Menu Button", "aliases": [ "Dropdown Button", "Menu Trigger" ], "names": { "canonical": { "ja": "メニューボタン", "en": "Menu Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Dropdown Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Menu Trigger", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メニューボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Menu Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dropdown Button", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Menu Trigger", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "操作メニューを開閉するトリガーボタン。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "操作メニューを開閉するトリガーボタン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Menu Buttonは「操作メニューを開閉するトリガーボタン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "primary-button", "secondary-button", "tertiary-button", "destructive-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Menu Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Menu Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Menu Button" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Menu Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Menu Button" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Menu Button" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Menu Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=menu-button", "implementations": { "react": "components/menu-button/web/ReactTailwind.tsx", "html": "components/menu-button/web/index.html", "native": "components/menu-button/mobile/ReactNative.tsx", "compose": "components/menu-button/android/AndroidCompose.kt", "swiftui": "components/menu-button/apple/SwiftUI.swift", "winui": "components/menu-button/windows/WinUI.xaml", "flutter": "components/menu-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/menu-button/figma/preview.svg", "tokens": "components/menu-button/figma/tokens.tokens.json", "spec": "components/menu-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "menu-button", "メニューボタン", "Menu Button" ], "official": [], "aliases": [ "Dropdown Button", "Menu Trigger" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "speed-dial", "ja": "スピードダイヤル", "en": "Speed Dial", "aliases": [ "展開FAB" ], "names": { "canonical": { "ja": "スピードダイヤル", "en": "Speed Dial", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "展開FAB", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スピードダイヤル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Speed Dial", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "展開FAB", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "FABから複数の関連アクションを展開するUI。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "FABから複数の関連アクションを展開するUI。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Speed Dialは「FABから複数の関連アクションを展開するUI。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "floating-action-button", "extended-fab", "back-to-top", "primary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Speed Dial" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Speed Dial" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Speed Dial" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Speed Dial" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Speed Dial" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Speed Dial" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Speed Dial" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=speed-dial", "implementations": { "react": "components/speed-dial/web/ReactTailwind.tsx", "html": "components/speed-dial/web/index.html", "native": "components/speed-dial/mobile/ReactNative.tsx", "compose": "components/speed-dial/android/AndroidCompose.kt", "swiftui": "components/speed-dial/apple/SwiftUI.swift", "winui": "components/speed-dial/windows/WinUI.xaml", "flutter": "components/speed-dial/cross-platform/Flutter.dart" }, "figma": { "preview": "components/speed-dial/figma/preview.svg", "tokens": "components/speed-dial/figma/tokens.tokens.json", "spec": "components/speed-dial/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "speed-dial", "スピードダイヤル", "Speed Dial" ], "official": [], "aliases": [ "展開FAB" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "back-to-top", "ja": "トップへ戻るボタン", "en": "Back to Top", "aliases": [ "ページトップ" ], "names": { "canonical": { "ja": "トップへ戻るボタン", "en": "Back to Top", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ページトップ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "トップへ戻るボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Back to Top", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ページトップ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "長いページの先頭へ素早く戻る操作。", "category": "actions", "categoryLabel": { "ja": "操作・アクション", "en": "Actions" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "長いページの先頭へ素早く戻る操作。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Back to Topは「長いページの先頭へ素早く戻る操作。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "floating-action-button", "extended-fab", "speed-dial", "primary-button" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Back to Top" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Back to Top" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Back to Top" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Back to Top" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Back to Top" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Back to Top" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Back to Top" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=back-to-top", "implementations": { "react": "components/back-to-top/web/ReactTailwind.tsx", "html": "components/back-to-top/web/index.html", "native": "components/back-to-top/mobile/ReactNative.tsx", "compose": "components/back-to-top/android/AndroidCompose.kt", "swiftui": "components/back-to-top/apple/SwiftUI.swift", "winui": "components/back-to-top/windows/WinUI.xaml", "flutter": "components/back-to-top/cross-platform/Flutter.dart" }, "figma": { "preview": "components/back-to-top/figma/preview.svg", "tokens": "components/back-to-top/figma/tokens.tokens.json", "spec": "components/back-to-top/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "back-to-top", "トップへ戻るボタン", "Back to Top" ], "official": [], "aliases": [ "ページトップ" ], "relatedNames": [], "facets": [ "操作を実行", "操作・アクション", "Actions", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "form-label", "ja": "フォームラベル", "en": "Form Label", "aliases": [ "項目名", "Input Label" ], "names": { "canonical": { "ja": "フォームラベル", "en": "Form Label", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "項目名", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Input Label", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フォームラベル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Form Label", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "項目名", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Input Label", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "入力欄の目的を明示する名前。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "label", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "入力欄の目的を明示する名前。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Form Labelは「入力欄の目的を明示する名前。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "helper-text", "form-field", "fieldset", "input-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Form Label" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Form Label" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Form Label" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Form Label" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Form Label" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Form Label" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Form Label" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=form-label", "implementations": { "react": "components/form-label/web/ReactTailwind.tsx", "html": "components/form-label/web/index.html", "native": "components/form-label/mobile/ReactNative.tsx", "compose": "components/form-label/android/AndroidCompose.kt", "swiftui": "components/form-label/apple/SwiftUI.swift", "winui": "components/form-label/windows/WinUI.xaml", "flutter": "components/form-label/cross-platform/Flutter.dart" }, "figma": { "preview": "components/form-label/figma/preview.svg", "tokens": "components/form-label/figma/tokens.tokens.json", "spec": "components/form-label/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "form-label", "フォームラベル", "Form Label" ], "official": [], "aliases": [ "項目名", "Input Label" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "helper-text", "ja": "ヘルパーテキスト", "en": "Helper Text", "aliases": [ "補足文", "Supporting Text" ], "names": { "canonical": { "ja": "ヘルパーテキスト", "en": "Helper Text", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "補足文", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Supporting Text", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ヘルパーテキスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Helper Text", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "補足文", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Supporting Text", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "入力形式や補足条件を入力欄の近くで説明する文。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "p", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "入力形式や補足条件を入力欄の近くで説明する文。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Helper Textは「入力形式や補足条件を入力欄の近くで説明する文。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "form-field", "fieldset", "input-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Helper Text" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Helper Text" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Helper Text" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Helper Text" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Helper Text" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Helper Text" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Helper Text" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=helper-text", "implementations": { "react": "components/helper-text/web/ReactTailwind.tsx", "html": "components/helper-text/web/index.html", "native": "components/helper-text/mobile/ReactNative.tsx", "compose": "components/helper-text/android/AndroidCompose.kt", "swiftui": "components/helper-text/apple/SwiftUI.swift", "winui": "components/helper-text/windows/WinUI.xaml", "flutter": "components/helper-text/cross-platform/Flutter.dart" }, "figma": { "preview": "components/helper-text/figma/preview.svg", "tokens": "components/helper-text/figma/tokens.tokens.json", "spec": "components/helper-text/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "helper-text", "ヘルパーテキスト", "Helper Text" ], "official": [], "aliases": [ "補足文", "Supporting Text" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "form-field", "ja": "フォームフィールド", "en": "Form Field", "aliases": [ "Field", "Field Wrapper" ], "names": { "canonical": { "ja": "フォームフィールド", "en": "Form Field", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Field Wrapper", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フォームフィールド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Form Field", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Field Wrapper", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "ラベル・入力・補助文・検証メッセージを1単位にまとめる。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "ラベル・入力・補助文・検証メッセージを1単位にまとめる。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Form Fieldは「ラベル・入力・補助文・検証メッセージを1単位にまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "fieldset", "input-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Form Field" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Form Field" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Form Field" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Form Field" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Form Field" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Form Field" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Form Field" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=form-field", "implementations": { "react": "components/form-field/web/ReactTailwind.tsx", "html": "components/form-field/web/index.html", "native": "components/form-field/mobile/ReactNative.tsx", "compose": "components/form-field/android/AndroidCompose.kt", "swiftui": "components/form-field/apple/SwiftUI.swift", "winui": "components/form-field/windows/WinUI.xaml", "flutter": "components/form-field/cross-platform/Flutter.dart" }, "figma": { "preview": "components/form-field/figma/preview.svg", "tokens": "components/form-field/figma/tokens.tokens.json", "spec": "components/form-field/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "form-field", "フォームフィールド", "Form Field" ], "official": [], "aliases": [ "Field", "Field Wrapper" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "fieldset", "ja": "フィールドセット", "en": "Fieldset", "aliases": [ "Form Group", "Legend Group" ], "names": { "canonical": { "ja": "フィールドセット", "en": "Fieldset", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Form Group", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Legend Group", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フィールドセット", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Fieldset", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Form Group", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Legend Group", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "関連する複数入力を見出し付きで1つの質問にまとめる。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "fieldset", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "関連する複数入力を見出し付きで1つの質問にまとめる。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Fieldsetは「関連する複数入力を見出し付きで1つの質問にまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "input-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Fieldset" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Fieldset" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Fieldset" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Fieldset" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Fieldset" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Fieldset" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Fieldset" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=fieldset", "implementations": { "react": "components/fieldset/web/ReactTailwind.tsx", "html": "components/fieldset/web/index.html", "native": "components/fieldset/mobile/ReactNative.tsx", "compose": "components/fieldset/android/AndroidCompose.kt", "swiftui": "components/fieldset/apple/SwiftUI.swift", "winui": "components/fieldset/windows/WinUI.xaml", "flutter": "components/fieldset/cross-platform/Flutter.dart" }, "figma": { "preview": "components/fieldset/figma/preview.svg", "tokens": "components/fieldset/figma/tokens.tokens.json", "spec": "components/fieldset/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "fieldset", "フィールドセット", "Fieldset" ], "official": [], "aliases": [ "Form Group", "Legend Group" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "input-group", "ja": "入力グループ", "en": "Input Group", "aliases": [ "Input Adornment", "Affix Input" ], "names": { "canonical": { "ja": "入力グループ", "en": "Input Group", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Input Adornment", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Affix Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "入力グループ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Input Group", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Input Adornment", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Affix Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "接頭・接尾要素と入力欄を一体化する。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "接頭・接尾要素と入力欄を一体化する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Input Groupは「接頭・接尾要素と入力欄を一体化する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Input Group" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Input Group" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Input Group" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Input Group" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Input Group" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Input Group" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Input Group" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=input-group", "implementations": { "react": "components/input-group/web/ReactTailwind.tsx", "html": "components/input-group/web/index.html", "native": "components/input-group/mobile/ReactNative.tsx", "compose": "components/input-group/android/AndroidCompose.kt", "swiftui": "components/input-group/apple/SwiftUI.swift", "winui": "components/input-group/windows/WinUI.xaml", "flutter": "components/input-group/cross-platform/Flutter.dart" }, "figma": { "preview": "components/input-group/figma/preview.svg", "tokens": "components/input-group/figma/tokens.tokens.json", "spec": "components/input-group/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "input-group", "入力グループ", "Input Group" ], "official": [], "aliases": [ "Input Adornment", "Affix Input" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "text-input", "ja": "テキスト入力", "en": "Text Input", "aliases": [ "テキストフィールド", "Text Field" ], "names": { "canonical": { "ja": "テキスト入力", "en": "Text Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "テキストフィールド", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Text Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "テキスト入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Text Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "テキストフィールド", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Text Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "短い1行の文字列を入力する基本フィールド。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "text", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "短い1行の文字列を入力する基本フィールド。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Text Inputは「短い1行の文字列を入力する基本フィールド。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Text Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Text Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Text Input" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Text Input" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Text Input" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Text Input" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Text Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=text-input", "implementations": { "react": "components/text-input/web/ReactTailwind.tsx", "html": "components/text-input/web/index.html", "native": "components/text-input/mobile/ReactNative.tsx", "compose": "components/text-input/android/AndroidCompose.kt", "swiftui": "components/text-input/apple/SwiftUI.swift", "winui": "components/text-input/windows/WinUI.xaml", "flutter": "components/text-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/text-input/figma/preview.svg", "tokens": "components/text-input/figma/tokens.tokens.json", "spec": "components/text-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "text-input", "テキスト入力", "Text Input" ], "official": [], "aliases": [ "テキストフィールド", "Text Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "textarea", "ja": "複数行テキスト入力", "en": "Textarea", "aliases": [ "テキストエリア", "Multiline Input" ], "names": { "canonical": { "ja": "複数行テキスト入力", "en": "Textarea", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "テキストエリア", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Multiline Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "複数行テキスト入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Textarea", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "テキストエリア", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Multiline Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "長文やコメントを複数行で入力する領域。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "textarea", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "長文やコメントを複数行で入力する領域。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Textareaは「長文やコメントを複数行で入力する領域。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Textarea" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Textarea" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Textarea" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Textarea" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Textarea" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Textarea" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Textarea" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=textarea", "implementations": { "react": "components/textarea/web/ReactTailwind.tsx", "html": "components/textarea/web/index.html", "native": "components/textarea/mobile/ReactNative.tsx", "compose": "components/textarea/android/AndroidCompose.kt", "swiftui": "components/textarea/apple/SwiftUI.swift", "winui": "components/textarea/windows/WinUI.xaml", "flutter": "components/textarea/cross-platform/Flutter.dart" }, "figma": { "preview": "components/textarea/figma/preview.svg", "tokens": "components/textarea/figma/tokens.tokens.json", "spec": "components/textarea/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "textarea", "複数行テキスト入力", "Textarea" ], "official": [], "aliases": [ "テキストエリア", "Multiline Input" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "password-input", "ja": "パスワード入力", "en": "Password Input", "aliases": [ "Password Field" ], "names": { "canonical": { "ja": "パスワード入力", "en": "Password Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Password Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "パスワード入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Password Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Password Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "入力値を隠して認証用の秘密文字列を受け取る欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "password", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "入力値を隠して認証用の秘密文字列を受け取る欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Password Inputは「入力値を隠して認証用の秘密文字列を受け取る欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Password Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Password Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Password Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Password Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Password Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Password Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Password Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=password-input", "implementations": { "react": "components/password-input/web/ReactTailwind.tsx", "html": "components/password-input/web/index.html", "native": "components/password-input/mobile/ReactNative.tsx", "compose": "components/password-input/android/AndroidCompose.kt", "swiftui": "components/password-input/apple/SwiftUI.swift", "winui": "components/password-input/windows/WinUI.xaml", "flutter": "components/password-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/password-input/figma/preview.svg", "tokens": "components/password-input/figma/tokens.tokens.json", "spec": "components/password-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "password-input", "パスワード入力", "Password Input" ], "official": [], "aliases": [ "Password Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "search-input", "ja": "検索入力", "en": "Search Input", "aliases": [ "検索バー", "Search Field" ], "names": { "canonical": { "ja": "検索入力", "en": "Search Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "検索バー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Search Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "検索入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Search Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "検索バー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Search Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "キーワード検索に最適化した入力欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "search", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "キーワード検索に最適化した入力欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Search Inputは「キーワード検索に最適化した入力欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Search Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Search Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Search Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Search Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Search Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Search Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Search Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=search-input", "implementations": { "react": "components/search-input/web/ReactTailwind.tsx", "html": "components/search-input/web/index.html", "native": "components/search-input/mobile/ReactNative.tsx", "compose": "components/search-input/android/AndroidCompose.kt", "swiftui": "components/search-input/apple/SwiftUI.swift", "winui": "components/search-input/windows/WinUI.xaml", "flutter": "components/search-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/search-input/figma/preview.svg", "tokens": "components/search-input/figma/tokens.tokens.json", "spec": "components/search-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "search-input", "検索入力", "Search Input" ], "official": [], "aliases": [ "検索バー", "Search Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "email-input", "ja": "メールアドレス入力", "en": "Email Input", "aliases": [ "Email Field" ], "names": { "canonical": { "ja": "メールアドレス入力", "en": "Email Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Email Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メールアドレス入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Email Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Email Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "メールアドレス形式の入力欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "email", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "メールアドレス形式の入力欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Email Inputは「メールアドレス形式の入力欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Email Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Email Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Email Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Email Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Email Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Email Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Email Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=email-input", "implementations": { "react": "components/email-input/web/ReactTailwind.tsx", "html": "components/email-input/web/index.html", "native": "components/email-input/mobile/ReactNative.tsx", "compose": "components/email-input/android/AndroidCompose.kt", "swiftui": "components/email-input/apple/SwiftUI.swift", "winui": "components/email-input/windows/WinUI.xaml", "flutter": "components/email-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/email-input/figma/preview.svg", "tokens": "components/email-input/figma/tokens.tokens.json", "spec": "components/email-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "email-input", "メールアドレス入力", "Email Input" ], "official": [], "aliases": [ "Email Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "telephone-input", "ja": "電話番号入力", "en": "Telephone Input", "aliases": [ "Tel Input", "Phone Field" ], "names": { "canonical": { "ja": "電話番号入力", "en": "Telephone Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Tel Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Phone Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "電話番号入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Telephone Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tel Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Phone Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "電話番号向けの入力欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "tel", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "電話番号向けの入力欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Telephone Inputは「電話番号向けの入力欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Telephone Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Telephone Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Telephone Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Telephone Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Telephone Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Telephone Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Telephone Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=telephone-input", "implementations": { "react": "components/telephone-input/web/ReactTailwind.tsx", "html": "components/telephone-input/web/index.html", "native": "components/telephone-input/mobile/ReactNative.tsx", "compose": "components/telephone-input/android/AndroidCompose.kt", "swiftui": "components/telephone-input/apple/SwiftUI.swift", "winui": "components/telephone-input/windows/WinUI.xaml", "flutter": "components/telephone-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/telephone-input/figma/preview.svg", "tokens": "components/telephone-input/figma/tokens.tokens.json", "spec": "components/telephone-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "telephone-input", "電話番号入力", "Telephone Input" ], "official": [], "aliases": [ "Tel Input", "Phone Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "url-input", "ja": "URL入力", "en": "URL Input", "aliases": [ "Link Input" ], "names": { "canonical": { "ja": "URL入力", "en": "URL Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Link Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "URL入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "URL Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Link Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "Webアドレス向けの入力欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "url", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "Webアドレス向けの入力欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "URL Inputは「Webアドレス向けの入力欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "URL Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "URL Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "URL Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "URL Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "URL Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "URL Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "URL Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=url-input", "implementations": { "react": "components/url-input/web/ReactTailwind.tsx", "html": "components/url-input/web/index.html", "native": "components/url-input/mobile/ReactNative.tsx", "compose": "components/url-input/android/AndroidCompose.kt", "swiftui": "components/url-input/apple/SwiftUI.swift", "winui": "components/url-input/windows/WinUI.xaml", "flutter": "components/url-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/url-input/figma/preview.svg", "tokens": "components/url-input/figma/tokens.tokens.json", "spec": "components/url-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "url-input", "URL入力", "URL Input" ], "official": [], "aliases": [ "Link Input" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "number-input", "ja": "数値入力", "en": "Number Input", "aliases": [ "Numeric Field" ], "names": { "canonical": { "ja": "数値入力", "en": "Number Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Numeric Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "数値入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Number Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Numeric Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "数値のみを入力する欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "number", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "数値のみを入力する欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Number Inputは「数値のみを入力する欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Number Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Number Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Number Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Number Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Number Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Number Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Number Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=number-input", "implementations": { "react": "components/number-input/web/ReactTailwind.tsx", "html": "components/number-input/web/index.html", "native": "components/number-input/mobile/ReactNative.tsx", "compose": "components/number-input/android/AndroidCompose.kt", "swiftui": "components/number-input/apple/SwiftUI.swift", "winui": "components/number-input/windows/WinUI.xaml", "flutter": "components/number-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/number-input/figma/preview.svg", "tokens": "components/number-input/figma/tokens.tokens.json", "spec": "components/number-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "number-input", "数値入力", "Number Input" ], "official": [], "aliases": [ "Numeric Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "currency-input", "ja": "金額入力", "en": "Currency Input", "aliases": [ "価格入力", "Money Input" ], "names": { "canonical": { "ja": "金額入力", "en": "Currency Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "価格入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Money Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "金額入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Currency Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "価格入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Money Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "通貨記号・桁区切りを伴う金額入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "text", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "通貨記号・桁区切りを伴う金額入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Currency Inputは「通貨記号・桁区切りを伴う金額入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Currency Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Currency Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Currency Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Currency Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Currency Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Currency Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Currency Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=currency-input", "implementations": { "react": "components/currency-input/web/ReactTailwind.tsx", "html": "components/currency-input/web/index.html", "native": "components/currency-input/mobile/ReactNative.tsx", "compose": "components/currency-input/android/AndroidCompose.kt", "swiftui": "components/currency-input/apple/SwiftUI.swift", "winui": "components/currency-input/windows/WinUI.xaml", "flutter": "components/currency-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/currency-input/figma/preview.svg", "tokens": "components/currency-input/figma/tokens.tokens.json", "spec": "components/currency-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "currency-input", "金額入力", "Currency Input" ], "official": [], "aliases": [ "価格入力", "Money Input" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "date-input", "ja": "日付入力", "en": "Date Input", "aliases": [ "日付フィールド" ], "names": { "canonical": { "ja": "日付入力", "en": "Date Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "日付フィールド", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "日付入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Date Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "日付フィールド", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "単一の日付を入力する欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "date", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "単一の日付を入力する欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Date Inputは「単一の日付を入力する欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Date Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Date Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Date Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Date Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Date Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Date Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Date Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=date-input", "implementations": { "react": "components/date-input/web/ReactTailwind.tsx", "html": "components/date-input/web/index.html", "native": "components/date-input/mobile/ReactNative.tsx", "compose": "components/date-input/android/AndroidCompose.kt", "swiftui": "components/date-input/apple/SwiftUI.swift", "winui": "components/date-input/windows/WinUI.xaml", "flutter": "components/date-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/date-input/figma/preview.svg", "tokens": "components/date-input/figma/tokens.tokens.json", "spec": "components/date-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "date-input", "日付入力", "Date Input" ], "official": [], "aliases": [ "日付フィールド" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "time-input", "ja": "時刻入力", "en": "Time Input", "aliases": [ "時間入力" ], "names": { "canonical": { "ja": "時刻入力", "en": "Time Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "時間入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "時刻入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Time Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "時間入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "時刻を入力する欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "time", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "時刻を入力する欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Time Inputは「時刻を入力する欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Time Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Time Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Time Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Time Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Time Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Time Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Time Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=time-input", "implementations": { "react": "components/time-input/web/ReactTailwind.tsx", "html": "components/time-input/web/index.html", "native": "components/time-input/mobile/ReactNative.tsx", "compose": "components/time-input/android/AndroidCompose.kt", "swiftui": "components/time-input/apple/SwiftUI.swift", "winui": "components/time-input/windows/WinUI.xaml", "flutter": "components/time-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/time-input/figma/preview.svg", "tokens": "components/time-input/figma/tokens.tokens.json", "spec": "components/time-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "time-input", "時刻入力", "Time Input" ], "official": [], "aliases": [ "時間入力" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "datetime-input", "ja": "日時入力", "en": "Date and Time Input", "aliases": [ "Datetime Field" ], "names": { "canonical": { "ja": "日時入力", "en": "Date and Time Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Datetime Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "日時入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Date and Time Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Datetime Field", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "日付と時刻をまとめて入力する欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "datetime-local", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "日付と時刻をまとめて入力する欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Date and Time Inputは「日付と時刻をまとめて入力する欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Date and Time Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Date and Time Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Date and Time Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Date and Time Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Date and Time Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Date and Time Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Date and Time Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=datetime-input", "implementations": { "react": "components/datetime-input/web/ReactTailwind.tsx", "html": "components/datetime-input/web/index.html", "native": "components/datetime-input/mobile/ReactNative.tsx", "compose": "components/datetime-input/android/AndroidCompose.kt", "swiftui": "components/datetime-input/apple/SwiftUI.swift", "winui": "components/datetime-input/windows/WinUI.xaml", "flutter": "components/datetime-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/datetime-input/figma/preview.svg", "tokens": "components/datetime-input/figma/tokens.tokens.json", "spec": "components/datetime-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "datetime-input", "日時入力", "Date and Time Input" ], "official": [], "aliases": [ "Datetime Field" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "date-picker", "ja": "日付ピッカー", "en": "Date Picker", "aliases": [ "カレンダー選択" ], "names": { "canonical": { "ja": "日付ピッカー", "en": "Date Picker", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "カレンダー選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "日付ピッカー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Date Picker", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "カレンダー選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "カレンダーから単一の日付を選ぶUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "カレンダーから単一の日付を選ぶUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Date Pickerは「カレンダーから単一の日付を選ぶUI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-range-picker", "time-picker", "checkbox-group", "radio-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Date Picker" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Date Picker" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Date Picker" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Date Picker" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Date Picker" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Date Picker" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Date Picker" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=date-picker", "implementations": { "react": "components/date-picker/web/ReactTailwind.tsx", "html": "components/date-picker/web/index.html", "native": "components/date-picker/mobile/ReactNative.tsx", "compose": "components/date-picker/android/AndroidCompose.kt", "swiftui": "components/date-picker/apple/SwiftUI.swift", "winui": "components/date-picker/windows/WinUI.xaml", "flutter": "components/date-picker/cross-platform/Flutter.dart" }, "figma": { "preview": "components/date-picker/figma/preview.svg", "tokens": "components/date-picker/figma/tokens.tokens.json", "spec": "components/date-picker/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "date-picker", "日付ピッカー", "Date Picker" ], "official": [], "aliases": [ "カレンダー選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "date-range-picker", "ja": "期間選択", "en": "Date Range Picker", "aliases": [ "日付範囲", "期間ピッカー" ], "names": { "canonical": { "ja": "期間選択", "en": "Date Range Picker", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "日付範囲", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "期間ピッカー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "期間選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Date Range Picker", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "日付範囲", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "期間ピッカー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "開始日と終了日をカレンダーで選ぶUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "開始日と終了日をカレンダーで選ぶUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Date Range Pickerは「開始日と終了日をカレンダーで選ぶUI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "time-picker", "checkbox-group", "radio-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Date Range Picker" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Date Range Picker" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Date Range Picker" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Date Range Picker" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Date Range Picker" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Date Range Picker" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Date Range Picker" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=date-range-picker", "implementations": { "react": "components/date-range-picker/web/ReactTailwind.tsx", "html": "components/date-range-picker/web/index.html", "native": "components/date-range-picker/mobile/ReactNative.tsx", "compose": "components/date-range-picker/android/AndroidCompose.kt", "swiftui": "components/date-range-picker/apple/SwiftUI.swift", "winui": "components/date-range-picker/windows/WinUI.xaml", "flutter": "components/date-range-picker/cross-platform/Flutter.dart" }, "figma": { "preview": "components/date-range-picker/figma/preview.svg", "tokens": "components/date-range-picker/figma/tokens.tokens.json", "spec": "components/date-range-picker/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "date-range-picker", "期間選択", "Date Range Picker" ], "official": [], "aliases": [ "日付範囲", "期間ピッカー" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "time-picker", "ja": "時刻ピッカー", "en": "Time Picker", "aliases": [ "時間選択" ], "names": { "canonical": { "ja": "時刻ピッカー", "en": "Time Picker", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "時間選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "時刻ピッカー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Time Picker", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "時間選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一覧や時計UIから時刻を選ぶ。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "一覧や時計UIから時刻を選ぶ。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Time Pickerは「一覧や時計UIから時刻を選ぶ。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "date-range-picker", "checkbox-group", "radio-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Time Picker" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Time Picker" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Time Picker" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Time Picker" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Time Picker" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Time Picker" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Time Picker" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=time-picker", "implementations": { "react": "components/time-picker/web/ReactTailwind.tsx", "html": "components/time-picker/web/index.html", "native": "components/time-picker/mobile/ReactNative.tsx", "compose": "components/time-picker/android/AndroidCompose.kt", "swiftui": "components/time-picker/apple/SwiftUI.swift", "winui": "components/time-picker/windows/WinUI.xaml", "flutter": "components/time-picker/cross-platform/Flutter.dart" }, "figma": { "preview": "components/time-picker/figma/preview.svg", "tokens": "components/time-picker/figma/tokens.tokens.json", "spec": "components/time-picker/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "time-picker", "時刻ピッカー", "Time Picker" ], "official": [], "aliases": [ "時間選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "color-picker", "ja": "カラーピッカー", "en": "Color Picker", "aliases": [ "色選択" ], "names": { "canonical": { "ja": "カラーピッカー", "en": "Color Picker", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "色選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カラーピッカー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Color Picker", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "色選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "色相・明度やパレットから色を選ぶUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "color", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "色相・明度やパレットから色を選ぶUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Color Pickerは「色相・明度やパレットから色を選ぶUI。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Color Picker" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Color Picker" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Color Picker" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Color Picker" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Color Picker" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Color Picker" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Color Picker" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=color-picker", "implementations": { "react": "components/color-picker/web/ReactTailwind.tsx", "html": "components/color-picker/web/index.html", "native": "components/color-picker/mobile/ReactNative.tsx", "compose": "components/color-picker/android/AndroidCompose.kt", "swiftui": "components/color-picker/apple/SwiftUI.swift", "winui": "components/color-picker/windows/WinUI.xaml", "flutter": "components/color-picker/cross-platform/Flutter.dart" }, "figma": { "preview": "components/color-picker/figma/preview.svg", "tokens": "components/color-picker/figma/tokens.tokens.json", "spec": "components/color-picker/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "color-picker", "カラーピッカー", "Color Picker" ], "official": [], "aliases": [ "色選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "file-input", "ja": "ファイル選択", "en": "File Input", "aliases": [ "ファイルアップロード" ], "names": { "canonical": { "ja": "ファイル選択", "en": "File Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ファイルアップロード", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ファイル選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "File Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ファイルアップロード", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "端末からファイルを選択して受け取る入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "file", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "端末からファイルを選択して受け取る入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "File Inputは「端末からファイルを選択して受け取る入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "File Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "File Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "File Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "File Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "File Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "File Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "File Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=file-input", "implementations": { "react": "components/file-input/web/ReactTailwind.tsx", "html": "components/file-input/web/index.html", "native": "components/file-input/mobile/ReactNative.tsx", "compose": "components/file-input/android/AndroidCompose.kt", "swiftui": "components/file-input/apple/SwiftUI.swift", "winui": "components/file-input/windows/WinUI.xaml", "flutter": "components/file-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/file-input/figma/preview.svg", "tokens": "components/file-input/figma/tokens.tokens.json", "spec": "components/file-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "file-input", "ファイル選択", "File Input" ], "official": [], "aliases": [ "ファイルアップロード" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "drop-zone", "ja": "ドロップゾーン", "en": "Drop Zone", "aliases": [ "ドラッグドロップ", "Upload Area" ], "names": { "canonical": { "ja": "ドロップゾーン", "en": "Drop Zone", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ドラッグドロップ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Upload Area", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ドロップゾーン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Drop Zone", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ドラッグドロップ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Upload Area", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "ドラッグ&ドロップでファイルを追加する領域。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "ドラッグ&ドロップでファイルを追加する領域。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Drop Zoneは「ドラッグ&ドロップでファイルを追加する領域。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Drop Zone" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Drop Zone" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Drop Zone" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Drop Zone" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Drop Zone" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Drop Zone" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Drop Zone" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=drop-zone", "implementations": { "react": "components/drop-zone/web/ReactTailwind.tsx", "html": "components/drop-zone/web/index.html", "native": "components/drop-zone/mobile/ReactNative.tsx", "compose": "components/drop-zone/android/AndroidCompose.kt", "swiftui": "components/drop-zone/apple/SwiftUI.swift", "winui": "components/drop-zone/windows/WinUI.xaml", "flutter": "components/drop-zone/cross-platform/Flutter.dart" }, "figma": { "preview": "components/drop-zone/figma/preview.svg", "tokens": "components/drop-zone/figma/tokens.tokens.json", "spec": "components/drop-zone/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "drop-zone", "ドロップゾーン", "Drop Zone" ], "official": [], "aliases": [ "ドラッグドロップ", "Upload Area" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "checkbox", "ja": "チェックボックス", "en": "Checkbox", "aliases": [ "チェック欄" ], "names": { "canonical": { "ja": "チェックボックス", "en": "Checkbox", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "チェック欄", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "チェックボックス", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Checkbox", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "チェック欄", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数選択や同意の有無を表す選択欄。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "checkbox", "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Space: 選択状態を切り替え" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "複数選択や同意の有無を表す選択欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Checkboxは「複数選択や同意の有無を表す選択欄。」ためのコンポーネントです。", "Radio Buttonと異なり、各項目を独立に複数選択できます。" ], "relatedIds": [ "tags-input", "form-label", "helper-text", "form-field" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Checkbox" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Checkbox" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Checkbox" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Checkbox" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Checkbox" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Checkbox" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Checkbox" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=checkbox", "implementations": { "react": "components/checkbox/web/ReactTailwind.tsx", "html": "components/checkbox/web/index.html", "native": "components/checkbox/mobile/ReactNative.tsx", "compose": "components/checkbox/android/AndroidCompose.kt", "swiftui": "components/checkbox/apple/SwiftUI.swift", "winui": "components/checkbox/windows/WinUI.xaml", "flutter": "components/checkbox/cross-platform/Flutter.dart" }, "figma": { "preview": "components/checkbox/figma/preview.svg", "tokens": "components/checkbox/figma/tokens.tokens.json", "spec": "components/checkbox/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "checkbox", "チェックボックス", "Checkbox" ], "official": [], "aliases": [ "チェック欄" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ] } }, { "id": "checkbox-group", "ja": "チェックボックスグループ", "en": "Checkbox Group", "aliases": [ "複数選択" ], "names": { "canonical": { "ja": "チェックボックスグループ", "en": "Checkbox Group", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "複数選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "チェックボックスグループ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Checkbox Group", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "複数選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数のチェック項目を1つの質問としてまとめる。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "multiple", "not-applicable" ], "semantics": { "element": "div", "role": "group", "inputType": "checkbox", "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Space: 選択状態を切り替え" ], "accessibility": [ "必要な場合は role=\"group\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "複数のチェック項目を1つの質問としてまとめる。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Checkbox Groupは「複数のチェック項目を1つの質問としてまとめる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "multi-select", "transfer-list", "date-picker", "date-range-picker" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Checkbox Group" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Checkbox Group" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Checkbox Group" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Checkbox Group" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Checkbox Group" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Checkbox Group" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Checkbox Group" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=checkbox-group", "implementations": { "react": "components/checkbox-group/web/ReactTailwind.tsx", "html": "components/checkbox-group/web/index.html", "native": "components/checkbox-group/mobile/ReactNative.tsx", "compose": "components/checkbox-group/android/AndroidCompose.kt", "swiftui": "components/checkbox-group/apple/SwiftUI.swift", "winui": "components/checkbox-group/windows/WinUI.xaml", "flutter": "components/checkbox-group/cross-platform/Flutter.dart" }, "figma": { "preview": "components/checkbox-group/figma/preview.svg", "tokens": "components/checkbox-group/figma/tokens.tokens.json", "spec": "components/checkbox-group/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "checkbox-group", "チェックボックスグループ", "Checkbox Group" ], "official": [], "aliases": [ "複数選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "multiple", "not-applicable" ] } }, { "id": "radio-button", "ja": "ラジオボタン", "en": "Radio Button", "aliases": [ "単一選択" ], "names": { "canonical": { "ja": "ラジオボタン", "en": "Radio Button", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "単一選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ラジオボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Radio Button", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "単一選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "候補から1つだけ選択する丸い入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "radio", "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Arrow keys: 同じグループ内を移動", "Space: 選択" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "候補から1つだけ選択する丸い入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Radio Buttonは「候補から1つだけ選択する丸い入力。」ためのコンポーネントです。", "Checkboxと異なり、同じグループから原則1件だけ選択します。" ], "relatedIds": [ "select", "rating-input", "rating-scale", "form-label" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Radio Button" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Radio Button" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Radio Button" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Radio Button" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Radio Button" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Radio Button" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Radio Button" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=radio-button", "implementations": { "react": "components/radio-button/web/ReactTailwind.tsx", "html": "components/radio-button/web/index.html", "native": "components/radio-button/mobile/ReactNative.tsx", "compose": "components/radio-button/android/AndroidCompose.kt", "swiftui": "components/radio-button/apple/SwiftUI.swift", "winui": "components/radio-button/windows/WinUI.xaml", "flutter": "components/radio-button/cross-platform/Flutter.dart" }, "figma": { "preview": "components/radio-button/figma/preview.svg", "tokens": "components/radio-button/figma/tokens.tokens.json", "spec": "components/radio-button/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "radio-button", "ラジオボタン", "Radio Button" ], "official": [], "aliases": [ "単一選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ] } }, { "id": "radio-group", "ja": "ラジオグループ", "en": "Radio Group", "aliases": [ "単一選択グループ" ], "names": { "canonical": { "ja": "ラジオグループ", "en": "Radio Group", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "単一選択グループ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ラジオグループ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Radio Group", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "単一選択グループ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "相互排他的なラジオ項目のまとまり。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "single", "not-applicable" ], "semantics": { "element": "div", "role": "radiogroup", "inputType": "radio", "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Arrow keys: 同じグループ内を移動", "Space: 選択" ], "accessibility": [ "必要な場合は role=\"radiogroup\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "相互排他的なラジオ項目のまとまり。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Radio Groupは「相互排他的なラジオ項目のまとまり。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "listbox", "date-picker", "date-range-picker", "time-picker" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Radio Group" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Radio Group" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Radio Group" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Radio Group" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Radio Group" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Radio Group" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Radio Group" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=radio-group", "implementations": { "react": "components/radio-group/web/ReactTailwind.tsx", "html": "components/radio-group/web/index.html", "native": "components/radio-group/mobile/ReactNative.tsx", "compose": "components/radio-group/android/AndroidCompose.kt", "swiftui": "components/radio-group/apple/SwiftUI.swift", "winui": "components/radio-group/windows/WinUI.xaml", "flutter": "components/radio-group/cross-platform/Flutter.dart" }, "figma": { "preview": "components/radio-group/figma/preview.svg", "tokens": "components/radio-group/figma/tokens.tokens.json", "spec": "components/radio-group/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "radio-group", "ラジオグループ", "Radio Group" ], "official": [], "aliases": [ "単一選択グループ" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "single", "not-applicable" ] } }, { "id": "switch", "ja": "スイッチ", "en": "Switch", "aliases": [ "トグルスイッチ", "Toggle" ], "names": { "canonical": { "ja": "スイッチ", "en": "Switch", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "トグルスイッチ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Toggle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スイッチ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Switch", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "トグルスイッチ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Toggle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "設定を即時にオン・オフする入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": "switch", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Space: オン／オフを切り替え" ], "accessibility": [ "必要な場合は role=\"switch\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "設定を即時にオン・オフする入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Switchは「設定を即時にオン・オフする入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Switch" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Switch" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Switch" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Switch" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Switch" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Switch" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Switch" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=switch", "implementations": { "react": "components/switch/web/ReactTailwind.tsx", "html": "components/switch/web/index.html", "native": "components/switch/mobile/ReactNative.tsx", "compose": "components/switch/android/AndroidCompose.kt", "swiftui": "components/switch/apple/SwiftUI.swift", "winui": "components/switch/windows/WinUI.xaml", "flutter": "components/switch/cross-platform/Flutter.dart" }, "figma": { "preview": "components/switch/figma/preview.svg", "tokens": "components/switch/figma/tokens.tokens.json", "spec": "components/switch/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "switch", "スイッチ", "Switch" ], "official": [], "aliases": [ "トグルスイッチ", "Toggle" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "select", "ja": "セレクト", "en": "Select", "aliases": [ "プルダウン", "ドロップダウン", "Select Box" ], "names": { "canonical": { "ja": "セレクト", "en": "Select", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "プルダウン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ドロップダウン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Select Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "セレクト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Select", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "プルダウン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ドロップダウン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Select Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "候補一覧から1つの値を選ぶ入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ], "semantics": { "element": "select", "role": null, "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "候補一覧から1つの値を選ぶ入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Selectは「候補一覧から1つの値を選ぶ入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "radio-button", "rating-input", "rating-scale", "form-label" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Select" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Select" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Select" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Select" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Select" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Select" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Select" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=select", "implementations": { "react": "components/select/web/ReactTailwind.tsx", "html": "components/select/web/index.html", "native": "components/select/mobile/ReactNative.tsx", "compose": "components/select/android/AndroidCompose.kt", "swiftui": "components/select/apple/SwiftUI.swift", "winui": "components/select/windows/WinUI.xaml", "flutter": "components/select/cross-platform/Flutter.dart" }, "figma": { "preview": "components/select/figma/preview.svg", "tokens": "components/select/figma/tokens.tokens.json", "spec": "components/select/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "select", "セレクト", "Select" ], "official": [], "aliases": [ "プルダウン", "ドロップダウン", "Select Box" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ] } }, { "id": "listbox", "ja": "リストボックス", "en": "Listbox", "aliases": [ "Selection List", "List Box" ], "names": { "canonical": { "ja": "リストボックス", "en": "Listbox", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Selection List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "List Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "リストボックス", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Listbox", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Selection List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "List Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "選択可能な候補を常時またはポップアップで表示する。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "single", "not-applicable" ], "semantics": { "element": "div", "role": "listbox", "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"listbox\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "選択可能な候補を常時またはポップアップで表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Listboxは「選択可能な候補を常時またはポップアップで表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "radio-group", "date-picker", "date-range-picker", "time-picker" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Listbox" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Listbox" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Listbox" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Listbox" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Listbox" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Listbox" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Listbox" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=listbox", "implementations": { "react": "components/listbox/web/ReactTailwind.tsx", "html": "components/listbox/web/index.html", "native": "components/listbox/mobile/ReactNative.tsx", "compose": "components/listbox/android/AndroidCompose.kt", "swiftui": "components/listbox/apple/SwiftUI.swift", "winui": "components/listbox/windows/WinUI.xaml", "flutter": "components/listbox/cross-platform/Flutter.dart" }, "figma": { "preview": "components/listbox/figma/preview.svg", "tokens": "components/listbox/figma/tokens.tokens.json", "spec": "components/listbox/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "listbox", "リストボックス", "Listbox" ], "official": [], "aliases": [ "Selection List", "List Box" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "single", "not-applicable" ] } }, { "id": "multi-select", "ja": "複数選択セレクト", "en": "Multi-select", "aliases": [ "Multi Select" ], "names": { "canonical": { "ja": "複数選択セレクト", "en": "Multi-select", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Multi Select", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "複数選択セレクト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Multi-select", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Multi Select", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "候補一覧から複数の値を選ぶ入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "multiple", "not-applicable" ], "semantics": { "element": "div", "role": "listbox", "inputType": null, "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"listbox\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "候補一覧から複数の値を選ぶ入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Multi-selectは「候補一覧から複数の値を選ぶ入力。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "checkbox-group", "transfer-list", "date-picker", "date-range-picker" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Multi-select" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Multi-select" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Multi-select" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Multi-select" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Multi-select" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Multi-select" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Multi-select" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=multi-select", "implementations": { "react": "components/multi-select/web/ReactTailwind.tsx", "html": "components/multi-select/web/index.html", "native": "components/multi-select/mobile/ReactNative.tsx", "compose": "components/multi-select/android/AndroidCompose.kt", "swiftui": "components/multi-select/apple/SwiftUI.swift", "winui": "components/multi-select/windows/WinUI.xaml", "flutter": "components/multi-select/cross-platform/Flutter.dart" }, "figma": { "preview": "components/multi-select/figma/preview.svg", "tokens": "components/multi-select/figma/tokens.tokens.json", "spec": "components/multi-select/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "multi-select", "複数選択セレクト", "Multi-select" ], "official": [], "aliases": [ "Multi Select" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "multiple", "not-applicable" ] } }, { "id": "transfer-list", "ja": "トランスファーリスト", "en": "Transfer List", "aliases": [ "Dual Listbox", "Shuttle" ], "names": { "canonical": { "ja": "トランスファーリスト", "en": "Transfer List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Dual Listbox", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Shuttle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "トランスファーリスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Transfer List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dual Listbox", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Shuttle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "2つの一覧間で選択項目を移動する複数選択UI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "multiple", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "2つの一覧間で選択項目を移動する複数選択UI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Transfer Listは「2つの一覧間で選択項目を移動する複数選択UI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "checkbox-group", "multi-select", "date-picker", "date-range-picker" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Transfer List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Transfer List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Transfer List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Transfer List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Transfer List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Transfer List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Transfer List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=transfer-list", "implementations": { "react": "components/transfer-list/web/ReactTailwind.tsx", "html": "components/transfer-list/web/index.html", "native": "components/transfer-list/mobile/ReactNative.tsx", "compose": "components/transfer-list/android/AndroidCompose.kt", "swiftui": "components/transfer-list/apple/SwiftUI.swift", "winui": "components/transfer-list/windows/WinUI.xaml", "flutter": "components/transfer-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/transfer-list/figma/preview.svg", "tokens": "components/transfer-list/figma/tokens.tokens.json", "spec": "components/transfer-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "transfer-list", "トランスファーリスト", "Transfer List" ], "official": [], "aliases": [ "Dual Listbox", "Shuttle" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "multiple", "not-applicable" ] } }, { "id": "combobox", "ja": "コンボボックス", "en": "Combobox", "aliases": [ "入力付き選択" ], "names": { "canonical": { "ja": "コンボボックス", "en": "Combobox", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "入力付き選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コンボボックス", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Combobox", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "入力付き選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "文字入力と候補一覧の選択を組み合わせた入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": "combobox", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "ArrowDown: 候補を開いて移動", "Enter: 候補を確定", "Escape: 候補を閉じる" ], "accessibility": [ "必要な場合は role=\"combobox\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "文字入力と候補一覧の選択を組み合わせた入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Comboboxは「文字入力と候補一覧の選択を組み合わせた入力。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "date-range-picker", "time-picker", "checkbox-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Combobox" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Combobox" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Combobox" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Combobox" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Combobox" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Combobox" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Combobox" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=combobox", "implementations": { "react": "components/combobox/web/ReactTailwind.tsx", "html": "components/combobox/web/index.html", "native": "components/combobox/mobile/ReactNative.tsx", "compose": "components/combobox/android/AndroidCompose.kt", "swiftui": "components/combobox/apple/SwiftUI.swift", "winui": "components/combobox/windows/WinUI.xaml", "flutter": "components/combobox/cross-platform/Flutter.dart" }, "figma": { "preview": "components/combobox/figma/preview.svg", "tokens": "components/combobox/figma/tokens.tokens.json", "spec": "components/combobox/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "combobox", "コンボボックス", "Combobox" ], "official": [], "aliases": [ "入力付き選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "autocomplete", "ja": "オートコンプリート", "en": "Autocomplete", "aliases": [ "サジェスト", "Predictive Input" ], "names": { "canonical": { "ja": "オートコンプリート", "en": "Autocomplete", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "サジェスト", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Predictive Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "オートコンプリート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Autocomplete", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "サジェスト", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Predictive Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "入力内容に応じて候補を絞り込む入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": "combobox", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "ArrowDown: 候補を開いて移動", "Enter: 候補を確定", "Escape: 候補を閉じる" ], "accessibility": [ "必要な場合は role=\"combobox\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "入力内容に応じて候補を絞り込む入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Autocompleteは「入力内容に応じて候補を絞り込む入力。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "date-range-picker", "time-picker", "checkbox-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Autocomplete" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Autocomplete" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Autocomplete" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Autocomplete" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Autocomplete" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Autocomplete" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Autocomplete" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=autocomplete", "implementations": { "react": "components/autocomplete/web/ReactTailwind.tsx", "html": "components/autocomplete/web/index.html", "native": "components/autocomplete/mobile/ReactNative.tsx", "compose": "components/autocomplete/android/AndroidCompose.kt", "swiftui": "components/autocomplete/apple/SwiftUI.swift", "winui": "components/autocomplete/windows/WinUI.xaml", "flutter": "components/autocomplete/cross-platform/Flutter.dart" }, "figma": { "preview": "components/autocomplete/figma/preview.svg", "tokens": "components/autocomplete/figma/tokens.tokens.json", "spec": "components/autocomplete/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "autocomplete", "オートコンプリート", "Autocomplete" ], "official": [], "aliases": [ "サジェスト", "Predictive Input" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "slider", "ja": "スライダー", "en": "Slider", "aliases": [ "レンジ入力" ], "names": { "canonical": { "ja": "スライダー", "en": "Slider", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "レンジ入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スライダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Slider", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "レンジ入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "連続範囲から1つの値をつまみで選ぶ入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "range", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "連続範囲から1つの値をつまみで選ぶ入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Sliderは「連続範囲から1つの値をつまみで選ぶ入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Slider" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Slider" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Slider" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Slider" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Slider" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Slider" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Slider" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=slider", "implementations": { "react": "components/slider/web/ReactTailwind.tsx", "html": "components/slider/web/index.html", "native": "components/slider/mobile/ReactNative.tsx", "compose": "components/slider/android/AndroidCompose.kt", "swiftui": "components/slider/apple/SwiftUI.swift", "winui": "components/slider/windows/WinUI.xaml", "flutter": "components/slider/cross-platform/Flutter.dart" }, "figma": { "preview": "components/slider/figma/preview.svg", "tokens": "components/slider/figma/tokens.tokens.json", "spec": "components/slider/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "slider", "スライダー", "Slider" ], "official": [], "aliases": [ "レンジ入力" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "range-slider", "ja": "範囲スライダー", "en": "Range Slider", "aliases": [ "Dual Range" ], "names": { "canonical": { "ja": "範囲スライダー", "en": "Range Slider", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Dual Range", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "範囲スライダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Range Slider", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dual Range", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "最小値と最大値を2つのつまみで指定する。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "range", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "最小値と最大値を2つのつまみで指定する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Range Sliderは「最小値と最大値を2つのつまみで指定する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Range Slider" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Range Slider" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Range Slider" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Range Slider" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Range Slider" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Range Slider" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Range Slider" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=range-slider", "implementations": { "react": "components/range-slider/web/ReactTailwind.tsx", "html": "components/range-slider/web/index.html", "native": "components/range-slider/mobile/ReactNative.tsx", "compose": "components/range-slider/android/AndroidCompose.kt", "swiftui": "components/range-slider/apple/SwiftUI.swift", "winui": "components/range-slider/windows/WinUI.xaml", "flutter": "components/range-slider/cross-platform/Flutter.dart" }, "figma": { "preview": "components/range-slider/figma/preview.svg", "tokens": "components/range-slider/figma/tokens.tokens.json", "spec": "components/range-slider/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "range-slider", "範囲スライダー", "Range Slider" ], "official": [], "aliases": [ "Dual Range" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "rating-input", "ja": "評価入力", "en": "Rating Input", "aliases": [ "星評価", "Star Rating" ], "names": { "canonical": { "ja": "評価入力", "en": "Rating Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "星評価", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Star Rating", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "評価入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Rating Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "星評価", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Star Rating", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "星などで段階評価を入力するUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ], "semantics": { "element": "input", "role": "radiogroup", "inputType": "radio", "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Arrow keys: 同じグループ内を移動", "Space: 選択" ], "accessibility": [ "必要な場合は role=\"radiogroup\" と対応するaria状態を同期する。", "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "星などで段階評価を入力するUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Rating Inputは「星などで段階評価を入力するUI。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "radio-button", "select", "rating-scale", "form-label" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Rating Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Rating Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Rating Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Rating Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Rating Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Rating Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Rating Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=rating-input", "implementations": { "react": "components/rating-input/web/ReactTailwind.tsx", "html": "components/rating-input/web/index.html", "native": "components/rating-input/mobile/ReactNative.tsx", "compose": "components/rating-input/android/AndroidCompose.kt", "swiftui": "components/rating-input/apple/SwiftUI.swift", "winui": "components/rating-input/windows/WinUI.xaml", "flutter": "components/rating-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/rating-input/figma/preview.svg", "tokens": "components/rating-input/figma/tokens.tokens.json", "spec": "components/rating-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "rating-input", "評価入力", "Rating Input" ], "official": [], "aliases": [ "星評価", "Star Rating" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ] } }, { "id": "otp-input", "ja": "OTP入力", "en": "One-time Password Input", "aliases": [ "PIN入力", "認証コード" ], "names": { "canonical": { "ja": "OTP入力", "en": "One-time Password Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "PIN入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "認証コード", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "OTP入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "One-time Password Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "PIN入力", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "認証コード", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "確認コードを桁ごとに入力するUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "text", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "確認コードを桁ごとに入力するUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "One-time Password Inputは「確認コードを桁ごとに入力するUI。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "One-time Password Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "One-time Password Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "One-time Password Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "One-time Password Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "One-time Password Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "One-time Password Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "One-time Password Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=otp-input", "implementations": { "react": "components/otp-input/web/ReactTailwind.tsx", "html": "components/otp-input/web/index.html", "native": "components/otp-input/mobile/ReactNative.tsx", "compose": "components/otp-input/android/AndroidCompose.kt", "swiftui": "components/otp-input/apple/SwiftUI.swift", "winui": "components/otp-input/windows/WinUI.xaml", "flutter": "components/otp-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/otp-input/figma/preview.svg", "tokens": "components/otp-input/figma/tokens.tokens.json", "spec": "components/otp-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "otp-input", "OTP入力", "One-time Password Input" ], "official": [], "aliases": [ "PIN入力", "認証コード" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "tags-input", "ja": "タグ入力", "en": "Tags Input", "aliases": [ "Token Input", "Chip Input" ], "names": { "canonical": { "ja": "タグ入力", "en": "Tags Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Token Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Chip Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "タグ入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tags Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Token Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Chip Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "複数の短い値をタグとして追加・削除する入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "複数の短い値をタグとして追加・削除する入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tags Inputは「複数の短い値をタグとして追加・削除する入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "checkbox", "form-label", "helper-text", "form-field" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tags Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tags Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tags Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tags Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tags Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tags Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tags Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tags-input", "implementations": { "react": "components/tags-input/web/ReactTailwind.tsx", "html": "components/tags-input/web/index.html", "native": "components/tags-input/mobile/ReactNative.tsx", "compose": "components/tags-input/android/AndroidCompose.kt", "swiftui": "components/tags-input/apple/SwiftUI.swift", "winui": "components/tags-input/windows/WinUI.xaml", "flutter": "components/tags-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tags-input/figma/preview.svg", "tokens": "components/tags-input/figma/tokens.tokens.json", "spec": "components/tags-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tags-input", "タグ入力", "Tags Input" ], "official": [], "aliases": [ "Token Input", "Chip Input" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ] } }, { "id": "quantity-stepper", "ja": "スピンボタン", "en": "Spinbutton", "aliases": [ "数値ステッパー", "Numeric Stepper", "Stepper Input", "カウンター", "Quantity Selector", "Quantity Picker", "購入数量選択" ], "names": { "canonical": { "ja": "スピンボタン", "en": "Spinbutton", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "数値ステッパー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Numeric Stepper", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Stepper Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "カウンター", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Quantity Selector", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Quantity Picker", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "購入数量選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スピンボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Spinbutton", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "数値ステッパー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Numeric Stepper", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Stepper Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "カウンター", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Quantity Selector", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Quantity Picker", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "購入数量選択", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 9 }, "description": "増減ボタンまたはキー操作で数値を1段階ずつ変える入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "増減ボタンまたはキー操作で数値を1段階ずつ変える入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Spinbuttonは「増減ボタンまたはキー操作で数値を1段階ずつ変える入力。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "form-label", "helper-text", "form-field", "fieldset" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Spinbutton" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Spinbutton" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Spinbutton" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Spinbutton" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Spinbutton" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Spinbutton" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Spinbutton" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=quantity-stepper", "implementations": { "react": "components/quantity-stepper/web/ReactTailwind.tsx", "html": "components/quantity-stepper/web/index.html", "native": "components/quantity-stepper/mobile/ReactNative.tsx", "compose": "components/quantity-stepper/android/AndroidCompose.kt", "swiftui": "components/quantity-stepper/apple/SwiftUI.swift", "winui": "components/quantity-stepper/windows/WinUI.xaml", "flutter": "components/quantity-stepper/cross-platform/Flutter.dart" }, "figma": { "preview": "components/quantity-stepper/figma/preview.svg", "tokens": "components/quantity-stepper/figma/tokens.tokens.json", "spec": "components/quantity-stepper/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "quantity-stepper", "スピンボタン", "Spinbutton" ], "official": [], "aliases": [ "数値ステッパー", "Numeric Stepper", "Stepper Input", "カウンター", "Quantity Selector", "Quantity Picker", "購入数量選択" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "rating-scale", "ja": "段階評価スケール", "en": "Rating Scale", "aliases": [ "Likert Scale", "リッカート尺度" ], "names": { "canonical": { "ja": "段階評価スケール", "en": "Rating Scale", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Likert Scale", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "リッカート尺度", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "段階評価スケール", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Rating Scale", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Likert Scale", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "リッカート尺度", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "1〜5などの離散値から評価を選ぶUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ], "semantics": { "element": "div", "role": "radiogroup", "inputType": "radio", "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Arrow keys: 同じグループ内を移動", "Space: 選択" ], "accessibility": [ "必要な場合は role=\"radiogroup\" と対応するaria状態を同期する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "1〜5などの離散値から評価を選ぶUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Rating Scaleは「1〜5などの離散値から評価を選ぶUI。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "radio-button", "select", "rating-input", "form-label" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Rating Scale" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Rating Scale" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Rating Scale" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Rating Scale" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Rating Scale" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Rating Scale" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Rating Scale" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=rating-scale", "implementations": { "react": "components/rating-scale/web/ReactTailwind.tsx", "html": "components/rating-scale/web/index.html", "native": "components/rating-scale/mobile/ReactNative.tsx", "compose": "components/rating-scale/android/AndroidCompose.kt", "swiftui": "components/rating-scale/apple/SwiftUI.swift", "winui": "components/rating-scale/windows/WinUI.xaml", "flutter": "components/rating-scale/cross-platform/Flutter.dart" }, "figma": { "preview": "components/rating-scale/figma/preview.svg", "tokens": "components/rating-scale/figma/tokens.tokens.json", "spec": "components/rating-scale/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "rating-scale", "段階評価スケール", "Rating Scale" ], "official": [], "aliases": [ "Likert Scale", "リッカート尺度" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "component", "single", "not-applicable" ] } }, { "id": "rich-text-editor", "ja": "リッチテキストエディター", "en": "Rich Text Editor", "aliases": [ "WYSIWYG Editor" ], "names": { "canonical": { "ja": "リッチテキストエディター", "en": "Rich Text Editor", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "WYSIWYG Editor", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "リッチテキストエディター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Rich Text Editor", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "WYSIWYG Editor", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "見出し・太字・リンクなど書式付き文章を編集するUI。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "見出し・太字・リンクなど書式付き文章を編集するUI。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Rich Text Editorは「見出し・太字・リンクなど書式付き文章を編集するUI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "date-range-picker", "time-picker", "checkbox-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Rich Text Editor" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Rich Text Editor" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Rich Text Editor" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Rich Text Editor" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Rich Text Editor" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Rich Text Editor" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Rich Text Editor" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=rich-text-editor", "implementations": { "react": "components/rich-text-editor/web/ReactTailwind.tsx", "html": "components/rich-text-editor/web/index.html", "native": "components/rich-text-editor/mobile/ReactNative.tsx", "compose": "components/rich-text-editor/android/AndroidCompose.kt", "swiftui": "components/rich-text-editor/apple/SwiftUI.swift", "winui": "components/rich-text-editor/windows/WinUI.xaml", "flutter": "components/rich-text-editor/cross-platform/Flutter.dart" }, "figma": { "preview": "components/rich-text-editor/figma/preview.svg", "tokens": "components/rich-text-editor/figma/tokens.tokens.json", "spec": "components/rich-text-editor/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "rich-text-editor", "リッチテキストエディター", "Rich Text Editor" ], "official": [], "aliases": [ "WYSIWYG Editor" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "code-editor", "ja": "コードエディター", "en": "Code Editor", "aliases": [ "Source Editor" ], "names": { "canonical": { "ja": "コードエディター", "en": "Code Editor", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Source Editor", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コードエディター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Code Editor", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Source Editor", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "構文表示や行番号を備えたソースコード入力。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "textarea", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "構文表示や行番号を備えたソースコード入力。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Code Editorは「構文表示や行番号を備えたソースコード入力。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "date-range-picker", "time-picker", "checkbox-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Code Editor" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Code Editor" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Code Editor" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Code Editor" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Code Editor" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Code Editor" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Code Editor" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=code-editor", "implementations": { "react": "components/code-editor/web/ReactTailwind.tsx", "html": "components/code-editor/web/index.html", "native": "components/code-editor/mobile/ReactNative.tsx", "compose": "components/code-editor/android/AndroidCompose.kt", "swiftui": "components/code-editor/apple/SwiftUI.swift", "winui": "components/code-editor/windows/WinUI.xaml", "flutter": "components/code-editor/cross-platform/Flutter.dart" }, "figma": { "preview": "components/code-editor/figma/preview.svg", "tokens": "components/code-editor/figma/tokens.tokens.json", "spec": "components/code-editor/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "code-editor", "コードエディター", "Code Editor" ], "official": [], "aliases": [ "Source Editor" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "signature-pad", "ja": "署名パッド", "en": "Signature Pad", "aliases": [ "電子署名", "Canvas Signature" ], "names": { "canonical": { "ja": "署名パッド", "en": "Signature Pad", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "電子署名", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Canvas Signature", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "署名パッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Signature Pad", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "電子署名", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Canvas Signature", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "指やポインターで手書き署名を入力する領域。", "category": "forms", "categoryLabel": { "ja": "フォーム・入力", "en": "Forms & Inputs" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": "text", "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "44×44px以上を目安にタップ領域を確保し、ソフトウェアキーボードで隠れない配置にします。", "useWhen": [ "指やポインターで手書き署名を入力する領域。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Signature Padは「指やポインターで手書き署名を入力する領域。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "date-picker", "date-range-picker", "time-picker", "checkbox-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Signature Pad" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Signature Pad" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Signature Pad" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Signature Pad" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Signature Pad" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Signature Pad" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Signature Pad" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=signature-pad", "implementations": { "react": "components/signature-pad/web/ReactTailwind.tsx", "html": "components/signature-pad/web/index.html", "native": "components/signature-pad/mobile/ReactNative.tsx", "compose": "components/signature-pad/android/AndroidCompose.kt", "swiftui": "components/signature-pad/apple/SwiftUI.swift", "winui": "components/signature-pad/windows/WinUI.xaml", "flutter": "components/signature-pad/cross-platform/Flutter.dart" }, "figma": { "preview": "components/signature-pad/figma/preview.svg", "tokens": "components/signature-pad/figma/tokens.tokens.json", "spec": "components/signature-pad/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "signature-pad", "署名パッド", "Signature Pad" ], "official": [], "aliases": [ "電子署名", "Canvas Signature" ], "relatedNames": [], "facets": [ "情報を入力・選択", "フォーム・入力", "Forms & Inputs", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "global-header", "ja": "グローバルヘッダー", "en": "Global Header", "aliases": [ "サイトヘッダー" ], "names": { "canonical": { "ja": "グローバルヘッダー", "en": "Global Header", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "サイトヘッダー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "グローバルヘッダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Global Header", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "サイトヘッダー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "サイト全体で共通のロゴ・主要ナビを置く上部領域。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "component", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "component", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "サイト全体で共通のロゴ・主要ナビを置く上部領域。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Global Headerは「サイト全体で共通のロゴ・主要ナビを置く上部領域。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "top-app-bar", "page-header", "menubar", "footer-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Global Header" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Global Header" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Global Header" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Global Header" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Global Header" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Global Header" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Global Header" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=global-header", "implementations": { "react": "components/global-header/web/ReactTailwind.tsx", "html": "components/global-header/web/index.html", "native": "components/global-header/mobile/ReactNative.tsx", "compose": "components/global-header/android/AndroidCompose.kt", "swiftui": "components/global-header/apple/SwiftUI.swift", "winui": "components/global-header/windows/WinUI.xaml", "flutter": "components/global-header/cross-platform/Flutter.dart" }, "figma": { "preview": "components/global-header/figma/preview.svg", "tokens": "components/global-header/figma/tokens.tokens.json", "spec": "components/global-header/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "global-header", "グローバルヘッダー", "Global Header" ], "official": [], "aliases": [ "サイトヘッダー" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "component", "none", "not-applicable" ] } }, { "id": "top-app-bar", "ja": "トップアプリバー", "en": "Top App Bar", "aliases": [ "App Header", "Navigation Bar" ], "names": { "canonical": { "ja": "トップアプリバー", "en": "Top App Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "App Header", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Navigation Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "トップアプリバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Top App Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "App Header", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Navigation Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "アプリ画面のタイトルと主要操作を置く上部バー。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "component", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "component", "none", "not-applicable" ], "semantics": { "element": "header", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "アプリ画面のタイトルと主要操作を置く上部バー。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Top App Barは「アプリ画面のタイトルと主要操作を置く上部バー。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "global-header", "page-header", "menubar", "footer-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Top App Bar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Top App Bar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Top App Bar" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Top App Bar" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Top App Bar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Top App Bar" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Top App Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=top-app-bar", "implementations": { "react": "components/top-app-bar/web/ReactTailwind.tsx", "html": "components/top-app-bar/web/index.html", "native": "components/top-app-bar/mobile/ReactNative.tsx", "compose": "components/top-app-bar/android/AndroidCompose.kt", "swiftui": "components/top-app-bar/apple/SwiftUI.swift", "winui": "components/top-app-bar/windows/WinUI.xaml", "flutter": "components/top-app-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/top-app-bar/figma/preview.svg", "tokens": "components/top-app-bar/figma/tokens.tokens.json", "spec": "components/top-app-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "top-app-bar", "トップアプリバー", "Top App Bar" ], "official": [], "aliases": [ "App Header", "Navigation Bar" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "component", "none", "not-applicable" ] } }, { "id": "page-header", "ja": "ページヘッダー", "en": "Page Header", "aliases": [ "Title Bar", "Page Title Area" ], "names": { "canonical": { "ja": "ページヘッダー", "en": "Page Header", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Title Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Page Title Area", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ページヘッダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Page Header", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Title Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Page Title Area", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "ページタイトル・現在位置・主要操作をまとめる上部領域。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "component", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "component", "none", "not-applicable" ], "semantics": { "element": "header", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ページタイトル・現在位置・主要操作をまとめる上部領域。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Page Headerは「ページタイトル・現在位置・主要操作をまとめる上部領域。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "global-header", "top-app-bar", "menubar", "footer-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Page Header" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Page Header" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Page Header" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Page Header" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Page Header" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Page Header" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Page Header" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=page-header", "implementations": { "react": "components/page-header/web/ReactTailwind.tsx", "html": "components/page-header/web/index.html", "native": "components/page-header/mobile/ReactNative.tsx", "compose": "components/page-header/android/AndroidCompose.kt", "swiftui": "components/page-header/apple/SwiftUI.swift", "winui": "components/page-header/windows/WinUI.xaml", "flutter": "components/page-header/cross-platform/Flutter.dart" }, "figma": { "preview": "components/page-header/figma/preview.svg", "tokens": "components/page-header/figma/tokens.tokens.json", "spec": "components/page-header/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "page-header", "ページヘッダー", "Page Header" ], "official": [], "aliases": [ "Title Bar", "Page Title Area" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "component", "none", "not-applicable" ] } }, { "id": "navigation-menu", "ja": "ナビゲーションメニュー", "en": "Navigation Menu", "aliases": [ "メインメニュー" ], "names": { "canonical": { "ja": "ナビゲーションメニュー", "en": "Navigation Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "メインメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ナビゲーションメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Navigation Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "メインメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "主要なページへのリンクをまとめたメニュー。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": "navigation", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"navigation\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "主要なページへのリンクをまとめたメニュー。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Navigation Menuは「主要なページへのリンクをまとめたメニュー。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "tab-bar", "vertical-tabs", "breadcrumbs", "pagination" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Navigation Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Navigation Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Navigation Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Navigation Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Navigation Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Navigation Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Navigation Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=navigation-menu", "implementations": { "react": "components/navigation-menu/web/ReactTailwind.tsx", "html": "components/navigation-menu/web/index.html", "native": "components/navigation-menu/mobile/ReactNative.tsx", "compose": "components/navigation-menu/android/AndroidCompose.kt", "swiftui": "components/navigation-menu/apple/SwiftUI.swift", "winui": "components/navigation-menu/windows/WinUI.xaml", "flutter": "components/navigation-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/navigation-menu/figma/preview.svg", "tokens": "components/navigation-menu/figma/tokens.tokens.json", "spec": "components/navigation-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "navigation-menu", "ナビゲーションメニュー", "Navigation Menu" ], "official": [], "aliases": [ "メインメニュー" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "menubar", "ja": "メニューバー", "en": "Menubar", "aliases": [ "Menu Bar", "Application Menu" ], "names": { "canonical": { "ja": "メニューバー", "en": "Menubar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Menu Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Application Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メニューバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Menubar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Menu Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Application Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "階層型メニューのトップレベルを横並びにするアプリ操作領域。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": "menubar", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "トリガー", "メニューコンテナ", "メニュー項目" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Arrow keys: メニュー項目を移動", "Escape: メニューを閉じる" ], "accessibility": [ "必要な場合は role=\"menubar\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "階層型メニューのトップレベルを横並びにするアプリ操作領域。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Menubarは「階層型メニューのトップレベルを横並びにするアプリ操作領域。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "global-header", "top-app-bar", "page-header", "navigation-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Menubar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Menubar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Menubar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Menubar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Menubar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Menubar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Menubar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=menubar", "implementations": { "react": "components/menubar/web/ReactTailwind.tsx", "html": "components/menubar/web/index.html", "native": "components/menubar/mobile/ReactNative.tsx", "compose": "components/menubar/android/AndroidCompose.kt", "swiftui": "components/menubar/apple/SwiftUI.swift", "winui": "components/menubar/windows/WinUI.xaml", "flutter": "components/menubar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/menubar/figma/preview.svg", "tokens": "components/menubar/figma/tokens.tokens.json", "spec": "components/menubar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "menubar", "メニューバー", "Menubar" ], "official": [], "aliases": [ "Menu Bar", "Application Menu" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "画面上部", "Top", "composite-pattern", "none", "not-applicable" ] } }, { "id": "sidebar-navigation", "ja": "サイドバーナビ", "en": "Sidebar Navigation", "aliases": [ "サイドメニュー" ], "names": { "canonical": { "ja": "サイドバーナビ", "en": "Sidebar Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "サイドメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "サイドバーナビ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sidebar Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "サイドメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "画面の横に常設する縦型ナビゲーション。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "画面の横に常設する縦型ナビゲーション。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Sidebar Navigationは「画面の横に常設する縦型ナビゲーション。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-drawer", "navigation-rail", "table-of-contents", "tree-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Sidebar Navigation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Sidebar Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Sidebar Navigation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Sidebar Navigation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Sidebar Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Sidebar Navigation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Sidebar Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=sidebar-navigation", "implementations": { "react": "components/sidebar-navigation/web/ReactTailwind.tsx", "html": "components/sidebar-navigation/web/index.html", "native": "components/sidebar-navigation/mobile/ReactNative.tsx", "compose": "components/sidebar-navigation/android/AndroidCompose.kt", "swiftui": "components/sidebar-navigation/apple/SwiftUI.swift", "winui": "components/sidebar-navigation/windows/WinUI.xaml", "flutter": "components/sidebar-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/sidebar-navigation/figma/preview.svg", "tokens": "components/sidebar-navigation/figma/tokens.tokens.json", "spec": "components/sidebar-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "sidebar-navigation", "サイドバーナビ", "Sidebar Navigation" ], "official": [], "aliases": [ "サイドメニュー" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "navigation-drawer", "ja": "ナビゲーションドロワー", "en": "Navigation Drawer", "aliases": [ "Drawer Nav" ], "names": { "canonical": { "ja": "ナビゲーションドロワー", "en": "Navigation Drawer", "status": "official-in-named-system" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [ { "value": "Navigation Drawer", "language": "en", "type": "official", "system": "Material Design 3", "equivalence": "exact", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } }, { "value": "Standard Navigation Drawer", "language": "en", "type": "official-variant", "system": "Material Design 3", "equivalence": "variant", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } }, { "value": "Modal Navigation Drawer", "language": "en", "type": "official-variant", "system": "Material Design 3", "equivalence": "variant", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } } ], "aliases": [ { "value": "Drawer Nav", "language": "en", "type": "common", "system": "general", "equivalence": "contextual", "source": null }, { "value": "ハンバーガーメニュー", "language": "ja", "type": "common-misnomer", "system": "general", "equivalence": "trigger-only", "source": null } ], "related": [ { "value": "ハンバーガーメニュー", "language": "ja", "type": "common-misnomer", "system": "general", "equivalence": "trigger-only", "source": null } ], "entries": [ { "value": "ナビゲーションドロワー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Navigation Drawer", "language": "en", "type": "official", "system": "Material Design 3", "equivalence": "exact", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } }, { "value": "Drawer Nav", "language": "en", "type": "common", "system": "general", "equivalence": "contextual", "source": null }, { "value": "Standard Navigation Drawer", "language": "en", "type": "official-variant", "system": "Material Design 3", "equivalence": "variant", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } }, { "value": "Modal Navigation Drawer", "language": "en", "type": "official-variant", "system": "Material Design 3", "equivalence": "variant", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } }, { "value": "ハンバーガーメニュー", "language": "ja", "type": "common-misnomer", "system": "general", "equivalence": "trigger-only", "source": null } ], "distinctions": [ "Navigation Drawerは移動先を提示するナビゲーション部品です。補助情報や編集面を出すSide Sheetとは用途が異なります。", "Hamburger Menuは多くの場合、Drawerを開く三本線のトリガーを指す通称で、パネル本体の正式名ではありません。", "Material 3 Expressiveは2025年5月以降Navigation Drawerを非推奨とし、Expanded Navigation Railを代替として案内しています。" ], "lifecycle": { "status": "not-recommended-in-material-3-expressive", "since": "2025-05", "preferredAlternative": "Expanded Navigation Rail", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 6 }, "description": "必要時に横から現れるナビゲーション領域。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "必要時に横から現れるナビゲーション領域。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Navigation Drawerは「必要時に横から現れるナビゲーション領域。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sidebar-navigation", "navigation-rail", "table-of-contents", "tree-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Navigation Drawer" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Navigation Drawer" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Navigation Drawer" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Navigation Drawer" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Navigation Drawer" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Navigation Drawer" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Navigation Drawer" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=navigation-drawer", "implementations": { "react": "components/navigation-drawer/web/ReactTailwind.tsx", "html": "components/navigation-drawer/web/index.html", "native": "components/navigation-drawer/mobile/ReactNative.tsx", "compose": "components/navigation-drawer/android/AndroidCompose.kt", "swiftui": "components/navigation-drawer/apple/SwiftUI.swift", "winui": "components/navigation-drawer/windows/WinUI.xaml", "flutter": "components/navigation-drawer/cross-platform/Flutter.dart" }, "figma": { "preview": "components/navigation-drawer/figma/preview.svg", "tokens": "components/navigation-drawer/figma/tokens.tokens.json", "spec": "components/navigation-drawer/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "navigation-drawer", "ナビゲーションドロワー", "Navigation Drawer" ], "official": [ "Navigation Drawer", "Standard Navigation Drawer", "Modal Navigation Drawer" ], "aliases": [ "Drawer Nav" ], "relatedNames": [ "ハンバーガーメニュー" ], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "navigation-rail", "ja": "ナビゲーションレール", "en": "Navigation Rail", "aliases": [ "Nav Rail" ], "names": { "canonical": { "ja": "ナビゲーションレール", "en": "Navigation Rail", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Nav Rail", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ナビゲーションレール", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Navigation Rail", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Nav Rail", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "広い画面の端に主要画面の切替先を縦に並べる。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "広い画面の端に主要画面の切替先を縦に並べる。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Navigation Railは「広い画面の端に主要画面の切替先を縦に並べる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sidebar-navigation", "navigation-drawer", "table-of-contents", "tree-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Navigation Rail" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Navigation Rail" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Navigation Rail" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Navigation Rail" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Navigation Rail" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Navigation Rail" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Navigation Rail" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=navigation-rail", "implementations": { "react": "components/navigation-rail/web/ReactTailwind.tsx", "html": "components/navigation-rail/web/index.html", "native": "components/navigation-rail/mobile/ReactNative.tsx", "compose": "components/navigation-rail/android/AndroidCompose.kt", "swiftui": "components/navigation-rail/apple/SwiftUI.swift", "winui": "components/navigation-rail/windows/WinUI.xaml", "flutter": "components/navigation-rail/cross-platform/Flutter.dart" }, "figma": { "preview": "components/navigation-rail/figma/preview.svg", "tokens": "components/navigation-rail/figma/tokens.tokens.json", "spec": "components/navigation-rail/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "navigation-rail", "ナビゲーションレール", "Navigation Rail" ], "official": [], "aliases": [ "Nav Rail" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "bottom-navigation", "ja": "ボトムナビゲーション", "en": "Bottom Navigation", "aliases": [ "下部ナビ", "Mobile Tab Bar", "App Tab Bar" ], "names": { "canonical": { "ja": "ボトムナビゲーション", "en": "Bottom Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "下部ナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Mobile Tab Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "App Tab Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ボトムナビゲーション", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Bottom Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "下部ナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Mobile Tab Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "App Tab Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "モバイル画面下部で主要画面を切り替えるナビ。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "画面下部", "Bottom", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "モバイル画面下部で主要画面を切り替えるナビ。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Bottom Navigationは「モバイル画面下部で主要画面を切り替えるナビ。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "menubar", "sidebar-navigation", "navigation-drawer" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Bottom Navigation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Bottom Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Bottom Navigation" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Bottom Navigation" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Bottom Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Bottom Navigation" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Bottom Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=bottom-navigation", "implementations": { "react": "components/bottom-navigation/web/ReactTailwind.tsx", "html": "components/bottom-navigation/web/index.html", "native": "components/bottom-navigation/mobile/ReactNative.tsx", "compose": "components/bottom-navigation/android/AndroidCompose.kt", "swiftui": "components/bottom-navigation/apple/SwiftUI.swift", "winui": "components/bottom-navigation/windows/WinUI.xaml", "flutter": "components/bottom-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/bottom-navigation/figma/preview.svg", "tokens": "components/bottom-navigation/figma/tokens.tokens.json", "spec": "components/bottom-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "bottom-navigation", "ボトムナビゲーション", "Bottom Navigation" ], "official": [], "aliases": [ "下部ナビ", "Mobile Tab Bar", "App Tab Bar" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "画面下部", "Bottom", "composite-pattern", "none", "not-applicable" ] } }, { "id": "tab-bar", "ja": "タブ", "en": "Tabs", "aliases": [ "Tab List", "Tab Bar" ], "names": { "canonical": { "ja": "タブ", "en": "Tabs", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Tab List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Tab Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "タブ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tabs", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tab List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Tab Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "同一コンテキスト内の並列ビューをタブで切り替える。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "single", "not-applicable" ], "semantics": { "element": "nav", "role": "tablist", "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "タブリスト", "選択タブ", "タブパネル" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Arrow keys: タブ間を移動", "Home / End: 先頭／末尾へ移動" ], "accessibility": [ "必要な場合は role=\"tablist\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "同一コンテキスト内の並列ビューをタブで切り替える。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tabsは「同一コンテキスト内の並列ビューをタブで切り替える。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "vertical-tabs", "navigation-menu", "breadcrumbs", "pagination" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tabs" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tabs" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tabs" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tabs" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tabs" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tabs" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tabs" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tab-bar", "implementations": { "react": "components/tab-bar/web/ReactTailwind.tsx", "html": "components/tab-bar/web/index.html", "native": "components/tab-bar/mobile/ReactNative.tsx", "compose": "components/tab-bar/android/AndroidCompose.kt", "swiftui": "components/tab-bar/apple/SwiftUI.swift", "winui": "components/tab-bar/windows/WinUI.xaml", "flutter": "components/tab-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tab-bar/figma/preview.svg", "tokens": "components/tab-bar/figma/tokens.tokens.json", "spec": "components/tab-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tab-bar", "タブ", "Tabs" ], "official": [], "aliases": [ "Tab List", "Tab Bar" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "single", "not-applicable" ] } }, { "id": "vertical-tabs", "ja": "縦型タブ", "en": "Vertical Tabs", "aliases": [ "Side Tabs" ], "names": { "canonical": { "ja": "縦型タブ", "en": "Vertical Tabs", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Side Tabs", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "縦型タブ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Vertical Tabs", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Side Tabs", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "タブ項目を縦に並べて内容を切り替えるUI。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "single", "not-applicable" ], "semantics": { "element": "nav", "role": "tablist", "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "タブリスト", "選択タブ", "タブパネル" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Arrow keys: タブ間を移動", "Home / End: 先頭／末尾へ移動" ], "accessibility": [ "必要な場合は role=\"tablist\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "タブ項目を縦に並べて内容を切り替えるUI。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Vertical Tabsは「タブ項目を縦に並べて内容を切り替えるUI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "tab-bar", "navigation-menu", "breadcrumbs", "pagination" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Vertical Tabs" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Vertical Tabs" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Vertical Tabs" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Vertical Tabs" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Vertical Tabs" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Vertical Tabs" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Vertical Tabs" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=vertical-tabs", "implementations": { "react": "components/vertical-tabs/web/ReactTailwind.tsx", "html": "components/vertical-tabs/web/index.html", "native": "components/vertical-tabs/mobile/ReactNative.tsx", "compose": "components/vertical-tabs/android/AndroidCompose.kt", "swiftui": "components/vertical-tabs/apple/SwiftUI.swift", "winui": "components/vertical-tabs/windows/WinUI.xaml", "flutter": "components/vertical-tabs/cross-platform/Flutter.dart" }, "figma": { "preview": "components/vertical-tabs/figma/preview.svg", "tokens": "components/vertical-tabs/figma/tokens.tokens.json", "spec": "components/vertical-tabs/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "vertical-tabs", "縦型タブ", "Vertical Tabs" ], "official": [], "aliases": [ "Side Tabs" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "single", "not-applicable" ] } }, { "id": "breadcrumbs", "ja": "パンくずリスト", "en": "Breadcrumbs", "aliases": [ "パンくずナビ" ], "names": { "canonical": { "ja": "パンくずリスト", "en": "Breadcrumbs", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "パンくずナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "パンくずリスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Breadcrumbs", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "パンくずナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "現在位置までの階層をリンクで示す。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "現在位置までの階層をリンクで示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Breadcrumbsは「現在位置までの階層をリンクで示す。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "tab-bar", "vertical-tabs", "pagination" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Breadcrumbs" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Breadcrumbs" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Breadcrumbs" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Breadcrumbs" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Breadcrumbs" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Breadcrumbs" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Breadcrumbs" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=breadcrumbs", "implementations": { "react": "components/breadcrumbs/web/ReactTailwind.tsx", "html": "components/breadcrumbs/web/index.html", "native": "components/breadcrumbs/mobile/ReactNative.tsx", "compose": "components/breadcrumbs/android/AndroidCompose.kt", "swiftui": "components/breadcrumbs/apple/SwiftUI.swift", "winui": "components/breadcrumbs/windows/WinUI.xaml", "flutter": "components/breadcrumbs/cross-platform/Flutter.dart" }, "figma": { "preview": "components/breadcrumbs/figma/preview.svg", "tokens": "components/breadcrumbs/figma/tokens.tokens.json", "spec": "components/breadcrumbs/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "breadcrumbs", "パンくずリスト", "Breadcrumbs" ], "official": [], "aliases": [ "パンくずナビ" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "pagination", "ja": "ページネーション", "en": "Pagination", "aliases": [ "ページ送り" ], "names": { "canonical": { "ja": "ページネーション", "en": "Pagination", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ページ送り", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ページネーション", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pagination", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ページ送り", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "長い一覧を複数ページに分けて移動するUI。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "長い一覧を複数ページに分けて移動するUI。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Paginationは「長い一覧を複数ページに分けて移動するUI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "tab-bar", "vertical-tabs", "breadcrumbs" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Pagination" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Pagination" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Pagination" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Pagination" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Pagination" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Pagination" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Pagination" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=pagination", "implementations": { "react": "components/pagination/web/ReactTailwind.tsx", "html": "components/pagination/web/index.html", "native": "components/pagination/mobile/ReactNative.tsx", "compose": "components/pagination/android/AndroidCompose.kt", "swiftui": "components/pagination/apple/SwiftUI.swift", "winui": "components/pagination/windows/WinUI.xaml", "flutter": "components/pagination/cross-platform/Flutter.dart" }, "figma": { "preview": "components/pagination/figma/preview.svg", "tokens": "components/pagination/figma/tokens.tokens.json", "spec": "components/pagination/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "pagination", "ページネーション", "Pagination" ], "official": [], "aliases": [ "ページ送り" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "stepper", "ja": "ステッパー", "en": "Stepper", "aliases": [ "Wizard Steps", "進捗ナビ" ], "names": { "canonical": { "ja": "ステッパー", "en": "Stepper", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Wizard Steps", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "進捗ナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ステッパー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Stepper", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Wizard Steps", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "進捗ナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "申込や設定の工程と現在位置を示す。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "申込や設定の工程と現在位置を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Stepperは「申込や設定の工程と現在位置を示す。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "tab-bar", "vertical-tabs", "breadcrumbs" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Stepper" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Stepper" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Stepper" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Stepper" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Stepper" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Stepper" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Stepper" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=stepper", "implementations": { "react": "components/stepper/web/ReactTailwind.tsx", "html": "components/stepper/web/index.html", "native": "components/stepper/mobile/ReactNative.tsx", "compose": "components/stepper/android/AndroidCompose.kt", "swiftui": "components/stepper/apple/SwiftUI.swift", "winui": "components/stepper/windows/WinUI.xaml", "flutter": "components/stepper/cross-platform/Flutter.dart" }, "figma": { "preview": "components/stepper/figma/preview.svg", "tokens": "components/stepper/figma/tokens.tokens.json", "spec": "components/stepper/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "stepper", "ステッパー", "Stepper" ], "official": [], "aliases": [ "Wizard Steps", "進捗ナビ" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "table-of-contents", "ja": "目次", "en": "Table of Contents", "aliases": [ "TOC", "ページ内ナビ" ], "names": { "canonical": { "ja": "目次", "en": "Table of Contents", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "TOC", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ページ内ナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "目次", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Table of Contents", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "TOC", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "ページ内ナビ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "ページ内の見出しへ移動するリンク一覧。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "ページ内の見出しへ移動するリンク一覧。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Table of Contentsは「ページ内の見出しへ移動するリンク一覧。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sidebar-navigation", "navigation-drawer", "navigation-rail", "tree-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Table of Contents" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Table of Contents" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Table of Contents" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Table of Contents" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Table of Contents" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Table of Contents" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Table of Contents" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=table-of-contents", "implementations": { "react": "components/table-of-contents/web/ReactTailwind.tsx", "html": "components/table-of-contents/web/index.html", "native": "components/table-of-contents/mobile/ReactNative.tsx", "compose": "components/table-of-contents/android/AndroidCompose.kt", "swiftui": "components/table-of-contents/apple/SwiftUI.swift", "winui": "components/table-of-contents/windows/WinUI.xaml", "flutter": "components/table-of-contents/cross-platform/Flutter.dart" }, "figma": { "preview": "components/table-of-contents/figma/preview.svg", "tokens": "components/table-of-contents/figma/tokens.tokens.json", "spec": "components/table-of-contents/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "table-of-contents", "目次", "Table of Contents" ], "official": [], "aliases": [ "TOC", "ページ内ナビ" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "anchor-navigation", "ja": "アンカーナビ", "en": "Anchor Navigation", "aliases": [ "In-page Navigation" ], "names": { "canonical": { "ja": "アンカーナビ", "en": "Anchor Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "In-page Navigation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アンカーナビ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Anchor Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "In-page Navigation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "同一ページ内の特定位置へ移動するナビ。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "同一ページ内の特定位置へ移動するナビ。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Anchor Navigationは「同一ページ内の特定位置へ移動するナビ。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "tab-bar", "vertical-tabs", "breadcrumbs" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Anchor Navigation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Anchor Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Anchor Navigation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Anchor Navigation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Anchor Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Anchor Navigation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Anchor Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=anchor-navigation", "implementations": { "react": "components/anchor-navigation/web/ReactTailwind.tsx", "html": "components/anchor-navigation/web/index.html", "native": "components/anchor-navigation/mobile/ReactNative.tsx", "compose": "components/anchor-navigation/android/AndroidCompose.kt", "swiftui": "components/anchor-navigation/apple/SwiftUI.swift", "winui": "components/anchor-navigation/windows/WinUI.xaml", "flutter": "components/anchor-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/anchor-navigation/figma/preview.svg", "tokens": "components/anchor-navigation/figma/tokens.tokens.json", "spec": "components/anchor-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "anchor-navigation", "アンカーナビ", "Anchor Navigation" ], "official": [], "aliases": [ "In-page Navigation" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "mega-menu", "ja": "メガメニュー", "en": "Mega Menu", "aliases": [ "大型ドロップダウン" ], "names": { "canonical": { "ja": "メガメニュー", "en": "Mega Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "大型ドロップダウン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メガメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Mega Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "大型ドロップダウン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "多くのリンクを分類して大きなパネルで表示するメニュー。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "多くのリンクを分類して大きなパネルで表示するメニュー。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Mega Menuは「多くのリンクを分類して大きなパネルで表示するメニュー。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "tab-bar", "vertical-tabs", "breadcrumbs" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Mega Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Mega Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Mega Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Mega Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Mega Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Mega Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Mega Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=mega-menu", "implementations": { "react": "components/mega-menu/web/ReactTailwind.tsx", "html": "components/mega-menu/web/index.html", "native": "components/mega-menu/mobile/ReactNative.tsx", "compose": "components/mega-menu/android/AndroidCompose.kt", "swiftui": "components/mega-menu/apple/SwiftUI.swift", "winui": "components/mega-menu/windows/WinUI.xaml", "flutter": "components/mega-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/mega-menu/figma/preview.svg", "tokens": "components/mega-menu/figma/tokens.tokens.json", "spec": "components/mega-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "mega-menu", "メガメニュー", "Mega Menu" ], "official": [], "aliases": [ "大型ドロップダウン" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "command-palette", "ja": "コマンドパレット", "en": "Command Palette", "aliases": [ "コマンドメニュー", "Quick Switcher" ], "names": { "canonical": { "ja": "コマンドパレット", "en": "Command Palette", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "コマンドメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Quick Switcher", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コマンドパレット", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Command Palette", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "コマンドメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Quick Switcher", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "検索入力から画面移動や操作を実行するUI。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "前面レイヤー", "Overlay", "composite-pattern", "none", "allowed", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "検索入力から画面移動や操作を実行するUI。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Command Paletteは「検索入力から画面移動や操作を実行するUI。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "navigation-menu", "menubar", "sidebar-navigation", "navigation-drawer" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Command Palette" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Command Palette" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Command Palette" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Command Palette" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Command Palette" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Command Palette" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Command Palette" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=command-palette", "implementations": { "react": "components/command-palette/web/ReactTailwind.tsx", "html": "components/command-palette/web/index.html", "native": "components/command-palette/mobile/ReactNative.tsx", "compose": "components/command-palette/android/AndroidCompose.kt", "swiftui": "components/command-palette/apple/SwiftUI.swift", "winui": "components/command-palette/windows/WinUI.xaml", "flutter": "components/command-palette/cross-platform/Flutter.dart" }, "figma": { "preview": "components/command-palette/figma/preview.svg", "tokens": "components/command-palette/figma/tokens.tokens.json", "spec": "components/command-palette/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "command-palette", "コマンドパレット", "Command Palette" ], "official": [], "aliases": [ "コマンドメニュー", "Quick Switcher" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "前面レイヤー", "Overlay", "composite-pattern", "none", "allowed", "not-applicable" ] } }, { "id": "tree-navigation", "ja": "ツリーナビ", "en": "Tree Navigation", "aliases": [ "Tree Menu" ], "names": { "canonical": { "ja": "ツリーナビ", "en": "Tree Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Tree Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ツリーナビ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tree Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tree Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "階層を開閉しながら項目へ移動するナビ。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "nav", "role": "tree", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"tree\" と対応するaria状態を同期する。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "階層を開閉しながら項目へ移動するナビ。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tree Navigationは「階層を開閉しながら項目へ移動するナビ。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sidebar-navigation", "navigation-drawer", "navigation-rail", "table-of-contents" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tree Navigation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tree Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tree Navigation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tree Navigation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tree Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tree Navigation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tree Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tree-navigation", "implementations": { "react": "components/tree-navigation/web/ReactTailwind.tsx", "html": "components/tree-navigation/web/index.html", "native": "components/tree-navigation/mobile/ReactNative.tsx", "compose": "components/tree-navigation/android/AndroidCompose.kt", "swiftui": "components/tree-navigation/apple/SwiftUI.swift", "winui": "components/tree-navigation/windows/WinUI.xaml", "flutter": "components/tree-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tree-navigation/figma/preview.svg", "tokens": "components/tree-navigation/figma/tokens.tokens.json", "spec": "components/tree-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tree-navigation", "ツリーナビ", "Tree Navigation" ], "official": [], "aliases": [ "Tree Menu" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "footer-navigation", "ja": "フッターナビ", "en": "Footer Navigation", "aliases": [ "フッターメニュー" ], "names": { "canonical": { "ja": "フッターナビ", "en": "Footer Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "フッターメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フッターナビ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Footer Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "フッターメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "サイト下部に補助リンク群を配置するナビ。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "サイト下部に補助リンク群を配置するナビ。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Footer Navigationは「サイト下部に補助リンク群を配置するナビ。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "global-header", "top-app-bar", "page-header", "bottom-navigation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Footer Navigation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Footer Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Footer Navigation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Footer Navigation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Footer Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Footer Navigation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Footer Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=footer-navigation", "implementations": { "react": "components/footer-navigation/web/ReactTailwind.tsx", "html": "components/footer-navigation/web/index.html", "native": "components/footer-navigation/mobile/ReactNative.tsx", "compose": "components/footer-navigation/android/AndroidCompose.kt", "swiftui": "components/footer-navigation/apple/SwiftUI.swift", "winui": "components/footer-navigation/windows/WinUI.xaml", "flutter": "components/footer-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/footer-navigation/figma/preview.svg", "tokens": "components/footer-navigation/figma/tokens.tokens.json", "spec": "components/footer-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "footer-navigation", "フッターナビ", "Footer Navigation" ], "official": [], "aliases": [ "フッターメニュー" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "skip-link", "ja": "スキップリンク", "en": "Skip Link", "aliases": [ "本文へ移動", "Skip Navigation", "Bypass Block" ], "names": { "canonical": { "ja": "スキップリンク", "en": "Skip Link", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "本文へ移動", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Skip Navigation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Bypass Block", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スキップリンク", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Skip Link", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "本文へ移動", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Skip Navigation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Bypass Block", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "キーボード利用者が反復ナビを飛ばすリンク。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "a", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter: リンク先へ移動" ], "accessibility": [ "移動にはhrefを持つa要素を使い、操作目的ではbuttonを使う。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "キーボード利用者が反復ナビを飛ばすリンク。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Skip Linkは「キーボード利用者が反復ナビを飛ばすリンク。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "previous-next-navigation", "global-header", "top-app-bar", "page-header" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Skip Link" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Skip Link" }, "native": { "status": "not-applicable", "note": "Webの文書構造に固有です。各OSのアクセシビリティAPIを使用します。", "equivalent": "Skip Link" }, "compose": { "status": "not-applicable", "note": "Web文書に固有で、Composeに直接対応するコントロールはありません。", "equivalent": "Skip Link" }, "swiftui": { "status": "not-applicable", "note": "Web文書に固有で、SwiftUIに直接対応するコントロールはありません。", "equivalent": "Skip Link" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Skip Link" }, "flutter": { "status": "not-applicable", "note": "Web文書に固有で、Flutterに直接対応するwidgetはありません。", "equivalent": "Skip Link" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=skip-link", "implementations": { "react": "components/skip-link/web/ReactTailwind.tsx", "html": "components/skip-link/web/index.html", "native": "components/skip-link/mobile/ReactNative.tsx", "compose": "components/skip-link/android/AndroidCompose.kt", "swiftui": "components/skip-link/apple/SwiftUI.swift", "winui": "components/skip-link/windows/WinUI.xaml", "flutter": "components/skip-link/cross-platform/Flutter.dart" }, "figma": { "preview": "components/skip-link/figma/preview.svg", "tokens": "components/skip-link/figma/tokens.tokens.json", "spec": "components/skip-link/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "skip-link", "スキップリンク", "Skip Link" ], "official": [], "aliases": [ "本文へ移動", "Skip Navigation", "Bypass Block" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "previous-next-navigation", "ja": "前後ナビ", "en": "Previous and Next Navigation", "aliases": [ "Prev Next" ], "names": { "canonical": { "ja": "前後ナビ", "en": "Previous and Next Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Prev Next", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "前後ナビ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Previous and Next Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Prev Next", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "記事や手順の前後項目へ移動するリンク。", "category": "navigation", "categoryLabel": { "ja": "ナビゲーション", "en": "Navigation" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "記事や手順の前後項目へ移動するリンク。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Previous and Next Navigationは「記事や手順の前後項目へ移動するリンク。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "skip-link", "global-header", "top-app-bar", "page-header" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Previous and Next Navigation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Previous and Next Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Previous and Next Navigation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Previous and Next Navigation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Previous and Next Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Previous and Next Navigation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Previous and Next Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=previous-next-navigation", "implementations": { "react": "components/previous-next-navigation/web/ReactTailwind.tsx", "html": "components/previous-next-navigation/web/index.html", "native": "components/previous-next-navigation/mobile/ReactNative.tsx", "compose": "components/previous-next-navigation/android/AndroidCompose.kt", "swiftui": "components/previous-next-navigation/apple/SwiftUI.swift", "winui": "components/previous-next-navigation/windows/WinUI.xaml", "flutter": "components/previous-next-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/previous-next-navigation/figma/preview.svg", "tokens": "components/previous-next-navigation/figma/tokens.tokens.json", "spec": "components/previous-next-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "previous-next-navigation", "前後ナビ", "Previous and Next Navigation" ], "official": [], "aliases": [ "Prev Next" ], "relatedNames": [], "facets": [ "場所を移動", "ナビゲーション", "Navigation", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "container", "ja": "コンテナー", "en": "Container", "aliases": [ "Wrapper" ], "names": { "canonical": { "ja": "コンテナー", "en": "Container", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Wrapper", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コンテナー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Container", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Wrapper", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "内容の最大幅と左右余白を揃える外枠。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "内容の最大幅と左右余白を揃える外枠。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Containerは「内容の最大幅と左右余白を揃える外枠。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "stack", "inline-stack", "grid", "columns" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Container" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Container" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Container" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Container" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Container" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Container" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Container" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=container", "implementations": { "react": "components/container/web/ReactTailwind.tsx", "html": "components/container/web/index.html", "native": "components/container/mobile/ReactNative.tsx", "compose": "components/container/android/AndroidCompose.kt", "swiftui": "components/container/apple/SwiftUI.swift", "winui": "components/container/windows/WinUI.xaml", "flutter": "components/container/cross-platform/Flutter.dart" }, "figma": { "preview": "components/container/figma/preview.svg", "tokens": "components/container/figma/tokens.tokens.json", "spec": "components/container/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "container", "コンテナー", "Container" ], "official": [], "aliases": [ "Wrapper" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "stack", "ja": "スタック", "en": "Stack", "aliases": [ "Vertical Stack" ], "names": { "canonical": { "ja": "スタック", "en": "Stack", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Vertical Stack", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スタック", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Stack", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Vertical Stack", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "要素を一定間隔で縦方向に並べるレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "要素を一定間隔で縦方向に並べるレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Stackは「要素を一定間隔で縦方向に並べるレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "inline-stack", "grid", "columns" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Stack" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Stack" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Stack" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Stack" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Stack" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Stack" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Stack" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=stack", "implementations": { "react": "components/stack/web/ReactTailwind.tsx", "html": "components/stack/web/index.html", "native": "components/stack/mobile/ReactNative.tsx", "compose": "components/stack/android/AndroidCompose.kt", "swiftui": "components/stack/apple/SwiftUI.swift", "winui": "components/stack/windows/WinUI.xaml", "flutter": "components/stack/cross-platform/Flutter.dart" }, "figma": { "preview": "components/stack/figma/preview.svg", "tokens": "components/stack/figma/tokens.tokens.json", "spec": "components/stack/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "stack", "スタック", "Stack" ], "official": [], "aliases": [ "Vertical Stack" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "inline-stack", "ja": "インラインスタック", "en": "Inline Stack", "aliases": [ "Horizontal Stack", "Cluster" ], "names": { "canonical": { "ja": "インラインスタック", "en": "Inline Stack", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Horizontal Stack", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Cluster", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "インラインスタック", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Inline Stack", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Horizontal Stack", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Cluster", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "要素を一定間隔で横方向に並べるレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "要素を一定間隔で横方向に並べるレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Inline Stackは「要素を一定間隔で横方向に並べるレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "grid", "columns" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Inline Stack" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Inline Stack" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Inline Stack" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Inline Stack" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Inline Stack" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Inline Stack" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Inline Stack" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=inline-stack", "implementations": { "react": "components/inline-stack/web/ReactTailwind.tsx", "html": "components/inline-stack/web/index.html", "native": "components/inline-stack/mobile/ReactNative.tsx", "compose": "components/inline-stack/android/AndroidCompose.kt", "swiftui": "components/inline-stack/apple/SwiftUI.swift", "winui": "components/inline-stack/windows/WinUI.xaml", "flutter": "components/inline-stack/cross-platform/Flutter.dart" }, "figma": { "preview": "components/inline-stack/figma/preview.svg", "tokens": "components/inline-stack/figma/tokens.tokens.json", "spec": "components/inline-stack/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "inline-stack", "インラインスタック", "Inline Stack" ], "official": [], "aliases": [ "Horizontal Stack", "Cluster" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "grid", "ja": "グリッド", "en": "Grid", "aliases": [ "CSS Grid" ], "names": { "canonical": { "ja": "グリッド", "en": "Grid", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "CSS Grid", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "グリッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Grid", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "CSS Grid", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "行と列を使って要素を整列するレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "行と列を使って要素を整列するレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Gridは「行と列を使って要素を整列するレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "columns" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Grid" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Grid" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Grid" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Grid" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Grid" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Grid" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Grid" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=grid", "implementations": { "react": "components/grid/web/ReactTailwind.tsx", "html": "components/grid/web/index.html", "native": "components/grid/mobile/ReactNative.tsx", "compose": "components/grid/android/AndroidCompose.kt", "swiftui": "components/grid/apple/SwiftUI.swift", "winui": "components/grid/windows/WinUI.xaml", "flutter": "components/grid/cross-platform/Flutter.dart" }, "figma": { "preview": "components/grid/figma/preview.svg", "tokens": "components/grid/figma/tokens.tokens.json", "spec": "components/grid/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "grid", "グリッド", "Grid" ], "official": [], "aliases": [ "CSS Grid" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "columns", "ja": "カラム", "en": "Columns", "aliases": [ "段組み" ], "names": { "canonical": { "ja": "カラム", "en": "Columns", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "段組み", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カラム", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Columns", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "段組み", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "内容を複数の縦列に分割するレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "内容を複数の縦列に分割するレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Columnsは「内容を複数の縦列に分割するレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Columns" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Columns" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Columns" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Columns" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Columns" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Columns" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Columns" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=columns", "implementations": { "react": "components/columns/web/ReactTailwind.tsx", "html": "components/columns/web/index.html", "native": "components/columns/mobile/ReactNative.tsx", "compose": "components/columns/android/AndroidCompose.kt", "swiftui": "components/columns/apple/SwiftUI.swift", "winui": "components/columns/windows/WinUI.xaml", "flutter": "components/columns/cross-platform/Flutter.dart" }, "figma": { "preview": "components/columns/figma/preview.svg", "tokens": "components/columns/figma/tokens.tokens.json", "spec": "components/columns/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "columns", "カラム", "Columns" ], "official": [], "aliases": [ "段組み" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "split-view", "ja": "スプリットビュー", "en": "Split View", "aliases": [ "分割ビュー" ], "names": { "canonical": { "ja": "スプリットビュー", "en": "Split View", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "分割ビュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スプリットビュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Split View", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "分割ビュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "2つの領域を並べて同時に表示するレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "2つの領域を並べて同時に表示するレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Split Viewは「2つの領域を並べて同時に表示するレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Split View" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Split View" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Split View" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Split View" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Split View" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Split View" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Split View" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=split-view", "implementations": { "react": "components/split-view/web/ReactTailwind.tsx", "html": "components/split-view/web/index.html", "native": "components/split-view/mobile/ReactNative.tsx", "compose": "components/split-view/android/AndroidCompose.kt", "swiftui": "components/split-view/apple/SwiftUI.swift", "winui": "components/split-view/windows/WinUI.xaml", "flutter": "components/split-view/cross-platform/Flutter.dart" }, "figma": { "preview": "components/split-view/figma/preview.svg", "tokens": "components/split-view/figma/tokens.tokens.json", "spec": "components/split-view/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "split-view", "スプリットビュー", "Split View" ], "official": [], "aliases": [ "分割ビュー" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "sidebar-layout", "ja": "サイドバーレイアウト", "en": "Sidebar Layout", "aliases": [ "Holy Grail Layout" ], "names": { "canonical": { "ja": "サイドバーレイアウト", "en": "Sidebar Layout", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Holy Grail Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "サイドバーレイアウト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sidebar Layout", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Holy Grail Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "補助領域と主領域を横に並べるレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "補助領域と主領域を横に並べるレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Sidebar Layoutは「補助領域と主領域を横に並べるレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Sidebar Layout" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Sidebar Layout" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Sidebar Layout" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Sidebar Layout" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Sidebar Layout" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Sidebar Layout" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Sidebar Layout" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=sidebar-layout", "implementations": { "react": "components/sidebar-layout/web/ReactTailwind.tsx", "html": "components/sidebar-layout/web/index.html", "native": "components/sidebar-layout/mobile/ReactNative.tsx", "compose": "components/sidebar-layout/android/AndroidCompose.kt", "swiftui": "components/sidebar-layout/apple/SwiftUI.swift", "winui": "components/sidebar-layout/windows/WinUI.xaml", "flutter": "components/sidebar-layout/cross-platform/Flutter.dart" }, "figma": { "preview": "components/sidebar-layout/figma/preview.svg", "tokens": "components/sidebar-layout/figma/tokens.tokens.json", "spec": "components/sidebar-layout/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "sidebar-layout", "サイドバーレイアウト", "Sidebar Layout" ], "official": [], "aliases": [ "Holy Grail Layout" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "card-grid", "ja": "カードグリッド", "en": "Card Grid", "aliases": [ "Card List" ], "names": { "canonical": { "ja": "カードグリッド", "en": "Card Grid", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Card List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カードグリッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Card Grid", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Card List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "同型カードをレスポンシブな格子に並べる。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "同型カードをレスポンシブな格子に並べる。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Card Gridは「同型カードをレスポンシブな格子に並べる。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Card Grid" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Card Grid" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Card Grid" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Card Grid" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Card Grid" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Card Grid" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Card Grid" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=card-grid", "implementations": { "react": "components/card-grid/web/ReactTailwind.tsx", "html": "components/card-grid/web/index.html", "native": "components/card-grid/mobile/ReactNative.tsx", "compose": "components/card-grid/android/AndroidCompose.kt", "swiftui": "components/card-grid/apple/SwiftUI.swift", "winui": "components/card-grid/windows/WinUI.xaml", "flutter": "components/card-grid/cross-platform/Flutter.dart" }, "figma": { "preview": "components/card-grid/figma/preview.svg", "tokens": "components/card-grid/figma/tokens.tokens.json", "spec": "components/card-grid/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "card-grid", "カードグリッド", "Card Grid" ], "official": [], "aliases": [ "Card List" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "masonry", "ja": "メイソンリー", "en": "Masonry Layout", "aliases": [ "Pinterest Layout" ], "names": { "canonical": { "ja": "メイソンリー", "en": "Masonry Layout", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Pinterest Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メイソンリー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Masonry Layout", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pinterest Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "高さの異なる項目を隙間なく段組みする。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "高さの異なる項目を隙間なく段組みする。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Masonry Layoutは「高さの異なる項目を隙間なく段組みする。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Masonry Layout" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Masonry Layout" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Masonry Layout" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Masonry Layout" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Masonry Layout" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Masonry Layout" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Masonry Layout" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=masonry", "implementations": { "react": "components/masonry/web/ReactTailwind.tsx", "html": "components/masonry/web/index.html", "native": "components/masonry/mobile/ReactNative.tsx", "compose": "components/masonry/android/AndroidCompose.kt", "swiftui": "components/masonry/apple/SwiftUI.swift", "winui": "components/masonry/windows/WinUI.xaml", "flutter": "components/masonry/cross-platform/Flutter.dart" }, "figma": { "preview": "components/masonry/figma/preview.svg", "tokens": "components/masonry/figma/tokens.tokens.json", "spec": "components/masonry/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "masonry", "メイソンリー", "Masonry Layout" ], "official": [], "aliases": [ "Pinterest Layout" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "divider", "ja": "区切り線", "en": "Divider", "aliases": [ "Separator", "罫線" ], "names": { "canonical": { "ja": "区切り線", "en": "Divider", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Separator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "罫線", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "区切り線", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Divider", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Separator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "罫線", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "内容のグループ境界を線で示す。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "hr", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "内容のグループ境界を線で示す。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Dividerは「内容のグループ境界を線で示す。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Divider" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Divider" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Divider" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Divider" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Divider" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Divider" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Divider" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=divider", "implementations": { "react": "components/divider/web/ReactTailwind.tsx", "html": "components/divider/web/index.html", "native": "components/divider/mobile/ReactNative.tsx", "compose": "components/divider/android/AndroidCompose.kt", "swiftui": "components/divider/apple/SwiftUI.swift", "winui": "components/divider/windows/WinUI.xaml", "flutter": "components/divider/cross-platform/Flutter.dart" }, "figma": { "preview": "components/divider/figma/preview.svg", "tokens": "components/divider/figma/tokens.tokens.json", "spec": "components/divider/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "divider", "区切り線", "Divider" ], "official": [], "aliases": [ "Separator", "罫線" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "spacer", "ja": "スペーサー", "en": "Spacer", "aliases": [ "Gap", "空白" ], "names": { "canonical": { "ja": "スペーサー", "en": "Spacer", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Gap", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "空白", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スペーサー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Spacer", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Gap", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "空白", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "意味のある余白を確保するレイアウト要素。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "意味のある余白を確保するレイアウト要素。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Spacerは「意味のある余白を確保するレイアウト要素。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Spacer" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Spacer" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Spacer" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Spacer" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Spacer" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Spacer" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Spacer" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=spacer", "implementations": { "react": "components/spacer/web/ReactTailwind.tsx", "html": "components/spacer/web/index.html", "native": "components/spacer/mobile/ReactNative.tsx", "compose": "components/spacer/android/AndroidCompose.kt", "swiftui": "components/spacer/apple/SwiftUI.swift", "winui": "components/spacer/windows/WinUI.xaml", "flutter": "components/spacer/cross-platform/Flutter.dart" }, "figma": { "preview": "components/spacer/figma/preview.svg", "tokens": "components/spacer/figma/tokens.tokens.json", "spec": "components/spacer/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "spacer", "スペーサー", "Spacer" ], "official": [], "aliases": [ "Gap", "空白" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "aspect-ratio-box", "ja": "アスペクト比ボックス", "en": "Aspect Ratio Box", "aliases": [ "Ratio Container" ], "names": { "canonical": { "ja": "アスペクト比ボックス", "en": "Aspect Ratio Box", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Ratio Container", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アスペクト比ボックス", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Aspect Ratio Box", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Ratio Container", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "画像や動画の縦横比を保つ外枠。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "画像や動画の縦横比を保つ外枠。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Aspect Ratio Boxは「画像や動画の縦横比を保つ外枠。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Aspect Ratio Box" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Aspect Ratio Box" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Aspect Ratio Box" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Aspect Ratio Box" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Aspect Ratio Box" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Aspect Ratio Box" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Aspect Ratio Box" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=aspect-ratio-box", "implementations": { "react": "components/aspect-ratio-box/web/ReactTailwind.tsx", "html": "components/aspect-ratio-box/web/index.html", "native": "components/aspect-ratio-box/mobile/ReactNative.tsx", "compose": "components/aspect-ratio-box/android/AndroidCompose.kt", "swiftui": "components/aspect-ratio-box/apple/SwiftUI.swift", "winui": "components/aspect-ratio-box/windows/WinUI.xaml", "flutter": "components/aspect-ratio-box/cross-platform/Flutter.dart" }, "figma": { "preview": "components/aspect-ratio-box/figma/preview.svg", "tokens": "components/aspect-ratio-box/figma/tokens.tokens.json", "spec": "components/aspect-ratio-box/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "aspect-ratio-box", "アスペクト比ボックス", "Aspect Ratio Box" ], "official": [], "aliases": [ "Ratio Container" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "scroll-area", "ja": "スクロール領域", "en": "Scroll Area", "aliases": [ "Scrollable Container" ], "names": { "canonical": { "ja": "スクロール領域", "en": "Scroll Area", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Scrollable Container", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スクロール領域", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Scroll Area", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Scrollable Container", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一部の内容だけをスクロール可能にする領域。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "一部の内容だけをスクロール可能にする領域。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Scroll Areaは「一部の内容だけをスクロール可能にする領域。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Scroll Area" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Scroll Area" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Scroll Area" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Scroll Area" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Scroll Area" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Scroll Area" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Scroll Area" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=scroll-area", "implementations": { "react": "components/scroll-area/web/ReactTailwind.tsx", "html": "components/scroll-area/web/index.html", "native": "components/scroll-area/mobile/ReactNative.tsx", "compose": "components/scroll-area/android/AndroidCompose.kt", "swiftui": "components/scroll-area/apple/SwiftUI.swift", "winui": "components/scroll-area/windows/WinUI.xaml", "flutter": "components/scroll-area/cross-platform/Flutter.dart" }, "figma": { "preview": "components/scroll-area/figma/preview.svg", "tokens": "components/scroll-area/figma/tokens.tokens.json", "spec": "components/scroll-area/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "scroll-area", "スクロール領域", "Scroll Area" ], "official": [], "aliases": [ "Scrollable Container" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "resizable-panels", "ja": "ウィンドウスプリッター", "en": "Window Splitter", "aliases": [ "Resizable Panels", "Split Pane" ], "names": { "canonical": { "ja": "ウィンドウスプリッター", "en": "Window Splitter", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Resizable Panels", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Split Pane", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ウィンドウスプリッター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Window Splitter", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Resizable Panels", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Split Pane", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "境界をドラッグして隣接領域のサイズを変えるレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "境界をドラッグして隣接領域のサイズを変えるレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Window Splitterは「境界をドラッグして隣接領域のサイズを変えるレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Window Splitter" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Window Splitter" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Window Splitter" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Window Splitter" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Window Splitter" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Window Splitter" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Window Splitter" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=resizable-panels", "implementations": { "react": "components/resizable-panels/web/ReactTailwind.tsx", "html": "components/resizable-panels/web/index.html", "native": "components/resizable-panels/mobile/ReactNative.tsx", "compose": "components/resizable-panels/android/AndroidCompose.kt", "swiftui": "components/resizable-panels/apple/SwiftUI.swift", "winui": "components/resizable-panels/windows/WinUI.xaml", "flutter": "components/resizable-panels/cross-platform/Flutter.dart" }, "figma": { "preview": "components/resizable-panels/figma/preview.svg", "tokens": "components/resizable-panels/figma/tokens.tokens.json", "spec": "components/resizable-panels/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "resizable-panels", "ウィンドウスプリッター", "Window Splitter" ], "official": [], "aliases": [ "Resizable Panels", "Split Pane" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "sticky-region", "ja": "スティッキー領域", "en": "Sticky Region", "aliases": [ "Sticky Header" ], "names": { "canonical": { "ja": "スティッキー領域", "en": "Sticky Region", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Sticky Header", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スティッキー領域", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sticky Region", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sticky Header", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "スクロール中に指定位置へ固定される領域。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "スクロール中に指定位置へ固定される領域。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Sticky Regionは「スクロール中に指定位置へ固定される領域。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Sticky Region" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Sticky Region" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Sticky Region" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Sticky Region" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Sticky Region" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Sticky Region" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Sticky Region" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=sticky-region", "implementations": { "react": "components/sticky-region/web/ReactTailwind.tsx", "html": "components/sticky-region/web/index.html", "native": "components/sticky-region/mobile/ReactNative.tsx", "compose": "components/sticky-region/android/AndroidCompose.kt", "swiftui": "components/sticky-region/apple/SwiftUI.swift", "winui": "components/sticky-region/windows/WinUI.xaml", "flutter": "components/sticky-region/cross-platform/Flutter.dart" }, "figma": { "preview": "components/sticky-region/figma/preview.svg", "tokens": "components/sticky-region/figma/tokens.tokens.json", "spec": "components/sticky-region/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "sticky-region", "スティッキー領域", "Sticky Region" ], "official": [], "aliases": [ "Sticky Header" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "collapsible-region", "ja": "ディスクロージャー", "en": "Disclosure", "aliases": [ "Collapsible Region", "Disclosure Widget", "折りたたみ領域" ], "names": { "canonical": { "ja": "ディスクロージャー", "en": "Disclosure", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Collapsible Region", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Disclosure Widget", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "折りたたみ領域", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ディスクロージャー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Disclosure", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Collapsible Region", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Disclosure Widget", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "折りたたみ領域", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "トリガー操作で関連コンテンツの表示・非表示を切り替える。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "details", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "トリガー操作で関連コンテンツの表示・非表示を切り替える。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Disclosureは「トリガー操作で関連コンテンツの表示・非表示を切り替える。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Disclosure" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Disclosure" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Disclosure" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Disclosure" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Disclosure" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Disclosure" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Disclosure" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=collapsible-region", "implementations": { "react": "components/collapsible-region/web/ReactTailwind.tsx", "html": "components/collapsible-region/web/index.html", "native": "components/collapsible-region/mobile/ReactNative.tsx", "compose": "components/collapsible-region/android/AndroidCompose.kt", "swiftui": "components/collapsible-region/apple/SwiftUI.swift", "winui": "components/collapsible-region/windows/WinUI.xaml", "flutter": "components/collapsible-region/cross-platform/Flutter.dart" }, "figma": { "preview": "components/collapsible-region/figma/preview.svg", "tokens": "components/collapsible-region/figma/tokens.tokens.json", "spec": "components/collapsible-region/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "collapsible-region", "ディスクロージャー", "Disclosure" ], "official": [], "aliases": [ "Collapsible Region", "Disclosure Widget", "折りたたみ領域" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "safe-area", "ja": "セーフエリア", "en": "Safe Area", "aliases": [ "Safe Area Insets" ], "names": { "canonical": { "ja": "セーフエリア", "en": "Safe Area", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Safe Area Insets", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "セーフエリア", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Safe Area", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Safe Area Insets", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ノッチやホームインジケータを避ける余白領域。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "platform-pattern", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "画面全体・非視覚", "System-wide / non-visual", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "ノッチやホームインジケータを避ける余白領域。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Safe Areaは「ノッチやホームインジケータを避ける余白領域。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Safe Area" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Safe Area" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Safe Area" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Safe Area" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Safe Area" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Safe Area" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Safe Area" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=safe-area", "implementations": { "react": "components/safe-area/web/ReactTailwind.tsx", "html": "components/safe-area/web/index.html", "native": "components/safe-area/mobile/ReactNative.tsx", "compose": "components/safe-area/android/AndroidCompose.kt", "swiftui": "components/safe-area/apple/SwiftUI.swift", "winui": "components/safe-area/windows/WinUI.xaml", "flutter": "components/safe-area/cross-platform/Flutter.dart" }, "figma": { "preview": "components/safe-area/figma/preview.svg", "tokens": "components/safe-area/figma/tokens.tokens.json", "spec": "components/safe-area/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "safe-area", "セーフエリア", "Safe Area" ], "official": [], "aliases": [ "Safe Area Insets" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "画面全体・非視覚", "System-wide / non-visual", "platform-pattern", "none", "not-applicable" ] } }, { "id": "viewport-shell", "ja": "ビューポートシェル", "en": "Viewport Shell", "aliases": [ "App Shell" ], "names": { "canonical": { "ja": "ビューポートシェル", "en": "Viewport Shell", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "App Shell", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ビューポートシェル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Viewport Shell", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "App Shell", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ヘッダー・本文・フッターを画面高に収める骨格。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "main", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ヘッダー・本文・フッターを画面高に収める骨格。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Viewport Shellは「ヘッダー・本文・フッターを画面高に収める骨格。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Viewport Shell" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Viewport Shell" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Viewport Shell" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Viewport Shell" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Viewport Shell" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Viewport Shell" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Viewport Shell" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=viewport-shell", "implementations": { "react": "components/viewport-shell/web/ReactTailwind.tsx", "html": "components/viewport-shell/web/index.html", "native": "components/viewport-shell/mobile/ReactNative.tsx", "compose": "components/viewport-shell/android/AndroidCompose.kt", "swiftui": "components/viewport-shell/apple/SwiftUI.swift", "winui": "components/viewport-shell/windows/WinUI.xaml", "flutter": "components/viewport-shell/cross-platform/Flutter.dart" }, "figma": { "preview": "components/viewport-shell/figma/preview.svg", "tokens": "components/viewport-shell/figma/tokens.tokens.json", "spec": "components/viewport-shell/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "viewport-shell", "ビューポートシェル", "Viewport Shell" ], "official": [], "aliases": [ "App Shell" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "center-layout", "ja": "中央寄せレイアウト", "en": "Center Layout", "aliases": [ "Centered Layout" ], "names": { "canonical": { "ja": "中央寄せレイアウト", "en": "Center Layout", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Centered Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "中央寄せレイアウト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Center Layout", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Centered Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "内容を縦横中央へ配置するレイアウト。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "内容を縦横中央へ配置するレイアウト。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Center Layoutは「内容を縦横中央へ配置するレイアウト。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Center Layout" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Center Layout" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Center Layout" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Center Layout" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Center Layout" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Center Layout" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Center Layout" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=center-layout", "implementations": { "react": "components/center-layout/web/ReactTailwind.tsx", "html": "components/center-layout/web/index.html", "native": "components/center-layout/mobile/ReactNative.tsx", "compose": "components/center-layout/android/AndroidCompose.kt", "swiftui": "components/center-layout/apple/SwiftUI.swift", "winui": "components/center-layout/windows/WinUI.xaml", "flutter": "components/center-layout/cross-platform/Flutter.dart" }, "figma": { "preview": "components/center-layout/figma/preview.svg", "tokens": "components/center-layout/figma/tokens.tokens.json", "spec": "components/center-layout/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "center-layout", "中央寄せレイアウト", "Center Layout" ], "official": [], "aliases": [ "Centered Layout" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "overlay-layout", "ja": "重ね合わせレイアウト", "en": "Overlay Layout", "aliases": [ "Layered Layout" ], "names": { "canonical": { "ja": "重ね合わせレイアウト", "en": "Overlay Layout", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Layered Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "重ね合わせレイアウト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Overlay Layout", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Layered Layout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "要素を画像や別要素の上へ重ねる配置。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "要素を画像や別要素の上へ重ねる配置。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Overlay Layoutは「要素を画像や別要素の上へ重ねる配置。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Overlay Layout" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Overlay Layout" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Overlay Layout" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Overlay Layout" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Overlay Layout" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Overlay Layout" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Overlay Layout" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=overlay-layout", "implementations": { "react": "components/overlay-layout/web/ReactTailwind.tsx", "html": "components/overlay-layout/web/index.html", "native": "components/overlay-layout/mobile/ReactNative.tsx", "compose": "components/overlay-layout/android/AndroidCompose.kt", "swiftui": "components/overlay-layout/apple/SwiftUI.swift", "winui": "components/overlay-layout/windows/WinUI.xaml", "flutter": "components/overlay-layout/cross-platform/Flutter.dart" }, "figma": { "preview": "components/overlay-layout/figma/preview.svg", "tokens": "components/overlay-layout/figma/tokens.tokens.json", "spec": "components/overlay-layout/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "overlay-layout", "重ね合わせレイアウト", "Overlay Layout" ], "official": [], "aliases": [ "Layered Layout" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "master-detail-view", "ja": "マスター・詳細ビュー", "en": "Master–Detail View", "aliases": [ "List–Detail", "Master Detail" ], "names": { "canonical": { "ja": "マスター・詳細ビュー", "en": "Master–Detail View", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "List–Detail", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Master Detail", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "マスター・詳細ビュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Master–Detail View", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "List–Detail", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Master Detail", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "一覧と選択項目の詳細を隣接領域へ同時表示する。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "anywhere", "placementLabel": { "ja": "レイアウト全体", "en": "Layout-wide", "detailJa": "親レイアウト全体を構成し、用途に応じて位置が変わります。", "detailEn": "Structures the containing layout; its exact position depends on context." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "一覧と選択項目の詳細を隣接領域へ同時表示する。", "レイアウト全体でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Master–Detail Viewは「一覧と選択項目の詳細を隣接領域へ同時表示する。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Master–Detail View" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Master–Detail View" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Master–Detail View" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Master–Detail View" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Master–Detail View" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Master–Detail View" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Master–Detail View" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=master-detail-view", "implementations": { "react": "components/master-detail-view/web/ReactTailwind.tsx", "html": "components/master-detail-view/web/index.html", "native": "components/master-detail-view/mobile/ReactNative.tsx", "compose": "components/master-detail-view/android/AndroidCompose.kt", "swiftui": "components/master-detail-view/apple/SwiftUI.swift", "winui": "components/master-detail-view/windows/WinUI.xaml", "flutter": "components/master-detail-view/cross-platform/Flutter.dart" }, "figma": { "preview": "components/master-detail-view/figma/preview.svg", "tokens": "components/master-detail-view/figma/tokens.tokens.json", "spec": "components/master-detail-view/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "master-detail-view", "マスター・詳細ビュー", "Master–Detail View" ], "official": [], "aliases": [ "List–Detail", "Master Detail" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "レイアウト全体", "Layout-wide", "layout-primitive", "none", "not-applicable" ] } }, { "id": "inspector-panel", "ja": "インスペクターパネル", "en": "Inspector Panel", "aliases": [ "Properties Panel" ], "names": { "canonical": { "ja": "インスペクターパネル", "en": "Inspector Panel", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Properties Panel", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "インスペクターパネル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Inspector Panel", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Properties Panel", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "選択対象のプロパティや設定を側面で表示・編集する。", "category": "layout", "categoryLabel": { "ja": "レイアウト", "en": "Layout" }, "kind": "layout-primitive", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "画面を配置", "レイアウト", "Layout", "左右の側面", "Side", "layout-primitive", "none", "not-applicable" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "親コンテナ", "子領域", "間隔・整列ルール" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "選択対象のプロパティや設定を側面で表示・編集する。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Inspector Panelは「選択対象のプロパティや設定を側面で表示・編集する。」ためのレイアウト要素です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "container", "stack", "inline-stack", "grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Inspector Panel" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Inspector Panel" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Inspector Panel" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Inspector Panel" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Inspector Panel" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Inspector Panel" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Inspector Panel" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=inspector-panel", "implementations": { "react": "components/inspector-panel/web/ReactTailwind.tsx", "html": "components/inspector-panel/web/index.html", "native": "components/inspector-panel/mobile/ReactNative.tsx", "compose": "components/inspector-panel/android/AndroidCompose.kt", "swiftui": "components/inspector-panel/apple/SwiftUI.swift", "winui": "components/inspector-panel/windows/WinUI.xaml", "flutter": "components/inspector-panel/cross-platform/Flutter.dart" }, "figma": { "preview": "components/inspector-panel/figma/preview.svg", "tokens": "components/inspector-panel/figma/tokens.tokens.json", "spec": "components/inspector-panel/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "inspector-panel", "インスペクターパネル", "Inspector Panel" ], "official": [], "aliases": [ "Properties Panel" ], "relatedNames": [], "facets": [ "画面を配置", "レイアウト", "Layout", "左右の側面", "Side", "layout-primitive", "none", "not-applicable" ] } }, { "id": "heading", "ja": "見出し", "en": "Heading", "aliases": [ "Title" ], "names": { "canonical": { "ja": "見出し", "en": "Heading", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Title", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "見出し", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Heading", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Title", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "内容の階層と話題を示すタイトル文字。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "h2", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "内容の階層と話題を示すタイトル文字。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Headingは「内容の階層と話題を示すタイトル文字。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "body-text", "icon", "avatar", "avatar-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Heading" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Heading" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Heading" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Heading" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Heading" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Heading" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Heading" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=heading", "implementations": { "react": "components/heading/web/ReactTailwind.tsx", "html": "components/heading/web/index.html", "native": "components/heading/mobile/ReactNative.tsx", "compose": "components/heading/android/AndroidCompose.kt", "swiftui": "components/heading/apple/SwiftUI.swift", "winui": "components/heading/windows/WinUI.xaml", "flutter": "components/heading/cross-platform/Flutter.dart" }, "figma": { "preview": "components/heading/figma/preview.svg", "tokens": "components/heading/figma/tokens.tokens.json", "spec": "components/heading/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "heading", "見出し", "Heading" ], "official": [], "aliases": [ "Title" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "body-text", "ja": "本文テキスト", "en": "Body Text", "aliases": [ "Paragraph" ], "names": { "canonical": { "ja": "本文テキスト", "en": "Body Text", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Paragraph", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "本文テキスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Body Text", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Paragraph", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "説明や記事本文に使う基本の文章。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "p", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "説明や記事本文に使う基本の文章。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Body Textは「説明や記事本文に使う基本の文章。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "icon", "avatar", "avatar-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Body Text" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Body Text" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Body Text" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Body Text" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Body Text" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Body Text" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Body Text" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=body-text", "implementations": { "react": "components/body-text/web/ReactTailwind.tsx", "html": "components/body-text/web/index.html", "native": "components/body-text/mobile/ReactNative.tsx", "compose": "components/body-text/android/AndroidCompose.kt", "swiftui": "components/body-text/apple/SwiftUI.swift", "winui": "components/body-text/windows/WinUI.xaml", "flutter": "components/body-text/cross-platform/Flutter.dart" }, "figma": { "preview": "components/body-text/figma/preview.svg", "tokens": "components/body-text/figma/tokens.tokens.json", "spec": "components/body-text/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "body-text", "本文テキスト", "Body Text" ], "official": [], "aliases": [ "Paragraph" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "icon", "ja": "アイコン", "en": "Icon", "aliases": [ "Glyph", "Pictogram" ], "names": { "canonical": { "ja": "アイコン", "en": "Icon", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Glyph", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Pictogram", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アイコン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Icon", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Glyph", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Pictogram", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "機能・状態・対象を小さな図形で示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "svg", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "機能・状態・対象を小さな図形で示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Iconは「機能・状態・対象を小さな図形で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "avatar", "avatar-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Icon" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Icon" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Icon" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Icon" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Icon" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Icon" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Icon" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=icon", "implementations": { "react": "components/icon/web/ReactTailwind.tsx", "html": "components/icon/web/index.html", "native": "components/icon/mobile/ReactNative.tsx", "compose": "components/icon/android/AndroidCompose.kt", "swiftui": "components/icon/apple/SwiftUI.swift", "winui": "components/icon/windows/WinUI.xaml", "flutter": "components/icon/cross-platform/Flutter.dart" }, "figma": { "preview": "components/icon/figma/preview.svg", "tokens": "components/icon/figma/tokens.tokens.json", "spec": "components/icon/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "icon", "アイコン", "Icon" ], "official": [], "aliases": [ "Glyph", "Pictogram" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "avatar", "ja": "アバター", "en": "Avatar", "aliases": [ "プロフィール画像" ], "names": { "canonical": { "ja": "アバター", "en": "Avatar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "プロフィール画像", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アバター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Avatar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "プロフィール画像", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "人物や組織を画像・イニシャルで表す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "img", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "人物や組織を画像・イニシャルで表す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Avatarは「人物や組織を画像・イニシャルで表す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar-group" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Avatar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Avatar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Avatar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Avatar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Avatar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Avatar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Avatar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=avatar", "implementations": { "react": "components/avatar/web/ReactTailwind.tsx", "html": "components/avatar/web/index.html", "native": "components/avatar/mobile/ReactNative.tsx", "compose": "components/avatar/android/AndroidCompose.kt", "swiftui": "components/avatar/apple/SwiftUI.swift", "winui": "components/avatar/windows/WinUI.xaml", "flutter": "components/avatar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/avatar/figma/preview.svg", "tokens": "components/avatar/figma/tokens.tokens.json", "spec": "components/avatar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "avatar", "アバター", "Avatar" ], "official": [], "aliases": [ "プロフィール画像" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "avatar-group", "ja": "アバターグループ", "en": "Avatar Group", "aliases": [ "Facepile" ], "names": { "canonical": { "ja": "アバターグループ", "en": "Avatar Group", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Facepile", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アバターグループ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Avatar Group", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Facepile", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数人のアバターを重ねて表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "ul", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数人のアバターを重ねて表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Avatar Groupは「複数人のアバターを重ねて表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Avatar Group" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Avatar Group" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Avatar Group" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Avatar Group" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Avatar Group" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Avatar Group" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Avatar Group" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=avatar-group", "implementations": { "react": "components/avatar-group/web/ReactTailwind.tsx", "html": "components/avatar-group/web/index.html", "native": "components/avatar-group/mobile/ReactNative.tsx", "compose": "components/avatar-group/android/AndroidCompose.kt", "swiftui": "components/avatar-group/apple/SwiftUI.swift", "winui": "components/avatar-group/windows/WinUI.xaml", "flutter": "components/avatar-group/cross-platform/Flutter.dart" }, "figma": { "preview": "components/avatar-group/figma/preview.svg", "tokens": "components/avatar-group/figma/tokens.tokens.json", "spec": "components/avatar-group/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "avatar-group", "アバターグループ", "Avatar Group" ], "official": [], "aliases": [ "Facepile" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "badge", "ja": "バッジ", "en": "Badge", "aliases": [ "Count Badge" ], "names": { "canonical": { "ja": "バッジ", "en": "Badge", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Count Badge", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "バッジ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Badge", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Count Badge", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "件数や短い補助情報を小さく表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "span", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "件数や短い補助情報を小さく表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Badgeは「件数や短い補助情報を小さく表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Badge" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Badge" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Badge" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Badge" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Badge" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Badge" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Badge" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=badge", "implementations": { "react": "components/badge/web/ReactTailwind.tsx", "html": "components/badge/web/index.html", "native": "components/badge/mobile/ReactNative.tsx", "compose": "components/badge/android/AndroidCompose.kt", "swiftui": "components/badge/apple/SwiftUI.swift", "winui": "components/badge/windows/WinUI.xaml", "flutter": "components/badge/cross-platform/Flutter.dart" }, "figma": { "preview": "components/badge/figma/preview.svg", "tokens": "components/badge/figma/tokens.tokens.json", "spec": "components/badge/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "badge", "バッジ", "Badge" ], "official": [], "aliases": [ "Count Badge" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "status-badge", "ja": "ステータスバッジ", "en": "Status Badge", "aliases": [ "Status Pill" ], "names": { "canonical": { "ja": "ステータスバッジ", "en": "Status Badge", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Status Pill", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ステータスバッジ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Status Badge", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Status Pill", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "状態を色と文字で明示するラベル。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "span", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "状態を色と文字で明示するラベル。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Status Badgeは「状態を色と文字で明示するラベル。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Status Badge" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Status Badge" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Status Badge" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Status Badge" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Status Badge" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Status Badge" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Status Badge" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=status-badge", "implementations": { "react": "components/status-badge/web/ReactTailwind.tsx", "html": "components/status-badge/web/index.html", "native": "components/status-badge/mobile/ReactNative.tsx", "compose": "components/status-badge/android/AndroidCompose.kt", "swiftui": "components/status-badge/apple/SwiftUI.swift", "winui": "components/status-badge/windows/WinUI.xaml", "flutter": "components/status-badge/cross-platform/Flutter.dart" }, "figma": { "preview": "components/status-badge/figma/preview.svg", "tokens": "components/status-badge/figma/tokens.tokens.json", "spec": "components/status-badge/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "status-badge", "ステータスバッジ", "Status Badge" ], "official": [], "aliases": [ "Status Pill" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "chip", "ja": "チップ", "en": "Chip", "aliases": [ "Pill", "Token" ], "names": { "canonical": { "ja": "チップ", "en": "Chip", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Pill", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Token", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "チップ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Chip", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pill", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Token", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "選択・入力・操作可能な短いトークン。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "span", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "選択・入力・操作可能な短いトークン。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Chipは「選択・入力・操作可能な短いトークン。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Chip" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Chip" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Chip" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Chip" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Chip" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Chip" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Chip" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=chip", "implementations": { "react": "components/chip/web/ReactTailwind.tsx", "html": "components/chip/web/index.html", "native": "components/chip/mobile/ReactNative.tsx", "compose": "components/chip/android/AndroidCompose.kt", "swiftui": "components/chip/apple/SwiftUI.swift", "winui": "components/chip/windows/WinUI.xaml", "flutter": "components/chip/cross-platform/Flutter.dart" }, "figma": { "preview": "components/chip/figma/preview.svg", "tokens": "components/chip/figma/tokens.tokens.json", "spec": "components/chip/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "chip", "チップ", "Chip" ], "official": [], "aliases": [ "Pill", "Token" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "tag", "ja": "タグ", "en": "Tag", "aliases": [ "ラベル", "Category Tag" ], "names": { "canonical": { "ja": "タグ", "en": "Tag", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ラベル", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Category Tag", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "タグ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tag", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ラベル", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Category Tag", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "分類や属性を短いラベルで表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "span", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "分類や属性を短いラベルで表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tagは「分類や属性を短いラベルで表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tag" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tag" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tag" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tag" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tag" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tag" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tag" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tag", "implementations": { "react": "components/tag/web/ReactTailwind.tsx", "html": "components/tag/web/index.html", "native": "components/tag/mobile/ReactNative.tsx", "compose": "components/tag/android/AndroidCompose.kt", "swiftui": "components/tag/apple/SwiftUI.swift", "winui": "components/tag/windows/WinUI.xaml", "flutter": "components/tag/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tag/figma/preview.svg", "tokens": "components/tag/figma/tokens.tokens.json", "spec": "components/tag/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tag", "タグ", "Tag" ], "official": [], "aliases": [ "ラベル", "Category Tag" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "card", "ja": "カード", "en": "Card", "aliases": [ "Panel", "Tile" ], "names": { "canonical": { "ja": "カード", "en": "Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Panel", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Tile", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Panel", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Tile", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "関連する情報と操作を1つの面にまとめる。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "article", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "関連する情報と操作を1つの面にまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Cardは「関連する情報と操作を1つの面にまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "list", "list-item", "description-list", "table" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=card", "implementations": { "react": "components/card/web/ReactTailwind.tsx", "html": "components/card/web/index.html", "native": "components/card/mobile/ReactNative.tsx", "compose": "components/card/android/AndroidCompose.kt", "swiftui": "components/card/apple/SwiftUI.swift", "winui": "components/card/windows/WinUI.xaml", "flutter": "components/card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/card/figma/preview.svg", "tokens": "components/card/figma/tokens.tokens.json", "spec": "components/card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "card", "カード", "Card" ], "official": [], "aliases": [ "Panel", "Tile" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "list", "ja": "リスト", "en": "List", "aliases": [ "Item List" ], "names": { "canonical": { "ja": "リスト", "en": "List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Item List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "リスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Item List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "同種の項目を縦方向に並べて表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "ul", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "同種の項目を縦方向に並べて表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Listは「同種の項目を縦方向に並べて表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list-item", "description-list", "table" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=list", "implementations": { "react": "components/list/web/ReactTailwind.tsx", "html": "components/list/web/index.html", "native": "components/list/mobile/ReactNative.tsx", "compose": "components/list/android/AndroidCompose.kt", "swiftui": "components/list/apple/SwiftUI.swift", "winui": "components/list/windows/WinUI.xaml", "flutter": "components/list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/list/figma/preview.svg", "tokens": "components/list/figma/tokens.tokens.json", "spec": "components/list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "list", "リスト", "List" ], "official": [], "aliases": [ "Item List" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "list-item", "ja": "リスト項目", "en": "List Item", "aliases": [ "Row" ], "names": { "canonical": { "ja": "リスト項目", "en": "List Item", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Row", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "リスト項目", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "List Item", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Row", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一覧内の1件分の情報と操作。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "li", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "一覧内の1件分の情報と操作。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "List Itemは「一覧内の1件分の情報と操作。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "description-list", "table" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "List Item" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "List Item" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "List Item" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "List Item" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "List Item" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "List Item" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "List Item" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=list-item", "implementations": { "react": "components/list-item/web/ReactTailwind.tsx", "html": "components/list-item/web/index.html", "native": "components/list-item/mobile/ReactNative.tsx", "compose": "components/list-item/android/AndroidCompose.kt", "swiftui": "components/list-item/apple/SwiftUI.swift", "winui": "components/list-item/windows/WinUI.xaml", "flutter": "components/list-item/cross-platform/Flutter.dart" }, "figma": { "preview": "components/list-item/figma/preview.svg", "tokens": "components/list-item/figma/tokens.tokens.json", "spec": "components/list-item/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "list-item", "リスト項目", "List Item" ], "official": [], "aliases": [ "Row" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "description-list", "ja": "説明リスト", "en": "Description List", "aliases": [ "Key Value List", "Definition List" ], "names": { "canonical": { "ja": "説明リスト", "en": "Description List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Key Value List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Definition List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "説明リスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Description List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Key Value List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Definition List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "用語と値の組を並べる情報表示。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "dl", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "用語と値の組を並べる情報表示。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Description Listは「用語と値の組を並べる情報表示。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "table" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Description List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Description List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Description List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Description List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Description List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Description List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Description List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=description-list", "implementations": { "react": "components/description-list/web/ReactTailwind.tsx", "html": "components/description-list/web/index.html", "native": "components/description-list/mobile/ReactNative.tsx", "compose": "components/description-list/android/AndroidCompose.kt", "swiftui": "components/description-list/apple/SwiftUI.swift", "winui": "components/description-list/windows/WinUI.xaml", "flutter": "components/description-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/description-list/figma/preview.svg", "tokens": "components/description-list/figma/tokens.tokens.json", "spec": "components/description-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "description-list", "説明リスト", "Description List" ], "official": [], "aliases": [ "Key Value List", "Definition List" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "table", "ja": "テーブル", "en": "Table", "aliases": [ "表" ], "names": { "canonical": { "ja": "テーブル", "en": "Table", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "表", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "テーブル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Table", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "表", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "行と列の関係を持つデータを表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "table", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "行と列の関係を持つデータを表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tableは「行と列の関係を持つデータを表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Table" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Table" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Table" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Table" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Table" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Table" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Table" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=table", "implementations": { "react": "components/table/web/ReactTailwind.tsx", "html": "components/table/web/index.html", "native": "components/table/mobile/ReactNative.tsx", "compose": "components/table/android/AndroidCompose.kt", "swiftui": "components/table/apple/SwiftUI.swift", "winui": "components/table/windows/WinUI.xaml", "flutter": "components/table/cross-platform/Flutter.dart" }, "figma": { "preview": "components/table/figma/preview.svg", "tokens": "components/table/figma/tokens.tokens.json", "spec": "components/table/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "table", "テーブル", "Table" ], "official": [], "aliases": [ "表" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "data-grid", "ja": "データグリッド", "en": "Data Grid", "aliases": [ "Grid Table" ], "names": { "canonical": { "ja": "データグリッド", "en": "Data Grid", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Grid Table", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "データグリッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Data Grid", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Grid Table", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "並べ替え・選択・編集を備えた高機能な表。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "table", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "並べ替え・選択・編集を備えた高機能な表。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Data Gridは「並べ替え・選択・編集を備えた高機能な表。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "calendar", "tree-view", "tree-grid", "accordion" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Data Grid" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Data Grid" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Data Grid" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Data Grid" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Data Grid" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Data Grid" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Data Grid" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=data-grid", "implementations": { "react": "components/data-grid/web/ReactTailwind.tsx", "html": "components/data-grid/web/index.html", "native": "components/data-grid/mobile/ReactNative.tsx", "compose": "components/data-grid/android/AndroidCompose.kt", "swiftui": "components/data-grid/apple/SwiftUI.swift", "winui": "components/data-grid/windows/WinUI.xaml", "flutter": "components/data-grid/cross-platform/Flutter.dart" }, "figma": { "preview": "components/data-grid/figma/preview.svg", "tokens": "components/data-grid/figma/tokens.tokens.json", "spec": "components/data-grid/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "data-grid", "データグリッド", "Data Grid" ], "official": [], "aliases": [ "Grid Table" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "stat", "ja": "統計値", "en": "Stat", "aliases": [ "Statistic" ], "names": { "canonical": { "ja": "統計値", "en": "Stat", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Statistic", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "統計値", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Stat", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Statistic", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ラベルと主要な数値を簡潔に表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "dl", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ラベルと主要な数値を簡潔に表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Statは「ラベルと主要な数値を簡潔に表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Stat" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Stat" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Stat" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Stat" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Stat" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Stat" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Stat" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=stat", "implementations": { "react": "components/stat/web/ReactTailwind.tsx", "html": "components/stat/web/index.html", "native": "components/stat/mobile/ReactNative.tsx", "compose": "components/stat/android/AndroidCompose.kt", "swiftui": "components/stat/apple/SwiftUI.swift", "winui": "components/stat/windows/WinUI.xaml", "flutter": "components/stat/cross-platform/Flutter.dart" }, "figma": { "preview": "components/stat/figma/preview.svg", "tokens": "components/stat/figma/tokens.tokens.json", "spec": "components/stat/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "stat", "統計値", "Stat" ], "official": [], "aliases": [ "Statistic" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "kpi-card", "ja": "KPIカード", "en": "KPI Card", "aliases": [ "Metric Card" ], "names": { "canonical": { "ja": "KPIカード", "en": "KPI Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Metric Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "KPIカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "KPI Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Metric Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "重要指標と変化量をカードで示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "article", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "重要指標と変化量をカードで示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "KPI Cardは「重要指標と変化量をカードで示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "KPI Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "KPI Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "KPI Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "KPI Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "KPI Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "KPI Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "KPI Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=kpi-card", "implementations": { "react": "components/kpi-card/web/ReactTailwind.tsx", "html": "components/kpi-card/web/index.html", "native": "components/kpi-card/mobile/ReactNative.tsx", "compose": "components/kpi-card/android/AndroidCompose.kt", "swiftui": "components/kpi-card/apple/SwiftUI.swift", "winui": "components/kpi-card/windows/WinUI.xaml", "flutter": "components/kpi-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/kpi-card/figma/preview.svg", "tokens": "components/kpi-card/figma/tokens.tokens.json", "spec": "components/kpi-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "kpi-card", "KPIカード", "KPI Card" ], "official": [], "aliases": [ "Metric Card" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "progress-bar", "ja": "進捗バー", "en": "Progress Bar", "aliases": [ "Linear Progress" ], "names": { "canonical": { "ja": "進捗バー", "en": "Progress Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Linear Progress", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "進捗バー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Progress Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Linear Progress", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "処理や目標の進み具合を線で示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "progress", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "処理や目標の進み具合を線で示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Progress Barは「処理や目標の進み具合を線で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Progress Bar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Progress Bar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Progress Bar" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Progress Bar" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Progress Bar" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Progress Bar" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Progress Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=progress-bar", "implementations": { "react": "components/progress-bar/web/ReactTailwind.tsx", "html": "components/progress-bar/web/index.html", "native": "components/progress-bar/mobile/ReactNative.tsx", "compose": "components/progress-bar/android/AndroidCompose.kt", "swiftui": "components/progress-bar/apple/SwiftUI.swift", "winui": "components/progress-bar/windows/WinUI.xaml", "flutter": "components/progress-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/progress-bar/figma/preview.svg", "tokens": "components/progress-bar/figma/tokens.tokens.json", "spec": "components/progress-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "progress-bar", "進捗バー", "Progress Bar" ], "official": [], "aliases": [ "Linear Progress" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "circular-progress", "ja": "円形進捗", "en": "Circular Progress", "aliases": [ "Progress Ring" ], "names": { "canonical": { "ja": "円形進捗", "en": "Circular Progress", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Progress Ring", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "円形進捗", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Circular Progress", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Progress Ring", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "進み具合を円周で示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": "progressbar", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"progressbar\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "進み具合を円周で示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Circular Progressは「進み具合を円周で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Circular Progress" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Circular Progress" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Circular Progress" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Circular Progress" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Circular Progress" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Circular Progress" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Circular Progress" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=circular-progress", "implementations": { "react": "components/circular-progress/web/ReactTailwind.tsx", "html": "components/circular-progress/web/index.html", "native": "components/circular-progress/mobile/ReactNative.tsx", "compose": "components/circular-progress/android/AndroidCompose.kt", "swiftui": "components/circular-progress/apple/SwiftUI.swift", "winui": "components/circular-progress/windows/WinUI.xaml", "flutter": "components/circular-progress/cross-platform/Flutter.dart" }, "figma": { "preview": "components/circular-progress/figma/preview.svg", "tokens": "components/circular-progress/figma/tokens.tokens.json", "spec": "components/circular-progress/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "circular-progress", "円形進捗", "Circular Progress" ], "official": [], "aliases": [ "Progress Ring" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "meter", "ja": "メーター", "en": "Meter", "aliases": [ "Gauge" ], "names": { "canonical": { "ja": "メーター", "en": "Meter", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Gauge", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メーター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Meter", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Gauge", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "既知の範囲内にある測定値を示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "meter", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "既知の範囲内にある測定値を示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Meterは「既知の範囲内にある測定値を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Meter" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Meter" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Meter" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Meter" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Meter" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Meter" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Meter" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=meter", "implementations": { "react": "components/meter/web/ReactTailwind.tsx", "html": "components/meter/web/index.html", "native": "components/meter/mobile/ReactNative.tsx", "compose": "components/meter/android/AndroidCompose.kt", "swiftui": "components/meter/apple/SwiftUI.swift", "winui": "components/meter/windows/WinUI.xaml", "flutter": "components/meter/cross-platform/Flutter.dart" }, "figma": { "preview": "components/meter/figma/preview.svg", "tokens": "components/meter/figma/tokens.tokens.json", "spec": "components/meter/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "meter", "メーター", "Meter" ], "official": [], "aliases": [ "Gauge" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "skeleton", "ja": "スケルトン", "en": "Skeleton", "aliases": [ "Skeleton Loader" ], "names": { "canonical": { "ja": "スケルトン", "en": "Skeleton", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Skeleton Loader", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スケルトン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Skeleton", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Skeleton Loader", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "読込中の最終レイアウトを仮の形で示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "読込中の最終レイアウトを仮の形で示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Skeletonは「読込中の最終レイアウトを仮の形で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Skeleton" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Skeleton" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Skeleton" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Skeleton" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Skeleton" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Skeleton" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Skeleton" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=skeleton", "implementations": { "react": "components/skeleton/web/ReactTailwind.tsx", "html": "components/skeleton/web/index.html", "native": "components/skeleton/mobile/ReactNative.tsx", "compose": "components/skeleton/android/AndroidCompose.kt", "swiftui": "components/skeleton/apple/SwiftUI.swift", "winui": "components/skeleton/windows/WinUI.xaml", "flutter": "components/skeleton/cross-platform/Flutter.dart" }, "figma": { "preview": "components/skeleton/figma/preview.svg", "tokens": "components/skeleton/figma/tokens.tokens.json", "spec": "components/skeleton/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "skeleton", "スケルトン", "Skeleton" ], "official": [], "aliases": [ "Skeleton Loader" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "timeline", "ja": "タイムライン", "en": "Timeline", "aliases": [ "Activity Timeline" ], "names": { "canonical": { "ja": "タイムライン", "en": "Timeline", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Activity Timeline", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "タイムライン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Timeline", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Activity Timeline", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "出来事を時系列で並べて表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "ol", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "出来事を時系列で並べて表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Timelineは「出来事を時系列で並べて表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Timeline" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Timeline" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Timeline" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Timeline" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Timeline" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Timeline" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Timeline" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=timeline", "implementations": { "react": "components/timeline/web/ReactTailwind.tsx", "html": "components/timeline/web/index.html", "native": "components/timeline/mobile/ReactNative.tsx", "compose": "components/timeline/android/AndroidCompose.kt", "swiftui": "components/timeline/apple/SwiftUI.swift", "winui": "components/timeline/windows/WinUI.xaml", "flutter": "components/timeline/cross-platform/Flutter.dart" }, "figma": { "preview": "components/timeline/figma/preview.svg", "tokens": "components/timeline/figma/tokens.tokens.json", "spec": "components/timeline/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "timeline", "タイムライン", "Timeline" ], "official": [], "aliases": [ "Activity Timeline" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "calendar", "ja": "カレンダー", "en": "Calendar", "aliases": [ "Month View" ], "names": { "canonical": { "ja": "カレンダー", "en": "Calendar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Month View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カレンダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Calendar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Month View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "日・週・月単位で日付や予定を表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "table", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "日・週・月単位で日付や予定を表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Calendarは「日・週・月単位で日付や予定を表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "data-grid", "tree-view", "tree-grid", "accordion" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Calendar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Calendar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Calendar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Calendar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Calendar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Calendar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Calendar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=calendar", "implementations": { "react": "components/calendar/web/ReactTailwind.tsx", "html": "components/calendar/web/index.html", "native": "components/calendar/mobile/ReactNative.tsx", "compose": "components/calendar/android/AndroidCompose.kt", "swiftui": "components/calendar/apple/SwiftUI.swift", "winui": "components/calendar/windows/WinUI.xaml", "flutter": "components/calendar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/calendar/figma/preview.svg", "tokens": "components/calendar/figma/tokens.tokens.json", "spec": "components/calendar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "calendar", "カレンダー", "Calendar" ], "official": [], "aliases": [ "Month View" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "tree-view", "ja": "ツリービュー", "en": "Tree View", "aliases": [ "Hierarchy View" ], "names": { "canonical": { "ja": "ツリービュー", "en": "Tree View", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Hierarchy View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ツリービュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tree View", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Hierarchy View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "親子階層を開閉して表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "ul", "role": "tree", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"tree\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "親子階層を開閉して表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tree Viewは「親子階層を開閉して表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "data-grid", "calendar", "tree-grid", "accordion" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tree View" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tree View" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tree View" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tree View" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tree View" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tree View" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tree View" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tree-view", "implementations": { "react": "components/tree-view/web/ReactTailwind.tsx", "html": "components/tree-view/web/index.html", "native": "components/tree-view/mobile/ReactNative.tsx", "compose": "components/tree-view/android/AndroidCompose.kt", "swiftui": "components/tree-view/apple/SwiftUI.swift", "winui": "components/tree-view/windows/WinUI.xaml", "flutter": "components/tree-view/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tree-view/figma/preview.svg", "tokens": "components/tree-view/figma/tokens.tokens.json", "spec": "components/tree-view/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tree-view", "ツリービュー", "Tree View" ], "official": [], "aliases": [ "Hierarchy View" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "tree-grid", "ja": "ツリーグリッド", "en": "Tree Grid", "aliases": [ "Treegrid", "Hierarchical Grid" ], "names": { "canonical": { "ja": "ツリーグリッド", "en": "Tree Grid", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Treegrid", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Hierarchical Grid", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ツリーグリッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tree Grid", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Treegrid", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Hierarchical Grid", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "階層行と表形式の列を組み合わせて表示・操作する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "table", "role": "treegrid", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"treegrid\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "階層行と表形式の列を組み合わせて表示・操作する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tree Gridは「階層行と表形式の列を組み合わせて表示・操作する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "data-grid", "calendar", "tree-view", "accordion" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tree Grid" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tree Grid" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tree Grid" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tree Grid" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tree Grid" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tree Grid" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tree Grid" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tree-grid", "implementations": { "react": "components/tree-grid/web/ReactTailwind.tsx", "html": "components/tree-grid/web/index.html", "native": "components/tree-grid/mobile/ReactNative.tsx", "compose": "components/tree-grid/android/AndroidCompose.kt", "swiftui": "components/tree-grid/apple/SwiftUI.swift", "winui": "components/tree-grid/windows/WinUI.xaml", "flutter": "components/tree-grid/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tree-grid/figma/preview.svg", "tokens": "components/tree-grid/figma/tokens.tokens.json", "spec": "components/tree-grid/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tree-grid", "ツリーグリッド", "Tree Grid" ], "official": [], "aliases": [ "Treegrid", "Hierarchical Grid" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "code-block", "ja": "コードブロック", "en": "Code Block", "aliases": [ "Source Block" ], "names": { "canonical": { "ja": "コードブロック", "en": "Code Block", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Source Block", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コードブロック", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Code Block", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Source Block", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数行のコードを等幅書体で表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "pre", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数行のコードを等幅書体で表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Code Blockは「複数行のコードを等幅書体で表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Code Block" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Code Block" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Code Block" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Code Block" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Code Block" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Code Block" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Code Block" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=code-block", "implementations": { "react": "components/code-block/web/ReactTailwind.tsx", "html": "components/code-block/web/index.html", "native": "components/code-block/mobile/ReactNative.tsx", "compose": "components/code-block/android/AndroidCompose.kt", "swiftui": "components/code-block/apple/SwiftUI.swift", "winui": "components/code-block/windows/WinUI.xaml", "flutter": "components/code-block/cross-platform/Flutter.dart" }, "figma": { "preview": "components/code-block/figma/preview.svg", "tokens": "components/code-block/figma/tokens.tokens.json", "spec": "components/code-block/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "code-block", "コードブロック", "Code Block" ], "official": [], "aliases": [ "Source Block" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "key-value", "ja": "キー・値表示", "en": "Key-value Display", "aliases": [ "Property List" ], "names": { "canonical": { "ja": "キー・値表示", "en": "Key-value Display", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Property List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "キー・値表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Key-value Display", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Property List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "項目名と値を1対1で表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "dl", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "項目名と値を1対1で表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Key-value Displayは「項目名と値を1対1で表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Key-value Display" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Key-value Display" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Key-value Display" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Key-value Display" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Key-value Display" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Key-value Display" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Key-value Display" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=key-value", "implementations": { "react": "components/key-value/web/ReactTailwind.tsx", "html": "components/key-value/web/index.html", "native": "components/key-value/mobile/ReactNative.tsx", "compose": "components/key-value/android/AndroidCompose.kt", "swiftui": "components/key-value/apple/SwiftUI.swift", "winui": "components/key-value/windows/WinUI.xaml", "flutter": "components/key-value/cross-platform/Flutter.dart" }, "figma": { "preview": "components/key-value/figma/preview.svg", "tokens": "components/key-value/figma/tokens.tokens.json", "spec": "components/key-value/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "key-value", "キー・値表示", "Key-value Display" ], "official": [], "aliases": [ "Property List" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "accordion", "ja": "アコーディオン", "en": "Accordion", "aliases": [ "折りたたみリスト" ], "names": { "canonical": { "ja": "アコーディオン", "en": "Accordion", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "折りたたみリスト", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アコーディオン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Accordion", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "折りたたみリスト", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数セクションを見出しごとに開閉する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数セクションを見出しごとに開閉する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Accordionは「複数セクションを見出しごとに開閉する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "data-grid", "calendar", "tree-view", "tree-grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Accordion" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Accordion" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Accordion" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Accordion" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Accordion" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Accordion" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Accordion" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=accordion", "implementations": { "react": "components/accordion/web/ReactTailwind.tsx", "html": "components/accordion/web/index.html", "native": "components/accordion/mobile/ReactNative.tsx", "compose": "components/accordion/android/AndroidCompose.kt", "swiftui": "components/accordion/apple/SwiftUI.swift", "winui": "components/accordion/windows/WinUI.xaml", "flutter": "components/accordion/cross-platform/Flutter.dart" }, "figma": { "preview": "components/accordion/figma/preview.svg", "tokens": "components/accordion/figma/tokens.tokens.json", "spec": "components/accordion/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "accordion", "アコーディオン", "Accordion" ], "official": [], "aliases": [ "折りたたみリスト" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "carousel", "ja": "カルーセル", "en": "Carousel", "aliases": [ "スライドショー", "Slideshow", "Carousel Slider" ], "names": { "canonical": { "ja": "カルーセル", "en": "Carousel", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "スライドショー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Slideshow", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Carousel Slider", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カルーセル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Carousel", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "スライドショー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Slideshow", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Carousel Slider", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "複数項目を横方向に切り替えて表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数項目を横方向に切り替えて表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Carouselは「複数項目を横方向に切り替えて表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "data-grid", "calendar", "tree-view", "tree-grid" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Carousel" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Carousel" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Carousel" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Carousel" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Carousel" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Carousel" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Carousel" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=carousel", "implementations": { "react": "components/carousel/web/ReactTailwind.tsx", "html": "components/carousel/web/index.html", "native": "components/carousel/mobile/ReactNative.tsx", "compose": "components/carousel/android/AndroidCompose.kt", "swiftui": "components/carousel/apple/SwiftUI.swift", "winui": "components/carousel/windows/WinUI.xaml", "flutter": "components/carousel/cross-platform/Flutter.dart" }, "figma": { "preview": "components/carousel/figma/preview.svg", "tokens": "components/carousel/figma/tokens.tokens.json", "spec": "components/carousel/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "carousel", "カルーセル", "Carousel" ], "official": [], "aliases": [ "スライドショー", "Slideshow", "Carousel Slider" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "chart", "ja": "チャート", "en": "Chart", "aliases": [ "グラフ", "Data Visualization" ], "names": { "canonical": { "ja": "チャート", "en": "Chart", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "グラフ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Data Visualization", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "チャート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Chart", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "グラフ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Data Visualization", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "値の傾向や比較を図で示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "figure", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "値の傾向や比較を図で示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Chartは「値の傾向や比較を図で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Chart" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Chart" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Chart" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Chart" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Chart" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Chart" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Chart" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=chart", "implementations": { "react": "components/chart/web/ReactTailwind.tsx", "html": "components/chart/web/index.html", "native": "components/chart/mobile/ReactNative.tsx", "compose": "components/chart/android/AndroidCompose.kt", "swiftui": "components/chart/apple/SwiftUI.swift", "winui": "components/chart/windows/WinUI.xaml", "flutter": "components/chart/cross-platform/Flutter.dart" }, "figma": { "preview": "components/chart/figma/preview.svg", "tokens": "components/chart/figma/tokens.tokens.json", "spec": "components/chart/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "chart", "チャート", "Chart" ], "official": [], "aliases": [ "グラフ", "Data Visualization" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "feed", "ja": "フィード", "en": "Feed", "aliases": [ "Activity Stream" ], "names": { "canonical": { "ja": "フィード", "en": "Feed", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Activity Stream", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フィード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Feed", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Activity Stream", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "更新項目を連続して読み込み可能な時系列一覧として表示する。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "ol", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "更新項目を連続して読み込み可能な時系列一覧として表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Feedは「更新項目を連続して読み込み可能な時系列一覧として表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Feed" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Feed" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Feed" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Feed" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Feed" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Feed" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Feed" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=feed", "implementations": { "react": "components/feed/web/ReactTailwind.tsx", "html": "components/feed/web/index.html", "native": "components/feed/mobile/ReactNative.tsx", "compose": "components/feed/android/AndroidCompose.kt", "swiftui": "components/feed/apple/SwiftUI.swift", "winui": "components/feed/windows/WinUI.xaml", "flutter": "components/feed/cross-platform/Flutter.dart" }, "figma": { "preview": "components/feed/figma/preview.svg", "tokens": "components/feed/figma/tokens.tokens.json", "spec": "components/feed/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "feed", "フィード", "Feed" ], "official": [], "aliases": [ "Activity Stream" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "property-grid", "ja": "プロパティグリッド", "en": "Property Grid", "aliases": [ "Property Sheet" ], "names": { "canonical": { "ja": "プロパティグリッド", "en": "Property Grid", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Property Sheet", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "プロパティグリッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Property Grid", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Property Sheet", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "属性名と編集可能な値を表形式でまとめる。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "dl", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "属性名と編集可能な値を表形式でまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Property Gridは「属性名と編集可能な値を表形式でまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "card", "list", "list-item", "description-list" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Property Grid" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Property Grid" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Property Grid" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Property Grid" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Property Grid" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Property Grid" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Property Grid" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=property-grid", "implementations": { "react": "components/property-grid/web/ReactTailwind.tsx", "html": "components/property-grid/web/index.html", "native": "components/property-grid/mobile/ReactNative.tsx", "compose": "components/property-grid/android/AndroidCompose.kt", "swiftui": "components/property-grid/apple/SwiftUI.swift", "winui": "components/property-grid/windows/WinUI.xaml", "flutter": "components/property-grid/cross-platform/Flutter.dart" }, "figma": { "preview": "components/property-grid/figma/preview.svg", "tokens": "components/property-grid/figma/tokens.tokens.json", "spec": "components/property-grid/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "property-grid", "プロパティグリッド", "Property Grid" ], "official": [], "aliases": [ "Property Sheet" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "status-indicator", "ja": "ステータスインジケーター", "en": "Status Indicator", "aliases": [ "Status Dot" ], "names": { "canonical": { "ja": "ステータスインジケーター", "en": "Status Indicator", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Status Dot", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ステータスインジケーター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Status Indicator", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Status Dot", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "オンラインなどの状態を点や記号で示す。", "category": "data-display", "categoryLabel": { "ja": "情報表示", "en": "Data Display" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "span", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "オンラインなどの状態を点や記号で示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Status Indicatorは「オンラインなどの状態を点や記号で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "heading", "body-text", "icon", "avatar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Status Indicator" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Status Indicator" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Status Indicator" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Status Indicator" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Status Indicator" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Status Indicator" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Status Indicator" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=status-indicator", "implementations": { "react": "components/status-indicator/web/ReactTailwind.tsx", "html": "components/status-indicator/web/index.html", "native": "components/status-indicator/mobile/ReactNative.tsx", "compose": "components/status-indicator/android/AndroidCompose.kt", "swiftui": "components/status-indicator/apple/SwiftUI.swift", "winui": "components/status-indicator/windows/WinUI.xaml", "flutter": "components/status-indicator/cross-platform/Flutter.dart" }, "figma": { "preview": "components/status-indicator/figma/preview.svg", "tokens": "components/status-indicator/figma/tokens.tokens.json", "spec": "components/status-indicator/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "status-indicator", "ステータスインジケーター", "Status Indicator" ], "official": [], "aliases": [ "Status Dot" ], "relatedNames": [], "facets": [ "情報を読む・比較", "情報表示", "Data Display", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "alert", "ja": "アラート", "en": "Alert", "aliases": [ "警告", "Message Box" ], "names": { "canonical": { "ja": "アラート", "en": "Alert", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "警告", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Message Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アラート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Alert", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "警告", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Message Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "重要な状態や注意をページ内で明示する。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": "alert", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"alert\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "重要な状態や注意をページ内で明示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Alertは「重要な状態や注意をページ内で明示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "callout", "notification", "banner", "error-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Alert" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Alert" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Alert" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Alert" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Alert" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Alert" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Alert" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=alert", "implementations": { "react": "components/alert/web/ReactTailwind.tsx", "html": "components/alert/web/index.html", "native": "components/alert/mobile/ReactNative.tsx", "compose": "components/alert/android/AndroidCompose.kt", "swiftui": "components/alert/apple/SwiftUI.swift", "winui": "components/alert/windows/WinUI.xaml", "flutter": "components/alert/cross-platform/Flutter.dart" }, "figma": { "preview": "components/alert/figma/preview.svg", "tokens": "components/alert/figma/tokens.tokens.json", "spec": "components/alert/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "alert", "アラート", "Alert" ], "official": [], "aliases": [ "警告", "Message Box" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "callout", "ja": "コールアウト", "en": "Callout", "aliases": [ "Note", "Info Box" ], "names": { "canonical": { "ja": "コールアウト", "en": "Callout", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Note", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Info Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コールアウト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Callout", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Note", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Info Box", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "本文中の補足・注意・ヒントを強調する。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "本文中の補足・注意・ヒントを強調する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Calloutは「本文中の補足・注意・ヒントを強調する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "alert", "notification", "banner", "error-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Callout" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Callout" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Callout" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Callout" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Callout" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Callout" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Callout" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=callout", "implementations": { "react": "components/callout/web/ReactTailwind.tsx", "html": "components/callout/web/index.html", "native": "components/callout/mobile/ReactNative.tsx", "compose": "components/callout/android/AndroidCompose.kt", "swiftui": "components/callout/apple/SwiftUI.swift", "winui": "components/callout/windows/WinUI.xaml", "flutter": "components/callout/cross-platform/Flutter.dart" }, "figma": { "preview": "components/callout/figma/preview.svg", "tokens": "components/callout/figma/tokens.tokens.json", "spec": "components/callout/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "callout", "コールアウト", "Callout" ], "official": [], "aliases": [ "Note", "Info Box" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "banner", "ja": "バナー通知", "en": "Banner", "aliases": [ "Announcement Bar" ], "names": { "canonical": { "ja": "バナー通知", "en": "Banner", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Announcement Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "バナー通知", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Banner", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Announcement Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "画面幅を使って継続的な重要情報を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "画面上部", "Top", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "画面幅を使って継続的な重要情報を示す。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Bannerは「画面幅を使って継続的な重要情報を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "error-summary", "alert", "callout", "toast" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Banner" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Banner" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Banner" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Banner" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Banner" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Banner" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Banner" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=banner", "implementations": { "react": "components/banner/web/ReactTailwind.tsx", "html": "components/banner/web/index.html", "native": "components/banner/mobile/ReactNative.tsx", "compose": "components/banner/android/AndroidCompose.kt", "swiftui": "components/banner/apple/SwiftUI.swift", "winui": "components/banner/windows/WinUI.xaml", "flutter": "components/banner/cross-platform/Flutter.dart" }, "figma": { "preview": "components/banner/figma/preview.svg", "tokens": "components/banner/figma/tokens.tokens.json", "spec": "components/banner/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "banner", "バナー通知", "Banner" ], "official": [], "aliases": [ "Announcement Bar" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "画面上部", "Top", "component", "none", "not-applicable" ] } }, { "id": "toast", "ja": "トースト", "en": "Toast", "aliases": [ "ポップアップ通知" ], "names": { "canonical": { "ja": "トースト", "en": "Toast", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ポップアップ通知", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "トースト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Toast", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ポップアップ通知", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "操作結果を一時的に重ねて知らせる小さな通知。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "前面レイヤー", "Overlay", "component", "none", "allowed", "transient" ], "semantics": { "element": "div", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "操作結果を一時的に重ねて知らせる小さな通知。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Toastは「操作結果を一時的に重ねて知らせる小さな通知。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "loading-overlay", "snackbar", "notification", "inline-validation" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Toast" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Toast" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Toast" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Toast" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Toast" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Toast" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Toast" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=toast", "implementations": { "react": "components/toast/web/ReactTailwind.tsx", "html": "components/toast/web/index.html", "native": "components/toast/mobile/ReactNative.tsx", "compose": "components/toast/android/AndroidCompose.kt", "swiftui": "components/toast/apple/SwiftUI.swift", "winui": "components/toast/windows/WinUI.xaml", "flutter": "components/toast/cross-platform/Flutter.dart" }, "figma": { "preview": "components/toast/figma/preview.svg", "tokens": "components/toast/figma/tokens.tokens.json", "spec": "components/toast/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "toast", "トースト", "Toast" ], "official": [], "aliases": [ "ポップアップ通知" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "前面レイヤー", "Overlay", "component", "none", "allowed", "transient" ] } }, { "id": "snackbar", "ja": "スナックバー", "en": "Snackbar", "aliases": [ "Action Toast" ], "names": { "canonical": { "ja": "スナックバー", "en": "Snackbar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Action Toast", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スナックバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Snackbar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Action Toast", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "短い通知と任意の1操作を一時表示する。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "画面下部", "Bottom", "component", "none", "allowed", "transient" ], "semantics": { "element": "div", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "短い通知と任意の1操作を一時表示する。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Snackbarは「短い通知と任意の1操作を一時表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "toast", "notification", "inline-validation", "loading-spinner" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Snackbar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Snackbar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Snackbar" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Snackbar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Snackbar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Snackbar" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Snackbar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=snackbar", "implementations": { "react": "components/snackbar/web/ReactTailwind.tsx", "html": "components/snackbar/web/index.html", "native": "components/snackbar/mobile/ReactNative.tsx", "compose": "components/snackbar/android/AndroidCompose.kt", "swiftui": "components/snackbar/apple/SwiftUI.swift", "winui": "components/snackbar/windows/WinUI.xaml", "flutter": "components/snackbar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/snackbar/figma/preview.svg", "tokens": "components/snackbar/figma/tokens.tokens.json", "spec": "components/snackbar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "snackbar", "スナックバー", "Snackbar" ], "official": [], "aliases": [ "Action Toast" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "画面下部", "Bottom", "component", "none", "allowed", "transient" ] } }, { "id": "notification", "ja": "通知カード", "en": "Notification", "aliases": [ "Notification Item" ], "names": { "canonical": { "ja": "通知カード", "en": "Notification", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Notification Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "通知カード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Notification", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Notification Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "個別の出来事や更新をカード形式で知らせる。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "component", "none", "allowed", "transient" ], "semantics": { "element": "article", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "個別の出来事や更新をカード形式で知らせる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Notificationは「個別の出来事や更新をカード形式で知らせる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "alert", "callout", "toast", "snackbar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Notification" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Notification" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Notification" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Notification" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Notification" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Notification" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Notification" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=notification", "implementations": { "react": "components/notification/web/ReactTailwind.tsx", "html": "components/notification/web/index.html", "native": "components/notification/mobile/ReactNative.tsx", "compose": "components/notification/android/AndroidCompose.kt", "swiftui": "components/notification/apple/SwiftUI.swift", "winui": "components/notification/windows/WinUI.xaml", "flutter": "components/notification/cross-platform/Flutter.dart" }, "figma": { "preview": "components/notification/figma/preview.svg", "tokens": "components/notification/figma/tokens.tokens.json", "spec": "components/notification/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "notification", "通知カード", "Notification" ], "official": [], "aliases": [ "Notification Item" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "component", "none", "allowed", "transient" ] } }, { "id": "notification-center", "ja": "通知センター", "en": "Notification Center", "aliases": [ "通知一覧" ], "names": { "canonical": { "ja": "通知センター", "en": "Notification Center", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "通知一覧", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "通知センター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Notification Center", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "通知一覧", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数通知を時系列でまとめる領域。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "複数通知を時系列でまとめる領域。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Notification Centerは「複数通知を時系列でまとめる領域。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "alert", "callout", "banner", "error-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Notification Center" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Notification Center" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Notification Center" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Notification Center" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Notification Center" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Notification Center" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Notification Center" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=notification-center", "implementations": { "react": "components/notification-center/web/ReactTailwind.tsx", "html": "components/notification-center/web/index.html", "native": "components/notification-center/mobile/ReactNative.tsx", "compose": "components/notification-center/android/AndroidCompose.kt", "swiftui": "components/notification-center/apple/SwiftUI.swift", "winui": "components/notification-center/windows/WinUI.xaml", "flutter": "components/notification-center/cross-platform/Flutter.dart" }, "figma": { "preview": "components/notification-center/figma/preview.svg", "tokens": "components/notification-center/figma/tokens.tokens.json", "spec": "components/notification-center/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "notification-center", "通知センター", "Notification Center" ], "official": [], "aliases": [ "通知一覧" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "inline-validation", "ja": "インライン検証", "en": "Inline Validation", "aliases": [ "Field Error" ], "names": { "canonical": { "ja": "インライン検証", "en": "Inline Validation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Field Error", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "インライン検証", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Inline Validation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Field Error", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "入力欄の近くでエラーや成功を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "component", "none", "allowed", "transient" ], "semantics": { "element": "p", "role": "alert", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"alert\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "入力欄の近くでエラーや成功を示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Inline Validationは「入力欄の近くでエラーや成功を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "loading-spinner", "toast", "snackbar", "notification" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Inline Validation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Inline Validation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Inline Validation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Inline Validation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Inline Validation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Inline Validation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Inline Validation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=inline-validation", "implementations": { "react": "components/inline-validation/web/ReactTailwind.tsx", "html": "components/inline-validation/web/index.html", "native": "components/inline-validation/mobile/ReactNative.tsx", "compose": "components/inline-validation/android/AndroidCompose.kt", "swiftui": "components/inline-validation/apple/SwiftUI.swift", "winui": "components/inline-validation/windows/WinUI.xaml", "flutter": "components/inline-validation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/inline-validation/figma/preview.svg", "tokens": "components/inline-validation/figma/tokens.tokens.json", "spec": "components/inline-validation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "inline-validation", "インライン検証", "Inline Validation" ], "official": [], "aliases": [ "Field Error" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "component", "none", "allowed", "transient" ] } }, { "id": "error-summary", "ja": "エラー概要", "en": "Error Summary", "aliases": [ "Validation Summary" ], "names": { "canonical": { "ja": "エラー概要", "en": "Error Summary", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Validation Summary", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "エラー概要", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Error Summary", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Validation Summary", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "フォーム内の複数エラーを先頭でまとめる。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "画面上部", "Top", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": "alert", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"alert\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "フォーム内の複数エラーを先頭でまとめる。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Error Summaryは「フォーム内の複数エラーを先頭でまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "banner", "alert", "callout", "toast" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Error Summary" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Error Summary" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Error Summary" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Error Summary" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Error Summary" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Error Summary" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Error Summary" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=error-summary", "implementations": { "react": "components/error-summary/web/ReactTailwind.tsx", "html": "components/error-summary/web/index.html", "native": "components/error-summary/mobile/ReactNative.tsx", "compose": "components/error-summary/android/AndroidCompose.kt", "swiftui": "components/error-summary/apple/SwiftUI.swift", "winui": "components/error-summary/windows/WinUI.xaml", "flutter": "components/error-summary/cross-platform/Flutter.dart" }, "figma": { "preview": "components/error-summary/figma/preview.svg", "tokens": "components/error-summary/figma/tokens.tokens.json", "spec": "components/error-summary/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "error-summary", "エラー概要", "Error Summary" ], "official": [], "aliases": [ "Validation Summary" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "画面上部", "Top", "component", "none", "not-applicable" ] } }, { "id": "loading-spinner", "ja": "ローディングスピナー", "en": "Loading Spinner", "aliases": [ "Activity Indicator" ], "names": { "canonical": { "ja": "ローディングスピナー", "en": "Loading Spinner", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Activity Indicator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ローディングスピナー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Loading Spinner", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Activity Indicator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "完了時刻が不明な処理中を回転で示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "component", "none", "allowed", "transient" ], "semantics": { "element": "div", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "完了時刻が不明な処理中を回転で示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Loading Spinnerは「完了時刻が不明な処理中を回転で示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "inline-validation", "toast", "snackbar", "notification" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Loading Spinner" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Loading Spinner" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Loading Spinner" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Loading Spinner" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Loading Spinner" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Loading Spinner" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Loading Spinner" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=loading-spinner", "implementations": { "react": "components/loading-spinner/web/ReactTailwind.tsx", "html": "components/loading-spinner/web/index.html", "native": "components/loading-spinner/mobile/ReactNative.tsx", "compose": "components/loading-spinner/android/AndroidCompose.kt", "swiftui": "components/loading-spinner/apple/SwiftUI.swift", "winui": "components/loading-spinner/windows/WinUI.xaml", "flutter": "components/loading-spinner/cross-platform/Flutter.dart" }, "figma": { "preview": "components/loading-spinner/figma/preview.svg", "tokens": "components/loading-spinner/figma/tokens.tokens.json", "spec": "components/loading-spinner/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "loading-spinner", "ローディングスピナー", "Loading Spinner" ], "official": [], "aliases": [ "Activity Indicator" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "component", "none", "allowed", "transient" ] } }, { "id": "loading-overlay", "ja": "ローディングオーバーレイ", "en": "Loading Overlay", "aliases": [ "Blocking Loader" ], "names": { "canonical": { "ja": "ローディングオーバーレイ", "en": "Loading Overlay", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Blocking Loader", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ローディングオーバーレイ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Loading Overlay", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Blocking Loader", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "領域を一時的に覆って処理中を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "前面レイヤー", "Overlay", "component", "none", "blocked", "transient" ], "semantics": { "element": "div", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "領域を一時的に覆って処理中を示す。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Loading Overlayは「領域を一時的に覆って処理中を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "toast", "alert", "callout", "banner" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Loading Overlay" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Loading Overlay" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Loading Overlay" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Loading Overlay" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Loading Overlay" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Loading Overlay" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Loading Overlay" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=loading-overlay", "implementations": { "react": "components/loading-overlay/web/ReactTailwind.tsx", "html": "components/loading-overlay/web/index.html", "native": "components/loading-overlay/mobile/ReactNative.tsx", "compose": "components/loading-overlay/android/AndroidCompose.kt", "swiftui": "components/loading-overlay/apple/SwiftUI.swift", "winui": "components/loading-overlay/windows/WinUI.xaml", "flutter": "components/loading-overlay/cross-platform/Flutter.dart" }, "figma": { "preview": "components/loading-overlay/figma/preview.svg", "tokens": "components/loading-overlay/figma/tokens.tokens.json", "spec": "components/loading-overlay/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "loading-overlay", "ローディングオーバーレイ", "Loading Overlay" ], "official": [], "aliases": [ "Blocking Loader" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "前面レイヤー", "Overlay", "component", "none", "blocked", "transient" ] } }, { "id": "success-state", "ja": "成功状態", "en": "Success State", "aliases": [ "完了画面" ], "names": { "canonical": { "ja": "成功状態", "en": "Success State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "完了画面", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "成功状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Success State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "完了画面", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "操作が正常に完了したことと次の行動を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "操作が正常に完了したことと次の行動を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Success Stateは「操作が正常に完了したことと次の行動を示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "error-state", "empty-state", "no-results", "offline-state" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Success State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Success State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Success State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Success State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Success State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Success State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Success State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=success-state", "implementations": { "react": "components/success-state/web/ReactTailwind.tsx", "html": "components/success-state/web/index.html", "native": "components/success-state/mobile/ReactNative.tsx", "compose": "components/success-state/android/AndroidCompose.kt", "swiftui": "components/success-state/apple/SwiftUI.swift", "winui": "components/success-state/windows/WinUI.xaml", "flutter": "components/success-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/success-state/figma/preview.svg", "tokens": "components/success-state/figma/tokens.tokens.json", "spec": "components/success-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "success-state", "成功状態", "Success State" ], "official": [], "aliases": [ "完了画面" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "error-state", "ja": "エラー状態", "en": "Error State", "aliases": [ "Failure State" ], "names": { "canonical": { "ja": "エラー状態", "en": "Error State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Failure State", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "エラー状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Error State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Failure State", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "失敗理由と再試行などの回復手段を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "失敗理由と再試行などの回復手段を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Error Stateは「失敗理由と再試行などの回復手段を示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "empty-state", "no-results", "offline-state" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Error State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Error State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Error State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Error State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Error State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Error State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Error State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=error-state", "implementations": { "react": "components/error-state/web/ReactTailwind.tsx", "html": "components/error-state/web/index.html", "native": "components/error-state/mobile/ReactNative.tsx", "compose": "components/error-state/android/AndroidCompose.kt", "swiftui": "components/error-state/apple/SwiftUI.swift", "winui": "components/error-state/windows/WinUI.xaml", "flutter": "components/error-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/error-state/figma/preview.svg", "tokens": "components/error-state/figma/tokens.tokens.json", "spec": "components/error-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "error-state", "エラー状態", "Error State" ], "official": [], "aliases": [ "Failure State" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "empty-state", "ja": "空状態", "en": "Empty State", "aliases": [ "空画面" ], "names": { "canonical": { "ja": "空状態", "en": "Empty State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "空画面", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "空状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Empty State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "空画面", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "データがまだない理由と最初の行動を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "データがまだない理由と最初の行動を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Empty Stateは「データがまだない理由と最初の行動を示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "error-state", "no-results", "offline-state" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Empty State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Empty State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Empty State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Empty State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Empty State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Empty State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Empty State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=empty-state", "implementations": { "react": "components/empty-state/web/ReactTailwind.tsx", "html": "components/empty-state/web/index.html", "native": "components/empty-state/mobile/ReactNative.tsx", "compose": "components/empty-state/android/AndroidCompose.kt", "swiftui": "components/empty-state/apple/SwiftUI.swift", "winui": "components/empty-state/windows/WinUI.xaml", "flutter": "components/empty-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/empty-state/figma/preview.svg", "tokens": "components/empty-state/figma/tokens.tokens.json", "spec": "components/empty-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "empty-state", "空状態", "Empty State" ], "official": [], "aliases": [ "空画面" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "no-results", "ja": "検索結果なし", "en": "No Results", "aliases": [ "0件", "No Matches" ], "names": { "canonical": { "ja": "検索結果なし", "en": "No Results", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "0件", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "No Matches", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "検索結果なし", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "No Results", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "0件", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "No Matches", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "検索条件に一致する項目がない状態。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "検索条件に一致する項目がない状態。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "No Resultsは「検索条件に一致する項目がない状態。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "error-state", "empty-state", "offline-state" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "No Results" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "No Results" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "No Results" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "No Results" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "No Results" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "No Results" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "No Results" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=no-results", "implementations": { "react": "components/no-results/web/ReactTailwind.tsx", "html": "components/no-results/web/index.html", "native": "components/no-results/mobile/ReactNative.tsx", "compose": "components/no-results/android/AndroidCompose.kt", "swiftui": "components/no-results/apple/SwiftUI.swift", "winui": "components/no-results/windows/WinUI.xaml", "flutter": "components/no-results/cross-platform/Flutter.dart" }, "figma": { "preview": "components/no-results/figma/preview.svg", "tokens": "components/no-results/figma/tokens.tokens.json", "spec": "components/no-results/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "no-results", "検索結果なし", "No Results" ], "official": [], "aliases": [ "0件", "No Matches" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "offline-state", "ja": "オフライン状態", "en": "Offline State", "aliases": [ "Network Error" ], "names": { "canonical": { "ja": "オフライン状態", "en": "Offline State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Network Error", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "オフライン状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Offline State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Network Error", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ネット接続がないことと利用可能な操作を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ネット接続がないことと利用可能な操作を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Offline Stateは「ネット接続がないことと利用可能な操作を示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "error-state", "empty-state", "no-results" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Offline State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Offline State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Offline State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Offline State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Offline State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Offline State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Offline State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=offline-state", "implementations": { "react": "components/offline-state/web/ReactTailwind.tsx", "html": "components/offline-state/web/index.html", "native": "components/offline-state/mobile/ReactNative.tsx", "compose": "components/offline-state/android/AndroidCompose.kt", "swiftui": "components/offline-state/apple/SwiftUI.swift", "winui": "components/offline-state/windows/WinUI.xaml", "flutter": "components/offline-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/offline-state/figma/preview.svg", "tokens": "components/offline-state/figma/tokens.tokens.json", "spec": "components/offline-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "offline-state", "オフライン状態", "Offline State" ], "official": [], "aliases": [ "Network Error" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "maintenance-state", "ja": "メンテナンス状態", "en": "Maintenance State", "aliases": [ "Service Unavailable" ], "names": { "canonical": { "ja": "メンテナンス状態", "en": "Maintenance State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Service Unavailable", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メンテナンス状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Maintenance State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Service Unavailable", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一時停止中の理由と再開見込みを示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "一時停止中の理由と再開見込みを示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Maintenance Stateは「一時停止中の理由と再開見込みを示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "error-state", "empty-state", "no-results" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Maintenance State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Maintenance State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Maintenance State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Maintenance State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Maintenance State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Maintenance State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Maintenance State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=maintenance-state", "implementations": { "react": "components/maintenance-state/web/ReactTailwind.tsx", "html": "components/maintenance-state/web/index.html", "native": "components/maintenance-state/mobile/ReactNative.tsx", "compose": "components/maintenance-state/android/AndroidCompose.kt", "swiftui": "components/maintenance-state/apple/SwiftUI.swift", "winui": "components/maintenance-state/windows/WinUI.xaml", "flutter": "components/maintenance-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/maintenance-state/figma/preview.svg", "tokens": "components/maintenance-state/figma/tokens.tokens.json", "spec": "components/maintenance-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "maintenance-state", "メンテナンス状態", "Maintenance State" ], "official": [], "aliases": [ "Service Unavailable" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "permission-denied-state", "ja": "権限不足状態", "en": "Permission Denied State", "aliases": [ "403", "Access Denied" ], "names": { "canonical": { "ja": "権限不足状態", "en": "Permission Denied State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "403", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Access Denied", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "権限不足状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Permission Denied State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "403", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Access Denied", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "アクセス権限がない理由と申請手段を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "blocked", "persistent" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "アクセス権限がない理由と申請手段を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Permission Denied Stateは「アクセス権限がない理由と申請手段を示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "error-state", "empty-state", "no-results" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Permission Denied State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Permission Denied State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Permission Denied State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Permission Denied State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Permission Denied State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Permission Denied State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Permission Denied State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=permission-denied-state", "implementations": { "react": "components/permission-denied-state/web/ReactTailwind.tsx", "html": "components/permission-denied-state/web/index.html", "native": "components/permission-denied-state/mobile/ReactNative.tsx", "compose": "components/permission-denied-state/android/AndroidCompose.kt", "swiftui": "components/permission-denied-state/apple/SwiftUI.swift", "winui": "components/permission-denied-state/windows/WinUI.xaml", "flutter": "components/permission-denied-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/permission-denied-state/figma/preview.svg", "tokens": "components/permission-denied-state/figma/tokens.tokens.json", "spec": "components/permission-denied-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "permission-denied-state", "権限不足状態", "Permission Denied State" ], "official": [], "aliases": [ "403", "Access Denied" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "blocked", "persistent" ] } }, { "id": "not-found-state", "ja": "ページ未検出状態", "en": "Not Found State", "aliases": [ "404 Page" ], "names": { "canonical": { "ja": "ページ未検出状態", "en": "Not Found State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "404 Page", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ページ未検出状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Not Found State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "404 Page", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "対象ページが存在しないことと戻り先を示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "対象ページが存在しないことと戻り先を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Not Found Stateは「対象ページが存在しないことと戻り先を示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "success-state", "error-state", "empty-state", "no-results" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Not Found State" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Not Found State" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Not Found State" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Not Found State" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Not Found State" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Not Found State" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Not Found State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=not-found-state", "implementations": { "react": "components/not-found-state/web/ReactTailwind.tsx", "html": "components/not-found-state/web/index.html", "native": "components/not-found-state/mobile/ReactNative.tsx", "compose": "components/not-found-state/android/AndroidCompose.kt", "swiftui": "components/not-found-state/apple/SwiftUI.swift", "winui": "components/not-found-state/windows/WinUI.xaml", "flutter": "components/not-found-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/not-found-state/figma/preview.svg", "tokens": "components/not-found-state/figma/tokens.tokens.json", "spec": "components/not-found-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "not-found-state", "ページ未検出状態", "Not Found State" ], "official": [], "aliases": [ "404 Page" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "コンテンツ領域", "In content", "state", "none", "not-applicable", "persistent" ] } }, { "id": "unsaved-changes", "ja": "未保存変更表示", "en": "Unsaved Changes Indicator", "aliases": [ "Dirty State" ], "names": { "canonical": { "ja": "未保存変更表示", "en": "Unsaved Changes Indicator", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Dirty State", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "未保存変更表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Unsaved Changes Indicator", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dirty State", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "保存前の変更が残っていることを示す。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "state", "none", "not-applicable", "persistent" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "persistent" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "保存前の変更が残っていることを示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Unsaved Changes Indicatorは「保存前の変更が残っていることを示す。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "connection-status", "success-state", "error-state", "empty-state" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Unsaved Changes Indicator" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Unsaved Changes Indicator" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Unsaved Changes Indicator" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Unsaved Changes Indicator" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Unsaved Changes Indicator" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Unsaved Changes Indicator" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Unsaved Changes Indicator" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=unsaved-changes", "implementations": { "react": "components/unsaved-changes/web/ReactTailwind.tsx", "html": "components/unsaved-changes/web/index.html", "native": "components/unsaved-changes/mobile/ReactNative.tsx", "compose": "components/unsaved-changes/android/AndroidCompose.kt", "swiftui": "components/unsaved-changes/apple/SwiftUI.swift", "winui": "components/unsaved-changes/windows/WinUI.xaml", "flutter": "components/unsaved-changes/cross-platform/Flutter.dart" }, "figma": { "preview": "components/unsaved-changes/figma/preview.svg", "tokens": "components/unsaved-changes/figma/tokens.tokens.json", "spec": "components/unsaved-changes/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "unsaved-changes", "未保存変更表示", "Unsaved Changes Indicator" ], "official": [], "aliases": [ "Dirty State" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "state", "none", "not-applicable", "persistent" ] } }, { "id": "connection-status", "ja": "接続状態", "en": "Connection Status", "aliases": [ "Network Status" ], "names": { "canonical": { "ja": "接続状態", "en": "Connection Status", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Network Status", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "接続状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Connection Status", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Network Status", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "オンライン・再接続中・切断を明示する。", "category": "feedback", "categoryLabel": { "ja": "状態・フィードバック", "en": "Feedback & Status" }, "kind": "state", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "state", "none", "allowed", "transient" ], "semantics": { "element": "section", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "状態の要約", "詳細説明", "必要な回復操作" ], "states": [ "default" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "オンライン・再接続中・切断を明示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "ユーザーが今すぐ実行すべき主要操作だけを示す場合。" ], "differences": [ "Connection Statusは「オンライン・再接続中・切断を明示する。」ための状態表示です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "unsaved-changes", "inline-validation", "loading-spinner", "success-state" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Connection Status" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Connection Status" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Connection Status" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Connection Status" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Connection Status" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Connection Status" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Connection Status" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=connection-status", "implementations": { "react": "components/connection-status/web/ReactTailwind.tsx", "html": "components/connection-status/web/index.html", "native": "components/connection-status/mobile/ReactNative.tsx", "compose": "components/connection-status/android/AndroidCompose.kt", "swiftui": "components/connection-status/apple/SwiftUI.swift", "winui": "components/connection-status/windows/WinUI.xaml", "flutter": "components/connection-status/cross-platform/Flutter.dart" }, "figma": { "preview": "components/connection-status/figma/preview.svg", "tokens": "components/connection-status/figma/tokens.tokens.json", "spec": "components/connection-status/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "connection-status", "接続状態", "Connection Status" ], "official": [], "aliases": [ "Network Status" ], "relatedNames": [], "facets": [ "状態を知らせる", "状態・フィードバック", "Feedback & Status", "要素の近く", "Anchored / inline", "state", "none", "allowed", "transient" ] } }, { "id": "dialog", "ja": "ダイアログ", "en": "Dialog", "aliases": [ "非モーダルダイアログ" ], "names": { "canonical": { "ja": "ダイアログ", "en": "Dialog", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "非モーダルダイアログ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ダイアログ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dialog", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "非モーダルダイアログ", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "作業を中断せず補助内容や選択を重ねて表示する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": "dialog", "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "見出し", "本文", "主要・取消操作", "モーダル時の背景レイヤー" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "必要な場合は role=\"dialog\" と対応するaria状態を同期する。", "aria-labelledbyで見出しを参照し、開いたら初期フォーカスを管理する。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "作業を中断せず補助内容や選択を重ねて表示する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Dialogは「作業を中断せず補助内容や選択を重ねて表示する。」ためのコンポーネントです。", "Popoverと異なり、重要なまとまりとしてフォーカス移動と閉じる操作を管理します。" ], "relatedIds": [ "modal-dialog", "alert-dialog", "lightbox", "fullscreen-overlay" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Dialog" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Dialog" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Dialog" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Dialog" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Dialog" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Dialog" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Dialog" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=dialog", "implementations": { "react": "components/dialog/web/ReactTailwind.tsx", "html": "components/dialog/web/index.html", "native": "components/dialog/mobile/ReactNative.tsx", "compose": "components/dialog/android/AndroidCompose.kt", "swiftui": "components/dialog/apple/SwiftUI.swift", "winui": "components/dialog/windows/WinUI.xaml", "flutter": "components/dialog/cross-platform/Flutter.dart" }, "figma": { "preview": "components/dialog/figma/preview.svg", "tokens": "components/dialog/figma/tokens.tokens.json", "spec": "components/dialog/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "dialog", "ダイアログ", "Dialog" ], "official": [], "aliases": [ "非モーダルダイアログ" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "modal-dialog", "ja": "モーダルダイアログ", "en": "Modal Dialog", "aliases": [ "モーダル", "Modal" ], "names": { "canonical": { "ja": "モーダルダイアログ", "en": "Modal Dialog", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "モーダル", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Modal", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "モーダルダイアログ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Modal Dialog", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "モーダル", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Modal", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "背景操作を止めて判断や入力へ集中させる。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": "dialog", "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "見出し", "本文", "主要・取消操作", "モーダル時の背景レイヤー" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "必要な場合は role=\"dialog\" と対応するaria状態を同期する。", "aria-labelledbyで見出しを参照し、開いたら初期フォーカスを管理する。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "背景操作を止めて判断や入力へ集中させる。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Modal Dialogは「背景操作を止めて判断や入力へ集中させる。」ためのコンポーネントです。", "Popoverと異なり、重要なまとまりとしてフォーカス移動と閉じる操作を管理します。" ], "relatedIds": [ "dialog", "alert-dialog", "lightbox", "fullscreen-overlay" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Modal Dialog" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Modal Dialog" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Modal Dialog" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Modal Dialog" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Modal Dialog" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Modal Dialog" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Modal Dialog" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=modal-dialog", "implementations": { "react": "components/modal-dialog/web/ReactTailwind.tsx", "html": "components/modal-dialog/web/index.html", "native": "components/modal-dialog/mobile/ReactNative.tsx", "compose": "components/modal-dialog/android/AndroidCompose.kt", "swiftui": "components/modal-dialog/apple/SwiftUI.swift", "winui": "components/modal-dialog/windows/WinUI.xaml", "flutter": "components/modal-dialog/cross-platform/Flutter.dart" }, "figma": { "preview": "components/modal-dialog/figma/preview.svg", "tokens": "components/modal-dialog/figma/tokens.tokens.json", "spec": "components/modal-dialog/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "modal-dialog", "モーダルダイアログ", "Modal Dialog" ], "official": [], "aliases": [ "モーダル", "Modal" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "alert-dialog", "ja": "確認ダイアログ", "en": "Alert Dialog", "aliases": [ "Confirm Dialog" ], "names": { "canonical": { "ja": "確認ダイアログ", "en": "Alert Dialog", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Confirm Dialog", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "確認ダイアログ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Alert Dialog", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Confirm Dialog", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "重要または破壊的な判断を明示的に確認する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": "alertdialog", "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "見出し", "本文", "主要・取消操作", "モーダル時の背景レイヤー" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "必要な場合は role=\"alertdialog\" と対応するaria状態を同期する。", "aria-labelledbyで見出しを参照し、開いたら初期フォーカスを管理する。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "重要または破壊的な判断を明示的に確認する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Alert Dialogは「重要または破壊的な判断を明示的に確認する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "dialog", "modal-dialog", "lightbox", "fullscreen-overlay" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Alert Dialog" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Alert Dialog" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Alert Dialog" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Alert Dialog" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Alert Dialog" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Alert Dialog" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Alert Dialog" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=alert-dialog", "implementations": { "react": "components/alert-dialog/web/ReactTailwind.tsx", "html": "components/alert-dialog/web/index.html", "native": "components/alert-dialog/mobile/ReactNative.tsx", "compose": "components/alert-dialog/android/AndroidCompose.kt", "swiftui": "components/alert-dialog/apple/SwiftUI.swift", "winui": "components/alert-dialog/windows/WinUI.xaml", "flutter": "components/alert-dialog/cross-platform/Flutter.dart" }, "figma": { "preview": "components/alert-dialog/figma/preview.svg", "tokens": "components/alert-dialog/figma/tokens.tokens.json", "spec": "components/alert-dialog/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "alert-dialog", "確認ダイアログ", "Alert Dialog" ], "official": [], "aliases": [ "Confirm Dialog" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "popover", "ja": "ポップオーバー", "en": "Popover", "aliases": [ "ポップアップパネル", "Dropdown Panel", "Flyout" ], "names": { "canonical": { "ja": "ポップオーバー", "en": "Popover", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ポップアップパネル", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Dropdown Panel", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Flyout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ポップオーバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Popover", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ポップアップパネル", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Dropdown Panel", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Flyout", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 5 }, "description": "起点の近くに操作可能な補助パネルを表示する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "起点の近くに操作可能な補助パネルを表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Popoverは「起点の近くに操作可能な補助パネルを表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "tooltip", "hover-card", "dropdown-menu", "context-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Popover" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Popover" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Popover" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Popover" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Popover" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Popover" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Popover" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=popover", "implementations": { "react": "components/popover/web/ReactTailwind.tsx", "html": "components/popover/web/index.html", "native": "components/popover/mobile/ReactNative.tsx", "compose": "components/popover/android/AndroidCompose.kt", "swiftui": "components/popover/apple/SwiftUI.swift", "winui": "components/popover/windows/WinUI.xaml", "flutter": "components/popover/cross-platform/Flutter.dart" }, "figma": { "preview": "components/popover/figma/preview.svg", "tokens": "components/popover/figma/tokens.tokens.json", "spec": "components/popover/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "popover", "ポップオーバー", "Popover" ], "official": [], "aliases": [ "ポップアップパネル", "Dropdown Panel", "Flyout" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "tooltip", "ja": "ツールチップ", "en": "Tooltip", "aliases": [ "ヒント" ], "names": { "canonical": { "ja": "ツールチップ", "en": "Tooltip", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "ヒント", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ツールチップ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Tooltip", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "ヒント", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ホバーやフォーカスで短い非操作説明を表示する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "div", "role": "tooltip", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"tooltip\" と対応するaria状態を同期する。", "トリガーからaria-describedbyでtooltipを参照し、ホバーだけに依存しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ホバーやフォーカスで短い非操作説明を表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Tooltipは「ホバーやフォーカスで短い非操作説明を表示する。」ためのコンポーネントです。", "Popoverと異なり、短い補助説明だけを置き、操作要素を入れません。" ], "relatedIds": [ "popover", "hover-card", "dropdown-menu", "context-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Tooltip" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Tooltip" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Tooltip" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Tooltip" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Tooltip" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Tooltip" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Tooltip" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=tooltip", "implementations": { "react": "components/tooltip/web/ReactTailwind.tsx", "html": "components/tooltip/web/index.html", "native": "components/tooltip/mobile/ReactNative.tsx", "compose": "components/tooltip/android/AndroidCompose.kt", "swiftui": "components/tooltip/apple/SwiftUI.swift", "winui": "components/tooltip/windows/WinUI.xaml", "flutter": "components/tooltip/cross-platform/Flutter.dart" }, "figma": { "preview": "components/tooltip/figma/preview.svg", "tokens": "components/tooltip/figma/tokens.tokens.json", "spec": "components/tooltip/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "tooltip", "ツールチップ", "Tooltip" ], "official": [], "aliases": [ "ヒント" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "hover-card", "ja": "ホバーカード", "en": "Hover Card", "aliases": [ "Preview Card" ], "names": { "canonical": { "ja": "ホバーカード", "en": "Hover Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Preview Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ホバーカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Hover Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Preview Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "対象の補足情報をホバー時に小型カードで表示する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "対象の補足情報をホバー時に小型カードで表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Hover Cardは「対象の補足情報をホバー時に小型カードで表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "popover", "tooltip", "dropdown-menu", "context-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Hover Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Hover Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Hover Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Hover Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Hover Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Hover Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Hover Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=hover-card", "implementations": { "react": "components/hover-card/web/ReactTailwind.tsx", "html": "components/hover-card/web/index.html", "native": "components/hover-card/mobile/ReactNative.tsx", "compose": "components/hover-card/android/AndroidCompose.kt", "swiftui": "components/hover-card/apple/SwiftUI.swift", "winui": "components/hover-card/windows/WinUI.xaml", "flutter": "components/hover-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/hover-card/figma/preview.svg", "tokens": "components/hover-card/figma/tokens.tokens.json", "spec": "components/hover-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "hover-card", "ホバーカード", "Hover Card" ], "official": [], "aliases": [ "Preview Card" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "dropdown-menu", "ja": "ドロップダウンメニュー", "en": "Dropdown Menu", "aliases": [ "プルダウンメニュー" ], "names": { "canonical": { "ja": "ドロップダウンメニュー", "en": "Dropdown Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "プルダウンメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ドロップダウンメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dropdown Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "プルダウンメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "起点から操作候補一覧を下方向へ展開する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "div", "role": "menu", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "トリガー", "メニューコンテナ", "メニュー項目" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Arrow keys: メニュー項目を移動", "Escape: メニューを閉じる" ], "accessibility": [ "必要な場合は role=\"menu\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "起点から操作候補一覧を下方向へ展開する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Dropdown Menuは「起点から操作候補一覧を下方向へ展開する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "popover", "tooltip", "hover-card", "context-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Dropdown Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Dropdown Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Dropdown Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Dropdown Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Dropdown Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Dropdown Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Dropdown Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=dropdown-menu", "implementations": { "react": "components/dropdown-menu/web/ReactTailwind.tsx", "html": "components/dropdown-menu/web/index.html", "native": "components/dropdown-menu/mobile/ReactNative.tsx", "compose": "components/dropdown-menu/android/AndroidCompose.kt", "swiftui": "components/dropdown-menu/apple/SwiftUI.swift", "winui": "components/dropdown-menu/windows/WinUI.xaml", "flutter": "components/dropdown-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/dropdown-menu/figma/preview.svg", "tokens": "components/dropdown-menu/figma/tokens.tokens.json", "spec": "components/dropdown-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "dropdown-menu", "ドロップダウンメニュー", "Dropdown Menu" ], "official": [], "aliases": [ "プルダウンメニュー" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "context-menu", "ja": "コンテキストメニュー", "en": "Context Menu", "aliases": [ "右クリックメニュー" ], "names": { "canonical": { "ja": "コンテキストメニュー", "en": "Context Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "右クリックメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コンテキストメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Context Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "右クリックメニュー", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "右クリックや長押し対象に応じた操作一覧。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "div", "role": "menu", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "トリガー", "メニューコンテナ", "メニュー項目" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Arrow keys: メニュー項目を移動", "Escape: メニューを閉じる" ], "accessibility": [ "必要な場合は role=\"menu\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "右クリックや長押し対象に応じた操作一覧。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Context Menuは「右クリックや長押し対象に応じた操作一覧。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "popover", "tooltip", "hover-card", "dropdown-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Context Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Context Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Context Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Context Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Context Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Context Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Context Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=context-menu", "implementations": { "react": "components/context-menu/web/ReactTailwind.tsx", "html": "components/context-menu/web/index.html", "native": "components/context-menu/mobile/ReactNative.tsx", "compose": "components/context-menu/android/AndroidCompose.kt", "swiftui": "components/context-menu/apple/SwiftUI.swift", "winui": "components/context-menu/windows/WinUI.xaml", "flutter": "components/context-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/context-menu/figma/preview.svg", "tokens": "components/context-menu/figma/tokens.tokens.json", "spec": "components/context-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "context-menu", "コンテキストメニュー", "Context Menu" ], "official": [], "aliases": [ "右クリックメニュー" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "action-menu", "ja": "アクションメニュー", "en": "Action Menu", "aliases": [ "More Menu" ], "names": { "canonical": { "ja": "アクションメニュー", "en": "Action Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "More Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アクションメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Action Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "More Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "対象項目に対する複数操作をまとめるメニュー。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "div", "role": "menu", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "トリガー", "メニューコンテナ", "メニュー項目" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Arrow keys: メニュー項目を移動", "Escape: メニューを閉じる" ], "accessibility": [ "必要な場合は role=\"menu\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "対象項目に対する複数操作をまとめるメニュー。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Action Menuは「対象項目に対する複数操作をまとめるメニュー。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "popover", "tooltip", "hover-card", "dropdown-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Action Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Action Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Action Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Action Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Action Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Action Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Action Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=action-menu", "implementations": { "react": "components/action-menu/web/ReactTailwind.tsx", "html": "components/action-menu/web/index.html", "native": "components/action-menu/mobile/ReactNative.tsx", "compose": "components/action-menu/android/AndroidCompose.kt", "swiftui": "components/action-menu/apple/SwiftUI.swift", "winui": "components/action-menu/windows/WinUI.xaml", "flutter": "components/action-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/action-menu/figma/preview.svg", "tokens": "components/action-menu/figma/tokens.tokens.json", "spec": "components/action-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "action-menu", "アクションメニュー", "Action Menu" ], "official": [], "aliases": [ "More Menu" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "drawer", "ja": "ドロワー", "en": "Drawer", "aliases": [ "Off-canvas Panel", "Slide-over Panel" ], "names": { "canonical": { "ja": "ドロワー", "en": "Drawer", "status": "official-in-named-system" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [ { "value": "Drawer", "language": "en", "type": "official", "system": "Ant Design", "equivalence": "exact", "source": { "title": "Drawer – Ant Design", "publisher": "Ant Design", "url": "https://ant.design/components/drawer", "retrievedAt": "2026-07-21" } } ], "aliases": [ { "value": "Off-canvas Panel", "language": "en", "type": "common-generic", "system": "web", "equivalence": "contextual", "source": null }, { "value": "Slide-over Panel", "language": "en", "type": "common-generic", "system": "web", "equivalence": "contextual", "source": null } ], "related": [ { "value": "Side Sheet", "language": "en", "type": "related-official", "system": "Material Design 2", "equivalence": "related-not-equivalent", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Navigation Drawer", "language": "en", "type": "related-official", "system": "Material Design 3", "equivalence": "specialized-navigation", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } } ], "entries": [ { "value": "ドロワー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Drawer", "language": "en", "type": "official", "system": "Ant Design", "equivalence": "exact", "source": { "title": "Drawer – Ant Design", "publisher": "Ant Design", "url": "https://ant.design/components/drawer", "retrievedAt": "2026-07-21" } }, { "value": "Off-canvas Panel", "language": "en", "type": "common-generic", "system": "web", "equivalence": "contextual", "source": null }, { "value": "Slide-over Panel", "language": "en", "type": "common-generic", "system": "web", "equivalence": "contextual", "source": null }, { "value": "Side Sheet", "language": "en", "type": "related-official", "system": "Material Design 2", "equivalence": "related-not-equivalent", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Navigation Drawer", "language": "en", "type": "related-official", "system": "Material Design 3", "equivalence": "specialized-navigation", "source": { "title": "Navigation drawer – Material Design 3", "publisher": "Google", "url": "https://m3.material.io/components/navigation-drawer/overview", "retrievedAt": "2026-07-21" } } ], "distinctions": [ "DrawerはAnt Designの正式なコンポーネント名です。画面端からスライドし、現在の文脈を離れず情報や操作を扱います。", "Off-canvas PanelとSlide-over Panelは一般名・通称として扱います。", "Side SheetはMaterial Designで補助コンテンツ面を指す名称です。Drawerの単純な別名として扱いません。", "Navigation Drawerはナビゲーション用途に限定した別部品です。" ], "lifecycle": { "status": "official-in-ant-design", "source": { "title": "Drawer – Ant Design", "publisher": "Ant Design", "url": "https://ant.design/components/drawer", "retrievedAt": "2026-07-21" } }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 6 }, "description": "画面端から一時的に現れる汎用パネル。背景操作・モーダル性は実装体系によって異なる。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "左右の側面", "Side", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "画面端から一時的に現れる汎用パネル。背景操作・モーダル性は実装体系によって異なる。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Drawerは「画面端から一時的に現れる汎用パネル。背景操作・モーダル性は実装体系によって異なる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sheet", "popover", "tooltip", "hover-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Drawer" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Drawer" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Drawer" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Drawer" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Drawer" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Drawer" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Drawer" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=drawer", "implementations": { "react": "components/drawer/web/ReactTailwind.tsx", "html": "components/drawer/web/index.html", "native": "components/drawer/mobile/ReactNative.tsx", "compose": "components/drawer/android/AndroidCompose.kt", "swiftui": "components/drawer/apple/SwiftUI.swift", "winui": "components/drawer/windows/WinUI.xaml", "flutter": "components/drawer/cross-platform/Flutter.dart" }, "figma": { "preview": "components/drawer/figma/preview.svg", "tokens": "components/drawer/figma/tokens.tokens.json", "spec": "components/drawer/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "drawer", "ドロワー", "Drawer" ], "official": [ "Drawer" ], "aliases": [ "Off-canvas Panel", "Slide-over Panel" ], "relatedNames": [ "Side Sheet", "Navigation Drawer" ], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "左右の側面", "Side", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "sheet", "ja": "サイドシート", "en": "Side Sheet", "aliases": [ "Standard Side Sheet", "Modal Side Sheet" ], "names": { "canonical": { "ja": "サイドシート", "en": "Side Sheet", "status": "official-in-named-system" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [ { "value": "Side Sheet", "language": "en", "type": "official", "system": "Material Design 2", "equivalence": "exact", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Standard Side Sheet", "language": "en", "type": "official-variant", "system": "Material Design 2", "equivalence": "variant", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Modal Side Sheet", "language": "en", "type": "official-variant", "system": "Material Design 2", "equivalence": "variant", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } } ], "aliases": [], "related": [ { "value": "Sheet", "language": "en", "type": "related-official", "system": "Apple Human Interface Guidelines", "equivalence": "related-not-equivalent", "source": { "title": "Sheets – Human Interface Guidelines", "publisher": "Apple", "url": "https://developer.apple.com/design/human-interface-guidelines/sheets", "retrievedAt": "2026-07-21" } }, { "value": "Drawer", "language": "en", "type": "related-common", "system": "multiple libraries", "equivalence": "related-not-equivalent", "source": null } ], "entries": [ { "value": "サイドシート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Side Sheet", "language": "en", "type": "official", "system": "Material Design 2", "equivalence": "exact", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Standard Side Sheet", "language": "en", "type": "official-variant", "system": "Material Design 2", "equivalence": "variant", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Modal Side Sheet", "language": "en", "type": "official-variant", "system": "Material Design 2", "equivalence": "variant", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, { "value": "Sheet", "language": "en", "type": "related-official", "system": "Apple Human Interface Guidelines", "equivalence": "related-not-equivalent", "source": { "title": "Sheets – Human Interface Guidelines", "publisher": "Apple", "url": "https://developer.apple.com/design/human-interface-guidelines/sheets", "retrievedAt": "2026-07-21" } }, { "value": "Drawer", "language": "en", "type": "related-common", "system": "multiple libraries", "equivalence": "related-not-equivalent", "source": null } ], "distinctions": [ "MaterialのSide Sheetは左右端に固定する補助コンテンツ面で、StandardとModalを区別します。", "AppleのSheetは現在の文脈に密接なスコープ付きタスクを提示する概念で、MaterialのSide Sheetと同一ではありません。", "Drawerは実装ライブラリで意味が変わる一般名のため、Side Sheetの正式な同義語として扱いません。" ], "lifecycle": { "status": "official-in-material-design-2", "source": { "title": "Sheets: side – Material Design 2", "publisher": "Google", "url": "https://m2.material.io/components/sheets-side", "retrievedAt": "2026-07-21" } }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 6 }, "description": "左右端に固定する補助コンテンツ面。標準型とモーダル型を区別する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "左右の側面", "Side", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "左右端に固定する補助コンテンツ面。標準型とモーダル型を区別する。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Side Sheetは「左右端に固定する補助コンテンツ面。標準型とモーダル型を区別する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "drawer", "popover", "tooltip", "hover-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Side Sheet" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Side Sheet" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Side Sheet" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Side Sheet" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Side Sheet" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Side Sheet" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Side Sheet" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=sheet", "implementations": { "react": "components/sheet/web/ReactTailwind.tsx", "html": "components/sheet/web/index.html", "native": "components/sheet/mobile/ReactNative.tsx", "compose": "components/sheet/android/AndroidCompose.kt", "swiftui": "components/sheet/apple/SwiftUI.swift", "winui": "components/sheet/windows/WinUI.xaml", "flutter": "components/sheet/cross-platform/Flutter.dart" }, "figma": { "preview": "components/sheet/figma/preview.svg", "tokens": "components/sheet/figma/tokens.tokens.json", "spec": "components/sheet/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "sheet", "サイドシート", "Side Sheet" ], "official": [ "Side Sheet", "Standard Side Sheet", "Modal Side Sheet" ], "aliases": [], "relatedNames": [ "Sheet", "Drawer" ], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "左右の側面", "Side", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "bottom-sheet", "ja": "ボトムシート", "en": "Bottom Sheet", "aliases": [ "下部シート" ], "names": { "canonical": { "ja": "ボトムシート", "en": "Bottom Sheet", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "下部シート", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ボトムシート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Bottom Sheet", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "下部シート", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "モバイル画面下から現れる補助パネル。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "画面下部", "Bottom", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "モバイル画面下から現れる補助パネル。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Bottom Sheetは「モバイル画面下から現れる補助パネル。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "action-sheet", "dialog", "modal-dialog", "alert-dialog" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Bottom Sheet" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Bottom Sheet" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Bottom Sheet" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Bottom Sheet" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Bottom Sheet" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Bottom Sheet" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Bottom Sheet" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=bottom-sheet", "implementations": { "react": "components/bottom-sheet/web/ReactTailwind.tsx", "html": "components/bottom-sheet/web/index.html", "native": "components/bottom-sheet/mobile/ReactNative.tsx", "compose": "components/bottom-sheet/android/AndroidCompose.kt", "swiftui": "components/bottom-sheet/apple/SwiftUI.swift", "winui": "components/bottom-sheet/windows/WinUI.xaml", "flutter": "components/bottom-sheet/cross-platform/Flutter.dart" }, "figma": { "preview": "components/bottom-sheet/figma/preview.svg", "tokens": "components/bottom-sheet/figma/tokens.tokens.json", "spec": "components/bottom-sheet/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "bottom-sheet", "ボトムシート", "Bottom Sheet" ], "official": [], "aliases": [ "下部シート" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "画面下部", "Bottom", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "action-sheet", "ja": "アクションシート", "en": "Action Sheet", "aliases": [ "iOS Action Sheet" ], "names": { "canonical": { "ja": "アクションシート", "en": "Action Sheet", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "iOS Action Sheet", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アクションシート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Action Sheet", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "iOS Action Sheet", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "モバイル下部から関連操作を一覧表示する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "画面下部", "Bottom", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "モバイル下部から関連操作を一覧表示する。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Action Sheetは「モバイル下部から関連操作を一覧表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "bottom-sheet", "dialog", "modal-dialog", "alert-dialog" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Action Sheet" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Action Sheet" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Action Sheet" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Action Sheet" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Action Sheet" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Action Sheet" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Action Sheet" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=action-sheet", "implementations": { "react": "components/action-sheet/web/ReactTailwind.tsx", "html": "components/action-sheet/web/index.html", "native": "components/action-sheet/mobile/ReactNative.tsx", "compose": "components/action-sheet/android/AndroidCompose.kt", "swiftui": "components/action-sheet/apple/SwiftUI.swift", "winui": "components/action-sheet/windows/WinUI.xaml", "flutter": "components/action-sheet/cross-platform/Flutter.dart" }, "figma": { "preview": "components/action-sheet/figma/preview.svg", "tokens": "components/action-sheet/figma/tokens.tokens.json", "spec": "components/action-sheet/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "action-sheet", "アクションシート", "Action Sheet" ], "official": [], "aliases": [ "iOS Action Sheet" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "画面下部", "Bottom", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "lightbox", "ja": "ライトボックス", "en": "Lightbox", "aliases": [ "Image Viewer" ], "names": { "canonical": { "ja": "ライトボックス", "en": "Lightbox", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Image Viewer", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ライトボックス", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Lightbox", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Image Viewer", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "画像や動画を背景より前面へ拡大表示する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "画像や動画を背景より前面へ拡大表示する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Lightboxは「画像や動画を背景より前面へ拡大表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "dialog", "modal-dialog", "alert-dialog", "fullscreen-overlay" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Lightbox" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Lightbox" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Lightbox" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Lightbox" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Lightbox" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Lightbox" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Lightbox" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=lightbox", "implementations": { "react": "components/lightbox/web/ReactTailwind.tsx", "html": "components/lightbox/web/index.html", "native": "components/lightbox/mobile/ReactNative.tsx", "compose": "components/lightbox/android/AndroidCompose.kt", "swiftui": "components/lightbox/apple/SwiftUI.swift", "winui": "components/lightbox/windows/WinUI.xaml", "flutter": "components/lightbox/cross-platform/Flutter.dart" }, "figma": { "preview": "components/lightbox/figma/preview.svg", "tokens": "components/lightbox/figma/tokens.tokens.json", "spec": "components/lightbox/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "lightbox", "ライトボックス", "Lightbox" ], "official": [], "aliases": [ "Image Viewer" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "fullscreen-overlay", "ja": "全画面オーバーレイ", "en": "Fullscreen Overlay", "aliases": [ "Full Screen Modal" ], "names": { "canonical": { "ja": "全画面オーバーレイ", "en": "Fullscreen Overlay", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Full Screen Modal", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "全画面オーバーレイ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Fullscreen Overlay", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Full Screen Modal", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "検索やメディアなどを画面全体へ重ねる。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "検索やメディアなどを画面全体へ重ねる。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Fullscreen Overlayは「検索やメディアなどを画面全体へ重ねる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "dialog", "modal-dialog", "alert-dialog", "lightbox" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Fullscreen Overlay" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Fullscreen Overlay" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Fullscreen Overlay" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Fullscreen Overlay" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Fullscreen Overlay" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Fullscreen Overlay" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Fullscreen Overlay" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=fullscreen-overlay", "implementations": { "react": "components/fullscreen-overlay/web/ReactTailwind.tsx", "html": "components/fullscreen-overlay/web/index.html", "native": "components/fullscreen-overlay/mobile/ReactNative.tsx", "compose": "components/fullscreen-overlay/android/AndroidCompose.kt", "swiftui": "components/fullscreen-overlay/apple/SwiftUI.swift", "winui": "components/fullscreen-overlay/windows/WinUI.xaml", "flutter": "components/fullscreen-overlay/cross-platform/Flutter.dart" }, "figma": { "preview": "components/fullscreen-overlay/figma/preview.svg", "tokens": "components/fullscreen-overlay/figma/tokens.tokens.json", "spec": "components/fullscreen-overlay/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "fullscreen-overlay", "全画面オーバーレイ", "Fullscreen Overlay" ], "official": [], "aliases": [ "Full Screen Modal" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "前面レイヤー", "Overlay", "component", "none", "blocked", "until-dismissed" ] } }, { "id": "coach-mark", "ja": "コーチマーク", "en": "Coach Mark", "aliases": [ "Feature Tour", "Spotlight" ], "names": { "canonical": { "ja": "コーチマーク", "en": "Coach Mark", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Feature Tour", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Spotlight", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コーチマーク", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Coach Mark", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Feature Tour", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Spotlight", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "新機能の対象を指し示して短く案内する。", "category": "overlays", "categoryLabel": { "ja": "オーバーレイ", "en": "Overlays" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "aside", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "新機能の対象を指し示して短く案内する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Coach Markは「新機能の対象を指し示して短く案内する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "popover", "tooltip", "hover-card", "dropdown-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Coach Mark" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Coach Mark" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Coach Mark" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Coach Mark" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Coach Mark" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Coach Mark" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Coach Mark" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=coach-mark", "implementations": { "react": "components/coach-mark/web/ReactTailwind.tsx", "html": "components/coach-mark/web/index.html", "native": "components/coach-mark/mobile/ReactNative.tsx", "compose": "components/coach-mark/android/AndroidCompose.kt", "swiftui": "components/coach-mark/apple/SwiftUI.swift", "winui": "components/coach-mark/windows/WinUI.xaml", "flutter": "components/coach-mark/cross-platform/Flutter.dart" }, "figma": { "preview": "components/coach-mark/figma/preview.svg", "tokens": "components/coach-mark/figma/tokens.tokens.json", "spec": "components/coach-mark/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "coach-mark", "コーチマーク", "Coach Mark" ], "official": [], "aliases": [ "Feature Tour", "Spotlight" ], "relatedNames": [], "facets": [ "補助情報・操作を前面表示", "オーバーレイ", "Overlays", "要素の近く", "Anchored / inline", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "image", "ja": "画像", "en": "Image", "aliases": [ "Picture" ], "names": { "canonical": { "ja": "画像", "en": "Image", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Picture", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "画像", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Image", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Picture", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "写真や図を内容として表示する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "img", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "写真や図を内容として表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Imageは「写真や図を内容として表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "thumbnail", "image-gallery", "video-player", "audio-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Image" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Image" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Image" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Image" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Image" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Image" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Image" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=image", "implementations": { "react": "components/image/web/ReactTailwind.tsx", "html": "components/image/web/index.html", "native": "components/image/mobile/ReactNative.tsx", "compose": "components/image/android/AndroidCompose.kt", "swiftui": "components/image/apple/SwiftUI.swift", "winui": "components/image/windows/WinUI.xaml", "flutter": "components/image/cross-platform/Flutter.dart" }, "figma": { "preview": "components/image/figma/preview.svg", "tokens": "components/image/figma/tokens.tokens.json", "spec": "components/image/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "image", "画像", "Image" ], "official": [], "aliases": [ "Picture" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "thumbnail", "ja": "サムネイル", "en": "Thumbnail", "aliases": [ "Preview Image" ], "names": { "canonical": { "ja": "サムネイル", "en": "Thumbnail", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Preview Image", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "サムネイル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Thumbnail", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Preview Image", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "内容を識別する小さな代表画像。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "img", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "内容を識別する小さな代表画像。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Thumbnailは「内容を識別する小さな代表画像。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "image-gallery", "video-player", "audio-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Thumbnail" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Thumbnail" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Thumbnail" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Thumbnail" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Thumbnail" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Thumbnail" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Thumbnail" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=thumbnail", "implementations": { "react": "components/thumbnail/web/ReactTailwind.tsx", "html": "components/thumbnail/web/index.html", "native": "components/thumbnail/mobile/ReactNative.tsx", "compose": "components/thumbnail/android/AndroidCompose.kt", "swiftui": "components/thumbnail/apple/SwiftUI.swift", "winui": "components/thumbnail/windows/WinUI.xaml", "flutter": "components/thumbnail/cross-platform/Flutter.dart" }, "figma": { "preview": "components/thumbnail/figma/preview.svg", "tokens": "components/thumbnail/figma/tokens.tokens.json", "spec": "components/thumbnail/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "thumbnail", "サムネイル", "Thumbnail" ], "official": [], "aliases": [ "Preview Image" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "image-gallery", "ja": "画像ギャラリー", "en": "Image Gallery", "aliases": [ "Photo Gallery" ], "names": { "canonical": { "ja": "画像ギャラリー", "en": "Image Gallery", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Photo Gallery", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "画像ギャラリー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Image Gallery", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Photo Gallery", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数画像を一覧・拡大で閲覧する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "ul", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数画像を一覧・拡大で閲覧する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Image Galleryは「複数画像を一覧・拡大で閲覧する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "video-player", "audio-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Image Gallery" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Image Gallery" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Image Gallery" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Image Gallery" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Image Gallery" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Image Gallery" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Image Gallery" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=image-gallery", "implementations": { "react": "components/image-gallery/web/ReactTailwind.tsx", "html": "components/image-gallery/web/index.html", "native": "components/image-gallery/mobile/ReactNative.tsx", "compose": "components/image-gallery/android/AndroidCompose.kt", "swiftui": "components/image-gallery/apple/SwiftUI.swift", "winui": "components/image-gallery/windows/WinUI.xaml", "flutter": "components/image-gallery/cross-platform/Flutter.dart" }, "figma": { "preview": "components/image-gallery/figma/preview.svg", "tokens": "components/image-gallery/figma/tokens.tokens.json", "spec": "components/image-gallery/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "image-gallery", "画像ギャラリー", "Image Gallery" ], "official": [], "aliases": [ "Photo Gallery" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "video-player", "ja": "動画プレーヤー", "en": "Video Player", "aliases": [ "Movie Player" ], "names": { "canonical": { "ja": "動画プレーヤー", "en": "Video Player", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Movie Player", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "動画プレーヤー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Video Player", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Movie Player", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "動画の再生・停止・シークを提供する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "video", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "動画の再生・停止・シークを提供する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Video Playerは「動画の再生・停止・シークを提供する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "audio-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Video Player" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Video Player" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Video Player" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Video Player" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Video Player" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Video Player" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Video Player" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=video-player", "implementations": { "react": "components/video-player/web/ReactTailwind.tsx", "html": "components/video-player/web/index.html", "native": "components/video-player/mobile/ReactNative.tsx", "compose": "components/video-player/android/AndroidCompose.kt", "swiftui": "components/video-player/apple/SwiftUI.swift", "winui": "components/video-player/windows/WinUI.xaml", "flutter": "components/video-player/cross-platform/Flutter.dart" }, "figma": { "preview": "components/video-player/figma/preview.svg", "tokens": "components/video-player/figma/tokens.tokens.json", "spec": "components/video-player/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "video-player", "動画プレーヤー", "Video Player" ], "official": [], "aliases": [ "Movie Player" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "audio-player", "ja": "音声プレーヤー", "en": "Audio Player", "aliases": [ "Music Player" ], "names": { "canonical": { "ja": "音声プレーヤー", "en": "Audio Player", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Music Player", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "音声プレーヤー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Audio Player", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Music Player", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "音声の再生・停止・シークを提供する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "audio", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "音声の再生・停止・シークを提供する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Audio Playerは「音声の再生・停止・シークを提供する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Audio Player" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Audio Player" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Audio Player" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Audio Player" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Audio Player" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Audio Player" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Audio Player" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=audio-player", "implementations": { "react": "components/audio-player/web/ReactTailwind.tsx", "html": "components/audio-player/web/index.html", "native": "components/audio-player/mobile/ReactNative.tsx", "compose": "components/audio-player/android/AndroidCompose.kt", "swiftui": "components/audio-player/apple/SwiftUI.swift", "winui": "components/audio-player/windows/WinUI.xaml", "flutter": "components/audio-player/cross-platform/Flutter.dart" }, "figma": { "preview": "components/audio-player/figma/preview.svg", "tokens": "components/audio-player/figma/tokens.tokens.json", "spec": "components/audio-player/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "audio-player", "音声プレーヤー", "Audio Player" ], "official": [], "aliases": [ "Music Player" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "media-object", "ja": "メディアオブジェクト", "en": "Media Object", "aliases": [ "Object Media Pattern" ], "names": { "canonical": { "ja": "メディアオブジェクト", "en": "Media Object", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Object Media Pattern", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メディアオブジェクト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Media Object", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Object Media Pattern", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "画像と見出し・本文を横並びでまとめる。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "article", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "画像と見出し・本文を横並びでまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Media Objectは「画像と見出し・本文を横並びでまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Media Object" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Media Object" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Media Object" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Media Object" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Media Object" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Media Object" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Media Object" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=media-object", "implementations": { "react": "components/media-object/web/ReactTailwind.tsx", "html": "components/media-object/web/index.html", "native": "components/media-object/mobile/ReactNative.tsx", "compose": "components/media-object/android/AndroidCompose.kt", "swiftui": "components/media-object/apple/SwiftUI.swift", "winui": "components/media-object/windows/WinUI.xaml", "flutter": "components/media-object/cross-platform/Flutter.dart" }, "figma": { "preview": "components/media-object/figma/preview.svg", "tokens": "components/media-object/figma/tokens.tokens.json", "spec": "components/media-object/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "media-object", "メディアオブジェクト", "Media Object" ], "official": [], "aliases": [ "Object Media Pattern" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "figure-caption", "ja": "図とキャプション", "en": "Figure and Caption", "aliases": [ "Figcaption" ], "names": { "canonical": { "ja": "図とキャプション", "en": "Figure and Caption", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Figcaption", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "図とキャプション", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Figure and Caption", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Figcaption", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "図版とその説明文を意味的にまとめる。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "figure", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "図版とその説明文を意味的にまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Figure and Captionは「図版とその説明文を意味的にまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Figure and Caption" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Figure and Caption" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Figure and Caption" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Figure and Caption" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Figure and Caption" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Figure and Caption" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Figure and Caption" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=figure-caption", "implementations": { "react": "components/figure-caption/web/ReactTailwind.tsx", "html": "components/figure-caption/web/index.html", "native": "components/figure-caption/mobile/ReactNative.tsx", "compose": "components/figure-caption/android/AndroidCompose.kt", "swiftui": "components/figure-caption/apple/SwiftUI.swift", "winui": "components/figure-caption/windows/WinUI.xaml", "flutter": "components/figure-caption/cross-platform/Flutter.dart" }, "figma": { "preview": "components/figure-caption/figma/preview.svg", "tokens": "components/figure-caption/figma/tokens.tokens.json", "spec": "components/figure-caption/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "figure-caption", "図とキャプション", "Figure and Caption" ], "official": [], "aliases": [ "Figcaption" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "blockquote", "ja": "引用ブロック", "en": "Blockquote", "aliases": [ "Quote" ], "names": { "canonical": { "ja": "引用ブロック", "en": "Blockquote", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Quote", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "引用ブロック", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Blockquote", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Quote", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "他の情報源からの引用文を区別して表示する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "blockquote", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "他の情報源からの引用文を区別して表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Blockquoteは「他の情報源からの引用文を区別して表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Blockquote" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Blockquote" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Blockquote" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Blockquote" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Blockquote" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Blockquote" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Blockquote" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=blockquote", "implementations": { "react": "components/blockquote/web/ReactTailwind.tsx", "html": "components/blockquote/web/index.html", "native": "components/blockquote/mobile/ReactNative.tsx", "compose": "components/blockquote/android/AndroidCompose.kt", "swiftui": "components/blockquote/apple/SwiftUI.swift", "winui": "components/blockquote/windows/WinUI.xaml", "flutter": "components/blockquote/cross-platform/Flutter.dart" }, "figma": { "preview": "components/blockquote/figma/preview.svg", "tokens": "components/blockquote/figma/tokens.tokens.json", "spec": "components/blockquote/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "blockquote", "引用ブロック", "Blockquote" ], "official": [], "aliases": [ "Quote" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "markdown-content", "ja": "Markdown本文", "en": "Markdown Content", "aliases": [ "Prose", "Rich Content" ], "names": { "canonical": { "ja": "Markdown本文", "en": "Markdown Content", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Prose", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Rich Content", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "Markdown本文", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Markdown Content", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Prose", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Rich Content", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "見出し・表・コードを含む整形済み本文。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "article", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "見出し・表・コードを含む整形済み本文。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Markdown Contentは「見出し・表・コードを含む整形済み本文。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Markdown Content" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Markdown Content" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Markdown Content" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Markdown Content" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Markdown Content" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Markdown Content" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Markdown Content" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=markdown-content", "implementations": { "react": "components/markdown-content/web/ReactTailwind.tsx", "html": "components/markdown-content/web/index.html", "native": "components/markdown-content/mobile/ReactNative.tsx", "compose": "components/markdown-content/android/AndroidCompose.kt", "swiftui": "components/markdown-content/apple/SwiftUI.swift", "winui": "components/markdown-content/windows/WinUI.xaml", "flutter": "components/markdown-content/cross-platform/Flutter.dart" }, "figma": { "preview": "components/markdown-content/figma/preview.svg", "tokens": "components/markdown-content/figma/tokens.tokens.json", "spec": "components/markdown-content/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "markdown-content", "Markdown本文", "Markdown Content" ], "official": [], "aliases": [ "Prose", "Rich Content" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "inline-code", "ja": "インラインコード", "en": "Inline Code", "aliases": [ "Code Span" ], "names": { "canonical": { "ja": "インラインコード", "en": "Inline Code", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Code Span", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "インラインコード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Inline Code", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Code Span", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "文章中の短いコードや識別子を示す。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "code", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "文章中の短いコードや識別子を示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Inline Codeは「文章中の短いコードや識別子を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "keyboard-key", "truncated-text", "read-more", "image" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Inline Code" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Inline Code" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Inline Code" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Inline Code" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Inline Code" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Inline Code" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Inline Code" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=inline-code", "implementations": { "react": "components/inline-code/web/ReactTailwind.tsx", "html": "components/inline-code/web/index.html", "native": "components/inline-code/mobile/ReactNative.tsx", "compose": "components/inline-code/android/AndroidCompose.kt", "swiftui": "components/inline-code/apple/SwiftUI.swift", "winui": "components/inline-code/windows/WinUI.xaml", "flutter": "components/inline-code/cross-platform/Flutter.dart" }, "figma": { "preview": "components/inline-code/figma/preview.svg", "tokens": "components/inline-code/figma/tokens.tokens.json", "spec": "components/inline-code/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "inline-code", "インラインコード", "Inline Code" ], "official": [], "aliases": [ "Code Span" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "keyboard-key", "ja": "キーボードキー表示", "en": "Keyboard Key", "aliases": [ "Kbd", "Keycap" ], "names": { "canonical": { "ja": "キーボードキー表示", "en": "Keyboard Key", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Kbd", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Keycap", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "キーボードキー表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Keyboard Key", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Kbd", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Keycap", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "ショートカットのキーをキーキャップ風に示す。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "kbd", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ショートカットのキーをキーキャップ風に示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Keyboard Keyは「ショートカットのキーをキーキャップ風に示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "inline-code", "truncated-text", "read-more", "image" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Keyboard Key" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Keyboard Key" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Keyboard Key" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Keyboard Key" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Keyboard Key" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Keyboard Key" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Keyboard Key" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=keyboard-key", "implementations": { "react": "components/keyboard-key/web/ReactTailwind.tsx", "html": "components/keyboard-key/web/index.html", "native": "components/keyboard-key/mobile/ReactNative.tsx", "compose": "components/keyboard-key/android/AndroidCompose.kt", "swiftui": "components/keyboard-key/apple/SwiftUI.swift", "winui": "components/keyboard-key/windows/WinUI.xaml", "flutter": "components/keyboard-key/cross-platform/Flutter.dart" }, "figma": { "preview": "components/keyboard-key/figma/preview.svg", "tokens": "components/keyboard-key/figma/tokens.tokens.json", "spec": "components/keyboard-key/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "keyboard-key", "キーボードキー表示", "Keyboard Key" ], "official": [], "aliases": [ "Kbd", "Keycap" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "truncated-text", "ja": "省略テキスト", "en": "Truncated Text", "aliases": [ "Ellipsis", "Line Clamp" ], "names": { "canonical": { "ja": "省略テキスト", "en": "Truncated Text", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Ellipsis", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Line Clamp", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "省略テキスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Truncated Text", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Ellipsis", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Line Clamp", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "長い文字列を行数や末尾記号で省略する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "p", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "長い文字列を行数や末尾記号で省略する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Truncated Textは「長い文字列を行数や末尾記号で省略する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "inline-code", "keyboard-key", "read-more", "image" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Truncated Text" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Truncated Text" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Truncated Text" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Truncated Text" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Truncated Text" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Truncated Text" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Truncated Text" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=truncated-text", "implementations": { "react": "components/truncated-text/web/ReactTailwind.tsx", "html": "components/truncated-text/web/index.html", "native": "components/truncated-text/mobile/ReactNative.tsx", "compose": "components/truncated-text/android/AndroidCompose.kt", "swiftui": "components/truncated-text/apple/SwiftUI.swift", "winui": "components/truncated-text/windows/WinUI.xaml", "flutter": "components/truncated-text/cross-platform/Flutter.dart" }, "figma": { "preview": "components/truncated-text/figma/preview.svg", "tokens": "components/truncated-text/figma/tokens.tokens.json", "spec": "components/truncated-text/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "truncated-text", "省略テキスト", "Truncated Text" ], "official": [], "aliases": [ "Ellipsis", "Line Clamp" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "read-more", "ja": "続きを読む", "en": "Read More", "aliases": [ "Show More" ], "names": { "canonical": { "ja": "続きを読む", "en": "Read More", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Show More", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "続きを読む", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Read More", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Show More", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "長い本文の残りを段階的に展開する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "details", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "長い本文の残りを段階的に展開する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Read Moreは「長い本文の残りを段階的に展開する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "inline-code", "keyboard-key", "truncated-text", "image" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Read More" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Read More" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Read More" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Read More" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Read More" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Read More" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Read More" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=read-more", "implementations": { "react": "components/read-more/web/ReactTailwind.tsx", "html": "components/read-more/web/index.html", "native": "components/read-more/mobile/ReactNative.tsx", "compose": "components/read-more/android/AndroidCompose.kt", "swiftui": "components/read-more/apple/SwiftUI.swift", "winui": "components/read-more/windows/WinUI.xaml", "flutter": "components/read-more/cross-platform/Flutter.dart" }, "figma": { "preview": "components/read-more/figma/preview.svg", "tokens": "components/read-more/figma/tokens.tokens.json", "spec": "components/read-more/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "read-more", "続きを読む", "Read More" ], "official": [], "aliases": [ "Show More" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "file-card", "ja": "ファイルカード", "en": "File Card", "aliases": [ "Document Card" ], "names": { "canonical": { "ja": "ファイルカード", "en": "File Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Document Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ファイルカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "File Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Document Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ファイル名・種類・サイズ・操作をまとめる。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "article", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ファイル名・種類・サイズ・操作をまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "File Cardは「ファイル名・種類・サイズ・操作をまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "File Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "File Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "File Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "File Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "File Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "File Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "File Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=file-card", "implementations": { "react": "components/file-card/web/ReactTailwind.tsx", "html": "components/file-card/web/index.html", "native": "components/file-card/mobile/ReactNative.tsx", "compose": "components/file-card/android/AndroidCompose.kt", "swiftui": "components/file-card/apple/SwiftUI.swift", "winui": "components/file-card/windows/WinUI.xaml", "flutter": "components/file-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/file-card/figma/preview.svg", "tokens": "components/file-card/figma/tokens.tokens.json", "spec": "components/file-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "file-card", "ファイルカード", "File Card" ], "official": [], "aliases": [ "Document Card" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "attachment-list", "ja": "添付ファイル一覧", "en": "Attachment List", "aliases": [ "Attachments" ], "names": { "canonical": { "ja": "添付ファイル一覧", "en": "Attachment List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Attachments", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "添付ファイル一覧", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Attachment List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Attachments", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数の添付ファイルを並べて表示する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "ul", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数の添付ファイルを並べて表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Attachment Listは「複数の添付ファイルを並べて表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Attachment List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Attachment List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Attachment List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Attachment List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Attachment List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Attachment List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Attachment List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=attachment-list", "implementations": { "react": "components/attachment-list/web/ReactTailwind.tsx", "html": "components/attachment-list/web/index.html", "native": "components/attachment-list/mobile/ReactNative.tsx", "compose": "components/attachment-list/android/AndroidCompose.kt", "swiftui": "components/attachment-list/apple/SwiftUI.swift", "winui": "components/attachment-list/windows/WinUI.xaml", "flutter": "components/attachment-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/attachment-list/figma/preview.svg", "tokens": "components/attachment-list/figma/tokens.tokens.json", "spec": "components/attachment-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "attachment-list", "添付ファイル一覧", "Attachment List" ], "official": [], "aliases": [ "Attachments" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "map", "ja": "地図", "en": "Map", "aliases": [ "Interactive Map" ], "names": { "canonical": { "ja": "地図", "en": "Map", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Interactive Map", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "地図", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Map", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Interactive Map", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "場所・経路・範囲を地理空間上に表示する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "figure", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "場所・経路・範囲を地理空間上に表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Mapは「場所・経路・範囲を地理空間上に表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Map" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Map" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Map" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Map" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Map" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Map" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Map" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=map", "implementations": { "react": "components/map/web/ReactTailwind.tsx", "html": "components/map/web/index.html", "native": "components/map/mobile/ReactNative.tsx", "compose": "components/map/android/AndroidCompose.kt", "swiftui": "components/map/apple/SwiftUI.swift", "winui": "components/map/windows/WinUI.xaml", "flutter": "components/map/cross-platform/Flutter.dart" }, "figma": { "preview": "components/map/figma/preview.svg", "tokens": "components/map/figma/tokens.tokens.json", "spec": "components/map/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "map", "地図", "Map" ], "official": [], "aliases": [ "Interactive Map" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "qr-code", "ja": "QRコード", "en": "QR Code", "aliases": [ "二次元コード" ], "names": { "canonical": { "ja": "QRコード", "en": "QR Code", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "二次元コード", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "QRコード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "QR Code", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "二次元コード", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "URLや短いデータをカメラで読み取れる形にする。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "figure", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "URLや短いデータをカメラで読み取れる形にする。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "QR Codeは「URLや短いデータをカメラで読み取れる形にする。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "QR Code" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "QR Code" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "QR Code" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "QR Code" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "QR Code" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "QR Code" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "QR Code" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=qr-code", "implementations": { "react": "components/qr-code/web/ReactTailwind.tsx", "html": "components/qr-code/web/index.html", "native": "components/qr-code/mobile/ReactNative.tsx", "compose": "components/qr-code/android/AndroidCompose.kt", "swiftui": "components/qr-code/apple/SwiftUI.swift", "winui": "components/qr-code/windows/WinUI.xaml", "flutter": "components/qr-code/cross-platform/Flutter.dart" }, "figma": { "preview": "components/qr-code/figma/preview.svg", "tokens": "components/qr-code/figma/tokens.tokens.json", "spec": "components/qr-code/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "qr-code", "QRコード", "QR Code" ], "official": [], "aliases": [ "二次元コード" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "waveform", "ja": "波形表示", "en": "Waveform", "aliases": [ "Audio Waveform" ], "names": { "canonical": { "ja": "波形表示", "en": "Waveform", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Audio Waveform", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "波形表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Waveform", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Audio Waveform", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "音声の時間軸と振幅を視覚化する。", "category": "content-media", "categoryLabel": { "ja": "コンテンツ・メディア", "en": "Content & Media" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "figure", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "音声の時間軸と振幅を視覚化する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Waveformは「音声の時間軸と振幅を視覚化する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "image", "thumbnail", "image-gallery", "video-player" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Waveform" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Waveform" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Waveform" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Waveform" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Waveform" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Waveform" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Waveform" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=waveform", "implementations": { "react": "components/waveform/web/ReactTailwind.tsx", "html": "components/waveform/web/index.html", "native": "components/waveform/mobile/ReactNative.tsx", "compose": "components/waveform/android/AndroidCompose.kt", "swiftui": "components/waveform/apple/SwiftUI.swift", "winui": "components/waveform/windows/WinUI.xaml", "flutter": "components/waveform/cross-platform/Flutter.dart" }, "figma": { "preview": "components/waveform/figma/preview.svg", "tokens": "components/waveform/figma/tokens.tokens.json", "spec": "components/waveform/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "waveform", "波形表示", "Waveform" ], "official": [], "aliases": [ "Audio Waveform" ], "relatedNames": [], "facets": [ "コンテンツを提示", "コンテンツ・メディア", "Content & Media", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "product-card", "ja": "商品カード", "en": "Product Card", "aliases": [ "Item Card" ], "names": { "canonical": { "ja": "商品カード", "en": "Product Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Item Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "商品カード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Product Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Item Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "商品画像・名称・価格・主要操作をまとめる。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "商品画像・名称・価格・主要操作をまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Product Cardは「商品画像・名称・価格・主要操作をまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "shipping-method", "pricing-card", "subscription-status", "review-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Product Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Product Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Product Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Product Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Product Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Product Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Product Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=product-card", "implementations": { "react": "components/product-card/web/ReactTailwind.tsx", "html": "components/product-card/web/index.html", "native": "components/product-card/mobile/ReactNative.tsx", "compose": "components/product-card/android/AndroidCompose.kt", "swiftui": "components/product-card/apple/SwiftUI.swift", "winui": "components/product-card/windows/WinUI.xaml", "flutter": "components/product-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/product-card/figma/preview.svg", "tokens": "components/product-card/figma/tokens.tokens.json", "spec": "components/product-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "product-card", "商品カード", "Product Card" ], "official": [], "aliases": [ "Item Card" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "price-display", "ja": "価格表示", "en": "Price Display", "aliases": [ "Price Tag" ], "names": { "canonical": { "ja": "価格表示", "en": "Price Display", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Price Tag", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "価格表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Price Display", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Price Tag", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "通貨・単位・期間を含めて価格を示す。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "通貨・単位・期間を含めて価格を示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Price Displayは「通貨・単位・期間を含めて価格を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "discount-badge", "add-to-cart", "coupon-input", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Price Display" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Price Display" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Price Display" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Price Display" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Price Display" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Price Display" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Price Display" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=price-display", "implementations": { "react": "components/price-display/web/ReactTailwind.tsx", "html": "components/price-display/web/index.html", "native": "components/price-display/mobile/ReactNative.tsx", "compose": "components/price-display/android/AndroidCompose.kt", "swiftui": "components/price-display/apple/SwiftUI.swift", "winui": "components/price-display/windows/WinUI.xaml", "flutter": "components/price-display/cross-platform/Flutter.dart" }, "figma": { "preview": "components/price-display/figma/preview.svg", "tokens": "components/price-display/figma/tokens.tokens.json", "spec": "components/price-display/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "price-display", "価格表示", "Price Display" ], "official": [], "aliases": [ "Price Tag" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "discount-badge", "ja": "割引バッジ", "en": "Discount Badge", "aliases": [ "Sale Badge" ], "names": { "canonical": { "ja": "割引バッジ", "en": "Discount Badge", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Sale Badge", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "割引バッジ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Discount Badge", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sale Badge", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "値引率やセール状態を短く示す。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "値引率やセール状態を短く示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Discount Badgeは「値引率やセール状態を短く示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "price-display", "add-to-cart", "coupon-input", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Discount Badge" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Discount Badge" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Discount Badge" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Discount Badge" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Discount Badge" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Discount Badge" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Discount Badge" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=discount-badge", "implementations": { "react": "components/discount-badge/web/ReactTailwind.tsx", "html": "components/discount-badge/web/index.html", "native": "components/discount-badge/mobile/ReactNative.tsx", "compose": "components/discount-badge/android/AndroidCompose.kt", "swiftui": "components/discount-badge/apple/SwiftUI.swift", "winui": "components/discount-badge/windows/WinUI.xaml", "flutter": "components/discount-badge/cross-platform/Flutter.dart" }, "figma": { "preview": "components/discount-badge/figma/preview.svg", "tokens": "components/discount-badge/figma/tokens.tokens.json", "spec": "components/discount-badge/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "discount-badge", "割引バッジ", "Discount Badge" ], "official": [], "aliases": [ "Sale Badge" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "product-gallery", "ja": "商品画像ギャラリー", "en": "Product Gallery", "aliases": [ "Product Images" ], "names": { "canonical": { "ja": "商品画像ギャラリー", "en": "Product Gallery", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Product Images", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "商品画像ギャラリー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Product Gallery", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Product Images", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "商品の複数画像を切り替えて確認する。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "商品の複数画像を切り替えて確認する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Product Galleryは「商品の複数画像を切り替えて確認する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "variant-selector", "cart-item", "checkout-stepper", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Product Gallery" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Product Gallery" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Product Gallery" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Product Gallery" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Product Gallery" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Product Gallery" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Product Gallery" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=product-gallery", "implementations": { "react": "components/product-gallery/web/ReactTailwind.tsx", "html": "components/product-gallery/web/index.html", "native": "components/product-gallery/mobile/ReactNative.tsx", "compose": "components/product-gallery/android/AndroidCompose.kt", "swiftui": "components/product-gallery/apple/SwiftUI.swift", "winui": "components/product-gallery/windows/WinUI.xaml", "flutter": "components/product-gallery/cross-platform/Flutter.dart" }, "figma": { "preview": "components/product-gallery/figma/preview.svg", "tokens": "components/product-gallery/figma/tokens.tokens.json", "spec": "components/product-gallery/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "product-gallery", "商品画像ギャラリー", "Product Gallery" ], "official": [], "aliases": [ "Product Images" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "variant-selector", "ja": "商品バリエーション選択", "en": "Variant Selector", "aliases": [ "SKU Selector", "Swatch" ], "names": { "canonical": { "ja": "商品バリエーション選択", "en": "Variant Selector", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "SKU Selector", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Swatch", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "商品バリエーション選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Variant Selector", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "SKU Selector", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Swatch", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "色・サイズなどの商品仕様を選ぶ。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "single", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "色・サイズなどの商品仕様を選ぶ。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Variant Selectorは「色・サイズなどの商品仕様を選ぶ。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-gallery", "cart-item", "checkout-stepper", "shipping-method" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Variant Selector" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Variant Selector" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Variant Selector" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Variant Selector" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Variant Selector" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Variant Selector" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Variant Selector" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=variant-selector", "implementations": { "react": "components/variant-selector/web/ReactTailwind.tsx", "html": "components/variant-selector/web/index.html", "native": "components/variant-selector/mobile/ReactNative.tsx", "compose": "components/variant-selector/android/AndroidCompose.kt", "swiftui": "components/variant-selector/apple/SwiftUI.swift", "winui": "components/variant-selector/windows/WinUI.xaml", "flutter": "components/variant-selector/cross-platform/Flutter.dart" }, "figma": { "preview": "components/variant-selector/figma/preview.svg", "tokens": "components/variant-selector/figma/tokens.tokens.json", "spec": "components/variant-selector/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "variant-selector", "商品バリエーション選択", "Variant Selector" ], "official": [], "aliases": [ "SKU Selector", "Swatch" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "single", "not-applicable" ] } }, { "id": "add-to-cart", "ja": "カート追加ボタン", "en": "Add to Cart", "aliases": [ "購入ボタン" ], "names": { "canonical": { "ja": "カート追加ボタン", "en": "Add to Cart", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "購入ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カート追加ボタン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Add to Cart", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "購入ボタン", "language": "ja", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "選択した商品を買い物かごへ追加する。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "選択した商品を買い物かごへ追加する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Add to Cartは「選択した商品を買い物かごへ追加する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "price-display", "discount-badge", "coupon-input", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Add to Cart" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Add to Cart" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Add to Cart" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Add to Cart" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Add to Cart" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Add to Cart" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Add to Cart" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=add-to-cart", "implementations": { "react": "components/add-to-cart/web/ReactTailwind.tsx", "html": "components/add-to-cart/web/index.html", "native": "components/add-to-cart/mobile/ReactNative.tsx", "compose": "components/add-to-cart/android/AndroidCompose.kt", "swiftui": "components/add-to-cart/apple/SwiftUI.swift", "winui": "components/add-to-cart/windows/WinUI.xaml", "flutter": "components/add-to-cart/cross-platform/Flutter.dart" }, "figma": { "preview": "components/add-to-cart/figma/preview.svg", "tokens": "components/add-to-cart/figma/tokens.tokens.json", "spec": "components/add-to-cart/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "add-to-cart", "カート追加ボタン", "Add to Cart" ], "official": [], "aliases": [ "購入ボタン" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "cart-item", "ja": "カート項目", "en": "Cart Item", "aliases": [ "Basket Item" ], "names": { "canonical": { "ja": "カート項目", "en": "Cart Item", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Basket Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カート項目", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Cart Item", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Basket Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "カート内の商品・数量・価格・削除操作を示す。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "カート内の商品・数量・価格・削除操作を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Cart Itemは「カート内の商品・数量・価格・削除操作を示す。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-gallery", "variant-selector", "checkout-stepper", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Cart Item" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Cart Item" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Cart Item" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Cart Item" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Cart Item" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Cart Item" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Cart Item" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=cart-item", "implementations": { "react": "components/cart-item/web/ReactTailwind.tsx", "html": "components/cart-item/web/index.html", "native": "components/cart-item/mobile/ReactNative.tsx", "compose": "components/cart-item/android/AndroidCompose.kt", "swiftui": "components/cart-item/apple/SwiftUI.swift", "winui": "components/cart-item/windows/WinUI.xaml", "flutter": "components/cart-item/cross-platform/Flutter.dart" }, "figma": { "preview": "components/cart-item/figma/preview.svg", "tokens": "components/cart-item/figma/tokens.tokens.json", "spec": "components/cart-item/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "cart-item", "カート項目", "Cart Item" ], "official": [], "aliases": [ "Basket Item" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "mini-cart", "ja": "ミニカート", "en": "Mini Cart", "aliases": [ "Cart Drawer" ], "names": { "canonical": { "ja": "ミニカート", "en": "Mini Cart", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Cart Drawer", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ミニカート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Mini Cart", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Cart Drawer", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "現在のカート内容を小型パネルで確認する。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "composite-pattern", "placement": "side", "placementLabel": { "ja": "左右の側面", "en": "Side", "detailJa": "画面または主コンテンツの左側・右側で使われます。", "detailEn": "Typically placed along the left or right side of the screen or main content." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "現在のカート内容を小型パネルで確認する。", "左右の側面でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Mini Cartは「現在のカート内容を小型パネルで確認する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-gallery", "variant-selector", "cart-item", "checkout-stepper" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Mini Cart" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Mini Cart" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Mini Cart" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Mini Cart" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Mini Cart" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Mini Cart" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Mini Cart" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=mini-cart", "implementations": { "react": "components/mini-cart/web/ReactTailwind.tsx", "html": "components/mini-cart/web/index.html", "native": "components/mini-cart/mobile/ReactNative.tsx", "compose": "components/mini-cart/android/AndroidCompose.kt", "swiftui": "components/mini-cart/apple/SwiftUI.swift", "winui": "components/mini-cart/windows/WinUI.xaml", "flutter": "components/mini-cart/cross-platform/Flutter.dart" }, "figma": { "preview": "components/mini-cart/figma/preview.svg", "tokens": "components/mini-cart/figma/tokens.tokens.json", "spec": "components/mini-cart/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "mini-cart", "ミニカート", "Mini Cart" ], "official": [], "aliases": [ "Cart Drawer" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "左右の側面", "Side", "composite-pattern", "none", "not-applicable" ] } }, { "id": "checkout-stepper", "ja": "購入手順", "en": "Checkout Stepper", "aliases": [ "Checkout Steps" ], "names": { "canonical": { "ja": "購入手順", "en": "Checkout Stepper", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Checkout Steps", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "購入手順", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Checkout Stepper", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Checkout Steps", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "配送・支払・確認の現在工程を示す。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "配送・支払・確認の現在工程を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Checkout Stepperは「配送・支払・確認の現在工程を示す。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-gallery", "variant-selector", "cart-item", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Checkout Stepper" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Checkout Stepper" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Checkout Stepper" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Checkout Stepper" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Checkout Stepper" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Checkout Stepper" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Checkout Stepper" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=checkout-stepper", "implementations": { "react": "components/checkout-stepper/web/ReactTailwind.tsx", "html": "components/checkout-stepper/web/index.html", "native": "components/checkout-stepper/mobile/ReactNative.tsx", "compose": "components/checkout-stepper/android/AndroidCompose.kt", "swiftui": "components/checkout-stepper/apple/SwiftUI.swift", "winui": "components/checkout-stepper/windows/WinUI.xaml", "flutter": "components/checkout-stepper/cross-platform/Flutter.dart" }, "figma": { "preview": "components/checkout-stepper/figma/preview.svg", "tokens": "components/checkout-stepper/figma/tokens.tokens.json", "spec": "components/checkout-stepper/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "checkout-stepper", "購入手順", "Checkout Stepper" ], "official": [], "aliases": [ "Checkout Steps" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "address-form", "ja": "住所フォーム", "en": "Address Form", "aliases": [ "Shipping Address" ], "names": { "canonical": { "ja": "住所フォーム", "en": "Address Form", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Shipping Address", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "住所フォーム", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Address Form", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Shipping Address", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "配送先や請求先の住所を入力する。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "配送先や請求先の住所を入力する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Address Formは「配送先や請求先の住所を入力する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "payment-method", "order-summary", "pricing-table", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Address Form" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Address Form" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Address Form" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Address Form" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Address Form" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Address Form" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Address Form" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=address-form", "implementations": { "react": "components/address-form/web/ReactTailwind.tsx", "html": "components/address-form/web/index.html", "native": "components/address-form/mobile/ReactNative.tsx", "compose": "components/address-form/android/AndroidCompose.kt", "swiftui": "components/address-form/apple/SwiftUI.swift", "winui": "components/address-form/windows/WinUI.xaml", "flutter": "components/address-form/cross-platform/Flutter.dart" }, "figma": { "preview": "components/address-form/figma/preview.svg", "tokens": "components/address-form/figma/tokens.tokens.json", "spec": "components/address-form/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "address-form", "住所フォーム", "Address Form" ], "official": [], "aliases": [ "Shipping Address" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "shipping-method", "ja": "配送方法選択", "en": "Shipping Method", "aliases": [ "Delivery Options" ], "names": { "canonical": { "ja": "配送方法選択", "en": "Shipping Method", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Delivery Options", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "配送方法選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Shipping Method", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Delivery Options", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "送料・所要日数を比較して配送手段を選ぶ。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "single", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "送料・所要日数を比較して配送手段を選ぶ。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Shipping Methodは「送料・所要日数を比較して配送手段を選ぶ。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-card", "variant-selector", "payment-method", "pricing-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Shipping Method" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Shipping Method" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Shipping Method" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Shipping Method" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Shipping Method" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Shipping Method" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Shipping Method" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=shipping-method", "implementations": { "react": "components/shipping-method/web/ReactTailwind.tsx", "html": "components/shipping-method/web/index.html", "native": "components/shipping-method/mobile/ReactNative.tsx", "compose": "components/shipping-method/android/AndroidCompose.kt", "swiftui": "components/shipping-method/apple/SwiftUI.swift", "winui": "components/shipping-method/windows/WinUI.xaml", "flutter": "components/shipping-method/cross-platform/Flutter.dart" }, "figma": { "preview": "components/shipping-method/figma/preview.svg", "tokens": "components/shipping-method/figma/tokens.tokens.json", "spec": "components/shipping-method/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "shipping-method", "配送方法選択", "Shipping Method" ], "official": [], "aliases": [ "Delivery Options" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "single", "not-applicable" ] } }, { "id": "payment-method", "ja": "支払方法選択", "en": "Payment Method", "aliases": [ "Payment Options" ], "names": { "canonical": { "ja": "支払方法選択", "en": "Payment Method", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Payment Options", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "支払方法選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Payment Method", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Payment Options", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "カードやウォレットなど支払手段を選ぶ。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "single", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "カードやウォレットなど支払手段を選ぶ。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Payment Methodは「カードやウォレットなど支払手段を選ぶ。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "variant-selector", "address-form", "shipping-method", "order-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Payment Method" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Payment Method" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Payment Method" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Payment Method" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Payment Method" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Payment Method" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Payment Method" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=payment-method", "implementations": { "react": "components/payment-method/web/ReactTailwind.tsx", "html": "components/payment-method/web/index.html", "native": "components/payment-method/mobile/ReactNative.tsx", "compose": "components/payment-method/android/AndroidCompose.kt", "swiftui": "components/payment-method/apple/SwiftUI.swift", "winui": "components/payment-method/windows/WinUI.xaml", "flutter": "components/payment-method/cross-platform/Flutter.dart" }, "figma": { "preview": "components/payment-method/figma/preview.svg", "tokens": "components/payment-method/figma/tokens.tokens.json", "spec": "components/payment-method/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "payment-method", "支払方法選択", "Payment Method" ], "official": [], "aliases": [ "Payment Options" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "single", "not-applicable" ] } }, { "id": "coupon-input", "ja": "クーポン入力", "en": "Coupon Input", "aliases": [ "Promo Code" ], "names": { "canonical": { "ja": "クーポン入力", "en": "Coupon Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Promo Code", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "クーポン入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Coupon Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Promo Code", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "割引コードを入力・適用する欄。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "割引コードを入力・適用する欄。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Coupon Inputは「割引コードを入力・適用する欄。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "price-display", "discount-badge", "add-to-cart", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Coupon Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Coupon Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Coupon Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Coupon Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Coupon Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Coupon Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Coupon Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=coupon-input", "implementations": { "react": "components/coupon-input/web/ReactTailwind.tsx", "html": "components/coupon-input/web/index.html", "native": "components/coupon-input/mobile/ReactNative.tsx", "compose": "components/coupon-input/android/AndroidCompose.kt", "swiftui": "components/coupon-input/apple/SwiftUI.swift", "winui": "components/coupon-input/windows/WinUI.xaml", "flutter": "components/coupon-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/coupon-input/figma/preview.svg", "tokens": "components/coupon-input/figma/tokens.tokens.json", "spec": "components/coupon-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "coupon-input", "クーポン入力", "Coupon Input" ], "official": [], "aliases": [ "Promo Code" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "order-summary", "ja": "注文概要", "en": "Order Summary", "aliases": [ "Checkout Summary" ], "names": { "canonical": { "ja": "注文概要", "en": "Order Summary", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Checkout Summary", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "注文概要", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Order Summary", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Checkout Summary", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "商品小計・送料・税・合計をまとめる。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "商品小計・送料・税・合計をまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Order Summaryは「商品小計・送料・税・合計をまとめる。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "address-form", "payment-method", "pricing-table", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Order Summary" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Order Summary" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Order Summary" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Order Summary" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Order Summary" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Order Summary" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Order Summary" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=order-summary", "implementations": { "react": "components/order-summary/web/ReactTailwind.tsx", "html": "components/order-summary/web/index.html", "native": "components/order-summary/mobile/ReactNative.tsx", "compose": "components/order-summary/android/AndroidCompose.kt", "swiftui": "components/order-summary/apple/SwiftUI.swift", "winui": "components/order-summary/windows/WinUI.xaml", "flutter": "components/order-summary/cross-platform/Flutter.dart" }, "figma": { "preview": "components/order-summary/figma/preview.svg", "tokens": "components/order-summary/figma/tokens.tokens.json", "spec": "components/order-summary/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "order-summary", "注文概要", "Order Summary" ], "official": [], "aliases": [ "Checkout Summary" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "pricing-card", "ja": "料金プランカード", "en": "Pricing Card", "aliases": [ "Plan Card" ], "names": { "canonical": { "ja": "料金プランカード", "en": "Pricing Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Plan Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "料金プランカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pricing Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Plan Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "プラン名・価格・機能・申込操作をまとめる。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "プラン名・価格・機能・申込操作をまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Pricing Cardは「プラン名・価格・機能・申込操作をまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-card", "shipping-method", "subscription-status", "review-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Pricing Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Pricing Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Pricing Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Pricing Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Pricing Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Pricing Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Pricing Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=pricing-card", "implementations": { "react": "components/pricing-card/web/ReactTailwind.tsx", "html": "components/pricing-card/web/index.html", "native": "components/pricing-card/mobile/ReactNative.tsx", "compose": "components/pricing-card/android/AndroidCompose.kt", "swiftui": "components/pricing-card/apple/SwiftUI.swift", "winui": "components/pricing-card/windows/WinUI.xaml", "flutter": "components/pricing-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/pricing-card/figma/preview.svg", "tokens": "components/pricing-card/figma/tokens.tokens.json", "spec": "components/pricing-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "pricing-card", "料金プランカード", "Pricing Card" ], "official": [], "aliases": [ "Plan Card" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "pricing-table", "ja": "料金比較表", "en": "Pricing Table", "aliases": [ "Plan Comparison" ], "names": { "canonical": { "ja": "料金比較表", "en": "Pricing Table", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Plan Comparison", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "料金比較表", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pricing Table", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Plan Comparison", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数プランの機能と価格を比較する。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数プランの機能と価格を比較する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Pricing Tableは「複数プランの機能と価格を比較する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "address-form", "payment-method", "order-summary", "product-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Pricing Table" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Pricing Table" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Pricing Table" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Pricing Table" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Pricing Table" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Pricing Table" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Pricing Table" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=pricing-table", "implementations": { "react": "components/pricing-table/web/ReactTailwind.tsx", "html": "components/pricing-table/web/index.html", "native": "components/pricing-table/mobile/ReactNative.tsx", "compose": "components/pricing-table/android/AndroidCompose.kt", "swiftui": "components/pricing-table/apple/SwiftUI.swift", "winui": "components/pricing-table/windows/WinUI.xaml", "flutter": "components/pricing-table/cross-platform/Flutter.dart" }, "figma": { "preview": "components/pricing-table/figma/preview.svg", "tokens": "components/pricing-table/figma/tokens.tokens.json", "spec": "components/pricing-table/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "pricing-table", "料金比較表", "Pricing Table" ], "official": [], "aliases": [ "Plan Comparison" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "subscription-status", "ja": "購読状態", "en": "Subscription Status", "aliases": [ "Billing Status" ], "names": { "canonical": { "ja": "購読状態", "en": "Subscription Status", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Billing Status", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "購読状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Subscription Status", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Billing Status", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "現在プラン・更新日・解約状態を示す。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "現在プラン・更新日・解約状態を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Subscription Statusは「現在プラン・更新日・解約状態を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-card", "shipping-method", "pricing-card", "review-summary" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Subscription Status" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Subscription Status" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Subscription Status" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Subscription Status" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Subscription Status" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Subscription Status" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Subscription Status" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=subscription-status", "implementations": { "react": "components/subscription-status/web/ReactTailwind.tsx", "html": "components/subscription-status/web/index.html", "native": "components/subscription-status/mobile/ReactNative.tsx", "compose": "components/subscription-status/android/AndroidCompose.kt", "swiftui": "components/subscription-status/apple/SwiftUI.swift", "winui": "components/subscription-status/windows/WinUI.xaml", "flutter": "components/subscription-status/cross-platform/Flutter.dart" }, "figma": { "preview": "components/subscription-status/figma/preview.svg", "tokens": "components/subscription-status/figma/tokens.tokens.json", "spec": "components/subscription-status/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "subscription-status", "購読状態", "Subscription Status" ], "official": [], "aliases": [ "Billing Status" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "review-summary", "ja": "レビュー概要", "en": "Review Summary", "aliases": [ "Rating Summary" ], "names": { "canonical": { "ja": "レビュー概要", "en": "Review Summary", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Rating Summary", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "レビュー概要", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Review Summary", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Rating Summary", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "平均評価と評価件数・分布をまとめる。", "category": "commerce", "categoryLabel": { "ja": "EC・料金", "en": "Commerce" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "平均評価と評価件数・分布をまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Review Summaryは「平均評価と評価件数・分布をまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "product-card", "shipping-method", "pricing-card", "subscription-status" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Review Summary" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Review Summary" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Review Summary" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Review Summary" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Review Summary" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Review Summary" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Review Summary" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=review-summary", "implementations": { "react": "components/review-summary/web/ReactTailwind.tsx", "html": "components/review-summary/web/index.html", "native": "components/review-summary/mobile/ReactNative.tsx", "compose": "components/review-summary/android/AndroidCompose.kt", "swiftui": "components/review-summary/apple/SwiftUI.swift", "winui": "components/review-summary/windows/WinUI.xaml", "flutter": "components/review-summary/cross-platform/Flutter.dart" }, "figma": { "preview": "components/review-summary/figma/preview.svg", "tokens": "components/review-summary/figma/tokens.tokens.json", "spec": "components/review-summary/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "review-summary", "レビュー概要", "Review Summary" ], "official": [], "aliases": [ "Rating Summary" ], "relatedNames": [], "facets": [ "購入・料金を扱う", "EC・料金", "Commerce", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "login-form", "ja": "ログインフォーム", "en": "Login Form", "aliases": [ "Sign in Form" ], "names": { "canonical": { "ja": "ログインフォーム", "en": "Login Form", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Sign in Form", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ログインフォーム", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Login Form", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sign in Form", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "既存利用者の認証情報を受け取るフォーム。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "既存利用者の認証情報を受け取るフォーム。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Login Formは「既存利用者の認証情報を受け取るフォーム。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "signup-form", "password-reset", "otp-form", "profile-editor" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Login Form" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Login Form" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Login Form" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Login Form" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Login Form" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Login Form" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Login Form" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=login-form", "implementations": { "react": "components/login-form/web/ReactTailwind.tsx", "html": "components/login-form/web/index.html", "native": "components/login-form/mobile/ReactNative.tsx", "compose": "components/login-form/android/AndroidCompose.kt", "swiftui": "components/login-form/apple/SwiftUI.swift", "winui": "components/login-form/windows/WinUI.xaml", "flutter": "components/login-form/cross-platform/Flutter.dart" }, "figma": { "preview": "components/login-form/figma/preview.svg", "tokens": "components/login-form/figma/tokens.tokens.json", "spec": "components/login-form/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "login-form", "ログインフォーム", "Login Form" ], "official": [], "aliases": [ "Sign in Form" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "signup-form", "ja": "新規登録フォーム", "en": "Sign-up Form", "aliases": [ "Register Form" ], "names": { "canonical": { "ja": "新規登録フォーム", "en": "Sign-up Form", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Register Form", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "新規登録フォーム", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sign-up Form", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Register Form", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "新しいアカウントを作成するフォーム。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "新しいアカウントを作成するフォーム。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Sign-up Formは「新しいアカウントを作成するフォーム。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "login-form", "password-reset", "otp-form", "profile-editor" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Sign-up Form" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Sign-up Form" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Sign-up Form" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Sign-up Form" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Sign-up Form" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Sign-up Form" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Sign-up Form" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=signup-form", "implementations": { "react": "components/signup-form/web/ReactTailwind.tsx", "html": "components/signup-form/web/index.html", "native": "components/signup-form/mobile/ReactNative.tsx", "compose": "components/signup-form/android/AndroidCompose.kt", "swiftui": "components/signup-form/apple/SwiftUI.swift", "winui": "components/signup-form/windows/WinUI.xaml", "flutter": "components/signup-form/cross-platform/Flutter.dart" }, "figma": { "preview": "components/signup-form/figma/preview.svg", "tokens": "components/signup-form/figma/tokens.tokens.json", "spec": "components/signup-form/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "signup-form", "新規登録フォーム", "Sign-up Form" ], "official": [], "aliases": [ "Register Form" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "social-login", "ja": "ソーシャルログイン", "en": "Social Login", "aliases": [ "OAuth Login" ], "names": { "canonical": { "ja": "ソーシャルログイン", "en": "Social Login", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "OAuth Login", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ソーシャルログイン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Social Login", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "OAuth Login", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "外部IDプロバイダーで認証するボタン群。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "外部IDプロバイダーで認証するボタン群。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Social Loginは「外部IDプロバイダーで認証するボタン群。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "profile-menu", "user-profile-card", "account-switcher", "preference-row" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Social Login" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Social Login" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Social Login" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Social Login" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Social Login" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Social Login" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Social Login" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=social-login", "implementations": { "react": "components/social-login/web/ReactTailwind.tsx", "html": "components/social-login/web/index.html", "native": "components/social-login/mobile/ReactNative.tsx", "compose": "components/social-login/android/AndroidCompose.kt", "swiftui": "components/social-login/apple/SwiftUI.swift", "winui": "components/social-login/windows/WinUI.xaml", "flutter": "components/social-login/cross-platform/Flutter.dart" }, "figma": { "preview": "components/social-login/figma/preview.svg", "tokens": "components/social-login/figma/tokens.tokens.json", "spec": "components/social-login/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "social-login", "ソーシャルログイン", "Social Login" ], "official": [], "aliases": [ "OAuth Login" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "password-reset", "ja": "パスワード再設定", "en": "Password Reset", "aliases": [ "Forgot Password" ], "names": { "canonical": { "ja": "パスワード再設定", "en": "Password Reset", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Forgot Password", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "パスワード再設定", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Password Reset", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Forgot Password", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "再設定メール送信や新しい秘密文字列を入力する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "再設定メール送信や新しい秘密文字列を入力する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Password Resetは「再設定メール送信や新しい秘密文字列を入力する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "login-form", "signup-form", "otp-form", "profile-editor" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Password Reset" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Password Reset" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Password Reset" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Password Reset" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Password Reset" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Password Reset" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Password Reset" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=password-reset", "implementations": { "react": "components/password-reset/web/ReactTailwind.tsx", "html": "components/password-reset/web/index.html", "native": "components/password-reset/mobile/ReactNative.tsx", "compose": "components/password-reset/android/AndroidCompose.kt", "swiftui": "components/password-reset/apple/SwiftUI.swift", "winui": "components/password-reset/windows/WinUI.xaml", "flutter": "components/password-reset/cross-platform/Flutter.dart" }, "figma": { "preview": "components/password-reset/figma/preview.svg", "tokens": "components/password-reset/figma/tokens.tokens.json", "spec": "components/password-reset/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "password-reset", "パスワード再設定", "Password Reset" ], "official": [], "aliases": [ "Forgot Password" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "otp-form", "ja": "認証コードフォーム", "en": "OTP Form", "aliases": [ "Verification Code" ], "names": { "canonical": { "ja": "認証コードフォーム", "en": "OTP Form", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Verification Code", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "認証コードフォーム", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "OTP Form", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Verification Code", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "メールやSMSの確認コードで本人確認する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "メールやSMSの確認コードで本人確認する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "OTP Formは「メールやSMSの確認コードで本人確認する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "login-form", "signup-form", "password-reset", "profile-editor" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "OTP Form" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "OTP Form" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "OTP Form" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "OTP Form" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "OTP Form" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "OTP Form" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "OTP Form" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=otp-form", "implementations": { "react": "components/otp-form/web/ReactTailwind.tsx", "html": "components/otp-form/web/index.html", "native": "components/otp-form/mobile/ReactNative.tsx", "compose": "components/otp-form/android/AndroidCompose.kt", "swiftui": "components/otp-form/apple/SwiftUI.swift", "winui": "components/otp-form/windows/WinUI.xaml", "flutter": "components/otp-form/cross-platform/Flutter.dart" }, "figma": { "preview": "components/otp-form/figma/preview.svg", "tokens": "components/otp-form/figma/tokens.tokens.json", "spec": "components/otp-form/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "otp-form", "認証コードフォーム", "OTP Form" ], "official": [], "aliases": [ "Verification Code" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "passkey-prompt", "ja": "パスキープロンプト", "en": "Passkey Prompt", "aliases": [ "WebAuthn Prompt" ], "names": { "canonical": { "ja": "パスキープロンプト", "en": "Passkey Prompt", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "WebAuthn Prompt", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "パスキープロンプト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Passkey Prompt", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "WebAuthn Prompt", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "端末の生体認証等でパスキー認証を促す。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "前面レイヤー", "Overlay", "screen-pattern", "none", "allowed", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "端末の生体認証等でパスキー認証を促す。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Passkey Promptは「端末の生体認証等でパスキー認証を促す。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "permission-prompt", "delete-account", "login-form", "signup-form" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Passkey Prompt" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Passkey Prompt" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Passkey Prompt" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Passkey Prompt" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Passkey Prompt" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Passkey Prompt" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Passkey Prompt" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=passkey-prompt", "implementations": { "react": "components/passkey-prompt/web/ReactTailwind.tsx", "html": "components/passkey-prompt/web/index.html", "native": "components/passkey-prompt/mobile/ReactNative.tsx", "compose": "components/passkey-prompt/android/AndroidCompose.kt", "swiftui": "components/passkey-prompt/apple/SwiftUI.swift", "winui": "components/passkey-prompt/windows/WinUI.xaml", "flutter": "components/passkey-prompt/cross-platform/Flutter.dart" }, "figma": { "preview": "components/passkey-prompt/figma/preview.svg", "tokens": "components/passkey-prompt/figma/tokens.tokens.json", "spec": "components/passkey-prompt/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "passkey-prompt", "パスキープロンプト", "Passkey Prompt" ], "official": [], "aliases": [ "WebAuthn Prompt" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "前面レイヤー", "Overlay", "screen-pattern", "none", "allowed", "not-applicable" ] } }, { "id": "profile-menu", "ja": "プロフィールメニュー", "en": "Profile Menu", "aliases": [ "User Menu", "Account Menu" ], "names": { "canonical": { "ja": "プロフィールメニュー", "en": "Profile Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "User Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Account Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "プロフィールメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Profile Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "User Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Account Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "アバターからアカウント操作を展開する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "nav", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "アバターからアカウント操作を展開する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Profile Menuは「アバターからアカウント操作を展開する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "social-login", "user-profile-card", "account-switcher", "preference-row" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Profile Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Profile Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Profile Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Profile Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Profile Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Profile Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Profile Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=profile-menu", "implementations": { "react": "components/profile-menu/web/ReactTailwind.tsx", "html": "components/profile-menu/web/index.html", "native": "components/profile-menu/mobile/ReactNative.tsx", "compose": "components/profile-menu/android/AndroidCompose.kt", "swiftui": "components/profile-menu/apple/SwiftUI.swift", "winui": "components/profile-menu/windows/WinUI.xaml", "flutter": "components/profile-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/profile-menu/figma/preview.svg", "tokens": "components/profile-menu/figma/tokens.tokens.json", "spec": "components/profile-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "profile-menu", "プロフィールメニュー", "Profile Menu" ], "official": [], "aliases": [ "User Menu", "Account Menu" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "user-profile-card", "ja": "ユーザープロフィールカード", "en": "User Profile Card", "aliases": [ "Profile Card" ], "names": { "canonical": { "ja": "ユーザープロフィールカード", "en": "User Profile Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Profile Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ユーザープロフィールカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "User Profile Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Profile Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "人物の画像・名前・属性・操作をまとめる。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "人物の画像・名前・属性・操作をまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "User Profile Cardは「人物の画像・名前・属性・操作をまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "social-login", "profile-menu", "account-switcher", "preference-row" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "User Profile Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "User Profile Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "User Profile Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "User Profile Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "User Profile Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "User Profile Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "User Profile Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=user-profile-card", "implementations": { "react": "components/user-profile-card/web/ReactTailwind.tsx", "html": "components/user-profile-card/web/index.html", "native": "components/user-profile-card/mobile/ReactNative.tsx", "compose": "components/user-profile-card/android/AndroidCompose.kt", "swiftui": "components/user-profile-card/apple/SwiftUI.swift", "winui": "components/user-profile-card/windows/WinUI.xaml", "flutter": "components/user-profile-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/user-profile-card/figma/preview.svg", "tokens": "components/user-profile-card/figma/tokens.tokens.json", "spec": "components/user-profile-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "user-profile-card", "ユーザープロフィールカード", "User Profile Card" ], "official": [], "aliases": [ "Profile Card" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "account-switcher", "ja": "アカウント切替", "en": "Account Switcher", "aliases": [ "Workspace Switcher" ], "names": { "canonical": { "ja": "アカウント切替", "en": "Account Switcher", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Workspace Switcher", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アカウント切替", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Account Switcher", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Workspace Switcher", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数の個人・組織アカウントを切り替える。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "single", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "single", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数の個人・組織アカウントを切り替える。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Account Switcherは「複数の個人・組織アカウントを切り替える。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "social-login", "profile-menu", "user-profile-card", "preference-row" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Account Switcher" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Account Switcher" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Account Switcher" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Account Switcher" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Account Switcher" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Account Switcher" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Account Switcher" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=account-switcher", "implementations": { "react": "components/account-switcher/web/ReactTailwind.tsx", "html": "components/account-switcher/web/index.html", "native": "components/account-switcher/mobile/ReactNative.tsx", "compose": "components/account-switcher/android/AndroidCompose.kt", "swiftui": "components/account-switcher/apple/SwiftUI.swift", "winui": "components/account-switcher/windows/WinUI.xaml", "flutter": "components/account-switcher/cross-platform/Flutter.dart" }, "figma": { "preview": "components/account-switcher/figma/preview.svg", "tokens": "components/account-switcher/figma/tokens.tokens.json", "spec": "components/account-switcher/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "account-switcher", "アカウント切替", "Account Switcher" ], "official": [], "aliases": [ "Workspace Switcher" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "single", "not-applicable" ] } }, { "id": "settings-list", "ja": "設定一覧", "en": "Settings List", "aliases": [ "Preferences" ], "names": { "canonical": { "ja": "設定一覧", "en": "Settings List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Preferences", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "設定一覧", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Settings List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Preferences", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "設定項目をカテゴリ別に並べる。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "設定項目をカテゴリ別に並べる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Settings Listは「設定項目をカテゴリ別に並べる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "session-list", "security-key-list", "login-form", "signup-form" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Settings List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Settings List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Settings List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Settings List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Settings List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Settings List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Settings List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=settings-list", "implementations": { "react": "components/settings-list/web/ReactTailwind.tsx", "html": "components/settings-list/web/index.html", "native": "components/settings-list/mobile/ReactNative.tsx", "compose": "components/settings-list/android/AndroidCompose.kt", "swiftui": "components/settings-list/apple/SwiftUI.swift", "winui": "components/settings-list/windows/WinUI.xaml", "flutter": "components/settings-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/settings-list/figma/preview.svg", "tokens": "components/settings-list/figma/tokens.tokens.json", "spec": "components/settings-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "settings-list", "設定一覧", "Settings List" ], "official": [], "aliases": [ "Preferences" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "preference-row", "ja": "設定行", "en": "Preference Row", "aliases": [ "Settings Item" ], "names": { "canonical": { "ja": "設定行", "en": "Preference Row", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Settings Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "設定行", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Preference Row", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Settings Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "設定名・説明・現在値や操作を1行にまとめる。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "設定名・説明・現在値や操作を1行にまとめる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Preference Rowは「設定名・説明・現在値や操作を1行にまとめる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "social-login", "profile-menu", "user-profile-card", "account-switcher" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Preference Row" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Preference Row" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Preference Row" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Preference Row" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Preference Row" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Preference Row" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Preference Row" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=preference-row", "implementations": { "react": "components/preference-row/web/ReactTailwind.tsx", "html": "components/preference-row/web/index.html", "native": "components/preference-row/mobile/ReactNative.tsx", "compose": "components/preference-row/android/AndroidCompose.kt", "swiftui": "components/preference-row/apple/SwiftUI.swift", "winui": "components/preference-row/windows/WinUI.xaml", "flutter": "components/preference-row/cross-platform/Flutter.dart" }, "figma": { "preview": "components/preference-row/figma/preview.svg", "tokens": "components/preference-row/figma/tokens.tokens.json", "spec": "components/preference-row/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "preference-row", "設定行", "Preference Row" ], "official": [], "aliases": [ "Settings Item" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "permission-prompt", "ja": "権限リクエスト", "en": "Permission Prompt", "aliases": [ "Permission Request" ], "names": { "canonical": { "ja": "権限リクエスト", "en": "Permission Prompt", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Permission Request", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "権限リクエスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Permission Prompt", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Permission Request", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "通知・位置情報などの許可理由を説明して求める。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "前面レイヤー", "Overlay", "component", "none", "allowed", "until-dismissed" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "until-dismissed" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "通知・位置情報などの許可理由を説明して求める。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Permission Promptは「通知・位置情報などの許可理由を説明して求める。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "delete-account", "passkey-prompt", "social-login", "profile-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Permission Prompt" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Permission Prompt" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Permission Prompt" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Permission Prompt" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Permission Prompt" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Permission Prompt" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Permission Prompt" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=permission-prompt", "implementations": { "react": "components/permission-prompt/web/ReactTailwind.tsx", "html": "components/permission-prompt/web/index.html", "native": "components/permission-prompt/mobile/ReactNative.tsx", "compose": "components/permission-prompt/android/AndroidCompose.kt", "swiftui": "components/permission-prompt/apple/SwiftUI.swift", "winui": "components/permission-prompt/windows/WinUI.xaml", "flutter": "components/permission-prompt/cross-platform/Flutter.dart" }, "figma": { "preview": "components/permission-prompt/figma/preview.svg", "tokens": "components/permission-prompt/figma/tokens.tokens.json", "spec": "components/permission-prompt/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "permission-prompt", "権限リクエスト", "Permission Prompt" ], "official": [], "aliases": [ "Permission Request" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "前面レイヤー", "Overlay", "component", "none", "allowed", "until-dismissed" ] } }, { "id": "session-list", "ja": "ログインセッション一覧", "en": "Session List", "aliases": [ "Active Sessions" ], "names": { "canonical": { "ja": "ログインセッション一覧", "en": "Session List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Active Sessions", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ログインセッション一覧", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Session List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Active Sessions", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ログイン中の端末・場所・日時を表示する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ログイン中の端末・場所・日時を表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Session Listは「ログイン中の端末・場所・日時を表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "settings-list", "security-key-list", "login-form", "signup-form" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Session List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Session List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Session List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Session List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Session List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Session List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Session List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=session-list", "implementations": { "react": "components/session-list/web/ReactTailwind.tsx", "html": "components/session-list/web/index.html", "native": "components/session-list/mobile/ReactNative.tsx", "compose": "components/session-list/android/AndroidCompose.kt", "swiftui": "components/session-list/apple/SwiftUI.swift", "winui": "components/session-list/windows/WinUI.xaml", "flutter": "components/session-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/session-list/figma/preview.svg", "tokens": "components/session-list/figma/tokens.tokens.json", "spec": "components/session-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "session-list", "ログインセッション一覧", "Session List" ], "official": [], "aliases": [ "Active Sessions" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "security-key-list", "ja": "セキュリティキー一覧", "en": "Security Key List", "aliases": [ "Passkey List" ], "names": { "canonical": { "ja": "セキュリティキー一覧", "en": "Security Key List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Passkey List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "セキュリティキー一覧", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Security Key List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Passkey List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "登録済みパスキーや物理キーを管理する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "登録済みパスキーや物理キーを管理する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Security Key Listは「登録済みパスキーや物理キーを管理する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "settings-list", "session-list", "login-form", "signup-form" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Security Key List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Security Key List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Security Key List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Security Key List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Security Key List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Security Key List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Security Key List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=security-key-list", "implementations": { "react": "components/security-key-list/web/ReactTailwind.tsx", "html": "components/security-key-list/web/index.html", "native": "components/security-key-list/mobile/ReactNative.tsx", "compose": "components/security-key-list/android/AndroidCompose.kt", "swiftui": "components/security-key-list/apple/SwiftUI.swift", "winui": "components/security-key-list/windows/WinUI.xaml", "flutter": "components/security-key-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/security-key-list/figma/preview.svg", "tokens": "components/security-key-list/figma/tokens.tokens.json", "spec": "components/security-key-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "security-key-list", "セキュリティキー一覧", "Security Key List" ], "official": [], "aliases": [ "Passkey List" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "delete-account", "ja": "アカウント削除確認", "en": "Delete Account Confirmation", "aliases": [ "Danger Zone" ], "names": { "canonical": { "ja": "アカウント削除確認", "en": "Delete Account Confirmation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Danger Zone", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アカウント削除確認", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Delete Account Confirmation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Danger Zone", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "影響を説明してアカウント削除を確認する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "前面レイヤー", "Overlay", "component", "none", "allowed", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "影響を説明してアカウント削除を確認する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Delete Account Confirmationは「影響を説明してアカウント削除を確認する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "permission-prompt", "passkey-prompt", "social-login", "profile-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Delete Account Confirmation" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Delete Account Confirmation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Delete Account Confirmation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Delete Account Confirmation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Delete Account Confirmation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Delete Account Confirmation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Delete Account Confirmation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=delete-account", "implementations": { "react": "components/delete-account/web/ReactTailwind.tsx", "html": "components/delete-account/web/index.html", "native": "components/delete-account/mobile/ReactNative.tsx", "compose": "components/delete-account/android/AndroidCompose.kt", "swiftui": "components/delete-account/apple/SwiftUI.swift", "winui": "components/delete-account/windows/WinUI.xaml", "flutter": "components/delete-account/cross-platform/Flutter.dart" }, "figma": { "preview": "components/delete-account/figma/preview.svg", "tokens": "components/delete-account/figma/tokens.tokens.json", "spec": "components/delete-account/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "delete-account", "アカウント削除確認", "Delete Account Confirmation" ], "official": [], "aliases": [ "Danger Zone" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "前面レイヤー", "Overlay", "component", "none", "allowed", "not-applicable" ] } }, { "id": "consent-checkbox", "ja": "同意チェック", "en": "Consent Checkbox", "aliases": [ "Terms Consent" ], "names": { "canonical": { "ja": "同意チェック", "en": "Consent Checkbox", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Terms Consent", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "同意チェック", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Consent Checkbox", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Terms Consent", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "規約や個人情報利用への明示的同意を得る。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "規約や個人情報利用への明示的同意を得る。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Consent Checkboxは「規約や個人情報利用への明示的同意を得る。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "social-login", "profile-menu", "user-profile-card", "account-switcher" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Consent Checkbox" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Consent Checkbox" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Consent Checkbox" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Consent Checkbox" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Consent Checkbox" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Consent Checkbox" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Consent Checkbox" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=consent-checkbox", "implementations": { "react": "components/consent-checkbox/web/ReactTailwind.tsx", "html": "components/consent-checkbox/web/index.html", "native": "components/consent-checkbox/mobile/ReactNative.tsx", "compose": "components/consent-checkbox/android/AndroidCompose.kt", "swiftui": "components/consent-checkbox/apple/SwiftUI.swift", "winui": "components/consent-checkbox/windows/WinUI.xaml", "flutter": "components/consent-checkbox/cross-platform/Flutter.dart" }, "figma": { "preview": "components/consent-checkbox/figma/preview.svg", "tokens": "components/consent-checkbox/figma/tokens.tokens.json", "spec": "components/consent-checkbox/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "consent-checkbox", "同意チェック", "Consent Checkbox" ], "official": [], "aliases": [ "Terms Consent" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "profile-editor", "ja": "プロフィール編集", "en": "Profile Editor", "aliases": [ "Edit Profile" ], "names": { "canonical": { "ja": "プロフィール編集", "en": "Profile Editor", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Edit Profile", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "プロフィール編集", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Profile Editor", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Edit Profile", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "名前・画像・自己紹介などを編集するフォーム。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "名前・画像・自己紹介などを編集するフォーム。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Profile Editorは「名前・画像・自己紹介などを編集するフォーム。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "login-form", "signup-form", "password-reset", "otp-form" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Profile Editor" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Profile Editor" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Profile Editor" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Profile Editor" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Profile Editor" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Profile Editor" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Profile Editor" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=profile-editor", "implementations": { "react": "components/profile-editor/web/ReactTailwind.tsx", "html": "components/profile-editor/web/index.html", "native": "components/profile-editor/mobile/ReactNative.tsx", "compose": "components/profile-editor/android/AndroidCompose.kt", "swiftui": "components/profile-editor/apple/SwiftUI.swift", "winui": "components/profile-editor/windows/WinUI.xaml", "flutter": "components/profile-editor/cross-platform/Flutter.dart" }, "figma": { "preview": "components/profile-editor/figma/preview.svg", "tokens": "components/profile-editor/figma/tokens.tokens.json", "spec": "components/profile-editor/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "profile-editor", "プロフィール編集", "Profile Editor" ], "official": [], "aliases": [ "Edit Profile" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "two-factor-setup", "ja": "二要素認証設定", "en": "Two-factor Setup", "aliases": [ "2FA Setup", "MFA" ], "names": { "canonical": { "ja": "二要素認証設定", "en": "Two-factor Setup", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "2FA Setup", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "MFA", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "二要素認証設定", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Two-factor Setup", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "2FA Setup", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "MFA", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "追加認証手段の登録と確認を案内する。", "category": "auth-account", "categoryLabel": { "ja": "認証・アカウント", "en": "Auth & Account" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "form", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "追加認証手段の登録と確認を案内する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Two-factor Setupは「追加認証手段の登録と確認を案内する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "login-form", "signup-form", "password-reset", "otp-form" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Two-factor Setup" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Two-factor Setup" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Two-factor Setup" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Two-factor Setup" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Two-factor Setup" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Two-factor Setup" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Two-factor Setup" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=two-factor-setup", "implementations": { "react": "components/two-factor-setup/web/ReactTailwind.tsx", "html": "components/two-factor-setup/web/index.html", "native": "components/two-factor-setup/mobile/ReactNative.tsx", "compose": "components/two-factor-setup/android/AndroidCompose.kt", "swiftui": "components/two-factor-setup/apple/SwiftUI.swift", "winui": "components/two-factor-setup/windows/WinUI.xaml", "flutter": "components/two-factor-setup/cross-platform/Flutter.dart" }, "figma": { "preview": "components/two-factor-setup/figma/preview.svg", "tokens": "components/two-factor-setup/figma/tokens.tokens.json", "spec": "components/two-factor-setup/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "two-factor-setup", "二要素認証設定", "Two-factor Setup" ], "official": [], "aliases": [ "2FA Setup", "MFA" ], "relatedNames": [], "facets": [ "認証・アカウントを扱う", "認証・アカウント", "Auth & Account", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "chat-bubble", "ja": "チャット吹き出し", "en": "Chat Bubble", "aliases": [ "Message Bubble" ], "names": { "canonical": { "ja": "チャット吹き出し", "en": "Chat Bubble", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Message Bubble", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "チャット吹き出し", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Chat Bubble", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Message Bubble", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "1件のメッセージを送受信方向とともに示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "1件のメッセージを送受信方向とともに示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Chat Bubbleは「1件のメッセージを送受信方向とともに示す。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "inbox-row", "chat-thread", "comment", "comment-thread" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Chat Bubble" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Chat Bubble" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Chat Bubble" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Chat Bubble" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Chat Bubble" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Chat Bubble" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Chat Bubble" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=chat-bubble", "implementations": { "react": "components/chat-bubble/web/ReactTailwind.tsx", "html": "components/chat-bubble/web/index.html", "native": "components/chat-bubble/mobile/ReactNative.tsx", "compose": "components/chat-bubble/android/AndroidCompose.kt", "swiftui": "components/chat-bubble/apple/SwiftUI.swift", "winui": "components/chat-bubble/windows/WinUI.xaml", "flutter": "components/chat-bubble/cross-platform/Flutter.dart" }, "figma": { "preview": "components/chat-bubble/figma/preview.svg", "tokens": "components/chat-bubble/figma/tokens.tokens.json", "spec": "components/chat-bubble/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "chat-bubble", "チャット吹き出し", "Chat Bubble" ], "official": [], "aliases": [ "Message Bubble" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "chat-thread", "ja": "チャットスレッド", "en": "Chat Thread", "aliases": [ "Conversation" ], "names": { "canonical": { "ja": "チャットスレッド", "en": "Chat Thread", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Conversation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "チャットスレッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Chat Thread", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Conversation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "会話メッセージを時系列で表示する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "会話メッセージを時系列で表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Chat Threadは「会話メッセージを時系列で表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "comment", "mention-input", "voice-message", "user-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Chat Thread" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Chat Thread" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Chat Thread" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Chat Thread" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Chat Thread" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Chat Thread" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Chat Thread" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=chat-thread", "implementations": { "react": "components/chat-thread/web/ReactTailwind.tsx", "html": "components/chat-thread/web/index.html", "native": "components/chat-thread/mobile/ReactNative.tsx", "compose": "components/chat-thread/android/AndroidCompose.kt", "swiftui": "components/chat-thread/apple/SwiftUI.swift", "winui": "components/chat-thread/windows/WinUI.xaml", "flutter": "components/chat-thread/cross-platform/Flutter.dart" }, "figma": { "preview": "components/chat-thread/figma/preview.svg", "tokens": "components/chat-thread/figma/tokens.tokens.json", "spec": "components/chat-thread/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "chat-thread", "チャットスレッド", "Chat Thread" ], "official": [], "aliases": [ "Conversation" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "message-composer", "ja": "メッセージ入力欄", "en": "Message Composer", "aliases": [ "Chat Input" ], "names": { "canonical": { "ja": "メッセージ入力欄", "en": "Message Composer", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Chat Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メッセージ入力欄", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Message Composer", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Chat Input", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "文章・添付・送信操作をまとめる入力領域。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "文章・添付・送信操作をまとめる入力領域。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Message Composerは「文章・添付・送信操作をまとめる入力領域。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "video-call-controls", "share-sheet", "chat-thread", "presence-indicator" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Message Composer" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Message Composer" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Message Composer" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Message Composer" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Message Composer" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Message Composer" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Message Composer" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=message-composer", "implementations": { "react": "components/message-composer/web/ReactTailwind.tsx", "html": "components/message-composer/web/index.html", "native": "components/message-composer/mobile/ReactNative.tsx", "compose": "components/message-composer/android/AndroidCompose.kt", "swiftui": "components/message-composer/apple/SwiftUI.swift", "winui": "components/message-composer/windows/WinUI.xaml", "flutter": "components/message-composer/cross-platform/Flutter.dart" }, "figma": { "preview": "components/message-composer/figma/preview.svg", "tokens": "components/message-composer/figma/tokens.tokens.json", "spec": "components/message-composer/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "message-composer", "メッセージ入力欄", "Message Composer" ], "official": [], "aliases": [ "Chat Input" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "typing-indicator", "ja": "入力中表示", "en": "Typing Indicator", "aliases": [ "Typing Dots" ], "names": { "canonical": { "ja": "入力中表示", "en": "Typing Indicator", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Typing Dots", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "入力中表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Typing Indicator", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Typing Dots", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "相手が文章を入力中であることを示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "要素の近く", "Anchored / inline", "component", "none", "allowed", "transient" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "相手が文章を入力中であることを示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Typing Indicatorは「相手が文章を入力中であることを示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "presence-indicator", "read-receipt", "reaction-picker", "share-sheet" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Typing Indicator" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Typing Indicator" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Typing Indicator" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Typing Indicator" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Typing Indicator" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Typing Indicator" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Typing Indicator" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=typing-indicator", "implementations": { "react": "components/typing-indicator/web/ReactTailwind.tsx", "html": "components/typing-indicator/web/index.html", "native": "components/typing-indicator/mobile/ReactNative.tsx", "compose": "components/typing-indicator/android/AndroidCompose.kt", "swiftui": "components/typing-indicator/apple/SwiftUI.swift", "winui": "components/typing-indicator/windows/WinUI.xaml", "flutter": "components/typing-indicator/cross-platform/Flutter.dart" }, "figma": { "preview": "components/typing-indicator/figma/preview.svg", "tokens": "components/typing-indicator/figma/tokens.tokens.json", "spec": "components/typing-indicator/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "typing-indicator", "入力中表示", "Typing Indicator" ], "official": [], "aliases": [ "Typing Dots" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "要素の近く", "Anchored / inline", "component", "none", "allowed", "transient" ] } }, { "id": "presence-indicator", "ja": "在席表示", "en": "Presence Indicator", "aliases": [ "Online Status" ], "names": { "canonical": { "ja": "在席表示", "en": "Presence Indicator", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Online Status", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "在席表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Presence Indicator", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Online Status", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "オンライン・離席・オフラインを示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "オンライン・離席・オフラインを示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Presence Indicatorは「オンライン・離席・オフラインを示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "read-receipt", "typing-indicator", "chat-thread", "message-composer" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Presence Indicator" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Presence Indicator" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Presence Indicator" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Presence Indicator" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Presence Indicator" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Presence Indicator" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Presence Indicator" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=presence-indicator", "implementations": { "react": "components/presence-indicator/web/ReactTailwind.tsx", "html": "components/presence-indicator/web/index.html", "native": "components/presence-indicator/mobile/ReactNative.tsx", "compose": "components/presence-indicator/android/AndroidCompose.kt", "swiftui": "components/presence-indicator/apple/SwiftUI.swift", "winui": "components/presence-indicator/windows/WinUI.xaml", "flutter": "components/presence-indicator/cross-platform/Flutter.dart" }, "figma": { "preview": "components/presence-indicator/figma/preview.svg", "tokens": "components/presence-indicator/figma/tokens.tokens.json", "spec": "components/presence-indicator/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "presence-indicator", "在席表示", "Presence Indicator" ], "official": [], "aliases": [ "Online Status" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "reaction-picker", "ja": "リアクション選択", "en": "Reaction Picker", "aliases": [ "Emoji Picker" ], "names": { "canonical": { "ja": "リアクション選択", "en": "Reaction Picker", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Emoji Picker", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "リアクション選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Reaction Picker", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Emoji Picker", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "絵文字などの反応を選んで付与する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "前面レイヤー", "Overlay", "component", "multiple", "allowed", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "multiple", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "狭い画面では全幅またはBottom Sheetへの置換を検討し、戻る操作と安全領域を保ちます。", "useWhen": [ "絵文字などの反応を選んで付与する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Reaction Pickerは「絵文字などの反応を選んで付与する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "typing-indicator", "share-sheet", "chat-thread", "message-composer" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Reaction Picker" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Reaction Picker" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Reaction Picker" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Reaction Picker" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Reaction Picker" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Reaction Picker" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Reaction Picker" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=reaction-picker", "implementations": { "react": "components/reaction-picker/web/ReactTailwind.tsx", "html": "components/reaction-picker/web/index.html", "native": "components/reaction-picker/mobile/ReactNative.tsx", "compose": "components/reaction-picker/android/AndroidCompose.kt", "swiftui": "components/reaction-picker/apple/SwiftUI.swift", "winui": "components/reaction-picker/windows/WinUI.xaml", "flutter": "components/reaction-picker/cross-platform/Flutter.dart" }, "figma": { "preview": "components/reaction-picker/figma/preview.svg", "tokens": "components/reaction-picker/figma/tokens.tokens.json", "spec": "components/reaction-picker/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "reaction-picker", "リアクション選択", "Reaction Picker" ], "official": [], "aliases": [ "Emoji Picker" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "前面レイヤー", "Overlay", "component", "multiple", "allowed", "not-applicable" ] } }, { "id": "comment", "ja": "コメント", "en": "Comment", "aliases": [ "Comment Item" ], "names": { "canonical": { "ja": "コメント", "en": "Comment", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Comment Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コメント", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Comment", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Comment Item", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "投稿への返信内容・投稿者・日時・操作を示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "投稿への返信内容・投稿者・日時・操作を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Commentは「投稿への返信内容・投稿者・日時・操作を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "chat-thread", "mention-input", "voice-message", "user-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Comment" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Comment" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Comment" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Comment" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Comment" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Comment" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Comment" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=comment", "implementations": { "react": "components/comment/web/ReactTailwind.tsx", "html": "components/comment/web/index.html", "native": "components/comment/mobile/ReactNative.tsx", "compose": "components/comment/android/AndroidCompose.kt", "swiftui": "components/comment/apple/SwiftUI.swift", "winui": "components/comment/windows/WinUI.xaml", "flutter": "components/comment/cross-platform/Flutter.dart" }, "figma": { "preview": "components/comment/figma/preview.svg", "tokens": "components/comment/figma/tokens.tokens.json", "spec": "components/comment/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "comment", "コメント", "Comment" ], "official": [], "aliases": [ "Comment Item" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "comment-thread", "ja": "コメントスレッド", "en": "Comment Thread", "aliases": [ "Nested Comments" ], "names": { "canonical": { "ja": "コメントスレッド", "en": "Comment Thread", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Nested Comments", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コメントスレッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Comment Thread", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Nested Comments", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "親コメントと返信を階層表示する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "親コメントと返信を階層表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Comment Threadは「親コメントと返信を階層表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "contact-list", "activity-feed", "poll", "chat-bubble" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Comment Thread" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Comment Thread" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Comment Thread" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Comment Thread" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Comment Thread" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Comment Thread" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Comment Thread" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=comment-thread", "implementations": { "react": "components/comment-thread/web/ReactTailwind.tsx", "html": "components/comment-thread/web/index.html", "native": "components/comment-thread/mobile/ReactNative.tsx", "compose": "components/comment-thread/android/AndroidCompose.kt", "swiftui": "components/comment-thread/apple/SwiftUI.swift", "winui": "components/comment-thread/windows/WinUI.xaml", "flutter": "components/comment-thread/cross-platform/Flutter.dart" }, "figma": { "preview": "components/comment-thread/figma/preview.svg", "tokens": "components/comment-thread/figma/tokens.tokens.json", "spec": "components/comment-thread/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "comment-thread", "コメントスレッド", "Comment Thread" ], "official": [], "aliases": [ "Nested Comments" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "mention-input", "ja": "メンション入力", "en": "Mention Input", "aliases": [ "User Mention" ], "names": { "canonical": { "ja": "メンション入力", "en": "Mention Input", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "User Mention", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "メンション入力", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Mention Input", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "User Mention", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "@入力から人物候補を検索して挿入する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "@入力から人物候補を検索して挿入する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Mention Inputは「@入力から人物候補を検索して挿入する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "chat-thread", "comment", "voice-message", "user-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Mention Input" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Mention Input" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Mention Input" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Mention Input" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Mention Input" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Mention Input" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Mention Input" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=mention-input", "implementations": { "react": "components/mention-input/web/ReactTailwind.tsx", "html": "components/mention-input/web/index.html", "native": "components/mention-input/mobile/ReactNative.tsx", "compose": "components/mention-input/android/AndroidCompose.kt", "swiftui": "components/mention-input/apple/SwiftUI.swift", "winui": "components/mention-input/windows/WinUI.xaml", "flutter": "components/mention-input/cross-platform/Flutter.dart" }, "figma": { "preview": "components/mention-input/figma/preview.svg", "tokens": "components/mention-input/figma/tokens.tokens.json", "spec": "components/mention-input/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "mention-input", "メンション入力", "Mention Input" ], "official": [], "aliases": [ "User Mention" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "contact-list", "ja": "連絡先一覧", "en": "Contact List", "aliases": [ "People List" ], "names": { "canonical": { "ja": "連絡先一覧", "en": "Contact List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "People List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "連絡先一覧", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Contact List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "People List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "人物を名前・状態・最近の情報で並べる。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "人物を名前・状態・最近の情報で並べる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Contact Listは「人物を名前・状態・最近の情報で並べる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "comment-thread", "activity-feed", "poll", "chat-bubble" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Contact List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Contact List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Contact List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Contact List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Contact List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Contact List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Contact List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=contact-list", "implementations": { "react": "components/contact-list/web/ReactTailwind.tsx", "html": "components/contact-list/web/index.html", "native": "components/contact-list/mobile/ReactNative.tsx", "compose": "components/contact-list/android/AndroidCompose.kt", "swiftui": "components/contact-list/apple/SwiftUI.swift", "winui": "components/contact-list/windows/WinUI.xaml", "flutter": "components/contact-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/contact-list/figma/preview.svg", "tokens": "components/contact-list/figma/tokens.tokens.json", "spec": "components/contact-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "contact-list", "連絡先一覧", "Contact List" ], "official": [], "aliases": [ "People List" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "inbox-row", "ja": "受信トレイ行", "en": "Inbox Row", "aliases": [ "Message Row" ], "names": { "canonical": { "ja": "受信トレイ行", "en": "Inbox Row", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Message Row", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "受信トレイ行", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Inbox Row", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Message Row", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "送信者・件名・抜粋・未読状態を1行に示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "送信者・件名・抜粋・未読状態を1行に示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Inbox Rowは「送信者・件名・抜粋・未読状態を1行に示す。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "chat-bubble", "chat-thread", "comment", "comment-thread" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Inbox Row" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Inbox Row" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Inbox Row" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Inbox Row" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Inbox Row" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Inbox Row" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Inbox Row" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=inbox-row", "implementations": { "react": "components/inbox-row/web/ReactTailwind.tsx", "html": "components/inbox-row/web/index.html", "native": "components/inbox-row/mobile/ReactNative.tsx", "compose": "components/inbox-row/android/AndroidCompose.kt", "swiftui": "components/inbox-row/apple/SwiftUI.swift", "winui": "components/inbox-row/windows/WinUI.xaml", "flutter": "components/inbox-row/cross-platform/Flutter.dart" }, "figma": { "preview": "components/inbox-row/figma/preview.svg", "tokens": "components/inbox-row/figma/tokens.tokens.json", "spec": "components/inbox-row/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "inbox-row", "受信トレイ行", "Inbox Row" ], "official": [], "aliases": [ "Message Row" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "activity-feed", "ja": "アクティビティフィード", "en": "Activity Feed", "aliases": [ "Social Feed" ], "names": { "canonical": { "ja": "アクティビティフィード", "en": "Activity Feed", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Social Feed", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アクティビティフィード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Activity Feed", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Social Feed", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "フォロー・更新・反応などを時系列表示する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "フォロー・更新・反応などを時系列表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Activity Feedは「フォロー・更新・反応などを時系列表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "comment-thread", "contact-list", "poll", "chat-bubble" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Activity Feed" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Activity Feed" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Activity Feed" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Activity Feed" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Activity Feed" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Activity Feed" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Activity Feed" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=activity-feed", "implementations": { "react": "components/activity-feed/web/ReactTailwind.tsx", "html": "components/activity-feed/web/index.html", "native": "components/activity-feed/mobile/ReactNative.tsx", "compose": "components/activity-feed/android/AndroidCompose.kt", "swiftui": "components/activity-feed/apple/SwiftUI.swift", "winui": "components/activity-feed/windows/WinUI.xaml", "flutter": "components/activity-feed/cross-platform/Flutter.dart" }, "figma": { "preview": "components/activity-feed/figma/preview.svg", "tokens": "components/activity-feed/figma/tokens.tokens.json", "spec": "components/activity-feed/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "activity-feed", "アクティビティフィード", "Activity Feed" ], "official": [], "aliases": [ "Social Feed" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "share-sheet", "ja": "共有シート", "en": "Share Sheet", "aliases": [ "Share Menu" ], "names": { "canonical": { "ja": "共有シート", "en": "Share Sheet", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Share Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "共有シート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Share Sheet", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Share Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "共有先アプリや人物候補をまとめて表示する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "画面下部", "Bottom", "component", "none", "allowed", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "共有先アプリや人物候補をまとめて表示する。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Share Sheetは「共有先アプリや人物候補をまとめて表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "message-composer", "video-call-controls", "typing-indicator", "reaction-picker" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Share Sheet" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Share Sheet" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Share Sheet" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Share Sheet" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Share Sheet" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Share Sheet" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Share Sheet" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=share-sheet", "implementations": { "react": "components/share-sheet/web/ReactTailwind.tsx", "html": "components/share-sheet/web/index.html", "native": "components/share-sheet/mobile/ReactNative.tsx", "compose": "components/share-sheet/android/AndroidCompose.kt", "swiftui": "components/share-sheet/apple/SwiftUI.swift", "winui": "components/share-sheet/windows/WinUI.xaml", "flutter": "components/share-sheet/cross-platform/Flutter.dart" }, "figma": { "preview": "components/share-sheet/figma/preview.svg", "tokens": "components/share-sheet/figma/tokens.tokens.json", "spec": "components/share-sheet/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "share-sheet", "共有シート", "Share Sheet" ], "official": [], "aliases": [ "Share Menu" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "画面下部", "Bottom", "component", "none", "allowed", "not-applicable" ] } }, { "id": "video-call-controls", "ja": "ビデオ通話操作", "en": "Video Call Controls", "aliases": [ "Call Toolbar" ], "names": { "canonical": { "ja": "ビデオ通話操作", "en": "Video Call Controls", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Call Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ビデオ通話操作", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Video Call Controls", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Call Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "マイク・カメラ・退出などの通話操作群。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "マイク・カメラ・退出などの通話操作群。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Video Call Controlsは「マイク・カメラ・退出などの通話操作群。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "message-composer", "share-sheet", "chat-thread", "presence-indicator" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Video Call Controls" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Video Call Controls" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Video Call Controls" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Video Call Controls" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Video Call Controls" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Video Call Controls" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Video Call Controls" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=video-call-controls", "implementations": { "react": "components/video-call-controls/web/ReactTailwind.tsx", "html": "components/video-call-controls/web/index.html", "native": "components/video-call-controls/mobile/ReactNative.tsx", "compose": "components/video-call-controls/android/AndroidCompose.kt", "swiftui": "components/video-call-controls/apple/SwiftUI.swift", "winui": "components/video-call-controls/windows/WinUI.xaml", "flutter": "components/video-call-controls/cross-platform/Flutter.dart" }, "figma": { "preview": "components/video-call-controls/figma/preview.svg", "tokens": "components/video-call-controls/figma/tokens.tokens.json", "spec": "components/video-call-controls/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "video-call-controls", "ビデオ通話操作", "Video Call Controls" ], "official": [], "aliases": [ "Call Toolbar" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "voice-message", "ja": "音声メッセージ", "en": "Voice Message", "aliases": [ "Audio Message" ], "names": { "canonical": { "ja": "音声メッセージ", "en": "Voice Message", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Audio Message", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "音声メッセージ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Voice Message", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Audio Message", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "録音音声の再生位置・長さ・速度を示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "録音音声の再生位置・長さ・速度を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Voice Messageは「録音音声の再生位置・長さ・速度を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "chat-thread", "comment", "mention-input", "user-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Voice Message" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Voice Message" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Voice Message" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Voice Message" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Voice Message" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Voice Message" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Voice Message" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=voice-message", "implementations": { "react": "components/voice-message/web/ReactTailwind.tsx", "html": "components/voice-message/web/index.html", "native": "components/voice-message/mobile/ReactNative.tsx", "compose": "components/voice-message/android/AndroidCompose.kt", "swiftui": "components/voice-message/apple/SwiftUI.swift", "winui": "components/voice-message/windows/WinUI.xaml", "flutter": "components/voice-message/cross-platform/Flutter.dart" }, "figma": { "preview": "components/voice-message/figma/preview.svg", "tokens": "components/voice-message/figma/tokens.tokens.json", "spec": "components/voice-message/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "voice-message", "音声メッセージ", "Voice Message" ], "official": [], "aliases": [ "Audio Message" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "read-receipt", "ja": "既読表示", "en": "Read Receipt", "aliases": [ "Seen Indicator" ], "names": { "canonical": { "ja": "既読表示", "en": "Read Receipt", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Seen Indicator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "既読表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Read Receipt", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Seen Indicator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "メッセージが届いた・読まれた状態を示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "メッセージが届いた・読まれた状態を示す。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Read Receiptは「メッセージが届いた・読まれた状態を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "presence-indicator", "typing-indicator", "chat-thread", "message-composer" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Read Receipt" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Read Receipt" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Read Receipt" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Read Receipt" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Read Receipt" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Read Receipt" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Read Receipt" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=read-receipt", "implementations": { "react": "components/read-receipt/web/ReactTailwind.tsx", "html": "components/read-receipt/web/index.html", "native": "components/read-receipt/mobile/ReactNative.tsx", "compose": "components/read-receipt/android/AndroidCompose.kt", "swiftui": "components/read-receipt/apple/SwiftUI.swift", "winui": "components/read-receipt/windows/WinUI.xaml", "flutter": "components/read-receipt/cross-platform/Flutter.dart" }, "figma": { "preview": "components/read-receipt/figma/preview.svg", "tokens": "components/read-receipt/figma/tokens.tokens.json", "spec": "components/read-receipt/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "read-receipt", "既読表示", "Read Receipt" ], "official": [], "aliases": [ "Seen Indicator" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "user-card", "ja": "人物ホバーカード", "en": "User Card", "aliases": [ "Contact Card" ], "names": { "canonical": { "ja": "人物ホバーカード", "en": "User Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Contact Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "人物ホバーカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "User Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Contact Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "人物の概要と主要操作を小型カードで示す。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "人物の概要と主要操作を小型カードで示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "User Cardは「人物の概要と主要操作を小型カードで示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "chat-thread", "comment", "mention-input", "voice-message" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "User Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "User Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "User Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "User Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "User Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "User Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "User Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=user-card", "implementations": { "react": "components/user-card/web/ReactTailwind.tsx", "html": "components/user-card/web/index.html", "native": "components/user-card/mobile/ReactNative.tsx", "compose": "components/user-card/android/AndroidCompose.kt", "swiftui": "components/user-card/apple/SwiftUI.swift", "winui": "components/user-card/windows/WinUI.xaml", "flutter": "components/user-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/user-card/figma/preview.svg", "tokens": "components/user-card/figma/tokens.tokens.json", "spec": "components/user-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "user-card", "人物ホバーカード", "User Card" ], "official": [], "aliases": [ "Contact Card" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "poll", "ja": "投票", "en": "Poll", "aliases": [ "Survey Vote" ], "names": { "canonical": { "ja": "投票", "en": "Poll", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Survey Vote", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "投票", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Poll", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Survey Vote", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "選択肢への投票と結果割合を表示する。", "category": "communication", "categoryLabel": { "ja": "会話・ソーシャル", "en": "Communication" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "選択肢への投票と結果割合を表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Pollは「選択肢への投票と結果割合を表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "comment-thread", "contact-list", "activity-feed", "chat-bubble" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Poll" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Poll" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Poll" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Poll" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Poll" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Poll" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Poll" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=poll", "implementations": { "react": "components/poll/web/ReactTailwind.tsx", "html": "components/poll/web/index.html", "native": "components/poll/mobile/ReactNative.tsx", "compose": "components/poll/android/AndroidCompose.kt", "swiftui": "components/poll/apple/SwiftUI.swift", "winui": "components/poll/windows/WinUI.xaml", "flutter": "components/poll/cross-platform/Flutter.dart" }, "figma": { "preview": "components/poll/figma/preview.svg", "tokens": "components/poll/figma/tokens.tokens.json", "spec": "components/poll/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "poll", "投票", "Poll" ], "official": [], "aliases": [ "Survey Vote" ], "relatedNames": [], "facets": [ "会話・共同作業", "会話・ソーシャル", "Communication", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "kanban-board", "ja": "カンバンボード", "en": "Kanban Board", "aliases": [ "Board View" ], "names": { "canonical": { "ja": "カンバンボード", "en": "Kanban Board", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Board View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カンバンボード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Kanban Board", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Board View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "作業項目を状態別の列に分けて管理する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "作業項目を状態別の列に分けて管理する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Kanban Boardは「作業項目を状態別の列に分けて管理する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "schedule-grid", "file-explorer", "search-results", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Kanban Board" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Kanban Board" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Kanban Board" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Kanban Board" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Kanban Board" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Kanban Board" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Kanban Board" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=kanban-board", "implementations": { "react": "components/kanban-board/web/ReactTailwind.tsx", "html": "components/kanban-board/web/index.html", "native": "components/kanban-board/mobile/ReactNative.tsx", "compose": "components/kanban-board/android/AndroidCompose.kt", "swiftui": "components/kanban-board/apple/SwiftUI.swift", "winui": "components/kanban-board/windows/WinUI.xaml", "flutter": "components/kanban-board/cross-platform/Flutter.dart" }, "figma": { "preview": "components/kanban-board/figma/preview.svg", "tokens": "components/kanban-board/figma/tokens.tokens.json", "spec": "components/kanban-board/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "kanban-board", "カンバンボード", "Kanban Board" ], "official": [], "aliases": [ "Board View" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "kanban-card", "ja": "カンバンカード", "en": "Kanban Card", "aliases": [ "Task Card" ], "names": { "canonical": { "ja": "カンバンカード", "en": "Kanban Card", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Task Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "カンバンカード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Kanban Card", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Task Card", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "1件の作業・担当・期限をカードで示す。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "1件の作業・担当・期限をカードで示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Kanban Cardは「1件の作業・担当・期限をカードで示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "todo-item", "calendar-event", "recent-items", "version-history" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Kanban Card" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Kanban Card" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Kanban Card" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Kanban Card" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Kanban Card" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Kanban Card" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Kanban Card" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=kanban-card", "implementations": { "react": "components/kanban-card/web/ReactTailwind.tsx", "html": "components/kanban-card/web/index.html", "native": "components/kanban-card/mobile/ReactNative.tsx", "compose": "components/kanban-card/android/AndroidCompose.kt", "swiftui": "components/kanban-card/apple/SwiftUI.swift", "winui": "components/kanban-card/windows/WinUI.xaml", "flutter": "components/kanban-card/cross-platform/Flutter.dart" }, "figma": { "preview": "components/kanban-card/figma/preview.svg", "tokens": "components/kanban-card/figma/tokens.tokens.json", "spec": "components/kanban-card/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "kanban-card", "カンバンカード", "Kanban Card" ], "official": [], "aliases": [ "Task Card" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "task-list", "ja": "タスクリスト", "en": "Task List", "aliases": [ "Todo List" ], "names": { "canonical": { "ja": "タスクリスト", "en": "Task List", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Todo List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "タスクリスト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Task List", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Todo List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "完了状態を持つ作業項目を一覧表示する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "完了状態を持つ作業項目を一覧表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Task Listは「完了状態を持つ作業項目を一覧表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "upload-queue", "saved-view", "filter-builder", "kanban-board" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Task List" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Task List" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Task List" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Task List" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Task List" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Task List" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Task List" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=task-list", "implementations": { "react": "components/task-list/web/ReactTailwind.tsx", "html": "components/task-list/web/index.html", "native": "components/task-list/mobile/ReactNative.tsx", "compose": "components/task-list/android/AndroidCompose.kt", "swiftui": "components/task-list/apple/SwiftUI.swift", "winui": "components/task-list/windows/WinUI.xaml", "flutter": "components/task-list/cross-platform/Flutter.dart" }, "figma": { "preview": "components/task-list/figma/preview.svg", "tokens": "components/task-list/figma/tokens.tokens.json", "spec": "components/task-list/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "task-list", "タスクリスト", "Task List" ], "official": [], "aliases": [ "Todo List" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "todo-item", "ja": "ToDo項目", "en": "Todo Item", "aliases": [ "Task Row" ], "names": { "canonical": { "ja": "ToDo項目", "en": "Todo Item", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Task Row", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ToDo項目", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Todo Item", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Task Row", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "1件の作業と完了・期限・担当を示す。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "1件の作業と完了・期限・担当を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Todo Itemは「1件の作業と完了・期限・担当を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-card", "calendar-event", "recent-items", "version-history" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Todo Item" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Todo Item" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Todo Item" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Todo Item" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Todo Item" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Todo Item" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Todo Item" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=todo-item", "implementations": { "react": "components/todo-item/web/ReactTailwind.tsx", "html": "components/todo-item/web/index.html", "native": "components/todo-item/mobile/ReactNative.tsx", "compose": "components/todo-item/android/AndroidCompose.kt", "swiftui": "components/todo-item/apple/SwiftUI.swift", "winui": "components/todo-item/windows/WinUI.xaml", "flutter": "components/todo-item/cross-platform/Flutter.dart" }, "figma": { "preview": "components/todo-item/figma/preview.svg", "tokens": "components/todo-item/figma/tokens.tokens.json", "spec": "components/todo-item/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "todo-item", "ToDo項目", "Todo Item" ], "official": [], "aliases": [ "Task Row" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "calendar-event", "ja": "予定カード", "en": "Calendar Event", "aliases": [ "Event Block" ], "names": { "canonical": { "ja": "予定カード", "en": "Calendar Event", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Event Block", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "予定カード", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Calendar Event", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Event Block", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "カレンダー上の開始時刻・名称・色を示す。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "カレンダー上の開始時刻・名称・色を示す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Calendar Eventは「カレンダー上の開始時刻・名称・色を示す。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-card", "todo-item", "recent-items", "version-history" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Calendar Event" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Calendar Event" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Calendar Event" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Calendar Event" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Calendar Event" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Calendar Event" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Calendar Event" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=calendar-event", "implementations": { "react": "components/calendar-event/web/ReactTailwind.tsx", "html": "components/calendar-event/web/index.html", "native": "components/calendar-event/mobile/ReactNative.tsx", "compose": "components/calendar-event/android/AndroidCompose.kt", "swiftui": "components/calendar-event/apple/SwiftUI.swift", "winui": "components/calendar-event/windows/WinUI.xaml", "flutter": "components/calendar-event/cross-platform/Flutter.dart" }, "figma": { "preview": "components/calendar-event/figma/preview.svg", "tokens": "components/calendar-event/figma/tokens.tokens.json", "spec": "components/calendar-event/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "calendar-event", "予定カード", "Calendar Event" ], "official": [], "aliases": [ "Event Block" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "schedule-grid", "ja": "スケジュールグリッド", "en": "Schedule Grid", "aliases": [ "Week View" ], "names": { "canonical": { "ja": "スケジュールグリッド", "en": "Schedule Grid", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Week View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スケジュールグリッド", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Schedule Grid", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Week View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "時間軸と日付軸で予定を配置する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "時間軸と日付軸で予定を配置する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Schedule Gridは「時間軸と日付軸で予定を配置する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-board", "file-explorer", "search-results", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Schedule Grid" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Schedule Grid" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Schedule Grid" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Schedule Grid" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Schedule Grid" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Schedule Grid" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Schedule Grid" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=schedule-grid", "implementations": { "react": "components/schedule-grid/web/ReactTailwind.tsx", "html": "components/schedule-grid/web/index.html", "native": "components/schedule-grid/mobile/ReactNative.tsx", "compose": "components/schedule-grid/android/AndroidCompose.kt", "swiftui": "components/schedule-grid/apple/SwiftUI.swift", "winui": "components/schedule-grid/windows/WinUI.xaml", "flutter": "components/schedule-grid/cross-platform/Flutter.dart" }, "figma": { "preview": "components/schedule-grid/figma/preview.svg", "tokens": "components/schedule-grid/figma/tokens.tokens.json", "spec": "components/schedule-grid/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "schedule-grid", "スケジュールグリッド", "Schedule Grid" ], "official": [], "aliases": [ "Week View" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "file-explorer", "ja": "ファイルエクスプローラー", "en": "File Explorer", "aliases": [ "File Browser" ], "names": { "canonical": { "ja": "ファイルエクスプローラー", "en": "File Explorer", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "File Browser", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ファイルエクスプローラー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "File Explorer", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "File Browser", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "フォルダー階層とファイル一覧を操作する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "フォルダー階層とファイル一覧を操作する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "File Explorerは「フォルダー階層とファイル一覧を操作する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-board", "schedule-grid", "search-results", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "File Explorer" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "File Explorer" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "File Explorer" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "File Explorer" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "File Explorer" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "File Explorer" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "File Explorer" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=file-explorer", "implementations": { "react": "components/file-explorer/web/ReactTailwind.tsx", "html": "components/file-explorer/web/index.html", "native": "components/file-explorer/mobile/ReactNative.tsx", "compose": "components/file-explorer/android/AndroidCompose.kt", "swiftui": "components/file-explorer/apple/SwiftUI.swift", "winui": "components/file-explorer/windows/WinUI.xaml", "flutter": "components/file-explorer/cross-platform/Flutter.dart" }, "figma": { "preview": "components/file-explorer/figma/preview.svg", "tokens": "components/file-explorer/figma/tokens.tokens.json", "spec": "components/file-explorer/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "file-explorer", "ファイルエクスプローラー", "File Explorer" ], "official": [], "aliases": [ "File Browser" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "upload-queue", "ja": "アップロードキュー", "en": "Upload Queue", "aliases": [ "Upload List" ], "names": { "canonical": { "ja": "アップロードキュー", "en": "Upload Queue", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Upload List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アップロードキュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Upload Queue", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Upload List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数ファイルの進捗・成功・失敗を並べる。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数ファイルの進捗・成功・失敗を並べる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Upload Queueは「複数ファイルの進捗・成功・失敗を並べる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "task-list", "saved-view", "filter-builder", "kanban-board" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Upload Queue" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Upload Queue" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Upload Queue" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Upload Queue" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Upload Queue" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Upload Queue" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Upload Queue" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=upload-queue", "implementations": { "react": "components/upload-queue/web/ReactTailwind.tsx", "html": "components/upload-queue/web/index.html", "native": "components/upload-queue/mobile/ReactNative.tsx", "compose": "components/upload-queue/android/AndroidCompose.kt", "swiftui": "components/upload-queue/apple/SwiftUI.swift", "winui": "components/upload-queue/windows/WinUI.xaml", "flutter": "components/upload-queue/cross-platform/Flutter.dart" }, "figma": { "preview": "components/upload-queue/figma/preview.svg", "tokens": "components/upload-queue/figma/tokens.tokens.json", "spec": "components/upload-queue/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "upload-queue", "アップロードキュー", "Upload Queue" ], "official": [], "aliases": [ "Upload List" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "filter-bar", "ja": "フィルターバー", "en": "Filter Bar", "aliases": [ "Faceted Filters" ], "names": { "canonical": { "ja": "フィルターバー", "en": "Filter Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Faceted Filters", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フィルターバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Filter Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Faceted Filters", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "検索結果や一覧の条件を横並びで指定する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "検索結果や一覧の条件を横並びで指定する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Filter Barは「検索結果や一覧の条件を横並びで指定する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "toolbar", "command-bar", "ribbon", "formatting-toolbar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Filter Bar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Filter Bar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Filter Bar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Filter Bar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Filter Bar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Filter Bar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Filter Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=filter-bar", "implementations": { "react": "components/filter-bar/web/ReactTailwind.tsx", "html": "components/filter-bar/web/index.html", "native": "components/filter-bar/mobile/ReactNative.tsx", "compose": "components/filter-bar/android/AndroidCompose.kt", "swiftui": "components/filter-bar/apple/SwiftUI.swift", "winui": "components/filter-bar/windows/WinUI.xaml", "flutter": "components/filter-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/filter-bar/figma/preview.svg", "tokens": "components/filter-bar/figma/tokens.tokens.json", "spec": "components/filter-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "filter-bar", "フィルターバー", "Filter Bar" ], "official": [], "aliases": [ "Faceted Filters" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "sort-menu", "ja": "並び替えメニュー", "en": "Sort Menu", "aliases": [ "Order By" ], "names": { "canonical": { "ja": "並び替えメニュー", "en": "Sort Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Order By", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "並び替えメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Sort Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Order By", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一覧の順序条件を選ぶメニュー。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "一覧の順序条件を選ぶメニュー。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Sort Menuは「一覧の順序条件を選ぶメニュー。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "drag-handle", "column-picker", "inline-edit", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Sort Menu" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Sort Menu" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Sort Menu" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Sort Menu" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Sort Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Sort Menu" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Sort Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=sort-menu", "implementations": { "react": "components/sort-menu/web/ReactTailwind.tsx", "html": "components/sort-menu/web/index.html", "native": "components/sort-menu/mobile/ReactNative.tsx", "compose": "components/sort-menu/android/AndroidCompose.kt", "swiftui": "components/sort-menu/apple/SwiftUI.swift", "winui": "components/sort-menu/windows/WinUI.xaml", "flutter": "components/sort-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/sort-menu/figma/preview.svg", "tokens": "components/sort-menu/figma/tokens.tokens.json", "spec": "components/sort-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "sort-menu", "並び替えメニュー", "Sort Menu" ], "official": [], "aliases": [ "Order By" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "saved-view", "ja": "保存済みビュー", "en": "Saved View", "aliases": [ "Preset View" ], "names": { "canonical": { "ja": "保存済みビュー", "en": "Saved View", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Preset View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "保存済みビュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Saved View", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Preset View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "フィルター・列・並び順の組み合わせを保存する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "フィルター・列・並び順の組み合わせを保存する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Saved Viewは「フィルター・列・並び順の組み合わせを保存する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "task-list", "upload-queue", "filter-builder", "kanban-board" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Saved View" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Saved View" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Saved View" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Saved View" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Saved View" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Saved View" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Saved View" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=saved-view", "implementations": { "react": "components/saved-view/web/ReactTailwind.tsx", "html": "components/saved-view/web/index.html", "native": "components/saved-view/mobile/ReactNative.tsx", "compose": "components/saved-view/android/AndroidCompose.kt", "swiftui": "components/saved-view/apple/SwiftUI.swift", "winui": "components/saved-view/windows/WinUI.xaml", "flutter": "components/saved-view/cross-platform/Flutter.dart" }, "figma": { "preview": "components/saved-view/figma/preview.svg", "tokens": "components/saved-view/figma/tokens.tokens.json", "spec": "components/saved-view/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "saved-view", "保存済みビュー", "Saved View" ], "official": [], "aliases": [ "Preset View" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "toolbar", "ja": "ツールバー", "en": "Toolbar", "aliases": [ "Action Bar" ], "names": { "canonical": { "ja": "ツールバー", "en": "Toolbar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Action Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ツールバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Toolbar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Action Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "現在の内容に対する操作を横一列にまとめる。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": "toolbar", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"toolbar\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "現在の内容に対する操作を横一列にまとめる。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Toolbarは「現在の内容に対する操作を横一列にまとめる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "filter-bar", "command-bar", "ribbon", "formatting-toolbar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Toolbar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Toolbar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Toolbar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Toolbar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Toolbar" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Toolbar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Toolbar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=toolbar", "implementations": { "react": "components/toolbar/web/ReactTailwind.tsx", "html": "components/toolbar/web/index.html", "native": "components/toolbar/mobile/ReactNative.tsx", "compose": "components/toolbar/android/AndroidCompose.kt", "swiftui": "components/toolbar/apple/SwiftUI.swift", "winui": "components/toolbar/windows/WinUI.xaml", "flutter": "components/toolbar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/toolbar/figma/preview.svg", "tokens": "components/toolbar/figma/tokens.tokens.json", "spec": "components/toolbar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "toolbar", "ツールバー", "Toolbar" ], "official": [], "aliases": [ "Action Bar" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "command-bar", "ja": "コマンドバー", "en": "Command Bar", "aliases": [ "Command Toolbar", "App Command Bar" ], "names": { "canonical": { "ja": "コマンドバー", "en": "Command Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Command Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "App Command Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "コマンドバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Command Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Command Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "App Command Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "重要操作と追加メニューを横一列に整理する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": "toolbar", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"toolbar\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "重要操作と追加メニューを横一列に整理する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Command Barは「重要操作と追加メニューを横一列に整理する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "filter-bar", "toolbar", "ribbon", "formatting-toolbar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Command Bar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Command Bar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Command Bar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Command Bar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Command Bar" }, "winui": { "status": "native", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Command Bar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Command Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=command-bar", "implementations": { "react": "components/command-bar/web/ReactTailwind.tsx", "html": "components/command-bar/web/index.html", "native": "components/command-bar/mobile/ReactNative.tsx", "compose": "components/command-bar/android/AndroidCompose.kt", "swiftui": "components/command-bar/apple/SwiftUI.swift", "winui": "components/command-bar/windows/WinUI.xaml", "flutter": "components/command-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/command-bar/figma/preview.svg", "tokens": "components/command-bar/figma/tokens.tokens.json", "spec": "components/command-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "command-bar", "コマンドバー", "Command Bar" ], "official": [], "aliases": [ "Command Toolbar", "App Command Bar" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "ribbon", "ja": "リボン", "en": "Ribbon", "aliases": [ "Ribbon Toolbar" ], "names": { "canonical": { "ja": "リボン", "en": "Ribbon", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Ribbon Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "リボン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Ribbon", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Ribbon Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "多数のコマンドをタブとグループで整理するツールバー。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "多数のコマンドをタブとグループで整理するツールバー。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Ribbonは「多数のコマンドをタブとグループで整理するツールバー。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "filter-bar", "toolbar", "command-bar", "formatting-toolbar" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Ribbon" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Ribbon" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Ribbon" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Ribbon" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Ribbon" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Ribbon" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Ribbon" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=ribbon", "implementations": { "react": "components/ribbon/web/ReactTailwind.tsx", "html": "components/ribbon/web/index.html", "native": "components/ribbon/mobile/ReactNative.tsx", "compose": "components/ribbon/android/AndroidCompose.kt", "swiftui": "components/ribbon/apple/SwiftUI.swift", "winui": "components/ribbon/windows/WinUI.xaml", "flutter": "components/ribbon/cross-platform/Flutter.dart" }, "figma": { "preview": "components/ribbon/figma/preview.svg", "tokens": "components/ribbon/figma/tokens.tokens.json", "spec": "components/ribbon/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "ribbon", "リボン", "Ribbon" ], "official": [], "aliases": [ "Ribbon Toolbar" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "desktop-status-bar", "ja": "ステータスバー（デスクトップ）", "en": "Application Status Bar", "aliases": [ "Desktop Status Bar" ], "names": { "canonical": { "ja": "ステータスバー（デスクトップ）", "en": "Application Status Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Desktop Status Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ステータスバー（デスクトップ）", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Application Status Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Desktop Status Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "文書やアプリの状態をウィンドウ下端へ継続表示する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "画面下部", "Bottom", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "文書やアプリの状態をウィンドウ下端へ継続表示する。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Application Status Barは「文書やアプリの状態をウィンドウ下端へ継続表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-card", "todo-item", "calendar-event", "sort-menu" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Application Status Bar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Application Status Bar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Application Status Bar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Application Status Bar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Application Status Bar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Application Status Bar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Application Status Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=desktop-status-bar", "implementations": { "react": "components/desktop-status-bar/web/ReactTailwind.tsx", "html": "components/desktop-status-bar/web/index.html", "native": "components/desktop-status-bar/mobile/ReactNative.tsx", "compose": "components/desktop-status-bar/android/AndroidCompose.kt", "swiftui": "components/desktop-status-bar/apple/SwiftUI.swift", "winui": "components/desktop-status-bar/windows/WinUI.xaml", "flutter": "components/desktop-status-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/desktop-status-bar/figma/preview.svg", "tokens": "components/desktop-status-bar/figma/tokens.tokens.json", "spec": "components/desktop-status-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "desktop-status-bar", "ステータスバー（デスクトップ）", "Application Status Bar" ], "official": [], "aliases": [ "Desktop Status Bar" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "画面下部", "Bottom", "component", "none", "not-applicable" ] } }, { "id": "formatting-toolbar", "ja": "書式ツールバー", "en": "Formatting Toolbar", "aliases": [ "Editor Toolbar" ], "names": { "canonical": { "ja": "書式ツールバー", "en": "Formatting Toolbar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Editor Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "書式ツールバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Formatting Toolbar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Editor Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "太字・見出し・整列など編集操作をまとめる。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": "toolbar", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"toolbar\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "太字・見出し・整列など編集操作をまとめる。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Formatting Toolbarは「太字・見出し・整列など編集操作をまとめる。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "filter-bar", "toolbar", "command-bar", "ribbon" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Formatting Toolbar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Formatting Toolbar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Formatting Toolbar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Formatting Toolbar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Formatting Toolbar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Formatting Toolbar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Formatting Toolbar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=formatting-toolbar", "implementations": { "react": "components/formatting-toolbar/web/ReactTailwind.tsx", "html": "components/formatting-toolbar/web/index.html", "native": "components/formatting-toolbar/mobile/ReactNative.tsx", "compose": "components/formatting-toolbar/android/AndroidCompose.kt", "swiftui": "components/formatting-toolbar/apple/SwiftUI.swift", "winui": "components/formatting-toolbar/windows/WinUI.xaml", "flutter": "components/formatting-toolbar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/formatting-toolbar/figma/preview.svg", "tokens": "components/formatting-toolbar/figma/tokens.tokens.json", "spec": "components/formatting-toolbar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "formatting-toolbar", "書式ツールバー", "Formatting Toolbar" ], "official": [], "aliases": [ "Editor Toolbar" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "bulk-action-bar", "ja": "一括操作バー", "en": "Bulk Action Bar", "aliases": [ "Selection Toolbar" ], "names": { "canonical": { "ja": "一括操作バー", "en": "Bulk Action Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Selection Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "一括操作バー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Bulk Action Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Selection Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複数選択した項目への共通操作を表示する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": "toolbar", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"toolbar\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複数選択した項目への共通操作を表示する。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Bulk Action Barは「複数選択した項目への共通操作を表示する。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "filter-bar", "toolbar", "command-bar", "ribbon" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Bulk Action Bar" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Bulk Action Bar" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Bulk Action Bar" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Bulk Action Bar" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Bulk Action Bar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Bulk Action Bar" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Bulk Action Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=bulk-action-bar", "implementations": { "react": "components/bulk-action-bar/web/ReactTailwind.tsx", "html": "components/bulk-action-bar/web/index.html", "native": "components/bulk-action-bar/mobile/ReactNative.tsx", "compose": "components/bulk-action-bar/android/AndroidCompose.kt", "swiftui": "components/bulk-action-bar/apple/SwiftUI.swift", "winui": "components/bulk-action-bar/windows/WinUI.xaml", "flutter": "components/bulk-action-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/bulk-action-bar/figma/preview.svg", "tokens": "components/bulk-action-bar/figma/tokens.tokens.json", "spec": "components/bulk-action-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "bulk-action-bar", "一括操作バー", "Bulk Action Bar" ], "official": [], "aliases": [ "Selection Toolbar" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "composite-pattern", "none", "not-applicable" ] } }, { "id": "filter-builder", "ja": "条件ビルダー", "en": "Filter Builder", "aliases": [ "Query Builder" ], "names": { "canonical": { "ja": "条件ビルダー", "en": "Filter Builder", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Query Builder", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "条件ビルダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Filter Builder", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Query Builder", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "項目・演算子・値を組み合わせて詳細条件を作る。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "composite-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "項目・演算子・値を組み合わせて詳細条件を作る。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Filter Builderは「項目・演算子・値を組み合わせて詳細条件を作る。」ための複合パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "task-list", "upload-queue", "saved-view", "kanban-board" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Filter Builder" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Filter Builder" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Filter Builder" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Filter Builder" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Filter Builder" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Filter Builder" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Filter Builder" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=filter-builder", "implementations": { "react": "components/filter-builder/web/ReactTailwind.tsx", "html": "components/filter-builder/web/index.html", "native": "components/filter-builder/mobile/ReactNative.tsx", "compose": "components/filter-builder/android/AndroidCompose.kt", "swiftui": "components/filter-builder/apple/SwiftUI.swift", "winui": "components/filter-builder/windows/WinUI.xaml", "flutter": "components/filter-builder/cross-platform/Flutter.dart" }, "figma": { "preview": "components/filter-builder/figma/preview.svg", "tokens": "components/filter-builder/figma/tokens.tokens.json", "spec": "components/filter-builder/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "filter-builder", "条件ビルダー", "Filter Builder" ], "official": [], "aliases": [ "Query Builder" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "composite-pattern", "none", "not-applicable" ] } }, { "id": "search-results", "ja": "検索結果一覧", "en": "Search Results", "aliases": [ "Results List" ], "names": { "canonical": { "ja": "検索結果一覧", "en": "Search Results", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Results List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "検索結果一覧", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Search Results", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Results List", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "検索語・件数・一致項目・絞り込みを表示する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "screen-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "検索語・件数・一致項目・絞り込みを表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Search Resultsは「検索語・件数・一致項目・絞り込みを表示する。」ための画面パターンです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-board", "schedule-grid", "file-explorer", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Search Results" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Search Results" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Search Results" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Search Results" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Search Results" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Search Results" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Search Results" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=search-results", "implementations": { "react": "components/search-results/web/ReactTailwind.tsx", "html": "components/search-results/web/index.html", "native": "components/search-results/mobile/ReactNative.tsx", "compose": "components/search-results/android/AndroidCompose.kt", "swiftui": "components/search-results/apple/SwiftUI.swift", "winui": "components/search-results/windows/WinUI.xaml", "flutter": "components/search-results/cross-platform/Flutter.dart" }, "figma": { "preview": "components/search-results/figma/preview.svg", "tokens": "components/search-results/figma/tokens.tokens.json", "spec": "components/search-results/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "search-results", "検索結果一覧", "Search Results" ], "official": [], "aliases": [ "Results List" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "screen-pattern", "none", "not-applicable" ] } }, { "id": "recent-items", "ja": "最近使った項目", "en": "Recent Items", "aliases": [ "Recents" ], "names": { "canonical": { "ja": "最近使った項目", "en": "Recent Items", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Recents", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "最近使った項目", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Recent Items", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Recents", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "最近閲覧・編集した対象を時系列で並べる。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "最近閲覧・編集した対象を時系列で並べる。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Recent Itemsは「最近閲覧・編集した対象を時系列で並べる。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-card", "todo-item", "calendar-event", "version-history" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Recent Items" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Recent Items" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Recent Items" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Recent Items" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Recent Items" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Recent Items" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Recent Items" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=recent-items", "implementations": { "react": "components/recent-items/web/ReactTailwind.tsx", "html": "components/recent-items/web/index.html", "native": "components/recent-items/mobile/ReactNative.tsx", "compose": "components/recent-items/android/AndroidCompose.kt", "swiftui": "components/recent-items/apple/SwiftUI.swift", "winui": "components/recent-items/windows/WinUI.xaml", "flutter": "components/recent-items/cross-platform/Flutter.dart" }, "figma": { "preview": "components/recent-items/figma/preview.svg", "tokens": "components/recent-items/figma/tokens.tokens.json", "spec": "components/recent-items/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "recent-items", "最近使った項目", "Recent Items" ], "official": [], "aliases": [ "Recents" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "drag-handle", "ja": "ドラッグハンドル", "en": "Drag Handle", "aliases": [ "Reorder Handle" ], "names": { "canonical": { "ja": "ドラッグハンドル", "en": "Drag Handle", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Reorder Handle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ドラッグハンドル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Drag Handle", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Reorder Handle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "移動や並び替えが可能な場所を示すつまみ。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "button", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "ラベルまたはアイコン", "操作領域", "focus-visible表示" ], "states": [ "default", "hover", "focus-visible", "disabled" ], "keyboard": [ "Enter / Space: 操作を実行" ], "accessibility": [ "ネイティブbuttonを使い、アイコンのみの場合はアクセシブル名を付ける。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "移動や並び替えが可能な場所を示すつまみ。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Drag Handleは「移動や並び替えが可能な場所を示すつまみ。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sort-menu", "column-picker", "inline-edit", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Drag Handle" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Drag Handle" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Drag Handle" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Drag Handle" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Drag Handle" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Drag Handle" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Drag Handle" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=drag-handle", "implementations": { "react": "components/drag-handle/web/ReactTailwind.tsx", "html": "components/drag-handle/web/index.html", "native": "components/drag-handle/mobile/ReactNative.tsx", "compose": "components/drag-handle/android/AndroidCompose.kt", "swiftui": "components/drag-handle/apple/SwiftUI.swift", "winui": "components/drag-handle/windows/WinUI.xaml", "flutter": "components/drag-handle/cross-platform/Flutter.dart" }, "figma": { "preview": "components/drag-handle/figma/preview.svg", "tokens": "components/drag-handle/figma/tokens.tokens.json", "spec": "components/drag-handle/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "drag-handle", "ドラッグハンドル", "Drag Handle" ], "official": [], "aliases": [ "Reorder Handle" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "column-picker", "ja": "列選択", "en": "Column Picker", "aliases": [ "Column Chooser" ], "names": { "canonical": { "ja": "列選択", "en": "Column Picker", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Column Chooser", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "列選択", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Column Picker", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Column Chooser", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "表に表示する列を選択・並べ替える。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "multiple", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "表に表示する列を選択・並べ替える。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Column Pickerは「表に表示する列を選択・並べ替える。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sort-menu", "drag-handle", "inline-edit", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Column Picker" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Column Picker" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Column Picker" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Column Picker" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Column Picker" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Column Picker" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Column Picker" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=column-picker", "implementations": { "react": "components/column-picker/web/ReactTailwind.tsx", "html": "components/column-picker/web/index.html", "native": "components/column-picker/mobile/ReactNative.tsx", "compose": "components/column-picker/android/AndroidCompose.kt", "swiftui": "components/column-picker/apple/SwiftUI.swift", "winui": "components/column-picker/windows/WinUI.xaml", "flutter": "components/column-picker/cross-platform/Flutter.dart" }, "figma": { "preview": "components/column-picker/figma/preview.svg", "tokens": "components/column-picker/figma/tokens.tokens.json", "spec": "components/column-picker/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "column-picker", "列選択", "Column Picker" ], "official": [], "aliases": [ "Column Chooser" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "multiple", "not-applicable" ] } }, { "id": "inline-edit", "ja": "インライン編集", "en": "Inline Edit", "aliases": [ "Editable Text" ], "names": { "canonical": { "ja": "インライン編集", "en": "Inline Edit", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Editable Text", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "インライン編集", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Inline Edit", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Editable Text", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "表示中の文字や値をその場で編集状態へ切り替える。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "inline", "placementLabel": { "ja": "要素の近く", "en": "Anchored / inline", "detailJa": "関連する操作・入力・コンテンツのすぐ近くで使われます。", "detailEn": "Typically anchored to, or placed inline with, the related control or content." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "表示中の文字や値をその場で編集状態へ切り替える。", "要素の近くでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Inline Editは「表示中の文字や値をその場で編集状態へ切り替える。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "sort-menu", "drag-handle", "column-picker", "kanban-card" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Inline Edit" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Inline Edit" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Inline Edit" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Inline Edit" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Inline Edit" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Inline Edit" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Inline Edit" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=inline-edit", "implementations": { "react": "components/inline-edit/web/ReactTailwind.tsx", "html": "components/inline-edit/web/index.html", "native": "components/inline-edit/mobile/ReactNative.tsx", "compose": "components/inline-edit/android/AndroidCompose.kt", "swiftui": "components/inline-edit/apple/SwiftUI.swift", "winui": "components/inline-edit/windows/WinUI.xaml", "flutter": "components/inline-edit/cross-platform/Flutter.dart" }, "figma": { "preview": "components/inline-edit/figma/preview.svg", "tokens": "components/inline-edit/figma/tokens.tokens.json", "spec": "components/inline-edit/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "inline-edit", "インライン編集", "Inline Edit" ], "official": [], "aliases": [ "Editable Text" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "要素の近く", "Anchored / inline", "component", "none", "not-applicable" ] } }, { "id": "version-history", "ja": "変更履歴", "en": "Version History", "aliases": [ "Revision History" ], "names": { "canonical": { "ja": "変更履歴", "en": "Version History", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Revision History", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "変更履歴", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Version History", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Revision History", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "過去の更新時刻・作成者・差分を一覧表示する。", "category": "productivity", "categoryLabel": { "ja": "業務・データ操作", "en": "Productivity" }, "kind": "component", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "過去の更新時刻・作成者・差分を一覧表示する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Version Historyは「過去の更新時刻・作成者・差分を一覧表示する。」ためのコンポーネントです。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "kanban-card", "todo-item", "calendar-event", "recent-items" ], "platformSupport": { "react": { "status": "native", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Version History" }, "html": { "status": "native", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Version History" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Version History" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Version History" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Version History" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Version History" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Version History" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=version-history", "implementations": { "react": "components/version-history/web/ReactTailwind.tsx", "html": "components/version-history/web/index.html", "native": "components/version-history/mobile/ReactNative.tsx", "compose": "components/version-history/android/AndroidCompose.kt", "swiftui": "components/version-history/apple/SwiftUI.swift", "winui": "components/version-history/windows/WinUI.xaml", "flutter": "components/version-history/cross-platform/Flutter.dart" }, "figma": { "preview": "components/version-history/figma/preview.svg", "tokens": "components/version-history/figma/tokens.tokens.json", "spec": "components/version-history/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "version-history", "変更履歴", "Version History" ], "official": [], "aliases": [ "Revision History" ], "relatedNames": [], "facets": [ "業務データを操作", "業務・データ操作", "Productivity", "コンテンツ領域", "In content", "component", "none", "not-applicable" ] } }, { "id": "mobile-status-bar", "ja": "ステータスバー（モバイル）", "en": "System Status Bar", "aliases": [ "Mobile Status Bar" ], "names": { "canonical": { "ja": "ステータスバー（モバイル）", "en": "System Status Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Mobile Status Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ステータスバー（モバイル）", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "System Status Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Mobile Status Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "端末の時刻・通信・電池状態を表示する上部領域。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面上部", "Top", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "端末の時刻・通信・電池状態を表示する上部領域。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "System Status Barは「端末の時刻・通信・電池状態を表示する上部領域。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "collapsing-header", "bottom-app-bar", "pull-to-refresh", "swipe-action-row" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "System Status Bar" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "System Status Bar" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "System Status Bar" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "System Status Bar" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "System Status Bar" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "System Status Bar" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "System Status Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=mobile-status-bar", "implementations": { "react": "components/mobile-status-bar/web/ReactTailwind.tsx", "html": "components/mobile-status-bar/web/index.html", "native": "components/mobile-status-bar/mobile/ReactNative.tsx", "compose": "components/mobile-status-bar/android/AndroidCompose.kt", "swiftui": "components/mobile-status-bar/apple/SwiftUI.swift", "winui": "components/mobile-status-bar/windows/WinUI.xaml", "flutter": "components/mobile-status-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/mobile-status-bar/figma/preview.svg", "tokens": "components/mobile-status-bar/figma/tokens.tokens.json", "spec": "components/mobile-status-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "mobile-status-bar", "ステータスバー（モバイル）", "System Status Bar" ], "official": [], "aliases": [ "Mobile Status Bar" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面上部", "Top", "platform-pattern", "none", "not-applicable" ] } }, { "id": "bottom-app-bar", "ja": "ボトムアプリバー", "en": "Bottom App Bar", "aliases": [ "Bottom Toolbar" ], "names": { "canonical": { "ja": "ボトムアプリバー", "en": "Bottom App Bar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Bottom Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ボトムアプリバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Bottom App Bar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Bottom Toolbar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "モバイル画面下部に主要操作を置くバー。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "モバイル画面下部に主要操作を置くバー。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Bottom App Barは「モバイル画面下部に主要操作を置くバー。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "page-indicator", "home-indicator", "keyboard-toolbar", "onboarding-pagination" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Bottom App Bar" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Bottom App Bar" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Bottom App Bar" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Bottom App Bar" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Bottom App Bar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Bottom App Bar" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Bottom App Bar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=bottom-app-bar", "implementations": { "react": "components/bottom-app-bar/web/ReactTailwind.tsx", "html": "components/bottom-app-bar/web/index.html", "native": "components/bottom-app-bar/mobile/ReactNative.tsx", "compose": "components/bottom-app-bar/android/AndroidCompose.kt", "swiftui": "components/bottom-app-bar/apple/SwiftUI.swift", "winui": "components/bottom-app-bar/windows/WinUI.xaml", "flutter": "components/bottom-app-bar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/bottom-app-bar/figma/preview.svg", "tokens": "components/bottom-app-bar/figma/tokens.tokens.json", "spec": "components/bottom-app-bar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "bottom-app-bar", "ボトムアプリバー", "Bottom App Bar" ], "official": [], "aliases": [ "Bottom Toolbar" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ] } }, { "id": "pull-to-refresh", "ja": "引っ張って更新", "en": "Pull to Refresh", "aliases": [ "Swipe Refresh" ], "names": { "canonical": { "ja": "引っ張って更新", "en": "Pull to Refresh", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Swipe Refresh", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "引っ張って更新", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pull to Refresh", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Swipe Refresh", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一覧上端を下へ引いて内容を再読込する。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "コンテンツ領域", "In content", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "一覧上端を下へ引いて内容を再読込する。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Pull to Refreshは「一覧上端を下へ引いて内容を再読込する。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "swipe-action-row", "swipe-carousel", "mobile-status-bar", "bottom-app-bar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Pull to Refresh" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Pull to Refresh" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Pull to Refresh" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Pull to Refresh" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Pull to Refresh" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Pull to Refresh" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Pull to Refresh" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=pull-to-refresh", "implementations": { "react": "components/pull-to-refresh/web/ReactTailwind.tsx", "html": "components/pull-to-refresh/web/index.html", "native": "components/pull-to-refresh/mobile/ReactNative.tsx", "compose": "components/pull-to-refresh/android/AndroidCompose.kt", "swiftui": "components/pull-to-refresh/apple/SwiftUI.swift", "winui": "components/pull-to-refresh/windows/WinUI.xaml", "flutter": "components/pull-to-refresh/cross-platform/Flutter.dart" }, "figma": { "preview": "components/pull-to-refresh/figma/preview.svg", "tokens": "components/pull-to-refresh/figma/tokens.tokens.json", "spec": "components/pull-to-refresh/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "pull-to-refresh", "引っ張って更新", "Pull to Refresh" ], "official": [], "aliases": [ "Swipe Refresh" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "コンテンツ領域", "In content", "platform-pattern", "none", "not-applicable" ] } }, { "id": "swipe-action-row", "ja": "スワイプ操作行", "en": "Swipe Action Row", "aliases": [ "Swipe Actions" ], "names": { "canonical": { "ja": "スワイプ操作行", "en": "Swipe Action Row", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Swipe Actions", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スワイプ操作行", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Swipe Action Row", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Swipe Actions", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "一覧項目を横へスワイプして削除等を出す。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "コンテンツ領域", "In content", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "一覧項目を横へスワイプして削除等を出す。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Swipe Action Rowは「一覧項目を横へスワイプして削除等を出す。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "pull-to-refresh", "swipe-carousel", "mobile-status-bar", "bottom-app-bar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Swipe Action Row" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Swipe Action Row" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Swipe Action Row" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Swipe Action Row" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Swipe Action Row" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Swipe Action Row" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Swipe Action Row" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=swipe-action-row", "implementations": { "react": "components/swipe-action-row/web/ReactTailwind.tsx", "html": "components/swipe-action-row/web/index.html", "native": "components/swipe-action-row/mobile/ReactNative.tsx", "compose": "components/swipe-action-row/android/AndroidCompose.kt", "swiftui": "components/swipe-action-row/apple/SwiftUI.swift", "winui": "components/swipe-action-row/windows/WinUI.xaml", "flutter": "components/swipe-action-row/cross-platform/Flutter.dart" }, "figma": { "preview": "components/swipe-action-row/figma/preview.svg", "tokens": "components/swipe-action-row/figma/tokens.tokens.json", "spec": "components/swipe-action-row/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "swipe-action-row", "スワイプ操作行", "Swipe Action Row" ], "official": [], "aliases": [ "Swipe Actions" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "コンテンツ領域", "In content", "platform-pattern", "none", "not-applicable" ] } }, { "id": "page-indicator", "ja": "ページインジケーター", "en": "Page Indicator", "aliases": [ "Pagination Dots" ], "names": { "canonical": { "ja": "ページインジケーター", "en": "Page Indicator", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Pagination Dots", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ページインジケーター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Page Indicator", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pagination Dots", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "オンボーディング等の現在ページを点で示す。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "オンボーディング等の現在ページを点で示す。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Page Indicatorは「オンボーディング等の現在ページを点で示す。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "bottom-app-bar", "home-indicator", "keyboard-toolbar", "onboarding-pagination" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Page Indicator" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Page Indicator" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Page Indicator" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Page Indicator" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Page Indicator" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Page Indicator" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Page Indicator" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=page-indicator", "implementations": { "react": "components/page-indicator/web/ReactTailwind.tsx", "html": "components/page-indicator/web/index.html", "native": "components/page-indicator/mobile/ReactNative.tsx", "compose": "components/page-indicator/android/AndroidCompose.kt", "swiftui": "components/page-indicator/apple/SwiftUI.swift", "winui": "components/page-indicator/windows/WinUI.xaml", "flutter": "components/page-indicator/cross-platform/Flutter.dart" }, "figma": { "preview": "components/page-indicator/figma/preview.svg", "tokens": "components/page-indicator/figma/tokens.tokens.json", "spec": "components/page-indicator/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "page-indicator", "ページインジケーター", "Page Indicator" ], "official": [], "aliases": [ "Pagination Dots" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ] } }, { "id": "home-indicator", "ja": "ホームインジケーター", "en": "Home Indicator", "aliases": [ "Gesture Bar" ], "names": { "canonical": { "ja": "ホームインジケーター", "en": "Home Indicator", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Gesture Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ホームインジケーター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Home Indicator", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Gesture Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ジェスチャーナビ領域を示す端末下部のバー。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "ジェスチャーナビ領域を示す端末下部のバー。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Home Indicatorは「ジェスチャーナビ領域を示す端末下部のバー。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "bottom-app-bar", "page-indicator", "keyboard-toolbar", "onboarding-pagination" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Home Indicator" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Home Indicator" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Home Indicator" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Home Indicator" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Home Indicator" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Home Indicator" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Home Indicator" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=home-indicator", "implementations": { "react": "components/home-indicator/web/ReactTailwind.tsx", "html": "components/home-indicator/web/index.html", "native": "components/home-indicator/mobile/ReactNative.tsx", "compose": "components/home-indicator/android/AndroidCompose.kt", "swiftui": "components/home-indicator/apple/SwiftUI.swift", "winui": "components/home-indicator/windows/WinUI.xaml", "flutter": "components/home-indicator/cross-platform/Flutter.dart" }, "figma": { "preview": "components/home-indicator/figma/preview.svg", "tokens": "components/home-indicator/figma/tokens.tokens.json", "spec": "components/home-indicator/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "home-indicator", "ホームインジケーター", "Home Indicator" ], "official": [], "aliases": [ "Gesture Bar" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ] } }, { "id": "keyboard-toolbar", "ja": "キーボードツールバー", "en": "Keyboard Toolbar", "aliases": [ "Input Accessory View" ], "names": { "canonical": { "ja": "キーボードツールバー", "en": "Keyboard Toolbar", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Input Accessory View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "キーボードツールバー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Keyboard Toolbar", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Input Accessory View", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ソフトウェアキーボード上に補助操作を置く。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "ソフトウェアキーボード上に補助操作を置く。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Keyboard Toolbarは「ソフトウェアキーボード上に補助操作を置く。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "bottom-app-bar", "page-indicator", "home-indicator", "onboarding-pagination" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Keyboard Toolbar" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Keyboard Toolbar" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Keyboard Toolbar" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Keyboard Toolbar" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Keyboard Toolbar" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Keyboard Toolbar" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Keyboard Toolbar" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=keyboard-toolbar", "implementations": { "react": "components/keyboard-toolbar/web/ReactTailwind.tsx", "html": "components/keyboard-toolbar/web/index.html", "native": "components/keyboard-toolbar/mobile/ReactNative.tsx", "compose": "components/keyboard-toolbar/android/AndroidCompose.kt", "swiftui": "components/keyboard-toolbar/apple/SwiftUI.swift", "winui": "components/keyboard-toolbar/windows/WinUI.xaml", "flutter": "components/keyboard-toolbar/cross-platform/Flutter.dart" }, "figma": { "preview": "components/keyboard-toolbar/figma/preview.svg", "tokens": "components/keyboard-toolbar/figma/tokens.tokens.json", "spec": "components/keyboard-toolbar/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "keyboard-toolbar", "キーボードツールバー", "Keyboard Toolbar" ], "official": [], "aliases": [ "Input Accessory View" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ] } }, { "id": "mobile-search-sheet", "ja": "モバイル検索シート", "en": "Mobile Search Sheet", "aliases": [ "Search Overlay" ], "names": { "canonical": { "ja": "モバイル検索シート", "en": "Mobile Search Sheet", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Search Overlay", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "モバイル検索シート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Mobile Search Sheet", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Search Overlay", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "検索入力と候補を全画面・シートで表示する。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "前面レイヤー", "Overlay", "platform-pattern", "none", "allowed", "not-applicable" ], "semantics": { "element": "input", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "可視ラベル", "入力コントロール", "補足またはエラーメッセージ" ], "states": [ "default", "focus-visible", "filled", "invalid", "disabled" ], "keyboard": [ "Tab / Shift+Tab: 入力項目間を移動", "各ネイティブ入力の標準キー操作を維持" ], "accessibility": [ "可視ラベルをlabel要素で関連付け、説明・エラーはaria-describedbyで参照する。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "検索入力と候補を全画面・シートで表示する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Mobile Search Sheetは「検索入力と候補を全画面・シートで表示する。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "long-press-menu", "permission-sheet", "mobile-status-bar", "bottom-app-bar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Mobile Search Sheet" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Mobile Search Sheet" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Mobile Search Sheet" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Mobile Search Sheet" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Mobile Search Sheet" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Mobile Search Sheet" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Mobile Search Sheet" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=mobile-search-sheet", "implementations": { "react": "components/mobile-search-sheet/web/ReactTailwind.tsx", "html": "components/mobile-search-sheet/web/index.html", "native": "components/mobile-search-sheet/mobile/ReactNative.tsx", "compose": "components/mobile-search-sheet/android/AndroidCompose.kt", "swiftui": "components/mobile-search-sheet/apple/SwiftUI.swift", "winui": "components/mobile-search-sheet/windows/WinUI.xaml", "flutter": "components/mobile-search-sheet/cross-platform/Flutter.dart" }, "figma": { "preview": "components/mobile-search-sheet/figma/preview.svg", "tokens": "components/mobile-search-sheet/figma/tokens.tokens.json", "spec": "components/mobile-search-sheet/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "mobile-search-sheet", "モバイル検索シート", "Mobile Search Sheet" ], "official": [], "aliases": [ "Search Overlay" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "前面レイヤー", "Overlay", "platform-pattern", "none", "allowed", "not-applicable" ] } }, { "id": "collapsing-header", "ja": "縮小ヘッダー", "en": "Collapsing Header", "aliases": [ "Collapsible App Bar" ], "names": { "canonical": { "ja": "縮小ヘッダー", "en": "Collapsing Header", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Collapsible App Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "縮小ヘッダー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Collapsing Header", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Collapsible App Bar", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "スクロールに合わせて高さや内容が縮む上部領域。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "top", "placementLabel": { "ja": "画面上部", "en": "Top", "detailJa": "画面または親領域の上端で使われます。", "detailEn": "Typically placed at the top of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面上部", "Top", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "スクロールに合わせて高さや内容が縮む上部領域。", "画面上部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Collapsing Headerは「スクロールに合わせて高さや内容が縮む上部領域。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "mobile-status-bar", "bottom-app-bar", "pull-to-refresh", "swipe-action-row" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Collapsing Header" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Collapsing Header" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Collapsing Header" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Collapsing Header" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Collapsing Header" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Collapsing Header" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Collapsing Header" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=collapsing-header", "implementations": { "react": "components/collapsing-header/web/ReactTailwind.tsx", "html": "components/collapsing-header/web/index.html", "native": "components/collapsing-header/mobile/ReactNative.tsx", "compose": "components/collapsing-header/android/AndroidCompose.kt", "swiftui": "components/collapsing-header/apple/SwiftUI.swift", "winui": "components/collapsing-header/windows/WinUI.xaml", "flutter": "components/collapsing-header/cross-platform/Flutter.dart" }, "figma": { "preview": "components/collapsing-header/figma/preview.svg", "tokens": "components/collapsing-header/figma/tokens.tokens.json", "spec": "components/collapsing-header/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "collapsing-header", "縮小ヘッダー", "Collapsing Header" ], "official": [], "aliases": [ "Collapsible App Bar" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面上部", "Top", "platform-pattern", "none", "not-applicable" ] } }, { "id": "onboarding-pagination", "ja": "オンボーディングページ送り", "en": "Onboarding Pagination", "aliases": [ "Intro Slides" ], "names": { "canonical": { "ja": "オンボーディングページ送り", "en": "Onboarding Pagination", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Intro Slides", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "オンボーディングページ送り", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Onboarding Pagination", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Intro Slides", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "導入画面の現在位置と前後操作をまとめる。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "導入画面の現在位置と前後操作をまとめる。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Onboarding Paginationは「導入画面の現在位置と前後操作をまとめる。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "bottom-app-bar", "page-indicator", "home-indicator", "keyboard-toolbar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Onboarding Pagination" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Onboarding Pagination" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Onboarding Pagination" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Onboarding Pagination" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Onboarding Pagination" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Onboarding Pagination" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Onboarding Pagination" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=onboarding-pagination", "implementations": { "react": "components/onboarding-pagination/web/ReactTailwind.tsx", "html": "components/onboarding-pagination/web/index.html", "native": "components/onboarding-pagination/mobile/ReactNative.tsx", "compose": "components/onboarding-pagination/android/AndroidCompose.kt", "swiftui": "components/onboarding-pagination/apple/SwiftUI.swift", "winui": "components/onboarding-pagination/windows/WinUI.xaml", "flutter": "components/onboarding-pagination/cross-platform/Flutter.dart" }, "figma": { "preview": "components/onboarding-pagination/figma/preview.svg", "tokens": "components/onboarding-pagination/figma/tokens.tokens.json", "spec": "components/onboarding-pagination/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "onboarding-pagination", "オンボーディングページ送り", "Onboarding Pagination" ], "official": [], "aliases": [ "Intro Slides" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ] } }, { "id": "permission-sheet", "ja": "権限説明シート", "en": "Permission Sheet", "aliases": [ "Pre-permission Prompt" ], "names": { "canonical": { "ja": "権限説明シート", "en": "Permission Sheet", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Pre-permission Prompt", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "権限説明シート", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Permission Sheet", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pre-permission Prompt", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "OS権限要求の前に用途と利点を説明する。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "前面レイヤー", "Overlay", "platform-pattern", "none", "blocked", "not-applicable" ], "semantics": { "element": "dialog", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "blocked", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "Tab / Shift+Tab: ダイアログ内を移動", "Escape: キャンセル可能な場合に閉じる" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "OS権限要求の前に用途と利点を説明する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Permission Sheetは「OS権限要求の前に用途と利点を説明する。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "mobile-search-sheet", "long-press-menu", "mobile-status-bar", "bottom-app-bar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Permission Sheet" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Permission Sheet" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Permission Sheet" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Permission Sheet" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Permission Sheet" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Permission Sheet" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Permission Sheet" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=permission-sheet", "implementations": { "react": "components/permission-sheet/web/ReactTailwind.tsx", "html": "components/permission-sheet/web/index.html", "native": "components/permission-sheet/mobile/ReactNative.tsx", "compose": "components/permission-sheet/android/AndroidCompose.kt", "swiftui": "components/permission-sheet/apple/SwiftUI.swift", "winui": "components/permission-sheet/windows/WinUI.xaml", "flutter": "components/permission-sheet/cross-platform/Flutter.dart" }, "figma": { "preview": "components/permission-sheet/figma/preview.svg", "tokens": "components/permission-sheet/figma/tokens.tokens.json", "spec": "components/permission-sheet/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "permission-sheet", "権限説明シート", "Permission Sheet" ], "official": [], "aliases": [ "Pre-permission Prompt" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "前面レイヤー", "Overlay", "platform-pattern", "none", "blocked", "not-applicable" ] } }, { "id": "swipe-carousel", "ja": "スワイプカルーセル", "en": "Swipe Carousel", "aliases": [ "Pager" ], "names": { "canonical": { "ja": "スワイプカルーセル", "en": "Swipe Carousel", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Pager", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "スワイプカルーセル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Swipe Carousel", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Pager", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "指の横スワイプでカードや画像を切り替える。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "content", "placementLabel": { "ja": "コンテンツ領域", "en": "In content", "detailJa": "主コンテンツ領域の中で使われます。", "detailEn": "Typically placed inside the main content area." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "コンテンツ領域", "In content", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "指の横スワイプでカードや画像を切り替える。", "コンテンツ領域でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Swipe Carouselは「指の横スワイプでカードや画像を切り替える。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "pull-to-refresh", "swipe-action-row", "mobile-status-bar", "bottom-app-bar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Swipe Carousel" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Swipe Carousel" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Swipe Carousel" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Swipe Carousel" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Swipe Carousel" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Swipe Carousel" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Swipe Carousel" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=swipe-carousel", "implementations": { "react": "components/swipe-carousel/web/ReactTailwind.tsx", "html": "components/swipe-carousel/web/index.html", "native": "components/swipe-carousel/mobile/ReactNative.tsx", "compose": "components/swipe-carousel/android/AndroidCompose.kt", "swiftui": "components/swipe-carousel/apple/SwiftUI.swift", "winui": "components/swipe-carousel/windows/WinUI.xaml", "flutter": "components/swipe-carousel/cross-platform/Flutter.dart" }, "figma": { "preview": "components/swipe-carousel/figma/preview.svg", "tokens": "components/swipe-carousel/figma/tokens.tokens.json", "spec": "components/swipe-carousel/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "swipe-carousel", "スワイプカルーセル", "Swipe Carousel" ], "official": [], "aliases": [ "Pager" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "コンテンツ領域", "In content", "platform-pattern", "none", "not-applicable" ] } }, { "id": "long-press-menu", "ja": "長押しメニュー", "en": "Long-press Menu", "aliases": [ "Touch Context Menu" ], "names": { "canonical": { "ja": "長押しメニュー", "en": "Long-press Menu", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Touch Context Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "長押しメニュー", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Long-press Menu", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Touch Context Menu", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "対象を長押しして文脈操作を表示する。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "overlay", "placementLabel": { "ja": "前面レイヤー", "en": "Overlay", "detailJa": "現在の画面へ重なる前面レイヤーとして表示されます。", "detailEn": "Displayed on a foreground layer over the current screen." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "前面レイヤー", "Overlay", "platform-pattern", "none", "allowed", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "closed", "open", "focus-within" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "対象を長押しして文脈操作を表示する。", "前面レイヤーでこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Long-press Menuは「対象を長押しして文脈操作を表示する。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "mobile-search-sheet", "permission-sheet", "mobile-status-bar", "bottom-app-bar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Long-press Menu" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Long-press Menu" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Long-press Menu" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Long-press Menu" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Long-press Menu" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Long-press Menu" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Long-press Menu" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=long-press-menu", "implementations": { "react": "components/long-press-menu/web/ReactTailwind.tsx", "html": "components/long-press-menu/web/index.html", "native": "components/long-press-menu/mobile/ReactNative.tsx", "compose": "components/long-press-menu/android/AndroidCompose.kt", "swiftui": "components/long-press-menu/apple/SwiftUI.swift", "winui": "components/long-press-menu/windows/WinUI.xaml", "flutter": "components/long-press-menu/cross-platform/Flutter.dart" }, "figma": { "preview": "components/long-press-menu/figma/preview.svg", "tokens": "components/long-press-menu/figma/tokens.tokens.json", "spec": "components/long-press-menu/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "long-press-menu", "長押しメニュー", "Long-press Menu" ], "official": [], "aliases": [ "Touch Context Menu" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "前面レイヤー", "Overlay", "platform-pattern", "none", "allowed", "not-applicable" ] } }, { "id": "mobile-keyboard-state", "ja": "キーボード表示状態", "en": "Keyboard-visible State", "aliases": [ "Keyboard Avoidance" ], "names": { "canonical": { "ja": "キーボード表示状態", "en": "Keyboard-visible State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Keyboard Avoidance", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "キーボード表示状態", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Keyboard-visible State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Keyboard Avoidance", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "入力中に内容と送信操作がキーボードへ隠れない配置。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面全体・非視覚", "System-wide / non-visual", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "入力中に内容と送信操作がキーボードへ隠れない配置。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Keyboard-visible Stateは「入力中に内容と送信操作がキーボードへ隠れない配置。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "mobile-status-bar", "bottom-app-bar", "pull-to-refresh", "swipe-action-row" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Keyboard-visible State" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Keyboard-visible State" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Keyboard-visible State" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Keyboard-visible State" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Keyboard-visible State" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Keyboard-visible State" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Keyboard-visible State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=mobile-keyboard-state", "implementations": { "react": "components/mobile-keyboard-state/web/ReactTailwind.tsx", "html": "components/mobile-keyboard-state/web/index.html", "native": "components/mobile-keyboard-state/mobile/ReactNative.tsx", "compose": "components/mobile-keyboard-state/android/AndroidCompose.kt", "swiftui": "components/mobile-keyboard-state/apple/SwiftUI.swift", "winui": "components/mobile-keyboard-state/windows/WinUI.xaml", "flutter": "components/mobile-keyboard-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/mobile-keyboard-state/figma/preview.svg", "tokens": "components/mobile-keyboard-state/figma/tokens.tokens.json", "spec": "components/mobile-keyboard-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "mobile-keyboard-state", "キーボード表示状態", "Keyboard-visible State" ], "official": [], "aliases": [ "Keyboard Avoidance" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面全体・非視覚", "System-wide / non-visual", "platform-pattern", "none", "not-applicable" ] } }, { "id": "safe-area-footer", "ja": "セーフエリアフッター", "en": "Safe-area Footer", "aliases": [ "Safe Footer" ], "names": { "canonical": { "ja": "セーフエリアフッター", "en": "Safe-area Footer", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Safe Footer", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "セーフエリアフッター", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Safe-area Footer", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Safe Footer", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ホームインジケーターを避けて下部操作を配置する。", "category": "mobile", "categoryLabel": { "ja": "モバイル固有", "en": "Mobile Patterns" }, "kind": "platform-pattern", "placement": "bottom", "placementLabel": { "ja": "画面下部", "en": "Bottom", "detailJa": "画面または親領域の下端で使われます。", "detailEn": "Typically placed at the bottom of the screen or containing region." }, "intentFacets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ], "semantics": { "element": "section", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "モバイルOSのセーフエリア、ジェスチャー、システムUIを優先し、Webの見た目だけを複製しません。", "useWhen": [ "ホームインジケーターを避けて下部操作を配置する。", "画面下部でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Safe-area Footerは「ホームインジケーターを避けて下部操作を配置する。」ためのプラットフォーム固有です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "bottom-app-bar", "page-indicator", "home-indicator", "keyboard-toolbar" ], "platformSupport": { "react": { "status": "adapted", "note": "ReactでHTMLの意味を保って構成できます。", "equivalent": "Safe-area Footer" }, "html": { "status": "adapted", "note": "HTMLのネイティブ要素または標準ARIA patternで構成します。", "equivalent": "Safe-area Footer" }, "native": { "status": "native", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Safe-area Footer" }, "compose": { "status": "native", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Safe-area Footer" }, "swiftui": { "status": "native", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Safe-area Footer" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Safe-area Footer" }, "flutter": { "status": "native", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Safe-area Footer" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=safe-area-footer", "implementations": { "react": "components/safe-area-footer/web/ReactTailwind.tsx", "html": "components/safe-area-footer/web/index.html", "native": "components/safe-area-footer/mobile/ReactNative.tsx", "compose": "components/safe-area-footer/android/AndroidCompose.kt", "swiftui": "components/safe-area-footer/apple/SwiftUI.swift", "winui": "components/safe-area-footer/windows/WinUI.xaml", "flutter": "components/safe-area-footer/cross-platform/Flutter.dart" }, "figma": { "preview": "components/safe-area-footer/figma/preview.svg", "tokens": "components/safe-area-footer/figma/tokens.tokens.json", "spec": "components/safe-area-footer/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "safe-area-footer", "セーフエリアフッター", "Safe-area Footer" ], "official": [], "aliases": [ "Safe Footer" ], "relatedNames": [], "facets": [ "モバイル操作を提供", "モバイル固有", "Mobile Patterns", "画面下部", "Bottom", "platform-pattern", "none", "not-applicable" ] } }, { "id": "focus-ring", "ja": "フォーカスリング", "en": "Focus Ring", "aliases": [ "Focus Indicator" ], "names": { "canonical": { "ja": "フォーカスリング", "en": "Focus Ring", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Focus Indicator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フォーカスリング", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Focus Ring", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Focus Indicator", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "キーボード操作中の現在位置を輪郭で示す。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "キーボード操作中の現在位置を輪郭で示す。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Focus Ringは「キーボード操作中の現在位置を輪郭で示す。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "visually-hidden", "live-region", "high-contrast-toggle", "theme-switcher" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Focus Ring" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Focus Ring" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Focus Ring" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Focus Ring" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Focus Ring" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Focus Ring" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Focus Ring" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=focus-ring", "implementations": { "react": "components/focus-ring/web/ReactTailwind.tsx", "html": "components/focus-ring/web/index.html", "native": "components/focus-ring/mobile/ReactNative.tsx", "compose": "components/focus-ring/android/AndroidCompose.kt", "swiftui": "components/focus-ring/apple/SwiftUI.swift", "winui": "components/focus-ring/windows/WinUI.xaml", "flutter": "components/focus-ring/cross-platform/Flutter.dart" }, "figma": { "preview": "components/focus-ring/figma/preview.svg", "tokens": "components/focus-ring/figma/tokens.tokens.json", "spec": "components/focus-ring/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "focus-ring", "フォーカスリング", "Focus Ring" ], "official": [], "aliases": [ "Focus Indicator" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "visually-hidden", "ja": "視覚的に非表示のラベル", "en": "Visually Hidden Label", "aliases": [ "Screen Reader Only", "sr-only" ], "names": { "canonical": { "ja": "視覚的に非表示のラベル", "en": "Visually Hidden Label", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Screen Reader Only", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "sr-only", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "視覚的に非表示のラベル", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Visually Hidden Label", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Screen Reader Only", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "sr-only", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "画面には隠しつつ支援技術へ名前を提供する。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "画面には隠しつつ支援技術へ名前を提供する。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Visually Hidden Labelは「画面には隠しつつ支援技術へ名前を提供する。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "live-region", "high-contrast-toggle", "theme-switcher" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Visually Hidden Label" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Visually Hidden Label" }, "native": { "status": "not-applicable", "note": "Webの文書構造に固有です。各OSのアクセシビリティAPIを使用します。", "equivalent": "Visually Hidden Label" }, "compose": { "status": "not-applicable", "note": "Web文書に固有で、Composeに直接対応するコントロールはありません。", "equivalent": "Visually Hidden Label" }, "swiftui": { "status": "not-applicable", "note": "Web文書に固有で、SwiftUIに直接対応するコントロールはありません。", "equivalent": "Visually Hidden Label" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Visually Hidden Label" }, "flutter": { "status": "not-applicable", "note": "Web文書に固有で、Flutterに直接対応するwidgetはありません。", "equivalent": "Visually Hidden Label" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=visually-hidden", "implementations": { "react": "components/visually-hidden/web/ReactTailwind.tsx", "html": "components/visually-hidden/web/index.html", "native": "components/visually-hidden/mobile/ReactNative.tsx", "compose": "components/visually-hidden/android/AndroidCompose.kt", "swiftui": "components/visually-hidden/apple/SwiftUI.swift", "winui": "components/visually-hidden/windows/WinUI.xaml", "flutter": "components/visually-hidden/cross-platform/Flutter.dart" }, "figma": { "preview": "components/visually-hidden/figma/preview.svg", "tokens": "components/visually-hidden/figma/tokens.tokens.json", "spec": "components/visually-hidden/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "visually-hidden", "視覚的に非表示のラベル", "Visually Hidden Label" ], "official": [], "aliases": [ "Screen Reader Only", "sr-only" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "live-region", "ja": "ライブリージョン", "en": "Live Region", "aliases": [ "aria-live" ], "names": { "canonical": { "ja": "ライブリージョン", "en": "Live Region", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "aria-live", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ライブリージョン", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Live Region", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "aria-live", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "動的な結果や状態変化を読み上げへ通知する。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "動的な結果や状態変化を読み上げへ通知する。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Live Regionは「動的な結果や状態変化を読み上げへ通知する。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "high-contrast-toggle", "theme-switcher" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Live Region" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Live Region" }, "native": { "status": "not-applicable", "note": "Webの文書構造に固有です。各OSのアクセシビリティAPIを使用します。", "equivalent": "Live Region" }, "compose": { "status": "not-applicable", "note": "Web文書に固有で、Composeに直接対応するコントロールはありません。", "equivalent": "Live Region" }, "swiftui": { "status": "not-applicable", "note": "Web文書に固有で、SwiftUIに直接対応するコントロールはありません。", "equivalent": "Live Region" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Live Region" }, "flutter": { "status": "not-applicable", "note": "Web文書に固有で、Flutterに直接対応するwidgetはありません。", "equivalent": "Live Region" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=live-region", "implementations": { "react": "components/live-region/web/ReactTailwind.tsx", "html": "components/live-region/web/index.html", "native": "components/live-region/mobile/ReactNative.tsx", "compose": "components/live-region/android/AndroidCompose.kt", "swiftui": "components/live-region/apple/SwiftUI.swift", "winui": "components/live-region/windows/WinUI.xaml", "flutter": "components/live-region/cross-platform/Flutter.dart" }, "figma": { "preview": "components/live-region/figma/preview.svg", "tokens": "components/live-region/figma/tokens.tokens.json", "spec": "components/live-region/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "live-region", "ライブリージョン", "Live Region" ], "official": [], "aliases": [ "aria-live" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "high-contrast-toggle", "ja": "高コントラスト切替", "en": "High Contrast Toggle", "aliases": [ "Contrast Mode" ], "names": { "canonical": { "ja": "高コントラスト切替", "en": "High Contrast Toggle", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Contrast Mode", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "高コントラスト切替", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "High Contrast Toggle", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Contrast Mode", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "色や境界の対比を強めた表示へ切り替える。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "色や境界の対比を強めた表示へ切り替える。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "High Contrast Toggleは「色や境界の対比を強めた表示へ切り替える。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "theme-switcher" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "High Contrast Toggle" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "High Contrast Toggle" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "High Contrast Toggle" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "High Contrast Toggle" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "High Contrast Toggle" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "High Contrast Toggle" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "High Contrast Toggle" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=high-contrast-toggle", "implementations": { "react": "components/high-contrast-toggle/web/ReactTailwind.tsx", "html": "components/high-contrast-toggle/web/index.html", "native": "components/high-contrast-toggle/mobile/ReactNative.tsx", "compose": "components/high-contrast-toggle/android/AndroidCompose.kt", "swiftui": "components/high-contrast-toggle/apple/SwiftUI.swift", "winui": "components/high-contrast-toggle/windows/WinUI.xaml", "flutter": "components/high-contrast-toggle/cross-platform/Flutter.dart" }, "figma": { "preview": "components/high-contrast-toggle/figma/preview.svg", "tokens": "components/high-contrast-toggle/figma/tokens.tokens.json", "spec": "components/high-contrast-toggle/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "high-contrast-toggle", "高コントラスト切替", "High Contrast Toggle" ], "official": [], "aliases": [ "Contrast Mode" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "theme-switcher", "ja": "テーマ切替", "en": "Theme Switcher", "aliases": [ "Dark Mode Toggle" ], "names": { "canonical": { "ja": "テーマ切替", "en": "Theme Switcher", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Dark Mode Toggle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "テーマ切替", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Theme Switcher", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Dark Mode Toggle", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "ライト・ダーク・OS連動の表示を選ぶ。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "ライト・ダーク・OS連動の表示を選ぶ。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Theme Switcherは「ライト・ダーク・OS連動の表示を選ぶ。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Theme Switcher" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Theme Switcher" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Theme Switcher" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Theme Switcher" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Theme Switcher" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Theme Switcher" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Theme Switcher" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=theme-switcher", "implementations": { "react": "components/theme-switcher/web/ReactTailwind.tsx", "html": "components/theme-switcher/web/index.html", "native": "components/theme-switcher/mobile/ReactNative.tsx", "compose": "components/theme-switcher/android/AndroidCompose.kt", "swiftui": "components/theme-switcher/apple/SwiftUI.swift", "winui": "components/theme-switcher/windows/WinUI.xaml", "flutter": "components/theme-switcher/cross-platform/Flutter.dart" }, "figma": { "preview": "components/theme-switcher/figma/preview.svg", "tokens": "components/theme-switcher/figma/tokens.tokens.json", "spec": "components/theme-switcher/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "theme-switcher", "テーマ切替", "Theme Switcher" ], "official": [], "aliases": [ "Dark Mode Toggle" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "language-switcher", "ja": "言語切替", "en": "Language Switcher", "aliases": [ "Locale Switcher" ], "names": { "canonical": { "ja": "言語切替", "en": "Language Switcher", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Locale Switcher", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "言語切替", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Language Switcher", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Locale Switcher", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "サイトやアプリの表示言語を選ぶ。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "サイトやアプリの表示言語を選ぶ。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Language Switcherは「サイトやアプリの表示言語を選ぶ。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Language Switcher" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Language Switcher" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Language Switcher" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Language Switcher" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Language Switcher" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Language Switcher" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Language Switcher" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=language-switcher", "implementations": { "react": "components/language-switcher/web/ReactTailwind.tsx", "html": "components/language-switcher/web/index.html", "native": "components/language-switcher/mobile/ReactNative.tsx", "compose": "components/language-switcher/android/AndroidCompose.kt", "swiftui": "components/language-switcher/apple/SwiftUI.swift", "winui": "components/language-switcher/windows/WinUI.xaml", "flutter": "components/language-switcher/cross-platform/Flutter.dart" }, "figma": { "preview": "components/language-switcher/figma/preview.svg", "tokens": "components/language-switcher/figma/tokens.tokens.json", "spec": "components/language-switcher/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "language-switcher", "言語切替", "Language Switcher" ], "official": [], "aliases": [ "Locale Switcher" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "reduced-motion-toggle", "ja": "動きを減らす設定", "en": "Reduced Motion Toggle", "aliases": [ "Motion Preference" ], "names": { "canonical": { "ja": "動きを減らす設定", "en": "Reduced Motion Toggle", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Motion Preference", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "動きを減らす設定", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Reduced Motion Toggle", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Motion Preference", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "不要なアニメーションを停止・短縮する。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "不要なアニメーションを停止・短縮する。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Reduced Motion Toggleは「不要なアニメーションを停止・短縮する。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Reduced Motion Toggle" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Reduced Motion Toggle" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Reduced Motion Toggle" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Reduced Motion Toggle" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Reduced Motion Toggle" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Reduced Motion Toggle" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Reduced Motion Toggle" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=reduced-motion-toggle", "implementations": { "react": "components/reduced-motion-toggle/web/ReactTailwind.tsx", "html": "components/reduced-motion-toggle/web/index.html", "native": "components/reduced-motion-toggle/mobile/ReactNative.tsx", "compose": "components/reduced-motion-toggle/android/AndroidCompose.kt", "swiftui": "components/reduced-motion-toggle/apple/SwiftUI.swift", "winui": "components/reduced-motion-toggle/windows/WinUI.xaml", "flutter": "components/reduced-motion-toggle/cross-platform/Flutter.dart" }, "figma": { "preview": "components/reduced-motion-toggle/figma/preview.svg", "tokens": "components/reduced-motion-toggle/figma/tokens.tokens.json", "spec": "components/reduced-motion-toggle/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "reduced-motion-toggle", "動きを減らす設定", "Reduced Motion Toggle" ], "official": [], "aliases": [ "Motion Preference" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "keyboard-shortcut-hint", "ja": "キーボードショートカット表示", "en": "Keyboard Shortcut Hint", "aliases": [ "Shortcut Key" ], "names": { "canonical": { "ja": "キーボードショートカット表示", "en": "Keyboard Shortcut Hint", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Shortcut Key", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "キーボードショートカット表示", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Keyboard Shortcut Hint", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Shortcut Key", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "操作に使えるキーをラベルとして示す。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "操作に使えるキーをラベルとして示す。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Keyboard Shortcut Hintは「操作に使えるキーをラベルとして示す。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Keyboard Shortcut Hint" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Keyboard Shortcut Hint" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Keyboard Shortcut Hint" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Keyboard Shortcut Hint" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Keyboard Shortcut Hint" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Keyboard Shortcut Hint" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Keyboard Shortcut Hint" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=keyboard-shortcut-hint", "implementations": { "react": "components/keyboard-shortcut-hint/web/ReactTailwind.tsx", "html": "components/keyboard-shortcut-hint/web/index.html", "native": "components/keyboard-shortcut-hint/mobile/ReactNative.tsx", "compose": "components/keyboard-shortcut-hint/android/AndroidCompose.kt", "swiftui": "components/keyboard-shortcut-hint/apple/SwiftUI.swift", "winui": "components/keyboard-shortcut-hint/windows/WinUI.xaml", "flutter": "components/keyboard-shortcut-hint/cross-platform/Flutter.dart" }, "figma": { "preview": "components/keyboard-shortcut-hint/figma/preview.svg", "tokens": "components/keyboard-shortcut-hint/figma/tokens.tokens.json", "spec": "components/keyboard-shortcut-hint/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "keyboard-shortcut-hint", "キーボードショートカット表示", "Keyboard Shortcut Hint" ], "official": [], "aliases": [ "Shortcut Key" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "accessible-name", "ja": "アクセシブルな名前", "en": "Accessible Name", "aliases": [ "aria-label" ], "names": { "canonical": { "ja": "アクセシブルな名前", "en": "Accessible Name", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "aria-label", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "アクセシブルな名前", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Accessible Name", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "aria-label", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "アイコン操作などへ読み上げ可能な名前を与える。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "アイコン操作などへ読み上げ可能な名前を与える。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Accessible Nameは「アイコン操作などへ読み上げ可能な名前を与える。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Accessible Name" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Accessible Name" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Accessible Name" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Accessible Name" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Accessible Name" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Accessible Name" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Accessible Name" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=accessible-name", "implementations": { "react": "components/accessible-name/web/ReactTailwind.tsx", "html": "components/accessible-name/web/index.html", "native": "components/accessible-name/mobile/ReactNative.tsx", "compose": "components/accessible-name/android/AndroidCompose.kt", "swiftui": "components/accessible-name/apple/SwiftUI.swift", "winui": "components/accessible-name/windows/WinUI.xaml", "flutter": "components/accessible-name/cross-platform/Flutter.dart" }, "figma": { "preview": "components/accessible-name/figma/preview.svg", "tokens": "components/accessible-name/figma/tokens.tokens.json", "spec": "components/accessible-name/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "accessible-name", "アクセシブルな名前", "Accessible Name" ], "official": [], "aliases": [ "aria-label" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "error-announcement", "ja": "エラー読み上げ通知", "en": "Error Announcement", "aliases": [ "Error Live Region" ], "names": { "canonical": { "ja": "エラー読み上げ通知", "en": "Error Announcement", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Error Live Region", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "エラー読み上げ通知", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Error Announcement", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Error Live Region", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "入力エラーの発生と場所を支援技術へ伝える。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "allowed", "transient" ], "semantics": { "element": "div", "role": "alert", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"alert\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "入力エラーの発生と場所を支援技術へ伝える。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Error Announcementは「入力エラーの発生と場所を支援技術へ伝える。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "loading-announcement", "focus-ring", "visually-hidden", "live-region" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Error Announcement" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Error Announcement" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Error Announcement" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Error Announcement" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Error Announcement" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Error Announcement" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Error Announcement" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=error-announcement", "implementations": { "react": "components/error-announcement/web/ReactTailwind.tsx", "html": "components/error-announcement/web/index.html", "native": "components/error-announcement/mobile/ReactNative.tsx", "compose": "components/error-announcement/android/AndroidCompose.kt", "swiftui": "components/error-announcement/apple/SwiftUI.swift", "winui": "components/error-announcement/windows/WinUI.xaml", "flutter": "components/error-announcement/cross-platform/Flutter.dart" }, "figma": { "preview": "components/error-announcement/figma/preview.svg", "tokens": "components/error-announcement/figma/tokens.tokens.json", "spec": "components/error-announcement/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "error-announcement", "エラー読み上げ通知", "Error Announcement" ], "official": [], "aliases": [ "Error Live Region" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "allowed", "transient" ] } }, { "id": "zoom-reflow-layout", "ja": "ズーム対応レイアウト", "en": "Zoom and Reflow Layout", "aliases": [ "Reflow" ], "names": { "canonical": { "ja": "ズーム対応レイアウト", "en": "Zoom and Reflow Layout", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Reflow", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ズーム対応レイアウト", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Zoom and Reflow Layout", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Reflow", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "拡大時に内容を欠けさせず1方向へ再配置する。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "拡大時に内容を欠けさせず1方向へ再配置する。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Zoom and Reflow Layoutは「拡大時に内容を欠けさせず1方向へ再配置する。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Zoom and Reflow Layout" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Zoom and Reflow Layout" }, "native": { "status": "not-applicable", "note": "Webの文書構造に固有です。各OSのアクセシビリティAPIを使用します。", "equivalent": "Zoom and Reflow Layout" }, "compose": { "status": "not-applicable", "note": "Web文書に固有で、Composeに直接対応するコントロールはありません。", "equivalent": "Zoom and Reflow Layout" }, "swiftui": { "status": "not-applicable", "note": "Web文書に固有で、SwiftUIに直接対応するコントロールはありません。", "equivalent": "Zoom and Reflow Layout" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Zoom and Reflow Layout" }, "flutter": { "status": "not-applicable", "note": "Web文書に固有で、Flutterに直接対応するwidgetはありません。", "equivalent": "Zoom and Reflow Layout" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=zoom-reflow-layout", "implementations": { "react": "components/zoom-reflow-layout/web/ReactTailwind.tsx", "html": "components/zoom-reflow-layout/web/index.html", "native": "components/zoom-reflow-layout/mobile/ReactNative.tsx", "compose": "components/zoom-reflow-layout/android/AndroidCompose.kt", "swiftui": "components/zoom-reflow-layout/apple/SwiftUI.swift", "winui": "components/zoom-reflow-layout/windows/WinUI.xaml", "flutter": "components/zoom-reflow-layout/cross-platform/Flutter.dart" }, "figma": { "preview": "components/zoom-reflow-layout/figma/preview.svg", "tokens": "components/zoom-reflow-layout/figma/tokens.tokens.json", "spec": "components/zoom-reflow-layout/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "zoom-reflow-layout", "ズーム対応レイアウト", "Zoom and Reflow Layout" ], "official": [], "aliases": [ "Reflow" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "forced-colors-state", "ja": "強制カラーモード対応", "en": "Forced Colors State", "aliases": [ "Windows High Contrast" ], "names": { "canonical": { "ja": "強制カラーモード対応", "en": "Forced Colors State", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Windows High Contrast", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "強制カラーモード対応", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Forced Colors State", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Windows High Contrast", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "OSの強制色でも境界・状態・操作を判別できる表示。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "OSの強制色でも境界・状態・操作を判別できる表示。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Forced Colors Stateは「OSの強制色でも境界・状態・操作を判別できる表示。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Forced Colors State" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Forced Colors State" }, "native": { "status": "not-applicable", "note": "Webの文書構造に固有です。各OSのアクセシビリティAPIを使用します。", "equivalent": "Forced Colors State" }, "compose": { "status": "not-applicable", "note": "Web文書に固有で、Composeに直接対応するコントロールはありません。", "equivalent": "Forced Colors State" }, "swiftui": { "status": "not-applicable", "note": "Web文書に固有で、SwiftUIに直接対応するコントロールはありません。", "equivalent": "Forced Colors State" }, "winui": { "status": "not-applicable", "note": "このパターンはWebまたはモバイルOS固有で、WinUIに直接対応しません。", "equivalent": "Forced Colors State" }, "flutter": { "status": "not-applicable", "note": "Web文書に固有で、Flutterに直接対応するwidgetはありません。", "equivalent": "Forced Colors State" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=forced-colors-state", "implementations": { "react": "components/forced-colors-state/web/ReactTailwind.tsx", "html": "components/forced-colors-state/web/index.html", "native": "components/forced-colors-state/mobile/ReactNative.tsx", "compose": "components/forced-colors-state/android/AndroidCompose.kt", "swiftui": "components/forced-colors-state/apple/SwiftUI.swift", "winui": "components/forced-colors-state/windows/WinUI.xaml", "flutter": "components/forced-colors-state/cross-platform/Flutter.dart" }, "figma": { "preview": "components/forced-colors-state/figma/preview.svg", "tokens": "components/forced-colors-state/figma/tokens.tokens.json", "spec": "components/forced-colors-state/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "forced-colors-state", "強制カラーモード対応", "Forced Colors State" ], "official": [], "aliases": [ "Windows High Contrast" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "touch-target", "ja": "タッチターゲット", "en": "Touch Target", "aliases": [ "Hit Area", "Tap Target" ], "names": { "canonical": { "ja": "タッチターゲット", "en": "Touch Target", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Hit Area", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Tap Target", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "タッチターゲット", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Touch Target", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Hit Area", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "Tap Target", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "指で誤操作しにくい十分な操作領域。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "指で誤操作しにくい十分な操作領域。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Touch Targetは「指で誤操作しにくい十分な操作領域。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Touch Target" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Touch Target" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Touch Target" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Touch Target" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Touch Target" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Touch Target" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Touch Target" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=touch-target", "implementations": { "react": "components/touch-target/web/ReactTailwind.tsx", "html": "components/touch-target/web/index.html", "native": "components/touch-target/mobile/ReactNative.tsx", "compose": "components/touch-target/android/AndroidCompose.kt", "swiftui": "components/touch-target/apple/SwiftUI.swift", "winui": "components/touch-target/windows/WinUI.xaml", "flutter": "components/touch-target/cross-platform/Flutter.dart" }, "figma": { "preview": "components/touch-target/figma/preview.svg", "tokens": "components/touch-target/figma/tokens.tokens.json", "spec": "components/touch-target/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "touch-target", "タッチターゲット", "Touch Target" ], "official": [], "aliases": [ "Hit Area", "Tap Target" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "loading-announcement", "ja": "読込状態の通知", "en": "Loading Announcement", "aliases": [ "Busy State", "aria-busy" ], "names": { "canonical": { "ja": "読込状態の通知", "en": "Loading Announcement", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Busy State", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "aria-busy", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "読込状態の通知", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Loading Announcement", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Busy State", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null }, { "value": "aria-busy", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 4 }, "description": "処理開始・完了を画面と支援技術へ伝える。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "allowed", "transient" ], "semantics": { "element": "div", "role": "status", "inputType": null, "selectionModel": "none", "backgroundInteraction": "allowed", "persistence": "transient" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "必要な場合は role=\"status\" と対応するaria状態を同期する。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "処理開始・完了を画面と支援技術へ伝える。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Loading Announcementは「処理開始・完了を画面と支援技術へ伝える。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "error-announcement", "focus-ring", "visually-hidden", "live-region" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Loading Announcement" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Loading Announcement" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Loading Announcement" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Loading Announcement" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Loading Announcement" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Loading Announcement" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Loading Announcement" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=loading-announcement", "implementations": { "react": "components/loading-announcement/web/ReactTailwind.tsx", "html": "components/loading-announcement/web/index.html", "native": "components/loading-announcement/mobile/ReactNative.tsx", "compose": "components/loading-announcement/android/AndroidCompose.kt", "swiftui": "components/loading-announcement/apple/SwiftUI.swift", "winui": "components/loading-announcement/windows/WinUI.xaml", "flutter": "components/loading-announcement/cross-platform/Flutter.dart" }, "figma": { "preview": "components/loading-announcement/figma/preview.svg", "tokens": "components/loading-announcement/figma/tokens.tokens.json", "spec": "components/loading-announcement/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "loading-announcement", "読込状態の通知", "Loading Announcement" ], "official": [], "aliases": [ "Busy State", "aria-busy" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "allowed", "transient" ] } }, { "id": "keyboard-navigation", "ja": "キーボードナビゲーション", "en": "Keyboard Navigation", "aliases": [ "Key Navigation" ], "names": { "canonical": { "ja": "キーボードナビゲーション", "en": "Keyboard Navigation", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Key Navigation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "キーボードナビゲーション", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Keyboard Navigation", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Key Navigation", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "Tab・矢印・Enter・Escapeで操作できる仕組み。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "Tab・矢印・Enter・Escapeで操作できる仕組み。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Keyboard Navigationは「Tab・矢印・Enter・Escapeで操作できる仕組み。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Keyboard Navigation" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Keyboard Navigation" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Keyboard Navigation" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Keyboard Navigation" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Keyboard Navigation" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Keyboard Navigation" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Keyboard Navigation" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=keyboard-navigation", "implementations": { "react": "components/keyboard-navigation/web/ReactTailwind.tsx", "html": "components/keyboard-navigation/web/index.html", "native": "components/keyboard-navigation/mobile/ReactNative.tsx", "compose": "components/keyboard-navigation/android/AndroidCompose.kt", "swiftui": "components/keyboard-navigation/apple/SwiftUI.swift", "winui": "components/keyboard-navigation/windows/WinUI.xaml", "flutter": "components/keyboard-navigation/cross-platform/Flutter.dart" }, "figma": { "preview": "components/keyboard-navigation/figma/preview.svg", "tokens": "components/keyboard-navigation/figma/tokens.tokens.json", "spec": "components/keyboard-navigation/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "keyboard-navigation", "キーボードナビゲーション", "Keyboard Navigation" ], "official": [], "aliases": [ "Key Navigation" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "focus-trap", "ja": "フォーカストラップ", "en": "Focus Trap", "aliases": [ "Focus Containment" ], "names": { "canonical": { "ja": "フォーカストラップ", "en": "Focus Trap", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Focus Containment", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "フォーカストラップ", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Focus Trap", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Focus Containment", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "モーダル表示中のTab移動をその内部へ限定する。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "モーダル表示中のTab移動をその内部へ限定する。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Focus Trapは「モーダル表示中のTab移動をその内部へ限定する。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Focus Trap" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Focus Trap" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Focus Trap" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Focus Trap" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Focus Trap" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Focus Trap" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Focus Trap" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=focus-trap", "implementations": { "react": "components/focus-trap/web/ReactTailwind.tsx", "html": "components/focus-trap/web/index.html", "native": "components/focus-trap/mobile/ReactNative.tsx", "compose": "components/focus-trap/android/AndroidCompose.kt", "swiftui": "components/focus-trap/apple/SwiftUI.swift", "winui": "components/focus-trap/windows/WinUI.xaml", "flutter": "components/focus-trap/cross-platform/Flutter.dart" }, "figma": { "preview": "components/focus-trap/figma/preview.svg", "tokens": "components/focus-trap/figma/tokens.tokens.json", "spec": "components/focus-trap/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "focus-trap", "フォーカストラップ", "Focus Trap" ], "official": [], "aliases": [ "Focus Containment" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } }, { "id": "roving-tabindex", "ja": "ロービングタブインデックス", "en": "Roving Tabindex", "aliases": [ "Composite Widget Keyboard Model" ], "names": { "canonical": { "ja": "ロービングタブインデックス", "en": "Roving Tabindex", "status": "ui-atlas-normalized" }, "displayOrder": [ "formal", "aliases", "related" ], "formal": [], "aliases": [ { "value": "Composite Widget Keyboard Model", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "related": [], "entries": [ { "value": "ロービングタブインデックス", "language": "ja", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Roving Tabindex", "language": "en", "type": "atlas-canonical", "system": "UI Atlas", "equivalence": "exact", "source": null }, { "value": "Composite Widget Keyboard Model", "language": "en", "type": "common", "system": "UI Atlas", "equivalence": "contextual", "source": null } ], "distinctions": [], "lifecycle": { "status": "active-atlas-term", "source": null }, "completeness": "all-known-names-in-this-registry", "knownNameCount": 3 }, "description": "複合ウィジェット内のTab停止点を1つにし、矢印キーで移動する。", "category": "accessibility", "categoryLabel": { "ja": "アクセシビリティ・環境", "en": "Accessibility & System" }, "kind": "accessibility-technique", "placement": "system", "placementLabel": { "ja": "画面全体・非視覚", "en": "System-wide / non-visual", "detailJa": "画面全体へ適用されるか、固定された視覚的位置を持ちません。", "detailEn": "Applies system-wide or has no fixed visual position." }, "intentFacets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ], "semantics": { "element": "div", "role": null, "inputType": null, "selectionModel": "none", "backgroundInteraction": "not-applicable", "persistence": "not-applicable" }, "anatomy": [ "コンテナ", "主要内容", "補助情報または操作" ], "states": [ "default", "focus-visible" ], "keyboard": [ "該当なし。読み上げ順とDOM順を一致させる。" ], "accessibility": [ "ネイティブ要素とDOM順を優先し、不要なARIA roleを追加しない。" ], "mobile": "320 CSS px相当でも横スクロールを強制せず、内容の読み上げ順を維持します。", "useWhen": [ "複合ウィジェット内のTab停止点を1つにし、矢印キーで移動する。", "画面全体・非視覚でこの目的を明確に示したいとき。" ], "avoidWhen": [ "より単純なネイティブ要素だけで同じ目的を達成できる場合。" ], "differences": [ "Roving Tabindexは「複合ウィジェット内のTab停止点を1つにし、矢印キーで移動する。」ためのアクセシビリティ手法です。", "似た候補は、配置・背景操作・持続性・選択モデルを比較して選びます。" ], "relatedIds": [ "focus-ring", "visually-hidden", "live-region", "high-contrast-toggle" ], "platformSupport": { "react": { "status": "composed", "note": "DOM・CSS・状態管理を組み合わせるWeb手法です。", "equivalent": "Roving Tabindex" }, "html": { "status": "composed", "note": "HTML・CSS・少量のJavaScriptで成立する手法です。", "equivalent": "Roving Tabindex" }, "native": { "status": "adapted", "note": "React Nativeの標準要素とアクセシビリティpropsへ置き換えます。", "equivalent": "Roving Tabindex" }, "compose": { "status": "composed", "note": "Material 3 composableまたはSemanticsを組み合わせます。", "equivalent": "Roving Tabindex" }, "swiftui": { "status": "composed", "note": "SwiftUI標準Viewまたはaccessibility modifierで構成します。", "equivalent": "Roving Tabindex" }, "winui": { "status": "composed", "note": "WinUIコントロールまたはXAML構成へ置き換えます。", "equivalent": "Roving Tabindex" }, "flutter": { "status": "composed", "note": "Material/Cupertino widgetまたはSemanticsで構成します。", "equivalent": "Roving Tabindex" } }, "assets": { "site": "https://ui-atlas.pages.dev/#component=roving-tabindex", "implementations": { "react": "components/roving-tabindex/web/ReactTailwind.tsx", "html": "components/roving-tabindex/web/index.html", "native": "components/roving-tabindex/mobile/ReactNative.tsx", "compose": "components/roving-tabindex/android/AndroidCompose.kt", "swiftui": "components/roving-tabindex/apple/SwiftUI.swift", "winui": "components/roving-tabindex/windows/WinUI.xaml", "flutter": "components/roving-tabindex/cross-platform/Flutter.dart" }, "figma": { "preview": "components/roving-tabindex/figma/preview.svg", "tokens": "components/roving-tabindex/figma/tokens.tokens.json", "spec": "components/roving-tabindex/figma/component-spec.json" } }, "verification": { "date": "2026-07-21", "level": "structurally-checked", "checks": [ "contract-shape", "web-markers" ] }, "termIndex": { "canonical": [ "roving-tabindex", "ロービングタブインデックス", "Roving Tabindex" ], "official": [], "aliases": [ "Composite Widget Keyboard Model" ], "relatedNames": [], "facets": [ "利用環境を支援", "アクセシビリティ・環境", "Accessibility & System", "画面全体・非視覚", "System-wide / non-visual", "accessibility-technique", "none", "not-applicable" ] } } ], "recipes": [ { "id": "authentication", "ja": "認証", "en": "Authentication", "summary": "Sign-in and account recovery flow with credential, federated, passkey, and second-factor paths kept explicit.", "surfaces": [ "authentication" ], "tasks": [ "sign-in", "recover-access", "verify-identity" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "form" ], "dataVolumes": [ "low" ], "navigationDepths": [ "standalone" ], "riskLevels": [ "high" ], "capabilities": [ "credentials", "social-login", "passkey", "mfa" ], "excludes": [ "account-preferences" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "auth-methods", "question": "Which authentication methods are actually supported?", "options": [ "password", "federated", "passkey", "one-time-code" ] }, { "id": "recovery-policy", "question": "What verified recovery path is available?", "options": [ "email-link", "one-time-code", "support-assisted" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide a focused, trustworthy authentication surface.", "required": true, "componentIds": [ "center-layout" ], "alternatives": [], "content": { "required": [ "service identity", "authentication task" ] }, "responsive": { "compact": "Use full-width content with safe-area padding.", "wide": "Center a bounded form without decorative distraction." } }, { "id": "identity", "parentId": "shell", "order": 2, "role": "region", "purpose": "Identify the service before asking for credentials.", "required": true, "componentIds": [ "heading", "body-text" ], "alternatives": [], "content": { "required": [ "service name", "task heading", "short trust cue" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "credentials", "parentId": "shell", "order": 3, "role": "region", "purpose": "Collect only the credentials required for the selected method.", "required": true, "componentIds": [ "login-form" ], "alternatives": [ "passkey-prompt", "otp-form" ], "content": { "required": [ "visible labels", "autocomplete metadata", "submit action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "alternatives", "parentId": "shell", "order": 4, "role": "region", "purpose": "Expose supported alternative sign-in methods without competing with the current method.", "required": false, "componentIds": [ "social-login" ], "alternatives": [ "passkey-prompt" ], "content": { "required": [ "provider name", "method distinction" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "recovery", "parentId": "shell", "order": 5, "role": "region", "purpose": "Provide a verified route when authentication fails.", "required": true, "componentIds": [ "password-reset", "link" ], "alternatives": [], "content": { "required": [ "recovery action", "back to sign in" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "submit-credentials", "trigger": "User submits valid credentials.", "outcome": "Authenticate, announce progress, and continue to the verified return destination.", "componentIds": [ "login-form", "primary-button", "loading-announcement" ] }, { "id": "recover-access", "trigger": "User cannot use the current credential.", "outcome": "Move to the configured recovery method without discarding account identifier.", "componentIds": [ "password-reset", "otp-form" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "heading" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "Authentication succeeds.", "presentation": "Confirm success non-visually and continue to the intended destination.", "componentIds": [ "success-state" ], "recoveryAction": "Continue to the intended destination.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "form.visible-label", "form.preserve-input", "auth.password-manager", "privacy.minimum-data", "a11y.live-announcement" ], "references": [ "center-layout", "heading", "body-text", "login-form", "passkey-prompt", "otp-form", "social-login", "password-reset", "link", "primary-button", "loading-announcement", "skeleton", "error-state", "error-announcement", "success-state" ] }, { "id": "account-settings", "ja": "アカウント設定", "en": "Account settings", "summary": "Settings workspace separating profile, preferences, security, sessions, and destructive account actions.", "surfaces": [ "settings", "account" ], "tasks": [ "review-settings", "update-profile", "manage-security", "manage-sessions" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "form", "key-value" ], "dataVolumes": [ "medium" ], "navigationDepths": [ "application" ], "riskLevels": [ "high" ], "capabilities": [ "section-navigation", "autosave-or-explicit-save", "security" ], "excludes": [ "single-toggle" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "save-model", "question": "Do changes save immediately or through an explicit action?", "options": [ "immediate", "explicit-save" ] }, { "id": "security-scope", "question": "Which security controls can the current user manage?", "options": [ "password", "mfa", "passkeys", "sessions" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide settings navigation and a bounded editing area.", "required": true, "componentIds": [ "sidebar-layout" ], "alternatives": [], "content": { "required": [ "settings navigation", "active settings section" ] }, "responsive": { "compact": "Replace persistent sidebar with a settings list and drill-in page.", "wide": "Keep settings navigation beside the active section." } }, { "id": "navigation", "parentId": "shell", "order": 2, "role": "navigation", "purpose": "Expose settings sections and current location.", "required": true, "componentIds": [ "settings-list" ], "alternatives": [], "content": { "required": [ "section names", "current section" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "header", "parentId": "shell", "order": 3, "role": "region", "purpose": "Name the active section and its consequence.", "required": true, "componentIds": [ "page-header" ], "alternatives": [], "content": { "required": [ "section title", "short description" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "preferences", "parentId": "shell", "order": 4, "role": "region", "purpose": "Edit profile and preference fields with an explicit save model.", "required": true, "componentIds": [ "profile-editor", "preference-row" ], "alternatives": [], "content": { "required": [ "visible labels", "current values", "save status" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "security", "parentId": "shell", "order": 5, "role": "region", "purpose": "Manage security factors and active sessions.", "required": true, "componentIds": [ "two-factor-setup", "session-list", "security-key-list" ], "alternatives": [], "content": { "required": [ "factor status", "session identity", "revoke action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "danger", "parentId": "shell", "order": 6, "role": "region", "purpose": "Separate destructive account actions from routine settings.", "required": true, "componentIds": [ "delete-account" ], "alternatives": [], "content": { "required": [ "consequence", "confirmation requirement" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "save-settings", "trigger": "User changes a persisted preference.", "outcome": "Save according to the declared model and expose success or failure.", "componentIds": [ "preference-row", "unsaved-changes", "success-state" ] }, { "id": "revoke-session", "trigger": "User revokes another session.", "outcome": "Confirm scope and update the session list.", "componentIds": [ "session-list", "alert-dialog" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "settings-list" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "Settings are persisted.", "presentation": "Show concise saved status without moving focus.", "componentIds": [ "success-state" ], "recoveryAction": "Continue editing or return to settings list.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "form.visible-label", "form.preserve-input", "action.destructive-confirmation", "a11y.live-announcement", "privacy.minimum-data" ], "references": [ "sidebar-layout", "settings-list", "page-header", "profile-editor", "preference-row", "two-factor-setup", "session-list", "security-key-list", "delete-account", "unsaved-changes", "success-state", "alert-dialog", "skeleton", "loading-announcement", "error-state", "error-announcement" ] }, { "id": "dashboard-overview", "ja": "ダッシュボード概要", "en": "Dashboard overview", "summary": "High-level monitoring screen that prioritizes actionable metrics, trends, and recent exceptions over decorative charts.", "surfaces": [ "dashboard", "analytics" ], "tasks": [ "monitor", "compare", "inspect-exception" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "metrics", "time-series", "activity" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "low", "medium" ], "capabilities": [ "date-range", "filter", "drill-down" ], "excludes": [ "single-metric" ], "noEmptyState": false, "inlineSuccess": true }, "requiredDecisions": [ { "id": "decision-metrics", "question": "Which metrics change a user decision?", "options": [ "operational", "financial", "engagement", "quality" ] }, { "id": "comparison-period", "question": "What comparison period is meaningful?", "options": [ "previous-period", "year-over-year", "target" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide application navigation and an overview canvas.", "required": true, "componentIds": [ "viewport-shell" ], "alternatives": [], "content": { "required": [ "navigation", "overview" ] }, "responsive": { "compact": "Stack all regions and move secondary navigation into a drawer.", "wide": "Use a stable application shell with bounded content width." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the dashboard and expose global time/filter context.", "required": true, "componentIds": [ "page-header", "date-range-picker" ], "alternatives": [], "content": { "required": [ "dashboard title", "data freshness", "date range" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "metrics", "parentId": "shell", "order": 3, "role": "region", "purpose": "Show a small set of decision-driving metrics.", "required": true, "componentIds": [ "kpi-card", "stat" ], "alternatives": [], "content": { "required": [ "metric name", "current value", "comparison", "units" ] }, "responsive": { "compact": "Render one or two columns without clipped labels.", "wide": "Use a compact grid with equal comparison structure." } }, { "id": "trends", "parentId": "shell", "order": 4, "role": "region", "purpose": "Explain change over time with data alternatives.", "required": true, "componentIds": [ "chart", "table" ], "alternatives": [], "content": { "required": [ "chart title", "series labels", "data table or summary" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "exceptions", "parentId": "shell", "order": 5, "role": "region", "purpose": "Surface recent events or items that require attention.", "required": true, "componentIds": [ "activity-feed", "status-badge" ], "alternatives": [], "content": { "required": [ "event", "time", "status", "drill-down action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "change-range", "trigger": "User changes the reporting period.", "outcome": "Refresh all affected regions while preserving layout and announcing progress.", "componentIds": [ "date-range-picker", "loading-announcement" ] }, { "id": "inspect-metric", "trigger": "User activates a metric or exception.", "outcome": "Open a filtered detail view with the source context retained.", "componentIds": [ "kpi-card", "link" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No data exists for the selected scope.", "presentation": "Explain the scope and provide a safe setup or reset action.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "a11y.live-announcement", "content.truncation" ], "references": [ "viewport-shell", "page-header", "date-range-picker", "kpi-card", "stat", "chart", "table", "activity-feed", "status-badge", "loading-announcement", "link", "skeleton", "error-state", "error-announcement", "empty-state" ] }, { "id": "collection-browse", "ja": "コレクション閲覧", "en": "Collection browse", "summary": "Browsable collection with query, filters, sort, result count, view choice, and stable pagination or continuation.", "surfaces": [ "collection", "catalog" ], "tasks": [ "browse", "filter", "sort", "open-item" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "cards", "list" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application", "website" ], "riskLevels": [ "low" ], "capabilities": [ "search", "filter", "sort", "pagination" ], "excludes": [ "editable-table" ], "noEmptyState": false, "inlineSuccess": true }, "requiredDecisions": [ { "id": "continuation", "question": "How should users continue through many results?", "options": [ "pagination", "load-more", "infinite-feed" ] }, { "id": "view-model", "question": "Which view best supports comparison?", "options": [ "grid", "list", "user-toggle" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide collection context and results.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "collection header", "result controls", "results" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the collection and explain its scope.", "required": true, "componentIds": [ "page-header" ], "alternatives": [], "content": { "required": [ "title", "summary", "optional primary action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "controls", "parentId": "shell", "order": 3, "role": "region", "purpose": "Search, filter, sort, and show the active result scope.", "required": true, "componentIds": [ "search-input", "filter-bar", "sort-menu" ], "alternatives": [], "content": { "required": [ "query", "active filters", "result count", "sort" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "results", "parentId": "shell", "order": 4, "role": "region", "purpose": "Present comparable item summaries with stable links.", "required": true, "componentIds": [ "card-grid", "card" ], "alternatives": [ "list", "product-card" ], "content": { "required": [ "item identity", "key attributes", "destination" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "continuation", "parentId": "shell", "order": 5, "role": "region", "purpose": "Continue through the result set without losing filters.", "required": true, "componentIds": [ "pagination" ], "alternatives": [ "feed" ], "content": { "required": [ "current position", "next or page actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "apply-filter", "trigger": "User changes query, filter, or sort.", "outcome": "Refresh results, update count, and retain controls and URL state.", "componentIds": [ "filter-bar", "sort-menu", "loading-announcement" ] }, { "id": "open-item", "trigger": "User selects an item.", "outcome": "Open item detail and preserve return position and filters.", "componentIds": [ "card", "link" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No items match the current filters.", "presentation": "Show active constraints and offer clear/reset actions.", "componentIds": [ "no-results" ], "recoveryAction": "Clear one or all filters.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "navigation.current-location", "a11y.live-announcement" ], "references": [ "container", "page-header", "search-input", "filter-bar", "sort-menu", "card-grid", "card", "list", "product-card", "pagination", "feed", "loading-announcement", "link", "skeleton", "error-state", "error-announcement", "no-results" ] }, { "id": "list-detail", "ja": "一覧・詳細", "en": "List and detail", "summary": "Selection-oriented workspace that keeps list context while showing the active item in an adjacent or drill-in detail view.", "surfaces": [ "list-detail", "master-detail" ], "tasks": [ "scan", "select", "inspect-detail", "move-between-items" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "list", "records" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "low", "medium" ], "capabilities": [ "selection", "detail", "next-previous" ], "excludes": [ "bulk-edit" ], "noEmptyState": false, "inlineSuccess": true }, "requiredDecisions": [ { "id": "compact-navigation", "question": "How does compact mode move between list and detail?", "options": [ "drill-in", "sheet" ] }, { "id": "selection-default", "question": "Should any item be selected by default?", "options": [ "none", "first", "route-selected" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Coordinate list and detail while retaining context.", "required": true, "componentIds": [ "master-detail-view" ], "alternatives": [], "content": { "required": [ "list region", "detail region" ] }, "responsive": { "compact": "Show list or detail as separate route states with explicit back.", "wide": "Show list and detail adjacently with one selected item." } }, { "id": "list", "parentId": "shell", "order": 2, "role": "region", "purpose": "Show scannable records and the current selection.", "required": true, "componentIds": [ "list", "list-item" ], "alternatives": [], "content": { "required": [ "record identity", "summary", "selected state" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "detail", "parentId": "shell", "order": 3, "role": "region", "purpose": "Show the selected record with a clear title and actions.", "required": true, "componentIds": [ "description-list", "page-header" ], "alternatives": [], "content": { "required": [ "record title", "key-value details", "available actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "navigation", "parentId": "shell", "order": 4, "role": "region", "purpose": "Move between records without losing list context.", "required": false, "componentIds": [ "previous-next-navigation" ], "alternatives": [], "content": { "required": [ "previous action", "next action", "position" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "select-record", "trigger": "User activates a list row.", "outcome": "Update selected state and load the corresponding detail.", "componentIds": [ "list-item", "loading-announcement" ] }, { "id": "return-to-list", "trigger": "Compact-mode user activates back.", "outcome": "Restore list position and focus to the previous row.", "componentIds": [ "back-button", "list-item" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "list" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "The collection has no records.", "presentation": "Explain the empty collection and offer the appropriate creation or filter reset action.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "navigation.current-location", "navigation.escape-back", "a11y.focus-return", "a11y.live-announcement" ], "references": [ "master-detail-view", "list", "list-item", "description-list", "page-header", "previous-next-navigation", "loading-announcement", "back-button", "skeleton", "error-state", "error-announcement", "empty-state" ] }, { "id": "data-management", "ja": "データ管理", "en": "Data management", "summary": "Dense record-management workspace with filtering, sorting, column control, selection, bulk actions, pagination, and safe detail editing.", "surfaces": [ "data-management", "admin" ], "tasks": [ "scan", "filter", "sort", "select", "bulk-update", "inspect-detail" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "tabular" ], "dataVolumes": [ "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "medium", "high" ], "capabilities": [ "search", "filter", "sort", "column-control", "bulk-actions", "pagination" ], "excludes": [ "marketing-cards" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "mobile-table", "question": "What compact representation preserves the required columns?", "options": [ "priority-column-list", "horizontal-component-scroll", "drill-in-cards" ] }, { "id": "bulk-scope", "question": "Does select-all apply to the page or all filtered results?", "options": [ "current-page", "all-filtered" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide stable application navigation around the data task.", "required": true, "componentIds": [ "sidebar-layout" ], "alternatives": [], "content": { "required": [ "application navigation", "data workspace" ] }, "responsive": { "compact": "Use drawer navigation and a list/detail data representation.", "wide": "Keep navigation and data workspace visible without page overflow." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the data set and expose the primary creation action.", "required": true, "componentIds": [ "page-header", "primary-button" ], "alternatives": [], "content": { "required": [ "dataset title", "record count", "primary action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "controls", "parentId": "shell", "order": 3, "role": "region", "purpose": "Constrain, search, sort, and configure visible data.", "required": true, "componentIds": [ "search-input", "filter-bar", "sort-menu", "column-picker" ], "alternatives": [], "content": { "required": [ "query", "active filters", "sort", "visible columns" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "data", "parentId": "shell", "order": 4, "role": "region", "purpose": "Display records with explicit headers, row identity, and selection.", "required": true, "componentIds": [ "data-grid" ], "alternatives": [ "table", "list" ], "content": { "required": [ "column headers", "rows", "selection state", "row actions" ] }, "responsive": { "compact": "Transform to priority-column rows and drill-in detail; do not shrink all columns illegibly.", "wide": "Use a table/grid with sticky headers only when focus and reading order remain valid." } }, { "id": "bulk", "parentId": "shell", "order": 5, "role": "region", "purpose": "Expose actions only after selection and state their scope.", "required": false, "componentIds": [ "bulk-action-bar" ], "alternatives": [], "content": { "required": [ "selected count", "selection scope", "safe bulk actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "continuation", "parentId": "shell", "order": 6, "role": "region", "purpose": "Move through large results while preserving query state.", "required": true, "componentIds": [ "pagination" ], "alternatives": [], "content": { "required": [ "current page", "total or continuation", "page size if needed" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "filter-data", "trigger": "User changes a data constraint.", "outcome": "Refresh rows and count while preserving controls and URL state.", "componentIds": [ "filter-bar", "loading-announcement" ] }, { "id": "bulk-action", "trigger": "User selects records and starts a bulk mutation.", "outcome": "Confirm scope, execute safely, report partial failure, and preserve recoverable selection.", "componentIds": [ "bulk-action-bar", "alert-dialog", "snackbar" ] }, { "id": "inspect-record", "trigger": "User activates a row.", "outcome": "Open adjacent or routed detail with return context.", "componentIds": [ "data-grid", "master-detail-view" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No records exist or match the current constraints.", "presentation": "Distinguish an empty dataset from no matching results and offer the correct action.", "componentIds": [ "empty-state", "no-results" ], "recoveryAction": "Create a record or clear the active constraints.", "required": true }, { "id": "success", "trigger": "A mutation completes.", "presentation": "Report affected record count and offer undo when safe.", "componentIds": [ "snackbar" ], "recoveryAction": "Undo the reversible mutation.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "data.bulk-safety", "action.destructive-confirmation", "a11y.live-announcement", "content.truncation" ], "references": [ "sidebar-layout", "page-header", "primary-button", "search-input", "filter-bar", "sort-menu", "column-picker", "data-grid", "table", "list", "bulk-action-bar", "pagination", "loading-announcement", "alert-dialog", "snackbar", "master-detail-view", "skeleton", "error-state", "error-announcement", "empty-state", "no-results" ] }, { "id": "create-edit-form", "ja": "作成・編集フォーム", "en": "Create and edit form", "summary": "Task form with grouped fields, persistent labels, validation, unsaved-change handling, and an explicit save/cancel model.", "surfaces": [ "form", "editor" ], "tasks": [ "create", "edit", "validate", "save", "cancel" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "form" ], "dataVolumes": [ "low", "medium" ], "navigationDepths": [ "application", "standalone" ], "riskLevels": [ "medium", "high" ], "capabilities": [ "validation", "save", "cancel" ], "excludes": [ "single-inline-edit" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "save-model", "question": "Is persistence explicit, automatic, or draft-based?", "options": [ "explicit-save", "autosave", "draft" ] }, { "id": "validation-model", "question": "When is each validation rule evaluated?", "options": [ "on-blur", "on-submit", "server-confirmed" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide a focused form task and stable return path.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "form header", "form", "actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the object and distinguish create from edit.", "required": true, "componentIds": [ "page-header" ], "alternatives": [], "content": { "required": [ "task title", "object identity", "return action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "errors", "parentId": "shell", "order": 3, "role": "region", "purpose": "Summarize submission errors before the form.", "required": false, "componentIds": [ "error-summary" ], "alternatives": [], "content": { "required": [ "error count", "links to invalid fields" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "form", "parentId": "shell", "order": 4, "role": "region", "purpose": "Group related fields and preserve labels, help, values, and errors.", "required": true, "componentIds": [ "fieldset", "form-field" ], "alternatives": [], "content": { "required": [ "legend", "visible labels", "inputs", "help and errors" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "actions", "parentId": "shell", "order": 5, "role": "region", "purpose": "Make save and cancel consequences explicit.", "required": true, "componentIds": [ "primary-button", "secondary-button", "unsaved-changes" ], "alternatives": [], "content": { "required": [ "save action", "cancel/back action", "dirty state" ] }, "responsive": { "compact": "Keep actions reachable after the final field without covering the software keyboard.", "wide": "Align actions with the form content rather than the viewport edge." } } ], "flows": [ { "id": "submit-form", "trigger": "User activates save.", "outcome": "Validate, focus the first error or persist and show the next step.", "componentIds": [ "primary-button", "error-summary", "success-state" ] }, { "id": "leave-dirty", "trigger": "User leaves with unsaved changes.", "outcome": "Preserve draft or confirm discard according to the declared save model.", "componentIds": [ "unsaved-changes", "alert-dialog" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "The object is saved.", "presentation": "Confirm the object identity and expose the intended next action.", "componentIds": [ "success-state" ], "recoveryAction": "View the saved object or continue editing.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "form.visible-label", "form.error-summary", "form.preserve-input", "state.success-next-step", "action.destructive-confirmation", "a11y.live-announcement", "privacy.minimum-data" ], "references": [ "container", "page-header", "error-summary", "fieldset", "form-field", "primary-button", "secondary-button", "unsaved-changes", "success-state", "alert-dialog", "skeleton", "loading-announcement", "error-state", "error-announcement" ] }, { "id": "search-and-results", "ja": "検索と結果", "en": "Search and results", "summary": "Search task with query ownership, refinements, sort, result context, no-results recovery, and preserved back navigation.", "surfaces": [ "search" ], "tasks": [ "query", "refine", "compare-results", "open-result" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "results", "cards", "list" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application", "website" ], "riskLevels": [ "low" ], "capabilities": [ "search", "filter", "sort", "pagination" ], "excludes": [ "command-execution" ], "noEmptyState": false, "inlineSuccess": true }, "requiredDecisions": [ { "id": "query-submit", "question": "Does search submit explicitly or update after a delay?", "options": [ "explicit-submit", "debounced" ] }, { "id": "filter-location", "question": "How are refinements exposed in compact mode?", "options": [ "inline", "filter-sheet" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Own the query, refinement, and results context.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "query", "results summary", "results" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "query", "parentId": "shell", "order": 2, "role": "region", "purpose": "Collect and preserve the search query.", "required": true, "componentIds": [ "search-input", "primary-button" ], "alternatives": [], "content": { "required": [ "search label", "query", "submit or update behavior" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "refinements", "parentId": "shell", "order": 3, "role": "region", "purpose": "Expose filters, active constraints, and sort.", "required": true, "componentIds": [ "filter-bar", "sort-menu" ], "alternatives": [], "content": { "required": [ "available filters", "active filters", "clear action", "sort" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "summary", "parentId": "shell", "order": 4, "role": "region", "purpose": "State what was searched and how many results are shown.", "required": true, "componentIds": [ "heading", "body-text" ], "alternatives": [], "content": { "required": [ "query summary", "result count", "correction if applied" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "results", "parentId": "shell", "order": 5, "role": "region", "purpose": "Present scannable result identity and matching context.", "required": true, "componentIds": [ "search-results", "list" ], "alternatives": [ "card-grid" ], "content": { "required": [ "result title", "snippet or attributes", "destination" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "continuation", "parentId": "shell", "order": 6, "role": "region", "purpose": "Continue results without losing query and filters.", "required": true, "componentIds": [ "pagination" ], "alternatives": [], "content": { "required": [ "current position", "next or page actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "submit-query", "trigger": "User submits or commits a query.", "outcome": "Update URL/state, announce loading, and replace the result context.", "componentIds": [ "search-input", "loading-announcement" ] }, { "id": "open-result", "trigger": "User opens a result.", "outcome": "Navigate to detail while preserving query, filters, and return position.", "componentIds": [ "search-results", "link" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "search-input" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No result matches the query and filters.", "presentation": "Repeat the query, show active filters, and offer spelling/filter recovery without inventing results.", "componentIds": [ "no-results" ], "recoveryAction": "Edit the query or clear selected filters.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "navigation.current-location", "a11y.live-announcement" ], "references": [ "container", "search-input", "primary-button", "filter-bar", "sort-menu", "heading", "body-text", "search-results", "list", "card-grid", "pagination", "loading-announcement", "link", "skeleton", "error-state", "error-announcement", "no-results" ] }, { "id": "checkout", "ja": "購入手続き", "en": "Checkout", "summary": "Transactional checkout with progress, cart review, address, delivery, payment, final total, and recoverable validation.", "surfaces": [ "commerce", "checkout" ], "tasks": [ "review-order", "enter-address", "choose-shipping", "pay" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "form", "order" ], "dataVolumes": [ "medium" ], "navigationDepths": [ "transaction" ], "riskLevels": [ "high" ], "capabilities": [ "multi-step", "address", "shipping", "payment", "confirmation" ], "excludes": [ "one-click-free-action" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "step-model", "question": "Is checkout one page or multiple explicit steps?", "options": [ "single-page", "multi-step" ] }, { "id": "payment-commit", "question": "At which action is payment actually authorized?", "options": [ "review-then-pay", "pay-on-submit" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Keep purchase context and progress stable.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "checkout progress", "current step", "order summary" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "progress", "parentId": "shell", "order": 2, "role": "navigation", "purpose": "Expose current and completed checkout steps.", "required": true, "componentIds": [ "checkout-stepper" ], "alternatives": [], "content": { "required": [ "step names", "current step", "completed state" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "order", "parentId": "shell", "order": 3, "role": "region", "purpose": "Keep line items and price changes reviewable.", "required": true, "componentIds": [ "order-summary", "cart-item" ], "alternatives": [], "content": { "required": [ "items", "quantity", "subtotal", "discounts", "fees", "total" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "fulfillment", "parentId": "shell", "order": 4, "role": "region", "purpose": "Collect address and shipping choice.", "required": true, "componentIds": [ "address-form", "shipping-method" ], "alternatives": [], "content": { "required": [ "visible address labels", "shipping price", "delivery estimate" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "payment", "parentId": "shell", "order": 5, "role": "region", "purpose": "Collect or select a verified payment method.", "required": true, "componentIds": [ "payment-method" ], "alternatives": [], "content": { "required": [ "payment method", "billing implication", "security context" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "commit", "parentId": "shell", "order": 6, "role": "region", "purpose": "Show final total and the action that commits payment.", "required": true, "componentIds": [ "price-display", "primary-button" ], "alternatives": [], "content": { "required": [ "final total", "currency", "recurrence if any", "pay action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "advance-step", "trigger": "Current step validates successfully.", "outcome": "Persist valid values and move to the next named step.", "componentIds": [ "checkout-stepper", "primary-button" ] }, { "id": "commit-order", "trigger": "User activates the final purchase action.", "outcome": "Prevent duplicate submission, authorize once, and show durable confirmation.", "componentIds": [ "primary-button", "loading-overlay", "success-state" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "checkout-stepper" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "Order and payment complete.", "presentation": "Show order identity, amount, delivery next step, and durable receipt access.", "componentIds": [ "success-state", "order-summary" ], "recoveryAction": "Open order details or return to shopping.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "form.visible-label", "form.error-summary", "form.preserve-input", "state.success-next-step", "commerce.total-disclosure", "privacy.minimum-data", "a11y.live-announcement" ], "references": [ "container", "checkout-stepper", "order-summary", "cart-item", "address-form", "shipping-method", "payment-method", "price-display", "primary-button", "loading-overlay", "success-state", "skeleton", "loading-announcement", "error-state", "error-announcement" ] }, { "id": "pricing-and-upgrade", "ja": "料金・アップグレード", "en": "Pricing and upgrade", "summary": "Plan comparison that makes price, recurrence, included limits, current plan, and upgrade consequence explicit.", "surfaces": [ "commerce", "pricing" ], "tasks": [ "compare-plans", "understand-terms", "upgrade" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "comparison" ], "dataVolumes": [ "low", "medium" ], "navigationDepths": [ "website", "account" ], "riskLevels": [ "high" ], "capabilities": [ "plan-comparison", "current-plan", "purchase" ], "excludes": [ "unpriced-contact-sales-only" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "billing-period", "question": "Which billing periods can be selected?", "options": [ "monthly", "annual", "both" ] }, { "id": "upgrade-effect", "question": "When does an upgrade or downgrade take effect?", "options": [ "immediate", "next-renewal", "prorated" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide trustworthy pricing context and comparison.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "pricing heading", "billing period", "plans", "terms" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "State the product value and billing context without hiding terms.", "required": true, "componentIds": [ "page-header", "segmented-control" ], "alternatives": [], "content": { "required": [ "pricing title", "billing-period control", "currency context" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "plans", "parentId": "shell", "order": 3, "role": "region", "purpose": "Compare plans using the same feature and price structure.", "required": true, "componentIds": [ "pricing-table", "pricing-card" ], "alternatives": [], "content": { "required": [ "plan name", "price", "billing period", "included limits", "action" ] }, "responsive": { "compact": "Stack cards but preserve a feature comparison path.", "wide": "Align comparable features and totals across plans." } }, { "id": "current", "parentId": "shell", "order": 4, "role": "region", "purpose": "Identify current subscription and transition effect.", "required": false, "componentIds": [ "subscription-status" ], "alternatives": [], "content": { "required": [ "current plan", "renewal date", "change timing" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "terms", "parentId": "shell", "order": 5, "role": "region", "purpose": "Expose material billing and cancellation terms.", "required": true, "componentIds": [ "callout", "accordion" ], "alternatives": [], "content": { "required": [ "tax or fee note", "renewal", "cancellation", "refund policy link" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "change-period", "trigger": "User switches billing period.", "outcome": "Update every displayed price and period label consistently.", "componentIds": [ "segmented-control", "price-display" ] }, { "id": "choose-plan", "trigger": "User chooses a different plan.", "outcome": "Show final total and transition effect before payment confirmation.", "componentIds": [ "pricing-card", "primary-button", "order-summary" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "Subscription change completes.", "presentation": "Show the active plan, charge, and effective/renewal date.", "componentIds": [ "success-state", "subscription-status" ], "recoveryAction": "Open billing details.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.success-next-step", "commerce.total-disclosure", "a11y.live-announcement" ], "references": [ "container", "page-header", "segmented-control", "pricing-table", "pricing-card", "subscription-status", "callout", "accordion", "price-display", "primary-button", "order-summary", "skeleton", "loading-announcement", "error-state", "error-announcement", "success-state" ] }, { "id": "onboarding", "ja": "オンボーディング", "en": "Onboarding", "summary": "Short, skippable setup flow that asks only for decisions needed to reach first value and preserves progress.", "surfaces": [ "onboarding", "setup" ], "tasks": [ "learn-value", "configure-minimum", "reach-first-value" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "steps", "form" ], "dataVolumes": [ "low" ], "navigationDepths": [ "standalone" ], "riskLevels": [ "low", "medium" ], "capabilities": [ "progress", "skip", "resume" ], "excludes": [ "mandatory-legal-consent-only" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "required-steps", "question": "Which steps are truly required before first value?", "options": [ "none", "profile", "permissions", "workspace" ] }, { "id": "skip-policy", "question": "Which steps may be skipped and resumed?", "options": [ "all-optional", "selected-optional", "none" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Focus on one setup decision at a time.", "required": true, "componentIds": [ "center-layout" ], "alternatives": [], "content": { "required": [ "current step", "setup content", "navigation" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "progress", "parentId": "shell", "order": 2, "role": "navigation", "purpose": "Show position without exaggerating completion.", "required": true, "componentIds": [ "onboarding-pagination", "stepper" ], "alternatives": [], "content": { "required": [ "current step", "total required steps" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "content", "parentId": "shell", "order": 3, "role": "region", "purpose": "Explain why the current input or permission creates value.", "required": true, "componentIds": [ "heading", "body-text", "form-field" ], "alternatives": [], "content": { "required": [ "step title", "benefit explanation", "required input" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "actions", "parentId": "shell", "order": 4, "role": "region", "purpose": "Continue, go back, or skip according to policy.", "required": true, "componentIds": [ "primary-button", "secondary-button", "link" ], "alternatives": [], "content": { "required": [ "continue action", "back action", "skip if allowed" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "continue-step", "trigger": "User completes or skips the current step.", "outcome": "Persist progress and move to the next required decision.", "componentIds": [ "primary-button", "onboarding-pagination" ] }, { "id": "finish-setup", "trigger": "All required decisions are complete.", "outcome": "Enter the product at a meaningful first-value destination.", "componentIds": [ "success-state" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "onboarding-pagination" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "Required setup completes.", "presentation": "Confirm setup and take the user to the first meaningful task.", "componentIds": [ "success-state" ], "recoveryAction": "Open the configured workspace.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "form.visible-label", "form.preserve-input", "state.success-next-step", "privacy.minimum-data", "navigation.current-location" ], "references": [ "center-layout", "onboarding-pagination", "stepper", "heading", "body-text", "form-field", "primary-button", "secondary-button", "link", "success-state", "skeleton", "loading-announcement", "error-state", "error-announcement" ] }, { "id": "chat", "ja": "チャット", "en": "Chat", "summary": "Conversation workspace with identity, thread history, message composition, send state, attachments, and resilient delivery feedback.", "surfaces": [ "communication", "chat" ], "tasks": [ "select-conversation", "read-messages", "compose", "send" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "conversation", "messages" ], "dataVolumes": [ "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "medium" ], "capabilities": [ "presence", "attachments", "delivery-state" ], "excludes": [ "public-feed" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "delivery-model", "question": "Which message delivery states are supported?", "options": [ "sending-sent-failed", "sent-read" ] }, { "id": "retention", "question": "What history and attachment retention applies?", "options": [ "persistent", "ephemeral", "policy-defined" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Coordinate conversation selection and active thread.", "required": true, "componentIds": [ "split-view" ], "alternatives": [], "content": { "required": [ "conversation list", "active thread" ] }, "responsive": { "compact": "Use list and thread as separate route states with back restoration.", "wide": "Show conversation list beside one active thread." } }, { "id": "conversations", "parentId": "shell", "order": 2, "role": "region", "purpose": "List conversations with identity and unread status.", "required": true, "componentIds": [ "contact-list", "inbox-row" ], "alternatives": [], "content": { "required": [ "participant identity", "last message", "time", "unread status" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "thread-header", "parentId": "shell", "order": 3, "role": "region", "purpose": "Identify participants and connection/presence context.", "required": true, "componentIds": [ "page-header", "presence-indicator" ], "alternatives": [], "content": { "required": [ "conversation identity", "presence", "available call or detail action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "messages", "parentId": "shell", "order": 4, "role": "region", "purpose": "Render ordered messages with sender and delivery context.", "required": true, "componentIds": [ "chat-thread", "chat-bubble", "read-receipt" ], "alternatives": [], "content": { "required": [ "sender", "message content", "timestamp", "delivery state" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "composer", "parentId": "shell", "order": 5, "role": "region", "purpose": "Compose and send text or supported attachments.", "required": true, "componentIds": [ "message-composer", "attachment-list" ], "alternatives": [], "content": { "required": [ "message label", "draft", "attachment status", "send action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "select-conversation", "trigger": "User selects a conversation.", "outcome": "Load the thread and restore its read position.", "componentIds": [ "inbox-row", "loading-announcement" ] }, { "id": "send-message", "trigger": "User sends a non-empty message.", "outcome": "Append optimistic state, preserve draft on failure, and update delivery status.", "componentIds": [ "message-composer", "connection-status", "error-announcement" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "contact-list" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No conversation is selected or available.", "presentation": "Distinguish no selection from no conversations and offer a safe start action.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true }, { "id": "success", "trigger": "Message delivery is confirmed.", "presentation": "Update delivery status without disruptive focus movement.", "componentIds": [ "read-receipt" ], "recoveryAction": "Continue the conversation.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "form.preserve-input", "a11y.live-announcement", "navigation.escape-back" ], "references": [ "split-view", "contact-list", "inbox-row", "page-header", "presence-indicator", "chat-thread", "chat-bubble", "read-receipt", "message-composer", "attachment-list", "loading-announcement", "connection-status", "error-announcement", "skeleton", "error-state", "empty-state" ] }, { "id": "inbox", "ja": "受信箱", "en": "Inbox", "summary": "Message or ticket inbox with query, status filters, scannable rows, active detail, and clear processing actions.", "surfaces": [ "communication", "inbox" ], "tasks": [ "triage", "filter", "read", "respond", "change-status" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "list", "messages" ], "dataVolumes": [ "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "medium" ], "capabilities": [ "search", "status-filter", "detail", "reply" ], "excludes": [ "realtime-chat-only" ], "noEmptyState": false, "inlineSuccess": true }, "requiredDecisions": [ { "id": "read-model", "question": "When is an item marked read?", "options": [ "on-open", "explicit" ] }, { "id": "status-model", "question": "Which states drive triage?", "options": [ "unread-read", "open-pending-closed", "custom" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Keep inbox context while processing one item.", "required": true, "componentIds": [ "master-detail-view" ], "alternatives": [], "content": { "required": [ "inbox list", "active message" ] }, "responsive": { "compact": "Use separate inbox and detail routes with preserved list position.", "wide": "Show list and detail adjacently." } }, { "id": "controls", "parentId": "shell", "order": 2, "role": "region", "purpose": "Search and filter by triage-relevant status.", "required": true, "componentIds": [ "search-input", "filter-bar", "sort-menu" ], "alternatives": [], "content": { "required": [ "query", "status filters", "sort" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "items", "parentId": "shell", "order": 3, "role": "region", "purpose": "Show sender, subject, recency, and status for each item.", "required": true, "componentIds": [ "inbox-row", "list" ], "alternatives": [], "content": { "required": [ "sender", "subject", "preview", "time", "status" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "detail", "parentId": "shell", "order": 4, "role": "region", "purpose": "Show the selected message and available processing actions.", "required": true, "componentIds": [ "markdown-content", "toolbar" ], "alternatives": [], "content": { "required": [ "message title", "sender", "content", "status actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "reply", "parentId": "shell", "order": 5, "role": "region", "purpose": "Compose a response without losing the message context.", "required": false, "componentIds": [ "message-composer" ], "alternatives": [], "content": { "required": [ "reply label", "draft", "send action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "open-item", "trigger": "User opens an inbox row.", "outcome": "Load detail, update read state according to policy, and preserve return focus.", "componentIds": [ "inbox-row", "loading-announcement" ] }, { "id": "send-reply", "trigger": "User sends a reply.", "outcome": "Preserve draft until success and report delivery state.", "componentIds": [ "message-composer", "success-state" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "search-input" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No inbox item matches the selected status or query.", "presentation": "Explain active filters and provide reset or first-message guidance.", "componentIds": [ "empty-state", "no-results" ], "recoveryAction": "Clear filters or choose another status.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "form.preserve-input", "navigation.current-location", "a11y.focus-return", "a11y.live-announcement" ], "references": [ "master-detail-view", "search-input", "filter-bar", "sort-menu", "inbox-row", "list", "markdown-content", "toolbar", "message-composer", "loading-announcement", "success-state", "skeleton", "error-state", "error-announcement", "empty-state", "no-results" ] }, { "id": "kanban-workspace", "ja": "カンバン作業空間", "en": "Kanban workspace", "summary": "Status-based work board with explicit column meaning, keyboard-operable movement, filters, saved views, and item detail.", "surfaces": [ "productivity", "kanban" ], "tasks": [ "scan-status", "filter", "move-item", "open-item" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "board", "cards" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "medium" ], "capabilities": [ "drag-or-command-move", "filter", "saved-view" ], "excludes": [ "strict-tabular-comparison" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "move-alternative", "question": "What non-drag method moves an item?", "options": [ "move-menu", "keyboard-shortcut", "detail-status-field" ] }, { "id": "compact-board", "question": "How does compact mode browse columns?", "options": [ "column-selector", "swipe-with-tabs", "list-grouped-by-status" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide board context and bounded column scrolling.", "required": true, "componentIds": [ "viewport-shell" ], "alternatives": [], "content": { "required": [ "board header", "controls", "board" ] }, "responsive": { "compact": "Use an explicit column selector or grouped list; do not require precision drag.", "wide": "Display columns with component-scoped horizontal scrolling only when needed." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the board and expose creation.", "required": true, "componentIds": [ "page-header", "primary-button" ], "alternatives": [], "content": { "required": [ "board title", "scope", "create item action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "controls", "parentId": "shell", "order": 3, "role": "region", "purpose": "Filter and restore meaningful board views.", "required": true, "componentIds": [ "filter-bar", "saved-view" ], "alternatives": [], "content": { "required": [ "active filters", "saved view", "clear action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "board", "parentId": "shell", "order": 4, "role": "region", "purpose": "Show status columns and ordered work items.", "required": true, "componentIds": [ "kanban-board", "kanban-card" ], "alternatives": [], "content": { "required": [ "column name", "item identity", "priority", "assignee", "move affordance" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "detail", "parentId": "shell", "order": 5, "role": "region", "purpose": "Inspect and edit one work item.", "required": false, "componentIds": [ "sheet", "form-field" ], "alternatives": [], "content": { "required": [ "item title", "status", "details", "save state" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "move-item", "trigger": "User drags or invokes a move command.", "outcome": "Announce source and destination, persist once, and restore on failure.", "componentIds": [ "kanban-card", "action-menu", "error-announcement" ] }, { "id": "open-item", "trigger": "User activates a card.", "outcome": "Open item detail and return focus to the card after close.", "componentIds": [ "kanban-card", "sheet" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "The board has no items or a column is empty.", "presentation": "Explain the scope and provide a context-appropriate create or filter reset action.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true }, { "id": "success", "trigger": "An item move or edit persists.", "presentation": "Announce the new status without stealing focus.", "componentIds": [ "snackbar" ], "recoveryAction": "Undo the move when supported.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "navigation.escape-back", "a11y.focus-return", "a11y.live-announcement" ], "references": [ "viewport-shell", "page-header", "primary-button", "filter-bar", "saved-view", "kanban-board", "kanban-card", "sheet", "form-field", "action-menu", "error-announcement", "skeleton", "loading-announcement", "error-state", "empty-state", "snackbar" ] }, { "id": "schedule-workspace", "ja": "予定管理", "en": "Schedule workspace", "summary": "Calendar and schedule workspace with date navigation, range/view controls, event selection, creation, and timezone disclosure.", "surfaces": [ "productivity", "schedule" ], "tasks": [ "navigate-date", "scan-availability", "open-event", "create-event" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "calendar", "time-grid" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "medium" ], "capabilities": [ "date-navigation", "view-switch", "event-editor" ], "excludes": [ "single-date-input" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "time-zone", "question": "Which timezone owns displayed and entered times?", "options": [ "user-local", "event-zone", "workspace-zone" ] }, { "id": "compact-view", "question": "Which compact view preserves the primary scheduling task?", "options": [ "agenda-list", "day-grid", "three-day-grid" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Coordinate date context, schedule view, and event detail.", "required": true, "componentIds": [ "viewport-shell" ], "alternatives": [], "content": { "required": [ "schedule header", "view controls", "schedule" ] }, "responsive": { "compact": "Use agenda or day view with explicit date navigation.", "wide": "Use week/month grid only when labels and events remain readable." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the schedule, current range, and timezone.", "required": true, "componentIds": [ "page-header", "date-range-picker" ], "alternatives": [], "content": { "required": [ "schedule title", "current range", "timezone" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "controls", "parentId": "shell", "order": 3, "role": "region", "purpose": "Change view and move to a known date.", "required": true, "componentIds": [ "segmented-control", "date-picker" ], "alternatives": [], "content": { "required": [ "view choice", "today action", "date navigation" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "schedule", "parentId": "shell", "order": 4, "role": "region", "purpose": "Present events in a time or calendar structure.", "required": true, "componentIds": [ "schedule-grid", "calendar", "calendar-event" ], "alternatives": [], "content": { "required": [ "date headers", "time labels", "event title", "event time" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "event", "parentId": "shell", "order": 5, "role": "region", "purpose": "Create or edit event details.", "required": false, "componentIds": [ "dialog", "form-field" ], "alternatives": [], "content": { "required": [ "event title", "start/end", "timezone", "save/cancel" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "change-date", "trigger": "User moves to another date or range.", "outcome": "Update the heading and schedule while preserving view mode.", "componentIds": [ "date-picker", "loading-announcement" ] }, { "id": "edit-event", "trigger": "User opens or creates an event.", "outcome": "Open labelled editor, validate time order, and restore focus on close.", "componentIds": [ "calendar-event", "dialog" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "The selected date range has no events.", "presentation": "Show the empty range and offer event creation when permitted.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true }, { "id": "success", "trigger": "An event is saved.", "presentation": "Show the event in context and announce its date/time.", "componentIds": [ "snackbar" ], "recoveryAction": "Open the saved event or undo when supported.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "form.visible-label", "navigation.escape-back", "a11y.focus-return", "a11y.live-announcement" ], "references": [ "viewport-shell", "page-header", "date-range-picker", "segmented-control", "date-picker", "schedule-grid", "calendar", "calendar-event", "dialog", "form-field", "loading-announcement", "skeleton", "error-state", "error-announcement", "empty-state", "snackbar" ] }, { "id": "file-workspace", "ja": "ファイル作業空間", "en": "File workspace", "summary": "Hierarchical file browser with path context, search, selection, upload progress, preview, and safe destructive operations.", "surfaces": [ "productivity", "files" ], "tasks": [ "navigate-folders", "search-files", "upload", "preview", "manage-files" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "tree", "files" ], "dataVolumes": [ "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "high" ], "capabilities": [ "hierarchy", "search", "upload", "preview", "bulk-actions" ], "excludes": [ "single-file-input" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "selection-model", "question": "Can users select one or many files?", "options": [ "single", "multiple" ] }, { "id": "upload-conflict", "question": "How are name conflicts resolved?", "options": [ "ask", "replace", "keep-both" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Coordinate hierarchy, file list, and optional preview.", "required": true, "componentIds": [ "sidebar-layout" ], "alternatives": [], "content": { "required": [ "folder navigation", "file area" ] }, "responsive": { "compact": "Use folder drill-in and routed preview; keep upload status globally reachable.", "wide": "Show hierarchy beside file list and optional inspector." } }, { "id": "path", "parentId": "shell", "order": 2, "role": "region", "purpose": "Expose current folder and return hierarchy.", "required": true, "componentIds": [ "breadcrumbs", "page-header" ], "alternatives": [], "content": { "required": [ "current path", "folder title", "primary upload action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "navigation", "parentId": "shell", "order": 3, "role": "navigation", "purpose": "Navigate the folder hierarchy.", "required": true, "componentIds": [ "tree-navigation" ], "alternatives": [], "content": { "required": [ "folder names", "expanded state", "current folder" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "controls", "parentId": "shell", "order": 4, "role": "region", "purpose": "Search, sort, and choose visible file attributes.", "required": true, "componentIds": [ "search-input", "sort-menu", "column-picker" ], "alternatives": [], "content": { "required": [ "query", "sort", "visible columns" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "files", "parentId": "shell", "order": 5, "role": "region", "purpose": "Show file identity, type, size, modification, and selection.", "required": true, "componentIds": [ "file-explorer", "file-card" ], "alternatives": [], "content": { "required": [ "file name", "type", "size", "modified time", "selection" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "uploads", "parentId": "shell", "order": 6, "role": "region", "purpose": "Track upload progress and recover individual failures.", "required": false, "componentIds": [ "upload-queue", "progress-bar" ], "alternatives": [], "content": { "required": [ "file name", "progress", "status", "cancel/retry" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "preview", "parentId": "shell", "order": 7, "role": "region", "purpose": "Preview or inspect the selected file without hiding its identity.", "required": false, "componentIds": [ "inspector-panel" ], "alternatives": [ "lightbox" ], "content": { "required": [ "file identity", "preview", "metadata", "actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "navigate-folder", "trigger": "User opens a folder.", "outcome": "Update path and file list while preserving tree state.", "componentIds": [ "tree-navigation", "breadcrumbs" ] }, { "id": "upload-files", "trigger": "User selects or drops files.", "outcome": "Queue files, expose per-file progress, and retain failed items for retry.", "componentIds": [ "drop-zone", "upload-queue" ] }, { "id": "delete-file", "trigger": "User starts deletion.", "outcome": "State scope and consequence, confirm, then report result.", "componentIds": [ "destructive-button", "alert-dialog" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "breadcrumbs" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "The folder is empty or filters match no files.", "presentation": "Distinguish empty folder from no matches and show upload/reset action.", "componentIds": [ "empty-state", "no-results" ], "recoveryAction": "Upload files or clear the query.", "required": true }, { "id": "success", "trigger": "Upload or mutation completes.", "presentation": "Report affected files and preserve the current path.", "componentIds": [ "snackbar" ], "recoveryAction": "Open uploaded files or undo a reversible action.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "data.bulk-safety", "action.destructive-confirmation", "navigation.current-location", "a11y.live-announcement" ], "references": [ "sidebar-layout", "breadcrumbs", "page-header", "tree-navigation", "search-input", "sort-menu", "column-picker", "file-explorer", "file-card", "upload-queue", "progress-bar", "inspector-panel", "lightbox", "drop-zone", "destructive-button", "alert-dialog", "skeleton", "loading-announcement", "error-state", "error-announcement", "empty-state", "no-results", "snackbar" ] }, { "id": "profile", "ja": "プロフィール", "en": "Profile", "summary": "Identity-focused profile with summary, attributes, activity, ownership-sensitive actions, and a separate editing flow.", "surfaces": [ "account", "profile" ], "tasks": [ "view-identity", "review-attributes", "view-activity", "edit-own-profile" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "profile", "activity" ], "dataVolumes": [ "low", "medium" ], "navigationDepths": [ "application", "website" ], "riskLevels": [ "medium" ], "capabilities": [ "identity", "activity", "edit-if-owner" ], "excludes": [ "settings-workspace" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "visibility", "question": "Which fields are public, private, or owner-only?", "options": [ "public", "signed-in", "owner-only" ] }, { "id": "ownership", "question": "Which actions appear for the owner versus another viewer?", "options": [ "owner-edit", "viewer-contact", "admin-manage" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Present identity and related content in a stable reading order.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "profile summary", "profile sections" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "identity", "parentId": "shell", "order": 2, "role": "region", "purpose": "Show the person or organization identity and permitted actions.", "required": true, "componentIds": [ "user-profile-card", "avatar", "status-badge" ], "alternatives": [], "content": { "required": [ "name", "image or initials", "role/status", "owner-aware action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "details", "parentId": "shell", "order": 3, "role": "region", "purpose": "Show labelled profile attributes without exposing private data.", "required": true, "componentIds": [ "description-list" ], "alternatives": [], "content": { "required": [ "attribute labels", "permitted values" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "sections", "parentId": "shell", "order": 4, "role": "region", "purpose": "Switch among profile content types when needed.", "required": false, "componentIds": [ "tab-bar" ], "alternatives": [], "content": { "required": [ "section names", "selected section" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "activity", "parentId": "shell", "order": 5, "role": "region", "purpose": "Show relevant recent activity or authored content.", "required": true, "componentIds": [ "activity-feed" ], "alternatives": [], "content": { "required": [ "event identity", "time", "destination" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "edit", "parentId": "shell", "order": 6, "role": "region", "purpose": "Edit owner-visible fields in a separate validated task.", "required": false, "componentIds": [ "profile-editor" ], "alternatives": [], "content": { "required": [ "visible labels", "current values", "save/cancel" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "switch-section", "trigger": "User activates a profile tab.", "outcome": "Update the selected section and its accessible name.", "componentIds": [ "tab-bar" ] }, { "id": "edit-profile", "trigger": "Owner activates edit.", "outcome": "Open the editor with current values and return to updated profile after save.", "componentIds": [ "profile-editor", "success-state" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "user-profile-card" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "The selected activity section has no items.", "presentation": "Explain the empty section without implying the profile is missing.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true }, { "id": "success", "trigger": "Profile changes are saved.", "presentation": "Return to the profile and announce the saved state.", "componentIds": [ "success-state" ], "recoveryAction": "Continue viewing the profile.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "form.visible-label", "form.preserve-input", "privacy.minimum-data", "a11y.live-announcement" ], "references": [ "container", "user-profile-card", "avatar", "status-badge", "description-list", "tab-bar", "activity-feed", "profile-editor", "success-state", "skeleton", "loading-announcement", "error-state", "error-announcement", "empty-state" ] }, { "id": "content-feed", "ja": "コンテンツフィード", "en": "Content feed", "summary": "Chronological or ranked feed with source identity, stable item actions, continuation, refresh, and an explicit end or retry state.", "surfaces": [ "content", "feed" ], "tasks": [ "scan", "open-item", "react-or-save", "continue" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "feed", "cards" ], "dataVolumes": [ "high" ], "navigationDepths": [ "application", "website" ], "riskLevels": [ "low", "medium" ], "capabilities": [ "refresh", "continuation", "item-actions" ], "excludes": [ "tabular-management" ], "noEmptyState": false, "inlineSuccess": true }, "requiredDecisions": [ { "id": "ordering", "question": "How is feed order explained?", "options": [ "chronological", "ranked", "mixed" ] }, { "id": "continuation", "question": "How does the feed continue?", "options": [ "load-more", "infinite-with-landmarks", "pagination" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide feed identity, optional composition, and ordered items.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "feed header", "feed items" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name the feed and disclose non-chronological ordering when relevant.", "required": true, "componentIds": [ "page-header", "sort-menu" ], "alternatives": [], "content": { "required": [ "feed title", "ordering context" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "composer", "parentId": "shell", "order": 3, "role": "region", "purpose": "Create content only when creation is a primary feed task.", "required": false, "componentIds": [ "message-composer" ], "alternatives": [], "content": { "required": [ "composer label", "draft", "publish action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "items", "parentId": "shell", "order": 4, "role": "region", "purpose": "Show ordered content with source, time, body, and stable actions.", "required": true, "componentIds": [ "feed", "activity-feed", "card" ], "alternatives": [], "content": { "required": [ "source identity", "timestamp", "content", "item actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "continuation", "parentId": "shell", "order": 5, "role": "region", "purpose": "Continue or end the feed with a keyboard-reachable control.", "required": true, "componentIds": [ "primary-button" ], "alternatives": [ "pagination" ], "content": { "required": [ "load-more or next action", "end state" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "refresh-feed", "trigger": "User refreshes or changes ordering.", "outcome": "Preserve reading position when possible and announce new item count.", "componentIds": [ "pull-to-refresh", "loading-announcement" ] }, { "id": "continue-feed", "trigger": "User requests more items.", "outcome": "Append items without moving focus or duplicating records.", "componentIds": [ "primary-button", "feed" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "The feed has no items in the current scope.", "presentation": "Explain the scope and offer follow/create/discover actions only when permitted.", "componentIds": [ "empty-state" ], "recoveryAction": null, "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "content.truncation", "a11y.live-announcement", "navigation.current-location" ], "references": [ "container", "page-header", "sort-menu", "message-composer", "feed", "activity-feed", "card", "primary-button", "pagination", "pull-to-refresh", "loading-announcement", "skeleton", "error-state", "error-announcement", "empty-state" ] }, { "id": "product-detail", "ja": "商品詳細", "en": "Product detail", "summary": "Commerce detail page with media, identity, price, variant and quantity selection, availability, cart action, and review context.", "surfaces": [ "commerce", "product" ], "tasks": [ "inspect-product", "choose-variant", "choose-quantity", "add-to-cart" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "product", "media", "reviews" ], "dataVolumes": [ "medium" ], "navigationDepths": [ "website", "application" ], "riskLevels": [ "high" ], "capabilities": [ "gallery", "variants", "quantity", "cart" ], "excludes": [ "service-without-variants" ], "noEmptyState": true, "inlineSuccess": false }, "requiredDecisions": [ { "id": "variant-validity", "question": "Which variant combinations are selectable and available?", "options": [ "single-dimension", "multi-dimension" ] }, { "id": "cart-feedback", "question": "How is successful cart addition confirmed?", "options": [ "inline", "mini-cart", "snackbar" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Keep product identity and purchase context stable.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "breadcrumb", "product media", "purchase information" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "path", "parentId": "shell", "order": 2, "role": "navigation", "purpose": "Expose category/product location and return path.", "required": true, "componentIds": [ "breadcrumbs" ], "alternatives": [], "content": { "required": [ "category path", "current product" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "media", "parentId": "shell", "order": 3, "role": "region", "purpose": "Show product media with text alternatives and predictable zoom.", "required": true, "componentIds": [ "product-gallery" ], "alternatives": [], "content": { "required": [ "primary image", "thumbnails", "alternative text" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "purchase", "parentId": "shell", "order": 4, "role": "region", "purpose": "Show product identity, price, availability, choices, and cart action.", "required": true, "componentIds": [ "heading", "price-display", "variant-selector", "quantity-stepper", "add-to-cart" ], "alternatives": [], "content": { "required": [ "product name", "price and currency", "availability", "variant labels", "quantity", "cart action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "details", "parentId": "shell", "order": 5, "role": "region", "purpose": "Explain product facts and policies.", "required": true, "componentIds": [ "accordion", "description-list" ], "alternatives": [], "content": { "required": [ "description", "specifications", "shipping/returns" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "reviews", "parentId": "shell", "order": 6, "role": "region", "purpose": "Summarize and expose review evidence.", "required": false, "componentIds": [ "review-summary", "comment-thread" ], "alternatives": [], "content": { "required": [ "rating distribution", "review count", "review content" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "cart-feedback", "parentId": "shell", "order": 7, "role": "region", "purpose": "Confirm cart state without hiding the product context.", "required": false, "componentIds": [ "mini-cart" ], "alternatives": [ "snackbar" ], "content": { "required": [ "added item", "quantity", "cart total", "continue/checkout actions" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "select-variant", "trigger": "User changes a variant.", "outcome": "Update availability, media, price, and valid choices together.", "componentIds": [ "variant-selector", "price-display" ] }, { "id": "add-cart", "trigger": "User activates add to cart with valid choices.", "outcome": "Update cart once and expose confirmation and next actions.", "componentIds": [ "add-to-cart", "mini-cart", "loading-announcement" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "breadcrumbs" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "success", "trigger": "The selected item is added to cart.", "presentation": "Confirm item, variant, quantity, and updated cart state.", "componentIds": [ "snackbar", "mini-cart" ], "recoveryAction": "View cart, checkout, or continue shopping.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.success-next-step", "commerce.total-disclosure", "form.visible-label", "a11y.live-announcement" ], "references": [ "container", "breadcrumbs", "product-gallery", "heading", "price-display", "variant-selector", "quantity-stepper", "add-to-cart", "accordion", "description-list", "review-summary", "comment-thread", "mini-cart", "snackbar", "loading-announcement", "skeleton", "error-state", "error-announcement" ] }, { "id": "notification-center", "ja": "通知センター", "en": "Notification center", "summary": "Notification history with unread state, grouping, filtering, mark actions, stable destinations, and preference access.", "surfaces": [ "feedback", "notifications" ], "tasks": [ "scan-notifications", "filter", "mark-read", "open-destination" ], "formFactors": [ "responsive", "compact", "wide" ], "targets": [ "react", "html", "native", "compose", "swiftui", "winui", "flutter" ], "fit": { "dataShapes": [ "notifications", "timeline" ], "dataVolumes": [ "medium", "high" ], "navigationDepths": [ "application" ], "riskLevels": [ "low", "medium" ], "capabilities": [ "unread-state", "grouping", "mark-read", "preferences" ], "excludes": [ "single-transient-toast" ], "noEmptyState": false, "inlineSuccess": false }, "requiredDecisions": [ { "id": "read-model", "question": "When is a notification marked read?", "options": [ "on-open", "explicit", "on-visible" ] }, { "id": "retention", "question": "How long is notification history retained?", "options": [ "fixed-window", "user-managed", "policy-defined" ] } ], "regions": [ { "id": "shell", "parentId": null, "order": 1, "role": "main", "purpose": "Provide notification history and controls.", "required": true, "componentIds": [ "container" ], "alternatives": [], "content": { "required": [ "notification header", "controls", "notification list" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "header", "parentId": "shell", "order": 2, "role": "region", "purpose": "Name notifications and expose preference access.", "required": true, "componentIds": [ "page-header", "settings-list" ], "alternatives": [], "content": { "required": [ "title", "unread count", "preference action" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "controls", "parentId": "shell", "order": 3, "role": "region", "purpose": "Filter status/type and expose mark-all scope.", "required": true, "componentIds": [ "segmented-control", "filter-bar", "button-group" ], "alternatives": [], "content": { "required": [ "read filter", "type filters", "mark-all action and scope" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "notifications", "parentId": "shell", "order": 4, "role": "region", "purpose": "Show source, event, time, read state, and destination.", "required": true, "componentIds": [ "notification-center", "notification" ], "alternatives": [], "content": { "required": [ "source", "event summary", "timestamp", "read state", "destination" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } }, { "id": "continuation", "parentId": "shell", "order": 5, "role": "region", "purpose": "Continue older history or show its end.", "required": false, "componentIds": [ "pagination" ], "alternatives": [], "content": { "required": [ "current position", "older notifications" ] }, "responsive": { "compact": "Stack in reading order and preserve all required actions without hover.", "wide": "Keep the region in the primary reading order and use available width without stretching prose." } } ], "flows": [ { "id": "open-notification", "trigger": "User activates a notification.", "outcome": "Apply read policy and navigate to a valid destination with return context.", "componentIds": [ "notification", "link" ] }, { "id": "mark-all", "trigger": "User marks a declared scope as read.", "outcome": "Confirm the scope, update count, and announce completion.", "componentIds": [ "button-group", "snackbar" ] } ], "states": [ { "id": "ready", "trigger": "Required data and permissions are available.", "presentation": "Show task content and the primary next action.", "componentIds": [ "page-header" ], "recoveryAction": null, "required": true }, { "id": "loading", "trigger": "Initial or refreshed remote data is pending.", "presentation": "Preserve the final layout where possible and announce progress without trapping focus.", "componentIds": [ "skeleton", "loading-announcement" ], "recoveryAction": null, "required": true }, { "id": "error", "trigger": "Required data or mutation failed.", "presentation": "Explain the failure in context and retain user input or selection.", "componentIds": [ "error-state", "error-announcement" ], "recoveryAction": "Retry the failed operation or navigate to a safe previous location.", "required": true }, { "id": "empty", "trigger": "No notifications exist or match the active filter.", "presentation": "Distinguish an empty history from no matches and offer filter reset.", "componentIds": [ "empty-state", "no-results" ], "recoveryAction": "Clear the active filter.", "required": true }, { "id": "success", "trigger": "Read state changes.", "presentation": "Update unread count and announce the change without moving focus.", "componentIds": [ "snackbar" ], "recoveryAction": "Continue reviewing notifications.", "required": true } ], "responsive": { "modes": [ "compact", "wide" ], "transitions": [ "At compact width, preserve reading order and move secondary navigation into a disclosed surface.", "At wide width, expose persistent navigation or adjacent detail only when it improves the primary task." ] }, "qualityRuleIds": [ "structure.page-title", "structure.landmarks", "structure.region-parents", "action.single-primary", "state.loading-feedback", "state.error-recovery", "navigation.no-dead-end", "responsive.compact-mode", "responsive.no-horizontal-overflow", "responsive.no-hover-only", "a11y.accessible-name", "a11y.keyboard-path", "a11y.focus-order", "a11y.touch-target", "a11y.contrast-intent", "a11y.reduced-motion", "platform.support", "content.localization", "trust.evidence", "decision.unresolved", "state.empty-guidance", "state.success-next-step", "navigation.current-location", "a11y.live-announcement" ], "references": [ "container", "page-header", "settings-list", "segmented-control", "filter-bar", "button-group", "notification-center", "notification", "pagination", "link", "snackbar", "skeleton", "loading-announcement", "error-state", "error-announcement", "empty-state", "no-results" ] } ], "tokens": { "schemaVersion": 1, "id": "functional-defaults", "description": "Accessible functional defaults intended to be themed without removing semantic roles.", "color": { "light": { "background": "#F8FAFC", "surface": "#FFFFFF", "surfaceMuted": "#F1F5F9", "text": "#0F172A", "textMuted": "#475569", "border": "#94A3B8", "primary": "#175CD3", "onPrimary": "#FFFFFF", "danger": "#B42318", "onDanger": "#FFFFFF", "success": "#067647", "warning": "#854A0E", "focus": "#1D4ED8" }, "dark": { "background": "#0B1220", "surface": "#111827", "surfaceMuted": "#1E293B", "text": "#F8FAFC", "textMuted": "#CBD5E1", "border": "#64748B", "primary": "#84ADFF", "onPrimary": "#0B1220", "danger": "#FDA29B", "onDanger": "#450A0A", "success": "#75E0A7", "warning": "#FEC84B", "focus": "#A4BCFD" } }, "typography": { "family": { "system": "ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif", "mono": "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace" }, "size": { "xs": 12, "sm": 14, "md": 16, "lg": 20, "xl": 24, "display": 32 }, "lineHeight": { "compact": 1.25, "body": 1.5, "reading": 1.7 }, "weight": { "regular": 400, "medium": 500, "semibold": 600, "bold": 700 }, "readableLineLengthCh": { "min": 45, "preferred": 66, "max": 80 } }, "spacing": { "base": 4, "scale": { "0": 0, "1": 4, "2": 8, "3": 12, "4": 16, "5": 20, "6": 24, "8": 32, "10": 40, "12": 48, "16": 64 } }, "radius": { "control": 6, "surface": 12, "overlay": 16, "pill": 999 }, "elevation": { "surface": "0 1px 2px rgb(15 23 42 / 0.08)", "raised": "0 8px 24px rgb(15 23 42 / 0.14)", "overlay": "0 20px 48px rgb(15 23 42 / 0.24)" }, "focus": { "width": 3, "offset": 2, "colorToken": "color.*.focus" }, "size": { "controlHeight": { "compact": 36, "default": 44, "comfortable": 48 }, "minimumTarget": { "web": 44, "apple": 44, "android": 48, "windows": 40 } }, "motion": { "duration": { "fast": 120, "standard": 180, "slow": 240 }, "easing": { "standard": "cubic-bezier(0.2, 0, 0, 1)", "entrance": "cubic-bezier(0, 0, 0, 1)", "exit": "cubic-bezier(0.3, 0, 1, 1)" }, "reduced": { "duration": 0, "preserveStateChange": true } }, "breakpoint": { "compact": 640, "medium": 768, "wide": 960, "expanded": 1280 }, "breakpoints": { "compact": 640, "medium": 768, "wide": 960, "expanded": 1280 }, "content": { "narrow": 640, "default": 960, "wide": 1280, "pageGutterCompact": 16, "pageGutterWide": 32 } }, "qualityRules": [ { "id": "structure.page-title", "severity": "error", "phases": [ "plan", "markup" ], "message": "Each screen needs one unambiguous page title.", "remediation": "Declare a page-header or heading region and render one primary h1.", "check": { "type": "component-any", "componentIds": [ "page-header", "heading" ] }, "sources": [ { "label": "HTML Living Standard", "url": "https://html.spec.whatwg.org/multipage/" }, { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "structure.landmarks", "severity": "error", "phases": [ "plan", "markup" ], "message": "Screen regions need a valid landmark and parent hierarchy.", "remediation": "Use a single root region, valid parent IDs, and semantic header/nav/main/aside/footer landmarks.", "check": { "type": "region-graph" }, "sources": [ { "label": "HTML Living Standard", "url": "https://html.spec.whatwg.org/multipage/" }, { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "structure.region-parents", "severity": "error", "phases": [ "plan" ], "message": "Every non-root region must reference an existing parent without cycles.", "remediation": "Repair missing parents or cycles in the region graph.", "check": { "type": "region-graph" }, "sources": [ { "label": "HTML Living Standard", "url": "https://html.spec.whatwg.org/multipage/" } ] }, { "id": "action.single-primary", "severity": "warning", "phases": [ "plan", "markup" ], "message": "A decision area should not present competing primary actions.", "remediation": "Keep one primary action per decision area and lower the emphasis of alternatives.", "check": { "type": "max-component", "componentId": "primary-button", "maxPerRegion": 1 }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "action.destructive-confirmation", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Irreversible actions need explicit consequence and confirmation.", "remediation": "Use a destructive action plus alert dialog or an equivalent safe confirmation flow.", "check": { "type": "conditional-component", "ifComponent": "destructive-button", "requiresAny": [ "alert-dialog", "delete-account" ] }, "sources": [ { "label": "WAI-ARIA Authoring Practices Guide", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/" }, { "label": "Material Design 3", "url": "https://m3.material.io/" } ] }, { "id": "state.loading-feedback", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Asynchronous screens need a loading state that preserves context.", "remediation": "Add a loading state using skeleton, progress, or an announced spinner.", "check": { "type": "state-present", "stateId": "loading" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "Material Design 3", "url": "https://m3.material.io/" } ] }, { "id": "state.empty-guidance", "severity": "warning", "phases": [ "plan" ], "message": "Collections need an empty state with a useful next action.", "remediation": "Add an empty state that explains why it is empty and offers the safest first action.", "check": { "type": "state-or-exemption", "stateId": "empty", "exemptionPath": "fit.noEmptyState" }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" } ] }, { "id": "state.error-recovery", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Errors need a recovery route.", "remediation": "Add retry, correction guidance, or a safe navigation destination.", "check": { "type": "state-recovery", "stateId": "error" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "state.success-next-step", "severity": "warning", "phases": [ "plan" ], "message": "Completion states should explain what happened and what comes next.", "remediation": "Add success feedback and a next step when the task changes screen state.", "check": { "type": "state-or-exemption", "stateId": "success", "exemptionPath": "fit.inlineSuccess" }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" } ] }, { "id": "form.visible-label", "severity": "error", "phases": [ "plan", "markup" ], "message": "Inputs require persistent visible labels.", "remediation": "Associate each control with a visible label; placeholders are not labels.", "check": { "type": "component-contract", "category": "forms", "property": "accessibility" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "HTML Living Standard", "url": "https://html.spec.whatwg.org/multipage/" } ] }, { "id": "form.error-summary", "severity": "warning", "phases": [ "plan", "markup" ], "message": "Long or multi-section forms need an error summary.", "remediation": "Place an error summary before the form and link each error to the invalid field.", "check": { "type": "conditional-component", "ifAny": [ "fieldset", "address-form", "profile-editor" ], "requiresAny": [ "error-summary" ] }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "form.preserve-input", "severity": "error", "phases": [ "runtime", "manual" ], "message": "Validation or server errors must not discard valid user input.", "remediation": "Preserve entered values and focus the first actionable error.", "check": { "type": "manual", "evidence": "submit-invalid-form" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "navigation.current-location", "severity": "warning", "phases": [ "plan", "markup" ], "message": "Application navigation must expose the current location.", "remediation": "Declare a selected/current item and use aria-current where applicable.", "check": { "type": "conditional-category", "category": "navigation", "evidence": "current-location" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "WAI-ARIA Authoring Practices Guide", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/" } ] }, { "id": "navigation.escape-back", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Overlays and drill-in views need a predictable close or back path.", "remediation": "Declare Escape/back behavior and restore focus to the trigger.", "check": { "type": "conditional-placement", "placement": "overlay", "evidence": "dismiss-flow" }, "sources": [ { "label": "WAI-ARIA Authoring Practices Guide", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "navigation.no-dead-end", "severity": "error", "phases": [ "plan" ], "message": "Every non-terminal state needs a safe continuation or exit.", "remediation": "Add a primary continuation, correction, close, or back action.", "check": { "type": "flow-connectivity" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "responsive.compact-mode", "severity": "error", "phases": [ "plan" ], "message": "Responsive screens need an explicit compact layout mode.", "remediation": "Define compact and wide modes plus the transition for each region.", "check": { "type": "responsive-modes", "required": [ "compact", "wide" ] }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "responsive.no-horizontal-overflow", "severity": "error", "phases": [ "runtime" ], "message": "Core content must reflow without page-level horizontal scrolling at 320 CSS pixels.", "remediation": "Stack, wrap, transform, or provide a component-scoped data alternative.", "check": { "type": "runtime-probe", "probe": "horizontal-overflow-320" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "responsive.no-hover-only", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Required actions cannot depend on hover.", "remediation": "Expose actions on focus/tap or provide a persistent equivalent.", "check": { "type": "manual", "evidence": "touch-and-keyboard-path" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "a11y.accessible-name", "severity": "error", "phases": [ "markup" ], "message": "Every interactive control needs an accessible name.", "remediation": "Use visible text, label association, or a concise aria-label for icon-only controls.", "check": { "type": "markup-probe", "probe": "accessible-name" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "HTML Living Standard", "url": "https://html.spec.whatwg.org/multipage/" } ] }, { "id": "a11y.keyboard-path", "severity": "error", "phases": [ "plan", "runtime" ], "message": "All actions must be reachable and operable with a keyboard on keyboard platforms.", "remediation": "Preserve native controls and declare composite-widget keyboard behavior.", "check": { "type": "component-contract", "property": "keyboard" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "WAI-ARIA Authoring Practices Guide", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/" } ] }, { "id": "a11y.focus-order", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Focus order must follow reading and task order.", "remediation": "Use DOM order and avoid positive tabindex values.", "check": { "type": "runtime-probe", "probe": "focus-order" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "a11y.focus-return", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Closing an overlay must return focus to a logical control.", "remediation": "Record the trigger and restore focus after dismissal.", "check": { "type": "conditional-placement", "placement": "overlay", "evidence": "focus-return" }, "sources": [ { "label": "WAI-ARIA Authoring Practices Guide", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/" } ] }, { "id": "a11y.live-announcement", "severity": "warning", "phases": [ "plan", "runtime" ], "message": "Important asynchronous changes need a non-visual announcement.", "remediation": "Use status/alert semantics without moving focus for routine updates.", "check": { "type": "conditional-state", "states": [ "loading", "error", "success" ], "requiresAny": [ "live-region", "loading-announcement", "error-announcement" ] }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "WAI-ARIA Authoring Practices Guide", "url": "https://www.w3.org/WAI/ARIA/apg/patterns/" } ] }, { "id": "a11y.touch-target", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Touch controls need a usable target size.", "remediation": "Use at least 44×44 CSS pixels/points, or 48dp on Android.", "check": { "type": "token-minimum", "token": "size.minimumTarget" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "Material Design 3", "url": "https://m3.material.io/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "a11y.contrast-intent", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Text, controls, and focus indicators need sufficient contrast.", "remediation": "Use semantic color roles whose declared pairs meet WCAG contrast requirements.", "check": { "type": "token-contrast", "modes": [ "light", "dark" ], "pairs": [ { "foreground": "text", "background": "background", "minimum": 7 }, { "foreground": "text", "background": "surface", "minimum": 7 }, { "foreground": "onPrimary", "background": "primary", "minimum": 4.5 }, { "foreground": "onDanger", "background": "danger", "minimum": 4.5 }, { "foreground": "focus", "background": "background", "minimum": 3 } ] }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "a11y.reduced-motion", "severity": "warning", "phases": [ "plan", "runtime" ], "message": "Non-essential motion must honor reduced-motion preferences.", "remediation": "Remove non-essential motion and keep state changes understandable without animation.", "check": { "type": "token-path", "path": "motion.reduced.duration", "equals": 0 }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "platform.support", "severity": "error", "phases": [ "plan" ], "message": "Every selected component must be supported or explicitly adapted for the target.", "remediation": "Resolve platformSupport for the requested target and disclose substitutions.", "check": { "type": "platform-support" }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "content.localization", "severity": "warning", "phases": [ "plan", "runtime" ], "message": "Layout must tolerate translated copy and locale formats.", "remediation": "Allow wrapping and expansion; use locale-aware dates, numbers, and direction.", "check": { "type": "manual", "evidence": "localization-expansion" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "content.truncation", "severity": "warning", "phases": [ "plan", "runtime" ], "message": "Truncated content needs a way to discover the full value when it matters.", "remediation": "Wrap by default or provide an accessible expansion/detail path.", "check": { "type": "conditional-component", "ifComponent": "truncated-text", "requiresAny": [ "read-more", "tooltip" ] }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "trust.evidence", "severity": "error", "phases": [ "plan" ], "message": "Generated output must not claim checks that were not run.", "remediation": "Carry the registry verification level and list external checks separately.", "check": { "type": "verification-level" }, "sources": [ { "label": "WCAG 2.2 Quick Reference", "url": "https://www.w3.org/WAI/WCAG22/quickref/" } ] }, { "id": "decision.unresolved", "severity": "error", "phases": [ "plan" ], "message": "Implementation must not start while required product decisions remain unresolved.", "remediation": "Answer each recipe decision or explicitly record an approved assumption before generating implementation code.", "check": { "type": "open-decisions" }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "data.bulk-safety", "severity": "error", "phases": [ "plan", "runtime" ], "message": "Bulk actions must expose selection count and protect destructive changes.", "remediation": "Show selected count, scope, undo/confirmation, and preserve selection on recoverable errors.", "check": { "type": "conditional-component", "ifComponent": "bulk-action-bar", "requiresAny": [ "alert-dialog", "snackbar" ] }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" } ] }, { "id": "commerce.total-disclosure", "severity": "error", "phases": [ "plan" ], "message": "Purchase decisions need the total price, recurrence, and material terms before confirmation.", "remediation": "Show currency, billing period, taxes/fees disclosure, renewal terms, and final total.", "check": { "type": "conditional-surface", "surface": "commerce", "evidence": "total-and-terms" }, "sources": [ { "label": "Material Design 3", "url": "https://m3.material.io/" }, { "label": "Apple Human Interface Guidelines", "url": "https://developer.apple.com/design/human-interface-guidelines/" } ] }, { "id": "auth.password-manager", "severity": "error", "phases": [ "markup", "runtime" ], "message": "Authentication forms must support password managers and platform credentials.", "remediation": "Use correct autocomplete values, allow paste, and do not block password managers.", "check": { "type": "conditional-surface", "surface": "authentication", "evidence": "credential-autocomplete" }, "sources": [ { "label": "HTML Living Standard", "url": "https://html.spec.whatwg.org/multipage/" }, { "label": "NIST Digital Identity Guidelines", "url": "https://pages.nist.gov/800-63-4/" } ] }, { "id": "privacy.minimum-data", "severity": "warning", "phases": [ "plan" ], "message": "Forms should request only data required for the task.", "remediation": "Remove unnecessary fields or explain their purpose and retention.", "check": { "type": "manual", "evidence": "data-minimization-review" }, "sources": [ { "label": "NIST Digital Identity Guidelines", "url": "https://pages.nist.gov/800-63-4/" } ] } ] }