@tet/tet-components 1.4.71-testing → 1.4.72-production

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

@@ -449,6 +449,9 @@
   outline-offset: var(--radio-container-outline-offset);
   border-radius: 0.125rem;
 }
+.radio__container--focus-style .radio__html-input:focus ~ .radio__input {
+  box-shadow: none;
+}
 .radio__container .radio__input--sm.radio__input--has-label-prop, .radio__container .radio__input--sm.radio__input-background--has-label-prop,
 .radio__container .radio__input-background--sm.radio__input--has-label-prop,
 .radio__container .radio__input-background--sm.radio__input-background--has-label-prop {

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

@@ -55,8 +55,10 @@ export class TetRadio {
         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 + '"]');
+            // Uncheck radios with the same name within the current root (document or shadowRoot).
+            const root = this.radioElement.getRootNode();
+            const radios = Array.from(root.querySelectorAll('tet-radio'));
+            const group = radios.filter((radio) => radio.name === this.name);
             group.forEach((el) => {
                 if (el !== this.radioElement && el.checked) {
                     el.setChecked(false);
@@ -97,24 +99,24 @@ export class TetRadio {
     }
     render() {
         const { id, disabled, value, checked, name, label, accessibilityLabel, error, inputAutofocus, iconName, labelFont, alignCenter, hasSlotIcon, unavailable, iconType } = this;
-        return (h(Host, { key: '988a7ffe22a06095f46595d8a1aa9705dbbce325' }, h("div", { key: '6db98ce541ea56d05315447485fbe2e5d19ffd1e', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: '8b21493ad5994b127b7b1bf8e6fda7b59e107639', class: {
+        return (h(Host, { key: '7fc70da5821e75d7cda11c9aaa161ce8ce436ffe' }, h("div", { key: 'b8e1d1d74846d01290c284a86795fd4dcbc02eda', class: { radio: true, [`radio-${this.theme}-theme`]: true } }, h("label", { key: 'f3831e14d73c9dd543dfe6465227fa27fa54e5e7', class: {
                 'radio__container': true,
                 'radio__container--focus-style': this.focusStyleOnContainer,
                 'radio__container--align-center': alignCenter,
-            }, htmlFor: id }, h("input", { key: 'e574a1d41ad1152c4919baaef6693d0587ee5a79', class: {
+            }, htmlFor: id }, h("input", { key: '79532719f5bc736c86475b4a0a62bb711cc00b84', class: {
                 "radio__html-input": true,
                 'radio__html-input--unavailable': unavailable,
-            }, id: id, name: name, type: "radio", value: value, disabled: disabled || unavailable, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: '11d3b992b1cd1f4f3e6f7e2c08f19ea8d798bf8e', class: {
+            }, id: id, name: name, type: "radio", value: value, disabled: disabled || unavailable, checked: checked, onChange: this.handleInputChange, autofocus: inputAutofocus, ...(accessibilityLabel ? { 'aria-label': accessibilityLabel } : {}) }), h("span", { key: 'fbc152d0dd0aac5c4d64e6d86c150a84513d10cb', class: {
                 'radio__input-background': true,
                 'radio__input-background--has-label-prop': !!label,
                 ...(labelFont ? { [`radio__input-background--${labelFont}`]: true } : {}),
-            } }), h("span", { key: '011103ad48154490a3612564f9c157256b9fba73', class: {
+            } }), h("span", { key: 'c6468ba8bc970fe9759217b1c5d6628a04339503', 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: '05dd8ca53ad9d3e85759dd2f069173e9f399b504', class: {
+            } }), h("div", { key: '2c00610fed199aa4f8838e9350d8d926f02c04b9', 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: iconType, class: {
@@ -125,11 +127,11 @@ export class TetRadio {
                 '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: '2a3636c3dcad06dec662446bad7855eff0ae2d28', class: {
+            } }, h("slot", { name: "label-icon" }))), h("span", { key: 'd43d825f1deb1d437f80c1b550868f8212e9f0cc', class: {
                 'radio__label': true,
                 'radio__label--has-slot-icon': hasSlotIcon,
                 ...(labelFont ? { [`radio__label--${labelFont}`]: true } : {}),
-            }, innerHTML: label }, h("slot", { key: '1086b1494c3adc44b67b73972599ad53d7c6db10' })))))));
+            }, innerHTML: label }, h("slot", { key: '908d1332bf737dde2fed7628cfd29b08b478c34c' })))))));
     }
     static get is() { return "tet-radio"; }
     static get encapsulation() { return "scoped"; }

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

@@ -546,6 +546,9 @@
   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 {
+  width: 100%;
+}
 .switch__label--sm {
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   line-height: 1.5rem;

package/dist/collection/components/simple/inputs/tet-expandable-input/tet-expandable-input.css

@@ -371,8 +371,9 @@
   --expandable-input-mobile-collapsed-icon-left-padding: 0.625rem;
   --expandable-input-close-button-text-color: var(--tc-text-primary);
   --expandable-input-desktop-collapsed-border-color: var(--tc-border-quaternary);
-  --expandable-input-desktop-collapsed-background-color: var(--tc-layer-secondary);
-  --expandable-input-desktop-collapsed-background-hover-color: var(--tc-menu-item-hover);
+  --expandable-input-desktop-collapsed-background-color: var(--tc-navigation-button-default);
+  --expandable-input-interactive-item-background-hover-color: var(--tc-navigation-button-hover);
+  --expandable-input-interactive-item-background-pressed-color: var(--tc-navigation-button-pressed);
   --expandable-input-icon-secondary-color: var(--tc-icon-secondary);
   --expandable-input-mobile-input-default-state-text-color: var(--tc-text-secondary);
 }
@@ -394,8 +395,9 @@
 .container.dark {
   --expandable-input-close-button-text-color: var(--tc-text-primary-dark);
   --expandable-input-desktop-collapsed-border-color: var(--tc-border-quaternary-dark);
-  --expandable-input-desktop-collapsed-background-color: var(--tc-layer-secondary-dark);
-  --expandable-input-desktop-collapsed-background-hover-color: var(--tc-menu-item-hover-dark);
+  --expandable-input-desktop-collapsed-background-color: var(--tc-navigation-button-default-dark);
+  --expandable-input-interactive-item-background-hover-color: var(--tc-navigation-button-hover-dark);
+  --expandable-input-interactive-item-background-pressed-color: var(--tc-navigation-button-pressed-dark);
   --expandable-input-icon-secondary-color: var(--tc-icon-secondary-dark);
   --expandable-input-mobile-input-default-state-text-color: var(--tc-text-secondary-dark);
 }
@@ -410,6 +412,12 @@
   color: var(--expandable-input-close-button-text-color);
   border-radius: 0.625rem;
 }
