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

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -4,11 +4,23 @@ import { Host, h, } from "@stencil/core";
  */
 export class TdsInlineTabs {
     constructor() {
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
+        this.scrollableWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.tabElements = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -23,7 +35,7 @@ export class TdsInlineTabs {
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
+                    this.scrollableWidth = buttonsWidth - componentWidth;
                     this.updateScrollButtons();
                 });
             });
@@ -31,15 +43,15 @@ export class TdsInlineTabs {
                 resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
+            this.tabElements = Array.from(this.host.children);
+            this.tabElements.map((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
+                            selectedTabIndex: this.tabElements.indexOf(item),
                         });
                         if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
+                            this.tabElements.forEach((element) => element.setSelected(false));
                             item.setSelected(true);
                             this.selectedIndex = index;
                         }
@@ -51,7 +63,7 @@ export class TdsInlineTabs {
             });
         };
         this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
+            this.tabElements.forEach((item) => {
                 const clickHandler = this.clickHandlers.get(item);
                 if (clickHandler) {
                     item.removeEventListener('click', clickHandler);
@@ -59,24 +71,16 @@ export class TdsInlineTabs {
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.leftPadding = 32;
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Selects a Tab based on tabindex, will not select a disabled Tab. */
     async selectTab(tabIndex) {
-        if (tabIndex < 0 || tabIndex >= this.children.length) {
+        if (tabIndex < 0 || tabIndex >= this.tabElements.length) {
             throw new Error('Tab index out of bounds');
         }
-        this.children = Array.from(this.host.children);
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
+        this.tabElements = Array.from(this.host.children);
+        if (!this.tabElements[tabIndex].disabled) {
+            this.tabElements.forEach((element) => element.setSelected(false));
+            this.tabElements = this.tabElements.map((element, index) => {
                 if (index === tabIndex) {
                     element.setSelected(true);
                     this.selectedIndex = tabIndex;
@@ -91,12 +95,12 @@ export class TdsInlineTabs {
         this.handleSlotChange();
     }
     handleSelectedIndexUpdate() {
-        this.children = Array.from(this.host.children).map((tabElement) => {
+        this.tabElements = Array.from(this.host.children).map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
-        if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
+        if (this.selectedIndex !== undefined) {
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
     }
     scrollRight() {
@@ -117,27 +121,27 @@ export class TdsInlineTabs {
         if (!this.navWrapperElement)
             return;
         const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showRightScroll = scroll <= this.scrollableWidth;
         this.showLeftScroll = scroll > 0;
     }
     initializeTabs() {
-        this.children = Array.from(this.host.children);
+        this.tabElements = Array.from(this.host.children);
         // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
+        this.tabElements.forEach((child) => {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        this.children[0].classList.add('first');
-        this.children[this.children.length - 1].classList.add('last');
+        this.tabElements[0].classList.add('first');
+        this.tabElements[this.tabElements.length - 1].classList.add('last');
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.tabElements[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
         this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
@@ -152,18 +156,12 @@ export class TdsInlineTabs {
             this.showRightScroll = false;
         }
     }
-    applyCustomLeftPadding() {
-        if (this.navWrapperElement) {
-            this.navWrapperElement.style.paddingLeft = `${this.leftPadding}px`;
-        }
-    }
     handleSlotChange() {
         this.initializeTabs();
         this.addEventListenerToTabs();
         this.initializeSelectedTab();
         this.updateScrollButtons();
         this.addResizeObserver();
-        this.applyCustomLeftPadding(); // Apply custom left padding to the wrapper
     }
     connectedCallback() {
         this.initializeTabs();
@@ -179,9 +177,9 @@ export class TdsInlineTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'e5c91714cc292fc3b5ba4aea446507b07e3d7928', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: '494199f5f33abb5b5da122caf0124329630ce0e3', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: '1870a40347336fbfd97c47f0866cd78c813ffbdc', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}`, style: { '--padding-left': `${this.leftPadding}px` } }, h("div", { key: '54527cb0bf23b8e631c0b6be516a2bb60714efb6', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '60f7ec503a86d2a2aabb6153a67a804ac297931c', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'ed092e0d1077b9865ce7b62a889c7687c8fe7758', name: "chevron_left", size: "20px" })), h("slot", { key: '99f32f72a5f3b8ccb47a59cd910953fdbc898fb1', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'c24a97379767c6e4a1107e957fd7304218231b37', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: 'cd0f808c268006cb6074e0cf1250e4667b6f1c89', name: "chevron_right", size: "20px" })))));
+            } }, h("button", { key: '984160ddc5a713a4884fc3806ea10e0497c33470', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '5220fce6d90abe341463684f77745581d71d0da8', name: "chevron_left", size: "20px" })), h("slot", { key: 'b7d84ba3ab548115e0cabd36133a661ac71572af', onSlotchange: () => this.handleSlotChange() }), h("button", { key: 'c3fb6575db477722653a4a947c230db695c25dfb', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '23c7c0a8149aff4921cad04cb012d33915f5181e', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -211,8 +209,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "'primary'"
             },
             "defaultSelectedIndex": {
@@ -229,8 +229,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "attribute": "default-selected-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-selected-index",
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -247,8 +249,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "attribute": "selected-index",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected-index"
             },
             "tdsScrollLeftAriaLabel": {
                 "type": "string",
@@ -264,8 +268,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "attribute": "tds-scroll-left-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-left-aria-label",
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -282,8 +288,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "attribute": "tds-scroll-right-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-right-aria-label",
                 "defaultValue": "'Scroll right'"
             },
             "leftPadding": {
@@ -300,8 +308,10 @@ export class TdsInlineTabs {
                     "tags": [],
                     "text": "Custom left padding value for the wrapper element."
                 },
-                "attribute": "left-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "left-padding",
                 "defaultValue": "32"
             }
         };

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -4,6 +4,7 @@ import { Host, h } from "@stencil/core";
  */
 export class TdsNavigationTab {
     constructor() {
+        /** Disables the Tab. */
         this.disabled = false;
         this.selected = false;
     }
@@ -30,8 +31,8 @@ export class TdsNavigationTab {
         }
     }
     render() {
-        return (h(Host, { key: 'c0efa8fbffa68b4c81b7f337d260ed3e8023f7bc' }, h("div", { key: '759dbcb91ef4b320918bcc0dae18aa9f292f2bf5', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
-           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: '9eaa20e00dc625bc96723cb937e45aaa58516aa8' }))));
+        return (h(Host, { key: 'd9b169c0eb0cda695a451a4f6af0b28fbabe94fd' }, h("div", { key: '3e12809a9b6d50543d50ef5de550a5abac346507', class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+           ${this.disabled ? 'disabled' : ''}` }, h("slot", { key: 'bd0dd0c7af1abf7c32373a6cc148fa0819f0b299' }))));
     }
     static get is() { return "tds-navigation-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -61,8 +62,10 @@ export class TdsNavigationTab {
                     "tags": [],
                     "text": "Disables the Tab."
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -4,11 +4,23 @@ import { Host, h, } from "@stencil/core";
  */
 export class TdsNavigationTabs {
     constructor() {
+        /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+        this.modeVariant = 'primary';
+        /** Sets the default selected Tab. */
+        this.defaultSelectedIndex = 0;
+        /** Custom left padding value for the wrapper element. */
+        this.leftPadding = 32;
+        /** Defines aria-label on left scroll button */
+        this.tdsScrollLeftAriaLabel = 'Scroll left';
+        /** Defines aria-label on right scroll button */
+        this.tdsScrollRightAriaLabel = 'Scroll right';
+        this.showLeftScroll = false;
+        this.showRightScroll = false;
         this.navWrapperElement = null; // reference to container with nav buttons
         this.componentWidth = 0; // visible width of this component
         this.buttonsWidth = 0; // total width of all nav items combined
-        this.scrollWidth = 0; // total amount that is possible to scroll in the nav wrapper
-        this.children = [];
+        this.scrollableWidth = 0; // total amount that is possible to scroll in the nav wrapper
+        this.tabElements = [];
         this.clickHandlers = new WeakMap();
         this.addResizeObserver = () => {
             const resizeObserver = new ResizeObserver((entries) => {
@@ -23,7 +35,7 @@ export class TdsNavigationTabs {
                     });
                     this.componentWidth = componentWidth;
                     this.buttonsWidth = buttonsWidth;
-                    this.scrollWidth = buttonsWidth - componentWidth;
+                    this.scrollableWidth = buttonsWidth - componentWidth;
                     this.updateScrollButtons();
                 });
             });
@@ -31,15 +43,15 @@ export class TdsNavigationTabs {
                 resizeObserver.observe(this.navWrapperElement);
         };
         this.addEventListenerToTabs = () => {
-            this.children = Array.from(this.host.children);
-            this.children.map((item, index) => {
+            this.tabElements = Array.from(this.host.children);
+            this.tabElements.map((item, index) => {
                 const clickHandler = () => {
                     if (!item.disabled) {
                         const tdsChangeEvent = this.tdsChange.emit({
-                            selectedTabIndex: this.children.indexOf(item),
+                            selectedTabIndex: this.tabElements.indexOf(item),
                         });
                         if (!tdsChangeEvent.defaultPrevented) {
-                            this.children.forEach((element) => element.setSelected(false));
+                            this.tabElements.forEach((element) => element.setSelected(false));
                             item.setSelected(true);
                             this.selectedIndex = index;
                         }
@@ -51,7 +63,7 @@ export class TdsNavigationTabs {
             });
         };
         this.removeEventListenerFromTabs = () => {
-            this.children.forEach((item) => {
+            this.tabElements.forEach((item) => {
                 const clickHandler = this.clickHandlers.get(item);
                 if (clickHandler) {
                     item.removeEventListener('click', clickHandler);
@@ -59,20 +71,12 @@ export class TdsNavigationTabs {
                 }
             });
         };
-        this.modeVariant = 'primary';
-        this.defaultSelectedIndex = 0;
-        this.selectedIndex = undefined;
-        this.leftPadding = 32;
-        this.tdsScrollLeftAriaLabel = 'Scroll left';
-        this.tdsScrollRightAriaLabel = 'Scroll right';
-        this.showLeftScroll = false;
-        this.showRightScroll = false;
     }
     /** Sets the passed tabindex as the selected Tab. */
     async selectTab(tabIndex) {
-        if (!this.children[tabIndex].disabled) {
-            this.children.forEach((element) => element.setSelected(false));
-            this.children = this.children.map((element, index) => {
+        if (!this.tabElements[tabIndex].disabled) {
+            this.tabElements.forEach((element) => element.setSelected(false));
+            this.tabElements = this.tabElements.map((element, index) => {
                 if (index === tabIndex) {
                     element.setSelected(true);
                     this.selectedIndex = tabIndex;
@@ -89,12 +93,12 @@ export class TdsNavigationTabs {
         this.handleSlotChange();
     }
     handleSelectedIndexUpdate() {
-        this.children = Array.from(this.host.children).map((tabElement) => {
+        this.tabElements = Array.from(this.host.children).map((tabElement) => {
             tabElement.setSelected(false);
             return tabElement;
         });
         if (this.selectedIndex) {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
     }
     scrollRight() {
@@ -115,29 +119,29 @@ export class TdsNavigationTabs {
         if (!this.navWrapperElement)
             return;
         const scroll = this.navWrapperElement.scrollLeft;
-        this.showRightScroll = scroll <= this.scrollWidth;
+        this.showRightScroll = scroll <= this.scrollableWidth;
         this.showLeftScroll = scroll > 0;
     }
     initializeTabs() {
-        this.children = Array.from(this.host.children);
+        this.tabElements = Array.from(this.host.children);
         // remove first and last class from other tabs in case of initialization
-        this.children.forEach((child) => {
+        this.tabElements.forEach((child) => {
             child.classList.remove('last');
             child.classList.remove('first');
         });
-        if (this.children.length > 0) {
-            this.children[0].classList.add('first');
-            this.children[this.children.length - 1].classList.add('last');
+        if (this.tabElements.length > 0) {
+            this.tabElements[0].classList.add('first');
+            this.tabElements[this.tabElements.length - 1].classList.add('last');
         }
     }
     initializeSelectedTab() {
         if (this.selectedIndex === undefined) {
             this.addEventListenerToTabs();
-            this.children[this.defaultSelectedIndex].setSelected(true);
+            this.tabElements[this.defaultSelectedIndex].setSelected(true);
             this.selectedIndex = this.defaultSelectedIndex;
         }
         else {
-            this.children[this.selectedIndex].setSelected(true);
+            this.tabElements[this.selectedIndex].setSelected(true);
         }
         this.tdsChange.emit({
             selectedTabIndex: this.selectedIndex,
@@ -179,15 +183,15 @@ export class TdsNavigationTabs {
         this.removeEventListenerFromTabs();
     }
     render() {
-        return (h(Host, { key: 'c7888b2f78e9aeb8fb6ca1041787785fe7d7c840', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '177a79f69514e597d2795b4d60f335b485195eb0', class: "wrapper", ref: (el) => {
+        return (h(Host, { key: 'e3316e0e255d099ade1d3c096aec574460a091ce', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: 'de4f1f02e1301dc8dd55e9e7bd00f5e263f2f178', class: "wrapper", ref: (el) => {
                 this.navWrapperElement = el;
-            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '7455ad87dc61ba3c4fa28aa4e9462e9fe91dbcca', "aria-label": this.tdsScrollLeftAriaLabel, class: {
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: '4b869b3219e71d592fc3e9a105c156a4d2a50fe5', "aria-label": this.tdsScrollLeftAriaLabel, class: {
                 'scroll-left-button': true,
                 'show': this.showLeftScroll,
-            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'f4b9a3b4d0eeed6c6b9035a9a33f9868fbb93bab', name: "chevron_left", size: "20px" })), h("slot", { key: '9757ef20e30a223f4dec3bf5a41da912821a46de', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '215c0a386b22f44bb891c4685c4f5b3b991982c8', "aria-label": this.tdsScrollRightAriaLabel, class: {
+            }, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: '049b1955d802b0a205458ddaf4f60a8c28b06505', name: "chevron_left", size: "20px" })), h("slot", { key: 'b7d2dae87716e20be521efa3b8039e7aa42ee38e', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '0a1e9b4a10573767805dfc3eb6b6dedfcda147b5', "aria-label": this.tdsScrollRightAriaLabel, class: {
                 'scroll-right-button': true,
                 'show': this.showRightScroll,
-            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '21782c8e407746676988fb00324e10ba94379b78', name: "chevron_right", size: "20px" })))));
+            }, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '8c5e57193b2170bb7d14f39772e74a52e6bab616', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-navigation-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -217,8 +221,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Variant of the Tabs, primary= on white, secondary= on grey50"
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "'primary'"
             },
             "defaultSelectedIndex": {
@@ -235,8 +241,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Sets the default selected Tab."
                 },
-                "attribute": "default-selected-index",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "default-selected-index",
                 "defaultValue": "0"
             },
             "selectedIndex": {
@@ -253,8 +261,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
                 },
-                "attribute": "selected-index",
-                "reflect": true
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "selected-index"
             },
             "leftPadding": {
                 "type": "number",
@@ -270,8 +280,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Custom left padding value for the wrapper element."
                 },
-                "attribute": "left-padding",
+                "getter": false,
+                "setter": false,
                 "reflect": true,
+                "attribute": "left-padding",
                 "defaultValue": "32"
             },
             "tdsScrollLeftAriaLabel": {
@@ -288,8 +300,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Defines aria-label on left scroll button"
                 },
-                "attribute": "tds-scroll-left-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-left-aria-label",
                 "defaultValue": "'Scroll left'"
             },
             "tdsScrollRightAriaLabel": {
@@ -306,8 +320,10 @@ export class TdsNavigationTabs {
                     "tags": [],
                     "text": "Defines aria-label on right scroll button"
                 },
-                "attribute": "tds-scroll-right-aria-label",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-scroll-right-aria-label",
                 "defaultValue": "'Scroll right'"
             }
         };

package/dist/collection/components/tag/tag.js

@@ -5,17 +5,18 @@ import hasSlot from "../../utils/hasSlot";
  */
 export class TdsTag {
     constructor() {
-        this.text = undefined;
+        /** Sets the size of the tag */
         this.size = 'lg';
+        /** Sets the variant mode of the tag */
         this.variant = 'Neutral';
     }
     render() {
         const hasPrefixSlot = hasSlot('prefix', this.host);
         const getTagClasses = () => ({
             [`${this.size.toLowerCase()}`]: true,
-            [`${this.variant.toLowerCase()}`]: true,
+            [this.variant.toLowerCase()]: true,
         });
-        return (h(Host, { key: 'f2f854a15358d98bc4c55b093e243cc07cc8e439', class: getTagClasses() }, h("div", { key: 'a9b74511347d721ae769d42e4b0edb5ac9acdf85', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: '95b1acec855e8e0caeadc3458222bf6a91795704', name: "prefix" }), h("span", { key: 'e40a01fda9aa32ae42032656ebf11375b45f9183' }, this.text))));
+        return (h(Host, { key: '2521098fe251ec50aee644245e26ab39b5ef7109', class: getTagClasses() }, h("div", { key: '5b4964c3589f3a43d7751198a79a514d55e04ac5', class: "tds-tag__content" }, hasPrefixSlot && h("slot", { key: '241aa451188336040446248322c3a1560b69cd20', name: "prefix" }), h("span", { key: '9bea95c3f292ef6c4767ba9461f13b47fc5b2a50' }, this.text))));
     }
     static get is() { return "tds-tag"; }
     static get encapsulation() { return "scoped"; }
@@ -45,8 +46,10 @@ export class TdsTag {
                     "tags": [],
                     "text": "The title text to display in the tag"
                 },
-                "attribute": "text",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
             },
             "size": {
                 "type": "string",
@@ -62,16 +65,18 @@ export class TdsTag {
                     "tags": [],
                     "text": "Sets the size of the tag"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'Success' | 'Warning' | 'New' | 'Neutral' | 'Information' | 'Error'",
-                    "resolved": "\"Error\" | \"Information\" | \"Neutral\" | \"New\" | \"Success\" | \"Warning\"",
+                    "original": "| 'success'\n    | 'warning'\n    | 'new'\n    | 'neutral'\n    | 'information'\n    | 'error'\n    | 'Success'\n    | 'Warning'\n    | 'New'\n    | 'Neutral'\n    | 'Information'\n    | 'Error'",
+                    "resolved": "\"Error\" | \"Information\" | \"Neutral\" | \"New\" | \"Success\" | \"Warning\" | \"error\" | \"information\" | \"neutral\" | \"new\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -80,8 +85,10 @@ export class TdsTag {
                     "tags": [],
                     "text": "Sets the variant mode of the tag"
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'Neutral'"
             }
         };