@phcdevworks/spectre-ui 1.7.0 → 1.8.0

package/CHANGELOG.md

@@ -6,6 +6,28 @@ reflects package releases published to npm.
 
 ## [Unreleased]
 
+## [1.8.0] - 2026-06-07
+
+Release Title: Spinner Contract and Token Focus Alignment
+
+Contract change type: additive
+
+### Added
+
+- **Spinner Component**: Added standard brand and status variants (`primary`,
+  `secondary`, `success`, `warning`, `danger`, `info`, `neutral`, `accent`,
+  `cta`) and states (`disabled`, `loading` with `[aria-busy="true"]` support).
+- Added `@phcdevworks/spectre-manifest` as a devDependency. `spectre.manifest.json`
+  at the repo root declares this package's ecosystem role, layer, exports, and
+  allowed dependency targets. `check:ecosystem` validates it in the check pipeline.
+- **Token Alignment**: Updated `@phcdevworks/spectre-tokens` dependency to
+  `^2.8.0`.
+- **Button Focus Ring Parity**: Consumed `buttons.danger.focusVisible` and
+  `buttons.success.focusVisible` tokens newly published in `2.8.0`. Danger and
+  success button variants now render a semantically correct focus ring (red and
+  green alpha respectively) on `:focus-visible`, matching the parity already
+  present for primary, secondary, ghost, and accent variants.
+
 ## [1.7.0] - 2026-06-03
 
 Release Title: Tag Variant Expansion and Token Alignment

package/README.md

@@ -27,25 +27,25 @@ belongs in adapter packages such as `@phcdevworks/spectre-ui-astro`).
 semantic meaning. `ui-contract.manifest.json` is the machine-readable contract
 authority for this package's public styling surface.
 
-| Layer | Path | Rule |
-|---|---|---|
-| Token authority | Published `@phcdevworks/spectre-tokens` package | Design values and semantic meaning start there |
-| UI contract authority | `ui-contract.manifest.json` | Governs public recipes, CSS entry points, and Tailwind exports |
-| Source CSS | `src/styles/` | Token-backed CSS classes and bundle entry points |
-| Source recipes | `src/recipes/` | Framework-agnostic class string APIs |
-| Tailwind helpers | `src/tailwind/` | Tailwind theme and preset integration |
-| Generated dist | `dist/` | **Never edit directly** — regenerated by `npm run build` |
+| Layer                 | Path                                            | Rule                                                           |
+| --------------------- | ----------------------------------------------- | -------------------------------------------------------------- |
+| Token authority       | Published `@phcdevworks/spectre-tokens` package | Design values and semantic meaning start there                 |
+| UI contract authority | `ui-contract.manifest.json`                     | Governs public recipes, CSS entry points, and Tailwind exports |
+| Source CSS            | `src/styles/`                                   | Token-backed CSS classes and bundle entry points               |
+| Source recipes        | `src/recipes/`                                  | Framework-agnostic class string APIs                           |
+| Tailwind helpers      | `src/tailwind/`                                 | Tailwind theme and preset integration                          |
+| Generated dist        | `dist/`                                         | **Never edit directly** — regenerated by `npm run build`       |
 
 After any contract-facing source change: run `npm run check` to validate the
 full UI contract.
 
 ## Architecture
 
-| Layer | Package or consumer | Responsibility | Relationship to this package |
-|---|---|---|---|
-| 1 | `@phcdevworks/spectre-tokens` | Defines design values and semantic token meaning | Upstream source of truth |
-| 2 | `@phcdevworks/spectre-ui` | Translates tokens into CSS bundles, Tailwind helpers, and class recipes | This package |
-| 3 | Adapters and apps, such as `@phcdevworks/spectre-ui-astro` | Deliver Spectre through framework-native ergonomics | Downstream consumers |
+| Layer | Package or consumer                                        | Responsibility                                                          | Relationship to this package |
+| ----- | ---------------------------------------------------------- | ----------------------------------------------------------------------- | ---------------------------- |
+| 1     | `@phcdevworks/spectre-tokens`                              | Defines design values and semantic token meaning                        | Upstream source of truth     |
+| 2     | `@phcdevworks/spectre-ui`                                  | Translates tokens into CSS bundles, Tailwind helpers, and class recipes | This package                 |
+| 3     | Adapters and apps, such as `@phcdevworks/spectre-ui-astro` | Deliver Spectre through framework-native ergonomics                     | Downstream consumers         |
 
 `@phcdevworks/spectre-components` is a separate component package that can wrap
 this styling contract in Lit web components. This package owns Layer 2 only: it
