@scania/tegel 0.0.34 → 0.0.52

package/dist/collection/components/banner/banner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,4GAA4G;OAClH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,4GAA4G;OAClH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,2BAA2B;MACxC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;OACrC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,mCAAmC;MAChD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EACT,uIAAuI;MACzI,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,4BAA4B;IACpC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;0CACsB,KAAK,CAAC,WAAW,EAAE;QAErD,CAAC,QAAQ,IAAI,KAAK,KAAK,OAAO;EAC5B,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;EAC3B,CAAC,CAAC,yFAAyF;EAC3F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,OAAO,CAAC;EACnD,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;;QAEE,MAAM,IAAI,kCAAkC,MAAM,OAAO;QACzD,SAAS,IAAI,sCAAsC,SAAS,QAAQ;QACpE,IAAI,IAAI,yCAAyC,IAAI,MAAM;;;;;;GAMhE,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    state: {\n      name: 'Type',\n      description: 'Changes type of component',\n      options: ['Default', 'Error', 'Info'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Text to display in header section',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Text to display in subheader section',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Text to display in link section',\n      control: {\n        type: 'text',\n      },\n    },\n    hideIcon: {\n      name: 'Hide icon',\n      description:\n        'If an icon should be displayed. For type default the truck icon is used in this example, but it should be changed to suit your needs.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    state: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    link: 'Learn more',\n    hideIcon: false,\n  },\n};\n\nconst Template = ({ state, hideIcon, header, subheader, link }) =>\n  formatHtmlPreview(`\n    <div class=\"sdds-banner sdds-banner-${state.toLowerCase()}\">\n      ${\n        !hideIcon && state === 'error'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"error\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && state === 'info'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"info\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && !(state === 'info' || state === 'error')\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"truck\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      <div class=\"sdds-banner-body\">\n      ${header && `<h6 class=\"sdds-banner-header\">${header}</h6>`}\n      ${subheader && `<div class=\"sdds-banner-subheader\">${subheader}</div>`}\n      ${link && `<a class=\"sdds-link sdds-banner-link\">${link}</a>`}\n      </div>\n      <button type=\"button\" aria-label=\"close\" class=\"sdds-banner-close\">\n        <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n      </button>\n    </div>\n  `);\n\nexport const Native = Template.bind({});\n"]}
+{"version":3,"file":"banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/banner.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,UAAU,EAAE;IACV,MAAM,EAAE,YAAY;IACpB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,4GAA4G;OAClH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,4GAA4G;OAClH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC;MACrC,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;OACrC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,qDAAqD;MAClE,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,gDAAgD;MAC7D,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,WAAW;MACjB,WAAW,EACT,kIAAkI;MACpI,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,SAAS;IAChB,MAAM,EAAE,4BAA4B;IACpC,SAAS,EAAE,qBAAqB;IAChC,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAChE,iBAAiB,CAAC;0CACsB,KAAK,CAAC,WAAW,EAAE;QAErD,CAAC,QAAQ,IAAI,KAAK,KAAK,OAAO;EAC5B,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,KAAK,KAAK,MAAM;EAC3B,CAAC,CAAC,yFAAyF;EAC3F,CAAC,CAAC,EACN;QAEE,CAAC,QAAQ,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM,IAAI,KAAK,KAAK,OAAO,CAAC;EACnD,CAAC,CAAC,0FAA0F;EAC5F,CAAC,CAAC,EACN;;QAEE,MAAM,IAAI,kCAAkC,MAAM,OAAO;QACzD,SAAS,IAAI,sCAAsC,SAAS,QAAQ;QACpE,IAAI,IAAI,yCAAyC,IAAI,MAAM;;;;;;GAMhE,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    state: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Info'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Sets text to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n    hideIcon: {\n      name: 'Hide icon',\n      description:\n        'Controls if an icon should be displayed. The truck icon is used here as an example, but it should be changed to suit your needs.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    state: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    link: 'Learn more',\n    hideIcon: false,\n  },\n};\n\nconst Template = ({ state, hideIcon, header, subheader, link }) =>\n  formatHtmlPreview(`\n    <div class=\"sdds-banner sdds-banner-${state.toLowerCase()}\">\n      ${\n        !hideIcon && state === 'error'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"error\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && state === 'info'\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"info\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      ${\n        !hideIcon && !(state === 'info' || state === 'error')\n          ? '<span class=\"sdds-banner-prefix\"><sdds-icon name=\"truck\" size=\"20px\"></sdds-icon></span>'\n          : ''\n      }\n      <div class=\"sdds-banner-body\">\n      ${header && `<h6 class=\"sdds-banner-header\">${header}</h6>`}\n      ${subheader && `<div class=\"sdds-banner-subheader\">${subheader}</div>`}\n      ${link && `<a class=\"sdds-link sdds-banner-link\">${link}</a>`}\n      </div>\n      <button type=\"button\" aria-label=\"close\" class=\"sdds-banner-close\">\n        <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n      </button>\n    </div>\n  `);\n\nexport const Native = Template.bind({});\n"]}

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

