@scania/tegel 0.0.52 → 0.0.61

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,34 @@ 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-item/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-item/accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,aAAa;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAWrC,aAAa;IACX,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACtC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC;QAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,aAAa,EAAE,EACnC,QAAQ,EAAE,IAAI,CAAC,QAAQ;UAEvB,WAAK,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,MAAM,CAAO;UACrD,WAAK,KAAK,EAAC,qBAAqB;YAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC;QACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;aAChE;UAED,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion-item',\n  styleUrl: 'accordion-item.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  /** The header gives users the context about the additional information available inside the panel */\n  @Prop() header: string = '';\n\n  /** Changes where the expand icon is placed. */\n  @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n  /** Disabled option in `boolean`. */\n  @Prop() disabled: boolean = false;\n\n  /** Set to true to expand panel open */\n  @Prop() expanded: boolean = false;\n\n  /** When true 16px on right padding instead of 64px */\n  @Prop() paddingReset: boolean = false;\n\n  /** Fires after the accordion item is closed or opened, emitting the value (as boolean) of the current state of the accordion */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<boolean>;\n\n  openAccordion() {\n    this.expanded = !this.expanded;\n    this.sddsToggle.emit(this.expanded);\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`sdds-accordion-item\n        ${this.disabled ? 'disabled' : ''}\n        ${this.expanded ? 'expanded' : ''}\n        `}\n        >\n          <button\n            type=\"button\"\n            aria-expanded={this.expanded}\n            class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n            onClick={() => this.openAccordion()}\n            disabled={this.disabled}\n          >\n            <div class=\"sdds-accordion-title\">{this.header}</div>\n            <div class=\"sdds-accordion-icon\">\n              <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n            </div>\n          </button>\n          <div\n            class={`sdds-accordion-panel\n            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n            `}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"accordion-item.js","sourceRoot":"","sources":["../../../../src/components/accordion/accordion-item/accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOtF,MAAM,OAAO,aAAa;;kBAEC,EAAE;8BAGmB,KAAK;oBAGvB,KAAK;oBAGL,KAAK;wBAGD,KAAK;;EAErC,qEAAqE;EAErE,KAAK,CAAC,mBAAmB;IACvB,0GAA0G;IAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;MACjC,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;KACzB,CAAC,CAAC;IACH,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE;MAC3B,IAAI,CAAC,QAAQ,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC;KAChC;EACH,CAAC;EAaD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WACE,KAAK,EAAE;UACP,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;UAC/B,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;SAChC;QAEC,cACE,IAAI,EAAC,QAAQ,mBACE,IAAI,CAAC,QAAQ,EAC5B,KAAK,EAAE,8BAA8B,IAAI,CAAC,kBAAkB,EAAE,EAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,EAAE,EACzC,QAAQ,EAAE,IAAI,CAAC,QAAQ;UAEvB,WAAK,KAAK,EAAC,sBAAsB;YAC9B,IAAI,CAAC,MAAM;YACZ,YAAM,IAAI,EAAC,uBAAuB,GAAQ,CACtC;UACN,WAAK,KAAK,EAAC,qBAAqB;YAC9B,iBAAW,IAAI,EAAC,cAAc,EAAC,IAAI,EAAC,MAAM,GAAa,CACnD,CACC;QACT,WACE,KAAK,EAAE;cACL,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,EAAE;aAChE;UAED,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion-item',\n  styleUrl: 'accordion-item.scss',\n  shadow: true,\n})\nexport class AccordionItem {\n  /** The header gives users the context about the additional information available inside the panel */\n  @Prop() header: string = '';\n\n  /** Changes where the expand icon is placed. */\n  @Prop() expandIconPosition: 'start' | 'end' = 'end';\n\n  /** Disabled option in `boolean`. */\n  @Prop() disabled: boolean = false;\n\n  /** Set to true to expand panel open */\n  @Prop() expanded: boolean = false;\n\n  /** When true 16px on right padding instead of 64px */\n  @Prop() paddingReset: boolean = false;\n\n  /** Method for toggeling the expanded state of the accordion item. */\n  @Method()\n  async toggleAccordionItem() {\n    // This is negated in order to emit the value the accordion item will have after it has expanded/redacted.\n    const event = this.sddsToggle.emit({\n      expanded: !this.expanded,\n    });\n    if (!event.defaultPrevented) {\n      this.expanded = !this.expanded;\n    }\n  }\n\n  /** Fires when the accordion item is clicked but before the it is closed or opened. */\n  @Event({\n    eventName: 'sddsToggle',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsToggle: EventEmitter<{\n    expanded: boolean;\n  }>;\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={`sdds-accordion-item\n        ${this.disabled ? 'disabled' : ''}\n        ${this.expanded ? 'expanded' : ''}\n        `}\n        >\n          <button\n            type=\"button\"\n            aria-expanded={this.expanded}\n            class={`sdds-accordion-header-icon-${this.expandIconPosition}`}\n            onClick={() => this.toggleAccordionItem()}\n            disabled={this.disabled}\n          >\n            <div class=\"sdds-accordion-title\">\n              {this.header}\n              <slot name=\"accordion-item-header\"></slot>\n            </div>\n            <div class=\"sdds-accordion-icon\">\n              <sdds-icon name=\"chevron_down\" size=\"16px\"></sdds-icon>\n            </div>\n          </button>\n          <div\n            class={`sdds-accordion-panel\n            ${this.paddingReset ? 'sdds-accordion-panel--padding-reset ' : ''}\n            `}\n          >\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -79,22 +79,22 @@ 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 = {};
+export const WebComponent = Template.bind({});
 //# sourceMappingURL=accordion.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EAAE,0GAA0G;MACvH,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;MACvC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,oBAAoB;MAC1B,WAAW,EAAE,wDAAwD;MACrE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,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,2GAA2G;OACjH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,2GAA2G;OACjH;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;EACzE,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;EACjF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAChD,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EAE7D,OAAO,iBAAiB,CAAC;sBAErB,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;iDAC6C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;kDAI5C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;;;;;;;;;;;YAcnF,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './accordion-item/readme.md';\n\nexport default {\n  title: 'Components/Accordion',\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description: 'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    iconPosition: {\n      name: 'Expand icon position',\n      description: 'Sets the horizontal position of the expand icon.',\n      control: {\n        type: 'radio',\n      },\n      options: { End: 'end', Start: 'start' },\n      table: {\n        defaultValue: { summary: 'end' },\n      },\n    },\n    paddingReset: {\n      name: 'Less padding right',\n      description: 'Sets less padding on the right inside accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disable all items',\n      description: 'Disables all accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  parameters: {\n    notes: { 'Accordion': readme, 'Accordion item': readmeItem },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    iconPosition: 'end',\n    paddingReset: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {\n  const affixAttr = iconPosition === 'start' ? 'expand-icon-position=\"start\"' : '';\n  const disabledAttr = disabled ? 'disabled' : '';\n  const paddingResetAttr = paddingReset ? 'padding-reset' : '';\n\n  return formatHtmlPreview(`\n    <sdds-accordion ${\n      modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n    }>\n      <sdds-accordion-item header=\"First item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum doler sit amet.\n      </sdds-accordion-item>\n      <sdds-accordion-item header=\"Second item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.\n      </sdds-accordion-item>\n    </sdds-accordion>\n\n    <!-- Script tag for demo purposes -->\n  <script>\n    accordionItems = document.querySelectorAll('sdds-accordion-item');\n    for (let i = 0; i < accordionItems.length; i++) {\n      accordionItems[i].addEventListener('sddsToggle',() => {\n        console.log(i + 1 + \". item of accordion is toggled\")\n      })\n    }\n  </script>`);\n};\n\nexport const Default = Template.bind({});\nDefault.args = {};\n"]}
