Gardenerドキュメント

クイックスタート

Gardener は CSS のみを使用することも、対話型動作のために依存関係のないランタイムをロードすることもできます。完全なパッケージには、デフォルトですべてのテーマ、コンポーネント、ツールクラスが含まれています。

<!doctype html>
<html lang="zh-CN" data-g-theme="garden" data-g-mode="light">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="gardener.css">
</head>
<body>
  <main class="g-container g-py-8">
    <button class="g-btn g-btn-primary">はじめに</button>
  </main>
  <script type="module" src="gardener.runtime.js"></script>
</body>
</html>

デフォルトのビジュアル:白いキャンバス、ニュートラルなテキスト、4 ピクセルの基本的な丸い角、抑制されたシャドウ。丸い角と強力な階層は明示的に選択する必要があり、通常のビジネスページを汚すことはありません。

推奨される選択順序

宛先とページの種類を確認してください。
ページレシピからの構造選択を優先します。
登録されたコンポーネントを関数に入力します。
ローカルのレイアウトと間隔を処理するためにツールクラスのみを使用してください。
最後にトピック軸を設定し、完全な環境マトリックスを確認します。

インストールとパッケージ

現在のビルドにはサードパーティのランタイム依存関係がありません。パッケージマネージャー経由で利用可能、または直接コピー dist/ の静的ファイル。

npm install @gardener/css

エクスポート	コンテンツ	使用シナリオ
`@gardener/css`	完全な CSS + デフォルトのランタイムエントリ	箱から出してそのまま使用
`core.css`	トークン、テーマ軸、リセット、ベース	自己構築コンポーネントライブラリ
`themes.css`	42 メインカラーと表示モード	トピックのみを再利用する
`utilities.css`	すべてのレスポンシブツールクラス	原子式ページ
`components.css`	非 AI 汎用コンポーネントと完全なラスター	ビジネスシステム
`ai.css`	AI 固有のコンポーネント	チャット、エージェント、生成ツール
`./tauri`	Tauri ウィンドウコントロールアダプター	デスクトップ WebView
`./electron`	Electronの安全橋アダプター	デスクトップクライアント
`./manifest`	コンポーネントと環境のリスト	AI / 自動化ツール
`./utilities-manifest`	ツールクラスの宣言と応答条件	正確なクラス名の検索
`./recipes`	高頻度ページのレシピ	ページスケルトンの選択
`./capabilities`	業界機能の実装ステータスとインターフェイスマトリックス	コンセプトレベルの省略を防止する
`./public-api`	パブリック命名、動作、イベント、アダプターコントラクト	ジェネレーターと統合ツール
`./builds`	プラットフォームアーカイブ、コンポーネントパッケージ、コンポーネントの所有権およびビルダー契約	プラットフォーム/コンポーネントごとに生成
`./performance`	raw、gzip、Brotli、npm のパッケージサイズのレポート	パフォーマンスゲートをリリース
`./components-manifest`	コンポーネントソースリスト	コンポーネントの取得とコード生成
`./schema/*`	10 セットのクローズド JSON スキーマ	契約の検証

レイヤーごとにグループ化

import "@gardener/css/core.css";
import "@gardener/css/themes.css";
import "@gardener/css/components.css";
import "@gardener/css/utilities.css";

Gardener Vue 3 プロジェクト

@gardener/vue は Gardener CSS 1.0.0 の公式 Vue 3 アダプテーションレイヤーであり、現在のバージョンは 1.0.0 安定版、Vue をサポート >=3.4.0 <4.0.0 Node.js を使用 >=18.18。 506 個の CSS コンポーネントすべてと 66 個の DOM 動作を項目ごとにマップし、538 個のルートランタイムエクスポート、21 個の TypeScript タイプエクスポート、29 個のパッケージエントリポイント、および 28 個のコンポーネント CSS パッケージプロキシを提供します。

506名前付き G* コンポーネント

538ルートランタイムのエクスポート

29パブリックパッケージエントリ

28コンポーネント CSS パッケージ

インストールとグローバルプラグイン

npm install @gardener/vue @gardener/css vue

import { createApp } from "vue";
import GardenerVue from "@gardener/vue";
import "@gardener/vue/style.css";
import App from "./App.vue";

createApp(App).use(GardenerVue).mount("#app");

プラグインオプションを完全に網羅 prefix、components、directive と initialize。プレフィックスをカスタマイズする必要があります。一部のコンポーネントのみを登録して、閉じます v-gardener または遅延ランタイム初期化を渡す必要があります createGardenerVue(options) プラグインを作成します。

オンデマンドのコンポーネントとテーマのプロバイダー

<script setup lang="ts">
import { GButton, GCard, GDialog, GardenerProvider } from "@gardener/vue";
import "@gardener/vue/platform/web.css";
</script>

<template>
  <GardenerProvider
    theme="garden"
    mode="light"
    neutral="cool"
    typography="system"
    shape="subtle"
    density="comfortable"
    elevation="subtle"
    motion="full"
    platform="web"
    os="auto"
  >
    <GCard><GButton variant="primary">保存</GButton></GCard>
  </GardenerProvider>
</template>

GardenerProvider の10のテーマ軸は、 theme、mode、neutral、typography、shape、density、elevation、motion、platform と os。ホームとサンプルはデフォルトで白色のままで、明るく小さな丸い角が付いています。ダークモードはデフォルトでは有効になっていません。

すべてのコンポーネントのパブリックプロパティ、透過的な送信および Ref

プロパティ	目的	同意書
`as`	ルート要素または Vue コンポーネントを変更する	Gardener クラス、プロパティ、スロットを保持
`variant`	バリアントを適用する	文字列または文字列の配列を受け入れます
`state`	アプリケーションコンポーネントのステータス	に変換します `is-*` ステータスクラス
`config`	ランタイム構成の宣言	対応するものに変換します `data-g-*` プロパティ
`initialize`	コントロール DOM 動作の初期化	デフォルト `true`
`modelValue`	Vue の双方向バインディング値	ネイティブフォームとカスタム Gardener イベントの両方がサポートされています
`modelEvent`	カスタム同期イベントを指定する	使用する `gardener:*` イベント名
`modelKey`	イベントペイロードから値を取得する	読む `CustomEvent.detail` フィールドを指定してください

すべてのネイティブ属性、DOM イベント、スロットがパススルーされます。コンポーネントテンプレート参照統一開示 element、getInstance() と refresh()。ダイアログボックスや引き出しなどの複合構造で使用されます。 GardenerPart CSS と動作セレクターの規約に違反しないように、標準の内部を作成します。

v モデル、カスタムイベントおよび手順

<GInput v-model="keyword" />

<GTreeSelect
  v-model="selectedId"
  model-event="gardener:change"
  model-key="value"
/>

<div v-gardener="{
  behavior: 'dialog',
  config: { startOpen: true }
}" />

vGardener(テンプレート名 v-gardener) Vue ライフサイクルに沿って指定された動作をマウント、リフレッシュ、および破棄します。ネイティブ入力使用基準 update:modelValue;複雑なコンポーネントが渡されました modelEvent と modelKey Gardener カスタムイベントを同じプロトコルにブリッジします。

7 つすべてがコンポーザブル

useGardenerランタイム、初期化、および破棄機能へのアクセス

useGardenerBehaviorバインド動作とインスタンスへのアクセス

useGardenerEventgardener:* イベントのタイプセーフリスニング

useGardenerTheme10 軸テーマのステータスの読み取りと更新

useGardenerToastトーストの作成と管理

useTauriWindowControlsTauri ウィンドウボタンと破壊サイクルをバインドする

useElectronWindowControls結合Electronの保安橋および破壊周期

Web、モバイル、デスクトップスタイルの入り口

入口	コンテンツ	該当するシナリオ
`@gardener/vue/style.css`	完全なGardener様式	箱から出して試作品
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	レイヤードスタイルエントリー	カスタムビルド
`platform/web.css`	一般的な Web 機能	PC、レスポンシブ Web サイト、ダッシュボード
`platform/mobile.css`	ユニバーサル + モバイルの組み合わせ	モバイル Web ページ、PWA、WebView
`platform/desktop.css`	ユニバーサル + デスクトップコンボ	デスクトップブラウザとアプリケーションシェル
`platform/tauri.css`	デスクトップポータル + Tauri の適応	Tauriウィンドウ
`platform/electron.css`	デスクトップポータル+ Electronの適応	Electronウィンドウ
`component-css/*`	28 個の安定したコンポーネント CSS パッケージプロキシ	機能ドメインごとの負荷

一般的なアプリケーションまたは @gardener/vue/components 最高のツリーシェイクを手に入れましょう。 @gardener/vue/bundle.min.js は、事前圧縮された単一ファイルエントリです。 SSR インポートはブラウザーのグローバルオブジェクトにアクセスせず、動作はコンポーネントがマウントされた後にのみ初期化されるため、サーバー側のレンダリングとハイドレーションに使用できます。

29 個のパブリックパッケージエントリすべて

JavaScript:.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js。スタイル:./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css と ./component-css/*。契約およびパッケージ情報:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

非コンポーネントランタイムエクスポートと TypeScript タイプ

32 個の非コンポーネントランタイムが次のようにエクスポートされました:Gardener、GardenerComponent、GardenerPart、GardenerProvider、GardenerVue、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByExportName、componentByName、componentCatalog、configAttributes、createGardenerComponent、createGardenerVue、default、destroy、emit、gardenerComponents、getInstance、init、observe、register、themeAttributes、toast、7 コンポーザブルおよび vGardener。

21 種類が次のようにエクスポートされました:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentKind、GardenerComponentPublicInstance、GardenerConfigValue、GardenerDirectiveOptions、GardenerDirectiveValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerPlatform、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerVueComponentName、GardenerVueOptions。

パブリックスキーマ、メタデータ、および公開アクセス

パブリック API、互換性とパフォーマンスどちらにも、不明なフィールドをオフにする JSON スキーマがあります。コンポーネントカタログ JSON AI、コードジェネレーター、ドキュメントツールで直接読み取り可能。完全な圧縮パッケージの予算は、raw 328,220 B、gzip 51,602 B、Brotli 26,926 B です。独身 GButton の実際のツリーシェイキング結果は 3,718 B です。確定的ビルドは 87 ファイルをカバーし、npm パッケージは 98 ファイルをチェックし、284,183 B がパックされ、3,729,929 B がアンパックされます。

cd vue
npm run release:verify

# ビルド、オーバーライド、スキーマ、Vue SFC タイプ、ユニット、DOM ライフサイクルの生成、
# Chromium / WebKit / Firefox / モバイル、WCAG A/AA、例、
# ツリーシェイキング、再現可能なビルド、パフォーマンスバジェット、npm パッケージ化および publint

506 個の Vue コンポーネントすべて

次のディレクトリは直接マージされます Vue パブリック API とコンポーネントのメタデータは、Vue エクスポート名、CSS 名、カテゴリ、タイプ、セレクター、バリアント、状態、ウィジェット、動作、およびプラットフォームを項目別に示します。これは注目のサンプルではありません。 506 個のアイテムはすべて同じ検索可能なディレクトリにあります。

Vue コンポーネントマニフェストを読み取り中...

Gardener React プロジェクト

@gardener/react は Gardener CSS 1.0.0 の公式 React アダプテーションレイヤーであり、現在のバージョンは 1.0.0 安定版、React をサポート >=18.3.0 <20.0.0 Node.js を使用 >=18.18。 506 個の CSS コンポーネントすべてと 66 個の DOM 動作を項目ごとにマップし、538 個のルートランタイムエクスポート、22 個の TypeScript タイプエクスポート、29 個のパブリックパッケージエントリポイント、および 28 個のコンポーネント CSS パッケージプロキシを提供します。

506名前付き G* コンポーネント

538ルートランタイムのエクスポート

29パブリックパッケージエントリ

28コンポーネント CSS パッケージ

インストールとルートコンポーネント

npm install @gardener/react @gardener/css react react-dom

import { createRoot } from "react-dom/client";
import { GButton, GCard, GardenerProvider } from "@gardener/react";
import "@gardener/react/style.css";

createRoot(document.getElementById("root")!).render(
  <GardenerProvider theme="garden" mode="light" shape="subtle">
    <GCard><GButton variant="primary">保存</GButton></GCard>
  </GardenerProvider>,
);

コンポーネントはすべて、オンデマンドでの名前付きインポートをサポートしています。ビルダーはルートエントリから開始することも、 @gardener/react/components 木を揺らします。生成された各コンポーネントは、デフォルトの HTML タグの正確な属性タイプを保持します。 GButton 同意する type="submit"，GInput 同意する type と autoComplete、許可しながら、 as 他のネイティブ要素または React コンポーネントに切り替えます。

トピックプロバイダーと 10 個のトピック軸

<GardenerProvider
  theme="garden"
  mode="light"
  neutral="cool"
  typography="system"
  shape="subtle"
  density="comfortable"
  elevation="subtle"
  motion="full"
  platform="web"
  os="auto"
  id="application-theme"
  aria-label="アプリケーショントピックの範囲"
>
  <App />
</GardenerProvider>

GardenerProvider の10のテーマ軸は、 theme、mode、neutral、typography、shape、density、elevation、motion、platform と os。また、className、style、ID、ARIA、その他のネイティブ属性も透過的に送信します。 useGardenerTheme 読み書きのトピックについては、 useGardenerThemeContext コンテキストを直接読み取る場合。デフォルトは依然として白いライトで、小さな丸い角があり、ダークテーマは自動的に有効になりません。

すべてのコンポーネントに共通する 10 のプロパティ

プロパティ	目的	同意書
`as`	ルート要素または React コンポーネントを変更する	Gardener クラス、プロパティ、子供、Ref を保持します
`variant`	バリアントを適用する	文字列または文字列の読み取り専用配列
`state`	アプリケーションコンポーネントのステータス	に変換します `is-*` ステータスクラス
`config`	宣言動作の設定	対応するものに変換します `data-g-*` プロパティ
`initialize`	コントロール DOM 動作の初期化	デフォルト `true`
`value`	管理値	ネイティブフォームとカスタム Gardener イベントをサポート
`defaultValue`	初期値が制御されていません	チェックボックスのブール値がマッピングされました `defaultChecked`
`valueEvent`	指定値同期イベント	在庫あり `gardener:*` イベント名
`valueKey`	イベントペイロードから値を取得する	読む `CustomEvent.detail` フィールドを指定してください
`onValueChange`	元のイベントで新しい値を受け取る	ネイティブ入力/変更の自動重複排除

ネイティブ属性、イベント、子、および className すべて透過透過されます。コンポーネント参照の統合パブリック element、getInstance() と refresh();複合構造も利用可能 GardenerPart 内部コンポーネントを作成します。チェックボックスブール値 value 使用する checked、ラジオは React フォームの一貫したセマンティクスを保証するために文字列値を保持します。

制御された値、カスタムイベント、および動作インスタンス

const [keyword, setKeyword] = useState("");

<GInput value={keyword} onValueChange={(next) => setKeyword(String(next))} />

<GTreeSelect
  value={selectedId}
  valueEvent="gardener:change"
  valueKey="value"
  onValueChange={setSelectedId}
/>

useGardenerBehavior 66 のビヘイビアーを要素、ドキュメント、またはコンポーネントのハンドルにバインドし、アンロード時にそれらを破棄します。initialize ページレベルのランタイムによる統合テイクオーバーを容易にするために、コンポーネントの自動初期化をオフにすることができます。データ属性を明示的に渡す動作は、デフォルト値の生成よりも優先されます。

フック全7個

useGardenerランタイム、初期化、監視、および破棄機能へのアクセス

useGardenerBehaviorバインド動作とインスタンスへのアクセス

useGardenerEventgardener:* イベントのタイプセーフリスニング

useGardenerTheme10 軸テーマのステータスの読み取りと更新

useGardenerToastトーストの作成と管理

useTauriWindowControlsTauri ウィンドウボタンと破壊サイクルをバインドする

useElectronWindowControls結合Electronの保安橋および破壊周期

Web、モバイル、デスクトップスタイルの入り口

入口	コンテンツ	該当するシナリオ
`@gardener/react/style.css`	完全なGardener様式	箱から出して試作品
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	レイヤードスタイルエントリー	カスタムビルド
`platform/web.css`	一般的な Web 機能	PC、レスポンシブ Web サイト、ダッシュボード
`platform/mobile.css`	ユニバーサル + モバイルの組み合わせ	モバイル Web ページ、PWA、WebView
`platform/desktop.css`	ユニバーサル + デスクトップコンボ	デスクトップブラウザとアプリケーションシェル
`platform/tauri.css`	デスクトップポータル + Tauri の適応	Tauriウィンドウ
`platform/electron.css`	デスクトップポータル+ Electronの適応	Electronウィンドウ
`component-css/*`	28 個の安定したコンポーネント CSS パッケージプロキシ	機能ドメインごとの負荷

SSR、ハイドレーション、デスクトップブリッジング

パッケージのエントリポイントはサーバー側でも安全に import でき、506 個すべてのコンポーネントについて個別に SSR を検証しています。ビヘイビアは Effect のライフサイクル内でのみ初期化されます。サーバーで生成したマークアップの Hydration では recoverable error が発生せず、StrictMode にも対応します。Tauri と Electron はそれぞれ @gardener/react/tauri と @gardener/react/electron ポータルを独立させ、どちらのポータルも別のプラットフォームのブリッジング API を誤ってエクスポートしないようにします。

import { useTauriWindowControls } from "@gardener/react/tauri";
import "@gardener/react/platform/tauri.css";

function WindowChrome() {
  const root = useRef<HTMLElement | null>(null);
  useTauriWindowControls(root, window.__TAURI_WINDOW__);
  return <header ref={root} className="g-native-titlebar">...</header>;
}

29 個のパブリックパッケージエントリすべて

JavaScript:.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js。スタイル:./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css、./component-css/*.css と ./component-css/*。契約およびパッケージ情報:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

非コンポーネントランタイムエクスポートと TypeScript タイプ

32 個の非コンポーネントランタイムが次のようにエクスポートされました:Gardener、GardenerComponent、GardenerPart、GardenerProvider、GardenerThemeContext、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByExportName、componentByName、componentCatalog、configAttributes、createGardenerComponent、destroy、emit、gardenerComponents、getInstance、init、observe、register、resolveGardenerTarget、themeAttributes、themeAxes、toast、useElectronWindowControls、useGardener、useGardenerBehavior、useGardenerEvent、useGardenerTheme、useGardenerThemeContext、useGardenerToast、useTauriWindowControls。

22 種類が次のようにエクスポートされました:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

パブリックスキーマ、パフォーマンス、リリースアクセス

パブリック API、互換性とパフォーマンスどちらも不明なフィールドをオフにして JSON スキーマによって検証されました。コンポーネントカタログ JSON AI、コードジェネレーター、ドキュメントツールで直接読み取り可能。完全に圧縮されたパッケージの実測値は、raw で 326,064 B、gzip で 50,126 B、Brotli で 26,381 B です。独身 GButton の実際のツリーシェイク結果は 2,599 B です。決定論的ビルドでは 87 個のファイルがカバーされ、npm パッケージでは 98 個のファイルがチェックされ、262,706 個がパックされ、2,438,775 個がアンパックされ、運用環境の依存関係のセキュリティ監査では脆弱性は 0 件でした。

cd react
npm run release:verify

# ビルドとパブリック API、スキーマ、TypeScript、506 コンポーネント SSR、ハイドレーション、DOM ライフサイクル、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# ツリーシェイキング、再現可能なビルド、パフォーマンスバジェット、npm パッケージ化および publint

506 個の React コンポーネントすべて

次のディレクトリは直接マージされます React パブリック API とコンポーネントのメタデータ、React エクスポート名、CSS 名、カテゴリ、タイプ、デフォルトタグ、セレクター、バリアント、状態、ウィジェット、動作、プラットフォームを項目別に示します。これは注目のサンプルではありません。 506 個のアイテムはすべて同じ検索可能なディレクトリにあります。

React コンポーネントマニフェストを読み取り中...

Gardener AngularJS プロジェクト

@gardener/angularjs は Gardener CSS 1.0.0 の公式 AngularJS 1.x レガシーシステムアダプテーションレイヤーであり、現在のバージョンは 1.0.0 安定版。 AngularJS を検証します >=1.8.2 <1.9.0 Node.js を使用 >=18.18、506 個の CSS コンポーネントすべてと 66 個の DOM 動作の項目ごとのマッピング。535 個のルートランタイムエクスポート、24 個の TypeScript タイプエクスポート、29 個のパブリックパッケージエントリポイント、および 28 個のコンポーネント CSS パッケージプロキシを提供します。

レガシーシステム境界:AngularJS は公式サポートを終了しており、上流の修正がないフレームワーク自体に関する既知のセキュリティアドバイザリはありません。このアダプテーション層は、 angular これを外部ピアの依存関係として保持します。これにより、Gardener 製品にプッシュされず、フレームワークレベルのリスクもカバーされません。新しいプロジェクトには、Vue、React、またはフレームワークに依存しない入り口を選択することが優先されます。既存のプロジェクトでは、入力サニタイズ、CSP、リソースのホワイトリスト、デスクトップブリッジの最小承認、および移行計画も実装する必要があります。完全な要件については、を参照してください。 AngularJS セキュリティベースライン。

506コンポーネント命令を生成する

535ルートランタイムのエクスポート

29パブリックパッケージエントリ

28コンポーネント CSS パッケージ

インストール、ESM ロード、およびモジュールファクトリ

npm install @gardener/angularjs @gardener/css angular

import "angular/angular.js";
import { createGardenerAngularJS } from "@gardener/angularjs";
import "@gardener/angularjs/style.css";

const gardenerModule = createGardenerAngularJS(window.angular);
window.angular.module("app", [gardenerModule]);

AngularJS npm パッケージはネイティブ ESM ではないため、Vite などのビルドツールで使用する必要があります import "angular/angular.js" の副作用をインポートしてから、 window.angular 明示的なハンドオーバー createGardenerAngularJS;不安定なものに依存しないでください import angular from "angular" デフォルトでインポートされます。 Gardener パッケージ自体はグローバル AngularJS を読み取りません。ルートエントリは SSR ツールチェーン分析にとって安全です。

const moduleName = createGardenerAngularJS(window.angular, {
  moduleName: "gardener",
  dependencies: [],
  components: ["button", "gInput", "GCardDirective"],
  initialize: true,
  registerProvider: true,
  registerBehaviorDirective: true,
});

components 506 個の共用体タイプによって制限されたコンポーネント名、AngularJS ディレクティブ名、または ESM エクスポート名を受け入れます。不明な名前を指定すると、すぐにエラーがスローされます。同じ AngularJS インスタンス、モジュール名、および同等のオプションを繰り返しインストールすると、冪等になります。異なるコンポーネントのサブセット、依存関係、または初期化オプションが同じ名前のモジュールを使用する場合、半登録されたモジュールをサイレントに取得することを防ぐためにエラーが明示的に報告されます。

要素ディレクティブ、属性ディレクティブ、およびセマンティクス

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">要素コマンドの内容</g-card>
  <button g-button gardener-variant="primary" type="submit">保存</button>
  <input g-input ng-model="vm.keyword" aria-label="キーワード">
</gardener-provider>

各コンポーネントは次で始まります restrict: "EA" 要素と属性の両方の形式をサポートします。 <g-card> / gCard と <article g-card>。ボタン、入力、選択、フォーム、テーブル、ナビゲーション、サイドなどのネイティブセマンティクスに関しては、キーボード、フォームの送信、ブラウザーの検証、および支援テクノロジがネイティブの動作を引き続き使用できるようにする属性の使用を優先する必要があります。

8 つのコンポーネントすべてのパブリックプロパティ

AngularJS プロパティ名	テンプレートの書き方	目的
`gardenerVariant`	`gardener-variant`	スペースまたはカンマで区切られたコンポーネントバリアントを適用する
`gardenerState`	`gardener-state`	1 つ以上のマップ `is-*` ステータスクラス
`gardenerConfig`	`gardener-config`	深度リッスン式オブジェクトとマップ先 `data-g-*` 構成
`gardenerInitialize`	`gardener-initialize`	DOM 動作の初期化を動的に有効または完全に無効にする
`ngModel`	`ng-model`	AngularJS ネイティブフォームモデルまたはブリッジカスタムコンポーネント値を保持する
`gardenerValueEvent`	`gardener-value-event`	モデルを更新するために選択してください `gardener:*` カスタムイベント
`gardenerValueKey`	`gardener-value-key`	から `CustomEvent.detail` 指定されたフィールドを読み取ります
`gardenerOnValueChange`	`gardener-on-value-change`	式を呼び出して提供する `$value`、`$event` 地元の人々

命令ハンドルは次の場所に格納されています。 angular.element(node).data("$gardenerHandle")、統一開示 element、getInstance()、refresh() と destroy()。refresh() ノードのサブツリーは最初に破棄され、次に現在の構成に従って初期化されます。範囲 $destroy イベントを削除し、動作インスタンスを破棄します。

ngModel、ネイティブフォーム、および Gardener イベント

<input g-input
  ng-model="vm.keyword"
  gardener-on-value-change="vm.changed($value, $event)">

<select g-select multiple ng-model="vm.channels">
  <option value="email">メール</option>
  <option value="sms">SMS</option>
</select>

<div g-tree-select
  ng-model="vm.selectedId"
  gardener-value-event="gardener:change"
  gardener-value-key="nodeId"></div>

ネイティブ入力、テキストエリア、選択のモデルセマンティクスは依然として AngularJS 自体によって管理されており、アダプテーションレイヤーではカバーされません。 ngModel.$render または繰り返しの通話 $setViewValue;チェックボックスはブール値を保持し、ラジオはオプション値を保持し、複数の選択は配列を保持します。複雑な Gardener コンポーネントは、カスタムイベントを介してモデルを更新し、 gardenerOnValueChange 一貫したコールバック値を受信します。

共通のコマンド、サービス、および 10 軸テーマ

gGardenerg-gardener を作成するテンプレート、任意の動作を動的に宣言、切り替え、破棄する

gardenerProvider要素または属性フォームが 10 軸のテーマを提供し、サブツリーを初期化する

GardenerRuntime初期化、破棄、getInstance、発行、監視

GardenerTheme属性 · 適用 · 読み取り · クリア

GardenerToastショー(オプション)

トピック軸を完全にカバー theme、mode、neutral、typography、shape、density、elevation、motion、platform と os、テンプレートに対応 gardener-theme へ gardener-os。デフォルトのサンプルでは、白いライトと小さな丸い角が維持されます。

Web、モバイル、デスクトップ、およびドメインごとのスタイル

入口	コンテンツ	該当するシナリオ
`@gardener/angularjs/style.css`	完全なGardener様式	すぐに使用できるレガシーシステムへの漸進的な統合
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	レイヤードスタイルエントリー	カスタムビルド
`platform/web.css`	一般的な Web 機能	PC ウェブサイトとダッシュボード
`platform/mobile.css`	モバイルコンポーネントとセーフゾーン	モバイル Web ページ、PWA、WebView
`platform/desktop.css`	デスクトップワークスペースの組み合わせ	デスクトップブラウザとアプリケーションシェル
`platform/tauri.css`	デスクトップポータル + Tauri の適応	Tauriウィンドウ
`platform/electron.css`	デスクトップポータル+ Electronの適応	Electronウィンドウ
`component-css/*`	28 個の安定したコンポーネント CSS パッケージプロキシ	機能ドメインごとの負荷

import { createTauriWindowService } from "@gardener/angularjs/tauri";
import { createElectronWindowService } from "@gardener/angularjs/electron";

Tauri と Electron のエントリポイントは互いに分離され、どちらも available と destroy() ;レンダリング層は、ホワイトリストに登録された最小限のブリッジ機能のみを受け取る必要があります。

29 個のパブリックパッケージエントリすべて

JavaScript:.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js。スタイル:./style.css、./core.css、./themes.css、./utilities.css、./components.css、./ai.css、./platform/web.css、./platform/mobile.css、./platform/desktop.css、./platform/tauri.css、./platform/electron.css、./component-css/*.css と ./component-css/*。契約およびパッケージ情報:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

非コンポーネントランタイムエクスポートと TypeScript タイプ

29 個の非コンポーネントランタイムが次のようにエクスポートされました:GARDENER_ANGULARJS_MODULE、Gardener、GardenerRuntimeFactory、GardenerThemeFactory、GardenerToastFactory、behaviorAttributes、bindElectronWindowControls、bindTauriWindowControls、componentByDirectiveName、componentByExportName、componentByName、componentCatalog、configAttributes、createElectronWindowService、createGardenerAngularJS、createGardenerComponent、createTauriWindowService、destroy、emit、gardenerBehaviorDirective、gardenerDirectives、gardenerProviderDirective、getInstance、init、observe、register、themeAttributes、themeAxes、toast。

24 種類は次のようにエクスポートされました:GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

パブリックスキーマ、互換性、パフォーマンス、リリースアクセス

パブリック API、互換性とパフォーマンスどちらも、不明なフィールドがオフになっている JSON スキーマによって検証されます。 AngularJS のサポート範囲は、機械可読な互換性ベースラインにも書き込まれます。コンポーネントカタログ JSON AI、コードジェネレーター、ドキュメントツールで直接読み取り可能。完全な圧縮パッケージの実測値は、raw 404,094 B、gzip 59,499 B、Brotli 29,785 B です。独身 GButtonDirective の実際のツリーシェイク結果は 4,515 B です。決定論的ビルドでは 83 ファイル、npm パッケージチェック 95 ファイル、パックされた 325,747 B、アンパックされた 2,938,245 B、Gardener 独自の運用負荷監査では脆弱性は 0 件でした。

cd angular
npm run release:verify

# 生成およびパブリック API、3 セットのスキーマ、TypeScript、AngularJS 1.8.2 / 1.8.3、
# 506 ディレクティブの登録、ngModel および DOM ライフサイクル、Chromium / WebKit / Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、ツリーの揺れ、再現可能なビルド、パフォーマンス、パケット化、パブリント

現在のゲートには、17 件のランタイム／契約テスト、3 件の Schema テスト、5 エンジンとモバイルブラウザを対象とした 20 件の統合テスト、および Axe による WCAG A/AA 自動監査 1 件が含まれます。 npm audit AngularJS オントロジーの既知のアドバイザリーは引き続き忠実に表示されます。これは、分離、受け入れ、または移行する必要があるレガシーリスクであり、修正済みとしてマークすることはできません。

506 個の AngularJS コンポーネントすべて

次のディレクトリは直接マージされます AngularJS パブリック API とコンポーネントのメタデータは、ESM ディレクティブファクトリエクスポート名、CSS 名、カテゴリ、タイプ、デフォルトタグ、セレクター、バリアント、状態、ウィジェット、動作、およびプラットフォームを項目化します。これは注目のサンプルではありません。 506 個のアイテムはすべて同じ検索可能なディレクトリにあります。

AngularJS コンポーネントマニフェストを読み取り中…

Gardener Blazor プロジェクト

Gardener.Blazor は Gardener CSS 1.0.0 の公式 Razor クラスライブラリであり、現在のバージョンは 1.0.0 安定版。資産を安定させる net10.0 独立した NuGet コンシューマーでコンパイルおよび検証されています net11.0;Blazor Web App 静的 SSR、Interactive Server、Interactive WebAssembly、Auto、Standalone WebAssembly、Hybrid、および Desktop WebView に適用されます。

506 カミソリのコンポーネント 66 DOM の動作 75 ランタイムイベント 28 フレームタイプ 43 静的リソース

インストール、登録、および静的リソース

<PackageReference Include="Gardener.Blazor" Version="1.0.0" />

builder.Services.AddGardenerBlazor();

var app = builder.Build();
app.MapStaticAssets();

<link rel="stylesheet"
      href="_content/Gardener.Blazor/gardener.min.css" />

最初のインタラクティブレンダリング中にコンポーネントがオンデマンドでロードされる _content/Gardener.Blazor/gardener.blazor.js、手書きのスクリプトタグは必要ありません。あらゆるスタイルに加えて、 platforms/gardener.web.min.css、platforms/gardener.mobile.min.css、platforms/gardener.desktop.min.css、platforms/gardener.tauri.min.css、platforms/gardener.electron.min.css および 28 components/*.min.css コンポーネントドメインエントリ、すべての公式圧縮ファイルには外部ソースマップが含まれています。

コンポーネント、プロバイダー、および SSR

@using Gardener.Blazor.Components

<GardenerProvider Theme="garden" Mode="light" Shape="small"
                   Density="comfortable" Platform="web">
  <GAppShell>
    <GSidebar>ナビゲーション</GSidebar>
    <GMainRegion>
      <GCard>
        <GButton Variant="primary" @onclick="Save">保存</GButton>
      </GCard>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>

各 CSS コンポーネントには対応する G* デフォルトのセマンティックタグ、セレクター、状態、ウィジェット、動作、プラットフォーム、およびアクセシビリティメタデータを入力して保持します。静的 SSR フェーズは完全な HTML を直接出力し、対話型接続の確立後にのみ DOM 動作をマウントします。パラメーターの署名を変更するとマウントが更新され、コンポーネントがリリースされるとリスナーはログアウトされます。 GardenerComponent メタデータ名によって動的にレンダリングできます。GardenerBehavior ビヘイビアーはあらゆるコンテンツに添付できます。GardenerPart 合意されたコンポーネントクラスを出力するために使用されます。

共通パラメータ、refnum、およびフォーム

生成されたすべてのコンポーネントは 20 個のパラメータを共有します。As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

コンポーネントリファレンスには、6 つのインスタンスメンバーが提供されています。Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> 継承 InputBase<TValue>、サポート EditForm、EditContext、DataAnnotations、検証ステータス、入力、選択、テキストエリア。

値バインディング、75 個のイベントおよび 7 個の同期ガード

<GCard Value="@selection"
       ValueChanged="@(value => selection = value)"
       ValueEvent="selectionchange"
       ValueKey="value"
       EventNames="@events"
       PreventDefaultEvents="@guards"
       OnEvent="HandleEvent" />

@code {
  private object? selection;
  private readonly string[] events = [GardenerEvents.Selectionchange,
                                      GardenerEvents.Beforeopen];
  private readonly string[] guards = [GardenerEvents.Beforeopen];
  private Task HandleEvent(GardenerEventArgs args) => Task.CompletedTask;
}

Value/ValueChanged ネイティブ入力/変更を処理します。ValueEvent と ValueKey 複雑な CustomEvent の処理。値は .NET 文字列、ブール値、数値、配列、または辞書に変換されます。 DOM、File、BigInt、関数、循環参照は安全にシリアル化されます。 GardenerEvents.All 75 個のイベントをすべて公開します。GardenerEvents.Guards JS/.NET の非同期境界の前で同期的にブロックする必要がある beforeapproval、beforeclose、beforefilepicker、beforeopen、beforepromptstop、beforepromptsubmit、beforetabclose 7 つのガードイベントが公開されました。行動メンバーとイベント詳細契約は以下から入手できます。 GardenerRuntimeCatalog クエリ。

テーマ、サービス、およびデスクトップブリッジ

GardenerProvider テーマ、モード、ニュートラル、タイポグラフィ、形状、密度、エレベーション、モーション、プラットフォーム、Os 10 軸のネストされたテーマをサポートします。GardenerThemePresets.All 42 色のテーマが含まれており、デフォルトの白の背景が明るく、小さな丸い角が付いています。 5つのスコープサービスは次のとおりです。 GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService。デスクトップブリッジは、ホストプリロード層によって明示的に公開されたホワイトリストオブジェクトのみを呼び出し、ノードのグローバル機能を開きません。

完全なパブリック型と機械可読コントラクト

28 種類のフレームタイプは次のとおりです。GardenerAccessibilityDefinition、GardenerAssets、GardenerBehavior、GardenerBehaviorDefinition、GardenerBehaviors、GardenerComponent、GardenerComponentBase、GardenerConstants、GardenerElectronService、GardenerEventArgs、GardenerEventDefinition、GardenerEvents、GardenerField<TValue>、GardenerJsModule、GardenerOptions、GardenerPart、GardenerPlatform、GardenerProvider、GardenerRuntime、GardenerServiceCollectionExtensions、GardenerThemePresets、GardenerRuntimeCatalog、GardenerTauriService、GardenerThemeService、GardenerThemeState、GardenerToastService、GardenerValueChangedEventArgs、GardenerComponentDefinition。

Blazor パブリック API、コンポーネントのメタデータ、互換性、パフォーマンスどちらも JSON スキーマを閉じました。読みやすいドキュメントには次のものが含まれます API、66 の動作、75 イベント、43 静的リソース、ランタイム、アクセシビリティと SSR とアクセス制御を解除する。

1.0.0 リリースの品質

リリースビルドは警告 0 件、エラー 0 件で、506 個のコンポーネントすべてが実際の静的 SSR テストに合格しています。ブラウザマトリクスは Chromium、Firefox、WebKit、デスクトップ／モバイルのビューポート、キーボード操作、Axe による WCAG A/AA 監査を対象とし、CI では Firefox を必須としています。NuGet では分離キャッシュを使ってコンシューマーアプリを実際に publish し、Static Web Assets の endpoint manifest を検証します。さらに、独立した .NET 11 Preview パッケージコンシューマーも用意しています。実測値は、アセンブリ 343,552 B、静的アセット 43 ファイルで合計 7,608,327 B、CSS gzip 139,269 B、runtime gzip 25,989 B、Blazor bridge gzip 2,054 B です。nupkg は約 1.22 MiB で、6,000,000 B の厳格な上限を下回っています。DLL/XML の再現性も確認済みです。

cd blazor
npm run release:verify
npm run test:net11

506 個の Blazor コンポーネントすべて

次のディレクトリは直接マージされます Blazor パブリック API とコンポーネントのメタデータ、Razor タイプ、CSS 名、カテゴリ、タイプ、デフォルトタグ、セレクター、状態、バリアント、ウィジェット、動作、プラットフォーム、およびアクセシビリティコントラクトを項目別に示します。これは注目のサンプルではありません。 506 個のアイテムはすべて同じ検索可能なディレクトリにあります。

Blazor コンポーネントマニフェストを読み取り中...

設計原則

中立の優先順位デフォルトのスタイルは、個人、企業、バックエンド、コンテンツステーションに適しており、強力なブランドパーソナリティが事前に設定されていません。

小さな丸い角のデフォルト--g-radius-md 0.25rem に固定。カプセルとフィレットは、意味を明確にするためにのみ使用されます。

冗長性は不在よりも優れています再利用性の高い複雑な構造はコンポーネントまたはレシピとして存在し、毎回 AI を一時的に組み合わせる必要はありません。

セマンティクスと外観の分離原色、表示モード、濃度、フォント、形状、プラットフォームを個別に変更できます。

論理方向属性コンポーネントは、RTL 固有のカバレッジを減らすためにインライン/ブロック方向を優先的に使用します。

マシン検証可能コンポーネント、ユーティリティクラス、レシピ、およびランタイム機能にはマニフェストとビルドチェックがあります。

CSS レイヤーの順序

@layer gardener.reset,
       gardener.tokens,
       gardener.base,
       gardener.components,
       gardener.utilities,
       gardener.overrides;

プロジェクトのカスタムスタイルを記述することをお勧めします gardener.overridesセレクターの重みの増加を回避します。

テーマシステム

カラーテーマはメインのブランドカラーのみを担当します。表示モードは他のテーマ軸から独立しています。このサイトでは、白いドキュメントエクスペリエンスを維持するためにライトを使用していますが、フレームワークはダーク、システム、およびハイコントラストも提供します。

トピックリストを読んでいます...

トピック軸

プロパティ	利用可能な値	目的
`data-g-theme`	ガーデン、ブルー、バイオレットなど 42点	ブランドのメインカラー
`data-g-mode`	ライト、ダーク、システム、ハイコントラスト	表示モード
`data-g-neutral`	クール、ウォーム、グレー、インク、クリーム、ブループリント、紙	ニュートラルな背景とテキスト
`data-g-typography`	システム、企業、ヒューマニスト、エディトリアル、テクニカル、幾何学的、丸みを帯びた、クラシック、コンパクト、CJK	フォントの質
`data-g-shape`	シャープ、スモール、ミディアム、ソフト、ラウンド	形状とフィレット
`data-g-density`	コンパクト、スタンダード、快適、タッチ	濃度の制御
`data-g-elevation`	フラット、ボーダー付き、レイヤード、フローティング	境界線と影
`data-g-motion`	なし、穏やか、標準、迅速	アニメーションリズム
`data-g-platform`	ウェブ、モバイル、デスクトップ、タウリ、電子	プラットフォームの詳細
`data-g-os`	Windows、MacOS、Linux	デスクトップシステムの外観

<html
  data-g-theme="cobalt"
  data-g-mode="light"
  data-g-neutral="warm"
  data-g-typography="corporate"
  data-g-shape="small"
  data-g-density="compact"
  data-g-elevation="bordered"
  data-g-motion="calm"
  data-g-platform="electron"
  data-g-os="windows">

デザイントークン

コンポーネントはセマンティックトークンのみを消費します。ブランドのカスタマイズでは、コンポーネントルールをコピーするのではなく、トークンをオーバーライドする必要があります。

家族	例	説明
カラー	`--g-color-primary`、`--g-color-primary-text`	塗りつぶしの色が読み取り可能な前景色から分離されています
表面	`--g-color-canvas`、`--g-color-surface-raised`	キャンバス、普通、表面が盛り上がっている、わずかに凹んでいる
テキスト	`--g-color-text`、`--g-color-text-muted`	テキスト、弱体化およびサポートテキスト
セマンティクス	`--g-color-success`、`--g-color-danger-soft`	成功、警告、危険、情報、およびソフトな背景
間隔	`--g-space-0`…`--g-space-96`	半数オーダー、10 進オーダー、ピクセル値が含まれます
フォント	`--g-font-size-sm`、`--g-line-height-normal`	フォントサイズ、フォントの太さ、行の高さ、フォントファミリー
形状	`--g-radius-sm`…`--g-radius-full`	デフォルトの小さな丸い角、明示的に拡張可能
アニメーション	`--g-duration-fast`、`--g-ease-standard`	持続時間とイージング
階層	`--g-z-dropdown`、`--g-z-dialog`	フローティングレイヤー、ダイアログ、トーストなどの安定したスタッキングシーケンス。
レイアウト	`--g-header-height`、`--g-sidebar-width`	アプリケーションシェルのサイズ

部分的な適用範囲

.billing-area {
  --g-color-primary: #0f6f95;
  --g-color-primary-text: #0b5877;
  --g-radius-md: 0.25rem;
  --g-control-height-md: 2.25rem;
}

CSS 完全な API

このインデックスは次のように提供されています。 css/src/**/*.css 自動的に生成され、すべてのソースコードモジュール、セマンティッククラス、プリミティブセレクター、トークン、カスタムステートフック、データ属性、およびキーフレームをカバーします。ツールクラスについては、次のセクションの専用の完全なリストを使用してください。これはソースレベルのディレクトリであり、注目の例ではありません。

—ソースコードモジュール

—すべてのカテゴリ

—セマンティックセレクター

—トークン

上書きルール:各 g-* クラスは CSS フル API またはツールクラスのリストに表示される必要があります。各コンポーネント、ランタイム、およびページレシピも、それぞれのディレクトリに存在する必要があります。ビルド検証では、ディレクトリがソースコードから遅れることを避けるために、ファイルごとに SHA-256 を計算します。

すべての CSS インターフェースを検索

CSS インデックスを読み取り中…

すべてのソースコードモジュール

モジュールを展開すると、ファイルによって公開されるクラス、トークン、状態、データ属性、およびキーフレームが表示されます。生成ツールモジュールは、別の 11,498 アイテムのインベントリにリンクします。

モジュールリストを読み取っています...

ツール

すべてのツールで使用されます g- という接頭辞。 reactive プレフィックスは関数名の前に付けられます。 g-md-grid-cols-2。小数点はアンダースコアで書かれます。例: g-p-2_5;負の値を使用する g-neg-mt-4。

ブレークポイント	最小幅	一般的な端子
`g-sm-*`	480ピクセル	大型携帯電話
`g-md-*`	768ピクセル	タブレット
`g-lg-*`	1024ピクセル	小型デスクトップ
`g-xl-*`	1280ピクセル	標準デスクトップ
`g-2xl-*`	1536ピクセル	ワイドスクリーンワークベンチ

優先使用 start/end、x/y およびその他の論理方向ツール。物理的な向きが明示的に必要な場合にのみ使用してください left/right。

完全なツールリストを検索する

クラス名、完全なセレクター、CSS プロパティ、値、または応答条件を入力します。一度に 11,498 個のアイテムがレンダリングされるのを避けるには、一度に 100 個のアイテムをバッチで表示する前に、少なくとも 2 文字を入力します。入る g- コンテンツ全体をバッチごとに閲覧できます。未加工の JSON マニフェストAI やビルドツールによる直接読み取りに適したすべての項目が含まれています。

読み取りツールリスト...

レイアウトシステム

基本レイアウトはコンテナとグリッドを担当し、アプリケーションシェルは固定領域、スクロール境界、および端のフィッティングを担当します。複雑なページの場合は、多数の位置決めツールクラスを直接使用しないでください。

.g-コンテナ標準のページ幅と適応型の左右の余白。

.g-stack / .g-cluster垂直方向のフローとワードラップを水平方向に組み合わせたもの。

.g-grid-autoブレークポイントのないアダプティブカードグリッド。

.g-app-shellサイドバー、ページヘッダー、メインコンテンツ用のバックエンド基本シェル。

.g-mobile-shell上下のナビゲーションと安全エリア。

.g-デスクトップシェルタイトルバー、アクティビティバー、ワークベンチ、インスペクター、ステータスバー。

ダッシュボードの例

<main class="g-app-shell">
  <aside class="g-app-shell-sidebar">...</aside>
  <header class="g-app-shell-header">...</header>
  <section class="g-app-shell-main">
    <div class="g-dashboard-grid">
      <article class="g-kpi g-span-3">...</article>
    </div>
  </section>
</main>

24 / 12 完全なグリッドシステム

Gardener は、エンタープライズバックエンド、CMS、ファインフォームの主な互換プロトコルとして 24 ラスターを使用します。 .g-grid-12 従来の 12 グリッドを提供します。どちらもネイティブ CSS グリッド、論理方向、統合されたブレークポイントを使用し、負のマージンに依存しません。

