@tet/tet-components 1.3.8-testing → 1.3.9-testing

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

@@ -8,6 +8,10 @@ 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.
          */
@@ -297,6 +301,26 @@ export class TetCardList {
             }
             this.isScrolling = false;
         };
+        /**
+         * Handles the keyup event on the right control.
+         * If the key is "Enter" or "Space", will trigger navigation to the next card.
+         * @param e - The keyboard event object.
+         */
+        this.handleRightControlKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.handleRightControl();
+            }
+        };
+        /**
+         * Handles the keyup event on the left control.
+         * If the key is "Enter" or "Space", will trigger navigation to the previous card.
+         * @param e - The keyboard event object.
+         */
+        this.handleLeftControlKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.handleLeftControl();
+            }
+        };
         /**
          * Updates the visibility of the control element.
          */
@@ -426,6 +450,10 @@ 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();
         }
@@ -518,6 +546,10 @@ export class TetCardList {
         // Calculate the new position of the first element and scroll to it.
         const firstElementPosition = firstOriginalElement.offsetLeft - currentPosition;
         this.inertialScroll.scrollTo({ left: firstElementPosition }, true);
+        const allClones = this.element.querySelectorAll('[data-clone-id]');
+        allClones.forEach((element) => {
+            element.removeAttribute('tabindex');
+        });
     }
     /**
      * Resets the content to its original state.
@@ -621,18 +653,18 @@ export class TetCardList {
         this.dimensions.element.width = elementRect.width;
     }
     render() {
-        return (h(Host, { key: '9a3bfd406a9024f3c3a64e03ce51533966526f0c' }, h("div", { key: '485d7169056697e041178192e5d08d7fad0a1fac', class: {
+        return (h(Host, { key: '3ed05945ef1b1adb765d000ee12d06e60136a032' }, h("div", { key: '31679bf3b2bd5e1b60cdecf35ffe3a7d1d2a7ea3', class: {
                 'tet-card-list__container': true,
                 'tet-card-list--no-scroll': this.disableScroll,
-            }, part: "card-list-container" }, h("span", { key: '6b8f1d28df13deffac6192afe43cc10885bf7944', class: {
+            }, 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: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--left': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.left,
-            } }, h("tet-icon", { key: 'aa456090fd2072ef5e37abf10501419612d5e792', onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleLeftControl, name: this.iconPrev && this.iconPrev !== '' ? this.iconPrev : 'chevron-left', class: "tet-card-list__control__icon" })), h("div", { key: '882763a8eca085783181dc43a20aa0a242a0c862', class: "tet-card-list__scroll-container" }, h("div", { key: '2d0486aa60f943878a83b1dfbb83a3aa65a4c94f', part: "card-list", ref: el => (this.scrollContainerRef = el) }, h("slot", { key: '3f9e19a06762b32fd6e25be9476fe8f8375ca184' }))), h("span", { key: '96e25307884364afcdca9c9628d1e8e953442531', class: {
+            } }, 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: {
                 'tet-card-list__control': true,
                 'tet-card-list__control--right': true,
                 'tet-card-list__control--hidden': !this.controlVisibility.right,
-            } }, h("tet-icon", { key: '5d39adf9b9e4bb54189ba2caf6be29c4c970fd6a', onPointerDown: this.handleControlPointerDown, onPointerUp: this.handleRightControl, name: this.iconNext && this.iconNext !== '' ? this.iconNext : 'chevron-right', class: "tet-card-list__control__icon" })), h("div", { key: '841f29009fabb5b48048be6e1965f4a43004ffe0', class: { 'tet-card-list__scroll': true, 'tet-card-list--hidden': !this.withScrollbar } }, h("div", { key: 'd2a2b8c405c4a4413ea83ae60c99919ea8709a9f', class: "tet-card-list__scroll--thumb", ref: el => (this.scrollbarRef = el) })))));
+            } }, 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) })))));
     }
     static get is() { return "tet-card-list"; }
     static get encapsulation() { return "shadow"; }

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

@@ -101,7 +101,7 @@ describe('tet-compare-card', () => {
                 </div>
               </div>
               <div class="button-wrapper">
-                <a target="_blank" href="https://tet.lv" data-form-link="https://tet.lv">
+                <a target="_blank" href="https://tet.lv" data-form-link="https://tet.lv" tabindex="-1">
                   <div class="button">
                     <tet-button class="tet-button" theme="light">Button</tet-button>
                     <style>.tet-button {--button-width: 10rem;}</style>
@@ -198,7 +198,7 @@ describe('tet-compare-card', () => {
                 </div>
               </div>
               <div class="button-wrapper">
-                <a target="_blank" href="https://tet.lv" data-form-link="https://tet.lv">
+                <a target="_blank" href="https://tet.lv" data-form-link="https://tet.lv" tabindex="-1" >
                   <div class="button">
                     <tet-button class="tet-button" theme="light">Button</tet-button>
                     <style>.tet-button {--button-width: 10rem;}</style>

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

@@ -220,7 +220,7 @@ export class TetCompareCard {
                 'price-wrapper': true,
                 'price-wrap': this.options.priceWrap,
                 'price-flex-column': this.priceShownVertically
-            } }, h("div", { class: "price-container" }, this.options.pricePrefix && h("div", { class: "price-prefix", innerHTML: this.options.pricePrefix }), h("div", { class: "new-price translation-none" }, parseFloat(this.options.price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.options.currency), h("div", { class: "price-info", innerHTML: this.options.priceInfo }))), this.options.oldPrice ? (h("div", { class: "old-price-container" }, h("div", { class: "old-price translation-none" }, parseFloat(this.options.oldPrice.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "old-currency" }, this.options.currency))) : (''))) : (''), this.showHelper ? (h("div", { class: "helper" }, this.options.term ? h("div", { class: "term" }, this.options.term) : '', this.options.termText ? h("div", { class: "term-text", innerHTML: this.options.termText }) : '', h("span", { innerHTML: this.options.helper }))) : (''), this.isNetflixCard && this.options.selectOptions !== undefined ? (h("div", { class: "select" }, h("tet-dropdown", { id: "dropdown", class: "cards-dropdown", theme: "light", "button-label": "", "label-logo": this.options.selectOptions[0].labelLogo, "label-right": this.options.selectOptions[0].labelRight, "label-right-color": this.options.selectOptions[0].labelRightColor, "close-on-selection": true, options: this.options.selectOptions, "flex-layout": true }))) : ('')), h("div", { class: "button-wrapper" }, this.options.giftModalAttribute ? (h("div", { class: "button", "data-form-link": this.options.link, innerHTML: this.options.giftModalAttribute })) : this.options.linkOpenBlank ? (h("a", { target: "_blank", href: this.options.link, "data-form-link": this.options.link }, h("div", { class: "button", innerHTML: this.options.button }))) : (h("a", { href: this.options.link, "data-form-link": this.options.link }, h("div", { class: "button", innerHTML: this.options.button }))), h("div", { class: "description-wrapper js-resize-divide-slot" }, h("slot", { name: "description-slot" })), this.options.secondaryLink && this.options.secondaryLinkText && (h("div", { class: {
+            } }, h("div", { class: "price-container" }, this.options.pricePrefix && h("div", { class: "price-prefix", innerHTML: this.options.pricePrefix }), h("div", { class: "new-price translation-none" }, parseFloat(this.options.price.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "currency" }, h("span", null, this.options.currency), h("div", { class: "price-info", innerHTML: this.options.priceInfo }))), this.options.oldPrice ? (h("div", { class: "old-price-container" }, h("div", { class: "old-price translation-none" }, parseFloat(this.options.oldPrice.replace(',', '.')).toFixed(2).replace('.', ',')), h("div", { class: "old-currency" }, this.options.currency))) : (''))) : (''), this.showHelper ? (h("div", { class: "helper" }, this.options.term ? h("div", { class: "term" }, this.options.term) : '', this.options.termText ? h("div", { class: "term-text", innerHTML: this.options.termText }) : '', h("span", { innerHTML: this.options.helper }))) : (''), this.isNetflixCard && this.options.selectOptions !== undefined ? (h("div", { class: "select" }, h("tet-dropdown", { id: "dropdown", class: "cards-dropdown", theme: "light", "button-label": "", "label-logo": this.options.selectOptions[0].labelLogo, "label-right": this.options.selectOptions[0].labelRight, "label-right-color": this.options.selectOptions[0].labelRightColor, "close-on-selection": true, options: this.options.selectOptions, "flex-layout": true }))) : ('')), h("div", { class: "button-wrapper" }, this.options.giftModalAttribute ? (h("div", { class: "button", "data-form-link": this.options.link, innerHTML: this.options.giftModalAttribute })) : this.options.linkOpenBlank ? (h("a", { target: "_blank", href: this.options.link, "data-form-link": this.options.link, tabIndex: -1 }, h("div", { class: "button", innerHTML: this.options.button }))) : (h("a", { href: this.options.link, "data-form-link": this.options.link, tabIndex: -1 }, h("div", { class: "button", innerHTML: this.options.button }))), h("div", { class: "description-wrapper js-resize-divide-slot" }, h("slot", { name: "description-slot" })), this.options.secondaryLink && this.options.secondaryLinkText && (h("div", { class: {
                 'secondary-link': true,
                 [`${this.secondaryLinkPosition}`]: true
             } }, this.options.secondaryLinkOpenBlank ? (h("a", { target: "_blank", href: this.options.secondaryLink }, this.options.secondaryLinkText)) : (h("a", { href: this.options.secondaryLink }, this.options.secondaryLinkText)))))), this.cardScript ? h("link", { href: this.cardScript, rel: "stylesheet", type: "text/css" }) : '', h("tet-icon", { name: "check", class: "is-selected__icon" })));

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

@@ -352,14 +352,24 @@
 
 :host {
   /**
-  * @prop --tag-text-color: The text color of the tag.
   * @prop --tag-background-color: The background color of the tag.
+  * @prop --tag-hover-background-color: The background color of the tag on hover.
+  * @prop --tag-active-background-color: The background color of the tag when active.
+  *
   * @prop --tag-border-color: The border color of the tag.
-   */
+  * @prop --tag-active-border-color: The border color of the tag when active.
+  *
+  * @prop --tag-text-color: The text color of the tag.
+  * @prop --tag-active-text-color: The text color of the tag when active.
+  */
   display: inline-block;
