@tet/tet-components 1.3.7-testing → 1.3.8-staging

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

@@ -23,6 +23,7 @@ export class TetTextList {
         this.decimalPrefix = null;
         this.withIcon = false;
         this.listIcon = 'check';
+        this.theme = 'light';
     }
     /**
      * Lifecycle method.
@@ -97,12 +98,12 @@ export class TetTextList {
         return Object.assign({ 'text-list': true, [`text-list--type-${props.listType}`]: !props.withIcon }, additionalClassNames);
     }
     render() {
-        const { withIcon, listType } = this;
+        const { withIcon, listType, theme } = this;
         // No need to render content if this is a sublist.
         if (!!this.host.getAttribute('data-is-sublist')) {
             return null;
         }
-        const listClass = this.getListClassName({ withIcon, listType });
+        const listClass = this.getListClassName({ withIcon, listType }, [`-${theme}`]);
         return (h(Host, null, h("ul", { class: listClass, part: "list" }, this.renderList(this.children))));
     }
     static get is() { return "tet-text-list"; }
@@ -214,6 +215,24 @@ export class TetTextList {
                 "attribute": "list-icon",
                 "reflect": false,
                 "defaultValue": "'check'"
+            },
+            "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'"
             }
         };
     }

package/dist/collection/components/simple/text-blocks/tet-dialog/tet-dialog.css

@@ -362,6 +362,10 @@
    * @prop --dialog-background-color: The background color of the modal.
    * @prop --dialog-footer-border-color: The top border color of the modal footer.
    *
+   * @prop --dialog-close-icon-color: The color of the dialog close icon.
+   * @prop --dialog-close-icon-background-hover-color: The color of the dialog close button background on hover.
+   * @prop --dialog-close-icon-background-pressed-color: The color of the dialog close button background when pressed.
+   *
    * @prop --dialog-footer-slot-align-items: The align items property of the modal footer slot.
    * @prop --dialog-footer-slot-flex-direction: The flex direction of the modal footer slot.
    */
@@ -370,9 +374,12 @@
   --dialog-overlay-padding: 1rem;
   --dialog-align-items: flex-start;
   --dialog-title-font-size: 1.25rem;
-  --dialog-text-color: rgb(10, 11, 13);
-  --dialog-background-color: rgb(255, 255, 255);
-  --dialog-footer-border-color: rgb(235, 237, 239);
+  --dialog-text-color: var(--tc-text-primary);
+  --dialog-background-color: var(--tc-layer-primary);
+  --dialog-footer-border-color: var(--tc-border-quaternary);
+  --dialog-close-icon-color: var(--tc-icon-primary);
+  --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover);
+  --dialog-close-icon-background-pressed-color: var(--tc-menu-item-pressed);
   --dialog-footer-slot-align-items: center;
   --dialog-footer-slot-flex-direction: row;
   display: block;
