@scania/tegel 1.24.0 → 1.25.0-beta.0

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

@@ -3,10 +3,18 @@ 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: '3f11a51e2918aadfeebe11c6254264f807dcb919' }, h("div", { key: 'de74067b415ca8a3b46f230840cb3ca18d81fbb1', role: "list", class: 'tds-breadcrumb' }, h("slot", { key: '81fa5a70cba9e85c7c567193bb035e0d338f97fd' }))));
+        return (h("nav", { key: '68f54833d5a557a37e7a826c29bfe4a99b80fd70', "aria-label": this.tdsAriaLabel }, h("div", { key: '60188db3fa82f0f8a292f425f2d2f100cec8fa13', role: "list", class: "tds-breadcrumb" }, h("slot", { key: 'c3c6a50079d49fa1c6915df2f72f7a093051fb06' }))));
     }
     static get is() { return "tds-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -20,5 +28,26 @@ 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(tds-button[fullbleed]) {
+:host(.fullbleed) {
   width: 100%;
   justify-content: center;
 }

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

@@ -14,15 +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: '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: '3e204293608cfebe52984582fd8cb6ac0697c81c', 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: {
                 'primary': this.variant === 'primary',
                 'secondary': this.variant === 'secondary',
                 'ghost': this.variant === 'ghost',
@@ -36,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: 'faf17907cbe022e4ec0ed3662704f60de018ead2', name: "label" }), hasIconSlot && h("slot", { key: '9f9ffcb72c024ed1030a4269f4bd8af29e2901bd', 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"; }
@@ -194,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

@@ -20,13 +20,14 @@ 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" }, 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", 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" }))));
         };
         this.getCardContent = () => {
             const usesBodySlot = hasSlot('body', this.host);
             const usesBodyImageSlot = hasSlot('body-image', this.host);
             const usesActionsSlot = hasSlot('actions', this.host);
-            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` })));
+            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` })));
         };
         this.modeVariant = null;
         this.imagePlacement = 'below-header';
@@ -40,11 +41,14 @@ 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,
+        };
+        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()))));
     }
     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: '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'), 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: 'caaa642c85a0d2913441c0e7baa3ca28e9b3a7a8', htmlFor: this.checkboxId }, h("slot", { key: '12d411bbcd3baa9ed43cec5d4d25a1ad4c982ce5', name: "label" }))));
     }
     static get is() { return "tds-checkbox"; }
     static get encapsulation() { return "scoped"; }

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!');
@@ -68,6 +72,7 @@ export class TdsChip {
         const hasPrefixSlot = hasSlot('prefix', this.host);
         const hasLabelSlot = hasSlot('label', this.host);
         const hasSuffixSlot = hasSlot('suffix', this.host);
+        const textInsideLabel = this.host.querySelector(`[slot="label"]`).innerHTML;
         const chipClasses = {
             'tds-chip-component': true,
             'sm': this.size === 'sm',
@@ -76,7 +81,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: 'e7a9ea9750272388e5a8988622865d3aef8104d0' }, h("div", { key: '96ef34ec0764c1c2082d32d6403a86fef836d83b', class: "component" }, h("div", { key: '3a565a0fcb663e8bae82e962d810f6316bd72843', class: chipClasses }, h("input", Object.assign({ key: 'fe6d46749f8d45d90ca4990d009db405ce3c00c2', type: this.type, id: this.chipId, "aria-checked": this.type === 'button' ? undefined : String(this.checked), role: this.type, "aria-label": hasLabelSlot && textInsideLabel ? textInsideLabel : 'Chip' }, inputAttributes)), h("label", { key: 'b395ede6ab012ed36bd32ad95490da2bfbd3c8a7', onClick: (event) => event.stopPropagation(), htmlFor: this.chipId }, hasPrefixSlot && h("slot", { key: '2713979e0184a424ea5d9dc6c3f2ed19d10564ca', name: "prefix" }), hasLabelSlot && h("slot", { key: '7707873c5ea761b6c64e1591064c7126e85686ba', name: "label" }), hasSuffixSlot && h("slot", { key: '73d2517b2cbc1ef6b690fa7c6ef7b1fda126bee2', name: "suffix" }))))));
     }
     static get is() { return "tds-chip"; }
     static get encapsulation() { return "scoped"; }
@@ -248,7 +253,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: '0b0386d6ca214861e77014eb3c1b1ad5ac5176ea', 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: '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)))));
+        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: '52a57f6bab64f6329412bbab154f213864382e98', role: "separator", "aria-orientation": this.orientation === 'vertical' ? 'vertical' : undefined }, h("div", { key: '5ba2a5d20d84748b4b76e7ec24155f29cab69bc5', 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

@@ -1,25 +1,36 @@
 import { Host, h, } from "@stencil/core";
+import { convertToString } from "../../../utils/convertToString";
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */
 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) {
                 this.selected = true;
-                this.parentElement.appendValue(this.value);
+                this.parentElement.appendValue(this.internalValue);
                 this.parentElement.close();
                 this.tdsSelect.emit({
-                    value: this.value,
+                    value: this.internalValue,
                     selected: this.selected,
                 });
             }
@@ -27,18 +38,18 @@ export class TdsDropdownOption {
         this.handleMultiselect = (event) => {
             if (!this.disabled) {
                 if (event.detail.checked) {
-                    this.parentElement.appendValue(this.value);
+                    this.parentElement.appendValue(this.internalValue);
                     this.selected = true;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
                 else {
-                    this.parentElement.removeValue(this.value);
+                    this.parentElement.removeValue(this.internalValue);
                     this.selected = false;
                     this.tdsSelect.emit({
-                        value: this.value,
+                        value: this.internalValue,
                         selected: this.selected,
                     });
                 }
@@ -52,17 +63,24 @@ export class TdsDropdownOption {
             this.tdsBlur.emit(event);
         };
         this.value = undefined;
+        this.internalValue = undefined;
         this.disabled = false;
         this.selected = false;
-        this.multiselect = undefined;
+        this.multiselect = false;
         this.size = 'lg';
     }
     /** Method to select/deselect an option. */
     async setSelected(selected) {
         this.selected = selected;
     }
+    valueWatcher(newValue) {
+        this.internalValue = convertToString(newValue);
+    }
+    componentWillLoad() {
+        this.internalValue = convertToString(this.value);
+    }
     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: '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' : ''}
@@ -94,18 +112,18 @@ export class TdsDropdownOption {
     static get properties() {
         return {
             "value": {
-                "type": "string",
+                "type": "any",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "string | number",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Value for the Dropdown option."
+                    "text": "Value of the dropdown option"
                 },
                 "attribute": "value",
                 "reflect": false
@@ -132,6 +150,7 @@ export class TdsDropdownOption {
     }
     static get states() {
         return {
+            "internalValue": {},
             "selected": {},
             "multiselect": {},
             "size": {}
@@ -221,4 +240,10 @@ export class TdsDropdownOption {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueWatcher"
+            }];
+    }
 }