npm - @siemens/ix - Versions diffs - 2.6.1 → 2.7.0 - Mend

@siemens/ix 2.6.1 → 2.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1128) hide show

package/dist/collection/components/radio/test/radio.ct.js CHANGED Viewed

@@ -33,4 +33,23 @@ test(`form-ready default active`, async ({ mount, page }) => {
     const formData = await getFormValue(formElement, 'my-field-name', page);
     expect(formData).toBe('on');
 });
+test(`disabled = undefined`, async ({ mount, page }) => {
+    await mount(`<ix-radio label="test"></ix-radio>`);
+    const radioElement = page.locator('ix-radio');
+    const nativeInput = radioElement.locator('input');
+    const label = radioElement.locator('label');
+    const checkedChange$ = radioElement.evaluate((element) => {
+        // Needed for testcase
+        element.disabled = undefined;
+        return new Promise((resolve) => {
+            element.addEventListener('checkedChange', () => resolve());
+        });
+    });
+    await radioElement.click();
+    await checkedChange$;
+    await expect(radioElement).not.toHaveClass(/disabled/);
+    await expect(nativeInput).not.toBeDisabled();
+    const disableLabelColor = 'rgba(245, 252, 255, 0.93)';
+    await expect(label).toHaveCSS('color', disableLabelColor);
+});
 //# sourceMappingURL=radio.ct.js.map

package/dist/collection/components/radio/test/radio.ct.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"radio.ct.js","sourceRoot":"","sources":["../../../../src/components/radio/test/radio.ct.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,qBAAqB,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AAExE,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC3C,MAAM,KAAK,CACT,iEAAiE,CAClE,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;AAChC,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,+BAA+B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC9D,MAAM,KAAK,CAAC,oDAAoD,CAAC,CAAC;IAElE,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IACvC,MAAM,KAAK,CAAC,KAAK,EAAE,CAAC;IAEpB,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,UAAU,EAAE,IAAI,CAAC,CAAC;IACnE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC;AAEH,IAAI,CAAC,2BAA2B,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,EAAE;IAC1D,MAAM,KAAK,CACT,iEAAiE,CAClE,CAAC;IAEF,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACzC,qBAAqB,CAAC,WAAW,CAAC,CAAC;IACnC,MAAM,QAAQ,GAAG,MAAM,YAAY,CAAC,WAAW,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;IACxE,MAAM,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { getFormValue, preventFormSubmission, test } from '@utils/test';\n\ntest('form-ready', async ({ mount, page }) => {\n await mount(\n `<form><ix-radio name=\"my-radio\" value=\"Test\"></ix-radio></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const radio = page.locator('ix-radio');\n await radio.click();\n\n const formData = await getFormValue(formElement, 'my-radio', page);\n expect(formData).toBe('Test');\n});\n\ntest('form-ready with default value', async ({ mount, page }) => {\n await mount(`<form><ix-radio name=\"my-radio\"></ix-radio></form>`);\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const radio = page.locator('ix-radio');\n await radio.click();\n\n const formData = await getFormValue(formElement, 'my-radio', page);\n expect(formData).toBe('on');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n await mount(\n `<form><ix-radio name=\"my-field-name\" checked></ix-radio></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('on');\n});\n"]}
1	+ {"version":3,"file":"radio.ct.js","sourceRoot":"","sources":["../../../../src/components/radio/test/radio.ct.ts"],"names":[],"mappings":"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","sourcesContent":["/\n SPDX-FileCopyrightText: 2024 Siemens AG\n \n SPDX-License-Identifier: MIT\n \n This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { expect } from '@playwright/test';\nimport { getFormValue, preventFormSubmission, test } from '@utils/test';\n\ntest('form-ready', async ({ mount, page }) => {\n await mount(\n `<form><ix-radio name=\"my-radio\" value=\"Test\"></ix-radio></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const radio = page.locator('ix-radio');\n await radio.click();\n\n const formData = await getFormValue(formElement, 'my-radio', page);\n expect(formData).toBe('Test');\n});\n\ntest('form-ready with default value', async ({ mount, page }) => {\n await mount(`<form><ix-radio name=\"my-radio\"></ix-radio></form>`);\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const radio = page.locator('ix-radio');\n await radio.click();\n\n const formData = await getFormValue(formElement, 'my-radio', page);\n expect(formData).toBe('on');\n});\n\ntest(`form-ready default active`, async ({ mount, page }) => {\n await mount(\n `<form><ix-radio name=\"my-field-name\" checked></ix-radio></form>`\n );\n\n const formElement = page.locator('form');\n preventFormSubmission(formElement);\n const formData = await getFormValue(formElement, 'my-field-name', page);\n expect(formData).toBe('on');\n});\n\ntest(`disabled = undefined`, async ({ mount, page }) => {\n await mount(`<ix-radio label=\"test\"></ix-radio>`);\n\n const radioElement = page.locator('ix-radio');\n const nativeInput = radioElement.locator('input');\n const label = radioElement.locator('label');\n\n const checkedChange$ = radioElement.evaluate(\n (element: HTMLIxCheckboxElement) => {\n // Needed for testcase\n element.disabled = undefined as any;\n return new Promise<void>((resolve) => {\n element.addEventListener('checkedChange', () => resolve());\n });\n }\n );\n\n await radioElement.click();\n await checkedChange$;\n\n await expect(radioElement).not.toHaveClass(/disabled/);\n await expect(nativeInput).not.toBeDisabled();\n\n const disableLabelColor = 'rgba(245, 252, 255, 0.93)';\n await expect(label).toHaveCSS('color', disableLabelColor);\n});\n"]}

