Gardener Documentation

Quick Start

Gardener can use only CSS, or load a zero-dependency runtime for interactive behavior. The full package includes all themes, components and tool classes by default.

<!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">Getting Started</button>
  </main>
  <script type="module" src="gardener.runtime.js"></script>
</body>
</html>

Default visual:White canvas, neutral text, 4px basic rounded corners, restrained shadow. Rounded corners and strong hierarchy must be selected explicitly and will not pollute ordinary business pages.

Recommended selection order

Confirm destination and page type.
Prioritize structure selection from page recipes.
Fill function with registered components.
Only use tool classes to handle local layout and spacing.
Finally set the topic axis and check the full environment matrix.

Installation and Packages

The current build has no third-party runtime dependencies. Available via package manager or copied directly dist/ .

npm install @gardener/css

Export	Content	Usage scenarios
`@gardener/css`	Full CSS + default runtime entry	Use directly out of the box
`core.css`	Token, theme axis, Reset, Base	Self-built component library
`themes.css`	42 Main color and display mode	Reuse topics only
`utilities.css`	All responsive tool classes	Atomic formula page
`components.css`	Non-AI generic components and complete rasters	Business system
`ai.css`	AI-specific components	Chat, Agent, Generation Tool
`./tauri`	Tauri Window Control Adapter	Desktop WebView
`./electron`	Electron Safety Bridge Adapter	Desktop Client
`./manifest`	Component and Environment List	AI / Automation Tools
`./utilities-manifest`	Tool class declaration and response conditions	Exact class name search
`./recipes`	High frequency page recipe	Page skeleton selection
`./capabilities`	Industry capability implementation status and interface matrix	Prevent concept-level omissions
`./public-api`	Public Naming, Behaviors, Events, and Adapter Contracts	Generators and Integration Tools
`./builds`	Platform archives, component packages, component ownership and builder contracts	Generate by platform/component
`./performance`	raw, gzip, Brotli and npm package size reporting	Release Performance Gate
`./components-manifest`	Component Source List	Component retrieval and code generation
`./schema/*`	Ten sets of closed JSON Schema	Contract Verification

Group by layer

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

Gardener Vue 3 Project

@gardener/vue is the official Vue 3 adaptation layer of Gardener CSS 1.0.0, the current version is 1.0.0 Stable, supports Vue >=3.4.0 <4.0.0 with Node.js >=18.18. It maps all 506 CSS components and 66 DOM behaviors on an item-by-item basis, while providing 538 root runtime exports, 21 TypeScript type exports, 29 package entry points, and 28 component CSS package proxies.

506Named G* component

538Root runtime export

29Public package entry

28Component CSS package

Installation and Global Plugins

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");

Complete coverage of plug-in options prefix、components、directive and initialize. Need to customize prefix, register only some components, close v-gardener or deferred runtime initialization should be passed createGardenerVue(options) Create plug-in.

On-demand components and themes Provider

<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">Save</GButton></GCard>
  </GardenerProvider>
</template>

GardenerProvider The ten thematic axes of are theme、mode、neutral、typography、shape、density、elevation、motion、platform and os. Home and samples remain white with light and small rounded corners by default; dark mode is not enabled by default.

Public properties, transparent transmission and Ref of all components

Properties	Purpose	Agreement
`as`	Modify root element or Vue component	Preserve Gardener class, properties and slots
`variant`	Apply variant	Accepts a string or an array of strings
`state`	Application component status	Convert to `is-*` Status class
`config`	Declare runtime configuration	Convert to corresponding `data-g-*` Properties
`initialize`	Control DOM behavior initialization	Default `true`
`modelValue`	Vue two-way binding value	Both native form and custom Gardener events are supported
`modelEvent`	Specify custom synchronization events	Use `gardener:*` Event name
`modelKey`	Get value from event payload	Read `CustomEvent.detail` Specify field

All native attributes, DOM events, and slots are passed through. Component template Ref unified disclosure element、getInstance() and refresh(). Used in composite structures such as dialog boxes and drawers GardenerPart Create standard internals to avoid breaking CSS and behavior selector contracts.

v-model, custom events and instructions

<GInput v-model="keyword" />

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

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

vGardener(template name v-gardener) Mount, refresh and destroy specified behaviors along with the Vue life cycle. Native input usage standards update:modelValue;Complex components passed modelEvent and modelKey Bridge Gardener custom events to the same protocol.

All 7 Composable

useGardenerAccess runtime, initialization and destruction capabilities

useGardenerBehaviorBind behavior and access instances

useGardenerEventType-safe listening for gardener:* events

useGardenerThemeRead and update ten-axis theme status

useGardenerToastCreate and manage Toasts

useTauriWindowControlsBind Tauri window button and destruction cycle

useElectronWindowControlsBinding Electron security bridge and destruction cycle

Web, mobile and desktop style entrance

Entrance	Content	Applicable scenarios
`@gardener/vue/style.css`	Complete Gardener style	Out of the box and prototype
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Layered style entry	Custom build
`platform/web.css`	General Web Capabilities	PC, responsive website, Dashboard
`platform/mobile.css`	Universal + mobile combination	Mobile web page, PWA, WebView
`platform/desktop.css`	Universal + Desktop Combo	Desktop browser and application shell
`platform/tauri.css`	Desktop portal + Tauri adaptation	Tauri window
`platform/electron.css`	Desktop portal + Electron adaptation	Electron window
`component-css/*`	28 stable component CSS package proxies	Load by functional domain

Recommended root entry for general applications or @gardener/vue/components Get the best tree shake; @gardener/vue/bundle.min.js is a precompressed single file entry. SSR import does not access browser global objects, and the behavior is only initialized after the component is mounted, so it can be used for server-side rendering and Hydration.

All 29 public package entries

