@scania/tegel 1.47.2 → 1.48.0

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

@@ -1,32 +1,2 @@
-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"}]';
-export const iconsNames = [
-  'arrow_diagonal',
-  'arrow_down',
-  'arrow_left',
-  'arrow_right',
-  'arrow_up',
-  'bento',
-  'burger',
-  'calendar',
-  'chevron_down',
-  'chevron_left',
-  'chevron_right',
-  'chevron_up',
-  'cross',
-  'edit',
-  'error',
-  'info',
-  'minus',
-  'notification',
-  'plus',
-  'print',
-  'refresh',
-  'search',
-  'share',
-  'sorting',
-  'star',
-  'tick',
-  'truck',
-  'warning',
-];
+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"}]';
+    export const iconsNames = ["arrow_diagonal","arrow_down","arrow_left","arrow_right","arrow_up","bento","burger","calendar","chevron_down","chevron_left","chevron_right","chevron_up","cross","edit","error","info","minus","notification","plus","print","refresh","search","share","sorting","star","tick","truck","warning"];

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

@@ -4,8 +4,11 @@ import { h } from "@stencil/core";
  */
 export class TdsLink {
     constructor() {
+        /** Disables the Link */
         this.disabled = false;
+        /** Displays the Link with an underline. */
         this.underline = true;
+        /** Displays the Link as a standalone component. Not part of a paragraph. */
         this.standalone = false;
     }
     connectedCallback() {
@@ -60,8 +63,10 @@ export class TdsLink {
                     "tags": [],
                     "text": "Disables the Link"
                 },
-                "attribute": "disabled",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "underline": {
@@ -78,8 +83,10 @@ export class TdsLink {
                     "tags": [],
                     "text": "Displays the Link with an underline."
                 },
-                "attribute": "underline",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "underline",
                 "defaultValue": "true"
             },
             "standalone": {
@@ -96,8 +103,10 @@ export class TdsLink {
                     "tags": [],
                     "text": "Displays the Link as a standalone component. Not part of a paragraph."
                 },
-                "attribute": "standalone",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "standalone",
                 "defaultValue": "false"
             }
         };

package/dist/collection/components/message/message.css

@@ -72,10 +72,10 @@
 }
 :host .content .extended-message {
   color: var(--foreground-text-strong);
-  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);
+  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);
 }

package/dist/collection/components/message/message.js

