@tet/tet-components 1.4.15-testing → 1.4.16-staging

package/dist/collection/components/basic/buttons/tet-radio/tet-radio.js

@@ -5,17 +5,24 @@ import { randomString } from "../../../../services/utils/index";
  */
 export class TetRadio {
     constructor() {
-        this.theme = 'classic';
+        this.theme = 'light';
         this.label = undefined;
         this.accessibilityLabel = '';
         this.name = undefined;
         this.value = 0;
         this.disabled = false;
         this.checked = false;
+        this.error = false;
         this.inputAutofocus = false;
+        this.focusStyleOnContainer = false;
+        this.iconName = undefined;
+        this.labelFont = 'sm';
+        this.alignCenter = false;
+        this.hasSlotIcon = false;
     }
     /** Randomly generated id for the HTML input element, necessary because it is scoped. */
     id;
+    radioElement;
     /** The event that is emitted whenever the control element is checked. */
     check;
     /**
@@ -26,6 +33,14 @@ export class TetRadio {
     async setChecked(value) {
         this.checked = value;
     }
+    /**
+     * Changes the error prop of the component.
+     *
+     * @param value
+     */
+    async setError(value) {
+        this.error = value;
+    }
     /**
      * Listens for keydown event to stop some keys
      * @param event Keyboard event
@@ -36,9 +51,19 @@ export class TetRadio {
         }
     }
     handleInputChange = ({ target }) => {
-        const { value, checked } = this;
-        this.checked = target.checked;
-        this.check.emit({ value, checked: !checked });
+        const { value, error } = this;
+        const isChecked = target.checked;
+        if (isChecked) {
+            // Uncheck all other radios with the same name
+            const group = document.querySelectorAll('tet-radio[name="' + this.name + '"]');
+            group.forEach((el) => {
+                if (el !== this.radioElement && el.checked) {
+                    el.setChecked(false);
+                }
+            });
+        }
+        this.checked = isChecked;
+        this.check.emit({ value, checked: isChecked, error });
     };
     /**
      * Lifecycle method.
@@ -47,9 +72,45 @@ export class TetRadio {
     connectedCallback() {
         this.id = randomString(10);
     }
+    componentDidLoad() {
+        this.checkIconSlot();
+    }
+    componentDidUpdate() {
+        this.checkIconSlot();
+    }
+    /** Checks if the radio button has a slot icon. */
+    checkIconSlot = () => {
+        const icon = this.radioElement.querySelector('[slot="label-icon"]');
+        this.hasSlotIcon = !!icon;
+    };
     render() {
-        const { id, disabled, value, checked, name, label, handleInputChange, accessibilityLabel, inputAutofocus } = this;
-        return (h(Host, { key: '4d46b895ff12f76856a250ea053d7b4a3c4282a9' }, h("div", { key: 'a96d49ad006ff378b3347a3b40272d296e45dcb7', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '873faff70f00256da0843c3571d708f9aa492460', class: "radio__container", htmlFor: id }, h("input", { key: 'e709e0b7bcc7cbb14dec03c1c9e0818c32a98c57', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}), tabindex: this.checked ? '0' : '-1', role: "radio", "aria-checked": this.checked ? 'true' : 'false' }), h("span", { key: '878306599f70b32d9298dd8a8efcc9759ae5cd27', class: "radio__input" }), label ? (h("span", { class: "radio__label", innerHTML: label })) : (h("span", { class: "radio__label" }, h("slot", null)))))));
+        const { id, disabled, value, checked, name, label, accessibilityLabel, error, inputAutofocus, iconName, labelFont, alignCenter, hasSlotIcon } = this;
+        return (h(Host, { key: '3f335718a2060f9f9b27fecd5d174728d1fdb97c' }, h("div", { key: 'f77789f440e4103ddf8105e3a9d3aa793862ea79', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'e99b3e956d3787bcc7a2e7d07a81c7e458bc8014', class: {
+                'radio__container': true,
+                'radio__container--focus-style': this.focusStyleOnContainer,
+                'radio__container--align-center': alignCenter,
+            }, htmlFor: id }, h("input", { key: '24f7a7f35349b5fc2065a528e344cd460c2af1f4', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: '538f98c8c65fdd184fd6a2c01784221d3c7a2959', class: {
+                'radio__input': true,
+                'radio__input--error': error,
+                'radio__input--hide-focus-style': this.focusStyleOnContainer,
+                'radio__input--has-label-prop': !!label,
+                ...(labelFont ? { [`radio__input--${labelFont}`]: true } : {}),
+            } }), h("div", { key: 'c06cbc337afcb948146c2fd8351f35ad16dece92', class: {
+                'radio__label-container': true,
+                'radio__label-container--line-height': hasSlotIcon || !!iconName,
+            } }, iconName ? (h("tet-icon", { theme: ['classic', 'light'].includes(this.theme) ? 'light' : 'dark', name: iconName, type: disabled ? 'tertiary' : 'primary', class: {
+                'radio__label-icon': true,
+                [`radio__label-icon--${iconName}`]: true,
+                ...(labelFont ? { [`radio__label-icon--${labelFont}`]: true } : {}),
+            } })) : (h("div", { class: {
+                'radio__label-slot-icon': true,
+                'radio__label-slot-icon--hidden': !hasSlotIcon,
+                ...(labelFont ? { [`radio__label-slot-icon--${labelFont}`]: true } : {}),
+            } }, h("slot", { name: "label-icon" }))), h("span", { key: 'ed4ce50985b15417bd21c0a39aa2c79dceacdc52', class: {
+                'radio__label': true,
+                'radio__label--has-slot-icon': hasSlotIcon,
+                ...(labelFont ? { [`radio__label--${labelFont}`]: true } : {}),
+            }, innerHTML: label }, h("slot", { key: '60f796c47088f575b1cc24c42e1672be8f6b6569' })))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }
@@ -81,7 +142,7 @@ export class TetRadio {
                 },
                 "attribute": "theme",
                 "reflect": false,
-                "defaultValue": "'classic'"
+                "defaultValue": "'light'"
             },
             "label": {
                 "type": "string",
@@ -165,7 +226,7 @@ export class TetRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The property to determine whether the checkbox should be disabled."
+                    "text": "The property to determine whether the radio button should be disabled."
                 },
                 "attribute": "disabled",
                 "reflect": false,
@@ -183,12 +244,30 @@ export class TetRadio {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The property to determine whether the checkbox should be checked."
+                    "text": "The property to determine whether the radio button should be checked."
                 },
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
+            "error": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The property to determine whether the radio button should show the error state."
+                },
+                "attribute": "error",
+                "reflect": true,
+                "defaultValue": "false"
+            },
             "inputAutofocus": {
                 "type": "boolean",
                 "mutable": false,
@@ -206,9 +285,91 @@ export class TetRadio {
                 "attribute": "input-autofocus",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "focusStyleOnContainer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the focus style is applied to the radio button or the container."
+                },
+                "attribute": "focus-style-on-container",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "iconName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The name of the label icon to be displayed."
+                },
+                "attribute": "icon-name",
+                "reflect": false
+            },
+            "labelFont": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelFont",
+                    "resolved": "\"lg-gilroy\" | \"lg-inter\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LabelFont": {
+                            "location": "import",
+                            "path": "../types/common",
+                            "id": "src/components/basic/buttons/types/common.ts::LabelFont"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the font of the label."
+                },
+                "attribute": "label-font",
+                "reflect": false,
+                "defaultValue": "'sm'"
+            },
+            "alignCenter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the radio button should be center-aligned."
+                },
+                "attribute": "align-center",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
+    static get states() {
+        return {
+            "hasSlotIcon": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "check",
@@ -258,9 +419,34 @@ export class TetRadio {
                             "text": "value"
                         }]
                 }