JavaScript:.、./components、./component、./composables、./directives、./plugin、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Style:./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 and ./component-css/*. Contract and package information:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Non-component runtime exports and TypeScript types

32 non-component runtimes exported as: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 Composable and vGardener。

21 types exported as:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentKind、GardenerComponentPublicInstance、GardenerConfigValue、GardenerDirectiveOptions、GardenerDirectiveValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerPlatform、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerVueComponentName、GardenerVueOptions。

Public Schema, Metadata, and Publishing Access

Public API、Compatibility and Performance Both have JSON Schemas that turn off unknown fields;Component Catalog JSON Readable directly by AI, code generators, and documentation tools. The budget for the full compressed package is 328,220 B raw, 51,602 B gzip, 26,926 B Brotli; single GButton The actual tree shaking result is 3,718 B. Deterministic build covers 87 files, npm package checks 98 files, 284,183 B packed, 3,729,929 B unpacked.

cd vue
npm run release:verify

# Build, Generate Overrides, Schema, Vue SFC Types, Units and DOM Lifecycle、
# Chromium / WebKit / Firefox / Mobile, WCAG A/AA, Example、
# Tree shaking, reproducible builds, performance budgeting, npm packaging and publint

All 506 Vue components

The following directories are merged directly Vue public API and Component metadata, itemizes Vue export names, CSS names, categories, types, selectors, variants, states, widgets, behaviors, and platforms. It is not a featured sample; all 506 items are in the same searchable directory.

Reading Vue component manifest...

Gardener React Project

@gardener/react is the official React adaptation layer of Gardener CSS 1.0.0, the current version is 1.0.0 Stable, supports React >=18.3.0 <20.0.0 with Node.js >=18.18. It maps all 506 CSS components and 66 DOM behaviors item by item, while providing 538 root runtime exports, 22 TypeScript type exports, 29 public package entry points, and 28 component CSS package proxies.

506Named G* component

538Root runtime export

29Public package entry

28Component CSS package

Installation and root components

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">Save</GButton></GCard>
  </GardenerProvider>,
);

Components all support named import on demand; the builder can start from the root entry or @gardener/react/components Shake the tree. Each generated component retains the exact attribute type of its default HTML tag, e.g. GButton Accept type="submit"，GInput Accept type and autoComplete, while allowing the as Switch to other native elements or React components.

Topic Provider and ten topic axes

<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="Application topic scope"
>
  <App />
</GardenerProvider>

GardenerProvider The ten thematic axes of are theme、mode、neutral、typography、shape、density、elevation、motion、platform and os. It also transparently transmits className, style, ID, ARIA and other native attributes; useGardenerTheme for literacy topics, useGardenerThemeContext for reading context directly. The default is still white Light with small rounded corners, and the dark theme will not be automatically enabled.

10 common properties for all components

Properties	Purpose	Agreement
`as`	Modify root element or React component	Keep Gardener class, properties, children and Ref
`variant`	Apply variant	String or read-only array of strings
`state`	Application component status	Convert to `is-*` Status class
`config`	Declaration behavior configuration	Convert to corresponding `data-g-*` Properties
`initialize`	Control DOM behavior initialization	Default `true`
`value`	Controlled value	Support native forms and custom Gardener events
`defaultValue`	Uncontrolled initial value	checkbox boolean mapped to `defaultChecked`
`valueEvent`	Specify value synchronization event	Available `gardener:*` Event name
`valueKey`	Get value from event payload	Read `CustomEvent.detail` Specify field
`onValueChange`	Receive new value with original Event	Automatic deduplication of native input/change

Native attributes, events, children and className All are transparently transmitted. Component Ref unified public element、getInstance() and refresh(); Composite structures are available GardenerPart Create internal components. checkbox boolean value Use checked, radio retains the string value to ensure consistent semantics of React forms.

Controlled values, custom events and behavior instances

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

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

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

useGardenerBehavior Bind 66 behaviors to an element, Document or component Handle and destroy them on unload;initialize Automatic component initialization can be turned off to facilitate unified takeover by the page-level runtime. The behavior of explicitly passing in a data attribute takes precedence over generating a default value.

All 7 Hooks

useGardenerAccess runtime, initialization, observation and destruction capabilities

useGardenerBehaviorBind behavior and access instances

useGardenerEventType-safe listening for gardener:* events

useGardenerThemeRead and update ten-axis theme status

useGardenerToastCreate and manage Toasts

useTauriWindowControlsBind Tauri window button and destruction cycle

useElectronWindowControlsBinding Electron security bridge and destruction cycle

Web, mobile and desktop style entrance

Entrance	Content	Applicable scenarios
`@gardener/react/style.css`	Complete Gardener style	Out of the box and prototype
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Layered style entry	Custom build
`platform/web.css`	General Web Capabilities	PC, responsive website, Dashboard
`platform/mobile.css`	Universal + mobile combination	Mobile web page, PWA, WebView
`platform/desktop.css`	Universal + Desktop Combo	Desktop browser and application shell
`platform/tauri.css`	Desktop portal + Tauri adaptation	Tauri window
`platform/electron.css`	Desktop portal + Electron adaptation	Electron window
`component-css/*`	28 stable component CSS package proxies	Load by functional domain

SSR, Hydration and Desktop Bridging

The package entry can be safely imported on the server side. All 506 components have gone through item-by-item SSR, and the behavior is only initialized during the Effect life cycle; the server-side mark Hydration does not generate recoverable errors and is compatible with StrictMode. Tauri and Electron are used respectively @gardener/react/tauri and @gardener/react/electron Independent portals so that neither portal accidentally exports another platform's bridging 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>;
}

All 29 public package entries

JavaScript:.、./components、./component、./hooks、./provider、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Style:./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 and ./component-css/*. Contract and package information:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Non-component runtime exports and TypeScript types

32 non-component runtimes exported as: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 types exported as:GardenerAs、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerComponentProps、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerElementTarget、GardenerEventHandler、GardenerEventName、GardenerGeneratedComponent、GardenerOwnProps、GardenerPlatform、GardenerReactComponentName、GardenerTargetValue、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeState、GardenerValueChange。

Public Schema, Performance and Release Access

Public API、Compatibility and Performance Both validated by JSON Schema with unknown fields turned off;Component Catalog JSON Readable directly by AI, code generators, and documentation tools. The actual measurement of the full compressed package is 326,064 B raw, 50,126 B gzip, 26,381 B Brotli; single GButton The actual tree shaking result is 2,599 B. The deterministic build covered 87 files, the npm package checked 98 files, 262,706 B packed, 2,438,775 B unpacked, and the production dependency security audit was 0 vulnerabilities.

cd react
npm run release:verify

# Build and Public API, Schema, TypeScript, 506 Component SSR, Hydration, DOM Lifecycle、
# Chromium / WebKit / Firefox / Pixel 7 / iPhone 13、WCAG A/AA、
# Tree shaking, reproducible builds, performance budgeting, npm packaging and publint

All 506 React components

The following directories are merged directly React Public API and Component metadata, itemizing React export names, CSS names, categories, types, default tags, selectors, variants, states, widgets, behaviors, and platforms. It is not a featured sample; all 506 items are in the same searchable directory.

Reading React component manifest...

Gardener AngularJS Project

@gardener/angularjs is the official AngularJS 1.x legacy system adaptation layer for Gardener CSS 1.0.0, the current version is 1.0.0 Stable. It validates AngularJS >=1.8.2 <1.9.0 with Node.js >=18.18, item-by-item mapping of all 506 CSS components and 66 DOM behaviors, and provides 535 root runtime exports, 24 TypeScript type exports, 29 public package entry points, and 28 component CSS package proxies.

Legacy system boundaries:AngularJS has ended official support and there are no known security advisories for the framework itself that have no upstream fixes. This adaptation layer will angular Keep it as an external peer dependency, which does not push it into the Gardener product and does not cover framework-level risks. New projects are given priority to choose Vue, React or framework-independent entrances; existing projects must also implement input sanitization, CSP, resource whitelisting, desktop bridge minimum authorization and migration plan. For complete requirements see AngularJS Security Baseline。

506Generate component instructions

535Root runtime export

29Public package entry

28Component CSS package

Installation, ESM loading and module factory

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 packages are not native ESM and therefore should be used in build tools like Vite import "angular/angular.js" Import the side effects of window.angular Explicit handover createGardenerAngularJS;Do not rely on unstable import angular from "angular" Imported by default. The Gardener package itself does not read global AngularJS, and the root entry is safe for SSR toolchain analysis.

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

components Accepts a component name, AngularJS directive name, or ESM export name, constrained by 506 union types; unknown names will immediately throw an error. Repeated installations of the same AngularJS instance, module name, and equivalent options are idempotent. When different component subsets, dependencies, or initialization options use modules with the same name, an error will be explicitly reported to prevent silently obtaining semi-registered modules.

Element directives, attribute directives and semantics

<gardener-provider gardener-theme="garden" gardener-mode="light" gardener-shape="small">
  <g-card gardener-variant="interactive">Element command content</g-card>
  <button g-button gardener-variant="primary" type="submit">Save</button>
  <input g-input ng-model="vm.keyword" aria-label="Keywords">
</gardener-provider>

Each component starts with restrict: "EA" Supports both element and attribute forms, e.g. <g-card> / gCard and <article g-card>. When it comes to native semantics such as button, input, select, form, table, nav, aside, etc., priority should be given to using attributes to allow keyboards, form submissions, browser validation, and assistive technologies to continue to use native behaviors.

Public properties for all 8 components

AngularJS property names	Template writing method	Purpose
`gardenerVariant`	`gardener-variant`	Apply space or comma separated component variants
`gardenerState`	`gardener-state`	Map one or more `is-*` Status class
`gardenerConfig`	`gardener-config`	Depth listen expression object and map to `data-g-*` Configuration
`gardenerInitialize`	`gardener-initialize`	Dynamically enable or completely disable DOM behavior initialization
`ngModel`	`ng-model`	Preserve AngularJS native form model or bridge custom component values
`gardenerValueEvent`	`gardener-value-event`	Select for updating model `gardener:*` Custom events
`gardenerValueKey`	`gardener-value-key`	From `CustomEvent.detail` Read the specified field
`gardenerOnValueChange`	`gardener-on-value-change`	Call expression and provide `$value`、`$event` locals

The instruction handle is stored in angular.element(node).data("$gardenerHandle"), unified disclosure element、getInstance()、refresh() and destroy()。refresh() The node subtree will be destroyed first and then initialized according to the current configuration; scope $destroy removes the event and destroys the behavior instance.

ngModel, native forms, and Gardener events

<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">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>

The model semantics of native input, textarea and select are still managed by AngularJS itself and will not be covered by the adaptation layer. ngModel.$render or repeated call $setViewValue; checkbox holds boolean values, radio holds option values, and multiple select holds arrays. The complex Gardener component updates the model via custom events and uses gardenerOnValueChange Receive consistent callback values.

Common commands, services and ten-axis themes

gGardenerTemplate writing g-gardener, dynamically declare, switch and destroy arbitrary behaviors

gardenerProviderElement or attribute form provides ten-axis theme and initializes subtree

GardenerRuntimeinit · destroy · getInstance · emit · observe

GardenerThemeattributes · apply · read · clear

GardenerToastshow(options)

Topic axis complete coverage theme、mode、neutral、typography、shape、density、elevation、motion、platform and os, corresponding to the template gardener-theme To gardener-os. The default sample keeps the white Light and small rounded corners.

Web, mobile, desktop and per-domain styles

Entrance	Content	Applicable scenarios
`@gardener/angularjs/style.css`	Complete Gardener style	Out-of-the-box and progressive integration into legacy systems
`core.css` / `themes.css` / `utilities.css` / `components.css` / `ai.css`	Layered style entry	Custom build
`platform/web.css`	General Web Capabilities	PC Website and Dashboard
`platform/mobile.css`	Mobile Components and Safe Zones	Mobile web page, PWA, WebView
`platform/desktop.css`	Desktop workspace combination	Desktop browser and application shell
`platform/tauri.css`	Desktop portal + Tauri adaptation	Tauri window
`platform/electron.css`	Desktop portal + Electron adaptation	Electron window
`component-css/*`	28 stable component CSS package proxies	Load by functional domain

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

Tauri and Electron entrances are isolated from each other and both return to the belt available and destroy() Binding object; the rendering layer should only receive minimal whitelisted bridging capabilities.

All 29 public package entries

JavaScript:.、./components、./directives、./services、./module、./adapters、./tauri、./electron、./catalog、./catalog.json、./bundle.min.js. Style:./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 and ./component-css/*. Contract and package information:./performance、./schema/public-api、./schema/compatibility、./schema/performance、./package.json。

Non-component runtime exports and TypeScript types

29 non-component runtimes exported as: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 types exported as:GardenerAngularJSComponentExportName、GardenerAngularJSComponentName、GardenerAngularJSDirectiveFactory、GardenerAngularJSDirectiveName、GardenerAngularJSModule、GardenerAngularJSOptions、GardenerAngularJSStatic、GardenerBehaviorInstance、GardenerBehaviorName、GardenerComponentDefinition、GardenerComponentHandle、GardenerComponentKind、GardenerConfigValue、GardenerElectronBinding、GardenerElectronBridge、GardenerEventName、GardenerPlatform、GardenerRuntimeService、GardenerTauriBinding、GardenerTauriBridge、GardenerThemeAxis、GardenerThemeService、GardenerThemeState、GardenerValueChangeLocals。

Public Schema, Compatibility, Performance and Release Access

Public API、Compatibility and Performance Both are validated by JSON Schema with unknown fields turned off; AngularJS support ranges are also written to the machine-readable compatibility baseline.Component Catalog JSON Readable directly by AI, code generators, and documentation tools. The actual measurement of the full compressed package is 404,094 B raw, 59,499 B gzip, 29,785 B Brotli; single GButtonDirective is 4,515 B. Deterministic build covered 83 files, npm package check 95 files, 325,747 B packed, 2,938,245 B unpacked, Gardener's own production load audit was 0 vulnerabilities.

cd angular
npm run release:verify

# Generate and Public API, 3 sets of Schemas, TypeScript, AngularJS 1.8.2 / 1.8.3、
# 506 Directive registration, ngModel and DOM life cycle, Chromium / WebKit / Firefox、
# Pixel 7 / iPhone 13、WCAG A/AA、Tree shaking, reproducible builds, performance, packetization and publint

The current gate contains 17 runtime/contract tests, 3 Schema tests, 20 Five Engine and mobile browser integration tests, and 1 Ax WCAG A/AA automated audit. complete npm audit Known advisories for the AngularJS ontology will still be shown faithfully; this is a legacy risk that must be isolated, accepted, or migrated, and cannot be marked as fixed.

All 506 AngularJS components

The following directories are merged directly AngularJS Public API and Component metadata, itemizes the ESM directive factory export name, CSS name, category, type, default tag, selector, variant, state, widget, behavior, and platform. It is not a featured sample; all 506 items are in the same searchable directory.

Reading AngularJS component manifest…

Gardener Blazor Project

Gardener.Blazor is the official Razor Class Library for Gardener CSS 1.0.0, the current version is 1.0.0 Stable. stabilize assets to net10.0 Compiled and verified with an independent NuGet consumer net11.0;Applies to Blazor Web App Static SSR, Interactive Server, Interactive WebAssembly, Auto, Standalone WebAssembly, Hybrid, and Desktop WebView.

506 Razor components 66 DOM behavior 75 Runtime events 28 Frame type 43 Static resources

Installation, registration and static resources

<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" />

Components are loaded on demand during first interactive rendering _content/Gardener.Blazor/gardener.blazor.js, no need for handwritten script tags. In addition to the full range of styles, we also provide 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 and 28 components/*.min.css Component domain entry, all official compressed files carry external Source Map.

Components, Providers and SSRs

@using Gardener.Blazor.Components

<GardenerProvider Theme="garden" Mode="light" Shape="small"
                   Density="comfortable" Platform="web">
  <GAppShell>
    <GSidebar>Navigation</GSidebar>
    <GMainRegion>
      <GCard>
        <GButton Variant="primary" @onclick="Save">Save</GButton>
      </GCard>
    </GMainRegion>
  </GAppShell>
</GardenerProvider>

Each CSS component has a corresponding G* type and retain default semantic tags, selectors, states, widgets, behaviors, platform and accessibility metadata. The static SSR phase directly outputs complete HTML, and only mounts the DOM behavior after establishing an interactive connection; changes in parameter signatures will refresh the mount, and the listener will be logged out when the component is released. GardenerComponent Can dynamically render by metadata name,GardenerBehavior Behaviors can be attached to any content,GardenerPart Used to output agreed component classes.

Common parameters, refnums, and forms

All generated components share 20 parameters:As、Id、Class、Style、Variant、Variants、State、States、Config、Initialize、Value、ValueChanged、ValueEvent、ValueKey、OnValueChange、EventNames、PreventDefaultEvents、OnEvent、ChildContent、AdditionalAttributes。

The component reference provides 6 instance members:Element、RefreshAsync、DestroyAsync、FocusAsync、GetBehaviorMembersAsync、InvokeBehaviorAsync。 GardenerField<TValue> Inheritance InputBase<TValue>, support EditForm、EditContext, DataAnnotations, validation status, input, select and textarea.

Value binding, 75 events and 7 sync guards

<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 Handle native input/change,ValueEvent and ValueKey Handling complex CustomEvents. Values are converted to .NET strings, Boolean, numbers, arrays, or dictionaries; DOM, File, BigInt, functions, and circular references are serialized safely. GardenerEvents.All Expose all 75 events,GardenerEvents.Guards Exposed beforeapproval, beforeclose, beforefilepicker, beforeopen, beforepromptstop, beforepromptsubmit, beforetabclose 7 guard events that must be blocked synchronously before JS/.NET asynchronous boundaries. Behavior members and event detail contracts are available from GardenerRuntimeCatalog Query.

Themes, Services, and Desktop Bridges

GardenerProvider Support Theme, Mode, Neutral, Typography, Shape, Density, Elevation, Motion, Platform, Os ten-axis nested theme;GardenerThemePresets.All Contains 42 color themes, with the default white background Light and small rounded corners small. The 5 scope services are GardenerRuntime、GardenerThemeService、GardenerToastService、GardenerTauriService、GardenerElectronService. Desktop Bridge only calls whitelist objects explicitly exposed by the host preloading layer and does not open Node's global capabilities.

Complete public types and machine-readable contracts

The 28 frame types are: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 Public API、Component metadata、Compatibility、Performance Both have closed JSON Schema. Readable documentation also includes API、66 behaviors、75 events、43 static resources、Runtime、Accessibility and SSR and Release access control。

1.0.0 Release Quality

Release build with 0 warnings, 0 errors; 506 components all passed true static SSR. Browser Matrix covers Chromium, Firefox, WebKit, desktop and mobile viewports, keyboard, and Ax WCAG A/AA; CI mandates Firefox. NuGet uses an isolated cache to actually publish consumer applications and validate static Web Assets endpoint manifests; there is also a standalone .NET 11 Preview package consumer. The measured assembly is 343,552 B, 43 static resources total 7,608,327 B, CSS gzip 139,269 B, runtime gzip 25,989 B, Blazor bridge gzip 2,054 B, nupkg about 1.22 MiB, below the 6,000,000 B hard limit; all below the hard budget and DLL/XML Reproducible.

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

All 506 Blazor components

The following directories are merged directly Blazor Public API and Component metadata, itemizing Razor types, CSS names, categories, types, default tags, selectors, states, variants, widgets, behaviors, platforms, and accessibility contracts. It is not a featured sample; all 506 items are in the same searchable directory.

Reading Blazor component manifest...

Design Principles

Neutral priorityThe default style is suitable for individuals, enterprises, backends and content stations, and does not preset a strong brand personality.

Small rounded corners default--g-radius-md Fixed to 0.25rem; capsules and fillets are used only for semantic clarity.

Redundancy is better than absenceHighly reusable complex structures exist as components or recipes and do not require the AI to be temporarily combined each time.

Separation of semantics and appearancePrimary color, display mode, density, font, shape, and platform can be changed independently.

Logical direction attributeComponents preferentially use the inline/block direction to reduce RTL-specific coverage.

Machine VerifiableComponents, utility classes, recipes, and runtime capabilities have manifests and build checks.

CSS layer order

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

It is recommended to write the project custom style gardener.overridesto avoid increasing the selector weight.

Theme system

The color theme is only responsible for the main brand color; the display mode is independent of other theme axes. This site uses Light to maintain a white document experience, but the framework also provides Dark, System and High Contrast.

Reading topic list...

Topic axis

Properties	Available values	Purpose
`data-g-theme`	garden, blue, violet, etc. 42 items	Brand main color
`data-g-mode`	light, dark, system, high-contrast	Display mode
`data-g-neutral`	cool, warm, gray, ink, cream, blueprint, paper	Neutral background and text
`data-g-typography`	system, corporate, humanist, editorial, technical, geometric, rounded, classic, compact, cjk	Font temperament
`data-g-shape`	sharp, small, medium, soft, round	Shapes and Fillets
`data-g-density`	compact, standard, comfortable, touch	Control Density
`data-g-elevation`	flat, bordered, layered, floating	Borders and shadows
`data-g-motion`	none, calm, standard, quick	Animation rhythm
`data-g-platform`	web, mobile, desktop, tauri, electron	Platform details
`data-g-os`	windows, macos, linux	Desktop system appearance

<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">

Design Token

The component only consumes semantic tokens. Brand customization should override the Token rather than copy the component rules.

Family	Example	Description
Color	`--g-color-primary`、`--g-color-primary-text`	Fill color separated from readable foreground color
Surface	`--g-color-canvas`、`--g-color-surface-raised`	Canvas, normal, raised, slight, sunken surface
Text	`--g-color-text`、`--g-color-text-muted`	Text, weakened and supporting text
Semantics	`--g-color-success`、`--g-color-danger-soft`	Success, warning, danger, information and soft background
Spacing	`--g-space-0`…`--g-space-96`	Contains half-order, decimal order and pixel values
Font	`--g-font-size-sm`、`--g-line-height-normal`	Font size, font weight, line height, font family
Shape	`--g-radius-sm`…`--g-radius-full`	Default small rounded corners, can be explicitly extended
Animation	`--g-duration-fast`、`--g-ease-standard`	Duration and Easing
Hierarchy	`--g-z-dropdown`、`--g-z-dialog`	Stable stacking sequence of floating layer, Dialog, Toast, etc.
Layout	`--g-header-height`、`--g-sidebar-width`	Application shell size

Partial coverage

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

CSS full API

This index is provided by css/src/**/*.css Automatically generated, covering every source code module, semantic class, primitive selector, token, custom state hook, data attribute and keyframe; for tool classes use the dedicated complete list in the next section. It is a source-level directory, not a featured example.

—Source code module

—All categories

—Semantic Selector

—Token

Override rules:each g-* The class must appear in the CSS Full API or Tool Classes list; each component, runtime, and page recipe must also appear in their respective directories. Build verification calculates SHA-256 on a file-by-file basis to avoid directories falling behind the source code.

Search all CSS interfaces

Reading CSS index…

All source code modules

Expand any module to view the classes, tokens, states, data attributes, and keyframes exposed by the file. The generative tools module links to a separate 11,498-item inventory.

Reading module list...

Tools

Used by all tools g- prefix. The reactive prefix precedes the function name, e.g. g-md-grid-cols-2. Decimal points are written with an underscore, for example g-p-2_5; Use negative values g-neg-mt-4。

Breakpoint	Minimum width	Typical terminal
`g-sm-*`	480px	Large mobile phone
`g-md-*`	768px	Tablet
`g-lg-*`	1024px	Small desktop
`g-xl-*`	1280px	Standard desktop
`g-2xl-*`	1536px	Widescreen workbench

Priority use start/end、x/y and other logical direction tools. Use only if physical orientation is explicitly required left/right。

Search the complete tool list

Enter a class name, full selector, CSS property, value, or response condition. To avoid rendering 11,498 items at once, enter at least two characters before displaying in batches of 100 items at a time; enter g- You can browse the entire content batch by batch.Raw JSON manifestContains every item suitable for direct reading by AI and build tools.

Reading tool list...

Layout system

The base layout is responsible for containers and grids, and the application shell is responsible for fixed areas, scrolling boundaries, and end-fitting. For complex pages, do not start directly with a large number of positioning tool classes.

.g-containerStandard page width and adaptive left and right margins.

.g-stack / .g-clusterHorizontal combination of vertical flow and word wrapping.

.g-grid-autoAdaptive card grid without breakpoints.

.g-app-shellBackend basic shell for sidebar, page header, and main content.

.g-mobile-shellTop and bottom navigation and safe areas.

.g-desktop-shellTitle bar, activity bar, workbench, inspector and status bar.

Dashboard example

<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 Complete Grid System

Gardener uses 24 raster as the main compatible protocol for enterprise backend, CMS and fine forms, while passing .g-grid-12 Provides traditional 12-grid. Both use native CSS Grid, logical direction and unified breakpoints, and don't rely on negative margins.

24 columns12 compatible5 breakpointsRTLContainer QueryPrint

Interface selection:.g-row and .g-grid-24 Equivalent, suitable for 24-grid; must be used for legacy 12-grid .g-grid-12 as parent. The column width class remains the same, the AI only needs to determine the parent system first.

Real-time 24 grid

6 / 24

12 / 24

6 / 24

offset 4 + span 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 grid compatible

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>

Complete class name matrix

Ability	Class name	Scope or Description
Root container	`g-row`、`g-grid-24`、`g-grid-12`	24, 24, 12 columns
Column width	`g-col-1`…`g-col-24`	span 1–24; 12 grid uses 1–12
Auto and Fill	`g-col-auto`、`g-col-fill`、`g-col-fill-from-1`…`g-col-fill-from-24`	Single rail automatic placement, entire row filling, deterministic filling of remaining columns from specified grid lines
Default vs. entire line	`g-col`、`g-col-full`	Both explicitly occupy the entire line
Offset	`g-offset-0`…`g-offset-23`	Offset from logical inline-start direction
Explicit grid lines	`g-col-start-1`…`g-col-start-25` `g-col-end-1`…`g-col-end-25`	Complex non-contiguous layout
Responsive	`g-sm-col-`、`g-md-col-`、`g-lg-col-`、`g-xl-col-`、`g-2xl-col-*`	Column, offset, start and end lines, display state and gutter are all responsive
Sequence	`g-order-0`…`g-order-24`	Also available in five-speed responsive version
Spacing	`g-gutter-`、`g-gutter-x-`、`g-gutter-y-*`	0、1、2、3、4、5、6、8、10、12
Row alignment	`g-row-top`、`g-row-middle`、`g-row-bottom`、`g-row-stretch`	Control cross-axis alignment of columns
Single column alignment	`g-col-self-start`、`g-col-self-center`、`g-col-self-end`、`g-col-self-stretch`	Overwriting a single column
Auto Layout	`g-row-dense`、`g-row-no-gutter`	Dense padding and zero spacing
Display status	`g-col-hidden`、`g-md-col-visible`	Each breakpoint has hidden / visible
Subgrid	`g-subgrid`、`g-subgrid-cols`、`g-subgrid-rows`	Inherit parent grid track when browser supports it
Print	`g-print-col-1`…`g-print-col-24`	There are also print offset, start, end, hidden, visible

Breakpoint

prefix	Viewport minimum width	Example
`sm`	480px	`g-sm-col-12`
`md`	768px	`g-md-offset-4`
`lg`	1024px	`g-lg-col-start-7`
`xl`	1280px	`g-xl-gutter-6`
`2xl`	1536px	`g-2xl-col-8`

Container Query

Use in outer layers when component width is determined by panel rather than viewport .g-grid-container, the column uses 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, Nesting and Printing

Offset and gridlines follow CSS logical inline direction; in dir="rtl" automatically starts from the right, no need for another set of classes.
Any column can be placed again g-row、g-grid-24 or g-grid-12, forming a nested raster.
Printing side use g-print-col-* Explicit rearrangement;g-print-col-hidden Hide columns that should not be printed.

Capability ListDocuments the system number, column width, offset, breakpoints, container breakpoints, spacing, and test matrix of the raster;Independent Raster Sample PageFor real verification 24 / 12, RTL, Container Query and printing structure. Build checks verify all classes one by one instead of just checking a few examples.