@@ -71,8 +71,8 @@ does not deliver components and it does not define tokens.
 - Tailwind preset and theme helpers in `src/tailwind/`
 - Contract validation that keeps CSS, recipes, exports, and docs aligned
 
-This package is the correct place to define reusable styling structure on top
-of Spectre tokens.
+This package is the correct place to define reusable styling structure on top of
+Spectre tokens.
 
 ## What this package does not own
 
@@ -100,7 +100,10 @@ No framework needed. Import the CSS and use the `sp-*` classes directly:
 <!doctype html>
 <html>
   <head>
-    <link rel="stylesheet" href="node_modules/@phcdevworks/spectre-ui/dist/index.css" />
+    <link
+      rel="stylesheet"
+      href="node_modules/@phcdevworks/spectre-ui/dist/index.css"
+    />
   </head>
   <body>
     <button class="sp-btn sp-btn--primary sp-btn--md">Save</button>
@@ -197,17 +200,17 @@ Do not use `@phcdevworks/spectre-ui` when you need to:
 
 ## What belongs here vs elsewhere
 
-| What | Where it lives |
-|---|---|
-| Semantic color values, spacing scale, type scale | `@phcdevworks/spectre-tokens` |
-| Token-to-CSS variable mapping | **here** — `src/styles/` |
-| Precompiled CSS bundles | **here** — built to `dist/*.css` |
-| Class recipe functions (input → class string) | **here** — `src/recipes/` |
-| Tailwind preset and theme helpers | **here** — `src/tailwind/` |
-| Astro, React, Vue, Lit, Svelte components | Adapter packages (e.g. `spectre-ui-astro`) |
-| WordPress shortcodes or PHP templates | A WordPress adapter package |
-| App-level layout, routing, or data fetching | Consuming apps |
-| New design decisions (new colors, new spacing) | `@phcdevworks/spectre-tokens` |
+| What                                             | Where it lives                             |
+| ------------------------------------------------ | ------------------------------------------ |
+| Semantic color values, spacing scale, type scale | `@phcdevworks/spectre-tokens`              |
+| Token-to-CSS variable mapping                    | **here** — `src/styles/`                   |
+| Precompiled CSS bundles                          | **here** — built to `dist/*.css`           |
+| Class recipe functions (input → class string)    | **here** — `src/recipes/`                  |
+| Tailwind preset and theme helpers                | **here** — `src/tailwind/`                 |
+| Astro, React, Vue, Lit, Svelte components        | Adapter packages (e.g. `spectre-ui-astro`) |
+| WordPress shortcodes or PHP templates            | A WordPress adapter package                |
+| App-level layout, routing, or data fetching      | Consuming apps                             |
+| New design decisions (new colors, new spacing)   | `@phcdevworks/spectre-tokens`              |
 
 Golden rule: this package consumes tokens and exposes class contracts. It does
 not define tokens and it does not deliver framework components.
@@ -219,21 +222,21 @@ not define tokens and it does not deliver framework components.
 All recipe functions accept a plain options object and return a class string.
 All options are optional and fall back to sensible defaults.
 
