@db-ux/wc-core-components 4.9.0-stencil-bundle-ad37ca4 → 4.9.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @db-ux/wc-core-components
 
+## 4.9.1
+
+### Patch Changes
+
+- fix(switch): use `2lh` unit and add `min-inline-size` to prevent track from shrinking - [see commit 78c9fde](https://github.com/db-ux-design-system/core-web/commit/78c9fde67d9677f61eaa41761a088b9c1a9773a1)
+
+- fix(notification): remove empty grid gap when icon is hidden - [see commit 96f94c6](https://github.com/db-ux-design-system/core-web/commit/96f94c651391f014e2d073402c2700b524ccbf5e)
+
+## 4.9.0
+
+### Minor Changes
+
+- refactor: allow text and children to be used together in components - [see commit cecb833](https://github.com/db-ux-design-system/core-web/commit/cecb833e2d2b2d15b47f9ac1ed57ccf1040374f0):
+    - feat: add `text` property to components that previously only supported children for their label, like e.g. `DBTooltip`.
+    - refactor: allow `text` property and components children to be used in parallel in components. Previously, `text` and children were mutually exclusive.
+    - refactor(`DBRadio`, `DBCheckbox`, `DBSwitch`): `label` and `children` can now be used together. Previously they were mutually exclusive.
+    - fix(`DBTag`): changed render order of `children` and `text` to align with design (children rendered before text).
+
 ## 4.8.0
 
 ### Minor Changes
@@ -189,7 +207,7 @@ _version bump_
 
 - fix: set DBTabItem internal state `_selected` correctly - [see commit f7625cb](https://github.com/db-ux-design-system/core-web/commit/f7625cbd9d64513527e826c9d2c1ef42b2734a4b):
 
-          - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
+            - Now also sets aria-selected=true|false correctly which improves screen reader behaviour
 
 ## 4.2.1
 

package/README.md

@@ -86,32 +86,12 @@ In case that you're building a website or application for Deutsche Bahn, you'll
 
 ## Usage
 
-This package provides two output variants:
-
-### Default (requires `@stencil/core` as peer dependency)
-
-The default entry point uses Stencil's lazy-loading loader. `@stencil/core` must be installed separately.
-
-```shell
-npm i @stencil/core
-```
-
 ```js
 // main.js
 import { defineCustomElements } from "@db-ux/wc-core-components";
 defineCustomElements();
 ```
 
-### Bundle (no external dependencies)
-
-The bundle entry point is fully self-contained — `@stencil/core` is bundled in and does not need to be installed separately.
-
-```js
-// main.js
-import { defineCustomElements } from "@db-ux/wc-core-components/bundle";
-defineCustomElements();
-```
-
 ```html
 ...
 <db-button icon="x_placeholder">Test</db-button>

package/dist/cjs/db-accordion-item.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
 const DBAccordionItem = class {
@@ -29,9 +29,7 @@ const DBAccordionItem = class {
         if (this.toggle) {
             this.toggle.emit(newStateOpen);
         }
-        if (this.open === undefined) {
-            this._open = newStateOpen;
-        }
+        this._open = newStateOpen;
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -82,21 +80,7 @@ const DBAccordionItem = class {
     watch1() {
         this.watch1Fn();
     }
-    watch2Fn() {
-        if (this.open !== undefined) {
-            this._open = this.open;
-        }
-    }
-    watch2() {
-        this.watch2Fn();
-    }
     componentDidLoad() {
-        if (document && 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-accordion-item");
         if (this.defaultOpen) {
             this._open = this.defaultOpen;
@@ -104,15 +88,13 @@ const DBAccordionItem = class {
         this.initialized = true;
         this.watch0Fn();
         this.watch1Fn();
-        this.watch2Fn();
     }
     render() {
         var _a, _b;
-        return (index.h("li", { key: 'eeee725f1b2d065ed9f0fce53498badfac480425', class: index$1.cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("details", { key: '6c6ab02a934c9fa35b2c944787179f28c6ea0f1b', "aria-disabled": index$1.getBooleanAsString(this.disabled), ref: (el) => {
+        return (index.h("li", { key: '0d59b9b4e2e9992d832429171c725c0f776b46b4', class: index$1.cls("db-accordion-item", this.className), id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("details", { key: '8068249ac8266fea66da265c105309de3d98ac06', "aria-disabled": index$1.getBooleanAsString(this.disabled), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, index.h("summary", { key: '31cb38ef067739903b96f7a5c33333787c8f9e51', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? index.h("slot", { name: "headline" }) : null), index.h("div", { key: '6d97b5f0a5f21a4e7785ea3068185b42e421da5b' }, this.text ? this.text : null, index.h("slot", { key: '85296d3db72c14f9d24fc23b3084648a109948dc' })))));
+            }, name: this._name, open: this._open }, index.h("summary", { key: '338504ea06903b316e707bc10036d27000445c85', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? index.h("slot", { name: "headline" }) : null), index.h("div", { key: '97982ad7bc98e8e47ad2a5ce157fda13d2aa82ce' }, this.text ? this.text : null, index.h("slot", { key: '23c9b8d8b3b4d32362820be097c8474fa7e12609' })))));
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "_ref": [{
                 "watch0": 0
@@ -122,9 +104,6 @@ const DBAccordionItem = class {
             }],
         "name": [{
                 "watch1": 0
-            }],
-        "open": [{
-                "watch2": 0
             }]
     }; }
 };

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
 const DBAccordion = class {
@@ -61,7 +61,7 @@ const DBAccordion = class {
     watch0Fn() {
         // If we have a single behavior we first check for
         // props.name otherwise for state_id
-        if (this.initialized && this._ref) {
+        if (this.initialized) {
             if (this.behavior === "single") {
                 if (this.name) {
                     if (this._name !== this.name) {
@@ -121,12 +121,6 @@ const DBAccordion = class {
         this.watch2Fn();
     }
     componentDidLoad() {
-        if (document && 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-accordion");
         this.initialized = true;
         this._initOpenIndexDone = true;
@@ -136,13 +130,12 @@ const DBAccordion = class {
     }
     render() {
         var _a, _b, _c;
-        return (index.h("ul", { key: 'f266979e95cc9595d10dd6e95c418acc7bce70c7', class: index$1.cls("db-accordion", this.className), ref: (el) => {
+        return (index.h("ul", { key: '3a4a71d409be0f76abbb067e1698f7e0ab64b6c6', class: index$1.cls("db-accordion", 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-variant": this.variant }, !this.items ? index.h("slot", null) : null, this.items
             ? (_c = this.convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index$1) => (index.h("db-accordion-item", { key: `accordion-item-${index$1}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))
             : null));
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "initialized": [{
                 "watch0": 0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
@@ -64,23 +64,16 @@ const DBBadge = class {
         this.watch0Fn();
     }
     componentDidLoad() {
-        if (document && 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-badge");
         this.initialized = true;
         this.watch0Fn();
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("span", { key: '4e38af5e75112c17a85fcc129c96b3eb0f47c9c9', class: index$1.cls("db-badge", this.className), ref: (el) => {
+        return (index.h("span", { key: '1a986f2667f67029493e606478d1d7928471acf8', class: index$1.cls("db-badge", 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-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : constants.DEFAULT_LABEL) }, this.text ? this.text : null, index.h("slot", { key: 'b302778cda72652585bc4ac1d3cfe2aee1c54014' })));
+            }, 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-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-label": ((_c = this.placement) === null || _c === void 0 ? void 0 : _c.startsWith("corner")) && ((_d = this.label) !== null && _d !== void 0 ? _d : constants.DEFAULT_LABEL) }, this.text ? this.text : null, index.h("slot", { key: 'f6865ef905b1e12937c3f2d684a21e889c191608' })));
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "_ref": [{
                 "watch0": 0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
@@ -45,21 +45,14 @@ const DBBrand = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-brand");
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: '768ab1a176f3670fb5a7259414c549ce5cf9f13d', class: index$1.cls("db-brand", this.className), ref: (el) => {
+        return (index.h("div", { key: '679731d67b498b68650b1f3c5fb6ac1f8578b29f', class: index$1.cls("db-brand", this.className), ref: (el) => {
                 this._ref = el;
-            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : constants.DEFAULT_ICON, "data-show-icon": index$1.getBooleanAsString(this.showIcon), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, index.h("slot", { key: 'ed1d803f90bf9d6d313202dc99c925475f3daf81' }), this.text ? this.text : null));
+            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : constants.DEFAULT_ICON, "data-show-icon": index$1.getBooleanAsString(this.showIcon), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, index.h("slot", { key: 'bac6503b5fd5b16c138a513bae0749ecd67f2dc8' }), this.text ? this.text : null));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 exports.db_brand = DBBrand;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
 const DBButton = class {
@@ -54,21 +54,14 @@ const DBButton = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-button");
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("button", { key: 'ba9e12a8eeb41f636573a47de9c4c85e3f6f7986', class: index$1.cls("db-button", this.className), ref: (el) => {
+        return (index.h("button", { key: '884fb14651c53c3646098488d59aec90bc7c8234', class: index$1.cls("db-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, type: this.getButtonType(), disabled: index$1.getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": index$1.getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-no-text": index$1.getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, index.h("slot", { key: '695910816fe7038dc5e8d4cb3566b02e75272ce4' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, type: this.getButtonType(), disabled: index$1.getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": index$1.getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": index$1.getBooleanAsString(this.wrap), "data-no-text": index$1.getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, index.h("slot", { key: 'd5c5efe19be364dca26feb751f76229b9aa71612' })));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 exports.db_button = DBButton;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
 const DBCard = class {
@@ -50,21 +50,14 @@ const DBCard = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-card");
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '9fbce0f0603b7a1f8037cc8f3889624f6f908ab1', class: index$1.cls("db-card", this.className), ref: (el) => {
+        return (index.h("div", { key: '2e81240f66c3d0652a35fca19fbdeac10b3188c3', class: index$1.cls("db-card", 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-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '91cff3f8ec07f51b669db6d30ebab9e035ff4cb8' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: 'c4a94fea2bffbd1a548e93c09fb643535dfef360' })));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 exports.db_card = DBCard;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-2_9ESkQu.js');
 var formComponents = require('./form-components-_ncB_U2D.js');
@@ -193,12 +193,6 @@ const DBCheckbox = class {
         this.watch5Fn();
     }
     componentDidLoad() {
-        if (document && 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-checkbox");
         this.initialized = true;
         this.resetIds();
@@ -216,11 +210,10 @@ const DBCheckbox = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '9fce20e55c8c075dc21702023137dc7180a4d00a', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: 'd9b09729b9759e256cbdbb9083dafac160aa1d48', htmlFor: this._id }, index.h("input", { key: '9ca080c2b174b4cfd750c6027d245c4b9c1067bb', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (index.h("div", { key: '4307b61065bb09633a48978283bfe5534126acea', class: index$1.cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-hide-label": index$1.getHideProp(this.showLabel) }, index.h("label", { key: '0aa7c1cb0b896790de944dabc35e10cd517806b5', htmlFor: this._id }, index.h("input", { key: '6bca474ad52dc47253c8cc0016aa6f3cff223ad8', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
                 this._ref = el;
-            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, index.h("slot", { key: 'b55a47b5325c6ead113139094a0fa0e290d81897' })), 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: '4197a25c9fd55f727cbe91005b0ae4d24eea9810', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '9d5d12ddb9c90e655988fac61261b15f2105063e', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, required: index$1.getBoolean(this.required, "required"), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), "aria-describedby": (_a = this.ariaDescribedBy) !== null && _a !== void 0 ? _a : this._descByIds }), this.label ? this.label : null, index.h("slot", { key: '12de0b3395173a0ce9f15cf1f8ed49007a721422' })), 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: 'af7347edcc4b3eeb57bdd87fe25cc1ca38a1779f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), index.h("span", { key: '13ec5ad3bd9534eac4ea7d1310edc1e47fa5d382', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "id": [{
                 "watch0": 0

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
 const DBCustomButton = class {
@@ -44,21 +44,14 @@ const DBCustomButton = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-custom-button");
     }
     render() {
         var _a, _b, _c, _d;
-        return (index.h("div", { key: '6e34f3b4711c1301644cfd2d205134bf46cff9b7', class: index$1.cls("db-custom-button", this.className), ref: (el) => {
+        return (index.h("div", { key: 'a7c717751195403b664b07491a8301dc531779bd', 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((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": index$1.getBooleanAsString(this.noText) }, index.h("slot", { key: 'dfac0afd24004e1257613797c9fb953db6948997' })));
+            }, 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((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": index$1.getBooleanAsString(this.noText) }, index.h("slot", { key: '7d181ecb68722367d526634fe52afe164117894a' })));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 exports.db_custom_button = DBCustomButton;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 var constants = require('./constants-bMY2_d8A.js');
 var formComponents = require('./form-components-_ncB_U2D.js');
@@ -47,21 +47,14 @@ const DBCustomSelectDropdown = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-custom-select-dropdown");
     }
     render() {
         var _a, _b;
-        return (index.h("article", { key: 'c653c9365e53ed0b70e317175ab2d79fbd454a61', class: index$1.cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (index.h("article", { key: '666781dcaef33e70aeb2378c19dccf9e0502be81', 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: '27d6d442f7055db6e49ce153d11f9c3931e4be4f' })));
+            }, 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: '2587222810ae1534d3c8070f1003820a22429ae9' })));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 const DBCustomSelectList = class {
@@ -105,21 +98,14 @@ const DBCustomSelectList = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-custom-select-list");
     }
     render() {
         var _a, _b;
-        return (index.h("div", { key: '0e501ddc60e13fa483563a62045d7d3299976fd4', 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: 'dbfa17aa3707db35d7b3c4b8bac3a4a8e45ea352', 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: 'b1789ff973e16e284e939c2472e13416ac4b08e7' }, index.h("slot", { key: '828238a50e9d209c32feae5a5d22cf08873201c1' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("ul", { key: '241c4d3e9169ba9de06492c1e9bad11df103260a' }, index.h("slot", { key: 'dd407c533d531e58f4eed08895591898f1ec7621' }))));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 const DBCustomSelectListItem = class {
@@ -183,25 +169,18 @@ const DBCustomSelectListItem = class {
         this.watch0Fn();
     }
     componentDidLoad() {
-        if (document && 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-custom-select-list-item");
         this.watch0Fn();
     }
     render() {
         var _a, _b;
-        return (index.h("li", { key: '62dea47631b7d2b3aa9dfa53977515be502e516e', class: index$1.cls("db-custom-select-list-item", this.className, {
+        return (index.h("li", { key: '6b727336eecb62e312f2cf7afc18686d1e590b61', 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) => {
                 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": index$1.getBooleanAsString(this.hasDivider) }, !this.isGroupTitle ? (index.h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-icon-trailing": this.getIconTrailing() }, index.h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: index$1.getBoolean(this.checked, "checked"), disabled: index$1.getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, index.h("slot", null))) : (index.h("span", null, this.groupTitle))));
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "isGroupTitle": [{
                 "watch0": 0
@@ -407,12 +386,6 @@ const DBInput = class {
         this.watch4Fn();
     }
     componentDidLoad() {
-        if (document && 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-input");
         this.resetIds();
         this._invalidMessage = this.invalidMessage || constants.DEFAULT_INVALID_MESSAGE;
@@ -428,7 +401,7 @@ const DBInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (index.h("div", { key: 'ec95153e143c2e5c2b939ed3f950da15f6b64482', 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((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing) }, index.h("label", { key: 'c253045701877337001d77ee127244c40edd51d2', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : constants.DEFAULT_LABEL), index.h("input", { key: '458471592bfb08d219a8872ee728f59af11998af', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (index.h("div", { key: 'b2b30122374389f0ce7cd686adeebd544d739866', 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((_a = this.showIconLeading) !== null && _a !== void 0 ? _a : this.showIcon), "data-icon": (_b = this.iconLeading) !== null && _b !== void 0 ? _b : this.icon, "data-icon-trailing": this.iconTrailing, "data-hide-asterisk": index$1.getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": index$1.getBooleanAsString(this.showIconTrailing) }, index.h("label", { key: 'b7194b6d956d72f498443792b34f08e9c7c4f9f5', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : constants.DEFAULT_LABEL), index.h("input", { key: '73e36e11d4634eda85bfe9abe646f9e9f95e6cef', "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: (_d = this.placeholder) !== null && _d !== void 0 ? _d : constants.DEFAULT_PLACEHOLDER, disabled: index$1.getBoolean(this.disabled, "disabled"), required: index$1.getBoolean(this.required, "required"), step: index$1.getStep(this.step), value: (_f = (_e = this.value) !== null && _e !== void 0 ? _e : this._value) !== null && _f !== void 0 ? _f : "", 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"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: index$1.getBoolean(this.autofocus, "autofocus"), enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onBlur: (event) => this.handleBlur(event), onFocus: (event) => this.handleFocus(event), list: this.dataList && this._dataListId, "aria-describedby": (_g = this.ariaDescribedBy) !== null && _g !== void 0 ? _g : this._descByIds, role: [
@@ -440,9 +413,8 @@ const DBInput = class {
                 "color",
             ].includes((_h = this.type) !== null && _h !== void 0 ? _h : "") && index$1.isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: '4d10f65a1fc6bcacfcb955c0a1a4e51718b2b94a' }), 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: '6d042698b904075c981bbcbfdf20517b919e1656', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), index.h("span", { key: 'ff033dbe911038702eee30ecd372605815846066', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (index.h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (index.h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, index.h("slot", { key: 'a699c5b648a73eb17f0836def1b1c2a005bf7943' }), 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: '60d2b6b280bfb6258c1a76601123dbb0aa041547', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), index.h("span", { key: '044819a1c744e3d31308e771eeff1c0adc674024', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
-    get rootElement() { return index.getElement(this); }
     static get watchers() { return {
         "id": [{
                 "watch0": 0
@@ -524,21 +496,14 @@ const DBTag = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-tag");
     }
     render() {
         var _a, _b, _c;
-        return (index.h("div", { key: '43e3f8fd24d9504c8a66220e9f0df66fde1045a7', class: index$1.cls("db-tag", this.className), ref: (el) => {
+        return (index.h("div", { key: '0f44c340afdd993c4f583c23087bf008cb64bb04', 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), "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-no-text": index$1.getBooleanAsString(this.noText), "data-overflow": index$1.getBooleanAsString(this.overflow) }, index.h("slot", { key: '2fe8b73179e4f4e02da367c418cc614dec32bfca', name: "content" }), this.text ? this.text : null, index.h("slot", { key: '6e2873832b12cb87b895554ce090e55163ce7b37' }), 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), "data-show-icon": index$1.getBooleanAsString(this.showIcon), "data-no-text": index$1.getBooleanAsString(this.noText), "data-overflow": index$1.getBooleanAsString(this.overflow) }, index.h("slot", { key: '9e4388656037b233763783ba6e771d30f8302f5c', name: "content" }), this.text ? this.text : null, index.h("slot", { key: 'e53a5fc3a2f9d5193a73f6c6256aac900df60c74' }), 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); }
 };
 
 exports.db_custom_select_dropdown = DBCustomSelectDropdown;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DLuhzJ0p.js');
+var index = require('./index-BoC-BWt4.js');
 var index$1 = require('./index-2_9ESkQu.js');
 
 const DBCustomSelectFormField = class {
@@ -44,21 +44,14 @@ const DBCustomSelectFormField = class {
         }
     }
     componentDidLoad() {
-        if (document && 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-custom-select-form-field");
     }
     render() {
         var _a, _b;
-        return (index.h("summary", { key: '9afc6a67593004b2973b9e2126259f8013506108', class: index$1.cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (index.h("summary", { key: '6e319e52a2daf3966edf7d8ebc3febb10c8a8857', 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: '95c4f37075676b60016a214b3bddb31d7eef0f50' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, index.h("slot", { key: '05a393b0ff51cc37aff8d237b0a8101f4b352261' })));
     }
-    get rootElement() { return index.getElement(this); }
 };
 
 exports.db_custom_select_form_field = DBCustomSelectFormField;