Spectrum Web Components

https://opensource.adobe.com/spectrum-web-components/
Admin
Spectrum Web Components is an implementation of Adobe's design system using web components that work...
Tokens:394,337
Snippets:3,355
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install @spectrum-web-components/swatch

Source: https://opensource.adobe.com/spectrum-web-components/components/swatch

Install the swatch component package.

```bash
yarn add @spectrum-web-components/swatch
```

--------------------------------

### Install @spectrum-web-components/search

Source: https://opensource.adobe.com/spectrum-web-components/components/search

Install the package with yarn.

```bash
yarn add @spectrum-web-components/search
```

--------------------------------

### Install @spectrum-web-components/alert-banner

Source: https://opensource.adobe.com/spectrum-web-components/components/alert-banner

Install the alert-banner package.

```bash
yarn add @spectrum-web-components/alert-banner
```

--------------------------------

### Install @spectrum-web-components/shared

Source: https://opensource.adobe.com/spectrum-web-components/tools/shared

Install the @spectrum-web-components/shared package with yarn.

```bash
yarn add @spectrum-web-components/shared
```

--------------------------------

### Install @spectrum-web-components/overlay

Source: https://opensource.adobe.com/spectrum-web-components/components/imperative-api

Install the overlay package using yarn.

```bash
yarn add @spectrum-web-components/overlay
```

--------------------------------

### Install sp-action-menu

Source: https://opensource.adobe.com/spectrum-web-components/components/action-menu

Install the @spectrum-web-components/action-menu package via yarn.

```bash
yarn add @spectrum-web-components/action-menu

```

--------------------------------

### Install sp-tray with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/tray

Install the @spectrum-web-components/tray package using yarn.

```bash
yarn add @spectrum-web-components/tray
```

--------------------------------

### Installation

Source: https://opensource.adobe.com/spectrum-web-components/components/coach-indicator

Install the @spectrum-web-components/coachmark package to use sp-coach-indicator.

```APIDOC
## Installation

### Install Package
```
yarn add @spectrum-web-components/coachmark
```

### Import Component
```
import '@spectrum-web-components/coachmark/sp-coach-indicator.js';
```

### Import Base Class
```
import { CoachIndicator } from '@spectrum-web-components/coachmark';
```
```

--------------------------------

### Install @spectrum-web-components/icons-ui

Source: https://opensource.adobe.com/spectrum-web-components/components/icons-ui

Install the package via yarn.

```bash
yarn add @spectrum-web-components/icons-ui

```

--------------------------------

### Install @spectrum-web-components/theme

Source: https://opensource.adobe.com/spectrum-web-components/tools/core-tokens

Install the theme package via yarn.

```bash
yarn add @spectrum-web-components/theme

```

--------------------------------

### Install @spectrum-web-components/action-group

Source: https://opensource.adobe.com/spectrum-web-components/components/action-group

Install the action-group package.

```shell
yarn add @spectrum-web-components/action-group

```

--------------------------------

### placement property example

Source: https://opensource.adobe.com/spectrum-web-components/components/overlay

Shows how to set the placement property to 'right-start' to position the overlay to the right of the trigger, aligned with its start edge.

```html
<sp-button id="trigger">Overlay Trigger</sp-button>

<sp-overlay trigger="trigger@click" placement="right-start">
  <sp-popover>
    <sp-dialog>
      <h2 slot="heading">Clicking opens this popover...</h2>
      <p>The overlay is placed to the right of the trigger.</p>
    </sp-dialog>
  </sp-popover>
</sp-overlay>
```

--------------------------------

### Install sp-help-text with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/help-text

Install the @spectrum-web-components/help-text package using yarn.

```bash
yarn add @spectrum-web-components/help-text

```

--------------------------------

### Install @spectrum-web-components/tooltip with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/tooltip-directive

Install the tooltip package using yarn.

```bash
yarn add @spectrum-web-components/tooltip

```

--------------------------------

### Install @spectrum-web-components/switch

Source: https://opensource.adobe.com/spectrum-web-components/components/switch

Install the switch component package via yarn.

```bash
yarn add @spectrum-web-components/switch

```

--------------------------------

### Install @spectrum-web-components/status-light

Source: https://opensource.adobe.com/spectrum-web-components/components/status-light

Install the @spectrum-web-components/status-light package via yarn.

```bash
yarn add @spectrum-web-components/status-light

```

--------------------------------

### Install @spectrum-web-components/underlay with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/underlay

Install the underlay package using yarn.

```bash
yarn add @spectrum-web-components/underlay

```

--------------------------------

### Install sp-grid with yarn

Source: https://opensource.adobe.com/spectrum-web-components/tools/grid

Install the @spectrum-web-components/grid package using yarn.

```bash
yarn add @spectrum-web-components/grid
```

--------------------------------

### Install sp-toast with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/toast

Install the @spectrum-web-components/toast package using yarn.

```bash
yarn add @spectrum-web-components/toast
```

--------------------------------

### Install @spectrum-web-components/combobox

Source: https://opensource.adobe.com/spectrum-web-components/components/combobox

Install the combobox package via yarn.

```bash
yarn add @spectrum-web-components/combobox

```

--------------------------------

### Install @spectrum-web-components/iconset

Source: https://opensource.adobe.com/spectrum-web-components/components/iconset

Install the iconset package via yarn.

```bash
yarn add @spectrum-web-components/iconset

```

--------------------------------

### Install @spectrum-web-components/bundle with yarn

Source: https://opensource.adobe.com/spectrum-web-components/tools/bundle

Adds the bundle package as a dependency. Use this to get started with prototyping using all Spectrum Web Components.

```bash
yarn add @spectrum-web-components/bundle
```

--------------------------------

### Install @spectrum-web-components/reactive-controllers

Source: https://opensource.adobe.com/spectrum-web-components/tools/dependency-manager

