@phcdevworks/spectre-components 1.14.0 → 1.16.0

package/README.md

@@ -16,7 +16,7 @@ consume Spectre without a framework-specific adapter.
 | Project team           | `project-design`                    |
 | Repository role        | Spectre L3a Lit web component layer |
 | Package/artifact       | `@phcdevworks/spectre-components`   |
-| Current version/status | 1.14.0                              |
+| Current version/status | 1.16.0                              |
 
 ## Standard Workflow
 
@@ -347,6 +347,7 @@ when the button needs to navigate rather than submit/act.
 | `disabled`         | boolean                                                               | `false`   | Disables the button; if `href` is also set, still renders `<button disabled>` |
 | `full-width`       | boolean                                                               | `false`   | Spans full container width                                                    |
 | `pill`             | boolean                                                               | `false`   | Pill / fully-rounded corners                                                  |
+| `compact`          | boolean                                                               | `false`   | Denser padding/height variant                                                 |
 | `name`             | string                                                                | —         | Form field name                                                               |
 | `value`            | string                                                                | `''`      | Submitted value                                                               |
 | `form`             | string                                                                | —         | Associates with a form by ID                                                  |
@@ -812,16 +813,41 @@ price, feature list, call-to-action, etc.).
 
 ---
 
+### Layout components
+
+`sp-container`, `sp-grid`, `sp-section`, `sp-stack`, `sp-footer`, and `sp-nav`
+share two contracts:
+
+- **Host display** — the host element defaults to `display: block` (set via
+  inline style in `connectedCallback`, so a consumer's own
+  `style="display: ..."` always wins) instead of the browser's default inline
+  custom-element box. This keeps backgrounds, margins, and full-width inner
+  content from being trapped inside an inline box.
+- **`inner-class`** — an `inner-class` attribute (`innerClass` JS property)
+  appends consumer-supplied Spectre utility classes to the native inner element
+  the component's recipe classes render on, without touching the host's own
+  `class` attribute. Host `class` and `inner-class` are distinct targets: host
+  `class` affects the custom-element box itself, `inner-class` affects the
+  styled element inside it. Only tokens matching `sp-*` (Spectre utility class
+  syntax) are applied; anything else is silently dropped.
+
+```html
+<sp-stack class="my-host-hook" inner-class="sp-bg-primary-500 sp-p-8">
+  ...
+</sp-stack>
+```
+
 ### sp-container
 
 Renders a `<div>` layout container backed by the Spectre container recipe.
 
 **Attributes**
 
-| Attribute                 | Type    | Default | Description                       |
-| ------------------------- | ------- | ------- | --------------------------------- |
-| `max-width`               | `prose` | —       | Constrains content to a max width |
-| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<div>`   |
+| Attribute                 | Type    | Default | Description                                           |
+| ------------------------- | ------- | ------- | ----------------------------------------------------- |
+| `max-width`               | `prose` | —       | Constrains content to a max width                     |
+| `inner-class`             | string  | —       | Spectre utility classes applied to the native `<div>` |
+| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<div>`                       |
 
 **Content projection** — children become the container content.
 
@@ -835,12 +861,26 @@ Renders a `<div>` grid layout backed by the Spectre grid recipe.
 
 **Attributes**
 