+            },
+            "setError": {
+                "complexType": {
+                    "signature": "(value: boolean) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "boolean",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Changes the error prop of the component.",
+                    "tags": [{
+                            "name": "param",
+                            "text": "value"
+                        }]
+                }
             }
         };
     }
+    static get elementRef() { return "radioElement"; }
     static get listeners() {
         return [{
                 "name": "keydown",

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.css

@@ -352,33 +352,16 @@
 
 :host {
   /**
-  * @prop --switch-text-color: The text color of the switch.
   * @prop --switch-justify-content: The justify-content style for the switch container.
   * @prop --switch-flex-direction: The flex-direction style for the switch container.
   * @prop --switch-gap: The gap property for the switch.
-  * @prop --switch-background-color: The background color of the switch.
-  * @prop --switch-checked-background-color: The background color of the switch when checked.
-  * @prop --switch-knob-color: The knob color of the switch.
-  * @prop --switch-checked-knob-color: The knob color of the switch when checked.
-
-  * @prop --switch-focus-background-color: The background color of the switch on focus.
-  * @prop --switch-focus-shadow: The shadow of the switch on focus.
-  * @prop --switch-focus-checked-shadow: The shadow color of the switch on focus when checked.
-  * @prop --switch-hover-background-color: The background color of the switch on hover.
-  * @prop --switch-hover-checked-background-color: The text color of the switch on hover.
-  * @prop --switch-pressed-background-color: The background color of the switch when clicked.
-  * @prop --switch-pressed-checked-background-color: The text color of the switch when clicked.
-
-  * @prop --switch-disabled-background-color: The background color of the switch when disabled.
-  * @prop --switch-disabled-checked-background-color: The background color of the switch when disabled and checked.
-  * @prop --switch-disabled-knob-color: The knob color of the switch when disabled.
-  * @prop --switch-disabled-checked-knob-color: The knob color of the switch when disabled and checked.
-  * @prop --switch-disabled-text-color: The text color of the switch when disabled.
+  * @prop --switch-container-outline-offset: The outline offset for the switch container when focused.
   */
-  --switch-text-color: var(--tc-text-primary);
   --switch-justify-content: normal;
   --switch-flex-direction: row;
-  --switch-gap: 0.625rem;
+  --switch-gap: 0.75rem;
+  --switch-container-outline-offset: 0.125rem;
+  --switch-text-color: var(--tc-text-primary);
   --switch-background-color: var(--tc-toggle-button-default);
   --switch-checked-background-color: var(--tc-toggle-button-active-default);
   --switch-knob-color: var(--tc-toggle-button-ellipse-default);
@@ -394,7 +377,8 @@
   --switch-disabled-checked-background-color: var(--tc-toggle-button-active-disabled);
   --switch-disabled-knob-color: var(--tc-toggle-button-ellipse-disabled);
   --switch-disabled-checked-knob-color: var(--tc-toggle-button-ellipse-disabled);
-  --switch-disabled-text-color: var(--tc-button-text-inverse-disabled);
+  --switch-disabled-text-color: var(--tc-grey-40);
+  --switch-outline-focus-color: var(--tc-blue-40);
   display: block;
   position: relative;
 }
@@ -416,7 +400,8 @@
   --switch-disabled-checked-background-color: var(--tc-toggle-button-active-disabled-dark);
   --switch-disabled-knob-color: var(--tc-toggle-button-ellipse-disabled-dark);
   --switch-disabled-checked-knob-color: var(--tc-toggle-button-ellipse-disabled-dark);
-  --switch-disabled-text-color: var(--tc-button-text-inverse-disabled-dark);
+  --switch-disabled-text-color: var(--tc-grey-40-dark);
+  --switch-outline-focus-color: var(--tc-blue-40-dark);
 }
 .switch.mint {
   --switch-background-color: rgb(67, 75, 86);
@@ -427,25 +412,43 @@
   --switch-hover-background-color: rgba(255, 255, 255, 0.3);
   --switch-hover-checked-background-color: rgb(24, 165, 170);
   --switch-focus-background-color: var(--switch-background-color);
-  --switch-focus-shadow: 0 0 0 0.5rem rgba(153, 160, 174, 0.2), 0 0 0 0.5rem rgba(255, 255, 255, 0.24),
-  0 0.0625rem 0.0625rem rgba(10, 11, 13, 0.16), 0 0.1875rem 0.5rem rgba(10, 11, 13, 0.15);
+  --switch-focus-shadow:
+    0 0 0 0.5rem rgba(153, 160, 174, 0.2),
+    0 0 0 0.5rem rgba(255, 255, 255, 0.24),
+    0 0.0625rem 0.0625rem rgba(10, 11, 13, 0.16),
+    0 0.1875rem 0.5rem rgba(10, 11, 13, 0.15);
   --switch-focus-checked-shadow: var(--switch-focus-shadow);
   --switch-disabled-background-color: rgb(35, 40, 46);
   --switch-disabled-checked-background-color: rgba(31, 208, 214, 0.32);
   --switch-disabled-knob-color: rgb(67, 75, 86);
   --switch-disabled-checked-knob-color: rgb(10, 11, 13);
   --switch-disabled-text-color: rgb(67, 75, 86);
+  --switch-outline-focus-color: var(--tc-blue-40-dark);
 }
 .switch__container {
-  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   display: flex;
   gap: var(--switch-gap);
   flex-direction: var(--switch-flex-direction);
   justify-content: var(--switch-justify-content);
   align-items: center;
+  cursor: pointer;
   user-select: none;
   color: var(--switch-text-color);
 }
+.switch__container:has(.switch__html-input:disabled) {
+  cursor: auto;
+}
+.switch__container--focus-style:has(.switch__html-input:focus-visible) {
+  outline: 0.125rem solid var(--switch-outline-focus-color);
+  outline-offset: var(--switch-container-outline-offset);
+  border-radius: 0.125rem;
+}
+.switch__container--align-start {
+  align-items: flex-start;
+}
+.switch__container--lg-inter, .switch__container--lg-gilroy {
+  --switch-gap: 1rem;
+}
 .switch__state {
   position: absolute;
   content: "";
@@ -458,6 +461,7 @@
   background-color: var(--switch-background-color);
 }
 .switch__html-input {
+  position: absolute;
   opacity: 0;
   width: 0;
   height: 0;
@@ -482,6 +486,9 @@
   outline-offset: 0.0625rem;
   transition: outline 0s;
 }
+.switch__html-input:focus-visible ~ .switch__input.switch__input--hide-focus-style {
+  outline: none;
+}
 .switch__html-input:focus-visible ~ .switch__input::after {
   --switch-focus-shadow: none;
 }
@@ -504,10 +511,6 @@
 .switch__html-input:checked:focus-visible ~ .switch__input::after {
   --switch-focus-checked-shadow: none;
 }
-.switch__html-input[disabled] ~ .switch__label,
-.switch__html-input[disabled] ~ .switch__input {
-  cursor: auto;
-}
 .switch__html-input[disabled] ~ .switch__input .switch__state {
   background-color: var(--switch-disabled-background-color);
 }
@@ -545,6 +548,19 @@
   box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.16), 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15);
   background-color: var(--switch-knob-color);
 }
