sp-underlay

NPM 1.0.1

View Storybook

Overview

API

Changelog

Description

An <sp-underlay> is used primarily in concert with elements similar to <sp-dialog> that lay over the rest of your page to deliver a blocking layer between those two contexts. See this element in action as part of the <sp-dialog-wrapper> element.

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';

Example

When leveraging an <sp-underlay> in conjunction with overlay content, place it as a sibling prior to 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>

Attributes and Properties

Property

Attribute

Type

Default

Description

open

boolean

false

Events

Name

Type

Description

close

Event

When the underlay is "clicked" and the consuming pattern should chose whether to close based on that interaction

1.0.1 (2024-11-11)

Note: Version bump only for package @spectrum-web-components/underlay

1.0.0 (2024-10-31)

Note: Version bump only for package @spectrum-web-components/underlay

0.49.0 (2024-10-15)

Note: Version bump only for package @spectrum-web-components/underlay

0.48.1 (2024-10-01)

Note: Version bump only for package @spectrum-web-components/underlay

0.48.0 (2024-09-17)

Note: Version bump only for package @spectrum-web-components/underlay

0.47.2 (2024-09-03)

Note: Version bump only for package @spectrum-web-components/underlay

0.47.1 (2024-08-27)

Note: Version bump only for package @spectrum-web-components/underlay

0.47.0 (2024-08-20)

Note: Version bump only for package @spectrum-web-components/underlay

