@scania/tegel 1.40.0-ts-strict-mode-beta.0 → 1.41.0-angular-patch-types-beta.0

package/dist/collection/components/slider/slider.js

@@ -2,6 +2,42 @@ import { h, } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
     constructor() {
+        /** Text for label */
+        this.label = '';
+        /** Initial value */
+        this.value = '0';
+        /** Minimum value */
+        this.min = '0';
+        /** Maximum value */
+        this.max = '100';
+        /** Number of tick markers (tick for min- and max-value will be added automatically) */
+        this.ticks = '0';
+        /** Decide to show numbers above the tick markers or not  */
+        this.showTickNumbers = false;
+        /** Decide to show the tooltip or not */
+        this.tooltip = false;
+        /** Sets the disabled state for the whole component  */
+        this.disabled = false;
+        /** Sets the read only state for the whole component  */
+        this.readOnly = false;
+        /** Decide to show the controls or not */
+        this.controls = false;
+        /** Decide to show the input field or not */
+        this.input = false;
+        /** Defines how much to increment/decrement the value when using controls */
+        this.step = '1';
+        /** Name property (will be inherited by the native slider component) */
+        this.name = '';
+        /** Sets the size of the thumb */
+        this.thumbSize = 'lg';
+        /** Snap to the tick's grid */
+        this.snap = false;
+        /** Sets the aria-label for the slider control. */
+        this.tdsAriaLabel = '';
+        /** ID for the Slider's input element, randomly generated if not specified. */
+        this.sliderId = generateUniqueId();
+        /** Sets the read only aria label for the input field */
+        this.tdsReadOnlyAriaLabel = '';
         this.wrapperElement = null;
         this.thumbElement = null;
         this.thumbInnerElement = null;
@@ -17,30 +53,12 @@ export class TdsSlider {
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
         this.resetEventListenerAdded = false;
-        this.formElement = null;
         this.ariaLiveElement = null;
+        this.announcementDebounceTimeout = null;
         this.resetToInitialValue = () => {
             this.forceValueUpdate(this.initialValue);
             this.reset();
         };
-        this.label = '';
-        this.value = '0';
-        this.min = '0';
-        this.max = '100';
-        this.ticks = '0';
-        this.showTickNumbers = false;
-        this.tooltip = false;
-        this.disabled = false;
-        this.readOnly = false;
-        this.controls = false;
-        this.input = false;
-        this.step = '1';
-        this.name = '';
-        this.thumbSize = 'lg';
-        this.snap = false;
-        this.tdsAriaLabel = '';
-        this.sliderId = generateUniqueId();
-        this.tdsReadOnlyAriaLabel = '';
     }
     roundToStep(val) {
         const stepNum = parseFloat(this.step);
@@ -83,22 +101,21 @@ export class TdsSlider {
         }
     }
     handleRelease(event) {
-        var _a, _b, _c;
         if (!this.thumbGrabbed) {
             const clickedOnTrack = event.target === this.trackElement || event.target === this.trackFillElement;
             if (clickedOnTrack) {
                 this.thumbCore(event);
-                (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.focus();
+                this.trackElement.focus();
             }
             return;
         }
         this.thumbGrabbed = false;
-        (_b = this.thumbInnerElement) === null || _b === void 0 ? void 0 : _b.classList.remove('pressed');
+        this.thumbInnerElement.classList.remove('pressed');
         if (this.thumbElement) {
             this.thumbElement.setAttribute('aria-grabbed', 'false');
         }
         this.updateValue(event);
-        (_c = this.trackElement) === null || _c === void 0 ? void 0 : _c.focus();
+        this.trackElement.focus();
     }
     handleMove(event) {
         if (!this.thumbGrabbed) {
@@ -142,11 +159,8 @@ export class TdsSlider {
         return snappedLocalLeft;
     }
     thumbCore(event) {
-        var _a;
         const numTicks = parseInt(this.ticks);
-        const trackRect = (_a = this.trackElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
-        if (!trackRect)
-            return;
+        const trackRect = this.trackElement.getBoundingClientRect();
         let localLeft = 0;
         if (event.type === 'mousemove' || event.type === 'mouseup') {
             localLeft = event.clientX - trackRect.left;
@@ -161,9 +175,7 @@ export class TdsSlider {
             localLeft = this.updateSupposedValueSlot(localLeft);
         }
         this.thumbLeft = this.constrainThumb(localLeft);
-        if (this.thumbElement) {
-            this.thumbElement.style.left = `${this.thumbLeft}px`;
-        }
+        this.thumbElement.style.left = `${this.thumbLeft}px`;
         this.updateValue(event);
     }
     updateTrack() {
@@ -179,8 +191,6 @@ export class TdsSlider {
         // Debounce announcements to prevent too many rapid announcements
         clearTimeout(this.announcementDebounceTimeout);
         this.announcementDebounceTimeout = setTimeout(() => {
-            if (!this.ariaLiveElement)
-                return;
             this.ariaLiveElement.textContent = `${this.label ? this.label + ' ' : ''}${this.value} of ${this.max}`;
         }, 50);
     }
@@ -304,12 +314,11 @@ export class TdsSlider {
         }
     }
     grabThumb() {
-        var _a;
         if (this.readOnly) {
             return;
         }
         this.thumbGrabbed = true;
-        (_a = this.thumbInnerElement) === null || _a === void 0 ? void 0 : _a.classList.add('pressed');
+        this.thumbInnerElement.classList.add('pressed');
         if (this.thumbElement) {
             this.thumbElement.setAttribute('aria-grabbed', 'true');
         }
@@ -402,8 +411,7 @@ export class TdsSlider {
                 this.calculateThumbLeftFromValue(this.value);
                 this.updateTrack();
             });
-            if (this.wrapperElement)
-                resizeObserver.observe(this.wrapperElement);
+            resizeObserver.observe(this.wrapperElement);
         }
         this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
@@ -440,30 +448,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '24887d4b2784913aed5eca30aad868b29bc3dc71', class: {
+        return (h("div", { key: '3a496ff494a47cb2e7f777145731b2b0a99619e5', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: 'a30068ce649a2a4154df73f076b0d889898e2220', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '38a8a4993efb95dc74a6b998a4a6dce68a57193d', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: 'b1afaaf8c2c20278e5897d3973bc2267bd277f85', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, step: this.step, value: this.value, disabled: this.disabled }), h("div", { key: '38d7dc7f03e4ce5398f47382ac44b159d03cc9a9', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: 'dbdcd7a7524249488066f6cbc7ccda1edc125348', class: {
+            } }), h("div", { key: '564131065550bb6ef78b813791696af866275b60', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '703fef163564db3dab89f7ef62c8ec8ae849091a', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '61e0a370c74b04c29b7c3d8f227727df2d72e2e1', class: "tds-slider__input-values" }, h("div", { key: '080c7a8d5fe68231a33946284eaf0b42509ae2aa', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'c281e3c27afb09bbde92bb45b95494bda73a2d1e', class: "tds-slider__controls" }, h("div", { key: '43388973041f6257683c1e95c28273b36329584b', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'be17662d98c4e89ac549d7604fb8ef039ec1a4ff', name: "minus", size: "16px" })))), h("div", { key: '2d34951d542b45ff4fce0869bd9877626b414641', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '991096492d690f53e0d597bd05d4f9f3fa875831', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'e2362ac7b9af796e0d4b2961c99d6ef850f873fc', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '303410bc80f3fc1a49c1a1954f287151ba1397df', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: 'cc0dd61feaeb64fa866ceee68f03e59844572327', id: `${this.sliderId}-label`, class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: 'd95cfd517b1d810ba60f47d8f79f27fbcb11cb84', class: "tds-slider__input-values" }, h("div", { key: '253ecd4768fe8ac57e8fb342ed1e363abc9da5cb', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '84a35f8c63bf5b723d4244ec8f7ea1dd7cbffc20', class: "tds-slider__controls" }, h("div", { key: '754a34b2b234d7e2354c00f34b86db02d4f114a0', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event), role: "button", "aria-label": "Decrease value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '70e6604021a651eadcbaf7767b03f2e62034abe5', name: "minus", size: "16px" })))), h("div", { key: '53550f817e1a032e0e91200752e7d1eeb23ded34', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: 'f59130b6cdb011c01eb81d5e18cf7e952b96c68e', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '66f66ceae09f21462e3f28c49844b10e0182ec49', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '00f9d38e9aba338091af66ced5f559378354cffd', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
             }, tabindex: this.disabled ? '-1' : '0', role: "presentation", onFocus: () => {
                 if (this.thumbElement) {
                     this.thumbElement.focus();
                 }
-            } }, h("div", { key: '458f4a54a0ffc5eef7ad1933ba1713f378e03bb2', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '20ea7060588fc4e81be9e2e3d6e5a7c585b6b867', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '09f5c914b3e31f40cbc5114ba11ac8ed6b6c10e3', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: 'd6c6155ee44d443dc58ed1c463e927e8de6808b6', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '915c5a0873d719e716a9eda6f24df4f289dcc3e3', class: "tds-slider__value" }, this.value, h("svg", { key: 'd1ad51a448a9314c8a9dc87e5b4c969d9699833f', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '84dd5e1bfdddb3f96ce260fde63ec01979e2e8f7', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '3c2bd4378b7d2f894bd04af1d0d4f68472d94129', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb(), role: "slider", "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.value, "aria-valuetext": `${this.value} of ${this.max}`, "aria-labelledby": `${this.sliderId}-label`, "aria-grabbed": this.thumbGrabbed ? 'true' : 'false', "aria-label": ariaLabel, tabindex: this.disabled ? '-1' : '0' }, this.tooltip && (h("div", { key: '8ddf95ae707a6bf086f6c414fca62098f7974caf', class: "tds-slider__value" }, this.value, h("svg", { key: '9193dc47663210d904271d10a1e3ffbaad3073bf', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '6d5c154ec0dd136ee3898e8350fd65c30794571b', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: '183f49eda3134b87e5b65334265d44fe404a9e1d', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '8d7b06d47eb9c5b8adef909a63b4017143025477', class: "tds-slider__input-values" }, h("div", { key: '1e5e6cb7d0522ca0e89e67fd0125684b32e2c4f6', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'e3a5d242963f2868f2f26674243c36c634422501', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '840ddc76488d4d1de29be8d3b2032d57894d2b7a', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: 'c71f7b90d4565cccdb41ef56e1dc3485506baad1', class: "tds-slider__controls" }, h("div", { key: 'c968cc1187252f95b5953a7a91437a09d0255d72', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: '8e3488bcad15f4f6dd7182b066a905019d87d20d', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '00e135462f95a4ee21070c25e0b507e4931257ed', class: "tds-slider__input-values" }, h("div", { key: 'ad8029ecff8f448380f291629ee803ee5634bf6e', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'cb7460d3946debbc138b2ae88b61ff9a288ca2ae', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '226a0bbdee3910431c4d72065e2ca9d09abf2fa1', noMinWidth: true, size: "sm", type: "number", value: this.value, min: this.min, max: this.max, readOnly: this.readOnly, disabled: this.disabled, onTdsChange: (e) => console.log(e), tdsAriaLabel: this.readOnly ? this.tdsReadOnlyAriaLabel : undefined, onTdsBlur: (event) => this.updateSliderValueFromTextField(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event) })))), this.useControls && (h("div", { key: '2b85ddaf9e31f702773212326f55e8eb4737e3da', class: "tds-slider__controls" }, h("div", { key: '7376eac80ff3955ddc6c0b27eb99b463bc0d5985', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event), role: "button", "aria-label": "Increase value", tabindex: this.disabled || this.readOnly ? '-1' : '0' }, h("tds-icon", { key: 'd66d1a1d49da54d1cafca2872b8462b126154684', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -492,8 +500,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Text for label"
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "value": {
@@ -510,8 +520,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Initial value"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "'0'"
             },
             "min": {
@@ -528,8 +540,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Minimum value"
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "min",
                 "defaultValue": "'0'"
             },
             "max": {
@@ -546,8 +560,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Maximum value"
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "max",
                 "defaultValue": "'100'"
             },
             "ticks": {
@@ -564,8 +580,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Number of tick markers (tick for min- and max-value will be added automatically)"
                 },
-                "attribute": "ticks",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "ticks",
                 "defaultValue": "'0'"
             },
             "showTickNumbers": {
@@ -582,8 +600,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show numbers above the tick markers or not"
                 },
-                "attribute": "show-tick-numbers",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "show-tick-numbers",
                 "defaultValue": "false"
             },
             "tooltip": {
@@ -600,8 +620,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show the tooltip or not"
                 },
-                "attribute": "tooltip",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tooltip",
                 "defaultValue": "false"
             },
             "disabled": {
@@ -618,8 +640,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the disabled state for the whole component"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "readOnly": {
@@ -636,8 +660,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the read only state for the whole component"
                 },
-                "attribute": "read-only",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "read-only",
                 "defaultValue": "false"
             },
             "controls": {
@@ -654,8 +680,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show the controls or not"
                 },
-                "attribute": "controls",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "controls",
                 "defaultValue": "false"
             },
             "input": {
@@ -672,8 +700,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Decide to show the input field or not"
                 },
-                "attribute": "input",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "input",
                 "defaultValue": "false"
             },
             "step": {
@@ -690,8 +720,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Defines how much to increment/decrement the value when using controls"
                 },
-                "attribute": "step",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "step",
                 "defaultValue": "'1'"
             },
             "name": {
@@ -708,8 +740,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Name property (will be inherited by the native slider component)"
                 },
-                "attribute": "name",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "name",
                 "defaultValue": "''"
             },
             "thumbSize": {
@@ -726,8 +760,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the size of the thumb"
                 },
-                "attribute": "thumb-size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "thumb-size",
                 "defaultValue": "'lg'"
             },
             "snap": {
@@ -744,8 +780,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Snap to the tick's grid"
                 },
-                "attribute": "snap",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "snap",
                 "defaultValue": "false"
             },
             "tdsAriaLabel": {
@@ -762,8 +800,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the aria-label for the slider control."
                 },
