@db-ux/ngx-core-components 2.0.8 → 2.0.10-popover-d7e8b9a

package/fesm2022/db-ux-ngx-core-components.mjs

@@ -42,78 +42,6 @@ const cls = (...args) => {
     }
     return result.trim();
 };
-const visibleInVX = (el) => {
-    const { left, right } = el.getBoundingClientRect();
-    const { innerWidth } = window;
-    return left >= 0 && right <= innerWidth;
-};
-const visibleInVY = (el) => {
-    const { top, bottom } = el.getBoundingClientRect();
-    const { innerHeight } = window;
-    return top >= 0 && bottom <= innerHeight;
-};
-const isInView = (el) => {
-    const { top, bottom, left, right } = el.getBoundingClientRect();
-    const { innerHeight, innerWidth } = window;
-    let outTop = top < 0;
-    let outBottom = bottom > innerHeight;
-    let outLeft = left < 0;
-    let outRight = right > innerWidth;
-    // We need to check if it was already outside
-    const outsideY = el.hasAttribute('data-outside-vy');
-    const outsideX = el.hasAttribute('data-outside-vx');
-    const parentRect = el?.parentElement?.getBoundingClientRect();
-    if (parentRect) {
-        if (outsideY) {
-            const position = el.getAttribute('data-outside-vy');
-            if (position === 'top') {
-                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
-            }
-            else {
-                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
-            }
-        }
-        if (outsideX) {
-            const position = el.getAttribute('data-outside-vx');
-            if (position === 'left') {
-                outLeft = parentRect.left - (right - parentRect.right) < 0;
-            }
-            else {
-                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
-            }
-        }
-    }
-    return {
-        outTop,
-        outBottom,
-        outLeft,
-        outRight
-    };
-};
-const handleDataOutside = (el) => {
-    const { outTop, outBottom, outLeft, outRight } = isInView(el);
-    let dataOutsidePair = {};
-    if (outTop || outBottom) {
-        dataOutsidePair = {
-            vy: outTop ? 'top' : 'bottom'
-        };
-        el.setAttribute('data-outside-vy', dataOutsidePair.vy);
-    }
-    else {
-        el.removeAttribute('data-outside-vy');
-    }
-    if (outLeft || outRight) {
-        dataOutsidePair = {
-            ...dataOutsidePair,
-            vx: outRight ? 'right' : 'left'
-        };
-        el.setAttribute('data-outside-vx', dataOutsidePair.vx);
-    }
-    else {
-        el.removeAttribute('data-outside-vx');
-    }
-    return dataOutsidePair;
-};
 const isArrayOfStrings = (value) => Array.isArray(value) && value.every(item => typeof item === 'string');
 const appleOs = ['Mac', 'iPhone', 'iPad', 'iPod'];
 const hasVoiceOver = () => typeof window !== 'undefined' && appleOs.some(os => window.navigator.userAgent.includes(os));