24列12互換5 ブレークポイントRTLコンテナクエリ印刷

インターフェースの選択:.g-row と .g-grid-24 同等、24 グリッドに適しています。従来の 12 グリッドに使用する必要があります .g-grid-12 を親として使用します。列幅クラスは同じままで、AI は最初に親システムを決定するだけで済みます。

リアルタイム 24 グリッド

6 / 24

12 / 24

6 / 24

オフセット 4 + スパン 16

<div class="g-grid-24 g-gutter-4">
  <aside class="g-col-24 g-md-col-6">...</aside>
  <main class="g-col-24 g-md-col-12">...</main>
  <aside class="g-col-24 g-md-col-6">...</aside>
</div>

12グリッド対応

3 / 12

6 / 12

3 / 12

<div class="g-grid-12 g-gutter-3">
  <div class="g-col-12 g-md-col-3">...</div>
  <div class="g-col-12 g-md-col-6">...</div>
  <div class="g-col-12 g-md-col-3">...</div>
</div>

完全なクラス名マトリックス

機能	クラス名	範囲または説明
ルートコンテナ	`g-row`、`g-grid-24`、`g-grid-12`	24、24、12 列
列幅	`g-col-1`…`g-col-24`	スパン 1 ～ 24。 12 グリッドは 1 ～ 12 を使用します
自動と塗りつぶし	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	シングルレールの自動配置、行全体の充填、指定されたグリッド線からの残りの列の確定的な充填
デフォルトと行全体	`g-col`、`g-col-full`	両方が明示的に行全体を占めています
オフセット	`g-offset-0`…`g-offset-23`	論理インライン開始方向からのオフセット
明示的なグリッド線	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	複雑な不連続レイアウト
レスポンシブ	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	列、オフセット、開始行と終了行、表示状態、および余白はすべて応答します
シーケンス	`g-order-0`…`g-order-24`	5 速応答バージョンも利用可能
間隔	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
行の配置	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	列の交差軸の位置合わせを制御する
単一列の配置	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	単一列を上書きする
自動レイアウト	`g-row-dense`、`g-row-no-gutter`	密なパディングとゼロスペース
表示ステータス	`g-col-hidden`、`g-md-col-visible`	各ブレークポイントには非表示/表示があります
サブグリッド	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	ブラウザがサポートしている場合は親グリッドトラックを継承します
印刷	`g-print-col-1`…`g-print-col-24`	印刷オフセット、開始、終了、非表示、表示もあります

ブレークポイント

接頭辞	ビューポートの最小幅	例
`sm`	480ピクセル	`g-sm-col-12`
`md`	768ピクセル	`g-md-offset-4`
`lg`	1024ピクセル	`g-lg-col-start-7`
`xl`	1280ピクセル	`g-xl-gutter-6`
`2xl`	1536ピクセル	`g-2xl-col-8`

コンテナクエリ

コンポーネントの幅がビューポートではなくパネルによって決定される場合に、外側のレイヤーで使用します .g-grid-container、列は使用します g-cq-sm-col-*、g-cq-md-col-*、g-cq-lg-col-*。

<section class="g-grid-container">
  <div class="g-grid-24">
    <aside class="g-col-24 g-cq-md-col-8">...</aside>
    <main class="g-col-24 g-cq-md-col-16">...</main>
  </div>
</section>

RTL、ネスティングおよび印刷

オフセットとグリッド線は CSS 論理インライン方向に従います。で dir="rtl" は自動的に右から開始されるため、別のクラスのセットは必要ありません。
任意の列を再度配置できます g-row、g-grid-24 または g-grid-12、ネストされたラスターを形成します。
印刷面用 g-print-col-* 明示的な再配置。g-print-col-hidden 印刷すべきでない列を非表示にします。

機能リストラスターのシステム番号、列幅、オフセット、ブレークポイント、コンテナーブレークポイント、間隔、およびテスト行列を文書化します。独立したラスターサンプルページ24 時間 / 12 日の実際の検証、RTL、コンテナクエリおよび印刷構造用。ビルドチェックでは、いくつかの例をチェックするだけでなく、すべてのクラスを 1 つずつ検証します。

従来のエリアレイアウトシステム

2 番目のタイプの機能は、長期的に再利用されるページスケルトンを 16 のセマンティックレイアウトに固定します。エリアには一貫した論理方向に名前を付ける必要があります。 AI は最初に最も近いルートレイアウトを選択し、次にコンポーネントを入力する必要があります。グリッド、位置決め、モバイル側の折りたたみ CSS は再編成しないでください。

16パターンビューポート + コンテナRTL安全領域Tauri / Electron印刷

命名プロトコル:top / start / main / end / bottom は 5 つの共通領域です。start と end は書き込み方向により変化します。視覚的な左右の固定を必要とする特殊なキャンバスでは、一般的な論理セマンティクスを壊すことなく、独自の方向を明確にする必要があります。

リアルタイム 5 領域レイアウト

トップ

メインワークスペース

完成スケルトン16種類

レイアウト	ルートクラス	直接部品/適用可能なシナリオ
アッパー/メイン/ロワー	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`;一般的な Web サイトおよびドキュメントページ
始まり/メイン/終わり	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`; 3 列のコンテンツ
5つのエリア	`g-region-frame`	トップ/スタート/メイン/エンド/ボトム;ポータルと複雑な背景
聖杯	`g-holy-grail`	5 つの領域のセマンティックエイリアス。従来のレスポンシブ Web ページ
単一サイドバーアプリケーションシェル	`g-sidebar-shell`	トップ / スタート / メイン;ダッシュボードとCMS
二重サイドバー	`g-double-sidebar-layout`	開始/メイン/終了;エディター、管理コンソール
マスター/スレーブビュー	`g-master-detail`	`g-master`、`g-detail`;電子メール、連絡先、注文
リスト/詳細/検査者	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`;スーパー CMS
フッターが一番下に沈む	`g-sticky-footer-layout`	トップ/メイン/ボトム;短いコンテンツページ
固定ヘッダー	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
サイドバーを修正	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`;モバイル端末用 `is-open`
粘着補助バー	`g-sticky-aside-layout`	コンテンツ + `g-sticky-aside`;記事目次・決算概要
ドック作業台	`g-dock-layout`	`g-dock-top/start/main/end/bottom`; Tauri/ElectronのIDE
調整可能なコラム	`g-split-view`	`g-split-view-primary/secondary`;座標 `data-g-split-pane`
全画面ワークスペース	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`;キャンバス、メディア、AI アーティファクト
モバイルセーフゾーン	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`;PWA およびモバイル WebView

5つのエリアとマスター/詳細

<main class="g-region-frame">
  <header class="g-region-top">...</header>
  <nav class="g-region-start">...</nav>
  <section class="g-region-main">...</section>
  <aside class="g-region-end">...</aside>
  <footer class="g-region-bottom">...</footer>
</main>

<section class="g-master-detail">
  <nav class="g-master">...</nav>
  <article class="g-detail">...</article>
</section>

ドックと調整可能なコラム

<main class="g-dock-layout">
  <header class="g-dock-top">Toolbar</header>
  <aside class="g-dock-start">Explorer</aside>
  <section class="g-dock-main">Workspace</section>
  <aside class="g-dock-end">Inspector</aside>
  <footer class="g-dock-bottom">Status</footer>
</main>

<div class="g-split-view" data-g-split-pane data-g-min="160">
  <section class="g-split-panel g-split-view-primary">...</section>
  <div class="g-split-handle" role="separator"
       aria-label="両側のサイドパネルの幅を調整する"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

レスポンス、コンテナ、状態、変数

ビューポートが 768 ピクセルより小さい場合、複数列、マスター/詳細、およびインスペクターのレイアウトが意味的な順序で垂直に配置されます。 Dock はデフォルトでメイン領域のみを保持し、使用可能です is-start-open または is-end-open モバイルパネルを切り替えます。
カード、モーダル、またはズーム可能なワークベンチを埋め込む場合は、 g-region-container ラッピング; 768 ピクセルより小さいコンテナーは、ブラウザーウィンドウの幅に関係なく、独立して折りたたまれます。
is-start-collapsed、is-end-collapsed コントロールドック;g-region-panel is-collapsed 一般領域パネルを非表示にします。is-contained 固定、ドッキング、全画面レイアウトをプレビューまたはデザイナーに安全に埋め込めるようにしました。
合格した寸法 --g-region-min-block-size、--g-region-start-size、--g-region-end-size、--g-master-size、--g-list-size、--g-inspector-size、--g-dock-*-size 調整。
固定、スティッキー、フルスクリーン、およびカラムナーは、印刷時に通常のドキュメントフローにフラット化されます。仕切りハンドルは自動的に非表示になります。

機械可読機能リスト16 個のレイアウト、機能、およびテストマトリックスを項目別に示します。独立エリアのレイアウト例ページRTL、コンテナクエリ、固定エリア、ドック、分割ビュー、モバイルセーフエリア、および全画面ワークスペースをカバーします。既存の g-app-shell、g-mobile-shell、g-desktop-shell 互換性が維持され、ビジネスレベルのシェルとして引き続き使用できます。

クラシックレイアウトプリミティブ

クラス 3 機能は、22 の本質的に応答性の高いレイアウトプリミティブを提供します。これらはコンテンツと利用可能なスペースに応じて機能し、通常はページブレークポイントを必要としません。 AI は、レイアウトの意図に従ってプリミティブの選択を優先し、公開された変数を通じてサイズと間隔を調整する必要があります。

22 プリミティブ固有のレスポンシブコンテナクエリRTLモーションの軽減印刷

ツールクラスとの違い:ユーティリティクラスは個々の CSS プロパティを記述し、プリミティブは安定した空間関係を記述します。たとえば g-sidebar-layout AI がどのビューポートブレークポイントを使用するかを推測する必要がなく、コンテンツの最小幅に基づいてデュアルカラムからポートレートに自動的に切り替わります。

リアルタイム Bento とストリーミングプリミティブ

注目の8×2

トール4×2

タイル

ワイド

自動セパレートを撃退し安全なラインラッピング

クラスターラップ

22 個のプリミティブの完全なマトリックス

プリミティブ	ルートクラスとコンポーネント	目的と主要な変数
スタック	`g-stack`、`is-split`、`g-stack-split`	縦方向のリズム。`--g-stack-gap`
クラスター	`g-cluster`	ラベル、ボタン、メタデータのラップ。ギャップ / 整列 / 位置揃え
センター	`g-center`、`is-intrinsic`	読み取り幅、レベル、またはコンテンツセンター。最大/ガター
サイドバー	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	サイドバーがコンテンツの幅に合わせて折りたたまれました。サイズ/コンテンツ最小/ギャップ
スイッチャー	`g-switcher`	スペースが不十分な場合は、水平方向から垂直方向にカットします。しきい値/ギャップ
カバー	`g-cover`、`g-cover-center`	ビューポートまたはコンテナの中央にあるコンテンツ。分/パディング
リール	`g-reel`	カードとメディアトラックの水平スクロール。アイテムサイズ/ギャップ
フレーム	`g-frame`	固定比率およびトリミングされたメディア。比率/フィット/位置
メディアオブジェクト	`g-media-object` + メディア / ボディ / アクション	アバター、テキスト、端末操作。`is-end`、`is-stacked`
グリッドの自動フィット	`g-grid-auto-fit`、`g-grid-auto`	コンテンツが小さい場合、空のトラックを折りたたむ。最小/ギャップ
グリッドの自動塗りつぶし	`g-grid-auto-fill`	カードスロットの固定に適した空のレール位置を維持します。最小/ギャップ
ブリード	`g-bleed`、`is-full`	画像と引用がテキスト幅を超えています。サイズ/最大
撃退	`g-repel`	タイトルとアクションは両端で分離されており、折り返すことができます。隙間/整列
詐欺師	`g-imposter-container` + `g-imposter`	サイズ不明のセンターレイヤー。`is-fixed`、マージン/最大
オーバーレイ	`g-overlay-layout` + ベース/レイヤー	メディアオーバーレイツール、注釈、ステータス。整列/両端揃え/マージン
石積み	`g-masonry`	可変高さのコンテンツ列。カラム/分/ギャップ、狭いコンテナの単一カラム
お弁当	`g-bento` + ワイド / フル / トール / 注目	マーケティング、ダッシュボードの不均一なカード。行最小/ギャップ/スパン
アスペクト比	`g-aspect-ratio` + スクエア / ポートレート / 風景 / ビデオ / シネマ	強制切断のないユニバーサルプロポーショナルボックス
スクロールエリア	`g-scroll-area`、`is-block`、`is-inline`	独立した巻物の所有者。最大/オーバースクロール
スクロールスナップ	`g-scroll-snap` + `g-scroll-snap-item`	水平または `is-block` スナップリスト;サイズ / 厳密さ / 整列
安全領域	`g-safe-area`、`is-padded`	ノッチ、丸い画面、ホームインジケーターの四面保護
粘着領域	`g-sticky-region`、`is-bottom`、`is-surface`	スクロール領域の論理上端/下端の吸着。オフセット/z

よく使われる組み合わせ

<section class="g-stack" style="--g-stack-gap:var(--g-space-6)">
  <header class="g-repel">
    <h2>Page title</h2>
    <div class="g-cluster">...actions...</div>
  </header>
  <div class="g-sidebar-layout">
    <aside>Filters</aside>
    <main class="g-grid-auto-fit">...cards...</main>
  </div>
</section>

メディアオブジェクト、オーバーレイ、スクロール

<article class="g-media-object">
  <img class="g-media-object-media" alt="" src="avatar.png">
  <div class="g-media-object-body">...</div>
  <button class="g-media-object-action">Open</button>
</article>

<figure class="g-overlay-layout">
  <img class="g-overlay-base" alt="...">
  <figcaption class="g-overlay-layer">Caption</figcaption>
</figure>

<div class="g-scroll-area" tabindex="0" aria-label="Activity">
  <header class="g-sticky-region is-surface">Activity</header>
  ...long content...
</div>

対応と環境のルール

サイドバー、スイッチャー、自動フィット/フィル自体は、デバイスの幅とは関係なく、利用可能なスペースに応じて応答します。
g-layout-container コンポーネントコンテナを作成します。 640 ピクセルより小さい場合、メディアオブジェクト、メーソンリー、および Bento は個別に折りたたまれます。ビューポートには 640 ピクセルのマージンも用意されています。
すべての水平セマンティクスはインライン/開始/終了を使用します。メディアオブジェクト、ブリード、インポスター、オーバーレイ、リール、およびスクロールスナップは RTL をサポートします。
スクロール可能な領域はキーボードでフォーカス可能であり、アクセス可能な名前を提供する必要があります。 Reduced Motion は、プリミティブのスムーズなスクロールを抑制します。
リール、スクロール領域、スクロールスナップ、メーソンリー、インポスター、オーバーレイ、およびスティッキー領域は、コンテンツが切り取られるのを避けるために、印刷時に自動的に平坦化されます。

機能リスト22 個のプリミティブ、エイリアス、環境プロパティ、およびテスト行列をすべて登録します。スタンドアロンのプリミティブのサンプルページ固有の応答、RTL、コンテナクエリ、Bento、Masonry、スクロールスナップ、セーフエリア、および印刷構造をカバーします。すでに g-grid-auto と g-sidebar-layout インターフェイスの互換性は維持されます。

ページレベルのパブリックコンポーネント

カテゴリ 4 の機能は、再利用性の高い 23 のページ構造と状態を提供します。これらはレイアウトスケルトンとビジネスコンポーネントの間に配置され、タイトル、アクション、コンテキスト、フィルター、バッチ選択、スクロールアクション、例外結果を統合するため、AI が各ページの共通領域を再構築する必要がなくなります。

23パターンコンテナクエリ粘着性 + 固定安全領域RTL印刷

ステータス要件:ページは通常のデータ状態のみを実装できません。少なくとも「Loading」、「Empty」、「Error」が明確である必要があります。ルーティングおよび完全なアプリケーションの場合は、403、404、500、オフライン、およびメンテナンスも準備する必要があります。 Gardener は、これらの状態に対して同じコンテンツ、ビジュアル、詳細、アクション、およびヘルプウィジェットを提供します。

リアルタイムページヘッダーとパブリック列

3 個のアイテムが選択されました

23 の完全なモード

モード	ルートクラス	部品、状態、用途
ページヘッダー	`g-page-header`	メイン / 眉毛 / タイトル / 説明 / メタ / アクション;コンパクト、中心、粘着性
セクションヘッダー	`g-section-header`	メイン/タイトル/説明/アクション;デフォルト、ボーダーレス
サブヘッダー	`g-subheader`	タイトル/アクション;ページ内の 2 番目のコンテキストバー
ツールバー	`g-toolbar`	開始/中央/終了/タイトル/区切り文字;コンパクト、スティッキー、スクロール可能
アクションバー	`g-action-bar`	`g-action-bar-main`;フォームおよびページ末尾の操作
ステータスバー	`g-status-bar`	セクション/テキスト/ `is-end`;エディタとデスクトップのステータス
コマンドバー	`g-command-bar`	グループ/アイテム/ショートカット;水平コマンドとショートカットキー
コンテキストバー	`g-context-bar`	コンテンツ/アクション。情報、成功、警告、危険
フィルターバー	`g-filter-bar`	メイン/アクション;粘着フィルターエリア
バルクアクションバー	`g-bulk-action-bar`	カウント / アクション;アクティブ、空、非表示
フッターバー	`g-footer-bar`	フッターアクション、ログ統計およびページング
フローティングアクションバー	`g-floating-action-bar`	中心、端、含まれる。安全地帯への適応
トップに戻る	`g-back-to-top`	`data-g-scroll-top` 自動的に表示、スクロール、フォーカスを復元する
テキスト付きの仕切り	`g-divider`	`g-divider-text`;中心、開始、終了、垂直
スティッキーアクション	`g-sticky-actions`	`g-sticky-actions-main`;フォーム下部のスクロールアクション
ページの読み込み中	`g-page-loading`	コンテンツ/タイトル/説明。含まれている、完全な、オーバーレイ
ページが空です	`g-page-empty`	空のリスト、初めて使用、検索結果なし
ページエラー	`g-page-error`	リクエスト失敗、再試行、オプションの技術詳細
403	`g-page-forbidden`	権限が不十分です。権限を申請して入り口に戻ります
404	`g-page-not-found`	ルーティングの失敗、検索およびホームページのエントリ
500	`g-page-server-error`	サーバーエラー、リクエスト数、および再試行
オフライン	`g-page-offline`	オフラインステータス、ローカルデータセキュリティおよび再接続
メンテナンス	`g-page-maintenance`	メンテナンス時間枠、推定復旧時間、およびステータスページ

ページヘッダーとツールバー

<header class="g-page-header">
  <div class="g-page-header-main">
    <div class="g-page-header-eyebrow">Workspace</div>
    <h1 class="g-page-header-title">Content</h1>
    <p class="g-page-header-description">...</p>
  </div>
  <div class="g-page-header-meta">...</div>
  <div class="g-page-header-actions">...buttons...</div>
</header>

<div class="g-toolbar" role="toolbar" aria-label="ページツール">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

ページのステータス構造を統合する

<main class="g-page-not-found">
  <div class="g-page-state-content">
    <div class="g-page-state-code">404</div>
    <h1 class="g-page-state-title">ページが存在しません</h1>
    <p class="g-page-state-description">リンクの有効期限が切れている可能性があります。</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">ホームページに戻る</a>
    </div>
  </div>
</main>

応答、実行時間、および印刷

ビューポート内または g-page-component-container サイズが640px未満の場合、ページヘッダーの操作領域が次の行に移動し、ツールバーの中心が専用の行を占有し、コンテキストバーの操作領域が完全に折り返されてしまいます。
すべての開始、終了、およびアクションの位置合わせでは論理方向が使用されます。フローティングアクションバー、[トップに戻る] もデバイスのセーフエリアを読み取ります。
トップに戻る既存のものを使用する data-g-scroll-top 実行時、表示はスクロール位置に基づいて行われ、クリックするとスムーズに先頭に戻ります。 Reduced Motion 環境では、インスタントスクロールが自動的に使用されます。
インタラクションバー、フィルター、ロードマスク、フローティングボタンは印刷時に非表示になります。ヘッダーと結果ページはフラット化され、エラーの説明とリクエスト番号は引き続き保持されます。
ページステータスのビジュアル、コード、タイトル、説明、詳細、アクション、およびヘルプコンポーネントは必要に応じて省略できますが、タイトルと復元可能なエントリを同時に省略してはなりません。

機能リスト23 のページモード、ランタイムおよびテストマトリックスを登録します。スタンドアロンページコンポーネントの例すべてのヘッダー、共通フィールド、Loading、Empty、Error、403、404、500、Offline、Maintenance、Container Query、および Back to Top をカバーします。

ヒントとヘルプシステム

カテゴリ 5 の機能は、プロンプト、説明、ガイダンス、および継続的なサポートの 28 モードを提供します。このシステムは、侵入量の少ないインラインヘルプ、インタラクションを必要とするフローティングレイヤー、複雑な製品ガイダンス、ヘルプセンター、デバッグパス、AI が一時的にツールチップをまとめるだけのコンテンツフィードバックもカバーしています。

28パターン3 つのランタイム衝突を認識キーボードRTL印刷

選択順序:コンテンツをブロックしない補足コンテンツには、ヘルプテキスト、インラインヒント、またはヒントを使用します。コントロールをバインドする必要がある場合はツールチップを使用します。リンクや操作を含める場合はヘルプポップオーバーを使用します。ツアーをクロスステップティーチングに使用します。重要なエラーや必読の法的情報をフローティングレイヤーに隠さないでください。

リアルタイムヘルプパッケージ

保存する前に、すべてのデバイスの幅をプレビューで確認できます。

この説明は役に立ちましたか?

28 の完全なモード

モード	ルートクラス	目的と主要コンポーネント
ヒント	`g-tip`	デフォルト、情報、成功、警告、危険。コンパクトスキル
インラインヒント	`g-inline-hint`	テキストまたはコントロールの横にある短い説明
ヘルプテキスト	`g-help-text`	フィールドの下に永続的な説明が表示されます。成功、警告、危険のセマンティクス
ヘルプトリガー	`g-help-trigger`	円形の疑問符の入り口。ホバー、フォーカス表示
ツールチップ	`g-tooltip`	`data-g-tooltip`;ホバー、フォーカス、エスケープ、およびアリアの説明
豊富なツールチップ	`g-tooltip-rich`	タイトル/説明。まだインタラクティブではない
ヘルプポップオーバー	`g-help-popover`	ヘッダー/タイトル/本文/アクション;クリック、外部クローズ、エスケープ
定義	`g-definition`	用語、略語、業界概念の説明ポータル
吹き出し	`g-callout`	アイコン/タイトル/コンテンツ; 5つのセマンティックカラー
注記	`g-note`	ドキュメントのコメント、互換性に関する注記、および欄外事項
する/しないでください	`g-guidance-pair`	行う/しない/ラベルを付ける。サイドバイサイド仕様例
キーヒント	`g-key-hint`	単一キーまたはキーの組み合わせのキー
ショートカット一覧	`g-shortcut-list`	アイテム/キー;コマンドとショートカットキーの比較
ヘルプカード	`g-help-card`	アイコン / タイトル / 説明 / アクション
ヘルプパネル	`g-help-panel`	ヘッダー/ボディ/フッター。ダッシュボードとデスクトップインスペクター
ヘルプセンター	`g-help-center`	ヘッダー/タイトル/説明/検索
ヘルプトピック	`g-help-topics`	トピック/タイトル/メタ;トピックグリッドに自動的に応答します
よくある質問	`g-faq`	項目/質問/回答; Accordion ランタイムを再利用する
コンテキストヘルプ	`g-contextual-help`	現在のページまたはフォームのコンテキストにバインドされたヘルプ
コーチマーク	`g-coach-mark`	タイトル / 説明 / アクション;シングルポイント機能ティーチング
ガイド付きツアー	`g-tour`	ステップ/進行状況/アクション;次へ、前へ、スキップ、完了、エスケープ
スポットライト	`g-spotlight`	ツアーはターゲットの場所を自動的に追跡し、ページをマスクします
ホットスポット	`g-hotspot`	ラベル。パルスホットスポット、Reduced Motion自動静止
機能のヒント	`g-feature-hint`	バッジ/タイトル/説明。新機能のインプレースプロンプト
新機能	`g-whats-new`	アイテム/マーカー/タイトル/説明;バージョンアップデートの概要
ヘルプチェックリスト	`g-help-checklist`	アイテム/マーカー;保留中、完了
トラブルシューティング	`g-troubleshooting`	ステップ / 番号 / タイトル / 説明;シーケンスのトラブルシューティング
ヘルプのフィードバック	`g-help-feedback`	アクション。コンテンツが有用かどうか、アップグレードエントリをサポートしているかどうか

