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

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

@@ -0,0 +1,93 @@
+import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
+import { c as cls } from './index-DB8jc8lh.js';
+
+const DBControlPanelSecondaryActions = class {
+    constructor(hostRef) {
+        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 (h("div", { key: 'ec95f71c0c49e938e209f3b7811175d870ad4989', class: 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 }, h("slot", { key: 'de8c3e189de79ffd03dad8b7400a5482fc4391b8' })));
+    }
+    get rootElement() { return getElement(this); }
+};
+
+export { DBControlPanelSecondaryActions as db_control_panel_secondary_actions };

package/dist/esm/{db-brand.entry.js → db-control-panel-skip-navigation.entry.js}

@@ -1,8 +1,8 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { q as DEFAULT_ICON } from './constants-BdL-nI5y.js';
-import { g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { M as MAIN_CONTENT_ID } from './constants-COv1iCFP.js';
+import { c as cls } from './index-DB8jc8lh.js';
 
-const DBBrand = class {
+const DBControlPanelSkipNavigation = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.observer = undefined;
@@ -10,7 +10,7 @@ const DBBrand = class {
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-brand");
+        const parent = element.closest("db-control-panel-skip-navigation");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -19,7 +19,7 @@ const DBBrand = class {
                 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-brand");
+                this.enableAttributePassing(element, "db-control-panel-skip-navigation");
             }
         });
         this.observer.observe(parent, {
@@ -75,7 +75,7 @@ const DBBrand = class {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-brand");
+        this.enableAttributePassing(this._ref, "db-control-panel-skip-navigation");
         this.setupObserver(this._ref);
     }
     disconnectedCallback() {
@@ -84,11 +84,11 @@ const DBBrand = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'eb7ad13ac7dc2b56c0611996975b6f140cb837c8', class: cls("db-brand", this.className), ref: (el) => {
+        return (h("div", { key: '3635ad77cee43a3b1be6e98148ce4b8b63658846', class: cls("db-control-panel-skip-navigation", this.className), ref: (el) => {
                 this._ref = el;
-            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, h("slot", { key: '21a1bf9ea2f921c6a38e24062890c7f674213605' }), this.text ? this.text : null));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, this.text ? (h("a", { href: `#${(_c = this.target) !== null && _c !== void 0 ? _c : MAIN_CONTENT_ID}` }, this.text)) : (h("slot", null))));
     }
     get rootElement() { return getElement(this); }
 };
 
-export { DBBrand as db_brand };
+export { DBControlPanelSkipNavigation as db_control_panel_skip_navigation };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { g as getBooleanAsString, c as cls } from './index-fumiz06Y.js';
+import { g as getBooleanAsString, c as cls } from './index-DB8jc8lh.js';
 
 const DBCustomButton = class {
     constructor(hostRef) {
@@ -83,10 +83,10 @@ const DBCustomButton = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'b1552822320b13ce54881eb3771947cf81928c06', class: cls("db-custom-button", this.className), ref: (el) => {
+        return (h("div", { key: 'd0a0ad921a94f3eaae975472295d8f5120de6bb4', class: 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": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText, "noText") }, h("slot", { key: 'eaf79ff037afc5c2d9b5683e2a2cf11e24174004' })));
+                getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing"), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText, "noText") }, h("slot", { key: '6bf6026fab0276e23db2b7942932cafe5f4f7e18' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, h, g as getElement, c as createEvent } from './index-BlbKvvUv.js';
-import { c as cls, e as getBoolean, g as getBooleanAsString, h as hasVoiceOver, d as delay, s as stringPropVisible, i as isArrayOfStrings, u as uuid, k as getInputValue, f as getNumber, j as getStep, b as isIOSSafari, l as getHideProp } from './index-fumiz06Y.js';
-import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, a as DEFAULT_LABEL, m as DEFAULT_REMOVE } from './constants-BdL-nI5y.js';
-import { c as addValueResetEventListener } from './form-components-ZV7IN0oG.js';
+import { c as cls, f as getBoolean, g as getBooleanAsString, h as hasVoiceOver, d as delay, s as stringPropVisible, i as isArrayOfStrings, u as uuid, l as getInputValue, j as getNumber, k as getStep, b as isIOSSafari, m as getHideProp } from './index-DB8jc8lh.js';
+import { l as DEFAULT_INVALID_MESSAGE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, b as DEFAULT_PLACEHOLDER, a as DEFAULT_LABEL, m as DEFAULT_REMOVE } from './constants-COv1iCFP.js';
+import { c as addValueResetEventListener } from './form-components-zJeL8XMn.js';
 
 const DBCustomSelectDropdown = class {
     constructor(hostRef) {
@@ -86,9 +86,9 @@ const DBCustomSelectDropdown = class {
     }
     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' })));
     }
     get rootElement() { return getElement(this); }
 };
@@ -175,9 +175,9 @@ const DBCustomSelectList = class {
     }
     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' }))));
     }
     get rootElement() { return getElement(this); }
 };
@@ -285,12 +285,12 @@ const DBCustomSelectListItem = class {
     }
     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))));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -553,8 +553,8 @@ const DBInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h("div", { key: 'bfe18e425b08ee3c315f9f59eb230d5ba437407a', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
-                getBooleanAsString(this.showIcon, "showIcon"), "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing") }, h("label", { key: '0356f8c8e0cf5fe3d4da7857f75a6298fe39486b', htmlFor: this._id }, (_b = this.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL), h("input", { key: '4bd3c6406df28e017ceb6f080b06e7b4ccf2df75', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: '665e33b476a975430c1d4b3dda4ecf2ab9c54009', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": getBooleanAsString(this.showIconLeading, "showIconLeading") ||
+                getBooleanAsString(this.showIcon, "showIcon"), "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing, "showIconTrailing") }, h("label", { key: '3c7167e73e16d83886146ceb25e773574f259de4', htmlFor: this._id }, (_b = this.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL), 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: getBoolean(this.multiple, "multiple"), accept: this.accept, placeholder: (_c = this.placeholder) !== null && _c !== void 0 ? _c : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getStep(this.step), value: (_e = (_d = this.value) !== null && _d !== void 0 ? _d : this._value) !== null && _e !== void 0 ? _e : "", maxLength: getNumber(this.maxLength, this.maxlength), minLength: getNumber(this.minLength, this.minlength), max: getInputValue(this.max, this.type), min: getInputValue(this.min, this.type), readOnly: getBoolean(this.readOnly, "readOnly") ||
                 getBoolean(this.readonly, "readonly") ||
@@ -567,7 +567,7 @@ const DBInput = class {
                 "color",
             ].includes((_g = this.type) !== null && _g !== void 0 ? _g : "") && isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: '7071e137ef966ea7ba8c0242c540ee73163e8023' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '221bc7dceacad6b0c4eb9cfd5747a8db71ff512d', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: '2e376dfcacc4be02eaff503d25e219fcf78ff7a8', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'b3fa20be35535f5fe014f13246af282358bc9f1d' }), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: this.messageSize || "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { semantic: "successful", id: this._validMessageId, size: this.validMessageSize || "small" }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '98ba96af580cb1d74b76b3ed9cff85ca94e07a44', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: 'c4aba187e2c952d69bfbf2513c751f39ece7ec98', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {
@@ -692,9 +692,9 @@ const DBTag = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: 'bf503e6e826fcb53cfc057b1f2610d062967311e', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '07d9385a8ee1ba5b9c57c501b9fae0fea15a3e3e', class: 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": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true, "showCheckState"), "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": getBooleanAsString(this.noText, "noText"), "data-overflow": getBooleanAsString(this.overflow, "overflow") }, h("slot", { key: 'd047f3f96e38b36f4d8f43cfb316d1571ebdd9ba', name: "content" }), this.text ? this.text : null, h("slot", { key: 'b2356b4e384b61ac2844bdb4a8c2f9c4e5b9f153' }), this.behavior === "removable" ? (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) }, 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": getBooleanAsString((_c = this.showCheckState) !== null && _c !== void 0 ? _c : true, "showCheckState"), "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-no-text": getBooleanAsString(this.noText, "noText"), "data-overflow": getBooleanAsString(this.overflow, "overflow") }, h("slot", { key: '240d6b23cb670c8d3bc8dd28118c4387e4abab6d', name: "content" }), this.text ? this.text : null, h("slot", { key: 'a3d3f749ee447725c439f7344d28208c6213861a' }), this.behavior === "removable" ? (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) }, h("db-tooltip", { variant: "label" }, this.getRemoveButtonText()))) : null));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { c as cls } from './index-fumiz06Y.js';
+import { c as cls } from './index-DB8jc8lh.js';
 
 const DBCustomSelectFormField = class {
     constructor(hostRef) {
@@ -83,9 +83,9 @@ const DBCustomSelectFormField = class {
     }
     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' })));
     }
     get rootElement() { return getElement(this); }
 };

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

