@tet/tet-components 1.3.10-testing → 1.3.11-staging

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

@@ -16,13 +16,13 @@ export class TetButton {
         this.accessibilityLabel = '';
     }
     render() {
-        return (h(Host, { key: '7ae3e3d111e5c956fe53dc640199312aa6c50357' }, h("button", Object.assign({ key: 'b63da68559816f8cd54d391199f04879fe98b210', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
+        return (h(Host, { key: 'f71f529743204b2169a31efc61206b28ca9d2cd0' }, h("button", Object.assign({ key: '24f375077b77f27f830e1bab004f68a8c1308308', part: "button", onClick: this.clickCallback, id: this.elementId, class: {
                 button: true,
                 [`button-${this.size}`]: true,
                 [`button--type-${this.type}`]: true,
                 [`button-${this.theme}-theme`]: true,
                 'icon-mode': this.iconMode
-            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), h("slot", { key: '2c9124c1ee5115499f5d2069d5b172a64a14f273' }))));
+            }, disabled: this.disabled }, (this.accessibilityLabel ? { "aria-label": this.accessibilityLabel } : {})), h("slot", { key: 'deb3366201871cc033a7ab681d637126a10f195c' }))));
     }
     static get is() { return "tet-button"; }
     static get encapsulation() { return "shadow"; }

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

@@ -396,8 +396,10 @@
 }
 .tet-link:focus-visible,
 .tet-link__arrow:focus-visible {
-  outline: solid var(--tet-link-color-focus) 0.125rem;
-  outline-offset: 0.375rem;
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--tet-link-color-focus);
   border-radius: 0.125rem;
 }
 .tet-link.disabled,