ツールチップとヘルプのポップオーバー

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="リリースステータスを理解する">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    公開後に訪問者に表示される変更
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>検証が必要なのはなぜですか?</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">ドメイン名の所有権</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

宣言型ガイド付きツアー

<button data-g-tour-open="publish-tour">起動を開始します</button>
<div id="publish-tour" class="g-tour" data-g-tour hidden>
  <span class="g-tour-progress" data-g-tour-progress></span>
  <section class="g-tour-step" data-g-target="#preview">...</section>
  <section class="g-tour-step" data-g-target="#publish" hidden>...</section>
  <footer class="g-tour-actions">
    <button data-g-tour-skip>スキップ</button>
    <button data-g-tour-prev>前のステップ</button>
    <button data-g-tour-next>次のステップ</button>
  </footer>
</div>

ランタイム、アクセシビリティ、および環境のルール

ポインターをホバーしてキーボードにフォーカスするとツールチップが表示され、自動的に書き込まれます role="tooltip" と aria-describedby;コンテンツにはクリック可能なコントロールが含まれていてはなりません。
インタラクティブコンテンツのポップオーバー、自動同期 aria-expanded、aria-controls、外部クリックとエスケープ終了をサポートします。
フローティングレイヤーは、上/下/開始/終了および開始/中央/終了の位置合わせをサポートします。スペースが不十分な場合は、自動的に反転し、ビューポートに限定されます。 RTL は論理方向を交換します。
ツアーはステップ、進行状況、目標のスポットライト、前へ/次へ/スキップ/完了を自動的に維持し、フォーカスの復元をトリガーします。目標ステップは中央に表示されません。
モバイルガイダンスペアは自動的に 1 列になり、ヘルプパネルは上枠に変更されました。 Reduced Motion はホットスポットパルスとスポットライトトランジションをオフにします。
ツールヒント、ポップオーバー、ツアー、スポットライト、ホットスポット、フィードバックアクションを印刷および非表示にし、ヒント、吹き出し、メモ、トラブルシューティングテキストを保持します。

機能リスト28 個のモード、8 種類の浮動小数点位置、3 つの共有ランタイムとテスト行列をすべて登録します。スタンドアロンヘルプシステムの例すべてのルートクラス、RTL/モバイルレスポンシブ、ツールチップ、ポップオーバー、FAQ、および 2 ステップツアーをカバーします。

伝統的な組み合わせを形成する

カテゴリ 6 の機能は、基本的なコントロールを 37 の安定したフォーム構造に高め、通常の Web ページ、モバイルフォーム、ダッシュボード設定ページ、CMS エディター、および Tauri/Electron インスペクターをカバーします。フィールドのラベル、説明、検証、ビジネスのグループ化、動的な追加と削除、最終送信のための明確なインターフェイスがあります。

37パターン5 ランタイムコンテナクエリ検証RTL印刷

セマンティック要件:プレースホルダーはラベルを置き換えることはできません。必須のエラーおよびヘルプ情報は、色だけでは表現できません。関連するチェックボックス/ラジオは、凡例を含むフィールドセットに入れる必要があります。フィールドレベルのエラーと検証概要は、送信が失敗した後に提供される必要があります。

リアルタイム組み合わせ例

サイト情報

分野の構造、事業の選択、進捗状況は一貫したままです。

保存しました

サイト名必須

ブラウザのタイトルに表示13 / 60

リリースパス

/

解除方法

すぐに解放してくださいプリフライトの完了後に製品バージョンに切り替えます。リリース予定サイトのタイムゾーンごとに公開を実行します。

データ補完72%

37 の完全なモード

モード	ルートクラス	目的と主要コンポーネント
フォーム	`g-form`	統一された垂直リズム。デフォルト、枠付き
フォームセクション	`g-form-section`	ヘッダー/タイトル/説明。長い形式のパーティション
フィールド	`g-field`	ヘッダー/メタ/必須/オプション。ラベル、コントロール、説明
フィールドセット	`g-fieldset`	凡例/説明。セマンティック関連フィールドグループ
フォーム行	`g-form-row`	最小フィールド幅で折り返す
フォームグリッド	`g-form-grid`	2/3/4 列、フルスパン。確定的なフォームグリッド
横型フォルム	`g-form-horizontal`	固定ラベル列 + 柔軟な制御列
インラインフォーム	`g-form-inline`	フィルター、検索、コンパクトな提出ポートフォリオ
コンパクトなフォルム	`g-form-compact`	ダッシュボード、デスクトップインスペクター高密度フォーム
入力グループ	`g-input-group`	`g-input-addon`;ボタン、選択、および入力のスプライシング
入力接辞	`g-input-affix`	開始/終了;通貨、単位、静的アイコン
検索フィールド	`g-search-field`	アイコン/アクション;検索入力の標準構造
パスワードフィールド	`g-password-field`	`data-g-password-toggle`;表示/非表示とカーソル保持
クリア可能なフィールド	`g-clearable-field`	`data-g-clear-input`;クリア、入力/変更イベント、フォーカス復元
キャラクターカウンター	`g-character-field`	カウント;デフォルト、限界に近い、限界を超えています
検証状態	`g-validation-state`	メッセージ;成功、警告、危険、エラー
検証の概要	`g-validation-summary`	タイトル/リスト;送信失敗後のフィールドへのリンク
チェックボックスグループ	`g-check-group`	スタック、インライン。複数のオプションのグループ化
無線グループ	`g-radio-group`	スタック、インライン。単一オプションのグループ化
スイッチ列	`g-switch-row`	コンテンツ / タイトル / 説明。設定ページ切り替え
チョイスカード	`g-choice-group`	カード / タイトル / 説明。パッケージとプランの選択
名前グループ	`g-name-group`	姓/名または名/姓の二重フィールド、内容に応じて順序を調整できます
アドレスグループ	`g-address-group`	路線/都市/地域/郵便; 6トラックのビジネスレイアウト
電話グループ	`g-phone-group`	国番号、番号、内線番号
マネーグループ	`g-money-group`	通貨 + 金額、論理方向の角丸
日付範囲	`g-date-range-group`	開始日、区切り文字、終了日
時間範囲	`g-time-range-group`	開始、区切り文字、終了時刻
単位フィールド	`g-unit-field`	数値+固定/任意単位
範囲フィールド	`g-range-field`	範囲 + 出力;リアルタイム数値表示
ファイルフィールド	`g-file-field`	コントロール/名前;単一のファイル選択行
反復可能なフィールド	`g-repeatable-field`	リスト/アイテム/コンテンツ/アクション;テンプレートの追加と削除、最小/最大、インデックス
条件付きフィールド	`g-conditional-field`	コントローラー/ショーホイン;表示、非表示、不活性
フォームアクション	`g-form-actions`	終了、開始、間、粘着性。セーフエリア
自動保存ステータス	`g-autosave-status`	アイドル、保存、保存、エラー
フォームの進行状況	`g-form-progress`	メタ/トラック/値;完成度を記入してください
フォームのレビュー	`g-form-review`	行/ラベル/値/編集;提出前にレビューする
同意グループ	`g-consent-group`	タイトル/説明。条件、承認および確認

レイアウトとフィールドの組み合わせ

<form class="g-form g-form-container">
  <section class="g-form-section">
    <header class="g-form-section-header">...</header>
    <div class="g-form-row">
      <div class="g-field">
        <div class="g-field-header">
          <label class="g-label" for="name">名前</label>
          <span class="g-field-required">必須</span>
        </div>
        <input class="g-input" id="name" required>
        <div class="g-field-meta">...help and count...</div>
      </div>
    </div>
  </section>
  <footer class="g-form-actions is-sticky">...</footer>
</form>

5 種類の宣言型ランタイム

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">パスワードを表示</button>
</div>

<div class="g-character-field" data-g-character-count="200">
  <textarea class="g-textarea" maxlength="200"></textarea>
  <output class="g-character-count" data-g-character-output></output>
</div>

<div class="g-conditional-field" data-g-conditional-field
     data-g-controller="#delivery" data-g-show-when="shipping">...</div>

<div class="g-repeatable-field" data-g-repeatable-field
     data-g-min-items="1" data-g-max-items="5">
  <div class="g-repeatable-list" data-g-repeatable-list>...</div>
  <button data-g-repeatable-add type="button">追加</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

応答性、アクセシビリティ、および印刷

g-form-container 640px コンテナクエリを構築します。フォームグリッド、水平方向、名前、およびアドレスの組み合わせは、ビューポートルールをフォールバックとして、埋め込み CMS パネル内で個別に折りたたむことができます。
すべての組み合わせで論理方向属性が使用されます。入力グループ、マネー、ユニット、フィールドアクション、およびスティッキーアクションは、RTL の下で正しい先頭と末尾の関係を維持します。
パスワードの切り替え同期 aria-pressed アクセシブルな名前を使用して入力/変更をディスパッチします。入力をクリアします。文字数は Unicode 文字をカウントします。
条件付きフィールドは、非表示時に、hidden、inert、aria-hidden を同時に設定します。反復可能なフィールドは、最小/最大、テンプレートインデックス、新しいコントロールの自動初期化、および削除後のフォーカスの回復をサポートします。
Reduced Motion は保存アニメーションを減らします。隠しパスワード、クリア、追加、削除、送信アクションを出力し、フィールド値、検証および監査情報を保持します。

機能リスト37 の組み合わせ、5 つのランタイム、および完全なテストマトリックスを登録しました。独立形式の組み合わせ例すべてのルートクラス、ビジネスフィールドグループ、動的な追加と削除、条件付き表示、コンテナ応答、RTL、および印刷をカバーします。

従来のナビゲーションの組み合わせ

カテゴリ 7 機能は、公開 Web サイト、エンタープライズポータル、ダッシュボード、スーパー CMS、モバイル Web、および Tauri/Electron デスクトップをカバーする 38 の安定したナビゲーションモードを提供します。グローバル、ローカル、階層、選択、ページはめ込み、ページめくり、プロセス、モバイル、コマンド、および ID エントリはすべて既製の構造を備えており、AI がナビゲーション CSS を一時的に再構成する必要はありません。

38パターン9 つの再利用可能なランタイムキーボード安全領域RTL印刷

選択順序:まずナビゲーション範囲 (グローバル、ローカル、階層、またはページ内) を決定し、次に方向とターミナルを決定します。タブは同じコンテキスト内でビューを切り替えるだけ、ブレッドクラムは位置を表すだけ、ページネーションは結果セットのページ送りを表すだけであり、相互に置き換えるべきではありません。

リアルタイム組み合わせ例

38 の完全なモード

家族	パターンとルートクラス	目的
グローバル	ナビゲーションバー `g-navbar`	ブランド、センターゾーン、テールの操作と動作の切り替え
	プライマリー `g-primary-nav`	製品の最も重要な第 1 レベルの入り口
	ユーティリティ `g-utility-nav`	ヘルプ、ステータス、言語、ログインなどの補助入口
	サブナビゲーション `g-subnav`	製品エリア、チャネル、またはオブジェクト内の二次ナビゲーション
パーシャルおよびデスクトップ	サイドバー `g-sidebar`	ダッシュボードと CMS の永続サイドバー
	折りたたみ可能 `g-collapsible-nav`	`data-g-nav-toggle`;エリアとモバイルメニューを折りたたむ
	ナビゲーションレール `g-nav-rail`	`data-g-roving-nav`;狭いトラックと方向キーのフォーカス
	アクティビティバー `g-activitybar`	Tauri/Electron ワークベンチのメイン機能切り替え
	メニューバー `g-menubar`	デスクトップのファイル/編集/表示タイプのメニューバー
階層とメニュー	メガメニュー `g-mega-menu`	大規模敷地多柱エントランス
	ドロップダウン `g-dropdown`	ボタンメニュー;矢印、ホーム、エンド、エスケープ
	コンテキストメニュー `g-context-menu`	`data-g-context-menu`;右クリック、Shift+F10、ビューポートのオーバーフロー防止
	ツリーナビゲーション `g-tree-nav`	`data-g-tree`;無制限のレベル、拡張キー、矢印キー
場所と選択	ブレッドクラム `g-breadcrumb`	現在の場所と祖先のパス
	タブ `g-tabs`	`data-g-tabs`;同一レイヤービューの切り替え
	垂直タブ `g-vertical-tabs`	設定ページとインスペクターの縦向きビュー
	セグメント化 `g-segmented`	少数の相互排他的な表示方法
	ピルナビゲーション `g-pill-nav`	カテゴリ、ステータス、およびコンテンツチャネル
	アンカーナビゲーション `g-anchor-nav`	静的記事ディレクトリ
	スクロールスパイ `g-scrollspy-nav`	`data-g-scrollspy`;現在位置をスクロールと同期します
結果セット	ページネーション `g-pagination`	総ページ数が既知の数値ページング
	カーソルのページネーション `g-cursor-pagination`	API カーソルと前/次のバッチ
	もっと読み込む `g-load-more-nav`	モバイルフィードとプログレッシブ読み込み
プロセスとドキュメント	ステッパー `g-stepper`	ショートプロセスの進行状況
	ウィザードのナビゲーション `g-wizard-nav`	長いプロセスステップのディレクトリとコンテンツ領域
	戻るナビゲーション `g-back-nav`	上位レベルのオブジェクトまたはリストに戻る
	前へ / 次へ `g-prev-next-nav`	一連の記事、チュートリアル、および詳細
	ナビゲーションをスキップ `g-skip-nav`	キーボードユーザーに対して繰り返しのナビゲーションがスキップされる
モバイル端末	モバイルトップ `g-mobile-top-nav`	リターン、タイトル、末尾のアクション
	下部のナビゲーション `g-bottom-nav`	3 ～ 5 つのモバイルの第 1 レベルの目的地と安全エリア
	モバイルタブバー `g-mobile-tab-bar`	モバイルアプリケーションのトップレベルラベル
	ドロワーのナビゲーション `g-drawer-nav`	小さな画面の横スライドナビゲーションとフォーカス回復
コマンドとアイデンティティ	コマンドパレット `g-command-palette`	グローバル検索コマンドエントリ
	コマンドナビゲーション `g-command-nav`	インラインコマンドリストとショートカットキー
	ジャンプナビゲーション `g-jump-nav`	`data-g-jump-nav`;長いページの章にジャンプするには選択してください
	クイックナビゲーション `g-quick-nav`	最近、お気に入り、よく使用するエントリ
	ロケールナビゲーション `g-locale-nav`	言語、地域、サイトのバージョン
	アカウントのナビゲーション `g-account-nav`	ユーザー、組織、設定、および終了

5 つの新しい宣言的動作

<button data-g-nav-toggle="mobile-menu">メニュー</button>
<aside class="g-drawer-nav" id="mobile-menu" hidden>...</aside>

<nav class="g-nav-rail" data-g-roving-nav data-g-orientation="vertical">...</nav>

<div data-g-context-menu>
  <div data-g-context-target tabindex="0">...</div>
  <ul class="g-context-menu" data-g-context-menu-panel hidden>...</ul>
</div>

<nav class="g-scrollspy-nav" data-g-scrollspy
     data-g-scrollspy-root="scroll-container" data-g-scrollspy-offset="96">...</nav>

<label class="g-jump-nav" data-g-jump-nav>
  <select><option value="#section-id">章</option></select>
</label>

アクセシビリティ、応答性、および環境のルール

現在のページの使用状況 aria-current="page"、現在のページ位置が使用されます aria-current="location"、タブの使用 aria-selected;色だけに頼らないでください。
Roving Nav は、横向き/縦向き、RTL、4 方向キー、ホームおよびエンドをサポートします。コンテキストメニューは、マウスの右ボタン、キーボードのメニューキー、Shift+F10、Escape、およびフォーカスの回復をサポートしています。
g-nav-container 640px コンテナーの応答性を構築します。ナビゲーションバー、垂直タブ、ウィザードは、CMS スロットまたはデスクトップインスペクター内で個別に折りたたむことができます。
ボトムナビゲーションとモバイルタブバーの処理 safe-area-inset-bottom;ドロワーは論理方向を使用し、RTL で右から入力します。
Reduced Motion により、ドロワー、ツリー、スキップリンクのトランジションがオフになります。強制カラーは、現在のアイテムのアウトラインを明示的に提供します。印刷すると、操作ナビゲーションが非表示になり、ブレッドクラム、ドキュメントの前後ページ、およびプロセス情報が保持されます。

機能リスト38 のナビゲーションモード、11 のナビゲーションファミリ、9 種類の再利用ランタイム、および完全なテストマトリックスを登録します。独立したナビゲーションの例グローバル、階層、選択、メニュー、ページ内、プロセス、モバイルおよびデスクトップのナビゲーションをカバーし、キーボードと右クリックの操作を直接テストできます。

データ表示と操作の組み合わせ

カテゴリ 8 機能は 48 の安定したデータモードを提供し、「データ表示」と「データ操作」を同じ一連のコントラクトとして扱います。通常の Web サイト、ダッシュボード、スーパー CMS、モバイルリスト、分析レポート、Tauri/Electron 高密度ワークベンチはすべて、テーブル、レコード、リスト、階層、フロー、インジケーター、ビジュアライゼーション、プラン、スペース、または操作モードを直接選択できます。

48パターン8 つの再利用可能なランタイム粘着性/積み重ねキーボードグリッドRTL印刷

選択順序:最初にデータ形式を決定し、次に操作強度を決定します。少数の静的属性には説明リストまたはキー値を使用します。複数のレコードにはリストまたはテーブルを使用します。データグリッドは、セルにキーボードの移動と編集が必要な場合にのみ使用します。階層データにはツリーまたはツリーテーブルを使用します。傾向と比較では、最初に読み取り可能な値が提供され、次にグラフィックが追加されます。

リアルタイム組み合わせ例

2,480公開されました

128審査待ち

6リスク項目

ページ	ステータス	訪問数
企業のホームページ	公開されました	28,420
プロダクトセンター	審査中	16,208

48 の完全なモード

家族	パターンとルートクラス	目的と主要な機能
テーブル	テーブル `g-table`	基本的な意味テーブル。ストライプ、ホバー、コンパクト
	レスポンシブテーブル `g-responsive-table`	水平スクロール、モバイルカーディング、最初と最後の列のスティッキー
	データグリッド `g-data-grid`	ARIA グリッド、十字キー、ホーム/エンド
	編集可能なグリッド `g-editable-grid`	編集可能セル、編集中、無効です
	ツリーテーブル `g-tree-table`	インデントレベル、親子行展開
	グループ化されたテーブル `g-grouped-table`	地域、日付、種類ごとにグループ化
	拡張可能なテーブル `g-expandable-table`	詳細行と `g-row-disclosure`
	比較表 `g-comparison-table`	パッケージ、バージョン、機能の水平比較
	ピボットテーブル `g-pivot`	クロスサマリー、固定行ヘッダー
記録とリスト	説明リスト `g-description-list`	いくつかの静的タグと値
	キー値 `g-key-value`	値、長いテキスト、および単一アクション
	レコードの詳細 `g-record-detail`	単一のビジネスレコードの完全な詳細
	リストグループ `g-list-group`	一般的なリストとインタラクティブな行
	メディア一覧 `g-media-list`	アバター、サムネイル、ボディおよびテールのアクション
	密集リスト `g-dense-list`	デスクトップおよびインスペクターの高密度リスト
	仮想リスト `g-virtual-list`	一括レコード用のウィンドウホスティングシェル
階層とフロー	木 `g-tree`	無限のレベル、拡張、キーボードの動き
	タイムライン `g-timeline`	マイルストーンとステータス履歴
	アクティビティフィード `g-activity-feed`	ユーザーとシステムのアクティビティフロー
	監査ログ `g-audit-log`	日付グループ、演算子、アクション、および時刻
インジケーターとグラフィックス	KPI `g-kpi`	キー値と上昇下降方向
	ステータス一覧 `g-stat-list`	コンパクトな統計値のセット
	メトリックカード `g-metric-card`	値、ラベル、小さな傾向グラフ
	スパークライン `g-sparkline`	バーまたは SVG マイクロトレンド
	進行状況の統計 `g-progress-stats`	分類の進行状況と割合
	チャート `g-chart`	チャートライブラリに依存しないタイトル、プロットエリア、およびアクションコンテナ
	データ凡例 `g-data-legend`	色、ファミリー、読みやすいラベル
	ランキング `g-ranking`	ランキング、名前、および値
	ステータスの概要 `g-status-summary`	ステータス数量の概要
プランとスペース	カレンダー `g-calendar`	毎週/毎月の時間グリッドとイベント
	議題 `g-agenda`	リニアスケジュールリスト
	カンバン `g-kanban`	フェーズ列とタスクカード
	ガントチャート `g-gantt`	タスク、タイムライン、プログレスバー
	組織図 `g-org-chart`	組織ノードと階層関係
	地図 `g-map-shell`	マップキャンバス、ツール、および結果パネル
	データマトリックス `g-data-matrix`	権限、機能、および 2 次元のステータスマトリックス
	ヒートマップ `g-heatmap`	アクティビティ、貢献および密度
データ操作	データツールバー `g-data-toolbar`	検索、フィルター、結果数およびアクション
	列選択ツール `g-column-chooser`	列の表示と非表示
	保存されたビュー `g-saved-views`	フィルター、並べ替え、列構成の保存
	エクスポートパネル `g-export-panel`	形式、範囲、およびフィールドのエクスポート
	データの状態 `g-data-state`	読み込み中、空、エラー、オフライン
	ビュースイッチャー `g-data-view-switcher`	テーブル、リスト、カードビューの切り替え
	選択の概要 `g-selection-summary`	数量とバッチ操作を選択してください
	テーブル密度 `g-table-density`	快適、標準、コンパクトな密度
	フィルターの概要 `g-filter-summary`	現在の状態とワンクリッククリア
	ソートビルダー `g-sort-builder`	複数フィールドの並べ替え順序
	データインスペクター `g-data-inspector`	CMS およびデスクトップレコードチェッカー

