@scania/tegel 1.25.0-fix-a11y-checkbox-beta.0 → 1.25.0-fix-a11y-chip-more-improvements-beta.0

package/dist/collection/components/button/button.js

@@ -14,19 +14,25 @@ export class TdsButton {
         this.fullbleed = false;
         this.modeVariant = null;
         this.animation = 'none';
+        this.tdsAriaLabel = undefined;
         this.onlyIcon = false;
     }
+    connectedCallback() {
+        if (this.onlyIcon && !this.tdsAriaLabel) {
+            console.warn('Tegel button component: please specify the tdsAriaLabel prop when you have the onlyIcon attribute set to true');
+        }
+    }
     render() {
         const hasLabelSlot = hasSlot('label', this.host);
         const hasIconSlot = hasSlot('icon', this.host);
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: 'b50a0bfecae92e758228c3e6c17c6e04c2582df4', class: {
+        return (h(Host, { key: '3e204293608cfebe52984582fd8cb6ac0697c81c', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
                 disabled: Boolean(this.disabled),
                 fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", { key: 'eeef9e5533d630209b9a116e1b9ca387a4b982b7', type: this.type, disabled: this.disabled, class: {
+            }, disabled: this.disabled }, h("button", Object.assign({ key: '23fca6b572c74a1ba66d964f3225ec7d5c8c92b1', type: this.type, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -40,7 +46,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '5174346d2a5423ba65103ace557a8ff7758fd348', name: "label" }), hasIconSlot && h("slot", { key: 'f00bff4f1412d5b5beebe3834b69792a2879a09a', name: "icon" }))));
+            } }, (this.onlyIcon && this.tdsAriaLabel && { 'aria-label': this.tdsAriaLabel })), this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '51d476f91ceea2ed060ac98a6df21720fec9b889', name: "label" }), hasIconSlot && h("slot", { key: '307923426fff51c2ec77290b876407576b7e88f2', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }
@@ -198,6 +204,23 @@ export class TdsButton {
                 "attribute": "animation",
                 "reflect": false,
                 "defaultValue": "'none'"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value to be used for the aria-label attribute if onlyIcon is set to true"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }

package/dist/collection/components/card/card.js

@@ -48,7 +48,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: '3386e1f0d6536d31d7207c074a5e0f16ebf18a77', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: '62610b865562dddec1092a0e0cc506e94b590eaf', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/checkbox.js

@@ -22,7 +22,6 @@ export class TdsCheckbox {
         this.checked = false;
         this.indeterminate = false;
         this.value = undefined;
-        this.tdsAriaLabel = undefined;
     }
     /** Toggles the checked value of the component. */
     async toggleCheckbox() {
@@ -51,21 +50,12 @@ export class TdsCheckbox {
             this.indeterminate = false;
         }
     }
-    connectedCallback() {
-        const hasLabeledAndDescribedBy = this.host.getAttribute('aria-describedby') && this.host.getAttribute('aria-labelledby');
-        if (!hasLabeledAndDescribedBy) {
-            console.warn('Tegel Checkbox component: aria-describedby or aria-labelledby attributes are missing');
-        }
-        if (!this.tdsAriaLabel) {
-            console.warn('Tegel Checkbox component: tdsAriaLabel prop is missing');
-        }
-    }
     render() {
-        return (h("div", { key: '2e5501c960153741f6362c414f338a2d66ff5c54', class: "tds-checkbox" }, h("input", { key: '02f0f43e0fb2ff6fec330df2ec08b4558f7bbf60',
+        return (h("div", { key: '7362e4e69df24e5615f9f23fe8bc9b72b29cf525', class: "tds-checkbox" }, h("input", { key: '43f2b6070677645ad7bc9c47e2bd65df43735eff',
             // eslint-disable-next-line no-return-assign
-            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), "aria-label": this.tdsAriaLabel, required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
+            ref: (inputElement) => (this.inputElement = inputElement), indeterminate: this.indeterminate, "aria-checked": this.checked, "aria-required": this.required, "aria-describedby": this.host.getAttribute('aria-describedby'), "aria-labelledby": this.host.getAttribute('aria-labelledby'), required: this.required, type: "checkbox", name: this.name, value: this.value, id: this.checkboxId, checked: this.checked, disabled: this.disabled, onFocus: (event) => this.handleFocus(event), onBlur: (event) => this.handleBlur(event), onChange: () => {
                 this.handleChange();
-            } }), h("label", { key: '4e8b53749d6f3c88d8b77087773eac500876c0ba', htmlFor: this.checkboxId }, h("slot", { key: 'e595c87bfd340b95651761ee3a7d057e55b70a9b', name: "label" }))));
+            } }), h("label", { key: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }
@@ -204,23 +194,6 @@ export class TdsCheckbox {
                 },
                 "attribute": "value",
                 "reflect": false
-            },
-            "tdsAriaLabel": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "Value to be used for the aria-label attribute"
-                },
-                "attribute": "tds-aria-label",
-                "reflect": false
             }
         };
     }

