@scania/tegel 1.32.2-multibrand-beta.5 → 1.33.0

package/dist/collection/assets/logos/scania/scania-wordmark.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="566.93px" height="93.754px" viewBox="0 0 566.93 93.754" enable-background="new 0 0 566.93 93.754" xml:space="preserve">
+<path fill="#041E42" d="M264.588,54.663h-23.774l11.885-31.01L264.588,54.663z M375.749,89.829h37.5V3.804h-32.236v45.34
+	l-33.946-45.34h-40.81V73.95l-27.08-70.146h-52.333l-19.629,50.859h-31.967c-1.593,10.166-7.477,15.557-17.77,15.557
+	c-11.89,0-18.511-9.188-18.511-23.403c0-14.213,6.748-23.286,18.511-23.286c9.684,0,15.929,5.151,17.28,13.486h35.419v-2.334
+	C210.179,15.688,193.749,0,157.846,0c-38.729,0-53.437,19.365-53.437,46.816c0,0.629,0.02,1.25,0.033,1.875
+	c-4.857-5.908-14.18-9.351-29.564-11.558l-22.426-3.188c-8.457-1.221-13.727-2.197-13.727-6.367c0-3.555,3.307-7.358,12.505-7.358
+	c10.171,0,15.812,3.926,15.812,10.298h36.024v-1.836c0-17.163-17.157-28.438-50.863-28.438c-34.674,0-49.878,12.627-49.878,30.396
+	c0,13.848,9.066,21.938,30.391,24.882l25.371,3.545c9.066,1.229,12.012,3.065,12.012,6.865c0,4.901-4.658,7.606-15.078,7.606
+	c-11.763,0-17.147-5.029-17.147-12.013H0v1.964c0,19.11,18.013,30.137,53.433,30.137c32.729,0,51.704-7.228,54.814-25.487
+	c6.548,15.674,21.947,25.614,49.599,25.614c20.972,0,32.739-5.713,39.804-14.325l-4.013,10.399h33.696l4.779-12.373h41.177
+	l4.779,12.373h28.188h6.123h26.113V40.317L375.749,89.829z M519.127,54.663h-23.771l11.885-31.01L519.127,54.663z M566.93,89.829
+	L533.717,3.804h-52.334L454.304,73.95V3.794h-32.969v86.035h26.836h6.133h27.566l4.775-12.373h41.182l4.785,12.373H566.93z"/>
+</svg>

package/dist/collection/assets/logos/traton/traton-logotype-black.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 90.71"><defs><style>.cls-1{fill:#000;stroke-width:0}</style></defs><path class="cls-1" d="M493.47 87.6h15.55V37.88l57.91 51.88V4.24h-15.57v51.4L493.48 2.09l-.01 85.51zM427.51 16.35c-15.58 0-28.26 12.68-28.26 28.26s12.68 28.27 28.26 28.27 28.27-12.68 28.27-28.27-12.68-28.26-28.27-28.26m0 71.93c-24.08 0-43.66-19.59-43.66-43.67S403.43.94 427.5.94s43.67 19.6 43.67 43.67-19.59 43.67-43.67 43.67M295.01 18.36H326V87.6h15.95V18.36h30.99V4.24h-77.93v14.12zM194.54 87.6h18.29l42.39-83.37h-18.29L194.54 87.6zM256.9 53.25l17.51 34.35h18.65l-26.88-52.63-9.28 18.28zM178.23 35.17c0-16.85-13.33-30.93-30.3-30.93h-46.55V87.6h15.95V65.54l29.9-.1L158.5 87.6h17.88l-12.82-25.25c8.42-4.49 14.67-14.9 14.67-27.18m-34.06 16.48h-26.84V18.36h26.84c11.73 0 18.24 8.61 18.24 16.7 0 7.06-4.8 16.59-18.24 16.59M0 4.24v14.12h30.99V87.6h15.95V18.36h30.99V4.24H0z"/></svg>

