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

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

@@ -1,9 +1,9 @@
-import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants";
-import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, hasVoiceOver, stringPropVisible, uuid, } from "../../utils";
-import { DocumentClickListener } from "../../utils/document-click-listener";
-import { DocumentScrollListener } from "../../utils/document-scroll-listener";
-import { handleFixedDropdown } from "../../utils/floating-components";
-import { addResetEventListener, } from "../../utils/form-components";
+import { DEFAULT_CLOSE_BUTTON, DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_LABEL_ID_SUFFIX, DEFAULT_MESSAGE, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER_ID_SUFFIX, DEFAULT_REMOVE, DEFAULT_SELECT_ID_SUFFIX, DEFAULT_SELECTED, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getBooleanAsString, getHideProp, getSearchInput, hasVoiceOver, stringPropVisible, uuid, } from "../../utils/index.js";
+import { DocumentClickListener } from "../../utils/document-click-listener.js";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener.js";
+import { handleFixedDropdown } from "../../utils/floating-components.js";
+import { addResetEventListener, } from "../../utils/form-components.js";
 import { h, Fragment } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -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: '1089ddd1cfca85b7a04524de6430b3572ccb6453', 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: 'df6fe2735838356dc7cf9da1538e2d734089341a', id: this._labelId }, (_a = this.label) !== null && _a !== void 0 ? _a : DEFAULT_LABEL, h("select", { key: 'd952cedd05d4f5b1eb2a24d4362aa2b5e4064fd8', 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: '51e516f07db962d68494b5b012a33982df369392', 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: '9d059be7ce413194177616d016f7babffb790f07' }), 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: '116d3a64ab4dc504badf8ae2298908022b807441', 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: '3930c58d7e893751803157d1f23b6f9e7050adaa', size: "small", semantic: "critical", id: this._invalidMessageId }, this._invalidMessage), h("span", { key: 'efdbd668c7f5b2755bada6b174a0ed31a792dd31', "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() {
@@ -866,7 +874,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -892,7 +900,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -918,7 +926,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -942,7 +950,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -968,7 +976,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -994,7 +1002,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1020,7 +1028,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1046,7 +1054,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1072,7 +1080,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1098,7 +1106,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1124,7 +1132,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1150,7 +1158,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1174,7 +1182,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1200,7 +1208,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1224,7 +1232,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1250,7 +1258,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1276,7 +1284,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1300,7 +1308,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1326,7 +1334,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1352,7 +1360,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1378,7 +1386,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1404,7 +1412,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1430,7 +1438,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1454,7 +1462,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1480,7 +1488,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1504,7 +1512,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1530,7 +1538,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1556,7 +1564,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1582,7 +1590,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1608,7 +1616,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1634,7 +1642,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1660,7 +1668,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1686,7 +1694,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1712,7 +1720,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1738,7 +1746,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1764,7 +1772,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1790,7 +1798,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1816,7 +1824,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1842,7 +1850,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1868,7 +1876,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1894,7 +1902,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1920,7 +1928,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1946,7 +1954,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1972,7 +1980,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -1998,7 +2006,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -2024,7 +2032,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -2051,7 +2059,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -2078,7 +2086,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }
@@ -2104,7 +2112,7 @@ export class DBCustomSelect {
                     "references": {
                         "DBCustomSelectProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select/model.ts::DBCustomSelectProps",
                             "referenceLocation": "DBCustomSelectProps"
                         }

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

@@ -1,4 +1,4 @@
-import { cls } from "../../utils";
+import { cls } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -86,9 +86,9 @@ export class DBCustomSelectDropdown {
     }
     render() {
         var _a, _b;
-        return (h("article", { key: '49bd2cef7c2c04b2ae3696fea83057858a59fd9a', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", ref: (el) => {
+        return (h("article", { key: '7720cebaaa9128aa7f12a3720aa1374a0fd689d7', class: cls("db-custom-select-dropdown db-card", this.className), "data-spacing": "none", 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-width": this.width }, h("slot", { key: '89ceec1851f4ffdb27f99b5f301e70784607c2c8' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id, "data-width": this.width }, h("slot", { key: '19d66fe8c4369630a1debf34e448c0f13ebe0be9' })));
     }
     static get is() { return "db-custom-select-dropdown"; }
     static get properties() {
@@ -102,7 +102,7 @@ export class DBCustomSelectDropdown {
                     "references": {
                         "DBCustomSelectDropdownProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-dropdown/model.ts::DBCustomSelectDropdownProps",
                             "referenceLocation": "DBCustomSelectDropdownProps"
                         }
@@ -128,7 +128,7 @@ export class DBCustomSelectDropdown {
                     "references": {
                         "DBCustomSelectDropdownProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-dropdown/model.ts::DBCustomSelectDropdownProps",
                             "referenceLocation": "DBCustomSelectDropdownProps"
                         }
@@ -152,7 +152,7 @@ export class DBCustomSelectDropdown {
                     "references": {
                         "DBCustomSelectDropdownProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-dropdown/model.ts::DBCustomSelectDropdownProps",
                             "referenceLocation": "DBCustomSelectDropdownProps"
                         }
@@ -178,7 +178,7 @@ export class DBCustomSelectDropdown {
                     "references": {
                         "DBCustomSelectDropdownProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-dropdown/model.ts::DBCustomSelectDropdownProps",
                             "referenceLocation": "DBCustomSelectDropdownProps"
                         }

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

@@ -1,4 +1,4 @@
-import { cls } from "../../utils";
+import { cls } from "../../utils/index.js";
 import { h } from "@stencil/core";
 /**
  * @slot children - This is a default/unnamed slot
@@ -85,9 +85,9 @@ export class DBCustomSelectFormField {
     }
     render() {
         var _a, _b;
-        return (h("summary", { key: 'e74ace4d1b8b882d93a74274f0ae0b278f6daf42', class: cls("db-custom-select-form-field", this.className), ref: (el) => {
+        return (h("summary", { key: '77e485f44f3ac511a95cf814b09f8460b6048fbc', class: cls("db-custom-select-form-field", this.className), 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 }, h("slot", { key: 'a336ba54bc2165846100b211d0f7f67755fb98d7' })));
+            }, id: (_a = this.id) !== null && _a !== void 0 ? _a : (_b = this.propOverrides) === null || _b === void 0 ? void 0 : _b.id }, h("slot", { key: '382c889e2abf066105029031da4ecb0147c86607' })));
     }
     static get is() { return "db-custom-select-form-field"; }
     static get properties() {
@@ -101,7 +101,7 @@ export class DBCustomSelectFormField {
                     "references": {
                         "DBCustomSelectFormFieldProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-form-field/model.ts::DBCustomSelectFormFieldProps",
                             "referenceLocation": "DBCustomSelectFormFieldProps"
                         }
@@ -127,7 +127,7 @@ export class DBCustomSelectFormField {
                     "references": {
                         "DBCustomSelectFormFieldProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-form-field/model.ts::DBCustomSelectFormFieldProps",
                             "referenceLocation": "DBCustomSelectFormFieldProps"
                         }
@@ -151,7 +151,7 @@ export class DBCustomSelectFormField {
                     "references": {
                         "DBCustomSelectFormFieldProps": {
                             "location": "import",
-                            "path": "./model",
+                            "path": "./model.js",
                             "id": "src/components/custom-select-form-field/model.ts::DBCustomSelectFormFieldProps",
                             "referenceLocation": "DBCustomSelectFormFieldProps"
                         }