package/dist/collection/components/chip/chip.js

@@ -16,7 +16,11 @@ export class TdsChip {
                 }
                 else if (this.type === 'radio') {
                     this.checked = true;
-                    this.internalRadioOnChange.emit({ chipId: this.chipId, checked: this.checked, groupName: this.name });
+                    this.internalRadioOnChange.emit({
+                        chipId: this.chipId,
+                        checked: this.checked,
+                        groupName: this.name,
+                    });
                 }
                 else {
                     console.error('Unsupported type in Chip component!');
@@ -43,6 +47,7 @@ export class TdsChip {
         this.name = undefined;
         this.value = undefined;
         this.disabled = false;
+        this.tdsAriaLabel = undefined;
     }
     handleInternaRadioChange(event) {
         const { chipId, checked, groupName } = event.detail;
@@ -63,6 +68,11 @@ export class TdsChip {
         }
         return Object.assign(Object.assign({}, commonAttributes), { onClick: () => this.handleClick() });
     }
+    connectedCallback() {
+        if (!this.tdsAriaLabel) {
+            console.warn('Tegel Chip component: tdsAriaLabel prop is missing');
+        }
+    }
     render() {
         const inputAttributes = this.renderInputAttributes();
         const hasPrefixSlot = hasSlot('prefix', this.host);
@@ -76,7 +86,7 @@ export class TdsChip {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'f92aed7b75c11da93b841554edf2f07f5c1cccb3' }, h("div", { key: '1999e94f8206769fd8d751abbcfb9a7c40bd8810', class: "component" }, h("div", { key: '1e6a977c4bcd584ba519f1ee0ccd73e467c3abc5', class: chipClasses }, h("input", Object.assign({ key: '454afc046e22139b5e8121edfafa1345676d51bb', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: '8682130ad1d20966ba072d1a81fe50f683c39143', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: 'e0717c5608b870a813b3c0b86c2ce05d821bc7b2', name: "prefix" }), hasLabelSlot && h("slot", { key: 'e0e81a0e95cedbef3d7bc0f695f82a22356b6bee', name: "label" }), hasSuffixSlot && h("slot", { key: '70b48ca42bed4646fe1ce4f8699833aea3d48094', name: "suffix" }))))));
+        return (h(Host, { key: 'c5e27b57accf13ea6af61b6544050b64c16a745c' }, h("div", { key: 'b4f3b429a307cfab3e7dd8356951d19fc5a01293', class: "component" }, h("div", { key: '273c7437e97862fc03c7d93386d07cc425437458', class: chipClasses }, h("input", Object.assign({ key: 'a143b14527b00c255a7205fc86a2473bb8b8c000', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": this.tdsAriaLabel }, inputAttributes)), h("label", { key: 'a86d26d9f9fe805e84fad6b9c79b24da48efa2f1', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: 'ca7e6af86cbac4fc87ac3815fc414f2952d851d0', name: "prefix" }), hasLabelSlot && h("slot", { key: '986cd743afd9f6014cb08e21d5c6c192e579b087', name: "label" }), hasSuffixSlot && h("slot", { key: '1cbbd42853fe0edc52da713f23b9ef3f99d8f4b2', name: "suffix" }))))));
     }
     static get is() { return "tds-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -215,6 +225,23 @@ export class TdsChip {
                 "attribute": "disabled",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "tdsAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Value to be used for the aria-label attribute"
+                },
+                "attribute": "tds-aria-label",
+                "reflect": false
             }
         };
     }
@@ -248,7 +275,7 @@ export class TdsChip {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    chipId: string;\n    checked: boolean;\n    groupName: string\n  }",
+                    "original": "{\n    chipId: string;\n    checked: boolean;\n    groupName: string;\n  }",
                     "resolved": "{ chipId: string; checked: boolean; groupName: string; }",
                     "references": {}
                 }

package/dist/collection/components/datetime/datetime.css

@@ -8,6 +8,16 @@
 .tds-datetime-input-sm[type=date] ~ .icon-time {
   display: none;
 }
+.tds-datetime-input[type=month] ~ .icon-time,
+.tds-datetime-input-md[type=month] ~ .icon-time,
+.tds-datetime-input-sm[type=month] ~ .icon-time {
+  display: none;
+}
+.tds-datetime-input[type=week] ~ .icon-time,
+.tds-datetime-input-md[type=week] ~ .icon-time,
+.tds-datetime-input-sm[type=week] ~ .icon-time {
+  display: none;
+}
 .tds-datetime-input[type=time] ~ .icon-datetime-local,
 .tds-datetime-input-md[type=time] ~ .icon-datetime-local,
 .tds-datetime-input-sm[type=time] ~ .icon-datetime-local {
@@ -352,6 +362,16 @@ input[type=date]::-webkit-calendar-picker-indicator {
   opacity: 0;
 }
 
+input[type=month]::-webkit-inner-spin-button,
+input[type=month]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+input[type=week]::-webkit-inner-spin-button,
+input[type=week]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
 input[type=time]::-webkit-inner-spin-button,
 input[type=time]::-webkit-calendar-picker-indicator {
   opacity: 0;

package/dist/collection/components/datetime/datetime.js

@@ -5,6 +5,7 @@ export class TdsDatetime {
             const dateTimeObj = {
                 year: this.defaultValue.slice(0, 4),
                 month: this.defaultValue.slice(5, 7),
+                week: this.defaultValue.slice(6, 8),
                 day: this.defaultValue.slice(8, 10),
                 hours: this.defaultValue.slice(11, 13),
                 minutes: this.defaultValue.slice(14, 16),
@@ -14,6 +15,10 @@ export class TdsDatetime {
                     return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}T${dateTimeObj.hours}:${dateTimeObj.minutes}`;
                 case 'date':
                     return `${dateTimeObj.year}-${dateTimeObj.month}-${dateTimeObj.day}`;
+                case 'month':
+                    return `${dateTimeObj.year}-${dateTimeObj.month}`;
+                case 'week':
+                    return `${dateTimeObj.year}-W${dateTimeObj.week}`;
                 case 'time':
                     return `${this.defaultValue.slice(0, 2)}:${this.defaultValue.slice(3, 5)}`;
                 default:
@@ -82,7 +87,7 @@ export class TdsDatetime {
     }
     /** Method that resets the dateteime without emitting an event. */
     internalReset() {
-        let value = '';
+        const value = '';
         if (this.defaultValue !== 'none') {
             this.value = this.getDefaultValue();
         }
@@ -96,17 +101,19 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { key: 'c09955258fa6a87c07efe2c4c327c72eb34688d8', class: `
-        ${this.noMinWidth ? 'tds-form-datetime-nomin' : ''}
-        ${this.focusInput ? 'tds-form-datetime tds-datetime-focus' : ' tds-form-datetime'}
-        ${this.value.length > 0 ? 'tds-datetime-data' : ''}
-        ${this.disabled ? 'tds-form-datetime-disabled' : ''}
-        ${this.size === 'md' ? 'tds-form-datetime-md' : ''}
-        ${this.size === 'sm' ? 'tds-form-datetime-sm' : ''}
-        ${this.state === 'error' || this.state === 'success'
-                ? `tds-form-datetime-${this.state}`
-                : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '42e0f48bc1e5c0fe34c492c9c4a4442dcb4982ec', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '9a09a448c5c46073b31c7cd6148ed8bf6334780e', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '78e81a9fbff444f76a2b46013cb9bc02e186ec86', class: "tds-datetime-input-container" }, h("input", { key: '385bb5d6d124951cd14151e6cda72007319f9dba', ref: (inputEl) => (this.textInput = inputEl), class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '12e390a5b6fed5c6c2702cccad2f14a5fc20eebe', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '1e8c1a91b23b9bd5f9e44929f6586652d7578df6', size: "20px", name: "calendar" })), h("div", { key: '496f500c9f1b948458d7ab1c5d86a466838e7b6d', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'b5dd412bf9d2286b2443aaf3ed2eb17a9f9045a9', size: "20px", name: "clock" }))), h("div", { key: '666193c97a4aa5435961d25b97d74bd3cc8b07a8', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'a7860edb4ab20cb633ec8309a991315358b53cd6', class: "tds-datetime-helper" }, h("div", { key: '84efbb36322ace185d66dd4f270a23b69e4bbad7', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: 'c304cdd2087c473a39304e9f926fee62286f3359', name: "error", size: "16px" }), this.helper)))));
+        const classNames = {
+            'tds-form-datetime-nomin': this.noMinWidth,
+            'tds-form-datetime': true,
+            'tds-datetime-focus': this.focusInput,
+            'tds-datetime-data': this.value.length > 0,
+            'tds-form-datetime-disabled': this.disabled,
+            [`tds-form-datetime-${this.size}`]: ['md', 'sm'].includes(this.size),
+            [`tds-form-datetime-${this.state}`]: ['error', 'success'].includes(this.state),
+            [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null,
+        };
+        return (h("div", { key: '8fd5bee5bb3b5a9d31a9738d676e2b808ae8bc25', class: classNames }, this.label && (h("label", { key: 'f4bab58ecb53479a3964790be964c3b5c3dfd61e', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '63a0b82041c8e5866897d6a7cb611dd8eef474d0', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '2f731bf8ee005889c5fb1f5627859b3a4e49f51c', class: "tds-datetime-input-container" }, h("input", { key: 'e19bcb2862bbd07236d4e4250831b8d732ed10d9', ref: (inputEl) => {
+                this.textInput = inputEl;
+            }, class: className, type: this.type, disabled: this.disabled, value: this.value, min: this.min, max: this.max, autofocus: this.autofocus, name: this.name, onInput: (e) => this.handleInput(e), onBlur: (e) => this.handleBlur(e), onChange: (e) => this.handleChange(e) }), h("div", { key: '2cbe93150d5608f5791948035c269f722a606d0a', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: '92365a08e74c7453933fa284cef1209bdca3ccba', size: "20px", name: "calendar" })), h("div", { key: '3f8956d972ebe4240aa219f946f6080a25b8a304', class: "datetime-icon icon-time" }, h("tds-icon", { key: 'e9df3bd75942dddb62504c4b513f3bc272c03107', size: "20px", name: "clock" }))), h("div", { key: 'a525f05cc09746549a47ec83875491a4bf68ddd8', class: "tds-datetime-bar" })), this.helper && (h("div", { key: 'b4c0a88b21c17382e545a2bd33b47e7a24691440', class: "tds-datetime-helper" }, h("div", { key: 'c060158e7f3d78a6a4587355053e098123f67527', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '5947ba9ddca78424feca888180c9af75712a011d', name: "error", size: "16px" }), this.helper)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -126,8 +133,8 @@ export class TdsDatetime {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'datetime-local' | 'date' | 'time'",
-                    "resolved": "\"date\" | \"datetime-local\" | \"time\"",
+                    "original": "'datetime-local' | 'date' | 'month' | 'week' | 'time'",
+                    "resolved": "\"date\" | \"datetime-local\" | \"month\" | \"time\" | \"week\"",
                     "references": {}
                 },
                 "required": false,
@@ -204,7 +211,7 @@ export class TdsDatetime {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for date-time: YY-MM-DDTHH-MM"
+                    "text": "Default value of the component. Format for time: HH-MM. Format for date: YY-MM-DD. Format for month: YY-MM. Format for week: YY-Www  Format for date-time: YY-MM-DDTHH-MM"
                 },
                 "attribute": "default-value",
                 "reflect": false,

package/dist/collection/components/divider/divider.js

@@ -4,7 +4,7 @@ export class Divider {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: 'a6195d6461fc6727d9e83c4152f446179160963f', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'f1cf2f97534adfe809f8ddda734cfdbcecd7989a', class: `divider ${this.orientation}` })));
+        return (h(Host, { key: 'da07834ddc86e611803422b2a756c76109034fbf', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '90671868ed03281cfbd821cdb7057d4e79d790c3', class: `divider ${this.orientation}` })));
     }
     static get is() { return "tds-divider"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.js

@@ -5,14 +5,24 @@ import { convertToString } from "../../../utils/convertToString";
  */
 export class TdsDropdownOption {
     constructor() {
+        this.parentElement = null;
+        // @ts-ignore
+        // eslint-disable-next-line no-unused-vars,
+        this.label = '';
         this.componentWillRender = () => {
+            var _a, _b, _c;
+            if (!this.host.parentElement) {
+                return;
+            }
             this.parentElement =
-                this.host.parentElement.tagName === 'TDS-DROPDOWN'
+                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
                     ? this.host.parentElement
                     : this.host.getRootNode().host;
-            this.multiselect = this.parentElement.multiselect;
-            this.size = this.parentElement.size;
-            this.label = this.host.textContent.trim();
+            if (this.parentElement) {
+                this.multiselect = (_b = this.parentElement.multiselect) !== null && _b !== void 0 ? _b : false;
+                this.size = this.parentElement.size || 'lg';
+            }
+            this.label = ((_c = this.host.textContent) === null || _c === void 0 ? void 0 : _c.trim()) || '';
         };
         this.handleSingleSelect = () => {
             if (!this.disabled) {
@@ -56,7 +66,7 @@ export class TdsDropdownOption {
         this.internalValue = undefined;
         this.disabled = false;
         this.selected = false;
-        this.multiselect = undefined;
+        this.multiselect = false;
         this.size = 'lg';
     }
     /** Method to select/deselect an option. */
@@ -70,7 +80,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: '5d13306d202a3c488fdd75daa3aa8cfc15e4b9cf', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'df8b33467c49913853b2d86dff7115b6cea37f55', class: `dropdown-option 
+        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}