@db-ux/ngx-core-components 4.13.1-angular-signal-forms13-577b861 → 4.14.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, output, viewChild, signal, effect, VERSION, Component, model, HostBinding, Directive, TemplateRef, ContentChild } from '@angular/core';
+import { input, output, viewChild, signal, effect, VERSION, Component, model, booleanAttribute, HostBinding, Directive, TemplateRef, ContentChild } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -634,7 +634,9 @@ const DEFAULT_INVALID_MESSAGE = 'TODO: Add an invalidMessage';
 const DEFAULT_REMOVE = 'Remove';
 const DEFAULT_BACK = 'Back';
 const DEFAULT_SELECTED = 'Selected';
-const DEFAULT_BURGER_MENU = 'BurgerMenu';
+const DEFAULT_SCROLL_LEFT = 'Scroll left';
+const DEFAULT_SCROLL_RIGHT = 'Scroll right';
+const DEFAULT_BURGER_MENU = 'Open navigation menu';
 const DEFAULT_ICON = 'brand';
 const DEFAULT_ROWS = 4;
 const DEFAULT_CLOSE_BUTTON = 'Close';
@@ -1615,7 +1617,7 @@ class DBCheckbox {
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** @internal Signal Forms validation state */
         this._validMessage = signal('', ...(ngDevMode ? [{ debugName: "_validMessage" }] : /* istanbul ignore next */ []));
@@ -2056,7 +2058,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
   </div> `, styles: [":host{display:contents}\n"] }]
         }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], iconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconLeading", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], showIconLeading: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconLeading", required: false }] }], showIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcon", required: false }] }], iconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconTrailing", required: false }] }], showIconTrailing: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIconTrailing", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], noText: [{ type: i0.Input, args: [{ isSignal: true, alias: "noText", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
-class DocumentClickListener {
+/**
+ * Generic base class for singleton document event listeners.
+ * Manages a shared set of callbacks dispatched when a document-level
+ * event fires.
+ *
+ * Subclasses own their static state (callbacks, instance) and expose
+ * it via the abstract accessor methods below.
+ *
+ * @template TEvent - The event type passed to callbacks (Event, MouseEvent, etc.)
+ */
+class AbstractDocumentListener {
+    addCallback(callback) {
+        const id = uuid();
+        const callbacks = this.getCallbacks();
+        callbacks[id] = callback;
+        return id;
+    }
+    removeCallback(id) {
+        const callbacks = this.getCallbacks();
+        delete callbacks[id];
+    }
+}
+
+class DocumentClickListener extends AbstractDocumentListener {
     static { this.callbacks = {}; }
     static { this._instance = null; }
     static runCallbacks(event) {
@@ -2067,6 +2092,7 @@ class DocumentClickListener {
         }
     }
     constructor() {
+        super();
         if (DocumentClickListener._instance) {
             return DocumentClickListener._instance;
         }
@@ -2075,17 +2101,12 @@ class DocumentClickListener {
             self.document.addEventListener('click', event => DocumentClickListener.runCallbacks(event));
         }
     }
-    addCallback(callback) {
-        const callbackID = uuid();
-        DocumentClickListener.callbacks[callbackID] = callback;
-        return callbackID;
-    }
-    removeCallback(id) {
-        delete DocumentClickListener.callbacks[id];
+    getCallbacks() {
+        return DocumentClickListener.callbacks;
     }
 }
 
-class DocumentScrollListener {
+class DocumentScrollListener extends AbstractDocumentListener {
     static { this.callbacks = {}; }
     static { this._instance = null; }
     static runCallbacks(event) {
@@ -2096,6 +2117,7 @@ class DocumentScrollListener {
         }
     }
     constructor() {
+        super();
         this.ticking = false;
         if (DocumentScrollListener._instance) {
             return DocumentScrollListener._instance;
@@ -2113,79 +2135,12 @@ class DocumentScrollListener {
             }, true);
         }
     }
-    addCallback(callback) {
-        const callbackID = uuid();
-        DocumentScrollListener.callbacks[callbackID] = callback;
-        return callbackID;
-    }
-    removeCallback(id) {
-        delete DocumentScrollListener.callbacks[id];
+    getCallbacks() {
+        return DocumentScrollListener.callbacks;
     }
 }
 
 // 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) => {
     if (!element || !parent)
         return;
@@ -2201,9 +2156,11 @@ const handleFixedDropdown = (element, parent, placement) => {
     // mobile max-inline-size guard and overflows the viewport.
     element.style.inlineSize = '';
     element.style.minInlineSize = '';
-    // We skip the rest if we are in mobile, it's already fixed via CSS.
-    if (getComputedStyle(element).zIndex === '9999')
+    // We skip this if we are in mobile it's already fixed or if we don't have a floating dropdown
+    const computedStyle = getComputedStyle(element);
+    if (computedStyle.zIndex === '9999' || computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
         return;
+    }
     const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement, innerWidth } = getFloatingProps(element, parent, placement);
     // For auto width the dropdown is forced to be at least as wide as the trigger,
     // but clamped to its own max-inline-size: CSS lets a min-inline-size override
@@ -2278,27 +2235,38 @@ const getFloatingProps = (element, parent, placement) => {
     let childHeight = childRect.height;
     let childWidth = childRect.width;
     if (placement === 'bottom' || placement === 'top') {
-        childWidth = childWidth / 2;
+        childWidth = width > childWidth ? 0 : childWidth / 2;
     }
     if (placement === 'left' || placement === 'right') {
-        childHeight = childHeight / 2;
+        childHeight = height > childHeight ? 0 : childHeight / 2;
     }
-    const outsideBottom = bottom + childHeight > innerHeight;
-    const outsideTop = top - childHeight < 0;
-    const outsideLeft = left - childWidth < 0;
-    const outsideRight = right + childWidth > innerWidth;
+    const outsideBottom = Math.floor(bottom + childHeight) > innerHeight;
+    const outsideTop = Math.ceil(top - childHeight) < 0;
+    const outsideLeft = Math.ceil(left - childWidth) < 0;
+    const outsideRight = Math.floor(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';
+            if (!outsideTop) {
+                correctedPlacement = placement?.replace('bottom', 'top');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'top';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'top-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'top-end';
+                }
             }
-            else if (outsideRight) {
-                correctedPlacement = 'top-end';
+            else {
+                // Both outsideBottom and outsideTop: keep bottom but still apply horizontal correction
+                if (outsideLeft) {
+                    correctedPlacement = 'bottom-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'bottom-end';
+                }
             }
         }
         else {
@@ -2315,15 +2283,26 @@ const getFloatingProps = (element, parent, placement) => {
     }
     else if (placement.startsWith('top')) {
         if (outsideTop) {
-            correctedPlacement = placement?.replace('top', 'bottom');
-            if (outsideLeft && outsideRight) {
-                correctedPlacement = 'bottom';
-            }
-            else if (outsideLeft) {
-                correctedPlacement = 'bottom-start';
+            if (!outsideBottom) {
+                correctedPlacement = placement?.replace('top', 'bottom');
+                if (outsideLeft && outsideRight) {
+                    correctedPlacement = 'bottom';
+                }
+                else if (outsideLeft) {
+                    correctedPlacement = 'bottom-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'bottom-end';
+                }
             }
-            else if (outsideRight) {
-                correctedPlacement = 'bottom-end';
+            else {
+                // Both outsideTop and outsideBottom: keep top but still apply horizontal correction
+                if (outsideLeft) {
+                    correctedPlacement = 'top-start';
+                }
+                else if (outsideRight) {
+                    correctedPlacement = 'top-end';
+                }
             }
         }
         else {
@@ -2340,15 +2319,17 @@ const getFloatingProps = (element, parent, placement) => {
     }
     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';
+            if (!outsideRight) {
+                correctedPlacement = placement?.replace('left', 'right');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'right';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'right-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'right-start';
+                }
             }
         }
         else {
@@ -2365,15 +2346,17 @@ const getFloatingProps = (element, parent, placement) => {
     }
     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';
+            if (!outsideLeft) {
+                correctedPlacement = placement?.replace('right', 'left');
+                if (outsideBottom && outsideTop) {
+                    correctedPlacement = 'left';
+                }
+                else if (outsideBottom) {
+                    correctedPlacement = 'left-end';
+                }
+                else if (outsideTop) {
+                    correctedPlacement = 'left-start';
+                }
             }
         }
         else {
@@ -2399,7 +2382,8 @@ const getFloatingProps = (element, parent, placement) => {
         childWidth: childRect.width,
         correctedPlacement,
         innerWidth,
-        innerHeight
+        innerHeight,
+        outsideYBoth: outsideTop && outsideBottom
     };
 };
 const MAX_ANCESTOR_DEPTH = 10;
@@ -2428,8 +2412,17 @@ const handleFixedPopover = (element, parent, placement) => {
     const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
     const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
     const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
-    const distance = getComputedStyle(element)?.getPropertyValue('--db-popover-distance') ?? '0px';
-    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    const computedStyle = getComputedStyle(element);
+    // We skip if we don't have a floating popover
+    if (computedStyle.position !== 'fixed' && computedStyle.position !== 'absolute') {
+        return;
+    }
+    let distance = computedStyle.getPropertyValue('--db-popover-distance');
+    if (!distance.length) {
+        distance = '0px';
+    }
+    const elementPlacement = element?.dataset?.['placement'] ?? placement ?? 'bottom';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight, outsideYBoth } = getFloatingProps(element, parent, elementPlacement);
     if (ancestorWithCorrectedPlacement) {
         const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
         left = Math.abs(left - ancestorRect.left);
@@ -2477,6 +2470,10 @@ const handleFixedPopover = (element, parent, placement) => {
         }
     }
     // Popover position
+    // Reset shorthand inset properties from previous calls (e.g. outsideYBoth)
+    // before writing new individual inset values
+    element.style.insetBlock = '';
+    element.style.insetInline = '';
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
         // center horizontally
         element.style.insetBlockStart = `${top + height / 2}px`;
@@ -2525,10 +2522,218 @@ const handleFixedPopover = (element, parent, placement) => {
         element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
         element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
+    // In this case we are outside of top and bottom so we need to scroll
+    // We use the full height in this case
+    if (outsideYBoth) {
+        element.style.overflow = 'hidden auto';
+        element.style.insetBlock = distance;
+        element.style.maxBlockSize = `calc(${innerHeight}px - 2 * ${distance})`;
+    }
+    else {
+        element.style.overflow = '';
+        element.style.maxBlockSize = '';
+    }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;
+    // Set data-outside-vy / data-outside-vx for CSS-based flipping
+    handleDataOutside(element);
+};
+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 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
+    };
 };
 
+/**
+ * Generic base class for singleton observer listeners.
+ * Uses a Map<Element, Map<id, callback>> for O(1) element lookup in the
+ * observer handler — avoids quadratic scanning when many elements are observed.
+ *
+ * Subclasses own their static state (callbacksByElement, idToElement, observer,
+ * instance) and expose it via the abstract accessor methods below.
+ *
+ * @template TObserver - The observer type (ResizeObserver, IntersectionObserver, etc.)
+ * @template TEntry - The entry type passed to the callback
+ */
+class AbstractObserverListener {
+    observe(element, callback) {
+        const observer = this.getObserver();
+        if (!observer)
+            return undefined;
+        const id = uuid();
+        const callbacksByElement = this.getCallbacksByElement();
+        const idToElement = this.getIdToElement();
+        let elementCallbacks = callbacksByElement.get(element);
+        if (!elementCallbacks) {
+            elementCallbacks = new Map();
+            callbacksByElement.set(element, elementCallbacks);
+            // Only call observe on the native observer if this is a new element
+            this.observeElement(observer, element);
+        }
+        elementCallbacks.set(id, callback);
+        idToElement.set(id, element);
+        return id;
+    }
+    unobserve(id) {
+        const callbacksByElement = this.getCallbacksByElement();
+        const idToElement = this.getIdToElement();
+        const observer = this.getObserver();
+        const element = idToElement.get(id);
+        if (!element || !observer)
+            return;
+        const elementCallbacks = callbacksByElement.get(element);
+        if (elementCallbacks) {
+            elementCallbacks.delete(id);
+            // If no more callbacks for this element, unobserve it
+            if (elementCallbacks.size === 0) {
+                callbacksByElement.delete(element);
+                this.unobserveElement(observer, element);
+            }
+        }
+        idToElement.delete(id);
+    }
+    /**
+     * Called by subclass observer handlers to dispatch callbacks for an entry.
+     */
+    dispatchEntry(element, entry) {
+        const elementCallbacks = this.getCallbacksByElement().get(element);
+        if (elementCallbacks) {
+            elementCallbacks.forEach(callback => {
+                callback(entry);
+            });
+        }
+    }
+}
+
+class IntersectionObserverListener extends AbstractObserverListener {
+    static { this._instance = null; }
+    static { this.callbacksByElement = new Map(); }
+    static { this.idToElement = new Map(); }
+    static { this.observer = null; }
+    constructor() {
+        super();
+        if (IntersectionObserverListener._instance) {
+            return IntersectionObserverListener._instance;
+        }
+        IntersectionObserverListener._instance = this;
+        if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
+            IntersectionObserverListener.observer = new IntersectionObserver(entries => {
+                for (const entry of entries) {
+                    this.dispatchEntry(entry.target, entry);
+                }
+            });
+        }
+    }
+    getCallbacksByElement() {
+        return IntersectionObserverListener.callbacksByElement;
+    }
+    getIdToElement() {
+        return IntersectionObserverListener.idToElement;
+    }
+    getObserver() {
+        return IntersectionObserverListener.observer;
+    }
+    observeElement(observer, element) {
+        observer.observe(element);
+    }
+    unobserveElement(observer, element) {
+        observer.unobserve(element);
+    }
+}
+
+class ResizeObserverListener extends AbstractObserverListener {
+    static { this._instance = null; }
+    static { this.callbacksByElement = new Map(); }
+    static { this.idToElement = new Map(); }
+    static { this.observer = null; }
+    constructor() {
+        super();
+        if (ResizeObserverListener._instance) {
+            return ResizeObserverListener._instance;
+        }
+        ResizeObserverListener._instance = this;
+        if (typeof window !== 'undefined' && 'ResizeObserver' in window) {
+            ResizeObserverListener.observer = new ResizeObserver(entries => {
+                for (const entry of entries) {
+                    this.dispatchEntry(entry.target, entry);
+                }
+            });
+        }
+    }
+    getCallbacksByElement() {
+        return ResizeObserverListener.callbacksByElement;
+    }
+    getIdToElement() {
+        return ResizeObserverListener.idToElement;
+    }
+    getObserver() {
+        return ResizeObserverListener.observer;
+    }
+    observeElement(observer, element) {
+        observer.observe(element);
+    }
+    unobserveElement(observer, element) {
+        observer.unobserve(element);
+    }
+}
+
 const defaultProps$z = { width: "fixed" };
 class DBCustomSelectDropdown {
     setupObserver(element) {
@@ -2692,7 +2897,7 @@ class DBCustomSelectListItem {
         this.hasDivider = signal(false, ...(ngDevMode ? [{ debugName: "hasDivider" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** Signal Forms touch output — emitted on blur to mark the control as touched */
         this.touch = output();
@@ -2993,7 +3198,10 @@ class DBInput {
             // Only reflect regexes that are full-match (anchored with ^ and $) to the HTML pattern attribute.
             // Partial-match regexes (e.g. /^https?:\/\//) would change semantics because browser patterns
             // implicitly match the entire value (as if wrapped in ^(?:...)$).
-            const fullMatch = p.filter((r) => r.source.startsWith('^') && r.source.endsWith('$'));
+            // Additionally, skip regexes with flags (e.g. /i for case-insensitive) because HTML pattern
+            // does not support flags — reflecting them would cause a semantics mismatch where Signal Forms
+            // considers the value valid but the browser pattern rejects it.
+            const fullMatch = p.filter((r) => r.source.startsWith('^') && r.source.endsWith('$') && !r.flags);
             if (fullMatch.length === 0)
                 return undefined;
             // Strip anchors since HTML pattern is implicitly anchored
@@ -3223,7 +3431,7 @@ class DBInput {
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** @internal Signal Forms validation state */
         this._validMessage = signal('', ...(ngDevMode ? [{ debugName: "_validMessage" }] : /* istanbul ignore next */ []));
@@ -3607,7 +3815,7 @@ class DBTooltip {
             void delay(() => {
                 // Due to race conditions we need to check for _ref again
                 if (this._ref()?.nativeElement) {
-                    handleFixedPopover(this._ref()?.nativeElement, parent, this.placement() ?? "bottom");
+                    handleFixedPopover(this._ref()?.nativeElement, parent);
                 }
             }, 1);
         }
@@ -3629,7 +3837,14 @@ class DBTooltip {
             new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
             this._documentScrollListenerCallbackId.set(undefined);
         }
-        this._observer()?.unobserve(this.getParent());
+        if (this._resizeObserverCallbackId()) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+            this._resizeObserverCallbackId.set(undefined);
+        }
+        if (this._intersectionObserverCallbackId()) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+            this._intersectionObserverCallbackId.set(undefined);
+        }
     }
     handleEnter(parent) {
         // Register the shared scroll callback only for the first active
@@ -3638,7 +3853,12 @@ class DBTooltip {
         this._activeTriggerCount.set((this._activeTriggerCount() ?? 0) + 1);
         if (this._activeTriggerCount() === 1) {
             this._documentScrollListenerCallbackId.set(new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event, parent)));
-            this._observer()?.observe(this.getParent());
+            this._resizeObserverCallbackId.set(new ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement(parent)));
+            this._intersectionObserverCallbackId.set(new IntersectionObserverListener().observe(this.getParent(), (entry) => {
+                if (!entry.isIntersecting) {
+                    this.handleEscape(false);
+                }
+            }));
         }
         this.handleAutoPlacement(parent);
     }
@@ -3651,8 +3871,14 @@ class DBTooltip {
             new DocumentScrollListener().removeCallback(callbackId);
             this._documentScrollListenerCallbackId.set(undefined);
         }
-        this._observer()?.disconnect();
-        this._observer.set(undefined);
+        if (this._resizeObserverCallbackId()) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+            this._resizeObserverCallbackId.set(undefined);
+        }
+        if (this._intersectionObserverCallbackId()) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+            this._intersectionObserverCallbackId.set(undefined);
+        }
         this._activeTriggerCount.set(0);
         const bound = this._boundListeners() ?? [];
         bound.forEach((entry) => {
@@ -3706,7 +3932,6 @@ class DBTooltip {
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.variant = input(...(ngDevMode ? [undefined, { debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.emphasis = input(...(ngDevMode ? [undefined, { debugName: "emphasis" }] : /* istanbul ignore next */ []));
         this.wrap = input(...(ngDevMode ? [undefined, { debugName: "wrap" }] : /* istanbul ignore next */ []));
@@ -3714,12 +3939,14 @@ class DBTooltip {
         this.delay = input(...(ngDevMode ? [undefined, { debugName: "delay" }] : /* istanbul ignore next */ []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
         this.showArrow = input(...(ngDevMode ? [undefined, { debugName: "showArrow" }] : /* istanbul ignore next */ []));
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
         this.text = input(...(ngDevMode ? [undefined, { debugName: "text" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
         this._id = signal(DEFAULT_ID, ...(ngDevMode ? [{ debugName: "_id" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
         this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : /* istanbul ignore next */ []));
-        this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : /* istanbul ignore next */ []));
+        this._intersectionObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_intersectionObserverCallbackId" }] : /* istanbul ignore next */ []));
+        this._resizeObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserverCallbackId" }] : /* istanbul ignore next */ []));
         this._attachedParent = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachedParent" }] : /* istanbul ignore next */ []));
         this._attachedId = signal(undefined, ...(ngDevMode ? [{ debugName: "_attachedId" }] : /* istanbul ignore next */ []));
         this._activeTriggerCount = signal(0, ...(ngDevMode ? [{ debugName: "_activeTriggerCount" }] : /* istanbul ignore next */ []));
@@ -3792,15 +4019,6 @@ class DBTooltip {
                         this._attachedParent.set(parent);
                         this._attachedId.set(this._id());
                     }
-                    if (typeof window !== "undefined" &&
-                        "IntersectionObserver" in window) {
-                        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);
                 }
             }, Number(VERSION.major) < 19
@@ -3863,7 +4081,7 @@ class DBTooltip {
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTooltip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, emphasis: { classPropertyName: "emphasis", publicName: "emphasis", isSignal: true, isRequired: false, transformFunction: null }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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 }, 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: `<i
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTooltip, isStandalone: true, selector: "db-tooltip", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", 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 }, wrap: { classPropertyName: "wrap", publicName: "wrap", 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 }, 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: `<i
     role="tooltip"
     aria-hidden="true"
     data-gap="true"
@@ -3900,7 +4118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
     (click)="handleClick($event)"
     >@if(text()){{{text()}}} <ng-content></ng-content
   ></i> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], emphasis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emphasis", required: false }] }], wrap: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], showArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "showArrow", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$u = {};
 class DBTag {
@@ -4037,7 +4255,7 @@ class DBTag {
       <db-tooltip variant="label">{{getRemoveButtonText()}}</db-tooltip>
     </button>
     }
-  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "placement", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTag, decorators: [{
             type: Component,
@@ -4177,7 +4395,13 @@ class DBCustomSelect {
             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);
+            this._resizeObserverCallbackId.set(new ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement()));
+            this._intersectionObserverCallbackId.set(new IntersectionObserverListener().observe(this.detailsRef().nativeElement, (entry) => {
+                if (!entry.isIntersecting &&
+                    this.detailsRef()?.nativeElement.open) {
+                    this.detailsRef().nativeElement.open = false;
+                }
+            }));
             if (!event.target.dataset["test"]) {
                 // We need this workaround for snapshot testing
                 this.handleOpenByKeyboardFocus();
@@ -4190,7 +4414,12 @@ class DBCustomSelect {
             if (this._documentScrollListenerCallbackId()) {
                 new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
             }
-            this._observer()?.unobserve(this.detailsRef()?.nativeElement);
+            if (this._resizeObserverCallbackId()) {
+                new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+            }
+            if (this._intersectionObserverCallbackId()) {
+                new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+            }
         }
     }
     getNativeSelectValue() {
@@ -4678,13 +4907,14 @@ class DBCustomSelect {
         this._documentClickListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentClickListenerCallbackId" }] : /* istanbul ignore next */ []));
         this._internalChangeTimestamp = signal(0, ...(ngDevMode ? [{ debugName: "_internalChangeTimestamp" }] : /* istanbul ignore next */ []));
         this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : /* istanbul ignore next */ []));
-        this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : /* istanbul ignore next */ []));
+        this._intersectionObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_intersectionObserverCallbackId" }] : /* istanbul ignore next */ []));
+        this._resizeObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserverCallbackId" }] : /* istanbul ignore next */ []));
         this._searchValue = signal(undefined, ...(ngDevMode ? [{ debugName: "_searchValue" }] : /* istanbul ignore next */ []));
         this.selectAllChecked = signal(false, ...(ngDevMode ? [{ debugName: "selectAllChecked" }] : /* istanbul ignore next */ []));
         this.selectAllIndeterminate = signal(false, ...(ngDevMode ? [{ debugName: "selectAllIndeterminate" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** @internal Signal Forms validation state */
         this._validMessage = signal('', ...(ngDevMode ? [{ debugName: "_validMessage" }] : /* istanbul ignore next */ []));
@@ -4693,11 +4923,15 @@ class DBCustomSelect {
         /** Signal Forms alias — maps to 'values' for FormValueControl duck-typing */
         this.value = model(...(ngDevMode ? [undefined, { debugName: "value" }] : /* istanbul ignore next */ []));
         /**
-         * @internal Tracks the origin of the last write to prevent infinite ping-pong.
-         * Convergence is guaranteed by Angular's signal equality check
-         * (setting a signal to the same value does not re-notify dependents).
+         * @internal Tracks the origin of the last write to prevent redundant
+         * re-processing within the same synchronous microtask.
+         * NOTE: The actual infinite-loop prevention relies on Angular's signal
+         * equality check (setting a signal to the same value does not re-notify).
+         * This marker is an optimization to skip unnecessary array conversions.
          */
         this._syncSource = 'none';
+        /** @internal Tracks whether the value alias has been explicitly bound (driven by Signal Forms). */
+        this._valueAliasActive = false;
         /** @internal Sync value → values (Signal Forms writes to value) */
         this._syncValueToValues = effect(() => {
             const v = this.value();
@@ -4705,10 +4939,20 @@ class DBCustomSelect {
                 this._syncSource = 'none';
                 return;
             }
+            // Only sync when the alias is actively driven (not initial undefined from unbound state)
+            if (v === undefined && !this._valueAliasActive) {
+                return;
+            }
+            this._valueAliasActive = true;
             this._syncSource = 'value';
             if (v !== undefined) {
                 this.values.set(Array.isArray(v) ? v : v ? [v] : []);
             }
+            else {
+                // Reset: undefined clears the selection and resets the sync marker
+                // so subsequent user interactions via 'values' are not blocked.
+                this.values.set([]);
+            }
         }, ...(ngDevMode ? [{ debugName: "_syncValueToValues" }] : /* istanbul ignore next */ []));
         /** @internal Sync values → value (CVA/user interaction writes to values) */
         this._syncValuesToValue = effect(() => {
@@ -5088,23 +5332,24 @@ class DBCustomSelect {
         if (typeof window !== "undefined") {
             this.resetIds();
             this._invalidMessage.set(this.invalidMessage() || DEFAULT_INVALID_MESSAGE);
-            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
-                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;
-                        }
-                    }
-                }));
-            }
             this.setupObserver(element);
         }
     }
     ngOnDestroy() {
         this.abortController()?.abort();
+        // Clean up singleton observers if dropdown was open when unmounting
+        if (this._documentClickListenerCallbackId()) {
+            new DocumentClickListener().removeCallback(this._documentClickListenerCallbackId());
+        }
+        if (this._documentScrollListenerCallbackId()) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+        }
+        if (this._resizeObserverCallbackId()) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+        }
+        if (this._intersectionObserverCallbackId()) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+        }
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBCustomSelect, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
@@ -5320,7 +5565,7 @@ class DBCustomSelect {
       role="status"
       >{{_voiceOverFallback()}}</span
     >
-  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "propOverrides", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "propOverrides", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["invalidMessage", "id", "propOverrides", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "accept", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize", "hidden", "errors"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus", "touch"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "propOverrides", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "propOverrides", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label", "hidden", "errors"], outputs: ["checkedChange", "disabledChange", "change", "touch"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "placement", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "text"] }] }); }
+  </div> `, isInline: true, styles: [":host{display:contents}:host([hidden]){display:none!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBTag, selector: "db-tag", inputs: ["removeButton", "id", "propOverrides", "className", "semantic", "emphasis", "icon", "showCheckState", "showIcon", "noText", "overflow", "text", "behavior"], outputs: ["remove"] }, { kind: "component", type: DBCustomSelectDropdown, selector: "db-custom-select-dropdown", inputs: ["id", "propOverrides", "className", "width"] }, { kind: "component", type: DBInput, selector: "db-input", inputs: ["invalidMessage", "id", "propOverrides", "dataListId", "message", "showMessage", "value", "validMessage", "validation", "required", "minLength", "maxLength", "pattern", "dataList", "className", "variant", "showLabel", "showIconLeading", "showIcon", "iconLeading", "icon", "iconTrailing", "showRequiredAsterisk", "showIconTrailing", "label", "fieldSizing", "name", "type", "multiple", "accept", "placeholder", "disabled", "step", "maxlength", "minlength", "max", "min", "readOnly", "readonly", "form", "size", "autocomplete", "autofocus", "enterkeyhint", "inputmode", "ariaDescribedBy", "messageSize", "messageIcon", "validMessageSize", "invalidMessageSize", "hidden", "errors"], outputs: ["valueChange", "disabledChange", "input", "change", "blur", "focus", "touch"] }, { kind: "component", type: DBCustomSelectList, selector: "db-custom-select-list", inputs: ["multiple", "label", "id", "propOverrides", "className"] }, { kind: "component", type: DBCustomSelectListItem, selector: "db-custom-select-list-item", inputs: ["isGroupTitle", "showDivider", "type", "checked", "id", "propOverrides", "className", "groupTitle", "icon", "showIcon", "name", "disabled", "value", "label", "hidden", "errors"], outputs: ["checkedChange", "disabledChange", "change", "touch"] }, { kind: "component", type: DBInfotext, selector: "db-infotext", inputs: ["id", "propOverrides", "className", "icon", "semantic", "size", "wrap", "showIcon", "text"] }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTooltip, selector: "db-tooltip", inputs: ["id", "propOverrides", "variant", "className", "emphasis", "wrap", "animation", "delay", "width", "showArrow", "placement", "text"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBCustomSelect, decorators: [{
             type: Component,
@@ -7501,7 +7746,7 @@ class DBPopover {
         if (article) {
             // This is a workaround for angular
             void delay(() => {
-                handleFixedPopover(article, this._ref()?.nativeElement, this.placement() ?? "bottom");
+                handleFixedPopover(article, this._ref()?.nativeElement);
             }, 1);
         }
     }
@@ -7513,11 +7758,29 @@ class DBPopover {
     }
     handleEnter() {
         this.isExpanded.set(true);
+        // Clean up any existing observers to prevent leaks from repeated enter
+        if (this._documentScrollListenerCallbackId()) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+            this._documentScrollListenerCallbackId.set(undefined);
+        }
+        if (this._resizeObserverCallbackId()) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+            this._resizeObserverCallbackId.set(undefined);
+        }
+        if (this._intersectionObserverCallbackId()) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+            this._intersectionObserverCallbackId.set(undefined);
+        }
         this._documentScrollListenerCallbackId.set(new DocumentScrollListener().addCallback((event) => this.handleDocumentScroll(event)));
         this.handleAutoPlacement();
+        this._resizeObserverCallbackId.set(new ResizeObserverListener().observe(document.documentElement, () => this.handleAutoPlacement()));
         const child = this.getTrigger();
         if (child) {
-            this._observer()?.observe(child);
+            this._intersectionObserverCallbackId.set(new IntersectionObserverListener().observe(child, (entry) => {
+                if (!entry.isIntersecting) {
+                    this.handleEscape(false);
+                }
+            }));
         }
     }
     handleLeave(event) {
@@ -7530,10 +7793,15 @@ class DBPopover {
             this.isExpanded.set(false);
             if (this._documentScrollListenerCallbackId()) {
                 new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+                this._documentScrollListenerCallbackId.set(undefined);
+            }
+            if (this._resizeObserverCallbackId()) {
+                new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+                this._resizeObserverCallbackId.set(undefined);
             }
-            const child = this.getTrigger();
-            if (child) {
-                this._observer()?.unobserve(child);
+            if (this._intersectionObserverCallbackId()) {
+                new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+                this._intersectionObserverCallbackId.set(undefined);
             }
         }
     }
@@ -7577,7 +7845,6 @@ class DBPopover {
     constructor() {
         this.cls = cls;
         this.getBooleanAsString = getBooleanAsString;
-        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
         this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : /* istanbul ignore next */ []));
         this.propOverrides = input(...(ngDevMode ? [undefined, { debugName: "propOverrides" }] : /* istanbul ignore next */ []));
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
@@ -7587,11 +7854,13 @@ class DBPopover {
         this.open = input(...(ngDevMode ? [undefined, { debugName: "open" }] : /* istanbul ignore next */ []));
         this.delay = input(...(ngDevMode ? [undefined, { debugName: "delay" }] : /* istanbul ignore next */ []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        this.placement = input(...(ngDevMode ? [undefined, { debugName: "placement" }] : /* istanbul ignore next */ []));
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
         this.initialized = signal(false, ...(ngDevMode ? [{ debugName: "initialized" }] : /* istanbul ignore next */ []));
         this.isExpanded = signal(false, ...(ngDevMode ? [{ debugName: "isExpanded" }] : /* istanbul ignore next */ []));
         this._documentScrollListenerCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_documentScrollListenerCallbackId" }] : /* istanbul ignore next */ []));
-        this._observer = signal(undefined, ...(ngDevMode ? [{ debugName: "_observer" }] : /* istanbul ignore next */ []));
+        this._intersectionObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_intersectionObserverCallbackId" }] : /* istanbul ignore next */ []));
+        this._resizeObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserverCallbackId" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
@@ -7613,15 +7882,6 @@ class DBPopover {
                     ["mouseleave", "focusout"].forEach((event) => {
                         this._ref()?.nativeElement.addEventListener(event, () => this.handleLeave());
                     });
-                    if (typeof window !== "undefined" &&
-                        "IntersectionObserver" in window) {
-                        this._observer.set(new IntersectionObserver((payload) => {
-                            const entry = payload.find(({ target }) => target === this.getTrigger());
-                            if (entry && !entry.isIntersecting) {
-                                this.handleEscape(false);
-                            }
-                        }));
-                    }
                 }
             }, Number(VERSION.major) < 19
                 ? { allowSignalWrites: true }
@@ -7692,10 +7952,22 @@ class DBPopover {
         }
     }
     ngOnDestroy() {
+        if (this._documentScrollListenerCallbackId()) {
+            new DocumentScrollListener().removeCallback(this._documentScrollListenerCallbackId());
+            this._documentScrollListenerCallbackId.set(undefined);
+        }
+        if (this._resizeObserverCallbackId()) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+            this._resizeObserverCallbackId.set(undefined);
+        }
+        if (this._intersectionObserverCallbackId()) {
+            new IntersectionObserverListener().unobserve(this._intersectionObserverCallbackId());
+            this._intersectionObserverCallbackId.set(undefined);
+        }
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBPopover, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", 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 }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", type: DBPopover, isStandalone: true, selector: "db-popover", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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() ?? propOverrides()?.id"
     [class]="cls('db-popover', className())"
@@ -7736,7 +8008,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       <ng-content></ng-content>
     </article>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], spacing: [{ type: i0.Input, args: [{ isSignal: true, alias: "spacing", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], animation: [{ type: i0.Input, args: [{ isSignal: true, alias: "animation", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "delay", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const defaultProps$h = {};
 class DBRadio {
@@ -7819,7 +8091,7 @@ class DBRadio {
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** Signal Forms touch output — emitted on blur to mark the control as touched */
         this.touch = output();
@@ -8352,7 +8624,7 @@ class DBSelect {
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** @internal Signal Forms validation state */
         this._validMessage = signal('', ...(ngDevMode ? [{ debugName: "_validMessage" }] : /* istanbul ignore next */ []));
@@ -9056,7 +9328,7 @@ class DBSwitch {
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** @internal Signal Forms validation state */
         this._validMessage = signal('', ...(ngDevMode ? [{ debugName: "_validMessage" }] : /* istanbul ignore next */ []));
@@ -9420,7 +9692,7 @@ class DBTabItem {
         this.boundSetSelectedOnChange = signal(undefined, ...(ngDevMode ? [{ debugName: "boundSetSelectedOnChange" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** Signal Forms touch output — emitted on blur to mark the control as touched */
         this.touch = output();
@@ -10971,13 +11243,13 @@ class DBTabs {
                         container.addEventListener("scroll", () => {
                             this.evaluateScrollButtons(container);
                         });
-                        // Use ResizeObserver to re-evaluate scroll buttons because it provides more accurate, container-specific resize detection than global window resize events.
-                        if (!this._resizeObserver()) {
-                            const observer = new ResizeObserver(() => {
+                        // Re-evaluate scroll buttons on container resize because it
+                        // provides more accurate, container-specific resize
+                        // detection than global window resize events.
+                        if (!this._resizeObserverCallbackId()) {
+                            this._resizeObserverCallbackId.set(new ResizeObserverListener().observe(container, () => {
                                 this.evaluateScrollButtons(container);
-                            });
-                            observer.observe(container);
-                            this._resizeObserver.set(observer);
+                            }));
                         }
                     }
                 }
@@ -10986,7 +11258,7 @@ class DBTabs {
     }
     initTabs(init) {
         if (this._ref()?.nativeElement) {
-            const tabItems = Array.from(this._ref()?.nativeElement.getElementsByClassName("db-tab-item"));
+            const tabItems = Array.from(this._ref()?.nativeElement.querySelectorAll(":is(:scope > db-tab-list .db-tab-item, :scope > .db-tab-list .db-tab-item)"));
             const tabPanels = Array.from(this._ref()?.nativeElement.querySelectorAll(":is(:scope > .db-tab-panel, :scope > db-tab-panel > .db-tab-panel)"));
             for (const tabItem of tabItems) {
                 const index = tabItems.indexOf(tabItem);
@@ -11074,6 +11346,8 @@ class DBTabs {
     }
     constructor() {
         this.cls = cls;
+        this.DEFAULT_SCROLL_LEFT = DEFAULT_SCROLL_LEFT;
+        this.DEFAULT_SCROLL_RIGHT = DEFAULT_SCROLL_RIGHT;
         this.name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : /* istanbul ignore next */ []));
         this.tabs = input(...(ngDevMode ? [undefined, { debugName: "tabs" }] : /* istanbul ignore next */ []));
         this.arrowScrollDistance = input(...(ngDevMode ? [undefined, { debugName: "arrowScrollDistance" }] : /* istanbul ignore next */ []));
@@ -11086,6 +11360,8 @@ class DBTabs {
         this.className = input(...(ngDevMode ? [undefined, { debugName: "className" }] : /* istanbul ignore next */ []));
         this.alignment = input(...(ngDevMode ? [undefined, { debugName: "alignment" }] : /* istanbul ignore next */ []));
         this.width = input(...(ngDevMode ? [undefined, { debugName: "width" }] : /* istanbul ignore next */ []));
+        this.scrollLeftText = input(...(ngDevMode ? [undefined, { debugName: "scrollLeftText" }] : /* istanbul ignore next */ []));
+        this.scrollRightText = input(...(ngDevMode ? [undefined, { debugName: "scrollRightText" }] : /* istanbul ignore next */ []));
         this.indexChange = output();
         this.tabSelect = output();
         this._ref = viewChild("_ref", ...(ngDevMode ? [{ debugName: "_ref" }] : /* istanbul ignore next */ []));
@@ -11094,7 +11370,7 @@ class DBTabs {
         this.showScrollLeft = signal(false, ...(ngDevMode ? [{ debugName: "showScrollLeft" }] : /* istanbul ignore next */ []));
         this.showScrollRight = signal(false, ...(ngDevMode ? [{ debugName: "showScrollRight" }] : /* istanbul ignore next */ []));
         this.scrollContainer = signal(null, ...(ngDevMode ? [{ debugName: "scrollContainer" }] : /* istanbul ignore next */ []));
-        this._resizeObserver = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserver" }] : /* istanbul ignore next */ []));
+        this._resizeObserverCallbackId = signal(undefined, ...(ngDevMode ? [{ debugName: "_resizeObserverCallbackId" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         if (typeof window !== "undefined") {
             effect(() => {
@@ -11179,12 +11455,14 @@ class DBTabs {
         }
     }
     ngOnDestroy() {
-        this._resizeObserver()?.disconnect();
-        this._resizeObserver.set(undefined);
+        if (this._resizeObserverCallbackId()) {
+            new ResizeObserverListener().unobserve(this._resizeObserverCallbackId());
+            this._resizeObserverCallbackId.set(undefined);
+        }
         this.observer()?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: DBTabs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: DBTabs, isStandalone: true, selector: "db-tabs", inputs: { 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 }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, propOverrides: { classPropertyName: "propOverrides", publicName: "propOverrides", 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 }, scrollLeftText: { classPropertyName: "scrollLeftText", publicName: "scrollLeftText", isSignal: true, isRequired: false, transformFunction: null }, scrollRightText: { classPropertyName: "scrollRightText", publicName: "scrollRightText", 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() ?? propOverrides()?.id"
     [class]="cls('db-tabs', className())"
@@ -11200,12 +11478,11 @@ class DBTabs {
       variant="ghost"
       icon="chevron_left"
       type="button"
-      className="tabs-scroll-left"
+      className="overflow-scroll-left-button"
       [noText]="true"
       (click)="scroll(true)"
+      >{{scrollLeftText() ?? DEFAULT_SCROLL_LEFT}}</db-button
     >
-      Scroll left
-    </db-button>
     } @if(tabs()){
     <db-tab-list>
       @for (tab of convertTabs();track trackByTab0(index, tab);let index =
@@ -11228,12 +11505,11 @@ class DBTabs {
       variant="ghost"
       icon="chevron_right"
       type="button"
-      className="tabs-scroll-right"
+      className="overflow-scroll-right-button"
       [noText]="true"
       (click)="scroll()"
+      >{{scrollRightText() ?? DEFAULT_SCROLL_RIGHT}}</db-button
     >
-      Scroll right
-    </db-button>
     }
     <ng-content></ng-content>
   </div> `, isInline: true, styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: DBButton, selector: "db-button", inputs: ["type", "commandfor", "id", "propOverrides", "className", "disabled", "iconLeading", "icon", "showIconLeading", "showIcon", "iconTrailing", "showIconTrailing", "size", "width", "variant", "wrap", "noText", "name", "form", "value", "command", "text"], outputs: ["click"] }, { kind: "component", type: DBTabList, selector: "db-tab-list", inputs: ["id", "propOverrides", "className"] }, { kind: "component", type: DBTabItem, selector: "db-tab-item", inputs: ["active", "name", "className", "id", "propOverrides", "iconLeading", "icon", "iconTrailing", "showIconLeading", "showIcon", "showIconTrailing", "noText", "disabled", "checked", "label", "hidden", "errors"], outputs: ["disabledChange", "checkedChange", "change", "touch"] }, { kind: "component", type: DBTabPanel, selector: "db-tab-panel", inputs: ["className", "id", "propOverrides", "content"] }] }); }