0.46.0 (2024-08-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.45.0 (2024-07-30)

Note: Version bump only for package @spectrum-web-components/underlay

0.44.0 (2024-07-15)

Note: Version bump only for package @spectrum-web-components/underlay

0.43.0 (2024-06-11)

Note: Version bump only for package @spectrum-web-components/underlay

0.42.5 (2024-05-24)

Note: Version bump only for package @spectrum-web-components/underlay

0.42.4 (2024-05-14)

Note: Version bump only for package @spectrum-web-components/underlay

0.42.3 (2024-05-01)

Note: Version bump only for package @spectrum-web-components/underlay

0.42.2 (2024-04-03)

Note: Version bump only for package @spectrum-web-components/underlay

0.42.1 (2024-04-02)

Note: Version bump only for package @spectrum-web-components/underlay

0.42.0 (2024-03-19)

Features

asset: use core tokens (99e76f4)

0.41.2 (2024-03-05)

Note: Version bump only for package @spectrum-web-components/underlay

0.41.1 (2024-02-22)

Note: Version bump only for package @spectrum-web-components/underlay

0.41.0 (2024-02-13)

Bug Fixes

tray: only allow "click" events when they "pointerdown"ed on the Underlay (#4020) (4f9aa4a)

0.40.5 (2024-02-05)

Note: Version bump only for package @spectrum-web-components/underlay

0.40.4 (2024-01-29)

Note: Version bump only for package @spectrum-web-components/underlay

0.40.3 (2024-01-11)

Note: Version bump only for package @spectrum-web-components/underlay

0.40.2 (2023-12-18)

Note: Version bump only for package @spectrum-web-components/underlay

0.40.1 (2023-12-05)

Note: Version bump only for package @spectrum-web-components/underlay

0.40.0 (2023-11-16)

Note: Version bump only for package @spectrum-web-components/underlay

0.39.4 (2023-11-02)

Note: Version bump only for package @spectrum-web-components/underlay

0.39.3 (2023-10-18)

Note: Version bump only for package @spectrum-web-components/underlay

0.39.2 (2023-10-13)

Note: Version bump only for package @spectrum-web-components/underlay

0.39.1 (2023-10-06)

Note: Version bump only for package @spectrum-web-components/underlay

0.39.0 (2023-09-25)

Features

underlay: use core tokens (9c555ab)

0.38.0 (2023-09-05)

Note: Version bump only for package @spectrum-web-components/underlay

0.37.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/underlay

0.36.0 (2023-08-18)

Note: Version bump only for package @spectrum-web-components/underlay

0.35.0 (2023-07-31)

Note: Version bump only for package @spectrum-web-components/underlay

0.34.0 (2023-07-11)

Note: Version bump only for package @spectrum-web-components/underlay

0.33.2 (2023-06-14)

Note: Version bump only for package @spectrum-web-components/underlay

0.33.0 (2023-06-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.32.0 (2023-06-01)

Note: Version bump only for package @spectrum-web-components/underlay

0.31.0 (2023-05-17)

Note: Version bump only for package @spectrum-web-components/underlay

0.30.0 (2023-05-03)

Bug Fixes

include default export in the "exports" fields (f32407d)
include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
update side effect listings (8160d3a)
update to latest spectrum-css packages (a5ca19f)
use latest @spectrum-css/* versions (c35eb86)

Features

add dialog, dialog-wrapped, and underlay elements (3df9050)
adopt DNA@7 base Spectrum CSS (e08cafd)
include all Dev Mode files in side effects (f70817c)
leverage "exports" field in package.json (321abd7)
shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
underlay: update spectrum css input (edf1a4b)
update to Spectrum CSS v3.0.0 (e8b3d8f)
use latest exports specification (a7ecf4b)

0.9.9 (2023-04-24)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.8 (2023-04-05)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.7 (2023-03-22)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.6 (2023-02-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.5 (2023-01-23)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.4 (2023-01-09)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.3 (2022-12-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.2 (2022-11-21)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.1 (2022-11-14)

Note: Version bump only for package @spectrum-web-components/underlay

0.9.0 (2022-08-09)

Features

include all Dev Mode files in side effects (f70817c)

0.8.11 (2022-08-04)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.10 (2022-07-18)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.9 (2022-06-29)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.8 (2022-06-07)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.7 (2022-05-12)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.6 (2022-04-21)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.5 (2022-03-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.4 (2022-03-04)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.3 (2022-02-22)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.2 (2022-01-26)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.1 (2021-12-13)

Note: Version bump only for package @spectrum-web-components/underlay

0.8.0 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.7.1 (2021-11-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.7.0 (2021-11-02)

Features

adopt DNA@7 base Spectrum CSS (e08cafd)

0.6.9 (2021-09-20)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.8 (2021-08-17)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.7 (2021-07-22)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.6 (2021-06-16)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.5 (2021-05-12)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.4 (2021-04-09)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.3 (2021-03-29)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.2 (2021-03-22)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.1 (2021-03-05)

Note: Version bump only for package @spectrum-web-components/underlay

0.6.0 (2021-03-04)

Features

use latest exports specification (a7ecf4b)

0.5.1 (2021-02-11)

Bug Fixes

update to latest spectrum-css packages (a5ca19f)

0.5.0 (2021-01-21)

Bug Fixes

include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

underlay: update spectrum css input (edf1a4b)

0.4.0 (2021-01-13)

Bug Fixes

include the "types" entry in package.json files (b432f59)
stop merging selectors in a way that alters the cascade (369388f)
update latest Spectrum CSS beta releases (d8d3acc)
use latest @spectrum-css/* versions (c35eb86)

Features

underlay: update spectrum css input (edf1a4b)

0.3.3 (2020-10-12)

Note: Version bump only for package @spectrum-web-components/underlay

0.3.2 (2020-10-12)

Bug Fixes

include default export in the "exports" fields (f32407d)

0.3.1 (2020-09-25)

Bug Fixes

update side effect listings (8160d3a)

0.3.0 (2020-08-31)

Features

update to Spectrum CSS v3.0.0 (e8b3d8f)

0.2.1 (2020-08-19)

Note: Version bump only for package @spectrum-web-components/underlay

0.2.0 (2020-07-17)

Features

leverage "exports" field in package.json (321abd7)

0.1.1 (2020-06-08)

Note: Version bump only for package @spectrum-web-components/underlay

0.1.0 (2020-05-12)

Features

add dialog, dialog-wrapped, and underlay elements (3df9050)

Spectrum Web Components

sp-underlay

Description

Usage

Example

API

Attributes and Properties

Events

Changelog

1.0.1 (2024-11-11)

1.0.0 (2024-10-31)

0.49.0 (2024-10-15)

0.48.1 (2024-10-01)

0.48.0 (2024-09-17)

0.47.2 (2024-09-03)

0.47.1 (2024-08-27)

0.47.0 (2024-08-20)

0.46.0 (2024-08-08)

0.45.0 (2024-07-30)

0.44.0 (2024-07-15)

0.43.0 (2024-06-11)

0.42.5 (2024-05-24)

0.42.4 (2024-05-14)

0.42.3 (2024-05-01)

0.42.2 (2024-04-03)

0.42.1 (2024-04-02)

0.42.0 (2024-03-19)

Features

0.41.2 (2024-03-05)

0.41.1 (2024-02-22)

0.41.0 (2024-02-13)

Bug Fixes

0.40.5 (2024-02-05)

0.40.4 (2024-01-29)

0.40.3 (2024-01-11)

0.40.2 (2023-12-18)

0.40.1 (2023-12-05)

0.40.0 (2023-11-16)

0.39.4 (2023-11-02)

0.39.3 (2023-10-18)

0.39.2 (2023-10-13)

0.39.1 (2023-10-06)

0.39.0 (2023-09-25)

Features

0.38.0 (2023-09-05)

0.37.0 (2023-08-18)

0.36.0 (2023-08-18)

0.35.0 (2023-07-31)

0.34.0 (2023-07-11)

0.33.2 (2023-06-14)

0.33.0 (2023-06-08)

0.32.0 (2023-06-01)

0.31.0 (2023-05-17)

0.30.0 (2023-05-03)

Bug Fixes

Features

0.9.9 (2023-04-24)

0.9.8 (2023-04-05)

0.9.7 (2023-03-22)

0.9.6 (2023-02-08)

0.9.5 (2023-01-23)

0.9.4 (2023-01-09)

0.9.3 (2022-12-08)

0.9.2 (2022-11-21)

0.9.1 (2022-11-14)

0.9.0 (2022-08-09)

Features

0.8.11 (2022-08-04)

0.8.10 (2022-07-18)

0.8.9 (2022-06-29)

0.8.8 (2022-06-07)

0.8.7 (2022-05-12)

0.8.6 (2022-04-21)

0.8.5 (2022-03-08)

0.8.4 (2022-03-04)

0.8.3 (2022-02-22)

0.8.2 (2022-01-26)

0.8.1 (2021-12-13)

0.8.0 (2021-11-08)

0.7.1 (2021-11-08)

Spectrum
Web Components