@scania/tegel 1.23.0-value-prop.beta.5 → 1.24.0-badge-a11y-beta.0

package/dist/collection/components/badge/badge.js

@@ -4,8 +4,11 @@ export class TdsBadge {
         this.value = '';
         this.hidden = false;
         this.size = 'lg';
+        this.liveAnnounce = 'polite';
+        this.ariaLabelTemplate = 'Notification badge with {value} new notifications';
         this.shape = '';
         this.text = '';
+        this.ariaLabel = '';
     }
     watchProps() {
         this.checkProps();
@@ -16,19 +19,25 @@ export class TdsBadge {
     checkProps() {
         const valueAsNumber = parseInt(this.value);
         if (!Number.isNaN(valueAsNumber) && this.size !== 'sm') {
-            this.shape = this.value.toString().length >= 2 ? 'pill' : '';
+            this.shape = this.value.length >= 2 ? 'pill' : '';
             this.size = 'lg';
             this.text = valueAsNumber.toString().length >= 3 ? '99+' : valueAsNumber.toString();
+            this.ariaLabel = this.ariaLabelTemplate.replace('{value}', this.text);
         }
         else {
-            // eslint-disable-next-line no-unused-expressions, @typescript-eslint/no-unused-expressions
-            if (this.value !== '' && this.size !== 'sm') {
-                console.warn('The provided value is either empty or string, please provide value as number.');
-            }
+            this.ariaLabel =
+                this.value.trim() === ''
+                    ? this.ariaLabelTemplate.replace('{value}', 'no')
+                    : 'The provided value is either empty or a string, please provide a number.';
         }
     }
     render() {
-        return (h("host", { key: 'edf6347da9742ae8353a33fa1613c0dd9170357b', class: `tds-badge tds-badge-${this.size} ${this.shape === 'pill' ? 'tds-badge-pill' : ''} ${this.hidden ? 'tds-badge-hidden' : ''}` }, h("div", { key: '223c0b81e4de5e790daa011481bc45d7565e5cfc', class: "tds-badge-text" }, this.text)));
+        return (h("host", { key: '9a0d7989f199bd1e828fa1129baba4b53c4aee19', role: "status", class: {
+                'tds-badge': true,
+                [`tds-badge-${this.size}`]: true,
+                'tds-badge-pill': this.shape === 'pill',
+                'tds-badge-hidden': this.hidden,
+            }, "aria-label": this.ariaLabel, "aria-live": this.liveAnnounce }, h("div", { key: 'b2454880ffd16f027e52c7042ae9f647a2a4d242', class: "tds-badge-text", "aria-hidden": "true" }, this.text)));
     }
     static get is() { return "tds-badge"; }
     static get encapsulation() { return "shadow"; }
@@ -97,13 +106,50 @@ export class TdsBadge {
                 "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'lg'"
+            },
+            "liveAnnounce": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'off' | 'polite' | 'assertive'",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines aria-live attribute"
+                },
+                "attribute": "live-announce",
+                "reflect": false,
+                "defaultValue": "'polite'"
+            },
+            "ariaLabelTemplate": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the template for aria-label, allowing localization"
+                },
+                "attribute": "aria-label-template",
+                "reflect": false,
+                "defaultValue": "'Notification badge with {value} new notifications'"
             }
         };
     }
     static get states() {
         return {
             "shape": {},
-            "text": {}
+            "text": {},
+            "ariaLabel": {}
         };
     }
     static get watchers() {

package/dist/collection/components/banner/banner.js

@@ -43,9 +43,13 @@ export class TdsBanner {
         const usesHeaderSlot = hasSlot('subheader', this.host);
         const usesSubheaderSlot = hasSlot('subheader', this.host);
         const usesActionsSlot = hasSlot('actions', this.host);
-        return (h(Host, { key: 'cce608e8685f68d432cb3e2dd847a1919d7fac17', role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.variant} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { key: '45c455342ea61eadf0090a98a67e4137499cc9db', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: 'c503d90c8abdf3d794c5ea4744acf4bf726d9b68', name: this.icon, size: "20px" }))), h("div", { key: '0b625094274021007e5ebb2a13ad74037e2bcce9', class: "content" }, h("div", { key: '957b3928258ad7640cedec4c5882b7db5d5c5362', class: "header-subheader" }, this.header && h("div", { key: 'b4c2221163bd72d05300766cecad13081c631f3f', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '70329f3c96268ccac2a82ff5f2a35619abaea25e', name: "header" }), this.subheader && h("div", { key: '922b918a9fb308dbe367e2409db1807ff2fcb736', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: '8ce26997a04b5d8a7607b06980c556a69a400740', name: "subheader" })), usesActionsSlot && h("slot", { key: '6e7e450a48e1c3aa4765b6049789b273a740c3ba', name: "actions" })), h("div", { key: 'e644385a339db3f121be9ae2c23eb4875194291a', class: `banner-close` }, h("button", { key: 'a172a6f4fb35a64c5f0002b9c73740c413c39c12', onClick: () => {
+        return (h(Host, { key: '58c5c06c0e7aa90012d9b82f6eab8da5a0deadfb', role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: {
+                [this.variant]: true,
+                hide: this.hidden,
+                show: !this.hidden,
+            } }, this.icon && (h("div", { key: '5936f4ad7227f59e250133c0e0fb9ab981853689', class: `banner-icon ${this.variant}` }, h("tds-icon", { key: '2f424d3217d12362b4c611125b564efb1477ff8d', name: this.icon, size: "20px" }))), h("div", { key: 'bb3dffbd853a4b230ff4f5748e419822628f627d', class: "content" }, h("div", { key: 'c7fb9da0890298517fc5f5148ee7de5897a2b9ec', class: "header-subheader" }, this.header && h("div", { key: 'e24fb51c8866497238a68b43f4f58611863ad38a', class: "header" }, this.header), usesHeaderSlot && h("slot", { key: '54b813d12818651e42a44fce83ec36045bbb4a5d', name: "header" }), this.subheader && h("div", { key: '96814e7e667008259c64ec4b84b7310effe00ffe', class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { key: 'ae205021f8d5e61ad333bafcd1f836ca61646ef6', name: "subheader" })), usesActionsSlot && h("slot", { key: '5188184fdb356266e090df3aa1d8008d2cd92c55', name: "actions" })), h("div", { key: '0de70e636021157c99c971bc7fb39874a4b127fa', class: `banner-close` }, h("button", { key: '188e8213b8704f5c20beacc003f0c6d958faf36f', onClick: () => {
                 this.handleClose();
-            } }, h("tds-icon", { key: 'da9b83b7c7538b431f919c7e13265d28fde1e39f', name: "cross", size: "20px" })))));
+            } }, h("tds-icon", { key: '0a97ab51a7c1f3cff24cb348903c0e32cd5c3975', name: "cross", size: "20px" })))));
     }
     static get is() { return "tds-banner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/block/block.js

@@ -19,12 +19,16 @@ export class TdsBlock {
     }
     render() {
         const nestingLevel = this.getNestingLevel();
-        const evenOddClass = this.modeVariant === null
-            ? nestingLevel % 2 === 0
-                ? 'tds-block-even'
-                : 'tds-block-odd'
-            : '';
-        return (h("div", { key: '5f22f1b8ae254a577a151563deadd969e90e3d20', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '52367d3055296ebd2b6e8291786554f34253750f' })));
+        let evenOddClass = '';
+        if (this.modeVariant === null) {
+            if (nestingLevel % 2 === 0) {
+                evenOddClass = 'tds-block-even';
+            }
+            else {
+                evenOddClass = 'tds-block-odd';
+            }
+        }
+        return (h("div", { key: 'efd570de70b5c6a313c3334b718cb201c4946251', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '56f2673bc4ae6c6801c52caf465d1bbcf27d8514' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.js

@@ -7,7 +7,7 @@ export class TdsBreadcrumb {
         this.current = false;
     }
     render() {
-        return (h("div", { key: '5b1576c613720b9964419b572999e5a01bc1b835', role: "listitem", class: `${this.current ? 'current' : ''}` }, h("slot", { key: '7f298648fe0596e6ae099facdc5cb6e1439496f6' })));
+        return (h("div", { key: '459fcc2d9467e9793d3f5273ea14cc2758fdbc0f', role: "listitem", class: `${this.current ? 'current' : ''}` }, h("slot", { key: '6009cb6b16b769c975e069b1f4ee171a48711497' })));
     }
     static get is() { return "tds-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumbs.js

@@ -6,7 +6,7 @@ export class TdsBreadcrumbs {
     render() {
         var _a;
         (_a = this.host.children[this.host.children.length - 1]) === null || _a === void 0 ? void 0 : _a.classList.add('last');
-        return (h("nav", { key: '3f11a51e2918aadfeebe11c6254264f807dcb919' }, h("div", { key: 'de74067b415ca8a3b46f230840cb3ca18d81fbb1', role: "list", class: 'tds-breadcrumb' }, h("slot", { key: '81fa5a70cba9e85c7c567193bb035e0d338f97fd' }))));
+        return (h("nav", { key: '919f59903df9c43f62053efef7a630cb0d8983b1' }, h("div", { key: '6cfd5afea42e7b8c7c1b9da8bc336ba76a56089c', role: "list", class: 'tds-breadcrumb' }, h("slot", { key: '30754525f3de22a9e0fbf74352f52b9ec15cb88c' }))));
     }
     static get is() { return "tds-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -22,7 +22,9 @@ export class TdsButton {
         if (!this.text && !hasLabelSlot) {
             this.onlyIcon = true;
         }
-        return (h(Host, { key: '5e4003467875c6ecbfa8111982d90582ad4f81e4', class: `${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''} `, disabled: this.disabled }, h("button", { key: 'c3271e8b3a132aa65633b7363d06d60894cf20a4', type: this.type, disabled: this.disabled, class: {
+        return (h(Host, { key: '0da9ecd33d791c7f38df49a7be8154c2b853b8a9', class: {
+                [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
+            }, disabled: this.disabled }, h("button", { key: 'f36ff769c173013f50d94aa411df2e523150c117', type: this.type, disabled: this.disabled, class: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -36,7 +38,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: 'faf17907cbe022e4ec0ed3662704f60de018ead2', name: "label" }), hasIconSlot && h("slot", { key: '9f9ffcb72c024ed1030a4269f4bd8af29e2901bd', name: "icon" }))));
+            } }, this.text, hasLabelSlot && !this.onlyIcon && h("slot", { key: '424b383819a08898c3cd33a086ebe53b79f9e965', name: "label" }), hasIconSlot && h("slot", { key: '77c062dab9e5abbbd687340e4451ead527b3a7af', name: "icon" }))));
     }
     static get is() { return "tds-button"; }
     static get encapsulation() { return "scoped"; }

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

@@ -40,11 +40,15 @@ export class TdsCard {
         this.cardId = generateUniqueId();
     }
     render() {
-        return (h(Host, { key: 'd777b6ef9815b43c55749ff8a03ef5d8cb21cf74', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}`, onClick: () => {
-                if (this.clickable) {
-                    this.handleClick();
-                }
-            } }, this.getCardContent())) : (h("div", { class: `card ${this.clickable ? 'clickable' : ''} ${this.stretch ? `${this.imagePlacement}-stretch` : this.imagePlacement}` }, this.getCardContent()))));
+        const cardStyle = {
+            card: true,
+            clickable: this.clickable,
+            [this.imagePlacement]: !this.stretch,
+            [`${this.imagePlacement}-stretch`]: this.stretch,
+        };
+        return (h(Host, { key: '03c6bf925c58c0634797f8370c68cc360f54cc0c', class: this.modeVariant && `tds-mode-variant-${this.modeVariant}` }, this.clickable ? (h("button", { class: cardStyle, onClick: () => {
+                this.handleClick();
+            } }, 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

@@ -51,11 +51,11 @@ export class TdsCheckbox {
         }
     }
     render() {
-        return (h("div", { key: '068b73081ab2b1b24d58fd2afd70f2b0e4308745', class: "tds-checkbox" }, h("input", { key: '97bd225b10dea56b8166ce3d5c2e4569a7dc76f9',
+        return (h("div", { key: '1d0a8257cd1710277e076b4a277dff2c0c89b3d8', class: "tds-checkbox" }, h("input", { key: '689144e40c0be61db6b82aa6eaeb7ff3d09d7d72',
             // 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'), 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: '9cfe0411c9b26d12229de7fdb9421b333da0199c', htmlFor: this.checkboxId }, h("slot", { key: '17d2e45ddf05aa409926f3df82caab7a4f110b72', name: "label" }))));
+            } }), h("label", { key: '534eed7aa114861c528be0b776879484a35348bf', htmlFor: this.checkboxId }, h("slot", { key: 'db59bcc78f7f2be94037651b880a5ef149b90747', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }

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

@@ -76,7 +76,7 @@ export class TdsChip {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        return (h(Host, { key: 'de7555f8a452acf90f19908db73000ff2f917378' }, h("div", { key: '148eb930c309f1a6f53f8462a37ed6ee680d6703', class: "component" }, h("div", { key: '8020dd1198564e794fec8ec7dbd9dd7b3a9f188f', class: chipClasses }, h("input", Object.assign({ key: 'fe4a9718565e7dfc85700a026e7263adbc8258fb', type: this.type, id: this.chipId }, inputAttributes)), h("label", { key: 'af5687821c68ccada0d62290fd7f652392bb3fd1', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '55b7bc3855b45a3a2aee08f00bb8223564300ec1', name: "prefix" }), hasLabelSlot && h("slot", { key: '20c2024a51109edeb65503c10d8691449f806a6c', name: "label" }), hasSuffixSlot && h("slot", { key: '3a193b078226bef9f8b8ac45d74b9e82b51dcc52', name: "suffix" }))))));
+        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" }))))));
     }
     static get is() { return "tds-chip"; }
     static get encapsulation() { return "scoped"; }

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

@@ -96,7 +96,7 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        return (h("div", { key: '0b0386d6ca214861e77014eb3c1b1ad5ac5176ea', class: `
+        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' : ''}
@@ -106,7 +106,7 @@ export class TdsDatetime {
         ${this.state === 'error' || this.state === 'success'
                 ? `tds-form-datetime-${this.state}`
                 : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, this.label && (h("label", { key: '0ec4ae11802d336afb3480d93c6958b065974518', htmlFor: this.name, class: "tds-datetime-label" }, this.label)), h("div", { key: '454f2935d7ba7fb0679812fdec1f7a1080eb9722', onClick: (e) => this.handleFocusClick(e), class: "tds-datetime-container" }, h("div", { key: '79dd5d7eb7492290857808202d573b1315f43e50', class: "tds-datetime-input-container" }, h("input", { key: '01002d1f987a863aa9289e47b485a3740f3a5786', 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: '62bb064b898118016212f7009b8ff7ae08f9be84', class: "datetime-icon icon-datetime-local" }, h("tds-icon", { key: 'a68bf6f45b79796ea5631225dc487ba27187dd03', size: "20px", name: "calendar" })), h("div", { key: 'd6d2425cae67f297c44f08de7d023013eec27547', class: "datetime-icon icon-time" }, h("tds-icon", { key: '5bdd8c430c232c4b01a612f9260e55d55a9fb44a', size: "20px", name: "clock" }))), h("div", { key: '3bb439913f3054041322de6d0056960a4eb1dd1c', class: "tds-datetime-bar" })), this.helper && (h("div", { key: '3f7245fda7ee2c0d894d5e4fdd90beace078035e', class: "tds-datetime-helper" }, h("div", { key: '82d7b73b3ab1e6dc5d90762416d169d393c69c5d', class: "tds-helper" }, this.state === 'error' && h("tds-icon", { key: '9ccebec9e7cbce668362884e7efeb3c92bec8e82', name: "error", size: "16px" }), this.helper)))));
+        ${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)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }

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

@@ -4,7 +4,7 @@ export class Divider {
         this.orientation = 'horizontal';
     }
     render() {
-        return (h(Host, { key: '52a57f6bab64f6329412bbab154f213864382e98', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '5ba2a5d20d84748b4b76e7ec24155f29cab69bc5', class: `divider ${this.orientation}` })));
+        return (h(Host, { key: 'a6195d6461fc6727d9e83c4152f446179160963f', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: 'f1cf2f97534adfe809f8ddda734cfdbcecd7989a', 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

@@ -62,7 +62,7 @@ export class TdsDropdownOption {
         this.selected = selected;
     }
     render() {
-        return (h(Host, { key: '1cb00a19c5dbcc47e1b2bc97d1d5ccc8ac5a532a', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: '5deaf44c7306f4b1856200bf0a5640e99fcb449d', class: `dropdown-option 
+        return (h(Host, { key: '0dedcd94148bf61ee8b154c00eca73759f366dd4', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'da3b6d37132d48502599145f85f05072a996d6dc', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}