-| Attribute                 | Type                                                         | Default | Description                                                 |
-| ------------------------- | ------------------------------------------------------------ | ------- | ----------------------------------------------------------- |
-| `columns`                 | `1 \| 2 \| 3 \| 4 \| 6 \| 12`                                | `1`     | Number of grid columns                                      |
-| `gap`                     | `sm \| md \| lg`                                             | `md`    | Gap between grid items                                      |
-| `span`                    | `1-12 \| 'full'` or `{ base?, md?, lg? }` (JS property only) | —       | Column span for a grid item, single value or per-breakpoint |
-| `id` / `title` / `aria-*` | string                                                       | —       | Forwarded to the native `<div>`                             |
+| Attribute                 | Type                                                                                     | Default | Description                                                                     |
+| ------------------------- | ---------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------- |
+| `columns`                 | `1 \| 2 \| 3 \| 4 \| 6 \| 12`                                                            | `1`     | Number of grid columns                                                          |
+| `gap`                     | `sm \| md \| lg`                                                                         | `md`    | Gap between grid items                                                          |
+| `span`                    | `1-12 \| 'full'` or `{ base?, md?, lg? }` (JS property only)                             | —       | Column span for a grid item, single value or per-breakpoint                     |
+| `column-gap`              | `sm \| md \| lg` (JS: `columnGap`)                                                       | —       | Overrides `gap` on the column axis only                                         |
+| `row-gap`                 | `sm \| md \| lg` (JS: `rowGap`)                                                          | —       | Overrides `gap` on the row axis only                                            |
+| `offset`                  | `0-11` or `{ base?, md?, lg? }` (JS property only)                                       | —       | Column offset for a grid item, single value or per-breakpoint                   |
+| `row-span`                | `1-12 \| 'full'` or `{ base?, md?, lg? }` (JS: `rowSpan`)                                | —       | Row span for a grid item, single value or per-breakpoint                        |
+| `row-offset`              | `0-11` or `{ base?, md?, lg? }` (JS: `rowOffset`)                                        | —       | Row offset for a grid item, single value or per-breakpoint                      |
+| `order`                   | `'first' \| 'last' \| 'none' \| 1-12` or `{ base?, md?, lg? }` (JS property only)        | —       | Reorders a grid item independent of source order                                |
+| `leading-tracks`          | `{ weight: 1.5\|1.6\|2\|2.5\|3 \| { base?, md?, lg? } }` (JS: `leadingTracks`)           | —       | One wider leading column plus `columns - 1` equal columns                       |
+| `fixed-tracks`            | `{ count: 1\|2\|3\|4 }` (JS: `fixedTracks`)                                              | —       | Fixed-width repeated tracks (`--sp-space-240`), replaces `columns`              |
+| `explicit-template`       | `{ template: 'edge-fluid-edge'\|'label-fluid-fluid', weight? }` (JS: `explicitTemplate`) | —       | Named asymmetric column shape; replaces `columns`/`leadingTracks`/`fixedTracks` |
+| `inner-class`             | string                                                                                   | —       | Spectre utility classes applied to the native `<div>`                           |
+| `id` / `title` / `aria-*` | string                                                                                   | —       | Forwarded to the native `<div>`                                                 |
+
+`leading-tracks`, `fixed-tracks`, `explicit-template`, and any per-breakpoint
+`{ base?, md?, lg? }` shape are JS-property-only (set via the DOM property, not
+an HTML attribute string).
 
 **Content projection** — children become grid items.
 
@@ -854,9 +894,10 @@ Renders a `<section>` layout wrapper backed by the Spectre section recipe.
 
 **Attributes**
 
-| Attribute                 | Type   | Default | Description                         |
-| ------------------------- | ------ | ------- | ----------------------------------- |
-| `id` / `title` / `aria-*` | string | —       | Forwarded to the native `<section>` |
+| Attribute                 | Type   | Default | Description                                               |
+| ------------------------- | ------ | ------- | --------------------------------------------------------- |
+| `inner-class`             | string | —       | Spectre utility classes applied to the native `<section>` |
+| `id` / `title` / `aria-*` | string | —       | Forwarded to the native `<section>`                       |
 
 **Content projection** — children become the section content.
 
@@ -870,12 +911,13 @@ Renders a `<div>` flex stack backed by the Spectre stack recipe.
 
 **Attributes**
 
