diff --git a/.changeset/pending-reusable-primitives.md b/.changeset/pending-reusable-primitives.md
new file mode 100644
index 00000000000..ef9447db3df
--- /dev/null
+++ b/.changeset/pending-reusable-primitives.md
@@ -0,0 +1,9 @@
+---
+'@spectrum-web-components/core': minor
+'@adobe/spectrum-wc': patch
+---
+
+Extract the pending (busy) state into reusable, decoupled 2nd-gen core primitives so any pending-capable component can adopt it.
+
+- **`@spectrum-web-components/core`**: adds `PendingController` (`/controllers/pending-controller`) for the pending state (delayed activation, inline-size freeze, derived busy accessible name), the render-only `renderPendingSpinner` directive (`/directives/pending-spinner`), and `PendingMixin` (`/mixins`) which wires the controller, the `pending` / `pending-label` properties, and click suppression. `ButtonBase` no longer owns pending state.
+- **`@adobe/spectrum-wc`**: `swc-button` and `swc-action-button` now consume these primitives via `PendingMixin`. No public API change — `pending` / `pending-label` and the busy behavior are unchanged.
diff --git a/1st-gen/tools/base/src/version.d.ts b/1st-gen/tools/base/src/version.d.ts
index 71718368164..89f22b9c39f 100644
--- a/1st-gen/tools/base/src/version.d.ts
+++ b/1st-gen/tools/base/src/version.d.ts
@@ -12,8 +12,8 @@
 /**
  * The version of the 1st-gen Spectrum Web Components library.
  */
-export declare const version = "1.12.1";
+export declare const version = "1.12.2";
 /**
  * The version of the core base package.
  */
-export declare const coreVersion = "0.1.0";
+export declare const coreVersion = "0.3.0";
diff --git a/1st-gen/tools/base/src/version.ts b/1st-gen/tools/base/src/version.ts
index f918df20145..f7f58271b7a 100644
--- a/1st-gen/tools/base/src/version.ts
+++ b/1st-gen/tools/base/src/version.ts
@@ -17,9 +17,9 @@
 /**
  * The version of the 1st-gen Spectrum Web Components library.
  */
-export const version = '1.12.1';
+export const version = '1.12.2';
 
 /**
  * The version of the core base package.
  */
