@tet/tet-components 1.4.9-testing → 1.4.10-production

package/dist/collection/components/advanced/forms/tet-feedback-form/tet-feedback-form.js

@@ -0,0 +1,329 @@
+import { h, Host, forceUpdate } from "@stencil/core";
+import { processTranslations, t } from "../../../../services/translations/index";
+;
+/**
+ * A customizable feedback form component with accordion layout.
+ *
+ * Checkbox option IDs must follow **valid JavaScript identifier** patterns.
+ */
+export class TetFeedbackForm {
+    constructor() {
+        this.theme = 'light';
+        this.language = 'lv';
+        this.data = undefined;
+        this.expanded = false;
+        this.formError = false;
+        this.characterCount = 0;
+        this.submissionData = {
+            helpful: true,
+            options: {},
+            comment: '',
+        };
+        this.submitted = false;
+    }
+    /** The event that is emitted when user submits the form. */
+    feedbackSubmitted;
+    /** Watches for changes in the language prop to update translations and force component update. */
+    onLanguageChange(language) {
+        processTranslations('tet-components', language).then(() => forceUpdate(this));
+    }
+    /** Processes translations and merges data with defaults. */
+    async componentWillLoad() {
+        await processTranslations('tet-components', this.language);
+        forceUpdate(this);
+    }
+    /** Reference to the tet-accordion element. */
+    accordionRef;
+    /** Reference to the tet-textarea element. */
+    textareaRef;
+    /** References to the tet-checkbox elements. */
+    checkboxRefs = new Map();
+    /** Returns default values as a fallback when not provided in the data prop. */
+    getDefaultValues() {
+        return {
+            label: t('components-feedback-form-label'),
+            labelTag: 'h2',
+            okButtonLabel: t('components-button-label-yes'),
+            okButtonIconName: 'tc-check',
+            nokButtonLabel: t('components-button-label-no'),
+            nokButtonIconName: 'tc-close',
+            formTitle: t('components-feedback-form-title'),
+            formDescription: t('components-feedback-form-description'),
+            checkboxOptions: [],
+            showTextarea: true,
+            textareaLabel: t('components-feedback-form-textarea-label'),
+            textareaPlaceholder: t('components-feedback-form-textarea-placeholder'),
+            textareaMaxLength: 500,
+            footerText: t('components-feedback-form-footer-text'),
+            footerIconName: 'tc-bubbles',
+            submitButtonLabel: t('components-feedback-form-submit-button-label'),
+            submitButtonIconName: 'tc-arrow-right',
+            thankYouIconName: 'tc-check-circle',
+            thankYouTitle: t('components-feedback-form-thank-you-title'),
+            thankYouDescription: t('components-feedback-form-thank-you-description'),
+        };
+    }
+    /** Returns user-provided data merged with defaults. */
+    get mergedData() {
+        return {
+            ...this.getDefaultValues(),
+            ...this.data,
+        };
+    }
+    /** Toggles the accordion state and resets the form error state if it is set. */
+    toggleAccordion() {
+        if (this.accordionRef) {
+            this.accordionRef.toggle();
+            if (this.formError) {
+                this.setFormError(false);
+            }
+        }
+    }
+    /**
+     * Handles click on a checkbox list item to update the submission data with the selected options.
+     * Resets form error state if it was set.
+     */
+    onListItemClick(event, id) {
+        const isChecked = !!event.detail.checked;
+        if (this.formError) {
+            this.setFormError(false);
+        }
+        if (isChecked) {
+            this.submissionData = {
+                ...this.submissionData,
+                options: {
+                    ...this.submissionData.options,
+                    [id]: true,
+                }
+            };
+        }
+        else {
+            const { [id]: _, ...rest } = this.submissionData.options;
+            this.submissionData = {
+                ...this.submissionData,
+                options: rest
+            };
+        }
+    }
+    /** Handles input event on the textarea to update the character count and submission data. */
+    async onTextInput() {
+        if (!this.textareaRef) {
+            return;
+        }
+        const value = await this.textareaRef.getValue();
+        this.characterCount = value.length;
+        this.submissionData = {
+            ...this.submissionData,
+            comment: value
+        };
+    }
+    /**
+     * Emits the feedbackSubmitted event with the current submission data
+     * or sets form error state if the feedback is negative and no options are selected.
+     */
+    submitFeedback(helpful) {
+        this.submissionData.helpful = helpful;
+        if (helpful) {
+            this.submissionData.options = {};
+            this.submissionData.comment = '';
+        }
+        else if (!Object.keys(this.submissionData.options).length) {
+            this.setFormError(true);
+            return;
+        }
+        this.feedbackSubmitted.emit(this.submissionData);
+        this.submitted = true;
+    }
+    /** Sets the form error state and updates the checkbox error states. */
+    setFormError(value) {
+        for (const checkbox of this.checkboxRefs.values()) {
+            checkbox.setError(value);
+        }
+        this.formError = value;
+    }
+    /** Gets the next heading level (one level deeper). */
+    getSubheadingTag() {
+        const { labelTag } = this.mergedData;
+        const headingMap = {
+            'h1': 'h2',
+            'h2': 'h3',
+            'h3': 'h4',
+            'h4': 'h5',
+            'h5': 'h6',
+        };
+        return headingMap[labelTag];
+    }
+    renderAccordionHeader() {
+        const { theme, mergedData, expanded } = this;
+        const { label, labelTag, okButtonLabel, nokButtonLabel, okButtonIconName, nokButtonIconName } = mergedData;
+        const HeadingTag = labelTag;
+        return (h("div", { slot: "header", class: {
+                'feedback-form__header': true,
+                'feedback-form__header--expanded': expanded
+            } }, h(HeadingTag, { class: "feedback-form__title" }, label), h("div", { class: "feedback-form__button-container" }, h("tet-button", { class: "button", iconName: okButtonIconName, iconPosition: 'left', theme: theme, type: "secondary", onClick: () => this.submitFeedback(true), "data-testid": "feedback-ok-button" }, okButtonLabel), h("tet-button", { class: "button", iconName: nokButtonIconName, iconPosition: 'left', theme: theme, type: "secondary", onClick: () => this.toggleAccordion(), "data-testid": "feedback-nok-button" }, nokButtonLabel))));
+    }
+    renderFormContentHeader() {
+        const { theme, mergedData } = this;
+        const { formTitle, formDescription } = mergedData;
+        const HeadingTag = this.getSubheadingTag();
+        return (h("div", { class: "main__header" }, h("div", { class: "main__header--left" }, h(HeadingTag, { id: "form-content-title", class: "title" }, formTitle), h("p", { id: "form-content-description", class: "subtitle" }, formDescription)), h("button", { class: "main__header-close-btn", onClick: () => this.toggleAccordion(), "aria-label": t('components-availability-close'), type: "button", "data-testid": "feedback-close-button" }, h("tet-icon", { theme: theme, class: "icon", name: "tc-close" }))));
+    }
+    renderFormCheckboxOptions() {
+        const { theme, mergedData } = this;
+        const { checkboxOptions } = mergedData;
+        if (!checkboxOptions.length) {
+            return null;
+        }
+        return (h("ul", { class: "main__option-list" }, checkboxOptions.map(({ id, label }) => (h("li", { key: id, class: { "checkbox-wrapper": true, 'checkbox-wrapper--error': this.formError } }, h("tet-checkbox", { ref: el => {
+                if (el)
+                    this.checkboxRefs.set(id, el);
+            }, class: "checkbox", theme: theme, checked: !!this.submissionData?.options?.[id], focusStyleOnContainer: true, onCheck: (event) => this.onListItemClick(event, id) }, label))))));
+    }
+    renderFormTextArea() {
+        const { theme, mergedData } = this;
+        const { showTextarea, textareaLabel, textareaPlaceholder, textareaMaxLength } = mergedData;
+        if (!showTextarea) {
+            return null;
+        }
+        return (h("div", { class: "main__text-input" }, h("tet-textarea", { label: textareaLabel, class: "textarea", theme: theme, value: this.submissionData.comment, onInput: () => this.onTextInput(), ref: el => this.textareaRef = el, placeholder: textareaPlaceholder, maxLength: textareaMaxLength }), h("div", { class: "counter" }, this.characterCount, "/", textareaMaxLength)));
+    }
+    renderFormFooter() {
+        const { theme, mergedData } = this;
+        const { footerText, footerIconName } = mergedData;
+        const footerTextParts = footerText.split(/\{\{\s*([+0-9][0-9 ]{0,20})\s*\}\}/g);
+        const trim = (part) => part.trim();
+        const content = footerTextParts.map((part, i) => ((i % 2 === 0) ? part : (h("a", { href: `tel:${trim(part)}`, class: { 'tet-link': true, [theme]: true, 'tet-link--secondary': true } }, trim(part)))));
+        return (h("footer", { class: "feedback-form__form--footer" }, h("div", { class: "footer-icon-block" }, h("tet-icon", { theme: theme, class: "footer-icon", name: footerIconName })), h("div", { class: "footer-text" }, content)));
+    }
+    renderSubmitButton() {
+        const { theme, mergedData } = this;
+        const { submitButtonLabel, submitButtonIconName } = mergedData;
+        return (h("tet-button", { class: "main__submit-button", iconName: submitButtonIconName, theme: theme, type: "primary", onClick: () => this.submitFeedback(false), "data-testid": "feedback-submit-button" }, submitButtonLabel));
+    }
+    renderAccordionContent() {
+        return (h("form", { class: "feedback-form__form", "aria-labelledby": "form-content-title", "aria-describedby": "form-content-description" }, h("div", { class: "feedback-form__form--main" }, this.renderFormContentHeader(), this.renderFormCheckboxOptions(), this.renderFormTextArea(), this.renderSubmitButton()), this.renderFormFooter()));
+    }
+    renderAccordionComponent() {
+        return (h("tet-accordion", { class: "feedback-form__accordion", theme: this.theme, isHeaderInteractive: false, transparentBackground: true, ref: (el) => (this.accordionRef = el), onOpenChanged: (e) => { this.expanded = e.detail; } }, this.renderAccordionHeader(), this.renderAccordionContent()));
+    }
+    renderThankYouComponent() {
+        const { labelTag, thankYouIconName, thankYouTitle, thankYouDescription } = this.mergedData;
+        const HeadingTag = labelTag;
+        return (h("div", { class: "feedback-form__thank-you", "aria-live": "polite" }, h("tet-icon", { class: "icon", name: thankYouIconName }), h("div", { class: "text-block" }, h(HeadingTag, { class: "title" }, thankYouTitle), h("p", { class: "description" }, thankYouDescription))));
+    }
+    render() {
+        return (h(Host, { key: '6e974c9c8f1ffd16416d89a89bd0beb3949f90a3' }, h("section", { key: 'c8223e88595b2ae02b5146d88841d187d2c812a1', class: "feedback-form" }, this.submitted ? this.renderThankYouComponent() : this.renderAccordionComponent())));
+    }
+    static get is() { return "tet-feedback-form"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tet-feedback-form.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tet-feedback-form.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
+            "language": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The translation language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "'lv'"
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "FeedbackFormData",
+                    "resolved": "FeedbackFormData",
+                    "references": {
+                        "FeedbackFormData": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/forms/tet-feedback-form/tet-feedback-form.tsx",
+                            "id": "src/components/advanced/forms/tet-feedback-form/tet-feedback-form.tsx::FeedbackFormData"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The data for the component."
+                }
+            }
+        };
+    }
+    static get states() {
+        return {
+            "expanded": {},
+            "formError": {},
+            "characterCount": {},
+            "submissionData": {},
+            "submitted": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "feedbackSubmitted",
+                "name": "feedbackSubmitted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The event that is emitted when user submits the form."
+                },
+                "complexType": {
+                    "original": "FeedbackFormSubmissionData",
+                    "resolved": "{ helpful: boolean; options: { [id: string]: boolean; }; comment: string; }",
+                    "references": {
+                        "FeedbackFormSubmissionData": {
+                            "location": "local",
+                            "path": "/__w/internal-tet-web-components-tet-components/internal-tet-web-components-tet-components/src/src/components/advanced/forms/tet-feedback-form/tet-feedback-form.tsx",
+                            "id": "src/components/advanced/forms/tet-feedback-form/tet-feedback-form.tsx::FeedbackFormSubmissionData"
+                        }
+                    }
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "language",
+                "methodName": "onLanguageChange"
+            }];
+    }
+}

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-block/tet-tv-gift-block.js