package/dist/collection/assets/logos/traton/traton-logotype-blue.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 566.9 90.7"><defs><style>.cls-1{fill:#001d21;stroke-width:0}</style></defs><path class="cls-1" d="M493.5 87.6H509V37.9l57.9 51.9V4.2h-15.5v51.4L493.5 2.1v85.5zM427.5 16.3c-15.6 0-28.3 12.7-28.3 28.3s12.7 28.3 28.3 28.3 28.3-12.7 28.3-28.3-12.7-28.3-28.3-28.3m0 72c-24.1 0-43.7-19.6-43.7-43.7S403.4.9 427.5.9s43.7 19.6 43.7 43.7-19.6 43.7-43.7 43.7M295 18.4h31v69.2h16V18.4h30.9V4.2H295v14.2zM194.5 87.6h18.3l42.4-83.4h-18.3l-42.4 83.4zM256.9 53.3l17.5 34.3h18.7L266.2 35l-9.3 18.3zM178.2 35.2c0-16.9-13.3-30.9-30.3-30.9h-46.6v83.4h16V65.6h29.9c0-.1 11.3 22.1 11.3 22.1h17.9l-12.8-25.3c8.4-4.5 14.7-14.9 14.7-27.2m-34.1 16.4h-26.8V18.4h26.8c11.7 0 18.2 8.6 18.2 16.7s-4.8 16.6-18.2 16.6M0 4.2v14.2h31v69.2h15.9V18.4h31V4.2H0z"/></svg>

package/dist/collection/assets/logos/traton/traton-logotype-white.svg

@@ -0,0 +1 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 566.93 90.71"><defs><style>.cls-1{fill:#fff;stroke-width:0}</style></defs><path class="cls-1" d="M493.47 87.6h15.55V37.88l57.91 51.88V4.24h-15.57v51.4L493.48 2.09l-.01 85.51zM427.51 16.35c-15.58 0-28.26 12.68-28.26 28.26s12.68 28.27 28.26 28.27 28.27-12.68 28.27-28.27-12.68-28.26-28.27-28.26m0 71.93c-24.08 0-43.66-19.59-43.66-43.67S403.43.94 427.5.94s43.67 19.6 43.67 43.67-19.59 43.67-43.67 43.67M295.01 18.36H326V87.6h15.95V18.36h30.99V4.24h-77.93v14.12zM194.54 87.6h18.29l42.39-83.37h-18.29L194.54 87.6zM256.9 53.25l17.51 34.35h18.65l-26.88-52.63-9.28 18.28zM178.23 35.17c0-16.85-13.33-30.93-30.3-30.93h-46.55V87.6h15.95V65.54l29.9-.1L158.5 87.6h17.88l-12.82-25.25c8.42-4.49 14.67-14.9 14.67-27.18m-34.06 16.48h-26.84V18.36h26.84c11.73 0 18.24 8.61 18.24 16.7 0 7.06-4.8 16.59-18.24 16.59M0 4.24v14.12h30.99V87.6h15.95V18.36h30.99V4.24H0z"/></svg>

package/dist/collection/components/accordion/accordion-item/accordion-item.css

@@ -87,15 +87,15 @@
   color: var(--tds-accordion-color-disabled);
 }
 .tds-accordion-item.disabled:hover,
-.tds-accordion-item.disabled:hover *, .tds-accordion-item.disabled:focus,
-.tds-accordion-item.disabled:focus *, .tds-accordion-item.disabled:active,
+.tds-accordion-item.disabled:hover *, .tds-accordion-item.disabled:focus-within,
+.tds-accordion-item.disabled:focus-within *, .tds-accordion-item.disabled:active,
 .tds-accordion-item.disabled:active *, .tds-accordion-item.disabled.active,
 .tds-accordion-item.disabled.active * {
   cursor: not-allowed;
 }
 .tds-accordion-item.disabled:hover .tds-accordion-header-icon-start,