Traditional area layout system

The second type of capability solidifies long-term reused page skeletons into 16 semantic layouts. Areas should be named in a consistent logical direction; AI should select the closest root layout first, then fill in the components, and do not reorganize the Grid, positioning, and mobile-side folding CSS.

16 patternsViewport + ContainerRTLSafe AreaTauri/ElectronPrint

Naming protocol:top / start / main / end / bottom are five common areas;start and end changes with writing direction. Special canvases that require fixed visual left/right should clarify the direction on their own without breaking the common logical semantics.

Real-time five-region layout

Top

Main workspace

16 types of finished skeletons

Layout	Root class	Direct parts/applicable scenarios
Upper / Main / Lower	`g-region-stack`	`g-region-top`、`g-region-main`、`g-region-bottom`;General website and documentation pages
Beginning/Main/End	`g-region-inline`	`g-region-start`、`g-region-main`、`g-region-end`;Three columns of content
Five areas	`g-region-frame`	top / start / main / end / bottom; portal and complex background
Holy Grail	`g-holy-grail`	Five-region semantic aliasing; traditional responsive web pages
Single sidebar application shell	`g-sidebar-shell`	top / start / main; Dashboard and CMS
Double sidebar	`g-double-sidebar-layout`	start / main / end; editor, management console
Master-Slave View	`g-master-detail`	`g-master`、`g-detail`;Email, Contact, Order
List/Details/Inspector	`g-list-detail-inspector`	`g-region-list`、`g-detail`、`g-region-inspector`;Super CMS
Footer sinks to the bottom	`g-sticky-footer-layout`	top/main/bottom; short content page
Fixed header	`g-fixed-header-layout`	`g-fixed-header-bar`、`g-fixed-header-main`
Fixed sidebar	`g-fixed-sidebar-layout`	`g-fixed-sidebar`、`g-fixed-sidebar-main`;For mobile terminal `is-open`
Sticky auxiliary bar	`g-sticky-aside-layout`	Content + `g-sticky-aside`; Article table of contents, settlement summary
Dock workbench	`g-dock-layout`	`g-dock-top/start/main/end/bottom`; Tauri/Electron, IDE
Adjustable columns	`g-split-view`	`g-split-view-primary/secondary`;Coordinate `data-g-split-pane`
Full screen workspace	`g-fullscreen-workspace`	`g-workspace-toolbar/main/status`;Canvas, media, AI Artifact
Mobile Safe Zone	`g-mobile-layout`	`g-mobile-layout-header/content/bottom`;PWA and mobile WebView

Five areas and Master/Detail

<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>

Dock and adjustable columns

<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="Adjust the width of both side panels"></div>
  <section class="g-split-panel g-split-view-secondary">...</section>
</div>

Responses, Containers, States and Variables

When the viewport is smaller than 768px, multi-column, Master / Detail and Inspector layouts are arranged vertically in semantic order; the Dock only retains the main area by default and is available is-start-open or is-end-open Switch mobile panel.
When embedding a card, modal, or zoomable workbench, use g-region-container Wrapping; Containers smaller than 768px will collapse independently, regardless of the browser window width.
is-start-collapsed、is-end-collapsed Control Dock;g-region-panel is-collapsed Hide general area panel;is-contained Make fixed, dock, fullscreen layouts safe embedded in preview or designer.
Dimensions passed --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 Adjustment.
Fixed, sticky, fullscreen, and columnar are flattened into normal document flow when printing; divider handles are automatically hidden.

Machine readable capability list16 layouts, features, and test matrices itemized;Independent area layout example pageCovers RTL, Container Query, Fixed Area, Dock, Split View, Mobile Safe Area and Full Screen Workspace. Existing g-app-shell、g-mobile-shell、g-desktop-shell Remains compatible and can continue to be used as a business-level shell.

Classic layout primitives

Class 3 capabilities provide 22 intrinsically responsive layout primitives. They work according to content and available space, and usually do not require page breakpoints; AI should prioritize selecting primitives according to layout intent, and then adjust size and spacing through exposed variables.

22 primitivesIntrinsic responsiveContainer QueryRTLReduced MotionPrint

Differences from tool classes:Utility classes describe individual CSS properties and primitives describe stable spatial relationships. For example g-sidebar-layout Automatically switches from dual column to portrait based on content minimum width, without requiring the AI to guess which viewport breakpoint should be used.

Real-time Bento and streaming primitives

Featured 8 × 2

Tall 4 × 2

Tile

Wide

Repel automatic separation and safe line wrapping

Clusterwrap

Complete matrix of 22 primitives

Primitive	Root classes and components	Purpose and Key Variables
Stack	`g-stack`、`is-split`、`g-stack-split`	Longitudinal rhythm;`--g-stack-gap`
Cluster	`g-cluster`	Labels, buttons, metadata wrap; gap / align / justify
Center	`g-center`、`is-intrinsic`	Reading width, level, or content center; max/gutter
Sidebar	`g-sidebar-layout`、`g-sidebar-pattern`、`is-end`	Sidebar collapsed by content width; size/content-min/gap
Switcher	`g-switcher`	Cut from horizontal to vertical when there is insufficient space; threshold / gap
Cover	`g-cover`、`g-cover-center`	Content in the middle of the viewport or container; min / padding
Reel	`g-reel`	Horizontal scrolling of cards and media tracks; item-size / gap
Frame	`g-frame`	Fixed ratio and cropped media; ratio/fit/position
Media Object	`g-media-object` + media / body / action	Avatar, text, terminal operation;`is-end`、`is-stacked`
Grid Auto Fit	`g-grid-auto-fit`、`g-grid-auto`	Fold the empty track when the content is small; min / gap
Grid Auto Fill	`g-grid-auto-fill`	Keep the empty rail position, suitable for fixing the card slot; min / gap
Bleed	`g-bleed`、`is-full`	Pictures and quotes exceed the text width; size / max
Repel	`g-repel`	Title and action are separated at both ends and can wrap; gap / align
Imposter	`g-imposter-container` + `g-imposter`	Unknown size center layer;`is-fixed`, margin/max
Overlay	`g-overlay-layout` + base/layer	Media overlay tools, annotations, status; align / justify / margin
Masonry	`g-masonry`	Variable height content columns; columns/min/gap, narrow container single column
Bento	`g-bento` + wide / full / tall / featured	Marketing, Dashboard non-uniform cards; row-min / gap / span
Aspect Ratio	`g-aspect-ratio` + square / portrait / landscape / video / cinema	Universal proportional box without forced cutting
Scroll Area	`g-scroll-area`、`is-block`、`is-inline`	Independent scroll owner; max/overscroll
Scroll Snap	`g-scroll-snap` + `g-scroll-snap-item`	Horizontal or `is-block` Snap list; size / strictness / align
Safe Area	`g-safe-area`、`is-padded`	Notch, rounded screen and Home Indicator four-sided protection
Sticky Region	`g-sticky-region`、`is-bottom`、`is-surface`	Scroll area logical upper/lower edge adsorption; offset/z

Commonly used combinations

<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>

Media Object, Overlay and Scrolling

<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>

Response and Environment Rules

Sidebar, Switcher, Auto Fit/Fill themselves respond according to available space, independent of device width.
g-layout-container Create component container; Media Object, Masonry and Bento collapse independently when smaller than 640px. The viewport also provides a 640px margin.
All horizontal semantics use inline/start/end; Media Object, Bleed, Imposter, Overlay, Reel and Scroll Snap support RTL.
Scrollable areas should be keyboard focusable and provide an accessible name; Reduced Motion suppresses smooth scrolling of primitives.
Reel, Scroll Area, Scroll Snap, Masonry, Imposter, Overlay and Sticky Region are automatically flattened when printing to avoid content being cropped.

Capability ListRegister all 22 primitives, aliases, environment properties, and test matrices;Standalone primitive example pageCovers intrinsic responses, RTL, container queries, Bento, Masonry, scroll snapping, safe areas, and print structures. Already g-grid-auto and g-sidebar-layout Interfaces remain compatible.

Page-level public components

Category 4 capabilities provide 23 highly reusable page structures and states. They sit between the layout skeleton and business components, unifying titles, actions, context, filters, batch selections, scroll actions, and exception results so that AI doesn't have to reassemble common areas for each page.

23 patternsContainer QuerySticky + FixedSafe AreaRTLPrint

Status requirements:The page cannot implement only normal data state. At least Loading, Empty, and Error should be clear; for routing and complete applications, 403, 404, 500, Offline, and Maintenance should also be prepared. Gardener provides the same content, visuals, details, actions, and help widgets for these states.

Real-time page header and public column

3 items selected

23 complete modes

Mode	Root class	Parts, status and use
Page Header	`g-page-header`	main / eyebrow / title / description / meta / actions; compact, centered, sticky
Section Header	`g-section-header`	main/title/description/actions; default, borderless
Subheader	`g-subheader`	title / actions; secondary context bar within the page
Toolbar	`g-toolbar`	start / center / end / title / separator; compact, sticky, scrollable
Action Bar	`g-action-bar`	`g-action-bar-main`; Form and page tail operations
Status Bar	`g-status-bar`	section/text/ `is-end`;Editor and desktop status
Command Bar	`g-command-bar`	group/item/shortcut; horizontal commands and shortcut keys
Context Bar	`g-context-bar`	content/actions; info, success, warning, danger
Filter Bar	`g-filter-bar`	main/actions; sticky filter area
Bulk Action Bar	`g-bulk-action-bar`	count / actions; active, empty, hidden
Footer Bar	`g-footer-bar`	footer actions, logging statistics and paging
Floating Action Bar	`g-floating-action-bar`	center, end, contained; safe zone adaptation
Back to Top	`g-back-to-top`	`data-g-scroll-top` Automatically display, scroll and restore focus
Divider with Text	`g-divider`	`g-divider-text`; center, start, end, vertical
Sticky Actions	`g-sticky-actions`	`g-sticky-actions-main`;Scroll form bottom action
Page Loading	`g-page-loading`	content / title / description; contained, full, overlay
Page Empty	`g-page-empty`	Empty list, first time use, and no search results
Page Error	`g-page-error`	Request failed, retry, optional technical details
403	`g-page-forbidden`	Insufficient permissions, apply for permissions and return to the entrance
404	`g-page-not-found`	Routing failure, search and homepage entry
500	`g-page-server-error`	Server errors, request numbers and retries
Offline	`g-page-offline`	Offline status, local data security and reconnection
Maintenance	`g-page-maintenance`	Maintenance windows, estimated recovery time, and status page

Page Header and Toolbar

<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="Page Tools">
  <div class="g-toolbar-start">...</div>
  <div class="g-toolbar-center">...</div>
  <div class="g-toolbar-end">...</div>
</div>

Unify page status structure

<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">Page does not exist</h1>
    <p class="g-page-state-description">The link may have expired.</p>
    <div class="g-page-state-actions">
      <a class="g-btn g-btn-primary" href="/">Return to home page</a>
    </div>
  </div>
</main>

Response, runtime and printing

In the viewport or g-page-component-container When the size is less than 640px, the operating area of the Page Header moves to the next line, the Toolbar center occupies an exclusive line, and the Context Bar operating area wraps completely.
All start, end and action alignments use logical direction; Floating Action Bar, Back to Top also reads the device safe area.
Back to Top Use existing data-g-scroll-top At runtime, the display is based on the scroll position and smoothly returns to the top after clicking; the Reduced Motion environment automatically uses instant scrolling.
The interaction bar, filter, loading mask and floating button are hidden when printing; the header and result page are flattened, and the error description and request number are still retained.
The visual, code, title, description, details, actions, and help components of the page status can be omitted as needed, but the title and restorable entry should not be missing at the same time.

Capability ListRegister 23 page modes, runtime and test matrices;Standalone Page Component ExampleCovers all headers, common fields, Loading, Empty, Error, 403, 404, 500, Offline, Maintenance, Container Query, and Back to Top.

Tip and help system

Category 5 capabilities provide 28 modes of prompting, explanation, guidance, and ongoing support. The system also covers low-intrusion in-line help, floating layers that require interaction, complex product guidance, help center, debugging paths, and content feedback to prevent AI from just temporarily putting together a Tooltip.

28 patterns3 runtimesCollision awareKeyboardRTLPrint

Selection sequence:Use Help Text, Inline Hint or Tip for supplementary content that does not block the content; use Tooltip when controls must be bound; use Help Popover when including links and operations; use Tour for cross-step teaching. Don’t hide important errors or must-read legal information in a floating layer.

Real-time help package

All device widths can be checked via preview before saving.

Was this description helpful?

28 complete modes

Mode	Root class	Purpose and key components
Tip	`g-tip`	Default, info, success, warning, danger; compact skills
Inline Hint	`g-inline-hint`	Short explanation next to text or controls
Help Text	`g-help-text`	Persistent description below field; success, warning, danger semantics
Help Trigger	`g-help-trigger`	Circular question mark entrance; hover, focus-visible
Tooltip	`g-tooltip`	`data-g-tooltip`;Hover, focus, Escape and aria-describedby
Rich Tooltip	`g-tooltip-rich`	title/description; still not interactive
Help Popover	`g-help-popover`	header/title/body/actions; click, external close, Escape
Definition	`g-definition`	Terminology, abbreviations and industry concept explanation portal
Callout	`g-callout`	icon/title/content; five semantic colors
Note	`g-note`	Documentation comments, compatibility notes, and marginalia
Do / Don't	`g-guidance-pair`	do/dont/label; side-by-side specification example
Key Hint	`g-key-hint`	Keys in a single key or key combination
Shortcut List	`g-shortcut-list`	item / keys; comparison of commands and shortcut keys
Help Card	`g-help-card`	icon / title / description / actions
Help Panel	`g-help-panel`	header/body/footer; Dashboard and Desktop Inspector
Help Center	`g-help-center`	header/title/description/search
Help Topics	`g-help-topics`	topic/title/meta; automatically respond to topic grid
FAQ	`g-faq`	item / question / answer; reuse Accordion runtime
Contextual Help	`g-contextual-help`	Help bound to the current page or form context
Coach Mark	`g-coach-mark`	title / description / actions; single-point function teaching
Guided Tour	`g-tour`	step / progress / actions; next, prev, skip, complete, Escape
Spotlight	`g-spotlight`	Tour automatically tracks target location and masks the page
Hotspot	`g-hotspot`	label; pulse hot spot, Reduced Motion automatic stilling
Feature Hint	`g-feature-hint`	badge/title/description; new feature in-place prompt
What's New	`g-whats-new`	item/marker/title/description; version update summary
Help Checklist	`g-help-checklist`	item / marker; pending, complete
Troubleshooting	`g-troubleshooting`	step / number / title / description; sequence troubleshooting
Help Feedback	`g-help-feedback`	actions; whether the content is useful and supports upgrade entry

Tooltip and Help Popover

<span data-g-tooltip data-g-placement="top-center">
  <button class="g-help-trigger" data-g-tooltip-trigger
          aria-label="Understand release status">?</button>
  <span class="g-tooltip" data-g-tooltip-content hidden>
    Changes visible to visitors after publishing
  </span>
</span>

<span data-g-popover data-g-placement="bottom-end">
  <button data-g-popover-trigger>Why is verification required?</button>
  <section class="g-help-popover" data-g-popover-content hidden>
    <h3 class="g-help-popover-title">Domain name ownership</h3>
    <div class="g-help-popover-body">...</div>
  </section>
</span>

Declarative Guided Tour

<button data-g-tour-open="publish-tour">Start booting</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>Skip</button>
    <button data-g-tour-prev>Previous step</button>
    <button data-g-tour-next>Next step</button>
  </footer>
</div>

Runtime, Accessibility, and Environment Rules

Tooltip is displayed when pointer hover and keyboard focus, automatically written role="tooltip" and aria-describedby;Content must not contain clickable controls.
Popover for interactive content, automatic synchronization aria-expanded、aria-controls, supports external click and Escape closing.
The floating layer supports top / bottom / start / end and start / center / end alignment. When there is insufficient space, it will automatically flip and be limited to the viewport; RTL will exchange logical directions.
Tour automatically maintains step, progress, goal Spotlight, Previous/Next/Skip/Complete and trigger focus restoration; no goal steps are displayed centered.
Mobile Guidance Pair automatically single column, Help Panel changed to top border; Reduced Motion turns off Hotspot pulse and Spotlight transition.
Print and hide Tooltip, Popover, Tour, Spotlight, Hotspot and feedback actions, retain Tip, Callout, Note and troubleshooting text.

Capability ListRegister all 28 modes, 8 types of float locations, 3 shared runtimes and test matrices;Standalone help system exampleCovers all root classes, RTL/Mobile Responsive, Tooltip, Popover, FAQ and Two-Step Tour.

Form traditional combination

Category 6 capabilities elevate the basic controls to 37 stable form structures, covering regular web pages, mobile forms, Dashboard settings pages, CMS editors, and Tauri/Electron inspectors. There are clear interfaces for field labels, descriptions, verification, business grouping, dynamic additions and deletions, and final submission.