Install the package containing the DependencyManagerController.

```bash
yarn add @spectrum-web-components/reactive-controllers
```

--------------------------------

### Basic HTML example with sp-theme and sp-button

Source: https://opensource.adobe.com/spectrum-web-components/getting-started

This HTML snippet demonstrates the minimal setup for using Spectrum Web Components. It includes a commented-out script tag for the bundle package (remove comments for use) and an sp-theme element with scale="large" and color="dark" that wraps an sp-button. The sp-button triggers a JavaScript alert when clicked. This example requires the sp-button and sp-theme components.

```html
<!-- remove comments for purposes beyond this documentation site
<script
    src="https://jspm.dev/@spectrum-web-components/bundle/elements.js"
    type="module" async
></script>
-->

<sp-theme scale="large" color="dark">
  <!-- Insert content requiring theme application here. -->
  <sp-button onclick="alert('I was clicked');">Click me!</sp-button>
  <!-- End content requiring theme application. -->
</sp-theme>
```

--------------------------------

### Install sp-picker with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/picker

Install the @spectrum-web-components/picker package using yarn.

```bash
yarn add @spectrum-web-components/picker
```

--------------------------------

### Install @spectrum-web-components/button

Source: https://opensource.adobe.com/spectrum-web-components/components/clear-button

Install the package containing sp-clear-button.

```bash
yarn add @spectrum-web-components/button
```

--------------------------------

### Install top-nav package

Source: https://opensource.adobe.com/spectrum-web-components/components/top-nav-item

Install the @spectrum-web-components/top-nav package via yarn.

```bash
yarn add @spectrum-web-components/top-nav
```

--------------------------------

### Run local documentation server with yarn docs:start

Source: https://opensource.adobe.com/spectrum-web-components/guides/adding-component

Command to start the local documentation server for developing component documentation.

```bash
yarn docs:start
```

--------------------------------

### Install @spectrum-web-components/icons

Source: https://opensource.adobe.com/spectrum-web-components/components/icons

Install the icons package via yarn.

```bash
yarn add @spectrum-web-components/icons

```

--------------------------------

### Install opacity-checkerboard with yarn

Source: https://opensource.adobe.com/spectrum-web-components/tools/opacity-checkerboard

Install the @spectrum-web-components/opacity-checkerboard package using yarn.

```bash
yarn add @spectrum-web-components/opacity-checkerboard
```

--------------------------------

### Install sp-meter with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/meter

Install the @spectrum-web-components/meter package using yarn.

```bash
yarn add @spectrum-web-components/meter
```

--------------------------------

### Install sp-card with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/card

Install the @spectrum-web-components/card package using yarn.

```bash
yarn add @spectrum-web-components/card

```

--------------------------------

### Install sp-dropzone with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/dropzone

Install the @spectrum-web-components/dropzone package using yarn.

```bash
yarn add @spectrum-web-components/dropzone
```

--------------------------------

### Default tabs with icons

Source: https://opensource.adobe.com/spectrum-web-components/components/tabs

Base tabs example with icons in each tab. Use as a starting point for customizing tabs.

```html
<sp-tabs selected="1">
  <sp-tab label="Tab 1" value="1">
    <sp-icon-checkmark slot="icon"></sp-icon-checkmark>
  </sp-tab>
  <sp-tab label="Tab 2" value="2">
    <sp-icon-close slot="icon"></sp-icon-close>
  </sp-tab>
  <sp-tab label="Tab 3" value="3">
    <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
  </sp-tab>
  <sp-tab label="Tab 4" value="4">
    <sp-icon-help slot="icon"></sp-icon-help>
  </sp-tab>
  <sp-tab-panel value="1">Content for Tab 1</sp-tab-panel>
  <sp-tab-panel value="2">Content for Tab 2</sp-tab-panel>
  <sp-tab-panel value="3">Content for Tab 3</sp-tab-panel>
  <sp-tab-panel value="4">Content for Tab 4</sp-tab-panel>
</sp-tabs>
```

--------------------------------

### Install sp-color-handle with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/color-handle

Install the @spectrum-web-components/color-handle package using yarn.

```bash
yarn add @spectrum-web-components/color-handle
```

--------------------------------

### Install @spectrum-web-components/button-group

Source: https://opensource.adobe.com/spectrum-web-components/components/button-group

Install the @spectrum-web-components/button-group package using yarn.

```bash
yarn add @spectrum-web-components/button-group

```

--------------------------------

### Install @spectrum-web-components/menu

Source: https://opensource.adobe.com/spectrum-web-components/components/menu-group

Install the menu package which includes sp-menu-group.

```bash
yarn add @spectrum-web-components/menu

```

--------------------------------

### Install @spectrum-web-components/table

Source: https://opensource.adobe.com/spectrum-web-components/components/table

Install the table component package via yarn.

```bash
yarn add @spectrum-web-components/table
```

--------------------------------

### Install sp-icon with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/icon

Install the @spectrum-web-components/icon package using yarn.

```bash
yarn add @spectrum-web-components/icon

```

--------------------------------

### Install sp-picker-button with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/picker-button

Install the @spectrum-web-components/picker-button package using yarn.

```bash
yarn add @spectrum-web-components/picker-button

```

--------------------------------

### Install @spectrum-web-components/avatar

Source: https://opensource.adobe.com/spectrum-web-components/components/avatar

Install the avatar component package with yarn.

```bash
yarn add @spectrum-web-components/avatar
```

--------------------------------

### Incomplete icons variant example

Source: https://opensource.adobe.com/spectrum-web-components/components/tabs

Incomplete snippet: starts an icons variant example, but the source cuts off mid-tag. The provided code is incomplete and cannot be used as-is.

```html
<sp-tabs selected="1">
  <sp-tab label="Tab 1" value="1">
```

--------------------------------

### Install @spectrum-web-components/action-bar

