@db-ux/wc-core-components 4.12.0 → 4.12.1

package/dist/collection/components/custom-select/custom-select.js

@@ -429,6 +429,7 @@ export class DBCustomSelect {
         }
     }
     handleSearch(valueOrEvent) {
+        var _a;
         if (valueOrEvent === undefined) {
             return;
         }
@@ -457,6 +458,9 @@ export class DBCustomSelect {
                     .toLowerCase()
                     .includes(filterText.toLowerCase()));
         }
+        if ((_a = this.detailsRef) === null || _a === void 0 ? void 0 : _a.open) {
+            this.handleAutoPlacement();
+        }
     }
     handleClearAll(event) {
         event.stopPropagation();
@@ -686,10 +690,14 @@ export class DBCustomSelect {
         this.watch11Fn();
     }
     watch12Fn() {
-        var _a, _b;
+        var _a, _b, _c;
         this._options = this.options;
         this.amountOptions =
             (_b = (_a = this.options) === null || _a === void 0 ? void 0 : _a.filter((option) => !option.isGroupTitle).length) !== null && _b !== void 0 ? _b : 0;
+        // Reposition open auto-width dropdowns: replacing options can change their content width.
+        if ((_c = this.detailsRef) === null || _c === void 0 ? void 0 : _c.open) {
+            this.handleAutoPlacement();
+        }
     }
     watch12() {
         this.watch12Fn();
@@ -830,19 +838,19 @@ export class DBCustomSelect {
     }
     render() {
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
-        return (h("div", { key: '83046fc855d23b9e678b3439a05a837849dffff1', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
+        return (h("div", { key: '9f804bd057ef9cde5cc83263e5b1e3a477ad5d2e', class: cls("db-custom-select", this.className), id: this._id, ref: (el) => {
                 this._ref = el;
             }, "aria-invalid": this._validity === "invalid", "data-custom-validity": this._validity, "data-width": this.formFieldWidth, "data-variant": this.variant === "floating" &&
                 this.selectedType === "tag" &&
                 this.multiple
                 ? "above"
-                : this.variant, "data-required": getBooleanAsString(this.required, "required"), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '015ece24c6eafe5d148749641fa045cc40e3352c', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '1472fec486eaa5abf3103037c1ab3beb94001f4f', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
+                : this.variant, "data-required": getBooleanAsString(this.required, "required"), "data-hide-asterisk": getHideProp(this.showRequiredAsterisk), "data-placement": this.placement, "data-selected-type": this.multiple ? this.selectedType : "text", "data-hide-label": getHideProp(this.showLabel), "data-icon": this.icon, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon") }, h("label", { key: '1ce826237b63c3abfad8b55068c25fdc4acc2d7a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: '9f16da6b3d9e633e4ce70e8654925df86a901074', role: "none", hidden: true, id: this._selectId, tabIndex: -1, ref: (el) => {
                 this.selectRef = el;
             }, form: this.form, name: this.name, "data-custom-validity": this._validity, multiple: getBoolean(this.multiple, "multiple"), disabled: getBoolean(this.disabled, "disabled"), required: getBoolean(this.required, "required"), onChange: (event) => this.satisfyReact(event) }, ((_b = this.options) === null || _b === void 0 ? void 0 : _b.length)
             ? (_c = this.options) === null || _c === void 0 ? void 0 : _c.map((option) => (h("option", { disabled: option.disabled, value: option.value, key: undefined }, this.getOptionLabel(option))))
-            : null)), h("details", { key: 'da28a110e387920a7ca6b7bb20e367d6aab2e7e5', ref: (el) => {
+            : null)), h("details", { key: '6a88c236898236ee539bced6fa3b3918be8f693d', ref: (el) => {
                 this.detailsRef = el;
-            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: 'a9708a4d0dc7e24e3a2a0a5790b7bdf1f6d9c711' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
+            }, open: this.open, onToggle: (event) => this.handleDropdownToggle(event), onKeyDown: (event) => this.handleKeyboardPress(event) }, h("slot", { key: 'c9dd3e30dd094da51de1b2064749a211fef6eb36' }), this.options ? (h(Fragment, null, h("summary", { class: "db-custom-select-form-field", id: this._summaryId, "aria-disabled": getBooleanAsString(this.disabled, "disabled"), tabIndex: this.disabled ? -1 : undefined, "aria-labelledby": this._labelId }, ((_d = this._selectedLabels) === null || _d === void 0 ? void 0 : _d.length) ? (h("span", { "data-visually-hidden": getBooleanAsString(this.selectedType === "tag", "selectedType"), id: this._selectedLabelsId }, this.selectedPrefix ? (h("span", { "data-visually-hidden": "true" }, this.selectedPrefix)) : null, this._selectedLabels)) : null, this.selectedType === "tag" ? (h("div", null, (_e = this._selectedOptions) === null || _e === void 0 ? void 0 : _e.map((option) => (h("db-tag", { emphasis: "strong", behavior: "removable", removeButton: this.getTagRemoveLabel(option), onRemove: (event) => this.handleTagRemove(option, event), key: undefined }, this.getOptionLabel(option)))))) : null), h("db-custom-select-dropdown", { width: this.dropdownWidth }, this.searchEnabled ? (h("div", null, h("db-input", { type: "search", ref: (el) => {
                 this.searchInputRef = el;
             }, name: this._id, form: this._id, showLabel: false, value: this._searchValue, label: (_f = this.searchLabel) !== null && _f !== void 0 ? _f : DEFAULT_LABEL, placeholder: (_g = this.searchPlaceholder) !== null && _g !== void 0 ? _g : this.searchLabel, ariaDescribedBy: this._hasNoOptions || this.showLoading
                 ? this._infoTextId
@@ -852,7 +860,7 @@ export class DBCustomSelect {
                 this.selectAllRef = el;
             }, form: this._id, checked: this.selectAllChecked, onChange: (event) => this.handleSelectAll(event) }), this.getSelectAllLabel())))) : null, h("db-custom-select-list", { multiple: getBoolean(this.multiple, "multiple"), label: (_k = (_j = this.listLabel) !== null && _j !== void 0 ? _j : this.label) !== null && _k !== void 0 ? _k : DEFAULT_LABEL }, (_l = this._options) === null || _l === void 0 ? void 0 : _l.map((option) => (h("db-custom-select-list-item", { type: this.multiple ? "checkbox" : "radio", showDivider: option.showDivider, icon: option.icon, isGroupTitle: option.isGroupTitle, groupTitle: this.getOptionLabel(option), name: this._id, checked: this.getOptionChecked(option.value), disabled: option.disabled, value: option.value, onChange: () => this.handleSelect(option.value), key: undefined }, !option.isGroupTitle
             ? this.getOptionLabel(option)
-            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '2239de0c36c6289a623146c363987b1874e468cc', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: '55fe7e28b2124a471bc814601925cdf86abd8178', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: '294d2fad5268e30791745abee8589d5266524807', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
+            : null)))))), h("div", null, h("db-button", { variant: "ghost", width: "full", icon: "cross", size: "small", name: this._id, form: this._id, onClick: () => this.handleClose(undefined, true) }, (_m = this.mobileCloseButtonText) !== null && _m !== void 0 ? _m : DEFAULT_CLOSE_BUTTON))))) : null), ((_o = this.showClearSelection) !== null && _o !== void 0 ? _o : true) && ((_p = this._values) === null || _p === void 0 ? void 0 : _p.length) ? (h("db-button", { icon: "cross", variant: "ghost", size: "small", noText: true, name: this._id, form: this._id, disabled: getBoolean(this.disabled, "disabled"), onClick: (event) => this.handleClearAll(event) }, this.clearSelectionText, h("db-tooltip", { placement: "top" }, this.clearSelectionText))) : null, h("span", { key: '3210abcd9df6f8232346aa78def9e3bd078f35db', class: "db-custom-select-placeholder", "aria-hidden": "true", id: this._placeholderId }, (_q = this.placeholder) !== null && _q !== void 0 ? _q : this.label), stringPropVisible(this.message, this.showMessage) ? (h("db-infotext", { size: "small", icon: this.messageIcon, id: this._messageId }, this.message)) : null, this.hasValidState() ? (h("db-infotext", { size: "small", semantic: "successful", id: this._validMessageId }, this.validMessage || DEFAULT_VALID_MESSAGE)) : null, h("db-infotext", { key: 'a552df2b93f899230e80623e2014691e411c3b40', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'b29045acf1f702b90b434dc4aa9d589c0c6c57f5', "data-visually-hidden": "true", role: "status" }, this._voiceOverFallback)));
     }
     static get is() { return "db-custom-select"; }
     static get properties() {

package/dist/collection/components/custom-select-list-item/custom-select-list-item.js

@@ -110,7 +110,7 @@ export class DBCustomSelectListItem {
                 "db-radio": this.type !== "checkbox" && !this.isGroupTitle,
             }), ref: (el) => {
                 this._ref = el;
-            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-divider": getBooleanAsString(this.hasDivider, "hasDivider") }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), this.label ? this.label : null, h("slot", null))) : (h("span", null, this.groupTitle))));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-divider": getBooleanAsString(this.hasDivider, "hasDivider") }, !this.isGroupTitle ? (h("label", { "data-icon": this.type !== "checkbox" && this.icon ? this.icon : undefined, "data-show-icon": getBooleanAsString(this.showIcon, "showIcon"), "data-icon-trailing": this.getIconTrailing() }, h("input", { class: "db-custom-select-list-item-checkbox", "data-disable-focus": "true", type: this.type, name: this.name, form: this.name, checked: getBoolean(this.checked, "checked"), disabled: getBoolean(this.disabled, "disabled"), value: this.value, onChange: (event) => this.handleChange(event) }), h("span", { class: "db-custom-select-list-item-label" }, this.label ? this.label : null, h("slot", null)))) : (h("span", null, this.groupTitle))));
     }
     static get is() { return "db-custom-select-list-item"; }
     static get properties() {

package/dist/collection/components/drawer/drawer.js

@@ -8,8 +8,22 @@ import { h } from "@stencil/core";
 export class DBDrawer {
     constructor() {
         this.initialized = false;
+        this.backdropPointerDown = false;
         this.observer = undefined;
     }
+    isNotModal() {
+        return (this.position === "absolute" ||
+            this.backdrop === "none" ||
+            this.variant === "inside");
+    }
+    handleBackdropPointerDown(event) {
+        var _a;
+        // Remember whether the pointer interaction started on the backdrop
+        // (the DIALOG element itself) so we only close on a real backdrop
+        // click and not when a drag started inside the content and ended
+        // on the backdrop.
+        this.backdropPointerDown = ((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG";
+    }
     handleClose(event, forceClose) {
         var _a;
         if (!event)
@@ -31,11 +45,15 @@ export class DBDrawer {
             }
             if (((_a = event.target) === null || _a === void 0 ? void 0 : _a.nodeName) === "DIALOG" &&
                 event.type === "click" &&
-                this.backdrop !== "none") {
+                this.backdrop !== "none" &&
+                this.backdropPointerDown) {
                 if (this.close) {
                     this.close.emit(event);
                 }
             }
+            // Reset after handling the click so the next interaction
+            // starts from a clean state.
+            this.backdropPointerDown = false;
         }
     }
     handleDialogOpen() {
@@ -45,12 +63,15 @@ export class DBDrawer {
                 if (this.dialogContainerRef) {
                     this.dialogContainerRef.removeAttribute("data-transition");
                 }
-                if (this.position === "absolute" ||
-                    this.backdrop === "none" ||
-                    this.variant === "inside") {
+                if (this.isNotModal()) {
                     this._ref.show();
                 }
                 else {
+                    // Set the closedby attribute imperatively: the JSX
+                    // dialog type does not know this attribute yet, and it
+                    // only applies to modal dialogs. "any" enables native
+                    // light dismiss (backdrop click / Esc).
+                    this._ref.setAttribute("closedby", "any");
                     this._ref.showModal();
                 }
                 void delay(() => {
@@ -177,11 +198,11 @@ export class DBDrawer {
     }
     render() {
         var _a, _b, _c;
-        return (h("dialog", { key: 'da82f7380e7d7e4fcad45db3ba3ec83b02b2c197', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
+        return (h("dialog", { key: 'c03126193778f601b7ff3aeeeff508c8920e67a7', class: "db-drawer", id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, ref: (el) => {
                 this._ref = el;
-            }, onClick: (event) => this.handleClose(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: '2cf07ab412c07ee52693bc274e672e162fcfdb6a', class: cls("db-drawer-container", this.className), ref: (el) => {
+            }, onClick: (event) => this.handleClose(event), onMouseDown: (event) => this.handleBackdropPointerDown(event), onKeyDown: (event) => this.handleClose(event), "data-position": this.position, "data-backdrop": this.backdrop, "data-direction": this.direction, "data-variant": this.variant }, h("article", { key: '64661349d858bf5be872d664b44bc6fa829014e6', class: cls("db-drawer-container", this.className), ref: (el) => {
                 this.dialogContainerRef = el;
-            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: 'e157aa7d79396cba7dc80d9b28cfcf0bbd5023f9', class: "db-drawer-header" }, h("div", { key: '8297856ab0be4390b13de2331993615a777d0fb0', class: "db-drawer-header-text" }, h("slot", { key: '171f6828f42cdea289e09dd7700561d35df8fe71', name: "drawerHeader" })), h("db-button", { key: 'c066db25db7b90abdd4f4cd169257a7f1f523a47', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: 'd25e9aab5c3a65028599e09d0cb0c8e9b714b459', class: "db-drawer-content" }, h("slot", { key: '77cb41d2176ca55ead3ad1f4dd58605864bf8d6a' })))));
+            }, "data-spacing": this.spacing, "data-width": this.width, "data-direction": this.direction, "data-rounded": getBooleanAsString(this.rounded, "rounded") }, h("header", { key: 'b758a538b1337573090305aadcf3bc3befef1bf3', class: "db-drawer-header" }, h("div", { key: '235f2be7afc9c968b9270178c2720a5a50436123', class: "db-drawer-header-text" }, h("slot", { key: '26787a5e103d2d34785ce1eccd0ff73b6733fce8', name: "drawerHeader" })), h("db-button", { key: '1d22b406c4e235e91bc9bfc3265a0aaa9c7f8e8c', class: "button-close-drawer", icon: "cross", variant: "ghost", id: this.closeButtonId, noText: true, onClick: (event) => this.handleClose(event, true) }, (_c = this.closeButtonText) !== null && _c !== void 0 ? _c : DEFAULT_CLOSE_BUTTON)), h("div", { key: '0e338b2e11c8582ba59595f34d8fc4911db7025e', class: "db-drawer-content" }, h("slot", { key: 'c761758ada4d1602878a58de6003e01cf5b5d075' })))));
     }
     static get is() { return "db-drawer"; }
     static get properties() {
@@ -527,6 +548,7 @@ export class DBDrawer {
     static get states() {
         return {
             "initialized": {},
+            "backdropPointerDown": {},
             "observer": {}
         };
     }

package/dist/collection/utils/floating-components.js

@@ -62,24 +62,69 @@ export const handleDataOutside = (el) => {
 export const handleFixedDropdown = (element, parent, placement) => {
     if (!element || !parent)
         return;
-    // We skip this if we are in mobile it's already fixed
+    const fullWidth = element.dataset['width'] === 'full';
+    const autoWidth = element.dataset['width'] === 'auto';
+    // Reset width-specific inline styles first so a previous mode (e.g. "auto")
+    // doesn't leave a stale minInlineSize/inlineSize behind when the dropdown
+    // width changes at runtime. This must happen before getFloatingProps
+    // measures the element, otherwise the dropdown would be measured with a
+    // width it no longer has and positioned incorrectly. It also has to run
+    // before the mobile bailout below: otherwise a desktop minInlineSize would
+    // survive into the mobile sheet, where CSS min-inline-size beats the
+    // 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')
         return;
-    const { top, bottom, childHeight, childWidth, width, right, left, correctedPlacement } = getFloatingProps(element, parent, placement);
-    const fullWidth = element.dataset['width'] === 'full';
+    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
+    // the max when the minimum is larger, so a trigger wider than the viewport
+    // limit would otherwise drop the side margins or overflow horizontally.
+    let autoMinWidth = width;
+    if (autoWidth) {
+        const maxInlineSize = parseFloat(getComputedStyle(element).maxInlineSize);
+        if (!isNaN(maxInlineSize) && maxInlineSize > 0) {
+            autoMinWidth = Math.min(width, maxInlineSize);
+        }
+    }
     if (fullWidth) {
         element.style.inlineSize = `${width}px`;
     }
-    if (correctedPlacement === 'top' || correctedPlacement === 'bottom' || correctedPlacement === 'top-start' || correctedPlacement === 'bottom-start') {
+    else if (autoWidth) {
+        element.style.minInlineSize = `${autoMinWidth}px`;
+    }
+    // getFloatingProps measured childWidth before the inline styles were
+    // (re)applied, so use the width the dropdown will actually have:
+    // - auto: the clamped minimum, so end-aligned dropdowns don't extend past
+    //   the trigger's right edge.
+    // - full: the trigger width (the reset above drops it to content width).
+    let effectiveChildWidth = childWidth;
+    if (autoWidth) {
+        effectiveChildWidth = Math.max(childWidth, autoMinWidth);
+    }
+    else if (fullWidth) {
+        effectiveChildWidth = width;
+    }
+    // getFloatingProps detects horizontal overflow assuming a centered element
+    // (it halves childWidth). The dropdown is actually start-aligned (inset =
+    // left), so for the wider auto dropdown re-check overflow against its full
+    // width and flip to end-alignment when it would extend past the viewport.
+    let dropdownPlacement = correctedPlacement;
+    if (autoWidth && (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') && left + effectiveChildWidth > innerWidth) {
+        dropdownPlacement = dropdownPlacement.startsWith('top') ? 'top-end' : 'bottom-end';
+    }
+    if (dropdownPlacement === 'top' || dropdownPlacement === 'bottom' || dropdownPlacement === 'top-start' || dropdownPlacement === 'bottom-start') {
         element.style.insetInlineStart = `${left}px`;
     }
-    else if (correctedPlacement === 'top-end' || correctedPlacement === 'bottom-end') {
-        element.style.insetInlineStart = `${right - childWidth}px`;
+    else if (dropdownPlacement === 'top-end' || dropdownPlacement === 'bottom-end') {
+        element.style.insetInlineStart = `${Math.max(right - effectiveChildWidth, 0)}px`;
     }
-    if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('top')) {
+    if (dropdownPlacement === null || dropdownPlacement === void 0 ? void 0 : dropdownPlacement.startsWith('top')) {
         element.style.insetBlockStart = `${top - childHeight}px`;
     }
-    else if (correctedPlacement === null || correctedPlacement === void 0 ? void 0 : correctedPlacement.startsWith('bottom')) {
+    else if (dropdownPlacement === null || dropdownPlacement === void 0 ? void 0 : dropdownPlacement.startsWith('bottom')) {
         element.style.insetBlockStart = `${bottom}px`;
     }
     element.style.position = 'fixed';

package/dist/custom-elements.json

@@ -10817,11 +10817,35 @@
               },
               "default": "false"
             },
+            {
+              "kind": "field",
+              "name": "backdropPointerDown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "observer",
               "default": "undefined"
             },
+            {
+              "kind": "method",
+              "name": "isNotModal"
+            },
+            {
+              "kind": "method",
+              "name": "handleBackdropPointerDown",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "any"
+                  }
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "handleClose",
@@ -26679,7 +26703,7 @@
           "name": "CustomButtonCheckbox",
           "declaration": {
             "name": "CustomButtonCheckbox",
-            "module": "src/components/custom-button/examples/checkbox.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/checkbox.example.tsx"
           }
         },
         {
@@ -26687,7 +26711,7 @@
           "name": "custom-button-checkbox",
           "declaration": {
             "name": "CustomButtonCheckbox",
-            "module": "src/components/custom-button/examples/checkbox.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/checkbox.example.tsx"
           }
         }
       ]
@@ -26754,7 +26778,7 @@
           "name": "CustomButtonDensity",
           "declaration": {
             "name": "CustomButtonDensity",
-            "module": "src/components/custom-button/examples/density.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/density.example.tsx"
           }
         },
         {
@@ -26762,7 +26786,7 @@
           "name": "custom-button-density",
           "declaration": {
             "name": "CustomButtonDensity",
-            "module": "src/components/custom-button/examples/density.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/density.example.tsx"
           }
         }
       ]
@@ -26829,7 +26853,7 @@
           "name": "CustomButtonDisabled",
           "declaration": {
             "name": "CustomButtonDisabled",
-            "module": "src/components/custom-button/examples/disabled.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/disabled.example.tsx"
           }
         },
         {
@@ -26837,7 +26861,7 @@
           "name": "custom-button-disabled",
           "declaration": {
             "name": "CustomButtonDisabled",
-            "module": "src/components/custom-button/examples/disabled.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/disabled.example.tsx"
           }
         }
       ]
@@ -26904,7 +26928,7 @@
           "name": "CustomButtonMultiLineText",
           "declaration": {
             "name": "CustomButtonMultiLineText",
-            "module": "src/components/custom-button/examples/multi-line-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/multi-line-text.example.tsx"
           }
         },
         {
@@ -26912,7 +26936,7 @@
           "name": "custom-button-multi-line-text",
           "declaration": {
             "name": "CustomButtonMultiLineText",
-            "module": "src/components/custom-button/examples/multi-line-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/multi-line-text.example.tsx"
           }
         }
       ]
@@ -26979,7 +27003,7 @@
           "name": "CustomButtonNoText",
           "declaration": {
             "name": "CustomButtonNoText",
-            "module": "src/components/custom-button/examples/no-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/no-text.example.tsx"
           }
         },
         {
@@ -26987,7 +27011,7 @@
           "name": "custom-button-no-text",
           "declaration": {
             "name": "CustomButtonNoText",
-            "module": "src/components/custom-button/examples/no-text.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/no-text.example.tsx"
           }
         }
       ]
@@ -27054,7 +27078,7 @@
           "name": "CustomButtonShowIconLeading",
           "declaration": {
             "name": "CustomButtonShowIconLeading",
-            "module": "src/components/custom-button/examples/show-icon-leading.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-leading.example.tsx"
           }
         },
         {
@@ -27062,7 +27086,7 @@
           "name": "custom-button-show-icon-leading",
           "declaration": {
             "name": "CustomButtonShowIconLeading",
-            "module": "src/components/custom-button/examples/show-icon-leading.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-leading.example.tsx"
           }
         }
       ]
@@ -27129,7 +27153,7 @@
           "name": "CustomButtonShowIconTrailing",
           "declaration": {
             "name": "CustomButtonShowIconTrailing",
-            "module": "src/components/custom-button/examples/show-icon-trailing.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-trailing.example.tsx"
           }
         },
         {
@@ -27137,7 +27161,7 @@
           "name": "custom-button-show-icon-trailing",
           "declaration": {
             "name": "CustomButtonShowIconTrailing",
-            "module": "src/components/custom-button/examples/show-icon-trailing.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/show-icon-trailing.example.tsx"
           }
         }
       ]