@@ -1,10 +1,12 @@
 import { r as registerInstance, c as createEvent, h, F as Fragment, g as getElement } from './index-BlbKvvUv.js';
-import { l as DEFAULT_INVALID_MESSAGE, a as DEFAULT_LABEL, m as DEFAULT_REMOVE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, e as DEFAULT_SELECT_ID_SUFFIX, d as DEFAULT_LABEL_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, o as DEFAULT_SELECTED, k as DEFAULT_VALID_MESSAGE, c as DEFAULT_MESSAGE, s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
-import { h as hasVoiceOver, d as delay, s as stringPropVisible, m as getSearchInput, u as uuid, e as getBoolean, g as getBooleanAsString, l as getHideProp, c as cls } from './index-fumiz06Y.js';
-import { D as DocumentClickListener } from './document-click-listener-9wJfRcvz.js';
-import { D as DocumentScrollListener } from './document-scroll-listener-4F0ZAg9p.js';
-import { a as handleFixedDropdown } from './floating-components-DOPXnIzL.js';
-import { b as addResetEventListener } from './form-components-ZV7IN0oG.js';
+import { l as DEFAULT_INVALID_MESSAGE, a as DEFAULT_LABEL, m as DEFAULT_REMOVE, f as DEFAULT_MESSAGE_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, e as DEFAULT_SELECT_ID_SUFFIX, d as DEFAULT_LABEL_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, o as DEFAULT_SELECTED, k as DEFAULT_VALID_MESSAGE, c as DEFAULT_MESSAGE, v as DEFAULT_CLOSE_BUTTON } from './constants-COv1iCFP.js';
+import { h as hasVoiceOver, d as delay, s as stringPropVisible, n as getSearchInput, u as uuid, f as getBoolean, g as getBooleanAsString, m as getHideProp, c as cls } from './index-DB8jc8lh.js';
+import { D as DocumentClickListener } from './document-click-listener-BEYsNvC5.js';
+import { D as DocumentScrollListener } from './document-scroll-listener-B8lkAL-m.js';
+import { h as handleFixedDropdown } from './floating-components-BT3wZY6f.js';
+import { b as addResetEventListener } from './form-components-zJeL8XMn.js';
+import { I as IntersectionObserverListener } from './intersection-observer-listener-DQ4WWSLe.js';
+import { R as ResizeObserverListener } from './resize-observer-listener-z8XjzxC9.js';
 
 const DBCustomSelect = class {
     constructor(hostRef) {
@@ -42,7 +44,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;
@@ -102,7 +105,6 @@ const DBCustomSelect = class {
         }
     }
     handleDropdownToggle(event) {
-        var _a, _b;
         if (this.dropdownToggle) {
             event.stopPropagation();
             this.dropdownToggle.emit(event);
@@ -113,7 +115,13 @@ const DBCustomSelect = class {
             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();
@@ -126,7 +134,12 @@ const DBCustomSelect = class {
             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() {
@@ -431,6 +444,7 @@ const DBCustomSelect = class {
         }
     }
     handleSearch(valueOrEvent) {
+        var _a;
         if (valueOrEvent === undefined) {
             return;
         }
@@ -459,6 +473,9 @@ const DBCustomSelect = class {
                     .toLowerCase()
                     .includes(filterText.toLowerCase()));
         }
+        if ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) {
+            this.handleAutoPlacement();
+        }
     }
     handleClearAll(event) {
         event.stopPropagation();
@@ -688,10 +705,14 @@ const DBCustomSelect = class {
         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();
@@ -789,16 +810,6 @@ const DBCustomSelect = class {
         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 = () => {
@@ -828,23 +839,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().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
@@ -854,7 +878,7 @@ const DBCustomSelect = class {
                 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)));
     }
     get rootElement() { return getElement(this); }
     static get watchers() { return {

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

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index-BlbKvvUv.js';
-import { c as cls } from './index-fumiz06Y.js';
+import { c as cls } from './index-DB8jc8lh.js';
 
 const DBDivider = class {
     constructor(hostRef) {
@@ -83,7 +83,7 @@ const DBDivider = class {
     }
     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 }));
     }