@scania/tegel 0.0.8 → 0.0.10

package/dist/collection/components/textarea/textarea.css

@@ -25,7 +25,7 @@
   height: 2px;
   width: 0;
   position: absolute;
-  background: var(--sdds-textarea-bar);
+  background: var(--tds-textarea-bar);
   transition: 0.35s ease all;
 }
 .textarea-container:not(.textarea-disabled) .textarea-wrapper::before {
@@ -46,43 +46,43 @@
   border: none;
   outline: none;
   height: 100%;
-  color: var(--sdds-textarea-color);
-  background-color: var(--sdds-textarea-background);
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
-  padding: var(--sdds-spacing-element-20) var(--sdds-spacing-element-16);
+  color: var(--tds-textarea-color);
+  background-color: var(--tds-textarea-background);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
   display: block;
   resize: vertical;
-  border-bottom: 1px solid var(--sdds-textarea-border-bottom);
+  border-bottom: 1px solid var(--tds-textarea-border-bottom);
   transition: border-bottom-color 200ms ease;
 }
 .textarea-input::placeholder {
   opacity: 1;
-  color: var(--sdds-textarea-placeholder);
+  color: var(--tds-textarea-placeholder);
 }
 .textarea-input:focus::placeholder {
-  color: var(--sdds-textarea-placeholder-focus-color);
+  color: var(--tds-textarea-placeholder-focus-color);
 }
 .textarea-input:disabled {
-  background-color: var(--sdds-textarea-disabled-background);
-  color: var(--sdds-textarea-disabled-color);
+  background-color: var(--tds-textarea-disabled-background);
+  color: var(--tds-textarea-disabled-color);
   cursor: not-allowed;
 }
 .textarea-input:disabled::placeholder {
-  color: var(--sdds-textarea-disabled-placeholder);
+  color: var(--tds-textarea-disabled-placeholder);
 }
 .textarea-input:disabled ~ .textfield-label-inside {
-  color: var(--sdds-textarea-disabled-label);
+  color: var(--tds-textarea-disabled-label);
 }
 .textarea-input::-webkit-resizer {
   display: none;
 }
 .textarea-input:hover {
-  border-bottom-color: var(--sdds-textarea-border-bottom-hover);
+  border-bottom-color: var(--tds-textarea-border-bottom-hover);
 }
 
 .textarea-resizer-icon {
-  color: var(--sdds-textarea-resize-icon);
+  color: var(--tds-textarea-resize-icon);
   position: absolute;
   display: block;
   bottom: 2px;
@@ -90,29 +90,29 @@
   padding-bottom: 2px;
   padding-right: 2px;
   pointer-events: none;
-  background-color: var(--sdds-textarea-background);
+  background-color: var(--tds-textarea-background);
 }
 .textarea-resizer-icon svg {
   display: block;
 }
 
 .textarea-label {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: block;
   z-index: 1;
-  margin-bottom: var(--sdds-spacing-element-8);
-  color: var(--sdds-textarea-label-color);
+  margin-bottom: var(--tds-spacing-element-8);
+  color: var(--tds-textarea-label-color);
 }
 
 .textarea-container.textarea-label-inside .textarea-label {
-  font: var(--sdds-detail-02);
-  letter-spacing: var(--sdds-detail-02-ls);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
   transition: 0.1s ease all;
-  color: var(--sdds-textarea-label-inside-color);
+  color: var(--tds-textarea-label-inside-color);
   position: absolute;
-  top: var(--sdds-spacing-element-20);
-  left: var(--sdds-spacing-element-16);
+  top: var(--tds-spacing-element-20);
+  left: var(--tds-spacing-element-16);
 }
 .textarea-container.textarea-label-inside .textarea-input::placeholder {
   color: transparent;
@@ -122,45 +122,45 @@
 }
 .textarea-container.textarea-label-inside .textarea-input:focus::placeholder {
   transition: color 0.35s ease;
-  color: var(--sdds-textarea-placeholder-focus-color);
+  color: var(--tds-textarea-placeholder-focus-color);
 }
 .textarea-container.textarea-focus.textarea-label-inside .textarea-label {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  top: var(--sdds-spacing-element-8);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  top: var(--tds-spacing-element-8);
 }
 .textarea-container.textarea-focus .textarea-wrapper::before, .textarea-container.textarea-focus .textarea-wrapper::after {
   width: 50%;
 }
 .textarea-container.textarea-data.textarea-label-inside .textarea-label {
-  font: var(--sdds-detail-07);
-  letter-spacing: var(--sdds-detail-07-ls);
-  top: var(--sdds-spacing-element-8);
+  font: var(--tds-detail-07);
+  letter-spacing: var(--tds-detail-07-ls);
+  top: var(--tds-spacing-element-8);
 }
 
 .textarea-textcounter {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-textarea-textcounter);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-textarea-textcounter);
   float: right;
   flex-basis: 100%;
   text-align: right;