37 patterns5 runtimesContainer QueryValidationRTLPrint

Semantic requirements:Placeholder cannot replace Label; required, error and help information cannot be expressed by color alone; related Checkbox/Radio must be put into Fieldset with Legend; field-level errors and Validation Summary should be provided after submission failure.

Real-time Combination Example

Site information

Field structure, business selection and progress status remain consistent.

Saved

Site nameRequired

Show in browser title13 / 60

Release path

/

Release method

Release immediatelySwitch to production version after completing preflight.Scheduled releasePerform publishing by site time zone.

Data completion72%

37 complete modes

Mode	Root class	Purpose and key components
Form	`g-form`	Unified vertical rhythm; default, bordered
Form Section	`g-form-section`	header/title/description; long form partition
Field	`g-field`	header/meta/required/optional; labels, controls, descriptions
Fieldset	`g-fieldset`	legend/description; semantic related field group
Form Row	`g-form-row`	Wrap at minimum field width
Form Grid	`g-form-grid`	2/3/4 columns, full-span; deterministic form grid
Horizontal Form	`g-form-horizontal`	Fixed label column + flexible control column
Inline Form	`g-form-inline`	Filter, search, and compact submission portfolio
Compact Form	`g-form-compact`	Dashboard, Desktop Inspector High Density Form
Input Group	`g-input-group`	`g-input-addon`;Button, Select, and Input Splicing
Input Affix	`g-input-affix`	start / end; currency, unit and static icon
Search Field	`g-search-field`	icon/action; standard structure for search input
Password Field	`g-password-field`	`data-g-password-toggle`;Show/hide and cursor hold
Clearable Field	`g-clearable-field`	`data-g-clear-input`;Clear, input/change events and focus restoration
Character Counter	`g-character-field`	count; default, near-limit, over-limit
Validation State	`g-validation-state`	message; success, warning, danger, error
Validation Summary	`g-validation-summary`	title/list; link to fields after failed submission
Checkbox Group	`g-check-group`	stacked, inline; multiple option grouping
Radio Group	`g-radio-group`	stacked, inline; single option grouping
Switch Row	`g-switch-row`	content / title / description; Setting page switch
Choice Cards	`g-choice-group`	card / title / description; package and plan selection
Name Group	`g-name-group`	Last name/first name or first name/last name double fields, the order can be adjusted according to the content
Address Group	`g-address-group`	line / city / region / postal; six-track business layout
Phone Group	`g-phone-group`	Country code, number, extension
Money Group	`g-money-group`	Currency + amount, logical direction rounded corners
Date Range	`g-date-range-group`	start, separator, end date
Time Range	`g-time-range-group`	Start, separator, end time
Unit Field	`g-unit-field`	Numeric value + fixed/optional unit
Range Field	`g-range-field`	Range + output; real-time numerical display
File Field	`g-file-field`	control/name; single file selection line
Repeatable Field	`g-repeatable-field`	list / item / content / actions; template addition and deletion, min/max, index
Conditional Field	`g-conditional-field`	controller/show-when; show, hide, inert
Form Actions	`g-form-actions`	end, start, between, sticky; Safe Area
Autosave Status	`g-autosave-status`	idle, saving, saved, error
Form Progress	`g-form-progress`	meta/track/value; fill in the degree of completion
Form Review	`g-form-review`	row / label / value / edit; review before submission
Consent Group	`g-consent-group`	title/description; terms, authorization and confirmation

Layout and field combinations

<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">Name</label>
          <span class="g-field-required">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>

Five types of declarative runtime

<div class="g-password-field" data-g-password-toggle>
  <input class="g-input" type="password">
  <button data-g-password-button type="button">Show password</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">Add</button>
  <template data-g-repeatable-template>...__INDEX__...</template>
</div>

Responsiveness, Accessibility, and Printing

g-form-container Build 640px container query; Form Grid, Horizontal, Name and Address combinations can be collapsed independently within the embedded CMS panel, with viewport rules as a fallback.
All combinations use logical direction attributes; Input Group, Money, Unit, Field Actions, and Sticky Actions maintain correct head-to-tail relationship under RTL.
Password Toggle Sync aria-pressed Dispatch input/change with Accessible Name; Clear Input; Character Count counts Unicode characters.
Conditional Field sets hidden, inert, and aria-hidden at the same time when hiding; Repeatable Field supports min/max, template index, automatic initialization of new controls, and focus recovery after deletion.
Reduced Motion reduces the save animation; prints hidden passwords, clears, additions, deletions and submission actions, retaining field values, verification and audit information.

Capability ListRegistered 37 combinations, 5 runtimes and full test matrix;Independent form combination exampleCovers all root classes, business field groups, dynamic additions and deletions, conditional display, container response, RTL and printing.

Traditional navigation combination

Category 7 capabilities provide 38 stable navigation modes covering public websites, enterprise portals, Dashboards, super CMS, mobile web and Tauri/Electron desktops. Global, local, hierarchical, selected, in-page, page turning, process, mobile, command and identity entries all have ready-made structures, and AI does not need to temporarily reorganize navigation CSS.

38 patterns9 reusable runtimesKeyboardSafe AreaRTLPrint

Selection order:First determine the navigation scope (global, local, hierarchical or intra-page), and then determine the direction and terminal; Tabs only switches views within the same context, Breadcrumb only expresses position, and Pagination only expresses result set page turning, and should not replace each other.

Real-time Combination Example

38 complete modes

Family	Patterns and Root Classes	Purpose
Global	Navbar `g-navbar`	Brand, Center Zone, Tail Operations and Movement Toggle
	Primary `g-primary-nav`	The most important first-level entrance for products
	Utility `g-utility-nav`	Auxiliary entrances such as help, status, language and login
	Sub Navigation `g-subnav`	Secondary navigation within a product area, channel, or object
Partial and Desktop	Sidebar `g-sidebar`	Dashboard and CMS persistent sidebar
	Collapsible `g-collapsible-nav`	`data-g-nav-toggle`;Collapse area and mobile menu
	Navigation Rail `g-nav-rail`	`data-g-roving-nav`; Narrow track and direction key focus
	Activity Bar `g-activitybar`	Tauri/Electron workbench main function switching
	Menubar `g-menubar`	Desktop File/Edit/View type menu bar
Hierarchy and menu	Mega Menu `g-mega-menu`	Large site multi-column entrance
	Dropdown `g-dropdown`	Button menu; Arrow, Home, End, Escape
	Context Menu `g-context-menu`	`data-g-context-menu`; Right click, Shift+F10, viewport anti-overflow
	Tree Navigation `g-tree-nav`	`data-g-tree`; Unlimited levels, expansion and arrow keys
Location and Selection	Breadcrumb `g-breadcrumb`	Current location and ancestor paths
	Tabs `g-tabs`	`data-g-tabs`;Same layer view switching
	Vertical Tabs `g-vertical-tabs`	Settings Page and Inspector Portrait View
	Segmented `g-segmented`	A small number of mutually exclusive display methods
	Pill Navigation `g-pill-nav`	Categories, Status and Content Channels
	Anchor Navigation `g-anchor-nav`	Static article directory
	Scrollspy `g-scrollspy-nav`	`data-g-scrollspy`;Synchronize the current position with scrolling
Result set	Pagination `g-pagination`	Numeric paging with known total number of pages
	Cursor Pagination `g-cursor-pagination`	API Cursors and Previous/Next Batch
	Load More `g-load-more-nav`	Mobile feeds and progressive loading
Process and Documentation	Stepper `g-stepper`	Short process progress status
	Wizard Navigation `g-wizard-nav`	Long process step directory and content area
	Back Navigation `g-back-nav`	Return to the upper-level object or list
	Previous / Next `g-prev-next-nav`	Sequence of articles, tutorials and details
	Skip Navigation `g-skip-nav`	Repeated navigation skipped for keyboard users
Mobile terminal	Mobile Top `g-mobile-top-nav`	Return, title and tail actions
	Bottom Navigation `g-bottom-nav`	3–5 mobile first-level destinations and Safe Area
	Mobile Tab Bar `g-mobile-tab-bar`	Mobile application top-level label
	Drawer Navigation `g-drawer-nav`	Small screen side sliding navigation and focus recovery
Command and Identity	Command Palette `g-command-palette`	Global search command entry
	Command Navigation `g-command-nav`	Inline command list and shortcut keys
	Jump Navigation `g-jump-nav`	`data-g-jump-nav`;Select to jump to long page chapters
	Quick Navigation `g-quick-nav`	Recent, Favorites and Frequently Used Entries
	Locale Navigation `g-locale-nav`	Language, region and site version
	Account Navigation `g-account-nav`	Users, Organizations, Settings and Exits

Five new declarative behaviors

<button data-g-nav-toggle="mobile-menu">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">Chapter</option></select>
</label>

Accessibility, Responsiveness, and Environment Rules

Current page usage aria-current="page", the current page position is used aria-current="location", Tabs use aria-selected;Don’t rely on color alone.
Roving Nav supports landscape/portrait, RTL, four-way keys, Home and End; Context Menu supports right mouse button, keyboard menu key, Shift+F10, Escape and focus recovery.
g-nav-container Build 640px container responsiveness; Navbar, Vertical Tabs and Wizards can be collapsed independently within CMS slot or desktop inspector.
Bottom Navigation and Mobile Tab Bar handling safe-area-inset-bottom;Drawer uses logical direction, entering from the right in RTL.
Reduced Motion turns off Drawer, Tree and Skip Link transitions; Forced Colors provides explicit current item outlines; printing hides operation navigation and retains Breadcrumb, document front and rear pages, and process information.

Capability ListRegisters 38 navigation modes, 11 navigation families, 9 types of reuse runtimes and a complete test matrix;Independent Navigation ExampleCovers global, hierarchical, selection, menu, in-page, process, mobile and desktop navigation, and can directly test keyboard and right-click interactions.

Data display and operation combination

Category 8 capabilities provide 48 stable data modes, treating "data display" and "data manipulation" as the same set of contracts. Ordinary website, Dashboard, super CMS, mobile list, analysis report and Tauri/Electron high-density workbench, all can directly select tables, records, lists, hierarchies, flows, indicators, visualizations, plans, spaces or operation modes.

48 patterns8 reusable runtimesSticky / StackedKeyboard GridRTLPrint

Selection order:Determine the data form first, and then the operation intensity. Use Description List or Key Value for a small number of static attributes; use List or Table for multiple records; use Data Grid only when cells require keyboard movement and editing; use Tree or Tree Table for hierarchical data; trends and comparisons provide readable values first, and then add graphics.

Real-time Combination Example

2,480Published

128Pending review

6Risk item

page	Status	Visits
Enterprise homepage	Published	28,420
Product Center	Under review	16,208

48 complete modes

Family	Patterns and Root Classes	Purpose and Key Capabilities
Table	Table `g-table`	Basic semantic table; striped, hover, compact
	Responsive Table `g-responsive-table`	Horizontal scrolling, mobile carding, sticky first and last columns
	Data Grid `g-data-grid`	ARIA Grid, four-way keys, Home/End
	Editable Grid `g-editable-grid`	Editable cell, editing, invalid
	Tree Table `g-tree-table`	Indent level, parent-child line expansion
	Grouped Table `g-grouped-table`	Group by region, date, type
	Expandable Table `g-expandable-table`	Details line and `g-row-disclosure`
	Comparison Table `g-comparison-table`	Horizontal comparison of packages, versions and capabilities
	Pivot Table `g-pivot`	Cross summary, sticky row headers
Records and Lists	Description List `g-description-list`	Few static tags and values
	Key Value `g-key-value`	Values, long text, and single actions
	Record Detail `g-record-detail`	Complete details of a single business record
	List Group `g-list-group`	Generic lists and interactive rows
	Media List `g-media-list`	Avatar, thumbnail, body and tail actions
	Dense List `g-dense-list`	Desktop and Inspector high-density lists
	Virtual List `g-virtual-list`	Windowed hosting shell for bulk records
Hierarchy and Flow	Tree `g-tree`	Infinite levels, expansion and keyboard movement
	Timeline `g-timeline`	Milestone and Status History
	Activity Feed `g-activity-feed`	User and System Activity Flow
	Audit Log `g-audit-log`	Date group, operator, action and time
Indicators and Graphics	KPI `g-kpi`	Key value and rising and falling direction
	Stat List `g-stat-list`	A compact set of statistical values
	Metric Card `g-metric-card`	Values, labels and small trend charts
	Sparkline `g-sparkline`	Bar or SVG Microtrend
	Progress Stats `g-progress-stats`	Classification progress and proportion
	Chart `g-chart`	Chart library-independent titles, plot areas, and action containers
	Data Legend `g-data-legend`	Color, family, and readable labels
	Ranking `g-ranking`	Ranking, Name and Value
	Status Summary `g-status-summary`	Quick overview of status quantities
Plan and Space	Calendar `g-calendar`	Weekly/Monthly Time Grid and Events
	Agenda `g-agenda`	Linear schedule list
	Kanban `g-kanban`	Phase columns and task cards
	Gantt `g-gantt`	Tasks, Timeline, and Progress Bars
	Organization Chart `g-org-chart`	Organizational nodes and hierarchical relationships
	Map `g-map-shell`	Map Canvas, Tools, and Results Panels
	Data Matrix `g-data-matrix`	Permissions, capabilities and two-dimensional status matrix
	Heatmap `g-heatmap`	Activity, Contribution and Density
Data operations	Data Toolbar `g-data-toolbar`	Search, filter, result count and actions
	Column Chooser `g-column-chooser`	Column display and hiding
	Saved Views `g-saved-views`	Saving filters, sorting, and column configurations
	Export Panel `g-export-panel`	Format, range and field export
	Data State `g-data-state`	Loading, Empty, Error, Offline
	View Switcher `g-data-view-switcher`	Table, list and card view switching
	Selection Summary `g-selection-summary`	Select quantity and batch action
	Table Density `g-table-density`	Comfort, Standard and Compact Density
	Filter Summary `g-filter-summary`	Current conditions and one-click clear
	Sort Builder `g-sort-builder`	Multiple field sort order
	Data Inspector `g-data-inspector`	CMS and desktop record checkers

Six new declarative behaviors

<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="Select all">
  <button data-g-sort-key="revenue" data-g-sort-type="number">Income</button>
  <input data-g-select-row type="checkbox" value="record-id">
  <button data-g-row-toggle="detail-id" aria-expanded="false">Expand</button>
  <label><input data-g-toggle-column="owner" checked>Person in charge</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="Optional index text">...</article>
  <div data-g-filter-empty hidden>No result</div>
</div>

<div data-g-data-view data-g-current-view="table">
  <button data-g-view="table">Table</button>
  <button data-g-view="card">Card</button>
  <section data-g-view-panel="table">...</section>
  <section data-g-view-panel="card" hidden>...</section>
</div>

Runtime, Accessibility, and Environment Rules

Table Sort automatically maintains table headers aria-sort, supports text, number, date and stable sorting; the detail row moves with the main row during sorting.
Row Select maintains full selection, partial selection,indeterminate, OK aria-selected, Shift interval selection and Selection Summary.
Row Disclosure serves both detail row and Tree Table, maintain aria-controls、aria-expanded, Escape collapse and recursive sub-row hiding.
Column Toggle retains at least one column; Data Filter supports Unicode normalization, multi-keyword AND matching, result count, and Empty; Data View supports arrow keys, Home, and End.
g-data-container Create 640px container folding; Stacked Table uses each grid on small screens data-g-label Generate readable cards without breaking desktop table semantics.
All structures adopt logical direction attributes and support RTL; Forced Colors provides selection outlines; print hidden data operations, expand detail and hierarchy rows, and remove scroll clipping.

Capability ListRegisters 48 data modes, 11 data families, 8 types of multiplexed runtimes and a complete test matrix;Independent data exampleSorting, selection, expansion, column visibility, search, view switching, moving stacked tables, and keyboard grid can be directly tested.

Selecting and batching components

Category 9 capabilities make "selecting objects, expressing selection ranges, batch execution, and saving selection conditions" into a complete protocol. Suitable for super CMS, permission assignment, member management, media library, related fields, Dashboard, mobile backend and Tauri/Electron desktop workbench.

32 patterns7 reusable runtimesMulti-selectHierarchyKeyboardRTL/Print

Real-time selection and batch operations

Documentation page

Select all

Current view0 / 3

Quick StartPublic documentsPublishedAPI ReferenceDeveloper DocumentationDraftFAQHelp CenterPublished

Complete matrix of 32 modes

