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

package/dist/cjs/db-control-panel-secondary-actions.cjs.entry.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBControlPanelSecondaryActions = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-secondary-actions");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                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-control-panel-secondary-actions");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-secondary-actions");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b;
+        return (index.h("div", { key: 'ec95f71c0c49e938e209f3b7811175d870ad4989', class: index$1.cls("db-control-panel-secondary-actions", 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 }, index.h("slot", { key: 'de8c3e189de79ffd03dad8b7400a5482fc4391b8' })));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_control_panel_secondary_actions = DBControlPanelSecondaryActions;

package/dist/cjs/db-control-panel-skip-navigation.cjs.entry.js

@@ -0,0 +1,96 @@
+'use strict';
+
+var index = require('./index-C313bRqJ.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+
+const DBControlPanelSkipNavigation = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.observer = undefined;
+    }
+    setupObserver(element) {
+        if (!element)
+            return;
+        const parent = element.closest("db-control-panel-skip-navigation");
+        if (!parent || this.observer)
+            return;
+        this.observer = new MutationObserver((mutations) => {
+            if (mutations.some((mutation) => {
+                var _a;
+                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-control-panel-skip-navigation");
+            }
+        });
+        this.observer.observe(parent, {
+            attributes: true,
+            attributeOldValue: true,
+        });
+    }
+    /**
+     * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
+     * @param element  the ref for the component
+     * @param customElementSelector  the custom element like `my-component`
+     */
+    enableAttributePassing(element, customElementSelector) {
+        const parent = element === null || element === void 0 ? void 0 : element.closest(customElementSelector);
+        if (element && parent) {
+            const attributes = parent.attributes;
+            for (let i = 0; i < attributes.length; i++) {
+                const attr = attributes.item(i);
+                if (attr && attr.name !== 'data-density' &&
+                    (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
+                    if (attr.value) {
+                        element.setAttribute(attr.name, attr.value);
+                    }
+                    else {
+                        element.removeAttribute(attr.name);
+                    }
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && ["style"].includes(attr.name)) {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
+                    const isWebComponent = attr.value.includes("hydrated");
+                    const value = attr.value.replace("hydrated", "").trim();
+                    const currentClass = element.getAttribute("class");
+                    element.setAttribute(attr.name, `${currentClass ? currentClass : ""}${value ? ` ${value}` : ""}`);
+                    if (isWebComponent) {
+                        // Stencil is using this class for lazy loading component
+                        parent.setAttribute("class", "hydrated");
+                    }
+                    else {
+                        parent.removeAttribute(attr.name);
+                    }
+                }
+            }
+        }
+    }
+    componentDidLoad() {
+        if (typeof document !== "undefined" && this.rootElement && this.rootElement.dataset.connect) {
+            const connectedElement = document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);
+            if (connectedElement) {
+                connectedElement.remove();
+            }
+        }
+        this.enableAttributePassing(this._ref, "db-control-panel-skip-navigation");
+        this.setupObserver(this._ref);
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c;
+        return (index.h("div", { key: '3635ad77cee43a3b1be6e98148ce4b8b63658846', class: index$1.cls("db-control-panel-skip-navigation", 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 }, this.text ? (index.h("a", { href: `#${(_c = this.target) !== null && _c !== void 0 ? _c : constants.MAIN_CONTENT_ID}` }, this.text)) : (index.h("slot", null))));
+    }
+    get rootElement() { return index.getElement(this); }
+};
+
+exports.db_control_panel_skip_navigation = DBControlPanelSkipNavigation;

package/dist/cjs/db-custom-button.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBCustomButton = class {
     constructor(hostRef) {
@@ -85,10 +85,10 @@ const DBCustomButton = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: 'b1552822320b13ce54881eb3771947cf81928c06', class: index$1.cls("db-custom-button", this.className), ref: (el) => {
+        return (index.h("div", { key: 'd0a0ad921a94f3eaae975472295d8f5120de6bb4', class: index$1.cls("db-custom-button", 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-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("slot", { key: 'eaf79ff037afc5c2d9b5683e2a2cf11e24174004' })));
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": index$1.getBooleanAsString(this.noText, "noText") }, index.h("slot", { key: '6bf6026fab0276e23db2b7942932cafe5f4f7e18' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-custom-select-dropdown_5.cjs.entry.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
-var constants = require('./constants-bMY2_d8A.js');
-var formComponents = require('./form-components-CmQlkARp.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var constants = require('./constants-BM1EltPT.js');
+var formComponents = require('./form-components-XNiwIGq8.js');
 
 const DBCustomSelectDropdown = class {
     constructor(hostRef) {
@@ -88,9 +88,9 @@ const DBCustomSelectDropdown = class {
     }
     render() {
         var _a, _b;
-        return (index.h("article", { key: '7720cebaaa9128aa7f12a3720aa1374a0fd689d7', class: index$1.cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (index.h("article", { key: 'f4f45bf53a72ecdfc2f2d8a5efe56cd97b78ea39', class: index$1.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 }, index.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 }, index.h("slot", { key: 'ca1c3bb74d4197526662177cff18d959d215d73a' })));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -177,9 +177,9 @@ const DBCustomSelectList = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '753c3016f6c9a1ed9fce2fa8c7ae00b9ff73383d', class: index$1.cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (index.h("div", { key: '298e676b1b8d6dbdb9378aa4a25c3241ebf21243', class: index$1.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 }, index.h("ul", { key: '6fce279c5ddf56f52c574e98d60335cd689d7e2c' }, index.h("slot", { key: '667b6c5979cee0f28941fc4e62ba67d9b5878373' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: 'b110c3a537467cc48aa291a9067ac36b1ad249de' }, index.h("slot", { key: 'f5223c7e2a6e1f8c0620a81fcb4f31e89fc06786' }))));
     }
     get rootElement() { return index.getElement(this); }
 };
@@ -287,7 +287,7 @@ const DBCustomSelectListItem = class {
     }
     render() {
         var _a, _b;
-        return (index.h("li", { key: '95e2aeea15f86890868013ddb33a6b365d814fc4', class: index$1.cls("db-custom-select-list-item", this.className, {
+        return (index.h("li", { key: '2e8eca178b50e65b563dea560b11cf8ee20da8c8', class: index$1.cls("db-custom-select-list-item", this.className, {
                 "db-checkbox": this.type === "checkbox" && !this.isGroupTitle,
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
@@ -555,8 +555,8 @@ const DBInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (index.h("div", { key: 'bfe18e425b08ee3c315f9f59eb230d5ba437407a', class: index$1.cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing") }, index.h("label", { key: '0356f8c8e0cf5fe3d4da7857f75a6298fe39486b', htmlFor: this._id }, (_b = this.label) !== null && _b !== void 0 ? _b : constants.DEFAULT_LABEL), index.h("input", { key: '4bd3c6406df28e017ceb6f080b06e7b4ccf2df75', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (index.h("div", { key: '665e33b476a975430c1d4b3dda4ecf2ab9c54009', class: index$1.cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": index$1.getHideProp(this.showLabel), "data-show-icon": index$1.getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing, "showIconTrailing") }, index.h("label", { key: '3c7167e73e16d83886146ceb25e773574f259de4', htmlFor: this._id }, (_b = this.label) !== null && _b !== void 0 ? _b : constants.DEFAULT_LABEL), index.h("input", { key: '58867dc5de6bd5f901372f0b29630bf59d6fdaf2', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
                 this._ref = el;
             }, id: this._id, name: this.name, type: this.type || "text", multiple: index$1.getBoolean(this.multiple, "multiple"), accept: this.accept, placeholder: (_c = this.placeholder) !== null && _c !== void 0 ? _c : constants.DEFAULT_PLACEHOLDER, disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), step: index$1.getStep(this.step), value: (_e = (_d = this.value) !== null && _d !== void 0 ? _d : this._value) !== null && _e !== void 0 ? _e : "", maxLength: index$1.getNumber(this.maxLength, this.maxlength), minLength: index$1.getNumber(this.minLength, this.minlength), max: index$1.getInputValue(this.max, this.type), min: index$1.getInputValue(this.min, this.type), readOnly: index$1.getBoolean(this.readOnly, "readOnly") ||
                 index$1.getBoolean(this.readonly, "readonly") ||
@@ -569,7 +569,7 @@ const DBInput = class {
                 "color",
             ].includes((_g = this.type) !== null && _g !== void 0 ? _g : "") && index$1.isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: '7071e137ef966ea7ba8c0242c540ee73163e8023' }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '221bc7dceacad6b0c4eb9cfd5747a8db71ff512d', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), index.h("span", { key: '2e376dfcacc4be02eaff503d25e219fcf78ff7a8', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: 'b3fa20be35535f5fe014f13246af282358bc9f1d' }), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: '98ba96af580cb1d74b76b3ed9cff85ca94e07a44', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), index.h("span", { key: 'c4aba187e2c952d69bfbf2513c751f39ece7ec98', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {
@@ -694,9 +694,9 @@ const DBTag = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: 'bf503e6e826fcb53cfc057b1f2610d062967311e', class: index$1.cls("db-tag", this.className), ref: (el) => {
+        return (index.h("div", { key: '07d9385a8ee1ba5b9c57c501b9fae0fea15a3e3e', class: index$1.cls("db-tag", 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-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": index$1.getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true, "showCheckState"), "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText"), "data-overflow": index$1.getBooleanAsString(this.overflow, "overflow") }, index.h("slot", { key: 'd047f3f96e38b36f4d8f43cfb316d1571ebdd9ba', name: "content" }), this.text ? this.text : null, index.h("slot", { key: 'b2356b4e384b61ac2844bdb4a8c2f9c4e5b9f153' }), this.behavior === "removable" ? (index.h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, index.h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": index$1.getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true, "showCheckState"), "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": index$1.getBooleanAsString(this.noText, "noText"), "data-overflow": index$1.getBooleanAsString(this.overflow, "overflow") }, index.h("slot", { key: '240d6b23cb670c8d3bc8dd28118c4387e4abab6d', name: "content" }), this.text ? this.text : null, index.h("slot", { key: 'a3d3f749ee447725c439f7344d28208c6213861a' }), this.behavior === "removable" ? (index.h("button", { class: "db-button db-tab-remove-button", "data-icon": "cross", "data-size": "small", "data-no-text": "true", "data-variant": "ghost", type: "button", onClick: (event) => this.handleRemove(event) }, index.h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-custom-select-form-field.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBCustomSelectFormField = class {
     constructor(hostRef) {
@@ -85,9 +85,9 @@ const DBCustomSelectFormField = class {
     }
     render() {
         var _a, _b;
-        return (index.h("summary", { key: '77e485f44f3ac511a95cf814b09f8460b6048fbc', class: index$1.cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (index.h("summary", { key: '40b13d21ae502631dacf0371a73a9410427ea74f', class: index$1.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 }, index.h("slot", { key: '382c889e2abf066105029031da4ecb0147c86607' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: 'f65747fc63c61c12fed05d268039459b0913b041' })));
     }
     get rootElement() { return index.getElement(this); }
 };

package/dist/cjs/db-custom-select.cjs.entry.js

@@ -1,12 +1,14 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var constants = require('./constants-bMY2_d8A.js');
-var index$1 = require('./index-spuu3sXz.js');
-var documentClickListener = require('./document-click-listener-DdNXbErU.js');
-var documentScrollListener = require('./document-scroll-listener-CvAZ6uPr.js');
-var floatingComponents = require('./floating-components-SpHkZuLA.js');
-var formComponents = require('./form-components-CmQlkARp.js');
+var constants = require('./constants-BM1EltPT.js');
+var index$1 = require('./index-Df-6pBQf.js');
+var documentClickListener = require('./document-click-listener-D_0Q6lvb.js');
+var documentScrollListener = require('./document-scroll-listener-CgyYRmvZ.js');
+var floatingComponents = require('./floating-components-B3bpFI90.js');
+var formComponents = require('./form-components-XNiwIGq8.js');
+var intersectionObserverListener = require('./intersection-observer-listener-DlrHabJb.js');
+var resizeObserverListener = require('./resize-observer-listener-CmPDfoZs.js');
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -44,7 +46,8 @@ const DBCustomSelect = class {
         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;
@@ -104,7 +107,6 @@ const DBCustomSelect = class {
         }
     }
     handleDropdownToggle(event) {
-        var _a, _b;
         if (this.dropdownToggle) {
             event.stopPropagation();
             this.dropdownToggle.emit(event);
@@ -115,7 +117,13 @@ const DBCustomSelect = class {
             this._documentScrollListenerCallbackId =
                 new documentScrollListener.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.ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement());
+            this._intersectionObserverCallbackId =
+                new intersectionObserverListener.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();
@@ -128,7 +136,12 @@ const DBCustomSelect = class {
             if (this._documentScrollListenerCallbackId) {
                 new documentScrollListener.DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
             }
-            (_b = this._observer) === null || _b === void 0 ? void 0 : _b.unobserve(this.detailsRef);
+            if (this._resizeObserverCallbackId) {
+                new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            }
+            if (this._intersectionObserverCallbackId) {
+                new intersectionObserverListener.IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            }
         }
     }
     getNativeSelectValue() {
@@ -799,16 +812,6 @@ const DBCustomSelect = class {
         const onMountHook_0 = () => {
             this.resetIds();
             this._invalidMessage = this.invalidMessage || constants.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 = () => {
@@ -838,23 +841,36 @@ const DBCustomSelect = class {
     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.DocumentClickListener().removeCallback(this._documentClickListenerCallbackId);
+        }
+        if (this._documentScrollListenerCallbackId) {
+            new documentScrollListener.DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+        }
+        if (this._resizeObserverCallbackId) {
+            new resizeObserverListener.ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+        }
+        if (this._intersectionObserverCallbackId) {
+            new intersectionObserverListener.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 (index.h("div", { key: '9f804bd057ef9cde5cc83263e5b1e3a477ad5d2e', class: index$1.cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (index.h("div", { key: 'e670905415a84f4edd7f9ed4cfe637201aed2b1f', class: index$1.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": index$1.getBooleanAsString(this.required, "required"), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: '1ce826237b63c3abfad8b55068c25fdc4acc2d7a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.h("select", { key: '9f16da6b3d9e633e4ce70e8654925df86a901074', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": index$1.getBooleanAsString(this.required, "required"), "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": index$1.getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": index$1.getBooleanAsString(this.showIcon, "showIcon") }, index.h("label", { key: 'bcece5c0050e198def7da6608f9e7bc55cae2252', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : constants.DEFAULT_LABEL, index.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: index$1.getBoolean(this.multiple, "multiple"), disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.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) => (index.h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), index.h("details", { key: '6a88c236898236ee539bced6fa3b3918be8f693d', ref: (el) => {
+            : null)), index.h("details", { key: '56ecb82c9470119ded325d106a0f0d69ee573033', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: 'c9dd3e30dd094da51de1b2064749a211fef6eb36' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, index.h("slot", { key: '8f927bc9860c5c3a4859e28ae3a7cf19ef32a84b' }), this.options ? (index.h(index.Fragment, null, index.h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": index$1.getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (index.h("span", { "data-visually-hidden": index$1.getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (index.h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (index.h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (index.h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), index.h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (index.h("div", null, index.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 : constants.DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -864,7 +880,7 @@ const DBCustomSelect = class {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, index.h("db-custom-select-list", { multiple: index$1.getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : constants.DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (index.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)))))), index.h("div", null, index.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 : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.h("span", { key: '3210abcd9df6f8232346aa78def9e3bd078f35db', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'a552df2b93f899230e80623e2014691e411c3b40', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'b29045acf1f702b90b434dc4aa9d589c0c6c57f5', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), index.h("div", null, index.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 : constants.DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (index.h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: index$1.getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, index.h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, index.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), index$1.stringPropVisible(this.message, this.showMessage) ? (index.h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (index.h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || constants.DEFAULT_VALID_MESSAGE)) : null, index.h("db-infotext", { key: 'c7e52d96c2b30151a5bf0468675dd346066ae5c7', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: 'bf805892157e5f35c4c705f6a4bc2733f732a73e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/db-divider.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-C313bRqJ.js');
-var index$1 = require('./index-spuu3sXz.js');
+var index$1 = require('./index-Df-6pBQf.js');
 
 const DBDivider = class {
     constructor(hostRef) {
@@ -85,7 +85,7 @@ const DBDivider = class {
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '4f8780fd8ac04d3d4db08bbfeae57f0a86cf36ad', class: index$1.cls("db-divider", this.className), ref: (el) => {
+        return (index.h("div", { key: 'b74e9a9bc0bf12d414e6f828b52a1eba7406ac81', class: index$1.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 }));
     }