@@ -27204,7 +27228,7 @@
           "name": "CustomButtonSize",
           "declaration": {
             "name": "CustomButtonSize",
-            "module": "src/components/custom-button/examples/size.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/size.example.tsx"
           }
         },
         {
@@ -27212,7 +27236,7 @@
           "name": "custom-button-size",
           "declaration": {
             "name": "CustomButtonSize",
-            "module": "src/components/custom-button/examples/size.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/size.example.tsx"
           }
         }
       ]
@@ -27279,7 +27303,7 @@
           "name": "CustomButtonVariant",
           "declaration": {
             "name": "CustomButtonVariant",
-            "module": "src/components/custom-button/examples/variant.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/variant.example.tsx"
           }
         },
         {
@@ -27287,7 +27311,7 @@
           "name": "custom-button-variant",
           "declaration": {
             "name": "CustomButtonVariant",
-            "module": "src/components/custom-button/examples/variant.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/variant.example.tsx"
           }
         }
       ]
@@ -27354,7 +27378,7 @@
           "name": "CustomButtonWidth",
           "declaration": {
             "name": "CustomButtonWidth",
-            "module": "src/components/custom-button/examples/width.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/width.example.tsx"
           }
         },
         {
@@ -27362,7 +27386,7 @@
           "name": "custom-button-width",
           "declaration": {
             "name": "CustomButtonWidth",
-            "module": "src/components/custom-button/examples/width.example.tsx"
+            "module": "/home/runner/work/core-web/core-web/output/stencil/src/components/custom-button/examples/width.example.tsx"
           }
         }
       ]
@@ -27608,6 +27632,81 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "dropdown-width-auto.example.tsx",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "CustomSelectDropdownWidthAuto",
+          "members": [
+            {
+              "kind": "field",
+              "name": "rootElement",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_ref",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "enableAttributePassing",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement | null"
+                  },
+                  "description": "the ref for the component"
+                },
+                {
+                  "name": "customElementSelector",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "the custom element like `my-component`"
+                }
+              ],
+              "description": "Passes `aria-*`, `data-*` & `class` attributes to correct child. Used in angular and stencil."
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "tagName": "custom-select-dropdown-width-auto",
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "CustomSelectDropdownWidthAuto",
+          "declaration": {
+            "name": "CustomSelectDropdownWidthAuto",
+            "module": "src/components/custom-select/examples/dropdown-width-auto.example.tsx"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "custom-select-dropdown-width-auto",
+          "declaration": {
+            "name": "CustomSelectDropdownWidthAuto",
+            "module": "src/components/custom-select/examples/dropdown-width-auto.example.tsx"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "dropdown-width.example.tsx",