#	Pattern/Root Class	Purpose and Contract
01	Selection Control `g-selection-control`	Select quantity, total and range information
02	Select All `g-select-all-control`	Full selection and partial selection indeterminate
03	Invert `g-invert-selection-control`	Invert currently available items
04	Range `g-range-selection-control`	Shift interval selection
05	Batch Toolbar `g-batch-toolbar`	Safe Zone Aware Sticky Batch Actions
06	Selection Scope `g-selection-scope`	Selection boundaries for lists, tables, or trees
07	Transfer `g-transfer`	Selected/All Bidirectional Move and Search
08	Dual List `g-dual-list`	Permissions, members, tags double list
09	Tree Select `g-tree-select`	Hierarchical multi-selection and path display
10	Cascader `g-cascader`	Cascading selections for level-by-level expansion
11	Mention Picker `g-mention-picker`	@ person, channel or resource
12	User Picker `g-user-picker`	Avatar, name, team and multiple selections
13	Organization Picker `g-organization-picker`	Organization tree, departments and positions
14	Resource Picker `g-resource-picker`	Files, Pages, Data Sources and Assets
15	Media Picker `g-media-picker`	Thumbnail grid and media multiple selection
16	Icon Picker `g-icon-picker`	Icon search, grid and selected state
17	Color Picker `g-color-picker`	Color preview, input and swatches
18	Date Range `g-date-range-picker`	Preset, bi-monthly calendar and date range
19	Time Range `g-time-range-picker`	Time interval and cross-day expression
20	Saved Filters `g-saved-filters`	Reusable filter conditions
21	Saved Views `g-saved-views`	Filter, Column, Sort, and Density Snapshots
22	Column Chooser `g-column-chooser`	Hide columns and keep at least one column
23	Sort Builder `g-sort-builder`	Dynamic multi-field collation
24	Group Builder `g-group-builder`	Dynamic multi-field grouping rules
25	Entity Picker `g-entity-picker`	Unified Business Entity Selector
26	Tag Picker `g-tag-picker`	Tag search, creation and multiple selection
27	Relation Picker `g-relation-picker`	Records, Pages, and Parent-Child Relationships
28	Bulk Confirmation `g-bulk-confirmation`	Hazardous Batch Operation Impact Confirmation
29	Bulk Progress `g-bulk-progress`	Step-by-step progress, failures, and background operations
30	Picker Panel `g-picker-panel`	Desktop floating layer and mobile bottom panel
31	Picker Summary `g-picker-summary`	Summary of selected values and selection results
32	Selection Summary `g-selection-summary`	Selected quantity and quick actions

Declarative runtime interface

<section data-g-row-select>
  <input type="checkbox" data-g-select-all>
  <button data-g-invert-selection>Inverse 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">User</button>
  </div>
</div>

Runtime and Environment Rules

row-select Supports all selection, inverse selection, clear, visible item selection, Shift interval, quantity output, batch column display and row display aria-selected。
transfer Supports two-way movement of selected/all, search on both sides, quantity and Empty status, and Ctrl/Command + left and right arrow keys.
picker Unified single/multiple selection, Unicode search, Chip delete, hidden field output, arrow keys, Home, End, Enter, Space, Escape and click outside to close.
data-g-cascader Maintain paths and values;data-g-saved-choice Service filters, views, icons, and swatches;data-g-builder-list Support template addition, deletion and sorting/grouping rule movement.
g-selection-container Provides 640px container collapse; the mobile Picker Panel automatically becomes the bottom panel, and the Batch Toolbar avoids the safe area.
Logical direction, RTL, Reduced Motion, Forced Colors, and printing are supported in all modes; controls that change selection state are hidden when printing, and result summaries are retained.

Capability ListRegister all 32 modes, 8 capability families and test matrices;Independent selection exampleSelect All, Inverse Selection, Range Selection, Transfer, Picker, Cascader, Saved Choice and Dynamic Builder can be tested directly.

File and content system

Category 10 capabilities cover the complete life cycle of files from entering the system, uploading and organizing, to previewing, editing, collaboration, revision and storage. Web, mobile backend, super CMS, media center and Tauri/Electron desktop editor can all be reused directly, without the need for AI to temporarily organize complex workbench CSS.

32 patterns6 reusable runtimesUpload + EditorDesktop + MobileKeyboardRTL/Print

Real-time uploading, editing and revision

Upload queueComplete 0 · Activities 0

PDFProduct manual.pdf

Editable content

Modify this text to verify character statistics and auto-save status.

- Only supports web pages

+ Support web and desktop

Complete matrix of 32 modes

#	Pattern/Root Class	Purpose and Contract
01	File Drop `g-file-drop`	Click/Drag, File Input and Drag State
02	File List `g-file-list`	Compact file lines, meta information and actions
03	Upload Queue `g-upload-queue`	Multiple file queues, counting, pausing and removal
04	Chunk Upload `g-chunk-upload`	Fragmentation status, breakpoint resume visual protocol
05	Upload Progress `g-upload-progress`	Progress values, status text, and ARIA
06	Failed Upload `g-failed-upload`	Reason for failure, retry and removal
07	File Card `g-file-card`	Thumbnails, names, properties and quick actions
08	Folder Tree `g-folder-tree`	Directory level, number and current path
09	File Browser `g-file-browser`	Catalog, Search, Grid/List and Keyboard Selection
10	File Preview `g-file-preview`	Preview canvas, zoom tools and meta information
11	Media Library `g-media-library`	Media Asset Workbench and Details Bar
12	Media Grid `g-media-grid`	Responsive thumbnails and selection state
13	Media Details `g-media-details`	Preview, alt text, copyright and dimensions
14	Image Crop `g-image-crop`	Crop stage, scale and inspector
15	Image Annotation `g-image-annotation`	Hot spots, marks and review notes
16	Document Viewer `g-document-viewer`	Paper, Thumbnails, Page Turning and Zooming
17	PDF Viewer `g-pdf-viewer`	PDF.js, native or desktop bridge shell
18	Video Player `g-video-player`	16:9 Stage, Progress and Playback Controls
19	Audio Player `g-audio-player`	Cover, Waveforms/Timeline and Controls
20	Code Editor `g-code-editor`	Line number, code canvas and status bar
21	Rich Text Editor `g-rich-text-editor`	Formatting tools, editable text and statistics
22	Markdown Editor `g-markdown-editor`	Source code/preview double column and mobile folding
23	Block Editor `g-block-editor`	Block handles, text and actions
24	Revision Compare `g-revision-compare`	Side-by-side/unified differences and addition and deletion semantics
25	Autosave `g-autosave-indicator`	Dirty, Saving, Saved, Error
26	Content Outline `g-content-outline`	Document title level and current chapter
27	Editor Toolbar `g-editor-toolbar`	Command groups, Pressed status, and shortcut keys
28	Find & Replace `g-find-replace`	Find, Replace, Results, and Navigation
29	Comment Thread `g-comment-thread`	Avatar, text, time and collaborative reply
30	Version History `g-version-history`	Version Timeline, Current Version, and Recovery
31	File Properties `g-file-properties`	Type, Owner, Check Value and Copyright
32	Storage Meter `g-storage-meter`	Quota, Classification Occupancy and Progress

Declarative runtime interface

<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>

Runtime, Accessibility, and Environment Rules

dropzone Handle drag depth, keyboard activation and real file events;upload-manager Maintain queue status, progress, pauses, retries, removals, and aggregate counts.
file-browser Provides Unicode search, grid/list switching, single selection, arrow keys, Home, End, Enter and Space, and publishes selection events.
editor-shell Unify tool commands, Ctrl/Command shortcuts, character and word counts; common protocols for rich text, Markdown, code and block editors.
revision-compare Toggle side-by-side/unified diffs;autosave Expresses Dirty, Saving, Saved and Error, and supports delayed and immediate saves.
g-content-container Use 704px container collapse; file browser, media details, image editor, document thumbnails, Markdown double columns and version comparison all have mobile layouts.
All modes use logical direction and cover RTL, Reduced Motion, Forced Colors, and Print; Print hides upload and edit actions, flattens the scroll area, and preserves text and revision information.

Capability ListRegister all 32 modes, 8 capability families and test matrices;Standalone Content System ExampleCovers uploading, file browsing, media, pictures, documents, audio and video, four types of editors, collaboration, versions and storage.

Login and account system

Category 11 capabilities cover the complete life cycle of an identity from entering the system, verification, recovery, authorization, to session, tenant, device and security audit. It's not a single login card, but 32 stable combinations that work directly on PC, mobile web, Dashboard, Super CMS and Tauri/Electron desktop WebView.

Real-time verification combination

Verify mobile phone number

Verification code sent to +86 138****6608

Set new password

Password StrengthNot set

At least 8 digits
Capital letters
Lowercase letters
Number
Symbol

!

New device detected

Linux · Firefox · Beijing

Complete matrix of 32 modes

#	Mode	Root class	Purpose and key components
01	Centered authentication	`g-auth-centered`	Single row entrance, mobile terminal, lightweight product; cooperation `g-auth-container`、`g-auth-panel`
02	Column certification	`g-auth-split`	`g-auth-split-aside` Brand area + `g-auth-split-main` Form area
03	Login	`g-sign-in`	Email/username, password, stay logged in, retrieve entrance and `g-auth-provider`
04	Registration	`g-registration`	Personal/enterprise registration, terms confirmation, password strength
05	Retrieve password	`g-password-recovery`	Email, mobile phone and administrator recovery methods
06	Reset password	`g-password-reset`	New password, confirm password, expired token status
07	Email Verification	`g-email-verification`	`g-verification-icon`, address, resend timing
08	Mobile phone verification	`g-phone-verification`	Country code, masked number and OTP
09	MFA Challenge	`g-mfa-challenge`	Authenticator, SMS, Security Key, Recovery Code, and Trusted Devices
10	OTP input	`g-otp-input`	`g-otp-cell`; Digit input, paste, backspace and arrow keys
11	Passkey	`g-passkey`	`g-passkey-graphic`, platform validator and cross-device portal
12	SSO	`g-sso`	SAML/OIDC, Enterprise Domain Discovery and Provider List
13	QR code login	`g-qr-login`	`g-qr-login-layout`、`g-qr-code`, refresh and expiration status
14	Magic Link	`g-magic-link`	Passwordless email login, validity period and single use reminder
15	Invite to join	`g-invitation`	`g-invitation-details`, organization, role, inviter and validity period
16	First time setup	`g-first-time-setup`	First time password, information, organization and security preferences
17	Lock screen	`g-lock-screen`	`g-lock-screen-panel`, time, current user and quick unlock
18	Session expired	`g-session-expired`	`g-session-expired-panel`, local change instructions and re-certification
19	Account selection	`g-account-chooser`	`g-auth-choice`, avatar, email and new account
20	Tenant Selection	`g-tenant-chooser`	Workspace, Organization Role, Membership, and Current Tenant
21	Identity switching	`g-identity-switcher`	`g-identity-switcher-menu`, role identity and visitor preview
22	Complete information	`g-profile-setup`	`g-auth-avatar`, name, position, time zone and language
23	Account Security Center	`g-account-security`	`g-security-section` Aggregate passwords, MFA, devices, and connections
24	Device Management	`g-device-management`	`g-device-item`, current device, location, time and cancellation
25	Login Activity	`g-login-activity`	`g-login-event`, Method, IP, Location, Success and Risk
26	Security Incident	`g-security-alert`	`g-security-alert-actions` Confirm identity or protect account
27	Recovery code	`g-recovery-codes`	`g-recovery-code` Grid, copy, download and regenerate
28	Trusted device	`g-trusted-device`	MFA Skip Deadline and Public Equipment Risk Description
29	Account connected	`g-connected-accounts`	`g-connected-account`, connection status and disconnection operation
30	Password Strength	`g-password-strength`	`g-password-strength-meter`、`g-password-rule` with real-time scoring
31	Authorization and consent	`g-auth-consent`	`g-auth-consent-scope` Permission Scope, Allow and Deny
32	Certification results	`g-auth-result`	`g-auth-result-icon`; Success, failure and processing status

Declarative runtime interface

Behavior	Properties	Ability
Password Toggle	`data-g-password-toggle`	Show/hide and hold cursor
OTP Input	`data-g-otp-input`	Auto-advance, backspace, arrow keys, whole string paste, completion event
Password Strength	`data-g-password-strength`	Five Rules, 0–4 Rating, ARIA Progress
Auth Timer	`data-g-auth-timer`	Resend, QR code and session countdown/expiration
Saved Choice	`data-g-saved-choice`	Account and tenant selection
Dropdown	`data-g-dropdown`	Identity switching menu
Copy	`data-g-copy`	Recovery code copy
Dialog	`data-g-dialog`	Revoke device, sensitive operation confirmation

<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>

Status, Endpoints, and Security Rules

Password field uses correct autocomplete; Verification code bit-by-bit input still requires an accessible name and leaves the full value hidden for submission.
OTP supports numeric filtering, auto-advance, Backspace, left and right arrow keys, Home, End and Paste; released when complete gardener:otpcomplete。
The authentication result must be clear Success, Error, and Pending; session expiration must indicate whether unsubmitted data is retained, and security events cannot be expressed solely by color.
Account, tenant and identity are different concepts. Use Chooser/Switcher respectively to avoid misoperation in multi-organization CMS.
Column authentication converges to a single column below 704px; cards are rearranged with QR, rules and recovery codes below 384px; bottom operations respect the Safe Area.
All styles cover RTL, Reduced Motion, Forced Colors and printing. Print hidden passwords, providers, countdowns and sensitive operations, retaining only necessary security audit information.

Capability ListRegisters all 32 modes, 8 capability families, 8 classes of multiplexed runtimes and full test matrix;Example of independent account systemCovers all modes and allows direct testing of OTP, password strength, countdown, account/tenant selection and identity menu.

Commerce and Payments

Category 12 capabilities cover the complete transaction chain of product discovery, specifications and prices, shopping carts, settlement, fulfillment, payments, orders, and subscription billing. 32 combinations ready for use in PC Mall, Mobile Web, Dashboard, Super CMS, Digital Goods, SaaS and Tauri/Electron Desktop WebView.

Real-time trading portfolio

G

Gardener StudioEnterprise Licensing · Windows

¥699.00

Subtotal

Discount

Delivery

Cope

Select platform

Complete matrix of 32 modes

#	Mode	Root class	Purpose and key components
01	Product card	`g-commerce-product-card`	`g-product-media`、`g-product-card-badge`, title, price and action
02	Product list	`g-commerce-product-list`	`g-product-list-item`, Media, Summary, Price and Row Actions
03	Product details	`g-commerce-product-detail`	`g-product-detail-summary`, Title, Vendor, SKU, Inventory and Purchase Action
04	Product Gallery	`g-commerce-product-gallery`	`g-product-gallery-thumb` and stage; reusable Carousel behavior
05	SKU selection	`g-sku-selector`	`g-sku-group`、`g-sku-option`, disable combination and full selection output
06	Quantity step	`g-quantity-stepper`	`g-quantity-button`, input, min/max/step and change events
07	Price display	`g-price-display`	`g-price-current`, original price, discount, cycle, tax-included description and inventory `g-stock-status`
08	Shopping cart entry	`g-commerce-cart-item`	`g-cart-item-media`, specification, quantity, row total and operation
09	Shopping Cart	`g-cart`	Quantity linkage,`g-cart-empty`, Subtotal, Offers, Shipping, Taxes and Total
10	Mini shopping cart	`g-mini-cart`	Dropdown containers, lists, and `g-mini-cart-footer`
11	Shopping Cart Summary	`g-cart-summary`	Expense line sum `g-cart-summary-total`
12	Settlement	`g-commerce-checkout`	`g-checkout-section` Main area + Sticky `g-checkout-sidebar` + Safe Area `g-checkout-mobile-actions`
13	Settlement steps	`g-checkout-steps`	`g-checkout-step-marker`, completed/current/pending status
14	Address selection	`g-address-selector`	Saved Choice, default address and new entry
15	Address card	`g-address-card`	`g-address-main`, contact person, phone number, detailed address, tags and editing
16	Shipping method	`g-shipping-method`	`g-shipping-option`, timeliness, carrier, price and unreachable status
17	Self-pickup option	`g-pickup-selector`	`g-pickup-option`, store, distance, opening hours and inventory
18	Discount code	`g-coupon`	`g-coupon-status`; Idle, Applied, Invalid and Clear
19	Promotion List	`g-promotion-list`	`g-promotion-item`, Code, threshold, mutual exclusion and validity period
20	Invoice information	`g-invoice-information`	`g-invoice-fields`, invoice type, header, tax number and receipt method
21	Payment method	`g-payment-method`	`g-payment-option`, bank card, wallet, balance, offline and disabled status
22	Payment panel	`g-payment-sheet`	`g-payment-sheet-total`, amount, confirmation, risk control prompt and return
23	Payment result	`g-payment-result`	`g-payment-result-icon`; Success, failure, processing and subsequent actions
24	Order Summary	`g-commerce-order-summary`	Items, Discounts, Shipping, Taxes, Payment & `g-order-summary-total`
25	Order Timeline	`g-commerce-order-timeline`	`g-order-timeline-item`, node, time, logistics and current steps
26	Order details	`g-order-detail`	Header, status, item, address, payment, invoice and `g-order-detail-section`
27	Subscription Package	`g-subscription-plan`	`g-plan-price-value`, Cycle, Function, Featured and Action
28	Pricing comparison	`g-pricing-comparison`	Sticky capability column, package difference, Boolean/amount/price cell
29	Dosage meter	`g-commerce-usage-meter`	`g-usage-meter-track`, current/limit, reset period, Warning/Danger
30	Billing History	`g-billing-history`	`g-billing-history-item`, period, amount, status, PDF and filtering
31	Refund status	`g-refund-status`	`g-refund-status-progress`, amount, original return, estimated arrival and failure
32	Tax Summary	`g-tax-summary`	`g-tax-summary-row`, untaxed amount, tax type, tax rate, region and total tax-included amount