Source: https://opensource.adobe.com/spectrum-web-components/components/action-bar

Install the action-bar package via yarn.

```shell
yarn add @spectrum-web-components/action-bar

```

--------------------------------

### Install sp-truncated with yarn

Source: https://opensource.adobe.com/spectrum-web-components/tools/truncated

Install the @spectrum-web-components/truncated package using yarn.

```bash
yarn add @spectrum-web-components/truncated
```

--------------------------------

### Install sp-tags with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/tags

Install the @spectrum-web-components/tags package using yarn.

```bash
yarn add @spectrum-web-components/tags
```

--------------------------------

### Install sp-asset with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/asset

Install the @spectrum-web-components/asset package using yarn.

```bash
yarn add @spectrum-web-components/asset

```

--------------------------------

### Install sp-progress-circle with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/progress-circle

Install the component package using yarn.

```bash
yarn add @spectrum-web-components/progress-circle

```

--------------------------------

### Install icons-workflow package

Source: https://opensource.adobe.com/spectrum-web-components/components/icons-workflow

Install the @spectrum-web-components/icons-workflow package using yarn.

```bash
yarn add @spectrum-web-components/icons-workflow

```

--------------------------------

### Install sp-popover with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/popover

Install the @spectrum-web-components/popover package using yarn.

```bash
yarn add @spectrum-web-components/popover

```

--------------------------------

### Install @spectrum-web-components/color-loupe with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/color-loupe

Install the color-loupe package using yarn.

```bash
yarn add @spectrum-web-components/color-loupe
```

--------------------------------

### Install @spectrum-web-components/color-wheel

Source: https://opensource.adobe.com/spectrum-web-components/components/color-wheel

Install the color-wheel component package via yarn.

```bash
yarn add @spectrum-web-components/color-wheel
```

--------------------------------

### Install action-button package

Source: https://opensource.adobe.com/spectrum-web-components/components/action-button

Install the @spectrum-web-components/action-button package via yarn.

```bash
yarn add @spectrum-web-components/action-button
```

--------------------------------

### Install @spectrum-web-components/breadcrumbs

Source: https://opensource.adobe.com/spectrum-web-components/components/breadcrumb-item

Install the breadcrumbs package via yarn.

```bash
yarn add @spectrum-web-components/breadcrumbs
```

--------------------------------

### Install @spectrum-web-components/base with yarn

Source: https://opensource.adobe.com/spectrum-web-components/tools/base

Install the base package using yarn. Run this in your project directory to add the dependency.

```bash
yarn add @spectrum-web-components/base

```

--------------------------------

### Install @spectrum-web-components/progress-bar

Source: https://opensource.adobe.com/spectrum-web-components/components/progress-bar

Install the progress-bar component package via yarn.

```bash
yarn add @spectrum-web-components/progress-bar
```

--------------------------------

### Install sp-divider with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/divider

Install the @spectrum-web-components/divider package using yarn.

```bash
yarn add @spectrum-web-components/divider
```

--------------------------------

### Install @spectrum-web-components/accordion with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/accordion-item

Install the accordion package using yarn.

```bash
yarn add @spectrum-web-components/accordion
```

--------------------------------

### Size token migration example

Source: https://opensource.adobe.com/spectrum-web-components/tools/core-tokens

Shows how to migrate size tokens using the --swc-scale-factor custom property. The example replaces --spectrum-global-dimension-size-175 and --spectrum-global-dimension-size-250 with calc expressions using the scale factor.

```css
- padding: var(--spectrum-global-dimension-size-175) var(--spectrum-global-dimension-size-250);
+ padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);

```

--------------------------------

### Install sp-contextual-help with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/contextual-help

Adds the @spectrum-web-components/contextual-help package to your project.

```bash
yarn add @spectrum-web-components/contextual-help
```

--------------------------------

### Install @spectrum-web-components/infield-button with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/infield-button

Install the package to use the `<sp-infield-button>` component.

```shell
yarn add @spectrum-web-components/infield-button


```

--------------------------------

### Overlay.open usage example

Source: https://opensource.adobe.com/spectrum-web-components/components/imperative-api

An async example that opens an overlay with content and options, then appends the returned overlay element to the document body.

```typescript
(async () => {
  const content = document.querySelector('#content');
  const options = {
    offset: 0,
    placement: 'bottom',
    trigger: document.querySelector('#trigger'),
    type: 'auto',
  };
  const overlay = await Overlay.open(content, options);
  document.body.append(overlay);
})();
```

--------------------------------

### Install @spectrum-web-components/dialog

Source: https://opensource.adobe.com/spectrum-web-components/components/dialog-wrapper

Install the dialog package via yarn to use sp-dialog-wrapper.

```bash
yarn add @spectrum-web-components/dialog
```

--------------------------------

### Install @spectrum-web-components/tabs with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/tab-panel

Install the tabs package which includes sp-tab-panel.

```bash
yarn add @spectrum-web-components/tabs
```

--------------------------------

### Install sp-illustrated-message with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/illustrated-message

Install the @spectrum-web-components/illustrated-message package using yarn.

```bash
yarn add @spectrum-web-components/illustrated-message
```

--------------------------------

### Side (Start Aligned) label

Source: https://opensource.adobe.com/spectrum-web-components/components/field-label

Displays the field label inline with the input using side-aligned="start", aligning the text to the start of the flow of text. Includes examples with a textfield and a picker, where the picker example uses the required attribute.

