@tet/tet-components 1.3.23-testing → 1.3.24-production

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

@@ -50,7 +50,7 @@ describe('tet-menu', () => {
               Main
               <tet-icon class="chevron" name="chevron-down"></tet-icon>
             </a>
-            <div class="menu__dropdown" tabindex="0">
+            <div class="menu__dropdown">
               <ul class="menu__dropdown__list">
                 <li>
                   <a href="#21" class="menu--highlighted" tabindex="0">
@@ -103,7 +103,7 @@ describe('tet-menu', () => {
               Secondary
               <tet-icon class="chevron" name="chevron-down"></tet-icon>
             </a>
-            <div class="menu__dropdown" tabindex="0">
+            <div class="menu__dropdown">
               <ul class="menu__dropdown__list">
                 <li>
                   <a href="#21" tabindex="0">
@@ -148,7 +148,7 @@ describe('tet-menu', () => {
               Language
               <tet-icon class="chevron" name="chevron-down"></tet-icon>
             </a>
-            <div class="menu__dropdown" tabindex="0">
+            <div class="menu__dropdown">
               <ul class="menu__dropdown__list">
                 <li>
                   <a href="#21" tabindex="0">
@@ -196,7 +196,7 @@ describe('tet-menu', () => {
               Login
               <tet-icon class="chevron" name="chevron-down"></tet-icon>
             </a>
-            <div class="menu__dropdown" tabindex="0">
+            <div class="menu__dropdown">
               <ul class="menu__dropdown__list">
                 <li>
                   <a href="#21" tabindex="0">

package/dist/collection/components/simple/menu/tet-menu/tet-menu.css

@@ -398,6 +398,7 @@
   --menu-dropdown-box-shadow: 0 0.063rem 0.125rem rgba(10, 11, 13, 0.05),
   0 0.313rem 0.688rem rgba(10, 11, 13, 0.12);
   --menu-border-radius: 0.625rem;
+  --menu-focus-outline-color: var(--tc-blue-40);
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -436,6 +437,12 @@
 .menu__first-level:hover .chevron {
   transform: rotate(-180deg);
 }
+.menu__first-level:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  outline-color: var(--menu-focus-outline-color);
+}
 .menu__icon {
   display: none;
 }
@@ -464,6 +471,7 @@
   animation-fill-mode: both;
   animation-duration: 300ms;
   animation-timing-function: ease-out;
+  outline: none;
 }
 .menu__dropdown__list {
   padding: 0.625rem 0 0.438rem 0;
@@ -483,6 +491,13 @@
 .menu__dropdown a:hover {
   background-color: var(--menu-link-hover-background-color);
 }
+.menu__dropdown a:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+  outline-color: var(--menu-focus-outline-color);
+  border-radius: 0.5rem;
+}
 .menu__dropdown a.menu--active {
   background-color: var(--menu-link-active-background-color);
 }
@@ -526,6 +541,13 @@
   align-items: center;
   padding: 0.625rem 0.75rem;
 }
+.menu__main .menu__dropdown__list a:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+  outline-color: var(--menu-focus-outline-color);
+  border-radius: 0.5rem;
+}
 .menu__main .menu__dropdown__list .menu--highlighted {
   position: relative;
   margin-bottom: 0.875rem;
@@ -570,6 +592,7 @@
 :hover > .menu__sublist, :focus > .menu__sublist, :focus-within > .menu__sublist {
   max-height: 100rem;
   transform: scaleX(1);
+  outline: none;
 }
 .menu__sublist.left {
   right: calc(100% - 0.6rem);
@@ -591,6 +614,13 @@
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   border-radius: unset;
 }
+.menu__sublist .content a:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+  outline-color: var(--menu-focus-outline-color);
+  border-radius: 0.5rem;
+}
 .menu__sublist .content a.menu--active {
   background-color: var(--menu-link-hover-background-color);
 }
@@ -666,6 +696,9 @@
   right: 0.782rem;
   top: 0.563rem;
 }
+.menu__dark {
+  --menu-focus-outline-color: var(--tc-blue-40-dark);
+}
 .menu__dark .menu__first-level.menu--active {
   background-color: rgb(24, 40, 59);
 }
@@ -705,6 +738,15 @@
 .menu__dark .menu__dropdown .menu__dropdown__list li a.menu--highlighted:after {
   background: rgb(35, 40, 46);
 }
+.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--highlighted:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+}
+.menu__dark .menu__dropdown .menu__dropdown__list li a.menu--highlighted:focus-visible:after {
+  outline: none;
+}
 .menu__dark .menu__dropdown .menu__dropdown__list li a:hover {
   background-color: var(--menu-link-hover-background-dark-color);
 }

package/dist/collection/components/simple/menu/tet-menu/tet-menu.js

@@ -70,7 +70,7 @@ export class TetMenu {
             return '';
         }
         const renderedSubLevels = subLevels.map(subLevel => this.renderSubItem(subLevel));
-        return (h("div", { class: "menu__dropdown", tabIndex: 0 }, h("ul", { class: "menu__dropdown__list" }, renderedSubLevels)));
+        return (h("div", { class: "menu__dropdown" }, h("ul", { class: "menu__dropdown__list" }, renderedSubLevels)));
     }
     /**
      * Renders the sub-levels of the menu.
@@ -167,7 +167,7 @@ export class TetMenu {
     }
     render() {
         const { type } = this;
-        return (h(Host, { key: '8d23e14271341ce8e823532a2ddd207f58bd13cd' }, h("div", { key: '2243b4a443da3af1900135cdf0c0cd71ee9b1e0c', class: {
+        return (h(Host, { key: '75e724e03620155c67dc8b56db842cabab84b241' }, h("div", { key: '3d032ff695fc567d995cff98101b66b137833ba9', class: {
                 menu: true,
                 menu__main: type === 'main',
                 menu__language: type === 'language',

package/dist/collection/components/simple/menu/tet-menu-mobile/tet-menu-mobile.css

@@ -397,6 +397,7 @@
   --menu-link-border-radius: 0.625rem;
   --menu-list-expanded-margin-bottom: 1rem;
   --menu-list-expanded-margin-top: 0.375rem;
+  --menu-focus-outline-color: var(--tc-blue-40);
   display: inline-block;
   position: relative;
   width: 100%;
@@ -428,6 +429,12 @@
 .menu--active .menu__first-level {
   color: var(--menu-first-level-text-color-active);
 }
+.menu__first-level:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  border-radius: 0.125rem;
+}
 .menu__chevron {
   --icon-size: 1.25rem;
   justify-self: end;
@@ -470,9 +477,21 @@
 .menu__dropdown a.menu__second-level {
   font: 500 1rem/1.5rem "Inter", "Gilroy, Arial, sans-serif";
 }
+.menu__dropdown a.menu__second-level:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+  outline-color: var(--menu-focus-outline-color);
+}
 .menu__dropdown a.menu__third-level {
   font: 500 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
+.menu__dropdown a.menu__third-level:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: -0.125rem;
+  transition: outline 0s;
+  outline-color: var(--menu-focus-outline-color);
+}
 .menu__dropdown a.menu--active {
   background-color: var(--menu-link-active-background-color);
 }
@@ -499,19 +518,25 @@
   --menu-link-active-background-color: rgba(24, 40, 59, 1);
   --menu-list-expanded-margin-bottom: 1.5rem;
   --menu-list-expanded-margin-top: 0.5rem;
+  --menu-focus-outline-color: var(--tc-blue-40-dark);
 }
 .menu.menu--dark .menu__first-level {
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
 }
 .menu.menu--dark .menu__first-level .menu__chevron {
+  padding-right: 1rem;
   --icon-color: rgb(255, 255, 255);
 }
+.menu.menu--dark .menu__first-level:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline: 0.125rem solid var(--tc-blue-40-dark);
+  outline-offset: 0rem;
+  transition: outline 0s;
+  border-radius: 0.125rem;
+}
 .menu.menu--dark.menu--active .menu__first-level .menu__chevron {
   --icon-color: rgb(153, 160, 174);
 }
-.menu.menu--dark a {
-  margin-right: 1rem;
-}
 .menu.menu--dark a.menu__second-level, .menu.menu--dark a.menu__third-level {
   font: 400 0.875rem/1.25rem "Inter", "Gilroy, Arial, sans-serif";
   margin-left: 1rem;

package/dist/collection/components/simple/menu/tet-navigation-mobile/test/tet-navigation-mobile.spec.js

@@ -14,7 +14,7 @@ describe('tet-navigation-mobile', () => {
             <div class="navigation__nav-bar">
               <slot></slot>
               </div>
-              <span class="navigation__toggler">
+              <span class="navigation__toggler" tabindex="0">
                 <tet-icon class="navigation__toggler--burger navigation__toggler" name="burger"></tet-icon>
               </span>
               <div class="navigation__dropdown">
@@ -38,7 +38,7 @@ describe('tet-navigation-mobile', () => {
             <div class="navigation__nav-bar">
               <slot></slot>
               </div>
-              <span class="navigation__toggler">
+              <span class="navigation__toggler" tabindex="0">
                 <tet-icon class="navigation__toggler--burger navigation__toggler" name="burger"></tet-icon>
               </span>
               <div class="navigation__dropdown">
@@ -65,7 +65,7 @@ describe('tet-navigation-mobile', () => {
             <div class="navigation__nav-bar">
               <slot></slot>
               </div>
-              <span class="navigation__toggler">
+              <span class="navigation__toggler" tabindex="0">
                 <tet-icon class="navigation__toggler--burger navigation__toggler" name="burger"></tet-icon>
               </span>
               <div class="navigation__dropdown">

package/dist/collection/components/simple/menu/tet-navigation-mobile/tet-navigation-mobile.css

@@ -365,6 +365,7 @@
   --navigation-background-color: rgb(255, 255, 255);
   --navigation-border-bottom-color: rgb(215, 219, 224);
   --navigation-dropdown-padding: 0 1rem;
+  --navigation-focus-outline-color: var(--tc-blue-40);
   display: block;
   width: 100%;
   position: relative;
@@ -392,6 +393,12 @@
   align-self: center;
   cursor: pointer;
 }
+.navigation__toggler:focus-visible {
+  outline: 0.125rem solid var(--tc-blue-40);
+  outline-offset: 0.125rem;
+  transition: outline 0s;
+  border-radius: 0.125rem;
+}
 .navigation__dropdown {
   background-color: var(--navigation-background-color);
   height: 0;
@@ -407,11 +414,11 @@
   height: calc(100vh - var(--navigation-height));
   opacity: 1;
   pointer-events: all;
-  overflow-y: auto;
 }
 .navigation.navigation--dark {
   --navigation-background-color: rgb(10, 11, 13);
   --navigation-border-bottom-color: rgb(35, 40, 46);
+  --navigation-focus-outline-color: var(--tc-blue-40-dark);
 }
 .navigation.navigation--dark .navigation__toggler {
   --icon-color: rgb(255, 255, 255);

package/dist/collection/components/simple/menu/tet-navigation-mobile/tet-navigation-mobile.js

@@ -10,6 +10,14 @@ export class TetNavigationMobile {
         this.onTogglerClick = () => {
             this.isTogglerExpanded = !this.isTogglerExpanded;
         };
+        /**
+         * Handle Key Down event of navigation toggler.
+         */
+        this.handleKeyDown = (event) => {
+            if (['Enter', ' '].includes(event.key)) {
+                this.onTogglerClick();
+            }
+        };
         this.darkMode = false;
         this.isTogglerExpanded = false;
         this.isTogglerVisible = true;
@@ -46,13 +54,13 @@ export class TetNavigationMobile {
         this.mainDropdownToggle.emit(isTogglerExpanded);
     }
     render() {
-        return (h(Host, { key: '351ba3b4d1edaf40559832eb5db9368d458d507f' }, h("navigation", { key: 'b6c7d4258c08c78faca2bcc3ff66efce0a9b74fc', class: {
+        return (h(Host, { key: '332e35be21c5ee447f36aaa542068b0996b7c80b' }, h("navigation", { key: '483af78b98861116dfa90df76ef03d59d044f203', class: {
                 'navigation': true,
                 'navigation--dark': this.darkMode
-            } }, h("div", { key: 'f8042bc7a1108940b844e93d41d05e6fa3f04b34', class: "navigation__nav-bar" }, h("slot", { key: 'e4c2793ca680cf02a3d549f1186bd133d0748486' })), this.isTogglerVisible && (h("span", { key: '4472483b5c7324ed5f28601ab600993574be4c71', class: "navigation__toggler", onClick: this.onTogglerClick }, !this.isTogglerExpanded && h("tet-icon", { key: '2d7ac917c7b80842402d3d2729e6aba5c3dc952b', class: "navigation__toggler navigation__toggler--burger", name: "burger" }), this.isTogglerExpanded && h("tet-icon", { key: 'eab80eeee3af82ec80bf5804afee24ec9c11e4f4', class: "navigation__toggler navigation__toggler--close", name: "close" }))), h("div", { key: '3bc1d3ae16c96c24b94a889d5ede7f3d485ffc3c', class: {
+            } }, h("div", { key: '5255b4833bf000f28365d13eb2fec6e8985d0b50', class: "navigation__nav-bar" }, h("slot", { key: '271edc57f8daf2df292e62b1de40ba1f48a3500a' })), this.isTogglerVisible && (h("span", { key: '1b836d11a190f7f866bc51e6d47dd5cd67f10b65', class: "navigation__toggler", onClick: this.onTogglerClick, onKeyDown: (e) => this.handleKeyDown(e), tabIndex: 0 }, !this.isTogglerExpanded && h("tet-icon", { key: '4262afcb4745993be753e99696f37f820dc751b9', class: "navigation__toggler navigation__toggler--burger", name: "burger" }), this.isTogglerExpanded && h("tet-icon", { key: '327db1e5bc326a71a26418bbfab7316bbb57862a', class: "navigation__toggler navigation__toggler--close", name: "close" }))), h("div", { key: 'c0cb7cb7c0b16bd414f689eb61af782a73a75e88', class: {
                 'navigation__dropdown': true,
                 'navigation__dropdown--expanded': this.isTogglerExpanded,
-            } }, h("slot", { key: '780ff53edd50083e948c939a080d3c78c90cdeea', name: "dropdown" })))));
+            } }, h("slot", { key: 'd20f722e1200a0c0d51e33e86ae9c1407027c7df', name: "dropdown" })))));
     }
     static get is() { return "tet-navigation-mobile"; }
     static get encapsulation() { return "shadow"; }

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

@@ -107,22 +107,22 @@ export class TetAccordion {
         }
     }
     render() {
-        return (h(Host, { key: '8b88a112d05dc588b4217f1a6ab488b9d0093cc6' }, h("div", { key: '893bfadfdab71f1c6101430596d5b56a19bdfc9c', class: {
+        return (h(Host, { key: '60e6d779be4515f6f8f34f3873bf1c26bc2dd27c' }, h("div", { key: '4caca08b986453a115478239528cdf63e8afa1fc', class: {
                 'tet-accordion': true,
                 'tet-accordion--border': this.withBorder,
                 [`${this.theme}-theme`]: true,
                 [`tet-accordion--breakpoint-${this.breakpoint}`]: true,
                 'transparent-bg': this.transparentBackground,
-            } }, h("div", { key: '02676d8041b85e761d0beb28b029d5a116f95e1b', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
-            h("img", { key: 'b902e1e1d08f8709eb7f3192def7800f746adaec', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '0147593fc6adcee917ef034a9adf9aaa5328d408', name: "chevron-down", class: {
+            } }, h("div", { key: '92c7a1b4655a5d5203d751020cc8be7a4c8b5099', class: { "tet-accordion__header": true, [this.theme]: true }, onClick: this.toggleOpenState, onKeyDown: this.toggleAccessibilityOpenState, tabIndex: 0 }, this.headerImageSrc && this.headerImageSrc !== '' &&
+            h("img", { key: '8e82beef563a53cc7fdf0c046769920149aa9343', src: this.headerImageSrc, alt: this.headerImageAlt ? this.headerImageAlt : undefined, class: "tet-accordion__header-image" }), this.renderHeading(), h("tet-icon", { key: '3b40a29a6c3011fbf671812f67c42aa7666b7b08', name: "chevron-down", class: {
                 'tet-accordion__icon': true,
                 'open': this.isOpen
-            } })), h("div", { key: 'b6ffdd8cfbbfd7a08edd31cae60987b9fb462cac', ref: (element) => (this.contentWrapperElement = element), class: {
+            } })), h("div", { key: '7bd51ca7be5aebb135a1c4f4241679acab3eb20d', ref: (element) => (this.contentWrapperElement = element), class: {
                 'tet-accordion__content-wrapper': true,
                 'visible': this.isOpen
-            }, inert: !this.isOpen }, h("div", { key: 'be42d5b86796de80bd10689a25ab1f3745c43935', ref: (element) => (this.contentElement = element), class: {
+            }, inert: !this.isOpen }, h("div", { key: 'f8005bc454aec72b8bbf5ea4ac6147f3a1448213', ref: (element) => (this.contentElement = element), class: {
                 'tet-accordion__content': true
-            } }, h("slot", { key: 'bf3c7e84ab9c846a5d58ae8885e1a06566127289' }))))));
+            } }, h("slot", { key: 'e7ae62ba11ea4f79bb3e722c847ac580e308d8ec' }))))));
     }
     static get is() { return "tet-accordion"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/simple/structural/tet-expansion-panel/tet-expansion-panel.js

@@ -63,7 +63,7 @@ export class TetExpansionPanel {
         return this.state;
     }
     render() {
-        return (h("div", { key: 'ec68641ff7a6208fc81ad3af699de09af6048568', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '6928d35463fa7a2d1ffbaffb20377fa46abaf0d7', class: "tet-expansion-panel-content" }, h("slot", { key: '0222b6453bea1e971814318ee902110fca17e4f1' }))));
+        return (h("div", { key: '2cfc5a9b6e1b737ae9ec35c2b68d923177f91a09', class: { 'tet-expansion-panel': true, 'open': this.state === 'open' } }, h("div", { key: '4eb8622185ed43584281b687838329f9a6131dba', class: "tet-expansion-panel-content" }, h("slot", { key: '05d1e48538a9f5141a3d1f19a9d6cc744c08d926' }))));
     }
     static get is() { return "tet-expansion-panel"; }
     static get encapsulation() { return "shadow"; }

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

@@ -116,7 +116,7 @@ export class TetNotification {
     }
     render() {
         const { headerTitle, content } = this;
-        return (h(Host, { key: 'ab5bf4c9956018bf96f6bfbd8e9ced08b643ca8f' }, h("div", { key: '5631b72cd56d3640ff19bf58fb2ac25e6386c01e', class: { notification: true, [this.theme]: true } }, h("div", { key: 'b1917f68b26b8554f0b5e3addca2d7e499ad6351', class: { item: true, [this.type]: true } }, h("div", { key: 'e2981421058d8e0b9a13493e703172be92dde41f', class: "header" }, this.renderTypeIcon(), h("div", { key: '6718768163e5f8374577b1e54d1841351a1ee292', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '4559c09459f441277f25b08f0f761b54b5ee3e50', class: "content" }, h("span", { key: '6fe8ce49710806701b4c685879c29c8c2a1f8078', innerHTML: content }), h("div", { key: 'f51d9e6b2680b378ddb79b83ab232045810f9f82' }, h("slot", { key: 'bdc57fc38166b9c2b8fe37dbb6fbed884c2d8d9a', name: "button" })))))));
+        return (h(Host, { key: '3160d4c1fda7caab004ac6b2c50f94a07f62a891' }, h("div", { key: 'deca0bc7de26bb6f91ecb2b7019207c3977fb599', class: { notification: true, [this.theme]: true } }, h("div", { key: 'dca76087578b045e61d47f0719be58f35b709f8b', class: { item: true, [this.type]: true } }, h("div", { key: '69a7318cf966bc465c039ca4b26078f2d861bc6d', class: "header" }, this.renderTypeIcon(), h("div", { key: 'eafd4f8fa1b6733e7ecc64910b1d5fc1d54004ea', class: "title" }, headerTitle), this.renderCloseButton()), h("div", { key: '58973e8880d13851cd9fcedd261deacf04814c5f', class: "content" }, h("span", { key: '9fc7abb6dd076289921f9c7cfc973ba86dcafc9a', innerHTML: content }), h("div", { key: 'ae857392dcec3debcb7cf73371792e5097ae49be' }, h("slot", { key: 'c4b295a6e78f5256fd72d22a1d7b6b771ce73d5d', name: "button" })))))));
     }
     static get is() { return "tet-notification"; }
     static get encapsulation() { return "shadow"; }

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

@@ -351,7 +351,7 @@ export class TetTooltip {
         return isTooltipOutOfBounds;
     }
     render() {
-        return h(Host, { key: '64ee4fec058667134d313b0c60da620751594abb', class: { visible: this.showTooltip } }, this.renderTooltip());
+        return h(Host, { key: 'c24e662bedaf97a4ed591e7d8acfaecb518c6f4e', class: { visible: this.showTooltip } }, this.renderTooltip());
     }
     static get is() { return "tet-tooltip"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-address-offers-view/tet-address-offers-view.js

@@ -129,7 +129,7 @@ export class TetAddressOffersView {
         return h(Fragment, null);
     }
     render() {
-        return (h(Host, { key: 'c3b82b95be36074b2e278225e93c470f4223df81' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
+        return (h(Host, { key: '6b67666455865e05f074bbaa855aa3559471367a' }, this.renderContactForm(), this.renderHeader(), this.address && this.renderBody()));
     }
     static get is() { return "tet-address-offers-view"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-b2b-service-calculator/tet-b2b-service-calculator.js

@@ -51,7 +51,7 @@ export class TetB2bServiceCalculator {
         processTranslations('tet-components', this.language).then(() => forceUpdate(this));
     }
     render() {
-        return (h("section", { key: 'd3af7c201ee00387a0c5f27e57df184ff9ebf3a7', class: "container" }, h("div", { key: '9c042b72c5001d82b5ca3b4d7425d8325bb5762b', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: 'c26f1c4a89d9ae9d5d9dc46680115daf2a432ec7', class: "calculator-block" }, h("p", { key: '7d85cf1e38bce955326a375d5cdf22c9af08e9ca', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '6db287b037aef24cffaeda6179ca765694792e32', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: '5d9f770fa0490cf49d7363284eae7d9d4e422b76', class: "control-container" }, h("div", { key: '8d58f4ca99fd728ea9dd0c4bfdc6300017c5b7c5', class: "control" }, h("tet-checkbox", { key: '5e5b2785a4db99385a0887e71e5ea10f31bc8f6c', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: '2d0fb8c19c2b0f8d5c1115fcfe98aedcf7fdca11', class: "control" }, h("tet-switch", { key: 'a55bc3cc08d0a2afa37dc81ac2c3b5f1b3c8e696', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: 'e92ee41fff2b4906dee8322564efcf9f79e75f87', class: "monthly-payment-block" }, h("p", { key: '26d87e306c075ed35481fc42c80bb7f0fa0bc990', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: 'dec43fde55182f5eed828fc25ba3e3ea52c11d45' }, h("span", { key: 'e180625322b106ceab2b5c0204540435abb9644c', class: "price" }, this.totalPrice), h("span", { key: 'd0cf637c5e1d3a8105f660ebe42e7d6dd7c6aa68', class: "currency" }, t('components-euro-per-month')))))));
+        return (h("section", { key: '19d69ee7e8b3716d956c0aaaa9d4bb73a5de1aa6', class: "container" }, h("div", { key: '8593b107f6fd0acaf0e1990ec28b8c09ee9e4c0f', class: "title-block" }, t('components-b2b-calculator-title')), h("div", { key: 'eb612362043c57062045b72fb3b1dd294ba74af1', class: "calculator-block" }, h("p", { key: '869874c51a0ba74da4c682d30d1e5b6609c6ca08', class: "slider-title" }, t('components-b2b-calculator-computer-count')), h("tet-range-slider", { key: '18ccc895a891c9588f44f6863acd4cb9dcaa281c', class: "slider", size: "large", type: "primary", defaultValue: 75, maxValue: 100, withControls: false, withInput: false, dataPoints: [1, 20, 40, 60, 80, 100], displayDataPoints: [1, 20, 40, 60, 80, 100], lockToDataPoint: false }), h("div", { key: 'e15aaa6368a78233f7e71334ed8283a0de495f61', class: "control-container" }, h("div", { key: 'fcde28a136e694431a5587e9e4457870b62fba55', class: "control" }, h("tet-checkbox", { key: 'af1f87eb8e8e12521ffbaaf1c80b9aead1542210', class: "it-admin-checkbox", checked: this.withItAdmin, onCheck: this.handleWithItAdminValueChange }, t('components-b2b-calculator-it-admin-checkbox-label'))), h("div", { key: 'e5b39d654dc5a5af4ebd97dea1e607908de9275e', class: "control" }, h("tet-switch", { key: '9213ac8f1e9fae51c14399d627a9434658479d1f', class: "in-person-support-switch", checked: this.withInPersonServiceSupport, onCheck: this.handleInPersonServiceSupportValueChange }, t('components-b2b-calculator-in-person-support-switch-label')))), h("div", { key: '2b7d55c76af19863863bfb86bba86d02b11e09b3', class: "monthly-payment-block" }, h("p", { key: 'b71122463651db9c0eba62cfa93dfcf20026ccf3', class: "title" }, t('components-b2b-calculator-potential-monthly-payment')), h("p", { key: '08527411c6b78f59c221b7c9a231f039ec2bbbf9' }, h("span", { key: '0a27726f38de0c70585032df1161abde208af1dd', class: "price" }, this.totalPrice), h("span", { key: 'b74c5573de60068027d036e830b8463f1ec219e5', class: "currency" }, t('components-euro-per-month')))))));
     }
     static get is() { return "tet-b2b-service-calculator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/views/tet-business-lines/tet-business-lines.js

@@ -46,7 +46,7 @@ export class TetBusinessLines {
     }
     render() {
         var _a;
-        return (h("div", { key: '4cbed686d45430c722ed3d1394c8bc1c4779e3f7', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: '4a99fbc1b8a71ee1d69b1e0b778ef80aa402a0fb', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
+        return (h("div", { key: '639c9917e6619bba6e5237e7cd00c79a6ca9732f', class: "container" }, this.showHeadings && this.renderHeadings(), h("div", { key: 'a344a4c08833b9d5ed9196c31fa10914ac17aecb', class: "business-line-wrapper" }, (_a = this.businessLines) === null || _a === void 0 ? void 0 : _a.map(this.renderBusinessLineItem))));
     }
     static get is() { return "tet-business-lines"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/docs/styling/border-radius/tet-border-radius.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TetBorderRadius {
     render() {
-        return (h(Host, { key: 'b01c4300bdcf406cb38d1bd23bd07a0a14862a41' }, h("div", { key: 'febf665a7b727a3098e789b5ba91774e64e18933', class: "variable-container" }, h("div", { key: '53e7a9055df18cf26ef2ea4595415907bdd30b5e', class: "container-title main" }, "Border r\u0101diusa klase"), h("div", { key: '0921cd36ae594f6473d484a043d224b7fa1dba6e', class: "container-section" }, h("div", { key: 'f1db4d9a81104a54f340c5f7b0fdb3a8a93907b6', class: "variable-name" }, h("div", { key: '9b613b62ef6f20633e526545306d726086ffe812', class: "variable-part" }, "tet"), h("div", { key: '3ba6a6faeb2f04dc878969707bc05e9a3b8c76d4', class: "variable-part" }, "-border"), h("div", { key: '3233f0184382f52d53c42f2ba198aa9e307ad81d', class: "variable-part variable variable-type" }, "-radius"), h("div", { key: '6996b3f783916077ed606ea9c5558c07d7e7bff5', class: "variable-part variable variable-size" }, "--md")))), h("div", { key: '2012df344940ba8e779123920ff415df2cc4fa9a', class: "tet-fonts-container" }, h("div", { key: 'd3fc318f7dfe9f547519a8536f0a45472d710b3d', class: "container-title" }, "R\u0101diusa izm\u0113ri"), h("div", { key: 'bfff2bf25745f26cdb093e3ad9b672ba01b5dd13', class: "section" }, h("div", { key: 'aa035bbee42a63c856e8874238bacdec4ef5558f', class: "section-variable" }, h("div", { key: '9490ee23b325b20e343f808e094cc17fe2979ed8', class: "border tet-border-radius--xs" }), h("div", { key: '14a58ee9dc38e0281f6935fbffe55f4a6433d0e2', class: "section-font-class" }, "klase: tet-border-radius--xs"), h("div", { key: 'fe4f046ed89b42502ee7180677bb5a259f7340c9', class: "section-font-size" }, "border radius: 0.25rem / 4px")), h("div", { key: 'ffc579b55b2367870da672b5751d38c7d0f5a32c', class: "section-variable" }, h("div", { key: '7e8d1c065457c09790ccd1988ce1beb0c59006bd', class: "border tet-border-radius--sm" }), h("div", { key: '98f0c98a991be8d0ff39f4d71089fbbfde8f33ea', class: "section-font-class" }, "klase: tet-border-radius--sm"), h("div", { key: '506b50c7f298a4531e7b0409959d655b66c30252', class: "section-font-size" }, "border radius: 0.5rem / 8px")), h("div", { key: 'e1b6f6042a873c827c44ce13344aff6fe11e0657', class: "section-variable" }, h("div", { key: 'aca1e8f42a6f9d19457b4916dd81c78391482967', class: "border tet-border-radius--md" }), h("div", { key: '702d6f889d5984a74a0474b3e5d06cc66b99e772', class: "section-font-class" }, "klase: tet-border-radius--md"), h("div", { key: '6b5f73662a584040e98bb8f391ddccd3dae32455', class: "section-font-size" }, "border radius: 1rem / 16px")), h("div", { key: '4ea0177f932f7e9cfb80f22ab2059226ba877535', class: "section-variable" }, h("div", { key: '688b45913af5af638f60720f1abed2982d779924', class: "border tet-border-radius--lg" }), h("div", { key: '1f32e971e49fc281bb86118447d57472e7cef258', class: "section-font-class" }, "klase: tet-border-radius--lg"), h("div", { key: '9da54521dbd0aa1c58abdbde2a18045554895c90', class: "section-font-size" }, "border radius: 1.5rem / 24px"), h("div", { key: '636a282f2f0bedc9773b3f53e4717428c4760ce2', class: "section-font-size" })), h("div", { key: 'eed31f89221be7809a8d6d028524b4e4bfce818a', class: "section-variable" }, h("div", { key: 'd5b8944f266876dc1b1940b54acc79cd445c5cf3', class: "border tet-border-radius--xl" }), h("div", { key: '632e6523233d653e27c1b42bed83ced6532c8fa7', class: "section-font-class" }, "klase: tet-border-radius--xl"), h("div", { key: '57a394b6f5dbbe61866c447011ba92a93c50f3f0', class: "section-font-size" }, "border radius: 2rem / 32px"))))));
+        return (h(Host, { key: '4facf9cc9757b96b7541b50eba8232efb50873a0' }, h("div", { key: '4a345b6a0f448304b5f49632842bed813550644a', class: "variable-container" }, h("div", { key: '3bde1c9e0a6c31ab5395833cdee16ff924bcb515', class: "container-title main" }, "Border r\u0101diusa klase"), h("div", { key: '55cdc6f51cb210b8d0ad1ce2b506249c047fd408', class: "container-section" }, h("div", { key: '10ff2f2effca84d5e8c6ba759dbb0a0f053f9570', class: "variable-name" }, h("div", { key: '13236f944ac1f50159625a66d0ee4fdf5d3e2540', class: "variable-part" }, "tet"), h("div", { key: '0f63c6ae98effe5e2d147b9f9b0b7a433945bdbc', class: "variable-part" }, "-border"), h("div", { key: '28e2a1034d554ae8e288c7cef9bd6ebdae58c968', class: "variable-part variable variable-type" }, "-radius"), h("div", { key: '7b7b46c6bdded83de4b5fc4b4b9cdf7f8ebc06aa', class: "variable-part variable variable-size" }, "--md")))), h("div", { key: 'b94d53f117b2c25bd4e5f8df29396f1023b2f841', class: "tet-fonts-container" }, h("div", { key: '851c909f0d1d78d34018125a735af1b682298d2b', class: "container-title" }, "R\u0101diusa izm\u0113ri"), h("div", { key: 'cd0af74aa7a78b41b1529925801d11f32e741744', class: "section" }, h("div", { key: '945ce648b94ea0c95427f9104f5f99fa4e32d984', class: "section-variable" }, h("div", { key: 'b86a4f9d5c25e6ecd4a9dd72f871d339199e579e', class: "border tet-border-radius--xs" }), h("div", { key: 'bbde69eadeec505c1a38afb62ac50b1b04b5654c', class: "section-font-class" }, "klase: tet-border-radius--xs"), h("div", { key: 'e683da8db602de01820e227caeea6e8e9c0e49e2', class: "section-font-size" }, "border radius: 0.25rem / 4px")), h("div", { key: 'c3985e161abf69dc86c8f34a6b0dff2e13df156e', class: "section-variable" }, h("div", { key: 'e0bf2064f5bb5ed5d659bba38cc0088549d8a7f4', class: "border tet-border-radius--sm" }), h("div", { key: '7cd7d97d6f1918514ceca6b778b680ec1f31039b', class: "section-font-class" }, "klase: tet-border-radius--sm"), h("div", { key: 'c7b2d5ddeb55444aad1efb6602030b35baaae8e3', class: "section-font-size" }, "border radius: 0.5rem / 8px")), h("div", { key: '2ec178a0da30cde7df13693d35504626478859ff', class: "section-variable" }, h("div", { key: '5bedae662edda29cab90077e6f74af2ad0096b3d', class: "border tet-border-radius--md" }), h("div", { key: '22ba0e1e93d2a2235d892125cdf8b7b6a075d330', class: "section-font-class" }, "klase: tet-border-radius--md"), h("div", { key: 'f58f8a6c513945dbb07c65dc4ca15593b163e9aa', class: "section-font-size" }, "border radius: 1rem / 16px")), h("div", { key: '09b4c8c8bca0c752553cd850e37a4cc87bcfdf33', class: "section-variable" }, h("div", { key: '841de0bae04b0034e4a6a2688637c9c2e93f4402', class: "border tet-border-radius--lg" }), h("div", { key: '0917f03d966c40f02d2ecf5558467690506a6008', class: "section-font-class" }, "klase: tet-border-radius--lg"), h("div", { key: 'ffe06beb065e411b81a1867a3fa366ee7c7670cc', class: "section-font-size" }, "border radius: 1.5rem / 24px"), h("div", { key: '0f73aad1f57c4fb731fc8b87995174ed55426ae8', class: "section-font-size" })), h("div", { key: 'cbff70f17cef873f11ffdc597ae6b0dbaafabc39', class: "section-variable" }, h("div", { key: '77d9f16ae3bb791146e41475f397af4da0b68614', class: "border tet-border-radius--xl" }), h("div", { key: 'f20e5d95e7590e96abfb49221bf4c580040ca46c', class: "section-font-class" }, "klase: tet-border-radius--xl"), h("div", { key: 'e749b4724a67d40d4c35ef23fb6daba55e1518f1', class: "section-font-size" }, "border radius: 2rem / 32px"))))));
     }
     static get is() { return "tet-border-radius"; }
     static get encapsulation() { return "shadow"; }