Declarative runtime interface

Behavior	Properties	Ability
Quantity Stepper	`data-g-quantity-stepper`	min/max/step, button status, input normalization,`gardener:quantitychange`
SKU Selector	`data-g-sku-selector`	Grouped radio selection, disabled specifications, keyboard roaming, JSON output,`gardener:skuchange`
Cart	`data-g-cart`	Cent integer calculation, quantity/removal linkage, subtotal/discount/freight/tax/total
Coupon	`data-g-coupon`	Declarative valid code, apply/invalid/clear status and events
Saved Choice	`data-g-saved-choice`	Address, Shipping, Pickup and Payment Options
Carousel	`data-g-carousel`	Product Gallery
Dropdown	`data-g-dropdown`	Mini shopping cart

<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>

Amount, Status and Environment Rules

Cart uses the smallest monetary unit integer calculation, and the display layer is handed over to Intl.NumberFormatto avoid floating point amount errors; taxation, preferential overlay, inventory and payment verification are still adjudicated by the business backend.
SKU's Disabled, inventory's Low/Out, discount code's Invalid, payment's Success/Error/Pending, and refund's Processing/Complete/Failed all have independent statuses and cannot rely solely on color.
Address, delivery, pickup, invoice, and payment are different business objects; the settlement shell is responsible for organizing them and does not hardcode the back-end business rules into CSS.
g-commerce-container Collapse details/checkout dual columns at 704px, reorder line items and select cards at 480px; viewport query as a fallback when there is no container context.
All modes cover keyboard, RTL, Reduced Motion, Forced Colors and printing; mobile billing respects Safe Area, printing hides purchase actions and retains order, invoice and tax information.
Default white Surface with 4px small rounded corners; the component only uses theme tokens, which can be reused in 42 sets of main colors and all orthogonal theme axes.

Capability ListRegisters all 32 modes, 8 capability families, 7 types of multiplexed runtimes and complete test matrix;Independent Business and Payment ExampleCovers catalog, SKU, cart, checkout, fulfillment, payments, orders, subscriptions, billing, refunds, and taxes.

Mobile-specific components

Category 13 capabilities are not simply narrowing down desktop components, but complementing the unique structures of mobile web pages, PWA, hybrid applications and desktop WebView. 32 modes cover safe areas and dynamic viewports, mobile navigation, bottom pop-ups, gestures and scrolling, discovery and filtering, input and keyboard, mobile authentication/billing/media, as well as offline, permissions, and empty error states.

32 patterns8 families14 reusable runtimesSafe AreaTouchRTLPrint

Selection order:Select first g-mobile-safe-shell or existing page shell, then press the "Navigation → Content → Temporary Layers → Sticky Actions → System Feedback" combination. Bottom Navigation is used for 3–5 first-level destinations; Swipe Tabs are used for switching within the same context; Bottom Sheet carries short tasks; Fullscreen Dialog carries long tasks and cannot be mixed with each other.

Real-time mobile combination

Mobile workbench

G

Sliding operation entry

Gestures, buttons and Escape are all available.

Continue loading

Mobile contract

100svh Provides stable initial altitude,100dvh Follow browser bar changes.
Four-sided use env(safe-area-inset-*); Bottom bar, buy bar, snackbar, and gesture prompts do not override the Home Indicator.
Touch targets in Coarse Pointer environments are at least 44px; all gesture components retain button or keyboard paths.
Logical direction attribute supports RTL; Reduced Motion turns off displacement transitions; Forced Colors enhances selected contours; printing automatically flattens shells.

Complete matrix of 32 modes

#	Mode	Root class	Purpose and key components
01	Safe Zone Enclosure	`g-mobile-safe-shell`	`g-mobile-safe-content`, svh/dvh, four-sided Safe Area, Contained preview
02	Top application bar	`g-mobile-app-bar`	`g-mobile-app-bar-start/title/actions`,Sticky,Large Title
03	Bottom navigation	`g-mobile-bottom-navigation`	`g-mobile-bottom-navigation-item`, 3–5 first-level destinations and current status
04	Bottom elastic layer	`g-mobile-bottom-sheet`	`g-mobile-sheet-panel/handle/header/footer`, focus constraints, Escape, scroll lock
05	Action Menu	`g-mobile-action-sheet`	`g-mobile-action-list/item`, Share, Delete, and Contextual Actions
06	Pull down to refresh	`g-mobile-pull-refresh`	`g-mobile-pull-refresh-indicator/content`, threshold, Refresh/Complete API
07	Infinite loading	`g-mobile-infinite-load`	IntersectionObserver, Load button fallback, Loading/Done
08	Slide operation	`g-mobile-swipe-actions`	`g-mobile-swipe-actions-track/main/buttons`, LTR/RTL, Button and Escape fallback
09	Sliding tab	`g-mobile-swipe-tabs`	`g-mobile-swipe-tab`, horizontal scrolling adsorption and Tabs semantics
10	Mobile Classification	`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	Mobile Filtering	`g-mobile-filter-sheet`	Filter Content, Sticky Footer, Reset and Result Actions
12	Sticky Buy Bar	`g-mobile-purchase-bar`	`g-mobile-purchase-main`、`g-mobile-purchase-actions`, price, quantity and safety zone
13	Mobile Search	`g-mobile-search`	`g-mobile-search-field/icon`, cancel and clear
14	Move Selector	`g-mobile-picker`	`g-mobile-picker-grid/option`, single/multiple selection and Saved Choice
15	Wheel selector	`g-mobile-wheel-picker`	`g-mobile-wheel-column/option`, Scroll Snap, arrow keys, JSON output
16	Floating Action Button	`g-mobile-fab`	Mainly create actions, safe areas and bottom bar offsets
17	Full screen dialog box	`g-mobile-fullscreen-dialog`	Long forms, editing tasks, focus management and dynamic viewports
18	Keyboard avoidance	`g-mobile-keyboard-avoidance`	`--g-keyboard-offset`, Scroll Padding and form visible area
19	Gesture prompt	`g-mobile-gesture-hint`	`g-mobile-gesture-hint-line`, first time use and system gesture area
20	Offline Banner	`g-mobile-offline-banner`	Cache content prompt, retry and network recovery
21	Segmentation control	`g-mobile-segmented-control`	`g-mobile-segmented-item`, 2–5 mutually exclusive views
22	Mobile content streaming	`g-mobile-feed`	`g-mobile-feed-item/main`, media, body and tail actions
23	Card Carousel	`g-mobile-card-carousel`	Horizontal Scroll Snap, Peek, Optional Carousel runtime
24	Mobile Form	`g-mobile-form`	`g-mobile-form-actions`, full-width submission and touch fields
25	Mobile Authentication	`g-mobile-auth`	`g-mobile-auth-actions`, login/registration/verification code and keyboard environment
26	Mobile settlement	`g-mobile-checkout`	`g-mobile-checkout-actions/summary`, order confirmation and safety area
27	Mobile media viewing	`g-mobile-media-viewer`	`g-mobile-media-viewer-stage/tools`, pan, zoom, and full screen toolbars
28	Keyboard toolbar	`g-mobile-keyboard-toolbar`	Previous item, next item, completion, format and input method top edge
29	Select mode	`g-mobile-selection-mode`	`g-mobile-selection-main/actions`, counting and batch actions
30	Snackbar	`g-mobile-snackbar`	`g-mobile-snackbar-main`, short feedback, undo and bottom bar offset
31	Permission prompt	`g-mobile-permission-prompt`	`g-mobile-permission-icon`、`g-mobile-permission-actions`, Location, Notifications, Camera & Media
32	Empty/Error/Offline status	`g-mobile-state`	`g-mobile-state-icon/actions`, Empty/Error/Offline/Success

Declarative runtime interface

Behavior	Properties	Key interface
Mobile Sheet	`data-g-mobile-sheet` / `data-g-mobile-sheet-open`	Open/Close/Toggle, focus trap, scroll lock, Backdrop, Escape
Pull Refresh	`data-g-pull-refresh`	`gardener:refresh`、`complete()`, button backup
Infinite Load	`data-g-infinite-load`	`gardener:loadmore`、`complete({done})`, IntersectionObserver
Swipe Actions	`data-g-swipe-actions`	Reveal/Close/Toggle, LTR/RTL Gesture, Button, Escape
Wheel Picker	`data-g-wheel-picker`	Scroll Snap、Click/Arrow/Home/End、`gardener:wheelchange`
Reuse runtime	`data-g-tabs`、`data-g-saved-choice`、`data-g-dialog`、`data-g-toast`	Tags, Segmentation/Selection, Full Screen Dialog, Snackbar

<button data-g-mobile-sheet-open="filters">Filter</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>

Endpoints, Gestures and Business Boundaries

Safe Area Shell usage 100svh Add 100dvh; If the business wants to follow the soft keyboard, it can be updated through the Visual Viewport/host bridge --g-keyboard-offset。
Gestures only enhance efficiency: Pull Refresh has a refresh button path, Infinite Load has "load more", Swipe Actions has Toggle, and Wheel Picker has keyboard support.
Native permission requests, network status, data loading, payment, authentication and media scaling are implemented by the business or the host; Gardener provides stable vision, status, events and accessible interfaces without forging results.
Bottom Sheet is suitable for short tasks, Action Sheet is suitable for action lists, and Filter Sheet is suitable for filtering; use Fullscreen Dialog for complex editing, and still use dedicated Dialog for destructive confirmation.
Default white Surface, 1px border and 4px small rounded corners; large rounded corners and strong shadows are not the default for mobile.
All 32 modes go into component manifests and dynamic component directories; CSS source full API also lists modules, selectors, variables and state.

Capability ListRegister all 32 modes, 8 capability families, and full test matrix;Standalone mobile terminal exampleDirect testing of App Bar, Bottom Navigation, Swipe Tabs, Swipe Actions, Infinite Load, Action/Filter Sheet, and mobile selectors.

Desktop-specific components

Category 14 capabilities cover 32 high-reuse modes of Tauri, Electron, desktop WebView, and simulated desktop workbench in the browser. It breaks down window Chrome, global navigation, Dock/workspace, commands and input, documents and files, system integration, life cycle updates, recovery and status into stable interfaces; AI does not need to temporarily invent title bars, IDE layouts or system prompts.

Relation to Generic Desktop Layout:g-desktop-shell、g-titlebar、g-workbench continues as a compatibility basis; this section g-desktop-workspace and 31 companion modes are a more complete and accurate composition layer for desktop applications.

Live Desktop Workspace

Gardener Studio — Document Space

Desktop CMS editing area

Labels, columns, Dock, Inspector, and status bar all maintain high density, small rounded corners, and full keyboard paths.

↑

New version available

Downloaded, waiting for restart.

Complete matrix of 32 modes

#	Patterns and Root Classes	Stable component/status/purpose
1	Native Titlebar `g-native-titlebar`	`g-native-titlebar-start`、`g-native-titlebar-title`、`g-native-titlebar-end`
2	Window Controls `g-desktop-window-controls`	`g-desktop-window-button`; Minimize, Maximize/Restore, Close
3	Menu Bar `g-desktop-menubar`	`g-desktop-menubar-item`;Menu entry and platform sequence
4	Activity Bar `g-desktop-activity-bar`	`g-desktop-activity-item`;Current module, global tool
5	Dock Panel `g-desktop-dock-panel`	`g-desktop-panel-header`、`g-desktop-panel-body`,Collapsed
6	Resizable Split Pane `g-desktop-split-pane`	`g-split-panel`、`g-split-handle`;Landscape/Portrait
7	Inspector `g-desktop-inspector-panel`	Properties, styles, auditing, contextual information
8	Status Bar `g-desktop-status-bar`	`g-desktop-status-group`、`g-desktop-status-item`
9	Command Palette `g-desktop-command-palette`	`g-desktop-command-panel`、`g-desktop-command-input`、`g-desktop-command-results`、`g-desktop-command-item`
10	Shortcut Recorder `g-shortcut-recorder`	`g-shortcut-recorder-control`、`g-shortcut-recorder-keys`、`g-shortcut-recorder-status`
11	Context Menu `g-desktop-context-menu`	`g-desktop-menu-item`、`g-desktop-menu-separator`
12	Unsaved Tabs `g-desktop-document-tabs`	`g-desktop-document-tab`、`g-desktop-document-tab-close`；Active, Dirty, Pinned
13	Drag Region `g-desktop-drag-region`	`g-desktop-no-drag` Protect buttons, links and inputs
14	Window Loading `g-window-loading`	`g-window-loading-icon`、`g-window-loading-progress`
15	Update Available `g-update-available`	Version, release notes, postpone/restart updates
16	Permission Request `g-desktop-permission-request`	`g-desktop-notice-icon`、`g-desktop-notice-main`、`g-desktop-notice-actions`
17	Native File Picker `g-native-file-picker`	`g-native-file-picker-value`; Single selection, multiple selection, and folder are determined by input/host
18	Tray Menu Shell `g-tray-menu`	Reuse desktop menu items; online status, window entry and exit
19	Multi-window Placeholder `g-multi-window-placeholder`	`g-desktop-state-icon`、`g-desktop-state-actions`
20	Desktop Workspace `g-desktop-workspace`	`g-desktop-workspace-main`;Title/Activity/Main/Inspector/Status grid
21	Window Switcher `g-desktop-window-switcher`	`g-desktop-window-switcher-panel`、`g-desktop-window-list`、`g-desktop-window-item`、`g-desktop-window-main`
22	Recent Documents `g-recent-documents`	`g-recent-document`、`g-recent-document-main`、`g-recent-document-path`
23	Desktop Toolbar `g-desktop-toolbar`	`g-desktop-toolbar-group`、`g-desktop-toolbar-separator`
24	Bottom Panel `g-desktop-bottom-panel`	Terminal, Logs, Questions, Output and Background Tasks
25	Background Task Center `g-background-task-center`	`g-background-task`、`g-background-task-main`、`g-background-task-progress`
26	Notification Center `g-desktop-notification-center`	`g-desktop-notification`、`g-desktop-notification-main`;Unread
27	Sync Status `g-sync-status`	`g-sync-status-dot`; Syncing, Synced, Offline, Error
28	Update Progress `g-update-progress`	`g-update-progress-header`、`g-update-progress-track`、`g-update-progress-value`
29	Crash Recovery `g-crash-recovery`	Restore document, restore session, safe boot, abandon restore
30	Single-instance Notice `g-single-instance-notice`	Switch to existing window, continue to new window, cancel
31	Deep-link Handler `g-deep-link-handler`	Show source, target, allow/deny and "Don't ask again"
32	About Dialog `g-about-dialog`	`g-about-dialog-icon`; Version, license, update and diagnostic portal

Declarative runtime

Behavior	Properties/Trigger	Keyboard and events
Shortcut Recorder	`data-g-shortcut-recorder`、`data-g-shortcut-control`、`data-g-shortcut-output`	Esc cancels, Delete clears, issues `gardener:shortcutchange`
Desktop Tabs	`data-g-desktop-tabs`、`data-g-desktop-tab`、`data-g-desktop-tab-close`	Arrow/Home/End, Ctrl/⌘+Tab, Ctrl/⌘+W, middle key to close
Native File Picker	`data-g-native-file-picker`、`data-g-native-file-trigger`、`data-g-native-file-value`	Native input fallback; emitted `gardener:nativefiles`
Window Switcher	`data-g-window-switcher`、`data-g-window-item`	Ctrl/⌘+`, arrow keys, Enter, Escape
Reuse runtime	`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`	Columns, Commands, Menus, Navigation, Dock, Tray, and About Dialog

Tauri / Electron Host Contract

<!-- Only load an adapter if the host has provided a whitelisted bridge -->
<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 use contextIsolation With security preload, only expose whitelist methods such as Minimize, Maximize/Restore, and Close; do not enable Node Integration, and do not expose any IPC channels to the page.
Tauri v2 is injected into the Window API by the application; permission capabilities, file system, Updater, Deep Link, Tray and multi-window are configured according to the application Capability and are not automatically applied for by CSS.
app-region: drag and -webkit-app-region: drag Only responsible for draggable areas; buttons, links, inputs, and menus must be placed in g-desktop-no-drag Or protected by built-in selector.
Platform available data-g-os="macos" or data-g-platform="macos" Toggle traffic light window control; Windows/Linux keep right rectangular control.
Updates, permissions, file selection, tray, multi-window, deep chaining, single instance, and crash recovery all require the business or host to return real results; components only provide predictable presentation, events, focus, and state structures.

Responsiveness, Accessibility, and Printing