@@ -179,8 +107,8 @@ const getSearchInput = (element) => element.querySelector(`input[type="search"]`
 const defaultProps$z = {};
 class DBButton {
     handleClick(event) {
-        event.stopPropagation();
         if (this.click) {
+            event.stopPropagation();
             this.click.emit(event);
         }
     }
@@ -247,8 +175,8 @@ class DBButton {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-button");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBButton, isStandalone: true, selector: "db-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, describedbyid: { classPropertyName: "describedbyid", publicName: "describedbyid", isSignal: true, isRequired: false, transformFunction: null }, ariaexpanded: { classPropertyName: "ariaexpanded", publicName: "ariaexpanded", isSignal: true, isRequired: false, transformFunction: null }, ariapressed: { classPropertyName: "ariapressed", publicName: "ariapressed", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBButton, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBButton, isStandalone: true, selector: "db-button", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, describedbyid: { classPropertyName: "describedbyid", publicName: "describedbyid", isSignal: true, isRequired: false, transformFunction: null }, ariaexpanded: { classPropertyName: "ariaexpanded", publicName: "ariaexpanded", isSignal: true, isRequired: false, transformFunction: null }, ariapressed: { classPropertyName: "ariapressed", publicName: "ariapressed", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       #_ref
       [attr.id]="id()"
@@ -277,7 +205,7 @@ class DBButton {
     </button>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBButton, decorators: [{
             type: Component,
             args: [{ selector: "db-button", standalone: true, imports: [CommonModule], template: `
     <button
@@ -477,8 +405,8 @@ class DBNotification {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-notification");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBNotification, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBNotification, isStandalone: true, selector: "db-notification", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, ariaLive: { classPropertyName: "ariaLive", publicName: "ariaLive", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, linkVariant: { classPropertyName: "linkVariant", publicName: "linkVariant", isSignal: true, isRequired: false, transformFunction: null }, headline: { classPropertyName: "headline", publicName: "headline", isSignal: true, isRequired: false, transformFunction: null }, showHeadline: { classPropertyName: "showHeadline", publicName: "showHeadline", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, timestamp: { classPropertyName: "timestamp", publicName: "timestamp", isSignal: true, isRequired: false, transformFunction: null }, showTimestamp: { classPropertyName: "showTimestamp", publicName: "showTimestamp", isSignal: true, isRequired: false, transformFunction: null }, closeable: { classPropertyName: "closeable", publicName: "closeable", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <article
       #_ref
       [attr.id]="id()"
@@ -518,7 +446,7 @@ class DBNotification {
     </article>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBNotification, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBNotification, decorators: [{
             type: Component,
             args: [{ selector: "db-notification", standalone: true, imports: [CommonModule, DBButton], template: `
     <article
@@ -636,8 +564,8 @@ class DBBadge {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-badge");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBBadge, isStandalone: true, selector: "db-badge", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <span
       #_ref
       [attr.id]="id()"
@@ -654,7 +582,7 @@ class DBBadge {
     </span>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBBadge, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBBadge, decorators: [{
             type: Component,
             args: [{ selector: "db-badge", standalone: true, imports: [CommonModule], template: `
     <span
@@ -724,8 +652,8 @@ class DBBrand {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-brand");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBBrand, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBBrand, isStandalone: true, selector: "db-brand", inputs: { hideLogo: { classPropertyName: "hideLogo", publicName: "hideLogo", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.data-icon]="hideLogo() ? 'none' : icon() ?? DEFAULT_ICON"
@@ -739,7 +667,7 @@ class DBBrand {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBBrand, decorators: [{
             type: Component,
             args: [{ selector: "db-brand", standalone: true, imports: [CommonModule], template: `
     <div
@@ -759,8 +687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 const defaultProps$v = {};
 class DBCard {
     handleClick(event) {
-        event.stopPropagation();
         if (this.click) {
+            event.stopPropagation();
             this.click.emit(event);
         }
     }
@@ -810,8 +738,8 @@ class DBCard {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-card");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBCard, isStandalone: true, selector: "db-card", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, elevationLevel: { classPropertyName: "elevationLevel", publicName: "elevationLevel", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.id]="id()"
@@ -827,7 +755,7 @@ class DBCard {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCard, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCard, decorators: [{
             type: Component,
             args: [{ selector: "db-card", standalone: true, imports: [CommonModule], template: `
     <div
@@ -907,8 +835,8 @@ class DBInfotext {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-infotext");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBInfotext, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBInfotext, isStandalone: true, selector: "db-infotext", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <span
       #_ref
       [attr.id]="id()"
@@ -924,7 +852,7 @@ class DBInfotext {
     </span>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBInfotext, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBInfotext, decorators: [{
             type: Component,
             args: [{ selector: "db-infotext", standalone: true, imports: [CommonModule], template: `
     <span
@@ -1019,6 +947,7 @@ class DBCheckbox {
         this.name = input();
         this.disabled = model();
         this.value = input();
+        this.ariaDescribedBy = input();
         this.label = input();
         this.messageIcon = input();
         this.change = output();
@@ -1153,8 +1082,8 @@ class DBCheckbox {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-checkbox");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCheckbox, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBCheckbox, isStandalone: true, selector: "db-checkbox", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCheckbox,
                 multi: true
@@ -1179,7 +1108,7 @@ class DBCheckbox {
           (change)="handleChange($event)"
           (blur)="handleBlur($event)"
           (focus)="handleFocus($event)"
-          [attr.aria-describedby]="_descByIds()"
+          [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
         />
         @if(label()){ {{label()}} }@else{
         <ng-content></ng-content>
@@ -1203,7 +1132,7 @@ class DBCheckbox {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCheckbox, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCheckbox, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -1230,7 +1159,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           (change)="handleChange($event)"
           (blur)="handleBlur($event)"
           (focus)="handleFocus($event)"
-          [attr.aria-describedby]="_descByIds()"
+          [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
         />
         @if(label()){ {{label()}} }@else{
         <ng-content></ng-content>
@@ -1303,8 +1232,8 @@ class DBDivider {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-divider");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBDivider, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBDivider, isStandalone: true, selector: "db-divider", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, margin: { classPropertyName: "margin", publicName: "margin", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.id]="id()"
@@ -1316,7 +1245,7 @@ class DBDivider {
     ></div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBDivider, decorators: [{
             type: Component,
             args: [{ selector: "db-divider", standalone: true, imports: [CommonModule], template: `
     <div
@@ -1440,8 +1369,8 @@ class DBDrawer {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-drawer");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBDrawer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBDrawer, isStandalone: true, selector: "db-drawer", inputs: { open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, closeButtonId: { classPropertyName: "closeButtonId", publicName: "closeButtonId", isSignal: true, isRequired: false, transformFunction: null }, closeButtonText: { classPropertyName: "closeButtonText", publicName: "closeButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { close: "close" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }, { propertyName: "dialogContainerRef", first: true, predicate: ["dialogContainerRef"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <dialog
       class="db-drawer"
       [attr.id]="id()"
@@ -1479,7 +1408,7 @@ class DBDrawer {
     </dialog>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBDrawer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBDrawer, decorators: [{
             type: Component,
             args: [{ selector: "db-drawer", standalone: true, imports: [CommonModule, DBButton], template: `
     <dialog
@@ -1520,6 +1449,298 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
   `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [] });
 
+// TODO: We should reevaluate this as soon as CSS Anchor Positioning is supported in all relevant browsers
+const isInView = (el) => {
+    const { top, bottom, left, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let outTop = top < 0;
+    let outBottom = bottom > innerHeight;
+    let outLeft = left < 0;
+    let outRight = right > innerWidth;
+    // We need to check if it was already outside
+    const outsideY = el.dataset['outsideVy'];
+    const outsideX = el.dataset['outsideVx'];
+    const parentRect = el?.parentElement?.getBoundingClientRect();
+    if (parentRect) {
+        if (outsideY) {
+            const position = el.dataset['outsideVy'];
+            if (position === 'top') {
+                outTop = parentRect.top - (bottom - parentRect.bottom) < 0;
+            }
+            else {
+                outBottom = parentRect.bottom + (parentRect.top - top) > innerHeight;
+            }
+        }
+        if (outsideX) {
+            const position = el.dataset['outsideVx'];
+            if (position === 'left') {
+                outLeft = parentRect.left - (right - parentRect.right) < 0;
+            }
+            else {
+                outRight = parentRect.right + (parentRect.left - left) > innerWidth;
+            }
+        }
+    }
+    return {
+        outTop,
+        outBottom,
+        outLeft,
+        outRight
+    };
+};
+const handleDataOutside = (el) => {
+    const { outTop, outBottom, outLeft, outRight } = isInView(el);
+    let dataOutsidePair = {};
+    if (outTop || outBottom) {
+        dataOutsidePair = {
+            vy: outTop ? 'top' : 'bottom'
+        };
+        el.dataset['outsideVy'] = dataOutsidePair.vy;
+    }
+    else {
+        delete el.dataset['outsideVy'];
+    }
+    if (outLeft || outRight) {
+        dataOutsidePair = {
+            ...dataOutsidePair,
+            vx: outRight ? 'right' : 'left'
+        };
+        el.dataset['outsideVx'] = dataOutsidePair.vx;
+    }
+    else {
+        delete el.dataset['outsideVx'];
+    }
+    return dataOutsidePair;
+};
+const handleFixedDropdown = (element, parent, placement) => {
+    // We skip this if we are in mobile it's already fixed
+    if (getComputedStyle(element).zIndex === '9999')
+        return;
+    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
+    const fullWidth = element.dataset['width'] === 'full';
+    if (fullWidth) {
+        element.style.inlineSize = `${width}px`;
+    }
+    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+        element.style.insetInlineStart = `${left}px`;
+    }
+    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${right - childWidth}px`;
+    }
+    if (correctedPlacement?.startsWith('top')) {
+        element.style.insetBlockStart = `${top - childHeight}px`;
+    }
+    else if (correctedPlacement?.startsWith('bottom')) {
+        element.style.insetBlockStart = `${bottom}px`;
+    }
+    element.style.position = 'fixed';
+};
+const getFloatingProps = (element, parent, placement) => {
+    const childRect = element.getBoundingClientRect();
+    const { top, height, bottom, right, left, width } = parent.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    let childHeight = childRect.height;
+    let childWidth = childRect.width;
+    if (placement === 'bottom' || placement === 'top') {
+        childWidth = childWidth / 2;
+    }
+    if (placement === 'left' || placement === 'right') {
+        childHeight = childHeight / 2;
+    }
+    const outsideBottom = bottom + childHeight > innerHeight;
+    const outsideTop = top - childHeight < 0;
+    const outsideLeft = left - childWidth < 0;
+    const outsideRight = right + childWidth > innerWidth;
+    let correctedPlacement = placement;
+    if (placement.startsWith('bottom')) {
+        if (outsideBottom) {
+            correctedPlacement = placement?.replace('bottom', 'top');
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'top';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'top-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'top-end';
+            }
+        }
+        else {
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'bottom';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'bottom-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'bottom-end';
+            }
+        }
+    }
+    else if (placement.startsWith('top')) {
+        if (outsideTop) {
+            correctedPlacement = placement?.replace('top', 'bottom');
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'bottom';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'bottom-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'bottom-end';
+            }
+        }
+        else {
+            if (outsideLeft && outsideRight) {
+                correctedPlacement = 'top';
+            }
+            else if (outsideLeft) {
+                correctedPlacement = 'top-start';
+            }
+            else if (outsideRight) {
+                correctedPlacement = 'top-end';
+            }
+        }
+    }
+    else if (placement.startsWith('left')) {
+        if (outsideLeft) {
+            correctedPlacement = placement?.replace('left', 'right');
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'right';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'right-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'right-start';
+            }
+        }
+        else {
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'left';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'left-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'left-start';
+            }
+        }
+    }
+    else if (correctedPlacement.startsWith('right')) {
+        if (outsideRight) {
+            correctedPlacement = placement?.replace('right', 'left');
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'left';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'left-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'left-start';
+            }
+        }
+        else {
+            if (outsideBottom && outsideTop) {
+                correctedPlacement = 'right';
+            }
+            else if (outsideBottom) {
+                correctedPlacement = 'right-end';
+            }
+            else if (outsideTop) {
+                correctedPlacement = 'right-start';
+            }
+        }
+    }
+    return {
+        top,
+        bottom,
+        right,
+        height,
+        width,
+        left,
+        childHeight: childRect.height,
+        childWidth: childRect.width,
+        correctedPlacement,
+        innerWidth,
+        innerHeight
+    };
+};
+const handleFixedPopover = (element, parent, placement) => {
+    const distance = getComputedStyle(element).getPropertyValue('--db-popover-distance') ?? '0px';
+    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    // Tooltip arrow position
+    if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
+        const diff = width / 2 / childWidth * 100;
+        if (correctedPlacement.endsWith('start')) {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `${diff}%`);
+        }
+        else if (correctedPlacement.endsWith('end')) {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
+        }
+    }
+    if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
+        const diff = height / 2 / childHeight * 100;
+        if (correctedPlacement.endsWith('start')) {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `${diff}%`);
+        }
+        else if (correctedPlacement.endsWith('end')) {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
+        }
+    }
+    // Popover position
+    if (correctedPlacement === 'right' || correctedPlacement === 'left') {
+        // center horizontally
+        element.style.insetBlockStart = `${top + height / 2}px`;
+    }
+    else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
+        const end = top + childHeight;
+        element.style.insetBlockStart = `${top}px`;
+        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+    }
+    else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
+        const start = bottom - childHeight;
+        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockEnd = `${bottom}px`;
+    }
+    else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
+        // center vertically
+        element.style.insetInlineStart = `${left + width / 2}px`;
+    }
+    else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+        const end = left + childWidth;
+        element.style.insetInlineStart = `${left}px`;
+        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+    }
+    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
+        const start = left - childWidth;
+        element.style.insetInlineStart = `${right - childWidth}px`;
+        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+    }
+    if (correctedPlacement?.startsWith('right')) {
+        const end = right + childWidth;
+        element.style.insetInlineStart = `calc(${right}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+    }
+    else if (correctedPlacement?.startsWith('left')) {
+        const start = left - childWidth;
+        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
+    }
+    else if (correctedPlacement?.startsWith('top')) {
+        const start = top - childHeight;
+        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+    }
+    else if (correctedPlacement?.startsWith('bottom')) {
+        const end = bottom + childHeight;
+        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+    }
+    element.style.position = 'fixed';
+    element.setAttribute('data-corrected-placement', correctedPlacement);
+};
+
 const isEventTargetNavigationItem = (event) => {
     const { target } = event;
     return Boolean(!target?.classList?.contains('db-navigation-item-expand-button') && target?.parentElement?.classList.contains('db-navigation-item'));
@@ -1654,10 +1875,10 @@ var navigation = {
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class SecondaryActionDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SecondaryActionDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: SecondaryActionDirective, isStandalone: true, selector: "[dbSecondaryAction]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: SecondaryActionDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: SecondaryActionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbSecondaryAction]',
@@ -1667,10 +1888,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class MetaNavigationDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MetaNavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: MetaNavigationDirective, isStandalone: true, selector: "[dbMetaNavigation]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: MetaNavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: MetaNavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbMetaNavigation]',
@@ -1680,10 +1901,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class NavigationDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: NavigationDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: NavigationDirective, isStandalone: true, selector: "[dbNavigation]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NavigationDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: NavigationDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbNavigation]',
@@ -1782,8 +2003,8 @@ class DBHeader {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-header");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBHeader, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBHeader, isStandalone: true, selector: "db-header", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, forceMobile: { classPropertyName: "forceMobile", publicName: "forceMobile", isSignal: true, isRequired: false, transformFunction: null }, drawerOpen: { classPropertyName: "drawerOpen", publicName: "drawerOpen", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, burgerMenuLabel: { classPropertyName: "burgerMenuLabel", publicName: "burgerMenuLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, queries: [{ propertyName: "dbNavigation", first: true, predicate: NavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbMetaNavigation", first: true, predicate: MetaNavigationDirective, descendants: true, read: TemplateRef }, { propertyName: "dbSecondaryAction", first: true, predicate: SecondaryActionDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <header
       #_ref
       [class]="cls('db-header', className())"
@@ -1846,7 +2067,7 @@ class DBHeader {
     </header>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBDrawer, selector: "db-drawer", inputs: ["open", "backdrop", "variant", "id", "className", "spacing", "width", "direction", "rounded", "closeButtonId", "closeButtonText"], outputs: ["close"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBHeader, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBHeader, decorators: [{
             type: Component,
             args: [{ selector: "db-header", standalone: true, imports: [CommonModule, DBDrawer, DBButton], template: `
     <header
@@ -1969,8 +2190,8 @@ class DBIcon {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-icon");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBIcon, isStandalone: true, selector: "db-icon", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, weight: { classPropertyName: "weight", publicName: "weight", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <span
       aria-hidden="true"
       #_ref
@@ -1986,7 +2207,7 @@ class DBIcon {
     </span>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBIcon, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBIcon, decorators: [{
             type: Component,
             args: [{ selector: "db-icon", standalone: true, imports: [CommonModule], template: `
     <span
@@ -2247,8 +2468,8 @@ class DBInput {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-input");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBInput, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBInput, isStandalone: true, selector: "db-input", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, dataListId: { classPropertyName: "dataListId", publicName: "dataListId", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, pattern: { classPropertyName: "pattern", publicName: "pattern", isSignal: true, isRequired: false, transformFunction: null }, dataList: { classPropertyName: "dataList", publicName: "dataList", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, autofocus: { classPropertyName: "autofocus", publicName: "autofocus", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBInput,
                 multi: true
@@ -2318,7 +2539,7 @@ class DBInput {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBInput, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBInput, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2394,8 +2615,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 const defaultProps$n = {};
 class DBLink {
     handleClick(event) {
-        event.stopPropagation();
         if (this.click) {
+            event.stopPropagation();
             this.click.emit(event);
         }
     }
@@ -2458,8 +2679,8 @@ class DBLink {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-link");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBLink, isStandalone: true, selector: "db-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, hreflang: { classPropertyName: "hreflang", publicName: "hreflang", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <a
       #_ref
       [attr.id]="id()"
@@ -2486,7 +2707,7 @@ class DBLink {
     </a>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBLink, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBLink, decorators: [{
             type: Component,
             args: [{ selector: "db-link", standalone: true, imports: [CommonModule], template: `
     <a
@@ -2592,8 +2813,8 @@ class DBPage {
             document.documentElement.classList.remove("db-page-document");
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBPage, isStandalone: true, selector: "db-page", inputs: { fadeIn: { classPropertyName: "fadeIn", publicName: "fadeIn", isSignal: true, isRequired: false, transformFunction: null }, documentOverflow: { classPropertyName: "documentOverflow", publicName: "documentOverflow", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, mainClass: { classPropertyName: "mainClass", publicName: "mainClass", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.id]="id()"
@@ -2610,7 +2831,7 @@ class DBPage {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBPage, decorators: [{
             type: Component,
             args: [{ selector: "db-page", standalone: true, imports: [CommonModule], template: `
     <div
@@ -2665,6 +2886,7 @@ class DBRadio {
         this.name = input();
         this.disabled = model();
         this.describedbyid = input();
+        this.ariaDescribedBy = input();
         this.value = model();
         this.required = input();
         this.label = input();
@@ -2746,8 +2968,8 @@ class DBRadio {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-radio");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, describedbyid: { classPropertyName: "describedbyid", publicName: "describedbyid", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBRadio, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBRadio, isStandalone: true, selector: "db-radio", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, describedbyid: { classPropertyName: "describedbyid", publicName: "describedbyid", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", value: "valueChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBRadio,
                 multi: true
@@ -2767,7 +2989,7 @@ class DBRadio {
         [attr.name]="name()"
         [checked]="getBoolean(checked(), 'checked')"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-describedby]="describedbyid()"
+        [attr.aria-describedby]="describedbyid() ?? ariaDescribedBy()"
         [attr.value]="value()"
         [required]="getBoolean(required(), 'required')"
         (change)="handleChange($event)"
@@ -2780,7 +3002,7 @@ class DBRadio {
     </label>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBRadio, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBRadio, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2802,7 +3024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         [attr.name]="name()"
         [checked]="getBoolean(checked(), 'checked')"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-describedby]="describedbyid()"
+        [attr.aria-describedby]="describedbyid() ?? ariaDescribedBy()"
         [attr.value]="value()"
         [required]="getBoolean(required(), 'required')"
         (change)="handleChange($event)"
@@ -2866,8 +3088,8 @@ class DBSection {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-section");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBSection, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBSection, isStandalone: true, selector: "db-section", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section
       #_ref
       [attr.id]="_id()"
@@ -2879,7 +3101,7 @@ class DBSection {
     </section>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBSection, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBSection, decorators: [{
             type: Component,
             args: [{ selector: "db-section", standalone: true, imports: [CommonModule], template: `
     <section
@@ -2929,8 +3151,8 @@ class DBSelect {
         }
     }
     handleClick(event) {
-        event.stopPropagation();
         if (this.click) {
+            event.stopPropagation();
             this.click.emit(event);
         }
     }
@@ -2996,6 +3218,7 @@ class DBSelect {
         this.size = input();
         this.autocomplete = input();
         this.multiple = input();
+        this.ariaDescribedBy = input();
         this.options = input();
         this.placeholder = input();
         this.messageIcon = input();
@@ -3120,8 +3343,8 @@ class DBSelect {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-select");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBSelect, isStandalone: true, selector: "db-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", click: "click", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSelect,
                 multi: true
@@ -3151,7 +3374,7 @@ class DBSelect {
         (change)="handleChange($event)"
         (blur)="handleBlur($event)"
         (focus)="handleFocus($event)"
-        [attr.aria-describedby]="_descByIds()"
+        [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
       >
         <option [attr.hidden]="true"></option>
         @if(options()){ @for (option of options();track i;let i = $index) {
@@ -3202,7 +3425,7 @@ class DBSelect {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBSelect, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -3234,7 +3457,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         (change)="handleChange($event)"
         (blur)="handleBlur($event)"
         (focus)="handleFocus($event)"
-        [attr.aria-describedby]="_descByIds()"
+        [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
       >
         <option [attr.hidden]="true"></option>
         @if(options()){ @for (option of options();track i;let i = $index) {
@@ -3325,6 +3548,7 @@ class DBSwitch {
         this.value = input();
         this.disabled = model();
         this.describedbyid = input();
+        this.ariaDescribedBy = input();
         this.validation = input();
         this.name = input();
         this.required = input();
@@ -3402,8 +3626,8 @@ class DBSwitch {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-switch");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, describedbyid: { classPropertyName: "describedbyid", publicName: "describedbyid", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBSwitch, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBSwitch, isStandalone: true, selector: "db-switch", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, visualAid: { classPropertyName: "visualAid", publicName: "visualAid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, describedbyid: { classPropertyName: "describedbyid", publicName: "describedbyid", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBSwitch,
                 multi: true
@@ -3425,7 +3649,7 @@ class DBSwitch {
         [checked]="getBoolean(checked(), 'checked')"
         [attr.value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-describedby]="describedbyid()"
+        [attr.aria-describedby]="describedbyid() ?? ariaDescribedBy()"
         [attr.aria-invalid]="validation() === 'invalid'"
         [attr.data-custom-validity]="validation()"
         [attr.name]="name()"
@@ -3442,7 +3666,7 @@ class DBSwitch {
     </label>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBSwitch, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBSwitch, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -3466,7 +3690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         [checked]="getBoolean(checked(), 'checked')"
         [attr.value]="value()"
         [disabled]="getBoolean(disabled(), 'disabled')"
-        [attr.aria-describedby]="describedbyid()"
+        [attr.aria-describedby]="describedbyid() ?? ariaDescribedBy()"
         [attr.aria-invalid]="validation() === 'invalid'"
         [attr.data-custom-validity]="validation()"
         [attr.name]="name()"
@@ -3608,8 +3832,8 @@ class DBTabItem {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tab-item");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBTabItem, isStandalone: true, selector: "db-tab-item", inputs: { active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconAfter: { classPropertyName: "iconAfter", publicName: "iconAfter", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, controls: { classPropertyName: "controls", publicName: "controls", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", checked: "checkedChange", change: "change" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBTabItem,
                 multi: true
@@ -3641,7 +3865,7 @@ class DBTabItem {
     </li>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabItem, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -3771,8 +3995,8 @@ class DBTag {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tag");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeButton: { classPropertyName: "removeButton", publicName: "removeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTag, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBTag, isStandalone: true, selector: "db-tag", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, removeButton: { classPropertyName: "removeButton", publicName: "removeButton", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, semantic: { classPropertyName: "semantic", publicName: "semantic", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showCheckState: { classPropertyName: "showCheckState", publicName: "showCheckState", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, noText: { classPropertyName: "noText", publicName: "noText", isSignal: true, isRequired: false, transformFunction: null }, overflow: { classPropertyName: "overflow", publicName: "overflow", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { remove: "remove" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.id]="id()"
@@ -3804,7 +4028,7 @@ class DBTag {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTag, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTag, decorators: [{
             type: Component,
             args: [{ selector: "db-tag", standalone: true, imports: [CommonModule], template: `
     <div
@@ -3937,6 +4161,7 @@ class DBTextarea {
         this.wrap = input();
         this.spellCheck = input();
         this.autocomplete = input();
+        this.ariaDescribedBy = input();
         this.placeholder = input();
         this.rows = input();
         this.cols = input();
@@ -4049,8 +4274,8 @@ class DBTextarea {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-textarea");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTextarea, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBTextarea, isStandalone: true, selector: "db-textarea", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, resize: { classPropertyName: "resize", publicName: "resize", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readOnly: { classPropertyName: "readOnly", publicName: "readOnly", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, maxlength: { classPropertyName: "maxlength", publicName: "maxlength", isSignal: true, isRequired: false, transformFunction: null }, minlength: { classPropertyName: "minlength", publicName: "minlength", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, spellCheck: { classPropertyName: "spellCheck", publicName: "spellCheck", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, cols: { classPropertyName: "cols", publicName: "cols", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", disabled: "disabledChange", input: "input", change: "change", blur: "blur", focus: "focus" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBTextarea,
                 multi: true
@@ -4082,7 +4307,7 @@ class DBTextarea {
         (blur)="handleBlur($event)"
         (focus)="handleFocus($event)"
         [attr.value]="value() ?? _value()"
-        [attr.aria-describedby]="_descByIds()"
+        [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
         [attr.placeholder]="placeholder() ?? DEFAULT_PLACEHOLDER"
         [attr.rows]="getNumber(rows(), DEFAULT_ROWS)"
         [attr.cols]="getNumber(cols())"
@@ -4105,7 +4330,7 @@ class DBTextarea {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTextarea, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTextarea, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -4139,7 +4364,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         (blur)="handleBlur($event)"
         (focus)="handleFocus($event)"
         [attr.value]="value() ?? _value()"
-        [attr.aria-describedby]="_descByIds()"
+        [attr.aria-describedby]="ariaDescribedBy() ?? _descByIds()"
         [attr.placeholder]="placeholder() ?? DEFAULT_PLACEHOLDER"
         [attr.rows]="getNumber(rows(), DEFAULT_ROWS)"
         [attr.cols]="getNumber(cols())"
@@ -4165,10 +4390,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
 
 /* Angular cannot handle multiple slots with the same name, we need to use Directives for this. */
 class NavigationContentDirective {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.10", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: NavigationContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.12", type: NavigationContentDirective, isStandalone: true, selector: "[dbNavigationContent]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: NavigationContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: NavigationContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[dbNavigationContent]',
@@ -4187,8 +4412,8 @@ class DBNavigationItem {
         }
     }
     handleClick(event) {
-        event.stopPropagation();
         if (this.click) {
+            event.stopPropagation();
             this.click.emit(event);
         }
         if (this.hasAreaPopup()) {
@@ -4298,8 +4523,8 @@ class DBNavigationItem {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-navigation-item");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBNavigationItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBNavigationItem, isStandalone: true, selector: "db-navigation-item", inputs: { subNavigationExpanded: { classPropertyName: "subNavigationExpanded", publicName: "subNavigationExpanded", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, backButtonId: { classPropertyName: "backButtonId", publicName: "backButtonId", isSignal: true, isRequired: false, transformFunction: null }, backButtonText: { classPropertyName: "backButtonText", publicName: "backButtonText", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click" }, queries: [{ propertyName: "dbNavigationContent", first: true, predicate: NavigationContentDirective, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <li
       #_ref
       [attr.id]="id()"
@@ -4352,7 +4577,7 @@ class DBNavigationItem {
     </li>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBNavigationItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBNavigationItem, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation-item", standalone: true, imports: [CommonModule, DBButton], template: `
     <li
@@ -4513,8 +4738,8 @@ class DBAccordionItem {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-accordion-item");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBAccordionItem, isStandalone: true, selector: "db-accordion-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, defaultOpen: { classPropertyName: "defaultOpen", publicName: "defaultOpen", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, headlinePlain: { classPropertyName: "headlinePlain", publicName: "headlinePlain", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggle: "toggle" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <li [attr.id]="_id()" [class]="cls('db-accordion-item', className())">
       <details
         [attr.aria-disabled]="getBooleanAsString(disabled())"
@@ -4536,7 +4761,7 @@ class DBAccordionItem {
     </li>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBAccordionItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBAccordionItem, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion-item", standalone: true, imports: [CommonModule], template: `
     <li [attr.id]="_id()" [class]="cls('db-accordion-item', className())">
@@ -4709,8 +4934,8 @@ class DBAccordion {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-accordion");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBAccordion, isStandalone: true, selector: "db-accordion", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initOpenIndex: { classPropertyName: "initOpenIndex", publicName: "initOpenIndex", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <ul
       #_ref
       [attr.id]="_id()"
@@ -4730,7 +4955,7 @@ class DBAccordion {
     </ul>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBAccordionItem, selector: "db-accordion-item", inputs: ["id", "defaultOpen", "name", "className", "disabled", "headlinePlain", "text"], outputs: ["toggle"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBAccordion, decorators: [{
             type: Component,
             args: [{ selector: "db-accordion", standalone: true, imports: [CommonModule, DBAccordionItem], template: `
     <ul
@@ -4802,8 +5027,8 @@ class DBNavigation {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-navigation");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBNavigation, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBNavigation, isStandalone: true, selector: "db-navigation", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <nav
       #_ref
       [attr.id]="_id()"
@@ -4814,7 +5039,7 @@ class DBNavigation {
     </nav>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBNavigation, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBNavigation, decorators: [{
             type: Component,
             args: [{ selector: "db-navigation", standalone: true, imports: [CommonModule], template: `
     <nav
@@ -4828,25 +5053,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
   `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [] });
 
+class DocumentScrollListener {
+    static { this.callbacks = {}; }
+    static { this._instance = null; }
+    static runCallbacks(event) {
+        for (const callback of Object.values(DocumentScrollListener.callbacks)) {
+            if (typeof callback === 'function') {
+                callback(event);
+            }
+        }
+    }
+    constructor() {
+        this.ticking = false;
+        if (DocumentScrollListener._instance) {
+            return DocumentScrollListener._instance;
+        }
+        DocumentScrollListener._instance = this;
+        if (self.document) {
+            self.document.addEventListener('scroll', event => {
+                if (!this.ticking) {
+                    window.requestAnimationFrame(() => {
+                        DocumentScrollListener.runCallbacks(event);
+                        this.ticking = false;
+                    });
+                    this.ticking = true;
+                }
+            }, true);
+        }
+    }
+    addCallback(callback) {
+        const callbackID = uuid();
+        DocumentScrollListener.callbacks[callbackID] = callback;
+        return callbackID;
+    }
+    removeCallback(id) {
+        delete DocumentScrollListener.callbacks[id];
+    }
+}
+
 const defaultProps$a = {};
 class DBPopover {
+    handleEscape(event) {
+        if (!event || event.key === "Escape") {
+            // TODO: Recursive for any child
+            for (const child of Array.from(this._ref()?.nativeElement.children)) {
+                child.blur();
+            }
+        }
+    }
     handleAutoPlacement() {
-        this.isExpanded.set(true);
         if (!this._ref()?.nativeElement)
             return;
         const article = this._ref()?.nativeElement.querySelector("article");
-        if (!article)
-            return;
-        handleDataOutside(article);
+        if (article) {
+            // This is a workaround for angular
+            delay(() => {
+                handleFixedPopover(article, this._ref()?.nativeElement, this.placement() ?? "bottom");
+            }, 1);
+        }
+    }
+    handleDocumentScroll(event) {
+        if (event?.target?.contains &&
+            event?.target?.contains(this._ref()?.nativeElement)) {
+            this.handleAutoPlacement();
+        }
+    }
+    handleEnter() {
+        this.isExpanded.set(true);
+        this._documentScrollListenerCallbackId.set(new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event)));
+        this.handleAutoPlacement();
+        const child = this.getTrigger();
+        if (child) {
+            this._observer()?.observe(child);
+        }
     }
     handleLeave(event) {
-        const element = event.target;
-        const parent = element.parentNode;
+        const element = event?.target;
+        const parent = element?.parentNode;
         if (!parent ||
             (element.parentNode.querySelector(":focus") !== element &&
                 element.parentNode.querySelector(":focus-within") !== element &&
                 element.parentNode.querySelector(":hover") !== element)) {
             this.isExpanded.set(false);
+            if (this._documentScrollListenerCallbackId()) {
+                new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+            }
+            const child = this.getTrigger();
+            if (child) {
+                this._observer()?.unobserve(child);
+            }
         }
     }
     getTrigger() {
@@ -4870,6 +5165,7 @@ class DBPopover {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
+        this.placement = input();
         this.id = input();
         this.className = input();
         this.spacing = input();
@@ -4878,21 +5174,36 @@ class DBPopover {
         this.open = input();
         this.delay = input();
         this.width = input();
-        this.placement = input();
         this._ref = viewChild("_ref");
         this.initialized = signal(false);
         this.isExpanded = signal(false);
+        this._documentScrollListenerCallbackId = signal(undefined);
+        this._observer = signal(undefined);
         effect(() => {
             // --- Mitosis: Workaround to make sure the effect() is triggered ---
             this._ref();
             this.initialized();
             // ---
             if (this._ref()?.nativeElement && this.initialized()) {
+                this.initialized.set(false);
                 const child = this.getTrigger();
                 if (child) {
                     child.ariaHasPopup = "true";
                 }
-                this.initialized.set(false);
+                this.handleAutoPlacement();
+                this._ref()?.nativeElement.addEventListener("keydown", (event) => this.handleEscape(event));
+                ["mouseenter", "focusin"].forEach((event) => {
+                    this._ref()?.nativeElement.addEventListener(event, () => this.handleEnter());
+                });
+                ["mouseleave", "focusout"].forEach((event) => {
+                    this._ref()?.nativeElement.addEventListener(event, () => this.handleLeave());
+                });
+                this._observer.set(new IntersectionObserver((payload) => {
+                    const entry = payload.find(({ target }) => target === this.getTrigger());
+                    if (entry && !entry.isIntersecting) {
+                        this.handleEscape(false);
+                    }
+                }));
             }
         }, {
         // Enable writing to signals inside effects
@@ -4951,17 +5262,9 @@ class DBPopover {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-popover");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
-    <div
-      #_ref
-      [attr.id]="id()"
-      [class]="cls('db-popover', className())"
-      (focus)="handleAutoPlacement()"
-      (blur)="handleLeave($event)"
-      (mouseenter)="handleAutoPlacement()"
-      (mouseleave)="handleLeave($event)"
-    >
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, spacing: { classPropertyName: "spacing", publicName: "spacing", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div #_ref [attr.id]="id()" [class]="cls('db-popover', className())">
       <ng-content select="[trigger]"></ng-content>
       <article
         class="db-popover-content"
@@ -4978,18 +5281,10 @@ class DBPopover {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBPopover, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBPopover, decorators: [{
             type: Component,
             args: [{ selector: "db-popover", standalone: true, imports: [CommonModule], template: `
-    <div
-      #_ref
-      [attr.id]="id()"
-      [class]="cls('db-popover', className())"
-      (focus)="handleAutoPlacement()"
-      (blur)="handleLeave($event)"
-      (mouseenter)="handleAutoPlacement()"
-      (mouseleave)="handleLeave($event)"
-    >
+    <div #_ref [attr.id]="id()" [class]="cls('db-popover', className())">
       <ng-content select="[trigger]"></ng-content>
       <article
         class="db-popover-content"
@@ -5012,42 +5307,88 @@ class DBTooltip {
     handleClick(event) {
         event.stopPropagation();
     }
-    handleAutoPlacement() {
-        if (this._ref()?.nativeElement)
-            handleDataOutside(this._ref()?.nativeElement);
+    handleEscape(event) {
+        if ((!event || event.key === "Escape") &&
+            this._ref()?.nativeElement &&
+            getComputedStyle(this._ref()?.nativeElement).visibility === "visible") {
+            this.getParent().blur();
+        }
+    }
+    getParent() {
+        let parent = this._ref()?.nativeElement.parentElement;
+        if (parent && parent.localName.includes("tooltip")) {
+            // Angular workaround
+            parent = parent.parentElement;
+        }
+        return parent;
+    }
+    handleAutoPlacement(parent) {
+        if (!parent)
+            return;
+        if (this._ref()?.nativeElement) {
+            // This is a workaround for angular
+            delay(() => {
+                handleFixedPopover(this._ref()?.nativeElement, parent, this.placement() ?? "bottom");
+            }, 1);
+        }
+    }
+    handleDocumentScroll(event, parent) {
+        if (event?.target?.contains &&
+            event?.target?.contains(this._ref()?.nativeElement)) {
+            this.handleAutoPlacement(parent);
+        }
+    }
+    handleLeave() {
+        if (this._documentScrollListenerCallbackId()) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+        }
+        this._observer()?.unobserve(this.getParent());
+    }
+    handleEnter(parent) {
+        this._documentScrollListenerCallbackId.set(new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event, parent)));
+        this.handleAutoPlacement(parent);
+        this._observer()?.observe(this.getParent());
     }
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
         this.id = input();
+        this.placement = input();
         this.className = input();
         this.emphasis = input();
         this.animation = input();
         this.delay = input();
         this.width = input();
         this.showArrow = input();
-        this.placement = input();
         this._ref = viewChild("_ref");
         this._id = signal(DEFAULT_ID);
         this.initialized = signal(false);
+        this._documentScrollListenerCallbackId = signal(undefined);
+        this._observer = signal(undefined);
         effect(() => {
             // --- Mitosis: Workaround to make sure the effect() is triggered ---
             this._ref();
             this.initialized();
             // ---
             if (this._ref()?.nativeElement && this.initialized() && this._id()) {
-                let parent = this._ref()?.nativeElement.parentElement;
-                if (parent && parent.localName.includes("tooltip")) {
-                    // Angular workaround
-                    parent = parent.parentElement;
-                }
+                const parent = this.getParent();
                 if (parent) {
-                    ["mouseenter", "focus"].forEach((event) => {
-                        parent.addEventListener(event, () => this.handleAutoPlacement());
+                    ["mouseenter", "focusin"].forEach((event) => {
+                        parent.addEventListener(event, () => this.handleEnter(parent));
+                    });
+                    parent.addEventListener("keydown", (event) => this.handleEscape(event));
+                    ["mouseleave", "focusout"].forEach((event) => {
+                        parent.addEventListener(event, () => this.handleLeave());
                     });
                     parent.setAttribute("data-has-tooltip", "true");
                     parent.setAttribute("aria-describedby", this._id());
                 }
+                this._observer.set(new IntersectionObserver((payload) => {
+                    const entry = payload.find(({ target }) => target === this.getParent());
+                    if (entry && !entry.isIntersecting) {
+                        this.handleEscape(false);
+                    }
+                }));
                 this.initialized.set(false);
             }
         }, {
@@ -5094,8 +5435,8 @@ class DBTooltip {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tooltip");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, animation: { classPropertyName: "animation", publicName: "animation", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, showArrow: { classPropertyName: "showArrow", publicName: "showArrow", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <i
       role="tooltip"
       aria-hidden="true"
@@ -5115,7 +5456,7 @@ class DBTooltip {
     </i>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTooltip, decorators: [{
             type: Component,
             args: [{ selector: "db-tooltip", standalone: true, imports: [CommonModule], template: `
     <i
@@ -5186,8 +5527,8 @@ class DBTabList {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tab-list");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBTabList, isStandalone: true, selector: "db-tab-list", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div #_ref [attr.id]="_id()" [class]="cls('db-tab-list', className())">
       <ul role="tablist">
         <ng-content></ng-content>
@@ -5195,7 +5536,7 @@ class DBTabList {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabList, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-list", standalone: true, imports: [CommonModule], template: `
     <div #_ref [attr.id]="_id()" [class]="cls('db-tab-list', className())">
@@ -5253,8 +5594,8 @@ class DBTabPanel {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tab-panel");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBTabPanel, isStandalone: true, selector: "db-tab-panel", inputs: { className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, labelledBy: { classPropertyName: "labelledBy", publicName: "labelledBy", isSignal: true, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <section
       role="tabpanel"
       #_ref
@@ -5267,7 +5608,7 @@ class DBTabPanel {
     </section>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabPanel, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabPanel, decorators: [{
             type: Component,
             args: [{ selector: "db-tab-panel", standalone: true, imports: [CommonModule], template: `
     <section
@@ -5483,8 +5824,8 @@ class DBTabs {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-tabs");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: false, transformFunction: null }, arrowScrollDistance: { classPropertyName: "arrowScrollDistance", publicName: "arrowScrollDistance", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, behavior: { classPropertyName: "behavior", publicName: "behavior", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedMode: { classPropertyName: "initialSelectedMode", publicName: "initialSelectedMode", isSignal: true, isRequired: false, transformFunction: null }, initialSelectedIndex: { classPropertyName: "initialSelectedIndex", publicName: "initialSelectedIndex", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexChange: "indexChange", tabSelect: "tabSelect" }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.id]="_id()"
@@ -5537,7 +5878,7 @@ class DBTabs {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "icon", "iconAfter", "showIcon", "noText", "disabled", "controls", "checked", "label"], outputs: ["disabledChange", "checkedChange", "change"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "labelledBy", "content"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBTabs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBTabs, decorators: [{
             type: Component,
             args: [{ selector: "db-tabs", standalone: true, imports: [CommonModule, DBButton, DBTabList, DBTabItem, DBTabPanel], template: `
     <div
@@ -5667,8 +6008,8 @@ class DBStack {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-stack");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBStack, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBStack, isStandalone: true, selector: "db-stack", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null }, justifyContent: { classPropertyName: "justifyContent", publicName: "justifyContent", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       #_ref
       [attr.id]="id()"
@@ -5684,7 +6025,7 @@ class DBStack {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBStack, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBStack, decorators: [{
             type: Component,
             args: [{ selector: "db-stack", standalone: true, imports: [CommonModule], template: `
     <div
@@ -5749,8 +6090,8 @@ class DBCustomSelectList {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select-list");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBCustomSelectList, isStandalone: true, selector: "db-custom-select-list", inputs: { multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <div
       [attr.role]="multiple() ? 'group' : 'radiogroup'"
       [attr.aria-label]="label()"
@@ -5764,7 +6105,7 @@ class DBCustomSelectList {
     </div>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectList, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectList, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-list", standalone: true, imports: [CommonModule], template: `
     <div
@@ -5883,8 +6224,8 @@ class DBCustomSelectListItem {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select-list-item");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectListItem, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBCustomSelectListItem, isStandalone: true, selector: "db-custom-select-list-item", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, isGroupTitle: { classPropertyName: "isGroupTitle", publicName: "isGroupTitle", isSignal: true, isRequired: false, transformFunction: null }, showDivider: { classPropertyName: "showDivider", publicName: "showDivider", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, checked: { classPropertyName: "checked", publicName: "checked", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, groupTitle: { classPropertyName: "groupTitle", publicName: "groupTitle", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checked: "checkedChange", disabled: "disabledChange", change: "change" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCustomSelectListItem,
                 multi: true
@@ -5925,7 +6266,7 @@ class DBCustomSelectListItem {
     </li>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectListItem, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -6014,8 +6355,8 @@ class DBCustomSelectDropdown {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select-dropdown");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectDropdown, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBCustomSelectDropdown, isStandalone: true, selector: "db-custom-select-dropdown", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <article
       data-spacing="none"
       #_ref
@@ -6027,7 +6368,7 @@ class DBCustomSelectDropdown {
     </article>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectDropdown, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-dropdown", standalone: true, imports: [CommonModule], template: `
     <article
@@ -6046,19 +6387,19 @@ class DocumentClickListener {
     static { this.callbacks = {}; }
     static { this._instance = null; }
     static runCallbacks(event) {
-        Object.values(DocumentClickListener.callbacks).forEach(callback => {
+        for (const callback of Object.values(DocumentClickListener.callbacks)) {
             if (typeof callback === 'function') {
                 callback(event);
             }
-        });
+        }
     }
     constructor() {
         if (DocumentClickListener._instance) {
             return DocumentClickListener._instance;
         }
         DocumentClickListener._instance = this;
-        if (document) {
-            document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
+        if (self.document) {
+            self.document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
         }
     }
     addCallback(callback) {
@@ -6076,6 +6417,12 @@ const defaultProps$1 = {
     showClearSelection: true,
 };
 class DBCustomSelect {
+    handleDocumentScroll(event) {
+        if (event?.target?.contains &&
+            event?.target?.contains(this.detailsRef()?.nativeElement)) {
+            this.handleAutoPlacement();
+        }
+    }
     hasValidState() {
         return !!(this.validMessage() ?? this.validation() === "valid");
     }
@@ -6117,15 +6464,27 @@ class DBCustomSelect {
     }
     handleDropdownToggle(event) {
         if (this.dropdownToggle) {
+            event.stopPropagation();
             this.dropdownToggle.emit(event);
         }
         if (event.target.open) {
             this._documentClickListenerCallbackId.set(new DocumentClickListener().addCallback((event) => this.handleDocumentClose(event)));
+            this._documentScrollListenerCallbackId.set(new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event)));
+            this.handleAutoPlacement();
+            this._observer()?.observe(this.detailsRef()?.nativeElement);
+            if (!event.target.dataset.test) {
+                // We need this workaround for snapshot testing
+                this.handleOpenByKeyboardFocus();
+            }
         }
         else {
             if (this._documentClickListenerCallbackId()) {
                 new DocumentClickListener().removeCallback(this._documentClickListenerCallbackId());
             }
+            if (this._documentScrollListenerCallbackId()) {
+                new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+            }
+            this._observer()?.unobserve(this.detailsRef()?.nativeElement);
         }
     }
     getNativeSelectValue() {
@@ -6160,11 +6519,14 @@ class DBCustomSelect {
         return (option.id ?? option.value ?? uuid()).toString();
     }
     getTagRemoveLabel(index) {
-        return this.removeTagsTexts() && this.removeTagsTexts().length > index
-            ? this.removeTagsTexts().at(index)
-            : `${DEFAULT_REMOVE} ${this._selectedOptions()
+        if (this.removeTagsTexts() && this.removeTagsTexts().length > index) {
+            return this.removeTagsTexts().at(index);
+        }
+        else {
+            return `${DEFAULT_REMOVE} ${this._selectedOptions()
                 ? this.getOptionLabel(this._selectedOptions()[index])
                 : ""}`;
+        }
     }
     handleTagRemove(option, event) {
         event.stopPropagation();
@@ -6175,16 +6537,17 @@ class DBCustomSelect {
         if (this.detailsRef()?.nativeElement) {
             const dropdown = this.detailsRef()?.nativeElement.querySelector("article");
             if (dropdown) {
+                // This is a workaround for Angular
                 delay(() => {
-                    handleDataOutside(dropdown);
-                }, 100);
+                    handleFixedDropdown(dropdown, this.detailsRef()?.nativeElement, this.placement() ?? "bottom");
+                }, 1);
             }
         }
     }
     handleArrowDownUp(event) {
         if (this.detailsRef()?.nativeElement?.open) {
-            if (document) {
-                const activeElement = document.activeElement;
+            if (self.document) {
+                const activeElement = self.document.activeElement;
                 if (activeElement) {
                     // 1. we check if we are currently focusing a checkbox in the dropdown
                     const isCheckbox = activeElement.getAttribute("type") === "checkbox" ||
@@ -6244,8 +6607,6 @@ class DBCustomSelect {
                     }
                 }
             }
-            event.stopPropagation();
-            event.preventDefault();
         }
         else if (event.key === "ArrowDown" || event.key === "ArrowRight") {
             // Open dropdown with arrows see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/#keyboardinteraction
@@ -6254,14 +6615,13 @@ class DBCustomSelect {
                 this.detailsRef().nativeElement.open = true;
             }
             this.handleOpenByKeyboardFocus();
-            event.stopPropagation();
-            event.preventDefault();
         }
+        event.stopPropagation();
+        event.preventDefault();
     }
     handleKeyboardPress(event) {
-        if (event.key === "Escape" &&
-            this.detailsRef()?.nativeElement &&
-            this.detailsRef()?.nativeElement?.open) {
+        event.stopPropagation();
+        if (event.key === "Escape" && this.detailsRef()?.nativeElement?.open) {
             this.handleClose("close");
             this.handleSummaryFocus();
         }
@@ -6282,25 +6642,29 @@ class DBCustomSelect {
                 event?.relatedTarget) {
                 const relatedTarget = event.relatedTarget;
                 if (!this.detailsRef()?.nativeElement.contains(relatedTarget)) {
-                    this.detailsRef().nativeElement.open = false;
+                    // We need to use delay here because the combination of `contains`
+                    // and changing the DOM element causes a race condition inside browser
+                    delay(() => (this.detailsRef().nativeElement.open = false), 1);
                 }
             }
         }
     }
     handleDocumentClose(event) {
-        // stencil is sending a custom event which wraps the pointer event into details
-        const target = event.target;
-        if (this.detailsRef()?.nativeElement?.open &&
-            !this.detailsRef()?.nativeElement.contains(target)) {
-            this.detailsRef().nativeElement.open = false;
+        if (event) {
+            // stencil is sending a custom event which wraps the pointer event into details
+            const target = event.target;
+            if (this.detailsRef()?.nativeElement?.open &&
+                !this.detailsRef()?.nativeElement.contains(target)) {
+                this.detailsRef().nativeElement.open = false;
+            }
         }
     }
     handleOptionSelected(values) {
         const skip = new Date().getTime() - this._internalChangeTimestamp() < 200;
         if (skip)
             return;
+        this._values.set(values);
         if (this.optionSelected) {
-            this._values.set(values);
             this.optionSelected.emit(values ?? []);
         }
         handleFrameworkEventAngular(this, {
@@ -6326,7 +6690,8 @@ class DBCustomSelect {
             }
         }
     }
-    handleSelectAll() {
+    handleSelectAll(event) {
+        event.stopPropagation();
         if (this._values()?.length === this.amountOptions()) {
             this.handleOptionSelected([]);
         }
@@ -6357,12 +6722,12 @@ class DBCustomSelect {
                     delay(() => {
                         // Takes some time until element can be focused
                         checkbox.focus();
-                    }, 100);
+                    }, 1);
                 }
             }
         }
     }
-    handleOpenByKeyboardFocus(onlySearch) {
+    handleOpenByKeyboardFocus() {
         if (this.detailsRef()?.nativeElement) {
             // Focus search if possible
             const search = getSearchInput(this.detailsRef()?.nativeElement);
@@ -6370,9 +6735,9 @@ class DBCustomSelect {
                 delay(() => {
                     // Takes some time until element can be focused
                     search.focus();
-                }, 100);
+                }, 1);
             }
-            else if (!onlySearch) {
+            else {
                 // Focus first checkbox otherwise
                 this.handleFocusFirstDropdownCheckbox();
             }
@@ -6381,22 +6746,31 @@ class DBCustomSelect {
     handleSearch(event) {
         event.stopPropagation();
         const filterText = event.target.value;
-        this._options.set(!this.options() || !filterText || filterText.length === 0
-            ? this.options()
-            : this.options().filter((option) => !option.isGroupTitle &&
+        if (!this.options() || !filterText || filterText.length === 0) {
+            this._options.set(this.options());
+        }
+        else {
+            this._options.set(this.options().filter((option) => !option.isGroupTitle &&
                 this.getOptionLabel(option)
                     .toLowerCase()
                     .includes(filterText.toLowerCase())));
+        }
     }
-    handleClearAll() {
+    handleClearAll(event) {
+        event.stopPropagation();
         this.handleOptionSelected([]);
         this.handleSummaryFocus();
     }
     handleSummaryFocus() {
-        this.detailsRef()?.nativeElement?.querySelector("summary")?.focus();
+        if (this.detailsRef()?.nativeElement) {
+            (this.detailsRef()?.nativeElement)
+                .querySelector("summary")
+                ?.focus();
+        }
     }
-    satisfyReact() {
-        // This is an empty function to satisfy React
+    satisfyReact(event) {
+        // This is a function to satisfy React
+        event.stopPropagation();
     }
     trackByOption0(_, option) {
         return "native-select-option-" + this.getOptionKey(option);
@@ -6422,6 +6796,7 @@ class DBCustomSelect {
         this.invalidMessage = input();
         this.message = input();
         this.showMessage = input();
+        this.ariaDescribedBy = input();
         this.showNoResults = input();
         this.multiple = input();
         this.showSelectAll = input();
@@ -6435,10 +6810,10 @@ class DBCustomSelect {
         this.required = input();
         this.selectAllLabel = input();
         this.removeTagsTexts = input();
+        this.placement = input();
         this.className = input();
         this.formFieldWidth = input();
         this.variant = input();
-        this.placement = input();
         this.showLabel = input();
         this.icon = input();
         this.showIcon = input();
@@ -6491,6 +6866,8 @@ class DBCustomSelect {
         this._hasNoOptions = signal(false);
         this._documentClickListenerCallbackId = signal(undefined);
         this._internalChangeTimestamp = signal(0);
+        this._documentScrollListenerCallbackId = signal(undefined);
+        this._observer = signal(undefined);
         this.selectAllChecked = signal(false);
         this.selectAllIndeterminate = signal(false);
         effect(() => {
@@ -6498,19 +6875,6 @@ class DBCustomSelect {
             this.detailsRef();
             // ---
             if (this.detailsRef()?.nativeElement) {
-                const summary = this.detailsRef()?.nativeElement.querySelector("summary");
-                if (summary) {
-                    summary.addEventListener("click", () => {
-                        this.handleAutoPlacement();
-                        this.handleOpenByKeyboardFocus(true);
-                    });
-                    summary.addEventListener("keydown", (event) => {
-                        if (event.code === "Space" &&
-                            !this.detailsRef()?.nativeElement?.open) {
-                            this.handleOpenByKeyboardFocus();
-                        }
-                    });
-                }
                 this.detailsRef()?.nativeElement.addEventListener("focusout", (event) => this.handleClose(event));
             }
         }, {
@@ -6545,7 +6909,7 @@ class DBCustomSelect {
             if (this.detailsRef()?.nativeElement) {
                 const summary = this.detailsRef()?.nativeElement.querySelector("summary");
                 if (summary) {
-                    summary.setAttribute("aria-describedby", this._descByIds() || "");
+                    summary.setAttribute("aria-describedby", this.ariaDescribedBy() ?? (this._descByIds() || ""));
                 }
             }
         }, {
@@ -6572,7 +6936,7 @@ class DBCustomSelect {
             this.multiple();
             // ---
             this.selectAllEnabled.set(Boolean(this.multiple() &&
-                (this.showSelectAll() || this.amountOptions() > 5)));
+                (this.showSelectAll() ?? this.amountOptions() > 5)));
         }, {
         // Enable writing to signals inside effects
         });
@@ -6581,7 +6945,7 @@ class DBCustomSelect {
             this.showSearch();
             this.amountOptions();
             // ---
-            this.searchEnabled.set(this.showSearch() || this.amountOptions() > 9);
+            this.searchEnabled.set(this.showSearch() ?? this.amountOptions() > 9);
         }, {
         // Enable writing to signals inside effects
         });
@@ -6643,11 +7007,11 @@ class DBCustomSelect {
         });
         effect(() => {
             // --- Mitosis: Workaround to make sure the effect() is triggered ---
-            this._options();
+            this.options();
             this._values();
             // ---
-            if (this._options()?.length) {
-                this._selectedOptions.set(this._options()?.filter((option) => {
+            if (this.options()?.length) {
+                this._selectedOptions.set(this.options()?.filter((option) => {
                     if (!option.value || !this._values()?.["includes"]) {
                         return false;
                     }
@@ -6774,13 +7138,23 @@ class DBCustomSelect {
         this._selectedLabelsId.set(mId + "-selected-labels");
         this._infoTextId.set(mId + "-info");
         this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
+        this._observer.set(new IntersectionObserver((payload) => {
+            if (this.detailsRef()?.nativeElement) {
+                const entry = payload.find(({ target }) => target === this.detailsRef()?.nativeElement);
+                if (entry &&
+                    !entry.isIntersecting &&
+                    this.detailsRef()?.nativeElement.open) {
+                    this.detailsRef().nativeElement.open = false;
+                }
+            }
+        }));
     }
     ngAfterViewInit() {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.10", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, ariaListLabel: { classPropertyName: "ariaListLabel", publicName: "ariaListLabel", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected" }, providers: [{
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: DBCustomSelect, isStandalone: true, selector: "db-custom-select", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, invalidMessage: { classPropertyName: "invalidMessage", publicName: "invalidMessage", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, showMessage: { classPropertyName: "showMessage", publicName: "showMessage", isSignal: true, isRequired: false, transformFunction: null }, ariaDescribedBy: { classPropertyName: "ariaDescribedBy", publicName: "ariaDescribedBy", isSignal: true, isRequired: false, transformFunction: null }, showNoResults: { classPropertyName: "showNoResults", publicName: "showNoResults", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, showSelectAll: { classPropertyName: "showSelectAll", publicName: "showSelectAll", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, validation: { classPropertyName: "validation", publicName: "validation", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, selectedType: { classPropertyName: "selectedType", publicName: "selectedType", isSignal: true, isRequired: false, transformFunction: null }, amountText: { classPropertyName: "amountText", publicName: "amountText", isSignal: true, isRequired: false, transformFunction: null }, validMessage: { classPropertyName: "validMessage", publicName: "validMessage", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, selectAllLabel: { classPropertyName: "selectAllLabel", publicName: "selectAllLabel", isSignal: true, isRequired: false, transformFunction: null }, removeTagsTexts: { classPropertyName: "removeTagsTexts", publicName: "removeTagsTexts", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, formFieldWidth: { classPropertyName: "formFieldWidth", publicName: "formFieldWidth", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, showIcon: { classPropertyName: "showIcon", publicName: "showIcon", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, dropdownWidth: { classPropertyName: "dropdownWidth", publicName: "dropdownWidth", isSignal: true, isRequired: false, transformFunction: null }, searchLabel: { classPropertyName: "searchLabel", publicName: "searchLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showLoading: { classPropertyName: "showLoading", publicName: "showLoading", isSignal: true, isRequired: false, transformFunction: null }, ariaListLabel: { classPropertyName: "ariaListLabel", publicName: "ariaListLabel", isSignal: true, isRequired: false, transformFunction: null }, noResultsText: { classPropertyName: "noResultsText", publicName: "noResultsText", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, mobileCloseButtonText: { classPropertyName: "mobileCloseButtonText", publicName: "mobileCloseButtonText", isSignal: true, isRequired: false, transformFunction: null }, showClearSelection: { classPropertyName: "showClearSelection", publicName: "showClearSelection", isSignal: true, isRequired: false, transformFunction: null }, clearSelectionText: { classPropertyName: "clearSelectionText", publicName: "clearSelectionText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, messageIcon: { classPropertyName: "messageIcon", publicName: "messageIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { values: "valuesChange", disabled: "disabledChange", amountChange: "amountChange", dropdownToggle: "dropdownToggle", optionSelected: "optionSelected" }, providers: [{
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: DBCustomSelect,
                 multi: true
@@ -6811,9 +7185,9 @@ class DBCustomSelect {
           [attr.multiple]="getBoolean(multiple(), 'multiple')"
           [disabled]="getBoolean(disabled(), 'disabled')"
           [attr.required]="getBoolean(required(), 'required')"
-          (change)="satisfyReact()"
+          (change)="satisfyReact($event)"
         >
-          @if(_options()?.length){ @for (option of _options();track
+          @if(options()?.length){ @for (option of options();track
           trackByOption0(i,option);let i = $index) {
           <option [disabled]="option.disabled" [attr.value]="option.value">
             {{getOptionLabel(option)}}
@@ -6894,7 +7268,7 @@ class DBCustomSelect {
                     #selectAllRef
                     [attr.form]="_id()"
                     [checked]="selectAllChecked()"
-                    (change)="handleSelectAll()"
+                    (change)="handleSelectAll($event)"
                   />
                   {{getSelectAllLabel()}}
                 </label>
@@ -6948,7 +7322,7 @@ class DBCustomSelect {
         [noText]="true"
         [name]="_id()"
         [form]="_id()"
-        (click)="handleClearAll()"
+        (click)="handleClearAll($event)"
       >
         {{clearSelectionText()}}
         <db-tooltip placement="top">{{clearSelectionText()}}</db-tooltip>
@@ -6976,9 +7350,9 @@ class DBCustomSelect {
         {{_voiceOverFallback()}}
       </span>
     </div>
-  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["disabled", "removeButton", "id", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["id", "invalidMessage", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIcon", "icon", "iconAfter", "label", "name", "type", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "ariaDescribedBy", "messageIcon"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["id", "isGroupTitle", "showDivider", "type", "checked", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "className", "emphasis", "animation", "delay", "width", "showArrow", "placement"] }] }); }
+  `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["disabled", "removeButton", "id", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["id", "invalidMessage", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIcon", "icon", "iconAfter", "label", "name", "type", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "ariaDescribedBy", "messageIcon"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["id", "isGroupTitle", "showDivider", "type", "checked", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label"], outputs: ["checkedChange", "disabledChange", "change"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "className", "icon", "semantic", "size", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["id", "className", "type", "disabled", "label", "icon", "showIcon", "size", "state", "width", "variant", "noText", "name", "form", "value", "describedbyid", "ariaexpanded", "ariapressed", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "placement", "className", "emphasis", "animation", "delay", "width", "showArrow"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelect, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelect, decorators: [{
             type: Component,
             args: [{ providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -7021,9 +7395,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
           [attr.multiple]="getBoolean(multiple(), 'multiple')"
           [disabled]="getBoolean(disabled(), 'disabled')"
           [attr.required]="getBoolean(required(), 'required')"
-          (change)="satisfyReact()"
+          (change)="satisfyReact($event)"
         >
-          @if(_options()?.length){ @for (option of _options();track
+          @if(options()?.length){ @for (option of options();track
           trackByOption0(i,option);let i = $index) {
           <option [disabled]="option.disabled" [attr.value]="option.value">
             {{getOptionLabel(option)}}
@@ -7104,7 +7478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
                     #selectAllRef
                     [attr.form]="_id()"
                     [checked]="selectAllChecked()"
-                    (change)="handleSelectAll()"
+                    (change)="handleSelectAll($event)"
                   />
                   {{getSelectAllLabel()}}
                 </label>
@@ -7158,7 +7532,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
         [noText]="true"
         [name]="_id()"
         [form]="_id()"
-        (click)="handleClearAll()"
+        (click)="handleClearAll($event)"
       >
         {{clearSelectionText()}}
         <db-tooltip placement="top">{{clearSelectionText()}}</db-tooltip>
@@ -7233,8 +7607,8 @@ class DBCustomSelectFormField {
         const element = this._ref()?.nativeElement;
         this.enableAttributePassing(element, "db-custom-select-form-field");
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.10", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.12", type: DBCustomSelectFormField, isStandalone: true, selector: "db-custom-select-form-field", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "_ref", first: true, predicate: ["_ref"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <summary
       #_ref
       [attr.id]="id()"
@@ -7244,7 +7618,7 @@ class DBCustomSelectFormField {
     </summary>
   `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: DBCustomSelectFormField, decorators: [{
             type: Component,
             args: [{ selector: "db-custom-select-form-field", standalone: true, imports: [CommonModule], template: `
     <summary
@@ -7261,5 +7635,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.10", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AlignmentList, AutoCompleteList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, EmphasisList, GapSpacingList, LabelVariantList, LinkCurrentList, LinkReferrerPolicyList, LinkTargetList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, OrientationList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SemanticList, SizeList, SpacingList, TESTING_VIEWPORTS, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getSearchInput, handleDataOutside, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isInView, stringPropVisible, uuid, visibleInVX, visibleInVY };
+export { AlignmentList, AutoCompleteList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomSelect, DBCustomSelectDropdown, DBCustomSelectFormField, DBCustomSelectList, DBCustomSelectListItem, DBDivider, DBDrawer, DBHeader, DBIcon, DBInfotext, DBInput, DBLink, DBNavigation, DBNavigationItem, DBNotification, DBPage, DBPopover, DBRadio, DBSection, DBSelect, DBStack, DBSwitch, DBTabItem, DBTabList, DBTabPanel, DBTabs, DBTag, DBTextarea, DBTooltip, DEFAULT_BACK, DEFAULT_BURGER_MENU, DEFAULT_CLOSE_BUTTON, DEFAULT_DATALIST_ID_SUFFIX, DEFAULT_ICON, DEFAULT_ID, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_ROWS, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, EmphasisList, GapSpacingList, LabelVariantList, LinkCurrentList, LinkReferrerPolicyList, LinkTargetList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, OrientationList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SemanticList, SizeList, SpacingList, TESTING_VIEWPORTS, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getHideProp, getInputValue, getNumber, getSearchInput, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map