@db-ux/wc-core-components 4.4.2 → 4.4.3

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

@@ -0,0 +1 @@
+import{r as t,h as s}from"./p-Crtu1dn6.js";import{d as i,g as e,c as a}from"./p-C4x0SOcx.js";import{D as o}from"./p-RHqkTr-_.js";import{b as n}from"./p-DfYL98sI.js";const h=class{constructor(s){t(this,s),this.initialized=!1,this.isExpanded=!1,this._documentScrollListenerCallbackId=void 0,this._observer=void 0}handleEscape(t){if(!t||"Escape"===t.key)for(const t of Array.from(this._ref.children))t.blur()}handleAutoPlacement(){if(!this._ref)return;const t=this._ref.querySelector("article");t&&i((()=>{var s;n(t,this._ref,null!==(s=this.placement)&&void 0!==s?s:"bottom")}),1)}handleDocumentScroll(t){var s,i;(null===(s=null==t?void 0:t.target)||void 0===s?void 0:s.contains)&&(null===(i=null==t?void 0:t.target)||void 0===i?void 0:i.contains(this._ref))&&this.handleAutoPlacement()}handleEnter(){var t;this.isExpanded=!0,this._documentScrollListenerCallbackId=(new o).addCallback((t=>this.handleDocumentScroll(t))),this.handleAutoPlacement();const s=this.getTrigger();s&&(null===(t=this._observer)||void 0===t||t.observe(s))}handleLeave(t){var s;const i=null==t?void 0:t.target;if(!(null==i?void 0:i.parentNode)||i.parentNode.querySelector(":focus")!==i&&i.parentNode.querySelector(":focus-within")!==i&&i.parentNode.querySelector(":hover")!==i){this.isExpanded=!1,this._documentScrollListenerCallbackId&&(new o).removeCallback(this._documentScrollListenerCallbackId);const t=this.getTrigger();t&&(null===(s=this._observer)||void 0===s||s.unobserve(t))}}getTrigger(){var t;if(this._ref){const s=Array.from(this._ref.children);if(s.length>=2){const i=s[0];return i.tagName.includes("-")?(null===(t=i.children)||void 0===t?void 0:t.length)>0?i.children[0]:null:i}}return null}enableAttributePassing(t,s){const i=null==t?void 0:t.closest(s);if(t&&i){const s=i.attributes;for(let e=0;e<s.length;e++){const a=s.item(e);if(a&&"data-density"!==a.name&&(a.name.startsWith("data-")||a.name.startsWith("aria-")))t.setAttribute(a.name,a.value),i.removeAttribute(a.name);else if(a&&"data-density"!==a.name&&"class"!==a.name&&"style"===a.name)t.setAttribute(a.name,a.value),i.removeAttribute(a.name);else if(a&&"class"===a.name){const s=a.value.includes("hydrated"),e=a.value.replace("hydrated","").trim(),o=t.getAttribute("class");t.setAttribute(a.name,`${o?`${o} `:""}${e}`),s?i.setAttribute("class","hydrated"):i.removeAttribute(a.name)}}}}watch0Fn(){if(this._ref&&this.initialized){this.initialized=!1;const t=this.getTrigger();t&&(t.ariaHasPopup="true"),this.handleAutoPlacement(),this._ref.addEventListener("keydown",(t=>this.handleEscape(t))),["mouseenter","focusin"].forEach((t=>{this._ref.addEventListener(t,(()=>this.handleEnter()))})),["mouseleave","focusout"].forEach((t=>{this._ref.addEventListener(t,(()=>this.handleLeave()))})),"undefined"!=typeof window&&"IntersectionObserver"in window&&(this._observer=new IntersectionObserver((t=>{const s=t.find((({target:t})=>t===this.getTrigger()));s&&!s.isIntersecting&&this.handleEscape(!1)})))}}watch0(){this.watch0Fn()}watch1Fn(){if(this._ref){const t=this.getTrigger();t&&(t.ariaExpanded=Boolean(this.isExpanded).toString())}}watch1(){this.watch1Fn()}componentDidLoad(){this.enableAttributePassing(this._ref,"db-popover"),this.initialized=!0,this.watch0Fn(),this.watch1Fn()}render(){var t;return s("div",{key:"6b6c1e8a1b308dde8bae73df452abe94b0b4962d",class:a("db-popover",this.className),ref:t=>{this._ref=t},id:this.id},s("slot",{key:"8276f71a50b4a588dfe8a9b8007338c895433835",name:"trigger"}),s("article",{key:"2931d9365bf99c8c539dc45ec8450fbe54e47cf2",class:"db-popover-content","data-spacing":this.spacing,"data-gap":e(this.gap),"data-animation":e(null===(t=this.animation)||void 0===t||t),"data-open":e(this.open),"data-delay":this.delay,"data-width":this.width,"data-placement":this.placement},s("slot",{key:"49dbdd7f45e2ea48cc66b0463af29f0964ff7109"})))}static get watchers(){return{_ref:[{watch0:0},{watch1:0}],initialized:[{watch0:0}],isExpanded:[{watch1:0}]}}};export{h as db_popover}

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