@@ -11256,12 +11532,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       variant="ghost"
       icon="chevron_left"
       type="button"
-      className="tabs-scroll-left"
+      className="overflow-scroll-left-button"
       [noText]="true"
       (click)="scroll(true)"
+      >{{scrollLeftText() ?? DEFAULT_SCROLL_LEFT}}</db-button
     >
-      Scroll left
-    </db-button>
     } @if(tabs()){
     <db-tab-list>
       @for (tab of convertTabs();track trackByTab0(index, tab);let index =
@@ -11284,16 +11559,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
       variant="ghost"
       icon="chevron_right"
       type="button"
-      className="tabs-scroll-right"
+      className="overflow-scroll-right-button"
       [noText]="true"
       (click)="scroll()"
+      >{{scrollRightText() ?? DEFAULT_SCROLL_RIGHT}}</db-button
     >
-      Scroll right
-    </db-button>
     }
     <ng-content></ng-content>
   </div> `, styles: [":host{display:contents}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: false }] }], arrowScrollDistance: [{ type: i0.Input, args: [{ isSignal: true, alias: "arrowScrollDistance", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], behavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "behavior", required: false }] }], initialSelectedMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedMode", required: false }] }], initialSelectedIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSelectedIndex", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], propOverrides: [{ type: i0.Input, args: [{ isSignal: true, alias: "propOverrides", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], alignment: [{ type: i0.Input, args: [{ isSignal: true, alias: "alignment", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], scrollLeftText: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollLeftText", required: false }] }], scrollRightText: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollRightText", required: false }] }], indexChange: [{ type: i0.Output, args: ["indexChange"] }], tabSelect: [{ type: i0.Output, args: ["tabSelect"] }], _ref: [{ type: i0.ViewChild, args: ["_ref", { isSignal: true }] }] } });
 
 const TabsBehaviorList = ['scrollbar', 'arrows'];
 const TabsInitialSelectedModeList = ['auto', 'manually'];
@@ -11493,7 +11767,7 @@ class DBTextarea {
         this.abortController = signal(undefined, ...(ngDevMode ? [{ debugName: "abortController" }] : /* istanbul ignore next */ []));
         this.observer = signal(undefined, ...(ngDevMode ? [{ debugName: "observer" }] : /* istanbul ignore next */ []));
         /** Signal Forms optional fields (Duck-Typing compatibility) */
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, { ...(ngDevMode ? { debugName: "hidden" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
         this.errors = input(undefined, ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
         /** @internal Signal Forms validation state */
         this._validMessage = signal('', ...(ngDevMode ? [{ debugName: "_validMessage" }] : /* istanbul ignore next */ []));
@@ -11841,5 +12115,5 @@ const AlignmentList = ['start', 'center', 'end'];
  * Generated bundle index. Do not edit.
  */
 
-export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, 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, DBTable, DBTableBody, DBTableCaption, DBTableColumnsSizeList, DBTableDataCell, DBTableDividerList, DBTableFooter, DBTableHead, DBTableHeaderCell, DBTableHeaderCellScopeList, DBTableMobileVariantList, DBTableRow, DBTableRowSizeList, DBTableRowSubHeaderEmphasisList, DBTableStickyHeaderList, DBTableVariantList, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, 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, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
+export { AccordionBehaviorList, AccordionVariantList, AlignmentList, AutoCompleteList, BadgePlacementList, ButtonTypeList, ButtonVariantList, COLOR, COLORS, COLORS_SIMPLE, COLOR_CONST, COLOR_SIMPLE, CardBehaviorList, CardElevationLevelList, CustomSelectDropdownWidthList, CustomSelectListItemTypeList, DBAccordion, DBAccordionItem, DBBadge, DBBrand, DBButton, DBCard, DBCheckbox, DBCustomButton, 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, DBTable, DBTableBody, DBTableCaption, DBTableColumnsSizeList, DBTableDataCell, DBTableDividerList, DBTableFooter, DBTableHead, DBTableHeaderCell, DBTableHeaderCellScopeList, DBTableMobileVariantList, DBTableRow, DBTableRowSizeList, DBTableRowSubHeaderEmphasisList, DBTableStickyHeaderList, DBTableVariantList, DBTabs, DBTag, DBTextarea, DBTooltip, DB_UX_LOCAL_STORAGE_FRAMEWORK, DB_UX_LOCAL_STORAGE_MODE, 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_SCROLL_LEFT, DEFAULT_SCROLL_RIGHT, DEFAULT_SELECTED, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, DEFAULT_VIEWPORT, DENSITIES, DENSITY, DENSITY_CONST, DESKTOP_VIEWPORT, DividerMarginList, DividerVariantList, DocumentClickListener, DocumentScrollListener, DrawerBackdropList, DrawerDirectionList, DrawerPositionList, DrawerVariantList, EmphasisList, FieldSizingList, GapSpacingList, IconWeightList, InputTypeList, LabelVariantHorizontalList, LabelVariantList, LinkContentList, LinkReferrerPolicyList, LinkSizeList, LinkTargetList, LinkVariantList, MarginList, MaxWidthList, MetaNavigationDirective, NavigationContentDirective, NavigationDirective, NavigationItemSafeTriangle, NotificationAriaLiveList, NotificationLinkVariantList, NotificationVariantList, OrientationList, PageDocumentOverflowList, PageVariantList, PlacementHorizontalList, PlacementList, PlacementVerticalList, PopoverDelayList, PopoverWidthList, SEMANTIC, SEMANTICS, SecondaryActionDirective, SelectedTypeList, SemanticList, SizeList, SpacingList, StackAlignmentList, StackDirectionList, StackJustifyContentList, StackVariantList, TESTING_VIEWPORTS, TabsBehaviorList, TabsInitialSelectedModeList, TagBehaviorList, TextareaResizeList, TextareaWrapList, TooltipVariantList, ValidationList, WidthList, addAttributeToChildren, cls, delay, getBoolean, getBooleanAsString, getFloatingProps, getHideProp, getInputValue, getNotificationRole, getNumber, getOptionKey, getSearchInput, getStep, handleDataOutside, handleFixedDropdown, handleFixedPopover, hasVoiceOver, isArrayOfStrings, isEventTargetNavigationItem, isIOSSafari, isKeyboardEvent, stringPropVisible, uuid };
 //# sourceMappingURL=db-ux-ngx-core-components.mjs.map