```html
<sp-field-label for="lifestory-1" side-aligned="start" style="width: 120px">
  Life Story
</sp-field-label>
<sp-textfield
  placeholder="Enter your life story"
  id="lifestory-1"
></sp-textfield>
<br />
<br />
<sp-field-label
  for="birth-place-1"
  side-aligned="start"
  required
  style="width: 120px"
>
  Birthplace
</sp-field-label>
<sp-picker id="birth-place-1">
  <span slot="label">Choose a location:</span>
  <sp-menu-item>Istanbul</sp-menu-item>
  <sp-menu-item>London</sp-menu-item>
  <sp-menu-item>Maputo</sp-menu-item>
  <sp-menu-item>Melbourne</sp-menu-item>
  <sp-menu-item>New York</sp-menu-item>
  <sp-menu-item>San Francisco</sp-menu-item>
  <sp-menu-item>Santiago</sp-menu-item>
  <sp-menu-item>Tokyo</sp-menu-item>
</sp-picker>
```

--------------------------------

### Basic sp-action-bar example

Source: https://opensource.adobe.com/spectrum-web-components/components/action-bar

Basic example of an sp-action-bar in an open state with action buttons.

```markup
<sp-action-bar open>
  2 selected
  <sp-action-button slot="buttons" label="Edit">
    <sp-icon-edit slot="icon"></sp-icon-edit>
  </sp-action-button>
  <sp-action-button slot="buttons" label="More">
    <sp-icon-more slot="icon"></sp-icon-more>
  </sp-action-button>
</sp-action-bar>

```

--------------------------------

### Install color-slider with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/color-slider

Install the @spectrum-web-components/color-slider package using yarn.

```bash
yarn add @spectrum-web-components/color-slider
```

--------------------------------

### Install Agent Skills with npx skills add

Source: https://opensource.adobe.com/spectrum-web-components/build-with-ai

Run this command to install the Agent Skills for Spectrum Web Components. You will be prompted to select the skills you want to install from the list.

```bash
npx skills add https://spectrum-web-components.adobe.com
```

--------------------------------

### Example: Using trigger directive

Source: https://opensource.adobe.com/spectrum-web-components/components/trigger-directive

Pass a TemplateResult to the trigger() directive to render content when the overlay opens and remove it after closing. The example includes an sp-button with trigger options and a render setup.

```html
<div id="root"></div>

<script type="module">
    import { trigger } from '@spectrum-web-components/overlay';
    import { html, render } from 'lit-html';

    const renderOverlayContent = () => html`
        <sp-popover>
            <p>
                This content will display within the Overlay and
                <em>only</em>
                be on the DOM when the Overlay is open.
            </p>
        </sp-popover>
    `;

    const template = html`
        <sp-button
            ${trigger(renderOverlayContent, {
                open: false,
                triggerInteraction: 'click',
                overlayOptions: {
                    placement: 'bottom',
                    offset: 6,
                },
            })}
        >
            Trigger
        </sp-button>
    `;

    customElements.whenDefined('code-example').then(() => {
        Promise.all(
            [...document.querySelectorAll('code-example')].map(
                (example) => example.updateComplete
            )
        ).then(() => {
            const appRoot = document.querySelector('#root');
            appRoot.innerHTML = '';
            render(template, appRoot);
        });
    });
</script>
```

--------------------------------

### Basic sp-asset example with image

Source: https://opensource.adobe.com/spectrum-web-components/components/asset

Example of using sp-asset to display an image, with a fixed height and centered image.

```html
<sp-asset style="height: 128px">
  <img src="https://picsum.photos/500/500" alt="Demo Image" />
</sp-asset>

```

--------------------------------

### Install sp-color-field with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/color-field

Install the @spectrum-web-components/color-field package using yarn.

```bash
yarn add @spectrum-web-components/color-field
```

--------------------------------

### Install slider package with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/slider-handle

Install the @spectrum-web-components/slider package using yarn.

```bash
yarn add @spectrum-web-components/slider

```

--------------------------------

### Install @spectrum-web-components/styles with yarn

Source: https://opensource.adobe.com/spectrum-web-components/tools/styles

Use this command to install the styles package via yarn. This is the recommended way to add the package to your project.

```bash
yarn add @spectrum-web-components/styles
```

--------------------------------

### Install textfield package with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/textarea

Install the @spectrum-web-components/textfield package using yarn.

```bash
yarn add @spectrum-web-components/textfield
```

--------------------------------

### Install @spectrum-web-components/sidenav with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/sidenav-item

Install the sidenav package using yarn to use sp-sidenav-item.

```bash
yarn add @spectrum-web-components/sidenav
```

--------------------------------

### Install sp-number-field with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/number-field

Install the @spectrum-web-components/number-field package using yarn.

```bash
yarn add @spectrum-web-components/number-field

```

--------------------------------

### Install and import @spectrum-web-components/tabs

Source: https://opensource.adobe.com/spectrum-web-components/components/tab

Install the Spectrum Web Components tabs package, import the side effectful registration for `sp-tab`, and import the `Tab` base class for type usage or extension.

```bash
yarn add @spectrum-web-components/tabs
```

```js
import '@spectrum-web-components/tabs/sp-tab.js';
```

```js
import { Tab } from '@spectrum-web-components/tabs';
```

--------------------------------

### Token usage example in a non-web-component context

Source: https://opensource.adobe.com/spectrum-web-components/tools/styles

Example showing how custom properties from imported token files work together. The values for `--spectrum-gray-100`, `--spectrum-gray-800`, and component sizes vary depending on which color and scale files are loaded.

```css
/* import appropriate tokens files */
@import '@spectrum-web-components/styles/tokens-v2/light-vars.css';
@import '@spectrum-web-components/styles/tokens-v2/medium-vars.css';
@import '@spectrum-web-components/styles/tokens-v2/global-vars.css';

.my-component {
  /* defined in global-vars.css */
  border-radius: var(--spectrum-corner-radius-medium-size-small);
  border-width: var(--spectrum-border-width-100);
  color: var(
    --spectrum-neutral-content-color-default
  ); /* uses --spectrum-gray-800, which is defined differently depending whether light or dark vars are loaded */

  /* defined in light-vars.css, defined differently in dark-vars.css */
  background-color: var(--spectrum-gray-100);
  border-color: var(--spectrum-gray-800);

  /* defined in medium-vars.css, defined differently in large-vars.css */
  padding-inline: var(--spectrum-component-edge-to-text-75);
  padding-block: var(--spectrum-component-top-to-text-75);
  min-block-size: var(--spectrum-component-height-75);
}
```