-| Recipe | Function | Variants | Sizes | Common boolean flags |
-|---|---|---|---|---|
-| Button | `getButtonClasses` | `primary` `secondary` `ghost` `danger` `success` `cta` `accent` | `sm` `md` `lg` | `disabled` `loading` `fullWidth` `pill` `iconOnly` |
-| Badge | `getBadgeClasses` | `primary` `secondary` `success` `warning` `danger` `neutral` `info` `ghost` `accent` `cta` | `sm` `md` `lg` | `interactive` `disabled` `loading` `fullWidth` |
-| Card | `getCardClasses` | `elevated` `flat` `outline` `ghost` | — | `interactive` `padded` `fullHeight` `disabled` `loading` |
-| Input | `getInputClasses` | — | `sm` `md` `lg` | `disabled` `loading` `fullWidth` `pill` |
-| Input state | `getInputClasses` | `state`: `default` `error` `success` `disabled` `loading` | — | — |
-| IconBox | `getIconBoxClasses` | `primary` `secondary` `success` `warning` `danger` `info` `neutral` `ghost` `accent` `cta` | `sm` `md` `lg` | `interactive` `disabled` `loading` `pill` `fullWidth` |
-| PricingCard | `getPricingCardClasses` | — | — | `featured` `interactive` `disabled` `loading` `fullHeight` |
-| Rating | `getRatingClasses` | — | `sm` `md` `lg` | `interactive` `disabled` `loading` `pill` `fullWidth` |
-| Testimonial | `getTestimonialClasses` | `elevated` `flat` `outline` `ghost` | — | `interactive` `disabled` `loading` `fullHeight` |
-| Alert | `getAlertClasses` | `info` `success` `warning` `danger` `neutral` | `sm` `md` `lg` | `dismissed` |
-| Avatar | `getAvatarClasses` | — | `sm` `md` `lg` `xl` | shape: `circle` `square` |
-| Tag | `getTagClasses` | `default` `primary` `secondary` `success` `warning` `danger` `info` `neutral` `accent` `cta` `outline` `ghost` | `sm` `md` `lg` | `dismissible` `selected` `disabled` `loading` `interactive` `fullWidth` |
-| Spinner | `getSpinnerClasses` | — | `sm` `md` `lg` | — |
+| Recipe      | Function                | Variants                                                                                                       | Sizes               | Common boolean flags                                                    |
+| ----------- | ----------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------- | ----------------------------------------------------------------------- |
+| Button      | `getButtonClasses`      | `primary` `secondary` `ghost` `danger` `success` `cta` `accent`                                                | `sm` `md` `lg`      | `disabled` `loading` `fullWidth` `pill` `iconOnly`                      |
+| Badge       | `getBadgeClasses`       | `primary` `secondary` `success` `warning` `danger` `neutral` `info` `ghost` `accent` `cta`                     | `sm` `md` `lg`      | `interactive` `disabled` `loading` `fullWidth`                          |
+| Card        | `getCardClasses`        | `elevated` `flat` `outline` `ghost`                                                                            | —                   | `interactive` `padded` `fullHeight` `disabled` `loading`                |
+| Input       | `getInputClasses`       | —                                                                                                              | `sm` `md` `lg`      | `disabled` `loading` `fullWidth` `pill`                                 |
+| Input state | `getInputClasses`       | `state`: `default` `error` `success` `disabled` `loading`                                                      | —                   | —                                                                       |
+| IconBox     | `getIconBoxClasses`     | `primary` `secondary` `success` `warning` `danger` `info` `neutral` `ghost` `accent` `cta`                     | `sm` `md` `lg`      | `interactive` `disabled` `loading` `pill` `fullWidth`                   |
+| PricingCard | `getPricingCardClasses` | —                                                                                                              | —                   | `featured` `interactive` `disabled` `loading` `fullHeight`              |
+| Rating      | `getRatingClasses`      | —                                                                                                              | `sm` `md` `lg`      | `interactive` `disabled` `loading` `pill` `fullWidth`                   |
+| Testimonial | `getTestimonialClasses` | `elevated` `flat` `outline` `ghost`                                                                            | —                   | `interactive` `disabled` `loading` `fullHeight`                         |
+| Alert       | `getAlertClasses`       | `info` `success` `warning` `danger` `neutral`                                                                  | `sm` `md` `lg`      | `dismissed`                                                             |
+| Avatar      | `getAvatarClasses`      | —                                                                                                              | `sm` `md` `lg` `xl` | shape: `circle` `square`                                                |
+| Tag         | `getTagClasses`         | `default` `primary` `secondary` `success` `warning` `danger` `info` `neutral` `accent` `cta` `outline` `ghost` | `sm` `md` `lg`      | `dismissible` `selected` `disabled` `loading` `interactive` `fullWidth` |
+| Spinner     | `getSpinnerClasses`     | —                                                                                                              | `sm` `md` `lg`      | —                                                                       |
 
 Each recipe family also exports sub-element helpers for its structural parts
 (labels, wrappers, sub-containers, text elements). See the full list below.
@@ -344,8 +347,8 @@ Practical guidance:
 
 - additive recipes, variants, states, and helpers are intended to be safe for
   existing consumers
-- semantic shifts may keep the same class or option name but still affect
-  visual output
+- semantic shifts may keep the same class or option name but still affect visual
+  output
 - renames, removals, and behavior changes to existing classes or options are
   breaking
 - generated JS, TypeScript declarations, CSS bundles, Tailwind exports, README
@@ -363,11 +366,11 @@ Tailwind helper:
 Contract-affecting changes should be classified in `CHANGELOG.md [Unreleased]`
 before release.
 