-                "attribute": "tds-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-aria-label",
                 "defaultValue": "''"
             },
             "sliderId": {
@@ -780,8 +820,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "ID for the Slider's input element, randomly generated if not specified."
                 },
-                "attribute": "slider-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "slider-id",
                 "defaultValue": "generateUniqueId()"
             },
             "tdsReadOnlyAriaLabel": {
@@ -798,8 +840,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Sets the read only aria label for the input field"
                 },
-                "attribute": "tds-read-only-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-read-only-aria-label",
                 "defaultValue": "''"
             }
         };

package/dist/collection/components/spinner/spinner.js

@@ -1,7 +1,9 @@
 import { h } from "@stencil/core";
 export class TdsSpinner {
     constructor() {
+        /** Size of the Spinner */
         this.size = 'lg';
+        /** Variant of the Spinner */
         this.variant = 'standard';
     }
     render() {
@@ -34,8 +36,10 @@ export class TdsSpinner {
                     "tags": [],
                     "text": "Size of the Spinner"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "variant": {
@@ -52,8 +56,10 @@ export class TdsSpinner {
                     "tags": [],
                     "text": "Variant of the Spinner"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'standard'"
             }
         };

package/dist/collection/components/stepper/step/step.js

@@ -10,19 +10,12 @@ const propToStateMap = {
  */
 export class TdsStep {
     constructor() {
-        this.index = undefined;
+        /** State of the Step */
         this.state = 'upcoming';
-        this.tdsAriaCurrent = undefined;
-        this.hideLabels = undefined;
-        this.size = undefined;
-        this.orientation = undefined;
-        this.labelPosition = undefined;
     }
     /* Needs to be onload to do this on any updates. */
     componentWillLoad() {
         this.stepperEl = this.el.closest('tds-stepper');
-        if (!this.stepperEl)
-            return;
         this.orientation = this.stepperEl.orientation;
         this.labelPosition = this.stepperEl.labelPosition;
         this.size = this.stepperEl.size;
@@ -42,7 +35,7 @@ export class TdsStep {
         }
     }
     render() {
-        return (h(Host, { key: '4da9583f2f8f406775789bb2ba2fb4a048bd2bb2' }, h("div", { key: '68552288702a78338767482726cc50c294c813c4', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '12da4b94879916c29a142ae2b1c9158132369242', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'b67fe88775ae01d9878bfea0ed65a5e89bcd096c', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '63476ee55ea1577a09b3885dd287ef117c00fc3c', name: "label" }))))));
+        return (h(Host, { key: '871df74d99ed0bdf15fa82e0c2980b08b94735a8' }, h("div", { key: 'e108eb5e43390635fbd6020195cb7e6a4912c7c2', role: "listitem", "aria-disabled": this.state === 'upcoming' ? 'true' : 'false', "aria-current": this.tdsAriaCurrent, tabIndex: -1, "aria-label": `Step ${this.index}: ${this.state}`, class: `${this.size} ${this.orientation} text-${this.labelPosition} ${this.hideLabels ? 'hide-labels' : ''}` }, h("span", { key: '8940a00dcd0001d6d264aff8cbc9331d4d890d49', class: `${this.state} content-container` }, this.state === 'success' || this.state === 'error' ? (h("tds-icon", { "aria-hidden": "true", svgTitle: `tds-step-icon-${this.stepperId}`, class: 'tds-step-icon', name: this.state === 'success' ? 'tick' : 'warning', size: this.size === 'lg' ? '20px' : '16px' })) : (h("span", { "aria-hidden": "true", class: "index-container" }, this.index))), !this.hideLabels && (h("div", { key: 'daa62f4d9347c571d214b1b9eb68b7d56418aed2', "aria-hidden": "true", class: `label ${this.size} ${this.state}` }, h("slot", { key: '68a20d3daded858cf1188f43747edb77ed2c9cbf', name: "label" }))))));
     }
     static get is() { return "tds-step"; }
     static get encapsulation() { return "shadow"; }
@@ -72,8 +65,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "Index of the step. Will be displayed in the step if the state is current/upcoming."
                 },
-                "attribute": "index",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index"
             },
             "state": {
                 "type": "string",
@@ -89,8 +84,10 @@ export class TdsStep {
                     "tags": [],
                     "text": "State of the Step"
                 },
-                "attribute": "state",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "state",
                 "defaultValue": "'upcoming'"
             },
             "tdsAriaCurrent": {
@@ -107,8 +104,10 @@ export class TdsStep {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "tds-aria-current",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-current"
             }
         };
     }