@@ -5,6 +5,16 @@ import generateUniqueId from "../../utils/generateUniqueId";
  */
 export class TdsMessage {
     constructor() {
+        /** Variant of the component, based on current mode. */
+        this.modeVariant = null;
+        /** Variant of Message. */
+        this.variant = 'information';
+        /** Removes the icon in the Message. */
+        this.noIcon = false;
+        /** Minimal Message styling. */
+        this.minimal = false;
+        /** Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+        this.tdsAlertDialog = 'dialog';
         this.getIconName = () => {
             switch (this.variant) {
                 case 'information':
@@ -19,13 +29,6 @@ export class TdsMessage {
                     return 'info';
             }
         };
-        this.header = undefined;
-        this.modeVariant = null;
-        this.variant = 'information';
-        this.noIcon = false;
-        this.minimal = false;
-        this.tdsAlertDialog = 'dialog';
-        this.tdsAriaLabel = undefined;
     }
     getAriaLabel() {
         if (this.header) {
@@ -71,8 +74,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Header text for the component."
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "modeVariant": {
                 "type": "string",
@@ -88,8 +93,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Variant of the component, based on current mode."
                 },
-                "attribute": "mode-variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "mode-variant",
                 "defaultValue": "null"
             },
             "variant": {
@@ -106,8 +113,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Variant of Message."
                 },
-                "attribute": "variant",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "variant",
                 "defaultValue": "'information'"
             },
             "noIcon": {
@@ -124,8 +133,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Removes the icon in the Message."
                 },
-                "attribute": "no-icon",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "no-icon",
                 "defaultValue": "false"
             },
             "minimal": {
@@ -142,8 +153,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Minimal Message styling."
                 },
-                "attribute": "minimal",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "minimal",
                 "defaultValue": "false"
             },
             "tdsAlertDialog": {
@@ -160,8 +173,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Role of the message component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
                 },
-                "attribute": "tds-alert-dialog",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-alert-dialog",
                 "defaultValue": "'dialog'"
             },
             "tdsAriaLabel": {
@@ -178,8 +193,10 @@ export class TdsMessage {
                     "tags": [],
                     "text": "Provides an accessible name for the message component when no header is present. This ensures proper screen reader support for dialog/alertdialog roles."
                 },
-                "attribute": "tds-aria-label",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "tds-aria-label"
             }
         };
     }

package/dist/collection/components/modal/modal.js

@@ -8,20 +8,33 @@ import generateUniqueId from "../../utils/generateUniqueId";
  * */
 export class TdsModal {
     constructor() {
+        /** Disables closing Modal on clicking on overlay area. */
+        this.prevent = false;
+        /** Size of Modal  */
+        this.size = 'md';
+        /** Changes the position behaviour of the actions slot.  */
+        this.actionsPosition = 'static';
+        /** Shows or hides the close [X] button. */
+        this.closable = true;
+        /** Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages. */
+        this.tdsAlertDialog = 'dialog';
+        // State that keeps track of show/closed state for the Modal.
+        this.isShown = false;
+        // Focus state index in focusable Elements
+        this.activeElementIndex = 0;
         this.handleClose = (event) => {
             const closeEvent = this.tdsClose.emit(event);
-            this.returnFocusOnClose();
-            if (closeEvent.defaultPrevented) {
+            if (closeEvent.defaultPrevented)
                 return;
-            }
             this.isShown = false;
+            this.returnFocusOnClose();
         };
         this.handleShow = () => {
             const showEvent = this.tdsOpen.emit();
-            if (showEvent.defaultPrevented) {
+            if (showEvent.defaultPrevented)
                 return;
-            }
             this.isShown = true;
+            this.onOpen();
         };
         /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
         this.handleOverlayClick = (event) => {
@@ -56,29 +69,11 @@ export class TdsModal {
                 referenceEl.addEventListener('click', this.handleReferenceElementClick);
             }
         };
-        this.header = undefined;
-        this.prevent = false;
-        this.size = 'md';
-        this.actionsPosition = 'static';
-        this.selector = undefined;
-        this.referenceEl = undefined;
-        this.show = undefined;
-        this.closable = true;
-        this.tdsAlertDialog = 'dialog';
-        this.isShown = false;
-        this.activeElementIndex = 0;
     }
     /** Shows the Modal.  */
     async showModal() {
         this.isShown = true;
-        // Set focus on first element when opened
-        requestAnimationFrame(() => {
-            const focusableElements = this.getFocusableElements();
-            if (focusableElements.length > 0) {
-                focusableElements[0].focus();
-                this.activeElementIndex = 0;
-            }
-        });
+        this.onOpen();
     }
     /** Closes the Modal. */
     async closeModal() {
@@ -89,6 +84,18 @@ export class TdsModal {
     async isOpen() {
         return this.isShown;
     }
+    /** Runs whenever the show prop changes. */
+    handleShowPropChange(newValue, oldValue) {
+        if (newValue === oldValue || newValue === undefined)
+            return;
+        this.isShown = newValue;
+        if (newValue) {
+            this.onOpen();
+        }
+        else {
+            this.returnFocusOnClose();
+        }
+    }
     connectedCallback() {
         if (this.closable === undefined) {
             this.closable = true;
@@ -131,21 +138,17 @@ export class TdsModal {
     returnFocusOnClose() {
         var _a;
         const referenceElement = (_a = this.referenceEl) !== null && _a !== void 0 ? _a : (this.selector ? document.querySelector(this.selector) : null);
-        if (!referenceElement) {
-            return; // no element to return focus to
-        }
+        if (!referenceElement)
+            return;
         const potentialReferenceElements = ['BUTTON', 'A', 'INPUT'];
         const isNativeFocusable = potentialReferenceElements.includes(referenceElement.tagName);
-        if (isNativeFocusable) {
-            referenceElement.focus();
-        }
-        else {
-            // If referenced element is a custom element eg: tds-button we find the interactive element inside:
-            const interactiveElement = referenceElement.querySelector(potentialReferenceElements.join(','));
-            if (interactiveElement) {
-                interactiveElement.focus();
-            }
-        }
+        const interactiveElement = isNativeFocusable
+            ? referenceElement
+            : referenceElement.querySelector(potentialReferenceElements.join(','));
+        if (!interactiveElement)
+            return;
+        interactiveElement.classList.remove('active');
+        interactiveElement.focus();
     }
     getFocusableElements() {
         var _a, _b;
@@ -162,6 +165,47 @@ export class TdsModal {
         /** Focusable elements */
         return [...focusableInShadowRoot, ...focusableInSlots];
     }
+    /** Resets the scroll position to the top. */
+    resetScrollPosition() {
+        var _a;
+        const root = this.host.shadowRoot;
+        const scroller = (_a = root === null || root === void 0 ? void 0 : root.querySelector('.tds-modal__actions-sticky .body')) !== null && _a !== void 0 ? _a : root === null || root === void 0 ? void 0 : root.querySelector('.tds-modal');
+        scroller === null || scroller === void 0 ? void 0 : scroller.scrollTo(0, 0);
+    }
+    focusFirstElement() {
+        var _a, _b;
+        const focusableSelectors = [
+            'a[href]',
+            'button:not([disabled])',
+            'textarea:not([disabled])',
+            'input:not([disabled])',
+            'select:not([disabled])',
+            '[tabindex]:not([tabindex="-1"])',
+        ].join(',');
+        // Prioritize focusable elements in slotted content (actions/body) over shadow DOM elements (like close button)
+        const focusableInSlots = Array.from(this.host.querySelectorAll(focusableSelectors));
+        if (focusableInSlots.length > 0) {
+            focusableInSlots[0].focus();
+            this.activeElementIndex = this.getFocusableElements().indexOf(focusableInSlots[0]);
+        }
+        else {
+            // Fallback to shadow DOM elements if no slotted content is focusable
+            const focusableInShadowRoot = Array.from((_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(focusableSelectors)) !== null && _b !== void 0 ? _b : []);
+            if (focusableInShadowRoot.length > 0) {
+                focusableInShadowRoot[0].focus();
+                this.activeElementIndex = 0;
+            }
+        }
+    }
+    /** Runs whenever the modal is opened and updates it. */
+    onOpen() {
+        // Focus immediately to preserve interaction modality for :focus-visible
+        this.focusFirstElement();
+        // Defer scroll reset to next frame
+        requestAnimationFrame(() => {
+            this.resetScrollPosition();
+        });
+    }
     handleFocusTrap(event) {
         if (event.key === 'Escape' && this.isShown && !this.prevent) {
             this.handleClose(event);
@@ -206,10 +250,10 @@ export class TdsModal {
         const usesActionsSlot = hasSlot('actions', this.host);
         const headerId = this.header ? `tds-modal-header-${generateUniqueId()}` : undefined;
         const bodyId = `tds-modal-body-${generateUniqueId()}`;
-        return (h(Host, { key: '64ec0269ed6369f5a298997f432095abf16cfe8e', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
+        return (h(Host, { key: '38bd184949cbc0e6d7547bf9bc7cf3b3c82cabee', role: this.tdsAlertDialog, "aria-modal": "true", "aria-describedby": bodyId, "aria-labelledby": headerId, class: {
                 show: this.isShown,
                 hide: !this.isShown,
-            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: 'ff7163da4e0d417f0b9e2d2669b65b4c3d980cb1', class: "tds-modal-backdrop" }), h("div", { key: '594ac64c3d54280f0654516429c934919beaeb5f', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}` }, h("div", { key: '942924e09b8f95e2891471363fe8391d2488fae3', id: headerId, class: "header" }, this.header && h("div", { key: '85864122df840ff8fb2c42bc0cca02180a8e3b2f', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '2c4b6bddbf1daf0afa33a5cf2dd34e3be175a1d8', name: "header" }), this.closable && (h("button", { key: 'de4e7e2461a10597fabf198a8431fbeb584daa99', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '628d4a4c906a7ed62cc52cb406229d8ef338beec', name: "cross", size: "20px" })))), h("div", { key: 'efd264c203b4c2a6cb745db03c0a023584521fa2', id: bodyId, class: "body" }, h("slot", { key: '83499fa7bf5719b88cdad06f51b7791a9fb2ec22', name: "body" })), usesActionsSlot && h("slot", { key: 'ef14e74d647f3c8483abd24205d476b16626d697', name: "actions" }))));
+            }, onClick: (event) => this.handleOverlayClick(event) }, h("div", { key: '40bb9e834a44e0664958ff6ea3dd4ec404b75044', class: "tds-modal-backdrop" }), h("div", { key: 'ef8dfcde8981a5242f552db28eeaf1099c2a5f26', class: `tds-modal tds-modal__actions-${this.actionsPosition} tds-modal-${this.size}`, tabindex: "-1" }, h("div", { key: '4295710b96f997295e5ae5b4f16e7b696b8dd7b6', id: headerId, class: "header" }, this.header && h("div", { key: 'b381c7f0dcdd04220badff60d5b48ecf8d9b57da', class: "header-text" }, this.header), usesHeaderSlot && h("slot", { key: '18f82e6222e91db9e4a2b299b1ee3d3db071a691', name: "header" }), this.closable && (h("button", { key: 'fc729f3da82fe8ec4faa46973399508cca4c1bdd', class: "tds-modal-close", "aria-label": "close", onClick: (event) => this.handleClose(event) }, h("tds-icon", { key: '51b5332510518499e947ac45d62c60be2fffac3a', name: "cross", size: "20px" })))), h("div", { key: '25ad7f69e11fdcb61150103f48be124d9a537167', id: bodyId, class: "body" }, h("slot", { key: 'e7be6f3ac849df52546fc97581b7b23a8e69e1d1', name: "body" })), usesActionsSlot && h("slot", { key: 'ac896cffd413b46d488c9466a5ed7db1a8049ff8', name: "actions" }))));
     }
     static get is() { return "tds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -239,8 +283,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Sets the header of the Modal."
                 },
-                "attribute": "header",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header"
             },
             "prevent": {
                 "type": "boolean",
@@ -256,8 +302,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Disables closing Modal on clicking on overlay area."
                 },
-                "attribute": "prevent",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "prevent",
                 "defaultValue": "false"
             },
             "size": {
@@ -274,8 +322,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Size of Modal"
                 },
-                "attribute": "size",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'md'"
             },
             "actionsPosition": {
@@ -292,8 +342,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Changes the position behaviour of the actions slot."
                 },
-                "attribute": "actions-position",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "actions-position",
                 "defaultValue": "'static'"
             },
             "selector": {
@@ -310,8 +362,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "CSS selector for the element that will show the Modal."
                 },
-                "attribute": "selector",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selector"
             },
             "referenceEl": {
                 "type": "unknown",
@@ -331,7 +385,9 @@ export class TdsModal {
                 "docs": {
                     "tags": [],
                     "text": "Element that will show the Modal (takes priority over selector)"
-                }
+                },
+                "getter": false,
+                "setter": false
             },
             "show": {
                 "type": "boolean",
@@ -347,8 +403,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Controls whether the Modal is shown or not. If this is set hiding and showing\nwill be decided by this prop and will need to be controlled from the outside."
                 },
-                "attribute": "show",
-                "reflect": false
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show"
             },
             "closable": {
                 "type": "boolean",
@@ -364,8 +422,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Shows or hides the close [X] button."
                 },
-                "attribute": "closable",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "closable",
                 "defaultValue": "true"
             },
             "tdsAlertDialog": {
@@ -382,8 +442,10 @@ export class TdsModal {
                     "tags": [],
                     "text": "Role of the modal component. Can be either 'alertdialog' for important messages that require immediate attention, or 'dialog' for regular messages."
                 },
-                "attribute": "tds-alert-dialog",
+                "getter": false,
+                "setter": false,
                 "reflect": false,
+                "attribute": "tds-alert-dialog",
                 "defaultValue": "'dialog'"
             }
         };
@@ -521,6 +583,12 @@ export class TdsModal {
         };
     }
     static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "show",
+                "methodName": "handleShowPropChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "keydown",