+.container .input-close:hover {
+  background-color: var(--expandable-input-interactive-item-background-hover-color);
+}
+.container .input-close:active {
+  background-color: var(--expandable-input-interactive-item-background-pressed-color);
+}
 .container .input-close:focus-visible {
   outline: 0.125rem solid var(--tc-blue-40);
   outline-offset: -0.125remrem;
@@ -430,6 +438,15 @@
   width: 18.375rem;
   gap: 0.5rem;
 }
+.container tet-input .icon-right {
+  border-radius: 50%;
+}
+.container tet-input .icon-right:hover {
+  background-color: var(--expandable-input-interactive-item-background-hover-color);
+}
+.container tet-input .icon-right:active {
+  background-color: var(--expandable-input-interactive-item-background-pressed-color);
+}
 .container.mobile.expanded tet-input:not(:focus-within) .icon.icon-right,
 .container.mobile.expanded tet-input:not(:focus-within) .icon.icon-left {
   --input-icon-color: var(--expandable-input-icon-secondary-color);
@@ -444,7 +461,7 @@
 .container.mobile:not(.expanded) .tet-input__base.sc-tet-input {
   --input-border-color: transparent;
   --input-background-color: transparent;
-  --input-hover-background-color: transparent;
+  --input-hover-background-color: var(--expandable-input-interactive-item-background-hover-color);
   --input-border-disabled: transparent;
   --input-disabled-background-color: transparent;
 }
@@ -454,8 +471,7 @@
 .container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input {
   --input-border-color: var(--expandable-input-desktop-collapsed-border-color);
   --input-background-color: var(--expandable-input-desktop-collapsed-background-color);
-  --input-hover-background-color: var(--expandable-input-desktop-collapsed-background-hover-color);
-  transition: background-color 300ms ease-in-out, border 300ms ease-in-out;
+  --input-hover-background-color: var(--expandable-input-interactive-item-background-hover-color);
 }
 .container.desktop:not(.expanded) tet-input .tet-input__base.sc-tet-input:not([disabled], .error):hover {
   border-color: transparent;

package/dist/collection/components/simple/lists/tet-text-list/tet-text-list.css

@@ -9781,6 +9781,7 @@
   --tc-text-black-permanent-dark: var(--tc-grey-minus-10-dark);
   --tc-text-dark-grey-permanent-dark: var(--tc-grey-30-dark);
   --tc-text-yellow-permanent-dark: var(--tc-yellow-40-dark);
+  --tc-text-adaptive-yellow-to-black-dark: var(--tc-grey-minus-10-dark);
   --tc-text-blue-grey-dark: var(--tc-grey-50-dark);
   --tc-background-primary-dark: var(--tc-grey-00-dark);
   --tc-background-secondary-dark: var(--tc-grey-10-dark);
@@ -9954,6 +9955,14 @@
   --tc-menu-item-pressed-dark: rgba(236, 237, 238, 0.24);
   --tc-menu-item-active-dark: rgba(29, 50, 84, 1);
   --tc-menu-item-badge-dark: var(--tc-grey-40-dark);
+  --tc-navigation-menu-item-hover-dark: var(--tc-brown-80-dark);
+  --tc-navigation-menu-item-pressed-dark: var(--tc-brown-70-dark);
+  --tc-navigation-menu-item-active-dark: var(--tc-brown-60-dark);
+  --tc-navigation-menu-item-tag-dark: var(--tc-layer-permanent-yellow-dark);
+  --tc-navigation-button-default-dark: var(--tc-layer-secondary-dark);
+  --tc-navigation-button-hover-dark: var(--tc-brown-80-dark);
+  --tc-navigation-button-pressed-dark: var(--tc-brown-70-dark);
+  --tc-navigation-button-active-dark: var(--tc-brown-60-dark);
   --tc-menu-item-yellow-background-default-dark: var(--tc-yellow-80-dark);
   --tc-menu-item-yellow-background-hover-dark: var(--tc-yellow-70-dark);
   --tc-menu-item-yellow-background-pressed-dark: var(--tc-yellow-60-dark);
@@ -10002,6 +10011,14 @@
   --tc-theme-switcher-border-dark-theme-selected-dark: rgb(255, 255, 255);
   --tc-theme-switcher-icon-light-theme-dark: var(--tc-grey-minus-10-dark);
   --tc-theme-switcher-icon-dark-theme-dark: rgb(255, 255, 255);
+  --tc-product-card-menu-default-dark: var(--tc-layer-permanent-black-dark);
+  --tc-product-card-menu-hover-dark: var(--tc-brown-80-dark);
+  --tc-product-card-menu-pressed-dark: var(--tc-brown-60-dark);
+  --tc-product-card-menu-active-dark: var(--tc-brown-50-dark);
+  --tc-product-card-menu-border-default-dark: var(--tc-border-quaternary-dark);
+  --tc-product-card-menu-border-hover-dark: var(--tc-border-tertiary-dark);
+  --tc-product-card-menu-border-pressed-dark: var(--tc-border-secondary-dark);
+  --tc-product-card-menu-border-active-dark: var(--tc-brown-30-dark);
   --tc-checkbox-default-dark: rgb(0, 0, 0);
   --tc-checkbox-hover-dark: rgba(236, 237, 238, 0.16);
   --tc-checkbox-pressed-dark: rgba(236, 237, 238, 0.26);
@@ -10155,6 +10172,7 @@
   --tc-text-black-permanent: var(--tc-grey-110);
   --tc-text-dark-grey-permanent: var(--tc-grey-70);
   --tc-text-yellow-permanent: var(--tc-yellow-40);
+  --tc-text-adaptive-yellow-to-black: var(--tc-yellow-40);
   --tc-text-blue-grey: var(--tc-grey-50);
   --tc-background-primary: var(--tc-grey-00);
   --tc-background-secondary: var(--tc-grey-10);
@@ -10328,6 +10346,14 @@
   --tc-menu-item-pressed: rgba(38, 41, 44, 0.12);
   --tc-menu-item-active: var(--tc-blue-00);
   --tc-menu-item-badge: var(--tc-yellow-20);
+  --tc-navigation-menu-item-hover: var(--tc-yellow-00);
+  --tc-navigation-menu-item-pressed: var(--tc-yellow-10);
+  --tc-navigation-menu-item-active: var(--tc-yellow-20);
+  --tc-navigation-menu-item-tag: var(--tc-layer-permanent-yellow);
+  --tc-navigation-button-default: var(--tc-layer-secondary);
+  --tc-navigation-button-hover: var(--tc-yellow-00);
+  --tc-navigation-button-pressed: var(--tc-yellow-10);
+  --tc-navigation-button-active: var(--tc-yellow-20);
   --tc-menu-item-yellow-background-default: var(--tc-yellow-00);
   --tc-menu-item-yellow-background-hover: var(--tc-yellow-10);
   --tc-menu-item-yellow-background-pressed: var(--tc-yellow-20);
@@ -10376,6 +10402,14 @@
   --tc-theme-switcher-border-dark-theme-selected: var(--tc-grey-110);
   --tc-theme-switcher-icon-light-theme: var(--tc-grey-110);
   --tc-theme-switcher-icon-dark-theme: rgb(255, 255, 255);
+  --tc-product-card-menu-default: var(--tc-layer-permanent-white);
+  --tc-product-card-menu-hover: var(--tc-yellow-10);
+  --tc-product-card-menu-pressed: var(--tc-yellow-20);
+  --tc-product-card-menu-active: var(--tc-yellow-40);
+  --tc-product-card-menu-border-default: var(--tc-border-quaternary);
+  --tc-product-card-menu-border-hover: var(--tc-border-tertiary);
+  --tc-product-card-menu-border-pressed: var(--tc-border-secondary);
+  --tc-product-card-menu-border-active: var(--tc-yellow-60);
   --tc-checkbox-default: rgb(255, 255, 255);
   --tc-checkbox-hover: rgba(38, 41, 44, 0.06);
   --tc-checkbox-pressed: rgba(38, 41, 44, 0.12);