6 つの新しい宣言的動作

<div data-g-table-sort data-g-row-select data-g-row-disclosure
     data-g-column-toggle>
  <input data-g-select-all type="checkbox" aria-label="すべて選択">
  <button data-g-sort-key="revenue" data-g-sort-type="number">収入</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">展開する</button>
  <label><input data-g-toggle-column="owner" checked>担当者</label>
</div>

<div data-g-data-filter data-g-filter-target="result-list">
  <input data-g-filter-input type="search">
  <span data-g-filter-count>0</span>
</div>
<div id="result-list">
  <article data-g-filter-item data-g-filter-text="オプションの索引テキスト">...</article>
  <div data-g-filter-empty hidden>結果なし</div>
</div>

<div data-g-data-view data-g-current-view="table">
  <button data-g-view="table">テーブル</button>
  <button data-g-view="card">カード</button>
  <section data-g-view-panel="table">...</section>
  <section data-g-view-panel="card" hidden>...</section>
</div>

ランタイム、アクセシビリティ、および環境のルール

テーブルソートはテーブルヘッダーを自動的に維持します aria-sort、テキスト、数値、日付、および安定した並べ替えをサポートします。詳細行は並べ替え中にメイン行とともに移動します。
行選択は完全選択、部分選択を維持します。indeterminate、わかりました aria-selected、シフト間隔の選択と選択の概要。
行開示は詳細行とツリーテーブルの両方を提供し、維持します aria-controls、aria-expanded、折りたたみと再帰的なサブ行の非表示をエスケープします。
列の切り替えは少なくとも 1 つの列を保持します。データフィルターは、Unicode 正規化、複数キーワード AND マッチング、結果カウント、および空をサポートします。データビューは、矢印キー、ホーム、およびエンドをサポートします。
g-data-container 640 ピクセルのコンテナ折りたたみを作成します。積み上げテーブルは小さな画面で各グリッドを使用します data-g-label デスクトップテーブルのセマンティクスを損なうことなく、読み取り可能なカードを生成します。
すべての構造は論理方向属性を採用し、RTL をサポートします。強制カラーは選択範囲のアウトラインを提供します。非表示のデータ操作を印刷し、詳細行と階層行を展開し、スクロールクリッピングを削除します。

機能リスト48 のデータモード、11 のデータファミリ、8 種類の多重化ランタイム、および完全なテストマトリックスを登録します。独立したデータの例並べ替え、選択、展開、列の表示/非表示、検索、ビューの切り替え、積み重ねられたテーブルの移動、およびキーボードグリッドを直接テストできます。

コンポーネントの選択とバッチ処理

カテゴリ 9 機能により、「オブジェクトの選択、選択範囲の表現、バッチ実行、および選択条件の保存」が完全なプロトコルになります。スーパー CMS、権限の割り当て、メンバー管理、メディアライブラリ、関連分野、ダッシュボード、モバイルバックエンド、Tauri/Electron デスクトップワークベンチに適しています。

32パターン7 つの再利用可能なランタイム複数選択階層キーボードRTL/印刷

リアルタイム選択とバッチ操作

ドキュメントページ

すべて選択

現在のビュー0 / 3

クイックスタート公的文書公開されましたAPI リファレンス開発者向けドキュメントドラフトよくある質問ヘルプセンター公開されました

32 モードの完全なマトリックス

#	パターン/ルートクラス	目的と契約
01	選択コントロール `g-selection-control`	数量、合計、範囲情報を選択してください
02	すべて選択 `g-select-all-control`	完全選択と部分選択が不定
03	反転 `g-invert-selection-control`	現在利用可能なアイテムを反転します
04	範囲 `g-range-selection-control`	シフト間隔の選択
05	バッチツールバー `g-batch-toolbar`	セーフゾーン対応のスティッキーバッチアクション
06	選択範囲 `g-selection-scope`	リスト、テーブル、またはツリーの選択境界
07	転送 `g-transfer`	選択済み/すべての双方向移動と検索
08	デュアルリスト `g-dual-list`	権限、メンバー、タグの二重リスト
09	ツリー選択 `g-tree-select`	階層的な複数選択とパス表示
10	カスケード `g-cascader`	レベルごとの拡張のためのカスケード選択
11	メンションピッカー `g-mention-picker`	@ 人、チャネル、またはリソース
12	ユーザーピッカー `g-user-picker`	アバター、名前、チーム、および複数選択
13	組織ピッカー `g-organization-picker`	組織ツリー、部門および役職
14	リソースピッカー `g-resource-picker`	ファイル、ページ、データソース、およびアセット
15	メディアピッカー `g-media-picker`	サムネイルグリッドとメディアの複数選択
16	アイコンピッカー `g-icon-picker`	アイコンの検索、グリッドと選択状態
17	カラーピッカー `g-color-picker`	カラープレビュー、入力およびスウォッチ
18	日付範囲 `g-date-range-picker`	プリセット、隔月カレンダーと日付範囲
19	時間範囲 `g-time-range-picker`	時間間隔と日をまたぐ表現
20	保存されたフィルター `g-saved-filters`	再利用可能なフィルター条件
21	保存されたビュー `g-saved-views`	フィルター、列、並べ替え、および密度スナップショット
22	列選択ツール `g-column-chooser`	列を非表示にし、少なくとも 1 つの列を保持する
23	ソートビルダー `g-sort-builder`	動的な複数フィールドの照合
24	グループビルダー `g-group-builder`	動的な複数フィールドのグループ化ルール
25	エンティティピッカー `g-entity-picker`	統合ビジネスエンティティセレクター
26	タグピッカー `g-tag-picker`	タグの検索、作成、複数選択
27	リレーションピッカー `g-relation-picker`	レコード、ページ、および親子関係
28	一括確認 `g-bulk-confirmation`	危険なバッチ操作の影響確認
29	一括進行状況 `g-bulk-progress`	段階的な進行状況、失敗、バックグラウンド操作
30	ピッカーパネル `g-picker-panel`	デスクトップフローティングレイヤーとモバイルボトムパネル
31	ピッカーの概要 `g-picker-summary`	選択した値と選択結果の概要
32	選択の概要 `g-selection-summary`	選択した数量とクイックアクション

宣言型ランタイムインターフェイス

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>逆選択</button>
  <input type="checkbox" data-g-select-row value="record-1">
  <div class="g-batch-toolbar" data-g-batch-toolbar hidden>...</div>
</section>

<div class="g-transfer" data-g-transfer>
  <div data-g-transfer-source>...</div>
  <button data-g-transfer-move="selected-to-target">→</button>
  <div data-g-transfer-target>...</div>
</div>

<div class="g-user-picker" data-g-picker data-g-picker-multiple>
  <div data-g-picker-trigger><input data-g-picker-input></div>
  <div class="g-picker-panel" data-g-picker-panel hidden>
    <button data-g-picker-option data-g-value="u1">ユーザー</button>
  </div>
</div>

ランタイムと環境のルール

row-select 全選択、反転選択、クリア、表示項目選択、シフト間隔、数量出力、バッチ列表示、行表示をサポート aria-selected。
transfer 選択/すべての双方向の移動、両側の検索、数量と空のステータス、および Ctrl/Command + 左右の矢印キーをサポートします。
picker 統合された単一/複数選択、Unicode 検索、チップ削除、隠しフィールド出力、矢印キー、Home、End、Enter、Space、Escape を押して外側をクリックして閉じます。
data-g-cascader パスと値を維持します。data-g-saved-choice サービスのフィルター、ビュー、アイコン、およびスウォッチ。data-g-builder-list テンプレートの追加、削除、並べ替え/グループ化ルールの移動をサポートします。
g-selection-container 640 ピクセルのコンテナ折りたたみを提供します。モバイルピッカーパネルが自動的に下部パネルになり、バッチツールバーは安全領域を回避します。
論理方向、RTL、縮小モーション、強制カラー、および印刷がすべてのモードでサポートされています。選択状態を変更するコントロールは印刷時に非表示になり、結果の概要は保持されます。

機能リスト32 のモード、8 つの機能ファミリー、およびテストマトリックスをすべて登録します。独立した選択例すべて選択、逆選択、範囲選択、転送、ピッカー、カスケード、保存された選択肢、および動的ビルダーを直接テストできます。

ファイルおよびコンテンツシステム

カテゴリ 10 の機能は、システムへの入力、アップロードと整理から、プレビュー、編集、共同作業、改訂、保存に至るまで、ファイルのライフサイクル全体をカバーします。 Web、モバイルバックエンド、スーパー CMS、メディアセンター、Tauri/Electron デスクトップエディターはすべて、AI が複雑なワークベンチ CSS を一時的に整理する必要がなく、直接再利用できます。

32パターン6 つの再利用可能なランタイムアップロード + エディターデスクトップ + モバイルキーボードRTL/印刷

リアルタイムのアップロード、編集、改訂

アップロードキュー完了 0 · アクティビティ 0

PDF製品マニュアル.pdf

編集可能なコンテンツ

キャラクター統計と自動保存ステータスを確認するには、このテキストを変更します。

- Web ページのみをサポートします

+ Web とデスクトップのサポート

32 モードの完全なマトリックス

#	パターン/ルートクラス	目的と契約
01	ファイルドロップ `g-file-drop`	クリック/ドラッグ、ファイル入力およびドラッグ状態
02	ファイルリスト `g-file-list`	ファイル行、メタ情報、およびアクションを圧縮します。
03	アップロードキュー `g-upload-queue`	複数のファイルキュー、カウント、一時停止、削除
04	チャンクのアップロード `g-chunk-upload`	断片化ステータス、ブレークポイント再開ビジュアルプロトコル
05	アップロードの進行状況 `g-upload-progress`	進行状況の値、ステータステキスト、および ARIA
06	アップロードに失敗しました `g-failed-upload`	失敗の理由、再試行、および削除
07	ファイルカード `g-file-card`	サムネイル、名前、プロパティ、クイックアクション
08	フォルダーツリー `g-folder-tree`	ディレクトリレベル、番号、および現在のパス
09	ファイルブラウザ `g-file-browser`	カタログ、検索、グリッド/リスト、およびキーボードの選択
10	ファイルのプレビュー `g-file-preview`	キャンバス、ズームツール、メタ情報をプレビューする
11	メディアライブラリ `g-media-library`	メディアアセットワークベンチと詳細バー
12	メディアグリッド `g-media-grid`	レスポンシブなサムネイルと選択状態
13	メディアの詳細 `g-media-details`	プレビュー、代替テキスト、著作権および寸法
14	画像のトリミング `g-image-crop`	作物段階、スケール、検査官
15	画像の注釈 `g-image-annotation`	ホットスポット、マーク、およびレビューメモ
16	ドキュメントビューア `g-document-viewer`	用紙、サムネイル、ページめくり、ズーム
17	PDF ビューア `g-pdf-viewer`	PDF.js、ネイティブまたはデスクトップブリッジシェル
18	ビデオプレーヤー `g-video-player`	16:9 ステージ、進行状況、および再生のコントロール
19	オーディオプレーヤー `g-audio-player`	カバー、波形/タイムライン、およびコントロール
20	コードエディタ `g-code-editor`	行番号、コードキャンバス、ステータスバー
21	リッチテキストエディター `g-rich-text-editor`	書式設定ツール、編集可能なテキスト、統計情報
22	マークダウンエディター `g-markdown-editor`	ソースコード/プレビューの 2 列とモバイルの折りたたみ
23	ブロックエディター `g-block-editor`	ブロックのハンドル、テキスト、アクション
24	リビジョン比較 `g-revision-compare`	並列/統合された相違点と追加および削除のセマンティクス
25	自動保存 `g-autosave-indicator`	ダーティ、保存中、保存済み、エラー
26	コンテンツ概要 `g-content-outline`	ドキュメントのタイトルレベルと現在の章
27	エディターツールバー `g-editor-toolbar`	コマンドグループ、押されたステータス、およびショートカットキー
28	検索と置換 `g-find-replace`	検索、置換、結果、およびナビゲーション
29	コメントスレッド `g-comment-thread`	アバター、テキスト、時間、共同返信
30	バージョン履歴 `g-version-history`	バージョンのタイムライン、現在のバージョン、およびリカバリ
31	ファイルのプロパティ `g-file-properties`	タイプ、所有者、チェック値、および著作権
32	ストレージメーター `g-storage-meter`	クォータ、分類占有率および進捗状況

宣言型ランタイムインターフェイス

<div class="g-file-drop" data-g-dropzone>...</div>
<section class="g-upload-queue" data-g-upload-manager>...</section>
<section class="g-file-browser" data-g-file-browser data-g-view="grid">...</section>
<article class="g-rich-text-editor" data-g-editor-shell>
  <div data-g-editor-surface contenteditable="true">...</div>
</article>
<div class="g-revision-compare" data-g-revision-compare>...</div>
<span class="g-autosave-indicator" data-g-autosave>...</span>

ランタイム、アクセシビリティ、および環境のルール

dropzone ドラッグの深さ、キーボードのアクティブ化、および実際のファイルイベントを処理します。upload-manager キューのステータス、進行状況、一時停止、再試行、削除、集計数を維持します。
file-browser Unicode 検索、グリッド/リスト切り替え、単一選択、矢印キー、Home、End、Enter、Space を提供し、選択イベントを公開します。
editor-shell ツールコマンド、Ctrl/Command ショートカット、文字数と単語数を統合します。リッチテキスト、マークダウン、コード、ブロックエディターの一般的なプロトコル。
revision-compare 並列/統合差分を切り替えます。autosave ダーティ、保存、保存、エラーを表現し、遅延保存と即時保存をサポートします。
g-content-container 704 ピクセルのコンテナ折りたたみを使用します。ファイルブラウザ、メディアの詳細、画像エディタ、ドキュメントのサムネイル、Markdown の 2 列、バージョン比較はすべてモバイルレイアウトを備えています。
すべてのモードは論理方向を使用し、RTL、Reduced Motion、Forced Colors、および Print をカバーします。 [印刷] では、アップロードおよび編集アクションが非表示になり、スクロール領域が平坦になり、テキストとリビジョン情報が保持されます。

機能リスト32 のモード、8 つの機能ファミリー、およびテストマトリックスをすべて登録します。スタンドアロンコンテンツシステムの例アップロード、ファイルの閲覧、メディア、写真、ドキュメント、オーディオとビデオ、4 種類のエディタ、コラボレーション、バージョン、ストレージをカバーします。

ログインおよびアカウントシステム

カテゴリ 11 の機能は、システムへの入力、検証、回復、認可から、セッション、テナント、デバイス、セキュリティ監査まで、アイデンティティのライフサイクル全体をカバーします。これは単一のログインカードではなく、PC、モバイル Web、ダッシュボード、Super CMS、Tauri/Electron デスクトップ WebView で直接動作する 32 の安定した組み合わせです。

リアルタイム検証の組み合わせ

携帯電話番号を確認してください

確認コードが +86 138****6608 に送信されました

新しいパスワードを設定する

パスワードの強度未設定

少なくとも 8 桁
大文字
小文字
番号
記号

!

新しいデバイスが検出されました

Linux · Firefox · 北京

32 モードの完全なマトリックス

#	モード	ルートクラス	目的と主要コンポーネント
01	中央認証	`g-auth-centered`	1 列エントランス、モバイル端末、軽量製品。協力 `g-auth-container`、`g-auth-panel`
02	カラム認証	`g-auth-split`	`g-auth-split-aside` ブランドエリア+ `g-auth-split-main` フォーム領域
03	ログイン	`g-sign-in`	電子メール/ユーザー名、パスワード、ログイン状態の維持、入り口の取得、および `g-auth-provider`
04	登録	`g-registration`	個人/企業登録、条件確認、パスワード強度
05	パスワードを取得する	`g-password-recovery`	電子メール、携帯電話、および管理者の回復方法
06	パスワードをリセット	`g-password-reset`	新しいパスワード、パスワードの確認、期限切れのトークンのステータス
07	電子メールの検証	`g-email-verification`	`g-verification-icon`、アドレス、再送タイミング
08	携帯電話認証	`g-phone-verification`	国コード、マスクされた番号、および OTP
09	MFA チャレンジ	`g-mfa-challenge`	認証システム、SMS、セキュリティキー、回復コード、および信頼できるデバイス
10	OTP 入力	`g-otp-input`	`g-otp-cell`;数字入力、ペースト、バックスペース、矢印キー
11	パスキー	`g-passkey`	`g-passkey-graphic`、プラットフォーム検証ツールおよびクロスデバイスポータル
12	SSO	`g-sso`	SAML/OIDC、エンタープライズドメイン検出およびプロバイダーリスト
13	QRコードログイン	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`、更新と有効期限のステータス
14	マジックリンク	`g-magic-link`	パスワードなしの電子メールログイン、有効期間、および 1 回限りのリマインダー
15	参加に招待する	`g-invitation`	`g-invitation-details`、組織、役割、招待者、有効期間
16	初回セットアップ	`g-first-time-setup`	初回パスワード、情報、組織およびセキュリティ設定
17	ロック画面	`g-lock-screen`	`g-lock-screen-panel`、時間、現在のユーザー、クイックロック解除
18	セッションの有効期限が切れました	`g-session-expired`	`g-session-expired-panel`、ローカル変更指示と再認定
19	アカウントの選択	`g-account-chooser`	`g-auth-choice`、アバター、メール、新しいアカウント
20	テナントの選択	`g-tenant-chooser`	ワークスペース、組織の役割、メンバーシップ、および現在のテナント
21	ID の切り替え	`g-identity-switcher`	`g-identity-switcher-menu`、役割のアイデンティティと訪問者のプレビュー
22	完全な情報	`g-profile-setup`	`g-auth-avatar`、名前、位置、タイムゾーン、言語
23	アカウントセキュリティセンター	`g-account-security`	`g-security-section` パスワード、MFA、デバイス、接続を集約する
24	デバイス管理	`g-device-management`	`g-device-item`、現在のデバイス、場所、時間、キャンセル
25	ログインアクティビティ	`g-login-activity`	`g-login-event`、方法、IP、場所、成功およびリスク
26	セキュリティインシデント	`g-security-alert`	`g-security-alert-actions` 本人確認またはアカウントの保護
27	リカバリコード	`g-recovery-codes`	`g-recovery-code` グリッド、コピー、ダウンロード、再生成
28	信頼できるデバイス	`g-trusted-device`	MFA スキップ期限と公共機器のリスクの説明
29	アカウントが接続されました	`g-connected-accounts`	`g-connected-account`、接続状態と切断操作
30	パスワードの強度	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` リアルタイムスコアリング付き
31	承認と同意	`g-auth-consent`	`g-auth-consent-scope` 権限の範囲、許可と拒否
32	認証結果	`g-auth-result`	`g-auth-result-icon`;成功、失敗、処理ステータス

宣言型ランタイムインターフェイス

動作	プロパティ	機能
パスワードの切り替え	`data-g-password-toggle`	カーソルを押したまま表示/非表示にする
OTP 入力	`data-g-otp-input`	自動前進、バックスペース、矢印キー、文字列全体の貼り付け、完了イベント
パスワードの強度	`data-g-password-strength`	5 つのルール、0 ～ 4 の評価、ARIA の進行状況
認証タイマー	`data-g-auth-timer`	再送信、QR コード、セッションのカウントダウン/有効期限切れ
保存された選択肢	`data-g-saved-choice`	アカウントとテナントの選択
ドロップダウン	`data-g-dropdown`	ID 切り替えメニュー
コピー	`data-g-copy`	リカバリーコードのコピー
ダイアログ	`data-g-dialog`	デバイスの取り消し、機密性の高い動作の確認

<div class="g-otp-input" data-g-otp-input>
  <input class="g-otp-cell" data-g-otp-cell inputmode="numeric" maxlength="1">
  ...
  <input type="hidden" data-g-otp-output>
</div>

<div class="g-password-strength" data-g-password-strength
     data-g-password-target="new-password">...</div>

ステータス、エンドポイント、およびセキュリティルール

パスワードフィールドは正しいものを使用しています autocomplete;検証コードのビットごとの入力にはアクセス可能な名前が必要であり、送信用に完全な値は非表示のままになります。
OTP は、数値フィルタリング、自動送り、Backspace、左右の矢印キー、Home、End、および Paste をサポートします。完成したら解放される gardener:otpcomplete。
認証結果は、成功、エラー、保留中である必要があります。セッションの有効期限は、未送信のデータが保持されるかどうかを示す必要があり、セキュリティイベントを色だけで表現することはできません。
アカウント、テナント、アイデンティティは異なる概念です。複数組織CMSでの誤操作を避けるために、Chooser/Switcherをそれぞれ使用してください。
列認証が 704px 未満の単一列に収束します。カードは 384 ピクセル以下の QR、ルール、リカバリコードで再配置されます。下部の操作は安全領域を尊重します。
すべてのスタイルは、RTL、Reduced Motion、Forced Colors、および印刷をカバーします。隠されたパスワード、プロバイダー、カウントダウン、機密操作を印刷し、必要なセキュリティ監査情報のみを保持します。

機能リスト32 のモード、8 つの機能ファミリー、多重化されたランタイムの 8 つのクラス、および完全なテストマトリックスをすべて登録します。独立アカウントシステムの例すべてのモードをカバーし、OTP、パスワード強度、カウントダウン、アカウント/テナントの選択、ID メニューを直接テストできます。

コマースと支払い

カテゴリ 12 の機能は、製品の発見、仕様と価格、ショッピングカート、決済、フルフィルメント、支払い、注文、およびサブスクリプションの請求の完全なトランザクションチェーンをカバーします。 PC モール、モバイル Web、ダッシュボード、スーパー CMS、デジタルグッズ、SaaS、Tauri/Electron デスクトップ WebView ですぐに使用できる 32 の組み合わせ。

リアルタイムトレーディングポートフォリオ

G

Gardenerスタジオエンタープライズライセンス · Windows

¥699.00

小計

割引

配送

対処

プラットフォームの選択

32 モードの完全なマトリックス