g-desktop-workspace Build container query: less than 56rem hides the inspector, less than 40rem hides the Dock and simplifies the title bar; independent panels can still be displayed by the business through Toggle.
Document tags, command panel, menus, columns, shortcut key recording, and window switcher all have keyboard paths; Dirty tags issue a cancelable message before closing beforetabclose。
Logical direction attribute overrides RTL; Reduced Motion stops sync pulses; Forced Colors provides clear outline for current Activity/Tab/Command.
Hide the window Chrome, activity bar, status bar, toolbar, Bottom Panel and all floating layers when printing, expand the main content, Dock and Inspector to avoid cropping.
Default white Surface, 1px border, and 4px small rounded corners; shadows are only used for real overlays such as command panels, window switchers, and menus.

Capability ListRegister all 32 modes, 8 capability families and test matrices;Standalone desktop exampleCovers windows, workspaces, tabs, commands, shortcuts, files, trays, updates, notifications, and restore status.

AI products and intelligent interactive components

Category 15 capabilities cover the complete task chain of AI assistant, Copilot, Agent workbench, generation tools, knowledge base Q&A, multi-modal products and AI desktop client. The 32 modes extend from session entry to prompt, reasoning, streaming output, tool approval, multi-agent, source and artifact, context and cost, voice, permissions, privacy, security and feedback evaluation, and do not reduce AI product errors to "chat bubble + input box".

Differences from AI page generation protocol:This section is for the AI product UI for end users; the following text AI page generation protocol is a constraint for using Gardener on generators. The former provides interface components, and the latter specifies the order in which capabilities, recipes, components and tool classes are selected.

Real-time AI workspace

Context 38%

Please generate a multi-tenant enterprise portal.

G

Gardener AgentWorking

Enterprise Portal recipe matched, checking permissions, CMS and Dashboard components.

Matches tenant, workflow, dashboard, media-library.

Require approval for write page template

Modify only the generated directory of the current project.