package/dist/collection/components/stepper/stepper.js

@@ -5,11 +5,21 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsStepper {
     constructor() {
+        /** The orientation the Steps */
         this.orientation = 'horizontal';
+        /** Text position, only available on a direction: horizontal */
         this.labelPosition = 'below';
+        /** Size of the component and it's children. */
         this.size = 'lg';
+        /** Hides the label for the child components if true. */
         this.hideLabels = false;
+        /** ID used for internal Stepper functionality and events, must be unique.
+         *
+         * **NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,
+         * as the default ID is random and will be different every time.
+         */
         this.stepperId = generateUniqueId();
+        /** Label for the stepper component, for screen reader users */
         this.tdsAriaLabel = 'Progress steps';
     }
     componentWillLoad() {
@@ -76,8 +86,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "The orientation the Steps"
                 },
-                "attribute": "orientation",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "orientation",
                 "defaultValue": "'horizontal'"
             },
             "labelPosition": {
@@ -94,8 +106,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Text position, only available on a direction: horizontal"
                 },
-                "attribute": "label-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label-position",
                 "defaultValue": "'below'"
             },
             "size": {
@@ -112,8 +126,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Size of the component and it's children."
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "hideLabels": {
@@ -130,8 +146,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Hides the label for the child components if true."
                 },
-                "attribute": "hide-labels",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "hide-labels",
                 "defaultValue": "false"
             },
             "stepperId": {
@@ -148,8 +166,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "ID used for internal Stepper functionality and events, must be unique.\n\n**NOTE**: If you're listening for Stepper events, you need to set this ID yourself to identify the Stepper,\nas the default ID is random and will be different every time."
                 },
-                "attribute": "stepper-id",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "stepper-id",
                 "defaultValue": "generateUniqueId()"
             },
             "tdsAriaLabel": {
@@ -166,8 +186,10 @@ export class TdsStepper {
                     "tags": [],
                     "text": "Label for the stepper component, for screen reader users"
                 },
-                "attribute": "tds-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-aria-label",
                 "defaultValue": "'Progress steps'"
             }
         };