Standardize action and region loading states

Keep progress inside the initiating Button/IconButton or centered within a
LoadingRegion without changing layout or unmounting live content. Document
ownership and completion/error behavior in the registry and living catalog.

Validation: qualified NET02 DG build/typecheck/registry/loading tests;
existing browser geometry, theme and error lifecycle acceptance. All eleven
committed files match the qualified source artifact byte for byte.
This commit is contained in:
Codex
2026-09-10 09:19:12 +03:00
parent b10fd5d645
commit 8c53f73ee5
11 changed files with 188 additions and 9 deletions
+17 -1
View File
@@ -102,6 +102,7 @@
"Controlled toggle actions expose aria-pressed and use the canonical active surface without changing geometry.",
"Filled accent actions derive foreground contrast from the actual accent.",
"Destructive actions remain neutral until confirmation unless danger is the principal message.",
"loading displays one centered indicator inside the initiating action, disables repeat activation and preserves dimensions and accessible name. Never place its spinner beside or below the action group.",
"Primary tone=neutral is white when enabled and gray when disabled in every theme/accent; use it for accent-independent operator actions without local CSS overrides."
]
},
@@ -115,12 +116,27 @@
"variants": ["default", "compact"],
"behavior": ["decorative by default", "optional status semantics", "static reduced-motion presentation"],
"rules": [
"Use compact inside a Button icon slot and default for standalone inline progress.",
"Use Button.loading or IconButton.loading for actions and LoadingRegion for content. Standalone ActivityIndicator is limited to an explicit inline status or resource-row slot.",
"The process owner exposes aria-busy and visible pending copy; provide label only when the indicator itself is the status announcement.",
"The component never owns operation state, timing or completion.",
"Reduced-motion preferences stop rotation without hiding the pending-state affordance."
]
},
{
"id": "loading-region",
"status": "baseline",
"package": "@nodedc/ui-react",
"exports": ["LoadingRegion", "LoadingRegionProps"],
"domContract": ["nodedc-loading-region", "nodedc-loading-region__status"],
"summary": "Centered pending feedback within the content region that owns the request, without unmounting content.",
"rules": [
"The consumer owns loading and its terminal result; no timer or implicit network operation exists in this component.",
"Keep content mounted and reserve its dimensions while pending. Center the indicator within this region in normal and expanded layouts.",
"A command belongs to its initiating Button.loading; do not duplicate that command in a region spinner.",
"Remove loading on first usable content, failure or timeout. A live media connection alone is not usable content.",
"Use only for blocking initial content or explicit recovery. Background refresh with usable content does not cover it."
]
},
{
"id": "field",
"status": "baseline",
+1
View File
@@ -43,6 +43,7 @@
"documentation": {
"architecture": "../docs/ARCHITECTURE.md",
"components": "../docs/COMPONENTS.md",
"loading": "../docs/LOADING_STATES.md",
"theming": "../docs/THEMING.md",
"operationalTypography": "../docs/OPERATIONAL_TYPOGRAPHY.md",
"windows": "../docs/WINDOWS_AND_LAYERS.md",