-| Classification | When to use | Examples |
-|---|---|---|
-| `additive` | New public styling surface that does not break existing consumers | Adding a recipe helper, variant, state, or CSS entry point |
-| `semantic change` | Public name remains but behavior or visual meaning shifts | Adjusting an existing class or recipe option to map to different token intent |
-| `breaking` | Existing consumers may need code changes | Renaming or removing a class, option, export, or CSS entry point |
+| Classification    | When to use                                                       | Examples                                                                      |
+| ----------------- | ----------------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `additive`        | New public styling surface that does not break existing consumers | Adding a recipe helper, variant, state, or CSS entry point                    |
+| `semantic change` | Public name remains but behavior or visual meaning shifts         | Adjusting an existing class or recipe option to map to different token intent |
+| `breaking`        | Existing consumers may need code changes                          | Renaming or removing a class, option, export, or CSS entry point              |
 
 Renames and removals are always breaking regardless of perceived scope.
 
@@ -413,28 +416,28 @@ npm install
 npm run ci:verify
 ```
 
-This project requires Node.js `^22.13.0 || >=24.0.0` and npm `>=10.0.0`.
-The checked-in package manager is `npm@11.15.0`.
+This project requires Node.js `^22.13.0 || >=24.0.0` and npm `>=10.0.0`. The
+checked-in package manager is `npm@11.16.0`.
 
 ### Common commands
 
-| Command | What it does |
-|---|---|
-| `npm run check` | Full validation gate — run before every PR |
-| `npm run ci:verify` | Underlying verification sequence used by `npm run check` |
-| `npm test` | Build then run the contract and regression test suite |
-| `npm run build` | Emit TypeScript and CSS artifacts to `dist/` |
-| `npm run lint` | ESLint with TypeScript-aware config |
-| `npm run validate:exports` | Verify root export surface against snapshot |
-| `npm run validate:exports:update` | Update the export snapshot after adding a public export |
-| `npm run validate:tailwind` | Verify Tailwind exports and emitted subpath artifacts |
-| `npm run validate:tailwind:update` | Update the Tailwind export snapshot |
-| `npm run validate:tokens` | Check for token drift against latest published release |
+| Command                            | What it does                                             |
+| ---------------------------------- | -------------------------------------------------------- |
+| `npm run check`                    | Full validation gate — run before every PR               |
+| `npm run ci:verify`                | Underlying verification sequence used by `npm run check` |
+| `npm test`                         | Build then run the contract and regression test suite    |
+| `npm run build`                    | Emit TypeScript and CSS artifacts to `dist/`             |
+| `npm run lint`                     | ESLint with TypeScript-aware config                      |
+| `npm run validate:exports`         | Verify root export surface against snapshot              |
+| `npm run validate:exports:update`  | Update the export snapshot after adding a public export  |
+| `npm run validate:tailwind`        | Verify Tailwind exports and emitted subpath artifacts    |
+| `npm run validate:tailwind:update` | Update the Tailwind export snapshot                      |
+| `npm run validate:tokens`          | Check for token drift against latest published release   |
 
 ### Troubleshooting
 
-**`validate:runtime` fails** — you are on the wrong Node version. Run
-`nvm use` to switch to the version in `.nvmrc`, or install Node 22 or 24.
+**`validate:runtime` fails** — you are on the wrong Node version. Run `nvm use`
+to switch to the version in `.nvmrc`, or install Node 22 or 24.
 
 **`validate:tokens` fails with a network error** — the check requires outbound
 npm registry access. In a restricted environment, run the other validators
@@ -445,8 +448,8 @@ automatically via the `pretest` hook. If you ran `vitest` directly, run
 `npm run build` first.
 
 **Lint fails locally but passes in CI** — confirm you are on the same Node
-version as CI (Node 22.x or 24.x). ESLint plugin resolution can differ
-across runtimes.
+version as CI (Node 22.x or 24.x). ESLint plugin resolution can differ across
+runtimes.
 
 **Export snapshot out of date** — run `npm run validate:exports:update` after
 adding a public export, then commit the updated `scripts/export-snapshot.json`.
@@ -462,6 +465,13 @@ adding a public export, then commit the updated `scripts/export-snapshot.json`.
 Planning artifacts for contract hardening live in [ROADMAP.md](ROADMAP.md) and
 [TODO.md](TODO.md).
 
+The current roadmap focus is post-v1.7.0 expansion: consume newly published
+Spectre token contracts for links, interactive surfaces, dividers, and common
+application UI patterns before adding matching Layer 2 classes or recipes.
+Planned upstream token work is tracked in
+[`@phcdevworks/spectre-tokens`](https://github.com/phcdevworks/spectre-tokens),
+but this package synchronizes only against published npm releases.
+
 ## Examples
 
 Use [`examples/examples.html`](examples/examples.html) as the visual index for
@@ -481,16 +491,16 @@ Run the full validation gate before any pull request:
 npm run check
 ```
 