package/dist/collection/components/radio-group/radio-group.js CHANGED Viewed

@@ -100,10 +100,10 @@ export class RadiobuttonGroup {
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: 'e34f29dfa844a5d74969e0d7d4524ac0b35ed819' }, h("ix-field-wrapper", { key: 'f146673dd9ff78690cc0b52378793b0c94b20fac', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid }, h("div", { key: '9280999ed1c6630ae9500e2f73de26a12ea1c417', class: {
+        return (h(Host, { key: '24b5de13751d99c48248531714c42365e986152d' }, h("ix-field-wrapper", { key: 'd28ab4313b67fb3228b314c9f11035b562517873', label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, isInvalid: this.isInvalid }, h("div", { key: '5fe4b009d25e7b0e292797c73608bbbf58cbd619', class: {
                 'checkbox-container': true,
                 'row-layout': this.direction === 'row',
-            } }, h("slot", { key: '7556d4a6396633bc085ebf5cb12070d7a3c673e5' })))));
+            } }, h("slot", { key: '16ad7233184eb11c073a6243860ede06f97b0944' })))));
     }
     static get is() { return "ix-radio-group"; }
     static get encapsulation() { return "shadow"; }
@@ -124,7 +124,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -141,7 +141,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -158,7 +158,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -175,7 +175,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -192,7 +192,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -209,7 +209,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -226,7 +226,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -243,7 +243,7 @@ export class RadiobuttonGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/row/row.js CHANGED Viewed

