@scania/tegel 1.0.0 → 1.0.1

package/dist/collection/components/tabs/folder-tabs/folder-tabs.stories.js

@@ -67,39 +67,39 @@ export default {
     selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-folder-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-      <tds-folder-tab>
-        <button>First tab</button>
-      </tds-folder-tab>
-      <tds-folder-tab>
-        <button>Second tab is much longer</button>
-      </tds-folder-tab>
-      <tds-folder-tab>
-        <button>Third tab</button>
-      </tds-folder-tab>
-      <tds-folder-tab disabled>
-        <button>Fourth tab</button>
-      </tds-folder-tab>
-    </tds-folder-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
-    </div>
-    
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-folder-tabs');
-  
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-folder-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+      <tds-folder-tab>
+        <button>First tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Second tab is much longer</button>
+      </tds-folder-tab>
+      <tds-folder-tab>
+        <button>Third tab</button>
+      </tds-folder-tab>
+      <tds-folder-tab disabled>
+        <button>Fourth tab</button>
+      </tds-folder-tab>
+    </tds-folder-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tab index: <span class="selectedTabIndex"></span></h4>
+    </div>
+    
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-folder-tabs');
+  
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
 `);
 export const FolderTabs = Template.bind({});

package/dist/collection/components/tabs/inline-tabs/inline-tab/inline-tab.js

@@ -12,7 +12,7 @@ export class TdsInlineTab {
     this.selected = selected;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
+    return (h(Host, { role: "listitem" }, h("div", { class: `inline-tab-item  ${this.selected ? 'selected' : ''}
            ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
   }
   static get is() { return "tds-inline-tab"; }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.js

@@ -209,7 +209,7 @@ export class TdsInlineTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected Tab.\r\nIf this is set, all Tab changes need to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -235,7 +235,7 @@ export class TdsInlineTabs {
           "text": "Event emitted when the selected Tab is changed."
         },
         "complexType": {
-          "original": "{\r\n    selectedTabIndex: number;\r\n  }",
+          "original": "{\n    selectedTabIndex: number;\n  }",
           "resolved": "{ selectedTabIndex: number; }",
           "references": {}
         }

package/dist/collection/components/tabs/inline-tabs/inline-tabs.stories.js