-export const coreVersion = '0.1.0';
+export const coreVersion = '0.3.0';
diff --git a/2nd-gen/packages/core/components/button/Button.base.ts b/2nd-gen/packages/core/components/button/Button.base.ts
index 783f7939c99..daf4e69e9b6 100644
--- a/2nd-gen/packages/core/components/button/Button.base.ts
+++ b/2nd-gen/packages/core/components/button/Button.base.ts
@@ -11,7 +11,7 @@
  */
 
 import { PropertyValues } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 
 import { SpectrumElement } from '@spectrum-web-components/core/element/index.js';
 import {
@@ -60,13 +60,6 @@ export abstract class ButtonBase extends SizedMixin(
   @property({ type: Boolean, reflect: true })
   public disabled: boolean = false;
 
-  /**
-   * Whether the button is in a pending (busy) state. The button remains
-   * focusable but activation is suppressed.
-   */
-  @property({ type: Boolean, reflect: true })
-  public pending: boolean = false;
-
   /**
    * Accessible label forwarded to the internal `<button>` element as
    * `aria-label`. Required for icon-only buttons, which have no visible text.
@@ -74,29 +67,10 @@ export abstract class ButtonBase extends SizedMixin(
   @property({ type: String, attribute: 'accessible-label' })
   public accessibleLabel?: string;
 
-  /**
-   * Custom accessible label used during the pending state. When omitted,
-   * the pending label is derived from the resolved non-busy accessible name
-   * plus a busy suffix (e.g. "Save, busy").
-   */
-  @property({ type: String, attribute: 'pending-label' })
-  public pendingLabel?: string;
-
-  /**
-   * Tracks whether the pending visual (disabled colors + spinner) is currently
-   * active. Set to `true` after a 1-second delay once `pending` becomes true,
-   * so the button does not immediately flash to its unavailable appearance.
-   * Protected so subclasses can reference it in their `classMap` binding.
-   */
-  @state()
-  protected pendingActive: boolean = false;
-
   // ──────────────────────
   //     IMPLEMENTATION
   // ──────────────────────
 
-  private _pendingTimer: ReturnType<typeof setTimeout> | null = null;
-
   protected get hasIcon(): boolean {
     return this.slotContentIsPresent;
   }
@@ -116,21 +90,6 @@ export abstract class ButtonBase extends SizedMixin(
     return this.accessibleLabel ?? (this.textContent?.trim() || null);
   }
 
-  /**
-   * Derives the pending-state accessible label. Prefers an explicit
-   * `pendingLabel`, then falls back to the resolved non-busy accessible
-   * name plus a ", busy" suffix, then a fixed "Busy" fallback.
-   *
-   * @internal
-   */
-  protected getPendingAccessibleName(): string {
-    if (this.pendingLabel) {
-      return this.pendingLabel;
-    }
-    const resolvedName = this.getResolvedAccessibleName();
-    return resolvedName ? `${resolvedName}, busy` : 'Busy';
-  }
-
   /**
    * Returns the set of attributes that should be forwarded to the internal
    * semantic `<button>` element, if not otherwise directly managed.
@@ -143,7 +102,6 @@ export abstract class ButtonBase extends SizedMixin(
   > {
     return {
       disabled: this.disabled,
-      'aria-disabled': this.pending && !this.disabled ? 'true' : undefined,
     };
   }
 
@@ -156,65 +114,26 @@ export abstract class ButtonBase extends SizedMixin(
 
   public override disconnectedCallback(): void {
     this.removeEventListener('click', this.handleClick, true);
-    if (this._pendingTimer !== null) {
-      clearTimeout(this._pendingTimer);
-      this._pendingTimer = null;
-    }
-    this.pendingActive = false;
     super.disconnectedCallback();
   }
 
   /**
-   * Suppresses click activation while the button is `disabled` or `pending`.
+   * Suppresses click activation while the button is `disabled`.
    *
    * Slotted icon content lives in the light DOM, so pointer clicks on icons
    * bypass the disabled inner `<button>` and bubble on the host. The host
    * listener (capture) and inner `@click` binding both call this handler.
    */
   protected readonly handleClick = (event: Event): void => {
-    if (this.disabled || this.pending) {
+    if (this.disabled) {
       event.preventDefault();
       event.stopImmediatePropagation();
     }
   };
 
   protected override update(changedProperties: PropertyValues): void {
-    if (changedProperties.has('pending')) {
-      if (this.pending) {
-        this._pendingTimer = setTimeout(() => {
-          if (this.pending) {
-            const internalButton = this.renderRoot.querySelector('button');
-            if (internalButton) {
-              internalButton.style.setProperty(
-                '--_swc-button-pending-inline-size',
-                `${internalButton.offsetWidth}px`
-              );
-            }
-            this.pendingActive = true;
-          }
-          this._pendingTimer = null;
-        }, 1000);
-      } else {
-        if (this._pendingTimer !== null) {
-          clearTimeout(this._pendingTimer);
-          this._pendingTimer = null;
-        }
-        this.renderRoot
-          .querySelector('button')
-          ?.style.removeProperty('--_swc-button-pending-inline-size');
-        this.pendingActive = false;
-      }
-    }
     super.update(changedProperties);
     if (window.__swc?.DEBUG) {
-      if (this.pending && this.disabled) {
-        window.__swc.warn(
-          this,
-          `<${this.localName}> should not set both "pending" and "disabled" simultaneously. Use "pending" to keep the button focusable while unavailable, or "disabled" to fully remove it from the tab order.`,
-          'https://opensource.adobe.com/spectrum-web-components/components/button/#pending',
-          { issues: ['pending + disabled'] }
-        );
-      }
       if (this.hasIcon && !this.hasLabel && !this.accessibleLabel) {
         window.__swc.warn(
           this,
diff --git a/2nd-gen/packages/core/controllers/index.ts b/2nd-gen/packages/core/controllers/index.ts
index eeedf96ba39..415408c71c0 100644
--- a/2nd-gen/packages/core/controllers/index.ts
+++ b/2nd-gen/packages/core/controllers/index.ts
@@ -35,6 +35,11 @@ export {
   LanguageResolutionController,
   languageResolverUpdatedSymbol,
 } from './language-resolution.js';
+export {
+  PendingController,
+  type PendingControllerHost,
+  type PendingControllerOptions,
+} from './pending-controller/index.js';
 export {
   ALL_PLACEMENTS,
   fromFloatingPlacement,
diff --git a/2nd-gen/packages/core/controllers/pending-controller/index.ts b/2nd-gen/packages/core/controllers/pending-controller/index.ts
new file mode 100644
index 00000000000..0b0c445cf03
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/pending-controller/index.ts
@@ -0,0 +1,17 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export {
+  PendingController,
+  type PendingControllerHost,
+  type PendingControllerOptions,
+} from './src/pending-controller.js';
diff --git a/2nd-gen/packages/core/controllers/pending-controller/pending-controller.mdx b/2nd-gen/packages/core/controllers/pending-controller/pending-controller.mdx
new file mode 100644
index 00000000000..fb48a61d89e
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/pending-controller/pending-controller.mdx
@@ -0,0 +1,144 @@
+import { Canvas, Meta } from '@storybook/addon-docs/blocks';
+import { DocsFooter, DocsHeader } from '../../../swc/.storybook/blocks';
+
+import * as Stories from './stories/pending-controller.stories';
+
+<Meta of={Stories} />
+
+<DocsHeader />
+
+## Usage
+
+`PendingController` manages a host element's pending (busy) _state_ so components do not reimplement the timing, layout, and accessibility-name concerns. It is one of three decoupled primitives:
+
+- **`PendingController`** (`@spectrum-web-components/core/controllers/pending-controller`) — state (delayed activation, inline-size freeze, derived accessible name) and `renderPendingState()`, which renders the spinner so the host needs no separate directive import.
+- **`renderPendingSpinner`** (`@spectrum-web-components/core/directives/pending-spinner`) — the underlying render-only directive. The controller owns and exposes it; use it directly only for a stateless spinner without a controller.
+- **`PendingMixin`** (`@spectrum-web-components/core/mixins`) — wires the controller, the `pending` / `pending-label` properties, and click suppression onto a host in one step, and re-exposes `renderPendingState()`.
+
+`swc-button` and `swc-action-button` opt in via `PendingMixin`. Components that cannot use the mixin can use the controller and directive directly.
+
+### What it does
+
+- **Delayed activation** — `pendingActive` becomes `true` only after `delay` ms (default 1000). Operations that finish quickly never flash the busy appearance. ARIA, by contrast, is applied immediately by the host keyed off `pending`.
+- **Inline-size freeze** — when the visual activates, the controller records the freeze target's measured width into `--swc-pending-inline-size`, which the host applies via `inline-size` so hiding the label or icon does not resize the host.
+- **Derived accessible name** — `getPendingAccessibleName()` returns an explicit `pendingLabel`, else `"<resolved name>, busy"`, else `"Busy"`.
+
+### Basic usage
+
+1. Implement `PendingControllerHost` on your element (`pending`, optional `pendingLabel`).
+2. Construct the controller, passing `resolveAccessibleName` so it can derive the busy name.
+3. Read `pendingActive` in `render()` to apply busy styling, and render the spinner with the controller's own `renderPendingState()` — no separate directive import.
+4. Apply the busy ARIA in the host's template, keyed off `pending` for an immediate response.
+
+```typescript
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import {
+  PendingController,
+  type PendingControllerHost,
+} from '@spectrum-web-components/core/controllers/pending-controller';
+
+class SwcThing extends LitElement implements PendingControllerHost {
+  @property({ type: Boolean, reflect: true }) pending = false;
+  @property({ attribute: 'pending-label' }) pendingLabel?: string;
+
+  private readonly pendingController = new PendingController(this, {
+    resolveAccessibleName: () => this.textContent?.trim() || null,
+  });
+
+  render() {
+    return html`
+      <button
+        aria-disabled=${ifDefined(this.pending ? 'true' : undefined)}
+        aria-label=${ifDefined(
+          this.pending
+            ? this.pendingController.getPendingAccessibleName()
+            : undefined
+        )}
+      >
+        <slot></slot>
+        ${this.pendingController.renderPendingState()}
+      </button>
+    `;
+  }
+}
+```
+
+Include the shared `pending-spinner.css` fragment (`swc/stylesheets/_lit-styles/pending-spinner.css`) in the host's styles so the rendered spinner is themed with Spectrum tokens.
+
+## Behaviors
+
+### Delayed activation
+
+When `pending` becomes `true`, the controller waits `delay` ms before setting `pendingActive`. If `pending` returns to `false` before the delay elapses, the visual never activates. This avoids a distracting flash for fast operations while still announcing the busy state to assistive technology right away. The demo below uses a shortened 250 ms delay.
+
+<Canvas of={Stories.DelayedActivation} />
+
+### Derived accessible name
+
+`getPendingAccessibleName()` prefers an explicit `pendingLabel`. When none is set, it appends `", busy"` to the name returned by `resolveAccessibleName` (for example, `"Save, busy"`), and falls back to `"Busy"` when no name is resolvable. The second host below overrides the derived name with an explicit `pending-label`.
+
+<Canvas of={Stories.DerivedAccessibleName} />
+
+### Focus retained on re-render
+
+When `pendingActive` transitions from `false` to `true`, the controller calls `host.requestUpdate()`, which triggers a Lit re-render. Because lit-html patches the DOM in place rather than replacing elements, the focused `<button>` element is not destroyed; its class and content are updated around it. Focus remains on the button throughout the re-render.
+
+Click the button below to start a pending operation. The button receives focus via the click and re-renders after the controller's delay. Focus is preserved.
+
+<Canvas of={Stories.FocusRetained} />
+
+## Accessibility
+
+### Features
+
+- **Immediate busy announcement** — the host applies `aria-disabled="true"` and the busy `aria-label` keyed off `pending`, not the delayed `pendingActive`, so screen readers learn the element is busy without waiting for the visual.
+- **Focus is retained** — pending differs from disabled: the element stays focusable so focus is not lost when it becomes busy. Activation is suppressed instead (by `PendingMixin`).
+- **Presentational indicator** — the spinner markup is `aria-hidden` and not focusable; the busy state is conveyed through ARIA, not the spinner.
+
+### Best practices
+
+- Provide a meaningful `resolveAccessibleName` (or an explicit `pendingLabel`) so the busy announcement is specific, e.g. "Save, busy" rather than "Busy".
+- Do not set both `pending` and `disabled` on the same element. Use `pending` to keep it focusable while unavailable, or `disabled` to remove it from the tab order.
+- Keep the host's busy styling on `pendingActive` (delayed), but its ARIA on `pending` (immediate).
+
+<Canvas of={Stories.Accessibility} />
+
+## API
+
+### Constructor
+
+`new PendingController(host, options?)` — registers the controller on the host.
+
+### Members
+
+| Member                       | Description                                                                                            |
+| ---------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `pendingActive`              | Read-only. `true` once the visual is active (after `delay`). Read this in `render()` to apply styling. |
+| `getPendingAccessibleName()` | Returns the busy label: `pendingLabel`, else `"<resolved name>, busy"`, else `"Busy"`.                 |
+| `renderPendingState()`       | Renders the spinner for the current state (via the `renderPendingSpinner` directive), else `nothing`.  |
+
+### Options (`PendingControllerOptions`)
+
+| Option                  | Type                   | Default      | Description                                                                                          |
+| ----------------------- | ---------------------- | ------------ | ---------------------------------------------------------------------------------------------------- |
+| `delay`                 | `number`               | `1000`       | Milliseconds to wait after `pending` becomes true before activating the visual.                      |
+| `targetSelector`        | `string \| null`       | `'button'`   | Selector (within `renderRoot`) for the element whose inline size is frozen. `null` skips the freeze. |
+| `resolveAccessibleName` | `() => string \| null` | `() => null` | Returns the host's non-busy accessible name, used to derive the default busy label.                  |
+
+### Host interface (`PendingControllerHost`)
+
+| Member         | Type      | Description                                               |
+| -------------- | --------- | --------------------------------------------------------- |
+| `pending`      | `boolean` | Whether the host is in a pending (busy) state.            |
+| `pendingLabel` | `string`  | Optional explicit busy label; overrides the derived name. |
+
+### Related primitives
+
+| Export                 | Module                                                     | Purpose                                                                         |
+| ---------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| `renderPendingSpinner` | `@spectrum-web-components/core/directives/pending-spinner` | Underlying spinner render; exposed via the controller's `renderPendingState()`. |
+| `PendingMixin`         | `@spectrum-web-components/core/mixins`                     | Wire the controller + properties + click suppression; re-exposes the render.    |
+
+<DocsFooter />
diff --git a/2nd-gen/packages/core/controllers/pending-controller/src/pending-controller.ts b/2nd-gen/packages/core/controllers/pending-controller/src/pending-controller.ts
new file mode 100644
index 00000000000..804bf44f9b8
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/pending-controller/src/pending-controller.ts
@@ -0,0 +1,241 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type { ReactiveController, ReactiveElement } from 'lit';
+
+import {
+  type PendingSpinnerResult,
+  renderPendingSpinner,
+} from '../../../directives/pending-spinner/index.js';
+
+// ─────────────────────────
+//     TYPES
+// ─────────────────────────
+
+/** Minimum interface required from any element that hosts a {@link PendingController}. */
+export interface PendingControllerHost extends ReactiveElement {
+  /** Whether the host is in a pending (busy) state. */
+  pending: boolean;
+
+  /**
+   * Optional explicit accessible label used during the pending state. When
+   * omitted, the controller derives a busy label from
+   * {@link PendingControllerOptions.resolveAccessibleName}.
+   */
+  pendingLabel?: string;
+}
+
+/** Configuration options for {@link PendingController}. */
+export interface PendingControllerOptions {
+  /**
+   * Milliseconds to wait after `pending` becomes true before activating the
+   * pending visual, so the host does not flash to its busy appearance for
+   * operations that complete quickly. Defaults to `1000`.
+   */
+  delay?: number;
+
+  /**
+   * CSS selector, resolved within the host's `renderRoot`, for the element
+   * whose inline size should be frozen while pending (via
+   * `--swc-pending-inline-size`) so the host does not resize when its label or
+   * icon is hidden. Defaults to `'button'`. Pass `null` to skip the freeze.
+   */
+  targetSelector?: string | null;
+
+  /**
+   * Returns the host's non-busy accessible name, used to derive the default
+   * busy label (`"<name>, busy"`). Keeps the controller decoupled from how the
+   * host resolves its own name.
+   */
+  resolveAccessibleName?: () => string | null;
+}
+
+const DEFAULT_DELAY = 1000;
+
+/**
+ * Custom property the controller sets on the freeze target to lock its measured
+ * inline size while pending. Consumers apply it via `inline-size: var(...)`.
+ */
+const INLINE_SIZE_PROPERTY = '--swc-pending-inline-size';
+
+// ─────────────────────────
+//     CONTROLLER
+// ─────────────────────────
+
+/**
+ * A Lit {@link ReactiveController} that manages the pending (busy) *state* of a
+ * host element: the delayed visual activation, freezing the host's inline size
+ * while busy, and deriving the pending accessible name. Rendering is handled
+ * separately by the `renderPendingSpinner` directive
+ * (`@spectrum-web-components/core/directives/pending-spinner`); wiring (the
+ * `pending` / `pending-label` properties and click suppression) is handled by
+ * `PendingMixin` (`@spectrum-web-components/core/mixins`).
+ *
+ * The accessible name and `aria-disabled` are applied by the host's own
+ * template, keyed off `host.pending` for an immediate (non-delayed) response;
+ * this controller exposes {@link getPendingAccessibleName} for the host to read.
+ *
+ * @example
+ * ```ts
+ * const pendingController = new PendingController(this, {
+ *   resolveAccessibleName: () => this.textContent?.trim() || null,
+ * });
+ * // in render(): class=${classMap({ active: pendingController.pendingActive })}
+ * ```
+ */
+export class PendingController implements ReactiveController {
+  private readonly _host: PendingControllerHost;
+  private readonly _delay: number;
+  private readonly _targetSelector: string | null;
+  private readonly _resolveAccessibleName: () => string | null;
+
+  private _timer: ReturnType<typeof setTimeout> | null = null;
+
+  /** Tracks the last-seen `pending` value so transitions can be detected in `hostUpdate`. */
+  private _wasPending = false;
+
+  /**
+   * Whether the pending visual is currently active. Becomes `true` only after
+   * the configured delay so the host does not flash to its busy appearance for
+   * operations that complete quickly. Read this from the host's `render`.
+   */
+  public get pendingActive(): boolean {
+    return this._pendingActive;
+  }
+  private _pendingActive = false;
+
+  constructor(
+    host: PendingControllerHost,
+    options: PendingControllerOptions = {}
+  ) {
+    this._host = host;
+    this._delay = options.delay ?? DEFAULT_DELAY;
+    this._targetSelector =
+      options.targetSelector === undefined ? 'button' : options.targetSelector;
+    this._resolveAccessibleName = options.resolveAccessibleName ?? (() => null);
+    host.addController(this);
+  }
+
+  // ─────────────────────────
+  //     PUBLIC API
+  // ─────────────────────────
+
+  /**
+   * Derives the pending-state accessible label. Prefers an explicit
+   * `pendingLabel`, then the resolved non-busy name plus a ", busy" suffix,
+   * then a fixed "Busy" fallback.
+   */
+  public getPendingAccessibleName(): string {
+    if (this._host.pendingLabel) {
+      return this._host.pendingLabel;
+    }
+    const resolvedName = this._resolveAccessibleName();
+    return resolvedName ? `${resolvedName}, busy` : 'Busy';
+  }
+
+  /**
+   * Renders the pending spinner for the controller's current state via the
+   * `renderPendingSpinner` directive. Exposed here so a host gets the indicator
+   * straight from the controller, without importing the directive separately.
+   * Returns `nothing` while the host is not pending.
+   */
+  public renderPendingState(): PendingSpinnerResult {
+    return renderPendingSpinner(this._host.pending, this._pendingActive);
+  }
+
+  // ─────────────────────────
+  //     LIFECYCLE
+  // ─────────────────────────
+
+  public hostConnected(): void {
+    // Lit does not schedule an update on reconnect, so `hostUpdate` would not
+    // restart the delay timer for an element that reconnects while still
+    // pending. Re-arm it here. Setting `_wasPending` first prevents a later
+    // `hostUpdate` from starting a second timer.
+    if (this._host.pending && !this._wasPending) {
+      this._wasPending = true;
+      this._activateAfterDelay();
+    }
+  }
+
+  public hostUpdate(): void {
+    if (this._host.pending === this._wasPending) {
+      return;
+    }
+    this._wasPending = this._host.pending;
+    if (this._host.pending) {
+      this._activateAfterDelay();
+    } else {
+      this._deactivate();
+    }
+  }
+
+  public hostDisconnected(): void {
+    this._clearTimer();
+    this._wasPending = false;
+    this._pendingActive = false;
+  }
+
+  // ─────────────────────────
+  //     IMPLEMENTATION
+  // ─────────────────────────
+
+  private _activateAfterDelay(): void {
+    this._timer = setTimeout(() => {
+      this._timer = null;
+      // Guard against `pending` flipping back to false after the timer fired
+      // but before this callback ran.
+      if (!this._host.pending) {
+        return;
+      }
+      this._freezeInlineSize();
+      this._pendingActive = true;
+      this._host.requestUpdate();
+    }, this._delay);
+  }
+
+  private _deactivate(): void {
+    this._clearTimer();
+    this._releaseInlineSize();
+    if (this._pendingActive) {
+      this._pendingActive = false;
+      this._host.requestUpdate();
+    }
+  }
+
+  private _clearTimer(): void {
+    if (this._timer !== null) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
+
+  private get _freezeTarget(): HTMLElement | null {
+    if (!this._targetSelector) {
+      return null;
+    }
+    return this._host.renderRoot.querySelector<HTMLElement>(
+      this._targetSelector
+    );
+  }
+
+  private _freezeInlineSize(): void {
+    const target = this._freezeTarget;
+    if (target) {
+      target.style.setProperty(INLINE_SIZE_PROPERTY, `${target.offsetWidth}px`);
+    }
+  }
+
+  private _releaseInlineSize(): void {
+    this._freezeTarget?.style.removeProperty(INLINE_SIZE_PROPERTY);
+  }
+}
diff --git a/2nd-gen/packages/core/controllers/pending-controller/stories/demo-hosts.ts b/2nd-gen/packages/core/controllers/pending-controller/stories/demo-hosts.ts
new file mode 100644
index 00000000000..1a25014244c
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/pending-controller/stories/demo-hosts.ts
@@ -0,0 +1,196 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { css, html, LitElement, type TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+import { PendingController, type PendingControllerHost } from '../index.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'demo-pending-host': DemoPendingHost;
+  }
+}
+
+/**
+ * Short demo delay so the stories show the delayed activation without
+ * multi-second waits. Production hosts use the controller default (1000 ms).
+ */
+const DEMO_DELAY = 250;
+
+/**
+ * @internal
+ *
+ * Storybook-only host that pairs {@link PendingController} (state) with the
+ * `renderPendingSpinner` directive (render) directly, the way a non-button
+ * component would consume the primitives. It owns `pending` / `pendingLabel`
+ * (required by {@link PendingControllerHost}) plus a `label` used as the visible
+ * text and the resolved accessible name, applies the busy class from
+ * `pendingController.pendingActive`, keeps `aria-disabled` / `aria-label`
+ * synchronous with `pending`, and consumes `--swc-pending-inline-size` to freeze
+ * its width. Spinner styles are inlined here because the shared
+ * `pending-spinner.css` fragment lives in the `swc` package and is not reachable
+ * from `core`.
+ */
+@customElement('demo-pending-host')
+export class DemoPendingHost
+  extends LitElement
+  implements PendingControllerHost
+{
+  static override styles = css`
+    button {
+      display: inline-flex;
+      gap: 8px;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      min-inline-size: 6ch;
+      padding: 6px 16px;
+      font: inherit;
+      color: #fff;
+      background: #2680eb;
+      border: none;
+      border-radius: 16px;
+      cursor: pointer;
+    }
+
+    button.is-pendingActive {
+      inline-size: var(--swc-pending-inline-size);
+      background: #b3b3b3;
+      cursor: default;
+    }
+
+    button.is-pendingActive .label {
+      display: none;
+    }
+
+    @keyframes demo-pending-spinner-rotate {
+      0% {
+        transform: rotate(-90deg);
+      }
+
+      100% {
+        transform: rotate(270deg);
+      }
+    }
+
+    @keyframes demo-pending-spinner-dashoffset {
+      0%,
+      100% {
+        stroke-dashoffset: 75px;
+      }
+
+      30% {
+        stroke-dashoffset: 20px;
+      }
+    }
+
+    .swc-PendingSpinner {
+      display: none;
+      inline-size: 18px;
+      block-size: 18px;
+    }
+
+    .swc-PendingSpinner--active {
+      display: inline-block;
+    }
+
+    .swc-PendingSpinner-track,
+    .swc-PendingSpinner-fill {
+      inline-size: 18px;
+      block-size: 18px;
+      stroke-width: 2px;
+    }
+
+    .swc-PendingSpinner-track {
+      stroke: rgb(255 255 255 / 40%);
+    }
+
+    .swc-PendingSpinner-fill {
+      stroke: #fff;
+      transform: rotate(-90deg);
+      transform-origin: center;
+      animation:
+        demo-pending-spinner-rotate 1s cubic-bezier(0.6, 0.1, 0.3, 0.9) infinite,
+        demo-pending-spinner-dashoffset 1s cubic-bezier(0.25, 0.1, 0.25, 1.3)
+          infinite;
+    }
+  `;
+
+  /** Whether the host is in a pending (busy) state. */
+  @property({ type: Boolean, reflect: true })
+  public pending = false;
+
+  /** Explicit busy label; overrides the derived "<label>, busy" name. */
+  @property({ type: String, attribute: 'pending-label' })
+  public pendingLabel?: string;
+
+  /** Visible button text and source of the resolved accessible name. */
+  @property({ type: String })
+  public label = 'Save';
+
+  /**
+   * When set, clicking the button starts a pending operation (focusing the
+   * button via the click) and auto-clears it after 2s. Used to demonstrate that
+   * focus is retained across the controller-triggered re-render.
+   */
+  @property({ type: Boolean, attribute: 'click-pending' })
+  public clickPending = false;
+
+  private readonly _pendingController = new PendingController(this, {
+    delay: DEMO_DELAY,
+    resolveAccessibleName: () => this.label || null,
+  });
+
+  private _resetTimer: ReturnType<typeof setTimeout> | null = null;
+
+  private readonly _onButtonClick = (): void => {
+    if (this.pending) {
+      return;
+    }
+    this.pending = true;
+    this._resetTimer = setTimeout(() => {
+      this._resetTimer = null;
+      this.pending = false;
+    }, 2000);
+  };
+
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback?.();
+    if (this._resetTimer !== null) {
+      clearTimeout(this._resetTimer);
+      this._resetTimer = null;
+    }
+  }
+
+  protected override render(): TemplateResult {
+    const active = this._pendingController.pendingActive;
+    return html`
+      <button
+        class=${classMap({ 'is-pendingActive': active })}
+        type="button"
+        aria-disabled=${ifDefined(this.pending ? 'true' : undefined)}
+        aria-label=${ifDefined(
+          this.pending
+            ? this._pendingController.getPendingAccessibleName()
+            : undefined
+        )}
+        @click=${this.clickPending ? this._onButtonClick : null}
+      >
+        <span class="label">${this.label}</span>
+        ${this._pendingController.renderPendingState()}
+      </button>
+    `;
+  }
+}
diff --git a/2nd-gen/packages/core/controllers/pending-controller/stories/pending-controller.stories.ts b/2nd-gen/packages/core/controllers/pending-controller/stories/pending-controller.stories.ts
new file mode 100644
index 00000000000..65874023b98
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/pending-controller/stories/pending-controller.stories.ts
@@ -0,0 +1,143 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { html } from 'lit';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+import './demo-hosts.js';
+
+// ────────────────
+//    METADATA
+// ────────────────
+
+const args = {
+  pending: false,
+  pendingLabel: '',
+  label: 'Save',
+};
+
+const argTypes = {
+  pending: {
+    control: 'boolean',
+    description:
+      'Whether the host is busy. The spinner activates after the delay; ARIA updates immediately.',
+    table: { category: 'Host', defaultValue: { summary: 'false' } },
+  },
+  pendingLabel: {
+    control: 'text',
+    description:
+      'Explicit busy label. When empty, the controller derives `"<label>, busy"`.',
+    table: { category: 'Host', defaultValue: { summary: '' } },
+  },
+  label: {
+    control: 'text',
+    description: 'Visible text and source of the resolved accessible name.',
+    table: { category: 'Host', defaultValue: { summary: 'Save' } },
+  },
+};
+
+/**
+ * `PendingController` is a Lit `ReactiveController` that manages a host's pending
+ * (busy) *state*: it activates the busy visual only after a delay so the host
+ * does not flash for quick operations, freezes the host's inline size to avoid
+ * layout shift, and derives the busy accessible name.
+ *
+ * Rendering is decoupled: read `pendingActive` and render the indicator with the
+ * `renderPendingSpinner` directive from
+ * `@spectrum-web-components/core/directives/pending-spinner`. For button-like
+ * elements, `PendingMixin` (`@spectrum-web-components/core/mixins`) wires the
+ * controller, properties, and click suppression together.
+ */
+const meta: Meta = {
+  title: 'Controllers/Pending controller',
+  component: 'demo-pending-host',
+  args,
+  argTypes,
+  render: (args) => html`
+    <demo-pending-host
+      ?pending=${args.pending}
+      pending-label=${args.pendingLabel}
+      label=${args.label}
+    ></demo-pending-host>
+  `,
+  parameters: {
+    docs: {
+      subtitle:
+        'Delayed busy state with inline-size freeze and derived accessible name.',
+    },
+    layout: 'centered',
+  },
+  tags: ['migrated', 'controller'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+// ────────────────────
+//    PLAYGROUND STORY
+// ────────────────────
+
+export const Playground: Story = {
+  tags: ['dev'],
+};
+
+// ──────────────────────────
+//    OVERVIEW STORY
+// ──────────────────────────
+
+export const Overview: Story = {
+  args: { pending: true },
+  tags: ['overview'],
+};
+
+// ──────────────────────────────
+//    BEHAVIORS STORIES
+// ──────────────────────────────
+
+export const DelayedActivation: Story = {
+  render: () => html`
+    <demo-pending-host pending label="Uploading"></demo-pending-host>
+  `,
+  tags: ['behaviors'],
+};
+DelayedActivation.storyName = 'Delayed activation';
+
+export const DerivedAccessibleName: Story = {
+  render: () => html`
+    <demo-pending-host pending label="Save"></demo-pending-host>
+    <demo-pending-host
+      pending
+      label="Save"
+      pending-label="Processing your request"
+    ></demo-pending-host>
+  `,
+  tags: ['behaviors'],
+};
+DerivedAccessibleName.storyName = 'Derived accessible name';
+
+export const FocusRetained: Story = {
+  render: () => html`
+    <demo-pending-host click-pending label="Save"></demo-pending-host>
+  `,
+  tags: ['behaviors'],
+};
+FocusRetained.storyName = 'Focus retained on re-render';
+
+// ────────────────────────────────
+//    ACCESSIBILITY STORIES
+// ────────────────────────────────
+
+export const Accessibility: Story = {
+  args: { pending: true, label: 'Save' },
+  tags: ['a11y'],
+};
diff --git a/2nd-gen/packages/core/controllers/pending-controller/stories/pending-controller.test.ts b/2nd-gen/packages/core/controllers/pending-controller/stories/pending-controller.test.ts
new file mode 100644
index 00000000000..42cc00cee13
--- /dev/null
+++ b/2nd-gen/packages/core/controllers/pending-controller/stories/pending-controller.test.ts
@@ -0,0 +1,189 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * These Storybook play tests verify observable `PendingController` behavior using
+ * real browser timers and programmatic property changes.
+ *
+ * ### Timing
+ *
+ * The `demo-pending-host` element uses a 250 ms controller delay (shortened from
+ * the 1000 ms production default) so tests are responsive without multi-second
+ * waits. All `wait()` calls include a buffer beyond the configured delay.
+ *
+ * ### Focus-retention contract
+ *
+ * When `pendingActive` transitions from `false` to `true`, the controller calls
+ * `host.requestUpdate()`, which triggers a Lit re-render. Because lit-html patches
+ * the DOM in place rather than replacing elements, the focused `<button>` is not
+ * destroyed. The test verifies that `shadowRoot.activeElement` still points to the
+ * same internal button after the re-render.
+ */
+
+import { expect } from '@storybook/test';
+import type { Meta, StoryObj as Story } from '@storybook/web-components';
+
+import './demo-hosts.js';
+
+import type { DemoPendingHost } from './demo-hosts.js';
+import pendingMeta, { FocusRetained } from './pending-controller.stories.js';
+
+// ─────────────────────────
+//     HELPERS
+// ─────────────────────────
+
+/** Waits `ms` milliseconds for async timers to settle. */
+function wait(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+// ─────────────────────────
+//     META
+// ─────────────────────────
+
+export default {
+  ...pendingMeta,
+  title: 'Controllers/Pending controller/Tests',
+  parameters: {
+    ...pendingMeta.parameters,
+    docs: { disable: true, page: null },
+  },
+  tags: ['!autodocs', 'dev'],
+} as Meta;
+
+// ──────────────────────────────────────────────────────────────────────────
+//     Focus retained through controller-triggered re-render
+// ──────────────────────────────────────────────────────────────────────────
+
+/**
+ * Verifies that when `pendingActive` becomes `true` (after the controller's 250 ms
+ * delay following a mouse-focus-style interaction), Lit's in-place DOM patch does
+ * not move focus away from the internal `<button>`.
+ *
+ * Sequence:
+ * 1. Focus the internal button (simulating mouse-click focus).
+ * 2. Verify focus is on the button before any pending state.
+ * 3. Set `pending = true` — immediately applies `aria-disabled` and `aria-label`.
+ * 4. Wait for the controller's 250 ms delay (plus a buffer).
+ * 5. Verify `pendingActive` visual is active (spinner present, CSS class applied).
+ * 6. Verify focus is still on the same button element after the re-render.
+ */
+export const FocusRetainedTest: Story = {
+  ...FocusRetained,
+  play: async ({ canvasElement, step }) => {
+    const host =
+      canvasElement.querySelector<DemoPendingHost>('demo-pending-host');
+    if (!host) {
+      throw new Error('demo-pending-host not found');
+    }
+
+    const shadowRoot = host.shadowRoot as ShadowRoot;
+    const internalButton =
+      shadowRoot.querySelector<HTMLButtonElement>('button');
+    if (!internalButton) {
+      throw new Error('Internal <button> not found');
+    }
+
+    await step('button is not pending in initial state', async () => {
+      expect(host.pending, 'pending defaults to false').toBe(false);
+      expect(
+        internalButton.getAttribute('aria-disabled'),
+        'aria-disabled is absent in default state'
+      ).toBeNull();
+    });
+
+    await step(
+      'mouse-focus-style interaction: button receives focus',
+      async () => {
+        // Dispatch pointerdown before focus to mirror the sequence a real
+        // mouse click produces (pointer-click focus, not keyboard focus).
+        internalButton.dispatchEvent(
+          new PointerEvent('pointerdown', { bubbles: true, composed: true })
+        );
+        internalButton.focus();
+        expect(
+          shadowRoot.activeElement,
+          'internal button is the active element in the shadow root'
+        ).toBe(internalButton);
+      }
+    );
+
+    await step(
+      'setting pending=true immediately applies aria attributes; focus is preserved',
+      async () => {
+        host.pending = true;
+        await host.updateComplete;
+
+        expect(
+          internalButton.getAttribute('aria-disabled'),
+          'aria-disabled is set to true immediately when pending'
+        ).toBe('true');
+        expect(
+          internalButton.getAttribute('aria-label'),
+          'aria-label is set to the derived busy name immediately'
+        ).toBe('Save, busy');
+        expect(
+          shadowRoot.activeElement,
+          'focus is still on the internal button after the immediate aria update'
+        ).toBe(internalButton);
+      }
+    );
+
+    await step(
+      'after the controller delay, pendingActive re-renders the button; focus is preserved',
+      async () => {
+        // The demo host uses delay=250 ms. Wait 350 ms to include a buffer.
+        await wait(350);
+        await host.updateComplete;
+
+        const spinner = shadowRoot.querySelector('.swc-PendingSpinner');
+        expect(
+          spinner,
+          'spinner is rendered once pendingActive is true'
+        ).toBeTruthy();
+        expect(
+          internalButton.classList.contains('is-pendingActive'),
+          'pendingActive CSS class is applied after the controller delay'
+        ).toBe(true);
+        expect(
+          shadowRoot.activeElement,
+          'focus is still on the same button element after the controller-triggered re-render'
+        ).toBe(internalButton);
+      }
+    );
+
+    await step(
+      'clearing pending removes the busy visual; focus is preserved',
+      async () => {
+        host.pending = false;
+        await host.updateComplete;
+        // Allow the deactivation re-render to settle.
+        await wait(50);
+        await host.updateComplete;
+
+        expect(
+          shadowRoot.querySelector('.swc-PendingSpinner'),
+          'spinner is removed after pending clears'
+        ).toBeNull();
+        expect(
+          internalButton.classList.contains('is-pendingActive'),
+          'pendingActive class is removed after pending clears'
+        ).toBe(false);
+        expect(
+          shadowRoot.activeElement,
+          'focus is still on the button after pending clears'
+        ).toBe(internalButton);
+      }
+    );
+  },
+};
+FocusRetainedTest.storyName = 'Focus retained on re-render (test)';
diff --git a/2nd-gen/packages/core/directives/index.ts b/2nd-gen/packages/core/directives/index.ts
new file mode 100644
index 00000000000..d9dcb247678
--- /dev/null
+++ b/2nd-gen/packages/core/directives/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/**
+ * Public exports for render-only Lit template directives shared across 2nd-gen packages.
+ */
+
+export {
+  renderPendingSpinner,
+  type PendingSpinnerResult,
+} from './pending-spinner/index.js';
diff --git a/2nd-gen/packages/core/directives/pending-spinner/index.ts b/2nd-gen/packages/core/directives/pending-spinner/index.ts
new file mode 100644
index 00000000000..6ac9ee1193e
--- /dev/null
+++ b/2nd-gen/packages/core/directives/pending-spinner/index.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export {
+  renderPendingSpinner,
+  type PendingSpinnerResult,
+} from './src/pending-spinner.js';
diff --git a/2nd-gen/packages/swc/components/button/pending-spinner.ts b/2nd-gen/packages/core/directives/pending-spinner/src/pending-spinner.ts
similarity index 56%
rename from 2nd-gen/packages/swc/components/button/pending-spinner.ts
rename to 2nd-gen/packages/core/directives/pending-spinner/src/pending-spinner.ts
index 120634fa40d..d28c287a893 100644
--- a/2nd-gen/packages/swc/components/button/pending-spinner.ts
+++ b/2nd-gen/packages/core/directives/pending-spinner/src/pending-spinner.ts
@@ -10,19 +10,34 @@
  * governing permissions and limitations under the License.
  */
 
-import { html, nothing, TemplateResult } from 'lit';
+import { html, nothing, type TemplateResult } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 
+/** Return type of {@link renderPendingSpinner}: the spinner template, or `nothing`. */
+export type PendingSpinnerResult = TemplateResult | typeof nothing;
+
 /**
- * Shared pending-spinner SVG template used by both swc-button and
- * swc-action-button. Returns `nothing` when `pending` is false so callers
- * can interpolate unconditionally: `${renderPendingSpinner(this.pending,
- * this.pendingActive)}`.
+ * Renders the shared pending-spinner SVG used by pending-capable components.
+ * Returns `nothing` when `pending` is false so callers can interpolate
+ * unconditionally: `${renderPendingSpinner(this.pending, this.pendingActive)}`.
+ *
+ * Most consumers do not call this directly: `PendingController` (and
+ * `PendingMixin`) expose `renderPendingState()`, which calls this with the
+ * controller's own state. Use this directive directly only for a stateless
+ * spinner without a controller.
+ *
+ * This is render-only and carries no design-token dependency. Pair it with the
+ * shared `pending-spinner.css` style fragment, which themes the
+ * `swc-PendingSpinner*` classes this emits.
+ *
+ * @param pending - Whether the host is in the pending (busy) state.
+ * @param pendingActive - Whether the delayed busy visual is active; toggles the
+ * `swc-PendingSpinner--active` class that runs the spin animation.
  */
 export function renderPendingSpinner(
   pending: boolean,
   pendingActive: boolean
-): TemplateResult | typeof nothing {
+): PendingSpinnerResult {
   if (!pending) {
     return nothing;
   }
diff --git a/2nd-gen/packages/core/element/version.ts b/2nd-gen/packages/core/element/version.ts
index 12d8f0acc9c..22d1506ebce 100644
--- a/2nd-gen/packages/core/element/version.ts
+++ b/2nd-gen/packages/core/element/version.ts
@@ -17,9 +17,9 @@
 /**
  * The version of the 2nd-gen Spectrum Web Components library.
  */
-export const version = '0.1.0';
+export const version = '0.3.0';
 
 /**
  * The version of the core base package.
  */
-export const coreVersion = '0.1.0';
+export const coreVersion = '0.3.0';
diff --git a/2nd-gen/packages/core/mixins/index.ts b/2nd-gen/packages/core/mixins/index.ts
index cf1814d706d..c642b964aa5 100644
--- a/2nd-gen/packages/core/mixins/index.ts
+++ b/2nd-gen/packages/core/mixins/index.ts
@@ -29,6 +29,7 @@ export {
   ObserveSlotText,
   type SlotTextObservingInterface,
 } from './observe-slot-text.js';
+export { PendingMixin, type PendingInterface } from './pending-mixin.js';
 export {
   DEFAULT_ELEMENT_SIZES,
   ELEMENT_SIZES,
diff --git a/2nd-gen/packages/core/mixins/pending-mixin.ts b/2nd-gen/packages/core/mixins/pending-mixin.ts
new file mode 100644
index 00000000000..1075876bb33
--- /dev/null
+++ b/2nd-gen/packages/core/mixins/pending-mixin.ts
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import type { PropertyValues, ReactiveElement } from 'lit';
+import { property } from 'lit/decorators.js';
+
+import { PendingController } from '../controllers/pending-controller/index.js';
+import type { PendingSpinnerResult } from '../directives/pending-spinner/index.js';
+
+type Constructor<T = Record<string, unknown>> = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  new (...args: any[]): T;
+  prototype: T;
+};
+
+export interface PendingInterface {
+  pending: boolean;
+  pendingLabel?: string;
+  readonly pendingActive: boolean;
+  getPendingAccessibleName(): string;
+  renderPendingState(): PendingSpinnerResult;
+}
+
+/**
+ * A mixin that adds the pending (busy) state to a host: the reactive `pending`
+ * and `pending-label` properties, a {@link PendingController} for the delayed
+ * visual / inline-size freeze / accessible-name derivation, and capture-phase
+ * click suppression so activation is blocked while pending.
+ *
+ * The host stays focusable while pending; the mixin never sets the native
+ * `disabled` attribute. The host's template is responsible for applying
+ * `aria-disabled` and the pending `aria-label` (read from
+ * {@link PendingInterface.getPendingAccessibleName}), and for rendering the
+ * spinner with the `renderPendingSpinner` directive.
+ *
+ * Hosts override {@link resolvePendingAccessibleName} to supply their non-busy
+ * accessible name; the default uses trimmed `textContent`.
+ *
+ * @example
+ * ```typescript
+ * class MyButton extends PendingMixin(SpectrumElement) {
+ *   render() {
+ *     return html`<button
+ *       aria-disabled=${ifDefined(this.pending ? 'true' : undefined)}
+ *       aria-label=${ifDefined(this.pending ? this.getPendingAccessibleName() : undefined)}
+ *     >
+ *       <slot></slot>
+ *       ${renderPendingSpinner(this.pending, this.pendingActive)}
+ *     </button>`;
+ *   }
+ * }
+ * ```
+ */
+export function PendingMixin<T extends Constructor<ReactiveElement>>(
+  constructor: T
+): T & Constructor<PendingInterface> {
+  class PendingElement extends constructor implements PendingInterface {
+    /**
+     * Whether the element is in a pending (busy) state. The element remains
+     * focusable but activation is suppressed.
+     */
+    @property({ type: Boolean, reflect: true })
+    public pending = false;
+
+    /**
+     * Custom accessible label used during the pending state. When omitted, the
+     * pending label is derived from the resolved non-busy accessible name plus
+     * a busy suffix (e.g. "Save, busy").
+     */
+    @property({ type: String, attribute: 'pending-label' })
+    public pendingLabel?: string;
+
+    private _pendingController = new PendingController(this, {
+      resolveAccessibleName: () => this.resolvePendingAccessibleName(),
+    });
+
+    /**
+     * Whether the delayed busy visual is active. Read this in `render()` to
+     * apply the busy styling.
+     */
+    public get pendingActive(): boolean {
+      return this._pendingController.pendingActive;
+    }
+
+    /** Derives the pending-state accessible label. */
+    public getPendingAccessibleName(): string {
+      return this._pendingController.getPendingAccessibleName();
+    }
+
+    /**
+     * Renders the pending spinner for the current state, via the controller.
+     * Lets hosts render the indicator with `${this.renderPendingState()}` and no
+     * separate directive import.
+     */
+    public renderPendingState(): PendingSpinnerResult {
+      return this._pendingController.renderPendingState();
+    }
+
+    /**
+     * Returns the host's non-busy accessible name, used to derive the default
+     * busy label. Hosts override this to supply a richer name (e.g. an
+     * `accessible-label` fallback); the default uses trimmed `textContent`.
+     */
+    protected resolvePendingAccessibleName(): string | null {
+      return this.textContent?.trim() || null;
+    }
+
+    /**
+     * Suppresses click activation while pending. Capture phase so slotted
+     * light-DOM clicks are suppressed before host listeners run.
+     */
+    private readonly _suppressPendingActivation = (event: Event): void => {
+      if (this.pending) {
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    };
+
+    public override connectedCallback(): void {
+      super.connectedCallback();
+      this.addEventListener('click', this._suppressPendingActivation, true);
+    }
+
+    public override disconnectedCallback(): void {
+      this.removeEventListener('click', this._suppressPendingActivation, true);
+      super.disconnectedCallback();
+    }
+
+    protected override update(changedProperties: PropertyValues): void {
+      super.update(changedProperties);
+      // Guard the `disabled` read with an `in` check rather than a cast: not
+      // every host that applies this mixin necessarily has a `disabled`
+      // property.
+      const hasDisabled = 'disabled' in this && this.disabled === true;
+      if (window.__swc?.DEBUG && this.pending && hasDisabled) {
+        window.__swc.warn(
+          this,
+          `<${this.localName}> should not set both "pending" and "disabled" simultaneously. Use "pending" to keep the element focusable while unavailable, or "disabled" to fully remove it from the tab order.`,
+          'https://opensource.adobe.com/spectrum-web-components/',
+          { issues: ['pending + disabled'] }
+        );
+      }
+    }
+  }
+  return PendingElement as unknown as T & Constructor<PendingInterface>;
+}
diff --git a/2nd-gen/packages/core/package.json b/2nd-gen/packages/core/package.json
index 3be83af1073..ad83373ec2e 100644
--- a/2nd-gen/packages/core/package.json
+++ b/2nd-gen/packages/core/package.json
@@ -123,6 +123,14 @@
       "types": "./dist/controllers/language-resolution.d.ts",
       "import": "./dist/controllers/language-resolution.js"
     },
+    "./controllers/pending-controller": {
+      "types": "./dist/controllers/pending-controller/index.d.ts",
+      "import": "./dist/controllers/pending-controller/index.js"
+    },
+    "./controllers/pending-controller/index.js": {
+      "types": "./dist/controllers/pending-controller/index.d.ts",
+      "import": "./dist/controllers/pending-controller/index.js"
+    },
     "./controllers/placement-controller": {
       "types": "./dist/controllers/placement-controller/index.d.ts",
       "import": "./dist/controllers/placement-controller/index.js"
@@ -131,6 +139,22 @@
       "types": "./dist/controllers/placement-controller/index.d.ts",
       "import": "./dist/controllers/placement-controller/index.js"
     },
+    "./directives": {
+      "types": "./dist/directives/index.d.ts",
+      "import": "./dist/directives/index.js"
+    },
+    "./directives/index.js": {
+      "types": "./dist/directives/index.d.ts",
+      "import": "./dist/directives/index.js"
+    },
+    "./directives/pending-spinner": {
+      "types": "./dist/directives/pending-spinner/index.d.ts",
+      "import": "./dist/directives/pending-spinner/index.js"
+    },
+    "./directives/pending-spinner/index.js": {
+      "types": "./dist/directives/pending-spinner/index.d.ts",
+      "import": "./dist/directives/pending-spinner/index.js"
+    },
     "./element": {
       "types": "./dist/element/index.d.ts",
       "import": "./dist/element/index.js"
@@ -282,12 +306,30 @@
       "controllers/language-resolution.js": [
         "dist/controllers/language-resolution.d.ts"
       ],
+      "controllers/pending-controller": [
+        "dist/controllers/pending-controller/index.d.ts"
+      ],
+      "controllers/pending-controller/index.js": [
+        "dist/controllers/pending-controller/index.d.ts"
+      ],
       "controllers/placement-controller": [
         "dist/controllers/placement-controller/index.d.ts"
       ],
       "controllers/placement-controller/index.js": [
         "dist/controllers/placement-controller/index.d.ts"
       ],
+      "directives": [
+        "dist/directives/index.d.ts"
+      ],
+      "directives/index.js": [
+        "dist/directives/index.d.ts"
+      ],
+      "directives/pending-spinner": [
+        "dist/directives/pending-spinner/index.d.ts"
+      ],
+      "directives/pending-spinner/index.js": [
+        "dist/directives/pending-spinner/index.d.ts"
+      ],
       "element": [
         "dist/element/index.d.ts"
       ],
diff --git a/2nd-gen/packages/core/vite.config.js b/2nd-gen/packages/core/vite.config.js
index 2097cfdfafb..5c82084f54e 100644
--- a/2nd-gen/packages/core/vite.config.js
+++ b/2nd-gen/packages/core/vite.config.js
@@ -80,6 +80,12 @@ function getEntries() {
     scanTsFiles(resolve(__dirname, 'controllers'), 'controllers')
   );
 
+  // Find all directives/*.ts files
+  Object.assign(
+    entries,
+    scanTsFiles(resolve(__dirname, 'directives'), 'directives')
+  );
+
   // Find all utils/*.ts files
   Object.assign(entries, scanTsFiles(resolve(__dirname, 'utils'), 'utils'));
 
diff --git a/2nd-gen/packages/swc/.storybook/preview.ts b/2nd-gen/packages/swc/.storybook/preview.ts
index 7ef0bb0906b..ed5738d6d25 100644
--- a/2nd-gen/packages/swc/.storybook/preview.ts
+++ b/2nd-gen/packages/swc/.storybook/preview.ts
@@ -371,6 +371,7 @@ const preview = {
                 [
                   'Accessibility migration analysis',
                   'Migration plan',
+                  'Pending reusable primitives plan',
                   'Rendering and styling migration analysis',
                 ],
                 'Button group',
diff --git a/2nd-gen/packages/swc/components/action-button/ActionButton.ts b/2nd-gen/packages/swc/components/action-button/ActionButton.ts
index 4d0935b7237..a0e76b827c1 100644
--- a/2nd-gen/packages/swc/components/action-button/ActionButton.ts
+++ b/2nd-gen/packages/swc/components/action-button/ActionButton.ts
@@ -21,8 +21,7 @@ import {
   type ActionButtonStaticColor,
 } from '@spectrum-web-components/core/components/action-button';
 import { ButtonBase } from '@spectrum-web-components/core/components/button';
-
-import { renderPendingSpinner } from '../button/pending-spinner.js';
+import { PendingMixin } from '@spectrum-web-components/core/mixins';
 
 import pendingSpinnerStyles from '../../stylesheets/_lit-styles/pending-spinner.css';
 import styles from './action-button.css';
@@ -72,7 +71,7 @@ import styles from './action-button.css';
  *   Edit
  * </swc-action-button>
  */
-export class ActionButton extends ButtonBase {
+export class ActionButton extends PendingMixin(ButtonBase) {
   // ────────────────────
   //     API OVERRIDES
   // ────────────────────
@@ -161,6 +160,11 @@ export class ActionButton extends ButtonBase {
     return [pendingSpinnerStyles, styles];
   }
 
+  /** The busy accessible name derives from the button's resolved name. */
+  protected override resolvePendingAccessibleName(): string | null {
+    return this.getResolvedAccessibleName();
+  }
+
   protected override render(): TemplateResult {
     return html`
       <button
@@ -186,7 +190,7 @@ export class ActionButton extends ButtonBase {
         <span class="swc-ActionButton-label">
           <slot></slot>
         </span>
-        ${renderPendingSpinner(this.pending, this.pendingActive)}
+        ${this.renderPendingState()}
       </button>
     `;
   }
diff --git a/2nd-gen/packages/swc/components/action-button/action-button.css b/2nd-gen/packages/swc/components/action-button/action-button.css
index 1d069de9bc0..ce13fdf124b 100644
--- a/2nd-gen/packages/swc/components/action-button/action-button.css
+++ b/2nd-gen/packages/swc/components/action-button/action-button.css
@@ -225,7 +225,7 @@ slot[name="icon"]::slotted(*) {
 
 /* ── Pending ──────────────────────────────────────── */
 
-/* @global-exclude: pending state requires JS runtime (ButtonBase.pendingActive) */
+/* @global-exclude: pending state requires JS runtime (PendingMixin.pendingActive) */
 
 /* Cursor changes immediately on [pending]. Disabled colors, label/icon fade,
    and spinner appearance are deferred to .swc-ActionButton--pendingActive, which is
@@ -236,7 +236,8 @@ slot[name="icon"]::slotted(*) {
 
   align-items: center;
   justify-content: center;
-  inline-size: var(--_swc-button-pending-inline-size);
+  inline-size: var(--swc-pending-inline-size);
+  transition: none;
 
   /* Disabled colors reference the already-resolved disabled vars so static-color
      variants automatically get their correct unavailable appearance. */
@@ -277,7 +278,7 @@ slot[name="icon"]::slotted(*) {
   }
 }
 
-/* @global-exclude: pending state requires JS runtime (ButtonBase.pendingActive) */
+/* @global-exclude: pending state requires JS runtime (PendingMixin.pendingActive) */
 @media (forced-colors: active) {
   .swc-ActionButton--pendingActive {
     --swc-action-button-background-color-default: ButtonFace;
diff --git a/2nd-gen/packages/swc/components/button/Button.ts b/2nd-gen/packages/swc/components/button/Button.ts
index ea864534011..484f3c49328 100644
--- a/2nd-gen/packages/swc/components/button/Button.ts
+++ b/2nd-gen/packages/swc/components/button/Button.ts
@@ -23,8 +23,7 @@ import {
   type ButtonStaticColor,
   type ButtonVariant,
 } from '@spectrum-web-components/core/components/button';
-
-import { renderPendingSpinner } from './pending-spinner.js';
+import { PendingMixin } from '@spectrum-web-components/core/mixins';
 
 import pendingSpinnerStyles from '../../stylesheets/_lit-styles/pending-spinner.css';
 import styles from './button.css';
@@ -73,7 +72,7 @@ import baseStyles from './button-base.css';
  * @example
  * <swc-button variant="secondary" fill-style="outline">Cancel</swc-button>
  */
-export class Button extends ButtonBase {
+export class Button extends PendingMixin(ButtonBase) {
   // ───────────────────
   //     API ADDITIONS
   // ───────────────────
@@ -124,6 +123,11 @@ export class Button extends ButtonBase {
     return [baseStyles, pendingSpinnerStyles, styles];
   }
 
+  /** The busy accessible name derives from the button's resolved name. */
+  protected override resolvePendingAccessibleName(): string | null {
+    return this.getResolvedAccessibleName();
+  }
+
   // @todo SWC-2034: handle form-associated types reset / submit
   protected override render(): TemplateResult {
     return html`
@@ -148,7 +152,7 @@ export class Button extends ButtonBase {
         <span class="swc-Button-label">
           <slot></slot>
         </span>
-        ${renderPendingSpinner(this.pending, this.pendingActive)}
+        ${this.renderPendingState()}
       </button>
     `;
   }
diff --git a/2nd-gen/packages/swc/components/button/button.css b/2nd-gen/packages/swc/components/button/button.css
index dca3cd3640e..62b45e15873 100644
--- a/2nd-gen/packages/swc/components/button/button.css
+++ b/2nd-gen/packages/swc/components/button/button.css
@@ -315,7 +315,7 @@ slot[name="icon"]::slotted(*) {
 
 /* ── Pending ──────────────────────────────────────── */
 
-/* @global-exclude: pending state requires JS runtime (ButtonBase.pendingActive) */
+/* @global-exclude: pending state requires JS runtime (PendingMixin.pendingActive) */
 
 /* Cursor changes immediately on [pending]. Disabled colors, label/icon fade,
    and spinner appearance are deferred to .swc-Button--pendingActive, which is
@@ -329,7 +329,8 @@ slot[name="icon"]::slotted(*) {
   --swc-button-down-state-transform: none;
 
   justify-content: center;
-  inline-size: var(--_swc-button-pending-inline-size); /* Preserve measured inline size to avoid impacting layout, set via JS when state changes */
+  inline-size: var(--swc-pending-inline-size); /* Preserve measured inline size to avoid impacting layout, set via the PendingController when state changes */
+  transition: none;
 
   /* Disabled colors reference the already-resolved disabled vars so outline and
    static-color variants automatically get their correct unavailable appearance. */
@@ -380,7 +381,7 @@ slot[name="icon"]::slotted(*) {
   }
 }
 
-/* @global-exclude: pending state requires JS runtime (ButtonBase.pendingActive) */
+/* @global-exclude: pending state requires JS runtime (PendingMixin.pendingActive) */
 @media (forced-colors: active) {
   /* Pending-active button maps all interactive color states to system disabled
      colors so it visually matches native disabled controls in high-contrast
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md
index 206fd2304ae..68dcc4cd877 100644
--- a/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/README.md
@@ -46,6 +46,7 @@
 - Button
     - [Button accessibility migration analysis](button/accessibility-migration-analysis.md)
     - [Button Migration Plan](button/migration-plan.md)
+    - [Pending reusable primitives plan](button/pending-reusable-primitives-plan.md)
     - [Button migration roadmap](button/rendering-and-styling-migration-analysis.md)
 - Button Group
     - [Button group accessibility migration analysis](button-group/accessibility-migration-analysis.md)
diff --git a/CONTRIBUTOR-DOCS/03_project-planning/03_components/button/pending-reusable-primitives-plan.md b/CONTRIBUTOR-DOCS/03_project-planning/03_components/button/pending-reusable-primitives-plan.md
new file mode 100644
index 00000000000..ddac9ffa8a8
--- /dev/null
+++ b/CONTRIBUTOR-DOCS/03_project-planning/03_components/button/pending-reusable-primitives-plan.md
@@ -0,0 +1,108 @@
+<!-- Generated breadcrumbs - DO NOT EDIT -->
+
+[CONTRIBUTOR-DOCS](../../../README.md) / [Project planning](../../README.md) / [Components](../README.md) / Button / Pending reusable primitives plan
+
+<!-- Document title (editable) -->
+
+# Pending reusable primitives plan
+
+<!-- Generated TOC - DO NOT EDIT -->
+
+<details open>
+<summary><strong>In this doc</strong></summary>
+
+- [Goal (unchanged)](#goal-unchanged)
+- [Current state on `main` (starting point)](#current-state-on-main-starting-point)
+    - [Gap vs. goal](#gap-vs-goal)
+- [Proposed primitives](#proposed-primitives)
+- [Behavior parity (must hold)](#behavior-parity-must-hold)
+- [Scope](#scope)
+- [Decisions (confirmed)](#decisions-confirmed)
+- [Risks](#risks)
+- [Checklist](#checklist)
+- [References](#references)
+
+</details>
+
+<!-- Document content (editable) -->
+
+Plan to extract the pending (busy) state into reusable, decoupled 2nd-gen primitives so any pending-capable component can adopt it, not just `ButtonBase` subclasses. Tracked as [SWC-2296](https://jira.corp.adobe.com/browse/SWC-2296).
+
+Status: **planned — decisions confirmed, ready to implement.** This plan starts from the current `main` and supersedes the earlier exploration on `caseyisonit/pending-controller` / [PR #6393](https://github.com/adobe/spectrum-web-components/pull/6393), which diverged from a competing pending refactor that has since landed on `main`. Implementation branch: `caseyisonit/refactor-pending-primitives-swc-2296`.
+
+## Goal (unchanged)
+
+Provide reusable, decoupled pending primitives in 2nd-gen so any component with a busy state gets the agreed behavior without re-implementing it:
+
+- 1-second delayed busy visual (no flash for quick operations).
+- Inline-size freeze so the host does not resize when its label/icon hide.
+- Derived busy accessible name (`"<name>, busy"`) with `pending-label` override.
+- `aria-disabled` while focusable (not native `disabled`); activation suppressed.
+- An animated, themeable spinner.
+
+## Current state on `main` (starting point)
+
+`main` already shares pending three ways, but two of them are coupled to button:
+
+| Concern | Where it lives on `main` | Reusable by non-button components? |
+| --- | --- | --- |
+| State (delay timer, `pendingActive`, inline-size freeze, `getPendingAccessibleName`, `aria-disabled`, click suppression) | `core/components/button/Button.base.ts` (`ButtonBase`) | ❌ only via `extends ButtonBase` |
+| Spinner render | `swc/components/button/pending-spinner.ts` → `renderPendingSpinner(pending, pendingActive)` | ⚠️ only by importing from the button package |
+| Spinner styles | `swc/stylesheets/_lit-styles/pending-spinner.css` (`pendingSpinnerStyles`) | ✅ already in a neutral shared dir |
+
+Consumers today: `swc-button` and `swc-action-button` both `extends ButtonBase` and call `renderPendingSpinner(...)` + import `pendingSpinnerStyles`.
+
+### Gap vs. goal
+
+1. The **state logic is inheritance-locked** to `ButtonBase`. A pending-capable component that is not button-like (or that already has a different base) cannot reuse it.
+2. The **render helper lives in the button component package**, so reusing it from elsewhere couples that component to button.
+
+## Proposed primitives
+
+1. **`PendingController`** (`core/controllers/pending-controller`) — owns the reusable *state*: the delayed `pendingActive` flag, the timer, the inline-size freeze (writes `--swc-pending-inline-size` on a configurable target), and `getPendingAccessibleName()` (via a `resolveAccessibleName` option). It also **owns and exposes the spinner render** via `renderPendingState()` (delegating to the directive), so a host renders the indicator straight from the controller — one less import on the component.
+2. **`renderPendingSpinner` directive** (`core/directives/pending-spinner`) — the render out of `swc/components/button/` as a render-only core directive (no token dependency). It is the implementation behind `PendingController.renderPendingState()`; consume it directly only for a stateless spinner without a controller. The token-based spinner CSS stays as the `swc` `_lit-styles/pending-spinner.css` fragment.
+3. **`PendingMixin`** (`core/mixins`) — a thin mixin that declares the `pending` / `pending-label` reactive properties, instantiates the controller, and wires click suppression, so a host opts in with one mixin.
+4. **`ButtonBase` stays pending-agnostic** — it gains no pending logic. `swc-button` and `swc-action-button` each apply `PendingMixin` to opt in. Other `ButtonBase` subclasses that do not need pending (e.g. `CloseButton`) are unaffected.
+
+## Behavior parity (must hold)
+
+- ARIA (`aria-disabled`, busy `aria-label`) stays synchronous on `pending`; the visual treatment keys off the delayed `pendingActive`.
+- Focusable while busy; activation suppressed; no native `disabled`.
+- Static-color, reduced-motion, and forced-colors spinner treatments preserved.
+- No public API change to `swc-button` / `swc-action-button` (`pending` / `pending-label` keep identical reflected attributes).
+
+## Scope
+
+In scope: the three primitives above; refactor `ButtonBase`; verify `swc-button` + `swc-action-button`; controller stories + per-unit MDX; tests; regenerate `global-*.css`.
+
+Out of scope (follow-ups): migrating other pending-capable components (Combobox, Picker); localizing the `", busy"` suffix.
+
+## Decisions (confirmed)
+
+1. **State primitive shape:** `PendingController` (state) **plus** a thin `PendingMixin` (one-line opt-in). Non-button hosts may use the controller directly.
+2. **Spinner render home:** a **`core` directive** (`core/directives/pending-spinner`), render-only and token-free; the token-based CSS stays as the `swc` `_lit-styles/pending-spinner.css` fragment.
+3. **`ButtonBase` role:** **stays fully pending-agnostic.** `swc-button` and `swc-action-button` each apply `PendingMixin`; subclasses that do not need pending (e.g. `CloseButton`) are unaffected. (This is the key change from `main`, where pending state lives in `ButtonBase` and is inherited by all subclasses.)
+4. **Delivery:** **one PR** — controller + directive + mixin + both consumers together, so `main` is never left half-migrated.
+
+## Risks
+
+- Two components (`swc-button`, `swc-action-button`) and their generated `global-*.css` must stay visually identical — VRT/tests gate this.
+- Relocating `renderPendingSpinner` touches both components' imports; the shared CSS fragment path may also move.
+- `core` has no `token()`/`lit-css` build step, so any styles that move to `core` must be token-free; the token-based spinner CSS therefore stays in `swc` `_lit-styles`.
+
+## Checklist
+
+- [ ] `PendingController` in `core/controllers/pending-controller` (+ barrel + `core/package.json` exports + `typesVersions`)
+- [ ] `pendingSpinner` directive in `core/directives/pending-spinner` (+ barrel + exports); `swc-button` + `swc-action-button` import it instead of `swc/components/button/pending-spinner.ts`; remove the old button-package helper
+- [ ] `PendingMixin` in `core/mixins` (declares `pending`/`pending-label`, instantiates the controller, wires click suppression)
+- [ ] `ButtonBase` left pending-agnostic (no pending code); `swc-button` + `swc-action-button` apply `PendingMixin`; confirm `CloseButton` and other non-pending subclasses are unaffected
+- [ ] Controller stories + per-unit MDX; tests for controller, directive, and the two consumers
+- [ ] core + swc build; `global-button.css` / `global-action-button.css` regenerated; lint + `lint:docs-pages` clean; VRT/behavior parity confirmed
+- [ ] `SWC-2296` updated; this plan's checklist completed
+
+## References
+
+- Jira: [SWC-2296](https://jira.corp.adobe.com/browse/SWC-2296)
+- Superseded exploration: [PR #6393](https://github.com/adobe/spectrum-web-components/pull/6393) (branch `caseyisonit/pending-controller`)
+- Button migration plan: [migration-plan.md](./migration-plan.md)
+- Current `main` implementation: `core/components/button/Button.base.ts`, `swc/components/button/pending-spinner.ts`, `swc/stylesheets/_lit-styles/pending-spinner.css`