#	モード	ルートクラス	目的と主要コンポーネント
01	プロダクトカード	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`、タイトル、価格、アクション
02	製品一覧	`g-commerce-product-list`	`g-product-list-item`、メディア、概要、価格および行アクション
03	製品詳細	`g-commerce-product-detail`	`g-product-detail-summary`、タイトル、ベンダー、SKU、在庫および購入アクション
04	製品ギャラリー	`g-commerce-product-gallery`	`g-product-gallery-thumb` とステージ。再利用可能なカルーセルの動作
05	SKU の選択	`g-sku-selector`	`g-sku-group`、`g-sku-option`、組み合わせおよび完全選択出力を無効にします
06	数量ステップ	`g-quantity-stepper`	`g-quantity-button`、入力、最小/最大/ステップおよび変更イベント
07	価格表示	`g-price-display`	`g-price-current`、元の価格、割引、サイクル、税込みの説明と在庫 `g-stock-status`
08	ショッピングカートのエントリ	`g-commerce-cart-item`	`g-cart-item-media`、仕様、数量、行合計および操作
09	ショッピングカート	`g-cart`	数量連動、`g-cart-empty`、小計、オファー、配送料、税金および合計
10	ミニショッピングカート	`g-mini-cart`	ドロップダウンコンテナ、リスト、および `g-mini-cart-footer`
11	ショッピングカートの概要	`g-cart-summary`	経費明細の合計 `g-cart-summary-total`
12	決済	`g-commerce-checkout`	`g-checkout-section` メインエリア+スティッキー `g-checkout-sidebar` + 安全領域 `g-checkout-mobile-actions`
13	決済手順	`g-checkout-steps`	`g-checkout-step-marker`、完了/現在/保留中のステータス
14	アドレス選択	`g-address-selector`	保存された選択肢、デフォルトのアドレスと新しいエントリ
15	アドレスカード	`g-address-card`	`g-address-main`、連絡先担当者、電話番号、詳細な住所、タグ、編集
16	配送方法	`g-shipping-method`	`g-shipping-option`、適時性、キャリア、価格、および到達不能ステータス
17	セルフピックアップオプション	`g-pickup-selector`	`g-pickup-option`、店舗、距離、営業時間、在庫
18	割引コード	`g-coupon`	`g-coupon-status`;アイドル、適用、無効、およびクリア
19	プロモーションリスト	`g-promotion-list`	`g-promotion-item`、コード、しきい値、相互排他、有効期間
20	請求書情報	`g-invoice-information`	`g-invoice-fields`、請求書の種類、ヘッダー、税番号、および領収書方法
21	お支払い方法	`g-payment-method`	`g-payment-option`、銀行カード、財布、残高、オフラインおよび無効ステータス
22	支払いパネル	`g-payment-sheet`	`g-payment-sheet-total`、金額、確認、リスク管理プロンプトおよびリターン
23	支払い結果	`g-payment-result`	`g-payment-result-icon`;成功、失敗、処理とその後のアクション
24	注文概要	`g-commerce-order-summary`	商品、割引、配送、税金、支払いおよび `g-order-summary-total`
25	注文スケジュール	`g-commerce-order-timeline`	`g-order-timeline-item`、ノード、時間、ロジスティクス、および現在のステップ
26	注文詳細	`g-order-detail`	ヘッダー、ステータス、品目、住所、支払い、請求書、および `g-order-detail-section`
27	サブスクリプションパッケージ	`g-subscription-plan`	`g-plan-price-value`、サイクル、機能、注目およびアクション
28	価格比較	`g-pricing-comparison`	スティッキー機能列、パッケージの違い、ブール/金額/価格セル
29	線量計	`g-commerce-usage-meter`	`g-usage-meter-track`、電流/制限、リセット期間、警告/危険
30	請求履歴	`g-billing-history`	`g-billing-history-item`、期間、金額、ステータス、PDF、フィルタリング
31	返金ステータス	`g-refund-status`	`g-refund-status-progress`、金額、元の返品、到着予定および失敗
32	税金の概要	`g-tax-summary`	`g-tax-summary-row`、非課税金額、税金の種類、税率、地域および税込合計金額

宣言型ランタイムインターフェイス

動作	プロパティ	機能
数量ステッパー	`data-g-quantity-stepper`	最小/最大/ステップ、ボタンステータス、入力正規化、`gardener:quantitychange`
SKU セレクター	`data-g-sku-selector`	グループ化された無線選択、無効な仕様、キーボードローミング、JSON 出力、`gardener:skuchange`
カート	`data-g-cart`	セント整数計算、数量/削除連動、小計/割引/運賃/税金/合計
クーポン	`data-g-coupon`	宣言的な有効なコード、適用/無効/クリアのステータスとイベント
保存された選択肢	`data-g-saved-choice`	住所、配送、受け取り、支払いオプション
カルーセル	`data-g-carousel`	製品ギャラリー
ドロップダウン	`data-g-dropdown`	ミニショッピングカート

<div class="g-cart" data-g-cart data-g-currency="CNY">
  <article class="g-commerce-cart-item" data-g-cart-item data-g-unit-price="69900">
    <div class="g-quantity-stepper" data-g-quantity-stepper>...</div>
    <strong data-g-line-total></strong>
  </article>
  <strong data-g-cart-total></strong>
</div>

量、ステータス、環境ルール

カートは最小通貨単位の整数計算を使用し、表示レイヤーは Intl.NumberFormat浮動小数点数値エラーを回避します。課税、優遇オーバーレイ、在庫、支払いの検証は依然としてビジネスバックエンドによって判断されます。
SKU の無効、在庫の残りわずか/在庫切れ、割引コードの無効、支払いの成功/エラー/保留中、返金の処理/完了/失敗はすべて独立したステータスを持ち、色のみに依存することはできません。
住所、配達、集荷、請求書、支払いは異なるビジネスオブジェクトです。決済シェルはそれらを整理する責任を負い、バックエンドのビジネスルールを CSS にハードコーディングしません。
g-commerce-container 704 ピクセルで詳細/チェックアウトの 2 列を折りたたみ、品目を並べ替えて 480 ピクセルでカードを選択します。コンテナコンテキストがない場合のフォールバックとしてのビューポートクエリ。
すべてのモードはキーボード、RTL、Reduced Motion、Forced Colors、および印刷をカバーします。モバイル請求ではセーフエリアが尊重され、印刷により購入アクションが非表示になり、注文、請求書、税金情報が保持されます。
4 ピクセルの小さな丸い角を持つデフォルトの白いサーフェス。このコンポーネントはテーマトークンのみを使用します。テーマトークンは、42 セットのメインカラーとすべての直交するテーマ軸で再利用できます。

機能リスト32 のモード、8 つの機能ファミリー、7 種類の多重化ランタイム、および完全なテストマトリックスをすべて登録します。独立事業と支払い例カタログ、SKU、カート、チェックアウト、フルフィルメント、支払い、注文、サブスクリプション、請求、返金、税金を対象としています。

モバイル固有のコンポーネント

カテゴリ 13 の機能は、単にデスクトップコンポーネントを絞り込むだけでなく、モバイル Web ページ、PWA、ハイブリッドアプリケーション、デスクトップ WebView の独自の構造を補完します。 32 のモードは、安全領域と動的ビューポート、モバイルナビゲーション、下部ポップアップ、ジェスチャとスクロール、検出とフィルタリング、入力とキーボード、モバイル認証/請求/メディアに加え、オフライン、権限、空のエラー状態をカバーします。

32パターン8 家族14 個の再利用可能なランタイム安全領域タッチRTL印刷

選択順序:最初に選択してください g-mobile-safe-shell または既存のページシェルを選択し、「ナビゲーション → コンテンツ → 一時レイヤー → スティッキーアクション → システムフィードバック」の組み合わせを押します。ボトムナビゲーションは、3 ～ 5 つの第 1 レベルの目的地に使用されます。スワイプタブは、同じコンテキスト内で切り替えるために使用されます。ボトムシートには短いタスクが含まれます。フルスクリーンダイアログには長いタスクが含まれるため、相互に混合することはできません。

リアルタイムモバイルコンビネーション

移動式作業台

G

スライド操作エントリー

ジェスチャー、ボタン、エスケープがすべて利用可能です。

読み込みを続けます

携帯電話契約

100svh 安定した初期高度を提供し、100dvh ブラウザバーの変化に従ってください。
4面使用 env(safe-area-inset-*);ボトムバー、購入バー、スナックバー、およびジェスチャープロンプトはホームインジケーターをオーバーライドしません。
粗いポインター環境のタッチターゲットは少なくとも 44 ピクセルです。すべてのジェスチャコンポーネントはボタンまたはキーボードのパスを保持します。
論理方向属性は RTL をサポートします。 Reduced Motion はディスプレイスメントのトランジションをオフにします。強制カラーは、選択した輪郭を強調します。印刷するとシェルが自動的に平らになります。

32 モードの完全なマトリックス

#	モード	ルートクラス	目的と主要コンポーネント
01	セーフゾーンエンクロージャ	`g-mobile-safe-shell`	`g-mobile-safe-content`、svh/dvh、4 辺セーフエリア、包含プレビュー
02	トップアプリケーションバー	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`、付箋、大きなタイトル
03	下部ナビゲーション	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`、3 ～ 5 つの第 1 レベルの目的地と現在のステータス
04	底部弾性層	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`、フォーカス制約、エスケープ、スクロールロック
05	アクションメニュー	`g-mobile-action-sheet`	`g-mobile-action-list/item`、共有、削除、およびコンテキストアクション
06	プルダウンして更新します	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`、しきい値、リフレッシュ/完了 API
07	無限ロード	`g-mobile-infinite-load`	IntersectionObserver、ロードボタンのフォールバック、ロード中/完了
08	スライド操作	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`、LTR/RTL、ボタンとエスケープのフォールバック
09	スライドタブ	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`、水平スクロールの吸着とタブのセマンティクス
10	モバイル分類	`g-mobile-category-view`	`g-mobile-category-rail`、`g-mobile-category-link`、`g-mobile-category-content`、`g-mobile-category-grid`、`g-mobile-category-item`
11	モバイルフィルタリング	`g-mobile-filter-sheet`	フィルターコンテンツ、スティッキーフッター、リセットおよび結果アクション
12	スティッキーバイバー	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`、価格、数量、およびセーフティゾーン
13	モバイル検索	`g-mobile-search`	`g-mobile-search-field/icon`、キャンセルしてクリアします
14	移動セレクター	`g-mobile-picker`	`g-mobile-picker-grid/option`、単一/複数選択および保存済み選択肢
15	ホイールセレクター	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`、スクロールスナップ、矢印キー、JSON 出力
16	フローティングアクションボタン	`g-mobile-fab`	主にアクション、セーフエリア、ボトムバーオフセットを作成します
17	全画面ダイアログボックス	`g-mobile-fullscreen-dialog`	長いフォーム、編集タスク、フォーカス管理、および動的ビューポート
18	キーボードの回避	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`、スクロールパディングとフォームの表示領域
19	ジェスチャープロンプト	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`、初回使用およびシステムジェスチャ領域
20	オフラインバナー	`g-mobile-offline-banner`	キャッシュコンテンツのプロンプト、再試行、ネットワーク回復
21	セグメンテーション制御	`g-mobile-segmented-control`	`g-mobile-segmented-item`、2 ～ 5 の相互排他的なビュー
22	モバイルコンテンツのストリーミング	`g-mobile-feed`	`g-mobile-feed-item/main`、メディア、ボディ、テールアクション
23	カードカルーセル	`g-mobile-card-carousel`	水平スクロールスナップ、ピーク、オプションのカルーセルランタイム
24	モバイルフォーム	`g-mobile-form`	`g-mobile-form-actions`、全角の送信フィールドとタッチフィールド
25	モバイル認証	`g-mobile-auth`	`g-mobile-auth-actions`、ログイン/登録/認証コードとキーボード環境
26	モバイル決済	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`、注文確認とセーフティエリア
27	モバイルメディアの表示	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`、パン、ズーム、全画面ツールバー
28	キーボードツールバー	`g-mobile-keyboard-toolbar`	前の項目、次の項目、補完、形式、入力方法の上端
29	セレクトモード	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`、カウントとバッチアクション
30	スナックバー	`g-mobile-snackbar`	`g-mobile-snackbar-main`、短いフィードバック、元に戻す、および下部バーのオフセット
31	許可プロンプト	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`、位置情報、通知、カメラとメディア
32	空/エラー/オフラインステータス	`g-mobile-state`	`g-mobile-state-icon/actions`、空/エラー/オフライン/成功

宣言型ランタイムインターフェイス

動作	プロパティ	キーインターフェイス
モバイルシート	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	開く/閉じる/トグル、フォーカストラップ、スクロールロック、背景、エスケープ
プルリフレッシュ	`data-g-pull-refresh`	`gardener:refresh`、`complete()`、ボタンのバックアップ
無限ロード	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`、交差点観察者
スワイプアクション	`data-g-swipe-actions`	表示/閉じる/切り替え、LTR/RTL ジェスチャー、ボタン、エスケープ
ホイールピッカー	`data-g-wheel-picker`	スクロールスナップ、クリック/矢印/ホーム/終了、`gardener:wheelchange`
ランタイムの再利用	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	タグ、セグメント化/選択、全画面ダイアログ、スナックバー

<button data-g-mobile-sheet-open="filters">フィルター</button>
<aside id="filters" class="g-mobile-filter-sheet"
       data-g-mobile-sheet hidden>
  <div class="g-mobile-sheet-panel">
    <div class="g-mobile-sheet-handle"></div>
    ...
    <footer class="g-mobile-sheet-footer">...</footer>
  </div>
</aside>

エンドポイント、ジェスチャー、ビジネス境界

セーフエリアシェルの使用法 100svh 追加 100dvh;ビジネスがソフトキーボードに従うことを希望する場合は、ビジュアルビューポート/ホストブリッジを通じて更新できます。 --g-keyboard-offset。
ジェスチャは効率を高めるだけです。プルリフレッシュには更新ボタンパスがあり、無限ロードには「さらにロード」があり、スワイプアクションにはトグルがあり、ホイールピッカーにはキーボードサポートがあります。
ネイティブの許可リクエスト、ネットワークステータス、データロード、支払い、認証、およびメディアスケーリングは企業またはホストによって実装されます。 Gardener は、結果を偽造することなく、安定したビジョン、ステータス、イベント、アクセス可能なインターフェイスを提供します。
ボトムシートは短いタスクに適しており、アクションシートはアクションリストに適しており、フィルターシートはフィルタリングに適しています。複雑な編集にはフルスクリーンダイアログを使用し、破壊的な確認には専用のダイアログを使用します。
デフォルトの白いサーフェス、1 ピクセルの境界線と 4 ピクセルの小さな丸い角。大きな丸い角と強い影はモバイルのデフォルトではありません。
32 のモードすべてがコンポーネントマニフェストと動的コンポーネントディレクトリに入ります。 CSS ソースの完全な API には、モジュール、セレクター、変数、状態もリストされています。

機能リスト32 のモード、8 つの機能ファミリー、および完全なテストマトリックスをすべて登録します。スタンドアロンモバイル端末の例アプリバー、ボトムナビゲーション、スワイプタブ、スワイプアクション、無限ロード、アクション/フィルターシート、モバイルセレクターの直接テスト。

デスクトップ固有のコンポーネント

カテゴリ 14 の機能は、Tauri、Electron、デスクトップ WebView、ブラウザ内のシミュレートされたデスクトップワークベンチの 32 の高再利用モードをカバーします。 Chrome ウィンドウ、グローバルナビゲーション、Dock/ワークスペース、コマンドと入力、ドキュメントとファイル、システム統合、ライフサイクル更新、リカバリとステータスを安定したインターフェイスに分割します。 AI は、タイトルバー、IDE レイアウト、システムプロンプトを一時的に作成する必要はありません。

一般的なデスクトップレイアウトとの関連:g-desktop-shell、g-titlebar、g-workbench は互換性の基礎として継続されます。このセクション g-desktop-workspace および 31 のコンパニオンモードは、デスクトップアプリケーション向けのより完全かつ正確なコンポジションレイヤーです。

ライブデスクトップワークスペース

Gardenerスタジオ — ドキュメントスペース

デスクトップ CMS 編集領域

ラベル、列、ドック、インスペクター、ステータスバーはすべて、高密度、小さな丸い角、および完全なキーボードパスを維持します。

↑

新しいバージョンが利用可能になりました

ダウンロード済み、再起動を待機しています。

32 モードの完全なマトリックス

#	パターンとルートクラス	安定したコンポーネント/ステータス/目的
1	ネイティブタイトルバー `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	ウィンドウコントロール `g-desktop-window-controls`	`g-desktop-window-button`;最小化、最大化/復元、閉じる
3	メニューバー `g-desktop-menubar`	`g-desktop-menubar-item`;メニューエントリとプラットフォームのシーケンス
4	アクティビティバー `g-desktop-activity-bar`	`g-desktop-activity-item`;現在のモジュール、グローバルツール
5	ドックパネル `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`,折りたたまれた
6	サイズ変更可能な分割ペイン `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`;風景/ポートレート
7	検査官 `g-desktop-inspector-panel`	プロパティ、スタイル、監査、コンテキスト情報
8	ステータスバー `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	コマンドパレット `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	ショートカットレコーダー `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	コンテキストメニュー `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	未保存のタブ `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`；アクティブ、ダーティ、固定
13	領域をドラッグ `g-desktop-drag-region`	`g-desktop-no-drag` ボタン、リンク、入力を保護する
14	ウィンドウの読み込み `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	アップデートが利用可能 `g-update-available`	バージョン、リリースノート、アップデートの延期/再開
16	許可リクエスト `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	ネイティブファイルピッカー `g-native-file-picker`	`g-native-file-picker-value`;単一選択、複数選択、フォルダーは入力/ホストによって決まります
18	トレイメニューシェル `g-tray-menu`	デスクトップメニュー項目を再利用します。オンラインステータス、ウィンドウの入口と出口
19	マルチウィンドウのプレースホルダー `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	デスクトップワークスペース `g-desktop-workspace`	`g-desktop-workspace-main`;タイトル/アクティビティ/メイン/インスペクター/ステータスグリッド
21	ウィンドウスイッチャー `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	最近のドキュメント `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	デスクトップツールバー `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	底面パネル `g-desktop-bottom-panel`	ターミナル、ログ、質問、出力およびバックグラウンドタスク
25	バックグラウンドタスクセンター `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	通知センター `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`;未読
27	同期ステータス `g-sync-status`	`g-sync-status-dot`;同期中、同期済み、オフライン、エラー
28	アップデートの進行状況 `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	クラッシュからの回復 `g-crash-recovery`	ドキュメントの復元、セッションの復元、セーフブート、復元の中止
30	単一インスタンスの通知 `g-single-instance-notice`	既存のウィンドウに切り替え、新しいウィンドウに進み、キャンセルします
31	ディープリンクハンドラー `g-deep-link-handler`	ソース、ターゲット、許可/拒否、および「次回からは尋ねない」を表示します
32	ダイアログについて `g-about-dialog`	`g-about-dialog-icon`;バージョン、ライセンス、アップデートおよび診断ポータル

宣言型ランタイム

動作	プロパティ/トリガー	キーボードとイベント
ショートカットレコーダー	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc でキャンセル、削除でクリア、問題が発生 `gardener:shortcutchange`
デスクトップタブ	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	矢印/Home/End、Ctrl/⌘+Tab、Ctrl/⌘+W、中キーで閉じる
ネイティブファイルピッカー	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	ネイティブ入力フォールバック。放出された `gardener:nativefiles`
ウィンドウスイッチャー	`data-g-window-switcher`、`data-g-window-item`	Ctrl/⌘+`、矢印キー、Enter、Escape
ランタイムの再利用	`data-g-split-pane`、`data-g-command-palette`、`data-g-context-menu`、`data-g-roving-nav`、`data-g-nav-toggle`、`data-g-dropdown`、`data-g-dialog`	列、コマンド、メニュー、ナビゲーション、ドック、トレイ、およびバージョン情報ダイアログ

Tauri / Electron ホスト契約

<!-- ホストがホワイトリストに登録されたブリッジを提供している場合にのみアダプターをロードします -->
<script type="module" src="gardener.runtime.js"></script>
<script type="module" src="gardener.electron.js"></script>

<button class="g-desktop-window-button"
        data-g-window-action="minimize">—</button>

Electron では contextIsolation セキュリティプリロードでは、最小化、最大化/復元、閉じるなどのホワイトリストメソッドのみを公開します。ノード統合を有効にせず、IPC チャネルをページに公開しないでください。
Tauri v2 はアプリケーションによって Window API に挿入されます。権限機能、ファイルシステム、アップデータ、ディープリンク、トレイ、およびマルチウィンドウはアプリケーションの機能に従って構成され、CSS によって自動的に適用されません。
app-region: drag と -webkit-app-region: drag ドラッグ可能な領域のみを担当します。ボタン、リンク、入力、メニューは次の場所に配置する必要があります。 g-desktop-no-drag または、内蔵セレクターによって保護されています。
利用可能なプラットフォーム data-g-os="macos" または data-g-platform="macos" 信号機のウィンドウ制御を切り替えます。 Windows/Linux では、右側の長方形のコントロールを維持します。
更新、権限、ファイル選択、トレイ、マルチウィンドウ、ディープチェーン、シングルインスタンス、およびクラッシュリカバリはすべて、ビジネスまたはホストが実際の結果を返す必要があります。コンポーネントは、予測可能なプレゼンテーション、イベント、フォーカス、状態構造のみを提供します。

応答性、アクセシビリティ、および印刷

g-desktop-workspace ビルドコンテナクエリ: 56rem 未満ではインスペクタが非表示になり、40rem 未満では Dock が非表示になり、タイトルバーが簡素化されます。ビジネスは Toggle を通じて独立したパネルを引き続き表示できます。
ドキュメントタグ、コマンドパネル、メニュー、列、ショートカットキーの記録、およびウィンドウスイッチャーにはすべてキーボードパスがあります。ダーティタグは閉じる前にキャンセル可能なメッセージを発行します beforetabclose。
論理方向属性が RTL をオーバーライドします。 Reduced Motion は同期パルスを停止します。強制カラーは、現在のアクティビティ/タブ/コマンドの輪郭を明確に示します。
印刷時にウィンドウ Chrome、アクティビティバー、ステータスバー、ツールバー、ボトムパネル、およびすべてのフローティングレイヤーを非表示にし、トリミングを避けるためにメインコンテンツ、ドック、およびインスペクターを展開します。
デフォルトの白いサーフェス、1 ピクセルの境界線、および 4 ピクセルの小さな丸い角。シャドウは、コマンドパネル、ウィンドウスイッチャー、メニューなどの実際のオーバーレイにのみ使用されます。

機能リスト32 のモード、8 つの機能ファミリー、およびテストマトリックスをすべて登録します。スタンドアロンデスクトップの例ウィンドウ、ワークスペース、タブ、コマンド、ショートカット、ファイル、トレイ、更新、通知、および復元ステータスをカバーします。

AI 製品とインテリジェントなインタラクティブコンポーネント

カテゴリ 15 の機能は、AI アシスタント、Copilot、エージェントワークベンチ、生成ツール、ナレッジベース Q&A、マルチモーダル製品、および AI デスクトップクライアントの完全なタスクチェーンをカバーします。 32 のモードは、セッションのエントリからプロンプト、推論、ストリーミング出力、ツールの承認、マルチエージェント、ソースとアーティファクト、コンテキストとコスト、音声、権限、プライバシー、セキュリティ、フィードバック評価にまで及びますが、AI 製品のエラーを「チャットバブル + 入力ボックス」に減らすものではありません。

AI ページ生成プロトコルとの違い:このセクションはエンドユーザー向けの AI 製品 UI に関するものです。次のテキスト AI ページ生成プロトコルは、ジェネレーターで Gardener を使用するための制約です。前者はインターフェイスコンポーネントを提供し、後者は機能、レシピ、コンポーネント、ツールクラスが選択される順序を指定します。

リアルタイム AI ワークスペース

コンテキスト 38%

マルチテナントのエンタープライズポータルを生成してください。

G

Gardener Agent作業中

エンタープライズポータルのレシピが一致し、権限、CMS、およびダッシュボードコンポーネントをチェックしました。

テナント、ワークフロー、ダッシュボード、メディアライブラリと一致します。

書き込みページテンプレートには承認が必要です

現在のプロジェクトの生成されたディレクトリのみを変更します。