@@ -12,7 +12,7 @@ import { h, Host } from "@stencil/core";
  */
 export class Row {
     render() {
-        return (h(Host, { key: '89172693b9ba7a6cbe639e50e72992d5028af953' }, h("slot", { key: 'bb424e5fe98e377dd765192debdf0a268bb4f7a2' })));
+        return (h(Host, { key: 'c06bbc4d7e3250ed08dd6206811f2547fd87dddb' }, h("slot", { key: 'dbea65d73ce27b58a8b3b51185c59e60c7f04827' })));
     }
     static get is() { return "ix-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/select/select.css CHANGED Viewed

@@ -250,6 +250,9 @@
 :host .input-container input.hide-placeholder::placeholder {
   opacity: 0;
 }
+:host ix-dropdown {
+  max-width: 100%;
+}
 :host .dropdown-visible {
   --ix-icon-button-color: var(--theme-color-dynamic--hover);
 }

package/dist/collection/components/select/select.js CHANGED Viewed

@@ -59,6 +59,8 @@ export class Select {
         this.i18nSelectListHeader = 'Select an option';
         this.i18nNoMatches = 'No matches';
         this.hideListHeader = false;
+        this.dropdownWidth = undefined;
+        this.dropdownMaxWidth = undefined;
         this.dropdownShow = false;
         this.selectedLabels = [];
         this.isDropdownEmpty = false;
@@ -113,8 +115,6 @@ export class Select {
     }
     watchDropdownShow(show) {
         if (show && this.dropdownElement) {
-            this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownElement, this.focusControllerCallbackBind);
-            this.arrowFocusController.wrap = !this.editable;
             this.itemObserver.observe(this.dropdownElement, {
                 childList: true,
                 subtree: true,
@@ -265,6 +265,16 @@ export class Select {
         this.updateSelection();
         this.updateFormInternalValue(this.value);
     }
+    componentDidRender() {
+        if (!this.dropdownShow ||
+            this.arrowFocusController ||
+            !this.dropdownElement) {
+            return;
+        }
+        this.arrowFocusController = new ArrowFocusController(this.visibleNonShadowItems, this.dropdownElement, this.focusControllerCallbackBind);
+        this.arrowFocusController.wrap =
+            !this.isAddItemVisible() && !this.visibleShadowItems.length;
+    }
     onLabelChange(event) {
         event.preventDefault();
         event.stopImmediatePropagation();
@@ -311,9 +321,11 @@ export class Select {
         }
         const trimmedInput = this.inputFilterText.trim();
         const itemLabel = el === null || el === void 0 ? void 0 : el.label;
-        if (this.editable &&
-            !this.itemExists(trimmedInput) &&
-            !this.itemExists(itemLabel)) {
+        const item = this.itemExists(trimmedInput);
+        if (item) {
+            this.itemClick(item.value);
+        }
+        else if (this.editable && !this.itemExists(itemLabel)) {
             const defaultPrevented = this.emitAddItem(trimmedInput);
             if (defaultPrevented) {
                 return;
@@ -525,9 +537,9 @@ export class Select {
     }
     render() {
         var _a, _b, _c, _d;
-        return (h(Host, { key: 'e303aff09c9bfc570154e79b6276c609ed12c531', "aria-disabled": a11yBoolean(this.disabled), class: {
+        return (h(Host, { key: 'd75b237d63401907045c1ef0ff8a95ad690af8e3', "aria-disabled": a11yBoolean(this.disabled), class: {
                 disabled: this.disabled,
-            } }, h("ix-field-wrapper", { key: '257e201bdca4c09533c569dfe1d53efd46ef9efe', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: 'a94e63733189753312269744dfc48178e4a38e6e', class: {
+            } }, h("ix-field-wrapper", { key: '6014f22207384f636935362faffa83c4a8026ff8', required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: '0bb6d6626b6da3cf0444738ad38d5f4c3bc8af2e', class: {
                 select: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
@@ -535,13 +547,13 @@ export class Select {
                 this.dropdownAnchorRef(ref);
                 if (!this.editable)
                     this.dropdownWrapperRef(ref);
-            } }, h("div", { key: '86746135a307b00ca720636200f2f8b06d148605', class: "input-container" }, h("div", { key: 'da77d6ccc888fd2f8e171b33414741c24014563c', class: "chips" }, this.isMultipleMode
+            } }, h("div", { key: '00f38bf5536460b2633860b806bf77cadcc9c2a7', class: "input-container" }, h("div", { key: '50481103d88830a7c7143dff36855c5ec2431475', class: "chips" }, this.isMultipleMode
             ? (_a = this.selectedItems) === null || _a === void 0 ? void 0 : _a.map((item) => (h("ix-filter-chip", { disabled: this.disabled || this.readonly, key: item.value, onCloseClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     this.itemClick(item.value);
                 } }, item.label)))
-            : '', h("div", { key: '49c977ee154d514bb1066b781eacaea57d5ca49e', class: "trigger" }, h("input", { key: '431842c51aceb1b187032aab9d690e84853f71ae', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
+            : '', h("div", { key: '820c8db4efe7b1f0424536c94261fda57e87c219', class: "trigger" }, h("input", { key: '9d979641d1fc28b48c3c64d6b165b5c4cd91d9af', autocomplete: "off", "data-testid": "input", disabled: this.disabled, readOnly: this.readonly, required: this.required, type: "text", class: {
                 'allow-clear': this.allowClear && !!((_b = this.selectedLabels) === null || _b === void 0 ? void 0 : _b.length),
             }, placeholder: this.placeholderValue(), value: (_c = this.inputValue) !== null && _c !== void 0 ? _c : '', ref: (ref) => {
                 this.inputElement = ref;
@@ -558,20 +570,28 @@ export class Select {
             } })) : null, this.disabled || this.readonly ? null : (h("ix-icon-button", { "data-select-dropdown": true, class: { 'dropdown-visible': this.dropdownShow }, icon: "chevron-down-small", ghost: true, ref: (ref) => {
                 if (this.editable)
                     this.dropdownWrapperRef(ref);
-            } }))))))), h("ix-dropdown", { key: '8d4ee01533ee9843a836a9b4c986ab5db0be4db9', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
+            } }))))))), h("ix-dropdown", { key: 'ea685854ac93811ad5218777d809c9b765460dfe', ref: (ref) => (this.dropdownElement = ref), show: this.dropdownShow, closeBehavior: this.isMultipleMode ? 'outside' : 'both', class: {
                 'd-none': this.disabled || this.readonly,
             }, anchor: this.dropdownAnchorRef.waitForCurrent(), trigger: this.dropdownWrapperRef.waitForCurrent(), onShowChanged: (e) => this.dropdownVisibilityChanged(e), placement: "bottom-start", overwriteDropdownStyle: async () => {
                 var _a, _b;
+                const styleOverwrites = {};
                 const minWidth = (_b = (_a = this.hostElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.select')) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width;
-                return {
-                    minWidth: `${minWidth}px`,
-                };
-            } }, h("div", { key: '3897bfc9748d7044d038c413f046ba693ac7f03d', class: {
+                if (minWidth) {
+                    styleOverwrites.minWidth = `${minWidth}px`;
+                }
+                if (this.dropdownWidth) {
+                    styleOverwrites.width = `min(${this.dropdownWidth}, 100%)`;
+                }
+                if (this.dropdownMaxWidth) {
+                    styleOverwrites.maxWidth = `min(${this.dropdownMaxWidth}, 100%)`;
+                }
+                return styleOverwrites;
+            } }, h("div", { key: 'f6a528bab147937ccbcc833637c9e1d63558ac60', class: {
                 'select-list-header': true,
                 hidden: this.hideListHeader || this.isDropdownEmpty,
-            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '71fada597f8ae68598a1444b96c66fe85cf56258', onSlotchange: () => {
+            }, title: this.i18nSelectListHeader, onClick: (e) => e.preventDefault() }, this.i18nSelectListHeader), h("slot", { key: '2689e9ef17c90a099b476658dc5219aac22f6b22', onSlotchange: () => {
                 this.updateSelection();
-            } }), h("div", { key: 'bbb7e303d5443707e576d2dc2a9597bdf37bff7c', ref: (ref) => (this.customItemsContainerElement = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
+            } }), h("div", { key: '632344ae80f829a40678b4a08ee2325438c799b1', ref: (ref) => (this.customItemsContainerElement = ref), class: "d-contents" }), this.isAddItemVisible() ? (h("ix-dropdown-item", { "data-testid": "add-item", icon: 'plus', class: {
                 'add-item': true,
             }, label: this.inputFilterText, onItemClick: (e) => {
                 e.preventDefault();
@@ -601,7 +621,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -642,7 +662,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -662,7 +682,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -682,7 +702,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -702,7 +722,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -722,7 +742,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -742,7 +762,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string",
+                    "resolved": "string | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -762,7 +782,7 @@ export class Select {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean",
+                    "resolved": "boolean | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -782,7 +802,7 @@ export class Select {
                 "mutable": true,
                 "complexType": {
                     "original": "string | string[]",
-                    "resolved": "string | string[]",
+                    "resolved": "string | string[] | undefined",
                     "references": {}
                 },
                 "required": false,
@@ -1003,6 +1023,46 @@ export class Select {
                 "attribute": "hide-list-header",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "dropdownWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.7.0"
+                        }],
+                    "text": "The width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\")."
+                },
+                "attribute": "dropdown-width",
+                "reflect": false
+            },
+            "dropdownMaxWidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "2.7.0"
+                        }],
+                    "text": "The maximum width of the dropdown element with value and unit (e.g. \"200px\" or \"12.5rem\").\nBy default the maximum width of the dropdown element is set to 100%."
+                },
+                "attribute": "dropdown-max-width",
+                "reflect": false
             }
         };
     }
@@ -1143,7 +1203,7 @@ export class Select {
                             "id": "global::HTMLFormElement"
                         }
                     },
-                    "return": "Promise<HTMLFormElement>"
+                    "return": "Promise<HTMLFormElement | null>"
                 },
                 "docs": {
                     "text": "",