@scania/tegel 1.23.0-block-nesting-beta.1 → 1.23.0-config-for-china.beta.1

package/dist/collection/components/popover-core/tds-popover-core.css

@@ -4203,119 +4203,6 @@ html {
     width: 1856px;
   }
 }
-@font-face {
-  font-family: "Scania Sans";
-  font-weight: bold;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans";
-  font-style: italic;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Italic.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans";
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCY-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Condensed";
-  font-weight: bold;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Condensed";
-  font-style: italic;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Italic.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Condensed";
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYCondensed-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Headline";
-  font-weight: bold;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Headline";
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYHeadline-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Semi Condensed";
-  font-weight: bold;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Semi Condensed";
-  font-style: italic;
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Semi Condensed";
-  unicode-range: U+0400-04FF;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans";
-  font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans";
-  font-style: italic;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Italic.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSans-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSans-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Condensed";
-  font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Condensed";
-  font-style: italic;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Italic.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Condensed";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansCondensed-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Headline";
-  font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Headline";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansHeadline-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansHeadline-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Semi Condensed";
-  font-weight: bold;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Semi Condensed";
-  font-style: italic;
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Italic.woff") format("woff");
-}
-@font-face {
-  font-family: "Scania Sans Semi Condensed";
-  src: url("https://cdn.digitaldesign.scania.com/fonts/scania-sans/1.0.0/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff"), url("./assets/fonts/latin/ScaniaSansSemiCondensed-Regular.woff") format("woff");
-}
 /* https://medium.com/swlh/full-text-styling-with-a-single-line-of-css-838e8c666f4d */
 :root {
   /* FUNCTIONAL TYPOGRAPHY */
@@ -4632,19 +4519,42 @@ h6 {
   letter-spacing: -0.01em;
 }
 
-:root,
-html {
-  --tds-background-image-scania-wordmark-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark/scania-wordmark.png);
-  --tds-background-image-scania-wordmark-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark/scania-wordmark.svg);
-  --tds-background-image-scania-wordmark-white-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark-white/scania-wordmark-white.png);
-  --tds-background-image-scania-wordmark-white-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_wordmark-white/scania-wordmark-white.svg);
-  --tds-background-image-scania-symbol-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_symbol/scania-symbol.png);
-  --tds-background-image-scania-symbol-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_symbol/scania-symbol.svg);
-  --tds-background-image-scania-logotype-png: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_logotype/scania-logotype.png);
-  --tds-background-image-scania-logotype-svg: url(https://cdn.digitaldesign.scania.com/logotype/1.0.0/scania_logotype/scania-logotype.svg);
-  --tds-background-image-scania-wordmark-white-svg: url("./assets/logos/scania-wordmark-white.svg");
-  --tds-background-image-scania-symbol-svg: url("./assets/logos/scania-symbol.svg");
-  --tds-background-image-scania-symbol-png: url("./assets/logos/scania-symbol.png");
+:root {
+  --tds-logo-url-logotype-png: url("https://cdn.digitaldesign.scania.com/logos/scania-logotype.png");
+  --tds-logo-url-logotype-svg: url("https://cdn.digitaldesign.scania.com/logos/scania-logotype.svg");
+  --tds-logo-url-symbol-png: url("https://cdn.digitaldesign.scania.com/logos/scania-symbol.png");
+  --tds-logo-url-symbol-svg: url("https://cdn.digitaldesign.scania.com/logos/scania-symbol.svg");
+  --tds-logo-url-wordmark-png: url("https://cdn.digitaldesign.scania.com/logos/scania-wordmark.png");
+  --tds-logo-url-wordmark-svg: url("https://cdn.digitaldesign.scania.com/logos/scania-wordmark.svg");
+  --tds-logo-url-wordmark-white-png: url("https://cdn.digitaldesign.scania.com/logos/scania-wordmark-white.png");
+  --tds-logo-url-wordmark-white-svg: url("https://cdn.digitaldesign.scania.com/logos/scania-wordmark-white.svg");
+}
+
+.scania-logotype--png {
+  background-image: var(--tds-logo-url-logotype-png);
+}
+.scania-logotype--svg {
+  background-image: var(--tds-logo-url-logotype-svg);
+}
+
+.scania-symbol--png {
+  background-image: var(--tds-logo-url-symbol-png);
+}
+.scania-symbol--svg {
+  background-image: var(--tds-logo-url-symbol-svg);
+}
+
+.scania-wordmark--png {
+  background-image: var(--tds-logo-url-wordmark-png);
+}
+.scania-wordmark--svg {
+  background-image: var(--tds-logo-url-wordmark-svg);
+}
+.scania-wordmark-white--png {
+  background-image: var(--tds-logo-url-wordmark-white-png);
+}
+.scania-wordmark-white--svg {
+  background-image: var(--tds-logo-url-wordmark-white-svg);
 }
 
 /** The breakpoint at which the layout changes from fixed size to full-width. */
@@ -5153,14 +5063,20 @@ html {
   --tds-block-background: var(--tds-grey-50);
   --tds-block-background-primary: var(--tds-grey-50);
   --tds-block-background-secondary: var(--tds-white);
+  --tds-block-background-even: var(--tds-grey-50);
+  --tds-block-background-odd: var(--tds-white);
 }
 :root .tds-mode-variant-primary,
 .tds-mode-light .tds-mode-variant-primary {
   --tds-block-background: var(--tds-grey-50);
+  --tds-block-background-even: var(--tds-grey-50);
+  --tds-block-background-odd: var(--tds-white);
 }
 :root .tds-mode-variant-secondary,
 .tds-mode-light .tds-mode-variant-secondary {
   --tds-block-background: var(--tds-white);
+  --tds-block-background-even: var(--tds-white);
+  --tds-block-background-odd: var(--tds-grey-50);
 }
 
 .tds-mode-dark {
@@ -5168,12 +5084,18 @@ html {
   --tds-block-background: var(--tds-grey-900);
   --tds-block-background-primary: var(--tds-grey-900);
   --tds-block-background-secondary: var(--tds-grey-868);
+  --tds-block-background-even: var(--tds-grey-900);
+  --tds-block-background-odd: var(--tds-grey-868);
 }
 .tds-mode-dark .tds-mode-variant-primary {
   --tds-block-background: var(--tds-grey-900);
+  --tds-block-background-even: var(--tds-grey-900);
+  --tds-block-background-odd: var(--tds-grey-868);
 }
 .tds-mode-dark .tds-mode-variant-secondary {
   --tds-block-background: var(--tds-grey-868);
+  --tds-block-background-even: var(--tds-grey-868);
+  --tds-block-background-odd: var(--tds-grey-900);
 }
 
 :root,
@@ -6088,34 +6010,39 @@ html {
 
 :root,
 .tds-mode-light {
-  --tds-link: var(--tds-blue-500);
+  --tds-link: var(--tds-blue-400);
   --tds-link-hover: var(--tds-blue-400);
   --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-grey-900);
+  --tds-link-visited: var(--tds-blue-700);
   --tds-link-disabled: var(--tds-grey-400);
 }
 :root tds-toast,
 .tds-mode-light tds-toast {
-  --tds-link: var(--tds-blue-300);
+  --tds-link: var(--tds-blue-400);
   --tds-link-hover: var(--tds-blue-400);
   --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-blue-100);
-  --tds-link-disabled: var(--tds-grey-800);
+  --tds-link-visited: var(--tds-blue-700);
+  --tds-link-disabled: var(--tds-grey-400);
 }
 
 .tds-mode-dark {
   --tds-link: var(--tds-blue-300);
-  --tds-link-hover: var(--tds-blue-400);
-  --tds-link-focus: var(--tds-blue-400);
+  --tds-link-hover: var(--tds-blue-300);
+  --tds-link-focus: var(--tds-blue-300);
   --tds-link-visited: var(--tds-blue-100);
-  --tds-link-disabled: var(--tds-grey-800);
+  --tds-link-disabled: var(--tds-grey-700);
 }
 .tds-mode-dark tds-toast {
-  --tds-link: var(--tds-blue-500);
-  --tds-link-hover: var(--tds-blue-400);
-  --tds-link-focus: var(--tds-blue-400);
-  --tds-link-visited: var(--tds-grey-900);
-  --tds-link-disabled: var(--tds-grey-400);
+  --tds-link: var(--tds-blue-300);
+  --tds-link-hover: var(--tds-blue-300);
+  --tds-link-focus: var(--tds-blue-300);
+  --tds-link-visited: var(--tds-blue-100);
+  --tds-link-disabled: var(--tds-grey-700);
+}
+
+tds-link tds-icon {
+  padding-bottom: 4px;
+  padding-left: 5px;
 }
 
 :root,

package/dist/collection/components/slider/slider.js

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, } from "@stencil/core";
 import generateUniqueId from "../../utils/generateUniqueId";
 export class TdsSlider {
     constructor() {
@@ -16,6 +16,11 @@ export class TdsSlider {
         this.useSnapping = false;
         this.supposedValueSlot = -1;
         this.resizeObserverAdded = false;
+        this.resetEventListenerAdded = false;
+        this.resetToInitialValue = () => {
+            this.forceValueUpdate(this.initialValue);
+            this.reset();
+        };
         this.label = '';
         this.value = '0';
         this.min = '0';
@@ -295,26 +300,46 @@ export class TdsSlider {
         }
         this.calculateThumbLeftFromValue(this.value);
         this.updateTrack();
+        // Only set the initial value once:
+        if (!this.initialValue) {
+            this.initialValue = this.value;
+        }
+    }
+    componentDidRender() {
+        // Only add the event listener once:
+        if (!this.resetEventListenerAdded) {
+            this.formElement = this.host.closest('form');
+            if (this.formElement) {
+                this.formElement.addEventListener('reset', this.resetToInitialValue);
+                this.resetEventListenerAdded = true;
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.resetEventListenerAdded && this.formElement) {
+            this.formElement.removeEventListener('reset', this.resetToInitialValue);
+            this.resetEventListenerAdded = false;
+        }
     }
     render() {
-        return (h("div", { key: 'fd7d051192c33b19e8c68cbeaa50ea43149457bb', class: {
+        return (h("div", { key: 'ed4c71d1701e0711d8b01c015f137f6a3f10457e', class: {
                 'tds-slider-wrapper': true,
                 'read-only': this.readOnly,
-            } }, h("input", { key: 'd2fe02893f865f5791736cb5f05b5bcd2494e471', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '2d436a5654cb20923cd20ed61f9449bd0705edd2', class: {
+            } }, h("input", { key: '7d85ba109ec41e45a4ced646cfe092832b2013a7', class: "tds-slider-native-element", type: "range", name: this.name, min: this.min, max: this.max, value: this.value, disabled: this.disabled }), h("div", { key: '7c32efe653a6437068026e0b612bd1cdb0fd580d', class: {
                 'tds-slider': true,
                 'disabled': this.disabled,
                 'tds-slider-small': this.useSmall,
             }, ref: (el) => {
                 this.wrapperElement = el;
-            } }, h("label", { key: 'd9d444d15acabbbc23c7b7633e5312f405ff9120', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '2f0d0419138851724891e2ab04fef2f3b3e099f1', class: "tds-slider__input-values" }, h("div", { key: '7f23007c0f4a1aa6358ffa7c5aaae027d0927b63', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: 'df4a00a40c541b83aa8459dfcdaf22c348e2c80a', class: "tds-slider__controls" }, h("div", { key: '96cc419d369098137895b725f97a8fa3d7d50dfc', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '09ed43c9f2fe81baeada6a07e4cba18027f04ba1', name: "minus", size: "16px" })))), h("div", { key: '402647683b57076bd4ac3ce3d754585a89a48e08', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: 'd80c648eca47c7e52725e967a32fe4a4692a5729', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: '030106df49f12a55c1b32a9c1c257f449629644a', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: 'fef7013f82a191c32bc3a4d297f5e10a4db127a1', class: "tds-slider__track", ref: (el) => {
+            } }, h("label", { key: '5561410214fda42ddb4553084f312de9943f825b', class: this.showTickNumbers && 'offset' }, this.label), this.useInput && (h("div", { key: '37340de05febbca285f031bd8df7d9c2588e315d', class: "tds-slider__input-values" }, h("div", { key: 'e973831529eb93eb0b0da6c5f92bd838dfb9bcdb', class: "tds-slider__input-value min-value" }, this.min))), this.useControls && (h("div", { key: '1a710d2d1ffac7533f9bae2908d4341d3b40e2f0', class: "tds-slider__controls" }, h("div", { key: '0a741834782d8e69a7d55e6cd87a3fdf4938d744', class: "tds-slider__control tds-slider__control-minus", onClick: (event) => this.stepLeft(event) }, h("tds-icon", { key: '8c67943ac2e15d742726e76c2b4c029d15c20f32', name: "minus", size: "16px" })))), h("div", { key: '96c4229007fbe882e106bcc3deb34f504c9604e3', class: "tds-slider-inner" }, this.tickValues.length > 0 && (h("div", { key: '905fc1a02070f5419f76ec5d60d8f55d89d4650b', class: "tds-slider__value-dividers-wrapper" }, h("div", { key: 'd2ccbea1b6e26ab1855c81e71730bebea0da37d8', class: "tds-slider__value-dividers" }, this.tickValues.map((value) => (h("div", { class: "tds-slider__value-divider" }, this.showTickNumbers && h("span", null, value))))))), h("div", { key: '30c9b4bb6f59631d443345ee6d1edf1973a83d0b', class: "tds-slider__track", ref: (el) => {
                 this.trackElement = el;
-            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '24a583182c45114d1e011bffef0f81f1e4f93a36', class: "tds-slider__track-fill", ref: (el) => {
+            }, tabindex: this.disabled ? '-1' : '0' }, h("div", { key: '7acbccae98c481c4cfaeb2dc66d67a2e19575b93', class: "tds-slider__track-fill", ref: (el) => {
                 this.trackFillElement = el;
-            } }), h("div", { key: '3bea53237beb92f41264386fb5ac181d1e9966a4', class: "tds-slider__thumb", ref: (el) => {
+            } }), h("div", { key: '46a5c3135c5f765d5fb0845372dc3854586fa44d', class: "tds-slider__thumb", ref: (el) => {
                 this.thumbElement = el;
-            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: '3ac44629cad3b03524602f9babe7fa4582b38660', class: "tds-slider__value" }, this.value, h("svg", { key: '5adbbcc274555d14454c5329f0eea8c072a3db2c', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '248b1f8521b89be4214631e411c0ba9c7bcc07a8', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'bc778a9ccd25a5229aa7685cc6c22ed5385b9d98', class: "tds-slider__thumb-inner", ref: (el) => {
+            }, onMouseDown: () => this.grabThumb(), onTouchStart: () => this.grabThumb() }, this.tooltip && (h("div", { key: 'd39cd29d1e6302f8bd4a3d827797f8822e24b84d', class: "tds-slider__value" }, this.value, h("svg", { key: '5946f90b70b2afb2efc7f3a3bc5817a82ac3ca4a', width: "18", height: "14", viewBox: "0 0 18 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '9456df642aca39b94b17bb529ca02e2d6a2fde6c', d: "M8.15882 12.6915L0.990487 1.54076C0.562658 0.875246 1.0405 0 1.83167 0H16.1683C16.9595 0 17.4373 0.875246 17.0095 1.54076L9.84118 12.6915C9.44754 13.3038 8.55246 13.3038 8.15882 12.6915Z", fill: "currentColor" })))), h("div", { key: 'b4ca73a085f837d7e87e3334b8e58e5638125118', class: "tds-slider__thumb-inner", ref: (el) => {
                 this.thumbInnerElement = el;
-            } })))), this.useInput && (h("div", { key: '077ffffeb0986504a2c9fc4e1b08095ec689402c', class: "tds-slider__input-values" }, h("div", { key: '74a528a286e2b49a6739c5817cca8a0436b908b9', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: 'af2a647636c8eecba19637aa92ddda37adc52a1b', class: "tds-slider__input-field-wrapper" }, h("input", { key: '02701d15de6119994f7be13b9c9ac69ae6f2269b', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: 'ef215ef613c381601674d4bb7dbea583a3ddde2a', class: "tds-slider__controls" }, h("div", { key: '4e553194348daf32529c9c8cedc32b0686ac32ff', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: 'd5d67ea7ff64ed19d28bd078acad56ebda742f93', name: "plus", size: "16px" })))))));
+            } })))), this.useInput && (h("div", { key: '6574286ac7764807fd1e18875d6fa39ab7f7b304', class: "tds-slider__input-values" }, h("div", { key: '57a92adf59551f551c4ae06355c276a69b34028a', class: "tds-slider__input-value", onClick: (event) => this.stepLeft(event) }, this.max), h("div", { key: '0e1632ca8c9510177d349147749e3162aa46f219', class: "tds-slider__input-field-wrapper" }, h("input", { key: '094d194bce54d1073a5d657f7bc3f30107f5fe41', size: this.calculateInputSizeFromMax(), class: "tds-slider__input-field", value: this.value, readOnly: this.readOnly, onBlur: (event) => this.updateSliderValueOnInputChange(event), onKeyDown: (event) => this.handleInputFieldEnterPress(event), type: "number", min: this.min, max: this.max })))), this.useControls && (h("div", { key: '207398a3fd02e11f09c70ebbb8b293d6c16afd1f', class: "tds-slider__controls" }, h("div", { key: 'ca93ce9a55d0db25a3eaefd6e4dbc53106afc895', class: "tds-slider__control tds-slider__control-plus", onClick: (event) => this.stepRight(event) }, h("tds-icon", { key: '6ab123f8701fdd93580a61c500ae6da658b547fd', name: "plus", size: "16px" })))))));
     }
     static get is() { return "tds-slider"; }
     static get originalStyleUrls() {
@@ -673,6 +698,7 @@ export class TdsSlider {
             }
         };
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "value",

package/dist/collection/components/toggle/toggle.css

@@ -18,6 +18,7 @@
   position: relative;
   display: inline-block;
   vertical-align: middle;
+  cursor: pointer;
   /* Switch */
 }
 .tds-toggle input[type=checkbox]::after, .tds-toggle input[type=checkbox]::before {
@@ -42,10 +43,10 @@
   left: 4px;
   top: 4px;
 }
-.tds-toggle input[type=checkbox]:focus {
+.tds-toggle input[type=checkbox]:focus, .tds-toggle input[type=checkbox]:hover {
   outline: none;
 }
-.tds-toggle input[type=checkbox]:focus::before {
+.tds-toggle input[type=checkbox]:focus::before, .tds-toggle input[type=checkbox]:hover::before {
   background-color: var(--tds-toggle-off-slider-focus);
   border: 1px solid var(--tds-toggle-off-border-focus);
 }
@@ -105,6 +106,7 @@
   letter-spacing: var(--tds-detail-01-ls);
   color: var(--tds-toggle-label-color);
   padding-left: 8px;
+  cursor: pointer;
 }
 .tds-toggle label.disabled {
   color: var(--tds-toggle-label-color-disabled);

package/dist/collection/global/assets-loader.js

@@ -0,0 +1,145 @@
+function initializeAssets() {
+    const defaultCDN = 'https://cdn.digitaldesign.scania.com';
+    const assetSource = window.TEGEL_ASSET_SOURCE || defaultCDN;
+    const root = document.documentElement;
+    console.log('Asset Source in Stencil:', assetSource, '\nTEGEL_ASSET_SOURCE value:', window.TEGEL_ASSET_SOURCE, '\nUsing CDN:', assetSource === defaultCDN);
+    // Define all font-face declarations
+    const fontFaces = `
+    /* Scania Sans */
+    @font-face {
+      font-family: 'Scania Sans';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Bold.woff') format('woff');
+      font-weight: bold;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Italic.woff') format('woff');
+      font-weight: normal;
+      font-style: italic;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCY-Regular.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+
+    /* Scania Sans Condensed */
+    @font-face {
+      font-family: 'Scania Sans Condensed';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Bold.woff') format('woff');
+      font-weight: bold;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans Condensed';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Italic.woff') format('woff');
+      font-weight: normal;
+      font-style: italic;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans Condensed';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYCondensed-Regular.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+
+    /* Scania Sans Headline */
+    @font-face {
+      font-family: 'Scania Sans Headline';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Bold.woff') format('woff');
+      font-weight: bold;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans Headline';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYHeadline-Regular.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+
+    /* Scania Sans Semi Condensed */
+    @font-face {
+      font-family: 'Scania Sans Semi Condensed';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Bold.woff') format('woff');
+      font-weight: bold;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans Semi Condensed';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Italic.woff') format('woff');
+      font-weight: normal;
+      font-style: italic;
+      unicode-range: U+0400-04FF;
+    }
+    @font-face {
+      font-family: 'Scania Sans Semi Condensed';
+      src: url('${assetSource}/fonts/scania-sans/1.0.0/cyrillic/ScaniaSansCYSemiCondensed-Regular.woff') format('woff');
+      font-weight: normal;
+      font-style: normal;
+      unicode-range: U+0400-04FF;
+    }
+  `;
+    // Add font-face rules to document
+    const style = document.createElement('style');
+    style.textContent = fontFaces;
+    document.head.appendChild(style);
+    // Set font-family CSS variables
+    root.style.setProperty('--tds-font-family-primary', 'Scania Sans, Arial, sans-serif');
+    root.style.setProperty('--tds-font-family-condensed', 'Scania Sans Condensed, Arial Narrow, Arial, sans-serif');
+    root.style.setProperty('--tds-font-family-headline', 'Scania Sans Headline, Arial, sans-serif');
+    root.style.setProperty('--tds-font-family-semi-condensed', 'Scania Sans Semi Condensed, Arial, sans-serif');
+    // Set logotype variables
+    const logoPath = '/logos';
+    const logotypes = [
+        { name: 'logotype', format: ['png', 'svg'] },
+        { name: 'symbol', format: ['png', 'svg'] },
+        { name: 'wordmark', format: ['png', 'svg'] },
+        { name: 'wordmark-white', format: ['png', 'svg'] },
+    ];
+    logotypes.forEach(({ name, format }) => {
+        format.forEach((ext) => {
+            root.style.setProperty(`--tds-logo-url-${name}-${ext}`, `url('${assetSource}${logoPath}/scania-${name}.${ext}')`);
+        });
+    });
+    // Debug: Log all font-face rules
+    console.log('Font-face rules:', Array.from(document.styleSheets).flatMap((sheet) => {
+        try {
+            return Array.from(sheet.cssRules)
+                .filter((rule) => rule.type === CSSRule.FONT_FACE_RULE)
+                .map((rule) => rule.cssText);
+        }
+        catch (e) {
+            // Handle cross-origin stylesheet errors
+            return [];
+        }
+    }));
+    // Verify settings
+    console.log('Asset initialization complete:', {
+        assetSource,
+        fontFamilyPrimary: getComputedStyle(document.documentElement)
+            .getPropertyValue('--tds-font-family-primary')
+            .trim(),
+        logoUrl: getComputedStyle(document.documentElement)
+            .getPropertyValue('--tds-logo-url-logotype-svg')
+            .trim(),
+        usingCDN: assetSource === defaultCDN,
+    });
+}
+// Initialize as early as possible
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeAssets);
+}
+else {
+    initializeAssets();
+}