@db-ux/wc-core-components 4.12.0 → 4.13.0-shell-f221975

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

@@ -4,6 +4,8 @@ import { DocumentClickListener } from "../../utils/document-click-listener.js";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener.js";
 import { handleFixedDropdown } from "../../utils/floating-components.js";
 import { addResetEventListener, } from "../../utils/form-components.js";
+import { IntersectionObserverListener } from "../../utils/intersection-observer-listener.js";
+import { ResizeObserverListener } from "../../utils/resize-observer-listener.js";
 import { h, Fragment } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -40,7 +42,8 @@ export class DBCustomSelect {
         this._documentClickListenerCallbackId = undefined;
         this._internalChangeTimestamp = 0;
         this._documentScrollListenerCallbackId = undefined;
-        this._observer = undefined;
+        this._intersectionObserverCallbackId = undefined;
+        this._resizeObserverCallbackId = undefined;
         this._searchValue = undefined;
         this.selectAllChecked = false;
         this.selectAllIndeterminate = false;
@@ -100,7 +103,6 @@ export class DBCustomSelect {
         }
     }
     handleDropdownToggle(event) {
-        var _a, _b;
         if (this.dropdownToggle) {
             event.stopPropagation();
             this.dropdownToggle.emit(event);
@@ -111,7 +113,13 @@ export class DBCustomSelect {
             this._documentScrollListenerCallbackId =
                 new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event));
             this.handleAutoPlacement();
-            (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(this.detailsRef);
+            this._resizeObserverCallbackId = new ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement());
+            this._intersectionObserverCallbackId =
+                new IntersectionObserverListener().observe(this.detailsRef, (entry) => {
+                    if (!entry.isIntersecting && this.detailsRef.open) {
+                        this.detailsRef.open = false;
+                    }
+                });
             if (!event.target.dataset["test"]) {
                 // We need this workaround for snapshot testing
                 this.handleOpenByKeyboardFocus();
@@ -124,7 +132,12 @@ export class DBCustomSelect {
             if (this._documentScrollListenerCallbackId) {
                 new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
             }
-            (_b = this._observer) === null || _b === void 0 ? void 0 : _b.unobserve(this.detailsRef);
+            if (this._resizeObserverCallbackId) {
+                new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            }
+            if (this._intersectionObserverCallbackId) {
+                new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            }
         }
     }
     getNativeSelectValue() {
@@ -429,6 +442,7 @@ export class DBCustomSelect {
         }
     }
     handleSearch(valueOrEvent) {
+        var _a;
         if (valueOrEvent === undefined) {
             return;
         }
@@ -457,6 +471,9 @@ export class DBCustomSelect {
                     .toLowerCase()
                     .includes(filterText.toLowerCase()));
         }
+        if ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) {
+            this.handleAutoPlacement();
+        }
     }
     handleClearAll(event) {
         event.stopPropagation();
@@ -686,10 +703,14 @@ export class DBCustomSelect {
         this.watch11Fn();
     }
     watch12Fn() {
-        var _a, _b;
+        var _a, _b, _c;
         this._options = this.options;
         this.amountOptions =
             (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0;
+        // Reposition open auto-width dropdowns: replacing options can change their content width.
+        if ((_c = this.detailsRef) === null || _c === void 0 ? void 0 : _c.open) {
+            this.handleAutoPlacement();
+        }
     }
     watch12() {
         this.watch12Fn();
@@ -787,16 +808,6 @@ export class DBCustomSelect {
         const onMountHook_0 = () => {
             this.resetIds();
             this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
-            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-                this._observer = new IntersectionObserver((payload) => {
-                    if (this.detailsRef) {
-                        const entry = payload.find(({ target }) => target === this.detailsRef);
-                        if (entry && !entry.isIntersecting && this.detailsRef.open) {
-                            this.detailsRef.open = false;
-                        }
-                    }
-                });
-            }
         };
         onMountHook_0();
         const onMountHook_1 = () => {
@@ -826,23 +837,36 @@ export class DBCustomSelect {
     disconnectedCallback() {
         var _a, _b;
         (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        // Clean up singleton observers if dropdown was open when unmounting
+        if (this._documentClickListenerCallbackId) {
+            new DocumentClickListener().removeCallback(this._documentClickListenerCallbackId);
+        }
+        if (this._documentScrollListenerCallbackId) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+        }
+        if (this._resizeObserverCallbackId) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+        }
+        if (this._intersectionObserverCallbackId) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+        }
         (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: '83046fc855d23b9e678b3439a05a837849dffff1', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: 'e670905415a84f4edd7f9ed4cfe637201aed2b1f', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required, "required"), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '015ece24c6eafe5d148749641fa045cc40e3352c', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '1472fec486eaa5abf3103037c1ab3beb94001f4f', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required, "required"), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: 'bcece5c0050e198def7da6608f9e7bc55cae2252', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '9ced4c07979c076af3a7ac9187b732035ed77c47', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, "data-custom-validity": this._validity, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
             ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), h("details", { key: 'da28a110e387920a7ca6b7bb20e367d6aab2e7e5', ref: (el) => {
+            : null)), h("details", { key: '56ecb82c9470119ded325d106a0f0d69ee573033', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: 'a9708a4d0dc7e24e3a2a0a5790b7bdf1f6d9c711' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '8f927bc9860c5c3a4859e28ae3a7cf19ef32a84b' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -852,7 +876,7 @@ export class DBCustomSelect {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '2239de0c36c6289a623146c363987b1874e468cc', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '55fe7e28b2124a471bc814601925cdf86abd8178', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '294d2fad5268e30791745abee8589d5266524807', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '5ea00e32bfe11384196d884a22b502f69e2645db', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'c7e52d96c2b30151a5bf0468675dd346066ae5c7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'bf805892157e5f35c4c705f6a4bc2733f732a73e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-custom-select"; }
     static get properties() {
@@ -2152,7 +2176,8 @@ export class DBCustomSelect {
             "_documentClickListenerCallbackId": {},
             "_internalChangeTimestamp": {},
             "_documentScrollListenerCallbackId": {},
-            "_observer": {},
+            "_intersectionObserverCallbackId": {},
+            "_resizeObserverCallbackId": {},
             "_searchValue": {},
             "selectAllChecked": {},
             "selectAllIndeterminate": {},

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

@@ -86,9 +86,9 @@ export class DBCustomSelectDropdown {
     }
     render() {
         var _a, _b;
-        return (h("article", { key: '7720cebaaa9128aa7f12a3720aa1374a0fd689d7', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (h("article", { key: 'f4f45bf53a72ecdfc2f2d8a5efe56cd97b78ea39', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", 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 }, h("slot", { key: '19d66fe8c4369630a1debf34e448c0f13ebe0be9' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width }, h("slot", { key: 'ca1c3bb74d4197526662177cff18d959d215d73a' })));
     }
     static get is() { return "db-custom-select-dropdown"; }
     static get properties() {

package/dist/collection/components/custom-select-form-field/custom-select-form-field.js

@@ -85,9 +85,9 @@ export class DBCustomSelectFormField {
     }
     render() {
         var _a, _b;
-        return (h("summary", { key: '77e485f44f3ac511a95cf814b09f8460b6048fbc', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: '40b13d21ae502631dacf0371a73a9410427ea74f', class: cls("db-custom-select-form-field", 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 }, h("slot", { key: '382c889e2abf066105029031da4ecb0147c86607' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'f65747fc63c61c12fed05d268039459b0913b041' })));
     }
     static get is() { return "db-custom-select-form-field"; }
     static get properties() {

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

@@ -85,9 +85,9 @@ export class DBCustomSelectList {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '753c3016f6c9a1ed9fce2fa8c7ae00b9ff73383d', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (h("div", { key: '298e676b1b8d6dbdb9378aa4a25c3241ebf21243', 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: '6fce279c5ddf56f52c574e98d60335cd689d7e2c' }, h("slot", { key: '667b6c5979cee0f28941fc4e62ba67d9b5878373' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: 'b110c3a537467cc48aa291a9067ac36b1ad249de' }, h("slot", { key: 'f5223c7e2a6e1f8c0620a81fcb4f31e89fc06786' }))));
     }
     static get is() { return "db-custom-select-list"; }
     static get properties() {

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

@@ -105,12 +105,12 @@ export class DBCustomSelectListItem {
     }
     render() {
         var _a, _b;
-        return (h("li", { key: '95e2aeea15f86890868013ddb33a6b365d814fc4', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: '2e8eca178b50e65b563dea560b11cf8ee20da8c8', 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() {

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

@@ -85,7 +85,7 @@ export class DBDivider {
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '4f8780fd8ac04d3d4db08bbfeae57f0a86cf36ad', class: cls("db-divider", this.className), ref: (el) => {
+        return (h("div", { key: 'b74e9a9bc0bf12d414e6f828b52a1eba7406ac81', 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 }));
     }

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

@@ -1,17 +1,32 @@
-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
- * @slot drawerHeader - TODO: Add description for slotDrawerHeader
+ * @slot header - TODO: Add description for slotHeader
+ * @slot footer - TODO: Add description for slotFooter
  */
 export class DBDrawer {
     constructor() {
         this.initialized = false;
+        this.backdropPointerDown = false;
+        this._closeTimeoutId = undefined;
         this.observer = undefined;
     }
-    handleClose(event, forceClose) {
+    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, _b, _c;
         if (!event)
             return;
         if (isKeyboardEvent(event)) {
@@ -29,13 +44,19 @@ export class DBDrawer {
                     this.close.emit(event);
                 }
             }
-            if (((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
+            const isBackdrop = ((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
                 event.type === "click" &&
-                this.backdrop !== "none") {
+                this.backdrop !== "none" &&
+                this.backdropPointerDown;
+            const isCloseButton = Boolean((_c = (_b = event.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, '[data-action="close"]'));
+            if (isBackdrop || isCloseButton) {
                 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,15 +66,13 @@ 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 {
                     this._ref.showModal();
                 }
-                void delay(() => {
+                delay(() => {
                     if (this.dialogContainerRef) {
                         this.dialogContainerRef.dataset["transition"] =
                             "open";
@@ -65,10 +84,26 @@ export class DBDrawer {
                     this.dialogContainerRef.dataset["transition"] =
                         "close";
                 }
-                void delay(() => {
+                // Cancel any previously scheduled close to prevent double-close on rapid toggling
+                if (this._closeTimeoutId !== undefined) {
+                    clearTimeout(this._closeTimeoutId);
+                }
+                // Read close delay from CSS (already accounts for prefers-reduced-motion)
+                let closeDelay = 0;
+                if (this.dialogContainerRef) {
+                    const durationStr = getComputedStyle(this.dialogContainerRef)
+                        .getPropertyValue("--db-drawer-close-delay")
+                        .trim();
+                    const seconds = parseFloat(durationStr);
+                    if (seconds > 0) {
+                        closeDelay = seconds * 1000 + 1;
+                    }
+                }
+                this._closeTimeoutId = window.setTimeout(() => {
                     var _a;
                     (_a = this._ref) === null || _a === void 0 ? void 0 : _a.close();
-                }, 401);
+                    this._closeTimeoutId = undefined;
+                }, closeDelay);
             }
         }
     }
@@ -173,15 +208,26 @@ export class DBDrawer {
     }
     disconnectedCallback() {
         var _a;
+        // Cancel any pending close timeout to prevent stale references
+        if (this._closeTimeoutId !== undefined) {
+            clearTimeout(this._closeTimeoutId);
+        }
+        if (this._ref && this.position === "absolute") {
+            const refElement = this._ref;
+            const parent = refElement.parentElement;
+            if (parent) {
+                parent.style.position = "";
+            }
+        }
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (h("dialog", { key: 'da82f7380e7d7e4fcad45db3ba3ec83b02b2c197', 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: '9abf0f743cfc3f730e881ccdf900cb28ebc2635d', 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: '2cf07ab412c07ee52693bc274e672e162fcfdb6a', 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: 'ed41dd90e899c94b17669656bcc15a934e34d9e2', 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: 'e157aa7d79396cba7dc80d9b28cfcf0bbd5023f9', class: "db-drawer-header" }, h("div", { key: '8297856ab0be4390b13de2331993615a777d0fb0', class: "db-drawer-header-text" }, h("slot", { key: '171f6828f42cdea289e09dd7700561d35df8fe71', name: "drawerHeader" })), h("db-button", { key: 'c066db25db7b90abdd4f4cd169257a7f1f523a47', 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: 'd25e9aab5c3a65028599e09d0cb0c8e9b714b459', class: "db-drawer-content" }, h("slot", { key: '77cb41d2176ca55ead3ad1f4dd58605864bf8d6a' })))));
+            }, "data-container-size": this.containerSize, "data-show-spacing": getBooleanAsString((_c = this.showSpacing) !== null && _c !== void 0 ? _c : true, "showSpacing"), "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("slot", { key: '71f9997f3fd49aab5923108bcca1826bcfddfbbb', name: "header" }), h("div", { key: '0093d8bf9dcb0098601622b600561a35ab21c51f', class: "db-drawer-content" }, h("slot", { key: '7f52dbe8e4f9ed593a02d04e41aa6e65025a84a3' })), h("slot", { key: 'e5fdb2447f8b970a499aae4cbc49461be45bfa61', name: "footer" }))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -392,12 +438,12 @@ export class DBDrawer {
                 "reflect": false,
                 "attribute": "classname"
             },
-            "spacing": {
+            "containerSize": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBDrawerProps[\"spacing\"]",
-                    "resolved": "string",
+                    "original": "DBDrawerProps[\"containerSize\"]",
+                    "resolved": "\"full\" | \"large\" | \"medium\" | \"small\"",
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
@@ -416,14 +462,14 @@ export class DBDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "spacing"
+                "attribute": "container-size"
             },
-            "width": {
-                "type": "string",
+            "showSpacing": {
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBDrawerProps[\"width\"]",
-                    "resolved": "string",
+                    "original": "DBDrawerProps[\"showSpacing\"]",
+                    "resolved": "boolean | string",
                     "references": {
                         "DBDrawerProps": {
                             "location": "import",
@@ -442,7 +488,7 @@ export class DBDrawer {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "width"
+                "attribute": "show-spacing"
             },
             "rounded": {
                 "type": "any",
@@ -469,64 +515,14 @@ export class DBDrawer {
                 "setter": false,
                 "reflect": false,
                 "attribute": "rounded"
-            },
-            "closeButtonId": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBDrawerProps[\"closeButtonId\"]",
-                    "resolved": "string",
-                    "references": {
-                        "DBDrawerProps": {
-                            "location": "import",
-                            "path": "./model.js",
-                            "id": "src/components/drawer/model.ts::DBDrawerProps",
-                            "referenceLocation": "DBDrawerProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "close-button-id"
-            },
-            "closeButtonText": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBDrawerProps[\"closeButtonText\"]",
-                    "resolved": "string",
-                    "references": {
-                        "DBDrawerProps": {
-                            "location": "import",
-                            "path": "./model.js",
-                            "id": "src/components/drawer/model.ts::DBDrawerProps",
-                            "referenceLocation": "DBDrawerProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "close-button-text"
             }
         };
     }
     static get states() {
         return {
             "initialized": {},
+            "backdropPointerDown": {},
+            "_closeTimeoutId": {},
             "observer": {}
         };
     }

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

@@ -2,3 +2,4 @@ export const DrawerBackdropList = ['none', 'strong', 'weak', 'invisible'];
 export const DrawerDirectionList = ['left', 'right', 'up', 'down'];
 export const DrawerVariantList = ['modal', 'inside'];
 export const DrawerPositionList = ['fixed', 'absolute'];
+export const DrawerContainerSizeList = ['small', 'medium', 'large', 'full'];

package/dist/collection/components/{navigation/navigation.js → drawer-footer/drawer-footer.js}

@@ -4,14 +4,14 @@ import { h } from "@stencil/core";
  * @slot children - This is a default/unnamed slot
 
  */
-export class DBNavigation {
+export class DBDrawerFooter {
     constructor() {
         this.observer = undefined;
     }
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-navigation");
+        const parent = element.closest("db-drawer-footer");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -20,7 +20,7 @@ export class DBNavigation {
                 const attr = mutation.target.attributes.getNamedItem((_a = mutation.attributeName) !== null && _a !== void 0 ? _a : "");
                 return (attr === null || attr === void 0 ? void 0 : attr.value) !== mutation.oldValue;
             })) {
-                this.enableAttributePassing(element, "db-navigation");
+                this.enableAttributePassing(element, "db-drawer-footer");
             }
         });
         this.observer.observe(parent, {
@@ -76,7 +76,7 @@ export class DBNavigation {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-navigation");
+        this.enableAttributePassing(this._ref, "db-drawer-footer");
         this.setupObserver(this._ref);
     }
     disconnectedCallback() {
@@ -85,25 +85,25 @@ export class DBNavigation {
     }
     render() {
         var _a, _b;
-        return (h("nav", { key: 'e9dbd8ab905cbb2dd887dfe21fc96afea70b9f70', class: cls("db-navigation", this.className), ref: (el) => {
+        return (h("footer", { key: 'c6774643907d061fe786a370dcf83e68ff101bc0', class: cls("db-drawer-footer", 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 }, h("menu", { key: '421231c4fabc97119732586bf221c07ebc914a19' }, h("slot", { key: 'f015b010c2d2e09570ead913a90d14160eed857c' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: 'b8ade96bd0be9a643be8fd1d5be2b8eefbb85a96' })));
     }
-    static get is() { return "db-navigation"; }
+    static get is() { return "db-drawer-footer"; }
     static get properties() {
         return {
             "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBNavigationProps[\"id\"]",
+                    "original": "DBDrawerFooterProps[\"id\"]",
                     "resolved": "string",
                     "references": {
-                        "DBNavigationProps": {
+                        "DBDrawerFooterProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/navigation/model.ts::DBNavigationProps",
-                            "referenceLocation": "DBNavigationProps"
+                            "id": "src/components/drawer-footer/model.ts::DBDrawerFooterProps",
+                            "referenceLocation": "DBDrawerFooterProps"
                         }
                     }
                 },
@@ -122,14 +122,14 @@ export class DBNavigation {
                 "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBNavigationProps[\"propOverrides\"]",
+                    "original": "DBDrawerFooterProps[\"propOverrides\"]",
                     "resolved": "{ id?: string; }",
                     "references": {
-                        "DBNavigationProps": {
+                        "DBDrawerFooterProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/navigation/model.ts::DBNavigationProps",
-                            "referenceLocation": "DBNavigationProps"
+                            "id": "src/components/drawer-footer/model.ts::DBDrawerFooterProps",
+                            "referenceLocation": "DBDrawerFooterProps"
                         }
                     }
                 },
@@ -146,14 +146,14 @@ export class DBNavigation {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBNavigationProps[\"className\"]",
+                    "original": "DBDrawerFooterProps[\"className\"]",
                     "resolved": "string",
                     "references": {
-                        "DBNavigationProps": {
+                        "DBDrawerFooterProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/navigation/model.ts::DBNavigationProps",
-                            "referenceLocation": "DBNavigationProps"
+                            "id": "src/components/drawer-footer/model.ts::DBDrawerFooterProps",
+                            "referenceLocation": "DBDrawerFooterProps"
                         }
                     }
                 },

package/dist/collection/components/drawer-footer/index.js

@@ -0,0 +1,2 @@
+import { DBDrawerFooter } from "./drawer-footer";
+export default DBDrawerFooter;

package/dist/collection/components/drawer-footer/model.js

@@ -0,0 +1 @@
+export {};