-| Attribute                 | Type                     | Default    | Description                           |
-| ------------------------- | ------------------------ | ---------- | ------------------------------------- |
-| `direction`               | `vertical \| horizontal` | `vertical` | Stack axis                            |
-| `basis`                   | `sidebar`                | —          | Reserves sidebar-sized basis on items |
-| `align`                   | `center \| stretch`      | `center`   | Cross-axis alignment                  |
-| `id` / `title` / `aria-*` | string                   | —          | Forwarded to the native `<div>`       |
+| Attribute                 | Type                     | Default    | Description                                           |
+| ------------------------- | ------------------------ | ---------- | ----------------------------------------------------- |
+| `direction`               | `vertical \| horizontal` | `vertical` | Stack axis                                            |
+| `basis`                   | `sidebar`                | —          | Reserves sidebar-sized basis on items                 |
+| `align`                   | `center \| stretch`      | `center`   | Cross-axis alignment                                  |
+| `inner-class`             | string                   | —          | Spectre utility classes applied to the native `<div>` |
+| `id` / `title` / `aria-*` | string                   | —          | Forwarded to the native `<div>`                       |
 
 **Content projection** — children become stack items.
 
@@ -889,11 +931,12 @@ Renders a `<footer>` backed by the Spectre footer recipe.
 
 **Attributes**
 
-| Attribute                 | Type    | Default | Description                        |
-| ------------------------- | ------- | ------- | ---------------------------------- |
-| `bordered`                | boolean | `false` | Adds a top border                  |
-| `full-width`              | boolean | `false` | Spans full container width         |
-| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<footer>` |
+| Attribute                 | Type    | Default | Description                                              |
+| ------------------------- | ------- | ------- | -------------------------------------------------------- |
+| `bordered`                | boolean | `false` | Adds a top border                                        |
+| `full-width`              | boolean | `false` | Spans full container width                               |
+| `inner-class`             | string  | —       | Spectre utility classes applied to the native `<footer>` |
+| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<footer>`                       |
 
 **Content projection** — children become the footer content (links, legal text,
 etc.).
@@ -902,18 +945,66 @@ etc.).
 
 ---
 
+### sp-footer-link
+
+Renders an `<a>` link styled for `sp-footer` content, backed by the Spectre
+footer link recipe.
+
+**Attributes**
+
+| Attribute                 | Type    | Default | Description                                                     |
+| ------------------------- | ------- | ------- | --------------------------------------------------------------- |
+| `href`                    | string  | —       | Link target (dropped when `disabled`)                           |
+| `active`                  | boolean | `false` | Marks the link as the current page (`aria-current="page"`)      |
+| `disabled`                | boolean | `false` | Disables the link (`aria-disabled`, `tabindex="-1"`, no `href`) |
+| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<a>`                                   |
+
+**Content projection** — children become the link text.
+
+**Internal target** — `[data-sp-footer-link-native]` selects the native `<a>`.
+
+```html
+<sp-footer>
+  <sp-footer-link href="/privacy">Privacy</sp-footer-link>
+  <sp-footer-link href="/terms" active>Terms</sp-footer-link>
+</sp-footer>
+```
+
+---
+
+### sp-footer-chip
+
+Renders a `<span>` chip styled for `sp-footer` content (e.g. a version or status
+badge), backed by the Spectre footer chip recipe.
+
+**Attributes**
+
+| Attribute                 | Type    | Default | Description                             |
+| ------------------------- | ------- | ------- | --------------------------------------- |
+| `disabled`                | boolean | `false` | Disabled visual state (`aria-disabled`) |
+| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<span>`        |
+
+**Content projection** — children become the chip text.
+
+**Internal target** — `[data-sp-footer-chip-native]` selects the native
+`<span>`.
+
+---
+
 ### sp-nav
 
 Renders a `<nav>` backed by the Spectre nav recipe.
 
 **Attributes**
 
-| Attribute                 | Type    | Default | Description                     |
-| ------------------------- | ------- | ------- | ------------------------------- |
-| `bordered`                | boolean | `false` | Adds a bottom border            |
-| `sticky`                  | boolean | `false` | Sticks the nav to the viewport  |
-| `full-width`              | boolean | `false` | Spans full container width      |
-| `id` / `title` / `aria-*` | string  | —       | Forwarded to the native `<nav>` |
+| Attribute                 | Type                     | Default | Description                                           |
+| ------------------------- | ------------------------ | ------- | ----------------------------------------------------- |
+| `bordered`                | boolean                  | `false` | Adds a bottom border                                  |
+| `sticky`                  | boolean                  | `false` | Sticks the nav to the viewport                        |
+| `full-width`              | boolean                  | `false` | Spans full container width                            |
+| `align`                   | `start \| center \| end` | —       | Horizontal alignment of nav content within the bar    |
+| `inner-class`             | string                   | —       | Spectre utility classes applied to the native `<nav>` |
+| `id` / `title` / `aria-*` | string                   | —       | Forwarded to the native `<nav>`                       |
 
 **Content projection** — children become the nav content (links, brand mark,
 etc.).