+{"version":3,"file":"accordion.stories.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AAEpD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,QAAQ,EAAE;IACR,WAAW,EAAE;MACX,IAAI,EAAE,cAAc;MACpB,WAAW,EACT,0GAA0G;MAC5G,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,CAAC,qBAAqB,EAAE,SAAS,EAAE,WAAW,CAAC;MACxD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,qBAAqB,EAAE;OACjD;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,sBAAsB;MAC5B,WAAW,EAAE,kDAAkD;MAC/D,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE;MACvC,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,YAAY,EAAE;MACZ,IAAI,EAAE,oBAAoB;MAC1B,WAAW,EAAE,wDAAwD;MACrE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,mBAAmB;MACzB,WAAW,EAAE,+BAA+B;MAC5C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,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,2GAA2G;OACjH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,2GAA2G;OACjH;KACF;GACF;EACD,IAAI,EAAE;IACJ,WAAW,EAAE,qBAAqB;IAClC,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,EAAE,EAAE;EACzE,MAAM,SAAS,GAAG,YAAY,KAAK,OAAO,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CAAC;EACjF,MAAM,YAAY,GAAG,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;EAChD,MAAM,gBAAgB,GAAG,YAAY,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC;EAE7D,OAAO,iBAAiB,CAAC;sBAErB,WAAW,KAAK,qBAAqB,CAAC,CAAC,CAAC,iBAAiB,WAAW,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAC,EAC1F;iDAC6C,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;6BAIjE,SAAS,IAAI,YAAY,IAAI,gBAAgB;;;;;;;;;;;;;;;YAe9D,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\nimport readmeItem from './accordion-item/readme.md';\n\nexport default {\n  title: 'Components/Accordion',\n  argTypes: {\n    modeVariant: {\n      name: 'Mode variant',\n      description:\n        'Mode variant adjusts component colors to have better visibility depending on global mode and background.',\n      control: {\n        type: 'radio',\n      },\n      options: ['Inherit from parent', 'Primary', 'Secondary'],\n      table: {\n        defaultValue: { summary: 'Inherit from parent' },\n      },\n    },\n    iconPosition: {\n      name: 'Expand icon position',\n      description: 'Sets the horizontal position of the expand icon.',\n      control: {\n        type: 'radio',\n      },\n      options: { End: 'end', Start: 'start' },\n      table: {\n        defaultValue: { summary: 'end' },\n      },\n    },\n    paddingReset: {\n      name: 'Less padding right',\n      description: 'Sets less padding on the right inside accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n    disabled: {\n      name: 'Disable all items',\n      description: 'Disables all accordion items.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  parameters: {\n    notes: { 'Accordion': readme, 'Accordion item': readmeItem },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=2762%3A84&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  args: {\n    modeVariant: 'Inherit from parent',\n    iconPosition: 'end',\n    paddingReset: false,\n    disabled: false,\n  },\n};\n\nconst Template = ({ disabled, iconPosition, paddingReset, modeVariant }) => {\n  const affixAttr = iconPosition === 'start' ? 'expand-icon-position=\"start\"' : '';\n  const disabledAttr = disabled ? 'disabled' : '';\n  const paddingResetAttr = paddingReset ? 'padding-reset' : '';\n\n  return formatHtmlPreview(`\n    <sdds-accordion ${\n      modeVariant !== 'Inherit from parent' ? `mode-variant=\"${modeVariant.toLowerCase()}\"` : ''\n    }>\n      <sdds-accordion-item header=\"First item\" ${affixAttr} ${disabledAttr} ${paddingResetAttr}>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum doler sit amet.\n      </sdds-accordion-item>\n      <sdds-accordion-item ${affixAttr} ${disabledAttr} ${paddingResetAttr} expanded>\n        <div slot=\"accordion-item-header\">Second item</div>\n        This is the panel, which contains associated information with the header. Usually it contains text, set in the same size as the header.\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis laoreet vestibulum fermentum.\n      </sdds-accordion-item>\n    </sdds-accordion>\n\n    <!-- Script tag for demo purposes -->\n  <script>    \n    accordionItems = document.querySelectorAll('sdds-accordion-item');\n    for (let i = 0; i < accordionItems.length; i++) {\n      accordionItems[i].addEventListener('sddsToggle',(event) => {\n        console.log(event)\n      })\n    }\n  </script>`);\n};\n\nexport const WebComponent = Template.bind({});\n"]}

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);
 }
 

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