-This runs: runtime check → lint → export validation → README validation →
-token drift check → build → Tailwind contract → CSS contract → tests. All
-steps must pass.
+This runs: runtime check → lint → changelog validation → export validation →
+README validation → token drift check → build → Tailwind contract → CSS contract
+→ tests. All steps must pass.
 
 ## AI and automation boundaries
 
 Claude Code (`claude-sonnet-4-6`) is the primary development agent for this
 repository. Codex handles releases and production stabilization. Jules handles
-small automated fixes and token sync passes. GitHub Copilot provides
-development support.
+small automated fixes and token sync passes. GitHub Copilot provides development
+support.
 
 Claude Code, Codex, and Copilot do not create git commits by default. Jules may
 commit only bounded automated maintenance when the `JULES.md` scope and

package/dist/base.css

@@ -116,17 +116,24 @@
   --sp-color-white: #ffffff;
   --sp-color-black: #000000;
   --sp-space-0: 0rem;
+  --sp-space-1: 0.0625rem;
+  --sp-space-2: 0.125rem;
   --sp-space-4: 0.25rem;
+  --sp-space-6: 0.375rem;
   --sp-space-8: 0.5rem;
+  --sp-space-10: 0.625rem;
   --sp-space-12: 0.75rem;
+  --sp-space-14: 0.875rem;
   --sp-space-16: 1rem;
   --sp-space-20: 1.25rem;
   --sp-space-24: 1.5rem;
+  --sp-space-28: 1.75rem;
   --sp-space-32: 2rem;
   --sp-space-40: 2.5rem;
   --sp-space-48: 3rem;
   --sp-space-56: 3.5rem;
   --sp-space-64: 4rem;
+  --sp-space-72: 4.5rem;
   --sp-space-80: 5rem;
   --sp-space-96: 6rem;
   --sp-layout-section-padding-sm: 1.5rem;
@@ -142,16 +149,21 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
   --sp-border-style-none: none;
   --sp-border-style-solid: solid;
+  --sp-border-style-dashed: dashed;
+  --sp-border-style-dotted: dotted;
   --sp-radius-none: 0;
   --sp-radius-sm: 2px;
   --sp-radius-md: 4px;
   --sp-radius-lg: 8px;
   --sp-radius-xl: 12px;
   --sp-radius-2xl: 16px;
+  --sp-radius-3xl: 24px;
+  --sp-radius-4xl: 32px;
   --sp-radius-pill: 999px;
   --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -276,6 +288,7 @@
   --sp-button-danger-text: #ffffff;
   --sp-button-danger-textdisabled: #8a96ad;
   --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-danger-focusvisible: rgba(239, 68, 68, 0.4);
   --sp-button-success-bg: #15803d;
   --sp-button-success-bghover: #166534;
   --sp-button-success-bgactive: #14532d;
@@ -283,6 +296,7 @@
   --sp-button-success-text: #ffffff;
   --sp-button-success-textdisabled: #8a96ad;
   --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-success-focusvisible: rgba(34, 197, 94, 0.4);
   --sp-button-cta-bg: #1f57db;
   --sp-button-cta-bghover: #1946b4;
   --sp-button-cta-bgactive: #173b8f;

package/dist/components.css

@@ -116,17 +116,24 @@
   --sp-color-white: #ffffff;
   --sp-color-black: #000000;
   --sp-space-0: 0rem;
+  --sp-space-1: 0.0625rem;
+  --sp-space-2: 0.125rem;
   --sp-space-4: 0.25rem;
+  --sp-space-6: 0.375rem;
   --sp-space-8: 0.5rem;
+  --sp-space-10: 0.625rem;
   --sp-space-12: 0.75rem;
+  --sp-space-14: 0.875rem;
   --sp-space-16: 1rem;
   --sp-space-20: 1.25rem;
   --sp-space-24: 1.5rem;