--------------------------------

### Install radio package

Source: https://opensource.adobe.com/spectrum-web-components/components/radio

Install the radio component package using yarn.

```bash
yarn add @spectrum-web-components/radio
```

--------------------------------

### Install @spectrum-web-components/checkbox with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/checkbox

Install the checkbox package using yarn. This is the first step to using the sp-checkbox component.

```bash
yarn add @spectrum-web-components/checkbox
```

--------------------------------

### Full sp-grid example with custom rendering

Source: https://opensource.adobe.com/spectrum-web-components/tools/grid

Complete example of an accessible sp-grid. Includes HTML markup and a script that initializes grid items, sets ARIA attributes, and defines a custom renderItem function that creates sp-card elements with images and descriptions. Demonstrates selection handling and focusableSelector usage.

```html
<sp-grid
    id="grid-demo"
    style="
        margin:
            calc(-1 * var(--spectrum-spacing-500))
            calc(-1 * var(--spectrum-spacing-600))
    "
></sp-grid>
```

```javascript
<script type="module">
    const initItems = (count) => {
        const total = count;
        const items = [];
        while (count) {
            count--;
            items.push({
                name: String(total - count),
                date: count,
            });
        }
        return items;
    };
    const initGrid = () => {
        const grid = document.querySelector('#grid-demo');
        grid.items = initItems(100);
        grid.focusableSelector = 'sp-card';
        grid.gap = '10px';
        grid.itemSize = {
            width: 200,
            height: 300,
        };
        grid.role = 'grid';
        grid.ariaLabel = 'Select images';
        grid.ariaMultiSelectable = 'true';
        grid.ariaRowCount = `${grid.items.length}`;
        grid.ariaColCount = 1;
        grid.selectedItems = [];

        grid.renderItem = (
            item,
            index,
            selected
        ) => {
            const card = document.createElement('sp-card');
            const img = document.createElement('img');
            const description = document.createElement('div');
            const footer = document.createElement('div');
            card.toggles = true;
            card.variant = 'quiet';
            card.heading = `Card Heading ${index}`
            card.subheading = 'JPG Photo'
            card.style = 'contain: strict; padding: 1px;'
            card.value = `card-${index}`
            card.selected = grid.selectedItems.includes(card.value);
            card.key = index;
            card.role = 'row';
            card.label = `Card Heading ${index}`;
            card.ariaSelected = grid.selectedItems.includes(card.value);
            card.ariaRowIndex = `${index + 1}`;
            card.addEventListener('change', () => {
                if(grid.selectedItems.includes(card.value)) {
                    grid.selectedItems = grid.selectedItems.filter(item => item !== card.value);
                } else {
                    grid.selectedItems.push(card.value);
                }
            });
            img.alt = '';
            img.slot = 'preview';
            img.src = `https://picsum.photos/id/${index}/200/300`;
            img.decoding = 'async';
            description.slot = 'description';
            description.textContent = '10/15/18';
            footer.slot = 'footer';
            footer.textContent = 'Footer';
            card.append(img, description, footer);
            return card;
        }
    };
    customElements.whenDefined('sp-grid').then(() => {
        initGrid();
    });
</script>
```

--------------------------------

### Basic sp-tray anatomy example

Source: https://opensource.adobe.com/spectrum-web-components/components/tray

Shows a tray with a dialog inside an overlay-trigger modal.

```html
<overlay-trigger type="modal">
  <sp-button slot="trigger" variant="secondary">Toggle tray</sp-button>
  <sp-tray slot="click-content">
    <sp-dialog size="s" dismissable>
      <h2 slot="heading">New Messages</h2>
      You have 5 new messages.
    </sp-dialog>
  </sp-tray>
</overlay-trigger>
```

--------------------------------

### sp-coachmark complete anatomy example

Source: https://opensource.adobe.com/spectrum-web-components/components/coachmark

Complete anatomy example of `<sp-coachmark>` with title, content, asset, actions, and navigation controls.

```html
<sp-coachmark
  current-step="2"
  total-steps="8"
  open
  primary-cta="Next"
  secondary-cta="Previous"
>
  <!-- Title -->
  <div slot="title">Welcome to the Tour</div>

  <!-- Main content -->
  <div slot="content">
    This coachmark demonstrates the various parts that make up the component.
  </div>

  <!-- Media content -->
  <img
    slot="asset"
    src="https://picsum.photos/id/237/200/300"
    alt="Feature demonstration"
  />

  <!-- Action menu -->
  <sp-action-menu
    slot="actions"
    label="More Actions"
    placement="bottom-end"
    quiet
  >
    <sp-menu-item>Skip tour</sp-menu-item>
    <sp-menu-item>Restart tour</sp-menu-item>
  </sp-action-menu>
