@scania/tegel 1.53.0 → 1.54.0-btn-icon-beta.0

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

@@ -1,3 +1,4 @@
+/* Typography Usage mixins */
 :host(.hide) {
   display: none;
   visibility: hidden;
@@ -6,10 +7,16 @@
 :host(.error) {
   background-color: var(--tds-banner-background-error);
 }
+:host(.error) .content {
+  color: var(--tds-banner-text-error-color);
+}
 
 :host(.information) {
   background-color: var(--tds-banner-background-info);
 }
+:host(.information) .content {
+  color: var(--tds-banner-text-info-color);
+}
 
 :host {
   display: flex;
@@ -18,8 +25,7 @@
   padding-left: 16px;
 }
 :host .banner-icon {
-  padding-left: 4px;
-  padding-top: 14px;
+  padding-top: 16px;
   padding-right: 12px;
   color: var(--tds-banner-prefix-default-color);
 }
@@ -46,14 +52,22 @@
 }
 :host .header,
 :host slot[name=header] {
-  font: var(--tds-headline-06);
-  letter-spacing: var(--tds-headline-06-ls);
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
 }
 :host .subheader,
 :host slot[name=subheader] {
   display: block;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
 }
 :host slot[name=actions]::slotted(*) {
   display: block;
@@ -65,7 +79,7 @@
 }
 :host .banner-close button {
   padding-right: 16px;
-  padding-top: 14px;
+  padding-top: 16px;
   background-color: transparent;
   border: none;
   color: var(--tds-banner-x-color);
@@ -77,8 +91,8 @@
   outline: none;
 }
 :host .banner-close button:focus-visible tds-icon {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -1,11 +1,16 @@
+/* Typography Usage mixins */
 .tds-block {
   box-sizing: border-box;
+  font-family: var(--body-01-font-family);
+  font-size: var(--body-01-font-size);
+  line-height: var(--body-01-line-height);
+  font-weight: var(--body-01-font-weight);
+  letter-spacing: var(--body-01-letter-spacing);
+  text-transform: var(--body-01-text-transform);
   color: var(--tds-block-color);
   background-color: var(--tds-block-background);
-  border-radius: 4px;
+  border-radius: var(--tds-block-border-radius);
   padding: 16px;
-  font: var(--tds-body-01);
-  letter-spacing: var(--tds-body-01-ls);
 }
 .tds-block * {
   box-sizing: border-box;

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

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

package/dist/collection/components/button/button.css

@@ -13,7 +13,7 @@ tds-button {
   --tds-btn-primary-border-color-hover: var(--component-button-border-standard-primary-hover);
   --tds-btn-primary-border-color-active: var(--component-button-border-standard-primary-active);
   --tds-btn-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
-  --tds-btn-primary-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-primary-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-primary-fill: var(--component-button-icon-standard-primary-default);
   --tds-btn-icon-primary-color: var(--component-button-icon-standard-primary-default);
   --tds-btn-icon-primary-fill-hover: var(--component-button-icon-standard-primary-hover);
@@ -38,7 +38,7 @@ tds-button {
   --tds-btn-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
   --tds-btn-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
   --tds-btn-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
-  --tds-btn-secondary-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-secondary-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-secondary-fill: var(--component-button-icon-standard-secondary-default);
   --tds-btn-icon-secondary-color: var(--component-button-icon-standard-secondary-default);
   --tds-btn-icon-secondary-fill-hover: var(--component-button-icon-standard-secondary-hover);
@@ -59,7 +59,7 @@ tds-button {
   --tds-btn-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
   --tds-btn-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
   --tds-btn-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
-  --tds-btn-ghost-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-ghost-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-ghost-fill: var(--component-button-icon-standard-tertiary-default);
   --tds-btn-icon-ghost-color: var(--component-button-icon-standard-tertiary-default);
   --tds-btn-icon-ghost-fill-hover: var(--component-button-icon-standard-tertiary-hover);
@@ -80,7 +80,7 @@ tds-button {
   --tds-btn-danger-border-color-hover: var(--component-button-border-danger-primary-hover);
   --tds-btn-danger-border-color-active: var(--component-button-border-danger-primary-active);
   --tds-btn-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
-  --tds-btn-danger-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-danger-outline-color-focus: var(--component--focus-ring-color-strong);
   --tds-btn-icon-danger-fill: var(--component-button-icon-danger-primary-default);
   --tds-btn-icon-danger-color: var(--component-button-icon-danger-primary-default);
   --tds-btn-icon-danger-fill-hover: var(--component-button-icon-danger-primary-hover);
@@ -116,11 +116,11 @@ button * {
   box-sizing: border-box;
 }
 button:focus {
-  outline: 1px solid var(--tds-focus-outline-color);
+  outline: 1px solid var(--component--focus-ring-color-strong);
 }
 button:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -420,4 +420,7 @@ tds-button button.lg::slotted([slot=icon]) {
 }
 tds-button button.only-icon::slotted([slot=icon]) {
   margin-left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

package/dist/collection/components/card/card.css

@@ -1,9 +1,15 @@
+/* Typography Usage mixins */
+:host {
+  display: block;
+}
+
 .card {
   box-sizing: border-box;
   box-shadow: var(--tds-card-box);
   background-color: var(--tds-card-background);
   display: block;
-  border-radius: 4px;
+  width: 100%;
+  border-radius: var(--tds-card-border-radius);
   overflow: hidden;
 }
 .card * {
@@ -14,8 +20,12 @@
   cursor: pointer;
 }
 .card .card-header {
-  font: var(--tds-headline-06);
-  letter-spacing: var(--tds-headline-06-ls);
+  font-family: var(--headline-06-font-family);
+  font-size: var(--headline-06-font-size);
+  line-height: var(--headline-06-line-height);
+  font-weight: var(--headline-06-font-weight);
+  letter-spacing: var(--headline-06-letter-spacing);
+  text-transform: var(--headline-06-text-transform);
   padding: 16px;
   display: flex;
   align-items: center;
@@ -25,6 +35,7 @@
   height: 36px;
   border-radius: 100%;
   margin-right: 16px;
+  background-color: var(--color-background-layer-03);
 }
 .card .card-header .card-top-header {
   padding-left: 16px;
@@ -73,8 +84,12 @@
 }
 .card slot[name=body]::slotted(*) {
   /* !important is needed here to prevent this from being overwritten by our CSS-reset. */
-  font: var(--tds-detail-03) !important;
-  letter-spacing: var(--tds-detail-03-ls) !important;
+  font-family: var(--detail-03-font-family);
+  font-size: var(--detail-03-font-size);
+  line-height: var(--detail-03-line-height);
+  font-weight: var(--detail-03-font-weight);
+  letter-spacing: var(--detail-03-letter-spacing);
+  text-transform: var(--detail-03-text-transform);
   color: var(--tds-card-body-color);
   padding: 0 16px;
   margin-bottom: 16px;
@@ -87,6 +102,10 @@
   color: var(--tds-card-icon-color);
 }
 
+:host([stretch]) .card {
+  height: 100%;
+}
+
 button {
   width: 100%;
   border: none;

package/dist/collection/components/card/card.js

@@ -19,6 +19,7 @@ export class TdsCard {
         this.bodyDivider = false;
         /** Makes the Card clickable. */
         this.clickable = false;
+        /** Makes the Card fill the available height in stretching layouts and lets the body section grow. */
         this.stretch = false;
         /** ID for the Card, must be unique.
          *
@@ -67,7 +68,7 @@ export class TdsCard {
             [`${this.imagePlacement}-stretch`]: this.stretch,
         };
         const ariaLabel = this.header ? this.header : `Card ${this.cardId}`;
-        return (h(Host, { key: 'e652c7d625691932e9b39c83a730f614195cb17c', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
+        return (h(Host, { key: 'b80a87682ca93e2812db50e5aa47865127e195e6', class: { [`tds-mode-variant-${this.modeVariant}`]: !!this.modeVariant } }, this.clickable ? (h("button", { class: cardStyle, onClick: this.handleClick, "aria-label": ariaLabel, "aria-describedby": `header-${this.cardId}` }, this.getCardContent())) : (h("div", { class: cardStyle }, this.getCardContent()))));
     }
     static get is() { return "tds-card"; }
     static get encapsulation() { return "shadow"; }
@@ -251,7 +252,7 @@ export class TdsCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Makes the Card fill the available height in stretching layouts and lets the body section grow."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/chip/chip.css

@@ -77,8 +77,8 @@
   z-index: -1;
 }
 .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   background-color: var(--tds-chips-background-focus);

package/dist/collection/components/datetime/datetime.css

@@ -198,8 +198,8 @@
 .tds-datetime-focus .tds-datetime-input-md,
 .tds-datetime-focus .tds-datetime-input-sm {
   border-radius: 0;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -21,8 +21,8 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .dropdown-option button {

package/dist/collection/components/dropdown/dropdown.css

@@ -63,8 +63,8 @@
 }
 
 :host .dropdown-select:focus-within {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -202,8 +202,8 @@ body {
   position: relative;
 }
 :host .dropdown-select button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 0;
@@ -340,6 +340,7 @@ body {
 }
 :host .dropdown-list:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 :host .dropdown-list::-webkit-scrollbar {
@@ -349,7 +350,7 @@ body {
   background: var(--tds-scrollbar-track-color);
 }
 :host .dropdown-list::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;

package/dist/collection/components/footer/footer-group/footer-group.css

@@ -37,8 +37,8 @@
   background-color: var(--tds-footer-top-button-active);
 }
 :host button.footer-top-title-button:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

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

@@ -12,8 +12,8 @@
 }
 :host([role=listitem]) div ::slotted(a:focus-visible),
 :host([role=listitem]) div ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -33,8 +33,8 @@
 }
 :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
 :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -56,8 +56,8 @@
   }
   :host([role=listitem]) div.top-part-child ::slotted(a:focus-visible),
   :host([role=listitem]) div.top-part-child ::slotted(button:focus-visible) {
-    outline: 2px solid var(--tds-focus-outline-color);
-    box-shadow: 0 0 0 1px var(--tds-white);
+    outline: 2px solid var(--component--focus-ring-color-strong);
+    box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
     outline-offset: 1px;
     z-index: 1;
   }

package/dist/collection/components/header/header-dropdown/header-dropdown.css

@@ -26,6 +26,7 @@ body {
 }
 :host .menu:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 :host .menu::-webkit-scrollbar {
@@ -35,7 +36,7 @@ body {
   background: var(--tds-scrollbar-track-color);
 }
 :host .menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;

package/dist/collection/components/header/header-dropdown-list-item/header-dropdown-list-item.css

@@ -27,8 +27,8 @@
   cursor: pointer;
 }
 :host .component ::slotted(a:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .component-selected {

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

@@ -30,8 +30,8 @@
 :host ::slotted(a:focus-visible) {
   border: none;
   margin-right: 1px;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .component-active ::slotted(button),

package/dist/collection/components/header/header-launcher/header-launcher.css

@@ -28,6 +28,7 @@ body {
 }
 :host .wrapper .menu:hover::-webkit-scrollbar-thumb {
   border: var(--tds-scrollbar-thumb-border-hover-width) solid transparent;
+  border-radius: var(--tds-scrollbar-hover-thumb-border-radius);
   background-clip: padding-box;
 }
 :host .wrapper .menu::-webkit-scrollbar {
@@ -37,7 +38,7 @@ body {
   background: var(--tds-scrollbar-track-color);
 }
 :host .wrapper .menu::-webkit-scrollbar-thumb {
-  border-radius: 40px;
+  border-radius: var(--tds-scrollbar-thumb-border-radius);
   background: var(--tds-scrollbar-thumb-color);
   border: var(--tds-scrollbar-thumb-border-width) solid transparent;
   background-clip: padding-box;

package/dist/collection/components/header/header-launcher-grid-item/header-launcher-grid-item.css

@@ -32,8 +32,8 @@
 }
 :host ::slotted(a:focus-visible),
 :host ::slotted(button:focus-visible) {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }

package/dist/collection/components/icon/icon.js

@@ -1,13 +1,4 @@
-// Check status of webFont solution
 import { h, Host } from "@stencil/core";
-import { iconsCollection as scaniaIcons } from "./scaniaIconsArray";
-import { iconsCollection as tratonIcons } from "./tratonIconsArray";
-const brandIconMap = {
-    scania: scaniaIcons,
-    traton: tratonIcons,
-    // Add new brands here in the future
-    // Example: newBrand: newBrandIcons,
-};
 export class Icon {
     constructor() {
         /** Pass the name of the icon.
@@ -17,35 +8,28 @@ export class Icon {
         this.size = '16px';
         /** Set aria-hidden attribute on svg */
         this.tdsAriaHidden = false;
-        this.icons_object = '';
-        this.arrayOfIcons = [];
-        this.setIcons = () => this.arrayOfIcons.map((element) => {
-            if (element.name === this.name) {
-                return (h("svg", { "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { id: `desc-${this.name}` }, this.svgDescription), h("path", { fill: "currentColor", d: element.definition })));
-            }
-        });
     }
-    componentWillLoad() {
-        this.detectAndSetBrand();
+    componentDidLoad() {
+        this.warnIfMissing();
     }
-    detectAndSetBrand() {
-        const brandClasses = Object.keys(brandIconMap);
-        const matchingBrand = brandClasses.find((brand) => this.host.closest(`.${brand}`));
-        // Set the icons_object based on the found brand or default to scania
-        this.icons_object = matchingBrand ? brandIconMap[matchingBrand] : scaniaIcons;
-        this.arrayDataWatcher(this.icons_object);
+    nameChanged() {
+        this.warnIfMissing();
     }
-    arrayDataWatcher(newValue) {
-        if (typeof newValue === 'string') {
-            this.arrayOfIcons = JSON.parse(newValue);
-        }
-        else {
-            this.arrayOfIcons = newValue;
-        }
-        this.arrayOfIcons = [...this.arrayOfIcons];
+    warnIfMissing() {
+        const styles = getComputedStyle(this.host);
+        const exists = styles.getPropertyValue(`--tds-icon-${this.name}-exists`).trim();
+        if (exists)
+            return;
+        const brand = styles.getPropertyValue('--tds-brand-name').trim().replace(/['"]/g, '');
+        console.warn(`[tds-icon] "${this.name}" is not available in brand "${brand || 'unknown'}"; rendering placeholder.`);
     }
     render() {
-        return h(Host, { key: '2fdf8bbdd19e70c5c6a5f397bf68b77e58d03c41' }, this.setIcons());
+        // Path data is supplied by the brand-scoped CSS variable
+        // --tds-icon-<name>-d (see tokens/scss/component/icon.scss).
+        // The cascade picks scania vs. traton based on the nearest .scania/.traton
+        // ancestor, so no JS brand detection is needed.
+        const pathStyle = { d: `var(--tds-icon-${this.name}-d)` };
+        return (h(Host, { key: '79cfdc2412a5f910265103d3ed6591f7b61ae418' }, h("svg", { key: '1bc9d05ec2ed94d48d75461606660bd7a803bdd8', "aria-hidden": this.tdsAriaHidden, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", "aria-labelledby": this.svgTitle ? `title-${this.name}` : undefined, "aria-describedby": this.svgDescription ? `desc-${this.name}` : undefined, role: "img", style: { fontSize: this.size }, height: this.size, width: this.size }, this.svgTitle && h("title", { key: 'abaf0a67d4fc79e3504057d12b16fc9fd7214a3b', id: `title-${this.name}` }, this.svgTitle), this.svgDescription && h("desc", { key: '9eec14670760462e079b951ff0c5876f145af580', id: `desc-${this.name}` }, this.svgDescription), h("path", { key: '65a48d4c0ccebb1ed8345814784b776a534113a0', fill: "currentColor", style: pathStyle }))));
     }
     static get is() { return "tds-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -168,11 +152,11 @@ export class Icon {
             }
         };
     }
-    static get states() {
-        return {
-            "icons_object": {},
-            "arrayOfIcons": {}
-        };
-    }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "name",
+                "methodName": "nameChanged"
+            }];
+    }
 }

package/dist/collection/components/icon/tratonIconsArray.js

@@ -1,5 +1,5 @@
 export const iconsCollection =
-  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"placeholder","definition":"M2 4C2 2.89543 2.89543 2 4 2H6V4H4V6H2V4ZM14 4H10V2H14V4ZM22 4H18V2H22V4ZM28 4H26V2H28C29.1046 2 30 2.89543 30 4V6H28V4ZM4 10V14H2V10H4ZM28 14V10H30V14H28ZM4 18V22H2V18H4ZM28 22V18H30V22H28ZM4 26V28H6V30H4C2.89543 30 2 29.1046 2 28V26H4ZM28 28V26H30V28C30 29.1046 29.1046 30 28 30H26V28H28ZM10 28H14V30H10V28ZM18 28H22V30H18V28Z","viewbox":"0 0 32 32"}]';
+  '[{"name":"arrow_diagonal","definition":"M24 5.75H10v2h12.59L6 24.34l1.41 1.41L24 9.16v12.59h2v-16h-2Z","viewbox":"0 0 32 32"},{"name":"arrow_down","definition":"M24.59 16.59 17 24.17V4h-2v20.17L7.41 16.6 6 18l10 10 10-10-1.41-1.41Z","viewbox":"0 0 32 32"},{"name":"arrow_left","definition":"m4 16 10 10 1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6 4 16Z","viewbox":"0 0 32 32"},{"name":"arrow_right","definition":"M28 16 18 6l-1.41 1.41L24.17 15H4v2h20.17l-7.58 7.59L18 26l10-10Z","viewbox":"0 0 32 32"},{"name":"arrow_up","definition":"M7.41 15.41 15 7.83V28h2V7.83l7.59 7.58L26 14 16 4 6 14l1.41 1.41Z","viewbox":"0 0 32 32"},{"name":"bento","definition":"M6 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM6 28a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Zm10 0a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z","viewbox":"0 0 32 32"},{"name":"burger","definition":"M30 6H2v2h28V6Zm0 9H2v2h28v-2Zm0 9H2v2h28v-2Z","viewbox":"0 0 32 32"},{"name":"calendar","definition":"M26.47 4H22V2h-2v2h-8V2h-2v2H5.53L4 7v18l1.53 3h20.94L28 25V7l-1.53-3ZM10 6v2h2V6h8v2h2V6h3.25L26 7.48V10H6V7.48L6.75 6H10ZM6.75 26 6 24.52V12h20v12.52L25.25 26H6.75Z","viewbox":"0 0 32 32"},{"name":"chevron_down","definition":"m7.13 10.29-1.41 1.42 10 10 10-10-1.41-1.42-8.59 8.59-8.59-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_left","definition":"M21.41 7.41 20 6 10 16l10 10 1.41-1.41L12.83 16l8.58-8.59Z","viewbox":"0 0 32 32"},{"name":"chevron_right","definition":"M10.59 7.41 12 6l10 10-10 10-1.41-1.41L19.17 16 10.6 7.41Z","viewbox":"0 0 32 32"},{"name":"chevron_up","definition":"m24.89 21.7 1.4-1.4-10-10-10 10 1.42 1.4 8.59-8.58 8.59 8.58Z","viewbox":"0 0 32 32"},{"name":"cross","definition":"M25 8.41 23.59 7 16 14.59 8.41 7 7 8.41 14.59 16 7 23.59 8.41 25 16 17.41 23.59 25 25 23.59 17.41 16 25 8.41Z","viewbox":"0 0 32 32"},{"name":"edit_inactive","definition":"M12.25 16.58 6 22.83l-.59 3.77 3.77-.6 6.24-6.25 1.42 1.41-6.71 6.71L3 29l1.13-7.13 6.7-6.7zm15.77 9.93-.7.7-.71.71L4.08 5.4 5.5 3.98zM29 9l-7.48 7.48-1.42-1.41 1.48-1.48-3.17-3.18-1.48 1.48-1.41-1.4L23 3zm-9.17 0L23 12.17 26.17 9 23 5.83z","viewbox":"0 0 32 32"},{"name":"edit","definition":"m23 3-6 6L4.13 21.87 3 29l7.13-1.13L23 15l6-6-6-6ZM9.18 26l-3.77.6.59-3.77 12.41-12.42 3.17 3.18L9.18 26ZM23 12.17 19.83 9 23 5.83 26.17 9 23 12.17Z","viewbox":"0 0 32 32"},{"name":"error","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 9h-2v10h2V9Zm0 12h-2v2h2v-2Z","viewbox":"0 0 32 32"},{"name":"info","definition":"M16 30C8.28 30 2 23.72 2 16S8.28 2 16 2s14 6.28 14 14-6.28 14-14 14Zm0-26C9.38 4 4 9.38 4 16s5.38 12 12 12 12-5.38 12-12S22.62 4 16 4ZM17 13h-2v10h2V13Zm0-4h-2v2h2V9Z","viewbox":"0 0 32 32"},{"name":"minus","definition":"M28 15H4v2h24v-2Z","viewbox":"0 0 32 32"},{"name":"notification","definition":"M25 19.55V13a9 9 0 0 0-8-8.94V2h-2v2.06A9 9 0 0 0 7 13v6.55L5 21v5h22v-5l-2-1.45ZM25 24H7v-1.98l.03-.02L9 20.57V13a7 7 0 0 1 14 0v7.57L24.97 22l.03.02V24Zm-5 4h-8v2h8v-2Z","viewbox":"0 0 32 32"},{"name":"placeholder","definition":"M4 10H2v4h2zm0 8H2v4h2zm26-8h-2v4h2zm0 8h-2v4h2zM14 28h-4v2h4zm8 0h-4v2h4zM14 2h-4v2h4zm8 0h-4v2h4zM2 6h2V4h2V2H2zm2 20H2v4h4v-2H4zm24 2h-2v2h4v-4h-2zM26 2v2h2v2h2V2z","viewbox":"0 0 32 32"},{"name":"plus","definition":"M28 15H17V4h-2v11H4v2h11v11h2V17h11v-2Z","viewbox":"0 0 32 32"},{"name":"print","definition":"M28 9h-3V3H7v6H4l-2 3.93V23h5v6h18v-6h5V12.93L28 9ZM9 5h14v4H9V5Zm14 22H9v-9h14v9Zm5-6h-3v-5H7v5H4v-7.59L5.23 11h21.54L28 13.41V21Z","viewbox":"0 0 32 32"},{"name":"refresh","definition":"M19 10h4.98C22.11 7.5 19.2 6 16 6 10.49 6 6 10.49 6 16H4a12.01 12.01 0 0 1 21-7.94V4h2v8h-8v-2Zm-6 12H8.02c1.87 2.5 4.79 4 7.98 4 5.51 0 10-4.49 10-10h2a12.01 12.01 0 0 1-21 7.93V28H5v-8h8v2Z","viewbox":"0 0 32 32"},{"name":"search","definition":"m28 26.59-6.26-6.27A10.01 10.01 0 1 0 4 14a10.01 10.01 0 0 0 16.32 7.74L26.6 28l1.4-1.41ZM14 22a8 8 0 0 1 0-16 8 8 0 0 1 0 16Z","viewbox":"0 0 32 32"},{"name":"share","definition":"M25.1 21a4.08 4.08 0 0 0-3.15 1.48L10.83 16.9a3.75 3.75 0 0 0 .02-1.74l11.12-5.61a4.05 4.05 0 0 0 6.91-1.15 3.96 3.96 0 0 0-1.76-4.85 4.08 4.08 0 0 0-5.13.9 3.97 3.97 0 0 0-.88 3.29L9.93 13.36A4.05 4.05 0 0 0 2.86 16a3.97 3.97 0 0 0 2.61 3.74 4.09 4.09 0 0 0 4.46-1.09l11.2 5.65a3.97 3.97 0 0 0 2.42 4.38 4.08 4.08 0 0 0 4.4-.86A3.99 3.99 0 0 0 25.1 21Zm0-16a2.04 2.04 0 0 1 1.86 1.24 1.98 1.98 0 0 1-.44 2.18 2.03 2.03 0 0 1-3.45-1.41 2.03 2.03 0 0 1 2.02-2ZM6.9 18a2.04 2.04 0 0 1-1.87-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 8.92 16a2.03 2.03 0 0 1-2.02 2Zm18.2 9a2.04 2.04 0 0 1-1.88-1.23 1.98 1.98 0 0 1 .44-2.18A2.03 2.03 0 0 1 27.11 25c0 .53-.2 1.04-.59 1.42-.38.37-.9.58-1.43.58Z","viewbox":"0 0 32 32"},{"name":"sorting","definition":"M27.6 20.6 24 24.2V8h-2v16.2l-3.6-3.6L17 22l6 6 6-6-1.4-1.4ZM9 4l-6 6 1.4 1.4L8 7.8V24h2V7.8l3.6 3.6L15 10 9 4Z","viewbox":"0 0 32 32"},{"name":"star","definition":"m30.07 13.39-.63-1.87-8.89-.87L17 2h-2l-3.55 8.65-8.89.87-.63 1.87 6.75 6.24-2 9.23L8.33 30 16 25.21 23.67 30l1.63-1.14-2-9.23 6.77-6.24Zm-13 10.13L16 22.85l-1.06.67-5.83 3.64 1.52-7.11.24-1.12-.87-.77-5.21-4.85 6.86-.67 1.2-.11.46-1.12L16 4.83l2.69 6.58.46 1.12 1.2.11 6.86.67L22 18.16l-.83.77.24 1.12 1.52 7.11-5.86-3.64Z","viewbox":"0 0 32 32"},{"name":"tick","definition":"m28 9-1.41-1.41L13 21.17 5.41 13.6 4 15l9 9L28 9Z","viewbox":"0 0 32 32"},{"name":"truck","definition":"M22 8H10v2h12V8ZM30 8h-4V6.52L23.7 2H8.3L6 6.52V8H2v2h4v20h5.2l1.03-2h7.55l1.02 2H26V10h4V8Zm-7.98 20L21 26H11l-1.02 2H8v-4h3l-1.02-2H8V7l1.53-3h12.94L24 7v15h-1.98L21 24h3v4h-1.98ZM23 16H9l4.08 8h5.84L23 16Zm-5.3 6h-3.4l-2.04-4h7.48l-2.04 4Z","viewbox":"0 0 32 32"},{"name":"warning","definition":"M27.68 23 18 4h-4L4.32 23l-.32.62V28h24v-4.38l-.32-.62ZM6 26v-1.9L15.22 6h1.56L26 24.1V26H6ZM17 11h-2v9h2v-9Zm0 11h-2v2h2v-2Z","viewbox":"0 0 32 32"}]';
 export const iconsNames = [
   'arrow_diagonal',
   'arrow_down',
@@ -14,6 +14,7 @@ export const iconsNames = [
   'chevron_right',
   'chevron_up',
   'cross',
+  'edit_inactive',
   'edit',
   'error',
   'info',

package/dist/collection/components/link/link.js

@@ -29,11 +29,11 @@ export class TdsLink {
         }
     }
     render() {
-        return (h("span", { key: 'b01482ab25146498fcabba8266dc3ce7b6a94b79', class: {
+        return (h("span", { key: '7fc71860358da34d0bcf7db534263ceb95a0a34c', class: {
                 'disabled': this.disabled,
                 'no-underline': !this.underline,
                 'standalone': this.standalone,
-            } }, h("slot", { key: 'af1c5a41a618246478cdc2e505699921d8fc12ae' })));
+            } }, h("slot", { key: '481148d319d7dc0447b0568f1bc97ea0f17560b0' })));
     }
     static get is() { return "tds-link"; }
     static get encapsulation() { return "shadow"; }