+  --sp-space-28: 1.75rem;
   --sp-space-32: 2rem;
   --sp-space-40: 2.5rem;
   --sp-space-48: 3rem;
   --sp-space-56: 3.5rem;
   --sp-space-64: 4rem;
+  --sp-space-72: 4.5rem;
   --sp-space-80: 5rem;
   --sp-space-96: 6rem;
   --sp-layout-section-padding-sm: 1.5rem;
@@ -142,16 +149,21 @@
   --sp-layout-container-padding-inline-md: 1.5rem;
   --sp-layout-container-padding-inline-lg: 2rem;
   --sp-layout-container-max-width: 72rem;
+  --sp-border-width-none: 0;
   --sp-border-width-base: 1px;
   --sp-border-width-thick: 2px;
   --sp-border-style-none: none;
   --sp-border-style-solid: solid;
+  --sp-border-style-dashed: dashed;
+  --sp-border-style-dotted: dotted;
   --sp-radius-none: 0;
   --sp-radius-sm: 2px;
   --sp-radius-md: 4px;
   --sp-radius-lg: 8px;
   --sp-radius-xl: 12px;
   --sp-radius-2xl: 16px;
+  --sp-radius-3xl: 24px;
+  --sp-radius-4xl: 32px;
   --sp-radius-pill: 999px;
   --sp-font-family-sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
   --sp-font-family-serif: 'Times New Roman', Times, serif;
@@ -276,6 +288,7 @@
   --sp-button-danger-text: #ffffff;
   --sp-button-danger-textdisabled: #8a96ad;
   --sp-button-danger-focusring: rgba(239, 68, 68, 0.4);
+  --sp-button-danger-focusvisible: rgba(239, 68, 68, 0.4);
   --sp-button-success-bg: #15803d;
   --sp-button-success-bghover: #166534;
   --sp-button-success-bgactive: #14532d;
@@ -283,6 +296,7 @@
   --sp-button-success-text: #ffffff;
   --sp-button-success-textdisabled: #8a96ad;
   --sp-button-success-focusring: rgba(34, 197, 94, 0.4);
+  --sp-button-success-focusvisible: rgba(34, 197, 94, 0.4);
   --sp-button-cta-bg: #1f57db;
   --sp-button-cta-bghover: #1946b4;
   --sp-button-cta-bgactive: #173b8f;
@@ -417,12 +431,14 @@
     --sp-component-button-danger-bg-disabled: var(--sp-button-danger-bgdisabled);
     --sp-component-button-danger-text: var(--sp-button-danger-text);
     --sp-component-button-danger-text-disabled: var(--sp-button-danger-textdisabled);
+    --sp-component-button-danger-focus-visible: var(--sp-button-danger-focusvisible);
     --sp-component-button-success-bg: var(--sp-button-success-bg);
     --sp-component-button-success-bg-hover: var(--sp-button-success-bghover);
     --sp-component-button-success-bg-active: var(--sp-button-success-bgactive);
     --sp-component-button-success-bg-disabled: var(--sp-button-success-bgdisabled);
     --sp-component-button-success-text: var(--sp-button-success-text);
     --sp-component-button-success-text-disabled: var(--sp-button-success-textdisabled);
+    --sp-component-button-success-focus-visible: var(--sp-button-success-focusvisible);
     /* CTA button alignment restored to official tokens as they now use the brand palette (Blue). */
     --sp-component-button-cta-bg: var(--sp-button-cta-bg);
     --sp-component-button-cta-bg-hover: var(--sp-button-cta-bghover);
@@ -493,6 +509,9 @@
     --sp-component-badge-info-text: var(--sp-badge-info-text);
     --sp-component-badge-ghost-bg: var(--sp-button-ghost-bg);
     --sp-component-badge-ghost-text: var(--sp-button-ghost-text);
+    --sp-component-badge-outline-bg: transparent;
+    --sp-component-badge-outline-text: var(--sp-badge-neutral-text);
+    --sp-component-badge-outline-border: var(--sp-button-secondary-border);
     --sp-component-badge-accent-bg: var(--sp-button-accent-bg);
     --sp-component-badge-accent-text: var(--sp-button-accent-text);
     --sp-component-badge-cta-bg: var(--sp-button-cta-bg);
