@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.23 → 0.0.0-pr131.25
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 +18 -10
- package/demo/index.min.js +18 -10
- package/dist/{auro-drawer-Li33Y0z2.js → auro-drawer-COaaMqSY.js} +1 -1
- package/dist/index.d.ts +3 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +2 -3
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>- `
|
|
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> and allow free keyboard flow to background content (WCAG 2.1.2).<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
|
@@ -3371,9 +3371,10 @@ class AuroFloater extends i$1 {
|
|
|
3371
3371
|
/**
|
|
3372
3372
|
* Opens the native dialog inside the bib.
|
|
3373
3373
|
*
|
|
3374
|
-
* - `
|
|
3375
|
-
* -
|
|
3374
|
+
* - `nested`: `setAttribute("open", "")` to anchor within the parent container.
|
|
3375
|
+
* - `!modal && !nested`: `showPopover()` to keep positional CSS intact
|
|
3376
3376
|
* and allow free keyboard flow to background content (WCAG 2.1.2).
|
|
3377
|
+
* - `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.
|
|
3377
3378
|
*/
|
|
3378
3379
|
async show() {
|
|
3379
3380
|
clearTimeout(this._closeTimeout);
|
|
@@ -3387,21 +3388,28 @@ class AuroFloater extends i$1 {
|
|
|
3387
3388
|
|
|
3388
3389
|
const nested = this.nested ?? false;
|
|
3389
3390
|
const modal = this.modal ?? false;
|
|
3391
|
+
const dialog = this.bib.dialog;
|
|
3390
3392
|
|
|
3391
3393
|
if (nested) {
|
|
3392
|
-
|
|
3394
|
+
dialog.setAttribute("open", "");
|
|
3393
3395
|
} else if (!modal) {
|
|
3394
|
-
if (typeof
|
|
3395
|
-
|
|
3396
|
-
|
|
3396
|
+
if (typeof dialog.showPopover === "function") {
|
|
3397
|
+
dialog.setAttribute("popover", "manual");
|
|
3398
|
+
if (!dialog.matches(":popover-open")) {
|
|
3399
|
+
dialog.showPopover();
|
|
3400
|
+
}
|
|
3397
3401
|
} else {
|
|
3398
3402
|
// Fallback for browsers without the Popover API
|
|
3399
|
-
|
|
3400
|
-
|
|
3403
|
+
dialog.removeAttribute("popover");
|
|
3404
|
+
if (!dialog.open) {
|
|
3405
|
+
dialog.show();
|
|
3406
|
+
}
|
|
3401
3407
|
}
|
|
3402
3408
|
} else {
|
|
3403
|
-
|
|
3404
|
-
|
|
3409
|
+
dialog.removeAttribute("popover");
|
|
3410
|
+
if (!dialog.open) {
|
|
3411
|
+
dialog.showModal();
|
|
3412
|
+
}
|
|
3405
3413
|
}
|
|
3406
3414
|
}
|
|
3407
3415
|
|
package/demo/index.min.js
CHANGED
|
@@ -3123,9 +3123,10 @@ class AuroFloater extends i$1 {
|
|
|
3123
3123
|
/**
|
|
3124
3124
|
* Opens the native dialog inside the bib.
|
|
3125
3125
|
*
|
|
3126
|
-
* - `
|
|
3127
|
-
* -
|
|
3126
|
+
* - `nested`: `setAttribute("open", "")` to anchor within the parent container.
|
|
3127
|
+
* - `!modal && !nested`: `showPopover()` to keep positional CSS intact
|
|
3128
3128
|
* and allow free keyboard flow to background content (WCAG 2.1.2).
|
|
3129
|
+
* - `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.
|
|
3129
3130
|
*/
|
|
3130
3131
|
async show() {
|
|
3131
3132
|
clearTimeout(this._closeTimeout);
|
|
@@ -3139,21 +3140,28 @@ class AuroFloater extends i$1 {
|
|
|
3139
3140
|
|
|
3140
3141
|
const nested = this.nested ?? false;
|
|
3141
3142
|
const modal = this.modal ?? false;
|
|
3143
|
+
const dialog = this.bib.dialog;
|
|
3142
3144
|
|
|
3143
3145
|
if (nested) {
|
|
3144
|
-
|
|
3146
|
+
dialog.setAttribute("open", "");
|
|
3145
3147
|
} else if (!modal) {
|
|
3146
|
-
if (typeof
|
|
3147
|
-
|
|
3148
|
-
|
|
3148
|
+
if (typeof dialog.showPopover === "function") {
|
|
3149
|
+
dialog.setAttribute("popover", "manual");
|
|
3150
|
+
if (!dialog.matches(":popover-open")) {
|
|
3151
|
+
dialog.showPopover();
|
|
3152
|
+
}
|
|
3149
3153
|
} else {
|
|
3150
3154
|
// Fallback for browsers without the Popover API
|
|
3151
|
-
|
|
3152
|
-
|
|
3155
|
+
dialog.removeAttribute("popover");
|
|
3156
|
+
if (!dialog.open) {
|
|
3157
|
+
dialog.show();
|
|
3158
|
+
}
|
|
3153
3159
|
}
|
|
3154
3160
|
} else {
|
|
3155
|
-
|
|
3156
|
-
|
|
3161
|
+
dialog.removeAttribute("popover");
|
|
3162
|
+
if (!dialog.open) {
|
|
3163
|
+
dialog.showModal();
|
|
3164
|
+
}
|
|
3157
3165
|
}
|
|
3158
3166
|
}
|
|
3159
3167
|
|
|
@@ -7,7 +7,7 @@ import{unsafeStatic as e,literal as t,html as o}from"lit/static-html.js";import{
|
|
|
7
7
|
<div class="backdrop" part="backdrop"></div>
|
|
8
8
|
<slot></slot>
|
|
9
9
|
</dialog>
|
|
10
|
-
`}}class Pe extends a{constructor(e){super(),this.behavior=e,this.floater=void 0;const t=`${this.floaterConfig.prefix.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}-bib`;this.floaterBibTag=c.prototype.generateTag(t,"0.0.0",Ue)}get floaterConfig(){return{prefix:"auroFloater"}}static get properties(){return{isPopoverVisible:{attribute:"open",type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.floater=new Me(this,this.behavior),this.floater.configure(this,this.floaterConfig.prefix),this.bib.addEventListener("dialog-cancel",()=>{this.modal||this.hide()}),this.bib.addEventListener("dialog-backdrop-click",()=>{this.modal||Me.topOpeningFloatingUI===this.floater&&this.hide()})}disconnectedCallback(){this.floater&&this.hide("disconnect"),super.disconnectedCallback()}updated(e){this.floater.handleUpdate(e),e.has("triggerElement")&&(this.floater.configure(this,this.floaterConfig.prefix),this.bib.bibLabel=this.triggerElement?.textContent.trim()),e.has("isPopoverVisible")&&(this.isPopoverVisible?this.show():this.hide())}async show(){if(clearTimeout(this._closeTimeout),this.floater.showBib(),this.bib?.dialog||await(this.bib?.updateComplete),!this.bib?.dialog)return;const e=this.nested??!1,t=this.modal??!1
|
|
10
|
+
`}}class Pe extends a{constructor(e){super(),this.behavior=e,this.floater=void 0;const t=`${this.floaterConfig.prefix.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)}-bib`;this.floaterBibTag=c.prototype.generateTag(t,"0.0.0",Ue)}get floaterConfig(){return{prefix:"auroFloater"}}static get properties(){return{isPopoverVisible:{attribute:"open",type:Boolean,reflect:!0},triggerElement:{attribute:!1}}}firstUpdated(){this.floater=new Me(this,this.behavior),this.floater.configure(this,this.floaterConfig.prefix),this.bib.addEventListener("dialog-cancel",()=>{this.modal||this.hide()}),this.bib.addEventListener("dialog-backdrop-click",()=>{this.modal||Me.topOpeningFloatingUI===this.floater&&this.hide()})}disconnectedCallback(){this.floater&&this.hide("disconnect"),super.disconnectedCallback()}updated(e){this.floater.handleUpdate(e),e.has("triggerElement")&&(this.floater.configure(this,this.floaterConfig.prefix),this.bib.bibLabel=this.triggerElement?.textContent.trim()),e.has("isPopoverVisible")&&(this.isPopoverVisible?this.show():this.hide())}async show(){if(clearTimeout(this._closeTimeout),this.floater.showBib(),this.bib?.dialog||await(this.bib?.updateComplete),!this.bib?.dialog)return;const e=this.nested??!1,t=this.modal??!1,o=this.bib.dialog;e?o.setAttribute("open",""):t?(o.removeAttribute("popover"),o.open||o.showModal()):"function"==typeof o.showPopover?(o.setAttribute("popover","manual"),o.matches(":popover-open")||o.showPopover()):(o.removeAttribute("popover"),o.open||o.show())}hide(e=void 0){clearTimeout(this._closeTimeout);const t=this.bib?.dialog;t?.open?this._closeTimeout=setTimeout(()=>{t.open&&t.close()},300):"function"==typeof t?.hidePopover&&t.matches?.(":popover-open")&&(this._closeTimeout=setTimeout(()=>{t.matches?.(":popover-open")&&t.hidePopover(),t.removeAttribute("popover")},300)),this.floater.hideBib(e),"disconnect"===e&&this.floater.disconnect()}render(){return o`
|
|
11
11
|
<${this.floaterBibTag} id="bib"
|
|
12
12
|
?data-show=${this.isPopoverVisible}
|
|
13
13
|
?onBackdrop="${this.floaterConfig.backdrop}">
|
package/dist/index.d.ts
CHANGED
|
@@ -155,9 +155,10 @@ When expanded, the drawer will automatically display in fullscreen mode if the s
|
|
|
155
155
|
* - `register(name?: string = "auro-drawer") => void`: This will register this element with the browser.
|
|
156
156
|
* - `show() => void`: Opens the native dialog inside the bib.
|
|
157
157
|
*
|
|
158
|
-
* - `
|
|
159
|
-
* -
|
|
158
|
+
* - `nested`: `setAttribute("open", "")` to anchor within the parent container.
|
|
159
|
+
* - `!modal && !nested`: `showPopover()` to keep positional CSS intact
|
|
160
160
|
* and allow free keyboard flow to background content (WCAG 2.1.2).
|
|
161
|
+
* - `modal && !nested`: `showModal()` for native focus containment and top-layer rendering.
|
|
161
162
|
*
|
|
162
163
|
* ## CSS Custom Properties
|
|
163
164
|
*
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{A as AuroDrawer}from"./auro-drawer-
|
|
1
|
+
export{A as AuroDrawer}from"./auro-drawer-COaaMqSY.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
|
package/dist/registered.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as i}from"./auro-drawer-
|
|
1
|
+
import{A as i}from"./auro-drawer-COaaMqSY.js";import"lit/static-html.js";import"lit";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register();
|
package/package.json
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
"================================================================================"
|
|
8
8
|
],
|
|
9
9
|
"name": "@aurodesignsystem-dev/auro-drawer",
|
|
10
|
-
"version": "0.0.0-pr131.
|
|
10
|
+
"version": "0.0.0-pr131.25",
|
|
11
11
|
"description": "auro-drawer HTML custom element",
|
|
12
12
|
"repository": {
|
|
13
13
|
"type": "git",
|
|
@@ -21,7 +21,6 @@
|
|
|
21
21
|
"node": ">=20"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
|
-
"@aurodesignsystem-dev/auro-library": "^0.0.0-pr273.0",
|
|
25
24
|
"lit": "^3.3.2"
|
|
26
25
|
},
|
|
27
26
|
"devDependencies": {
|
|
@@ -29,7 +28,7 @@
|
|
|
29
28
|
"@aurodesignsystem/auro-cli": "^3.7.1",
|
|
30
29
|
"@aurodesignsystem/auro-config": "^1.3.1",
|
|
31
30
|
"@aurodesignsystem/auro-icon": "^9.2.0",
|
|
32
|
-
"@aurodesignsystem/auro-library": "^5.13.
|
|
31
|
+
"@aurodesignsystem/auro-library": "^5.13.2",
|
|
33
32
|
"@aurodesignsystem/design-tokens": "^9.0.0",
|
|
34
33
|
"@aurodesignsystem/webcorestylesheets": "^11.1.3",
|
|
35
34
|
"@web/test-runner-commands": "^0.9.0",
|