-.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end, .tds-accordion-item.disabled:focus .tds-accordion-header-icon-start,
-.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end, .tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-start,
+.tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-end, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start,
 .tds-accordion-item.disabled:active .tds-accordion-header-icon-end, .tds-accordion-item.disabled.active .tds-accordion-header-icon-start,
 .tds-accordion-item.disabled.active .tds-accordion-header-icon-end {
   background-color: var(--tds-accordion-bg);
@@ -103,8 +103,8 @@
   pointer-events: none;
 }
 .tds-accordion-item.disabled:hover .tds-accordion-header-icon-start::after,
-.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:focus .tds-accordion-header-icon-start::after,
-.tds-accordion-item.disabled:focus .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:hover .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-start::after,
+.tds-accordion-item.disabled:focus-within .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled:active .tds-accordion-header-icon-start::after,
 .tds-accordion-item.disabled:active .tds-accordion-header-icon-end::after, .tds-accordion-item.disabled.active .tds-accordion-header-icon-start::after,
 .tds-accordion-item.disabled.active .tds-accordion-header-icon-end::after {
   border-color: transparent;
@@ -124,20 +124,25 @@
   margin-left: 0;
   margin-right: var(--tds-spacing-element-16);
 }
-.tds-accordion-item:focus {
+.tds-accordion-item:first-child {
+  margin-bottom: -1px;
+  border-bottom: 1px solid var(--tds-accordion-border);
+}
+.tds-accordion-item:has(.tds-accordion-header-icon-start:focus), .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
   border-top: 1px solid var(--tds-accordion-border-focus);
 }
-.tds-accordion-item[disabled=true]:focus {
+.tds-accordion-item[disabled=true]:focus-within {
   border-color: var(--tds-accordion-border);
 }
 
-:host(:focus) .tds-accordion-item {
-  outline: 2px solid var(--tds-blue-400);
+:host(:focus-within) .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), :host(:focus-within) .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
-:host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
-:host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
+:host(:focus-within) .tds-accordion-item .tds-accordion-header-icon-start,
+:host(:focus-within) .tds-accordion-item .tds-accordion-header-icon-end {
   background-color: var(--tds-accordion-background-focus);
   outline: none;
 }
@@ -147,8 +152,33 @@
   background-color: var(--tds-accordion-background-hover);
 }
 
-:host(:active) .tds-accordion-header-icon-start,
-:host(:active) .tds-accordion-header-icon-end {
+:host(:focus-within:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:focus), :host(:focus-within:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:focus) {
+  outline: 2px solid var(--tds-focus-outline-color);
+  box-shadow: 0 0 0 1px var(--tds-white);
+  outline-offset: 1px;
+  z-index: 1;
+}
+:host(:focus-within:hover) .tds-accordion-item .tds-accordion-header-icon-start,
+:host(:focus-within:hover) .tds-accordion-item .tds-accordion-header-icon-end {
+  background-color: var(--tds-accordion-background-hover);
+  outline: none;
+}
+
+.tds-accordion-item:has(:hover) {
+  background-color: var(--tds-accordion-background-hover);
+}
+
+.tds-accordion-item:has(.tds-accordion-header-icon-start:active),
+.tds-accordion-item:has(.tds-accordion-header-icon-end:active) {
+  background-color: var(--tds-accordion-background-active);
+}
+
+:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-start:active) .tds-accordion-header-icon-start,
+:host(:hover) .tds-accordion-item:has(.tds-accordion-header-icon-end:active) .tds-accordion-header-icon-end {
   background-color: var(--tds-accordion-background-active);
+}
+
+.tds-accordion-header-icon-start:active,
+.tds-accordion-header-icon-end:active {
   outline: none;
 }

package/dist/collection/components/accordion/accordion.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
   box-sizing: border-box;