@@ -543,6 +562,9 @@
     --sp-component-iconbox-accent-text: var(--sp-button-accent-text);
     --sp-component-iconbox-cta-bg: var(--sp-button-cta-bg);
     --sp-component-iconbox-cta-text: var(--sp-button-cta-text);
+    --sp-component-iconbox-outline-bg: transparent;
+    --sp-component-iconbox-outline-text: var(--sp-badge-neutral-text);
+    --sp-component-iconbox-outline-border: var(--sp-button-secondary-border);
 
     /* testimonial roles */
     --sp-component-testimonial-bg: var(--sp-surface-card);
@@ -664,6 +686,15 @@
     --sp-component-spinner-border-width: var(--sp-border-width-thick);
     --sp-component-spinner-track-color: var(--sp-color-neutral-200);
     --sp-component-spinner-arc-color: var(--sp-button-primary-bg);
+    --sp-component-spinner-primary-arc: var(--sp-button-primary-bg);
+    --sp-component-spinner-secondary-arc: var(--sp-button-secondary-border);
+    --sp-component-spinner-success-arc: var(--sp-color-success-500);
+    --sp-component-spinner-warning-arc: var(--sp-color-warning-500);
+    --sp-component-spinner-danger-arc: var(--sp-color-error-500);
+    --sp-component-spinner-info-arc: var(--sp-color-info-500);
+    --sp-component-spinner-neutral-arc: var(--sp-color-neutral-500);
+    --sp-component-spinner-accent-arc: var(--sp-button-accent-bg);
+    --sp-component-spinner-cta-arc: var(--sp-button-cta-bg);
     --sp-component-spinner-duration: var(--sp-duration-long);
     --sp-component-spinner-easing: var(--sp-easing-linear);
   }
@@ -724,6 +755,15 @@
 
     --sp-component-spinner-track-color: var(--sp-color-neutral-700);
     --sp-component-spinner-arc-color: var(--sp-color-brand-400);
+    --sp-component-spinner-primary-arc: var(--sp-color-brand-400);
+    --sp-component-spinner-secondary-arc: var(--sp-color-neutral-400);
+    --sp-component-spinner-success-arc: var(--sp-color-success-400);
+    --sp-component-spinner-warning-arc: var(--sp-color-warning-400);
+    --sp-component-spinner-danger-arc: var(--sp-color-error-400);
+    --sp-component-spinner-info-arc: var(--sp-color-info-400);
+    --sp-component-spinner-neutral-arc: var(--sp-color-neutral-400);
+    --sp-component-spinner-accent-arc: var(--sp-color-brand-400);
+    --sp-component-spinner-cta-arc: var(--sp-color-brand-400);
   }
 
   /* BUTTONS -------------------------------------------------------------- */
@@ -910,6 +950,12 @@
     color: var(--sp-component-button-danger-text-disabled);
   }
 
+  .sp-btn--danger:focus-visible,
+  .sp-btn--danger.sp-btn--focus,
+  .sp-btn--danger.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-danger-focus-visible);
+  }
+
   /* success */
   .sp-btn--success {
     background-color: var(--sp-component-button-success-bg);
@@ -935,6 +981,12 @@
     color: var(--sp-component-button-success-text-disabled);
   }
 
+  .sp-btn--success:focus-visible,
+  .sp-btn--success.sp-btn--focus,
+  .sp-btn--success.is-focus {
+    box-shadow: 0 0 0 calc(var(--sp-focus-ring-width) + var(--sp-component-border-width)) var(--sp-component-button-success-focus-visible);
+  }
+
   /* cta */
   .sp-btn--cta {
     background-color: var(--sp-component-button-cta-bg);
@@ -1351,6 +1403,12 @@
     background-color: var(--sp-component-badge-ghost-bg-hover);
   }
 
+  .sp-badge--outline {
+    background-color: var(--sp-component-badge-outline-bg);
+    color: var(--sp-component-badge-outline-text);
+    border-color: var(--sp-component-badge-outline-border);
+  }
+
   .sp-badge--accent {
     background-color: var(--sp-component-badge-accent-bg);
     color: var(--sp-component-badge-accent-text);
@@ -1548,6 +1606,12 @@
     color: var(--sp-component-iconbox-cta-text);
   }
 
+  .sp-iconbox--outline {
+    background-color: var(--sp-component-iconbox-outline-bg);
+    color: var(--sp-component-iconbox-outline-text);
+    border-color: var(--sp-component-iconbox-outline-border);
+  }
+
   .sp-iconbox--interactive {
     cursor: pointer;
   }