</sp-coachmark>
```

--------------------------------

### Install sp-thumbnail with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/thumbnail

Adds the @spectrum-web-components/thumbnail package to the project.

```bash
yarn add @spectrum-web-components/thumbnail
```

--------------------------------

### Token usage example: static styles = [headingStyles]

Source: https://opensource.adobe.com/spectrum-web-components/tools/styles

Shows how to apply heading styles to a component using static styles. The example is a single line of JavaScript/TypeScript code.

```javascript
static styles = [headingStyles];
```

--------------------------------

### Install @swc-react/button with npm or yarn

Source: https://opensource.adobe.com/spectrum-web-components/using-swc-react

Install the swc-react wrapper component for the SWC Button. The corresponding SWC component is automatically installed as a dependency. Each wrapper component has the same version number as its corresponding SWC component.

```bash
npm install --save @swc-react/button
```

```bash
yarn add --save @swc-react/button
```

--------------------------------

### Install sp-link with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/link

Adds the @spectrum-web-components/link package to the project.

```bash
yarn add @spectrum-web-components/link
```

--------------------------------

### Install sp-badge with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/badge

Adds the @spectrum-web-components/badge package to your project.

```bash
yarn add @spectrum-web-components/badge
```

--------------------------------

### Color token migration example

Source: https://opensource.adobe.com/spectrum-web-components/tools/core-tokens

Shows a direct conversion from a removed Spectrum Vars color custom property to a Core Token. The example replaces --spectrum-global-color-seafoam-600 with --spectrum-seafoam-900.

```css
- border-color: var(--spectrum-global-color-seafoam-600);
+ border-color: var(--spectrum-seafoam-900);

```

--------------------------------

### Pointer interaction example for sp-color-area

Source: https://opensource.adobe.com/spectrum-web-components/components/color-area

Illustrates pointer interaction support (mouse and touch) on the color area. Note: the example as shown is incomplete; it is displayed verbatim in the source.

```html
<sp-color-area @pointerdown="${(event)" ="></sp-color-area>
```

--------------------------------

### File variant examples

Source: https://opensource.adobe.com/spectrum-web-components/components/asset

Examples of sp-asset with variant="file", with and without a label.

```html
<div class="flex">
  <sp-asset variant="file"></sp-asset>
  <sp-asset variant="file" label="Named File Asset"></sp-asset>
</div>

```

--------------------------------

### Sizes - Small

Source: https://opensource.adobe.com/spectrum-web-components/components/action-group

Small size example.

```markup
<sp-action-group size="s">
  <sp-action-button>Small 1</sp-action-button>
  <sp-action-button>Small 2</sp-action-button>
</sp-action-group>

```

--------------------------------

### Folder variant examples

Source: https://opensource.adobe.com/spectrum-web-components/components/asset

Examples of sp-asset with variant="folder", with and without a label.

```html
<div class="flex">
  <sp-asset variant="folder"></sp-asset>
  <sp-asset variant="folder" label="Named Folder Asset"></sp-asset>
</div>

```

--------------------------------

### Basic sp-sidenav anatomy example

Source: https://opensource.adobe.com/spectrum-web-components/components/sidenav

Example showing the anatomy of sp-sidenav with a heading, items, and a disabled item.

```html
<sp-sidenav>
  <sp-sidenav-heading label="Piano"></sp-sidenav-heading>
  <sp-sidenav-item label="Treble"></sp-sidenav-item>
  <sp-sidenav-item label="Bass"></sp-sidenav-item>
  <sp-sidenav-item disabled label="Grand staff"></sp-sidenav-item>
</sp-sidenav>
```

--------------------------------

### Install and import sp-alert-dialog

Source: https://opensource.adobe.com/spectrum-web-components/components/alert-dialog

Install the alert-dialog package, import the side effectful registration of the custom element, and optionally import the AlertDialog base class for typing or extension.

```shell
yarn add @spectrum-web-components/alert-dialog
```

```javascript
import '@spectrum-web-components/alert-dialog/sp-alert-dialog.js';
```

```javascript
import { AlertDialog } from '@spectrum-web-components/alert-dialog';
```

--------------------------------

### Placement top-start example

Source: https://opensource.adobe.com/spectrum-web-components/components/contextual-help

Customizes the popover placement using the placement attribute. Default is bottom-start; this example uses top-start.

```html
<sp-contextual-help placement="top-start">
  <h2 slot="heading">Permission required</h2>
  Your admin must grant you permission before you can create a segment.
  <sp-link
    slot="link"
    href="https://opensource.adobe.com/spectrum-web-components/"
  >
    Request permission
  </sp-link>
</sp-contextual-help>
```

--------------------------------

### yarn add @spectrum-web-components/coachmark

Source: https://opensource.adobe.com/spectrum-web-components/components/coachmark

Install the coachmark package with Yarn.

```shell
yarn add @spectrum-web-components/coachmark

```

--------------------------------

### Basic sp-progress-bar example

Source: https://opensource.adobe.com/spectrum-web-components/components/progress-bar

Basic usage of sp-progress-bar with a label and progress value.

```html
<sp-progress-bar label="Generating images..." progress="58"></sp-progress-bar>
```

--------------------------------

### Token usage example with base and system overrides

Source: https://opensource.adobe.com/spectrum-web-components/tools/styles

Shows how to import base token files and system-specific overrides (express or spectrum) for use in a component. The example demonstrates using CSS custom properties like --spectrum-corner-radius-100 and --spectrum-gray-50, which are defined in the imported files. Note that some tokens are defined differently depending on which vars files are loaded (light/dark, medium/large).

```css
/* import base tokens files */
@import '@spectrum-web-components/styles/tokens/light-vars.css';
@import '@spectrum-web-components/styles/tokens/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/global-vars.css';

/* import express-specific tokens files (replace express/ with spectrum/ for Spectrum system) */
@import '@spectrum-web-components/styles/tokens/express/medium-vars.css';
@import '@spectrum-web-components/styles/tokens/express/global-vars.css';

