@spectrum-web-components/underlay 1.6.0-beta.0 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +36 -4
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
##
|
|
1
|
+
## Overview
|
|
2
2
|
|
|
3
|
-
An `<sp-underlay>`
|
|
3
|
+
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.
|
|
4
4
|
|
|
5
5
|
### Usage
|
|
6
6
|
|
|
@@ -23,9 +23,11 @@ When looking to leverage the `Underlay` base class as a type and/or for extensio
|
|
|
23
23
|
import { Underlay } from '@spectrum-web-components/underlay';
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
-
|
|
26
|
+
### Examples
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
#### Basic Usage
|
|
29
|
+
|
|
30
|
+
When using an `<sp-underlay>` with overlay content, place it as a sibling element before your overlay content.
|
|
29
31
|
|
|
30
32
|
```html
|
|
31
33
|
<style>
|
|
@@ -65,3 +67,33 @@ When leveraging an `<sp-underlay>` in conjunction with overlay content, place it
|
|
|
65
67
|
</sp-button>
|
|
66
68
|
</sp-dialog>
|
|
67
69
|
```
|
|
70
|
+
|
|
71
|
+
### Styling
|
|
72
|
+
|
|
73
|
+
To ensure proper layering of your overlay content with the underlay, use appropriate CSS:
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
<style>
|
|
77
|
+
/* Hide overlay content when underlay is closed */
|
|
78
|
+
sp-underlay:not([open]) + sp-dialog {
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
/* Position overlay content above the underlay */
|
|
83
|
+
sp-underlay + sp-dialog {
|
|
84
|
+
position: fixed;
|
|
85
|
+
top: 50%;
|
|
86
|
+
left: 50%;
|
|
87
|
+
transform: translate(-50%, -50%);
|
|
88
|
+
z-index: 1;
|
|
89
|
+
}
|
|
90
|
+
</style>
|
|
91
|
+
```
|
|
92
|
+
|
|
93
|
+
### Accessibility
|
|
94
|
+
|
|
95
|
+
The `<sp-underlay>` element helps create an accessible modal experience by:
|
|
96
|
+
|
|
97
|
+
1. Providing visual separation between modal content and the rest of the page
|
|
98
|
+
2. Supporting proper focus management when used with modal dialogs
|
|
99
|
+
3. Helping communicate the modal state to assistive technologies
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/underlay",
|
|
3
|
-
"version": "1.6.0
|
|
3
|
+
"version": "1.6.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"css"
|
|
65
65
|
],
|
|
66
66
|
"dependencies": {
|
|
67
|
-
"@spectrum-web-components/base": "1.6.0
|
|
67
|
+
"@spectrum-web-components/base": "1.6.0"
|
|
68
68
|
},
|
|
69
69
|
"devDependencies": {
|
|
70
70
|
"@spectrum-css/underlay": "6.1.0"
|