-  --tag-text-color: rgb(10, 11, 13);
   --tag-background-color: rgb(255, 255, 255);
+  --tag-hover-background-color: linear-gradient(rgba(88, 99, 116, 0.08), rgba(88, 99, 116, 0.08)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
+  --tag-active-background-color: rgb(10, 11, 13);
   --tag-border-color: rgb(153, 160, 174);
+  --tag-active-border-color: rgb(10, 11, 13);
+  --tag-text-color: rgb(10, 11, 13);
+  --tag-active-text-color: rgb(255, 255, 255);
 }
 
 .tag {
@@ -375,51 +385,49 @@
   border-color: var(--tag-border-color);
   border: 0.0625rem solid var(--tag-border-color);
 }
-.tag--icon {
-  padding: 0.375rem 0.625rem 0.365rem 0.75rem;
+.tag:hover {
+  background: var(--tag-hover-background-color);
 }
-.tag.theme-classic {
-  --tag-background-color: rgb(255, 255, 255);
-  --tag-border-color: rgb(153, 160, 174);
-  --tag-text-color: rgb(10, 11, 13);
+.tag:active:not(:disabled), .tag.tag-active {
+  color: var(--tag-active-text-color);
+  background: var(--tag-active-background-color);
+  border-color: var(--tag-active-border-color);
 }
-.tag.theme-classic:hover {
-  --tag-background-color: linear-gradient(rgba(88, 99, 116, 0.08), rgba(88, 99, 116, 0.08)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255));
+.tag:active:not(:disabled) .tag-icon, .tag.tag-active .tag-icon {
+  --icon-color: var(--tag-active-text-color);
 }
-.tag.theme-classic:active:not(:disabled), .tag.theme-classic.tag-active {
-  --tag-background-color: rgb(10, 11, 13);
-  --tag-text-color: rgb(255, 255, 255);
-  --tag-border-color: rgb(10, 11, 13);
+.tag--icon {
+  padding: 0.375rem 0.625rem 0.365rem 0.75rem;
+}
+.tag.theme-light {
+  --tag-background-color: var(--tc-layer-primary);
+  --tag-hover-background-color: var(--tc-button-primary-background-inverse-hover);
+  --tag-active-background-color: var(--tc-layer-inverse-primary);
+  --tag-border-color: var(--tc-border-secondary);
+  --tag-active-border-color: var(--tc-button-primary-background-default);
+  --tag-text-color: var(--tc-button-text-secondary);
+  --tag-active-text-color: var(--tc-button-text-primary);
+}
+.tag.theme-dark {
+  --tag-background-color: var(--tc-layer-primary-dark);
+  --tag-hover-background-color: var(--tc-button-primary-background-inverse-hover-dark);
+  --tag-active-background-color: var(--tc-layer-inverse-primary-dark);
+  --tag-border-color: var(--tc-border-secondary-dark);
+  --tag-active-border-color: var(--tc-button-primary-background-default-dark);
+  --tag-text-color: var(--tc-button-text-secondary-dark);
+  --tag-active-text-color: var(--tc-button-text-primary-dark);
 }
 .tag.theme-mint {
   --tag-background-color: rgb(35, 40, 46);
+  --tag-hover-background-color: linear-gradient(rgba(26, 213, 219, 0.08), rgba(26, 213, 219, 0.08)), linear-gradient(rgb(35, 40, 46), rgb(35, 40, 46));
+  --tag-active-background-color: rgb(26, 213, 219);
   --tag-border-color: rgb(26, 213, 219);
+  --tag-active-border-color: rgb(26, 213, 219);
   --tag-text-color: rgb(255, 255, 255);
-}
-.tag.theme-mint:hover {
-  --tag-background-color: linear-gradient(rgba(26, 213, 219, 0.08), rgba(26, 213, 219, 0.08)), linear-gradient(rgb(35, 40, 46), rgb(35, 40, 46));
-}
-.tag.theme-mint:active:not(:disabled), .tag.theme-mint.tag-active {
-  --tag-background-color: rgb(26, 213, 219);
-  --tag-border-color: rgb(26, 213, 219);
-  --tag-text-color: rgb(10, 11, 13);
-}
-.tag.theme-light {
-  --tag-background-color: rgb(35, 40, 46);
-  --tag-border-color: rgb(153, 160, 174);
-  --tag-text-color: rgb(255, 255, 255);
-}
-.tag.theme-light:hover {
-  --tag-background-color: linear-gradient(rgba(153, 160, 174, 0.12), rgba(153, 160, 174, 0.12)), linear-gradient(rgb(35, 40, 46), rgb(35, 40, 46));
-  --tag-border-color: rgb(153, 160, 174);
-}
-.tag.theme-light:active:not(:disabled), .tag.theme-light.tag-active {
-  --tag-background-color: rgb(255, 255, 255);
-  --tag-border-color: rgb(255, 255, 255);
-  --tag-text-color: rgb(10, 11, 13);
+  --tag-active-text-color: rgb(10, 11, 13);
 }
 .tag .tag-icon {
-  display: flex;
   --icon-size: 1rem;
   --icon-color: var(--tag-text-color);
+  display: flex;
 }

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

@@ -19,12 +19,12 @@ export class TetTag {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h(Host, { key: '37839fc6dfac3373830f26fc2fb1783df930a864' }, h("button", { key: '75c330d21232666683f1fb59b370acb47bb89a50', class: {
+        return (h(Host, { key: 'eb5263cd80bbe3419b2490fd92bce14d00604537' }, h("button", { key: '55ae17a5a7e51bdea204d6c8828969baf6546b44', class: {
                 tag: true,
                 'tag-active': this.active,
                 'tag--icon': this.showIcon,
                 [`theme-${this.theme}`]: true,
-            }, "aria-pressed": this.active.toString() }, this.tagTitle && h("p", { key: '538c527b6d288263148e612c969a1e0676ae385d', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '415c10f4b7e6b3a550f7a41da097ff3cc6f526df', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '432b17b2e44e16d957a02ce4d863c0c2376e02e2', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
+            }, "aria-pressed": this.active.toString() }, this.tagTitle && h("p", { key: '184ff8f2cbd2b96d34a6ff1ba9b1e5f739ed8834', class: "tag-title" }, t(this.tagTitle)), this.count !== null && this.count !== undefined && h("span", { key: '600c422682ce3e64321b13c638f09acb837146d7', class: "tag-count" }, this.count), this.showIcon && h("tet-icon", { key: '920ee69edabb85fd1ec53eae072794de7a6672d5', class: "tag-icon", name: "close-circle", part: "icon-selected" }))));
     }
     static get is() { return "tet-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -96,8 +96,8 @@ export class TetTag {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'light' | 'mint' | 'classic'",
-                    "resolved": "\"classic\" | \"light\" | \"mint\"",
+                    "original": "'light' | 'mint' | 'classic' | 'dark'",
+                    "resolved": "\"classic\" | \"dark\" | \"light\" | \"mint\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -36,8 +36,54 @@ describe('tet-tag-group', () => {
       <tet-tag-group>
         <mock:shadow-root>
           <div class="tags">
-            <tet-tag  class="single-tag" language="lv" part="tag" tagTitle="MyTag" count="2"></tet-tag>
-            <tet-tag  class="single-tag" language="lv" part="tag" tagTitle="YourTag" count="4" active></tet-tag>
+            <tet-tag class="single-tag" language="lv" part="tag" tagTitle="MyTag" count="2" theme="classic"></tet-tag>
+            <tet-tag
+              class="single-tag"
+              language="lv"
+              part="tag"
+              tagTitle="YourTag"
+              count="4"
+              theme="classic"
+              active
+            ></tet-tag>
+          </div>
+        </mock:shadow-root>
+      </tet-tag-group>
+    `);
+    });
+    it('renders tags with dark theme', async () => {
+        const tags = [
+            {
+                title: 'HisTag',
+                count: 2,
+                active: false,
+            },
+            {
+                title: 'HerTag',
+                count: 4,
+                active: true,
+                showIcon: true,
+            },
+        ];
+        const page = await newSpecPage({
+            components: [TetTagGroup],
+            template: () => h("tet-tag-group", { tags: tags, theme: "dark" }),
+        });
+        expect(page.root).toEqualHtml(`
+      <tet-tag-group>
+        <mock:shadow-root>
+          <div class="tags">
+            <tet-tag class="single-tag" language="lv" part="tag" tagTitle="HisTag" count="2" theme="dark"></tet-tag>
+            <tet-tag
+              class="single-tag"
+              language="lv"
+              part="tag"
+              tagTitle="HerTag"
+              count="4"
+              theme="dark"
+              showIcon
+              active
+            ></tet-tag>
           </div>
         </mock:shadow-root>
       </tet-tag-group>

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

@@ -13,13 +13,14 @@ export class TetTagGroup {
          * @param tag
          */
         this.renderTag = (tag) => {
-            return (h("tet-tag", { class: "single-tag", part: "tag", tagTitle: tag.title, count: tag.count, active: tag.active, showIcon: tag.showIcon, language: this.language, onClick: () => isFunction(tag.clickAction) ? tag.clickAction(tag) : null }));
+            return (h("tet-tag", { class: "single-tag", part: "tag", tagTitle: tag.title, count: tag.count, active: tag.active, showIcon: tag.showIcon, language: this.language, theme: this.theme, onClick: () => isFunction(tag.clickAction) ? tag.clickAction(tag) : null }));
         };
         this.language = 'lv';
         this.tags = [];
+        this.theme = 'classic';
     }
     render() {
-        return h("div", { key: '3076f16567ad2d89474d318ae6ecf726716df537', class: "tags" }, this.tags.map(this.renderTag));
+        return h("div", { key: 'd815d584fbf26991101999bc76f0570cff5f1cba', class: "tags" }, this.tags.map(this.renderTag));
     }
     static get is() { return "tet-tag-group"; }
     static get encapsulation() { return "shadow"; }
@@ -80,6 +81,24 @@ export class TetTagGroup {
                     "text": "The array of tags to display."
                 },
                 "defaultValue": "[]"
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'light' | 'mint' | 'classic' | 'dark'",
+                    "resolved": "\"classic\" | \"dark\" | \"light\" | \"mint\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The theme of the tag component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'classic'"
             }
         };
     }

package/dist/collection/components/simple/lists/tet-news-card-list/test/tet-news-card-list.spec.js

@@ -54,42 +54,48 @@ describe('tet-news-card-list', () => {
             initialscrollamount="0"
             withcontrols="" withoverflowopacity="" exportparts="card-list, card-list-container" part="card-list-component">
             <div class="tet-news-card" part="card-list-item">
-              <div class="tet-news-card__image__container">
-                <a class="tet-news-card__image" data-index="0" href="#" target="_blank">
-                  <img alt="Alt text" src="https://picsum.photos/seed/1/700/560">
-                </a>
-              </div>
-              <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 1</span>
-              <span class="tet-news-card__divider"></span>
-              <a data-index="0" class="tet-news-card__link" href="#" target="_blank">
-                <span class="tet-news-card__underline">Redirect</span>
-                <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
+              <a data-index="0" class="tet-news-card__link-container" href="#" target="_blank" tabindex="0">
+                <div class="tet-news-card__image__container">
+                  <div class="tet-news-card__image">
+                    <img alt="Alt text" src="https://picsum.photos/seed/1/700/560">
+                  </div>
+                </div>
+                <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 1</span>
+                <span class="tet-news-card__divider"></span>
+                <div class="tet-news-card__link">
+                  <span class="tet-news-card__underline">Redirect</span>
+                  <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
+                </div>
               </a>
             </div>
             <div class="tet-news-card" part="card-list-item">
-              <div class="tet-news-card__image__container">
-                <a class="tet-news-card__image" data-index="1" href="#" target="">
-                  <img alt="" src="https://picsum.photos/seed/2/350/280">
-                </a>
-              </div>
-              <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 2</span>
-              <span class="tet-news-card__divider"></span>
-              <a data-index="1" class="tet-news-card__link" href="#" target="">
-                <span class="tet-news-card__underline">Redirect</span>
-                <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
+            <a data-index="1" class="tet-news-card__link-container" href="#" target="" tabindex="0">
+                <div class="tet-news-card__image__container">
+                  <div class="tet-news-card__image" >
+                    <img alt="" src="https://picsum.photos/seed/2/350/280">
+                  </div>
+                </div>
+                <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 2</span>
+                <span class="tet-news-card__divider"></span>
+                <div class="tet-news-card__link">
+                  <span class="tet-news-card__underline">Redirect</span>
+                  <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
+                </div>
               </a>
             </div>
             <div class="tet-news-card" part="card-list-item">
+            <a data-index="2" class="tet-news-card__link-container" href="#" target="" tabindex="0">
               <div class="tet-news-card__image__container">
-                <a class="tet-news-card__image" data-index="2" href="#" target="">
+                <div class="tet-news-card__image" >
                   <img alt="" src="https://picsum.photos/seed/3/350/280">
-                </a>
+                </div>
               </div>
               <span class="tet-news-card__date">13.10.1992</span><span class="tet-news-card__title">Test title 3</span>
               <span class="tet-news-card__divider"></span>
-              <a data-index="2" class="tet-news-card__link" href="#" target="">
+              <div class="tet-news-card__link">
                 <span class="tet-news-card__underline">Redirect</span>
                 <tet-icon class="tet-news-card__link-icon" name="chevron-right"></tet-icon>
+              </div>
               </a>
             </div>
           </tet-card-list>

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

@@ -442,6 +442,14 @@ tet-card-list {
 .hover .tet-news-card__link {
   color: rgb(10, 11, 13);
 }
+.tet-news-card__link-container {
+  display: flex;
+  flex-direction: column;
+  text-decoration: none;
+  font: 400 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
+  color: rgb(10, 11, 13);
+  height: 100%;
+}
 .tet-news-card__link-icon {
   --icon-size: 1rem;
   --icon-color: rgb(153, 160, 174);

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

@@ -37,7 +37,7 @@ export class TetNewsCardList {
          */
         this.renderListCard = (item, index) => {
             var _a;
-            return (h("div", { class: "tet-news-card", part: "card-list-item" }, h("div", { class: "tet-news-card__image__container" }, h("a", { "data-index": index, href: item.redirectHref, target: item.redirectNewTab ? '_blank' : '', class: "tet-news-card__image", onMouseDown: this.disableImageEvents, onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, onClick: item.clickCallback }, h("img", { src: item.imageSrc, alt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : '' }))), item.date && h("span", { class: "tet-news-card__date" }, item.date), h("span", { class: "tet-news-card__title" }, item.title), h("span", { class: "tet-news-card__divider" }), h("a", { "data-index": index, class: "tet-news-card__link", href: item.redirectHref, onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, target: item.redirectNewTab ? '_blank' : '', onClick: item.clickCallback }, h("span", { class: "tet-news-card__underline" }, item.redirectText), ' ', h("tet-icon", { class: "tet-news-card__link-icon", name: "chevron-right" }))));
+            return (h("div", { class: "tet-news-card", part: "card-list-item" }, h("a", { class: "tet-news-card__link-container", "data-index": index, href: item.redirectHref, target: item.redirectNewTab ? '_blank' : '', onMouseOver: this.handleCardMouseOver, onMouseLeave: this.handleCardMouseLeave, onClick: item.clickCallback, tabIndex: 0 }, h("div", { class: "tet-news-card__image__container" }, h("div", { class: "tet-news-card__image", onMouseDown: this.disableImageEvents }, h("img", { src: item.imageSrc, alt: (_a = item.imageAlt) !== null && _a !== void 0 ? _a : '' }))), item.date && h("span", { class: "tet-news-card__date" }, item.date), h("span", { class: "tet-news-card__title" }, item.title), h("span", { class: "tet-news-card__divider" }), h("div", { class: "tet-news-card__link" }, h("span", { class: "tet-news-card__underline" }, item.redirectText), ' ', h("tet-icon", { class: "tet-news-card__link-icon", name: "chevron-right" })))));
         };
         this.items = [];
         this.withControls = true;
@@ -61,7 +61,7 @@ export class TetNewsCardList {
             scrollFullWidth,
             controlScrollAmount,
         };
-        return (h(Host, { key: '5156be1b2616ec625edff50f195f4ef9b3ffc906' }, h("tet-card-list", Object.assign({ key: '659800d9b0bbbafb0435a80bead740d9dbe98bd4', part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
+        return (h(Host, { key: 'e5c27006fc39eb5032940928d8962bc9663ec0bf' }, h("tet-card-list", Object.assign({ key: '57ae72acde66ef611444da732ff1e10e1b924845', part: "card-list-component", exportparts: "card-list, card-list-container", withOverflowOpacity: true }, props), this.items.map((item, index) => this.renderListCard(item, index)))));
     }
     static get is() { return "tet-news-card-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/tables-and-graphs/tet-table/test/tet-table.spec.js

@@ -9,7 +9,7 @@ describe('tet-table', () => {
         });
         expect(page.root).toEqualHtml(`
       <tet-table>
-         <table class="table">
+         <table class="table light">
            <thead>
              <tr>
               <th scope="col" colspan="1"></th>
@@ -28,7 +28,7 @@ describe('tet-table', () => {
         });
         expect(page.root).toEqualHtml(`
       <tet-table caption="Table caption">
-         <table class="table">
+         <table class="table light">
            <caption>Table caption</caption>
            <thead>
              <tr>
@@ -41,7 +41,7 @@ describe('tet-table', () => {
       </tet-table>
     `);
     });
-    it('renders table data', async () => {
+    it('renders table data with dark theme', async () => {
         const tableData = {
             columns: ['Header 1', 'Header 2'],
             rows: [
@@ -57,11 +57,11 @@ describe('tet-table', () => {
         };
         const page = await newSpecPage({
             components: [TetTable],
-            template: () => (h("tet-table", { "table-header": "Table Header", tableData: tableData })),
+            template: () => (h("tet-table", { "table-header": "Table Header", tableData: tableData, theme: "dark" })),
         });
         expect(page.root).toEqualHtml(`
       <tet-table table-header="Table Header">
-        <table class="table">
+        <table class="table dark">
           <thead>
             <tr>
               <th scope="col" colspan="1">Table Header</th>
@@ -85,7 +85,7 @@ describe('tet-table', () => {
           </tbody>
       </table>
       <div class="mobile-table-wrapper">
-        <table class="mobile-table">
+        <table class="mobile-table dark">
           <thead>
             <tr>
               <th colspan="2" scope="col">
@@ -104,7 +104,7 @@ describe('tet-table', () => {
             </tr>
           </tbody>
         </table>
-        <table class="mobile-table">
+        <table class="mobile-table dark">
           <thead>
             <tr>
               <th colspan="2" scope="col">
@@ -135,7 +135,7 @@ describe('tet-table', () => {
         expect(page.root).toEqualHtml(`
       <tet-table table-header="Table Header">
         <template></template>
-        <table class="table">
+        <table class="table light">
           <thead>
             <tr>
               <th scope="col" colspan="1">Table Header</th>
@@ -159,7 +159,7 @@ describe('tet-table', () => {
           </tbody>
       </table>
       <div class="mobile-table-wrapper">
-        <table class="mobile-table">
+        <table class="mobile-table light">
           <thead>
             <tr>
               <th colspan="2" scope="col">
@@ -178,7 +178,7 @@ describe('tet-table', () => {
             </tr>
           </tbody>
         </table>
-        <table class="mobile-table">
+        <table class="mobile-table light">
           <thead>
             <tr>
               <th colspan="2" scope="col">