@scania/tegel 0.0.4 → 0.0.6

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",
@@ -11,6 +13,7 @@
     "./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",
@@ -20,12 +23,31 @@
     "./components/data-table/table-header-cell/table-header-cell.js",
     "./components/data-table/table-toolbar/table-toolbar.js",
     "./components/datetime/datetime.js",
+    "./components/divider/divider.js",
     "./components/dropdown/dropdown.js",
     "./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",
@@ -33,14 +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/inline-tabs-default/inline-tabs.js",
-    "./components/tabs/inline-tabs-default/inline-tab/inline-tab.js",
-    "./components/tabs/inline-tabs-fullbleed/inline-tabs-fullbleed.js",
+    "./components/tabs/folder-tabs/folder-tabs.js",
+    "./components/tabs/folder-tabs/folder-tab/sdds-folder-tab.js",
+    "./components/tabs/inline-tabs/inline-tabs.js",
+    "./components/tabs/inline-tabs/inline-tab/sdds-inline-tab.js",
     "./components/tabs/navigation-tabs/navigation-tabs.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.js

@@ -1,11 +1,10 @@
 import { h, Host } from '@stencil/core';
 export class Accordion {
   constructor() {
-    this.divider = true;
     this.modeVariant = null;
   }
   render() {
-    return (h(Host, { class: `sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
+    return (h(Host, { class: `sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("slot", null)));
   }
   static get is() { return "sdds-accordion"; }
   static get encapsulation() { return "shadow"; }
@@ -21,24 +20,6 @@ export class Accordion {
   }
   static get properties() {
     return {
-      "divider": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Enable or disable divider lines between items"
-        },
-        "attribute": "divider",
-        "reflect": false,
-        "defaultValue": "true"
-      },
       "modeVariant": {
         "type": "string",
         "mutable": false,

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

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;mBAEO,IAAI;uBAGgB,IAAI;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAElJ,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Enable or disable divider lines between items */\n  @Prop() divider: boolean = true;\n\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.divider ? 'sdds-accordion-divider' : ''} ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../../src/components/accordion/accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;;uBAE2B,IAAI;;EAEnD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,kBAAkB,IAAI,CAAC,WAAW,KAAK,IAAI,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,WAAW,EAAE,CAAA,CAAC,CAAC,EAAE,EAAE;MAElG,eAAa,CACR,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-accordion',\n  styleUrl: 'accordion.scss',\n  shadow: true,\n})\nexport class Accordion {\n  /** Set the variant of the the accordion. */\n  @Prop() modeVariant: 'primary' | 'secondary' = null;\n\n  render() {\n    return (\n      <Host\n        class={`sdds-accordion ${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}`: ''}`}\n      >\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -33,7 +33,7 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
     disabled: {
@@ -43,7 +43,7 @@ export default {
         type: 'boolean',
       },
       table: {
-        defaultValue: { summary: 'false' },
+        defaultValue: { summary: false },
       },
     },
   },
@@ -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,OAAO,EAAE;OACnC;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,OAAO,EAAE;OACnC;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/badge/badge.stories.js

@@ -40,9 +40,6 @@ export default {
         type: 'number',
       },
       if: { arg: 'size', neq: 'sm' },
-      table: {
-        defaultValue: { summary: null },
-      },
     },
     hidden: {
       name: 'Hidden',

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

@@ -1 +1 @@
-{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE;QACP,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;OACZ;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE;MAC9B,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,KAAK;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CAAC;;QAEZ,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;QAC/B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAChB,IAAI;mBACC,CAAC,CAAC;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CACpD,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;UA0BM,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;qBACpB,OAAO;gBACZ,IAAI;;WAET,CACR,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Badge',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: {\n        Large: 'lg',\n        Small: 'sm',\n      },\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    value: {\n      name: 'Value',\n      description: 'Sets a value to show on the badge.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'size', neq: 'sm' },\n      table: {\n        defaultValue: { summary: null },\n      },\n    },\n    hidden: {\n      name: 'Hidden',\n      description: 'Toggles visibility of the badge.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'lg',\n    value: 1,\n    hidden: false,\n  },\n};\n\nconst Template = ({ value, size, hidden }) =>\n  formatHtmlPreview(`\n    <sdds-badges\n      ${value ? `value=\"${value}\"` : ''}\n      ${hidden ? 'hidden' : ''}\n      size=\"${size}\">\n    </sdds-badges>`);\n\nexport const Default = Template.bind({});\n\nconst WithDemoTemplate = ({ value, size, visible }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Note: Demo classes used here are just for demo purposes in Storybook */\n    .badges-demo-box {\n      margin:5px;\n      height: 32px;\n      width: 32px;\n      position: relative;\n      background-color: #C4C4C4;\n    }\n\n    .badges-demo-box sdds-badges[size=\"lg\"]{\n      position: absolute;\n      left: 16px;\n      top: -5px;\n    }\n\n    .badges-demo-box sdds-badges[size=\"sm\"]{\n      position: absolute;\n      left: 26px;\n      top: -2px;\n    }\n    </style>\n\n    <div class=\"badges-demo-box\">\n      <sdds-badges\n        ${value ? `value=\"${value}\"` : ''}\n        is-visible=${visible}\n        size=\"${size}\">\n      </sdds-badges>\n    </div>`,\n  );\n\nexport const WithDemoComponent = WithDemoTemplate.bind({});\n"]}
+{"version":3,"file":"badge.stories.js","sourceRoot":"","sources":["../../../src/components/badge/badge.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AACtD,OAAO,MAAM,MAAM,aAAa,CAAC;AAEjC,eAAe;EACb,KAAK,EAAE,kBAAkB;EACzB,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,KAAK,EAAE,MAAM;IACb,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,+GAA+G;OACrH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,+GAA+G;OACrH;KACF;GACF;EACD,QAAQ,EAAE;IACR,IAAI,EAAE;MACJ,IAAI,EAAE,MAAM;MACZ,WAAW,EAAE,iCAAiC;MAC9C,OAAO,EAAE;QACP,IAAI,EAAE,OAAO;OACd;MACD,OAAO,EAAE;QACP,KAAK,EAAE,IAAI;QACX,KAAK,EAAE,IAAI;OACZ;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;OAChC;KACF;IACD,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,oCAAoC;MACjD,OAAO,EAAE;QACP,IAAI,EAAE,QAAQ;OACf;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE;KAC/B;IACD,MAAM,EAAE;MACN,IAAI,EAAE,QAAQ;MACd,WAAW,EAAE,kCAAkC;MAC/C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;OACjC;KACF;GACF;EACD,IAAI,EAAE;IACJ,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,KAAK;GACd;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAC3C,iBAAiB,CAAC;;QAEZ,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;QAC/B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;cAChB,IAAI;mBACC,CAAC,CAAC;AAErB,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEzC,MAAM,gBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,EAAE,CACpD,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;UA0BM,KAAK,CAAC,CAAC,CAAC,UAAU,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;qBACpB,OAAO;gBACZ,IAAI;;WAET,CACR,CAAC;AAEJ,MAAM,CAAC,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\nimport readme from './readme.md';\n\nexport default {\n  title: 'Components/Badge',\n  parameters: {\n    layout: 'centered',\n    notes: readme,\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=7477%3A297479&t=rVXuTOgTmXPauyHd-1',\n      },\n    ],\n  },\n  argTypes: {\n    size: {\n      name: 'Size',\n      description: 'Sets the size of the component.',\n      control: {\n        type: 'radio',\n      },\n      options: {\n        Large: 'lg',\n        Small: 'sm',\n      },\n      table: {\n        defaultValue: { summary: 'lg' },\n      },\n    },\n    value: {\n      name: 'Value',\n      description: 'Sets a value to show on the badge.',\n      control: {\n        type: 'number',\n      },\n      if: { arg: 'size', neq: 'sm' },\n    },\n    hidden: {\n      name: 'Hidden',\n      description: 'Toggles visibility of the badge.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: false },\n      },\n    },\n  },\n  args: {\n    size: 'lg',\n    value: 1,\n    hidden: false,\n  },\n};\n\nconst Template = ({ value, size, hidden }) =>\n  formatHtmlPreview(`\n    <sdds-badges\n      ${value ? `value=\"${value}\"` : ''}\n      ${hidden ? 'hidden' : ''}\n      size=\"${size}\">\n    </sdds-badges>`);\n\nexport const Default = Template.bind({});\n\nconst WithDemoTemplate = ({ value, size, visible }) =>\n  formatHtmlPreview(\n    `\n    <style>\n    /* Note: Demo classes used here are just for demo purposes in Storybook */\n    .badges-demo-box {\n      margin:5px;\n      height: 32px;\n      width: 32px;\n      position: relative;\n      background-color: #C4C4C4;\n    }\n\n    .badges-demo-box sdds-badges[size=\"lg\"]{\n      position: absolute;\n      left: 16px;\n      top: -5px;\n    }\n\n    .badges-demo-box sdds-badges[size=\"sm\"]{\n      position: absolute;\n      left: 26px;\n      top: -2px;\n    }\n    </style>\n\n    <div class=\"badges-demo-box\">\n      <sdds-badges\n        ${value ? `value=\"${value}\"` : ''}\n        is-visible=${visible}\n        size=\"${size}\">\n      </sdds-badges>\n    </div>`,\n  );\n\nexport const WithDemoComponent = WithDemoTemplate.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);
 }
 
@@ -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

@@ -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",