@@ -0,0 +1 @@
+import{r as t,h as s}from"./p-Crtu1dn6.js";import{g as a,c as i}from"./p-C4x0SOcx.js";const d=class{constructor(s){t(this,s)}enableAttributePassing(t,s){const a=null==t?void 0:t.closest(s);if(t&&a){const s=a.attributes;for(let i=0;i<s.length;i++){const d=s.item(i);if(d&&"data-density"!==d.name&&(d.name.startsWith("data-")||d.name.startsWith("aria-")))t.setAttribute(d.name,d.value),a.removeAttribute(d.name);else if(d&&"data-density"!==d.name&&"class"!==d.name&&"style"===d.name)t.setAttribute(d.name,d.value),a.removeAttribute(d.name);else if(d&&"class"===d.name){const s=d.value.includes("hydrated"),i=d.value.replace("hydrated","").trim(),e=t.getAttribute("class");t.setAttribute(d.name,`${e?`${e} `:""}${i}`),s?a.setAttribute("class","hydrated"):a.removeAttribute(d.name)}}}}componentDidLoad(){this.enableAttributePassing(this._ref,"db-infotext")}render(){var t;return s("span",{key:"1d72ab4201a2886684b736cc9909ffc2df914999",class:i("db-infotext",this.className),ref:t=>{this._ref=t},id:this.id,"data-icon":this.icon,"data-semantic":this.semantic,"data-size":this.size,"data-show-icon-leading":a(null===(t=this.showIcon)||void 0===t||t)},this.text?this.text:s("slot",null))}};export{d as db_infotext}

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

