@aurodesignsystem-dev/auro-drawer 0.0.0-pr173.0 → 0.0.0-pr173.2
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/demo/api.md +5 -5
- package/demo/api.min.js +13 -9
- package/demo/index.min.js +13 -9
- package/dist/index.d.ts +5 -3
- package/package.json +1 -1
package/demo/api.md
CHANGED
|
@@ -20,11 +20,11 @@ The `auro-drawer` element provides users a way to implement an expandable drawer
|
|
|
20
20
|
|
|
21
21
|
### Methods
|
|
22
22
|
|
|
23
|
-
| Name | Parameters | Return | Description
|
|
24
|
-
| -------- | -------------------------------------------------------------------- | ------ |
|
|
25
|
-
| hide | `eventType` (any) | | Closes the native dialog.
|
|
26
|
-
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser.
|
|
27
|
-
| show | None | | Opens the native dialog inside the bib.<br><br>- `nested`: `setAttribute("open", "")` to anchor within the parent container.<br>- `!modal && !nested`: `showPopover()` to keep positional CSS intact<br> without taking on `showModal()`'s native modal semantics — `dialog.open`<br> is
|
|
23
|
+
| Name | Parameters | Return | Description |
|
|
24
|
+
| -------- | -------------------------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
25
|
+
| hide | `eventType` (any) | | Closes the native dialog. |
|
|
26
|
+
| register | `name` (string) - The name of the element that you want to register. | | This will register this element with the browser. |
|
|
27
|
+
| show | None | | Opens the native dialog inside the bib.<br><br>- `nested`: `setAttribute("open", "")` to anchor within the parent container.<br>- `!modal && !nested`: `showPopover()` to keep positional CSS intact<br> without taking on `showModal()`'s native modal semantics — `dialog.open`<br> is not set and the background is never made inert. Browsers without the<br> Popover API fall back to `dialog.show()`, which does set `dialog.open`<br> but is likewise non-modal. Focus is still contained on every path:<br> auro-drawer-content installs a `FocusTrap` regardless of how the dialog<br> was opened, not just on the `showModal()` one.<br>- `modal && !nested`: `showModal()` for native focus containment and top-layer rendering. |
|
|
28
28
|
|
|
29
29
|
### Events
|
|
30
30
|
|
package/demo/api.min.js
CHANGED
|
@@ -3574,9 +3574,11 @@ class AuroFloater extends i$1 {
|
|
|
3574
3574
|
* - `nested`: `setAttribute("open", "")` to anchor within the parent container.
|
|
3575
3575
|
* - `!modal && !nested`: `showPopover()` to keep positional CSS intact
|
|
3576
3576
|
* without taking on `showModal()`'s native modal semantics — `dialog.open`
|
|
3577
|
-
* is
|
|
3578
|
-
*
|
|
3579
|
-
*
|
|
3577
|
+
* is not set and the background is never made inert. Browsers without the
|
|
3578
|
+
* Popover API fall back to `dialog.show()`, which does set `dialog.open`
|
|
3579
|
+
* but is likewise non-modal. Focus is still contained on every path:
|
|
3580
|
+
* auro-drawer-content installs a `FocusTrap` regardless of how the dialog
|
|
3581
|
+
* was opened, not just on the `showModal()` one.
|
|
3580
3582
|
* - `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.
|
|
3581
3583
|
*/
|
|
3582
3584
|
async show() {
|
|
@@ -3636,15 +3638,17 @@ class AuroFloater extends i$1 {
|
|
|
3636
3638
|
// the deferred close fires (e.g. when the element is removed from the DOM).
|
|
3637
3639
|
const dialog = this.bib?.dialog;
|
|
3638
3640
|
if (dialog?.open) {
|
|
3639
|
-
// Modal and nested drawers
|
|
3641
|
+
// Modal and nested drawers (showModal() / setAttribute('open')), and
|
|
3642
|
+
// non-modal drawers on browsers without the Popover API (dialog.show()).
|
|
3640
3643
|
this._closeTimeout = setTimeout(() => {
|
|
3641
3644
|
if (dialog.open) {
|
|
3642
3645
|
dialog.close();
|
|
3643
3646
|
}
|
|
3644
3647
|
}, 300);
|
|
3645
3648
|
} else if (typeof dialog?.hidePopover === "function" && dialog.matches?.(':popover-open')) {
|
|
3646
|
-
// Non-modal drawers
|
|
3647
|
-
// so the popover stays in the top layer unless hidePopover()
|
|
3649
|
+
// Non-modal drawers opened via showPopover() — that path never sets
|
|
3650
|
+
// dialog.open, so the popover stays in the top layer unless hidePopover()
|
|
3651
|
+
// is called.
|
|
3648
3652
|
// Guard on hidePopover support: matches(':popover-open') throws a SyntaxError
|
|
3649
3653
|
// on browsers that don't implement the Popover API.
|
|
3650
3654
|
this._closeTimeout = setTimeout(() => {
|
|
@@ -4609,9 +4613,9 @@ class AuroDrawer extends AuroFloater {
|
|
|
4609
4613
|
//
|
|
4610
4614
|
// aria-modal is NOT, and the distinction matters: native modal semantics come
|
|
4611
4615
|
// from how the dialog is opened, not from the element. Only `modal && !nested`
|
|
4612
|
-
// uses showModal(); `!modal && !nested` uses showPopover() (dialog.
|
|
4613
|
-
//
|
|
4614
|
-
// as modal. auro-library's lockScroll() therefore sets aria-modal on the inner
|
|
4616
|
+
// uses showModal(); `!modal && !nested` uses showPopover() (or dialog.show() on
|
|
4617
|
+
// browsers without the Popover API) and `nested` uses setAttribute("open"),
|
|
4618
|
+
// none of which is exposed as modal. auro-library's lockScroll() therefore sets aria-modal on the inner
|
|
4615
4619
|
// <dialog> for any presentation that takes the page scroll lock, which is what
|
|
4616
4620
|
// makes the dismissible drawer report its modality correctly. See auro-floater.js
|
|
4617
4621
|
// show() for the three open paths.
|
package/demo/index.min.js
CHANGED
|
@@ -3326,9 +3326,11 @@ class AuroFloater extends i$1 {
|
|
|
3326
3326
|
* - `nested`: `setAttribute("open", "")` to anchor within the parent container.
|
|
3327
3327
|
* - `!modal && !nested`: `showPopover()` to keep positional CSS intact
|
|
3328
3328
|
* without taking on `showModal()`'s native modal semantics — `dialog.open`
|
|
3329
|
-
* is
|
|
3330
|
-
*
|
|
3331
|
-
*
|
|
3329
|
+
* is not set and the background is never made inert. Browsers without the
|
|
3330
|
+
* Popover API fall back to `dialog.show()`, which does set `dialog.open`
|
|
3331
|
+
* but is likewise non-modal. Focus is still contained on every path:
|
|
3332
|
+
* auro-drawer-content installs a `FocusTrap` regardless of how the dialog
|
|
3333
|
+
* was opened, not just on the `showModal()` one.
|
|
3332
3334
|
* - `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.
|
|
3333
3335
|
*/
|
|
3334
3336
|
async show() {
|
|
@@ -3388,15 +3390,17 @@ class AuroFloater extends i$1 {
|
|
|
3388
3390
|
// the deferred close fires (e.g. when the element is removed from the DOM).
|
|
3389
3391
|
const dialog = this.bib?.dialog;
|
|
3390
3392
|
if (dialog?.open) {
|
|
3391
|
-
// Modal and nested drawers
|
|
3393
|
+
// Modal and nested drawers (showModal() / setAttribute('open')), and
|
|
3394
|
+
// non-modal drawers on browsers without the Popover API (dialog.show()).
|
|
3392
3395
|
this._closeTimeout = setTimeout(() => {
|
|
3393
3396
|
if (dialog.open) {
|
|
3394
3397
|
dialog.close();
|
|
3395
3398
|
}
|
|
3396
3399
|
}, 300);
|
|
3397
3400
|
} else if (typeof dialog?.hidePopover === "function" && dialog.matches?.(':popover-open')) {
|
|
3398
|
-
// Non-modal drawers
|
|
3399
|
-
// so the popover stays in the top layer unless hidePopover()
|
|
3401
|
+
// Non-modal drawers opened via showPopover() — that path never sets
|
|
3402
|
+
// dialog.open, so the popover stays in the top layer unless hidePopover()
|
|
3403
|
+
// is called.
|
|
3400
3404
|
// Guard on hidePopover support: matches(':popover-open') throws a SyntaxError
|
|
3401
3405
|
// on browsers that don't implement the Popover API.
|
|
3402
3406
|
this._closeTimeout = setTimeout(() => {
|
|
@@ -4361,9 +4365,9 @@ class AuroDrawer extends AuroFloater {
|
|
|
4361
4365
|
//
|
|
4362
4366
|
// aria-modal is NOT, and the distinction matters: native modal semantics come
|
|
4363
4367
|
// from how the dialog is opened, not from the element. Only `modal && !nested`
|
|
4364
|
-
// uses showModal(); `!modal && !nested` uses showPopover() (dialog.
|
|
4365
|
-
//
|
|
4366
|
-
// as modal. auro-library's lockScroll() therefore sets aria-modal on the inner
|
|
4368
|
+
// uses showModal(); `!modal && !nested` uses showPopover() (or dialog.show() on
|
|
4369
|
+
// browsers without the Popover API) and `nested` uses setAttribute("open"),
|
|
4370
|
+
// none of which is exposed as modal. auro-library's lockScroll() therefore sets aria-modal on the inner
|
|
4367
4371
|
// <dialog> for any presentation that takes the page scroll lock, which is what
|
|
4368
4372
|
// makes the dismissible drawer report its modality correctly. See auro-floater.js
|
|
4369
4373
|
// show() for the three open paths.
|
package/dist/index.d.ts
CHANGED
|
@@ -158,9 +158,11 @@ When expanded, the drawer will automatically display in fullscreen mode if the s
|
|
|
158
158
|
* - `nested`: `setAttribute("open", "")` to anchor within the parent container.
|
|
159
159
|
* - `!modal && !nested`: `showPopover()` to keep positional CSS intact
|
|
160
160
|
* without taking on `showModal()`'s native modal semantics — `dialog.open`
|
|
161
|
-
* is
|
|
162
|
-
*
|
|
163
|
-
*
|
|
161
|
+
* is not set and the background is never made inert. Browsers without the
|
|
162
|
+
* Popover API fall back to `dialog.show()`, which does set `dialog.open`
|
|
163
|
+
* but is likewise non-modal. Focus is still contained on every path:
|
|
164
|
+
* auro-drawer-content installs a `FocusTrap` regardless of how the dialog
|
|
165
|
+
* was opened, not just on the `showModal()` one.
|
|
164
166
|
* - `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.
|
|
165
167
|
*
|
|
166
168
|
* ## CSS Custom Properties
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-drawer",
|
|
10
|
-
"version": "0.0.0-pr173.
|
|
10
|
+
"version": "0.0.0-pr173.2",
|
|
11
11
|
"description": "auro-drawer HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|