@db-ux/wc-core-components 4.11.1 → 4.12.1

package/dist/collection/components/custom-select-list/custom-select-list.js

@@ -1,4 +1,4 @@
-import { cls } from "../../utils";
+import { cls } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -85,9 +85,9 @@ export class DBCustomSelectList {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '2dee04c035ef27c7f398805eee1c77e7a3ad893c', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (h("div", { key: '753c3016f6c9a1ed9fce2fa8c7ae00b9ff73383d', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '64b6f1efc4344d7e274a5dd3ad78ce80983a8b77' }, h("slot", { key: '26e0de28808a85216b9f1dcb8f788928a0c62c15' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: '6fce279c5ddf56f52c574e98d60335cd689d7e2c' }, h("slot", { key: '667b6c5979cee0f28941fc4e62ba67d9b5878373' }))));
     }
     static get is() { return "db-custom-select-list"; }
     static get properties() {
@@ -101,7 +101,7 @@ export class DBCustomSelectList {
                     "references": {
                         "DBCustomSelectListProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list/model.ts::DBCustomSelectListProps",
                             "referenceLocation": "DBCustomSelectListProps"
                         }
@@ -127,7 +127,7 @@ export class DBCustomSelectList {
                     "references": {
                         "DBCustomSelectListProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list/model.ts::DBCustomSelectListProps",
                             "referenceLocation": "DBCustomSelectListProps"
                         }
@@ -153,7 +153,7 @@ export class DBCustomSelectList {
                     "references": {
                         "DBCustomSelectListProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list/model.ts::DBCustomSelectListProps",
                             "referenceLocation": "DBCustomSelectListProps"
                         }
@@ -179,7 +179,7 @@ export class DBCustomSelectList {
                     "references": {
                         "DBCustomSelectListProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list/model.ts::DBCustomSelectListProps",
                             "referenceLocation": "DBCustomSelectListProps"
                         }
@@ -203,7 +203,7 @@ export class DBCustomSelectList {
                     "references": {
                         "DBCustomSelectListProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list/model.ts::DBCustomSelectListProps",
                             "referenceLocation": "DBCustomSelectListProps"
                         }

package/dist/collection/components/custom-select-list-item/custom-select-list-item.js

@@ -1,4 +1,4 @@
-import { cls, getBoolean, getBooleanAsString } from "../../utils";
+import { cls, getBoolean, getBooleanAsString } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -105,12 +105,12 @@ export class DBCustomSelectListItem {
     }
     render() {
         var _a, _b;
-        return (h("li", { key: 'cb467f74569cd0505dab2ac02a9b375de8f5a9bc', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: '95e2aeea15f86890868013ddb33a6b365d814fc4', class: cls("db-custom-select-list-item", this.className, {
                 "db-checkbox": this.type === "checkbox" && !this.isGroupTitle,
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-divider": getBooleanAsString(this.hasDivider, "hasDivider") }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", null))) : (h("span", null, this.groupTitle))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-divider": getBooleanAsString(this.hasDivider, "hasDivider") }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), h("span", { class: "db-custom-select-list-item-label" }, this.label ? this.label : null, h("slot", null)))) : (h("span", null, this.groupTitle))));
     }
     static get is() { return "db-custom-select-list-item"; }
     static get properties() {
@@ -124,7 +124,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -150,7 +150,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -176,7 +176,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -202,7 +202,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -228,7 +228,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -254,7 +254,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -278,7 +278,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -304,7 +304,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -330,7 +330,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -356,7 +356,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -382,7 +382,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -408,7 +408,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -434,7 +434,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }
@@ -460,7 +460,7 @@ export class DBCustomSelectListItem {
                     "references": {
                         "DBCustomSelectListItemProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-list-item/model.ts::DBCustomSelectListItemProps",
                             "referenceLocation": "DBCustomSelectListItemProps"
                         }

package/dist/collection/components/divider/divider.js

@@ -1,4 +1,4 @@
-import { cls } from "../../utils";
+import { cls } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -85,7 +85,7 @@ export class DBDivider {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '09e35f9aa6912126375f69d68b75a1d64a2d0ba8', class: cls("db-divider", this.className), ref: (el) => {
+        return (h("div", { key: '4f8780fd8ac04d3d4db08bbfeae57f0a86cf36ad', class: cls("db-divider", this.className), ref: (el) => {
                 this._ref = el;
             }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-margin": this.margin, "data-variant": this.variant, "data-emphasis": this.emphasis, "data-width": this.width }));
     }
@@ -101,7 +101,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }
@@ -127,7 +127,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }
@@ -151,7 +151,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }
@@ -177,7 +177,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }
@@ -203,7 +203,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }
@@ -229,7 +229,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }
@@ -255,7 +255,7 @@ export class DBDivider {
                     "references": {
                         "DBDividerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/divider/model.ts::DBDividerProps",
                             "referenceLocation": "DBDividerProps"
                         }

package/dist/collection/components/drawer/drawer.js

@@ -1,5 +1,5 @@
-import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, isKeyboardEvent, } from "../../utils";
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, isKeyboardEvent, } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -8,8 +8,22 @@ import { h } from "@stencil/core";
 export class DBDrawer {
     constructor() {
         this.initialized = false;
+        this.backdropPointerDown = false;
         this.observer = undefined;
     }
+    isNotModal() {
+        return (this.position === "absolute" ||
+            this.backdrop === "none" ||
+            this.variant === "inside");
+    }
+    handleBackdropPointerDown(event) {
+        var _a;
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        this.backdropPointerDown = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG";
+    }
     handleClose(event, forceClose) {
         var _a;
         if (!event)
@@ -31,11 +45,15 @@ export class DBDrawer {
             }
             if (((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
                 event.type === "click" &&
-                this.backdrop !== "none") {
+                this.backdrop !== "none" &&
+                this.backdropPointerDown) {
                 if (this.close) {
                     this.close.emit(event);
                 }
             }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            this.backdropPointerDown = false;
         }
     }
     handleDialogOpen() {
@@ -45,12 +63,15 @@ export class DBDrawer {
                 if (this.dialogContainerRef) {
                     this.dialogContainerRef.removeAttribute("data-transition");
                 }
-                if (this.position === "absolute" ||
-                    this.backdrop === "none" ||
-                    this.variant === "inside") {
+                if (this.isNotModal()) {
                     this._ref.show();
                 }
                 else {
+                    // Set the closedby attribute imperatively: the JSX
+                    // dialog type does not know this attribute yet, and it
+                    // only applies to modal dialogs. "any" enables native
+                    // light dismiss (backdrop click / Esc).
+                    this._ref.setAttribute("closedby", "any");
                     this._ref.showModal();
                 }
                 void delay(() => {
@@ -177,11 +198,11 @@ export class DBDrawer {
     }
     render() {
         var _a, _b, _c;
-        return (h("dialog", { key: '68343ae9da612485135f6e0b01bd581de86d1dc6', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
+        return (h("dialog", { key: 'c03126193778f601b7ff3aeeeff508c8920e67a7', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: 'b6a860730f150e365c684a2ed362f8ad3e84e862', class: cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onMouseDown: (event) => this.handleBackdropPointerDown(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: '64661349d858bf5be872d664b44bc6fa829014e6', class: cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: 'd8347218a266eb48f2b86717d6ba210c907f4c18', class: "db-drawer-header" }, h("div", { key: '6e9a89da493fa209e09bf1ddb5a5719b52606e62', class: "db-drawer-header-text" }, h("slot", { key: '503445639dd0a3e51a6f99f5aff3eb039e6d34eb', name: "drawerHeader" })), h("db-button", { key: '39400683f7e2a05c8c8dd33be6c9913d72d5454d', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'f0e4ebb273ea7f53fd1c026f7f50a16f89ab3259', class: "db-drawer-content" }, h("slot", { key: 'e1ead064fd822ca9fd33be44af5fd52801ba33ea' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: 'b758a538b1337573090305aadcf3bc3befef1bf3', class: "db-drawer-header" }, h("div", { key: '235f2be7afc9c968b9270178c2720a5a50436123', class: "db-drawer-header-text" }, h("slot", { key: '26787a5e103d2d34785ce1eccd0ff73b6733fce8', name: "drawerHeader" })), h("db-button", { key: '1d22b406c4e235e91bc9bfc3265a0aaa9c7f8e8c', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: '0e338b2e11c8582ba59595f34d8fc4911db7025e', class: "db-drawer-content" }, h("slot", { key: 'c761758ada4d1602878a58de6003e01cf5b5d075' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -195,7 +216,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -221,7 +242,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -247,7 +268,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -273,7 +294,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -299,7 +320,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -325,7 +346,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -349,7 +370,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -375,7 +396,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -401,7 +422,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -427,7 +448,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -453,7 +474,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -479,7 +500,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -505,7 +526,7 @@ export class DBDrawer {
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/drawer/model.ts::DBDrawerProps",
                             "referenceLocation": "DBDrawerProps"
                         }
@@ -527,6 +548,7 @@ export class DBDrawer {
     static get states() {
         return {
             "initialized": {},
+            "backdropPointerDown": {},
             "observer": {}
         };
     }

package/dist/collection/components/header/header.js

@@ -1,6 +1,6 @@
-import { DEFAULT_BURGER_MENU } from "../../shared/constants";
-import { addAttributeToChildren, cls, getBoolean } from "../../utils";
-import { isEventTargetNavigationItem } from "../../utils/navigation";
+import { DEFAULT_BURGER_MENU } from "../../shared/constants.js";
+import { addAttributeToChildren, cls, getBoolean } from "../../utils/index.js";
+import { isEventTargetNavigationItem } from "../../utils/navigation.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -128,9 +128,9 @@ export class DBHeader {
     }
     render() {
         var _a, _b, _c;
-        return (h("header", { key: '5d1e86b7e973ba201396327b7cdce38e2ac97228', class: cls("db-header", this.className), ref: (el) => {
+        return (h("header", { key: 'aeeac33c4b9db2b9749b24ccca840aa03bac81df', class: cls("db-header", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("div", { key: 'e01bfcb3611a7ff4ddd3fc6b758dc3bf40cbe712', class: "db-header-meta-navigation" }, h("slot", { key: '99f6ebb0c2bca335d25bd4eaafdb6bd9978d9c8d', name: "metaNavigation" })), h("div", { key: '698fa926fa448a6a540e8bf13676f92a8a0408e3', class: "db-header-navigation-bar" }, h("div", { key: '872fb23c94eb3ec81deca9eef498146b4c434e5e', class: "db-header-brand-container" }, h("slot", { key: '5575ee45816a7ecf9d5102b7c54004522fb3d0dd', name: "brand" })), h("div", { key: 'cda8077a77bde02515ed9c12d720802c0e1a85a0', class: "db-header-navigation-container" }, h("div", { key: '76bfcfe58004cc685d978815058aa1593160f90c', class: "db-header-navigation" }, h("slot", { key: '516e0953f7352fa7f84a8affdae187c345f77dbd' })), h("div", { key: '97eb5eb2f86ae44c85e5779f84d7e95f362c1b26', class: "db-header-primary-action" }, h("slot", { key: '2db7a8e65e46009f7fcf621c4d654204f8160e56', name: "primaryAction" }))), h("div", { key: '6478928d7b967b365823331648d12003b4e7eefa', class: "db-header-action-container" }, h("div", { key: 'ade80b06a587d723ebe9c1dfb3b8ca0cb3499ab6', class: "db-header-burger-menu-container" }, h("db-button", { key: '5e06f6da7bdcc1b12de1b9dbdbb98b6969c80f62', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '7afbb296999738cf13b37b4f461fefdddff18ead', class: "db-header-secondary-action" }, h("slot", { key: '6a39330a6eac4a0d6c9e9bcba648590d3a30cee9', name: "secondaryAction" })))), h("db-drawer", { key: '5ec7b632906a280475122fa9b189345ec55917f9', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: 'c7febad8b66a9a3d3c238c4c87027534f09c8601', class: "db-header-drawer-navigation" }, h("div", { key: '784b2d12c1838ae2ccd90575f1ef04ce97b70104', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '6189ff74ac04565039a45952c8ea910d5260e9e0' })), h("div", { key: '67223d12d595038a36d9c44953a6cb24894ed35d', class: "db-header-meta-navigation" }, h("slot", { key: '7c3de485a3d7516978cfd16d8ef494a61f8bc4af', name: "metaNavigation" }))), h("div", { key: '01e0e9ac362d8f553adf53379be18a8cdeb2b816', class: "db-header-secondary-action" }, h("slot", { key: 'fa6c328af54f4aff0f6c7ec80d7a2b36ea63b49a', name: "secondaryAction" })))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width, "data-on-forcing-mobile": this.forceMobile && !this.forcedToMobile }, h("div", { key: '1078f960dbc6ed24664b5ff5c23c3524d725b822', class: "db-header-meta-navigation" }, h("slot", { key: 'c55739d8ae17254c2aa457795a31017a07ab5a88', name: "metaNavigation" })), h("div", { key: '6e82ab28439854dec6bcc6dcf9ed3fa36c6f5e69', class: "db-header-navigation-bar" }, h("div", { key: '7e991f8cdee7c1767ea3aefdd9a01c662fb5d178', class: "db-header-brand-container" }, h("slot", { key: 'a1e2aea32b28520095612367e97a8b955f93bd96', name: "brand" })), h("div", { key: '273f17e3b8594dad83d8fbad021008405d865176', class: "db-header-navigation-container" }, h("div", { key: '8bd9a08a0f3cf8083d238963c2cc3715edf1d5a4', class: "db-header-navigation" }, h("slot", { key: 'abfd95ef152c34e53806c114f243ff26b63a9bbe' })), h("div", { key: '4a61c6d86a0362913b45a432095a621ca22d1268', class: "db-header-primary-action" }, h("slot", { key: '3b79bfc6d85a0a39fcb3ca2550be0a2a36b6a682', name: "primaryAction" }))), h("div", { key: '1c506669010a04ae260b692811ed17d76a3ecc03', class: "db-header-action-container" }, h("div", { key: 'aa522f5b0010a1747a1bc7f550c3700a0bad4e8a', class: "db-header-burger-menu-container" }, h("db-button", { key: '2223a3865ed4ea94e3a3849e73e4113e1db0fb66', icon: "menu", variant: "ghost", noText: true, onClick: () => this.handleToggle() }, (_c = this.burgerMenuLabel) !== null && _c !== void 0 ? _c : DEFAULT_BURGER_MENU)), h("div", { key: '86f41a6b354de871ac3f4d9cf8b7205c699ba189', class: "db-header-secondary-action" }, h("slot", { key: '43e443323eb93871bb19cbea2222da6eb8ebd0e8', name: "secondaryAction" })))), h("db-drawer", { key: '8a8474e8a7f54d827f5844f76dea9ce44ef565e0', class: "db-header-drawer", spacing: "small", rounded: true, closeButtonId: this.closeButtonId, closeButtonText: this.closeButtonText, open: getBoolean(this.drawerOpen), onClose: () => this.handleToggle() }, h("div", { key: '21f360dc09f2d53aea13fde8b13c1ffb3781f558', class: "db-header-drawer-navigation" }, h("div", { key: '0c567049a2c1788decb48b10b0115348d2f3b406', class: "db-header-navigation", onClick: (event) => this.handleNavigationItemClick(event) }, h("slot", { key: '1403d518f5f63eca522ccecaf5a4b5f153649a33' })), h("div", { key: 'c624cf3f4ea7e89a87e430ef96b34fa4ce6d4236', class: "db-header-meta-navigation" }, h("slot", { key: '4fde72b2d7d8c098a8a09160e8f36ca2ddbd0702', name: "metaNavigation" }))), h("div", { key: '91d6fc1b39b3cfc39b8563956971f56a168da218', class: "db-header-secondary-action" }, h("slot", { key: 'a9745f3cf4c91db6a3cd0bc4e4bf904b8bc7a2aa', name: "secondaryAction" })))));
     }
     static get is() { return "db-header"; }
     static get properties() {
@@ -144,7 +144,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -170,7 +170,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -196,7 +196,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -222,7 +222,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -248,7 +248,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -272,7 +272,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -298,7 +298,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -324,7 +324,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }
@@ -350,7 +350,7 @@ export class DBHeader {
                     "references": {
                         "DBHeaderProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/header/model.ts::DBHeaderProps",
                             "referenceLocation": "DBHeaderProps"
                         }