@@ -4,12 +4,19 @@ 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.type = 'none';
@@ -21,31 +28,11 @@ export class SddsBanner {
   }
   /** 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') {
@@ -203,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": {}
         }
       }];
@@ -213,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.",
@@ -229,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",

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, 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"]}
+{"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  }>;\n\n  /** Sends unique banner identifier when the close button is pressed. */\n  @Event({\n    eventName: 'sddsShow',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsShow: EventEmitter<{\n    bannerId: string;\n  }>;\n\n  /** Hides the banner. */\n  @Method()\n  async hideBanner() {\n    this.handleClose();\n  }\n\n  /** Shows the banner */\n  @Method()\n  async showBanner() {\n    this.handleShow();\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    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = true;\n    }\n  };\n\n  handleShow = () => {\n    const sddsCloseEvent = this.sddsShow.emit({\n      bannerId: this.bannerId,\n    });\n    if (!sddsCloseEvent.defaultPrevented) {\n      this.hidden = false;\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

@@ -77,7 +77,7 @@ export default {
     type: 'Default',
     header: 'This is a header text area',
     subheader: '<div slot="banner-subheader">Short subheader</div>',
-    link: '<sdds-link slot="banner-link" href="/">Link example</sdds-link>',
+    link: '<sdds-link slot="banner-link" ><a href="/">Link example</a></sdds-link>',
     icon: 'truck',
     persistent: false,
   },
@@ -96,7 +96,10 @@ const Template = ({ type, icon, header, subheader, persistent, link }) => format
       <!-- 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>
     `);

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 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"]}
+{"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\" ><a href=\"/\">Link example</a></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(event)\n        })\n        document.addEventListener('sddsShow', (event) => {\n          console.log(event)\n        })\n      </script>\n    `);\nexport const WebComponent = Template.bind({});\n"]}

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

@@ -1,32 +1,26 @@
 @charset "UTF-8";
-[role=listitem] {
-  display: flex;
-  align-items: center;
-  color: var(--sdds-breadcrumb-color);
-}
-[role=listitem] a {
+[role=listitem] ::slotted(*) {
   color: var(--sdds-breadcrumb-color);
   text-decoration: none;
 }
-[role=listitem]:hover {
-  cursor: pointer;
-}
-[role=listitem]:hover a {
+[role=listitem]:hover ::slotted(*) {
   color: var(--sdds-breadcrumb-color-hover);
   text-decoration: underline;
 }
-[role=listitem].disabled {
-  pointer-events: none;
+[role=listitem]:focus-visible {
+  outline: 2px solid var(--sdds-blue-400);
+  outline-offset: -2px;
 }
-[role=listitem].disabled a, [role=listitem].current a,
-[role=listitem] [aria-current=page] a {
+[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 a, [role=listitem].current:hover a,
-[role=listitem] [aria-current=page]:hover a {
-  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: "›";

package/dist/collection/components/{tabs/inline-tabs/inline-tabs-button/sdds-inline-tabs-button.js → breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js}

@@ -1,28 +1,28 @@
-import { Host, h } from '@stencil/core';
-export class SddsInlineTabsButton {
+import { h } from '@stencil/core';
+export class SddsBreadcrumbItem {
   constructor() {
+    this.current = false;
     this.disabled = false;
-    this.selected = false;
   }
   render() {
-    return (h(Host, { role: "listitem" }, h("button", { class: `${this.selected ? 'selected' : ''}
-        ${this.disabled ? 'disabled' : ''}`, disabled: this.disabled }, h("div", { class: "label" }, h("slot", { name: "label" })))));
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
   }
-  static get is() { return "sdds-inline-tabs-button"; }
+  static get is() { return "sdds-breadcrumb-item"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["sdds-inline-tabs-button.scss"]
+      "$": ["sdds-breadcrumb-item.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["sdds-inline-tabs-button.css"]
+      "$": ["sdds-breadcrumb-item.css"]
     };
   }
   static get properties() {
     return {
-      "disabled": {
+      "current": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -34,13 +34,13 @@ export class SddsInlineTabsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Disables the tab."
+          "text": "Boolean for the current link"
         },
-        "attribute": "disabled",
+        "attribute": "current",
         "reflect": false,
         "defaultValue": "false"
       },
-      "selected": {
+      "disabled": {
         "type": "boolean",
         "mutable": false,
         "complexType": {
@@ -52,13 +52,13 @@ export class SddsInlineTabsButton {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Marks the tab as the selected one."
+          "text": "Toggle the disabled state for the breadcrumb"
         },
-        "attribute": "selected",
+        "attribute": "disabled",
         "reflect": false,
         "defaultValue": "false"
       }
     };
   }
 }
-//# sourceMappingURL=sdds-inline-tabs-button.js.map
+//# sourceMappingURL=sdds-breadcrumb-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sdds-breadcrumb-item.js","sourceRoot":"","sources":["../../../../src/components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,kBAAkB;;mBAEF,KAAK;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;UACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;MAEnC,eAAQ,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-breadcrumb-item',\n  styleUrl: 'sdds-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class SddsBreadcrumbItem {\n  /** Boolean for the current link */\n  @Prop() current: boolean = false;\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        <slot />\n      </div>\n    );\n  }\n}\n"]}

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

@@ -1,10 +1,10 @@
-import itemReadme from './sdds-breadcrumb-link/readme.md';
+import itemReadme from './sdds-breadcrumb-item/readme.md';
 import readme from './readme.md';
 import { formatHtmlPreview } from '../../utils/utils';
 export default {
   title: 'Components/Breadcrumb',
   parameters: {
-    notes: { 'Breadcumb': readme, 'Breadcumb Link': itemReadme },
+    notes: { 'Breadcumb': readme, 'Breadcumb Item': itemReadme },
     design: [
       {
         name: 'Figma',
@@ -21,15 +21,15 @@ export default {
 };
 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-item>
+          <a href="#">Page 1</a>
+        </sdds-breadcrumb-item>
+        <sdds-breadcrumb-item>
+          <a href="#">Page 2</a>
+        </sdds-breadcrumb-item>
+        <sdds-breadcrumb-item current>
+          <a href="#">Page 3</a>
+        </sdds-breadcrumb-item>
       </sdds-breadcrumb>
       `);
 export const WebComponent = Template.bind({});