-  padding-top: var(--sdds-spacing-element-4);
+  padding-top: var(--tds-spacing-element-4);
 }
 .textarea-textcounter .textfield-textcounter-divider {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
-  color: var(--sdds-textarea-textcounter-divider);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
+  color: var(--tds-textarea-textcounter-divider);
 }
 
 .textarea-helper {
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   display: flex;
   gap: 8px;
   align-items: center;
-  padding-top: var(--sdds-spacing-element-4);
-  color: var(--sdds-textarea-helper);
+  padding-top: var(--tds-spacing-element-4);
+  color: var(--tds-textarea-helper);
   flex-grow: 2;
   flex-basis: auto;
 }
@@ -169,24 +169,24 @@
 }
 
 .textarea-success .textarea-input {
-  border-bottom-color: var(--sdds-textarea-border-bottom-success);
+  border-bottom-color: var(--tds-textarea-border-bottom-success);
 }
 
 .textarea-error .textarea-input {
-  border-bottom-color: var(--sdds-textarea-border-bottom-error);
+  border-bottom-color: var(--tds-textarea-border-bottom-error);
 }
 .textarea-error .textarea-wrapper::after, .textarea-error .textarea-wrapper::before {
-  background: var(--sdds-textarea-bar-error);
+  background: var(--tds-textarea-bar-error);
 }
 .textarea-error .textarea-helper {
-  color: var(--sdds-textarea-helper-error);
+  color: var(--tds-textarea-helper-error);
 }
 
 .textarea-disabled .textarea-input {
   border-bottom-color: transparent;
 }
 .textarea-disabled .textarea-label {
-  color: var(--sdds-textarea-disabled-label);
+  color: var(--tds-textarea-disabled-label);
 }
 
 .textarea-icon__readonly {
@@ -194,18 +194,18 @@
   position: absolute;
   right: 18px;
   top: 18px;
-  color: var(--sdds-textarea-icon-read-only-color);
+  color: var(--tds-textarea-icon-read-only-color);
 }
 .textarea-icon__readonly-label {
   display: none;
   position: absolute;
   right: 18px;
   top: 48px;
-  font: var(--sdds-detail-05);
-  letter-spacing: var(--sdds-detail-05-ls);
+  font: var(--tds-detail-05);
+  letter-spacing: var(--tds-detail-05-ls);
   padding: 8px;
-  color: var(--sdds-textarea-icon-read-only-label-color);
-  background-color: var(--sdds-textarea-icon-read-only-label-background);
+  color: var(--tds-textarea-icon-read-only-label-color);
+  background-color: var(--tds-textarea-icon-read-only-label-background);
   white-space: nowrap;
   border-radius: 4px 0 4px 4px;
 }

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

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export class Textarea {
+export class TdsTextarea {
   constructor() {
     this.label = '';
     this.name = '';
@@ -19,22 +19,22 @@ export class Textarea {
     this.focusInput = undefined;
   }
   handleChange(event) {
-    this.sddsChange.emit(event);
+    this.tdsChange.emit(event);
   }
   handleBlur(event) {
-    this.sddsBlur.emit(event);
+    this.tdsBlur.emit(event);
     this.focusInput = false;
   }
   // Data input event in value prop
   handleInput(event) {
-    this.sddsInput.emit(event);
+    this.tdsInput.emit(event);
     this.value = event.target.value;
   }
-  /* Set the input as focus when clicking the whole textfield with suffix/prefix */
+  /* Set the input as focus when clicking the whole textarea with suffix/prefix */
   handleFocus(event) {
     this.textEl.focus();
     this.focusInput = true;
-    this.sddsFocus.emit(event);
+    this.tdsFocus.emit(event);
   }
   render() {
     var _a;
@@ -44,7 +44,7 @@ export class Textarea {
         ${this.focusInput ? 'textarea-focus' : ''}
         ${this.disabled ? 'textarea-disabled' : ''}
         ${this.readOnly ? 'textarea-readonly' : ''}
-        ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}
+        ${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' : ''}
@@ -56,9 +56,9 @@ export class Textarea {
         if (!this.readOnly) {
           this.handleBlur(event);
         }
-      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("sdds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("sdds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
+      }, onInput: (event) => this.handleInput(event), onChange: (event) => this.handleChange(event) }), h("span", { class: "textarea-resizer-icon" }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z", fill: "currentColor" }))), h("span", { class: "textarea-icon__readonly" }, h("tds-icon", { name: "edit_inactive" })), h("span", { class: "textarea-icon__readonly-label" }, "This field is non-editable")), h("span", { class: 'textarea-helper' }, this.state === 'error' && h("tds-icon", { name: "error", size: "16px" }), this.helper), this.maxLength > 0 && (h("div", { class: 'textarea-textcounter' }, this.value === null ? 0 : (_a = this.value) === null || _a === void 0 ? void 0 : _a.length, h("span", { class: "textfield-textcounter-divider" }, " / "), " ", this.maxLength))));
   }
-  static get is() { return "sdds-textarea"; }
+  static get is() { return "tds-textarea"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() {
     return {
@@ -171,7 +171,7 @@ export class Textarea {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Position of the label for the textfield."
+          "text": "Position of the label for the Textarea."
         },
         "attribute": "label-position",
         "reflect": false,
@@ -296,7 +296,7 @@ export class Textarea {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Mode variant of the textarea"
+          "text": "Mode variant of the Textarea"
         },
         "attribute": "mode-variant",
         "reflect": false,
@@ -347,14 +347,14 @@ export class Textarea {
   }
   static get events() {
     return [{
-        "method": "sddsChange",
-        "name": "sddsChange",
+        "method": "tdsChange",
+        "name": "tdsChange",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Change event for the textarea"
+          "text": "Change event for the Textarea"
         },
         "complexType": {
           "original": "any",
@@ -362,14 +362,14 @@ export class Textarea {
           "references": {}
         }
       }, {
-        "method": "sddsBlur",
-        "name": "sddsBlur",
+        "method": "tdsBlur",
+        "name": "tdsBlur",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Blur event for the textarea"
+          "text": "Blur event for the Textarea"
         },
         "complexType": {
           "original": "FocusEvent",
@@ -381,14 +381,14 @@ export class Textarea {
           }
         }
       }, {
-        "method": "sddsInput",
-        "name": "sddsInput",
+        "method": "tdsInput",
+        "name": "tdsInput",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Input event for the textarea"
+          "text": "Input event for the Textarea"
         },
         "complexType": {
           "original": "InputEvent",
@@ -400,14 +400,14 @@ export class Textarea {
           }
         }
       }, {
-        "method": "sddsFocus",
-        "name": "sddsFocus",
+        "method": "tdsFocus",
+        "name": "tdsFocus",
         "bubbles": true,
         "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Focus event for the textarea"
+          "text": "Focus event for the Textarea"
         },
         "complexType": {
           "original": "FocusEvent",

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

@@ -0,0 +1,188 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+import { ComponentsFolder } from '../../utils/constants';
+export default {
+  title: `${ComponentsFolder}/Textarea`,
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=1828%3A85238&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    modeVariant: {
+      name: 'Mode variant',
+      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Inherit from parent', 'Primary', 'Secondary'],
+      table: {
+        defaultValue: { summary: 'Inherit from parent' },
+      },
+    },
+    state: {
+      name: 'State',
+      description: 'Switches between success and error state.',
+      control: {
+        type: 'radio',
+      },
+      options: ['Default', 'Success', 'Error'],
+      table: {
+        defaultValue: { summary: 'default' },
+      },
+    },
+    label: {
+      name: 'Label text',
+      description: 'Sets the label text.',
+      control: {
+        type: 'text',
+      },
+    },
+    labelPosition: {
+      name: 'Label position',
+      description: 'Sets the label text position.',
+      control: {
+        type: 'radio',
+      },
+      options: ['No label', 'Inside', 'Outside'],
+      table: {
+        defaultValue: { summary: 'no-label' },
+      },
+    },
+    placeholder: {
+      name: 'Placeholder',
+      description: 'Sets the placeholder text.',
+      control: {
+        type: 'text',
+      },
+    },
+    helper: {
+      name: 'Helper text',
+      description: 'Sets the helper text.',
+      control: {
+        type: 'text',
+      },
+    },
+    rows: {
+      name: 'Rows',
+      description: 'Sets the number of rows.',
+      control: {
+        type: 'number',
+      },
+    },
+    maxLength: {
+      name: 'Max length',
+      description: 'Sets a maximum value of how long the text can be.',
+      control: {
+        type: 'number',
+      },
+    },
+    noMinWidth: {
+      name: 'No minimum width',
+      description: 'Enables component to shrink below 208px which is the default width.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    readonly: {
+      name: 'Read only',
+      description: 'Sets the Textarea to read-only state.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the Textarea.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
+  },
+  args: {
+    modeVariant: 'Inherit from parent',
+    state: 'Default',
+    label: 'Label',
+    labelPosition: 'No label',
+    placeholder: 'Placeholder',
+    helper: '',
+    rows: 5,
+    maxLength: 0,
+    noMinWidth: false,
+    readonly: false,
+    disabled: false,
+  },
+};
+const Template = ({ modeVariant, state, label, labelPosition, placeholder, helper, rows, maxLength, noMinWidth, readonly, disabled, }) => {
+  const maxlength = maxLength > 0 ? `max-length="${maxLength}"` : '';
+  const stateValue = state.toLowerCase();
+  const labelPosLookup = {
+    'No label': 'no-label',
+    '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}"
+          ${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>
+  `);
+};
+export const Default = Template.bind({});

package/dist/collection/components/toast/toast.css

@@ -0,0 +1,109 @@
+:host(.hide) {
+  display: none;
+  visibility: hidden;
+}
+
+:host {
+  z-index: 700;
+}
+:host .wrapper {
+  display: flex;
+  width: 348px;
+  background-color: var(--tds-toast-background-color);
+  border-radius: 4px;
+}
+:host .wrapper.information {
+  border-left: 4px solid var(--tds-information);
+}
+:host .wrapper.information tds-icon {
+  color: var(--tds-information);
+}
+:host .wrapper.success {
+  border-left: 4px solid var(--tds-positive);
+}
+:host .wrapper.success tds-icon {
+  color: var(--tds-positive);
+}
+:host .wrapper.error {
+  border-left: 4px solid var(--tds-negative);
+}
+:host .wrapper.error tds-icon {
+  color: var(--tds-negative);
+}
+:host .wrapper.warning {
+  border-left: 4px solid var(--tds-warning);
+}
+:host .wrapper.warning tds-icon {
+  color: var(--tds-warning);
+}
+:host .wrapper button.close {
+  height: 20px;
+  width: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 14px 14px 0 0;
+  border: none;
+  background: transparent;
+}
+:host .wrapper button.close:hover {
+  cursor: pointer;
+}
+:host .wrapper button.close:focus {
+  outline: 2px solid var(--tds-blue-400);
+  outline-offset: -2px;
+}
+:host .wrapper button.close tds-icon {
+  color: var(--tds-toast-dissmiss-color);
+  padding: 0;
+}
+:host tds-icon {
+  padding: 14px 0 0 12px;
+}
+:host .content {
+  padding: 16px 0 16px 10px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+:host .content .header-subheader {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+:host .content .header,
+:host .content slot[name=header]::slotted(*) {
+  font: var(--tds-headline-07);
+  letter-spacing: var(--tds-headline-07-ls);
+  color: var(--tds-toast-headline-color);
+}
+:host .content .subheader,
+:host .content slot[name=subheader]::slotted(*) {
+  margin-top: 4px;
+  color: var(--tds-toast-subheadline-color);
+  font: var(--tds-detail-02);
+  letter-spacing: var(--tds-detail-02-ls);
+  max-width: 252px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host .content .subheader.no-link slot::slotted(*),
+:host .content slot[name=subheader]::slotted(*).no-link slot::slotted(*) {
+  padding-bottom: 0;
+}
+:host .content .toast-bottom.subheader {
+  margin-top: 16px;
+}
+:host .content .toast-bottom.no-subheader {
+  margin-top: 4px;
+}
+:host slot[name=bottom]::slotted(*) {
+  color: var(--tds-toast-link-color);
+}
+:host .tds-mode-variant-primary {
+  --tds-toast-background: var(--tds-toast-background-primary);
+}
+:host .tds-mode-variant-secondary {
+  --tds-toast-background: var(--tds-toast-background-secondary);
+}