@db-ux/wc-core-components 4.4.0 → 4.4.1-floating-components-066d296

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @db-ux/wc-core-components
 
+## 4.4.1
+
+### Patch Changes
+
+- fix: issue with tailwind not reflecting adaptive color changes with `[data-color="xxx"]` - [see commit 936638d](https://github.com/db-ux-design-system/core-web/commit/936638d672bbb6c0f8a0ecf77bf41fafa0e31656)
+
+- DBCustomSelect: Prevent floating label from flickering during initial render - [see commit e5ceff8](https://github.com/db-ux-design-system/core-web/commit/e5ceff861534186cf86d1f5f0a876e04aeac9e41)
+
 ## 4.4.0
 
 ### Minor Changes

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBButton = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBCard = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 var constants = require('./constants-bMY2_d8A.js');
 var formComponents = require('./form-components-LsqVohyb.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBCustomSelectFormField = class {

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

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var documentClickListener = require('./document-click-listener-Bb3Tinb8.js');
 var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
-var floatingComponents = require('./floating-components-ogUqz72V.js');
+var floatingComponents = require('./floating-components-pYaTeNhp.js');
 var formComponents = require('./form-components-LsqVohyb.js');
 
 const DBCustomSelect = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBDivider = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
-var navigation = require('./navigation-DauGE-qj.js');
-require('./floating-components-ogUqz72V.js');
+var navigation = require('./navigation-BztJmEHf.js');
+require('./floating-components-pYaTeNhp.js');
 
 const DBHeader = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBIcon = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBInfotext = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBLink = class {

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
-var navigation = require('./navigation-DauGE-qj.js');
-require('./floating-components-ogUqz72V.js');
+var navigation = require('./navigation-BztJmEHf.js');
+require('./floating-components-pYaTeNhp.js');
 
 const DBNavigationItem = class {
     constructor(hostRef) {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBPage = class {

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

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
-var floatingComponents = require('./floating-components-ogUqz72V.js');
+var floatingComponents = require('./floating-components-pYaTeNhp.js');
 
 const DBPopover = class {
     constructor(hostRef) {
@@ -27,7 +27,7 @@ const DBPopover = class {
         const article = this._ref.querySelector("article");
         if (article) {
             // This is a workaround for angular
-            index$1.delay(() => {
+            void index$1.delay(() => {
                 var _a;
                 floatingComponents.handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);
@@ -166,9 +166,9 @@ const DBPopover = class {
     }
     render() {
         var _a;
-        return (index.h("div", { key: '4d902919abc8bf5b55a617a31424f35582e029c1', class: index$1.cls("db-popover", this.className), ref: (el) => {
+        return (index.h("div", { key: 'b8da95165af96a1486a2a90df63886c98d73ff42', class: index$1.cls("db-popover", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, index.h("slot", { key: '166a0b766f6f0c003e6d7a250fd466267117f59a', name: "trigger" }), index.h("article", { key: '4fa535dc081c76eb21671e0abfb7d090b38e6e5c', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap), "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": index$1.getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: 'ef47687b496cfe4d6cce11ef5d282a2ec3a88004' }))));
+            }, id: this.id }, index.h("slot", { key: 'a8aabd06a96b791d23fa7bc037ad22feff8a370b', name: "trigger" }), index.h("article", { key: 'c349d59d154d8285ac4df1f1093503a65f1cad2d', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": index$1.getBooleanAsString(this.gap), "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": index$1.getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, index.h("slot", { key: '76e4010918fec2ef4f79a6e7a10a79bc9744802a' }))));
     }
     static get watchers() { return {
         "_ref": [{

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBSection = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBStack = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');

package/dist/cjs/db-tab-item_3.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 var constants = require('./constants-bMY2_d8A.js');
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var index$1 = require('./index-CsHqnQII.js');
 
 const DBTabs = class {

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var formComponents = require('./form-components-LsqVohyb.js');

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

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var constants = require('./constants-bMY2_d8A.js');
 var index$1 = require('./index-CsHqnQII.js');
 var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
-var floatingComponents = require('./floating-components-ogUqz72V.js');
+var floatingComponents = require('./floating-components-pYaTeNhp.js');
 
 const DBTooltip = class {
     constructor(hostRef) {
@@ -37,7 +37,7 @@ const DBTooltip = class {
             return;
         if (this._ref) {
             // This is a workaround for angular
-            index$1.delay(() => {
+            void index$1.delay(() => {
                 var _a;
                 // Due to race conditions we need to check for _ref again
                 if (this._ref) {
@@ -102,6 +102,7 @@ const DBTooltip = class {
         if (this._ref && this.initialized && this._id) {
             const parent = this.getParent();
             if (parent) {
+                this.handleAutoPlacement(parent);
                 ["mouseenter", "focusin"].forEach((event) => {
                     parent.addEventListener(event, () => this.handleEnter(parent));
                 });
@@ -139,9 +140,9 @@ const DBTooltip = class {
     }
     render() {
         var _a, _b;
-        return (index.h("i", { key: '4bbec1f80b0912b870b2382cf63c3e1cba11b5e3', class: index$1.cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
+        return (index.h("i", { key: 'e00df6c3323a5e03dcdab1b3b995921cad86a7d9', class: index$1.cls("db-tooltip", this.className), role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: (el) => {
                 this._ref = el;
-            }, id: this._id, "data-emphasis": this.emphasis, "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": index$1.getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: '7bcf79fa968c0a8bef84dd49c71f307c3094072c' })));
+            }, id: this._id, "data-emphasis": this.emphasis, "data-animation": index$1.getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-delay": this.delay, "data-width": this.width, "data-show-arrow": index$1.getBooleanAsString((_b = this.showArrow) !== null && _b !== void 0 ? _b : true), "data-placement": this.placement, onClick: (event) => this.handleClick(event) }, index.h("slot", { key: 'a08164faf64e493d0aebf674478f0125affd7a09' })));
     }
     static get watchers() { return {
         "_ref": [{

package/dist/cjs/db-ux.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.41.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.42.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/{floating-components-ogUqz72V.js → floating-components-pYaTeNhp.js}

@@ -230,10 +230,54 @@ const getFloatingProps = (element, parent, placement) => {
         innerHeight
     };
 };
+const MAX_ANCESTOR_DEPTH = 10;
+const ancestorCache = new WeakMap();
+const getAncestorHasCorrectedPlacement = (element) => {
+    if (ancestorCache.has(element)) {
+        return ancestorCache.get(element);
+    }
+    let current = element.parentElement;
+    let anchor = 0;
+    while (current && anchor < MAX_ANCESTOR_DEPTH) {
+        if (current.dataset['correctedPlacement']) {
+            ancestorCache.set(element, current);
+            return current;
+        }
+        current = current.parentElement;
+        anchor += 1;
+    }
+    ancestorCache.set(element, null);
+    return null;
+};
 const handleFixedPopover = (element, parent, placement) => {
-    var _a;
-    const distance = (_a = getComputedStyle(element).getPropertyValue('--db-popover-distance')) !== null && _a !== void 0 ? _a : '0px';
-    const { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    var _a, _b;
+    const parentComputedStyles = getComputedStyle(parent);
+    const parentHasFloatingPosition = ['absolute', 'fixed'].includes(parentComputedStyles.position);
+    const ancestorWithCorrectedPlacement = getAncestorHasCorrectedPlacement(element);
+    const noFloatingAncestor = !ancestorWithCorrectedPlacement && !parentHasFloatingPosition;
+    const distance = (_b = (_a = getComputedStyle(element)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('--db-popover-distance')) !== null && _b !== void 0 ? _b : '0px';
+    let { top, height, width, childHeight, childWidth, right, left, bottom, correctedPlacement, innerWidth, innerHeight } = getFloatingProps(element, parent, placement);
+    if (ancestorWithCorrectedPlacement) {
+        const ancestorRect = ancestorWithCorrectedPlacement.getBoundingClientRect();
+        left = Math.abs(left - ancestorRect.left);
+        right = (width + Math.abs(right - ancestorRect.right)) * 1.5; // We add a transform -50% later
+        top = Math.abs(top - ancestorRect.top);
+        bottom = (height + Math.abs(bottom - ancestorRect.bottom)) * 1.5; // We add a transform -50% later
+    }
+    if (parentHasFloatingPosition) {
+        /*
+         * If we have a floating element inside an element with position:absolute/fixed
+         * we need to calculate with relative values
+         * */
+        left = 0;
+        right = width;
+        top = 0;
+        bottom = height;
+        if (['auto', 'inherit', '0'].includes(parentComputedStyles.zIndex)) {
+            // We need the default zIndex for floating elements on the parent
+            parent.style.zIndex = '1';
+        }
+    }
     // Tooltip arrow position
     if (childWidth > width && (correctedPlacement.startsWith('bottom') || correctedPlacement.startsWith('top'))) {
         const diff = width / 2 / childWidth * 100;
@@ -243,6 +287,9 @@ const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-inline-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-inline-start', `50%`);
+        }
     }
     if (childHeight > height && (correctedPlacement.startsWith('left') || correctedPlacement.startsWith('bottom'))) {
         const diff = height / 2 / childHeight * 100;
@@ -252,6 +299,9 @@ const handleFixedPopover = (element, parent, placement) => {
         else if (correctedPlacement.endsWith('end')) {
             element.style.setProperty('--db-tooltip-arrow-block-start', `${100 - diff}%`);
         }
+        else {
+            element.style.setProperty('--db-tooltip-arrow-block-start', `50%`);
+        }
     }
     // Popover position
     if (correctedPlacement === 'right' || correctedPlacement === 'left') {
@@ -261,11 +311,11 @@ const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'right-start' || correctedPlacement === 'left-start') {
         const end = top + childHeight;
         element.style.insetBlockStart = `${top}px`;
-        element.style.insetBlockEnd = `${end > innerHeight ? innerHeight : end}px`;
+        element.style.insetBlockEnd = `${!parentHasFloatingPosition && end > innerHeight ? innerHeight : end}px`;
     }
     else if (correctedPlacement === 'right-end' || correctedPlacement === 'left-end') {
         const start = bottom - childHeight;
-        element.style.insetBlockStart = `${start < 0 ? 0 : start}px`;
+        element.style.insetBlockStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
         element.style.insetBlockEnd = `${bottom}px`;
     }
     else if (correctedPlacement === 'top' || correctedPlacement === 'bottom') {
@@ -275,32 +325,32 @@ const handleFixedPopover = (element, parent, placement) => {
     else if (correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
         const end = left + childWidth;
         element.style.insetInlineStart = `${left}px`;
-        element.style.insetInlineEnd = `${end > innerWidth ? innerWidth : end}px`;
+        element.style.insetInlineEnd = `${!parentHasFloatingPosition && end > innerWidth ? innerWidth : end}px`;
     }
     else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        const start = left - childWidth;
-        element.style.insetInlineStart = `${right - childWidth}px`;
-        element.style.insetInlineEnd = `${start < 0 ? 0 : start}px`;
+        const start = right - childWidth;
+        element.style.insetInlineStart = `${!parentHasFloatingPosition && start < 0 ? 0 : start}px`;
+        element.style.insetInlineEnd = `${right}px`;
     }
     if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('right')) {
         const end = right + childWidth;
         element.style.insetInlineStart = `calc(${right}px + ${distance})`;
-        element.style.insetInlineEnd = `calc(${end > innerWidth ? innerWidth : end}px + ${distance})`;
+        element.style.insetInlineEnd = `calc(${noFloatingAncestor && end > innerWidth ? innerWidth : end}px + ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('left')) {
         const start = left - childWidth;
-        element.style.insetInlineStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetInlineStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
         element.style.insetInlineEnd = `calc(${right}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
         const start = top - childHeight;
-        element.style.insetBlockStart = `calc(${start < 0 ? 0 : start}px - ${distance})`;
-        element.style.insetBlockEnd = `calc(${bottom}px - ${distance})`;
+        element.style.insetBlockStart = `calc(${noFloatingAncestor && start < 0 ? 0 : start}px - ${distance})`;
+        element.style.insetBlockEnd = `calc(${parentHasFloatingPosition ? start : bottom}px - ${distance})`;
     }
     else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
         const end = bottom + childHeight;
-        element.style.insetBlockStart = `calc(${bottom}px + ${distance})`;
-        element.style.insetBlockEnd = `calc(${end > innerHeight ? innerHeight : end}px + ${distance})`;
+        element.style.insetBlockStart = `calc(${parentHasFloatingPosition ? end : bottom}px + ${distance})`;
+        element.style.insetBlockEnd = `calc(${noFloatingAncestor && end > innerHeight ? innerHeight : end}px + ${distance})`;
     }
     element.style.position = 'fixed';
     element.dataset['correctedPlacement'] = correctedPlacement;

package/dist/cjs/{index-DjRSp6-m.js → index-Bi4QN5oK.js}

@@ -4,7 +4,7 @@ const NAMESPACE = 'db-ux';
 const BUILD = /* db-ux */ { hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, shadowDom: false, slotRelocation: true, state: true, updatable: true};
 
 /*
- Stencil Client Platform v4.41.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Platform v4.42.0 | MIT Licensed | https://stenciljs.com
  */
 
 var reWireGetterSetter = (instance, hostRef) => {
@@ -500,6 +500,23 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
         plt.ael(elm, memberName, newValue, capture);
       }
     }
+  } else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
+    const attrName = memberName.slice(5);
+    if (newValue == null || newValue === false) {
+      if (newValue !== false || elm.getAttribute(attrName) === "") {
+        elm.removeAttribute(attrName);
+      }
+    } else {
+      elm.setAttribute(attrName, newValue === true ? "" : newValue);
+    }
+    return;
+  } else if (memberName[0] === "p" && memberName.startsWith("prop:")) {
+    const propName = memberName.slice(5);
+    try {
+      elm[propName] = newValue;
+    } catch (e) {
+    }
+    return;
   } else {
     const isComplex = isComplexType(newValue);
     if ((isProp || isComplex && newValue !== null) && true) {
@@ -508,7 +525,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
           const n = newValue == null ? "" : newValue;
           if (memberName === "list") {
             isProp = false;
-          } else if (oldValue == null || elm[memberName] != n) {
+          } else if (oldValue == null || elm[memberName] !== n) {
             if (typeof elm.__lookupSetter__(memberName) === "function") {
               elm[memberName] = n;
             } else {

package/dist/cjs/index.cjs.js

@@ -4,8 +4,8 @@ var constants = require('./constants-bMY2_d8A.js');
 var index = require('./index-CsHqnQII.js');
 var documentClickListener = require('./document-click-listener-Bb3Tinb8.js');
 var documentScrollListener = require('./document-scroll-listener-unypEU42.js');
-var floatingComponents = require('./floating-components-ogUqz72V.js');
-var navigation = require('./navigation-DauGE-qj.js');
+var floatingComponents = require('./floating-components-pYaTeNhp.js');
+var navigation = require('./navigation-BztJmEHf.js');
 
 const AccordionVariantList = ['divider', 'card'];
 const AccordionBehaviorList = ['multiple', 'single'];

package/dist/cjs/loader.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjRSp6-m.js');
+var index = require('./index-Bi4QN5oK.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {

package/dist/cjs/{navigation-DauGE-qj.js → navigation-BztJmEHf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var floatingComponents = require('./floating-components-ogUqz72V.js');
+var floatingComponents = require('./floating-components-pYaTeNhp.js');
 
 const isEventTargetNavigationItem = (event) => {
     var _a, _b;

package/dist/collection/collection-manifest.json

@@ -39,7 +39,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.41.3",
+    "version": "4.42.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/popover/popover.js

@@ -27,7 +27,7 @@ export class DBPopover {
         const article = this._ref.querySelector("article");
         if (article) {
             // This is a workaround for angular
-            utilsDelay(() => {
+            void utilsDelay(() => {
                 var _a;
                 handleFixedPopover(article, this._ref, (_a = this.placement) !== null && _a !== void 0 ? _a : "bottom");
             }, 1);
@@ -166,9 +166,9 @@ export class DBPopover {
     }
     render() {
         var _a;
-        return (h("div", { key: '4d902919abc8bf5b55a617a31424f35582e029c1', class: cls("db-popover", this.className), ref: (el) => {
+        return (h("div", { key: 'b8da95165af96a1486a2a90df63886c98d73ff42', class: cls("db-popover", this.className), ref: (el) => {
                 this._ref = el;
-            }, id: this.id }, h("slot", { key: '166a0b766f6f0c003e6d7a250fd466267117f59a', name: "trigger" }), h("article", { key: '4fa535dc081c76eb21671e0abfb7d090b38e6e5c', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: 'ef47687b496cfe4d6cce11ef5d282a2ec3a88004' }))));
+            }, id: this.id }, h("slot", { key: 'a8aabd06a96b791d23fa7bc037ad22feff8a370b', name: "trigger" }), h("article", { key: 'c349d59d154d8285ac4df1f1093503a65f1cad2d', class: "db-popover-content", "data-spacing": this.spacing, "data-gap": getBooleanAsString(this.gap), "data-animation": getBooleanAsString((_a = this.animation) !== null && _a !== void 0 ? _a : true), "data-open": getBooleanAsString(this.open), "data-delay": this.delay, "data-width": this.width, "data-placement": this.placement }, h("slot", { key: '76e4010918fec2ef4f79a6e7a10a79bc9744802a' }))));
     }
     static get is() { return "db-popover"; }
     static get properties() {