スコープ: generated/** · 操作: 作成/更新

32 モードの完全なマトリックス

#	パターンとルートクラス	安定したコンポーネント/ステータス/目的
1	AI ワークスペース `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	会話リスト `g-conversation-list`	`g-conversation-item`、`g-conversation-title`;履歴、固定、グループ化、および現在のセッション
3	チャットスレッド `g-chat`	`g-chat-list`、`g-ai-empty-chat`;空、読み込み中、ストリーミング、エラー
4	AIメッセージ `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`;ユーザー/アシスタント/システム
5	プロンプトコンポーザー `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`; Enter で送信、Shift+Enter で折り返し、停止
6	アタッチメント `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	プロンプトスターター `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	プロンプトライブラリ `g-prompt-library`	`g-prompt-card`;検索、カテゴリ、コレクション、パラメータ化されたテンプレート
9	メンション/スラッシュメニュー `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	モデルセレクター `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	思考 `g-thinking`	`g-thinking-trigger`、`g-thinking-content`;折りたたみ、展開、ストリーミング
12	ストリーミング応答 `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	ツールコール `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	ツールの承認 `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`;承認/拒否/キャンセル/期限切れ
15	エージェントのステータス `g-agent-status`	アイドル、動作中、待機中、ブロック済み、完了、失敗
16	エージェントプラン `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	マルチエージェントボード `g-agent-board`	`g-agent-card`、`g-agent-card-header`、`g-agent-card-task`
18	エージェントのハンドオフ `g-agent-handoff`	`g-agent-handoff-main`、`g-agent-handoff-actions`;コンテキストのハンドオーバーと手動テイクオーバー
19	出典/引用 `g-sources`	`g-source-list`、`g-source`、`g-citation`;引用の位置づけと信頼性
20	アーティファクトワークスペース `g-artifact-layout`	ダイアログとプレビュー/コード/ドキュメントのデュアルエリアレイアウト
21	アーティファクトパネル `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	AI ファイルツリー `g-file-tree`	`g-file-tree-item`;階層、展開、選択、およびキーボードナビゲーション
23	バージョン履歴 `g-version-list`	`g-version`;生成者、時間、現在のバージョン、比較および復元
24	ジェネレーションギャラリー `g-generation-grid`	`g-generation-card`;複数の結果、バリエーション、選択、および継続的な編集
25	生成プレースホルダー `g-generation-placeholder`	キューに登録、生成中、部分的、完了、失敗
26	コンテキスト/メモリ `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	コスト/レート制限 `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	ボイスセッション `g-voice-state`	`g-voice-bar`、`g-voice-state-label`;リスニング、処理、スピーキング、エラー
29	権限の範囲 `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`;リソース、操作、期限、ソース
30	プライバシーに関する通知 `g-privacy-notice`	トレーニング、保持、国境を越えた企業ポリシーおよび機密情報の説明
31	安全性/ポリシーに関する通知 `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	フィードバック/評価 `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

専用ランタイムと再利用ランタイム

動作	プロパティ	キーインターフェイス
AI作曲家	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	自動高さ、Enter/Shift+Enter、`promptsubmit`、`promptstop`、ストリーミングステータス
プロンプトフィル	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	スターター/ライブラリテンプレートを指定された Composer に入力し、Input を発行します。
AI 承認	`data-g-ai-approval`、`data-g-approval-choice`	イベント前にキャンセル可能、承認/拒否/キャンセル、API をリセット
AI フィードバック	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	評価理由、補足説明、`feedbackchange`、`feedbacksubmit`
ランタイムの再利用	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	モデル選択、思考/ツール、コマンドメニュー、アーティファクトタグ、ファイルツリー

<form class="g-composer" data-g-ai-composer>
  <textarea class="g-composer-input"
            data-g-composer-input></textarea>
  <button data-g-composer-stop hidden>停止</button>
  <button data-g-composer-send>送信</button>
  <span data-g-composer-status></span>
</form>

地位、信頼、ビジネスの境界

ストリーミングでは、停止、一時停止/停止/完了/エラー状態を提供する必要があります。カーソルアニメーションは強化されるだけで、Reduced Motion はアニメーションをオフにします。
Thinking には、デフォルトで読みやすい推論の概要または進行状況が表示され、モデルのプライベート推論チェーンを公開する必要はありません。製品は、「概要」、「ツールログ」、「最終回答」を明確に区別する必要があります。
ツール呼び出しとツール承認の分離: 呼び出しステータスは許可の確認に代わることはできません。破壊的、外部通信、支払い、機密データ、および永続的なアクセス許可は、業務執行者によって真に承認される必要があります。
出典/引用は引用関係を表しており、信頼性を自動的に証明するものではありません。企業はソース URL、フラグメント、時間、アクセシビリティを保持する必要があり、生成されたコンテンツは引き続き事実確認する必要があります。
コンテキスト/メモリでは、ソースの表示、削除、または無効化を許可する必要があります。コスト/レート制限では、バックエンドの実際の測定を使用する必要があり、請求書のふりをするためにフロントエンドによって推定することはできません。
安全に関する通知はサーバー側のポリシーに代わるものではありません。プライバシー通知は法的同意に代わるものではありません。 UI には、ブロックされた理由、異議申し立てが可能かどうか、データがどのように保持および使用されるかを示す必要があります。
すべてのモードで白い表面、1 ピクセルの境界線、および 4 ピクセルの小さな丸い角を使用します。コンテナ幅 960/704/512px でアーティファクト、サイドバー、デュアルカラムモードを折りたたみ、RTL、強制カラー、印刷をオーバーライドします。

機能リスト32 のモード、8 つの能力ファミリー、および完全なテストマトリックスをすべて登録します。スタンドアロン AI の例ダイアログ、コンポーザー、プロンプト、思考、ツール承認、エージェント、アーティファクト、ビルド、コンテキスト、料金、権限、セキュリティ、音声、フィードバックをカバーします。

完全なページと業界ソリューション

カテゴリ 16 は、Gardener の最上位構成層です。最初の 15 のカテゴリは、レイアウト、コンポーネント、ビジネスチェーン、エンド固有のインタラクションを提供し、このカテゴリはそれらを直接選択可能な 32 のフルページコントラクトに固めます。個人と企業、公開 Web サイトとバックエンド、一般企業と垂直産業をカバーしており、ブラウザ、モバイル Web ページ、PWA、Tauri、および Electron WebView にも適しています。 AI は、ページ全体の CSS を最初から編成するのではなく、まずここでページのルートクラスと対応するレシピを選択し、次にコンポーネントを設定する必要があります。

完全な 32 ページ合計 52 レシピ8 家族コンテナクエリRTL印刷

リアルタイムダッシュボードの全ページスケルトン

企業の概要

マルチテナントコンテンツプラットフォーム

ページレベルのヘッダー、インジケーター、メインコンテンツ、補助領域、モバイルフォールドには安定したコントラクトがあります。

サイト28,640↑ 12.4%

ページ486k42 のトピックにわたって

レビュー138処理が必要です

32 の完全なページマトリックス

#	ページルートクラス	主な成分と用途
1	製品の着陸 `g-product-landing`	`g-landing-hero`、コピー、ビジュアル、プルーフ、セクション。 SaaS、アプリ、AI 製品と新製品リリース
2	企業ホーム `g-corporate-home`	`g-corporate-hero`、信頼、ソリューショングリッド。グループ、ブランド、機関、および企業ポータル
3	個人宅 `g-personal-home`	`g-personal-intro`、リンク、タイムライン。個人ブランド、履歴書、専門家のホームページ
4	ポートフォリオ `g-portfolio-page`	`g-portfolio-hero`、注目のプロジェクトグリッド。デザイン、写真、開発、ケースライブラリ
5	ブログインデックス `g-blog-index`	`g-blog-index-header`、カテゴリ、エントリグリッド。ブログ、ニュース、企業情報など
6	記事 `g-article-page`	`g-article-page-layout`、ボディ、toc、メタ;長い記事、ニュース、チュートリアル、印刷物
7	ドキュメントポータル `g-docs-portal`	`g-docs-layout`、サイドバー、メイン、目次;製品、API、内部ドキュメント
8	ヘルプセンター `g-help-center-page`	`g-help-center-hero`、検索、レイアウト、脇;よくある質問とお客様のセルフヘルプ
9	検索結果 `g-search-results-page`	`g-search-results-layout`、フィルター、リスト、結果;サイト、ドキュメント、製品、リソース内の検索
10	お問い合わせ `g-contact-page`	`g-contact-layout`、詳細、フォーム;お問い合わせ、営業相談、リード回収
11	価格 `g-pricing-page`	`g-pricing-page-header`、グリッド、カード; SaaS、メンバーシップおよびサービスパッケージ
12	ダッシュボード `g-dashboard-overview`	`g-dashboard-metrics`、レイアウト、パネル。操作概要、コックピット、モニタリング
13	管理者リスト `g-admin-list-page`	`g-admin-list-header`、フィルター、コンテンツ、ツールバー;バックグラウンドリソース管理
14	レコードの詳細 `g-record-detail-page`	`g-record-detail-layout`、メイン、サイド、セクション。顧客、注文、コンテンツ、資産の詳細
15	設定 `g-settings-center`	`g-settings-center-layout`、ナビゲーション、コンテンツ、セクション;製品、組織、デスクトップ設定
16	ユーザーセンター `g-user-center`	`g-user-center-layout`、ナビ、コンテンツ;情報、セキュリティ、注文、会員権
17	通知 `g-notification-center-page`	`g-notification-groups`、グループ、行;通知、リマインダー、アップデート
18	オンボーディング `g-onboarding-flow`	`g-onboarding-aside`、メイン、ステップ、進行状況。初期化、決済、インポート
19	CRM `g-crm-workspace`	`g-crm-layout`、ナビ、メイン、インスペクター、パイプライン;顧客、ビジネスチャンス、販売フォローアップ
20	プロジェクトワークスペース `g-project-workspace`	`g-project-layout`、ボード、コラム、インスペクター。プロジェクト、タスク、研究開発コラボレーション
21	サポートセンター `g-support-center`	`g-support-layout`、スレッド、メッセージ、返信;顧客サービス、作業指示、アフターセールス
22	承認センター `g-approval-center`	`g-approval-layout`、キュー、列、インスペクタ。プロセス、コスト、内容、権限の承認
23	ナレッジベース `g-knowledge-base`	`g-knowledge-hero`、検索、レイアウト;エンタープライズ Wiki、システムライブラリ、内部ヘルプ
24	学習ポータル `g-learning-portal`	`g-learning-layout`、コースグリッド、カード;コース、トレーニング、学校ポータル
25	イベントポータル `g-event-portal`	`g-event-hero`、グリッド、カード;カンファレンス、展示会、コミュニティ、ライブブロードキャストイベント
26	予約ポータル `g-booking-portal`	`g-booking-layout`、結果、概要。医療、会場、ホテル、サービスの予約
27	ヘルスケア `g-healthcare-portal`	`g-healthcare-layout`、概要、記録、業界警告。患者と医療サービス
28	金融 `g-finance-portal`	`g-finance-layout`、概要、アカウント、業界アラート。銀行、資産、企業金融
29	公共サービス `g-public-service-portal`	`g-public-service-layout`、概要、項目;行政事務、申請手続き、便利なサービス
30	マーケットプレイス `g-marketplace-page`	`g-marketplace-hero`、フィルター、グリッド、カード;アプリケーション、サービス、人材、プラグイン市場
31	コミュニティ `g-community-page`	`g-community-hero`、フィード、サイドバー、投稿;コミュニティ、フォーラム、ユーザーコンテンツ
32	ステータスセンター `g-status-center-page`	`g-status-overall`、サービス、履歴、インシデント;ステータス、障害、メンテナンス、SLA

公開された全ページ部分

g-solution-container、g-solution-header、g-solution-actions、g-solution-section、g-solution-grid、g-solution-card、g-solution-shell、g-solution-rail、g-solution-main、g-solution-aside、g-solution-list、g-solution-item、g-solution-meta、g-solution-stat、g-solution-toolbar と g-solution-empty は 32 種類のページにわたって再利用できるため、業界が変わっても AI の基本構文が変わらないことが保証されます。

選択、構成、およびビジネス境界

から始める solution.* レシピフルページタイプを決定し、プラットフォーム、トピック軸、密度を選択します。
ルートクラスは、ページレベルの応答とゾーンの関係を担当します。フォーム、データ、認証、ビジネス、モバイル、デスクトップ、および AI コンポーネントは、最初の 15 クラスから引き続き設定されます。
マーケティング、個人、およびコンテンツのページでは、自然なドキュメントスクロールが使用されます。ダッシュボードとワークベンチでは、高密度の複数の列が可能です。医療、金融、政府は UI 契約のみであり、規制、認証、プライバシー、監査、バックエンドビジネスルールに代わるものではありません。
すべてのモードは論理的方向、小さな丸い角、白い表面を使用します。コンテナ幅 960 ピクセルと 704 ピクセルで折りたたまれ、RTL、Reduced Motion、Forced Colors、および印刷をサポートします。
CRM、プロジェクト、ダッシュボード、設定、および通知のルートページを Tauri/Electron に配置できる g-desktop-workspace;実際のウィンドウ、ファイル、アップデート、およびアクセス許可は、依然としてデスクトップアダプタの責任です。

<main class="g-admin-list-page">
  <header class="g-admin-list-header">...</header>
  <section class="g-admin-list-content">
    <div class="g-admin-list-filters">...</div>
    <div class="g-responsive-table">...</div>
  </section>
</main>

機能リスト32 のルートモードと 8 つの能力ファミリーをすべて登録します。レシピ一覧各ページのターミナル、ウィジェット、ランタイム、および目的を提供します。スタンドアロンの例切り替え可能な公開 Web サイト、ダッシュボード、CRM、業界ポータル、ステータスセンターのプレビュー。

パブリック API とスキーマ

から 0.3.0 スタート、gardener.public-api.json は、CSS レイヤー、パッケージエントリ、テーマプロパティ、JavaScript エクスポート、動作、イベント、デスクトップアダプター、および互換性フィールドを完全に登録した、公開命名およびプログラミングインターフェイスの正規リストです。

パブリック API マニフェストを読み取り中...

統一された命名

範囲	仕様	例
CSS クラス	`g-` + ケバブケース	`g-command-palette`
CSS 変数	`--g-` + ケバブケース	`--g-color-primary`
行動属性	`data-g-{behavior}`	`data-g-dialog`
イベント	`gardener:{event}`	`gardener:beforeopen`
メタデータの相互作用	`behaviors: string[]`	`["dialog"]`
デスクトップブリッジング	`adapters: string[]`	`["tauri","electron"]`
プラットフォーム	`platforms: string[]`	`["web","mobile"]`
レシピID	ドット区切りケバブケース	`solution.admin-list`

完全なスキーマ

11 セットのスキーマすべてで JSON スキーマ 2020-12 が使用され、不明なフィールドは拒否されます。コンポーネント、レシピ、機能、ユーティリティ、マニフェスト、パブリック API、ビルド、カスタムビルド、パフォーマンス予算、パフォーマンスレポート、互換性。すべてのオブジェクトスキーマは、不明なフィールドをオフにするか、動的値の型を明示的に宣言します。npm run test:schema Ajv 2020-12を使用して48の標準検証ユースケースを実行し、10のリリース/構成ドキュメント、不明なルートフィールド、10種類の不明なネストされたフィールド、10種類の欠落したネストされた必須フィールド、スキーマ間参照、JavaScript識別子、SHA-256形式、ベースライン回帰ステータス、レガシーコンポーネントスキーマ互換エイリアスをカバーしました。npm run contracts 15 セットのネガティブコントラクトテストを継続して実行し、マニフェスト間の参照、ソースコードとビルドアーティファクトの一貫性、セレクター、実際のコンポーネントの属性、SHA-256/SRI 整合性、再現可能なビルドコマンド、モジュールタイプ/パラメーター/シグネチャ、インスタンスメンバー、データ属性、イベントペイロード、アダプター、タイプとリリーススクリプト、互換性ベースライン、ビルドアーカイブ、絶対および相対予算を検証します。成果物、予算結果、バージョン、および完全なパッケージのエクスポート。

9 個のモジュールすべてがエクスポートされました

モジュールインターフェイスを読み取り中...

66 個すべての動作とインスタンスメンバー

各項目には宣言的な初期化プロパティがリストされています。 getInstance() 呼び出しが許可されているオブジェクトのすべてのメンバーを返します。

行動契約の読み取り...

75 個のイベントとペイロードすべて

各項目を完全にリストします CustomEvent.detail ;イベントが発生し、キャンセルできる before 冒頭の7つのイベントはまずまず preventDefault() プロセスガードが後続の操作を妨げます。

イベント契約書を読む...

すべてのランタイムデータ属性

作成者が利用できる 309 のプロパティは、上記の動作コントラクト内の 66 の動作エントリ、166 の構造/アクションセレクター、および 77 の追加構成プロパティに分割されています。ランタイムによって維持される 27 の状態プロパティもあります。ステータスプロパティは初期設定として同時に読み込むことができますが、作成者が利用できる最初の 3 つのセットは相互に排他的であり、二重にカウントされません。

構造とアクションのセレクター

セレクターのプロパティを読み取り中...

追加の構成プロパティ

構成プロパティを読み取り中...

ランタイムメンテナンスステータス

ステータス属性を読み取り中...

Tauri / Electron アダプター契約

アダプター契約を読み取り中...

互換性ルール

マニフェストの仕様フィールドは次のとおりです。 behaviors。古い畑 runtimeBehaviors 全体を通して 0.x バージョン行は読み取り専用互換エイリアスとして予約されています。古い metadata/schema.json 新しいコンポーネントスキーマを引き続き指定します。 1.0.0 はパブリックコントラクトを安定版に昇格し、機械可読な互換性ベースラインを使用して、0.9.0 のすべてのパブリックエントリ、レイヤー、テーマ、ランタイム、コンポーネント、レシピを保存します。 1.x では、互換性のあるエントリを削除する前に、変更レコードと移行手順を提供する必要があり、少なくとも 2 つのマイナーバージョンの非推奨期間を経る必要があります。実際の削除は、新しいメジャーバージョンでのみ発生します。

コンポーネントカタログ

のコンポーネントリスト gardener.manifest.jsonには、カテゴリ、タイプ、状態、セレクター、バリアント、ウィジェット、関数、プラットフォーム、動作、アダプター、およびアクセシビリティコントラクトが含まれています。以下のダイナミックでは、厳選されたリストではなく、すべてのエントリとすべてのメタデータが表示されます。

コンポーネントリストを読み取り中...

コンポーネントのステータス要件

新しいコンポーネントは、デフォルト、ホバー、フォーカス表示、アクティブ、無効、読み取り専用、読み込み中、空、エラー、成功について確認する必要があります。すべてのコンポーネントにすべてのステータスが表示されるわけではありませんが、「該当なし」か「対象」かを明確にする必要があります。

JavaScript ランタイム

ランタイムフレームワークに依存せず、合格しました data-g-* 自動初期化。 MutationObserver は、新しいノードと追加された動作属性を同時に処理し、SPA、CMS キャンバス、および DOM を生成する AI ストリーミングに適しています。

ランタイムマニフェストを読み取り中...

宣言的なダイアログ

<button data-g-dialog-open="confirm">開く</button>

<div id="confirm" class="g-dialog-backdrop" data-g-dialog hidden>
  <section class="g-dialog" role="dialog"
           aria-modal="true" aria-labelledby="confirm-title">
    <h2 id="confirm-title">動作確認</h2>
    <button data-g-close>キャンセル</button>
  </section>
</div>

プログラミング API

import Gardener from "@gardener/css";

Gardener.init(document);
const dialog = Gardener.getInstance("#confirm", "dialog");
dialog.open();

Gardener.toast({
  title: "正常に保存されました",
  message: "ページが公開されました",
  tone: "success"
});

API	説明
`init(root)`	ルートノード自体とその子孫のすべての動作を初期化します。
`destroy(root)`	リスナー、タイマー、インスタンス参照を解放します。
`register(name, factory)`	プロジェクトのカスタム動作を登録します。
`getInstance(element, name)`	単一または指定された動作インスタンスを取得します。
`emit(element, name, detail)`	Gardenerイベントの解約
`toast(options)`	ステータスまたは警告トーストを作成します。
`behaviors`	現在登録されている動作名を読み出します。

イベント

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss。イベントを通過できる前に preventDefault() キャンセルします。

実行時のアクセス制御のテスト (0.4.0 以降)

npm run test:runtime Node.js 組み込みテストランナーと Happy DOM を使用して、公開リスト内の 66 個の動作すべてについて実際のインスタンスメンバーを双方向に比較し、初期化、べき等、破棄、再初期化を検証します。 MutationObserver の動的ノード、動的属性、サブツリーの削除、スコープの破棄、複数の動作の共存、グローバルの破棄、および初期化イベントのバブリングをカバーします。

ランタイム動作を追加または名前変更する場合、パブリック API、サンプル/補足フィクスチャ、および動作ごとのテストを同期する必要があります。同期しないと、フィクスチャ、インスタンス、またはメンバーが欠落しているためにテストが失敗します。

ページレシピ

完全なレシピ JSON 高頻度ページのルートクラス、必要なすべてのコンポーネント、適用可能なプラットフォーム、動作、デスクトップアダプタ、および使用法を定義します。スクリーンショットテンプレートではありませんが、テーマに変更でき、レスポンシブで、継続的に組み合わせることができる安定した構造です。次の展開では、各レシピのすべてのフィールドが保持されます。

レシピリストを読み込んでいます...

AI とテンプレートシステムは最初に一致する必要があります レシピ.id、もう一度確認してください プラットフォーム、ついに使用 パーツ は完全な構造を形成します。同様のコンポーネントが 1 つ含まれる全ページのレシピを他人に伝えないでください。

AI ページ生成プロトコル

Gardener は AI に 5 つの層の真実の情報源を提供します。公開 API リストは「使用が許可されている安定した名前とエントリ」、機能リストは「業界の通常の機能が実装されているかどうか」、コンポーネントリストは「そこにあるもの」、ツールクラスリストは「正確なクラス名は何か」、レシピリストは「複雑なページの開始方法」に答えます。

{
  "intent": {
    "page": "enterprise.cms.editor",
    "platform": "electron",
    "density": "compact",
    "direction": "ltr"
  },
  "selectionOrder": [
    "capability",
    "recipe",
    "components",
    "utilities",
    "themeAxes"
  ],
  "validation": [
    "selectors-exist",
    "states-covered",
    "keyboard-operable",
    "responsive",
    "rtl",
    "print"
  ]
}

制約を生成する

まず確認してください gardener.capabilities.json、要件に対応する業界の能力が達成されていることを確認します。
マニフェストに存在しない情報をでっち上げることは禁止されています g-* クラス。
レシピが存在する場合、高再利用ページは最初から組み立てられません。
セマンティックコンポーネントクラスの使用を優先します。ツールクラスはローカルな差異のみを処理します。
インタラクティブコンポーネントは、登録されたランタイムと指定された ARIA 構造を使用する必要があります。
出力前にエンドポイント、キーボード、フォーカス、ステータス、RTL、印刷、およびハイコントラスト環境を確認してください。
ギャップがある場合は、それらをフレームワーク機能要件として登録し、一時的な CSS をシステムインターフェイスに混在させないでください。

Tauri / Electron

.g-desktop-shell エディター、AI ツール、スーパー CMS に適した固定ビューポートレイアウトを提供します。パス data-g-platform と data-g-os コントロールプラットフォームの詳細。

<html data-g-platform="electron" data-g-os="windows"
      data-g-density="compact">
  <main class="g-desktop-shell">
    <header class="g-titlebar">...</header>
    <nav class="g-activitybar">...</nav>
    <section class="g-workbench">...</section>
    <aside class="g-desktop-inspector">...</aside>
    <footer class="g-desktop-statusbar">...</footer>
  </main>
</html>

安全なブリッジング

// Electron renderer
import { bindElectronWindowControls } from "@gardener/css/electron";
bindElectronWindowControls();

// preload ホワイトリスト アクションのみを公開する
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

レンダラーでノード統合を有効にせず、IPC をページに公開しないでください。アダプターは、ホワイトリストの最小化、最大化、閉じる、およびドラッグのアクションのみを受け入れます。

オンデマンドのビルド、タイプ、バージョン間の互換性、リリースアクセス

1.0.0 5 つのプラットフォーム、28 のコンポーネントパッケージ、正式な圧縮とパフォーマンスバジェットを以前のバージョンの測定ベースラインにロールアップし、パブリックコントラクトを安定版にアップグレードし、タイプ、バージョン間の互換性、および実際の npm リリースパッケージアクセスを引き続き保持します。gardener.builds.json5 つのプラットフォームプロファイルすべて、28 のコンポーネントパッケージ、1 つ以上の実際の所有パッケージへの 506 のコンポーネントマッピング、セレクター署名、ブラウザターゲット、ビルダーパラメーター、および 42 の製品アーティファクトすべての SHA-256/SRI を登録しました。gardener.performance.json各公式ビルドの raw、gzip、Brotli、圧縮率、npm パッケージボリュームの結果を保存します。

TypeScript はバージョン間の互換性があります

ビルドはパブリック API から自動的に生成されます gardener.d.ts、gardener.tauri.d.ts と gardener.electron.d.ts。 66 の動作と 75 のイベントが完全な文字通りの結合タイプを形成します。npm run test:types TypeScript の厳密モードを使用して実際のコンシューマをコンパイルし、デフォルトおよび名前付きエクスポート、動作ファクトリー、トースト、インスタンスクエリ、および 2 種類のデスクトップブリッジをカバーします。

gardener.compatibility.json 0.9.0 から継承された 1,145 のコントラクトが固定化され、これには 47 のパッケージエントリ、CSS レイヤー、テーマ、ランタイム、データプロパティ、アダプター、506 のコンポーネント、および 52 のレシピがすべて含まれます。npm run verify:compatibility 後続の 1.x の追加は許可し、移行パスなしの削除は禁止します。 1.0.0 安定カットオフポイントでは、既存のエントリも逆にチェックされ、欠落していないかどうかが確認されます。非推奨のエントリは少なくとも 2 つのマイナーバージョンに残り、新しいメジャーバージョンでのみ削除できます。その閉鎖構造は次のもので構成されています。互換性スキーマ制約。

パッケージは Node.js >=18.18、Chrome/Edge/Firefox 100 以降、Safari/iOS 15.4 以降、および ESM を明示的にサポートしています。メインポータルとデスクトップアダプターが条件を提供します types エクスポートします。実行時の自動初期化は次のようにマークされます。 sideEffectsパッケージャによる誤った削除を避けるため。npm run verify:package 実際の npm パッケージのホワイトリスト、各エクスポートターゲット、タイプファイル、開発ディレクトリのリーク、Publint をチェックします。prepublishOnly 強制完了 release:verify、パブリックパッケージと npm Provenance を有効にします。

5 つのプラットフォームファイル

ファイル	パッケージエントリ	専用レイヤー	動作環境
ウェブ	`./platform/web.css`	モバイル/デスクトップ固有の組み合わせを除く汎用コンポーネント	PC およびレスポンシブ Web ページ
モバイル	`./platform/mobile.css`	ユニバーサルコンポーネント + モバイル / モバイルコンポジション	モバイル Web、PWA、ハイブリッド WebView
デスクトップ	`./platform/desktop.css`	共通コンポーネント + デスクトップ / デスクトップコンポジション	デスクトップブラウザとアプリケーションシェル
タウリ	`./platform/tauri.css`	独立した軽量エントリ継承デスクトップ CSS + Tauri アダプター	Tauriのv2
電子	`./platform/electron.css`	独立した軽量エントリ継承デスクトップ CSS + Electron セキュリティブリッジアダプタ	Electronレンダー

npm run build:platform -- --platform web
npm run build:platform -- --platform mobile --out dist/custom/mobile-app
npm run build:platform -- --platform tauri --out dist/custom/tauri-app

ディレクトリごとに読み取り可能な CSS を同時生成、正式 .min.css、外部ソースマップおよびクローズドビルドマニフェスト。 Tauri/Electron は、対応する JavaScript アダプターもコピーします。公式プラットフォームパッケージの入り口はと統一されています .css 終了し、実際のインストールパッケージの CSS パッケージ化テストを通じて、ネストされた継承が完全に拡張できることを確認します。

28 の安定したコンポーネントパッケージ

layouts、regions、primitives、grid、basic、forms、form-compositions、navigation、navigation-compositions、feedback、data、data-compositions、selection-compositions、content-compositions、auth-compositions、commerce-compositions、mobile-compositions、extended、page、help、recipes、desktop、desktop-compositions、solution-compositions、catalog、ai、ai-extended、ai-compositions。

./component/*.css 上記のすべての公式圧縮パッケージのエクスポートを標準化します。./component/* 互換性のあるエイリアスとして予約されています。コンポーネント名でビルドする場合、ビルダーはクラスセレクターと data-g-* プロパティの実際のソースコードヒット。個々のセレクターを切り捨てるのではなく、506 コンポーネントを 1 つ以上の完全な所属パッケージに解決するため、疑似クラス、状態、アニメーション、サブパーツ、コンテナクエリ、依存関係ルールが失われません。

npm run build:custom -- --components button,card,dialog --out dist/custom/account-ui
npm run build:custom -- --packs forms,auth-compositions --no-utilities --out dist/custom/auth
npm run build:custom -- --packs ai,ai-extended,ai-compositions --out dist/custom/ai

パラメーターには次のものが含まれます --platform、--components、--packs、--utilities / --no-utilities と --out。未知のプラットフォーム、パッケージ、コンポーネントはすぐに失敗します。出力リストは次のようになります。カスタムビルドスキーマ検証。

各カスタムビルドマニフェストは、読み取り可能な CSS、圧縮 CSS、ソースマップ、およびパッケージとともにコピーされた Tauri/Electron アダプター用の SHA-256 および標準 SRI も生成します。受信者は、ビルドマシンに依存せずに、配信が完了し、置き換えられていないことをファイルごとに確認できます。

バイトレベルの再現可能なビルド

npm run verify:reproducible は、現在の公式出力を記録し、完全なビルドを再実行して、CSS、JavaScript、ソースマップ、メタデータ、および gardener.builds.json のファイルごとの SHA-256。出力マニフェストまたはファイルの内容に決定的な違いがある場合は失敗します。パフォーマンスレポートには実行時間が含まれるため、バイト比較には関与しませんが、その数値契約は、budget コマンドによって独立してレビューされます。

正式な圧縮とパフォーマンスの予算設定

正式な CSS と JavaScript は、通常の置換を使用せずに、構文レベルの圧縮に esbuild を使用します。メインの圧縮エントリと各カスタムビルドは、追跡可能な外部ソースマップを生成します。圧縮 CSS は、純粋なバージョンテキストが Brotli ベースラインを乱すことを避けるために、バージョンによって変化しない安定した MIT バナーを使用します。非圧縮の CSS とランタイムでも正確なバージョンが提供されます。npm run budget gzip レベル 9 と Brotli 品質 11 を使用して、42 の公式圧縮製品すべての raw、gzip、Brotli を同時に計算し、完全な CSS、ランタイム、および npm pack --dry-run パックされたファイル、アンパックされたファイル、および返されたファイルの数。 1.0.0 では、シールされたバージョン 0.9.0 の実測結果を当面のベースラインとして使用し、各製品の生の増加を 2% 以内、gzip/Brotli の増加を 3% 以内、npm パッケージのパック化を 3% 以内、アンパックされた状態で 2% 以内、およびファイル数を 10% 以内に制限します。 5 つのプラットフォーム製品にはすべて、直接的な過去のベースラインがあります。封入体積の測定値はパック時 4 KiB、アンパック時 64 KiB に切り上げられ、真の封入体積を過小評価せず、パフォーマンスレポートの自己完結型圧縮サイクルの影響を受けない決定的な上限を形成します。絶対キャップまたは相対キャップのいずれかが故障すると、リリースがブロックされます。

管理対象商品	生の上限	gzip の上限	ブロトリの上限
gardener.min.css	1,050,000B	145,000B	65,000B
gardener.core.min.css	65,000B	9,000B	6,000B
gardener.主題.min.css	60,000B	7,500B	5,000B
gardener.utilities.min.css	550,000B	80,000B	18,000B
gardener.components.min.css	400,000B	55,000B	42,000B
gardener.ai.min.css	30,000B	6,000B	5,000B
gardener.runtime.min.js	105,000B	30,000B	25,000B
プラットフォーム/web.min.css	1,000,000B	140,000B	60,000B
プラットフォーム/mobile.min.css	1,020,000B	142,000B	62,000B
platform/desktop.min.css	1,030,000B	143,000B	63,000B
プラットフォーム/tauri.min.css	256B	256B	256B
プラットフォーム/electron.min.css	256B	256B	256B

上の表には、12 個の主要な CSS/ランタイムエントリがリストされています。また、予算書には、単一製品の検査に代わる一般的な共有キャップを使用せずに、2 つのデスクトップアダプタ、28 のコンポーネントパッケージ、合計 42 の正式に圧縮された製品の対象範囲が項目化されています。

npm パッケージの予算は、パック時 2,050,000 B、アンパック時 16,500,000 B、最大 92 ファイルです。予算源 performance-budgets.json 別途管理対象となります予算スキーマとレポートスキーマ保護。

npm run build       # 完全な階層化された 28 コンポーネント パッケージと 5 つのプラットフォーム ファイル
npm run verify:reproducible # ファイルごとに SHA を継続的に構築して検証する-256
npm run budget      # 42 本番環境 + npm パッケージの絶対/相対予算ゲートキーピング
npm run verify:compatibility # 1,145 項目 0.9.0 公契約
npm run test:types # TypeScript 厳格な消費者認証
npm run verify:package # npm ホワイトリスト、エクスポートターゲット、および公開
npm run test:build  # 10 ビルド、互換性、タイプ、リリース、および障害パスの使用例

アクセシビリティと国際化

このフレームワークは、フォーカススタイル、動きの軽減、ハイコントラスト、および強制カラーの基盤を提供しますが、セマンティックな名前付けとコンテンツの順序はページ作成者の責任となります。

キーボードタブ、メニュー、ツリー、グリッド、カルーセル、スプリッター、ダイアログ、コマンドパレットにはすべてキーボードパスがあります。

フォーカスダイアログとコマンドパネルはフォーカスを制限し、閉じた後にトリガーソースを復元します。非表示のアイテムはタブオーダーを終了します。

名前アイコンボタンには aria-label が必要です。フォームには label、aria-label、または aria-labelledby が必要です。

動的ステータストーストはステータス/アラートを使用します。展開、選択、現在の項目は ARIA ステータスを介して同期されます。

方向レイアウトは論理プロパティを使用し、コンポーネントは RTL でアニメーションの方向と矢印をオーバーライドします。

アニメーションprefers-reduced-motion はアニメーション時間を圧縮し、スムーズスクロールをオフにします。

配送チェックリスト

ページには正しい情報が含まれています lang とユニークなタイトル。
見出し階層は連続しており、ランドマークには識別可能な名前が付いています。
すべての画像が目的に適合しています alt;装飾的な画像には空の alt を使用します。
キーボードは重要なタスクのみに使用され、フォーカスは常に表示されます。
テキストとステータスの色は WCAG AA に準拠しています。色だけでステータスを表現することはできません。
200% スケーリング、RTL、縮小モーション、強制カラーでも引き続き動作します。
モバイルタッチターゲットでは、少なくとも約 44 ピクセルのタッチ密度が使用されます。

1.0.0 自動テストマトリックス

アクセス制御	環境	数量	オーバーライド
`test:build`	Node.js + esbuild + Ajv	10	プラットフォームの境界、実際のコンポーネントの所有権、正式な圧縮、ソースマップ、SHA-256/SRI、再現可能なビルド、絶対/相対予算、タイプ、互換性ベースライン、サポートポリシー、カスタムビルド、障害パス、npm パッケージのインストール解決
`test:browser`	デスクトップ Chromium + WebKit	48	全 21 例、ホームランディングページとドキュメント、コンソール、リクエスト、スタイル、水平オーバーフロー、ダイアログキーボードとフォーカスのライフサイクル
`test:browser:firefox`	デスクトップ Firefox	24	デスクトップのデフォルトのアクセスと同じです。 Playwright Firefox システムランタイムを使用してホストまたは CI で実行
`test:mobile`	Pixel 7 Chromium + iPhone 13 WebKit	52	全 21 例、ホームランディングページとドキュメント、リフロー、44 ピクセルのタッチターゲット、ボトムシート、320 ピクセルの狭い画面と横長の画面
`test:a11y`	Chromium + Axe	25	WCAG 2 A/AA、2.1 A/AA、2.2 AA の 21 の例とホーム 2 ページ、およびキーボード、フォーカス、RTL、削減モーション、強制カラー
`test:html`	解析5	24	21 の例、ホームとドキュメントの解析、重複 ID、ARIA 参照、言語、タイトル、ビューポート、リスト

npm run test:html             # 24 HTML 構造の使用例
npm run test:browser          # Chromium + WebKit，48 デスクトップの使用例
npm run test:browser:firefox  # Firefox スタンドアロン アクセス コントロール、24 のデスクトップ ユース ケース
npm run test:browser:all      # Chromium + Firefox + WebKit，72 デスクトップの使用例
npm run test:mobile           # Pixel 7 + iPhone 13，52 モバイルの使用例
npm run test:a11y             # Axe、キーボードと環境マトリックス、25 の使用例
npm run test:e2e              # デフォルトの 125 の実際のブラウザの使用例
npm run test:types            # TypeScript 厳格な消費者アクセス制御
npm run verify:compatibility  # 1,145 アイテム 0.9.0 互換ベースライン
npm run verify:package        # npm ファイル、エクスポート、および公開
npm test                      # 281 デフォルトの自動化ユースケースとすべての静的、契約、タイプ、互換性、リリース、再現可能、および予算ゲート

Axe ゲートは、対象の WCAG A/AA ルールで検出されたすべての違反を impact に関係なくブロックし、ルール、ノードセレクター、HTML、修正概要を出力します。自動化は人によるスクリーンリーダーテストの代わりにはならないため、正式製品では NVDA / JAWS / VoiceOver を使って重要な操作を確認する必要があります。

印刷とドキュメントの出力

基本的な印刷レイヤーは、白の背景に黒のテキストを切り替え、フローティングレイヤーと固定ナビゲーションを非表示にし、テーブルヘッダーを繰り返し、カードとメディアがページ全体に広がるのを防ぎ、長いコードを自動的に折り返すことができます。完全なラスターも追加で利用可能 g-print-col-1 へ g-print-col-24、印刷オフセットおよび表示/非表示クラス。用紙幅内で独立して再配置するために使用されます。レポート、請求書、CMS エディターには、レシピレベルの印刷機能もあります。

<button class="g-no-print">編集</button>
<section class="g-report">
  <header class="g-report-header">...</header>
  <table class="g-invoice-lines">...</table>
  <footer class="g-signature-line">...</footer>
</section>

利用可能なツールクラスは次のとおりです g-print-hidden、g-print-block、g-print-break-before と g-break-inside-avoid。

カスタマイズ、検査、リリース

プロジェクトの対象範囲

@layer gardener.overrides {
  :root {
    --g-font-sans: Inter, system-ui, sans-serif;
    --g-reading-max: 72ch;
  }

  [data-brand="acme"] {
    --g-color-primary: #126b41;
    --g-color-primary-text: #0d5733;
  }
}

フレームチェック

npm run build      # 完全な階層化された 28 コンポーネント パッケージと 5 つのプラットフォーム ファイル
npm run build:platform -- --platform mobile # プラットフォーム指向の構造
npm run build:custom -- --components button,dialog # コンポーネント指向ビルド
npm run verify:reproducible # バイトレベルで再現可能なアクセス制御の構築
npm run budget     # raw / gzip / Brotli、絶対/相対および npm パッケージの予算
npm run verify:compatibility # 0.9.0 クロスバージョンの公共契約ベースライン
npm run test:types # TypeScript 厳格な消費者認証
npm run verify:package # npm ファイル、エクスポート ターゲット、および公開
npm run test:schema # Ajv 2020-12 11 セットのスキーマを検証する
npm run test:build # 10 ビルド、タイプ、互換性、リリース、および障害パスの使用例
npm run contracts  # Schema、パブリック API、命名、およびクロスマニフェスト コントラクト
npm run test:runtime # 66 動作と DOM ライフサイクル
npm run test:html   # ホームの例と HTML 構造
npm run check      # テーマ、コンポーネント、ランタイム、およびマニフェストの一貫性
npm run audit      # Token、コントラスト、パケット境界、エクスポートおよびバージョン
npm run validate   # レシピ、クラス名の例、および基本的なアクセシビリティ
npm run test:e2e   # 複数のブラウザ、モバイル、Axe
npm test           # すべてのフレーム チェックを実行する

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # 文書漏れゼロ検証

新しい機能は同期する必要があります

CSS またはランタイムを実装します。
登録 metadata/components.json。
業界能力登録 metadata/capabilities.json、複雑なページ登録 metadata/recipes.json。
完全なステータスマトリックスと環境マトリックスを確認してください。
実行可能なサンプルと検証入力を追加しました。
すべてのマニフェストを再構築し、ブラウザーの回帰を実行します。

ドキュメントサイトのディレクトリブラウザは直接読み取ります css/dist、Vue、React、AngularJS、Blazor metadata / dist 一覧。したがって、フレームワークの構築後に、CSS や 4 セットのアダプテーションレイヤーのコンポーネント数、動作名、入口、ツールクラス検索データを手動で更新する必要はありません。

クイックスタート

推奨される選択順序

インストールとパッケージ

レイヤーごとにグループ化

Gardener Vue 3 プロジェクト

インストールとグローバル プラグイン

オンデマンドのコンポーネントとテーマのプロバイダー

すべてのコンポーネントのパブリック プロパティ、透過的な送信および Ref

v モデル、カスタム イベントおよび手順

7 つすべてがコンポーザブル

Web、モバイル、デスクトップ スタイルの入り口

29 個のパブリック パッケージ エントリすべて

非コンポーネント ランタイム エクスポートと TypeScript タイプ

パブリックスキーマ、メタデータ、および公開アクセス

506 個の Vue コンポーネントすべて

Gardener React プロジェクト

インストールとルート コンポーネント

トピックプロバイダーと 10 個のトピック軸

すべてのコンポーネントに共通する 10 のプロパティ

制御された値、カスタム イベント、および動作インスタンス

フック全7個

Web、モバイル、デスクトップ スタイルの入り口

SSR、ハイドレーション、デスクトップブリッジング

29 個のパブリック パッケージ エントリすべて

非コンポーネント ランタイム エクスポートと TypeScript タイプ

パブリックスキーマ、パフォーマンス、リリースアクセス

506 個の React コンポーネントすべて

Gardener AngularJS プロジェクト

インストール、ESM ロード、およびモジュール ファクトリ

要素ディレクティブ、属性ディレクティブ、およびセマンティクス

8 つのコンポーネントすべてのパブリック プロパティ

ngModel、ネイティブ フォーム、および Gardener イベント

共通のコマンド、サービス、および 10 軸テーマ

Web、モバイル、デスクトップ、およびドメインごとのスタイル

29 個のパブリック パッケージ エントリすべて

非コンポーネント ランタイム エクスポートと TypeScript タイプ

パブリックスキーマ、互換性、パフォーマンス、リリースアクセス

506 個の AngularJS コンポーネントすべて

Gardener Blazor プロジェクト

インストール、登録、および静的リソース

コンポーネント、プロバイダー、および SSR

共通パラメータ、refnum、およびフォーム

値バインディング、75 個のイベントおよび 7 個の同期ガード

テーマ、サービス、およびデスクトップ ブリッジ

完全なパブリック型と機械可読コントラクト

1.0.0 リリースの品質

506 個の Blazor コンポーネントすべて

設計原則

CSS レイヤーの順序

テーマシステム

トピック軸

デザイントークン

部分的な適用範囲

CSS 完全な API

すべての CSS インターフェースを検索

すべてのソース コード モジュール

ツール

完全なツール リストを検索する

レイアウトシステム

ダッシュボードの例

24 / 12 完全なグリッド システム

リアルタイム 24 グリッド

12グリッド対応

完全なクラス名マトリックス

ブレークポイント

コンテナクエリ

RTL、ネスティングおよび印刷

従来のエリアレイアウトシステム

リアルタイム 5 領域レイアウト

完成スケルトン16種類

5つのエリアとマスター/詳細

ドックと調整可能なコラム

レスポンス、コンテナ、状態、変数

クラシック レイアウト プリミティブ

リアルタイム Bento とストリーミング プリミティブ

22 個のプリミティブの完全なマトリックス

よく使われる組み合わせ

メディア オブジェクト、オーバーレイ、スクロール

対応と環境のルール

ページレベルのパブリックコンポーネント

インストールとグローバルプラグイン

すべてのコンポーネントのパブリックプロパティ、透過的な送信および Ref

v モデル、カスタムイベントおよび手順

Web、モバイル、デスクトップスタイルの入り口

29 個のパブリックパッケージエントリすべて

非コンポーネントランタイムエクスポートと TypeScript タイプ

インストールとルートコンポーネント

制御された値、カスタムイベント、および動作インスタンス

Web、モバイル、デスクトップスタイルの入り口

29 個のパブリックパッケージエントリすべて

非コンポーネントランタイムエクスポートと TypeScript タイプ

インストール、ESM ロード、およびモジュールファクトリ

8 つのコンポーネントすべてのパブリックプロパティ

ngModel、ネイティブフォーム、および Gardener イベント

29 個のパブリックパッケージエントリすべて

非コンポーネントランタイムエクスポートと TypeScript タイプ

テーマ、サービス、およびデスクトップブリッジ

すべてのソースコードモジュール

完全なツールリストを検索する

24 / 12 完全なグリッドシステム

クラシックレイアウトプリミティブ

リアルタイム Bento とストリーミングプリミティブ

メディアオブジェクト、オーバーレイ、スクロール

リアルタイムページヘッダーとパブリック列

ヒントとヘルプシステム

リアルタイムヘルプパッケージ

宣言型ランタイムインターフェイス

ファイルおよびコンテンツシステム

宣言型ランタイムインターフェイス

ログインおよびアカウントシステム

宣言型ランタイムインターフェイス

ステータス、エンドポイント、およびセキュリティルール

宣言型ランタイムインターフェイス

宣言型ランタイムインターフェイス

ライブデスクトップワークスペース