@@ -2316,6 +2380,52 @@
     border: var(--sp-component-spinner-border-width) solid var(--sp-component-spinner-track-color);
     border-top-color: var(--sp-component-spinner-arc-color);
     animation: sp-spin var(--sp-component-spinner-duration) var(--sp-component-spinner-easing) infinite;
+    transition: opacity var(--sp-duration-fast) var(--sp-easing-out);
+  }
+
+  .sp-spinner--primary {
+    border-top-color: var(--sp-component-spinner-primary-arc);
+  }
+
+  .sp-spinner--secondary {
+    border-top-color: var(--sp-component-spinner-secondary-arc);
+  }
+
+  .sp-spinner--success {
+    border-top-color: var(--sp-component-spinner-success-arc);
+  }
+
+  .sp-spinner--warning {
+    border-top-color: var(--sp-component-spinner-warning-arc);
+  }
+
+  .sp-spinner--danger {
+    border-top-color: var(--sp-component-spinner-danger-arc);
+  }
+
+  .sp-spinner--info {
+    border-top-color: var(--sp-component-spinner-info-arc);
+  }
+
+  .sp-spinner--neutral {
+    border-top-color: var(--sp-component-spinner-neutral-arc);
+  }
+
+  .sp-spinner--accent {
+    border-top-color: var(--sp-component-spinner-accent-arc);
+  }
+
+  .sp-spinner--cta {
+    border-top-color: var(--sp-component-spinner-cta-arc);
+  }
+
+  .sp-spinner--disabled {
+    opacity: var(--sp-opacity-disabled);
+  }
+
+  .sp-spinner--loading,
+  .sp-spinner[aria-busy="true"] {
+    opacity: var(--sp-opacity-active);
   }
 
   .sp-spinner--sm {

package/dist/index.cjs

@@ -255,6 +255,7 @@ var BADGE_VARIANTS = {
   neutral: true,
   info: true,
   ghost: true,
+  outline: true,
   accent: true,
   cta: true
 };
@@ -296,6 +297,7 @@ function getBadgeClasses(opts = {}) {
     neutral: "sp-badge--neutral",
     info: "sp-badge--info",
     ghost: "sp-badge--ghost",
+    outline: "sp-badge--outline",
     accent: "sp-badge--accent",
     cta: "sp-badge--cta"
   };
@@ -331,7 +333,8 @@ var ICONBOX_VARIANTS = {
   neutral: true,
   ghost: true,
   accent: true,
-  cta: true
+  cta: true,
+  outline: true
 };
 var ICONBOX_SIZES = {
   sm: true,
@@ -373,7 +376,8 @@ function getIconBoxClasses(opts = {}) {
     neutral: "sp-iconbox--neutral",
     ghost: "sp-iconbox--ghost",
     accent: "sp-iconbox--accent",
-    cta: "sp-iconbox--cta"
+    cta: "sp-iconbox--cta",
+    outline: "sp-iconbox--outline"
   };
   const variantClass = variantMap[variant];
   const sizeMap = {
@@ -709,20 +713,48 @@ function getTagClasses(opts = {}) {
 }
 
 // src/recipes/spinner.ts
+var SPINNER_VARIANTS = {
+  primary: true,
+  secondary: true,
+  success: true,
+  warning: true,
+  danger: true,
+  info: true,
+  neutral: true,
+  accent: true,
+  cta: true
+};
 var SPINNER_SIZES = {
   sm: true,
   md: true,
   lg: true
 };
 function getSpinnerClasses(opts = {}) {
-  const { size: sizeInput } = opts;
+  const {
+    variant: variantInput,
+    size: sizeInput,
+    disabled = false,
+    loading = false
+  } = opts;
+  const variant = variantInput && resolveOption({
+    name: "spinner variant",
+    value: variantInput,
+    allowed: SPINNER_VARIANTS,
+    fallback: "primary"
+  });
   const size = resolveOption({
     name: "spinner size",
     value: sizeInput,
     allowed: SPINNER_SIZES,
     fallback: "md"
   });
-  return cx("sp-spinner", `sp-spinner--${size}`);
+  return cx(
+    "sp-spinner",
+    variant && `sp-spinner--${variant}`,
+    `sp-spinner--${size}`,
+    disabled && "sp-spinner--disabled",
+    loading && "sp-spinner--loading"
+  );
 }
 
 exports.getAlertClasses = getAlertClasses;