scope: generated/** · operation: create/update

Complete matrix of 32 modes

#	Patterns and Root Classes	Stable component/status/purpose
1	AI Workspace `g-ai-shell`	`g-ai-sidebar`、`g-ai-sidebar-header`、`g-ai-main`、`g-ai-header`
2	Conversation List `g-conversation-list`	`g-conversation-item`、`g-conversation-title`;History, pinned, grouped and current session
3	Chat Thread `g-chat`	`g-chat-list`、`g-ai-empty-chat`; Empty, Loading, Streaming, Error
4	AI Message `g-message`	`g-message-avatar`、`g-message-meta`、`g-message-body`、`g-message-actions`;User/Assistant/System
5	Prompt Composer `g-composer`	`g-composer-input`、`g-composer-toolbar`、`g-composer-status`; Enter to send, Shift+Enter to wrap, and stop
6	Attachment `g-attachment`	`g-attachment-list`、`g-attachment-preview`、`g-attachment-name`、`g-attachment-meta`
7	Prompt Starter `g-prompt-starter`	`g-prompt-starter-header`、`g-prompt-suggestions`、`g-prompt-suggestion`
8	Prompt Library `g-prompt-library`	`g-prompt-card`;Search, category, collection, parameterized template
9	Mention / Slash Menu `g-ai-command-menu`	`g-ai-command-group`、`g-ai-command-item`、`g-mention`、`g-slash-command`
10	Model Selector `g-model-selector`	`g-model-selector-trigger`、`g-model-selector-menu`、`g-model-option`
11	Thinking `g-thinking`	`g-thinking-trigger`、`g-thinking-content`; Collapsed, Expanded, Streaming
12	Streaming Response `g-streaming-response`	`g-streaming-response-header`、`g-streaming-response-body`、`g-streaming-response-actions`、`g-stream-cursor`
13	Tool Call `g-tool-call`	`g-tool-call-header`、`g-tool-call-status`、`g-tool-call-body`、`g-tool-call-progress`
14	Tool Approval `g-approval`	`g-approval-title`、`g-approval-scope`、`g-approval-actions`;Approved/Rejected/Cancelled/Expired
15	Agent Status `g-agent-status`	Idle, Working, Waiting, Blocked, Complete, Failed
16	Agent Plan `g-plan`	`g-plan-header`、`g-plan-list`、`g-plan-item`
17	Multi-agent Board `g-agent-board`	`g-agent-card`、`g-agent-card-header`、`g-agent-card-task`
18	Agent Handoff `g-agent-handoff`	`g-agent-handoff-main`、`g-agent-handoff-actions`;Context handover and manual takeover
19	Sources / Citations `g-sources`	`g-source-list`、`g-source`、`g-citation`;Citation positioning and credibility
20	Artifact Workspace `g-artifact-layout`	Dialog and preview/code/document dual-area layout
21	Artifact Panel `g-artifact-panel`	`g-artifact-toolbar`、`g-artifact-tabs`、`g-artifact-content`、`g-artifact-status`
22	AI File Tree `g-file-tree`	`g-file-tree-item`;Hierarchy, expansion, selection, and keyboard navigation
23	Version History `g-version-list`	`g-version`;Generated by, time, current version, compare and restore
24	Generation Gallery `g-generation-grid`	`g-generation-card`;Multiple results, variations, selections and continued editing
25	Generation Placeholder `g-generation-placeholder`	Queued, Generating, Partial, Complete, Failed
26	Context/Memory `g-ai-context-manager`	`g-ai-memory-list`、`g-ai-memory-item`、`g-ai-context-sources`、`g-context-meter`
27	Cost / Rate Limit `g-ai-usage-panel`	`g-ai-usage-grid`、`g-ai-usage-metric`、`g-ai-limit-status`、`g-cost`、`g-limit`
28	Voice Session `g-voice-state`	`g-voice-bar`、`g-voice-state-label`; Listening, Processing, Speaking, Error
29	Permission Scope `g-permission-scope`	`g-permission-scope-header`、`g-permission-scope-list`;Resource, operation, deadline, source
30	Privacy Notice `g-privacy-notice`	Training, retention, cross-border, corporate policies and sensitive information description
31	Safety / Policy Notice `g-ai-safety-notice`	`g-ai-safety-icon`、`g-ai-safety-main`、`g-ai-safety-actions`
32	Feedback/Evaluation `g-ai-feedback`	`g-ai-feedback-question`、`g-ai-feedback-options`、`g-ai-feedback-option`、`g-ai-feedback-detail`

Dedicated versus reused runtimes

Behavior	Properties	Key interface
AI Composer	`data-g-ai-composer`、`data-g-composer-input`、`data-g-composer-send`、`data-g-composer-stop`	Auto height, Enter/Shift+Enter,`promptsubmit`、`promptstop`, Streaming status
Prompt Fill	`data-g-prompt-fill`、`data-g-prompt-target`、`data-g-prompt-value`	Fill the Starter/Library template into the specified Composer and issue Input
AI Approval	`data-g-ai-approval`、`data-g-approval-choice`	Cancelable Before event, Approved/Rejected/Cancelled, Reset API
AI Feedback	`data-g-ai-feedback`、`data-g-feedback-value`、`data-g-feedback-detail`	Reason for evaluation, additional explanation,`feedbackchange`、`feedbacksubmit`
Reuse runtime	`data-g-dropdown`、`data-g-accordion`、`data-g-roving-nav`、`data-g-tabs`、`data-g-tree`	Model selection, Thinking/Tool, command menu, Artifact tag, file 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>Stop</button>
  <button data-g-composer-send>Send</button>
  <span data-g-composer-status></span>
</form>

Status, Trust and Business Boundaries

Streaming must provide Stop, Paused/Stopped/Complete/Error states; cursor animation is only enhanced, Reduced Motion turns off animation.
Thinking displays a readable reasoning summary or progress by default and does not require the model private reasoning chain to be disclosed; the product needs to clearly distinguish between "summary", "tool log" and "final answer".
Separation of Tool Call and Tool Approval: Call status cannot replace permission confirmation; destructive, external communication, payment, sensitive data, and persistent permissions must be truly approved by the business execution.
Sources/Citations represents a citation relationship and does not automatically prove authenticity; the business needs to retain the source URL, fragment, time and accessibility, and the generated content still needs to be fact-checked.
Context/Memory must allow viewing the source, deleting or disabling; Cost/Rate Limit should use the real metering of the backend and cannot be estimated by the frontend to pretend to be a bill.
Safety Notice does not replace server-side policy; Privacy Notice does not replace legal consent. The UI should show why it was blocked, whether it can be appealed, and how the data is retained and used.
Use white Surface, 1px border and 4px small rounded corners in all modes; collapse Artifact, Sidebar and Dual Column modes at 960/704/512px container width, and override RTL, Forced Colors and Print.

Capability ListRegister all 32 modes, 8 ability families and complete test matrix;Standalone AI ExampleCovers Dialog, Composer, Prompt, Thinking, Tool Approval, Agent, Artifact, Build, Context, Charges, Permissions, Security, Voice, and Feedback.

Complete page and industry solutions

Category 16 is the highest composition layer of Gardener: the first 15 categories provide layout, components, business chains and end-specific interactions, and this category solidifies them into 32 directly selectable full-page contracts. It covers individuals and enterprises, public websites and backends, general businesses and vertical industries, and is also suitable for browsers, mobile web pages, PWA, Tauri and Electron WebView. AI should first select the page root class and corresponding Recipe here, and then populate the components instead of organizing the entire page CSS from scratch.

32 complete pages52 total recipes8 familiesContainer QueryRTLPrint

Real-time Dashboard full page skeleton

Enterprise overview

Multi-tenant content platform

Page-level headers, indicators, main content, auxiliary areas, and mobile folds have stable contracts.

Site28,640↑ 12.4%

page486kAcross 42 topics

Review138Needs processing

32 complete page matrices

#	Page root class	Main components and uses
1	Product Landing `g-product-landing`	`g-landing-hero`, copy, visual, proof, section; SaaS, App, AI products and new product releases
2	Corporate Home `g-corporate-home`	`g-corporate-hero`, trust, solution grid; group, brand, institution and enterprise portal
3	Personal Home `g-personal-home`	`g-personal-intro`, links, timeline; personal brand, resume and expert homepage
4	Portfolio `g-portfolio-page`	`g-portfolio-hero`, featured, project grid; design, photography, development and case library
5	Blog Index `g-blog-index`	`g-blog-index-header`, categories, entry grid; blog, news and corporate information
6	Article `g-article-page`	`g-article-page-layout`, body, toc, meta; long articles, news, tutorials and printing
7	Docs Portal `g-docs-portal`	`g-docs-layout`, sidebar, main, toc; product, API and internal documentation
8	Help Center `g-help-center-page`	`g-help-center-hero`, search, layout, aside; FAQ and customer self-help
9	Search Results `g-search-results-page`	`g-search-results-layout`, filters, list, result; search within the site, documents, products and resources
10	Contact `g-contact-page`	`g-contact-layout`, details, form; contact, sales consultation and lead collection
11	Pricing `g-pricing-page`	`g-pricing-page-header`, grid, card; SaaS, membership and service packages
12	Dashboard `g-dashboard-overview`	`g-dashboard-metrics`, layout, panel; operation overview, cockpit and monitoring
13	Admin List `g-admin-list-page`	`g-admin-list-header`, filters, content, toolbar; background resource management
14	Record Detail `g-record-detail-page`	`g-record-detail-layout`, main, aside, section; customer, order, content and asset details
15	Settings `g-settings-center`	`g-settings-center-layout`, nav, content, section; products, organizations and desktop preferences
16	User Center `g-user-center`	`g-user-center-layout`, nav, content; information, security, orders and membership rights
17	Notifications `g-notification-center-page`	`g-notification-groups`, group, row; notifications, reminders and updates
18	Onboarding `g-onboarding-flow`	`g-onboarding-aside`, main, step, progress; initialization, settlement and import
19	CRM `g-crm-workspace`	`g-crm-layout`, nav, main, inspector, pipeline; customers, business opportunities and sales follow-up
20	Project Workspace `g-project-workspace`	`g-project-layout`, board, column, inspector; projects, tasks and R&D collaboration
21	Support Center `g-support-center`	`g-support-layout`, thread, messages, reply; customer service, work order and after-sales
22	Approval Center `g-approval-center`	`g-approval-layout`, queue, column, inspector; process, cost, content and authority approval
23	Knowledge Base `g-knowledge-base`	`g-knowledge-hero`, search, layout; enterprise wiki, system library and internal help
24	Learning Portal `g-learning-portal`	`g-learning-layout`, course grid, card; course, training and school portal
25	Event Portal `g-event-portal`	`g-event-hero`, grid, card; conferences, exhibitions, community and live broadcast events
26	Booking Portal `g-booking-portal`	`g-booking-layout`, results, summary; medical, venue, hotel and service reservations
27	Healthcare `g-healthcare-portal`	`g-healthcare-layout`, summary, record, industry alert; patients and health services
28	Finance `g-finance-portal`	`g-finance-layout`, summary, account, industry alert; banking, wealth and corporate finance
29	Public Service `g-public-service-portal`	`g-public-service-layout`, summary, item; government affairs, application progress and convenience services
30	Marketplace `g-marketplace-page`	`g-marketplace-hero`, filters, grid, card; application, service, talent and plug-in market
31	Community `g-community-page`	`g-community-hero`, feed, sidebar, post; community, forum and user content
32	Status Center `g-status-center-page`	`g-status-overall`, services, history, incident; status, fault, maintenance and SLA

Public full page part

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 and g-solution-empty can be reused across 32 types of pages to ensure that the basic syntax of AI does not change when changing industries.

Selection, composition and business boundaries

Start with solution.* Recipe Determine the full page type, then select platform, topic axis, and density.
The root class is responsible for page-level responses and zone relationships; the form, data, authentication, business, mobile, desktop, and AI components are still populated from the first 15 classes.
Marketing, Personal, and Content pages use natural document scrolling; Dashboard and Workbench allow high-density multiple columns; Healthcare, Finance, and Government are UI contracts only and do not replace regulations, authentication, privacy, auditing, and backend business rules.
All modes use logical orientation, small rounded corners, white Surface; collapses at 960px and 704px container width, supports RTL, Reduced Motion, Forced Colors and printing.
CRM, Project, Dashboard, Settings and Notification root pages can be placed in Tauri/Electron g-desktop-workspace;Real windows, files, updates, and permissions remain the responsibility of the desktop adapter.

<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>

Capability ListRegisters all 32 root modes and 8 ability families;Recipe ListProvides the terminal, widgets, runtime, and purpose of each page;Standalone ExampleSwitchable public website, Dashboard, CRM, industry portal and status center preview.

Public API and Schema

From 0.3.0 Start,gardener.public-api.json is a canonical list of public naming and programming interfaces, fully registering CSS layers, package entries, theme properties, JavaScript exports, behaviors, events, desktop adapters, and compatibility fields.

Reading public API manifest...

Unified naming

Range	Specification	Example
CSS classes	`g-` + kebab-case	`g-command-palette`
CSS variables	`--g-` + kebab-case	`--g-color-primary`
Behavioral attributes	`data-g-{behavior}`	`data-g-dialog`
Event	`gardener:{event}`	`gardener:beforeopen`
Metadata interaction	`behaviors: string[]`	`["dialog"]`
Desktop Bridging	`adapters: string[]`	`["tauri","electron"]`
Platform	`platforms: string[]`	`["web","mobile"]`
Recipe ID	dot-separated kebab-case	`solution.admin-list`

Complete Schema

All eleven sets of schemas use JSON Schema 2020-12, and unknown fields are rejected:Components、Recipes、Capabilities、Utilities、Manifest、Public API、Builds、Custom Build、Performance Budgets、Performance Report、Compatibility. All object schemas turn off unknown fields or explicitly declare dynamic value types.npm run test:schema Executed 48 standard validation use cases using Ajv 2020-12, covering ten release/configuration documents, unknown root fields, ten types of unknown nested fields, ten types of missing nested required fields, cross-schema references, JavaScript identifiers, SHA-256 formats, baseline regression status, and legacy component schema compatible aliases;npm run contracts Continue to perform fifteen sets of negative contract testing and verify cross-manifest references, source code and build artifact consistency, selectors, real component attribution, SHA-256/SRI integrity, reproducible build commands, module types/parameters/signatures, instance members, data attributes, event payloads, adapters, types and release scripts, compatibility baselines, build archives, 42 absolute and relative budget artifacts, budget results, versions and full package exports.

All 9 modules exported

Reading module interface...

All 66 behaviors and instance members

Each item lists declarative initialization properties, and getInstance() Returns all members of the object that are allowed to be called.

Reading behavior contract...

All 75 events and payloads

List each item in full CustomEvent.detail ; events bubble up and can be canceled to before The seven events at the beginning are passable preventDefault() Process guard preventing subsequent operations.

Reading event contract...

All runtime data attributes

The 309 properties available to the author are divided into 66 behavior entries in the behavior contract above, 166 structure/action selectors, and 77 additional configuration properties; there are also 27 state properties maintained by the runtime. Status properties may be read simultaneously as initial configuration, but the first three sets available to the author are mutually exclusive and are not double-counted.

Structure and Action Selector

Reading selector properties...

Additional configuration properties

Reading configuration properties...

Runtime maintenance status

Reading status attributes...

Tauri / Electron Adapter Contract

Reading adapter contract...

Compatibility Rules

The specification field for the Manifest is behaviors. old field runtimeBehaviors Throughout 0.x Version line reserved as read-only compatible alias; old metadata/schema.json Continue pointing to the new Components Schema. 1.0.0 promotes the public contract to Stable, and uses a machine-readable Compatibility baseline to save all public entries, layers, themes, runtimes, components and recipes of 0.9.0; 1.x must provide change records and migration instructions before deleting any compatible entries, and must go through the deprecation period of at least two minor versions. Actual removal can only occur in a new major version.

Component Catalog

Component list from gardener.manifest.json, contains categories, types, states, selectors, variants, widgets, functions, platforms, behaviors, adapters, and accessibility contracts. The dynamic below displays all entries and all metadata, rather than a curated list.

Reading component list...

Component Status Requirements

New components must be reviewed for Default, Hover, Focus Visible, Active, Disabled, Readonly, Loading, Empty, Error, and Success; not every component will display all statuses, but it must be clear whether "not applicable" or "covered".

JavaScript runtime

Runtime framework independent, passed data-g-* Automatic initialization. MutationObserver handles new nodes and added behavioral attributes at the same time, and is suitable for SPA, CMS canvas and AI streaming to generate DOM.

Reading runtime manifest...

Declarative Dialog

<button data-g-dialog-open="confirm">Open</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">Confirm operation</h2>
    <button data-g-close>Cancel</button>
  </section>
</div>

Programming API

import Gardener from "@gardener/css";

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

Gardener.toast({
  title: "Saved successfully",
  message: "Page has been published",
  tone: "success"
});

API	Description
`init(root)`	Initializes all behavior of the root node itself and its descendants.
`destroy(root)`	Release listeners, timers, and instance references.
`register(name, factory)`	Register project custom behavior.
`getInstance(element, name)`	Get a single or specified behavior instance.
`emit(element, name, detail)`	Dispatching a cancelable Gardener event.
`toast(options)`	Create a status or warning toast.
`behaviors`	Read the currently registered behavior name.

Event

gardener:init、gardener:beforeopen、gardener:open、gardener:beforeclose、gardener:close、gardener:change、gardener:dismiss. Before event can be passed preventDefault() Cancel.

Test access control at runtime (since 0.4.0)

npm run test:runtime Use Node.js built-in test runner and Happy DOM to bidirectionally compare real instance members for all 66 behaviors in the public list, and verify initialization, idempotence, destruction and re-initialization; while covering MutationObserver's dynamic nodes, dynamic attributes, subtree removal, scope destruction, multi-behavior coexistence, global destruction and initialization event bubbling.

When a runtime behavior is added or renamed, the public API, sample/supplemental fixtures, and per-behavior tests must be synchronized, otherwise the tests will fail due to missing fixtures, instances, or members.

Page Recipe

Full recipe JSON Defines the high-frequency page root class, all necessary components, applicable platforms, behaviors, desktop adapters, and usage. It is not a screenshot template, but a stable structure that can be changed into themes, is responsive, and can be continuously combined. The following expansion retains all fields for each recipe.

Reading recipe list...

AI and template systems should match first recipe.id, check again platforms, finally use parts forms a complete structure. Don’t pass off a full-page recipe with a single similar component.

AI page generation protocol

Gardener provides five layers of truth sources for AI: the public API list answers "what stable names and entries are allowed to be used", the capability list answers "whether the industry's regular capabilities are implemented", the component list answers "what is there", the tool class list answers "what is the precise class name", and the recipe list answers "how to start a complex page".

{
  "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"
  ]
}

Generate constraints

Check first gardener.capabilities.json, confirm that the industry capabilities corresponding to the requirements have been achieved.
It is forbidden to make up information that does not exist in the Manifest g-* class.
High-reuse pages are not assembled from scratch when recipes exist.
Prioritize the use of semantic component classes; tool classes only handle local differences.
Interactive components must use registered runtime and specified ARIA structures.
Verify endpoints, keyboard, focus, status, RTL, printing and high-contrast environments before output.
When there are gaps, register them as framework capability requirements and do not mix temporary CSS into system interfaces.

Tauri/Electron

.g-desktop-shell Provides fixed viewport layout suitable for editors, AI tools and super CMS. Pass data-g-platform and data-g-os Control platform details.

<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>

Secure Bridging

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

// preload Only expose whitelist actions
contextBridge.exposeInMainWorld("gardenerDesktop", {
  windowAction: action => ipcRenderer.send("gardener:window-action", action)
});

Do not enable Node Integration in the Renderer and do not expose any IPC to the page. The adapter only accepts minimize, maximize, close, and drag whitelist actions.

On-demand builds, types, cross-version compatibility and release access

1.0.0 Roll five platforms, 28 component packages, formal compression and performance budgets to the previous version's measured baseline, and upgrade the public contract to Stable, continuing to retain types, cross-version compatibility, and real npm release package access.gardener.builds.jsonRegistered all 5 platform profiles, 28 component packages, 506 component mappings to one or more real owning packages, selector signatures, browser targets, builder parameters, and SHA-256/SRI for all 42 production artifacts;gardener.performance.jsonSave the raw, gzip, Brotli, compression ratio and npm package volume results of each official build.

TypeScript is cross-version compatible

Builds are automatically generated from the Public API gardener.d.ts、gardener.tauri.d.ts and gardener.electron.d.ts. 66 behaviors and 75 events form a complete literal union type;npm run test:types Compile real consumers using TypeScript strict mode, covering default and named exports, behavior factories, toasts, instance queries, and two types of desktop bridges.

gardener.compatibility.json Solidified 1,145 contracts inherited from 0.9.0, including all 47 package entries, CSS layers, themes, runtimes, data properties, adapters, 506 components, and 52 recipes.npm run verify:compatibility Allow subsequent 1.x additions and prohibit deletions without migration paths; at the 1.0.0 stable cut-off point, existing entries will also be reversely checked to see if they are missing. Deprecated entries remain in at least two minor versions and can only be removed in a new major version. Its closed structure consists of Compatibility Schema Constraints.

Package explicitly supports Node.js >=18.18, Chrome/Edge/Firefox 100+, Safari/iOS 15.4+, and ESM; main portal and desktop adapter provide conditions types Export. Runtime automatic initialization is marked as sideEffectsto avoid accidental deletion by the packager.npm run verify:package Will check the real npm package whitelist, each export target, type file, development directory leaks and Publint;prepublishOnly Enforce complete release:verify, and enable public packages and npm Provenance.

5 platform files

File	Package entry	Exclusive layer	Operating environment
web	`./platform/web.css`	Generic components, excluding mobile/desktop specific combinations	PC and responsive web pages
mobile	`./platform/mobile.css`	Universal components + mobile / mobile-compositions	Mobile Web, PWA, Hybrid WebView
desktop	`./platform/desktop.css`	Common components + desktop / desktop-compositions	Desktop browser and application shell
tauri	`./platform/tauri.css`	Independent lightweight entry inheritance desktop CSS + Tauri adapter	Tauri v2
electron	`./platform/electron.css`	Independent lightweight entry inheritance desktop CSS + Electron security bridge adapter	Electron Renderer

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

Simultaneous generation of readable CSS per directory, formal .min.css, external Source Map and closed build manifest; Tauri/Electron also copies the corresponding JavaScript adapter. The official platform package entrance is unified with .css end, and verify that the nested inheritance can be fully expanded through the CSS packaging test of the real installation package.

28 stable component packages

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 Standardize the export of all the above official compressed packages,./component/* Reserved as a compatible alias. When building by component name, the builder depends on the class selector and data-g-* Real source code hits for properties, resolving 506 components into one or more complete belonging packages instead of truncating individual selectors, so pseudo-classes, states, animations, sub-parts, container queries and dependency rules are not lost.

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

Parameters include --platform、--components、--packs、--utilities / --no-utilities and --out. Unknown platforms, packages, or components fail immediately; the output listing is given by Custom Build Schema Verification.

Each custom build manifest also generates SHA-256 and standard SRI for readable CSS, compressed CSS, Source Map, and the Tauri/Electron adapter copied with the package. The recipient can verify on a file-by-file basis that the delivery is complete and has not been replaced, without relying on the build machine.

Byte-level reproducible builds

npm run verify:reproducible will record the current official output, re-execute the complete build, and then compare the CSS, JavaScript, Source Map, metadata and gardener.builds.json . Any non-deterministic differences in the output manifest or file content will fail; the performance report does not participate in byte comparison because it contains the execution time, but its numerical contract is independently reviewed by the budget command.

Formal Compression and Performance Budgeting

Formal CSS and JavaScript use esbuild for syntax-level compression without using regular replacement; the main compression entry and each custom build generate a traceable external Source Map. Compressed CSS uses a stable MIT banner that does not change with versions to avoid pure version text from disturbing the Brotli baseline. Uncompressed CSS and runtime still provide accurate versions.npm run budget Using gzip level 9 and Brotli quality 11, simultaneously calculate raw, gzip and Brotli for all 42 official compression products, and check the compression ratio of full CSS, Runtime, and npm pack --dry-run Number of packed, unpacked, and files returned. 1.0.0 uses the actual measurement results of the sealed version 0.9.0 as the immediate baseline, limiting each product's raw growth to no more than 2%, gzip/Brotli to no more than 3%, npm package packed to no more than 3%, unpacked to no more than 2%, and the number of files to no more than 10%; the five platform products all have direct historical baselines. Inclusion volume measurements are rounded up to 4 KiB packed and 64 KiB unpacked, forming a deterministic upper bound that does not underestimate the true inclusion volume and is not affected by the self-contained compaction cycle of the performance report. Failure of either absolute cap or relative cap will block release.

Controlled product	raw upper limit	gzip upper limit	Brotli upper limit
gardener.min.css	1,050,000 B	145,000 B	65,000B
gardener.core.min.css	65,000B	9,000B	6,000B
gardener.themes.min.css	60,000B	7,500 B	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,000 B	30,000B	25,000B
platform/web.min.css	1,000,000 B	140,000B	60,000B
platform/mobile.min.css	1,020,000 B	142,000 B	62,000B
platform/desktop.min.css	1,030,000 B	143,000 B	63,000B
platform/tauri.min.css	256 B	256 B	256 B
platform/electron.min.css	256 B	256 B	256 B

The above table lists 12 major CSS/Runtime entries; the budget document also itemizes coverage of 2 desktop adapters, 28 component packages, and a total of 42 officially compressed products, without using a general sharing cap to replace single product inspections.

npm package budget is 2,050,000 B packed, 16,500,000 B unpacked, up to 92 files. budget source performance-budgets.json Management and separately subject to Budgets Schema and Report Schema Protection.

npm run build       # Full, tiered, 28 component packages and 5 platform files
npm run verify:reproducible # Continuously build and verify SHA file by file-256
npm run budget      # 42 Absolute/relative budget gatekeeping for production + npm packages
npm run verify:compatibility # 1,145 Item 0.9.0 Public Contract
npm run test:types # TypeScript Strict Consumer Verification
npm run verify:package # npm Whitelists, Export Targets, and Publint
npm run test:build  # 10 Build, Compatibility, Type, Release and Failure Path use cases

Accessibility and Internationalization

The framework provides a foundation for focus styles, reduced motion, high contrast, and Forced Colors, but semantic naming and content order remain the responsibility of the page author.

KeyboardTabs, Menu, Tree, Grid, Carousel, Splitter, Dialog, and Command Palette all have keyboard paths.

FocusDialog and command panel constrain focus, restore trigger source after closing; invisible items exit tab order.

NameIcon buttons require aria-label; forms require label, aria-label, or aria-labelledby.

Dynamic statusToast uses status/alert; expansion, selection, current item synchronized via ARIA status.

DirectionLayout uses logical properties and components override animation direction and arrows under RTL.

Animationprefers-reduced-motion compresses animation duration and turns off smooth scrolling.

Delivery Checklist

The page has the correct lang and unique title.
The Heading hierarchy is continuous and the Landmark has an identifiable name.
All images are fit for purpose alt; Use empty alt for decorative images.
Keyboard only for critical tasks, focus is always visible.
Text and status colors meet WCAG AA; cannot rely solely on color to express status.
Still operable at 200% scaling, RTL, Reduced Motion, Forced Colors.
Mobile touch targets use a touch density of at least approximately 44px.

1.0.0 Automated Test Matrix

Access control	Environment	Quantity	Override
`test:build`	Node.js + esbuild + Ajv	10	Platform boundaries, real component ownership, formal compression, Source Map, SHA-256/SRI, reproducible builds, absolute/relative budgets, types, compatibility baselines, support policies, custom builds, failure paths, and npm package installation resolution
`test:browser`	Desktop Chromium + WebKit	48	All 21 examples, Home landing page and documentation, console, request, style, horizontal overflow, Dialog keyboard and focus life cycle
`test:browser:firefox`	Desktop Firefox	24	Same as desktop default access; executed on host or CI with Playwright Firefox system runtime
`test:mobile`	Pixel 7 Chromium + iPhone 13 WebKit	52	All 21 examples, Home landing page and documentation, reflow, 44px touch target, Bottom Sheet, 320px narrow screen and landscape screen
`test:a11y`	Chromium+Axe	25	21 examples and Home two pages of WCAG 2 A/AA, 2.1 A/AA, 2.2 AA, plus Keyboard, Focus, RTL, Reduced Motion, Forced Colors
`test:html`	parse5	24	21 Examples, Home and Document Parsing, Duplicate IDs, ARIA References, Languages, Titles, Viewports and Lists

npm run test:html             # 24 HTML structure use cases
npm run test:browser          # Chromium + WebKit，48 Desktop use cases
npm run test:browser:firefox  # Firefox Standalone Access Control, 24 Desktop Use Cases
npm run test:browser:all      # Chromium + Firefox + WebKit，72 Desktop use cases
npm run test:mobile           # Pixel 7 + iPhone 13，52 mobile use cases
npm run test:a11y             # Axe、Keyboard and Environment Matrix, 25 use cases
npm run test:e2e              # Default 125 real browser use cases
npm run test:types            # TypeScript Strict consumer access control
npm run verify:compatibility  # 1,145 Item 0.9.0 Compatible Baseline
npm run verify:package        # npm Files, Exports, and Publint
npm test                      # 281 Default automation use cases and all static, contract, type, compatible, release, reproducible and budget gates

Axe Gate blocks all violations detected by the selected WCAG A/AA rules, passes them without downgrade by impact, and outputs the rule, node selector, HTML, and remediation summary. Automation cannot replace human screen reader testing; production products should still use NVDA/JAWS/VoiceOver for mission-critical walkthroughs.

Printing and document output

The basic printing layer will switch black text on a white background, hide floating layers and fixed navigation, repeat table headers, avoid cards and media from spreading across pages, and allow long codes to wrap automatically. Full raster available additionally g-print-col-1 To g-print-col-24, print offset and visible/hidden classes, used for independent rearrangement within the paper width. Reports, invoices and CMS editors also have recipe-level printing capabilities.

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

Available tool classes include g-print-hidden、g-print-block、g-print-break-before and g-break-inside-avoid。

Customize, Inspect and Release

Project coverage

@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;
  }
}

Frame check

npm run build      # Full, tiered, 28 component packages and 5 platform files
npm run build:platform -- --platform mobile # Platform-oriented construction
npm run build:custom -- --components button,dialog # Component directed build
npm run verify:reproducible # Byte-level reproducible construction of access control
npm run budget     # raw / gzip / Brotli、Absolute/relative and npm package budgets
npm run verify:compatibility # 0.9.0 Cross-version public contract baseline
npm run test:types # TypeScript Strict Consumer Verification
npm run verify:package # npm Files, Export Targets, and Publint
npm run test:schema # Ajv 2020-12 Verify eleven sets of Schema
npm run test:build # 10 Build, type, compatibility, release and failure path use cases
npm run contracts  # Schema、Public API, naming, and cross-manifest contracts
npm run test:runtime # 66 Behavior and DOM life cycle
npm run test:html   # Example and HTML structure of Home
npm run check      # Theme, Component, Runtime, and Manifest Consistency
npm run audit      # Token、Contrast, Packet Boundaries, Export and Version
npm run validate   # Recipes, example class names and basic accessibility
npm run test:e2e   # Multiple browsers, mobile and Ax
npm test           # Perform all frame checks

node website/scripts/build-css-catalog.mjs
node website/scripts/check.mjs
node website/scripts/check-coverage.mjs  # Document zero omission verification

New capabilities must be synchronized

Implement CSS or Runtime.
Registration metadata/components.json。
Industry Capability Registration metadata/capabilities.json, complex page registration metadata/recipes.json。
Review the full status matrix and environment matrix.
Add runnable examples and validation input.
Rebuild all manifests and run browser regressions.

The directory browser of the document site reads directly css/dist, Vue, React, AngularJS and Blazor metadata / dist List. Therefore, after the framework is built, there is no need to manually update CSS or the number of components, behavior names, entrances or tool class search data of the four sets of adaptation layers.