@db-ux/wc-core-components 4.9.1 → 4.10.0-esm-94516f3

package/dist/db-ux/p-f65e1db8.entry.js

@@ -0,0 +1 @@
+import{r as t,c as i,h as s,g as h}from"./p-Cr2cgn5B.js";import{u as a,e,l as d,c,d as n}from"./p-xkoBSP8R.js";import{b as o}from"./p-D5mInaY7.js";const l=class{constructor(s){t(this,s),this.input=i(this,"input"),this.change=i(this,"change"),this.blur=i(this,"blur"),this.focus=i(this,"focus"),this.initialized=!1,this._id=void 0,this.abortController=void 0}handleInput(t,i){this.input&&this.input.emit(t)}handleChange(t,i){this.change&&this.change.emit(t)}handleBlur(t){this.blur&&this.blur.emit(t)}handleFocus(t){this.focus&&this.focus.emit(t)}resetIds(){var t,i,s;this._id=null!==(s=null!==(t=this.id)&&void 0!==t?t:null===(i=this.propOverrides)||void 0===i?void 0:i.id)&&void 0!==s?s:`radio-${a()}`}enableAttributePassing(t,i){const s=null==t?void 0:t.closest(i);if(t&&s){const i=s.attributes;for(let h=0;h<i.length;h++){const a=i.item(h);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),h=a.value.replace("hydrated","").trim(),e=t.getAttribute("class");t.setAttribute(a.name,`${e?`${e} `:""}${h}`),i?s.setAttribute("class","hydrated"):s.removeAttribute(a.name)}}}}watch0Fn(){var t,i;(null!==(t=this.id)&&void 0!==t?t:null===(i=this.propOverrides)||void 0===i?void 0:i.id)&&this.resetIds()}watch0(){this.watch0Fn()}watch1Fn(){this.checked&&this.initialized&&this._ref&&(this._ref.checked=!0)}watch1(){this.watch1Fn()}watch2Fn(){if(this._ref){let t=this.abortController;t||(t=new AbortController,this.abortController=t),o(this._ref,(t=>{n((()=>{const i=this.checked?this.checked:this._ref.checked,s=Object.assign(Object.assign({},t),{target:Object.assign(Object.assign({},t.target),{value:"",checked:i})});this.handleChange(s,!0),this.handleInput(s,!0)}),1)}),t.signal)}}watch2(){this.watch2Fn()}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-radio"),this.initialized=!0,this.resetIds(),this.watch0Fn(),this.watch1Fn(),this.watch2Fn()}disconnectedCallback(){var t;null===(t=this.abortController)||void 0===t||t.abort()}render(){return s("label",{key:"1ff5543af917149d3d1f51a2c67c7686b55f8d11",class:c("db-radio",this.className),"data-size":this.size,"data-hide-label":d(this.showLabel),"data-hide-asterisk":d(this.showRequiredAsterisk),htmlFor:this._id},s("input",{key:"3409b94c081b36bd60ba84f8e6a4064e43e2ad50",type:"radio","aria-invalid":"invalid"===this.validation,"data-custom-validity":this.validation,ref:t=>{this._ref=t},id:this._id,name:this.name,checked:e(this.checked,"checked"),disabled:e(this.disabled,"disabled"),value:this.value,required:e(this.required,"required"),onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onBlur:t=>this.handleBlur(t),onFocus:t=>this.handleFocus(t)}),this.label?this.label:null,s("slot",{key:"c9850bcf9efb2e272e6ae8cc83ab92d62e095094"}))}get rootElement(){return h(this)}static get watchers(){return{id:[{watch0:0}],"propOverrides?.id":[{watch0:0}],initialized:[{watch1:0}],_ref:[{watch1:0},{watch2:0}],checked:[{watch1:0}]}}};export{l as db_radio}

package/dist/db-ux/p-fe5d3eb6.entry.js

@@ -0,0 +1 @@
+import{r as t,h as i,g as s,c as e}from"./p-Cr2cgn5B.js";import{c as a,e as h,g as d,h as o,d as n,s as l,i as c,u as r,k as u,f,j as v,b,l as m}from"./p-xkoBSP8R.js";import{l as y,f as p,g,h as w,j as k,k as x,b as $,a as _,m as F}from"./p-BdL-nI5y.js";import{c as C}from"./p-D5mInaY7.js";const L=class{constructor(i){t(this,i),this.width="fixed"}enableAttributePassing(t,i){const s=null==t?void 0:t.closest(i);if(t&&s){const i=s.attributes;for(let e=0;e<i.length;e++){const a=i.item(e);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),e=a.value.replace("hydrated","").trim(),h=t.getAttribute("class");t.setAttribute(a.name,`${h?`${h} `:""}${e}`),i?s.setAttribute("class","hydrated"):s.removeAttribute(a.name)}}}}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-custom-select-dropdown")}render(){var t,s;return i("article",{key:"a2f23f8c268d6b06b03e58ca3abc998b7f741301",class:a("db-custom-select-dropdown db-card",this.className),"data-spacing":"none",ref:t=>{this._ref=t},id:null!==(t=this.id)&&void 0!==t?t:null===(s=this.propOverrides)||void 0===s?void 0:s.id,"data-width":this.width},i("slot",{key:"f2fd945d779fefe9d1b379d95d11c5ae60689818"}))}get rootElement(){return s(this)}},D=class{constructor(i){t(this,i)}enableAttributePassing(t,i){const s=null==t?void 0:t.closest(i);if(t&&s){const i=s.attributes;for(let e=0;e<i.length;e++){const a=i.item(e);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),e=a.value.replace("hydrated","").trim(),h=t.getAttribute("class");t.setAttribute(a.name,`${h?`${h} `:""}${e}`),i?s.setAttribute("class","hydrated"):s.removeAttribute(a.name)}}}}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-custom-select-list")}render(){var t,s;return i("div",{key:"f62ebf87384969fa7c299ed23062d15ac4d08e9d",class:a("db-custom-select-list",this.className),role:this.multiple?"group":"radiogroup","aria-label":this.label,ref:t=>{this._ref=t},id:null!==(t=this.id)&&void 0!==t?t:null===(s=this.propOverrides)||void 0===s?void 0:s.id},i("ul",{key:"a6071f83a292171bc101a797adb98dc976a18e34"},i("slot",{key:"6a18c02b91c91890a0d4b73e2b718c046b278f29"})))}get rootElement(){return s(this)}},A=class{constructor(i){t(this,i),this.change=e(this,"change"),this.hasDivider=!1}handleChange(t){t.stopPropagation(),this.change&&this.change.emit(t)}getIconTrailing(){if(!this.isGroupTitle&&"checkbox"!==this.type)return h(this.checked,"checked")?"check":"x_placeholder"}enableAttributePassing(t,i){const s=null==t?void 0:t.closest(i);if(t&&s){const i=s.attributes;for(let e=0;e<i.length;e++){const a=i.item(e);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),e=a.value.replace("hydrated","").trim(),h=t.getAttribute("class");t.setAttribute(a.name,`${h?`${h} `:""}${e}`),i?s.setAttribute("class","hydrated"):s.removeAttribute(a.name)}}}}watch0Fn(){this.hasDivider=Boolean(this.isGroupTitle||this.showDivider)}watch0(){this.watch0Fn()}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-custom-select-list-item"),this.watch0Fn()}render(){var t,s;return i("li",{key:"67c52a98bf21203bd6f5f14617ec32d2e81f29e4",class:a("db-custom-select-list-item",this.className,{"db-checkbox":"checkbox"===this.type&&!this.isGroupTitle,"db-radio":"checkbox"!==this.type&&!this.isGroupTitle}),ref:t=>{this._ref=t},id:null!==(t=this.id)&&void 0!==t?t:null===(s=this.propOverrides)||void 0===s?void 0:s.id,"data-divider":d(this.hasDivider)},this.isGroupTitle?i("span",null,this.groupTitle):i("label",{"data-icon":"checkbox"!==this.type&&this.icon?this.icon:void 0,"data-show-icon":d(this.showIcon),"data-icon-trailing":this.getIconTrailing()},i("input",{class:"db-custom-select-list-item-checkbox","data-disable-focus":"true",type:this.type,name:this.name,form:this.name,checked:h(this.checked,"checked"),disabled:h(this.disabled,"disabled"),value:this.value,onChange:t=>this.handleChange(t)}),this.label?this.label:null,i("slot",null)))}get rootElement(){return s(this)}static get watchers(){return{isGroupTitle:[{watch0:0}],showDivider:[{watch0:0}]}}},B=class{constructor(i){t(this,i),this.input=e(this,"input"),this.change=e(this,"change"),this.blur=e(this,"blur"),this.focus=e(this,"focus"),this._id=void 0,this._messageId=void 0,this._validMessageId=void 0,this._invalidMessageId=void 0,this._invalidMessage=void 0,this._dataListId=void 0,this._descByIds=void 0,this._value="",this._voiceOverFallback="",this.abortController=void 0}hasValidState(){var t;return!!(null!==(t=this.validMessage)&&void 0!==t?t:"valid"===this.validation)}handleValidation(){var t,i,s,e;(null===(t=this._ref)||void 0===t?void 0:t.validity.valid)&&"invalid"!==this.validation?this.hasValidState()&&(null===(s=this._ref)||void 0===s?void 0:s.validity.valid)&&(this.required||this.minLength||this.maxLength||this.pattern)?(this._descByIds=this._validMessageId,o()&&(this._voiceOverFallback=null!==(e=this.validMessage)&&void 0!==e?e:x,n((()=>this._voiceOverFallback=""),1e3))):this._descByIds=l(this.message,this.showMessage)?this._messageId:void 0:(this._descByIds=this._invalidMessageId,this._invalidMessage=this.invalidMessage||(null===(i=this._ref)||void 0===i?void 0:i.validationMessage)||y,o()&&(this._voiceOverFallback=this._invalidMessage,n((()=>this._voiceOverFallback=""),1e3)))}handleInput(t,i){this.input&&this.input.emit(t),this.handleValidation()}handleChange(t,i){this.change&&this.change.emit(t),this.handleValidation()}handleBlur(t){this.blur&&this.blur.emit(t)}handleFocus(t){this.focus&&this.focus.emit(t)}getDataList(){const t=this.dataList;return Array.from((c(t)?null==t?void 0:t.map((t=>({value:t,label:void 0}))):t)||[])}resetIds(){var t,i,s;const e=null!==(s=null!==(t=this.id)&&void 0!==t?t:null===(i=this.propOverrides)||void 0===i?void 0:i.id)&&void 0!==s?s:`input-${r()}`;this._id=e,this._messageId=e+p,this._validMessageId=e+g,this._invalidMessageId=e+w,this._dataListId=e+k}enableAttributePassing(t,i){const s=null==t?void 0:t.closest(i);if(t&&s){const i=s.attributes;for(let e=0;e<i.length;e++){const a=i.item(e);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),e=a.value.replace("hydrated","").trim(),h=t.getAttribute("class");t.setAttribute(a.name,`${h?`${h} `:""}${e}`),i?s.setAttribute("class","hydrated"):s.removeAttribute(a.name)}}}}watch0Fn(){var t,i;(null!==(t=this.id)&&void 0!==t?t:null===(i=this.propOverrides)||void 0===i?void 0:i.id)&&this.resetIds()}watch0(){this.watch0Fn()}watch1Fn(){var t;this._invalidMessage=this.invalidMessage||(null===(t=this._ref)||void 0===t?void 0:t.validationMessage)||y}watch1(){this.watch1Fn()}watch2Fn(){var t;if(this._id){const i=this._id+p;this._messageId=i,this._validMessageId=this._id+g,this._invalidMessageId=this._id+w,this._dataListId=null!==(t=this.dataListId)&&void 0!==t?t:this._id+k,l(this.message,this.showMessage)&&(this._descByIds=i),this.handleValidation()}}watch2(){this.watch2Fn()}watch3Fn(){this._value=this.value}watch3(){this.watch3Fn()}watch4Fn(){if(this._ref){const t=void 0;let i=this.abortController;i||(i=new AbortController,this.abortController=i),C(this._ref,{value:this.value,defaultValue:t},(t=>{this.handleChange(t,!0),this.handleInput(t,!0)}),i.signal)}}watch4(){this.watch4Fn()}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-input"),this.resetIds(),this._invalidMessage=this.invalidMessage||y,this.watch0Fn(),this.watch1Fn(),this.watch2Fn(),this.watch3Fn(),this.watch4Fn()}disconnectedCallback(){var t;null===(t=this.abortController)||void 0===t||t.abort()}render(){var t,s,e,o,n,c,r,y,p;return i("div",{key:"09f1dff4d884168cb140705b0f310519e60e3aa2",class:a("db-input",this.className),"data-variant":this.variant,"data-hide-label":m(this.showLabel),"data-show-icon":d(null!==(t=this.showIconLeading)&&void 0!==t?t:this.showIcon),"data-icon":null!==(s=this.iconLeading)&&void 0!==s?s:this.icon,"data-icon-trailing":this.iconTrailing,"data-hide-asterisk":m(this.showRequiredAsterisk),"data-show-icon-trailing":d(this.showIconTrailing)},i("label",{key:"17c5e2ddca81cd88f5fbc5d0b5024fb833aff026",htmlFor:this._id},null!==(e=this.label)&&void 0!==e?e:_),i("input",{key:"ed0381ce65f0a89035804412d736adf3b6e0aea1","aria-invalid":"invalid"===this.validation,"data-custom-validity":this.validation,"data-field-sizing":this.fieldSizing,ref:t=>{this._ref=t},id:this._id,name:this.name,type:this.type||"text",multiple:h(this.multiple,"multiple"),accept:this.accept,placeholder:null!==(o=this.placeholder)&&void 0!==o?o:$,disabled:h(this.disabled,"disabled"),required:h(this.required,"required"),step:v(this.step),value:null!==(c=null!==(n=this.value)&&void 0!==n?n:this._value)&&void 0!==c?c:"",maxLength:f(this.maxLength,this.maxlength),minLength:f(this.minLength,this.minlength),max:u(this.max,this.type),min:u(this.min,this.type),readOnly:h(this.readOnly,"readOnly")||h(this.readonly,"readonly"),form:this.form,pattern:this.pattern,size:this.size,autoComplete:this.autocomplete,autoFocus:h(this.autofocus,"autofocus"),enterKeyHint:this.enterkeyhint,inputMode:this.inputmode,onInput:t=>this.handleInput(t),onChange:t=>this.handleChange(t),onBlur:t=>this.handleBlur(t),onFocus:t=>this.handleFocus(t),list:this.dataList&&this._dataListId,"aria-describedby":null!==(r=this.ariaDescribedBy)&&void 0!==r?r:this._descByIds,role:["datetime-local","date","time","week","month","color"].includes(null!==(y=this.type)&&void 0!==y?y:"")&&b()?"textbox":void 0}),this.dataList?i("datalist",{id:this._dataListId},null===(p=this.getDataList())||void 0===p?void 0:p.map((t=>i("option",{key:this._dataListId+"-option-"+t.value,value:t.value},t.label)))):null,i("slot",{key:"e7c51c3d97314fd153f606a346244dac365171e5"}),l(this.message,this.showMessage)?i("db-infotext",{size:this.messageSize||"small",icon:this.messageIcon,id:this._messageId},this.message):null,this.hasValidState()?i("db-infotext",{semantic:"successful",id:this._validMessageId,size:this.validMessageSize||"small"},this.validMessage||x):null,i("db-infotext",{key:"f92de27dbfd942534f83a83d181b533fc0b4a6e2",semantic:"critical",id:this._invalidMessageId,size:this.invalidMessageSize||"small"},this._invalidMessage),i("span",{key:"af168dd9e11d853f76db0edee198a744d36a228d","data-visually-hidden":"true",role:"status"},this._voiceOverFallback))}get rootElement(){return s(this)}static get watchers(){return{id:[{watch0:0}],"propOverrides?.id":[{watch0:0}],_ref:[{watch1:0},{watch4:0}],invalidMessage:[{watch1:0}],_id:[{watch2:0}],value:[{watch3:0}]}}},j=class{constructor(i){t(this,i),this.remove=e(this,"remove")}handleRemove(t){t&&(t.stopPropagation(),this.remove&&this.remove.emit(t))}getRemoveButtonText(){return this.removeButton?this.removeButton:F}enableAttributePassing(t,i){const s=null==t?void 0:t.closest(i);if(t&&s){const i=s.attributes;for(let e=0;e<i.length;e++){const a=i.item(e);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),s.removeAttribute(a.name);else if(a&&"class"===a.name){const i=a.value.includes("hydrated"),e=a.value.replace("hydrated","").trim(),h=t.getAttribute("class");t.setAttribute(a.name,`${h?`${h} `:""}${e}`),i?s.setAttribute("class","hydrated"):s.removeAttribute(a.name)}}}}componentDidLoad(){if("undefined"!=typeof document&&this.rootElement&&this.rootElement.dataset.connect){const t=document.querySelector(`[data-connect-id="${this.rootElement.dataset.connect}"]`);t&&t.remove()}this.enableAttributePassing(this._ref,"db-tag")}render(){var t,s,e;return i("div",{key:"85b02f290e8323ddd9a61ee5cf15893e7bc0cdab",class:a("db-tag",this.className),ref:t=>{this._ref=t},id:null!==(t=this.id)&&void 0!==t?t:null===(s=this.propOverrides)||void 0===s?void 0:s.id,"data-semantic":this.semantic,"data-emphasis":this.emphasis,"data-icon":this.icon,"data-show-check-state":d(null===(e=this.showCheckState)||void 0===e||e),"data-show-icon":d(this.showIcon),"data-no-text":d(this.noText),"data-overflow":d(this.overflow)},i("slot",{key:"3aefef41d0a30b8f979e43146936be56a1d9181b",name:"content"}),this.text?this.text:null,i("slot",{key:"e283aefd212ea8c7f7eab8da48ed19a7f4763e38"}),"removable"===this.behavior?i("button",{class:"db-button db-tab-remove-button","data-icon":"cross","data-size":"small","data-no-text":"true","data-variant":"ghost",type:"button",onClick:t=>this.handleRemove(t)},i("db-tooltip",{variant:"label"},this.getRemoveButtonText())):null)}get rootElement(){return s(this)}};export{L as db_custom_select_dropdown,D as db_custom_select_list,A as db_custom_select_list_item,B as db_input,j as db_tag}

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
-import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
+import { e as getBoolean, g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
 const DBAccordionItem = class {
     constructor(hostRef) {
@@ -27,7 +27,9 @@ const DBAccordionItem = class {
         if (this.toggle) {
             this.toggle.emit(newStateOpen);
         }
-        this._open = newStateOpen;
+        if (this.open === undefined) {
+            this._open = newStateOpen;
+        }
     }
     /**
      * Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil.
@@ -78,7 +80,22 @@ const DBAccordionItem = class {
     watch1() {
         this.watch1Fn();
     }
+    watch2Fn() {
+        const nextOpen = getBoolean(this.open, "open");
+        if (nextOpen !== undefined) {
+            this._open = nextOpen;
+        }
+    }
+    watch2() {
+        this.watch2Fn();
+    }
     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-accordion-item");
         if (this.defaultOpen) {
             this._open = this.defaultOpen;
@@ -86,13 +103,15 @@ const DBAccordionItem = class {
         this.initialized = true;
         this.watch0Fn();
         this.watch1Fn();
+        this.watch2Fn();
     }
     render() {
         var _a, _b;
-        return (h("li", { key: '0d59b9b4e2e9992d832429171c725c0f776b46b4', class: 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 }, h("details", { key: '8068249ac8266fea66da265c105309de3d98ac06', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
+        return (h("li", { key: '7bfcb3c0b3bc70446504054b267ad2747a7360ef', class: 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 }, h("details", { key: '18345f01252d5c48e3e22b0f9fa7258afb2aa77b', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, h("summary", { key: '338504ea06903b316e707bc10036d27000445c85', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '97982ad7bc98e8e47ad2a5ce157fda13d2aa82ce' }, this.text ? this.text : null, h("slot", { key: '23c9b8d8b3b4d32362820be097c8474fa7e12609' })))));
+            }, name: this._name, open: this._open }, h("summary", { key: '8ce63298f1899cbe77d1eda2a71135aa74e9049d', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '3b2275eba655b47e08af48d0fd49e68e7cd40a4a' }, this.text ? this.text : null, h("slot", { key: '52caf8709e1f54d69ad7433365146565609248ac' })))));
     }
+    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "_ref": [{
                 "watch0": 0
@@ -102,6 +121,9 @@ const DBAccordionItem = class {
             }],
         "name": [{
                 "watch1": 0
+            }],
+        "open": [{
+                "watch2": 0
             }]
     }; }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
 import { u as uuid, c as cls } from './index-xkoBSP8R.js';
 
 const DBAccordion = class {
@@ -59,7 +59,7 @@ const DBAccordion = class {
     watch0Fn() {
         // If we have a single behavior we first check for
         // props.name otherwise for state_id
-        if (this.initialized) {
+        if (this.initialized && this._ref) {
             if (this.behavior === "single") {
                 if (this.name) {
                     if (this._name !== this.name) {
@@ -119,6 +119,12 @@ const DBAccordion = class {
         this.watch2Fn();
     }
     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-accordion");
         this.initialized = true;
         this._initOpenIndexDone = true;
@@ -128,12 +134,13 @@ const DBAccordion = class {
     }
     render() {
         var _a, _b, _c;
-        return (h("ul", { key: '3a4a71d409be0f76abbb067e1698f7e0ab64b6c6', class: cls("db-accordion", this.className), ref: (el) => {
+        return (h("ul", { key: 'd6927b05c169addaea604a2f5eb225017ee6973c', class: 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 ? h("slot", null) : null, this.items
             ? (_c = this.convertItems()) === null || _c === void 0 ? void 0 : _c.map((item, index) => (h("db-accordion-item", { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))
             : null));
     }
+    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "initialized": [{
                 "watch0": 0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
 import { a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
@@ -62,16 +62,23 @@ const DBBadge = class {
         this.watch0Fn();
     }
     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-badge");
         this.initialized = true;
         this.watch0Fn();
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("span", { key: '1a986f2667f67029493e606478d1d7928471acf8', class: cls("db-badge", this.className), ref: (el) => {
+        return (h("span", { key: 'ff0187a460e59a023d8a6267b0e12ee7ec3d5283', class: 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": 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 : DEFAULT_LABEL) }, this.text ? this.text : null, h("slot", { key: 'f6865ef905b1e12937c3f2d684a21e889c191608' })));
+            }, 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": 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 : DEFAULT_LABEL) }, this.text ? this.text : null, h("slot", { key: 'e74eadd9e63a3c4de30d59936cdf08cd4b127ac1' })));
     }
+    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "_ref": [{
                 "watch0": 0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
 import { q as DEFAULT_ICON } from './constants-BdL-nI5y.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
@@ -43,14 +43,21 @@ const DBBrand = class {
         }
     }
     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-brand");
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '679731d67b498b68650b1f3c5fb6ac1f8578b29f', class: cls("db-brand", this.className), ref: (el) => {
+        return (h("div", { key: '7695d23f214566e142e43ffba27403680f9af668', class: cls("db-brand", 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), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, h("slot", { key: 'bac6503b5fd5b16c138a513bae0749ecd67f2dc8' }), this.text ? this.text : null));
+            }, "data-icon": this.hideLogo ? "none" : (_a = this.icon) !== null && _a !== void 0 ? _a : DEFAULT_ICON, "data-show-icon": getBooleanAsString(this.showIcon), id: (_b = this.id) !== null && _b !== void 0 ? _b : (_c = this.propOverrides) === null || _c === void 0 ? void 0 : _c.id }, h("slot", { key: '8c0e42e72b53a0417274170d7785cc93392e5c1c' }), this.text ? this.text : null));
     }
+    get rootElement() { return getElement(this); }
 };
 
 export { DBBrand as db_brand };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
 import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-xkoBSP8R.js';
 
 const DBButton = class {
@@ -52,14 +52,21 @@ const DBButton = class {
         }
     }
     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-button");
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("button", { key: '884fb14651c53c3646098488d59aec90bc7c8234', class: cls("db-button", this.className), ref: (el) => {
+        return (h("button", { key: 'ca13a30fcf43bcd6e043e3dc2bbcb94eb3347450', class: 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: getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap), "data-no-text": getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: 'd5c5efe19be364dca26feb751f76229b9aa71612' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, type: this.getButtonType(), disabled: getBoolean(this.disabled, "disabled"), "data-icon": (_c = this.iconLeading) !== null && _c !== void 0 ? _c : this.icon, "data-show-icon": getBooleanAsString((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-wrap": getBooleanAsString(this.wrap), "data-no-text": getBooleanAsString(this.noText), name: this.name, form: this.form, value: this.value }, this.text ? this.text : null, h("slot", { key: '1f0aee6d7db3187db5575729569bfdd4c88c0e19' })));
     }
+    get rootElement() { return getElement(this); }
 };
 
 export { DBButton as db_button };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.js';
 import { c as cls } from './index-xkoBSP8R.js';
 
 const DBCard = class {
@@ -48,14 +48,21 @@ const DBCard = class {
         }
     }
     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-card");
     }
     render() {
         var _a, _b;
-        return (h("div", { key: '2e81240f66c3d0652a35fca19fbdeac10b3188c3', class: cls("db-card", this.className), ref: (el) => {
+        return (h("div", { key: '60e504447aed35763e41cf692507e28c4da6e893', class: 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) }, h("slot", { key: 'c4a94fea2bffbd1a548e93c09fb643535dfef360' })));
+            }, 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) }, h("slot", { key: '92301dedc9ece7f5b2bcbd5da726d402af788b31' })));
     }
+    get rootElement() { return getElement(this); }
 };
 
 export { DBCard as db_card };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Cr2cgn5B.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, k as DEFAULT_VALID_MESSAGE } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, u as uuid, e as getBoolean, l as getHideProp, c as cls } from './index-xkoBSP8R.js';
 import { a as addCheckedResetEventListener } from './form-components-D6LQfJvq.js';
@@ -191,6 +191,12 @@ const DBCheckbox = class {
         this.watch5Fn();
     }
     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-checkbox");
         this.initialized = true;
         this.resetIds();
@@ -208,10 +214,11 @@ const DBCheckbox = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '4307b61065bb09633a48978283bfe5534126acea', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '0aa7c1cb0b896790de944dabc35e10cd517806b5', htmlFor: this._id }, h("input", { key: '6bca474ad52dc47253c8cc0016aa6f3cff223ad8', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: 'b4aa2acb183c25424a4c670c699410d7f8e67ad1', class: cls("db-checkbox", this.className), "data-size": this.size, "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-hide-label": getHideProp(this.showLabel) }, h("label", { key: '549e995c2d8c8105d086ad957d0141d802aa3e55', htmlFor: this._id }, h("input", { key: 'e2454be60370d672b523d9fd2efb422a7072d763', type: "checkbox", "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"), 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, h("slot", { key: '12de0b3395173a0ce9f15cf1f8ed49007a721422' })), 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: 'af7347edcc4b3eeb57bdd87fe25cc1ca38a1779f', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '13ec5ad3bd9534eac4ea7d1310edc1e47fa5d382', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            }, id: this._id, name: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, required: 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, h("slot", { key: 'ce083db15ea772a5dd3fdf5e6a7c815029922b13' })), 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: 'bde204976a10d8d7f54300c7b465a23e9492bcf3', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '7a8fe737edfae78c380f572b2cf5cec88fbd8edf', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
+    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "id": [{
                 "watch0": 0

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
 import { g as getBooleanAsString, c as cls } from './index-xkoBSP8R.js';
 
 const DBCustomButton = class {
@@ -42,14 +42,21 @@ const DBCustomButton = class {
         }
     }
     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-custom-button");
     }
     render() {
         var _a, _b, _c, _d;
-        return (h("div", { key: 'a7c717751195403b664b07491a8301dc531779bd', class: cls("db-custom-button", this.className), ref: (el) => {
+        return (h("div", { key: 'ea6221c001dbf13b6e1d49cbf6b87b195c24a5d0', 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((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText) }, h("slot", { key: '7d181ecb68722367d526634fe52afe164117894a' })));
+            }, 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((_d = this.showIconLeading) !== null && _d !== void 0 ? _d : this.showIcon), "data-icon-trailing": this.iconTrailing, "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing), "data-size": this.size, "data-width": this.width, "data-variant": this.variant, "data-no-text": getBooleanAsString(this.noText) }, h("slot", { key: '19220453bcb2323b8c540d60a1d12b85e0c07f4d' })));
     }
+    get rootElement() { return getElement(this); }
 };
 
 export { DBCustomButton as db_custom_button };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, c as createEvent } from './index-K4o-AcjZ.js';
+import { r as registerInstance, h, g as getElement, c as createEvent } from './index-Cr2cgn5B.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-xkoBSP8R.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-D6LQfJvq.js';
@@ -45,14 +45,21 @@ const DBCustomSelectDropdown = class {
         }
     }
     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-custom-select-dropdown");
     }
     render() {
         var _a, _b;
-        return (h("article", { key: '666781dcaef33e70aeb2378c19dccf9e0502be81', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (h("article", { key: 'a2f23f8c268d6b06b03e58ca3abc998b7f741301', 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: '2587222810ae1534d3c8070f1003820a22429ae9' })));
+            }, 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: 'f2fd945d779fefe9d1b379d95d11c5ae60689818' })));
     }
+    get rootElement() { return getElement(this); }
 };
 
 const DBCustomSelectList = class {
@@ -96,14 +103,21 @@ const DBCustomSelectList = class {
         }
     }
     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-custom-select-list");
     }
     render() {
         var _a, _b;
-        return (h("div", { key: 'dbfa17aa3707db35d7b3c4b8bac3a4a8e45ea352', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (h("div", { key: 'f62ebf87384969fa7c299ed23062d15ac4d08e9d', 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: '241c4d3e9169ba9de06492c1e9bad11df103260a' }, h("slot", { key: 'dd407c533d531e58f4eed08895591898f1ec7621' }))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("ul", { key: 'a6071f83a292171bc101a797adb98dc976a18e34' }, h("slot", { key: '6a18c02b91c91890a0d4b73e2b718c046b278f29' }))));
     }
+    get rootElement() { return getElement(this); }
 };
 
 const DBCustomSelectListItem = class {
@@ -167,18 +181,25 @@ const DBCustomSelectListItem = class {
         this.watch0Fn();
     }
     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-custom-select-list-item");
         this.watch0Fn();
     }
     render() {
         var _a, _b;
-        return (h("li", { key: '6b727336eecb62e312f2cf7afc18686d1e590b61', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: '67c52a98bf21203bd6f5f14617ec32d2e81f29e4', 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) }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.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))));
     }
+    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "isGroupTitle": [{
                 "watch0": 0
@@ -384,6 +405,12 @@ const DBInput = class {
         this.watch4Fn();
     }
     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-input");
         this.resetIds();
         this._invalidMessage = this.invalidMessage || DEFAULT_INVALID_MESSAGE;
@@ -399,7 +426,7 @@ const DBInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return (h("div", { key: 'b2b30122374389f0ce7cd686adeebd544d739866', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": 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": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: 'b7194b6d956d72f498443792b34f08e9c7c4f9f5', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '73e36e11d4634eda85bfe9abe646f9e9f95e6cef', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: '09f1dff4d884168cb140705b0f310519e60e3aa2', class: cls("db-input", this.className), "data-variant": this.variant, "data-hide-label": getHideProp(this.showLabel), "data-show-icon": 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": getHideProp(this.showRequiredAsterisk), "data-show-icon-trailing": getBooleanAsString(this.showIconTrailing) }, h("label", { key: '17c5e2ddca81cd88f5fbc5d0b5024fb833aff026', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: 'ed0381ce65f0a89035804412d736adf3b6e0aea1', "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: (_d = this.placeholder) !== null && _d !== void 0 ? _d : DEFAULT_PLACEHOLDER, disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), step: getStep(this.step), value: (_f = (_e = this.value) !== null && _e !== void 0 ? _e : this._value) !== null && _f !== void 0 ? _f : "", 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"), form: this.form, pattern: this.pattern, size: this.size, autoComplete: this.autocomplete, autoFocus: 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: [
@@ -411,8 +438,9 @@ const DBInput = class {
                 "color",
             ].includes((_h = this.type) !== null && _h !== void 0 ? _h : "") && isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'a699c5b648a73eb17f0836def1b1c2a005bf7943' }), 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: '60d2b6b280bfb6258c1a76601123dbb0aa041547', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: '044819a1c744e3d31308e771eeff1c0adc674024', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_j = this.getDataList()) === null || _j === void 0 ? void 0 : _j.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'e7c51c3d97314fd153f606a346244dac365171e5' }), 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: 'f92de27dbfd942534f83a83d181b533fc0b4a6e2', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: 'af168dd9e11d853f76db0edee198a744d36a228d', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
+    get rootElement() { return getElement(this); }
     static get watchers() { return {
         "id": [{
                 "watch0": 0
@@ -494,14 +522,21 @@ const DBTag = class {
         }
     }
     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-tag");
     }
     render() {
         var _a, _b, _c;
-        return (h("div", { key: '0f44c340afdd993c4f583c23087bf008cb64bb04', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: '85b02f290e8323ddd9a61ee5cf15893e7bc0cdab', 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), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '9e4388656037b233763783ba6e771d30f8302f5c', name: "content" }), this.text ? this.text : null, h("slot", { key: 'e53a5fc3a2f9d5193a73f6c6256aac900df60c74' }), 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), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '3aefef41d0a30b8f979e43146936be56a1d9181b', name: "content" }), this.text ? this.text : null, h("slot", { key: 'e283aefd212ea8c7f7eab8da48ed19a7f4763e38' }), 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); }
 };
 
 export { DBCustomSelectDropdown as db_custom_select_dropdown, DBCustomSelectList as db_custom_select_list, DBCustomSelectListItem as db_custom_select_list_item, DBInput as db_input, DBTag as db_tag };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-K4o-AcjZ.js';
+import { r as registerInstance, h, g as getElement } from './index-Cr2cgn5B.js';
 import { c as cls } from './index-xkoBSP8R.js';
 
 const DBCustomSelectFormField = class {
@@ -42,14 +42,21 @@ const DBCustomSelectFormField = class {
         }
     }
     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-custom-select-form-field");
     }
     render() {
         var _a, _b;
-        return (h("summary", { key: '6e319e52a2daf3966edf7d8ebc3febb10c8a8857', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: 'e438005a75d6d93c62b6e04bce4f99cee7f73619', 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: '05a393b0ff51cc37aff8d237b0a8101f4b352261' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '1dc82e35d01ac41cde18cb033d657ec7f53886b8' })));
     }
+    get rootElement() { return getElement(this); }
 };
 
 export { DBCustomSelectFormField as db_custom_select_form_field };