@@ -61,39 +61,39 @@ export default {
     selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-  <tds-inline-tabs
-    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
-    <tds-inline-tab>
-      <button>First tab</button>
-    </tds-inline-tab>
-    <tds-inline-tab>
-      <button>Second tab is much longer</button>
-    </tds-inline-tab>
-    <tds-inline-tab>
-      <button>Third tab</button>
-    </tds-inline-tab>
-    <tds-inline-tab disabled>
-      <button>Fourth tab</button>
-    </tds-inline-tab>
-   </tds-inline-tabs>
-
-   <!-- Demo container. -->
-   <div class="demo-container">
-     <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-   </div>
-
-   <!-- Script tag with eventlistener for demo purposes. -->
-   <script>
-   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-   tabs = document.querySelector('tds-inline-tabs');
-   
-   tabs.addEventListener('tdsChange', (event) => {
-     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-     console.log(event)
-    })
-   </script>
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+  <tds-inline-tabs
+    ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+    ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+    ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}>
+    <tds-inline-tab>
+      <button>First tab</button>
+    </tds-inline-tab>
+    <tds-inline-tab>
+      <button>Second tab is much longer</button>
+    </tds-inline-tab>
+    <tds-inline-tab>
+      <button>Third tab</button>
+    </tds-inline-tab>
+    <tds-inline-tab disabled>
+      <button>Fourth tab</button>
+    </tds-inline-tab>
+   </tds-inline-tabs>
+
+   <!-- Demo container. -->
+   <div class="demo-container">
+     <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+   </div>
+
+   <!-- Script tag with eventlistener for demo purposes. -->
+   <script>
+   selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+   tabs = document.querySelector('tds-inline-tabs');
+   
+   tabs.addEventListener('tdsChange', (event) => {
+     selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+     console.log(event)
+    })
+   </script>
 `);
 export const InlineTabs = Template.bind({});

package/dist/collection/components/tabs/navigation-tabs/navigation-tab/navigation-tab.js

@@ -12,7 +12,7 @@ export class TdsNavigationTab {
     this.selected = selected;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
+    return (h(Host, { role: "listitem" }, h("div", { class: `navigation-tab-item  ${this.selected ? 'selected' : ''}
            ${this.disabled ? 'disabled' : ''}` }, h("slot", null))));
   }
   static get is() { return "tds-navigation-tab"; }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.js

@@ -200,7 +200,7 @@ export class TdsNavigationTabs {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Sets the selected Tab.\r\nIf this is set, all Tab changes need to be handled by the user."
+          "text": "Sets the selected Tab.\nIf this is set, all Tab changes need to be handled by the user."
         },
         "attribute": "selected-index",
         "reflect": true
@@ -225,7 +225,7 @@ export class TdsNavigationTabs {
           "text": "Event emitted when the selected Tab is changed."
         },
         "complexType": {
-          "original": "{\r\n    selectedTabIndex: number;\r\n  }",
+          "original": "{\n    selectedTabIndex: number;\n  }",
           "resolved": "{ selectedTabIndex: number; }",
           "references": {}
         }

package/dist/collection/components/tabs/navigation-tabs/navigation-tabs.stories.js

@@ -61,41 +61,41 @@ export default {
     selectedIndex: 'None',
   },
 };
-const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
-    <tds-navigation-tabs
-      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
-      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
-      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
-    >
-      <tds-navigation-tab>
-        <button>First tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Second tab is much longer</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab>
-        <button>Third tab</button>
-      </tds-navigation-tab>
-      <tds-navigation-tab disabled>
-        <button>Fourth tab</button>
-      </tds-navigation-tab>
-    </tds-navigation-tabs>
-
-    <!-- Demo container. -->
-    <div class="demo-container">
-      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
-    </div>
- 
-    <!-- Script tag with eventlistener for demo purposes. -->
-    <script>
-    selectedTab = document.getElementsByClassName('selectedTab')[0]
-    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
-    tabs = document.querySelector('tds-navigation-tabs');
-    
-    tabs.addEventListener('tdsChange', (event) => {
-      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
-      console.log(event)
-    })
-    </script>
+const Template = ({ modeVariant, selectedIndex, defaultSelectedIndex }) => formatHtmlPreview(`
+    <tds-navigation-tabs
+      ${defaultSelectedIndex !== 'None' ? `default-selected-index="${defaultSelectedIndex}"` : ''}
+      ${selectedIndex && selectedIndex !== 'None' ? `selected-index="${selectedIndex}"` : ''}
+      ${modeVariant !== 'Inherit from parent' ? ` mode-variant="${modeVariant.toLowerCase()}"` : ''}
+    >
+      <tds-navigation-tab>
+        <button>First tab</button>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <button>Second tab is much longer</button>
+      </tds-navigation-tab>
+      <tds-navigation-tab>
+        <button>Third tab</button>
+      </tds-navigation-tab>
+      <tds-navigation-tab disabled>
+        <button>Fourth tab</button>
+      </tds-navigation-tab>
+    </tds-navigation-tabs>
+
+    <!-- Demo container. -->
+    <div class="demo-container">
+      <h4 class="tds-headline-04">Selected tabindex: <span class="selectedTabIndex"></span></h4>
+    </div>
+ 
+    <!-- Script tag with eventlistener for demo purposes. -->
+    <script>
+    selectedTab = document.getElementsByClassName('selectedTab')[0]
+    selectedTabIndex = document.getElementsByClassName('selectedTabIndex')[0]
+    tabs = document.querySelector('tds-navigation-tabs');
+    
+    tabs.addEventListener('tdsChange', (event) => {
+      selectedTabIndex.innerHTML = event.detail.selectedTabIndex
+      console.log(event)
+    })
+    </script>
     `);
 export const NavigationTabs = Template.bind({});

package/dist/collection/components/text-field/text-field.js

@@ -46,21 +46,21 @@ export class TdsTextField {
     var _a;
     const usesPrefixSlot = hasSlot('prefix', this.host);
     const usesSuffixSlot = hasSlot('suffix', this.host);
-    return (h("div", { class: `
-        ${this.noMinWidth ? 'form-text-field-nomin' : ''}
+    return (h("div", { class: `
+        ${this.noMinWidth ? 'form-text-field-nomin' : ''}
         ${this.focusInput && !this.disabled
         ? 'form-text-field text-field-focus'
-        : ' form-text-field'}
-        ${this.value ? 'text-field-data' : ''}
+        : ' form-text-field'}
+        ${this.value ? 'text-field-data' : ''}
         ${this.labelPosition === 'inside' && this.size !== 'sm'
         ? 'text-field-container-label-inside'
-        : ''}
-        ${this.disabled ? 'form-text-field-disabled' : ''}
-        ${this.readOnly ? 'form-text-field-readonly' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
-        ${this.size === 'md' ? 'form-text-field-md' : ''}
-        ${this.size === 'sm' ? 'form-text-field-sm' : ''}
-        ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
+        : ''}
+        ${this.disabled ? 'form-text-field-disabled' : ''}
+        ${this.readOnly ? 'form-text-field-readonly' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.size === 'md' ? 'form-text-field-md' : ''}
+        ${this.size === 'sm' ? 'form-text-field-sm' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `form-text-field-${this.state}` : ''}
         ` }, this.labelPosition === 'outside' && (h("div", { class: "text-field-label-outside" }, h("div", null, this.label))), h("div", { onClick: () => this.textInput.focus(), class: "text-field-container" }, usesPrefixSlot && (h("div", { class: `text-field-slot-wrap-prefix text-field-${this.state}` }, h("slot", { name: "prefix" }))), h("div", { class: "text-field-input-container" }, h("input", { ref: (inputEl) => (this.textInput = inputEl), class: `text-field-input text-field-input-${this.size}`, type: this.type, disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, autofocus: this.autofocus, maxlength: this.maxLength, name: this.name, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event), onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);
@@ -276,7 +276,7 @@ export class TdsTextField {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "With setting"
+          "text": "Unset minimum width of 208px."
         },
         "attribute": "no-min-width",
         "reflect": false,

package/dist/collection/components/text-field/text-field.stories.js

@@ -193,55 +193,55 @@ const Template = ({ modeVariant, state, type, size, label, labelPosition, placeh
     Medium: 'md',
     Small: 'sm',
   };
-  return formatHtmlPreview(`
-    <style>
-    /* demo-wrapper is for demonstration purposes only*/
-  .demo-wrapper {
-    width: 200px;
-    height: 150px;
-  }
-    </style>
-
-  <div class="demo-wrapper">
-    <tds-text-field
-      type="${type}"
-      size="${sizeLookUp[size]}"
-      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
-      state="${stateValue}"
-      label="${label}"
-      label-position="${labelPosition.toLowerCase()}"
-      ${helper ? `helper="${helper}"` : ''}
-      ${maxlength}
-      ${disabled ? 'disabled' : ''}
-      ${readonly ? 'read-only' : ''}
-      ${noMinWidth ? 'no-min-width' : ''}
-      placeholder="${placeholderText}" >
+  return formatHtmlPreview(`
+    <style>
+    /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    width: 200px;
+    height: 150px;
+  }
+    </style>
+
+  <div class="demo-wrapper">
+    <tds-text-field
+      type="${type}"
+      size="${sizeLookUp[size]}"
+      ${modeVariant !== 'Inherit from parent' ? `mode-variant="${modeVariant.toLowerCase()}"` : ''}
+      state="${stateValue}"
+      label="${label}"
+      label-position="${labelPosition.toLowerCase()}"
+      ${helper ? `helper="${helper}"` : ''}
+      ${maxlength}
+      ${disabled ? 'disabled' : ''}
+      ${readonly ? 'read-only' : ''}
+      ${noMinWidth ? 'no-min-width' : ''}
+      placeholder="${placeholderText}" >
         ${prefix || suffix
-    ? `
+    ? `
           ${prefixType || suffixType === 'Text'
       ? `<span slot="${prefix ? 'prefix' : 'suffix'}">$</span>`
-      : `<tds-icon slot="${prefix ? 'prefix' : 'suffix'}" name="truck" size="20px"></tds-icon>`}
+      : `<tds-icon slot="${prefix ? 'prefix' : 'suffix'}" name="truck" size="20px"></tds-icon>`}
         `
-    : ''}
-
-        </tds-text-field>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('tds-text-field')
-    textElement.addEventListener('tdsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsChange',(event) => {
-      console.log(event)
-    })
-  </script>
+    : ''}
+
+        </tds-text-field>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('tds-text-field')
+    textElement.addEventListener('tdsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsChange',(event) => {
+      console.log(event)
+    })
+  </script>
   `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/textarea/textarea.js

@@ -38,16 +38,16 @@ export class TdsTextarea {
   }
   render() {
     var _a;
-    return (h("div", { class: `
-        textarea-container
-        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
-        ${this.focusInput ? 'textarea-focus' : ''}
-        ${this.disabled ? 'textarea-disabled' : ''}
-        ${this.readOnly ? 'textarea-readonly' : ''}
-        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
-        ${this.value ? 'textarea-data' : ''}
-        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
-        ${this.noMinWidth ? 'no-min-width' : ''}
+    return (h("div", { class: `
+        textarea-container
+        ${this.labelPosition === 'inside' ? 'textarea-label-inside' : ''}
+        ${this.focusInput ? 'textarea-focus' : ''}
+        ${this.disabled ? 'textarea-disabled' : ''}
+        ${this.readOnly ? 'textarea-readonly' : ''}
+        ${this.modeVariant !== null ? `tds-mode-variant-${this.modeVariant}` : ''}
+        ${this.value ? 'textarea-data' : ''}
+        ${this.state === 'error' || this.state === 'success' ? `textarea-${this.state}` : ''}
+        ${this.noMinWidth ? 'no-min-width' : ''}
         ` }, this.labelPosition !== 'no-label' && h("span", { class: 'textarea-label' }, this.label), h("div", { class: "textarea-wrapper" }, h("textarea", { class: 'textarea-input', ref: (inputEl) => (this.textEl = inputEl), disabled: this.disabled, readonly: this.readOnly, placeholder: this.placeholder, value: this.value, name: this.name, autofocus: this.autofocus, maxlength: this.maxLength, cols: this.cols, rows: this.rows, onFocus: (event) => {
         if (!this.readOnly) {
           this.handleFocus(event);

package/dist/collection/components/textarea/textarea.stories.js

@@ -141,48 +141,48 @@ const Template = ({ modeVariant, state, label, labelPosition, placeholder, helpe
     'Inside': 'inside',
     'Outside': 'outside',
   };
-  return formatHtmlPreview(`
-  <style>
-  /* demo-wrapper is for demonstration purposes only*/
-    .demo-wrapper {
-      width: 400px;
-    }
-  </style>
-
-  <div class="demo-wrapper">
-        <tds-textarea
-          rows="${rows}"
-          state="${stateValue}"
-          label="${label}"
-          helper="${helper}"
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+    .demo-wrapper {
+      width: 400px;
+    }
+  </style>
+
+  <div class="demo-wrapper">
+        <tds-textarea
+          rows="${rows}"
+          state="${stateValue}"
+          label="${label}"
+          helper="${helper}"
           ${modeVariant !== 'Inherit from parent'
     ? `mode-variant="${modeVariant.toLowerCase()}"`
-    : ''}
-          label-position="${labelPosLookup[labelPosition]}"
-          ${disabled ? 'disabled' : ''}
-          ${readonly ? 'read-only' : ''}
-          ${noMinWidth ? 'no-min-width' : ''}
-          placeholder="${placeholder}"
-          ${maxlength}>
-        </tds-textarea>
-  </div>
-  <!-- Script tag for demo purposes -->
-  <script>
-    textElement = document.querySelector('tds-textarea')
-
-    textElement.addEventListener('tdsFocus',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsBlur',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsInput',(event) => {
-      console.log(event)
-    })
-    textElement.addEventListener('tdsChange',(event) => {
-      console.log(event)
-    })
-  </script>
+    : ''}
+          label-position="${labelPosLookup[labelPosition]}"
+          ${disabled ? 'disabled' : ''}
+          ${readonly ? 'read-only' : ''}
+          ${noMinWidth ? 'no-min-width' : ''}
+          placeholder="${placeholder}"
+          ${maxlength}>
+        </tds-textarea>
+  </div>
+  <!-- Script tag for demo purposes -->
+  <script>
+    textElement = document.querySelector('tds-textarea')
+
+    textElement.addEventListener('tdsFocus',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsBlur',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsInput',(event) => {
+      console.log(event)
+    })
+    textElement.addEventListener('tdsChange',(event) => {
+      console.log(event)
+    })
+  </script>
   `);
 };
 export const Default = Template.bind({});

package/dist/collection/components/toast/toast.js

@@ -56,8 +56,8 @@ export class TdsToast {
     const usesHeaderSlot = hasSlot('header', this.host);
     const usesSubheaderSlot = hasSlot('subheader', this.host);
     const usesActionsSlot = hasSlot('actions', this.host);
-    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
-            wrapper
+    return (h(Host, { toastRole: this.toastRole, "aria-describedby": this.host.getAttribute('aria-describedby'), class: `${this.hidden ? 'hide' : 'show'}` }, h("div", { class: `
+            wrapper
             ${this.variant}` }, h("tds-icon", { name: this.getIconName(), size: "20px" }), h("div", { class: `content` }, h("div", { class: "header-subheader" }, this.header && h("div", { class: "header" }, this.header), usesHeaderSlot && h("slot", { name: "header" }), this.subheader && h("div", { class: "subheader" }, this.subheader), usesSubheaderSlot && h("slot", { name: "subheader" })), usesActionsSlot && (h("div", { class: `toast-bottom ${usesSubheaderSlot || this.subheader ? 'subheader' : 'no-subheader'}` }, h("slot", { name: "actions" })))), h("button", { onClick: () => {
         this.handleClose();
       }, class: `close` }, h("tds-icon", { name: "cross", size: "20px" })))));
@@ -196,7 +196,7 @@ export class TdsToast {
           "text": "Sends unique Toast identifier when component is closed."
         },
         "complexType": {
-          "original": "{\r\n    toastId: string;\r\n  }",
+          "original": "{\n    toastId: string;\n  }",
           "resolved": "{ toastId: string; }",
           "references": {}
         }

package/dist/collection/components/toast/toast.stories.js

@@ -59,23 +59,23 @@ export default {
     variant: 'Information',
     header: 'Header',
     subheader: 'Subheader',
-    actions: `<tds-link slot="actions">
-          <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
+    actions: `<tds-link slot="actions">
+          <a href="https://tegel.scania.com/home" target="_blank">Tegel</a>
       </tds-link>`,
   },
 };
-const Template = ({ variant, header, subheader, actions }) => formatHtmlPreview(`<tds-toast
-        variant="${variant.toLowerCase()}"
-        header="${header}"
-        ${subheader ? `subheader="${subheader}"` : ''}
-    >
-    ${actions || ''}
-    </tds-toast>
-    
-    <script>
-      document.addEventListener('tdsClose', (event) => {
-          console.log(event)
-      })
-    </script>
+const Template = ({ variant, header, subheader, actions }) => formatHtmlPreview(`<tds-toast
+        variant="${variant.toLowerCase()}"
+        header="${header}"
+        ${subheader ? `subheader="${subheader}"` : ''}
+    >
+    ${actions || ''}
+    </tds-toast>
+    
+    <script>
+      document.addEventListener('tdsClose', (event) => {
+          console.log(event)
+      })
+    </script>
   `);
 export const Default = Template.bind({});

package/dist/collection/components/toggle/toggle.js

@@ -183,7 +183,7 @@ export class TdsToggle {
           "text": "Sends unique Toggle identifier and status when it is toggled."
         },
         "complexType": {
-          "original": "{\r\n    toggleId: string;\r\n    checked: boolean;\r\n  }",
+          "original": "{\n    toggleId: string;\n    checked: boolean;\n  }",
           "resolved": "{ toggleId: string; checked: boolean; }",
           "references": {}
         }