.my-component {
  /* defined in express medium-vars.css */
  border-radius: var(--spectrum-corner-radius-100);

  /* defined in express global-vars.css */
  border-width: var(--spectrum-border-width-100);

  /* defined in base global-vars.css */
  color: var(
    --spectrum-neutral-subdued-content-color-default
  ); /* uses --spectrum-gray-700, which is defined differently depending whether light or dark vars are loaded */

  /* defined in base light-vars.css, defined differently in dark-vars.css */
  background-color: var(--spectrum-gray-50);
  border-color: var(--spectrum-gray-700);

  /* defined in base medium-vars.css, defined differently in large-vars.css */
  padding-inline: var(--spectrum-component-edge-to-text-75);
  padding-block: var(--spectrum-component-top-to-text-75);
  min-block-size: var(--spectrum-component-height-75);

  border-style: solid;
}
```

--------------------------------

### Density property: compact and spacious examples

Source: https://opensource.adobe.com/spectrum-web-components/components/accordion

Two HTML examples showing the `density` property on `sp-accordion` with values `compact` and `spacious`. Each example renders four accordions with sizes `s`, `m`, `l`, and `xl` inside a CSS grid. Use these to compare the visual density and size combinations.

```html
<div
  style="
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr"
>
  <sp-accordion density="compact" size="s">
    <sp-accordion-item label="Compact Density">
      <div>This accordion is compact.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Small Size">
      <div>This accordion is also small.</div>
    </sp-accordion-item>
  </sp-accordion>
  <sp-accordion density="compact" size="m">
    <sp-accordion-item label="Compact Density">
      <div>This accordion is compact.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Medium Size">
      <div>This accordion is also medium.</div>
    </sp-accordion-item>
  </sp-accordion>
  <sp-accordion density="compact" size="l">
    <sp-accordion-item label="Compact Density">
      <div>This accordion is compact.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Large Size">
      <div>This accordion is also large.</div>
    </sp-accordion-item>
  </sp-accordion>
  <sp-accordion density="compact" size="xl">
    <sp-accordion-item label="Compact Density">
      <div>This accordion is compact.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Extra Large Size">
      <div>This accordion is also extra large.</div>
    </sp-accordion-item>
  </sp-accordion>
</div>
```

```html
<div
  style="
  display: grid;
  grid-gap: 20px;
    grid-template-columns: 1fr 1fr"
>
  <sp-accordion density="spacious" size="s">
    <sp-accordion-item label="Spacious Density">
      <div>This accordion is spacious.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Small Size">
      <div>This accordion is also small.</div>
    </sp-accordion-item>
  </sp-accordion>
  <sp-accordion density="spacious" size="m">
    <sp-accordion-item label="Spacious Density">
      <div>This accordion is spacious.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Medium Size">
      <div>This accordion is also medium.</div>
    </sp-accordion-item>
  </sp-accordion>
  <sp-accordion density="spacious" size="l">
    <sp-accordion-item label="Spacious Density">
      <div>This accordion is spacious.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Large Size">
      <div>This accordion is also large.</div>
    </sp-accordion-item>
  </sp-accordion>
  <sp-accordion density="spacious" size="xl">
    <sp-accordion-item label="Spacious Density">
      <div>This accordion is spacious.</div>
    </sp-accordion-item>
    <sp-accordion-item label="Extra Large Size">
      <div>This accordion is also extra large.</div>
    </sp-accordion-item>
  </sp-accordion>
</div>
```

--------------------------------

### Sizes - Medium

Source: https://opensource.adobe.com/spectrum-web-components/components/action-group

Medium size example.

```markup
<sp-action-group size="m">
  <sp-action-button>Medium 1</sp-action-button>
  <sp-action-button>Medium 2</sp-action-button>
</sp-action-group>

```

--------------------------------

### Usage Example

Source: https://opensource.adobe.com/spectrum-web-components/components/coach-indicator

Basic usage of the sp-coach-indicator component.

```APIDOC
## Usage

### Basic
```html
<sp-coach-indicator></sp-coach-indicator>
```

### Static Colors
```html
<sp-coach-indicator></sp-coach-indicator>
<sp-coach-indicator static-color="dark"></sp-coach-indicator>
<sp-coach-indicator static-color="light"></sp-coach-indicator>
```

### Quiet
```html
<sp-coach-indicator quiet></sp-coach-indicator>
<sp-coach-indicator quiet static-color="dark"></sp-coach-indicator>
<sp-coach-indicator quiet static-color="light"></sp-coach-indicator>
```
```

--------------------------------

### Accessible progress circle examples

Source: https://opensource.adobe.com/spectrum-web-components/components/progress-circle

Examples with good accessibility: one determinate with descriptive label, one indeterminate.

```html
<!-- Example with good accessibility -->
<sp-progress-circle
  label="Downloading report.pdf - 24 MB of 50 MB"
  progress="48"
></sp-progress-circle>

<!-- For unknown duration operations -->
<sp-progress-circle
  label="Connecting to server"
  indeterminate
></sp-progress-circle>

```

--------------------------------

### sp-meter accessibility example

Source: https://opensource.adobe.com/spectrum-web-components/components/meter

Example with label attribute for accessibility.

```html
<sp-meter progress="71" label="Download Progress">Download Progress</sp-meter>
```

--------------------------------

### Good: Lists breaking changes

Source: https://opensource.adobe.com/spectrum-web-components/guides/writing-changesets

Example of a changeset that clearly lists breaking changes with migration guidance, including before/after examples.

```markdown
---
'@spectrum-web-components/textfield': major
---

- **Deprecated**: Deprecated `label` attribute, which confused label with placeholder text. [#9999](https://github.com/adobe/spectrum-web-components/pull/9999)
- **Added**: Added `hidden-label` attribute, for use with assistive technologies. (Before: `<sp-textfield label="Full Name"></sp-textfield>` / After: `<sp-textfield hidden-label="Full Name"></sp-textfield>`)
- **Added**: Added `placeholder` attribute, for placeholder text. (Before: `<sp-textfield label="john.smith@example.com"></sp-textfield>` / After: `<sp-textfield placeholder="john.smith@example.com"></sp-textfield>`)

```

--------------------------------

### HTML markup for basic usage example

Source: https://opensource.adobe.com/spectrum-web-components/tools/element-resolution

The HTML markup that pairs with the basic usage example, showing a root-el element and a sibling div with class 'other-element'.

```html
<root-el></root-el>
<div class="other-element"></div>
```

--------------------------------

### Bad: Not user-focused

Source: https://opensource.adobe.com/spectrum-web-components/guides/writing-changesets

Example of a changeset that describes implementation details rather than user impact.

```markdown
---
'@spectrum-web-components/overlay': patch
---

- Replace native `showModal()` for performance optimization [#9999](https://github.com/adobe/spectrum-web-components/pull/9999)

```

--------------------------------

### Sizes - Large

Source: https://opensource.adobe.com/spectrum-web-components/components/action-group

Large size example.

```markup
<sp-action-group size="l">
  <sp-action-button>Large 1</sp-action-button>
  <sp-action-button>Large 2</sp-action-button>
</sp-action-group>

```

--------------------------------

### Install split-view package

Source: https://opensource.adobe.com/spectrum-web-components/components/split-view

Adds the split-view package to your project dependencies.

```bash
yarn add @spectrum-web-components/split-view
```

--------------------------------

### Anatomy example with sp-menu-group

Source: https://opensource.adobe.com/spectrum-web-components/components/menu-group

Shows how to organize sp-menu-item elements into groups with headers inside an sp-menu.

```html
<sp-menu label="What are your favorite parks?">
        <sp-menu-group>
            <span slot="header">New York</span>
            <sp-menu-item>
                Central Park
            </sp-menu-item>
            <sp-menu-item>
                Flushing Meadows Corona Park
            </sp-menu-item>
            <sp-menu-item>
                Prospect Park
            </sp-menu-item>
        </sp-menu-group>
        <sp-menu-group>
            <span slot="header">San Francisco</span>
            <sp-menu-item>
                Golden Gate Park
            </sp-menu-item>
            <sp-menu-item>
                John McLaren Park
            </sp-menu-item>
            <sp-menu-item>
                Lake Merced Park
            </sp-menu-item>
        </sp-menu-group>
    </sp-menu>
</sp-popover>

```

--------------------------------

### Good: User-focused

Source: https://opensource.adobe.com/spectrum-web-components/guides/writing-changesets

Example of a changeset that describes the change from the user's perspective, focusing on the benefit.

```markdown
---
'@spectrum-web-components/overlay': patch
---

- **Fixed**: Improved `<sp-overlay>` performance in Chromium-based browsers. [#9999](https://github.com/adobe/spectrum-web-components/pull/9999)

```

--------------------------------

### Modal dialog with underlay and trigger

Source: https://opensource.adobe.com/spectrum-web-components/components/dialog-base

Example of using sp-dialog-base with an underlay and a trigger button to create a modal dialog.

```html
<overlay-trigger type="modal">
  <sp-dialog-base underlay slot="click-content">
    <sp-dialog>
      <h2 slot="heading">A thing is about to happen</h2>
      <p>Something that might happen a lot is about to happen.</p>
      <p>
        The click events for the "OK" button are bound to the story not to the
        components in specific.
      </p>
      <sp-button
        variant="secondary"
        treatment="fill"
        slot="button"
        onclick="this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));"
      >
        Ok
      </sp-button>
      <sp-checkbox slot="footer">Don't show me this again</sp-checkbox>
    </sp-dialog>
  </sp-dialog-base>
  <sp-button slot="trigger" variant="primary">Toggle Dialog</sp-button>
</overlay-trigger>
```

--------------------------------

### Basic sp-dialog anatomy example

Source: https://opensource.adobe.com/spectrum-web-components/components/dialog

Shows the anatomy of sp-dialog with hero, heading, content, footer, and button slots.

```html
<sp-dialog size="s">
  <div
    slot="hero"
    style="background-image: url(https://picsum.photos/1400/260)"
  ></div>
  <h2 slot="heading">Disclaimer</h2>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
  <div slot="footer">Footer information</div>
  <sp-button slot="button">Button</sp-button>
</sp-dialog>
```

--------------------------------

### Initialize @open-wc project

Source: https://opensource.adobe.com/spectrum-web-components/guides/configuring-openwc

Run this command in your terminal to start a new @open-wc project. You will be prompted to choose Web Component, TypeScript, and yarn options.

```bash
npm init @open-wc
```

--------------------------------

### Basic sp-accordion-item usage

Source: https://opensource.adobe.com/spectrum-web-components/components/accordion-item

Basic example of an sp-accordion-item inside an sp-accordion.

```html
<sp-accordion>
  <sp-accordion-item label="Accordion Item">
    <div>Accordion item content can be toggled visible.</div>
  </sp-accordion-item>
</sp-accordion>
```

--------------------------------

### receivesFocus property example

Source: https://opensource.adobe.com/spectrum-web-components/components/overlay

Shows how to set receives-focus to 'false' to prevent focus from being passed into the overlay when it opens. The example includes a text field and a sign-in button that closes the overlay.

```html
<sp-button id="trigger">Overlay Trigger</sp-button>

<sp-overlay trigger="trigger@click" placement="bottom" receives-focus="false">
  <sp-popover>
    <sp-dialog>
      <h2 slot="heading">
        Clicking opens this popover but does not receive focus
      </h2>
      <sp-field-label>Enter your email</sp-field-label>
      <sp-textfield placeholder="test@gmail.com"></sp-textfield>
      <sp-action-button
        onClick="
                    this.dispatchEvent(
                        new Event('close', {
                            bubbles: true,
                            composed: true,
                        })
                    );
                "
      >
        Sign in
      </sp-action-button>
    </sp-dialog>
  </sp-popover>
</sp-overlay>
```

--------------------------------

### Install sp-field-group with yarn

Source: https://opensource.adobe.com/spectrum-web-components/components/field-group

Adds the @spectrum-web-components/field-group package to your project.

```bash
yarn add @spectrum-web-components/field-group
```
Tokens:
Raw