@@ -59,15 +59,20 @@
   font: var(--sdds-headline-06);
   letter-spacing: var(--sdds-headline-06-ls);
 }
-:host .banner-content .banner-subheader {
+:host .banner-content slot[name=banner-subheader] {
+  display: block;
   margin-top: 4px;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
 }
-:host .banner-content sdds-link {
+:host .banner-content .banner-link slot[name=banner-link] {
+  display: block;
   width: fit-content;
   margin-top: 16px;
 }
+:host .banner-content .banner-link.no-subheader slot[name=banner-link] {
+  margin-top: 4px;
+}
 :host .banner-close {
   color: var(--sdds-banner-x-color);
 }
@@ -76,6 +81,7 @@
   padding-top: 14px;
   background-color: transparent;
   border: none;
+  color: var(--sdds-banner-x-color);
 }
 :host .banner-close button:hover {
   cursor: pointer;

package/dist/collection/components/banner/sdds-banner.js

@@ -12,15 +12,12 @@ export class SddsBanner {
     };
     this.icon = undefined;
     this.header = undefined;
-    this.subheader = undefined;
-    this.linkText = undefined;
-    this.href = undefined;
-    this.linkTarget = '_self';
-    this.linkRel = 'noopener';
     this.type = 'none';
     this.bannerId = crypto.randomUUID();
     this.persistent = false;
     this.hidden = false;
+    this.hasSubheader = undefined;
+    this.hasLink = undefined;
   }
   /** Hides the banner. */
   async hideBanner() {
@@ -57,9 +54,12 @@ export class SddsBanner {
     else if (this.type === 'information') {
       this.icon = 'info';
     }
+    const children = Array.from(this.host.children);
+    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');
+    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');
   }
   render() {
-    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("sdds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.subheader && h("span", { class: `banner-subheader` }, this.subheader), this.linkText && this.href && (h("sdds-link", { "link-href": this.href, rel: this.linkRel, "link-target": this.linkTarget }, this.linkText))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
+    return (h(Host, { role: "banner", "aria-hidden": `${this.hidden}`, "aria-live": this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite', "aria-atomic": this.host.getAttribute('aria-atomic'), class: `${this.type} ${this.hidden ? 'hide' : 'show'}` }, this.icon && (h("div", { class: `banner-icon ${this.type}` }, h("sdds-icon", { name: this.icon, size: "20px" }))), h("div", { class: `banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}` }, this.header && h("span", { class: `banner-header` }, this.header), this.hasSubheader && h("slot", { name: "banner-subheader" }), this.hasLink && (h("div", { class: `banner-link ${!this.hasSubheader ? 'no-subheader' : ''}` }, h("slot", { name: "banner-link" })))), !this.persistent && (h("div", { class: `banner-close` }, h("button", { onClick: () => {
         this.handleClose();
       } }, h("sdds-icon", { name: "cross", size: "20px" }))))));
   }
@@ -111,93 +111,6 @@ export class SddsBanner {
         "attribute": "header",
         "reflect": false
       },
-      "subheader": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Subheader text."
-        },
-        "attribute": "subheader",
-        "reflect": false
-      },
-      "linkText": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Link text."
-        },
-        "attribute": "link-text",
-        "reflect": false
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Href for the link"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "linkTarget": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'_self' | '_blank' | '_parent' | '_top'",
-          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Where to open the linked URL"
-        },
-        "attribute": "link-target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      },
-      "linkRel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
-        },
-        "attribute": "link-rel",
-        "reflect": false,
-        "defaultValue": "'noopener'"
-      },
       "type": {
         "type": "string",
         "mutable": false,
@@ -272,6 +185,12 @@ export class SddsBanner {
       }
     };
   }
+  static get states() {
+    return {
+      "hasSubheader": {},
+      "hasLink": {}
+    };
+  }
   static get events() {
     return [{
         "method": "sddsClose",

package/dist/collection/components/banner/sdds-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-banner.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Subheader text. */\n  @Prop() subheader: string;\n\n  /** Link text. */\n  @Prop() linkText: string;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() linkTarget: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() linkRel: string = 'noopener';\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.subheader && <span class={`banner-subheader`}>{this.subheader}</span>}\n          {this.linkText && this.href && (\n            <sdds-link link-href={this.href} rel={this.linkRel} link-target={this.linkTarget}>\n              {this.linkText}\n            </sdds-link>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"sdds-banner.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Method, Element } from '@stencil/core';\nimport { HostElement, State } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-banner',\n  styleUrl: 'sdds-banner.scss',\n  shadow: true,\n})\nexport class SddsBanner {\n  /** Name of the icon for the component. For error and information type the icon is predefined. */\n  @Prop() icon: string;\n\n  /** Header text. */\n  @Prop() header: string;\n\n  /** Type of banner */\n  @Prop() type: 'error' | 'information' | 'none' = 'none';\n\n  /** ID used for internal table functionality and events, must be unique.\n   *\n   * **NOTE**: If you're listening for banner close events you need to set this ID yourself to identify the banner, as the default ID is random and will be different every time.\n   */\n  @Prop() bannerId: string = crypto.randomUUID();\n\n  /** Removes the close button on the banner. */\n  @Prop() persistent: boolean = false;\n\n  /** Hides the banner */\n  @Prop() hidden = false;\n\n  @State() hasSubheader: boolean;\n\n  @State() hasLink: boolean;\n\n  @Element() host: HostElement;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsClose',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsClose: EventEmitter<{\n    bannerId: string;\n    hidden: boolean;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: true,\n    };\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\n    }\n    return {\n      bannerId: this.bannerId,\n      hidden: false,\n    };\n  }\n\n  connectedCallback() {\n    if (this.type === 'error') {\n      this.icon = 'error';\n    } else if (this.type === 'information') {\n      this.icon = 'info';\n    }\n    const children = Array.from(this.host.children);\n    this.hasSubheader = children.some((childElement) => childElement.slot === 'banner-subheader');\n    this.hasLink = children.some((childElement) => childElement.slot === 'banner-link');\n  }\n\n  handleClose = () => {\n    const sddsCloseEvent = this.sddsClose.emit({\n      bannerId: this.bannerId,\n      hidden: this.hidden,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host\n        role=\"banner\"\n        aria-hidden={`${this.hidden}`}\n        aria-live={\n          this.host.getAttribute('aria-live') ? this.host.getAttribute('aria-live') : 'polite'\n        }\n        aria-atomic={this.host.getAttribute('aria-atomic')}\n        class={`${this.type} ${this.hidden ? 'hide' : 'show'}`}\n      >\n        {this.icon && (\n          <div class={`banner-icon ${this.type}`}>\n            <sdds-icon name={this.icon} size=\"20px\"></sdds-icon>\n          </div>\n        )}\n        <div class={`banner-content ${this.type} ${!this.icon ? 'no-icon' : ''}`}>\n          {this.header && <span class={`banner-header`}>{this.header}</span>}\n          {this.hasSubheader && <slot name=\"banner-subheader\"></slot>}\n          {this.hasLink && (\n            <div class={`banner-link ${!this.hasSubheader ? 'no-subheader' : ''}`}>\n              <slot name=\"banner-link\"></slot>\n            </div>\n          )}\n        </div>\n        {!this.persistent && (\n          <div class={`banner-close`}>\n            <button\n              onClick={() => {\n                this.handleClose();\n              }}\n            >\n              <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n            </button>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/banner/sdds-banner.stories.js

@@ -23,54 +23,36 @@ export default {
   argTypes: {
     type: {
       name: 'Type',
-      description: 'Changes type of component',
+      description: 'Changes the type of the component.',
       options: ['Default', 'Error', 'Information'],
       control: {
         type: 'radio',
       },
       table: {
-        defaultValue: { summary: 'default' },
+        defaultValue: { summary: 'none' },
       },
     },
     header: {
       name: 'Header',
-      description: 'Text to display in header section',
+      description: 'Sets text to be displayed in the header section.',
       control: {
         type: 'text',
       },
     },
     subheader: {
       name: 'Subheader',
-      description: 'Text to display in subheader section',
+      description: 'Sets text to be displayed in the subheader section.',
       control: {
         type: 'text',
       },
     },
-    linkText: {
+    link: {
       name: 'Link',
-      description: 'Text to display in link section',
-      control: {
-        type: 'text',
-      },
-    },
-    href: {
-      name: 'Link href',
-      description: 'Href for link',
+      description: 'Sets a link to be displayed in the link section.',
       control: {
         type: 'text',
       },
     },
-    linkTarget: {
-      name: 'Link target',
-      description: 'Where to open the linked URL.',
-      control: {
-        type: 'radio',
-      },
-      options: ['_self', '_blank', '_parent', '_top'],
-      table: {
-        defaultValue: { summary: '_self' },
-      },
-    },
     icon: {
       name: 'Icon',
       description: 'Name of icon to display, choose `none` to remove the icon.',
@@ -78,9 +60,6 @@ export default {
         type: 'select',
       },
       options: [...iconsNames, 'none'],
-      table: {
-        defaultValue: { summary: 'none' },
-      },
       if: { arg: 'type', eq: 'Default' },
     },
     persistent: {
@@ -90,33 +69,28 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
   },
   args: {
     type: 'Default',
     header: 'This is a header text area',
-    subheader: 'SubHeader text area',
-    linkText: 'Learn more',
-    href: 'tegel.scania.com',
-    linkTarget: '_self',
+    subheader: '<div slot="banner-subheader">Short subheader</div>',
+    link: '<sdds-link slot="banner-link" href="/">Link example</sdds-link>',
     icon: 'truck',
     persistent: false,
   },
 };
-const Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) => formatHtmlPreview(`
+const Template = ({ type, icon, header, subheader, persistent, link }) => formatHtmlPreview(`
       <sdds-banner
           ${type !== 'Default' ? `type="${type.toLowerCase()}"` : ''}
           ${icon !== 'none' ? `icon="${icon}"` : ''}
           ${header !== '' ? `header="${header}"` : ''}
-          ${subheader !== '' ? `subheader="${subheader}"` : ''}
-          ${linkText !== '' ? `link-text="${linkText}"` : ''}
-          ${href !== '' ? `href="${href}"` : ''}
-          ${linkTarget !== '' ? `link-target="${linkTarget}"` : ''}
-
           ${persistent ? `persistent` : ''}
           >
+          ${subheader ? `${subheader}` : ''}
+          ${link ? `${link}` : ''}
       </sdds-banner>
 
       <!-- Script tag with eventlistener for demo purposes. -->

package/dist/collection/components/banner/sdds-banner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes type of component',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'default' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Text to display in header section',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Text to display in subheader section',\n      control: {\n        type: 'text',\n      },\n    },\n    linkText: {\n      name: 'Link',\n      description: 'Text to display in link section',\n      control: {\n        type: 'text',\n      },\n    },\n    href: {\n      name: 'Link href',\n      description: 'Href for link',\n      control: {\n        type: 'text',\n      },\n    },\n    linkTarget: {\n      name: 'Link target',\n      description: 'Where to open the linked URL.',\n      control: {\n        type: 'radio',\n      },\n      options: ['_self', '_blank', '_parent', '_top'],\n      table: {\n        defaultValue: { summary: '_self' },\n      },\n    },\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: 'SubHeader text area',\n    linkText: 'Learn more',\n    href: 'tegel.scania.com',\n    linkTarget: '_self',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, linkText, href, persistent, linkTarget }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${subheader !== '' ? `subheader=\"${subheader}\"` : ''}\n          ${linkText !== '' ? `link-text=\"${linkText}\"` : ''}\n          ${href !== '' ? `href=\"${href}\"` : ''}\n          ${linkTarget !== '' ? `link-target=\"${linkTarget}\"` : ''}\n\n          ${persistent ? `persistent` : ''}\n          >\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log('Closed banner with BannerID: ', event.detail.bannerId)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}
+{"version":3,"file":"sdds-banner.stories.js","sourceRoot":"","sources":["../../../src/components/banner/sdds-banner.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport { iconsNames } from '../icon/iconsArray';\nimport readme from './readme.md';\n\n// FIXME: CMS: Change state to type in Code tab of component\n\nexport default {\n  title: 'Components/Banner',\n  parameters: {\n    notes: readme,\n    layout: 'fullscreen',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=5927%3A497&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    type: {\n      name: 'Type',\n      description: 'Changes the type of the component.',\n      options: ['Default', 'Error', 'Information'],\n      control: {\n        type: 'radio',\n      },\n      table: {\n        defaultValue: { summary: 'none' },\n      },\n    },\n    header: {\n      name: 'Header',\n      description: 'Sets text to be displayed in the header section.',\n      control: {\n        type: 'text',\n      },\n    },\n    subheader: {\n      name: 'Subheader',\n      description: 'Sets text to be displayed in the subheader section.',\n      control: {\n        type: 'text',\n      },\n    },\n    link: {\n      name: 'Link',\n      description: 'Sets a link to be displayed in the link section.',\n      control: {\n        type: 'text',\n      },\n    },\n\n    icon: {\n      name: 'Icon',\n      description: 'Name of icon to display, choose `none` to remove the icon.',\n      control: {\n        type: 'select',\n      },\n      options: [...iconsNames, 'none'],\n      if: { arg: 'type', eq: 'Default' },\n    },\n    persistent: {\n      name: 'Disable closing',\n      description: `Removes the 'close button' in the banner.`,\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    type: 'Default',\n    header: 'This is a header text area',\n    subheader: '<div slot=\"banner-subheader\">Short subheader</div>',\n    link: '<sdds-link slot=\"banner-link\" href=\"/\">Link example</sdds-link>',\n    icon: 'truck',\n    persistent: false,\n  },\n};\n\nconst Template = ({ type, icon, header, subheader, persistent, link }) =>\n  formatHtmlPreview(`\n      <sdds-banner\n          ${type !== 'Default' ? `type=\"${type.toLowerCase()}\"` : ''}\n          ${icon !== 'none' ? `icon=\"${icon}\"` : ''}\n          ${header !== '' ? `header=\"${header}\"` : ''}\n          ${persistent ? `persistent` : ''}\n          >\n          ${subheader ? `${subheader}` : ''}\n          ${link ? `${link}` : ''}\n      </sdds-banner>\n\n      <!-- Script tag with eventlistener for demo purposes. -->\n      <script>\n        document.addEventListener('sddsClose', (event) => {\n          console.log('Closed banner with BannerID: ', event.detail.bannerId)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/breadcrumb/{breadcrumb-item/breadcrumb-item.css → sdds-breadcrumb-link/sdds-breadcrumb-link.css}

@@ -1,31 +1,34 @@
 @charset "UTF-8";
-li {
+[role=listitem] {
   display: flex;
   align-items: center;
   color: var(--sdds-breadcrumb-color);
 }
-li a {
+[role=listitem] a {
   color: var(--sdds-breadcrumb-color);
   text-decoration: none;
 }
-li:hover {
+[role=listitem]:hover {
   cursor: pointer;
 }
-li:hover a {
+[role=listitem]:hover a {
   color: var(--sdds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-li.sdds-breadcrumb-item-disabled a, li.sdds-breadcrumb-item-current a,
-li [aria-current=page] a {
+[role=listitem].disabled {
+  pointer-events: none;
+}
+[role=listitem].disabled a, [role=listitem].current a,
+[role=listitem] [aria-current=page] a {
   cursor: default;
   color: var(--sdds-breadcrumb-color-disabled);
 }
-li.sdds-breadcrumb-item-disabled:hover a, li.sdds-breadcrumb-item-current:hover a,
-li [aria-current=page]:hover a {
+[role=listitem].disabled:hover a, [role=listitem].current:hover a,
+[role=listitem] [aria-current=page]:hover a {
   color: var(--sdds-breadcrumb-color-disabled);
   text-decoration: none;
 }
-li a::after {
+[role=listitem] ::slotted(*)::after {
   content: "›";
   color: var(--sdds-breadcrumb-separator-color);
   margin-right: 4px;
@@ -34,10 +37,7 @@ li a::after {
   width: 4px;
   height: 8px;
 }
-li:last-child {
-  color: red;
-}
 
-:host(.sdds-breadcrumb-item-last) a::after {
+:host(.last) ::slotted(*)::after {
   display: none;
 }

package/dist/collection/components/breadcrumb/{breadcrumb-item/breadcrumb-item.js → sdds-breadcrumb-link/sdds-breadcrumb-link.js}

@@ -1,26 +1,26 @@
 import { h } from '@stencil/core';
-export class SddsBreadcrumbItem {
+export class SddsBreadcrumbLink {
   constructor() {
     this.current = false;
     this.href = undefined;
+    this.target = '_self';
+    this.rel = 'noopener';
     this.disabled = false;
   }
   render() {
-    return (h("li", { class: `${this.current ? 'sdds-breadcrumb-item-current' : ''} 
-        ${this.disabled ? 'sdds-breadcrumb-item-disabled' : ''}` }, h("a", { "aria-current": this.current && 'page',
-      // eslint-disable-next-line no-script-url
-      href: this.disabled ? 'javascript:void(0)' : this.href }, h("slot", null))));
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+      ${this.disabled ? 'disabled' : ''}` }, h("a", { href: !this.disabled ? this.href : null, target: this.target, rel: this.rel }, h("slot", { name: "label" }))));
   }
-  static get is() { return "sdds-breadcrumb-item"; }
+  static get is() { return "sdds-breadcrumb-link"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["breadcrumb-item.scss"]
+      "$": ["sdds-breadcrumb-link.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["breadcrumb-item.css"]
+      "$": ["sdds-breadcrumb-link.css"]
     };
   }
   static get properties() {
@@ -60,6 +60,42 @@ export class SddsBreadcrumbItem {
         "attribute": "href",
         "reflect": false
       },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'_self' | '_blank' | '_parent' | '_top'",
+          "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Where to open the linked URL"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'."
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "'noopener'"
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,
@@ -81,4 +117,4 @@ export class SddsBreadcrumbItem {
     };
   }
 }
-//# sourceMappingURL=breadcrumb-item.js.map
+//# sourceMappingURL=sdds-breadcrumb-link.js.map

package/dist/collection/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb-link.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;;mBAEF,KAAK;;kBAM0B,OAAO;eAG3C,UAAU;oBAGJ,KAAK;;EAEjC,MAAM;IACJ,OAAO,CACL,WACE,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;QACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEjC,SAAG,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG;QAC5E,YAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,CACA,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-link',\n  styleUrl: 'sdds-breadcrumb-link.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbLink {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\n\n  /** Href for the link */\n  @Prop() href: string;\n\n  /** Where to open the linked URL */\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top' = '_self';\n\n  /** 'noopener' is a security measure for legacy browsers that preventsthe opened page from getting access to the original page when using target='_blank'. */\n  @Prop() rel: string = 'noopener';\n\n  /** Toggle the disabled state for the breadcrumb */\n  @Prop() disabled: boolean = false;\n\n  render() {\n    return (\n      <div\n        role=\"listitem\"\n        class={`${this.current ? 'current' : ''} \n      ${this.disabled ? 'disabled' : ''}`}\n      >\n        <a href={!this.disabled ? this.href : null} target={this.target} rel={this.rel}>\n          <slot name=\"label\"></slot>\n        </a>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.css

@@ -0,0 +1,15 @@
+:host {
+  box-sizing: border-box;
+}
+:host * {
+  box-sizing: border-box;
+}
+:host [role=list] {
+  padding: 0;
+  margin: 0;
+  font: var(--sdds-detail-02);
+  letter-spacing: var(--sdds-detail-02-ls);
+  display: flex;
+  flex-wrap: wrap;
+  list-style-type: none;
+}

package/dist/collection/components/breadcrumb/{breadcrumb.js → sdds-breadcrumb.js}

@@ -1,23 +1,23 @@
 import { h } from '@stencil/core';
 export class SddsBreadcrumb {
   connectedCallback() {
-    this.el.children[this.el.children.length - 1].classList.add('sdds-breadcrumb-item-last');
+    this.el.children[this.el.children.length - 1].classList.add('last');
   }
   render() {
-    return (h("nav", null, h("ol", { class: 'sdds-breadcrumb' }, h("slot", null))));
+    return (h("nav", null, h("div", { role: "list", class: 'sdds-breadcrumb' }, h("slot", null))));
   }
   static get is() { return "sdds-breadcrumb"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["breadcrumb-component.scss"]
+      "$": ["sdds-breadcrumb.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["breadcrumb-component.css"]
+      "$": ["sdds-breadcrumb.css"]
     };
   }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=breadcrumb.js.map
+//# sourceMappingURL=sdds-breadcrumb.js.map

package/dist/collection/components/breadcrumb/sdds-breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOtD,MAAM,OAAO,cAAc;EAGzB,iBAAiB;IACf,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;EACtE,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,WAAK,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,iBAAiB;QACvC,eAAa,CACT,CACF,CACP,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Element } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb',\n  styleUrl: 'sdds-breadcrumb.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumb {\n  @Element() el: HTMLElement;\n\n  connectedCallback() {\n    this.el.children[this.el.children.length - 1].classList.add('last');\n  }\n\n  render() {\n    return (\n      <nav>\n        <div role=\"list\" class={'sdds-breadcrumb'}>\n          <slot></slot>\n        </div>\n      </nav>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js

@@ -0,0 +1,36 @@
+import itemReadme from './sdds-breadcrumb-link/readme.md';
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Breadcrumb',
+  parameters: {
+    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',
+      },
+    ],
+  },
+};
+const Template = () => formatHtmlPreview(`   
+      <sdds-breadcrumb>
+        <sdds-breadcrumb-link href="#">
+          <div slot="label">Page 1</div>
+        </sdds-breadcrumb-link>
+        <sdds-breadcrumb-link href="google.se">
+          <div slot="label">Page 2</div>
+        </sdds-breadcrumb-link>
+        <sdds-breadcrumb-link current>
+          <div slot="label">Page 3</div>
+        </sdds-breadcrumb-link>
+      </sdds-breadcrumb>
+      `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=sdds-breadcrumb.stories.js.map

package/dist/collection/components/breadcrumb/sdds-breadcrumb.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb.stories.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/sdds-breadcrumb.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,kCAAkC,CAAC;AAC1D,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,uBAAuB;EAC9B,UAAU,EAAE;IACV,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE,gBAAgB,EAAE,UAAU,EAAE;IAC5D,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,6GAA6G;OACnH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,6GAA6G;OACnH;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,GAAG,EAAE,CACpB,iBAAiB,CACf;;;;;;;;;;;;OAYG,CACJ,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import itemReadme from './sdds-breadcrumb-link/readme.md';\nimport readme from './readme.md';\nimport { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Breadcrumb',\n  parameters: {\n    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2703%3A4725&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n};\n\nconst Template = () =>\n  formatHtmlPreview(\n    `   \n      <sdds-breadcrumb>\n        <sdds-breadcrumb-link href=\"#\">\n          <div slot=\"label\">Page 1</div>\n        </sdds-breadcrumb-link>\n        <sdds-breadcrumb-link href=\"google.se\">\n          <div slot=\"label\">Page 2</div>\n        </sdds-breadcrumb-link>\n        <sdds-breadcrumb-link current>\n          <div slot=\"label\">Page 3</div>\n        </sdds-breadcrumb-link>\n      </sdds-breadcrumb>\n      `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}