@@ -33,7 +33,7 @@ export class TetTvGiftBlock {
         }
     };
     render() {
-        return (h(Host, { key: '659f534771e2ec28f80756e197af0d75871109fd' }, h("div", { key: '5d9dffd01eddd41beb2c28b0264b411fc6b39592', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: 'b41e8a5d2d252febc134777efc5a7f193a995694', class: "tv-gift__header" }, h("slot", { key: '2188a1b102191345da25e95065c5e544749a6232', name: "header" }, this.headerImageSrc && h("img", { key: '13aa7bad99aaca12e742ef2472da8bba3755bce3', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '432e8d04c77161bba2d08aee3bc8b16ac95731a4', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: '55c0db093f3c9de9eee36252252f5f1f02f37274', class: "tv-gift__content" }, h("slot", { key: 'c02e4fd274c18c91c4f2da42c7772208d6edf136' })), h("div", { key: 'ae44305548573c02135a93fd39815fc217729677', class: "tv-gift__footer" }, h("slot", { key: 'bbcb142e2458ec2a7c7d6a59c65125ee84b912c6', name: "footer" }, h("span", { key: '484307d6cb087dc819e183d866b841ab1006b36b', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: '08eafd915b20c0edcce942c2920c504751748972', class: "tv-gift__footer__text" }, this.footerText))))));
+        return (h(Host, { key: '897f23f87a68c2b2af46bf65456a7f11325deab3' }, h("div", { key: 'bd9eda1afd8a194cd7c004413f229926ca33e20d', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '505c15b6c8430fded765a2fe754548e76fb780c1', class: "tv-gift__header" }, h("slot", { key: '00e2e7d1b4e998696175d3d8413b9508d6695117', name: "header" }, this.headerImageSrc && h("img", { key: '4e003772606714723d7646a59c38541dc3592993', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: 'ee152d23f19056b8f80dcebda2fe8182a7b11c52', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: 'ae59e0d2f78391b984c175924e0940c887605b20', class: "tv-gift__content" }, h("slot", { key: '52698a9be6a9daa3c62553668c6fe7105a54c2f3' })), h("div", { key: 'a453548305225ce2629b6ef71a7cf3b20cc1e988', class: "tv-gift__footer" }, h("slot", { key: 'edd958bc67ab30b08e1cb70ac8b1ca29a615fac1', name: "footer" }, h("span", { key: '597f9451fb6ac6a44a92ab7825e043635dc93dfa', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: 'df8b6a40e64e1f6038d753ab7a4c1eef0f092b46', class: "tv-gift__footer__text" }, this.footerText))))));
     }
     static get is() { return "tet-tv-gift-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/promotions/tv-gift/tet-tv-gift-list/tet-tv-gift-list.js

@@ -36,11 +36,11 @@ export class TetTvGiftList {
         }
     };
     render() {
-        return (h(Host, { key: 'df609c3024a455746289bc9eaf2a09602d763185' }, h("div", { key: 'e6ed87432a4ec536c4231d135b63f6e1e150128b', class: {
+        return (h(Host, { key: '709d8b2605b1bb7011229abbba1551c842b39e0d' }, h("div", { key: '81cf090e004da33e97cce16cd7abdc615749a258', class: {
                 'tv-gift-list': true,
                 [`tv-gift-list--${this.containerSize}`]: true,
                 'tv-gift-list--image-list': Boolean(this.imageSource),
-            } }, this.imageSource && (h("div", { key: 'abdb68f90099e187b1ac1553ea40d99ee19beb75', class: "tv-gift-list__image__wrapper" }, h("img", { key: 'ea215435405462d30730bdb767b0a955e8dc019c', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: 'c595c8cfb4bdf5f7500b091699f146357b9e45de', class: "tv-gift-list__list__wrapper" }, h("span", { key: '0f25ad63d5eb246cec785f2928f8f7c189abd7f7', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: '5e4189f6ecbf9ac9aa52c62886a497e31b7f21b0', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
+            } }, this.imageSource && (h("div", { key: '7c021e2f2b20b54ccd3b193fd2ae72f6ece17690', class: "tv-gift-list__image__wrapper" }, h("img", { key: '0d27d612194d221b01de9d60a1be94acd12e21c8', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: '75a21a5e8aaf8acfc5af2024fcf47ebc4c262226', class: "tv-gift-list__list__wrapper" }, h("span", { key: '314173ac2e7d8e344e84efc3904517b203fcacc4', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: 'f125acb4961ba78988e242cf17b74429f93f39ba', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
     }
     static get is() { return "tet-tv-gift-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -462,6 +462,8 @@
   * @prop --checkbox-justify-content: The justify-content style for the checkbox container.
   * @prop --checkbox-alignment: The alignment of the items - checkbox, label.
   * @prop --checkbox-gap: The gap property checkbox container.
+  * @prop --checkbox-container-outline-offset: The outline offset for the container on keyboard focus.
+
 
   * @prop --checkbox-hover-border-color: The border color of the checkbox on hover.
   * @prop --checkbox-hover-background-color: The background color of the checkbox on hover.
@@ -490,12 +492,14 @@
   --checkbox-justify-content: normal;
   --checkbox-alignment: center;
   --checkbox-gap: 0.625rem;
+  --checkbox-container-outline-offset: 0.125rem;
   --checkbox-hover-border-color: var(--tc-border-secondary);
   --checkbox-hover-background-color: var(--tc-checkbox-hover);
   --checkbox-checked-hover-background-color: var(--tc-checkbox-active-hover);
   --checkbox-checked-pressed-background-color: var(--tc-checkbox-active-pressed);
   --checkbox-focus-background-color: transparent;
   --checkbox-focus-shadow-color: var(--tc-checkbox-active-focus);
+  --checkbox-outline-focus-color: var(--tc-blue-40);
   --checkbox-disabled-border-color: var(--tc-border-quaternary);
   --checkbox-disabled-background-color: var(--tc-checkbox-disabled);
   --checkbox-disabled-checked-background-color: var(--tc-checkbox-active-disabled);
@@ -517,6 +521,7 @@
   --checkbox-checked-pressed-background-color: var(--tc-checkbox-active-pressed-dark);
   --checkbox-focus-background-color: transparent;
   --checkbox-focus-shadow-color: var(--tc-checkbox-active-focus-dark);
+  --checkbox-outline-focus-color: var(--tc-blue-40-dark);
   --checkbox-disabled-border-color: var(--tc-border-quaternary-dark);
   --checkbox-disabled-background-color: var(--tc-checkbox-disabled-dark);
   --checkbox-disabled-checked-background-color: var(--tc-checkbox-active-disabled-dark);
@@ -529,6 +534,9 @@
   outline-offset: 0.125rem;
   transition: outline 0s;
 }
+.checkbox.dark .checkbox__html-input:focus-visible ~ .checkbox__input--hide-focus-style, .checkbox.mint .checkbox__html-input:focus-visible ~ .checkbox__input--hide-focus-style {
+  outline: none;
+}
 .checkbox.mint {
   --checkbox-checked-background-color: rgb(31, 208, 214);
   --checkbox-hover-background-color: rgba(31, 208, 214, 0.16);
@@ -548,6 +556,11 @@
   color: var(--checkbox-text-color);
   font-size: var(--checkbox-text-size);
 }
+.checkbox__container--focus-style:has(.checkbox__html-input:focus-visible) {
+  outline: 0.125rem solid var(--checkbox-outline-focus-color);
+  outline-offset: var(--checkbox-container-outline-offset);
+  border-radius: 0.125rem;
+}
 .checkbox__container:hover .checkbox__input {
   border-color: var(--checkbox-hover-border-color);
   background-color: var(--checkbox-hover-background-color);
@@ -590,6 +603,10 @@
   outline-offset: 0.125rem;
   transition: outline 0s;
 }
+.checkbox__html-input:focus-visible ~ .checkbox__input--hide-focus-style {
+  outline: none;
+  border-color: var(--checkbox-border-color);
+}
 .checkbox__html-input:focus-visible ~ .checkbox__input--error {
   border-color: var(--checkbox-error-border-color);
 }

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

@@ -14,6 +14,7 @@ export class TetCheckbox {
         this.checked = false;
         this.error = false;
         this.indeterminate = false;
+        this.focusStyleOnContainer = false;
     }
     /** The HTML input element. */
     inputEl;
@@ -61,7 +62,14 @@ export class TetCheckbox {
     }
     render() {
         const { label, name, checked, value, disabled, error } = this;
-        return (h(Host, { key: '3c8b35516298fcebea4cd04d41b4405f325336f6' }, h("div", { key: '2a2819cbc81adb8a3fc652cc286083e557079379', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '3866e69318e438f37e62f52156c4b216697390d2', class: "checkbox__container", part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: 'e18d1c68248939b02d689df414272b4a85258a30', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: 'ddc461af258ceaf8ab134656b308cd9d6edb8bc3', class: { 'checkbox__input': true, 'checkbox__input--error': error } }, h("tet-icon", { key: '068556b47563dd0e29e993d6d114e3b7583e98e7', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: 'ed4a8fdd9408a57a54428c6637fc22647d9f1eee', name: "check", class: "checkbox__icon" })), label ? (h("span", { class: "checkbox__label", innerHTML: label })) : (h("span", { class: "checkbox__label" }, h("slot", null)))))));
+        return (h(Host, { key: '4994fd34f7d6bd6c8ecd455901af830a3aff2da9' }, h("div", { key: '145d350427b8b39fcb4eec64cc2831bd8a591102', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: '2997be88ae2f9c5e47acd57451319af53d16d03c', class: {
+                'checkbox__container': true,
+                'checkbox__container--focus-style': this.focusStyleOnContainer,
+            }, part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '7b5939ba0c313e826c87afdd34ab6fe53a02d771', ref: (el) => (this.inputEl = el), class: "checkbox__html-input", id: "tet-checkbox", type: "checkbox", name: name, value: value, disabled: disabled, checked: checked, onChange: this.handleChange }), h("span", { key: '830ff2dc0d3578358eec875ef82eec88bad5425d', class: {
+                'checkbox__input': true,
+                'checkbox__input--error': error,
+                'checkbox__input--hide-focus-style': this.focusStyleOnContainer,
+            } }, h("tet-icon", { key: '9d765bfbec5c97c00d6fa3c4d2292844a2ec3afb', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '20a7ca36f8603038529cec3bcaf5120a0557679a', name: "check", class: "checkbox__icon" })), label ? (h("span", { class: "checkbox__label", innerHTML: label })) : (h("span", { class: "checkbox__label" }, h("slot", null)))))));
     }
     static get is() { return "tet-checkbox"; }
     static get encapsulation() { return "shadow"; }
@@ -218,6 +226,24 @@ export class TetCheckbox {
                 "attribute": "indeterminate",
                 "reflect": true,
                 "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 checkbox or the container."
+                },
+                "attribute": "focus-style-on-container",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -49,7 +49,7 @@ export class TetRadio {
     }
     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)))))));
+        return (h(Host, { key: '5ce2ebb64805cede6f46fe8f1e11669755e02269' }, h("div", { key: 'acdcfd4aabc23020d21407d2a171fe6c9c003a9f', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '09bbc949154be7e9c6c49bde03dc986349b9cf65', class: "radio__container", htmlFor: id }, h("input", { key: '75a9a0a0a2eec79370fe8e890dd32b632020ccfb', 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: 'ee687e1378ebe5f4161a704fe930e879ba619069', class: "radio__input" }), label ? (h("span", { class: "radio__label", innerHTML: label })) : (h("span", { class: "radio__label" }, h("slot", null)))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -33,7 +33,7 @@ export class TetSwitch {
     }
     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
+        return (h(Host, { key: '28ae0b65de9b35494421f26de6ba070251c513e9' }, h("div", { key: '960e76423a8248c07d1a4e4734dc37ea8c909902', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '9d4e2a4aae217a034ac4e0f18fe72e617c6d8c91', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", { key: '628be8bcab2d85054b1baadca3d97bce6af7ad65', 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: '29221d1549c061f895fa0a766079b587b39ab0c0', class: { "switch__input": true, [this.theme]: true } }, h("span", { key: '7d8fef451f65fdd4029721e02ea3f2a36d7c6730', class: "switch__state" })), label
             ? h("span", { class: "switch__label", innerHTML: label })
             : h("span", { class: "switch__label" }, h("slot", null))))));
     }

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: '3d707413b1e43dceb5d9dfa3426e104b704d0c4f' }, h("div", { key: 'ca9eeb6d0a4837a34db06a35f9bbc3d891e35f63', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility,
                 [this.theme]: true
-            } }, h("slot", { key: '7f2a47a5a27189b21c0718be768541989528d516' }))));
+            } }, h("slot", { key: '55910073183c867ff37d5af21e69f39b420d3b12' }))));
     }
     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: '47f617655b7afbe1929de6f04fcc0ad9b17aae4b', "data-id-suffix": this.idSuffix }, h("div", { key: 'b71ccfd86728c6088cf44e5751c9951bfb010cb5', 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: 'a7e7099543ff2c2aee1ff7147599f58f53d3ac5f', ref: (slot) => (this.tabContainer = slot) })), h("div", { key: '800e8fc3c243ac5c6979df035c84b68cb51a4363', 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: '086f951b5334e7710fea561343f937a675585b4d' }, h("button", { key: '8a812ee34727e53455e5006ca45d9cedae50b9ab', 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: '4952d4e5fe00ae88d5d115cb72aba8d65c1d3980', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '0858222d5874927006a5e5e3f8f4d429527e95a5', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: 'ae4fe91de2d2833b2635e3208f9830da61cb7d0b', 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/carousel/tet-carousel/tet-carousel.js

@@ -427,23 +427,23 @@ export class TetCarousel {
         document.removeEventListener('pointerup', this.onPointerUp);
     }
     render() {
-        return (h(Host, { key: 'aa17a576d566861cb87cd037f44ab4c02b642c90' }, h("div", { key: '022b4afb52e1f1c7c520159bca8c305d8e5927b4', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '47d03841a067ace013a9e8e50f39badb4ad2e3dc', class: "tet-carousel__container" }, h("div", { key: 'b840f3d9cafa6ca0de8df665ef97ccd4f7d70757', class: "tet-carousel__gradient-left", ref: (el) => {
+        return (h(Host, { key: 'ccdb2a82e8f762b784f88fe8fc8411c7f58db6c4' }, h("div", { key: '3518075a77f61caa6b37830c8185f430552fa54c', class: { 'tet-carousel': true, [`${this.theme}`]: true }, ref: (el) => (this.container = el), part: "carousel" }, h("div", { key: '0793973e111c0c94ef35829434c67d48e30fae5e', class: "tet-carousel__container" }, h("div", { key: 'a677bf936f443d3f131b7016a1bedd8db7cf8ef7', class: "tet-carousel__gradient-left", ref: (el) => {
                 this.leftGradientRef = el;
-            } }), h("div", { key: '84c8726f2ae119483f9179d7719bf11aca8b33a6', class: "tet-carousel__gradient-right", ref: (el) => {
+            } }), h("div", { key: '70a30ed0b05f8ed166e470aecae900b249e20ce8', class: "tet-carousel__gradient-right", ref: (el) => {
                 this.rightGradientRef = el;
-            } }), h("div", { key: 'bf1bd992edbc54d73e1d451602ab6c7264f19c31', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, ref: (el) => (this.trackElement = el), style: {
+            } }), h("div", { key: '5fc2677a52b16c824cab54f1df2e866188b2ffe1', class: `tet-carousel__track ${!this._showButtons() && !this._showDots() ? 'tet-carousel__track--center' : ''}`, ref: (el) => (this.trackElement = el), style: {
                 transform: `translateX(${this.dragOffset}px)`,
                 transition: this.isDragging ? 'none' : `transform ${this.transitionDuration}ms ${this.transitionTiming}`
-            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: '92a952a6792c2ad3f7821cd56b5ab552c928d74d' }))), !!this.label && h("div", { key: '10f33991895223dbaa752a8ae85a90ad8d71ed90', class: "tet-carousel__label" }, this.label), (this._showButtons() || this._showDots()) && (h("div", { key: 'd1cd5c5206d1614ab878976f59b943fd3546927f', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: '9fe4e73fdac18dfd24e900d00b51c53b91ff6036', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '9797f863559f9a97d765b3ef8880142b7df2c6a2', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, onPointerDown: this.onPointerDown, onMouseMove: this.onPointerMove, onPointerUp: this.onPointerUp, onMouseLeave: this.onPointerUp }, h("slot", { key: 'f02701f2504108cf7987031e215a55d6c1927fc4' }))), !!this.label && h("div", { key: '76f95a115dc457824566a4fab63a102b55296a2f', class: "tet-carousel__label" }, this.label), (this._showButtons() || this._showDots()) && (h("div", { key: 'd05e1798f83404fabdec0692a31d09ad1bfa32f0', class: "tet-carousel__controls" }, this._showButtons() && (h("div", { key: '53ab7e4c45d1582b00da881a3f69d7a0a9bf221f', class: "tet-carousel__buttons tet-carousel__buttons--mobile" }, h("tet-button", { key: '5b68295b535ffb4d8eec6c029352d0ed533fb56b', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handlePrev();
-            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: '9492a728a0001fb7fdfb29bb34ecf2d98dd2f1ba', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }))), this._showDots() && (h("div", { key: '770af8e5ad30fbc098392b4ba6225f4d51a7bd93', class: "tet-carousel__dots" }, Array.from({ length: this.dotCount }).map((_, idx) => (h("button", { type: "button", tabIndex: -1, class: `tet-carousel__dot${idx === this.activeDotIndex ? ' active' : ''}`, key: idx, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handleDotClick(idx);
-            }, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: '9a041ab328480d1f2fed8a431244e171febdd266', class: "tet-carousel__buttons " }, h("tet-button", { key: '418905b6251aa28bb3c744290efec6b5af99ab73', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, onClick: () => this.handleDotClick(idx) }))))), this._showButtons() && (h("div", { key: '5862d85a1ae5b7e85594d848a91f77e0df442c00', class: "tet-carousel__buttons " }, h("tet-button", { key: '92ec06d94bcdf4070197b5a6134e8950a02205af', class: "tet-carousel__buttons--desktop tet-carousel__btn ", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconLeft, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handlePrev();
-            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: '21b0dd0f54f07765e5dbb7da2ae1bc1e62edc5fa', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
+            }, "aria-label": t('components-carousel-previous'), disabled: this.dotCount <= 1 || this.activeItem === 0 }), h("tet-button", { key: '4bd7318167e6ff71f465c159e48bc1e545390438', class: "tet-carousel__btn", theme: this.theme === 'light' ? 'dark' : 'light', "icon-name": this.buttonIconRight, "icon-mode": true, tabIndex: -1, onPointerDown: (e) => e.stopPropagation(), onPointerUp: () => {
                 if (!this.isDragging)
                     this.handleNext();
             }, "aria-label": t('components-carousel-next'), disabled: this.dotCount <= 1 ||

package/dist/collection/components/basic/icon/tet-icon.js

@@ -50,7 +50,7 @@ export class TetIcon {
     };
     shouldUseDefaultColor = () => (this.useDefaultColor || defaultColorIcons.includes(this.name));
     render() {
-        return (h("span", { key: '7af8d4aa2f4f35ab90c0f37c5b1db6984ca2e1df', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: '99d35d51b355eb7d2afa3b809401d117a753f4c4', class: {
+        return (h("span", { key: '08af7fe1ad185044243ba310dff631fc1683d4b0', class: "icon-wrapper", tabindex: (this.focusable || this.accessibilityLabel) ? 0 : -1 }, h("span", { key: 'b869128d153e2e75cabf554394e4eb46c6a5c93c', class: {
                 'icon-container': true,
                 'default-color': this.shouldUseDefaultColor(),
                 [this.theme]: true,

package/dist/collection/components/basic/loaders/tet-loader/tet-loader.js

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class TetLoader {
     render() {
-        return (h("div", { key: 'f235e148763d56dc63d1e7c144be6e4ee4b024a2', class: "loader" }, h("div", { key: '4064d7882524324ae0afdbcab645e87156f1128d', class: "loader-inner" })));
+        return (h("div", { key: '59434ea760f5de340ec4fd12b253451ec5fc5533', class: "loader" }, h("div", { key: 'ebf5b5a69db8f8a31921b4d7fa2cb478836aaff3', class: "loader-inner" })));
     }
     static get is() { return "tet-loader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/loaders/tet-placeholder/tet-placeholder.js

@@ -9,7 +9,7 @@ export class TetPlaceholder {
         this.darkTheme = false;
     }
     render() {
-        return (h(Host, { key: '10c954f06449fb1481f56d56169f388cc89e6f34', style: { width: this.width, height: this.height } }, h("div", { key: '35757dd39dd6a927c3535b4ce3b907c725156428', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '2ba1f7e5e928934c99bd1be2e1124dbc249a7fda', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: 'e01223a7679078444091fc6a9cb4446a925edc7e', style: { width: this.width, height: this.height } }, h("div", { key: 'bf0eb67ae8a97f23cd93000400c03b44ae1e05e8', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '3a92b993704bd8893407bd1162d8d49347253054', class: "placeholder", style: { height: this.height } }))));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }