@scania/tegel 1.47.2 → 1.48.0-beta.0-tabbing-test

package/dist/collection/components/side-menu/side-menu.js

@@ -10,32 +10,41 @@ const GRID_LG_BREAKPOINT = 992;
  * */
 export class TdsSideMenu {
     constructor() {
-        this.handleMatchesLgBreakpointChange = (e) => {
-            const isBelowLg = !e.matches;
-            if (isBelowLg) {
-                this.collapsed = false;
-            }
-            else {
-                this.collapsed = this.initialCollapsedState;
-                this.open = false;
-            }
-        };
+        /** Applicable only for mobile. If the Side Menu is open or not. */
         this.open = false;
+        /** Applicable only for desktop. If the Side Menu should always be shown. */
         this.persistent = false;
+        /** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
+         * NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event. */
         this.collapsed = false;
+        this.isMobile = false;
         this.isUpperSlotEmpty = false;
         this.isCollapsed = false;
+        /* To preserved initial state of collapsed prop as it is changed in runtime */
         this.initialCollapsedState = false;
+        /** @internal Tracks the currently focused element index for keyboard navigation */
         this.activeElementIndex = 0;
+        this.handleMatchesLgBreakpointChange = (e) => {
+            const isMobile = !e.matches;
+            this.isMobile = isMobile;
+            if (isMobile) {
+                this.collapsed = false;
+            }
+            else {
+                this.open = false;
+                this.collapsed = this.initialCollapsedState;
+            }
+        };
     }
     handleKeyDown(event) {
-        if (event.key === 'Escape' && this.open) {
+        if (event.key === 'Escape' && this.isMobile && this.open) {
             this.open = false;
         }
     }
     connectedCallback() {
         this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT}px)`);
         this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+        this.isMobile = !this.matchesLgBreakpointMq.matches;
         this.isCollapsed = this.collapsed;
         this.initialCollapsedState = this.collapsed;
     }
@@ -47,12 +56,14 @@ export class TdsSideMenu {
         if (!hasUpperSlotElements) {
             this.isUpperSlotEmpty = true;
         }
-        if (window.innerWidth < GRID_LG_BREAKPOINT) {
+        if (this.isMobile) {
             this.collapsed = false;
         }
     }
     disconnectedCallback() {
-        this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+        if (this.matchesLgBreakpointMq) {
+            this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+        }
     }
     onCollapsedChange(newVal) {
         /** Emits the internal collapse event when the prop has changed. */
@@ -63,6 +74,11 @@ export class TdsSideMenu {
         this.isCollapsed = newVal;
     }
     onOpenChange(newVal) {
+        if (!this.isMobile) {
+            if (newVal)
+                this.open = false;
+            return;
+        }
         if (newVal) {
             // When menu opens, focus the first interactive element
             setTimeout(() => {
@@ -108,7 +124,7 @@ export class TdsSideMenu {
     }
     handleFocusTrap(event) {
         // Only trap focus if the menu is open
-        if (!this.open)
+        if (!this.open || !this.isMobile)
             return;
         // We care only about the Tab key
         if (event.key !== 'Tab')
@@ -141,16 +157,16 @@ export class TdsSideMenu {
         this.collapsed = event.detail.collapsed;
     }
     render() {
-        return (h(Host, { key: '06848ba9d752f9b10c0ffbb8dcb65e1b353ce5a3', class: {
+        return (h(Host, { key: '3e7770cc6891a71d1757b0a7622f2912066643d8', class: {
                 'menu-opened': this.open,
                 'menu-persistent': this.persistent,
                 'menu-collapsed': this.collapsed,
-            }, "aria-expanded": !this.collapsed ? 'true' : 'false' }, h("div", { key: '65afb8d82603417c12ab0140df3a6f705d92f48a', class: {
+            }, "aria-expanded": (this.isMobile ? this.open : !this.collapsed) ? 'true' : 'false' }, h("div", { key: '5c556407075da5eae0b3343b3e0ee74c340575ac', class: {
                 'wrapper': true,
                 'state-upper-slot-empty': this.isUpperSlotEmpty,
                 'state-open': this.open,
                 'state-closed': !this.open,
-            } }, h("slot", { key: '95a5c8e79ccdfcb4547e0884531fcc1be018f650', name: "overlay" }), h("aside", { key: 'af8c91f255a8fd7bcc447b77abab1343fc49a9b2', class: `menu` }, h("div", { key: 'a45b3a9274363862ed17400ccfa5ce5d066426f9', role: "navigation" }, h("slot", { key: 'd196a3f08b28ea220535672483f0682bbbe5744c', name: "close-button" }), h("div", { key: '87d23d9b1454680f1e231ac4b128b182e46931f7', class: "tds-side-menu-wrapper" }, h("ul", { key: '7ffe1f72ec8c19486af835b2b262bc8d492d53f3', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: '4dac95ae5a33fc5a5bf8c86e8ffbf677d4d027a8' }, h("slot", { key: '524e93dd76c26ef5e48c960a30653c51146d913b' }))), h("ul", { key: '079a5014d43f9c3637cf09eb92bb4ff82b1d6377', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: '06d8904d9e4b9ec54b92db6a600f1b79b4fac6f4' }, h("slot", { key: 'bebea535b735681e5896a799d68e44ec80074d42', name: "end" })))), h("slot", { key: '95468fce6d703cd90c491ad5d585549ffcb8da1d', name: "sticky-end" }))))));
+            } }, h("slot", { key: '6b87fbf18cbfa65ab8552eb64456b87304022404', name: "overlay" }), h("aside", { key: '7d63212f845d1bba59a1b3a6e0b99998fd6a2202', class: `menu` }, h("div", { key: 'd8ce4ff50101691aeb9b88d17cc7ee2490272ad4', role: "navigation" }, h("slot", { key: 'f8a7ee24fbced61ff4931168902c397b082521eb', name: "close-button" }), h("div", { key: '072baef69437e6a444b32f0b62cef196cefe1575', class: "tds-side-menu-wrapper" }, h("ul", { key: 'bf1e19f6ba886f2c89b480b4f58b45c018daac4d', class: `tds-side-menu-list tds-side-menu-list-upper` }, h("li", { key: 'e319ea5fa177d10d2251b8ab26a06bef18bbd623' }, h("slot", { key: '5fec36575727498f764896d4c585a77f4c83f8b4' }))), h("ul", { key: 'b3a8d1af131f3ac8531d1f63bf7aa728ae87927b', class: `tds-side-menu-list tds-side-menu-list-end` }, h("li", { key: '2d82fba190cdb96f6e7bb77a1f44d94b1a4f461b' }, h("slot", { key: 'c5d3f65e00c57911b5aae71d4a75b1ec894b3fcb', name: "end" })))), h("slot", { key: 'eb8c2a7a4130e9e71851735219414a9d87e95853', name: "sticky-end" }))))));
     }
     static get is() { return "tds-side-menu"; }
     static get encapsulation() { return "shadow"; }
@@ -180,8 +196,10 @@ export class TdsSideMenu {
                     "tags": [],
                     "text": "Applicable only for mobile. If the Side Menu is open or not."
                 },
-                "attribute": "open",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "persistent": {
@@ -198,8 +216,10 @@ export class TdsSideMenu {
                     "tags": [],
                     "text": "Applicable only for desktop. If the Side Menu should always be shown."
                 },
-                "attribute": "persistent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "persistent",
                 "defaultValue": "false"
             },
             "collapsed": {
@@ -216,14 +236,17 @@ export class TdsSideMenu {
                     "tags": [],
                     "text": "If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.\nNOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tdsCollapse event."
                 },
-                "attribute": "collapsed",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "collapsed",
                 "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
+            "isMobile": {},
             "isUpperSlotEmpty": {},
             "isCollapsed": {},
             "initialCollapsedState": {},

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;
@@ -24,24 +60,6 @@ export class TdsSlider {
             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);
@@ -441,30 +459,30 @@ export class TdsSlider {
     }
     render() {
         const ariaLabel = this.readOnly ? this.tdsReadOnlyAriaLabel : this.label || this.tdsAriaLabel;
-        return (h("div", { key: '1d089e5942bf7e4872b68bc46a269e975a4957a7', class: {
+        return (h("div", { key: 'a8b597a5b5ce36c572cf6e0773efb96350fe7b3c', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: 'cf47a9ec5545aa0dd064b4e900578204ec9865c9', 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: '1867645432d81580de1cb345ad68e55f9c004c28', class: "sr-only", "aria-live": "assertive", ref: (el) => {
+            } }, h("input", { key: '1ac5ada12fbe89365459ab53e9b06aca30da95ec', 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: 'a30d1d4e14ed8086e36f3605d59a5f6f6b79e38a', class: "sr-only", "aria-live": "assertive", ref: (el) => {
                 this.ariaLiveElement = el;
-            } }), h("div", { key: '39c628693700a11cda5f9536c6cfc8d4fcad70b6', class: {
+            } }), h("div", { key: '7f8f10c5a9982042b332291eb48fe1a91c4d5120', 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: '8e0a61a0a9c872eda41f0d38efd9056cdf34906e', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '04a9887058c3f4ff2a6cd86a0e351b581becba74', class: "tds-slider__input-values" }, h("div", { key: 'eefa61151c058767d3293bad2ecd0e9878aa3b16', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '241854ca030c62361240e98b112f7ec490cf6570', class: "tds-slider__controls" }, h("div", { key: '9ee83bb2be85b0813abf53d593059c3f8867175b', 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: '80351eb5648c3032cc6356c8494c7fdc38a105a0', name: "minus", size: "16px" })))), h("div", { key: '5abdde18e7e8131b9b3f85d18cbbcc5583d18a52', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '364212a676b02719c87cce1135b11aa295753f46', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'ae1e63e6d45760ca582814ed1e72c3d8db43ef44', 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: 'f3be603d4b0c9e30988265361d6b2c9f8b550483', class: "tds-slider__track", ref: (el) => {
+            }, "aria-disabled": this.disabled ? 'true' : 'false' }, h("label", { key: '89e9d60169bd2a23d0bc978ee9fb5bf096f8467e', id: `${this.sliderId}-label`, class: { offset: this.showTickNumbers } }, this.label), this.useInput && (h("div", { key: '1e29ecf4b885e1e99222a558a48900e72a388060', class: "tds-slider__input-values" }, h("div", { key: '9f3dd1a0e4a0e04eb551664df4526d7dbbf17126', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'a73effd4c30c98b87009f39d3541172187309323', class: "tds-slider__controls" }, h("div", { key: 'bf46603c92eab4ed3bdb8ed79a2bdcb210185f56', 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: '6df94fb293200e8cc91e56d2298872c106204027', name: "minus", size: "16px" })))), h("div", { key: '63a8cc2b56f1e099001c03fafab7bbfb198e7bde', class: "tds-slider-inner", tabIndex: -1 }, this.tickValues.length > 0 && (h("div", { key: '31fd5005c4c3b2b19aaedfccc0c3c87fb5281d02', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '54ccc695e448db25bdb20b10669d58ebc7a6bc6c', 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: '6dcc0f426c23e2b9f8193632275a4a2eb750cc85', 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: 'cd786e1d47f5ab9a3f4b824f00849fda01064915', class: "tds-slider__track-fill", ref: (el) => {
+            } }, h("div", { key: '5fa9d32cc1fed8cf79818fafe38b249764362172', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '36be5f7f9bb51d138e4a2b5e66dd9116c14260f8', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '716c4f6c4f43224beda11704751e3c1425a9a53c', 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: '0ccf5661d2ed49474040b964f3c31c9144effdc1', class: "tds-slider__value" }, this.value, h("svg", { key: 'c93653b56ab7759af24ed4ca9c32af758d51266d', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'f02dd0b4b9274dc9ea36aeb30059aed4bd81007f', 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: '688f3d350bb7175d08b017e804edac1ddde08ee6', 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: 'e25c63d00730d805af96a22c180791a9ba90890e', class: "tds-slider__value" }, this.value, h("svg", { key: '0317b096047d60ab74e60e200ab11d3b448cc955', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '56db3635fda47222988e6b4bdee660f10306e4ae', 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: '9d23233322159f4bbee6d3089b1caf848b6e070d', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '3f85a89df94fe531b1e9a3aa052cae465493aab0', class: "tds-slider__input-values" }, h("div", { key: 'd6f72ceb11a9305485712fed72831257ba3e47ce', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'd694e8f0bab9e97be10720bcef2f7d218a997103', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: '50e55ae9e12d7bac3b1bee5132130b57db6082de', 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: '328e507a5ff8c40d01b1eb5769914a07dceb436c', class: "tds-slider__controls" }, h("div", { key: 'f43b7c31a4e5c38c650a24e6b622b84e32e358c2', 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: '707af22bfa42a1e9212199d372edf46db26eead1', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '52b37470f53b205c5ef4a5ecda1bc50ef534835a', class: "tds-slider__input-values" }, h("div", { key: 'b2016512dce7ff7914aec8d7f5ea8404ca4cccb7', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'ab4b1f51bf1ecb7b41bb56f14a331a33e98b551f', class: "tds-slider__input-field-wrapper" }, h("tds-text-field", { key: 'acaadb9b63f8aa5b26313a15e31d6bc4645039d5', 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: '1ce34d27847f849a817f344c8be4b85d38b4e448', class: "tds-slider__controls" }, h("div", { key: 'e13e63e23d8f55ee00bfb1fa3aa952dc90384a2a', 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: 'cc11a2defee786216ab376339317f285d9730523', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -493,8 +511,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Text for label"
                 },
-                "attribute": "label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "label",
                 "defaultValue": "''"
             },
             "value": {
@@ -511,8 +531,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Initial value"
                 },
-                "attribute": "value",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "value",
                 "defaultValue": "'0'"
             },
             "min": {
@@ -529,8 +551,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Minimum value"
                 },
-                "attribute": "min",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "min",
                 "defaultValue": "'0'"
             },
             "max": {
@@ -547,8 +571,10 @@ export class TdsSlider {
                     "tags": [],
                     "text": "Maximum value"
                 },
-                "attribute": "max",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "max",
                 "defaultValue": "'100'"
             },
             "ticks": {
@@ -565,8 +591,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": {
@@ -583,8 +611,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": {
@@ -601,8 +631,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": {
@@ -619,8 +651,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": {
@@ -637,8 +671,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": {
@@ -655,8 +691,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": {
@@ -673,8 +711,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": {
@@ -691,8 +731,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": {
@@ -709,8 +751,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": {
@@ -727,8 +771,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": {
@@ -745,8 +791,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": {
@@ -763,8 +811,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": {
@@ -781,8 +831,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": {
@@ -799,8 +851,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,11 +1,13 @@
 import { h } from "@stencil/core";
 export class TdsSpinner {
     constructor() {
+        /** Size of the Spinner */
         this.size = 'lg';
+        /** Variant of the Spinner */
         this.variant = 'standard';
     }
     render() {
-        return (h("div", { key: '2d27b4a94cd9dc205e11f18ecc6b249572912eac', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: 'a372dada808ed13b8c2c6ef4de9c559f59d9e9f2', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '153f00da5e87ba55dc569b511cd184f93c1740c7', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
+        return (h("div", { key: 'a91630640bf14d5b0060989422e36f66d565f51e', "aria-live": "assertive", role: "status", "aria-label": "loading" }, h("svg", { key: '85fdcfc17c156f0ebae71342837184e672e6bd84', class: `tds-spinner-svg tds-spinner-svg-${this.size}`, "aria-hidden": "true" }, h("circle", { key: '51657ab3832eb8c54c8e6c40347b3480562112d1', class: `tds-spinner-circle tds-spinner-circle-${this.variant}` }))));
     }
     static get is() { return "tds-spinner"; }
     static get originalStyleUrls() {
@@ -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'"
             }
         };