@@ -564,7 +566,18 @@
 }
 .checkbox__html-input:focus ~ .checkbox__input {
   background-color: var(--checkbox-focus-background-color);
-  box-shadow: 0 0 0 0.25rem var(--checkbox-focus-shadow-color);
+  border-color: var(--checkbox-focus-border-color);
+}
+.checkbox__html-input:focus ~ .checkbox__input--error {
+  border-color: var(--checkbox-error-border-color);
+}
+.checkbox__html-input:focus-visible ~ .checkbox__input {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
+.checkbox__html-input:focus-visible ~ .checkbox__input--error {
+  border-color: var(--checkbox-error-border-color);
 }
 .checkbox__html-input:indeterminate ~ .checkbox__input, .checkbox__html-input:checked ~ .checkbox__input {
   border-color: var(--checkbox-checked-background-color);

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

@@ -57,7 +57,7 @@ export class TetCheckbox {
     }
     render() {
         const { label, name, checked, value, disabled, error } = this;
-        return (h(Host, { key: '8df57900fb778728864967167843dad8660a6f01' }, h("div", { key: '55567d805a622808549f4c337813e2f4306c87aa', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: 'eda1f9919454c32b6c0dc27965ed8a927c368192', class: "checkbox__container", part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '9a68e2d19bcca738d6b1c84e94c226b1947ae7d8', 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: 'dff19e692bcb57dd5c15ba4a9c5bddf7e1f426c5', class: { 'checkbox__input': true, 'checkbox__input--error': error } }, h("tet-icon", { key: '99bd39ba82ddb78e5086c7e418f1b51fab5628d5', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '799bd999193dda9fff7a89695ec474490377d711', 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: 'a1b82f46971bb28bad2d2dd2e6710b74493062bf' }, h("div", { key: 'f940718cd92c51c2539a4bda4e6045cae52bcc4a', class: { checkbox: true, [`${this.theme}`]: true } }, h("label", { key: 'd9605cc70023629d9e310f89e9d9c0930c5e0e86', class: "checkbox__container", part: "checkbox-container", htmlFor: "tet-checkbox" }, h("input", { key: '4b027f65600277d5503fba7f1b9d43587711f532', 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: '328bd69893030a78b22b919647a7979fc5986e41', class: { 'checkbox__input': true, 'checkbox__input--error': error } }, h("tet-icon", { key: '5a49a6a251cc21a572f558116e91c5ffd3673d87', name: "remove", class: "checkbox__icon checkbox__icon--indeterminate indicator" }), h("tet-icon", { key: '6447610f05dc85b21cf4689a6bd586f570cfd471', 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"; }

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

@@ -481,6 +481,11 @@
   border-color: var(--radio-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--radio-focus-shadow-color);
 }
+.radio__html-input:focus-visible ~ .radio__input {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 .radio__html-input:active ~ .radio__input {
   background-color: var(--radio-pressed-background-color);
 }

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

@@ -45,7 +45,7 @@ export class TetRadio {
     }
     render() {
         const { id, disabled, value, checked, name, label, handleInputChange, accessibilityLabel, inputAutofocus } = this;
-        return (h(Host, { key: 'e0b2709342f57fa38a6f40a6c256e7a18396f907' }, h("div", { key: '6959caf4b6c5fcc2a43804bb75149018490891cb', class: { radio: true, [`radio-${this.theme}-theme`]: true }, role: "radiogroup" }, h("label", { key: '41509c757954841355be4aa549012890b55d50e3', class: "radio__container", htmlFor: id }, h("input", Object.assign({ key: '7d3725b1d2d3169855b364449de382daa88837e9', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus }, (accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}))), h("span", { key: 'fa93212429f370d710945b8918406d16cc6c90fa', class: "radio__input" }), label ? (h("span", { class: "radio__label", id: id, innerHTML: label })) : (h("span", { class: "radio__label", id: id }, h("slot", null)))))));
+        return (h(Host, { key: 'f390c9749d5b2ea79058da7169a69154533ebe28' }, h("div", { key: 'd63c8d0798bf465db655d88e8c854c6ac5417b58', class: { radio: true, [`radio-${this.theme}-theme`]: true }, role: "radiogroup" }, h("label", { key: '1f93a77eacdd77784b7321d3fcc91cc8b33f49d5', class: "radio__container", htmlFor: id }, h("input", Object.assign({ key: '7bfa2558f087f955396f982216245228affd18d2', class: "radio__html-input", id: id, name: name, type: "radio", value: value, disabled: disabled, checked: checked, onChange: handleInputChange, autofocus: inputAutofocus }, (accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}))), h("span", { key: 'f73109381398fe50d26ccacdb854d8d141fbc11c', class: "radio__input" }), label ? (h("span", { class: "radio__label", id: id, innerHTML: label })) : (h("span", { class: "radio__label", id: id }, h("slot", null)))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -456,6 +456,11 @@
 .switch__html-input:focus ~ .switch__input::after {
   box-shadow: var(--switch-focus-shadow);
 }
+.switch__html-input:focus-visible ~ .switch__input {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 .switch__html-input:checked ~ .switch__input {
   background-color: var(--switch-checked-background-color);
 }
@@ -469,6 +474,11 @@
 .switch__html-input:checked:focus ~ .switch__input::after {
   box-shadow: var(--switch-focus-checked-shadow);
 }
+.switch__html-input:checked:focus-visible ~ .switch__input {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
 .switch__html-input[disabled] ~ .switch__label,
 .switch__html-input[disabled] ~ .switch__input {
   cursor: auto;

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

@@ -35,7 +35,7 @@ export class TetSwitch {
     }
     render() {
         const { label, name, theme, disabled, checked, accessibilityLabel } = this;
-        return (h(Host, { key: '1201f090a09705bcd57879edc3295962aec6dc63' }, h("div", { key: '73359f7e0bc5cefb92730e1bd1e9a8da61bc21dc', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '22e7c1f96391afb172812ee8a2680ff05935793a', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: '8a39b54d34e7fd64b9089976ec3bcdc0e0432f73', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange() }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: '4a8b4799de6daf957d8d029c1915548c5e8de8bd', class: "switch__input" }, h("span", { key: 'dfc83671af6d06ad7ae107d1e3b3a8546aa44971', class: "switch__state" })), label
+        return (h(Host, { key: '54f2e341920d6bcd99533b723eee03a6f35927e5' }, h("div", { key: '3dc73c69e65bbef9c57406933933e5b377d16fa7', class: { 'switch': true, [`${theme}`]: true } }, h("label", { key: '449c3812e489af508a057966eef8ceab18233089', class: "switch__container", part: "switch-container", htmlFor: "tet-switch" }, h("input", Object.assign({ key: 'a526a2071de462760e14b0399fed18e5137cfea9', class: "switch__html-input", name: name, id: "tet-switch", type: "checkbox", disabled: disabled, checked: checked, onChange: this.handleChange() }, (accessibilityLabel ? { "aria-label": accessibilityLabel } : {}))), h("span", { key: '6072b9f08ad0ca968afe0882c1691d059221c19a', class: "switch__input" }, h("span", { key: 'ed0e4755fbe648cb6d0c6561e84d57b0998ab701', 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

@@ -113,10 +113,10 @@ export class TetTabContent {
         this.selectedId = id;
     }
     render() {
-        return (h(Host, { key: 'ebd8abcd5bdef67fe3f3cde1bede3fc4e426e471' }, h("div", { key: 'b75f1e7489dadb81686f273a569b2e938c5d959c', class: {
+        return (h(Host, { key: '9c8fd9fc3e5ad0a58cf1a0486b678f5a473f487b' }, h("div", { key: '15567c97e3fb8441e613719b8f715ee72dadf9c9', class: {
                 'tet-tab-content': true,
                 'use-visibility': this.useVisibility
-            } }, h("slot", { key: 'f5a148a30f48af12af4452860694129d1d5c5efd' }))));
+            } }, h("slot", { key: '0b97f6cdc6809f0baa6a30a374ef73fa38ee30b7' }))));
     }
     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

@@ -398,14 +398,14 @@ export class TetTabHeader {
         return {};
     }
     render() {
-        return (h(Host, { key: '253787a643afdcb85447757f71119e13df9de586' }, h("div", { key: '8609f08656a318afb6b9bb738a8a025e70b58626', class: {
+        return (h(Host, { key: '21b290eb4aa57edf47938a8873b48dfe07a0645d' }, h("div", { key: '880e2e4e019f8db3277f2d710c87ba20f55b755e', class: {
                 'tabs': true,
                 'tabs--segmented': this.segmented,
                 [this.position]: true,
                 [this.theme]: true,
                 [this.sizing]: true,
                 'no-underline': this.hideHeaderUnderline
-            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: '17952e5095c052492091d0b9965ecdf1c34c36d7', ref: (slot) => (this.tabContainer = slot) }))));
+            }, onMouseDown: this.onContainerMouseDown, style: this.getStyle(), ref: (ref) => (this.tabElement = ref) }, h("slot", { key: '42b7e7ef042892986690c4eff25c2b447c977a83', ref: (slot) => (this.tabContainer = slot) }))));
     }
     static get is() { return "tet-tab-header"; }
     static get encapsulation() { return "shadow"; }

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

@@ -19,12 +19,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: 'eb5263cd80bbe3419b2490fd92bce14d00604537' }, h("button", { key: '55ae17a5a7e51bdea204d6c8828969baf6546b44', class: {
+        return (h(Host, { key: 'cad24f22944b29db0e04a3fbcd6b1bb8185c4a06' }, h("button", { key: '86d0cb6e979c835f53fd88599ff9e962c791a80f', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString() }, this.tagTitle && h("p", { key: '184ff8f2cbd2b96d34a6ff1ba9b1e5f739ed8834', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '600c422682ce3e64321b13c638f09acb837146d7', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '920ee69edabb85fd1ec53eae072794de7a6672d5', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString() }, this.tagTitle && h("p", { key: '9e12e034421d7e0cbfc8af09a720c552f7cf8e7b', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '438368c57326b0dbc50c5eb56ac5273a4d3f2f20', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '45308f219e814f1ded388ebafccae52987d2deba', 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/tet-tag-group/tet-tag-group.js

@@ -20,7 +20,7 @@ export class TetTagGroup {
         this.theme = 'classic';
     }
     render() {
-        return h("div", { key: 'd815d584fbf26991101999bc76f0570cff5f1cba', class: "tags" }, this.tags.map(this.renderTag));
+        return h("div", { key: 'fbad853ff725a16c713d84a47f49c0e271ed5670', class: "tags" }, this.tags.map(this.renderTag));
     }
     static get is() { return "tet-tag-group"; }
     static get encapsulation() { return "shadow"; }

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

@@ -11,12 +11,12 @@ export class TetContainer {
         this.theme = 'classic';
     }
     render() {
-        return (h("div", { key: 'ecd4c3e5eef250a1e39175310a5149ebd9deec4f', class: {
+        return (h("div", { key: '5ac5ea13f4ab8a1e421f9db6b7c6d0ee6076ccf3', class: {
                 'container': true,
                 'container--highlightable': this.highlightable,
                 'container--selected': this.selected,
                 [`container--${this.theme}`]: this.theme !== 'classic',
-            }, part: "container" }, h("slot", { key: '7f41302fc153f800b00d2d3385389c7b77a25710' })));
+            }, part: "container" }, h("slot", { key: '08405376f22817c242f62d60e04b037512fe4d3d' })));
     }
     static get is() { return "tet-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -44,7 +44,7 @@ export class TetIcon {
         });
     }
     render() {
-        return (h("span", { key: 'd667a97653b84e81c1e6cce1e8f5e7740277ee47', class: "icon-wrapper" }, h("span", Object.assign({ key: '1890d5a0a248a52611934a579295dab0df85242c', class: { 'icon-container': true, 'default-color': this.useDefaultColor }, ref: (element) => (this.iconContainer = element) }, (this.accessibilityLabel
+        return (h("span", { key: 'cd9cd66d2e3eff97a1ff5fe05a105bb41be8365c', class: "icon-wrapper" }, h("span", Object.assign({ key: 'ad5810d1c13b09a135230b9456b98a28622af5d3', class: { 'icon-container': true, 'default-color': this.useDefaultColor }, ref: (element) => (this.iconContainer = element) }, (this.accessibilityLabel
             ? { "aria-label": this.accessibilityLabel, "role": "img" }
             : { "role": "presentation" })))));
     }

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: 'c4eb0ebb0538c4c6ef5a6c58f990fe6a1c48ba05', class: "loader" }, h("div", { key: 'f39dd443f0eb9f9261092db67397abe6bba6bb16', class: "loader-inner" })));
+        return (h("div", { key: '5bc1c107ddb9fa27687c50f04bd026fa8c51e780', class: "loader" }, h("div", { key: '94b6ee49537df49428197ee73b2bae16cd244850', 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: '1ae2491e0aee0e36fac62a3419139123f6975337', style: { width: this.width, height: this.height } }, h("div", { key: '09c17dee90e0f68c65e4b35edaeae9dbb6ddaee3', class: { 'dark-theme': this.darkTheme } }, h("div", { key: 'd525ab39d79db482457f465cbfcda1c50620d9b7', class: "placeholder", style: { height: this.height } }))));
+        return (h(Host, { key: '589a775dde38ff0e1a40eaa93c90cf237968d0dd', style: { width: this.width, height: this.height } }, h("div", { key: '9baef9be86ba642528a5e5471cd15396ba1e04cd', class: { 'dark-theme': this.darkTheme } }, h("div", { key: '72a277b7cbfd08f3d3b3b86bc4429f142faecb9f', class: "placeholder", style: { height: this.height } }))));
     }
     static get is() { return "tet-placeholder"; }
     static get encapsulation() { return "shadow"; }

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

@@ -47,13 +47,13 @@ export class TetSpinner {
         this.setForeignObjectAttributes();
     }
     render() {
-        return (h("div", { key: '8d8076262a60d0711e24660b81e2d6378f0d8820', ref: element => (this.spinner = element), class: {
+        return (h("div", { key: '64245b43d3c39e7491bddb7c9ab64812eb51695c', ref: element => (this.spinner = element), class: {
                 spinner: true,
                 [`${this.theme}-theme`]: true,
                 [`size--${this.size}`]: true,
                 [`spinner--${this.type}`]: true,
-            } }, h("svg", { key: '6847aaf2784b76d457fef661d0bbf66ff29928c1', viewBox: "0 0 40 40" }, h("clipPath", { key: '032fcadda676bbcb42d7e4a72ea7ee8298f7c090', id: "clip" }, h("path", { key: 'c29d091ee4d0c72f452c4ef5d06a11dd558d2b89', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
-              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: 'b6279c450d0c2e77263d5f20df8bc27352a917ea' }, h("div", { key: '7a71f81c00fe8ad9e12d5e14f4ef78a03fa7e583', class: "spinner__gradient" })))));
+            } }, h("svg", { key: 'f90d77e014562dc9f415cd9fd05f8d4ed41b613e', viewBox: "0 0 40 40" }, h("clipPath", { key: '4c6ed3c3f986b0325a08eca5542031bd8f6b8d89', id: "clip" }, h("path", { key: '799ca0735e39a56f17f91ffc694786b9bd7bca52', d: `M40 20C40 31.0457 31.0457 40 20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457
+              0 40 8.9543 40 20ZM6 20C6 27.732 12.268 34 20 34C27.732 34 34 27.732 34 20C34 12.268 27.732 6 20 6C12.268 6 6 12.268 6 20Z` })), h("foreignObject", { key: '0e6f432596310182f35357cb059c6fea9f126456' }, h("div", { key: 'dc1a66865a7036a7ffccad7c51b93f6cc2b31d9c', class: "spinner__gradient" })))));
     }
     static get is() { return "tet-spinner"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/misc/tet-label/tet-label.js

@@ -13,12 +13,12 @@ export class TetLabel {
         this.showIcon = false;
     }
     render() {
-        return (h(Host, { key: '1452e3a51864145bb5321e7c391ea4939bd665e3' }, h("div", { key: '4594d54f79a00c5a9b3248ccd7bb562eb19e6d98', class: {
+        return (h(Host, { key: 'ca8e3e987bcb57147cf9c6af38525d1d503de56a' }, h("div", { key: '63e2d66b0faa09f97cdd75dc99685e8a4cf9375d', class: {
                 label: true,
                 'label-active': this.active,
                 [`label-type-${this.type}`]: true,
                 [`theme-${this.theme}`]: true,
-            } }, this.labelTitle && h("p", { key: 'ba652bb25056fc13bc82363a2ab17c8901fd11b2', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'e7f23f035716c5c48b5d13cb75159cfda721bb75', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
+            } }, this.labelTitle && h("p", { key: '3b0aaa32ef279ae770cf9e5d34efcd665910dd31', class: "label-title" }, this.translateTitle ? t(this.labelTitle) : this.labelTitle), this.showIcon && h("tet-icon", { key: 'd6e1c7331c229bf7ff8c8650f8d4f843428ad731', class: "label-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/steppers/tet-business-round-stepper/tet-business-round-stepper.js

@@ -17,7 +17,7 @@ export class TetBusinessRoundStepper {
         return (h("div", { class: "business-stepper__step" }, h("div", { class: "business-stepper__icon", style: { 'background-color': stepData.color } }, h("tet-icon", { name: stepData.icon, style: { '--icon-color': stepData.iconColor } })), h("span", { class: "business-stepper__title" }, stepData.description), h("p", { class: "business-stepper__text" }, stepData.text)));
     }
     render() {
-        return (h("div", { key: '8f7decdbd32c28098b4df8c0e6264ed6b1e6c7bc', class: {
+        return (h("div", { key: 'b41285bb2186cc9b09f6bc9f9878b0d1868905ca', class: {
                 'business-stepper': true,
                 'business-stepper--uneven': this.layout === 'grid' && this.stepperData.length % 2 == 1,
                 [`business-stepper--${this.layout}`]: true,

package/dist/collection/components/basic/steppers/tet-round-stepper/tet-round-stepper.js

@@ -58,7 +58,7 @@ export class TetRoundStepper {
         this.calculateContainerWidth();
     }
     render() {
-        return (h(Host, { key: 'cc4ef8d5bf888be810fef5d05b5d03338aea52a3' }, h("div", { key: '1c50671f75570e8b126575b4b8283983b7f03a25', class: {
+        return (h(Host, { key: '06c75498d8fb49bac8e2b918a887304403b637cc' }, h("div", { key: '7765f56024935fcef5e7bd10ab7d2aadc6d89062', class: {
                 'round-stepper': true,
                 'column': this.forcedColumn,
                 'hide-icons': this.hideIcons,

package/dist/collection/components/basic/steppers/tet-stepper/tet-stepper.js

@@ -70,7 +70,7 @@ export class TetStepper {
         this.stepperData = [];
     }
     render() {
-        return (h(Host, { key: 'e188ec0aca9fc3d409c5525a63933ef50b1d0c81' }, h("ol", { key: '9f01e907291da98a537ad3b6c6e4869e3422a2ba', class: "stepper" }, this.stepperData.map(this.renderStep))));
+        return (h(Host, { key: '6ac0529a66f1cf0e2c8d2b107850b028cb50e2a2' }, h("ol", { key: 'c5403e7b83d047cead659f664947de3130c411e0', class: "stepper" }, this.stepperData.map(this.renderStep))));
     }
     static get is() { return "tet-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/basic/steppers/tet-stepper-v2/tet-stepper-v2.js

@@ -36,7 +36,7 @@ export class TetStepperV2 {
         this.theme = 'light';
     }
     render() {
-        return (h(Host, { key: 'ed9180254d4d95a9d201a828599257de601a6366' }, h("ol", { key: '993cffbb2ccf660601a3a5a19f770927ac96bcf5', class: {
+        return (h(Host, { key: '465f30f914aec7d3d9924f163c4fbddc2690a7f3' }, h("ol", { key: '698b427da7b02faab8ebd6ea6dc25dc7a44bba67', class: {
                 'stepper': true,
                 [this.theme]: true,
             } }, this.stepperData.map(this.renderStep.bind(this)))));

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-header/tet-datepicker-header.js

@@ -51,9 +51,9 @@ export class TetDatepickerHeader {
         this.internalDateChanged.emit(newDate);
     }
     render() {
-        return (h("div", { key: '530542bdfcecaca01d9c0421cc2ea9606517d738', class: "header" }, this.datepickerView !== 'year'
+        return (h("div", { key: 'd94cd02d7aad2f5bcd5d62660d35693cdbdc12cc', class: "header" }, this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.subtractDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-left" })))
-            : h("div", null), h("div", { key: 'e13354897c6f0f48fcd50f6a0dd01fe6155ca16e', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '22b1710d9ecb0c797d3ac65c45aa4a22541215bc', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
+            : h("div", null), h("div", { key: '3df19d8f3e2a3d0d33d94516b9a01833ca9fb999', class: "control-button", onClick: () => this.changeDatepickerView() }, this.getControlButtonDate(), h("tet-icon", { key: '086294c27c80c822882cc810375c97f9c0a8782b', class: "chevron-down", name: this.datepickerView === 'month' ? 'chevron-down' : 'chevron-up' })), this.datepickerView !== 'year'
             ? (h("div", { class: "icon-container", onClick: () => this.addDates() }, h("tet-icon", { class: "arrow-left", name: "arrow-right" })))
             : h("div", null)));
     }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-month-view/tet-datepicker-month-view.js

@@ -156,7 +156,7 @@ export class TetDatepickerMonthView {
         return date.toDateString() === this.currentDate.toDateString();
     }
     render() {
-        return (h(Host, { key: 'ec32a0e8364357c1a2d60981add1bc066f7fca94' }, h("div", { key: 'c20b7762e8655c7782593dc4ba97ec23330c49ca', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: 'aa0356e4d150af82ca046840bb49dee6171b7567', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
+        return (h(Host, { key: '19eec01f34fe896afb4ad31d713c180067841baf' }, h("div", { key: 'da89706e46c92b37320c7ac1cc9aee1872b438c7', class: "weekday-header" }, this.days.map((day) => h("div", { class: "day" }, day))), h("div", { key: '15aa740e8eb65ea17cbc48fc4dd7bb03af22d238', class: "month-dates" }, this.previousMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date.getDate()))), this.monthDates.map(date => h("div", { class: this.getDateContainerClasses(date), onPointerEnter: (event) => this.setInRangeHover(date, event), onPointerLeave: (event) => this.removeInRangeHover(event) }, h("div", { class: this.getDateClasses(date), onClick: () => this.handleDateSelection(date) }, date.getDate()))), this.nextMonthPreviewDates.map((date) => h("div", { class: "date-container" }, h("div", { class: "preview-date" }, date))))));
     }
     static get is() { return "tet-datepicker-month-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-multi-year-view/tet-datepicker-multi-year-view.js

@@ -29,7 +29,7 @@ export class TetDatepickerMultiYearView {
         this.years = this.getYears(this.internalDate);
     }
     render() {
-        return (h("div", { key: '2805aeffe35c3b776790f1ccf01b8bec5a554002', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
+        return (h("div", { key: '283bf3b24c73fae850ada2fb5fb78ba06a2b7d73', class: "container" }, this.years.map((year) => h("div", { class: this.getYearClasses(year), onClick: () => this.handleYearSelection(year) }, year))));
     }
     static get is() { return "tet-datepicker-multi-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/partials/tet-datepicker-year-view/tet-datepicker-year-view.js

@@ -34,7 +34,7 @@ export class TetDatepickerYearView {
         return this.todayDate.getMonth() === monthIndex;
     }
     render() {
-        return (h("div", { key: '8e17b1ac95412a24efe379b25507b158579100e4', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
+        return (h("div", { key: 'be114aa7e7714909649fa4a65dcbcf094f8c551a', class: "container" }, this.months.map((month, index) => h("div", { class: "month-container" }, h("div", { class: this.getMonthClasses(index), onClick: () => this.handleMonthSelection(index) }, month)))));
     }
     static get is() { return "tet-datepicker-year-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-datepicker/tet-datepicker.js

@@ -94,10 +94,10 @@ export class TetDatepicker {
         this.rangeDatesChanged.emit(newDates);
     }
     render() {
-        return (h("div", { key: 'ee9f49247fe18be3c9e1b52136d3579e47676ac1', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '1c8fd86fc43a5a26feb0c0e0a255932f61e8b08e', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: '8108219888119bce3383e2cff4de35ec087288d5', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
-            h("tet-datepicker-month-view", { key: 'fbd9b6aafd623bc9bae60baa09ff1f79dc97af4c', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
-            h("tet-datepicker-multi-year-view", { key: 'fe7b134673a014cc02cc4f25edf333c81d98f761', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
-            h("tet-datepicker-year-view", { key: 'faef59d32abc74e6bf9d8ee65a5642f817d008d8', selectedDate: this.date, internalDate: this.internalDate }))));
+        return (h("div", { key: '4db54c92023dc64e8e50a9321bef3216834eeedf', class: this.getOverlayClasses(), onClick: this.handleDatepickerClose }, h("div", { key: '4ba2ae5407efdbae479aa68c04883e104ef46bfa', class: "container", ref: (el) => this.datepickerContainer = el }, h("tet-datepicker-header", { key: 'ad75479e83bce286c1e60aa986a5e93413ca83ae', selectedDate: this.date, internalDate: this.internalDate, locale: this.locale, datepickerView: this.datepickerView }), this.datepickerView === 'month' &&
+            h("tet-datepicker-month-view", { key: 'df90eccaa173a1fa4063c1703faf8593666ce966', selectedDate: this.date, internalDate: this.internalDate, rangePickerMode: this.rangePickerMode, rangeDates: this.rangeDates }), this.datepickerView === 'multi-year' &&
+            h("tet-datepicker-multi-year-view", { key: '3e97b686021e2bcf43a2203d0cac832611a27bbd', selectedDate: this.date, internalDate: this.internalDate }), this.datepickerView === 'year' &&
+            h("tet-datepicker-year-view", { key: '5982b432e96740d267d8f61d64324d6a35b08f82', selectedDate: this.date, internalDate: this.internalDate }))));
     }
     static get is() { return "tet-datepicker"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-dropdown/test/tet-dropdown.spec.js

@@ -30,16 +30,18 @@ describe('tet-dropdown', () => {
             <div class="dropdown light">
               <div class="dropdown__wrapper">
                 <label htmlfor="dropdown-button" class="dropdown__label">Label</label>
-                <button
-                  id="dropdown-button"
-                  class="dropdown__button"
-                  aria-haspopup="listbox"
-                  aria-controls="dropdown-options">
-                  <span class="dropdown__button__selected">
-                    Select an option
-                  </span>
-                  <tet-icon class="dropdown__chevron-icon dropdown__icon" name="chevron-down"></tet-icon>
-                </button>
+                  <div class="dropdown__button-wrapper">
+                    <button
+                    id="dropdown-button"
+                    class="dropdown__button"
+                    aria-haspopup="listbox"
+                    aria-controls="dropdown-options">
+                      <span class="dropdown__button__selected">
+                        Select an option
+                      </span>
+                      <tet-icon class="dropdown__chevron-icon dropdown__icon" name="chevron-down"></tet-icon>
+                  </button>
+                </div>
               </div>
               <ul
                 id="dropdown-options"
@@ -47,27 +49,29 @@ describe('tet-dropdown', () => {
                 role="listbox"
                 tabindex="-1"
                 aria-labelledby="dropdown-button">
-                <li
-                  class="dropdown__option"
-                  role="option"
-                  tabindex="0"
-                  data-value="0">
-                  Apple
-                </li>
-                <li
-                  class="dropdown__option"
-                  role="option"
-                  tabindex="0"
-                  data-value="0">
-                  Banana
-                </li>
-                <li
-                  class="dropdown__option"
-                  role="option"
-                  tabindex="0"
-                  data-value="0">
-                  Pineapple
-                </li>
+                <div class="dropdown__options-wrapper">
+                  <li
+                    class="dropdown__option"
+                    role="option"
+                    tabindex="0"
+                    data-value="0">
+                    Apple
+                  </li>
+                  <li
+                    class="dropdown__option"
+                    role="option"
+                    tabindex="0"
+                    data-value="0">
+                    Banana
+                  </li>
+                  <li
+                    class="dropdown__option"
+                    role="option"
+                    tabindex="0"
+                    data-value="0">
+                    Pineapple
+                  </li>
+                  </div>
               </ul>
             </div>
           </mock:shadow-root>

package/dist/collection/components/simple/inputs/tet-dropdown/tet-dropdown.css

@@ -352,6 +352,7 @@
 
 :host {
   --border-radius: 0.625rem;
+  --focus-border-radius: 0.875rem;
   --option-padding: 0.5rem 0.75rem;
   --button-padding: 0.625rem 0.75rem;
   --options-box-shadow: 0 0.0625rem 0.125rem rgba(rgb(10, 11, 13), 0.05),
@@ -367,6 +368,7 @@
   --dropdown-background-color: rgb(255, 255, 255);
   --hover-button-background-color: rgba(88, 99, 116, 0.08);
   --focus-button-background-color: rgba(88, 99, 116, 0.16);
+  --keyboard-focus-outline-color: var(--tc-blue-40);
   display: block;
   position: relative;
 }
@@ -382,6 +384,7 @@
   --dropdown-background-color: rgb(22, 25, 29);
   --hover-button-background-color: rgba(153, 160, 174, 0.12);
   --focus-button-background-color: rgba(153, 160, 174, 0.28);
+  --keyboard-focus-outline-color: var(--tc-blue-40-dark);
 }
 .dropdown.mint {
   --option-accent-color: rgb(26, 213, 219);
@@ -423,16 +426,16 @@
   --icon-color: var(--text-color);
 }
 .dropdown__button {
-  display: inline-flex;
+  display: flex;
   height: 2.75rem;
-  cursor: pointer;
-  position: relative;
+  width: 100%;
   align-items: center;
   justify-content: space-between;
   padding: var(--button-padding);
   border-radius: var(--border-radius);
-  border: 0.0625rem solid var(--border-color);
   background-color: var(--button-background-color);
+  border: 0.0625rem solid var(--border-color);
+  cursor: pointer;
 }
 .dropdown__button:hover, .dropdown__button:focus {
   outline: none;
@@ -440,6 +443,13 @@
   border-color: var(--hover-border-color);
   background-color: var(--hover-button-background-color);
 }
+.dropdown__button:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--keyboard-focus-outline-color);
+  background-color: var(--button-background-color);
+}
 .dropdown__button__selected {
   padding-right: 0.75rem;
   text-overflow: ellipsis;
@@ -454,6 +464,13 @@
   margin-left: 0.5rem;
   padding-right: 0;
 }
+.dropdown__button-wrapper {
+  display: inline-flex;
+  padding: 0.125rem 0.125rem 0 0.125rem;
+  border: 0.125rem solid transparent;
+  border-bottom: none;
+  border-radius: var(--focus-border-radius) var(--focus-border-radius) 0 0;
+}
 .dropdown__button__labelright {
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   margin-left: auto;
@@ -462,14 +479,21 @@
 .dropdown__option {
   display: flex;
   align-items: center;
+  border-radius: 0.125rem;
   cursor: pointer;
   padding: var(--option-padding);
-  background-color: var(--dropdown-background-color);
+  background-color: transparent;
 }
 .dropdown__option:hover, .dropdown__option:focus {
   outline: none;
   background-color: var(--hover-button-background-color);
 }
+.dropdown__option:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+  background-color: transparent;
+}
 .dropdown__option img {
   width: 2.625rem;
   height: 1.25rem;
@@ -517,6 +541,14 @@
   position: absolute;
   top: 100%;
   width: 100%;
+  display: none;
+  flex-direction: column;
+  border: 0.125rem solid transparent;
+  border-top: none;
+  padding: 0 0.125rem 0.125rem 0.125rem;
+  border-radius: 0 0 var(--focus-border-radius) var(--focus-border-radius);
+}
+.dropdown__options-wrapper {
   display: none;
   flex-direction: column;
   padding: 0.625rem 0;
@@ -526,11 +558,18 @@
   background-color: var(--dropdown-background-color);
   box-shadow: var(--options-box-shadow);
 }
-.dropdown--open .dropdown__options {
+.dropdown--open .dropdown__options-wrapper, .dropdown--open .dropdown__options {
   display: flex;
 }
 .dropdown--open .dropdown__button {
   border-radius: var(--border-radius) var(--border-radius) 0 0;
-  border-bottom-color: transparent;
-  background-color: var(--focus-button-background-color);
+  border-bottom: 0.0625rem solid transparent;
+  background-color: var(--hover-button-background-color);
+  outline: none;
+}
+.dropdown--open.focus-visible .dropdown__options {
+  border-color: var(--keyboard-focus-outline-color);
+}
+.dropdown--open.focus-visible .dropdown__button-wrapper {
+  border-color: var(--keyboard-focus-outline-color);
 }