@scania/tegel 1.47.2 → 1.48.0

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);
+            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,
@@ -179,9 +183,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: 'b129d796866053ae345a16a84c71bfae11b5b22d', role: "tablist", class: `${this.modeVariant ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("div", { key: 'd01ad71aefcb3ab75b434fc329d0aff2e2e4fa5e', 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" })))));
+            }, style: { paddingLeft: `${this.leftPadding}px` } }, h("button", { key: 'eaffe52b68a4e72dde674d3ddeaaa5b744dc694b', "aria-label": this.tdsScrollLeftAriaLabel, class: `scroll-left-button ${this.showLeftScroll ? 'show' : ''}`, onClick: () => this.scrollLeft(), disabled: !this.showLeftScroll }, h("tds-icon", { key: 'a134e040e2c474aaab21e7b5a27d4d71b9bec455', name: "chevron_left", size: "20px" })), h("slot", { key: '1b3a792581868dd02114c2ab3bf44bec75203782', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '113c97bca3def818011ae091cd6d9b740f43ec67', "aria-label": this.tdsScrollRightAriaLabel, class: `scroll-right-button ${this.showRightScroll ? 'show' : ''}`, onClick: () => this.scrollRight(), disabled: !this.showRightScroll }, h("tds-icon", { key: '9e899fc5c5d3a658f27e7e374878e4814c3f708b', name: "chevron_right", size: "20px" })))));
     }
     static get is() { return "tds-inline-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -211,8 +215,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 +235,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 +255,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 +274,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 +294,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 +314,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;
     }
@@ -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: '6bab3db3c82f13794cbd793f78d08823cc904c4e', role: "tablist", class: { [`tds-mode-variant-${this.modeVariant}`]: this.modeVariant !== null } }, h("div", { key: '6893ee0cb1c40fad60b19494d800de2d5b87f8c0', 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: '9e5142bec5991cd80b3799fe96491adb9c2ead64', "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: 'cd510de885b8471dfa27c2c68d95e2163e594eaf', name: "chevron_left", size: "20px" })), h("slot", { key: 'a9406234d70203824c538c9fdc2c0caef31e2660', onSlotchange: () => this.handleSlotChange() }), h("button", { key: '9fe74d05a6b2e3d3a4cc229e25af3977df9a7d48', "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: '82905af610ba5791b9ba021bcd124d912ad2b599', 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,8 +5,9 @@ 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() {
@@ -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,8 +65,10 @@ export class TdsTag {
                     "tags": [],
                     "text": "Sets the size of the tag"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'lg'"
             },
             "variant": {
@@ -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'"
             }
         };