@@ -0,0 +1 @@
+import{r as a,h as s}from"./p-Crtu1dn6.js";import{c as t}from"./p-C4x0SOcx.js";const e=class{constructor(s){a(this,s)}enableAttributePassing(a,s){const t=null==a?void 0:a.closest(s);if(a&&t){const s=t.attributes;for(let e=0;e<s.length;e++){const c=s.item(e);if(c&&"data-density"!==c.name&&(c.name.startsWith("data-")||c.name.startsWith("aria-")))a.setAttribute(c.name,c.value),t.removeAttribute(c.name);else if(c&&"data-density"!==c.name&&"class"!==c.name&&"style"===c.name)a.setAttribute(c.name,c.value),t.removeAttribute(c.name);else if(c&&"class"===c.name){const s=c.value.includes("hydrated"),e=c.value.replace("hydrated","").trim(),i=a.getAttribute("class");a.setAttribute(c.name,`${i?`${i} `:""}${e}`),s?t.setAttribute("class","hydrated"):t.removeAttribute(c.name)}}}}componentDidLoad(){this.enableAttributePassing(this._ref,"db-navigation")}render(){return s("nav",{key:"ed23071c4f127474f38f663cd5c0536c94cfe526",class:t("db-navigation",this.className),ref:a=>{this._ref=a},id:this.id},s("menu",{key:"a54c6a1a1a7e5624287c0f5f7a93bc66bcb1a2f2"},s("slot",{key:"7fa106c1c7f1feae5ba622d89a4a4063ea5a8d93"})))}};export{e as db_navigation}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BrThqi62.js';
+import { r as registerInstance, c as createEvent, h } from './index-Crtu1dn6.js';
 import { g as getBooleanAsString, c as cls } from './index-C4x0SOcx.js';
 
 const DBAccordionItem = class {
@@ -40,12 +40,16 @@ const DBAccordionItem = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -84,9 +88,9 @@ const DBAccordionItem = class {
         this.watch1Fn();
     }
     render() {
-        return (h("li", { key: 'c2a0b702c0e173c96208dca96194f3f36ce5e417', class: cls("db-accordion-item", this.className), id: this.id }, h("details", { key: '7d396568c8cc585f5f05c24857168afbc3d639f7', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
+        return (h("li", { key: '3d451c7de0d3bbc3638c70a2955c450ff014ac9c', class: cls("db-accordion-item", this.className), id: this.id }, h("details", { key: '15e159f6dc3f0e08dce955d088b6cce4b3899125', "aria-disabled": getBooleanAsString(this.disabled), ref: (el) => {
                 this._ref = el;
-            }, name: this._name, open: this._open }, h("summary", { key: 'b4ef438974813de3761dc6f3a59add84bfe63b4c', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: '9087f0e04a68ec016e80b793f442ab02fd4316a9' }, this.text ? this.text : h("slot", null)))));
+            }, name: this._name, open: this._open }, h("summary", { key: 'd8338436859a61a032b5ec779c249e4af58689eb', onClick: (event) => this.handleToggle(event) }, this.headlinePlain ? this.headlinePlain : null, !this.headlinePlain ? h("slot", { name: "headline" }) : null), h("div", { key: 'de1fbd85cf4ccc2e3ee0aa87d0232292f25376cc' }, this.text ? this.text : h("slot", null)))));
     }
     static get watchers() { return {
         "_ref": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BrThqi62.js';
+import { r as registerInstance, h } from './index-Crtu1dn6.js';
 import { u as uuid, c as cls } from './index-C4x0SOcx.js';
 
 const DBAccordion = class {
@@ -31,12 +31,16 @@ const DBAccordion = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -124,7 +128,7 @@ const DBAccordion = class {
     }
     render() {
         var _a;
-        return (h("ul", { key: '8b685b2a23ec00359a75ae143121c023d86a5eb5', class: cls("db-accordion", this.className), ref: (el) => {
+        return (h("ul", { key: '7a53323d44434d5996ec63b36c1f3c0f5791c0e1', class: cls("db-accordion", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-variant": this.variant }, !this.items ? h("slot", null) : null, this.items
             ? (_a = this.convertItems()) === null || _a === void 0 ? void 0 : _a.map((item, index) => (h("db-accordion-item", { key: `accordion-item-${index}`, headlinePlain: item.headlinePlain, disabled: item.disabled, text: item.text })))

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BrThqi62.js';
+import { r as registerInstance, h } from './index-Crtu1dn6.js';
 import { a as DEFAULT_LABEL } from './constants-BdL-nI5y.js';
 import { c as cls } from './index-C4x0SOcx.js';
 
@@ -18,12 +18,16 @@ const DBBadge = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -64,7 +68,7 @@ const DBBadge = class {
     }
     render() {
         var _a, _b;
-        return (h("span", { key: '1415e44da7031e4b0f94a1909f0b2a86ee42f771', class: cls("db-badge", this.className), ref: (el) => {
+        return (h("span", { key: 'a7f9f4fadf050ee85d7fd4cd0a0d4059b62f4feb', class: cls("db-badge", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, "data-semantic": this.semantic, "data-size": this.size, "data-emphasis": this.emphasis, "data-placement": this.placement, "data-label": ((_a = this.placement) === null || _a === void 0 ? void 0 : _a.startsWith("corner")) && ((_b = this.label) !== null && _b !== void 0 ? _b : DEFAULT_LABEL) }, this.text ? this.text : h("slot", null)));
     }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BrThqi62.js';
+import { r as registerInstance, h } from './index-Crtu1dn6.js';
 import { q as DEFAULT_ICON } from './constants-BdL-nI5y.js';
 import { g as getBooleanAsString, c as cls } from './index-C4x0SOcx.js';
 
@@ -17,12 +17,16 @@ const DBBrand = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -43,7 +47,7 @@ const DBBrand = class {
     }
     render() {
         var _a;
-        return (h("div", { key: '9014cc8dfb318b456ae6115abe7217a1d1cca73b', class: cls("db-brand", this.className), ref: (el) => {
+        return (h("div", { key: '0d5da13b94918698efe2d8bc1adbbe293403ee3b', 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: this.id }, this.text ? this.text : h("slot", null)));
     }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BrThqi62.js';
+import { r as registerInstance, c as createEvent, h } from './index-Crtu1dn6.js';
 import { g as getBooleanAsString, e as getBoolean, c as cls } from './index-C4x0SOcx.js';
 
 const DBButton = class {
@@ -26,12 +26,16 @@ const DBButton = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -52,7 +56,7 @@ const DBButton = class {
     }
     render() {
         var _a, _b;
-        return (h("button", { key: '8b0105e19d08c13e28e3ad8053d17d33d6699272', class: cls("db-button", this.className), ref: (el) => {
+        return (h("button", { key: '952146baca92fb27e48b5369b9aed2ca5ef0e057', class: cls("db-button", this.className), ref: (el) => {
                 this._ref = el;
             }, id: this.id, type: this.getButtonType(), disabled: getBoolean(this.disabled, "disabled"), "data-icon": (_a = this.iconLeading) !== null && _a !== void 0 ? _a : this.icon, "data-show-icon": getBooleanAsString((_b = this.showIconLeading) !== null && _b !== void 0 ? _b : 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), name: this.name, form: this.form, value: this.value }, this.text ? this.text : h("slot", null)));
     }

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BrThqi62.js';
+import { r as registerInstance, c as createEvent, h } from './index-Crtu1dn6.js';
 import { c as cls } from './index-C4x0SOcx.js';
 
 const DBCard = class {
@@ -22,12 +22,16 @@ const DBCard = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -47,9 +51,9 @@ const DBCard = class {
         this.enableAttributePassing(this._ref, "db-card");
     }
     render() {
-        return (h("div", { key: '823ca29890a1a4f29f4ff4f7bb1829e77314546b', class: cls("db-card", this.className), ref: (el) => {
+        return (h("div", { key: 'bd0f8bb8e254da7ac028b05ca73329189111c4a1', class: cls("db-card", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '532b03614fa83513efc8f97b6a9a7faceff62039' })));
+            }, id: this.id, "data-behavior": this.behavior, "data-elevation-level": this.elevationLevel, "data-spacing": this.spacing, onClick: (event) => this.handleClick(event) }, h("slot", { key: '1ccf3a3ec5e169032692bd47443e36ae11592ab4' })));
     }
 };
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BrThqi62.js';
+import { r as registerInstance, c as createEvent, h } from './index-Crtu1dn6.js';
 import { l as DEFAULT_INVALID_MESSAGE, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, e as getBoolean, u as uuid, l as getHideProp, c as cls } from './index-C4x0SOcx.js';
 import { a as addCheckedResetEventListener } from './form-components-BLsiOrPI.js';
@@ -80,12 +80,16 @@ const DBCheckbox = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -191,9 +195,9 @@ const DBCheckbox = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'a7cda04be04a1c763f8a7aa6918a212ffe8e0003', 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: 'a3195afb100309cb33b8471025b868db5bfdc7c5', htmlFor: this._id }, h("input", { key: '937c3f7cd98f519fd8034c644491f55caafb2411', type: "checkbox", "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, ref: (el) => {
+        return (h("div", { key: '14207f00c5b68441e94201de7569324756b657d7', 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: '577bdb32a38254f72a969d6da16fb220c620e156', htmlFor: this._id }, h("input", { key: 'ecbed0f4b8347617f2cc6d017b09a56d495b922d', 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 : h("slot", null)), 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: 'ae673ae94efc3d0abd19f8f067befebea3b3139b', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'e32b0d1e2647e03068b5ee09f3183b25fc82b7e7', "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 : h("slot", null)), 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: 'eae86bcaa2fe6e0fe39249fa5f9a7ae13e172f63', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '420c4244393b3ee266c374db1662dacfa43a0bce', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "_ref": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, c as createEvent } from './index-BrThqi62.js';
+import { r as registerInstance, h, c as createEvent } from './index-Crtu1dn6.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-C4x0SOcx.js';
 import { l as DEFAULT_INVALID_MESSAGE, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, j as DEFAULT_DATALIST_ID_SUFFIX, f as DEFAULT_MESSAGE_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-BLsiOrPI.js';
@@ -19,12 +19,16 @@ const DBCustomSelectDropdown = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -44,9 +48,9 @@ const DBCustomSelectDropdown = class {
         this.enableAttributePassing(this._ref, "db-custom-select-dropdown");
     }
     render() {
-        return (h("article", { key: '98087cc1db985bbb2e2578cb9e2c78bc3a0c3b23', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (h("article", { key: 'ac22786c8688e2f979e626155cb8dea54a5380b7', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-width": this.width }, h("slot", { key: '25bcaa79bdf8168feffce0a59c0adbc656023e64' })));
+            }, id: this.id, "data-width": this.width }, h("slot", { key: '2257275bfc7a9f75e944d61e8afc7493770478b5' })));
     }
 };
 
@@ -65,12 +69,16 @@ const DBCustomSelectList = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -90,9 +98,9 @@ const DBCustomSelectList = class {
         this.enableAttributePassing(this._ref, "db-custom-select-list");
     }
     render() {
-        return (h("div", { key: 'f47e219aac45d07e958a94969205260af981bcf1', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
+        return (h("div", { key: '5f26917a02c72091c5d2c0a21a04b2f45b983b35', class: cls("db-custom-select-list", this.className), role: this.multiple ? "group" : "radiogroup", "aria-label": this.label, ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("ul", { key: 'adca0d159ec4cd5d2dc46f11fe41006276dba94f' }, h("slot", { key: 'abb6edfb683a3e4a42512b2185854099c66f1f3c' }))));
+            }, id: this.id }, h("ul", { key: '5eaa90fa614daa186d2b10064066e2cc030da8eb' }, h("slot", { key: '15289fd4ac602d6f182fb112f66e716e56f79101' }))));
     }
 };
 
@@ -125,12 +133,16 @@ const DBCustomSelectListItem = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -157,7 +169,7 @@ const DBCustomSelectListItem = class {
         this.watch0Fn();
     }
     render() {
-        return (h("li", { key: '1155e389f33c440e04b5e7ca71732d108925e2cd', class: cls("db-custom-select-list-item", this.className, {
+        return (h("li", { key: 'fd25b48f61d95cc1c81526edf9413aef628f7472', 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) => {
@@ -268,12 +280,16 @@ const DBInput = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -369,7 +385,7 @@ const DBInput = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h;
-        return (h("div", { key: 'b6b5870b00e7a3ef0155004291fc9c646863faa9', 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: 'ac47e1bd7206de27075a86e3b5bf59647cffa8de', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: '40170ba9d207c96b4e86232f367a70a3301eb914', "aria-invalid": this.validation === "invalid", "data-custom-validity": this.validation, "data-field-sizing": this.fieldSizing, ref: (el) => {
+        return (h("div", { key: '394d66670226d01b6f790d13bdbc8eb00fb376ca', 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: '981344e97a91cb8c369587870e532af85fcb29c3', htmlFor: this._id }, (_c = this.label) !== null && _c !== void 0 ? _c : DEFAULT_LABEL), h("input", { key: 'e7536b30d16211cc3842e7dd6e74bffe5749685f', "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: (_e = this.value) !== null && _e !== void 0 ? _e : this._value, 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": (_f = this.ariaDescribedBy) !== null && _f !== void 0 ? _f : this._descByIds, role: [
@@ -381,7 +397,7 @@ const DBInput = class {
                 "color",
             ].includes((_g = this.type) !== null && _g !== void 0 ? _g : "") && isIOSSafari()
                 ? "textbox"
-                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'dd4cf602903406782a97e88ad8ccb8aacb903421' }), 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: '081dc92e27a0b81733d3200f97686fbe5fa15f76', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: '43be19988deae0484f47eed9b19e0556238b558d', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+                : undefined }), this.dataList ? (h("datalist", { id: this._dataListId }, (_h = this.getDataList()) === null || _h === void 0 ? void 0 : _h.map((option) => (h("option", { key: this._dataListId + "-option-" + option.value, value: option.value }, option.label))))) : null, h("slot", { key: 'f5e0e8f70ab5b9ad772f38fdc8d4124e0a77faeb' }), 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: 'ffb47610dff1d37759eda1f9a5022bbabbe2a7a4', semantic: "critical", id: this._invalidMessageId, size: this.invalidMessageSize || "small" }, this._invalidMessage), h("span", { key: '102226d02f55e79a6e3af37899544545da43a98b', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "_ref": [{
@@ -432,12 +448,16 @@ const DBTag = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -458,9 +478,9 @@ const DBTag = class {
     }
     render() {
         var _a;
-        return (h("div", { key: 'db86fabfde3f9d1e41a863f58db34eb88d067440', class: cls("db-tag", this.className), ref: (el) => {
+        return (h("div", { key: 'c0f6907ce1246c8047c5af115a093ecaa4032a55', class: cls("db-tag", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: '1bef11e30ca670fa5bf1d438cd12c43e233cded4', name: "content" }), h("slot", { key: '3f94141f60688d0730478711748fa9dbb194f810' }), this.text ? this.text : null, 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: this.id, "data-semantic": this.semantic, "data-emphasis": this.emphasis, "data-icon": this.icon, "data-show-check-state": getBooleanAsString((_a = this.showCheckState) !== null && _a !== void 0 ? _a : true), "data-show-icon": getBooleanAsString(this.showIcon), "data-no-text": getBooleanAsString(this.noText), "data-overflow": getBooleanAsString(this.overflow) }, h("slot", { key: 'c5e244aebde8e2fa54bcd61e66d69559a607a952', name: "content" }), h("slot", { key: '7356f14f2c11b4180f1f59ef8bd5a4e0dffb9d9c' }), this.text ? this.text : null, 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));
     }
 };
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-BrThqi62.js';
+import { r as registerInstance, h } from './index-Crtu1dn6.js';
 import { c as cls } from './index-C4x0SOcx.js';
 
 const DBCustomSelectFormField = class {
@@ -16,12 +16,16 @@ const DBCustomSelectFormField = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -41,9 +45,9 @@ const DBCustomSelectFormField = class {
         this.enableAttributePassing(this._ref, "db-custom-select-form-field");
     }
     render() {
-        return (h("summary", { key: '22a05256e65e56208335b9a5c840e75988a57182', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: '4ade22e5e7d664747ba44a25cea8778ee76de2c0', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '3c6c62df9bf0d2a73e37a9ad69d3a46daa672984' })));
+            }, id: this.id }, h("slot", { key: '457f965d451fcd6e03199b4273a2e0ebb6b85bb1' })));
     }
 };
 

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

@@ -1,9 +1,9 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-BrThqi62.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment } from './index-Crtu1dn6.js';
 import { l as DEFAULT_INVALID_MESSAGE, a as DEFAULT_LABEL, m as DEFAULT_REMOVE, d as DEFAULT_LABEL_ID_SUFFIX, e as DEFAULT_SELECT_ID_SUFFIX, g as DEFAULT_VALID_MESSAGE_ID_SUFFIX, h as DEFAULT_INVALID_MESSAGE_ID_SUFFIX, i as DEFAULT_PLACEHOLDER_ID_SUFFIX, o as DEFAULT_SELECTED, f as DEFAULT_MESSAGE_ID_SUFFIX, k as DEFAULT_VALID_MESSAGE, c as DEFAULT_MESSAGE, s as DEFAULT_CLOSE_BUTTON } from './constants-BdL-nI5y.js';
 import { h as hasVoiceOver, d as delay, s as stringPropVisible, m as getSearchInput, u as uuid, g as getBooleanAsString, e as getBoolean, l as getHideProp, c as cls } from './index-C4x0SOcx.js';
 import { D as DocumentClickListener } from './document-click-listener-CmYoXpGE.js';
 import { D as DocumentScrollListener } from './document-scroll-listener-65bHuFAN.js';
-import { a as handleFixedDropdown } from './floating-components-G-TursYV.js';
+import { a as handleFixedDropdown } from './floating-components-DfYL98sI.js';
 import { b as addResetEventListener } from './form-components-BLsiOrPI.js';
 
 const DBCustomSelect = class {
@@ -477,12 +477,16 @@ const DBCustomSelect = class {
             const attributes = parent.attributes;
             for (let i = 0; i < attributes.length; i++) {
                 const attr = attributes.item(i);
-                if (attr &&
+                if (attr && attr.name !== 'data-density' &&
                     (attr.name.startsWith("data-") || attr.name.startsWith("aria-"))) {
                     element.setAttribute(attr.name, attr.value);
                     parent.removeAttribute(attr.name);
                 }
-                if (attr && attr.name === "class") {
+                else if (attr && attr.name !== 'data-density' && attr.name !== "class" && attr.name === "style") {
+                    element.setAttribute(attr.name, attr.value);
+                    parent.removeAttribute(attr.name);
+                }
+                else if (attr && attr.name === "class") {
                     const isWebComponent = attr.value.includes("hydrated");
                     const value = attr.value.replace("hydrated", "").trim();
                     const currentClass = element.getAttribute("class");
@@ -771,19 +775,19 @@ const DBCustomSelect = class {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: '5ab3c80f3af53b7795e709feaea160e4aa26f281', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: 'bb7f2bd039a1d7f97bca1408e4c462c029963128', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: '281d6b75a9ae62b6e2f59c04876603988366952d', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '26029a01c106666155c40cac98a7f67739145491', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon) }, h("label", { key: 'cf9b29fb5c955bd22928803a491d7a76463c1c42', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'ab1c6f7adafe07b6d91cb12abb058e41faa27c82', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
-            }, form: this.form, name: this.name, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
+            }, form: this.form, name: this.name, "data-custom-validity": this._validity, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
             ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), h("details", { key: '60f50d851ebf3b180094bdbd1c9acb3c6e1069af', ref: (el) => {
+            : null)), h("details", { key: 'ba829c0fb72fe74896a927f06cb9f8005621524b', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '369ba87529acc1e3b2d12869174eff0a824c0176' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: '90e00cda7265025b8299ff92bfac46f2f242c899' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option, index) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -793,7 +797,7 @@ const DBCustomSelect = class {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: 'b4a9cebfe1db06422f428bac4d04d581bcadbb95', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'a407a98afeecf7634770f34e2f427a09d657419a', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '4465c3745c21e5333c8498927416fd0f244673dd', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '5cc4a48735e41b769c36e059d613f8c83b641ba1', class: "db-custom-select-placeholder", "aria-hidden": getBooleanAsString(true), id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'ac47ebdaff258f7e19f2dbf447054369a919633c', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'c568834fa90ab614cad1dcdc4de89daf25df1ffb', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get watchers() { return {
         "detailsRef": [{