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.

packages/ui-core/styles.css

@@ -108,6 +108,7 @@
 }
 
 .nodedc-button {
+  position: relative;
   --nodedc-button-bg: var(--nodedc-glass-control-bg);
   --nodedc-button-color: var(--nodedc-text-primary);
   display: inline-flex;
@@ -236,6 +237,57 @@
   place-items: center;
 }
 
+.nodedc-button__content {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  gap: inherit;
+  min-width: 0;
+}
+
+.nodedc-button[data-loading="true"] > .nodedc-button__content,
+.nodedc-icon-button[data-loading="true"] > :not(.nodedc-action-loading) {
+  opacity: 0;
+}
+
+.nodedc-action-loading {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+
+.nodedc-button[data-loading="true"],
+.nodedc-icon-button[data-loading="true"] {
+  opacity: 1;
+  cursor: progress;
+}
+
+.nodedc-loading-region {
+  position: relative;
+  min-width: 0;
+}
+
+.nodedc-loading-region[aria-busy="true"] {
+  min-block-size: calc(var(--nodedc-control-height) * 2);
+}
+
+.nodedc-loading-region__status {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--nodedc-space-2);
+  padding: var(--nodedc-space-3);
+  color: var(--nodedc-text-secondary);
+  font-size: var(--nodedc-font-size-sm);
+  text-align: center;
+  pointer-events: none;
+}
+
 .nodedc-button__icon > svg {
   width: 1rem;
   height: 1rem;
@@ -267,6 +319,7 @@
 }
 
 .nodedc-icon-button {
+  position: relative;
   display: inline-grid;
   width: var(--nodedc-icon-button-size);
   height: var(--nodedc-icon-button-size);

packages/ui-react/src/Button.tsx

@@ -1,6 +1,7 @@
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
 import { createAccentVariables, type RgbTuple } from "@nodedc/ui-core";
 import { cn } from "./cn.js";
+import { ActivityIndicator } from "./ActivityIndicator.js";
 
 export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "accent";
 export type ButtonSize = "default" | "compact" | "dense";
@@ -15,6 +16,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   shape?: ButtonShape;
   accent?: RgbTuple;
   icon?: ReactNode;
+  /** Pending state belongs to this action; dimensions and accessible name stay unchanged. */
+  loading?: boolean;
 }
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({
@@ -29,6 +32,8 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
     children,
     style,
     type = "button",
+    loading = false,
+    disabled,
     ...props
   }, ref) {
     const accentStyle = accent ? createAccentVariables(accent) : undefined;
@@ -44,9 +49,15 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         data-shape={shape === "default" ? undefined : shape}
         style={accentStyle ? { ...accentStyle, ...style } : style}
         {...props}
+        disabled={disabled || loading}
+        aria-busy={loading || props["aria-busy"]}
+        data-loading={loading || undefined}
       >
+        <span className="nodedc-button__content">
         {icon ? <span className="nodedc-button__icon" aria-hidden="true">{icon}</span> : null}
         {children}
+        </span>
+        {loading ? <span className="nodedc-action-loading" aria-hidden="true"><ActivityIndicator size="compact" /></span> : null}
       </button>
     );
   });
@@ -54,6 +65,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   label: string;
   shape?: "circle" | "rounded";
+  loading?: boolean;
 }
 
 export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton({
@@ -62,6 +74,8 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
   className,
   children,
   type = "button",
+  loading = false,
+  disabled,
   ...props
 }, ref) {
   return (
@@ -73,8 +87,12 @@ export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(functio
       aria-label={label}
       title={label}
       {...props}
+      disabled={disabled || loading}
+      aria-busy={loading || props["aria-busy"]}
+      data-loading={loading || undefined}
     >
       {children}
+      {loading ? <span className="nodedc-action-loading" aria-hidden="true"><ActivityIndicator size="compact" /></span> : null}
     </button>
   );
 });

packages/ui-react/src/LoadingRegion.tsx

@@ -0,0 +1,23 @@
+import type { HTMLAttributes } from "react";
+import { ActivityIndicator } from "./ActivityIndicator.js";
+import { cn } from "./cn.js";
+
+export interface LoadingRegionProps extends HTMLAttributes<HTMLDivElement> {
+  loading: boolean;
+  label: string;
+}
+
+/** Keeps content mounted and centers pending feedback inside its own bounds. */
+export function LoadingRegion({ loading, label, children, className, ...props }: LoadingRegionProps) {
+  return (
+    <div {...props} className={cn("nodedc-loading-region", className)} aria-busy={loading}>
+      {children}
+      {loading ? (
+        <div className="nodedc-loading-region__status" role="status" aria-label={label}>
+          <ActivityIndicator />
+          <span aria-hidden="true">{label}</span>
+        </div>
+      ) : null}
+    </div>
+  );
+}

packages/ui-react/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./AppHeader.js";
 export * from "./ActivityIndicator.js";
+export * from "./LoadingRegion.js";
 export * from "./AdminNavigationPanel.js";
 export * from "./ApplicationShell.js";
 export * from "./ApplicationSidePanel.js";