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

package/dist/collection/components/{brand/brand.js → drawer-header/drawer-header.js}

@@ -1,18 +1,38 @@
-import { DEFAULT_ICON } from "../../shared/constants.js";
-import { cls, getBooleanAsString } from "../../utils/index.js";
+import { DEFAULT_CLOSE_BUTTON } from "../../shared/constants.js";
+import { cls, uuid } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
-
+ * @slot startSlot - TODO: Add description for slotStartSlot
+ * @slot endSlot - TODO: Add description for slotEndSlot
  */
-export class DBBrand {
+export class DBDrawerHeader {
     constructor() {
+        this.closeButtonText = DEFAULT_CLOSE_BUTTON;
+        this._headingId = "db-drawer-header-heading-" + uuid();
         this.observer = undefined;
     }
+    setAriaLabelledBy() {
+        if (this._ref && this.text) {
+            const dialog = this._ref.closest("dialog");
+            if (dialog) {
+                dialog.setAttribute("aria-labelledby", this._headingId);
+            }
+        }
+    }
+    removeAriaLabelledBy() {
+        if (this._ref) {
+            const dialog = this._ref.closest("dialog");
+            if (dialog &&
+                dialog.getAttribute("aria-labelledby") === this._headingId) {
+                dialog.removeAttribute("aria-labelledby");
+            }
+        }
+    }
     setupObserver(element) {
         if (!element)
             return;
-        const parent = element.closest("db-brand");
+        const parent = element.closest("db-drawer-header");
         if (!parent || this.observer)
             return;
         this.observer = new MutationObserver((mutations) => {
@@ -21,7 +41,7 @@ export class DBBrand {
                 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-drawer-header");
             }
         });
         this.observer.observe(parent, {
@@ -77,34 +97,42 @@ export class DBBrand {
                 connectedElement.remove();
             }
         }
-        this.enableAttributePassing(this._ref, "db-brand");
-        this.setupObserver(this._ref);
+        this.enableAttributePassing(this._ref, "db-drawer-header");
+        const onMountHook_0 = () => {
+            this.setAriaLabelledBy();
+        };
+        onMountHook_0();
+        const onMountHook_1 = () => {
+            this.setupObserver(this._ref);
+        };
+        onMountHook_1();
     }
     disconnectedCallback() {
         var _a;
+        this.removeAriaLabelledBy();
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        var _a, _b, _c;
-        return (h("div", { key: 'eb7ad13ac7dc2b56c0611996975b6f140cb837c8', class: cls("db-brand", this.className), ref: (el) => {
+        var _a, _b;
+        return (h("div", { key: 'dfab2e03b8b712fe9960cac3fc30b534a355dc13', class: cls("db-drawer-header", 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 }, h("header", { key: '6e8caae594fe815fb329843aae47d96df30527c4', class: "db-drawer-header-container", id: this._headingId }, h("slot", { key: '546960454a5332aeab2e24734b7633b5f1a34c3c', name: "startSlot" }), this.text ? h("h2", null, this.text) : h("slot", null)), h("slot", { key: 'b278f02cb5fc65287885085a8a5a31d4282458eb', name: "endSlot" }), h("db-button", { key: '094219ec03470e63fbc93532db4d12d7d8e324a3', "data-action": "close", icon: "cross", variant: "ghost", type: "button", id: this.closeButtonId, noText: true }, this.closeButtonText, h("db-tooltip", { key: 'c6e1fa17184102db8160b9a2917f8f55e80307c6' }, this.closeButtonText))));
     }
-    static get is() { return "db-brand"; }
+    static get is() { return "db-drawer-header"; }
     static get properties() {
         return {
-            "hideLogo": {
-                "type": "boolean",
+            "text": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBBrandProps[\"hideLogo\"]",
-                    "resolved": "boolean",
+                    "original": "DBDrawerHeaderProps[\"text\"]",
+                    "resolved": "string",
                     "references": {
-                        "DBBrandProps": {
+                        "DBDrawerHeaderProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
+                            "id": "src/components/drawer-header/model.ts::DBDrawerHeaderProps",
+                            "referenceLocation": "DBDrawerHeaderProps"
                         }
                     }
                 },
@@ -117,20 +145,20 @@ export class DBBrand {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "hide-logo"
+                "attribute": "text"
             },
-            "icon": {
+            "id": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBBrandProps[\"icon\"]",
-                    "resolved": "\"arrow_down\" | \"arrow_left\" | \"arrow_right\" | \"arrow_up\" | \"arrow_up_right\" | \"arrows_vertical\" | \"brand\" | \"calendar\" | \"chat\" | \"check\" | \"check_circle\" | \"chevron_down\" | \"chevron_left\" | \"chevron_right\" | \"chevron_up\" | \"circle\" | \"circle_small\" | \"circular_arrows\" | \"clock\" | \"copy\" | \"cross\" | \"cross_circle\" | \"double_chevron_down\" | \"double_chevron_left\" | \"double_chevron_right\" | \"double_chevron_up\" | \"exclamation_mark_circle\" | \"exclamation_mark_triangle\" | \"eye\" | \"eye_disabled\" | \"house\" | \"information_circle\" | \"magnifying_glass\" | \"menu\" | \"minus\" | \"moon\" | \"more_vertical\" | \"plus\" | \"resize_handle_corner\" | \"sun\" | \"x_placeholder\" | string & Record<never, never>",
+                    "original": "DBDrawerHeaderProps[\"id\"]",
+                    "resolved": "string",
                     "references": {
-                        "DBBrandProps": {
+                        "DBDrawerHeaderProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
+                            "id": "src/components/drawer-header/model.ts::DBDrawerHeaderProps",
+                            "referenceLocation": "DBDrawerHeaderProps"
                         }
                     }
                 },
@@ -143,20 +171,20 @@ export class DBBrand {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon"
+                "attribute": "id"
             },
-            "showIcon": {
-                "type": "any",
+            "propOverrides": {
+                "type": "unknown",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBBrandProps[\"showIcon\"]",
-                    "resolved": "boolean | string",
+                    "original": "DBDrawerHeaderProps[\"propOverrides\"]",
+                    "resolved": "{ id?: string; }",
                     "references": {
-                        "DBBrandProps": {
+                        "DBDrawerHeaderProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
+                            "id": "src/components/drawer-header/model.ts::DBDrawerHeaderProps",
+                            "referenceLocation": "DBDrawerHeaderProps"
                         }
                     }
                 },
@@ -167,22 +195,20 @@ export class DBBrand {
                     "text": ""
                 },
                 "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-icon"
+                "setter": false
             },
-            "id": {
+            "className": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBBrandProps[\"id\"]",
+                    "original": "DBDrawerHeaderProps[\"className\"]",
                     "resolved": "string",
                     "references": {
-                        "DBBrandProps": {
+                        "DBDrawerHeaderProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
+                            "id": "src/components/drawer-header/model.ts::DBDrawerHeaderProps",
+                            "referenceLocation": "DBDrawerHeaderProps"
                         }
                     }
                 },
@@ -195,44 +221,20 @@ export class DBBrand {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "id"
-            },
-            "propOverrides": {
-                "type": "unknown",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBBrandProps[\"propOverrides\"]",
-                    "resolved": "{ id?: string; }",
-                    "references": {
-                        "DBBrandProps": {
-                            "location": "import",
-                            "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false
+                "attribute": "classname"
             },
-            "className": {
+            "closeButtonId": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBBrandProps[\"className\"]",
+                    "original": "DBDrawerHeaderProps[\"closeButtonId\"]",
                     "resolved": "string",
                     "references": {
-                        "DBBrandProps": {
+                        "DBDrawerHeaderProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
+                            "id": "src/components/drawer-header/model.ts::DBDrawerHeaderProps",
+                            "referenceLocation": "DBDrawerHeaderProps"
                         }
                     }
                 },
@@ -245,20 +247,20 @@ export class DBBrand {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "classname"
+                "attribute": "close-button-id"
             },
-            "text": {
+            "closeButtonText": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "DBBrandProps[\"text\"]",
+                    "original": "DBDrawerHeaderProps[\"closeButtonText\"]",
                     "resolved": "string",
                     "references": {
-                        "DBBrandProps": {
+                        "DBDrawerHeaderProps": {
                             "location": "import",
                             "path": "./model.js",
-                            "id": "src/components/brand/model.ts::DBBrandProps",
-                            "referenceLocation": "DBBrandProps"
+                            "id": "src/components/drawer-header/model.ts::DBDrawerHeaderProps",
+                            "referenceLocation": "DBDrawerHeaderProps"
                         }
                     }
                 },
@@ -271,12 +273,14 @@ export class DBBrand {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "text"
+                "attribute": "close-button-text",
+                "defaultValue": "'Close'"
             }
         };
     }
     static get states() {
         return {
+            "_headingId": {},
             "observer": {}
         };
     }

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

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

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

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

package/dist/collection/components/icon/icon.js

@@ -85,9 +85,9 @@ export class DBIcon {
     }
     render() {
         var _a, _b;
-        return (h("span", { key: '45475f5547eb46fee1e5046a3adf5602b8427d1e', class: cls("db-icon", this.className), "aria-hidden": "true", ref: (el) => {
+        return (h("span", { key: '317a35455deed25c97bbe605675e7cf4694147db', class: cls("db-icon", this.className), "aria-hidden": "true", 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": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : null, h("slot", { key: '05089e47e87077e6227760806584f49715080c38' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-icon-weight": this.weight, "data-icon-variant": this.variant }, this.text ? this.text : null, h("slot", { key: 'd0c4a2db988fa511049303667ae42e1143b6a285' })));
     }
     static get is() { return "db-icon"; }
     static get properties() {

package/dist/collection/components/infotext/infotext.js

@@ -85,9 +85,9 @@ export class DBInfotext {
     }
     render() {
         var _a, _b, _c;
-        return (h("span", { key: '5f43b3937dc8adf310a519fc581f6c3162e86ebb', class: cls("db-infotext", this.className), ref: (el) => {
+        return (h("span", { key: 'a5743649a619595f159a9022ee8c39e477af05a7', class: cls("db-infotext", 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": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-show-icon-leading": getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, h("slot", { key: '253fc89f2cb83a9ca89c66eed70988b7b69b8507' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-icon": this.icon, "data-semantic": this.semantic, "data-size": this.size, "data-wrap": getBooleanAsString(this.wrap, "wrap"), "data-show-icon-leading": getBooleanAsString((_c = this.showIcon) !== null && _c !== void 0 ? _c : true, "showIcon") }, this.text ? this.text : null, h("slot", { key: 'a52fb970815f2339648d21691f66da3369a34e30' })));
     }
     static get is() { return "db-infotext"; }
     static get properties() {

package/dist/collection/components/input/input.js

@@ -251,8 +251,8 @@ export class DBInput {
     }
     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") ||
@@ -265,7 +265,7 @@ export class DBInput {
                 "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)));
     }
     static get is() { return "db-input"; }
     static get properties() {

package/dist/collection/components/link/link.js

@@ -85,9 +85,9 @@ export class DBLink {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("a", { key: '7d627d40c68589558b3e33b1304f4c57b95203e3', class: cls("db-link", this.className), ref: (el) => {
+        return (h("a", { key: '844ef7d3be7d3cfa62ec5b5bbac7afbb2c226ad0', class: cls("db-link", 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, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, h("slot", { key: 'fc12c0b064d4c5d03347bea0f6de4ad5fcf78223' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, href: this.href, target: this.target, rel: this.rel, role: this.role, referrerPolicy: (_c = this.referrerpolicy) !== null && _c !== void 0 ? _c : this.referrerPolicy, hrefLang: this.hreflang, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : 0, "data-size": this.size, "data-show-icon-trailing": getBooleanAsString((_d = this.showIcon) !== null && _d !== void 0 ? _d : true, "showIcon"), "data-variant": this.variant, "data-content": this.content || "internal", "data-wrap": getBooleanAsString(this.wrap, "wrap") }, this.text ? this.text : null, h("slot", { key: 'd99bd3518f8b267b8a50531bac0a4eac737fd4bf' })));
     }
     static get is() { return "db-link"; }
     static get properties() {

package/dist/collection/components/notification/notification.js

@@ -95,13 +95,13 @@ export class DBNotification {
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '3f6ef4d3d506873a5b4bd15fde4d2c2fbedc9746', class: cls("db-notification", this.className), ref: (el) => {
+        return (h("div", { key: '24d232744b6491f7883907495e90db630a3dfa37', class: cls("db-notification", 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, role: getNotificationRole({
                 semantic: this.semantic,
                 role: this.role,
                 ariaLive: this.ariaLive,
-            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, h("slot", { key: '869ddc92d88e68d689215add30f1eefbfababc21', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", { "data-area": "head" }, this.headline)) : null, h("div", { key: 'f3eb313619e046c8eb3fa7b527470b8145003173', "data-area": "content" }, this.text ? this.text : null, h("slot", { key: 'ff2a9c542527cf6da87bace3b77b9477899626ea' })), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, h("slot", { key: '5529bddb13c7a39c5fcf6b9bca844cbe1f16fee3', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
+            }), "aria-live": this.ariaLive, "data-semantic": this.semantic, "data-variant": this.variant, "data-icon": getBoolean(this.showIcon) !== false ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-link-variant": this.linkVariant }, h("slot", { key: '7c75177f9eff5127a8d4c8043c59d94a508a5044', name: "image" }), stringPropVisible(this.headline, this.showHeadline) ? (h("header", { "data-area": "head" }, this.headline)) : null, h("div", { key: 'a0e9233a3143354c401f0d12f60ccdb30977736c', "data-area": "content" }, this.text ? this.text : null, h("slot", { key: '67f52722658f2894a23fd8f7f0bdc8a6337e8599' })), stringPropVisible(this.timestamp, this.showTimestamp) ? (h("time", { "data-area": "timestamp", dateTime: this.timestampDatetime }, this.timestamp)) : null, h("slot", { key: '5bc5cc27b0cfd34d470adede98ee929845a21868', name: "link" }), getBoolean(this.closeable, "closeable") ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)) : null));
     }
     static get is() { return "db-notification"; }
     static get properties() {

package/dist/collection/components/popover/popover.js

@@ -1,6 +1,8 @@
 import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils/index.js";
 import { DocumentScrollListener } from "../../utils/document-scroll-listener.js";
 import { handleFixedPopover } from "../../utils/floating-components.js";
+import { IntersectionObserverListener } from "../../utils/intersection-observer-listener.js";
+import { ResizeObserverListener } from "../../utils/resize-observer-listener.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -11,7 +13,8 @@ export class DBPopover {
         this.initialized = false;
         this.isExpanded = false;
         this._documentScrollListenerCallbackId = undefined;
-        this._observer = undefined;
+        this._intersectionObserverCallbackId = undefined;
+        this._resizeObserverCallbackId = undefined;
         this.observer = undefined;
     }
     handleEscape(event) {
@@ -29,8 +32,7 @@ export class DBPopover {
         if (article) {
             // This is a workaround for angular
             void utilsDelay(() => {
-                var _a;
-                handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
+                handleFixedPopover(article, this._ref);
             }, 1);
         }
     }
@@ -41,18 +43,35 @@ export class DBPopover {
         }
     }
     handleEnter() {
-        var _a;
         this.isExpanded = true;
+        // Clean up any existing observers to prevent leaks from repeated enter
+        if (this._documentScrollListenerCallbackId) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+            this._documentScrollListenerCallbackId = undefined;
+        }
+        if (this._resizeObserverCallbackId) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        if (this._intersectionObserverCallbackId) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            this._intersectionObserverCallbackId = undefined;
+        }
         this._documentScrollListenerCallbackId =
             new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event));
         this.handleAutoPlacement();
+        this._resizeObserverCallbackId = new ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement());
         const child = this.getTrigger();
         if (child) {
-            (_a = this._observer) === null || _a === void 0 ? void 0 : _a.observe(child);
+            this._intersectionObserverCallbackId =
+                new IntersectionObserverListener().observe(child, (entry) => {
+                    if (!entry.isIntersecting) {
+                        this.handleEscape(false);
+                    }
+                });
         }
     }
     handleLeave(event) {
-        var _a;
         const element = event === null || event === void 0 ? void 0 : event.target;
         const parent = element === null || element === void 0 ? void 0 : element.parentNode;
         if (!parent ||
@@ -62,10 +81,15 @@ export class DBPopover {
             this.isExpanded = false;
             if (this._documentScrollListenerCallbackId) {
                 new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+                this._documentScrollListenerCallbackId = undefined;
             }
-            const child = this.getTrigger();
-            if (child) {
-                (_a = this._observer) === null || _a === void 0 ? void 0 : _a.unobserve(child);
+            if (this._resizeObserverCallbackId) {
+                new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+                this._resizeObserverCallbackId = undefined;
+            }
+            if (this._intersectionObserverCallbackId) {
+                new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+                this._intersectionObserverCallbackId = undefined;
             }
         }
     }
@@ -164,14 +188,6 @@ export class DBPopover {
             ["mouseleave", "focusout"].forEach((event) => {
                 this._ref.addEventListener(event, () => this.handleLeave());
             });
-            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-                this._observer = new IntersectionObserver((payload) => {
-                    const entry = payload.find(({ target }) => target === this.getTrigger());
-                    if (entry && !entry.isIntersecting) {
-                        this.handleEscape(false);
-                    }
-                });
-            }
         }
     }
     watch0() {
@@ -209,43 +225,29 @@ export class DBPopover {
     }
     disconnectedCallback() {
         var _a;
+        if (this._documentScrollListenerCallbackId) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId);
+            this._documentScrollListenerCallbackId = undefined;
+        }
+        if (this._resizeObserverCallbackId) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId);
+            this._resizeObserverCallbackId = undefined;
+        }
+        if (this._intersectionObserverCallbackId) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId);
+            this._intersectionObserverCallbackId = undefined;
+        }
         (_a = this.observer) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '6c495cb9c8f329dd2cf07bfc55b56eb9aa524fb9', class: cls("db-popover", this.className), ref: (el) => {
+        return (h("div", { key: '05f2e24b5649f68be8480fabf05bdc79fd4a454e', class: cls("db-popover", 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: 'f74be440cae4d35f76ff2899bae864fc9e3e5c8a', name: "trigger" }), h("article", { key: 'efec32b56bf7267aed0f0723306398f9e5f66c75', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap, "gap"), "data-animation": getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: '2a1957f512ad0c9eca6e9e5f50721dda1ce56cf3' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '4fe2e58f6e2ccf3a18747f2810e6e62fdaa18576', name: "trigger" }), h("article", { key: '3fde13e830ddcd944854bf0123610fd5c04c8396', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap, "gap"), "data-animation": getBooleanAsString((_c = this.animation) !== null && _c !== void 0 ? _c : true, "animation"), "data-open": getBooleanAsString(this.open, "open"), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: 'c147317adc5fdc5c2aa313396360f76fb39f59ec' }))));
     }
     static get is() { return "db-popover"; }
     static get properties() {
         return {
-            "placement": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "DBPopoverProps[\"placement\"]",
-                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-                    "references": {
-                        "DBPopoverProps": {
-                            "location": "import",
-                            "path": "./model.js",
-                            "id": "src/components/popover/model.ts::DBPopoverProps",
-                            "referenceLocation": "DBPopoverProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "placement"
-            },
             "id": {
                 "type": "string",
                 "mutable": false,
@@ -477,6 +479,32 @@ export class DBPopover {
                 "setter": false,
                 "reflect": false,
                 "attribute": "width"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DBPopoverProps[\"placement\"]",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "DBPopoverProps": {
+                            "location": "import",
+                            "path": "./model.js",
+                            "id": "src/components/popover/model.ts::DBPopoverProps",
+                            "referenceLocation": "DBPopoverProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement"
             }
         };
     }
@@ -485,7 +513,8 @@ export class DBPopover {
             "initialized": {},
             "isExpanded": {},
             "_documentScrollListenerCallbackId": {},
-            "_observer": {},
+            "_intersectionObserverCallbackId": {},
+            "_resizeObserverCallbackId": {},
             "observer": {}
         };
     }

package/dist/collection/components/radio/radio.js

@@ -166,9 +166,9 @@ export class DBRadio {
         (_b = this.observer) === null || _b === void 0 ? void 0 : _b.disconnect();
     }
     render() {
-        return (h("label", { key: '130a6743dc68574baad658d474299d9808f7505f', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, h("input", { key: 'ebd2443b32fb32cf21735ea00607ee32f3da01d2', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("label", { key: 'fedde19abfa095e6215c68bdfc2602ae1b53c811', class: cls("db-radio", this.className), "data-size": this.size, "data-hide-label": getHideProp(this.showLabel), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), htmlFor: this._id }, h("input", { key: '75e0f430e4f2a268d48f856c382d17a25506e7d0', type: "radio", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, h("slot", { key: '2f4ccd96173b5780348cdddf914aa6ba424314bb' })));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: getBoolean(this.required, "required"), onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event) }), this.label ? this.label : null, h("slot", { key: '51a2938014418d325d73f60c5d6b30461c2832a8' })));
     }
     static get is() { return "db-radio"; }
     static get properties() {

package/dist/collection/components/section/section.js

@@ -85,9 +85,9 @@ export class DBSection {
     }
     render() {
         var _a, _b;
-        return (h("section", { key: '1dc0a8e37a04cd3a4caba5a50b94ea876e80d462', class: cls("db-section", this.className), ref: (el) => {
+        return (h("section", { key: '818b03641b56d6ee3324de6840216c36ad88cb5f', class: cls("db-section", 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-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '74e62afdc9b8922d1cbd57e801fff67969831ac9' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-spacing": this.spacing || "medium", "data-width": this.width }, h("slot", { key: '60006ff0140b76c482ed93b65f0f56ae0eb54e07' })));
     }
     static get is() { return "db-section"; }
     static get properties() {