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

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

@@ -194,7 +194,7 @@ export class TetDropdown {
                 'dropdown__option': true,
                 'dropdown__option--multiple': true,
                 'dropdown__option--selected': selected
-            }, role: "option", tabindex: "0", "aria-checked": selected, "data-value": value, onClick: handleClick, onKeyDown: handleKeyDown }, h("tet-checkbox", { checked: selected, theme: this.theme, tabindex: -1 }), label));
+            }, role: "option", tabindex: "0", "aria-checked": selected, "data-value": value, onClick: handleClick, onKeyDown: handleKeyDown }, h("tet-checkbox", { checked: selected, theme: this.theme, tabIndex: -1 }), label));
     }
     /**
      * Handles keyboard input for an option item.
@@ -359,7 +359,7 @@ export class TetDropdown {
     }
     render() {
         const { theme, isOpen, isKeyboardFocus } = this;
-        return (h(Host, { key: '305032965ef0e379b79a0c2990a8975fd18cd35f' }, h("div", { key: '02eea1e67fc3412ea5a8366fb16d59ef2a841be5', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
+        return (h(Host, { key: '562e18e6d7541ae72f276140592f9f1e86bf1dfb' }, h("div", { key: '5bd4df5ed2992ec894cfe6b1b838e0d59d6503c9', class: { 'dropdown': true, 'dropdown--open': isOpen, 'focus-visible': isKeyboardFocus && isOpen, [`${theme}`]: true } }, this.renderButton(), this.renderOptions())));
     }
     static get is() { return "tet-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/inputs/tet-range-slider/tet-range-slider.js

@@ -67,7 +67,27 @@ export class TetRangeSlider {
          *  Limits the input range to the defined `minValue` and `maxValue` values when using keyboard to increment values.
          * @param {KeyboardEvent} event
          */