-.switch__label, .switch__input {
-  cursor: pointer;
+.switch__label--sm {
+  font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
+  line-height: 1.5rem;
+}
+.switch__label--md {
+  font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.switch__label--lg-inter {
+  font: 500 1.25rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+}
+.switch__label--lg-gilroy {
+  font: 600 1.25rem/1.5rem "Gilroy", "Gilroy, Arial, sans-serif";
+}
+.switch__label--left {
+  text-align: right;
 }

package/dist/collection/components/basic/buttons/tet-switch/tet-switch.js

@@ -13,6 +13,10 @@ export class TetSwitch {
         this.value = 0;
         this.disabled = false;
         this.checked = false;
+        this.labelFont = 'sm';
+        this.alignCenter = true;
+        this.labelPosition = 'right';
+        this.focusStyleOnContainer = false;
     }
     /** The event that is emitted whenever the control element is checked. */
     check;
@@ -31,11 +35,27 @@ export class TetSwitch {
         const input = event.target;
         this.check.emit({ value: this.value, checked: input.checked });
     }
+    renderSwitch() {
+        const { theme, labelFont } = this;
+        return (h("span", { class: {
+                'switch__input': true,
+                [theme]: true,
+                'switch__input--hide-focus-style': this.focusStyleOnContainer,
+                ...(labelFont ? { [`switch__input--${labelFont}`]: true } : {}),
+            } }, h("span", { class: "switch__state" })));
+    }
     render() {
-        const { label, name, theme, disabled, checked, accessibilityLabel } = this;
-        return (h(Host, { key: 'f25d9a0bbe9c3c187e093f574ab75178b140b129' }, h("div", { key: 'ebb6c9971dfd699a0b5e4ba51928ed331bbf6fed', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '0efd583b6acb294c72dd589e4fe629055d7e6498', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: 'a843923da4bd8983d9f27ad8cf5f5e51beded623', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), h("span", { key: '94655befa0d5ee135fa700a03629fd2f5c3850f0', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: 'f8422247725dfe25ab18107fbc5a9e26c606018d', class: "switch__state" })), label
-            ? h("span", { class: "switch__label", innerHTML: label })
-            : h("span", { class: "switch__label" }, h("slot", null))))));
+        const { label, name, theme, disabled, checked, accessibilityLabel, labelFont, alignCenter, labelPosition } = this;
+        return (h(Host, { key: '3a512ae8f83c1df5ea283c1b188bb78d16fda888' }, h("div", { key: 'ffab5952335efcdaf91447d0ed6ab1e4f9b816ed', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '48f0cc64482e9e0330e0746d96aacbc1658781c5', class: {
+                'switch__container': true,
+                'switch__container--align-start': !alignCenter,
+                [`switch__container--${labelFont}`]: true,
+                'switch__container--focus-style': this.focusStyleOnContainer,
+            }, part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: '961321e60b0550a7eeb6e7d43b024ce1d1107168', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange.bind(this), ...(accessibilityLabel ? { "aria-label": accessibilityLabel } : {}) }), labelPosition === 'right' && this.renderSwitch(), h("span", { key: 'f0305170bee1f471194a1c1b0296780e8d274bfb', class: {
+                'switch__label': true,
+                ...(labelPosition === 'left' ? { 'switch__label--left': true } : {}),
+                ...(labelFont ? { [`switch__label--${labelFont}`]: true } : {}),
+            }, innerHTML: label }, h("slot", { key: 'fde4204dc0d73adc2dd26a8e2197512a064e2303' })), labelPosition === 'left' && this.renderSwitch()))));
     }
     static get is() { return "tet-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -174,6 +194,84 @@ export class TetSwitch {
                 "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "labelFont": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "LabelFont",
+                    "resolved": "\"lg-gilroy\" | \"lg-inter\" | \"md\" | \"sm\"",
+                    "references": {
+                        "LabelFont": {
+                            "location": "import",
+                            "path": "../types/common",
+                            "id": "src/components/basic/buttons/types/common.ts::LabelFont"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the font of the label."
+                },
+                "attribute": "label-font",
+                "reflect": false,
+                "defaultValue": "'sm'"
+            },
+            "alignCenter": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the switch should be center-aligned."
+                },
+                "attribute": "align-center",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the position of the label relative to the switch."
+                },
+                "attribute": "label-position",
+                "reflect": false,
+                "defaultValue": "'right'"
+            },
+            "focusStyleOnContainer": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the focus style is applied to the checkbox or the container."
+                },
+                "attribute": "focus-style-on-container",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-content/tet-tab-content.js