+  background-color: transparent;
 }
 :host * {
   box-sizing: border-box;
@@ -11,9 +12,10 @@
 }
 
 :host(:focus) {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-start,
 :host(:focus) .tds-accordion-item .tds-accordion-header-icon-end {
@@ -65,4 +67,12 @@
 
 :host(.hide-last-border:last-child) {
   border-bottom: none;
+}
+
+:host(.tds-mode-variant-secondary) {
+  background-color: var(--tds-accordion-background);
+}
+
+:host(.tds-mode-variant-primary) {
+  background-color: var(--tds-accordion-background);
 }

package/dist/collection/components/banner/banner.css

@@ -77,7 +77,8 @@
   outline: none;
 }
 :host .banner-close button:focus-visible tds-icon {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
 }

package/dist/collection/components/block/block.css

@@ -1,35 +1,28 @@
-/* Typography Usage mixins */
-/* Centralized map of typography types */
-/* Utility mixin */
 .tds-block {
   box-sizing: border-box;
-  font-family: var(--detail-01-font-family);
-  font-size: var(--detail-01-font-size);
-  line-height: var(--detail-01-line-height);
-  font-weight: var(--detail-01-font-weight);
-  letter-spacing: var(--detail-01-letter-spacing);
-  text-transform: var(--detail-01-text-transform);
-  background-color: var(--block-background);
-  color: var(--block-text-color);
+  color: var(--tds-block-color);
+  background-color: var(--tds-block-background);
   border-radius: 4px;
   padding: 16px;
+  font: var(--tds-body-01);
+  letter-spacing: var(--tds-body-01-ls);
 }
 .tds-block * {
   box-sizing: border-box;
 }
 
 .tds-mode-variant-primary {
-  background-color: var(--block-background-mode-primary);
+  background-color: var(--tds-block-background-primary);
 }
 
 .tds-mode-variant-secondary {
-  background-color: var(--block-background-mode-secondary);
+  background-color: var(--tds-block-background-secondary);
 }
 
 .tds-block-even {
-  background-color: var(--block-background-even);
+  background-color: var(--tds-block-background-even);
 }
 
 .tds-block-odd {
-  background-color: var(--block-background-odd);
+  background-color: var(--tds-block-background-odd);
 }

package/dist/collection/components/block/block.js

@@ -13,7 +13,6 @@ export class TdsBlock {
         this.componentTag = 'div';
     }
     getNestingLevel() {
-        // Start at 0 for the outermost block
         let level = 0;
         let parent = this.host.parentElement;
         while (parent) {
@@ -28,10 +27,7 @@ export class TdsBlock {
         const TagType = this.componentTag;
         const nestingLevel = this.getNestingLevel();
         let evenOddClass = '';
-        // Check if this block has any tds-block children
-        const hasNestedBlocks = Array.from(this.host.querySelectorAll('tds-block')).length > 0;
-        // Only apply even/odd classes if this block has nested blocks or is itself nested
-        if (this.modeVariant === null && (nestingLevel > 0 || hasNestedBlocks)) {
+        if (this.modeVariant === null) {
             if (nestingLevel % 2 === 0) {
                 evenOddClass = 'tds-block-even';
             }
@@ -39,7 +35,7 @@ export class TdsBlock {
                 evenOddClass = 'tds-block-odd';
             }
         }
-        return (h(TagType, { key: '3f595ff59e8957fdc7bbb3680545d293e4c9628a', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '13cf4ac7582e31558780e39e0ef1610edf79331b' })));
+        return (h(TagType, { key: '34385f3ac01d173e6bb568432418304186d261c7', class: `tds-block ${evenOddClass} ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", { key: '569b04916fb165fb460711ec659ed2dc3e9ebd12' })));
     }
     static get is() { return "tds-block"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumbs/breadcrumb/breadcrumb.css

@@ -8,9 +8,10 @@
   text-decoration: underline;
 }
 :host([role=listitem]) div ::slotted(*:focus-visible) {
-  outline: 2px solid var(--tds-blue-400);
+  outline: 2px solid var(--tds-focus-outline-color);
   box-shadow: 0 0 0 1px var(--tds-white);
   outline-offset: 1px;
+  z-index: 1;
   outline-offset: 0;
 }
 :host([role=listitem]) div.current ::slotted(*),