@@ -396,17 +403,23 @@ dialog .dialog {
   border-radius: 1rem;
   color: var(--dialog-text-color);
   background: var(--dialog-background-color);
-  box-shadow: 0 0.0625rem 0.4375rem rgba(10, 11, 13, 0.06), 0 1.125rem 1.875rem rgba(10, 11, 13, 0.15);
+  box-shadow: var(--tc-elevation-six);
 }
 dialog .dialog--theme-dark {
-  --dialog-text-color: rgb(255, 255, 255);
-  --dialog-background-color: rgb(22, 25, 29);
-  --dialog-footer-border-color: rgb(67, 75, 86);
+  --dialog-text-color: var(--tc-text-primary-dark);
+  --dialog-background-color: var(--tc-grey-20-dark);
+  --dialog-footer-border-color: var(--tc-border-quaternary-dark);
+  --dialog-close-icon-color: var(--tc-icon-primary-dark);
+  --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover-dark);
+  --dialog-close-icon-background-pressed-color: var(--tc-menu-item-pressed-dark);
 }
 dialog .dialog--theme-dark-secondary {
   --dialog-text-color: rgb(255, 255, 255);
   --dialog-background-color: rgb(35, 40, 46);
   --dialog-footer-border-color: rgb(67, 75, 86);
+  --dialog-close-icon-color: var(--dialog-text-color);
+  --dialog-close-icon-background-hover-color: var(--tc-menu-item-hover-dark);
+  --dialog-close-icon-background-pressed-color: var(--tc-menu-item-pressed-dark);
 }
 dialog .dialog__overlay {
   position: fixed;
@@ -462,6 +475,7 @@ dialog .dialog__close-button {
   cursor: pointer;
   position: relative;
   margin-top: -0.25rem;
+  border-radius: 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -470,11 +484,17 @@ dialog .dialog__close-button {
   padding: 0.5rem;
   background-color: transparent;
 }
+dialog .dialog__close-button:hover {
+  background-color: var(--dialog-close-icon-background-hover-color);
+}
+dialog .dialog__close-button:active {
+  background-color: var(--dialog-close-icon-background-pressed-color);
+}
 dialog .dialog__close-button__hidden {
   display: none;
 }
 dialog .dialog__close-icon {
-  --icon-color: var(--dialog-text-color);
+  --icon-color: var(--dialog-close-icon-color);
   --icon-size: 1.5rem;
 }
 dialog .dialog__body {
@@ -525,4 +545,9 @@ dialog .dialog__footer--center slot {
 }
 dialog .dialog__footer--between slot {
   justify-content: space-between;
+}
+@media only screen and (max-width: 44.9375rem) {
+  dialog .dialog {
+    box-shadow: var(--tc-elevation-four);
+  }
 }

package/dist/collection/components/simple/text-blocks/tet-dialog/tet-dialog.js

@@ -117,7 +117,7 @@ export class TetDialog {
     }
     render() {
         const { isOpen, theme, footerDisplay, handleClickOverlay } = this;
-        return (h(Host, { key: '3a20bd4aa39ad4d4dfebadc540362e39bc5f0f25' }, h("dialog", { key: 'c65c89b5609f0547e1fb3b197f80bf1616284d82', ref: (el) => (this.dialogContainer = el) }, h("div", { key: '3ca2f10b6297af274622a38a7360e42b0b435be5', part: "overlay", class: { 'dialog__overlay': true, 'dialog__overlay--visible': isOpen }, onClick: handleClickOverlay }, h("div", { key: '8a2809a24be48293dbacc020424cf7e5abfe4df2', part: "dialog", class: { dialog: true, [`dialog--theme-${theme}`]: true }, "aria-labelledby": this.hideHeader ? null : this.titleId }, this.renderHeader(), h("div", { key: '2a01e30b4f9728d8b3df616c933919b58d40f8db', part: "body", class: "dialog__body" }, h("slot", { key: '5d11e172b99ffc645fbe1197c50a8844873911c7' })), h("div", { key: '832f6daf4ae5cf4d68ef3daf9742366719a8421d', part: "footer", class: { dialog__footer: true, [`dialog__footer--${footerDisplay}`]: true } }, h("slot", { key: '1d34c8e91c238774c4a60ba10f5601765c0d92cc', name: "footer" })))))));
+        return (h(Host, { key: '9ad582be4a909ff45e91e6c8259429f343dd1222' }, h("dialog", { key: 'f894428eedab7a1b7b464ca0af99e3d2c8c24b01', ref: (el) => (this.dialogContainer = el) }, h("div", { key: 'd4e24a66e96beab5d35bb597632b5aa301b71600', part: "overlay", class: { 'dialog__overlay': true, 'dialog__overlay--visible': isOpen }, onClick: handleClickOverlay }, h("div", { key: '5f181c1d769b011b4c54fb305635b920abfc75d5', part: "dialog", class: { dialog: true, [`dialog--theme-${theme}`]: true }, "aria-labelledby": this.hideHeader ? null : this.titleId }, this.renderHeader(), h("div", { key: '31d0e0c7c3dd040d784df646f91323bd8f18f612', part: "body", class: "dialog__body" }, h("slot", { key: 'a975df18f966fe355b813d9fd3d7da0cc84b9004' })), h("div", { key: '28232f833bb3e36dcaddcc3db14bb8b62f47fbf4', part: "footer", class: { dialog__footer: true, [`dialog__footer--${footerDisplay}`]: true } }, h("slot", { key: '0d65f3527e10d69adb1f0a52e72987caf2fb8f17', name: "footer" })))))));
     }
     static get is() { return "tet-dialog"; }
     static get encapsulation() { return "shadow"; }
@@ -173,7 +173,7 @@ export class TetDialog {
                 "mutable": false,
                 "complexType": {
                     "original": "TetDialogTheme",
-                    "resolved": "\"classic\" | \"dark\" | \"dark-secondary\"",
+                    "resolved": "\"classic\" | \"dark\" | \"dark-secondary\" | \"light\"",
                     "references": {
                         "TetDialogTheme": {
                             "location": "local",

package/dist/collection/components/simple/text-blocks/tet-notification/tet-notification.css

@@ -400,16 +400,11 @@
   src: url("assets/fonts/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("assets/fonts/Inter-SemiBold.woff?v=3.19") format("woff");
 }
 :root {
-  --tet-link-color: var(--color-text-primary);
-  --tet-link-color-hover: var(--color-text-secondary);
-  --tet-link-color-active: var(--color-text-primary);
-  --tet-link-color-focus: var(--color-text-primary);
-  --tet-link-color-disabled: var(--color-text-disabled);
-  --tet-link-color-dark: var(--color-text-primary-dark);
-  --tet-link-color-hover-dark: var(--color-text-secondary-dark);
-  --tet-link-color-active-dark: var(--color-text-link-dark);
-  --tet-link-color-focus-dark: var(--color-text-link-dark);
-  --tet-link-color-disabled-dark: var(--color-text-disabled-dark);
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
 }
 
 .tet-link,
@@ -420,6 +415,14 @@
   line-height: 1.5rem;
   cursor: pointer;
 }
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   --icon-color: var(--tet-link-color);
@@ -442,15 +445,10 @@
 }
 .tet-link:focus-visible,
 .tet-link__arrow:focus-visible {
-  color: var(--tet-link-color-focus);
   outline: solid var(--tet-link-color-focus) 0.125rem;
   outline-offset: 0.375rem;
   border-radius: 0.125rem;
 }
-.tet-link:focus-visible tet-icon,
-.tet-link__arrow:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus);
-}
 .tet-link.disabled,
 .tet-link__arrow.disabled {
   color: var(--tet-link-color-disabled);
@@ -465,47 +463,6 @@
 .tet-link__arrow.disabled:focus-visible {
   outline: none;
 }
-.tet-link.dark,
-.tet-link__arrow.dark {
-  color: var(--tet-link-color-dark);
-}
-.tet-link.dark tet-icon,
-.tet-link__arrow.dark tet-icon {
-  --icon-color: var(--tet-link-color-dark);
-}
-.tet-link.dark:hover,
-.tet-link__arrow.dark:hover {
-  color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:hover tet-icon,
-.tet-link__arrow.dark:hover tet-icon {
-  --icon-color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:active,
-.tet-link__arrow.dark:active {
-  color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:active tet-icon,
-.tet-link__arrow.dark:active tet-icon {
-  --icon-color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:focus-visible,
-.tet-link__arrow.dark:focus-visible {
-  color: var(--tet-link-color-focus-dark);
-  outline-color: solid var(--tet-link-color-focus-dark);
-}
-.tet-link.dark:focus-visible tet-icon,
-.tet-link__arrow.dark:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus-dark);
-}
-.tet-link.dark.disabled,
-.tet-link__arrow.dark.disabled {
-  color: var(--tet-link-color-disabled-dark);
-}
-.tet-link.dark.disabled tet-icon,
-.tet-link__arrow.dark.disabled tet-icon {
-  --icon-color: var(--tet-link-color-disabled-dark);
-}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   padding-left: 0.25rem;

package/dist/collection/components/simple/text-blocks/tet-tooltip/test/tet-tooltip.spec.js

@@ -11,7 +11,7 @@ describe('tet-tooltip', () => {
         expect(page.root).toEqualHtml(`
       <tet-tooltip style="display: none;">
         <mock:shadow-root>
-          <div class="tooltip classic-theme" role="tooltip" aria-hidden="true">
+          <div class="tooltip classic" role="tooltip" aria-hidden="true">
             <div class="tooltip-pointer"></div>
             <slot></slot>
           </div>
@@ -33,7 +33,7 @@ describe('tet-tooltip', () => {
       <tet-tooltip class="visible" style="display: none;">
         <mock:shadow-root>
           <div
-            class="tooltip classic-theme"
+            class="tooltip classic"
             role="tooltip"
             aria-hidden="false"
             aria-live="polite"
@@ -51,7 +51,7 @@ describe('tet-tooltip', () => {
         expect(page.root).toEqualHtml(`
       <tet-tooltip class="hidden-quick" style="display: none;">
         <mock:shadow-root>
-          <div class="tooltip classic-theme" role="tooltip" aria-hidden="true">
+          <div class="tooltip classic" role="tooltip" aria-hidden="true">
             <div class="tooltip-pointer"></div>
             <slot></slot>
           </div>
@@ -60,4 +60,20 @@ describe('tet-tooltip', () => {
       </tet-tooltip>
     `);
     });
+    it('renders tooltip with dark theme', async () => {
+        const page = await newSpecPage({
+            components: [TetTooltip],
+            html: `<tet-tooltip theme="dark"></tet-tooltip>`
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-tooltip style="display: none;" theme="dark">
+        <mock:shadow-root>
+          <div class="tooltip dark" role="tooltip" aria-hidden="true">
+            <div class="tooltip-pointer"></div>
+            <slot></slot>
+          </div>
+        </mock:shadow-root>
+      </tet-tooltip>
+    `);
+    });
 });

package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.css

@@ -360,8 +360,8 @@
    * @prop --tooltip-delay-hide: The delay before the tooltip should disappear.
    * @prop --tooltip-max-width: The max width of the tooltip.
    */
-  --tooltip-background-color: rgb(35, 40, 46);
-  --tooltip-text-color: rgb(255, 255, 255);
+  --tooltip-background-color: var(--tc-tooltip-layer-secondary);
+  --tooltip-text-color: var(--tc-tooltip-text-inverse-primary);
   --tooltip-padding: 1em;
   --tooltip-display-speed: .2s;
   --tooltip-delay-show: .25s;
@@ -395,14 +395,19 @@
   transition: opacity var(--tooltip-display-speed) linear;
 }
 
-.dark-theme {
-  --tooltip-background-color: rgb(235, 237, 239);
-  --tooltip-text-color: rgb(10, 11, 13);
+.light-inverse {
+  --tooltip-background-color: var(--tc-tooltip-layer-primary);
+  --tooltip-text-color: var(--tc-tooltip-text-primary);
 }
 
-.light-theme {
-  --tooltip-background-color: rgb(247, 247, 247);
-  --tooltip-text-color: rgb(10, 11, 13);
+.dark {
+  --tooltip-background-color: var(--tc-tooltip-layer-primary-dark);
+  --tooltip-text-color: var(--tc-tooltip-text-primary-dark);
+}
+
+.dark-inverse {
+  --tooltip-background-color: var(--tc-tooltip-layer-secondary-dark);
+  --tooltip-text-color: var(--tc-tooltip-text-inverse-primary-dark);
 }
 
 .tooltip {

package/dist/collection/components/simple/text-blocks/tet-tooltip/tet-tooltip.js

@@ -95,7 +95,7 @@ export class TetTooltip {
          * Renders the tooltip.
          */
         this.renderTooltip = () => {
-            return (h("div", { class: { tooltip: true, [`${this.theme}-theme`]: true }, role: "tooltip", "aria-hidden": this.showTooltip ? 'false' : 'true', "aria-live": this.showTooltip ? 'polite' : undefined }, h("div", { class: "tooltip-pointer", ref: (el) => (this.tooltipPointer = el) }), h("slot", null)));
+            return (h("div", { class: { tooltip: true, [`${this.theme}`]: true }, role: "tooltip", "aria-hidden": this.showTooltip ? 'false' : 'true', "aria-live": this.showTooltip ? 'polite' : undefined }, h("div", { class: "tooltip-pointer", ref: (el) => (this.tooltipPointer = el) }), h("slot", null)));
         };
         this.theme = 'classic';
         this.targetElementSelector = undefined;
@@ -351,7 +351,7 @@ export class TetTooltip {
         return isTooltipOutOfBounds;
     }
     render() {
-        return h(Host, { key: '3a632788c03578dd62581a7b180bb72b5c0688b8', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: '21ac808cf18d759811766849ec6e4f6435e88a2d', class: { visible: this.showTooltip } }, this.renderTooltip());
     }
     static get is() { return "tet-tooltip"; }
     static get encapsulation() { return "shadow"; }
@@ -371,8 +371,8 @@ export class TetTooltip {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'classic' | 'light' | 'dark'",
-                    "resolved": "\"classic\" | \"dark\" | \"light\"",
+                    "original": "'classic' | 'light' | 'light-inverse' | 'dark' | 'dark-inverse'",
+                    "resolved": "\"classic\" | \"dark\" | \"dark-inverse\" | \"light\" | \"light-inverse\"",
                     "references": {}
                 },
                 "required": false,

package/dist/collection/components/views/tet-thank-you-view-v2/test/tet-thank-you-view-v2.spec.js

@@ -11,7 +11,7 @@ describe('tet-thank-you-view-v2', () => {
         expect(page.root).toEqualHtml(`
       <tet-thank-you-view-v2>
         <mock:shadow-root>
-         <div class="thank-you-view-v2">
+         <div class="thank-you-view-v2 light">
            <div class="thank-you-view-v2-info-block">
              <tet-icon aria-hidden="true" class="thank-you-view-v2-icon" name="check"></tet-icon>
              <div class="thank-you-view-v2-info-block-text">
@@ -30,7 +30,7 @@ describe('tet-thank-you-view-v2', () => {
         expect(page.root).toEqualHtml(`
       <tet-thank-you-view-v2>
        <mock:shadow-root>
-        <div class="thank-you-view-v2">
+        <div class="thank-you-view-v2 light">
           <div class="thank-you-view-v2-info-block">
             <div class="thank-you-view-v2-info-block-text">
             </div>
@@ -52,7 +52,7 @@ describe('tet-thank-you-view-v2', () => {
         expect(page.root).toEqualHtml(`
       <tet-thank-you-view-v2>
         <mock:shadow-root>
-         <div class="thank-you-view-v2">
+         <div class="thank-you-view-v2 light">
            <div class="thank-you-view-v2-info-block">
               <tet-icon aria-hidden="true" class="thank-you-view-v2-icon" name="check"></tet-icon>
               <div class="thank-you-view-v2-info-block-text">
@@ -148,22 +148,22 @@ describe('tet-thank-you-view-v2', () => {
       </tet-thank-you-view-v2>
     `);
     });
-    it('renders the thank you view with cta button', async () => {
+    it('renders the thank you view with cta button and dark theme', async () => {
         const page = await newSpecPage({
             components: [TetThankYouViewV2],
-            template: () => h("tet-thank-you-view-v2", { ctaButtonLabel: "ctaButtonLabel" })
+            template: () => h("tet-thank-you-view-v2", { ctaButtonLabel: "ctaButtonLabel", theme: "dark" })
         });
         expect(page.root).toEqualHtml(`
       <tet-thank-you-view-v2>
         <mock:shadow-root>
-         <div class="thank-you-view-v2">
+         <div class="thank-you-view-v2 dark">
            <div class="thank-you-view-v2-info-block">
              <tet-icon aria-hidden="true" class="thank-you-view-v2-icon" name="check"></tet-icon>
              <div class="thank-you-view-v2-info-block-text">
              </div>
            </div>
            <nav class="thank-you-view-v2-cta-button" aria-label="CTA">
-            <tet-button accessibilitylabel="ctaButtonLabel" element-id="thankYouBackButton" size="large" theme="light" type="primary">
+            <tet-button accessibilitylabel="ctaButtonLabel" element-id="thankYouBackButton" size="large" theme="dark" type="primary">
               ctaButtonLabel
             </tet-button>
           </nav>

package/dist/collection/components/views/tet-thank-you-view-v2/tet-thank-you-view-v2.css

@@ -358,11 +358,11 @@
    * @prop --thank-you-view-description-color: The color of description in main info block
    * @prop --thank-you-view-description-strong-color: The color of strong text inside description in main info block
    */
-  --thank-you-view-icon-color: var(--color-foundation-green);
+  --thank-you-view-icon-color: var(--tc-green-40);
   --thank-you-view-icon-size: 3rem;
-  --thank-you-view-title-color: var(--color-foundation-black);
-  --thank-you-view-description-color: var(--color-grey-70);
-  --thank-you-view-description-strong-color: var(--color-foundation-black);
+  --thank-you-view-title-color: var(--tc-text-primary);
+  --thank-you-view-description-color: var(--tc-text-secondary);
+  --thank-you-view-description-strong-color: var(--tc-text-primary);
   --thank-you-view-icon-gap: 0.5rem;
   --thank-you-view-text-gap: 0.5rem;
   --thank-you-view-gap: 3rem;
@@ -387,6 +387,12 @@
   margin: var(--thank-you-view-top-margin) auto 0;
   gap: var(--thank-you-view-gap);
 }
+.thank-you-view-v2.dark {
+  --thank-you-view-icon-color: var(--tc-green-40-dark);
+  --thank-you-view-title-color: var(--tc-text-primary-dark);
+  --thank-you-view-description-color: var(--tc-text-secondary-dark);
+  --thank-you-view-description-strong-color: var(--tc-text-primary-dark);
+}
 .thank-you-view-v2-stepper, .thank-you-view-v2-faq-slot {
   border-left: 1rem solid transparent;
 }

package/dist/collection/components/views/tet-thank-you-view-v2/tet-thank-you-view-v2.js

@@ -24,7 +24,7 @@ export class TetThankYouViewV2 {
          * Renders the CTA button if the value for the "ctaButtonLabel" has been provided.
          */
         this.renderCTAButton = () => {
-            return (this.ctaButtonLabel && (h("nav", { class: "thank-you-view-v2-cta-button", "aria-label": "CTA" }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, theme: this.ctaButtonTheme, "element-id": this.ctaButtonId, size: this.ctaButtonSize, accessibilityLabel: t(this.ctaButtonLabel) }, this.ctaButtonLabel && t(this.ctaButtonLabel)))));
+            return (this.ctaButtonLabel && (h("nav", { class: "thank-you-view-v2-cta-button", "aria-label": "CTA" }, h("tet-button", { clickCallback: this.ctaButtonCallback, type: this.ctaButtonType, theme: this.ctaButtonTheme ? this.ctaButtonTheme : this.theme, "element-id": this.ctaButtonId, size: this.ctaButtonSize, accessibilityLabel: t(this.ctaButtonLabel) }, this.ctaButtonLabel && t(this.ctaButtonLabel)))));
         };
         /**
          * Renders the FAQ slot if an HTML element is passed with the "faq" slot.
@@ -40,9 +40,10 @@ export class TetThankYouViewV2 {
         this.ctaButtonId = 'thankYouBackButton';
         this.ctaButtonSize = 'large';
         this.ctaButtonType = 'primary';
-        this.ctaButtonTheme = 'light';
+        this.ctaButtonTheme = undefined;
         this.language = 'lv';
         this.translationGroup = '';
+        this.theme = 'light';
     }
     /**
      * Watches the `language` prop for changes.
@@ -64,10 +65,13 @@ export class TetThankYouViewV2 {
      */
     renderStepper() {
         var _a;
-        return (((_a = this.stepperData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "thank-you-view-v2-stepper" }, h("tet-stepper-v2", { stepperData: this.stepperData }))));
+        return (((_a = this.stepperData) === null || _a === void 0 ? void 0 : _a.length) > 0 && (h("div", { class: "thank-you-view-v2-stepper" }, h("tet-stepper-v2", { stepperData: this.stepperData, theme: this.theme }))));
     }
     render() {
-        return (h(Host, { key: 'edd85e8a16ed7ce5262acf050b46780ecf988e77' }, h("div", { key: '8af050cf47640a6c55f2d3f391b2e4bc3d764b1e', class: "thank-you-view-v2" }, this.renderInfoBlock(), this.renderStepper(), this.renderCTAButton(), this.renderFAQSlot())));
+        return (h(Host, { key: 'ea9260cf3c05bc7df5db017b12b410117c88004b' }, h("div", { key: '279bac346ce88b0a11f4ddca99352e27de1a653e', class: {
+                'thank-you-view-v2': true,
+                [this.theme]: true,
+            } }, this.renderInfoBlock(), this.renderStepper(), this.renderCTAButton(), this.renderFAQSlot())));
     }
     static get is() { return "tet-thank-you-view-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -261,14 +265,13 @@ export class TetThankYouViewV2 {
                     }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "The theme of the CTA button."
                 },
                 "attribute": "cta-button-theme",
-                "reflect": false,
-                "defaultValue": "'light'"
+                "reflect": false
             },
             "language": {
                 "type": "string",
@@ -305,6 +308,24 @@ export class TetThankYouViewV2 {
                 "attribute": "translation-group",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "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'"
             }
         };
     }

package/dist/collection/docs/styling/link/tet-link.css

@@ -352,16 +352,11 @@
 }
 
 :root {
-  --tet-link-color: var(--color-text-primary);
-  --tet-link-color-hover: var(--color-text-secondary);
-  --tet-link-color-active: var(--color-text-primary);
-  --tet-link-color-focus: var(--color-text-primary);
-  --tet-link-color-disabled: var(--color-text-disabled);
-  --tet-link-color-dark: var(--color-text-primary-dark);
-  --tet-link-color-hover-dark: var(--color-text-secondary-dark);
-  --tet-link-color-active-dark: var(--color-text-link-dark);
-  --tet-link-color-focus-dark: var(--color-text-link-dark);
-  --tet-link-color-disabled-dark: var(--color-text-disabled-dark);
+  --tet-link-color: var(--tc-text-primary);
+  --tet-link-color-hover: var(--tc-text-secondary);
+  --tet-link-color-active: var(--tc-text-tertiary);
+  --tet-link-color-focus: var(--tc-blue-40);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled);
 }
 
 .tet-link,
@@ -372,6 +367,14 @@
   line-height: 1.5rem;
   cursor: pointer;
 }
+.tet-link.dark,
+.tet-link__arrow.dark {
+  --tet-link-color: var(--tc-text-primary-dark);
+  --tet-link-color-hover: var(--tc-text-secondary-dark);
+  --tet-link-color-active: var(--tc-text-tertiary-dark);
+  --tet-link-color-focus: var(--tc-blue-40-dark);
+  --tet-link-color-disabled: var(--tc-button-text-inverse-disabled-dark);
+}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   --icon-color: var(--tet-link-color);
@@ -394,15 +397,10 @@
 }
 .tet-link:focus-visible,
 .tet-link__arrow:focus-visible {
-  color: var(--tet-link-color-focus);
   outline: solid var(--tet-link-color-focus) 0.125rem;
   outline-offset: 0.375rem;
   border-radius: 0.125rem;
 }
-.tet-link:focus-visible tet-icon,
-.tet-link__arrow:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus);
-}
 .tet-link.disabled,
 .tet-link__arrow.disabled {
   color: var(--tet-link-color-disabled);
@@ -417,47 +415,6 @@
 .tet-link__arrow.disabled:focus-visible {
   outline: none;
 }
-.tet-link.dark,
-.tet-link__arrow.dark {
-  color: var(--tet-link-color-dark);
-}
-.tet-link.dark tet-icon,
-.tet-link__arrow.dark tet-icon {
-  --icon-color: var(--tet-link-color-dark);
-}
-.tet-link.dark:hover,
-.tet-link__arrow.dark:hover {
-  color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:hover tet-icon,
-.tet-link__arrow.dark:hover tet-icon {
-  --icon-color: var(--tet-link-color-hover-dark);
-}
-.tet-link.dark:active,
-.tet-link__arrow.dark:active {
-  color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:active tet-icon,
-.tet-link__arrow.dark:active tet-icon {
-  --icon-color: var(--tet-link-color-active-dark);
-}
-.tet-link.dark:focus-visible,
-.tet-link__arrow.dark:focus-visible {
-  color: var(--tet-link-color-focus-dark);
-  outline-color: solid var(--tet-link-color-focus-dark);
-}
-.tet-link.dark:focus-visible tet-icon,
-.tet-link__arrow.dark:focus-visible tet-icon {
-  --icon-color: var(--tet-link-color-focus-dark);
-}
-.tet-link.dark.disabled,
-.tet-link__arrow.dark.disabled {
-  color: var(--tet-link-color-disabled-dark);
-}
-.tet-link.dark.disabled tet-icon,
-.tet-link__arrow.dark.disabled tet-icon {
-  --icon-color: var(--tet-link-color-disabled-dark);
-}
 .tet-link tet-icon,
 .tet-link__arrow tet-icon {
   padding-left: 0.25rem;

package/dist/components/index.js

@@ -79,7 +79,7 @@ import { TetThankYouViewV2 } from './tet-thank-you-view-v2.js';
 import { TetTooltip } from './tet-tooltip.js';
 import { TetTvGiftBlock } from './tet-tv-gift-block.js';
 import { TetTvGiftList } from './tet-tv-gift-list.js';
-export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-80df61e3.js';
+export { g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-5749376d.js';
 
 const defineCustomElements = (opts) => {
     if (typeof customElements !== 'undefined') {