@@ -930,14 +1021,15 @@ alongside plain `<a>` links.
 
 **Attributes**
 
-| Attribute                 | Type    | Default          | Description                                                         |
-| ------------------------- | ------- | ---------------- | ------------------------------------------------------------------- |
-| `dropdown`                | boolean | `false`          | Renders a dropdown trigger + menu instead of a plain `<a>`          |
-| `href`                    | string  | —                | Link target when `dropdown` is `false`                              |
-| `label`                   | string  | —                | Trigger/link text when no content is projected                      |
-| `open`                    | boolean | `false`          | Open/closed menu state (dropdown mode only)                         |
-| `placement`               | string  | `'bottom-start'` | Menu position: `bottom-start`, `bottom-end`, `top-start`, `top-end` |
-| `id` / `title` / `aria-*` | string  | —                | Forwarded to the rendered `<a>` or trigger `<button>`               |
+| Attribute                 | Type    | Default          | Description                                                                                                              |
+| ------------------------- | ------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| `dropdown`                | boolean | `false`          | Renders a dropdown trigger + menu instead of a plain `<a>`                                                               |
+| `href`                    | string  | —                | Link target when `dropdown` is `false`                                                                                   |
+| `label`                   | string  | —                | Trigger/link text when no content is projected                                                                           |
+| `mega`                    | boolean | `false`          | Anchors the menu to the nearest positioned ancestor instead of the trigger, spanning its full width (dropdown mode only) |
+| `open`                    | boolean | `false`          | Open/closed menu state (dropdown mode only)                                                                              |
+| `placement`               | string  | `'bottom-start'` | Menu position: `bottom-start`, `bottom-end`, `top-start`, `top-end`                                                      |
+| `id` / `title` / `aria-*` | string  | —                | Forwarded to the rendered `<a>` or trigger `<button>`                                                                    |
 
 **Content projection** — in dropdown mode, children become the menu content; a
 child with `slot="trigger"` becomes the trigger content instead of `label`. Menu
@@ -959,9 +1051,20 @@ layout. In link mode, children become the link's content.
       <div>Column three</div>
     </sp-grid>
   </sp-nav-item>
+  <sp-nav-item dropdown mega label="Solutions">
+    <sp-grid columns="4" gap="lg">
+      <div>Column one</div>
+      <div>Column two</div>
+      <div>Column three</div>
+      <div>Column four</div>
+    </sp-grid>
+  </sp-nav-item>
 </sp-nav>
 ```
 
+`mega` requires a positioned ancestor to anchor against — `sp-nav` is a
+positioning context by default, so nesting inside it is sufficient.
+
 ---
 
 ### sp-sidebar
@@ -971,12 +1074,13 @@ Spectre sidebar recipe.
 
 **Attributes**
 
-| Attribute                 | Type    | Default          | Description                            |
-| ------------------------- | ------- | ---------------- | -------------------------------------- |
-| `bordered`                | boolean | `false`          | Adds a trailing border                 |
-| `open`                    | boolean | `false`          | Open/closed off-canvas state           |
-| `toggle-label`            | string  | `Toggle sidebar` | Accessible label for the toggle button |
-| `id` / `title` / `aria-*` | string  | —                | Forwarded to the native `<aside>`      |
+| Attribute                 | Type    | Default          | Description                                                                           |
+| ------------------------- | ------- | ---------------- | ------------------------------------------------------------------------------------- |
+| `bordered`                | boolean | `false`          | Adds a trailing border                                                                |
+| `hide-toggle`             | boolean | `false`          | Suppresses the built-in toggle button (e.g. when using `sp-sidebar-toggle` elsewhere) |
+| `open`                    | boolean | `false`          | Open/closed off-canvas state                                                          |
+| `toggle-label`            | string  | `Toggle sidebar` | Accessible label for the built-in toggle button                                       |
+| `id` / `title` / `aria-*` | string  | —                | Forwarded to the native `<aside>`                                                     |
 
 **Content projection** — children become the sidebar content (links, navigation
 groups, etc.).
@@ -993,6 +1097,76 @@ hide the off-canvas panel and backdrop.
 
 ---
 
+### sp-sidebar-link
+
+Renders an `<a>` link styled for `sp-sidebar` navigation content, backed by the
+Spectre sidebar link recipe.
+
+**Attributes**
+
+| Attribute                 | Type              | Default  | Description                                                     |
+| ------------------------- | ----------------- | -------- | --------------------------------------------------------------- |
+| `href`                    | string            | —        | Link target (dropped when `disabled`)                           |
+| `active`                  | boolean           | `false`  | Marks the link as the current page (`aria-current="page"`)      |
+| `disabled`                | boolean           | `false`  | Disables the link (`aria-disabled`, `tabindex="-1"`, no `href`) |
+| `level`                   | `parent \| child` | `parent` | Indents/styles the link as a nested (`child`) sidebar link      |
+| `id` / `title` / `aria-*` | string            | —        | Forwarded to the native `<a>`                                   |
+
+**Content projection** — children become the link text.
+
+**Internal target** — `[data-sp-sidebar-link-native]` selects the native `<a>`.
+
+```html
+<sp-sidebar>
+  <sp-sidebar-link href="/dashboard" active>Dashboard</sp-sidebar-link>
+  <sp-sidebar-link href="/settings">Settings</sp-sidebar-link>
+  <sp-sidebar-link href="/settings/billing" level="child"
+    >Billing</sp-sidebar-link
+  >
+</sp-sidebar>
+```
+
+---
+
+### sp-sidebar-toggle
+
+Renders a standalone trigger button that opens/closes a remote `sp-sidebar`,
+backed by the Spectre sidebar-toggle recipe. Use it to place a toggle somewhere
+other than inside the sidebar itself (a header, a nav bar) — pair it with
+`hide-toggle` on the target `sp-sidebar` to suppress that sidebar's own built-in
+toggle, or leave both in place to control the same sidebar from two triggers.
+
+**Attributes**
+
+| Attribute                 | Type   | Default          | Description                                                                                      |
+| ------------------------- | ------ | ---------------- | ------------------------------------------------------------------------------------------------ |
+| `for`                     | string | —                | `id` of the target `sp-sidebar`'s native content (the id set on the `sp-sidebar` element itself) |
+| `label`                   | string | `Toggle sidebar` | Accessible label when no icon content is projected                                               |
+| `id` / `title` / `aria-*` | string | —                | Forwarded to the native `<button>`                                                               |
+
+**Content projection** — children become the button's icon content; falls back
+to a default `☰` glyph when empty.
+
+**Behavior** — clicking the button toggles the target `sp-sidebar`'s `open`
+property and mirrors its own `aria-expanded` state, including staying in sync
+when the target is opened/closed by another trigger (its own built-in toggle,
+the backdrop, `Esc`, or a second `sp-sidebar-toggle`).
+
+```html
+<sp-nav>
+  <sp-sidebar-toggle for="app-sidebar"></sp-sidebar-toggle>
+</sp-nav>
+
+<sp-sidebar id="app-sidebar" hide-toggle>
+  <a href="/dashboard">Dashboard</a>
+</sp-sidebar>
+```
+
+**Internal target** — `[data-sp-sidebar-toggle-native]` selects the native
+`<button>`.
+
+---
+
 ### sp-dropdown
 
 Renders a trigger button and a menu container, backed by the Spectre dropdown
@@ -1000,13 +1174,14 @@ recipes.
 
 **Attributes**
 
-| Attribute                 | Type                                                 | Default        | Description                                                                   |
-| ------------------------- | ---------------------------------------------------- | -------------- | ----------------------------------------------------------------------------- |
-| `open`                    | boolean                                              | `false`        | Open/closed menu state                                                        |
-| `placement`               | `bottom-start \| bottom-end \| top-start \| top-end` | `bottom-start` | Menu position relative to trigger                                             |
-| `full-width`              | boolean                                              | `false`        | Spans full container width                                                    |
-| `trigger-label`           | string                                               | `Toggle menu`  | Visible/accessible trigger text when no `slot="trigger"` content is projected |
-| `id` / `title` / `aria-*` | string                                               | —              | Forwarded to the trigger button                                               |
+| Attribute                 | Type                                                 | Default        | Description                                                                                         |
+| ------------------------- | ---------------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------- |
+| `open`                    | boolean                                              | `false`        | Open/closed menu state                                                                              |
+| `placement`               | `bottom-start \| bottom-end \| top-start \| top-end` | `bottom-start` | Menu position relative to trigger                                                                   |
+| `full-width`              | boolean                                              | `false`        | Spans full container width                                                                          |
+| `mega`                    | boolean                                              | `false`        | Anchors the menu to the nearest positioned ancestor instead of the trigger, spanning its full width |
+| `trigger-label`           | string                                               | `Toggle menu`  | Visible/accessible trigger text when no `slot="trigger"` content is projected                       |
+| `id` / `title` / `aria-*` | string                                               | —              | Forwarded to the trigger button                                                                     |
 
 **Content projection** — an element with `slot="trigger"` becomes the trigger
 button content; all other children become the menu content.
@@ -1196,45 +1371,50 @@ defineSpectreComponents() // registers all sp-* elements
 **Interactive constants and types**: `spectreDropdownPlacements`,
 `spectreToastVariants`, `spectreTooltipPlacements`, `SpectreDropdownPlacement`,
 `SpectreToastVariant`, `SpectreTooltipPlacement`, `SpectreFooterProps`,
-`SpectreNavProps`, `SpectreSidebarProps`, `SpectreDropdownProps`,
-`SpectreModalProps`, `SpectreToastProps`, `SpectreTooltipProps`
+`SpectreNavProps`, `SpectreSidebarProps`, `SpectreSidebarToggleProps`,
+`SpectreDropdownProps`, `SpectreModalProps`, `SpectreToastProps`,
+`SpectreTooltipProps`
 
 ### Subpath entry points
 
 Each entry point registers only that component and exports only its surface:
 
-| Entry point        | Registers         | Key exports                                                                              |
-| ------------------ | ----------------- | ---------------------------------------------------------------------------------------- |
-| `.../button`       | `sp-button`       | `defineSpectreButton`, `SpectreButtonElement`, button constants and types                |
-| `.../input`        | `sp-input`        | `defineSpectreInput`, `SpectreInputElement`, input constants and types                   |
-| `.../textarea`     | `sp-textarea`     | `defineSpectreTextarea`, `SpectreTextareaElement`, `SpectreTextareaProps`                |
-| `.../select`       | `sp-select`       | `defineSpectreSelect`, `SpectreSelectElement`, `SpectreSelectProps`                      |
-| `.../checkbox`     | `sp-checkbox`     | `defineSpectreCheckbox`, `SpectreCheckboxElement`, `SpectreCheckboxProps`                |
-| `.../radio`        | `sp-radio`        | `defineSpectreRadio`, `SpectreRadioElement`, `SpectreRadioProps`                         |
-| `.../label`        | `sp-label`        | `defineSpectreLabel`, `SpectreLabelElement`, `SpectreLabelProps`                         |
-| `.../fieldset`     | `sp-fieldset`     | `defineSpectreFieldset`, `SpectreFieldsetElement`, `SpectreFieldsetProps`                |
-| `.../badge`        | `sp-badge`        | `defineSpectreBadge`, `SpectreBadgeElement`, badge constants and types                   |
-| `.../card`         | `sp-card`         | `defineSpectreCard`, `SpectreCardElement`, card constants and types                      |
-| `.../icon-box`     | `sp-icon-box`     | `defineSpectreIconBox`, `SpectreIconBoxElement`, icon-box constants and types            |
-| `.../rating`       | `sp-rating`       | `defineSpectreRating`, `SpectreRatingElement`, rating constants and types                |
-| `.../testimonial`  | `sp-testimonial`  | `defineSpectreTestimonial`, `SpectreTestimonialElement`, testimonial constants and types |
-| `.../alert`        | `sp-alert`        | `defineSpectreAlert`, `SpectreAlertElement`, alert constants and types                   |
-| `.../avatar`       | `sp-avatar`       | `defineSpectreAvatar`, `SpectreAvatarElement`, avatar constants and types                |
-| `.../spinner`      | `sp-spinner`      | `defineSpectreSpinner`, `SpectreSpinnerElement`, spinner constants and types             |
-| `.../tag`          | `sp-tag`          | `defineSpectreTag`, `SpectreTagElement`, tag constants and types                         |
-| `.../pricing-card` | `sp-pricing-card` | `defineSpectrePricingCard`, `SpectrePricingCardElement`, `SpectrePricingCardProps`       |
-| `.../container`    | `sp-container`    | `defineSpectreContainer`, `SpectreContainerElement`, container constants and types       |
-| `.../grid`         | `sp-grid`         | `defineSpectreGrid`, `SpectreGridElement`, grid constants and types                      |
-| `.../section`      | `sp-section`      | `defineSpectreSection`, `SpectreSectionElement`, `SpectreSectionProps`                   |
-| `.../stack`        | `sp-stack`        | `defineSpectreStack`, `SpectreStackElement`, stack constants and types                   |
-| `.../nav`          | `sp-nav`          | `defineSpectreNav`, `SpectreNavElement`, `SpectreNavProps`                               |
-| `.../nav-item`     | `sp-nav-item`     | `defineSpectreNavItem`, `SpectreNavItemElement`, `SpectreNavItemProps`                   |
-| `.../sidebar`      | `sp-sidebar`      | `defineSpectreSidebar`, `SpectreSidebarElement`, `SpectreSidebarProps`                   |
-| `.../dropdown`     | `sp-dropdown`     | `defineSpectreDropdown`, `SpectreDropdownElement`, dropdown constants and types          |
-| `.../footer`       | `sp-footer`       | `defineSpectreFooter`, `SpectreFooterElement`, `SpectreFooterProps`                      |
-| `.../modal`        | `sp-modal`        | `defineSpectreModal`, `SpectreModalElement`, `SpectreModalProps`                         |
-| `.../toast`        | `sp-toast`        | `defineSpectreToast`, `SpectreToastElement`, toast constants and types                   |
-| `.../tooltip`      | `sp-tooltip`      | `defineSpectreTooltip`, `SpectreTooltipElement`, tooltip constants and types             |
+| Entry point          | Registers           | Key exports                                                                              |
+| -------------------- | ------------------- | ---------------------------------------------------------------------------------------- |
+| `.../button`         | `sp-button`         | `defineSpectreButton`, `SpectreButtonElement`, button constants and types                |
+| `.../input`          | `sp-input`          | `defineSpectreInput`, `SpectreInputElement`, input constants and types                   |
+| `.../textarea`       | `sp-textarea`       | `defineSpectreTextarea`, `SpectreTextareaElement`, `SpectreTextareaProps`                |
+| `.../select`         | `sp-select`         | `defineSpectreSelect`, `SpectreSelectElement`, `SpectreSelectProps`                      |
+| `.../checkbox`       | `sp-checkbox`       | `defineSpectreCheckbox`, `SpectreCheckboxElement`, `SpectreCheckboxProps`                |
+| `.../radio`          | `sp-radio`          | `defineSpectreRadio`, `SpectreRadioElement`, `SpectreRadioProps`                         |
+| `.../label`          | `sp-label`          | `defineSpectreLabel`, `SpectreLabelElement`, `SpectreLabelProps`                         |
+| `.../fieldset`       | `sp-fieldset`       | `defineSpectreFieldset`, `SpectreFieldsetElement`, `SpectreFieldsetProps`                |
+| `.../badge`          | `sp-badge`          | `defineSpectreBadge`, `SpectreBadgeElement`, badge constants and types                   |
+| `.../card`           | `sp-card`           | `defineSpectreCard`, `SpectreCardElement`, card constants and types                      |
+| `.../icon-box`       | `sp-icon-box`       | `defineSpectreIconBox`, `SpectreIconBoxElement`, icon-box constants and types            |
+| `.../rating`         | `sp-rating`         | `defineSpectreRating`, `SpectreRatingElement`, rating constants and types                |
+| `.../testimonial`    | `sp-testimonial`    | `defineSpectreTestimonial`, `SpectreTestimonialElement`, testimonial constants and types |
+| `.../alert`          | `sp-alert`          | `defineSpectreAlert`, `SpectreAlertElement`, alert constants and types                   |
+| `.../avatar`         | `sp-avatar`         | `defineSpectreAvatar`, `SpectreAvatarElement`, avatar constants and types                |
+| `.../spinner`        | `sp-spinner`        | `defineSpectreSpinner`, `SpectreSpinnerElement`, spinner constants and types             |
+| `.../tag`            | `sp-tag`            | `defineSpectreTag`, `SpectreTagElement`, tag constants and types                         |
+| `.../pricing-card`   | `sp-pricing-card`   | `defineSpectrePricingCard`, `SpectrePricingCardElement`, `SpectrePricingCardProps`       |
+| `.../container`      | `sp-container`      | `defineSpectreContainer`, `SpectreContainerElement`, container constants and types       |
+| `.../grid`           | `sp-grid`           | `defineSpectreGrid`, `SpectreGridElement`, grid constants and types                      |
+| `.../section`        | `sp-section`        | `defineSpectreSection`, `SpectreSectionElement`, `SpectreSectionProps`                   |
+| `.../stack`          | `sp-stack`          | `defineSpectreStack`, `SpectreStackElement`, stack constants and types                   |
+| `.../nav`            | `sp-nav`            | `defineSpectreNav`, `SpectreNavElement`, `SpectreNavProps`                               |
+| `.../nav-item`       | `sp-nav-item`       | `defineSpectreNavItem`, `SpectreNavItemElement`, `SpectreNavItemProps`                   |
+| `.../sidebar`        | `sp-sidebar`        | `defineSpectreSidebar`, `SpectreSidebarElement`, `SpectreSidebarProps`                   |
+| `.../sidebar-link`   | `sp-sidebar-link`   | `defineSpectreSidebarLink`, `SpectreSidebarLinkElement`, `SpectreSidebarLinkProps`       |
+| `.../sidebar-toggle` | `sp-sidebar-toggle` | `defineSpectreSidebarToggle`, `SpectreSidebarToggleElement`, `SpectreSidebarToggleProps` |
+| `.../dropdown`       | `sp-dropdown`       | `defineSpectreDropdown`, `SpectreDropdownElement`, dropdown constants and types          |
+| `.../footer`         | `sp-footer`         | `defineSpectreFooter`, `SpectreFooterElement`, `SpectreFooterProps`                      |
+| `.../footer-link`    | `sp-footer-link`    | `defineSpectreFooterLink`, `SpectreFooterLinkElement`, `SpectreFooterLinkProps`          |
+| `.../footer-chip`    | `sp-footer-chip`    | `defineSpectreFooterChip`, `SpectreFooterChipElement`, `SpectreFooterChipProps`          |
+| `.../modal`          | `sp-modal`          | `defineSpectreModal`, `SpectreModalElement`, `SpectreModalProps`                         |
+| `.../toast`          | `sp-toast`          | `defineSpectreToast`, `SpectreToastElement`, toast constants and types                   |
+| `.../tooltip`        | `sp-tooltip`        | `defineSpectreTooltip`, `SpectreTooltipElement`, tooltip constants and types             |
 
 Size constants are shared between input, textarea, and select. Import
 `spectreInputSizes` / `SpectreInputSize` from `.../input` when needed alongside