@@ -161,11 +161,11 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: 'e433dc27a020345e535a33ec9a444233ddf480a5' }, h("div", { key: 'ac4f0414541d509d3ddf33302008963e54e5e6c4', class: {
+        return (h(Host, { key: '22fd6884be5e41cfd6cb69a0d11d66fe901de8c6' }, h("div", { key: '2ca5b148038b08f5df8c468a289b478fbd8b7a8e', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: '7f2a47a5a27189b21c0718be768541989528d516' }))));
+            } }, h("slot", { key: '2c15e768690218a31f97ce720b6d045e15a3aef4' }))));
     }
     static get is() { return "tet-tab-content"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/tet-tabs/tet-tab-header/tet-tab-header.js

@@ -471,14 +471,14 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '225e99ead3163ce7201b511a79426aa568ad0ba9', "data-id-suffix": this.idSuffix }, h("div", { key: '575aa5c8526ee4ce7b8adc1ecc30845491f93237', class: {
+        return (h(Host, { key: 'f093147df2f2aa9bc5af900a588dbcc381256d63', "data-id-suffix": this.idSuffix }, h("div", { key: 'd7a8117f94fb245244bb575ef8ededa161bea1d9', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 [this.position]: true,
                 [this.theme]: true,
                 [this.sizing]: true,
                 [this.type]: !!this.type
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: '27327d44b7718ac33b04b6aae944ab4b0dcb1ce4', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '57a1a4ea3076805b66eee05962493653694ac333', class: {
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref), role: "tablist" }, h("slot", { key: 'd841b64e5dbb5131d1560a64e7834876eb3cc261', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '65744b2843a557f6f4bc20b6027bb556d14cbe0d', class: {
                 'tabs-line': !this.segmented,
                 'no-underline': this.hideHeaderUnderline,
                 [this.theme]: true,

package/dist/collection/components/basic/buttons/tet-tag/tet-tag.js

@@ -20,12 +20,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: 'cf9794b8105f790f7bee7b4ccb87b2ac799a919d' }, h("button", { key: '1da586be1d852269b6b821a6aeb0e76f3934ace7', class: {
+        return (h(Host, { key: '031cdd212300065594cd224fa9e4576645cfc15a' }, h("button", { key: '844f69864fcfa54a9b5936746282bf43501c71b6', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: '366753a6c9d7e540228db9f1ee465af9359dab53', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'a31fa5ca439775d452881b42df7d171a2d980fc5', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: 'd7e31d59eabc0dd67aea20d87e2c1cb8b910abda', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString(), disabled: this.disabled }, this.tagTitle && h("p", { key: 'b82709521ca57dbe1ecf42d0d9af2e9977f2f6b6', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: 'db8323fbe5f53b8c61c87d5113bf5c14927b21f5', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '72fc973b22ac64bce60ccde3780cc49cbbe52f3e', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/buttons/types/common.js

@@ -0,0 +1 @@
+export {};