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

package/dist/collection/components/advanced/cards/tet-business-card/tet-business-card.js

@@ -53,14 +53,14 @@ export class TetBusinessCard {
     }
     render() {
         const { mainTitle, subTitle, infoText, type, size, theme } = this;
-        return (h("div", { key: '96165aedcdc091fddef9b8dca86f772fd924bec1', ref: divRef => {
+        return (h("div", { key: '066330f77ecf6c96ba0770b98564e5f6e5b1d029', ref: divRef => {
                 this.rootRef = divRef;
             }, class: {
                 'tet-business-card': true,
                 [`tet-business-card__type--${type}`]: true,
                 [`tet-business-card__size--${size}`]: true,
                 [`theme-${theme}`]: true,
-            } }, h("div", { key: 'a8504e7ab805ccad0c08cf15b11c5629c84cd77b', class: "tet-business-card__body" }, h("div", { key: 'd5563e6fe3921bb87a64914b5d4aa6e59f87cf07', class: "tet-business-card__content" }, h("div", { key: 'd5b3ee5137b06c875a5d2e615adb02c2a8451990', class: "tet-business-card__title" }, h("slot", { key: '7d0e9ad3c8b38d3492443339d770e5a017124076', name: "title" }, mainTitle)), h("slot", { key: '76c05b8e5cc73a8941e06d666a4d7294978047d4', name: "subtitle" }, subTitle && (h("div", { key: '81f3efd2f12edf4448ed6d7a74cbce5d5a3afe44', class: { 'tet-business-card__subtitle': true, 'tet-business-card__subtitle--large': !infoText } }, subTitle)))), h("slot", { key: 'd7d4f832f6c02d6008e2ec54e00d84420a10b4c2', name: "button" })), h("slot", { key: '12086064878270177e789589924d118a42ae3a0e', name: "infotext" }, infoText && h("div", { key: '916eb85788f27c5b29e2d0ffa6539e8d15da5e57', class: "tet-business-card__infotext" }, infoText))));
+            } }, h("div", { key: '939e25ef6fca5c2a52164487126c309011bca378', class: "tet-business-card__body" }, h("div", { key: '465c0a752bf42dfd434c135bf4c8eefad22446a4', class: "tet-business-card__content" }, h("div", { key: '75dca493790fc194120febf812a63598ec18667e', class: "tet-business-card__title" }, h("slot", { key: '10e4027f48b6c57ec65bddc70002b2b809fbb432', name: "title" }, mainTitle)), h("slot", { key: '75ca424d548d85ce7568b7739ff6c1aa8dbb71c0', name: "subtitle" }, subTitle && (h("div", { key: 'ff6b89b8d601b8c012e35827b2fda41db192fadc', class: { 'tet-business-card__subtitle': true, 'tet-business-card__subtitle--large': !infoText } }, subTitle)))), h("slot", { key: 'ee6f8c786b006c264b0d07febc899973845567bf', name: "button" })), h("slot", { key: '4ab55517f75d83993fa068f961f9119da314db73', name: "infotext" }, infoText && h("div", { key: 'bb1d51f89fbd32256e9007d57c472d14f252f5e1', class: "tet-business-card__infotext" }, infoText))));
     }
     static get is() { return "tet-business-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-business-compare-card/tet-business-compare-card.js

@@ -28,10 +28,10 @@ export class TetBusinessCompareCard {
     }
     render() {
         const { mainTitle, bulletPoints, theme, pricePrefix, price, currency } = this;
-        return (h("div", { key: '2a4bef1533024f3253aa91a82de522c193be0cd6', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: 'f6413714484dd1983e2baabc6ac8211a1a7eb481', class: "tet-business-compare-card__body" }, h("div", { key: 'c0f766a7f7417c9bce5ca81feef952279ef8148a', class: "tet-business-compare-card__title" }, h("slot", { key: '366ff9ae2e269eb68189929d66db47f6c1a74d7e', name: "title" }, mainTitle)), h("div", { key: '251d79079bda5e6567508d700dff9dc0b80c6140', class: "tet-business-compare-card__content" }, h("slot", { key: 'b239aef6b23a749dcface76624a3ff4a39744fe0', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '781d4326d121d84c56aaf6df758bf3e7f3021f07', class: "bullet-points" }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: 'aa5623b4afc85a0110b5506377145a2179b8033a', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: 'c5db9896c62f09ed1e8f571afb4ec2454085bed6', class: "tet-business-compare-card__price" }, h("span", { key: 'e3724b2b1b318cf63a3dcc12c69968e7afbd3672', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: '7a8cd4e571046abd58c5e99bebe8b4d0cc7a4c82', class: "tet-business-compare-card__price" }, price), h("div", { key: 'aa6d864b6955e425c40a2884de595970b7229aa6', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: '50d9ec3c04056a2d72a1ef1b4ab9ce4b5fab653c', class: {
+        return (h("div", { key: 'e2190b37aeba7e7f88b3a8b0f0b992243eabf1d0', class: { 'tet-business-compare-card': true, [`theme-${theme}`]: true } }, h("div", { key: 'be9dd95cdbb534213a3f6538c746a3d44f321b05', class: "tet-business-compare-card__body" }, h("div", { key: 'd0e199551259deb7a8ac0f15290b552bd76f2373', class: "tet-business-compare-card__title" }, h("slot", { key: '7bba451d5e5fb1a3a5df8a533934cea9dd5fb6e7', name: "title" }, mainTitle)), h("div", { key: '093702dcaf529c8593abaf43a98390c01a219d12', class: "tet-business-compare-card__content" }, h("slot", { key: '11265cf169b0a2e951fac1f0bc33458fc00573a3', name: "content" }, !!(bulletPoints === null || bulletPoints === void 0 ? void 0 : bulletPoints.length) && (h("tet-text-list", { key: '3fd7293c4ae9a41e0c05516a8fc455a9d626bc07', class: "bullet-points" }, bulletPoints.map(bulletPoint => (h("p", null, bulletPoint)))))))), price && currency && (h("div", { key: '59df957f45cac06791c7f1d2c2321d12fcefc047', class: "tet-business-compare-card__price-wrapper" }, pricePrefix && (h("div", { key: '66a0099bb429091511c69611c033fbbc55621adf', class: "tet-business-compare-card__price" }, h("span", { key: '2f04b2b47f21daad771186c47297b3e33a8b9285', class: "tet-business-compare-card__price-prefix" }, pricePrefix, "\u00A0"), price)), !pricePrefix && h("div", { key: '83f62d5ba641a4eb9357ce4533f2966613913768', class: "tet-business-compare-card__price" }, price), h("div", { key: '078513c12cd63ab8b64416d4cd9884992a648a73', class: "tet-business-compare-card__price-currency" }, currency))), h("div", { key: 'd293b9b2213f851b54f538b689906db275d81659', class: {
                 'tet-business-compare-card__footer': true,
                 'tet-business-compare-card__footer--show': this.hasContentInFooter,
-            } }, h("slot", { key: 'c077435d59d26580c1b6d7c5b44ed458a9622285', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: '34e03f9512e432d2f7edbc27ff1703876a2dcb5b', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
+            } }, h("slot", { key: 'd9a9e644bd33df0dce9a1b83b0381b9fcee65ebd', ref: (slot) => (this.buttonSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "button" }), h("slot", { key: '95f796e4b614c16862215731794d883c7568a85a', ref: (slot) => (this.linkSlotRef = slot), onSlotchange: this.checkFooterSlotContent, name: "link" }))));
     }
     static get is() { return "tet-business-compare-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/cards/tet-card-list/test/tet-card-list.spec.js

@@ -10,7 +10,7 @@ describe('tet-card-list', () => {
         expect(page.root).toEqualHtml(`
       <tet-card-list>
         <mock:shadow-root>
-          <div class="tet-card-list__container" part="card-list-container">
+          <div class="tet-card-list__container light" part="card-list-container">
             <div class="tet-card-list__scroll-container">
               <div part="card-list" style="display: grid; grid-auto-flow: column; position: relative; overflow: hidden; width: 100%; height: 100%;">
                 <div part="scroll-container" class="tet-card-list"
@@ -19,12 +19,12 @@ describe('tet-card-list', () => {
                 </div>
               </div>
             </div>
-            <span class="tet-card-list__control tet-card-list__control--left">
-              <tet-icon class="tet-card-list__control__icon" name="chevron-left" tabindex="0"></tet-icon>
-            </span>
-            <span class="tet-card-list__control tet-card-list__control--right">
-              <tet-icon class="tet-card-list__control__icon" name="chevron-right" tabindex="0"></tet-icon>
-            </span>
+            <tet-button class="tet-card-list__control tet-card-list__control--left" iconmode="" theme="light">
+              <tet-icon class="tet-card-list__control__icon" name="chevron-left"></tet-icon>
+            </tet-button>
+            <tet-button class="tet-card-list__control tet-card-list__control--right" iconmode="" theme="light">
+              <tet-icon class="tet-card-list__control__icon" name="chevron-right"></tet-icon>
+            </tet-button>
             <div class="tet-card-list--hidden tet-card-list__scroll">
               <div class="tet-card-list__scroll--thumb"></div>
             </div>
@@ -33,15 +33,15 @@ describe('tet-card-list', () => {
       </tet-card-list>
     `);
     });
-    it('renders items', async () => {
+    it('renders a list with items in dark theme', async () => {
         const page = await newSpecPage({
             components: [TetCardList],
-            template: () => (h("tet-card-list", { withScrollbar: false, withMouseDrag: false }, h("div", { id: "item0" }), h("div", { id: "item1" }))),
+            template: () => (h("tet-card-list", { withScrollbar: false, withMouseDrag: false, theme: "dark" }, h("div", { id: "item0" }), h("div", { id: "item1" }))),
         });
         expect(page.root).toEqualHtml(`
       <tet-card-list>
         <mock:shadow-root>
-        <div class="tet-card-list__container" part="card-list-container">
+        <div class="tet-card-list__container dark" part="card-list-container">
           <div class="tet-card-list__scroll-container">
             <div part="card-list" style="display: grid; grid-auto-flow: column; position: relative; overflow: hidden; width: 100%; height: 100%;">
               <div part="scroll-container" class="tet-card-list"
@@ -50,19 +50,19 @@ describe('tet-card-list', () => {
               </div>
             </div>
           </div>
-          <span class="tet-card-list__control tet-card-list__control--left">
-            <tet-icon class="tet-card-list__control__icon" name="chevron-left" tabindex="0"></tet-icon>
-          </span>
-          <span class="tet-card-list__control tet-card-list__control--right">
-            <tet-icon class="tet-card-list__control__icon" name="chevron-right" tabindex="0"></tet-icon>
-          </span>
+          <tet-button class="tet-card-list__control tet-card-list__control--left" iconmode="" theme="dark">
+            <tet-icon class="tet-card-list__control__icon" name="chevron-left"></tet-icon>
+          </tet-button>
+          <tet-button class="tet-card-list__control tet-card-list__control--right" iconmode="" theme="dark">
+            <tet-icon class="tet-card-list__control__icon" name="chevron-right"></tet-icon>
+          </tet-button>
           <div class="tet-card-list--hidden tet-card-list__scroll">
             <div class="tet-card-list__scroll--thumb"></div>
           </div>
         </div>
         </mock:shadow-root>
-        <div id="item0" tabindex="0"></div>
-        <div id="item1" tabindex="0"></div>
+        <div id="item0"></div>
+        <div id="item1"></div>
       </tet-card-list>
     `);
     });

package/dist/collection/components/advanced/cards/tet-card-list/tet-card-list.css

@@ -368,12 +368,13 @@
   --card-list-mobile-horizontal-margin: 1rem;
   --card-list-vertical-padding: 0;
   --card-list-control-height: 12.5rem;
-  --card-list-control-button-height: 3.5rem;
-  --card-list-control-button-width: 3.5rem;
+  --card-list-control-button-height: 3.25rem;
+  --card-list-control-button-width: 3.25rem;
   --card-list-control-horizontal-margin: 5rem;
+  --card-list-control-icon-color: var(--tc-button-icon-primary);
   --card-list-scroll-margin: 3.5rem auto 0 auto;
-  --card-list-scroll-background-color: rgb(215, 219, 224);
-  --card-list-scroll-thumb-background-color: rgb(153, 160, 174);
+  --card-list-scroll-background-color: var(--tc-border-quaternary);
+  --card-list-scroll-thumb-background-color: var(--tc-border-secondary);
   --card-list-gap: 1rem;
 }
 
@@ -395,6 +396,18 @@
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
+.tet-card-list__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+  -webkit-overflow-scrolling: touch;
+}
+.tet-card-list__container.dark {
+  --card-list-control-icon-color: var(--tc-button-icon-primary-dark);
+  --card-list-scroll-background-color: var(--tc-border-quaternary-dark);
+  --card-list-scroll-thumb-background-color: var(--tc-border-secondary-dark);
+}
 .tet-card-list__scroll-container {
   width: var(--card-list-content-width);
   height: var(--card-list-content-height);
@@ -434,14 +447,8 @@
 .tet-card-list--no-scroll .tet-card-list__scroll {
   display: none;
 }
-.tet-card-list__container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  position: relative;
-  -webkit-overflow-scrolling: touch;
-}
 .tet-card-list__control {
+  --button-padding: 0;
   cursor: pointer;
   align-items: center;
   color: rgb(10, 11, 13);
@@ -459,15 +466,14 @@
   right: var(--card-list-control-horizontal-margin);
 }
 .tet-card-list__control__icon {
-  background-color: rgb(255, 255, 255);
+  --icon-size: 1.25rem;
+  --icon-color: var(--card-list-control-icon-color);
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   height: var(--card-list-control-button-height);
   width: var(--card-list-control-button-width);
-  --icon-size: 1.25rem;
-  box-shadow: 0 0.0625rem 0.1875rem rgba(10, 11, 13, 0.12), 0 0 0.0625rem rgba(10, 11, 13, 0.08);
 }
 .tet-card-list--hidden, .tet-card-list__control--hidden {
   display: none;

package/dist/collection/components/advanced/cards/tet-card-list/tet-card-list.js

@@ -8,10 +8,6 @@ import { getConvertedPixels, InertiaScroll } from "../../../../services/utils/in
  */
 export class TetCardList {
     constructor() {
-        /**
-         * All child elements of the list.
-         */
-        this.allElements = [];
         /**
          * The arrays containing cloned content elements.
          */
@@ -349,6 +345,7 @@ export class TetCardList {
         this.controlVisibility = { left: true, right: true };
         this.scrollThumbWidth = 0;
         this.isSmallContainer = false;
+        this.theme = 'light';
         this.withControls = true;
         this.controlScrollAmount = 350;
         this.scrollFullWidth = false;
@@ -450,10 +447,6 @@ export class TetCardList {
                 this.setupScrollbar();
             }
         });
-        this.allElements = Array.from(this.element.children);
-        this.allElements.forEach((element) => {
-            element.setAttribute('tabindex', '0');
-        });
         if (this.withVirtualScroll) {
             this.setupVirtualScroll();
         }
@@ -548,7 +541,7 @@ export class TetCardList {
         this.inertialScroll.scrollTo({ left: firstElementPosition }, true);
         const allClones = this.element.querySelectorAll('[data-clone-id]');
         allClones.forEach((element) => {
-            element.removeAttribute('tabindex');
+            element.setAttribute('tabindex', '-1');
         });
     }
     /**
@@ -653,18 +646,19 @@ export class TetCardList {
         this.dimensions.element.width = elementRect.width;
     }
     render() {
-        return (h(Host, { key: '3ed05945ef1b1adb765d000ee12d06e60136a032' }, h("div", { key: '31679bf3b2bd5e1b60cdecf35ffe3a7d1d2a7ea3', class: {
+        return (h(Host, { key: '005ac25320712b7f23c8f79df1025910e7b35608' }, h("div", { key: 'a81b2ecf33f0481bcef04eb71c7814f9a23dba37', class: {
                 'tet-card-list__container': true,
                 'tet-card-list--no-scroll': this.disableScroll,
-            }, part: "card-list-container" }, h("div", { key: '06b020ebc6de0aa682a1acf366723d8f7b9f5260', class: "tet-card-list__scroll-container" }, h("div", { key: '20bac34c3590f976f0952b9ef5dea49700b5a9cd', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: '0358b22b6fd6f493030e8fa73ff5b835a76e8fd7' }))), h("span", { key: '4c7f0549e7aa8ef2a72e1151e84a17184baf7080', class: {
+                [this.theme]: true,
+            }, part: "card-list-container" }, h("div", { key: 'a2c7327104586ef66b669880501ed329c4cda6b3', class: "tet-card-list__scroll-container" }, h("div", { key: 'fda301b0393895ac1c9cd0393cbc350a0bccc02e', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: '2bdfb39da59c43f0231f986d6ce87ac69803746b' }))), h("tet-button", { key: '3b823c1fb350c2d1000588666dc81ade69c07585', theme: this.theme, iconMode: true, class: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--left': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.left,
-            } }, h("tet-icon", { key: '235dded58494cfb3bb4ef16d735bf4a333e7e627', onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, onKeyUp: this.handleLeftControlKeyUp, name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon", tabIndex: 0 })), h("span", { key: '7025c1270f0d69ec4af61d10233bccfc0ad4799d', class: {
+            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, onKeyUp: this.handleLeftControlKeyUp }, h("tet-icon", { key: '79afbc22bdbe383797d16abceadde827e626b5cc', name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("tet-button", { key: '4e598643ce5b318342efc09a463f4a45ebc547db', theme: this.theme, iconMode: true, class: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--right': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.right,
-            } }, h("tet-icon", { key: '49d16d988aaef47b3d6400da6e3dc80f35c76487', onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp, name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon", tabIndex: 0 })), h("div", { key: 'f9b94f3735c2ec14958003c5bde697f8a334bbff', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: 'b51c17625daaf192586174d24a71ea1be743592e', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
+            }, onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, onKeyUp: this.handleRightControlKeyUp }, h("tet-icon", { key: '58ade768e96cf33ac377d1ffff1726e569415614', name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: '8e720e69e34a6cf019e3dd0730395e713f6feb1c', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: '24451138506afefd496849925ac390d71044d059', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
     }
     static get is() { return "tet-card-list"; }
     static get encapsulation() { return "shadow"; }
@@ -680,6 +674,24 @@ export class TetCardList {
     }
     static get properties() {
         return {
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'dark'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the card list."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'light'"
+            },
             "withControls": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/advanced/cards/tet-compare-card/tet-compare-card.css

@@ -2946,8 +2946,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,
@@ -5097,7 +5099,7 @@
   border: 0.0625rem solid var(--input-border-color);
   color: var(--input-text-color);
   background: var(--input-background-color);
-  outline: none;
+  outline: 0.125rem solid transparent;
   font-size: inherit;
   font-family: var(--input-font-family);
   font-weight: 500;
@@ -5135,6 +5137,12 @@
 .tet-input__base.tet-input__mint-original:not(:disabled):focus, .tet-input__base.tet-input__mint-original:not(:disabled):active {
   outline: none;
 }
+.tet-input__base.tet-input__mint-original.keyboard-focus:focus {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  box-shadow: none;
+}
 .tet-input__base[disabled] {
   cursor: not-allowed;
   outline: none;
@@ -5153,6 +5161,15 @@
   border: 0.0625rem solid var(--input-focus-border-color);
   box-shadow: 0 0 0 0.25rem var(--input-focus-outline-color);
 }
+.tet-input__base.keyboard-focus:focus {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  box-shadow: none;
+}
+.tet-input__base.error {
+  border-color: var(--input-color-error);
+}
 
 .tet-input__label {
   display: block;

package/dist/collection/components/advanced/cards/tet-compare-cards/tet-compare-cards.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,

package/dist/collection/components/advanced/cards/tet-compare-cards/tet-compare-cards.js

@@ -115,7 +115,7 @@ export class TetCompareCards {
         });
     }
     render() {
-        return (h(Host, { key: 'bd563d086140956ed4fd51fce1a668f1354996c4', class: {
+        return (h(Host, { key: '88da7853594141123a0ad91cb82acf7cf6b43c34', class: {
                 'must-initialize': true,
                 'initialized': this.initializedState
             } }, this.showLoader ? (this.renderLoader()) : (h("div", { class: {

package/dist/collection/components/advanced/cards/tet-compare-cards-tab/tet-compare-cards-tab.js

@@ -163,7 +163,7 @@ export class TetTabCompareCards {
         return (h("div", { class: "tet-compare-cards-tab__content" }, h("tet-compare-cards", { layout: this.layout, "force-column": this.forceColumn, "vat-text": vatText !== null && vatText !== void 0 ? vatText : false, "card-script": cardScript !== null && cardScript !== void 0 ? cardScript : false, data: cardsWithAddedSACData, newUrlGeneratorStructure: this.newUrlGeneratorStructure })));
     }
     render() {
-        return (h(Host, { key: 'b291e14cab4904cc17bdc26fe3ae0b99f3c59f91' }, h("div", { key: '29973dd0534d5f4f9b8aacb6f8bcdd1e9359f2cb', class: "tet-compare-cards-tab-wrapper" }, this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: '0de6824a9d025f344fe22815adb5d8796b183d98', class: {
+        return (h(Host, { key: '0e387a6e052be624cebfd8e0b60184e4101b899b' }, h("div", { key: '8699855979485ac80cec2e03a9e5c75efcf51705', class: "tet-compare-cards-tab-wrapper" }, this.renderTabHeader(this.data, 1), this.renderLoader(), h("div", { key: 'fa1e5dfd841e44dae8ad5b9507bfd9af36eef376', class: {
                 'tet-compare-cards-tab__cards': true,
                 'hidden': this.showLoader
             } }, this.productDataLoaded ? this.renderContent(this.data, 1) : ''))));

package/dist/collection/components/advanced/customer/tet-asset-addresses/tet-asset-addresses.js

@@ -132,7 +132,7 @@ export class TetAssetAddresses {
         return this.loadAddresses();
     }
     render() {
-        return (h(Host, { key: '44b88a4854a0362e1f0d4c777ecc3e8b591fdd4e', class: { 'asset-adddress-selection': true, [this.theme]: true } }, this.showLoader ? (h("tet-placeholder", { height: "12.5rem", darkTheme: this.theme === 'dark' })) : (this.renderAddressList()), this.isAddressSearchVisible && (h("tet-address-search", { key: '42aad5c8dcdfafd98c89b39dbb3ffa581e59a03b', inputDisabled: !!this.lastAddedKey, language: "lv", placeholder: this.addressSearchPlaceholder, newStyle: true, theme: this.theme }))));
+        return (h(Host, { key: 'b69c45714993063aeaf78d6706bcc69e3500abae', class: { 'asset-adddress-selection': true, [this.theme]: true } }, this.showLoader ? (h("tet-placeholder", { height: "12.5rem", darkTheme: this.theme === 'dark' })) : (this.renderAddressList()), this.isAddressSearchVisible && (h("tet-address-search", { key: '96758743324cc25d1fb43a07a9e0a030636d5dfd', inputDisabled: !!this.lastAddedKey, language: "lv", placeholder: this.addressSearchPlaceholder, newStyle: true, theme: this.theme }))));
     }
     static get is() { return "tet-asset-addresses"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/customer/tet-asset-availability-addresses/tet-asset-availability-addresses.js

@@ -127,7 +127,7 @@ export class TetAssetAvailabilityAddresses {
     }
     ;
     render() {
-        return (h(Host, { key: '27bc920b2cfbe3c87be76051e3a96d874ffc3197', class: { 'asset-adddress-selection': true, [this.theme]: true } }, this.showLoader ? (h("tet-placeholder", { height: "12.5rem", darkTheme: this.theme === 'dark' })) : (this.renderAddressList())));
+        return (h(Host, { key: '8b7f535828fdc055065729ec970adb083796950b', class: { 'asset-adddress-selection': true, [this.theme]: true } }, this.showLoader ? (h("tet-placeholder", { height: "12.5rem", darkTheme: this.theme === 'dark' })) : (this.renderAddressList())));
     }
     static get is() { return "tet-asset-availability-addresses"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/customer/tet-customer-assets/tet-customer-assets.js

@@ -117,7 +117,7 @@ export class TetCustomerAssets {
         return provisioningStatus === 'Active' && tetProductType !== 'ConsumerGoods';
     }
     render() {
-        return (h(Host, { key: '109270e6536c721b63e8c5647ff856ac159eca06' }, h("div", { key: '52d7fa33f0a0e2e0c4a6ced30f42aa9b6388ca25', class: { wrapper: this.showLoader && this.singleLoader, 'dark-theme': this.darkTheme } }, this.showLoader && this.singleLoader
+        return (h(Host, { key: '483c3486e39408f0f1ea27875a104889b096b4b0' }, h("div", { key: '03989bf22ff7be29d94e07e7e7f9f95c47cd61db', class: { wrapper: this.showLoader && this.singleLoader, 'dark-theme': this.darkTheme } }, this.showLoader && this.singleLoader
             ? h("tet-loader", { class: "loader-single" })
             : this.showLoader ? this.renderLoader() : this.renderAssetsList())));
     }

package/dist/collection/components/advanced/customer/tet-referral/tet-referral.js

@@ -39,7 +39,7 @@ export class TetReferral {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '0a86666962afe2734899e1de72dc0bbc3496cac4' }, h("div", { key: 'febf65a5863c578084c29df177795eb419fdab24', class: "wrapper" }, h("div", { key: '0c54e058f707353687f4e29931566c95738787c0', class: "image-container" }, h("img", { key: 'f90df32dd775db50ee5d1ce259857ed5c334adc7', src: t('components-referral-image-url'), alt: "" })), h("div", { key: '773cdc14136a951a64f8b00e1157517d89b07887', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: '7ff948e951342b4ebf2eebbe47c112a21867e71b', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: 'fb8e35d4ed3fd23c579f13f7282955ede7e42f71', class: "referral-block" }, h("div", { key: '8fec42a1837f9c2d026be58b2ee94364c94abf12', class: "url-wrapper" }, h("div", { key: '20ac067bbad741bb92dbb7c80931d01707c4595a', class: "referral-url" }, this.getReferralUrl()), h("div", { key: '66f52bcad0cfb2229ebd8b67e21811a8b88fb679' }, h("div", { key: '1b9b85c7d882904e75b88c46f09720df8a8efdc0', class: "button-wrapper" }, h("tet-tooltip", { key: 'd686c3719b47c6cffcda0868aec7de60269b7420', class: "tooltip", doNotShowOnHover: true, ref: (el) => { this.tooltip = el; } }, t('components-referral-tooltip')), h("tet-button", { key: '4d77de2a967c74d751ae21a819775d35d90ac8b7', clickCallback: this.copyToClipBoard, type: "primary" }, t('components-referral-copy-button-label')))))))));
+        return (h(Host, { key: '0064b74f704d5e11f664b35156a2ede4b6b16bd8' }, h("div", { key: '462207019286105348701d58b90c7098479abb90', class: "wrapper" }, h("div", { key: '63b2a82855aa8bc610277856910911e0f708be7e', class: "image-container" }, h("img", { key: '511c8bef34f850c128f47271cb1df45f5a15a55c', src: t('components-referral-image-url'), alt: "" })), h("div", { key: '40961456c31fbaf123305588f5e4c5289f08cf44', class: "subtitle-container" }, t('components-referral-subtitle')), h("div", { key: '17e687cbb23602fd739678558d734b6450173fa1', class: "description-container", innerHTML: t('components-referral-description') }), h("div", { key: 'b327b003f8c3e62bb21594bbbadfe3121a30e072', class: "referral-block" }, h("div", { key: 'b1829766e2fb9e3f5448ea31790cbed2728146e9', class: "url-wrapper" }, h("div", { key: '3e6d030e9614925a0ac8a17f64dea0ad340f778f', class: "referral-url" }, this.getReferralUrl()), h("div", { key: 'e10bc99e331cbbeeb5275d8e6a71ffaf00793c8f' }, h("div", { key: '0fc05c0c6fec23d084b72e22f4c66bf2a6f7ce6a', class: "button-wrapper" }, h("tet-tooltip", { key: '4c8495e5ab070d3dd50625fc01360e77eb32edaa', class: "tooltip", doNotShowOnHover: true, ref: (el) => { this.tooltip = el; } }, t('components-referral-tooltip')), h("tet-button", { key: '624e5cd9d66732b4e6af2a2adea911f449e7cb84', clickCallback: this.copyToClipBoard, type: "primary" }, t('components-referral-copy-button-label')))))))));
     }
     static get is() { return "tet-referral"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/advanced/dialog/tet-multi-step-dialog/tet-multi-step-dialog.js

@@ -90,7 +90,7 @@ export class TetMultiStepDialog {
         return (h("div", { innerHTML: step, "data-step": Number(index) + 1, class: "multi-step-dialog__step", ref: this.setStepBlocks }));
     }
     render() {
-        return (h(Host, { key: '21b5aa61d725cece8fccd4fb4e55923f7cc80e64', class: "multi-step-dialog" }, h("tet-dialog", { key: '55084f0b12f729449ad6e11bade031fb30b768cd', class: this.tetDialogClass, "is-open": this.isOpen, "data-screen-key": this.dialogDataScreenKey, "footer-display": "right", ref: el => this.tetDialog = el }, h("div", { key: '7fc39168be0da45245964b1210044d6aa5849bbf', innerHTML: this.content }), this.steps.map((step, index) => (this.renderStep(step, index))), h("tet-button", { key: '1cdac7e4152edc5d072867550ead2340c6583a48', class: "footer-button", slot: "footer", size: "medium", theme: "light", type: "secondary", ref: el => this.prevButton = el }, t('components-go-back')), h("tet-button", { key: 'eb66f1c842c20279e861ce7cd10c1f716e594462', class: "footer-button", slot: "footer", size: "medium", theme: "light", ref: el => this.nextButton = el }, t('components-next-step')))));
+        return (h(Host, { key: '34db2ec334feee439233fe9bfecad8d3fd74e83a', class: "multi-step-dialog" }, h("tet-dialog", { key: '4fa5b5912bb23c4a7a46c1fff2b25bd764def080', class: this.tetDialogClass, "is-open": this.isOpen, "data-screen-key": this.dialogDataScreenKey, "footer-display": "right", ref: el => this.tetDialog = el }, h("div", { key: 'cedf49be9783508678690fc167dbd69db529dbd4', innerHTML: this.content }), this.steps.map((step, index) => (this.renderStep(step, index))), h("tet-button", { key: 'bda70d18f6ef7b3199ec1305ad6e0fe0d1e5237a', class: "footer-button", slot: "footer", size: "medium", theme: "light", type: "secondary", ref: el => this.prevButton = el }, t('components-go-back')), h("tet-button", { key: '7b56a40b779a0977a04a1afb148502af3a442499', class: "footer-button", slot: "footer", size: "medium", theme: "light", ref: el => this.nextButton = el }, t('components-next-step')))));
     }
     static get is() { return "tet-multi-step-dialog"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,7 +121,7 @@ export class TetAvailabilityContactForm {
         return (h("div", null, h("tet-dialog", { ref: (element) => this.dialogElement = element, "footer-display": "hidden", "is-open": this.showAvailabilityContactForm, closeOnEscape: true, closeOnOverlayClick: true }, h("div", { class: "form-container" }, h("tet-icon", { name: "confirm-md", class: "icon icon-success icon-size" }), this.showTitle && h("h2", { class: "form-title" }, t('components-availability-contact-form-success-title')), h("p", { class: "form-subtitle" }, t('components-availability-contact-form-success-subtitle')), h("tet-button", { class: "form-container-close", clickCallback: this.closeDialogElement, size: "medium", type: "primary", theme: "light" }, h("span", null, t('components-availability-contact-form-success-close')))))));
     }
     render() {
-        return (h("div", { key: 'edfc7878604e1713e7fc6e8e11ca600f666b30e4', class: { 'dark-theme': this.darkTheme } }, this.success ? this.renderSuccessStep() : this.renderForm()));
+        return (h("div", { key: 'ae420e44d0b579330a3c3e2cf815da17482d085b', class: { 'dark-theme': this.darkTheme } }, this.success ? this.renderSuccessStep() : this.renderForm()));
     }
     static get is() { return "tet-availability-contact-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -64,7 +64,7 @@ export class TetContactForm {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("div", { key: 'f18f287ab6c7e39fd3cf0f8fb9034e7b27e583f0', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: 'ea5a27583ee389a4b63b53504a035397df66a1f4', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '6124dc6727a91731e029031fd4ca5114ce69bba0', class: "form-container" }, this.showTitle && h("h2", { key: 'caeae995f845223363d2a0b6cf5b6f3ea8112625', class: "form-title" }, t('components-contact-form-title')), h("p", { key: 'c68f5d74b3babdd37bea5d1f18484631cdff9dfb', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: '3584fceaec2dbcf22a2628c7a4289854ed6d3959', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: '0c51ee80873bdc7dee1a40a7fd9540f0fdb8da80', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
+        return (h("div", { key: '0f6aa2d7c33c6326da1eb9ad4be3cf10046d302f', class: { 'dark-theme': this.darkTheme } }, h("tet-container", { key: '7bcaaf3775277f2cf9a26dbaf58ef99ad46a25a2', class: "container" }, this.showLoader && this.renderLoader(), h("div", { key: '2ce317f0bd317eb8495767906c5c21ac4950bba0', class: "form-container" }, this.showTitle && h("h2", { key: 'f0864e23ea8ab2136e91c67b938953a08ded12b8', class: "form-title" }, t('components-contact-form-title')), h("p", { key: 'd1dff397e9069528487e64ce336d6af3285e37f6', class: "form-subtitle" }, t(this.subtitle)), h("tet-input", { key: '853cffe48d733fd28cfbf1beb855c3b6c17ce499', class: "form-input", placeholder: "+37122345678", ref: (element) => this.phoneInput = element, validators: this.validators, label: this.showInputLabel ? t('components-contact-form-input-label') : null, theme: this.darkTheme ? 'dark' : 'classic' }), h("tet-button", Object.assign({ key: '6cab331bcbb61d7332a0d5634d93fae4ef775f0a', class: "form-submit", type: "primary", clickCallback: this.createManualTask, innerHTML: t('components-contact-form-submit') }, this.submitButtonProps))))));
     }
     static get is() { return "tet-contact-form"; }
     static get encapsulation() { return "shadow"; }

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

@@ -32,7 +32,7 @@ export class TetTvGiftBlock {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: '92696bba33fe1a68ee0e3536915b36af76f73f9c' }, h("div", { key: '897b1fbcd53007c048463fbd12810c7f3ca0bcad', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '991648fad30a6dd918b37c566dc5b6c7e4231390', class: "tv-gift__header" }, h("slot", { key: '0876e4877ccc771c9f4b28cb6bf71f9feb90df10', name: "header" }, this.headerImageSrc && h("img", { key: '48bb59bb27d96715a7f72d7ccbb1fbc802d16e9e', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '91b005d70b4b3f9d8f9ce46d6c38b6331711caec', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: 'f7c26e59eb77893ea2d4acb567572fb3e40aa480', class: "tv-gift__content" }, h("slot", { key: 'dc05b0ec2ea45d1a9fad8638b395d86aa1ae852b' })), h("div", { key: '08290439fa8cd2505f5ea8477377ebbde1ee9894', class: "tv-gift__footer" }, h("slot", { key: '1901fed5092247a08f7b898e52aea16d1f5ab94d', name: "footer" }, h("span", { key: '6b01e9c4025b3f299d4f98103762031a059f1ca5', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: '525292a9478547c48066ff9e06bcfdd8e9df771d', class: "tv-gift__footer__text" }, this.footerText))))));
+        return (h(Host, { key: '8c79d071bc98c82f48762d154fef7448950a7e32' }, h("div", { key: '67758e35a06cd4c128af15d923e99570a2375979', class: { 'tv-gift': true, [`tv-gift--${this.containerSize}`]: true } }, h("div", { key: '370962e4b7a9f1822b270d537a34f736b6049c96', class: "tv-gift__header" }, h("slot", { key: 'e3594ba4db75a9c0805aecccf621a22789a9e0a8', name: "header" }, this.headerImageSrc && h("img", { key: '83910cd0059bca5ae36118716c2d19382d6e5b13', class: "tv-gift__header__image", src: this.headerImageSrc }), h("div", { key: '463fdccc8245217d5405d37a9f73104f6cafa8bf', class: "tv-gift__header-text" }, this.headerTitle))), h("div", { key: '80f9cb37b012591d204175a54c8d187322d0e6d1', class: "tv-gift__content" }, h("slot", { key: 'a3e0d55166e9075490abba52391297d88734e223' })), h("div", { key: '44d02285e3993535e988b362ad5e9569a6651c09', class: "tv-gift__footer" }, h("slot", { key: '23755d1972103cade53bfce4225b496eb703f1ed', name: "footer" }, h("span", { key: '5242ae5997d9d71bd7666d7a11871454a42ac275', class: "tv-gift__footer__title" }, this.footerTitle), h("span", { key: 'c1ee7e119c33267b2acdae4f8a5f5ef001bccfbe', class: "tv-gift__footer__text" }, this.footerText))))));
     }
     static get is() { return "tet-tv-gift-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,11 +34,11 @@ export class TetTvGiftList {
         this.setContainerSize();
     }
     render() {
-        return (h(Host, { key: '03b905cfa7f9ed90dfb5c246a85a055238db9100' }, h("div", { key: 'a45e8c6a22da3540dc436eb994828c4ba57cdb46', class: {
+        return (h(Host, { key: '7d7bdc15378e32ec3fd78b404d54342fcd5ce6c9' }, h("div", { key: '08861eca7c38fcd24aa3231af7479b8e0495d87a', class: {
                 'tv-gift-list': true,
                 [`tv-gift-list--${this.containerSize}`]: true,
                 'tv-gift-list--image-list': Boolean(this.imageSource),
-            } }, this.imageSource && (h("div", { key: '983f54e5686bd9b283f78e5d1b459540e39cff1b', class: "tv-gift-list__image__wrapper" }, h("img", { key: '46506f6a6a0c4f4a1b77df0aad125b00be572be0', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: 'd9a9045bbe16cd6b75c5eb1c1e65ecd878a9a983', class: "tv-gift-list__list__wrapper" }, h("span", { key: 'f777d79a0b03b3d84ceabfaefdc78195df317623', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: '56ba3f5ae9e1de5a62c5f503ab7b7c7c31d482f7', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
+            } }, this.imageSource && (h("div", { key: '0b177a68323039c0a4c79fa73473a05a5b40329a', class: "tv-gift-list__image__wrapper" }, h("img", { key: '8cf3cc6d5c1ee264ddb83a225fc218bd27e59f67', class: "tv-gift-list__image", src: this.imageSource }))), h("div", { key: 'c3bda23b93abbbd81ff90dedc5125066e1acb091', class: "tv-gift-list__list__wrapper" }, h("span", { key: '47a6223e9335e0d173ada3653b62785d5c06088f', class: "tv-gift-list__list__header" }, this.header), h("ul", { key: 'a3951d147c88567ea4219e0131ed388b701c9b33', class: "tv-gift-list__list" }, this.list.map(item => (h("li", { class: "tv-gift-list__list__item" }, h("tet-icon", { name: this.listBulletIcon }), item))))))));
     }
     static get is() { return "tet-tv-gift-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -432,6 +432,15 @@
   --button-background: rgb(255, 255, 255);
   --button-box-shadow: 0 0 0 0.1875rem rgba(215, 219, 224, 0.7);
 }
+.button--type-primary.button-dark-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-box-shadow: none;
+  --button-background: rgb(255, 255, 255);
+  --button-border-color: rgb(255, 255, 255);
+}
 .button--type-primary.button-dark-theme:active:not(:disabled) {
   --button-background: rgb(192, 197, 206);
   --button-border-color: rgb(192, 197, 206);
@@ -478,6 +487,14 @@
   --button-border-color: rgb(22, 25, 29);
   --button-box-shadow: 0 0 0 0.1875rem rgba(67, 75, 86, 0.6);
 }
+.button--type-primary.button-light-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-background: rgb(10, 11, 13);
+  --button-box-shadow: none;
+  --button-border-color: rgb(10, 11, 13);
+}
 .button--type-primary.button-light-theme:active:not(:disabled) {
   --button-background: rgb(88, 99, 116);
   --button-border-color: rgb(88, 99, 116);
@@ -571,6 +588,15 @@
   --button-border-color: rgb(153, 160, 174);
   --button-box-shadow: 0 0 0 0.1875rem rgba(192, 197, 206, 0.4);
 }
+.button--type-secondary.button-dark-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-border-color: rgb(247, 247, 247);
+  --button-background: transparent;
+  --button-box-shadow: none;
+}
 .button--type-secondary.button-dark-theme:active:not(:disabled) {
   --button-background: rgba(247, 247, 247, 0.17);
   --button-border-color: rgb(235, 237, 239);
@@ -619,6 +645,15 @@
   --button-background: rgba(153, 160, 174, 0.6);
   --button-box-shadow: 0 0 0 0.1875rem rgba(35, 40, 46, 0.45);
 }
+.button--type-secondary.button-light-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-text-color: rgb(10, 11, 13);
+  --button-border-color: rgb(10, 11, 13);
+  --button-background: transparent;
+  --button-box-shadow: none;
+}
 .button--type-secondary.button-light-theme:active:not(:disabled) {
   --button-text-color: rgb(10, 11, 13);
   --button-background: rgba(215, 219, 224, 0.6);
@@ -667,6 +702,15 @@
   --button-border-color: rgb(192, 197, 206);
   --button-box-shadow: 0 0 0 0.1875rem rgba(215, 219, 224, 0.35);
 }
+.button--type-ghost.button-dark-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-background: rgba(215, 219, 224, 0.01);
+  --button-box-shadow: none;
+  --button-border-color: transparent;
+}
 .button--type-ghost.button-dark-theme:active:not(:disabled) {
   --button-border-color: transparent;
 }
@@ -706,12 +750,20 @@
   --button-text-color: rgb(88, 99, 116);
   --button-border-color: transparent;
 }
-.button--type-ghost.button-light-theme:focus:not(:disabled) {
+.button--type-ghost.button-light-theme:focus:not(:disabled), .button--type-ghost.button-light-theme:focus-visible:not(:disabled) {
   --button-text-color: rgb(10, 11, 13);
   --button-border-color: rgb(153, 160, 174);
   --button-background: rgba(153, 160, 174, 0.01);
   --button-box-shadow: 0 0 0 0.1875rem rgba(153, 160, 174, 0.3);
 }
+.button--type-ghost.button-light-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-box-shadow: none;
+  --button-border-color: transparent;
+  --button-background: transparent;
+}
 .button--type-ghost.button-light-theme:active:not(:disabled) {
   --button-text-color: rgb(35, 40, 46);
   --button-border-color: transparent;
@@ -749,6 +801,9 @@
   --button-border-color: transparent;
   --button-background: transparent;
 }
+.button--type-link:focus-visible:not(:disabled), .button--type-link:focus:not(:disabled) {
+  border-radius: 0.625rem;
+}
 .button--type-link.button-dark-theme {
   --button-text-color: rgb(247, 247, 247);
 }
@@ -760,6 +815,13 @@
   --button-text-color: rgb(215, 219, 224);
   --button-text-decoration: underline;
 }
+.button--type-link.button-dark-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-text-color: rgb(247, 247, 247);
+}
 .button--type-link.button-dark-theme:active:not(:disabled) {
   --button-text-color: rgb(247, 247, 247);
   --button-text-decoration: underline;
@@ -796,6 +858,12 @@
   --button-text-color: rgb(88, 99, 116);
   --button-text-decoration: underline;
 }
+.button--type-link.button-light-theme:focus-visible:not(:disabled) {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  --button-text-color: rgb(10, 11, 13);
+}
 .button--type-link.button-light-theme:active:not(:disabled) {
   --button-text-color: rgb(35, 40, 46);
   --button-text-decoration: underline;