@spectrum-web-components/underlay NPM

Overview

An <sp-underlay> provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while the overlay is active.

Usage

yarn add @spectrum-web-components/underlay

Import the side effectful registration of <sp-underlay> via:

import '@spectrum-web-components/underlay/sp-underlay.js';

When looking to leverage the Underlay base class as a type and/or for extension purposes, do so via:

import { Underlay } from '@spectrum-web-components/underlay';

Examples

Basic Usage

When using an <sp-underlay> with overlay content, place it as a sibling element before your overlay content.

<style>
    sp-underlay:not([open]) + sp-dialog {
        display: none;
    }
    sp-underlay + sp-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
        background: var(--spectrum-gray-100);
    }
</style>

<sp-button
    onclick="
        console.log(this.nextElementSibling);
        this.nextElementSibling.open = true;
    "
>
    Open dialog with underlay element
</sp-button>

<sp-underlay></sp-underlay>
<sp-dialog size="s">
    <h1 slot="heading">Hello, I'm an overlay!</h1>
    <p>Enjoy your day...</p>
    <sp-button
        slot="button"
        onclick="
            this.parentElement.previousElementSibling.open = false;
        "
    >
        Close
    </sp-button>
</sp-dialog>

Styling

To ensure proper layering of your overlay content with the underlay, use appropriate CSS:

<style>
    /* Hide overlay content when underlay is closed */
    sp-underlay:not([open]) + sp-dialog {
        display: none;
    }

    /* Position overlay content above the underlay */
    sp-underlay + sp-dialog {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
</style>

Accessibility

The <sp-underlay> element helps create an accessible modal experience by:

Providing visual separation between modal content and the rest of the page
Supporting proper focus management when used with modal dialogs
Helping communicate the modal state to assistive technologies

design-system spectrum adobe adobe-spectrum web components web-components lit-element lit-html component css

@spectrum-web-components/base

@infinitebrahmanuniverse/nolb-_spe @everything-registry/sub-chunk-857 @uxds-web-components/tray @uxds-web-components/dialog @spectrum-web-components/dialog @spectrum-web-components/bundle @spectrum-web-components/tray @swc-react/underlay

1.6.0

4 months ago

0.0.0-20250211061642

6 months ago

0.0.0-20241211110529

8 months ago

1.7.0-snapshot.20250519151006

3 months ago

8 months ago

5 months ago

4 months ago

6 months ago

6 months ago

6 months ago

6 months ago

5 months ago

5 months ago

6 months ago

6 months ago

5 months ago

4 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

5 months ago

1.7.0-snapshot.20250519143559

3 months ago

8 months ago

5 months ago

5 months ago

4 months ago

6 months ago

6 months ago

1.7.0-snapshot.20250609112703

2 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

7 months ago

7 months ago

6 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

9 months ago

8 months ago

8 months ago

9 months ago

8 months ago

8 months ago

6 months ago

9 months ago

6 months ago

9 months ago

1.6.1-preview-2d9fabee.20250507183133

3 months ago

6 months ago

8 months ago

8 months ago

6 months ago

6 months ago

8 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

8 months ago

2 months ago

5 months ago

8 months ago

1.7.0-snapshot.20250519200040

3 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

3 months ago

6 months ago

4 months ago

0.0.0-modal-performance-20250414163725

4 months ago

6 months ago

6 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

0.9.5-overlay-warning.19

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago