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

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

@@ -1,29 +1,29 @@
 @charset "UTF-8";
-:host([role=listitem]) div ::slotted(*) {
+[role=listitem] ::slotted(*) {
   color: var(--tds-breadcrumb-color);
   text-decoration: none;
 }
-:host([role=listitem]) div:hover ::slotted(*) {
+[role=listitem]:hover ::slotted(*) {
   color: var(--tds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-:host([role=listitem]) div ::slotted(*:focus-visible) {
+[role=listitem] ::slotted(*:focus-visible) {
   outline: 2px solid var(--tds-blue-400);
   outline-offset: -2px;
   outline-offset: 0;
 }
-:host([role=listitem]) div.current ::slotted(*),
-:host([role=listitem]) div [aria-current=page] ::slotted(*) {
+[role=listitem].current ::slotted(*),
+[role=listitem] [aria-current=page] ::slotted(*) {
   pointer-events: none;
   cursor: default;
   color: var(--tds-breadcrumb-color-current);
 }
-:host([role=listitem]) div.current:hover ::slotted(*),
-:host([role=listitem]) div [aria-current=page]:hover ::slotted(*) {
+[role=listitem].current:hover ::slotted(*),
+[role=listitem] [aria-current=page]:hover ::slotted(*) {
   text-decoration: none;
   cursor: not-allowed;
 }
-:host([role=listitem]) div::after {
+[role=listitem]::after {
   content: "›";
   color: var(--tds-breadcrumb-separator-color);
   margin-right: 4px;
@@ -32,6 +32,7 @@
   width: 4px;
   height: 8px;
 }
-:host([role=listitem]) .current::after {
+
+.current::after {
   display: none;
 }

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

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { h } from "@stencil/core";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For a native <code>&lt;a></code> element.
  */
@@ -7,7 +7,7 @@ export class TdsBreadcrumb {
         this.current = false;
     }
     render() {
-        return (h(Host, { key: 'eec4404abfba50f930de99d55150bfd38dac0d62', role: "listitem" }, h("div", Object.assign({ key: '37dab2315d9bd952f385dc58433e9cf9fd9411ca', class: { current: this.current } }, (this.current ? { 'aria-current': 'page' } : {})), h("slot", { key: '2abcee4e18ef900c088cc855e3a62fac56876366' }))));
+        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

@@ -3,18 +3,10 @@ import { h } from "@stencil/core";
  * @slot <default> - <b>Unnamed slot.</b> For the breadcrumb elements.
  */
 export class TdsBreadcrumbs {
-    constructor() {
-        this.tdsAriaLabel = undefined;
-    }
-    connectedCallback() {
-        if (!this.tdsAriaLabel) {
-            console.warn('Tegel Breadcrumbs component: missing tdsAriaLabel prop');
-        }
-    }
     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: '68f54833d5a557a37e7a826c29bfe4a99b80fd70', "aria-label": this.tdsAriaLabel }, h("div", { key: '60188db3fa82f0f8a292f425f2d2f100cec8fa13', role: "list", class: "tds-breadcrumb" }, h("slot", { key: 'c3c6a50079d49fa1c6915df2f72f7a093051fb06' }))));
+        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"; }
@@ -28,26 +20,5 @@ export class TdsBreadcrumbs {
             "$": ["breadcrumbs.css"]
         };
     }
-    static get properties() {
-        return {
-            "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"
-                },
-                "attribute": "tds-aria-label",
-                "reflect": false
-            }
-        };
-    }
     static get elementRef() { return "host"; }
 }

package/dist/collection/components/button/button.css

@@ -489,15 +489,15 @@ button.danger.disabled, button.danger:disabled {
   height: var(--tds-spacing-element-16);
 }
 
-:host(.disabled:active) {
+:host([disabled]:active) {
   pointer-events: none;
 }
 
-:host(.disabled) button {
+:host([disabled]) button {
   cursor: not-allowed;
 }
 
-:host(.fullbleed) {
+:host(tds-button[fullbleed]) {
   width: 100%;
   justify-content: center;
 }

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

@@ -14,25 +14,17 @@ 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: '3e204293608cfebe52984582fd8cb6ac0697c81c', class: {
+        return (h(Host, { key: '0da9ecd33d791c7f38df49a7be8154c2b853b8a9', class: {
                 [`tds-mode-variant-${this.modeVariant}`]: Boolean(this.modeVariant),
-                disabled: Boolean(this.disabled),
-                fullbleed: Boolean(this.fullbleed),
-            }, disabled: this.disabled }, h("button", Object.assign({ key: '23fca6b572c74a1ba66d964f3225ec7d5c8c92b1', type: this.type, disabled: this.disabled, class: {
+            }, 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',
@@ -46,7 +38,7 @@ export class TdsButton {
                 'icon': hasIconSlot,
                 'only-icon': this.onlyIcon,
                 [`animation-${this.animation}`]: this.animation !== 'none',
-            } }, (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" }))));
+            } }, 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"; }
@@ -204,23 +196,6 @@ 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

@@ -20,14 +20,13 @@ export class TdsCard {
             const usesHeaderSlot = hasSlot('header', this.host);
             const usesSubheaderSlot = hasSlot('subheader', this.host);
             const usesThumbnailSlot = hasSlot('thumbnail', this.host);
-            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader", id: `header-${this.cardId}` }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
+            return (h("div", { class: "card-header" }, usesThumbnailSlot && h("slot", { name: "thumbnail" }), h("div", { class: "header-subheader" }, this.header && h("span", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("span", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" }))));
         };
         this.getCardContent = () => {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            const bodyId = `body-${this.cardId}`;
-            return (h("div", { class: this.stretch && 'stretch', "aria-describedby": usesBodySlot ? bodyId : null }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: "card-body", id: bodyId }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
+            return (h("div", { class: this.stretch && 'stretch' }, this.imagePlacement === 'below-header' && this.getCardHeader(), h("div", { class: `card-body` }, usesBodyImageSlot && h("slot", { name: "body-image" }), this.bodyImg && h("img", { class: "card-body-img", src: this.bodyImg, alt: this.bodyImgAlt }), this.imagePlacement === 'above-header' && this.getCardHeader(), this.bodyDivider && h("tds-divider", null), usesBodySlot && h("slot", { name: "body" })), usesActionsSlot && h("slot", { name: `actions` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -47,8 +46,9 @@ export class TdsCard {
             [this.imagePlacement]: !this.stretch,
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
-        const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        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()))));
+        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: '7362e4e69df24e5615f9f23fe8bc9b72b29cf525', class: "tds-checkbox" }, h("input", { key: '43f2b6070677645ad7bc9c47e2bd65df43735eff',
+        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: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', 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

@@ -16,11 +16,7 @@ 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!');
@@ -47,7 +43,6 @@ export class TdsChip {
         this.name = undefined;
         this.value = undefined;
         this.disabled = false;
-        this.tdsAriaLabel = undefined;
     }
     handleInternaRadioChange(event) {
         const { chipId, checked, groupName } = event.detail;
@@ -68,11 +63,6 @@ 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);
@@ -86,7 +76,7 @@ export class TdsChip {
             'suffix': hasSuffixSlot,
             'disabled': this.disabled,
         };
-        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" }))))));
+        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"; }
@@ -225,23 +215,6 @@ 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
             }
         };
     }
@@ -275,7 +248,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,16 +8,6 @@
 .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 {
@@ -362,16 +352,6 @@ 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,7 +5,6 @@ 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),
@@ -15,10 +14,6 @@ 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:
@@ -87,7 +82,7 @@ export class TdsDatetime {
     }
     /** Method that resets the dateteime without emitting an event. */
     internalReset() {
-        const value = '';
+        let value = '';
         if (this.defaultValue !== 'none') {
             this.value = this.getDefaultValue();
         }
@@ -101,19 +96,17 @@ export class TdsDatetime {
         if (this.size === 'sm') {
             className += `${className}-sm`;
         }
-        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)))));
+        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)))));
     }
     static get is() { return "tds-datetime"; }
     static get encapsulation() { return "scoped"; }
@@ -133,8 +126,8 @@ export class TdsDatetime {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'datetime-local' | 'date' | 'month' | 'week' | 'time'",
-                    "resolved": "\"date\" | \"datetime-local\" | \"month\" | \"time\" | \"week\"",
+                    "original": "'datetime-local' | 'date' | 'time'",
+                    "resolved": "\"date\" | \"datetime-local\" | \"time\"",
                     "references": {}
                 },
                 "required": false,
@@ -211,7 +204,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 month: YY-MM. Format for week: YY-Www  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 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: 'da07834ddc86e611803422b2a756c76109034fbf', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '90671868ed03281cfbd821cdb7057d4e79d790c3', 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

@@ -5,24 +5,14 @@ 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 =
-                ((_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.tagName) === 'TDS-DROPDOWN'
+                this.host.parentElement.tagName === 'TDS-DROPDOWN'
                     ? this.host.parentElement
                     : this.host.getRootNode().host;
-            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.multiselect = this.parentElement.multiselect;
+            this.size = this.parentElement.size;
+            this.label = this.host.textContent.trim();
         };
         this.handleSingleSelect = () => {
             if (!this.disabled) {
@@ -66,7 +56,7 @@ export class TdsDropdownOption {
         this.internalValue = undefined;
         this.disabled = false;
         this.selected = false;
-        this.multiselect = false;
+        this.multiselect = undefined;
         this.size = 'lg';
     }
     /** Method to select/deselect an option. */
@@ -80,7 +70,7 @@ export class TdsDropdownOption {
         this.internalValue = convertToString(this.value);
     }
     render() {
-        return (h(Host, { key: 'af1229553e89c02aca1d7c11bbc80acd25ce44b5', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'c93eb33d1864028690ab981c0f676f03993265c4', class: `dropdown-option 
+        return (h(Host, { key: '5d13306d202a3c488fdd75daa3aa8cfc15e4b9cf', role: "option", "aria-disabled": this.disabled, "aria-selected": this.selected }, h("div", { key: 'df8b33467c49913853b2d86dff7115b6cea37f55', class: `dropdown-option 
           ${this.size}
           ${this.selected ? 'selected' : ''}
           ${this.disabled ? 'disabled' : ''}