-        this.onInputKeyDown = (event) => {
+        this.onInputKeyDown = (event, ignoreHorizontalArrows = false) => {
+            const incrementKeyCodes = ['ArrowUp', 'ArrowRight'];
+            const decrementKeyCodes = ['ArrowDown', 'ArrowLeft'];
+            if (ignoreHorizontalArrows) {
+                incrementKeyCodes.pop();
+                decrementKeyCodes.pop();
+            }
+            if (incrementKeyCodes.includes(event.code)) {
+                if (this.lockToDataPoint) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    this.onControlNextClick();
+                }
+            }
+            if (decrementKeyCodes.includes(event.code)) {
+                if (this.lockToDataPoint) {
+                    event.preventDefault();
+                    event.stopImmediatePropagation();
+                    this.onControlPreviousClick();
+                }
+            }
             if (event.code === 'ArrowUp' && this.currentValue >= this.inputMaxValue) {
                 event.preventDefault();
                 event.stopImmediatePropagation();
@@ -689,31 +709,31 @@ export class TetRangeSlider {
         this.updateProgress();
     }
     render() {
-        return (h(Host, { key: '52af8dbdb55c7e921fa0e2306178a947b5e6304c' }, h("div", { key: '5074471aa06625ae6bf32994539fe4ba141039e4', class: {
+        return (h(Host, { key: '0615f9c0a481364d73e03b40afdb0996e20199de' }, h("div", { key: 'b54f63b9c21d248e25bd900dc87ae794fd267e15', class: {
                 'range-slider': true,
                 [`range-slider--${this.containerSize}`]: true,
                 [`range-slider--${this.type}`]: true,
                 'range-slider--no-controls': !this.withControls,
                 'range-slider--no-input': !this.withInput,
                 [this.theme]: true,
-            } }, h("div", { key: '3a4dbf9e2658be4ccd1992c42ffacb90ee651342', class: {
+            } }, h("div", { key: '7931ef9159fae1df45a9d8cc26fd8a82d38b0ad8', class: {
                 'range-slider__input-container': true,
                 'hidden': !this.withInput,
-            } }, h("tet-input", Object.assign({ key: '29704c985a33b309bee79608fd4f0c8f37ec262e', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: this.onInputKeyDown, accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: 'ee85a4424e5447ecabb29fdcd81491070e3d1ef2', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '5a11f5af863989ea5eeb49bb76e02572655035fd', theme: this.theme, iconMode: true, class: {
+            } }, h("tet-input", Object.assign({ key: '2def82325741ad959250f7a9ced527971be61ae6', "input-class": "range-slider__input", "input-type": "number", "input-value": this.currentValue, ref: inputEl => (this.inputRef = inputEl), theme: this.theme, onInput: this.onInputChange, onKeyDown: (event) => this.onInputKeyDown(event, true), accessibilityLabel: this.numberInputAccessibilityLabel }, (this.containerSize !== 'large' ? { inputTabindex: 3 } : {})))), h("div", { key: '9643b1d98baffb7c59660bd381df519c3bf184c7', class: "range-slider__container" }, h("tet-button", Object.assign({ key: '3b63c20563f816cf8c5bc3fafa3fa6b421dda259', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--left': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: 'c7be06bc2e9d468fbe9eb07995e6ab346cdd76b4', name: "remove", class: "range-slider__control--icon" })), h("div", { key: 'c827ababceaef92a842b27d26f0a5b8b5bcb4cab', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: '8ce6676b8110a901b356a11487b84cc4ee59d632', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: 'ac5053a9ed6b6b2e50e2572a1880c533d43c7f4f', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: 'd7e5ca3d9d1cea51f204a56414e387dba46f5e7b', class: "range-slider__track range-slider__track--background" }), h("div", { key: '2a308ea9fd72080d7b47e003d341c6fc521b1404', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'ddf626b67e641ef8b30cc7b3e6cf975e2c052694', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: 'fe7692bf08ee1d95e473e7d913bea28e0a8cf3fc', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
+            }, clickCallback: this.onControlPreviousClick }, (this.reduceButtonAccessibilityLabel ? { accessibilityLabel: this.reduceButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 2 } : {})), h("tet-icon", { key: '98293ad544e2b12cae8e67043563dc34be620703', name: "remove", class: "range-slider__control--icon" })), h("div", { key: '00c43247907c73a0f43b3880a1dccd76d956d996', onTouchStart: this.onContainerTouchStart, onTouchEnd: this.onContainerTouchEnd, onMouseDown: this.onContainerMouseDown, onScroll: this.onContainerScroll, ref: sliderContainerEl => (this.sliderContainerRef = sliderContainerEl), class: "range-slider__slider-container", draggable: false }, h("div", { key: 'edc62952f600a76cc231f2677c16fffa7854efcf', class: "range-slider__slider-wrapper" }, h("input", Object.assign({ key: '8b5374404d68fc4553eb30d41ef3798923f634cc', ref: sliderEl => (this.sliderRef = sliderEl), type: "range", min: this.minValue, max: this.maxValue, step: this.step, value: this.defaultValue, list: "steplist", id: "rangeInput", onInput: this.onSliderInput, onChange: this.onSliderChange, onPointerDown: this.onSliderPointerDown, onPointerUp: this.onSliderPointerUp, onKeyDown: this.onInputKeyDown, class: "range-slider__slider" }, (this.sliderInputAccessibilityLabel ? { "aria-label": this.sliderInputAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 1 } : {})))), h("div", { key: '30adddd9278226fca872687cfce7290d9c589dc3', class: "range-slider__track range-slider__track--background" }), h("div", { key: '4fdfb7e8be13e0cdd928cfa924545c8d7c7f964e', ref: progressTrackEl => (this.progressTrackRef = progressTrackEl), class: "range-slider__track range-slider__track--progress" }), h("div", { key: 'e669cbbc6f79ad641b6776f124d0295ecec1ab8a', ref: tickContainerEl => (this.tickContainerRef = tickContainerEl), class: "range-slider__tick-container" }), h("div", { key: '0d180d05c63961668caec099d26d5b6beafbc139', ref: dataLabelEl => (this.dataLabelRef = dataLabelEl), class: {
                 'range-slider__data-label-container': true,
                 'hidden': this.type === 'secondary' && this.containerSize === 'small',
-            } })), h("div", { key: 'b9db111157d714ee9791db18c6882a12c3fbc5f3', class: {
+            } })), h("div", { key: '9a4396bc8f55d5fa5c9528ca2238a4a9853eabc2', class: {
                 'range-slider__current-step-container': true,
                 'hidden': !this.withCurrentStepCounter,
-            } }, h("div", { key: '4c5b48d5ddffa6b8f544493417a165a3838b4dc8', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: '53a35748de8014e98c7852bed551ac278784f4f5', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '1277c19ac4e7dcc4a24c592e21fec25026f169b0', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '8a798655cfc0d467a9034654d2ca3e5a4bb971b8', theme: this.theme, iconMode: true, class: {
+            } }, h("div", { key: '37742f71f893931a3097dc2683672967ebafd174', class: "range-slider__current-step", "aria-live": "polite" }, this.dataSet.indexOf(this.getClosestOverrideDataPoint()) + 1, "/", this.dataPoints.length)), h("div", { key: 'fe1b22a45317bf1136e88243aa02cd708b9ec9a9', ref: toolbarHandleEl => (this.tooltipHandleRef = toolbarHandleEl), class: "range-slider__tooltip-handle" }, h("div", { key: '8a196fafafff98f766dec35b656f031f83e1d343', class: "range-slider__tooltip translation-none", style: { [`--tooltip-offset`]: `${this.tooltipOffset}rem` }, "aria-live": "polite" }, this.getTooltipValue())), h("tet-button", Object.assign({ key: '9ae38df1bc6f358030a0707d298314ebf0d02495', theme: this.theme, iconMode: true, class: {
                 'range-slider__control': true,
                 'range-slider__control--right': true,
                 'hidden': !this.withControls,
-            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '5d80fe8d67dca6ba354fbcf49e1e27441a6406d1', name: "add", class: "range-slider__control--icon" }))))));
+            }, clickCallback: this.onControlNextClick }, (this.addButtonAccessibilityLabel ? { accessibilityLabel: this.addButtonAccessibilityLabel } : {}), (this.containerSize !== 'large' ? { tabindex: 4 } : {})), h("tet-icon", { key: '527446e5fee9644bd7a3fd99f1672c3ec7ed71e7', name: "add", class: "range-slider__control--icon" }))))));
     }
     static get is() { return "tet-range-slider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -5363,7 +5363,7 @@
   /**
   * Colors
   */
-  --tc-grey-100-dark: rgb(255, 255, 255);
+  --tc-grey-100-dark: rgba(251, 251, 251, 1);
   --tc-grey-90-dark: rgba(247, 247, 247, 1);
   --tc-grey-80-dark: rgba(235, 237, 239, 1);
   --tc-grey-70-dark: rgba(215, 219, 224, 1);
@@ -5428,12 +5428,13 @@
   --tc-background-secondary-dark: var(--tc-grey-10-dark);
   --tc-background-tertiary-dark: var(--tc-grey-20-dark);
   --tc-background-quaternary-dark: var(--tc-grey-30-dark);
+  --tc-background-white-black-dark: rgb(0, 0, 0);
   --tc-layer-primary-dark: var(--tc-grey-00-dark);
   --tc-layer-primary-black-dark: var(--tc-grey-00-dark);
   --tc-layer-secondary-dark: var(--tc-grey-10-dark);
   --tc-layer-tertiary-dark: var(--tc-grey-20-dark);
   --tc-layer-quaternary-dark: var(--tc-grey-30-dark);
-  --tc-layer-inverse-primary-dark: var(--tc-grey-100-dark);
+  --tc-layer-inverse-primary-dark: rgb(255, 255, 255);
   --tc-icon-primary-dark: var(--tc-grey-100-dark);
   --tc-icon-white-dark: var(--tc-grey-100-dark);
   --tc-icon-secondary-dark: var(--tc-grey-50-dark);
@@ -5447,12 +5448,47 @@
   --tc-border-inverse-secondary-dark: var(--tc-grey-50-dark);
   --tc-border-inverse-tertiary-dark: var(--tc-grey-60-inverse-dark);
   --tc-border-inverse-quaternary-dark: var(--tc-grey-70-dark);
+  --tc-alert-info-dark: var(--tc-blue-80-dark);
+  --tc-alert-success-dark: var(--tc-green-80-dark);
+  --tc-alert-warning-dark: var(--tc-yellow-80-dark);
+  --tc-alert-error-dark: var(--tc-red-80-dark);
+  --tc-alert-neutral-dark: var(--tc-violet-80-dark);
+  --tc-alert-white-dark: var(--tc-grey-20-dark);
   --tc-alert-accent-info-dark: rgb(52, 129, 247);
   --tc-alert-accent-success-dark: rgb(48, 192, 108);
   --tc-alert-accent-warning-dark: rgb(232, 174, 48);
   --tc-alert-accent-error-dark: rgb(235, 90, 77);
   --tc-alert-accent-neutral-dark: rgb(172, 147, 236);
   --tc-alert-accent-orange-dark: rgb(220, 78, 34);
+  --tc-alert-colorwave-info-dark: var(--tc-blue-10-dark);
+  --tc-alert-colorwave-success-dark: var(--tc-green-10-dark);
+  --tc-alert-colorwave-warning-dark: var(--tc-yellow-10-dark);
+  --tc-alert-colorwave-error-dark: var(--tc-red-10-dark);
+  --tc-alert-colorwave-neutral-dark: var(--tc-violet-10-dark);
+  --tc-modal-primary-dark: var(--tc-grey-20-dark);
+  --tc-gradient-green-lin1-dark: rgba(32, 60, 46, 1);
+  --tc-gradient-green-lin2-dark: rgba(19, 41, 10, 1);
+  --tc-gradient-green-accent-dark: rgba(19, 41, 10, 1);
+  --tc-gradient-mint-lin1-dark: rgba(32, 51, 60, 1);
+  --tc-gradient-mint-lin2-dark: rgba(32, 51, 60, 1);
+  --tc-gradient-mint-lin3-dark: rgba(10, 35, 41, 1);
+  --tc-gradient-mint-accent-dark: rgba(10, 35, 41, 1);
+  --tc-gradient-red-lin1-dark: rgba(60, 39, 32, 1);
+  --tc-gradient-red-lin2-dark: rgba(60, 39, 32, 1);
+  --tc-gradient-red-lin3-dark: rgba(41, 10, 10, 1);
+  --tc-gradient-red-accent-dark: rgba(126, 40, 32, 1);
+  --tc-gradient-yellow-lin1-dark: rgba(60, 51, 32, 1);
+  --tc-gradient-yellow-lin2-dark: rgba(41, 29, 10, 1);
+  --tc-gradient-yellow-accent-dark: rgba(153, 109, 10, 1);
+  --tc-gradient-blue-lin1-dark: rgba(32, 46, 60, 1);
+  --tc-gradient-blue-lin2-dark: rgba(10, 26, 41, 1);
+  --tc-gradient-blue-accent-dark: rgba(20, 60, 123, 1);
+  --tc-gradient-purple-lin1-dark: rgba(32, 32, 60, 1);
+  --tc-gradient-purple-lin2-dark: rgba(19, 10, 41, 1);
+  --tc-gradient-purple-accent-dark: rgba(68, 69, 126, 1);
+  --tc-gradient-grey-lin1-dark: rgba(46, 46, 46, 1);
+  --tc-gradient-grey-lin2-dark: rgba(25, 25, 25, 1);
+  --tc-gradient-grey-accent-dark: var(--tc-grey-30-dark);
   /**
   * Interactions
   */
@@ -5478,15 +5514,15 @@
   --tc-button-icon-primary-dark: var(--tc-grey-00-dark);
   --tc-button-icon-secondary-dark: var(--tc-grey-100-dark);
   --tc-button-icon-disabled-dark: rgba(10, 11, 13, 0.32);
-  --tc-button-icon-white-permanent-dark: rgb(255, 255, 255);
-  --tc-button-icon-black-permanent-dark: rgb(10, 11, 13);
+  --tc-button-icon-white-permanent-dark: var(--tc-grey-100-dark);
+  --tc-button-icon-black-permanent-dark: var(--tc-grey-00-dark);
   --tc-button-icon-inverse-primary-dark: var(--tc-grey-100-dark);
   --tc-button-icon-inverse-secondary-dark: var(--tc-grey-00-dark);
   --tc-button-icon-inverse-disabled-dark: rgba(255, 255, 255, 0.49);
   --tc-menu-item-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-menu-item-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-menu-item-active-dark: rgba(29, 50, 84, 1);
-  --tc-theme-switcher-background-light-theme-default-dark: var(--tc-grey-100-dark);
+  --tc-theme-switcher-background-light-theme-default-dark: rgb(255, 255, 255);
   --tc-theme-switcher-background-light-theme-hover-dark: var(--tc-grey-90-dark);
   --tc-theme-switcher-background-light-theme-pressed-dark: var(--tc-grey-80-dark);
   --tc-theme-switcher-background-light-theme-selected-dark: var(--tc-grey-90-dark);
@@ -5503,12 +5539,12 @@
   --tc-theme-switcher-border-dark-theme-pressed-dark: var(--tc-grey-50-dark);
   --tc-theme-switcher-border-dark-theme-selected-dark: var(--tc-grey-100-dark);
   --tc-theme-switcher-icon-light-theme-dark: var(--tc-grey-00-dark);
-  --tc-theme-switcher-icon-dark-theme-dark: var(--tc-grey-100-dark);
+  --tc-theme-switcher-icon-dark-theme-dark: rgb(255, 255, 255);
   --tc-checkbox-default-dark: rgb(0, 0, 0);
   --tc-checkbox-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-checkbox-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-checkbox-disabled-dark: rgba(235, 237, 239, 0.24);
-  --tc-checkbox-active-default-dark: var(--tc-grey-100-dark);
+  --tc-checkbox-active-default-dark: rgb(255, 255, 255);
   --tc-checkbox-active-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-checkbox-active-pressed-dark: rgba(235, 237, 239, 0.8);
   --tc-checkbox-active-disabled-dark: rgba(235, 237, 239, 0.3);
@@ -5517,12 +5553,12 @@
   --tc-radio-button-hover-dark: rgba(235, 237, 239, 0.12);
   --tc-radio-button-pressed-dark: rgba(235, 237, 239, 0.24);
   --tc-radio-button-disabled-dark: rgba(235, 237, 239, 0.24);
-  --tc-radio-button-active-default-dark: var(--tc-grey-100-dark);
+  --tc-radio-button-active-default-dark: rgb(255, 255, 255);
   --tc-radio-button-active-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-radio-button-active-pressed-dark: rgba(235, 237, 239, 0.8);
   --tc-radio-button-active-disabled-dark: rgba(235, 237, 239, 0.3);
   --tc-radio-button-active-focus-dark: rgba(35, 40, 46, 0.9);
-  --tc-toggle-button-active-default-dark: var(--tc-grey-100-dark);
+  --tc-toggle-button-active-default-dark: rgb(255, 255, 255);
   --tc-toggle-button-active-hover-dark: rgba(235, 237, 239, 0.9);
   --tc-toggle-button-active-disabled-dark: var(--tc-grey-20-dark);
   --tc-toggle-button-default-dark: var(--tc-grey-30-dark);
@@ -5537,6 +5573,7 @@
   --tc-tooltip-text-inverse-secondary-dark: var(--tc-grey-70-dark);
   --tc-tooltip-layer-primary-dark: var(--tc-grey-90-dark);
   --tc-tooltip-layer-secondary-dark: var(--tc-grey-20-dark);
+  --tc-search-active-focus-dark: rgba(35, 40, 46, 0.9);
   /**
   * Shadows
   */
@@ -5553,7 +5590,9 @@
   --tc-elevation-six-layer1-dark: 0 1px 7px 0 rgba(10, 11, 13, 0.2),
   0 18px 30px 0 rgba(10, 11, 13, 0.36);
   --tc-button-hover-shadow-centre-dark: 0 0 1px 0 rgba(0, 0, 0, 0.2);
-  --tc-button-hover-shadow-raised-dark: 0 0 1px 3px rgba(0, 0, 0, 0.37);
+  --tc-button-hover-shadow-raised-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.37);
+  --tc-toggle-button-hover-shadow-centre-dark: 0 0 0 8px rgba(185, 192, 202, 0.2);
+  --tc-toggle-button-hover-shadow-raised-dark: 0 0 0 8px rgba(255, 255, 255, 0.2);
 }
 
 /**
@@ -5578,7 +5617,7 @@
   --tc-grey-30: rgba(215, 219, 224, 1);
   --tc-grey-20: rgba(235, 237, 239, 1);
   --tc-grey-10: rgba(247, 247, 247, 1);
-  --tc-grey-00: rgb(255, 255, 255);
+  --tc-grey-00: rgba(251, 251, 251, 1);
   --tc-blue-80: rgba(8, 45, 104, 1);
   --tc-blue-70: rgba(12, 58, 131, 1);
   --tc-blue-60: rgba(17, 72, 158, 1);
@@ -5632,7 +5671,8 @@
   --tc-background-secondary: var(--tc-grey-10);
   --tc-background-tertiary: var(--tc-grey-20);
   --tc-background-quaternary: var(--tc-grey-30);
-  --tc-layer-primary: var(--tc-grey-00);
+  --tc-background-white-black: rgb(255, 255, 255);
+  --tc-layer-primary: rgb(255, 255, 255);
   --tc-layer-primary-black: var(--tc-grey-100);
   --tc-layer-secondary: var(--tc-grey-10);
   --tc-layer-tertiary: var(--tc-grey-20);
@@ -5651,12 +5691,47 @@
   --tc-border-inverse-secondary: var(--tc-grey-50);
   --tc-border-inverse-tertiary: var(--tc-grey-60-inverse);
   --tc-border-inverse-quaternary: var(--tc-grey-70);
+  --tc-alert-info: var(--tc-blue-00);
+  --tc-alert-success: var(--tc-green-00);
+  --tc-alert-warning: var(--tc-yellow-00);
+  --tc-alert-error: var(--tc-red-00);
+  --tc-alert-neutral: var(--tc-violet-00);
+  --tc-alert-white: rgb(255, 255, 255);
   --tc-alert-accent-info: rgb(25, 98, 212);
   --tc-alert-accent-success: rgb(22, 197, 95);
   --tc-alert-accent-warning: rgb(255, 182, 26);
   --tc-alert-accent-error: rgb(233, 69, 54);
   --tc-alert-accent-neutral: rgb(149, 116, 231);
   --tc-alert-accent-orange: rgb(255, 88, 36);
+  --tc-alert-colorwave-info: var(--tc-blue-10);
+  --tc-alert-colorwave-success: var(--tc-green-10);
+  --tc-alert-colorwave-warning: var(--tc-yellow-10);
+  --tc-alert-colorwave-error: var(--tc-red-10);
+  --tc-alert-colorwave-neutral: var(--tc-violet-10);
+  --tc-modal-primary: rgb(255, 255, 255);
+  --tc-gradient-green-lin1: rgba(248, 255, 245, 1);
+  --tc-gradient-green-lin2: rgba(221, 242, 230, 1);
+  --tc-gradient-green-accent: var(--tc-green-20);
+  --tc-gradient-mint-lin1: rgba(242, 253, 255, 1);
+  --tc-gradient-mint-lin2: rgba(250, 254, 255, 1);
+  --tc-gradient-mint-lin3: rgba(222, 240, 248, 1);
+  --tc-gradient-mint-accent: rgba(111, 227, 231, 1);
+  --tc-gradient-red-lin1: rgba(255, 240, 235, 1);
+  --tc-gradient-red-lin2: rgba(255, 250, 250, 1);
+  --tc-gradient-red-lin3: rgba(255, 216, 204, 1);
+  --tc-gradient-red-accent: var(--tc-red-20);
+  --tc-gradient-yellow-lin1: rgba(254, 251, 246, 1);
+  --tc-gradient-yellow-lin2: rgba(251, 240, 216, 1);
+  --tc-gradient-yellow-accent: var(--tc-yellow-20);
+  --tc-gradient-blue-lin1: rgba(251, 253, 255, 1);
+  --tc-gradient-blue-lin2: rgba(220, 238, 255, 1);
+  --tc-gradient-blue-accent: var(--tc-blue-20);
+  --tc-gradient-purple-lin1: rgba(252, 251, 255, 1);
+  --tc-gradient-purple-lin2: rgba(229, 229, 255, 1);
+  --tc-gradient-purple-accent: rgba(185, 185, 255, 1);
+  --tc-gradient-grey-lin1: rgba(253, 253, 253, 1);
+  --tc-gradient-grey-lin2: rgba(237, 237, 237, 1);
+  --tc-gradient-grey-accent: var(--tc-grey-40);
   /**
   * Interactions
   */
@@ -5690,7 +5765,7 @@
   --tc-menu-item-hover: rgba(35, 40, 46, 0.06);
   --tc-menu-item-pressed: rgba(35, 40, 46, 0.12);
   --tc-menu-item-active: var(--tc-blue-00);
-  --tc-theme-switcher-background-light-theme-default: var(--tc-grey-00);
+  --tc-theme-switcher-background-light-theme-default: rgb(255, 255, 255);
   --tc-theme-switcher-background-light-theme-hover: var(--tc-grey-10);
   --tc-theme-switcher-background-light-theme-pressed: var(--tc-grey-20);
   --tc-theme-switcher-background-light-theme-selected: var(--tc-grey-10);
@@ -5707,32 +5782,32 @@
   --tc-theme-switcher-border-dark-theme-pressed: var(--tc-grey-50);
   --tc-theme-switcher-border-dark-theme-selected: var(--tc-grey-100);
   --tc-theme-switcher-icon-light-theme: var(--tc-grey-100);
-  --tc-theme-switcher-icon-dark-theme: var(--tc-grey-00);
-  --tc-checkbox-default: var(--tc-grey-00);
+  --tc-theme-switcher-icon-dark-theme: rgb(255, 255, 255);
+  --tc-checkbox-default: rgb(255, 255, 255);
   --tc-checkbox-hover: rgba(35, 40, 46, 0.06);
   --tc-checkbox-pressed: rgba(35, 40, 46, 0.12);
   --tc-checkbox-disabled: rgba(35, 40, 46, 0.12);
-  --tc-checkbox-active-default: var(--tc-grey-100);
+  --tc-checkbox-active-default: rgb(0, 0, 0);
   --tc-checkbox-active-hover: rgba(35, 40, 46, 0.9);
   --tc-checkbox-active-pressed: rgba(35, 40, 46, 0.8);
   --tc-checkbox-active-disabled: rgba(35, 40, 46, 0.16);
   --tc-checkbox-active-focus: rgba(235, 237, 239, 0.9);
-  --tc-radio-button-default: var(--tc-grey-00);
+  --tc-radio-button-default: rgb(255, 255, 255);
   --tc-radio-button-hover: rgba(35, 40, 46, 0.06);
   --tc-radio-button-pressed: rgba(35, 40, 46, 0.12);
   --tc-radio-button-disabled: rgba(35, 40, 46, 0.12);
-  --tc-radio-button-active-default: var(--tc-grey-100);
+  --tc-radio-button-active-default: rgb(0, 0, 0);
   --tc-radio-button-active-hover: rgba(35, 40, 46, 0.9);
   --tc-radio-button-active-pressed: rgba(35, 40, 46, 0.8);
   --tc-radio-button-active-disabled: rgba(35, 40, 46, 0.16);
   --tc-radio-button-active-focus: rgba(235, 237, 239, 0.9);
-  --tc-toggle-button-active-default: var(--tc-grey-100);
+  --tc-toggle-button-active-default: rgb(0, 0, 0);
   --tc-toggle-button-active-hover: rgba(35, 40, 46, 0.9);
   --tc-toggle-button-active-disabled: var(--tc-grey-20);
   --tc-toggle-button-default: var(--tc-grey-30);
   --tc-toggle-button-hover: var(--tc-grey-40);
   --tc-toggle-button-disabled: var(--tc-grey-20);
-  --tc-toggle-button-ellipse-default: var(--tc-grey-00);
+  --tc-toggle-button-ellipse-default: rgb(255, 255, 255);
   --tc-toggle-button-ellipse-disabled: var(--tc-grey-10);
   --tc-text-input-border-active: rgba(235, 237, 239, 0.9);
   --tc-tooltip-text-primary: var(--tc-grey-100);
@@ -5741,6 +5816,7 @@
   --tc-tooltip-text-inverse-secondary: var(--tc-grey-30);
   --tc-tooltip-layer-primary: var(--tc-grey-10);
   --tc-tooltip-layer-secondary: var(--tc-grey-80);
+  --tc-search-active-focus: rgba(235, 237, 239, 0.9);
   /**
   * Shadows
   */
@@ -5756,8 +5832,10 @@
   0 14px 25px 0 rgba(10, 11, 13, 0.14);
   --tc-elevation-six: 0 1px 7px 0 rgba(10, 11, 13, 0.06),
   0 18px 30px 0 rgba(10, 11, 13, 0.15);
-  --tc-button-hover-shadow-centre: 0 0 1px 0 rgba(0, 0, 0, 0.2);
-  --tc-button-hover-shadow-raised: 0 0 1px 3px rgba(10, 11, 13, 0.37);
+  --tc-button-hover-shadow-centre: 0 0 1px 0 rgba(10, 11, 13, 0.08);
+  --tc-button-hover-shadow-raised: 0 1px 3px 0 rgba(10, 11, 13, 0.12);
+  --tc-toggle-button-hover-shadow-centre: 0 0 0 8px rgba(86, 97, 113, 0.16);
+  --tc-toggle-button-hover-shadow-raised: 0 0 0 8px rgba(255, 255, 255, 0.3);
 }
 
 :host {

package/dist/collection/components/simple/structural/tet-accordion/test/tet-accordion.spec.js

@@ -10,7 +10,7 @@ describe('tet-accordion', () => {
     <tet-accordion header="test-header">
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--breakpoint-tablet">
-          <div class="tet-accordion__header" tabindex="0">
+          <div class="light tet-accordion__header" tabindex="0">
             <span class="tet-accordion__header__text">test-header</span>
             <tet-icon class="tet-accordion__icon" name="chevron-down"></tet-icon>
           </div>
@@ -34,7 +34,7 @@ describe('tet-accordion', () => {
     <tet-accordion header="test-header" is-open="true">
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--breakpoint-tablet">
-          <div class="tet-accordion__header" tabindex="0">
+          <div class="light tet-accordion__header" tabindex="0">
             <span class="tet-accordion__header__text">test-header</span>
             <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
           </div>
@@ -58,7 +58,7 @@ describe('tet-accordion', () => {
     <tet-accordion header="test-header" is-open="true" with-border="true">
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--border tet-accordion--breakpoint-tablet">
-          <div class="tet-accordion__header" tabindex="0">
+          <div class="light tet-accordion__header" tabindex="0">
            <span class="tet-accordion__header__text">test-header</span>
            <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
           </div>
@@ -82,7 +82,7 @@ describe('tet-accordion', () => {
     <tet-accordion header="test-header" is-open="true" with-border="true" heading-tag="h1">
       <mock:shadow-root>
         <div class="tet-accordion light-theme tet-accordion--border tet-accordion--breakpoint-tablet">
-          <div class="tet-accordion__header" tabindex="0">
+          <div class="light tet-accordion__header" tabindex="0">
            <h1 class="tet-accordion__header__text">test-header</h1>
            <tet-icon class="open tet-accordion__icon" name="chevron-down"></tet-icon>
           </div>

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.css

@@ -358,35 +358,29 @@
    * @prop --accordion-background-color: The background color of the component.
    * @prop --accordion-text-color: The color of the text.
    * @prop --accordion-border-bottom-width: The width of the bottom border of the accordion.
-   * @prop --accordion-focus-border-bottom-width: The width of the bottom border of the accordion in a focused state.
    * @prop --accordion-border-color: The color of the bottom border.
-   * @prop --accordion-focus-border-color: The color of the bottom border of the accordion in a focused state.
    */
   --accordion-animation-duration: 0.2s;
   --accordion-header-padding: 1.5rem 0;
   --accordion-header-mobile-padding: 0.75rem 0;
-  --accordion-background-color: rgb(255, 255, 255);
-  --accordion-text-color: rgb(10, 11, 13);
+  --accordion-background-color: var(--tc-background-primary);
+  --accordion-text-color: var(--tc-text-primary);
   --accordion-border-bottom-width: 0.0625rem;
-  --accordion-focus-border-bottom-width: 0.125rem;
-  --accordion-border-color: rgb(215, 219, 224);
-  --accordion-focus-border-color: rgb(10, 11, 13);
+  --accordion-border-color: var(--tc-border-quaternary);
   --accordion-break-point: 64rem;
   --accordion-header-font: 600 1.5rem/1.75rem Gilroy, Gilroy, Arial, sans-serif;
 }
 
 .dark-theme {
-  --accordion-background-color: rgb(10, 11, 13);
-  --accordion-text-color: rgb(255, 255, 255);
-  --accordion-border-color: rgb(88, 99, 116);
-  --accordion-focus-border-color: rgb(247, 247, 247);
+  --accordion-background-color: var(--tc-background-primary-dark);
+  --accordion-text-color: var(--tc-text-primary-dark);
+  --accordion-border-color: var(--tc-border-quaternary-dark);
 }
 
 .mint-theme {
   --accordion-background-color: rgb(10, 11, 13);
   --accordion-text-color: rgb(255, 255, 255);
   --accordion-border-color: rgb(88, 99, 116);
-  --accordion-focus-border-color: rgb(31, 208, 214);
 }
 
 .tet-accordion {
@@ -398,10 +392,7 @@
   border-bottom-style: solid;
   border-bottom-width: var(--accordion-border-bottom-width);
   box-sizing: border-box;
-  padding-bottom: calc(var(--accordion-focus-border-bottom-width) - var(--accordion-border-bottom-width));
-}
-.tet-accordion--border:focus-visible {
-  padding-bottom: 0;
+  padding-bottom: var(--accordion-border-bottom-width);
 }
 .tet-accordion__header {
   font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
@@ -410,6 +401,7 @@
   display: flex;
   line-height: 1.5rem;
   width: 100%;
+  border-radius: 0.125rem;
 }
 @media all and (min-width: 31.25rem) {
   .tet-accordion--breakpoint-tablet .tet-accordion__header {
@@ -425,12 +417,16 @@
     padding: var(--accordion-header-padding);
   }
 }
-.tet-accordion__header:focus-visible {
-  border-radius: 0.125rem;
+.tet-accordion__header:focus-visible.light {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.0625rem;
+  transition: outline 0s;
+}
+.tet-accordion__header:focus-visible.dark {
   outline: 0.125rem solid var(--tc-blue-40);
-  outline-offset: 0.125rem;
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.0625rem;
   transition: outline 0s;
-  outline-offset: 0.1875rem;
 }
 .tet-accordion__header__text {
   flex-grow: 1;

package/dist/collection/components/simple/structural/tet-accordion/tet-accordion.js

@@ -111,16 +111,16 @@ export class TetAccordion {
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
                 [`tet-accordion--breakpoint-${this.breakpoint}`]: true
-            } }, h("div", { key: '40f699f2ffca479ef23bfaac3c48ed283a8597e5', class: "tet-accordion__header", onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
-            h("img", { key: 'f2283c796a4d2922c39d45853e0311d18b5ab540', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '0404c712cc9ee8e612462c1c2448a6057483f924', name: "chevron-down", class: {
+            } }, h("div", { key: 'f6eb73214ac9367e13bac1a8d2c367712d262b99', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
+            h("img", { key: 'dfb610782ebb237e87acc266a834e82394596d6b', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '5b385630eca42efc421fd1260827ac95401d7673', name: "chevron-down", class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })), h("div", { key: '598ed0e6471c9577db0a7c5ee484bd00e7091fb8', ref: (element) => (this.contentWrapperElement = element), class: {
+            } })), h("div", { key: '13aae62813e6ba5ff816c952909b21cfcbfe4aa4', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: 'a16b91c8f81c0580ad42d2c288f40d626b581ceb', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: '7d354aa32ef4b7e698bfa11e3ac09ae951430f70', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: 'fff5b109547e5a3f57cb3973e9eed78c82262c0b' }))))));
+            } }, h("slot", { key: 'ead52152480876da5557bf233477c5acf66a368e' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }