@scania/tegel 0.0.5 → 0.0.7

package/dist/collection/collection-manifest.json

@@ -1,5 +1,7 @@
 {
   "entries": [
+    "./components/side-menu/webcomponent/side-menu.js",
+    "./components/stepper/sdds-stepper.js",
     "./components/data-table/table/table.js",
     "./components/accordion/accordion.js",
     "./components/accordion/accordion-item/accordion-item.js",
@@ -7,10 +9,11 @@
     "./components/banner/sdds-banner.js",
     "./components/block/sdds-block.js",
     "./components/breadcrumb/sdds-breadcrumb.js",
-    "./components/breadcrumb/sdds-breadcrumb-link/sdds-breadcrumb-link.js",
+    "./components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js",
     "./components/button/button-component.js",
     "./components/card/sdds-card.js",
     "./components/checkbox/sdds-checkbox.js",
+    "./components/chip/sdds-chip.js",
     "./components/data-table/table-body/table-body.js",
     "./components/data-table/table-body-cell/table-body-cell.js",
     "./components/data-table/table-body-row/table-body-row.js",
@@ -25,8 +28,26 @@
     "./components/dropdown/dropdown-filter/dropdown-filter.js",
     "./components/dropdown/dropdown-option/dropdown-option.js",
     "./components/footer/webcomponent/sdds-footer.js",
-    "./components/footer/webcomponent/sdds-footer-link/sdds-footer-link.js",
-    "./components/footer/webcomponent/sdds-footer-link-group/sdds-footer-link-group.js",
+    "./components/footer/webcomponent/sdds-footer-group/sdds-footer-group.js",
+    "./components/footer/webcomponent/sdds-footer-item/sdds-footer-item.js",
+    "./components/header/webcomponent/header-component.js",
+    "./components/header/webcomponent/core-header-item/core-header-item.js",
+    "./components/header/webcomponent/header-brand-symbol/header-brand-symbol.js",
+    "./components/header/webcomponent/header-dropdown/header-dropdown.js",
+    "./components/header/webcomponent/header-dropdown-list/header-dropdown-list.js",
+    "./components/header/webcomponent/header-dropdown-list-item/header-dropdown-list-item.js",
+    "./components/header/webcomponent/header-dropdown-list-user/header-dropdown-list-user.js",
+    "./components/header/webcomponent/header-hamburger/header-hamburger.js",
+    "./components/header/webcomponent/header-item/header-item.js",
+    "./components/header/webcomponent/header-launcher/header-launcher.js",
+    "./components/header/webcomponent/header-launcher-button/header-launcher-button.js",
+    "./components/header/webcomponent/header-launcher-grid/header-launcher-grid.js",
+    "./components/header/webcomponent/header-launcher-grid-item/header-launcher-grid-item.js",
+    "./components/header/webcomponent/header-launcher-grid-title/header-launcher-grid-title.js",
+    "./components/header/webcomponent/header-launcher-list/header-launcher-list.js",
+    "./components/header/webcomponent/header-launcher-list-item/header-launcher-list-item.js",
+    "./components/header/webcomponent/header-launcher-list-title/header-launcher-list-title.js",
+    "./components/header/webcomponent/header-title/header-title.js",
     "./components/icon/icon.js",
     "./components/link/sdds-link.js",
     "./components/message/sdds-message.js",
@@ -34,19 +55,25 @@
     "./components/popover-canvas/popover-canvas.js",
     "./components/popover-menu/popover-menu.js",
     "./components/radio-button/radio-button.js",
+    "./components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.js",
+    "./components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.js",
+    "./components/side-menu/webcomponent/side-menu-dropdown/side-menu-dropdown.js",
+    "./components/side-menu/webcomponent/side-menu-dropdown-list/side-menu-dropdown-list.js",
+    "./components/side-menu/webcomponent/side-menu-dropdown-list-item/side-menu-dropdown-list-item.js",
+    "./components/side-menu/webcomponent/side-menu-item/side-menu-item.js",
+    "./components/side-menu/webcomponent/side-menu-overlay/side-menu-overlay.js",
+    "./components/side-menu/webcomponent/side-menu-user/side-menu-user.js",
+    "./components/side-menu/webcomponent/side-menu-user-image/side-menu-user-image.js",
+    "./components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.js",
     "./components/slider/slider.js",
     "./components/spinner/spinner.js",
-    "./components/stepper/sdds-stepper.js",
     "./components/stepper/stepper-item/sdds-stepper-item.js",
     "./components/tabs/folder-tabs/folder-tabs.js",
-    "./components/tabs/folder-tabs/folder-tabs-button/sdds-folder-tabs-button.js",
-    "./components/tabs/folder-tabs/folder-tabs-link/sdds-folder-tabs-link.js",
+    "./components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js",
     "./components/tabs/inline-tabs/inline-tabs.js",
-    "./components/tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js",
-    "./components/tabs/inline-tabs/inline-tabs-link/sdds-inline-tabs-link.js",
+    "./components/tabs/inline-tabs/inline-tab/sdds-inline-tab.js",
     "./components/tabs/navigation-tabs/navigation-tabs.js",
-    "./components/tabs/navigation-tabs/navigation-tabs-button/sdds-navigation-tabs-button.js",
-    "./components/tabs/navigation-tabs/navigation-tabs-link/sdds-navigation-tabs-link.js",
+    "./components/tabs/navigation-tabs/navigation-tab/sdds-navigation-tab.js",
     "./components/textarea/textarea.js",
     "./components/textfield/textfield.js",
     "./components/toast/sdds-toast.js",

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

@@ -38,7 +38,7 @@
 .sdds-accordion-item button.sdds-accordion-header-icon-end .sdds-accordion-icon {
   transform-origin: center;
   transition: transform 0.15s ease-in-out;
-  color: var(--sdds-accordion-color);
+  color: var(--sdds-accordion-icon-color);
 }
 .sdds-accordion-item .sdds-accordion-header-icon-start .sdds-accordion-icon > sdds-icon,
 .sdds-accordion-item .sdds-accordion-header-icon-end .sdds-accordion-icon > sdds-icon,

package/dist/collection/components/accordion/accordion-item/accordion-item.js

@@ -7,15 +7,21 @@ export class AccordionItem {
     this.expanded = false;
     this.paddingReset = false;
   }
-  openAccordion() {
-    this.expanded = !this.expanded;
-    this.sddsToggle.emit(this.expanded);
+  /** Method for toggeling the expanded state of the accordion item. */
+  async toggleAccordionItem() {
+    // This is negated in order to emit the value the accordion item will have after it has expanded/redacted.
+    const event = this.sddsToggle.emit({
+      expanded: !this.expanded,
+    });
+    if (!event.defaultPrevented) {
+      this.expanded = !this.expanded;
+    }
   }
   render() {
     return (h(Host, null, h("div", { class: `sdds-accordion-item
         ${this.disabled ? 'disabled' : ''}
         ${this.expanded ? 'expanded' : ''}
-        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.openAccordion(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel
+        ` }, h("button", { type: "button", "aria-expanded": this.expanded, class: `sdds-accordion-header-icon-${this.expandIconPosition}`, onClick: () => this.toggleAccordionItem(), disabled: this.disabled }, h("div", { class: "sdds-accordion-title" }, this.header, h("slot", { name: "accordion-item-header" })), h("div", { class: "sdds-accordion-icon" }, h("sdds-icon", { name: "chevron_down", size: "16px" }))), h("div", { class: `sdds-accordion-panel
             ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}
             ` }, h("slot", null)))));
   }
@@ -134,14 +140,33 @@ export class AccordionItem {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": "Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion"
+          "text": "Fires when the accordion item is clicked but before the it is closed or opened."
         },
         "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
+          "original": "{\n    expanded: boolean;\n  }",
+          "resolved": "{ expanded: boolean; }",
           "references": {}
         }
       }];
   }
+  static get methods() {
+    return {
+      "toggleAccordionItem": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Method for toggeling the expanded state of the accordion item.",
+          "tags": []
+        }
+      }
+    };
+  }
 }
-//# sourceMappingURL=accordion-item.js.map

package/dist/collection/components/accordion/accordion.js

@@ -41,4 +41,3 @@ export class Accordion {
     };
   }
 }
-//# sourceMappingURL=accordion.js.map

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

@@ -79,22 +79,21 @@ const Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {
         This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
         Lorem ipsum doler sit amet.
       </sdds-accordion-item>
-      <sdds-accordion-item header="Second item" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+      <sdds-accordion-item ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>
+        <div slot="accordion-item-header">Second item</div>
         This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.
       </sdds-accordion-item>
     </sdds-accordion>
 
     <!-- Script tag for demo purposes -->
-  <script>
+  <script>    
     accordionItems = document.querySelectorAll('sdds-accordion-item');
     for (let i = 0; i < accordionItems.length; i++) {
-      accordionItems[i].addEventListener('sddsToggle',() => {
-        console.log(i + 1 + ". item of accordion is toggled")
+      accordionItems[i].addEventListener('sddsToggle',(event) => {
+        console.log(event)
       })
     }
   </script>`);
 };
-export const Default = Template.bind({});
-Default.args = {};
-//# sourceMappingURL=accordion.stories.js.map
+export const WebComponent = Template.bind({});

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

@@ -97,4 +97,3 @@ const WithDemoTemplate = ({ value, size, visible }) => formatHtmlPreview(`
       </sdds-badges>
     </div>`);
 export const WithDemoComponent = WithDemoTemplate.bind({});
-//# sourceMappingURL=badge.stories.js.map

package/dist/collection/components/badge/badges.js

@@ -145,4 +145,3 @@ export class SddsBadges {
       }];
   }
 }
-//# sourceMappingURL=badges.js.map

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

@@ -90,4 +90,3 @@ const Template = ({ state, hideIcon, header, subheader, link }) => formatHtmlPre
     </div>
   `);
 export const Native = Template.bind({});
-//# sourceMappingURL=banner.stories.js.map

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

@@ -11,7 +11,7 @@
   --sdds-link: var(--sdds-blue-300);
   --sdds-link-hover: var(--sdds-blue-400);
   --sdds-link-focus: var(--sdds-blue-400);
-  --sdds-link-visited: var(--sdds-blue-400);
+  --sdds-link-visited: var(--sdds-blue-100);
   --sdds-link-disabled: var(--sdds-grey-800);
 }
 
@@ -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);
 }

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

@@ -4,51 +4,35 @@ export class SddsBanner {
     this.handleClose = () => {
       const sddsCloseEvent = this.sddsClose.emit({
         bannerId: this.bannerId,
-        hidden: this.hidden,
       });
       if (!sddsCloseEvent.defaultPrevented) {
         this.hidden = true;
       }
     };
+    this.handleShow = () => {
+      const sddsCloseEvent = this.sddsShow.emit({
+        bannerId: this.bannerId,
+      });
+      if (!sddsCloseEvent.defaultPrevented) {
+        this.hidden = false;
+      }
+    };
     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() {
-    const sddsCloseEvent = this.sddsClose.emit({
-      bannerId: this.bannerId,
-      hidden: this.hidden,
-    });
-    if (!sddsCloseEvent.defaultPrevented) {
-      this.hidden = true;
-    }
-    return {
-      bannerId: this.bannerId,
-      hidden: true,
-    };
+    this.handleClose();
   }
   /** Shows the banner */
   async showBanner() {
-    const sddsCloseEvent = this.sddsClose.emit({
-      bannerId: this.bannerId,
-      hidden: this.hidden,
-    });
-    if (!sddsCloseEvent.defaultPrevented) {
-      this.hidden = false;
-    }
-    return {
-      bannerId: this.bannerId,
-      hidden: false,
-    };
+    this.handleShow();
   }
   connectedCallback() {
     if (this.type === 'error') {
@@ -57,9 +41,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 +98,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 +172,12 @@ export class SddsBanner {
       }
     };
   }
+  static get states() {
+    return {
+      "hasSubheader": {},
+      "hasLink": {}
+    };
+  }
   static get events() {
     return [{
         "method": "sddsClose",
@@ -284,8 +190,23 @@ export class SddsBanner {
           "text": "Sends unique banner identifier when the close button is pressed."
         },
         "complexType": {
-          "original": "{\n    bannerId: string;\n    hidden: boolean;\n  }",
-          "resolved": "{ bannerId: string; hidden: boolean; }",
+          "original": "{\n    bannerId: string;\n  }",
+          "resolved": "{ bannerId: string; }",
+          "references": {}
+        }
+      }, {
+        "method": "sddsShow",
+        "name": "sddsShow",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique banner identifier when the close button is pressed."
+        },
+        "complexType": {
+          "original": "{\n    bannerId: string;\n  }",
+          "resolved": "{ bannerId: string; }",
           "references": {}
         }
       }];
@@ -294,14 +215,14 @@ export class SddsBanner {
     return {
       "hideBanner": {
         "complexType": {
-          "signature": "() => Promise<{ bannerId: string; hidden: boolean; }>",
+          "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<{ bannerId: string; hidden: boolean; }>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "Hides the banner.",
@@ -310,14 +231,14 @@ export class SddsBanner {
       },
       "showBanner": {
         "complexType": {
-          "signature": "() => Promise<{ bannerId: string; hidden: boolean; }>",
+          "signature": "() => Promise<void>",
           "parameters": [],
           "references": {
             "Promise": {
               "location": "global"
             }
           },
-          "return": "Promise<{ bannerId: string; hidden: boolean; }>"
+          "return": "Promise<void>"
         },
         "docs": {
           "text": "Shows the banner",
@@ -328,4 +249,3 @@ export class SddsBanner {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-banner.js.map

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

@@ -46,31 +46,13 @@ export default {
         type: 'text',
       },
     },
-    linkText: {
+    link: {
       name: 'Link',
-      description: 'Sets text to be displayed in the link section.',
+      description: 'Sets a link to be displayed in the link section.',
       control: {
         type: 'text',
       },
     },
-    href: {
-      name: 'Link href',
-      description: 'Sets the href for the link.',
-      control: {
-        type: 'text',
-      },
-    },
-    linkTarget: {
-      name: 'Link target',
-      description: 'Sets 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.',
@@ -94,34 +76,31 @@ export default {
   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" ><a href="/">Link example</a></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. -->
       <script>
         document.addEventListener('sddsClose', (event) => {
-          console.log('Closed banner with BannerID: ', event.detail.bannerId)
+          console.log(event)
+        })
+        document.addEventListener('sddsShow', (event) => {
+          console.log(event)
         })
       </script>
     `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-banner.stories.js.map

package/dist/collection/components/block/block-native.stories.js

@@ -46,4 +46,3 @@ const Template = ({ modeVariant }) => formatHtmlPreview(`
       </div>
     `);
 export const Native = Template.bind({});
-//# sourceMappingURL=block-native.stories.js.map

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

@@ -53,4 +53,3 @@ export class SddsBlock {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-block.js.map

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

@@ -46,4 +46,3 @@ const Template = ({ modeVariant }) => formatHtmlPreview(`
       </sdds-block>
     `);
 export const WebComponent = Template.bind({});
-//# sourceMappingURL=sdds-block.stories.js.map

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

@@ -24,4 +24,3 @@ const Template = () => `
     `;
 export const Native = Template.bind({});
 Native.args = {};
-//# sourceMappingURL=breadcrumb.stories.js.map

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

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+[role=listitem] ::slotted(*) {
+  color: var(--sdds-breadcrumb-color);
+  text-decoration: none;
+}
+[role=listitem]:hover ::slotted(*) {
+  color: var(--sdds-breadcrumb-color-hover);
+  text-decoration: underline;
+}
+[role=listitem]:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
+}
+[role=listitem].disabled ::slotted(*), [role=listitem].current ::slotted(*),
+[role=listitem] [aria-current=page] ::slotted(*) {
+  pointer-events: none;
+  cursor: default;
+  color: var(--sdds-breadcrumb-color-disabled);
+}
+[role=listitem].disabled:hover ::slotted(*), [role=listitem].current:hover ::slotted(*),
+[role=listitem] [aria-current=page]:hover ::slotted(*) {
+  text-decoration: none;
+  cursor: not-allowed;
+}
+[role=listitem] ::slotted(*)::after {
+  content: "›";
+  color: var(--sdds-breadcrumb-separator-color);
+  margin-right: 4px;
+  margin-left: 4px;
+  display: inline-block;
+  width: 4px;
+  height: 8px;
+}
+
+:host(.last) ::slotted(*)::after {
+  display: none;
+}