@scania/tegel 0.0.52 → 0.0.71-beta

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/button/button-component.js",
+    "./components/breadcrumb/sdds-breadcrumb-item/sdds-breadcrumb-item.js",
+    "./components/button/button.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",
@@ -24,9 +27,29 @@
     "./components/dropdown/dropdown.js",
     "./components/dropdown/dropdown-filter/dropdown-filter.js",
     "./components/dropdown/dropdown-option/dropdown-option.js",
+    "./components/dropdown-v2/dropdown-v2.js",
+    "./components/dropdown-v2/dropdown-option-v2/dropdown-option-v2.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 +57,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",
@@ -55,7 +84,7 @@
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "3.0.1",
+    "version": "3.2.2",
     "typescriptVersion": "4.9.5"
   },
   "collections": [],

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

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

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

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

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

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

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

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

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

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

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",
@@ -247,4 +249,3 @@ export class SddsBanner {
   }
   static get elementRef() { return "host"; }
 }
-//# sourceMappingURL=sdds-banner.js.map

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

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

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

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

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

@@ -0,0 +1,63 @@
+import { h } from '@stencil/core';
+export class SddsBreadcrumbItem {
+  constructor() {
+    this.current = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { role: "listitem", class: `${this.current ? 'current' : ''} 
+        ${this.disabled ? 'disabled' : ''}` }, h("slot", null)));
+  }
+  static get is() { return "sdds-breadcrumb-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-item.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sdds-breadcrumb-item.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "current": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Boolean for the current link"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Toggle the disabled state for the breadcrumb"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

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

@@ -20,4 +20,3 @@ export class SddsBreadcrumb {
   }
   static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=sdds-breadcrumb.js.map

package/dist/collection/components/button/button.css

@@ -243,7 +243,7 @@
   box-sizing: border-box;
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  display: flex;
+  display: inline-flex;
   align-items: center;
   border-radius: 4px;
   border: none;
@@ -582,7 +582,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button) ::slotted([slot=icon]) {
@@ -610,7 +610,7 @@ i.sdds-btn-icon[slot=icon] {
 }
 
 :host(sdds-button:not([only-icon])) {
-  display: flex;
+  display: inline-flex;
   align-items: center;
 }
 :host(sdds-button:not([only-icon])) .sdds-btn-sm ::slotted([slot=icon]) {

package/dist/collection/components/button/button.js

@@ -0,0 +1,155 @@
+import { h, Host } from '@stencil/core';
+export class SddsButton {
+  constructor() {
+    this.text = '';
+    this.type = 'primary';
+    this.size = 'lg';
+    this.disabled = false;
+    this.fullbleed = false;
+    this.modeVariant = null;
+    this.onlyIcon = false;
+  }
+  componentWillLoad() {
+    if (this.text === '') {
+      this.onlyIcon = true;
+      this.host.setAttribute('only-icon', '');
+    }
+  }
+  render() {
+    return (h(Host, { class: `${this.modeVariant !== null ? `sdds-mode-variant-${this.modeVariant}` : ''}` }, h("button", { class: `sdds-btn sdds-btn-${this.type} 
+        ${`sdds-btn-${this.size}`}
+        ${this.disabled ? 'disabled' : ''}
+        ${this.fullbleed ? 'sdds-btn-fullbleed' : ''}
+        ${this.onlyIcon ? 'sdds-btn-only-icon' : ''}` }, h("span", { class: "sdds-btn-text" }, this.text), h("slot", { name: "icon" }))));
+  }
+  static get is() { return "sdds-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["button.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "text": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Text inside a button"
+        },
+        "attribute": "text",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary' | 'ghost' | 'danger'",
+          "resolved": "\"danger\" | \"ghost\" | \"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Type of button"
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'primary'"
+      },
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'xs' | 'sm' | 'md' | 'lg'",
+          "resolved": "\"lg\" | \"md\" | \"sm\" | \"xs\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "'lg'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Control for disabled state of component"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fullbleed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When enabled, makes button take 100% width"
+        },
+        "attribute": "fullbleed",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "modeVariant": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'primary' | 'secondary'",
+          "resolved": "\"primary\" | \"secondary\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set the mode variant of the the button."
+        },
+        "attribute": "mode-variant",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "onlyIcon": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+}

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

@@ -63,6 +63,7 @@
 .card slot[name=card-bottom]::slotted(*) {
   display: flex;
   padding: 16px;
+  color: var(--sdds-card-icon-color);
 }
 
 button {

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

@@ -259,7 +259,7 @@ export class SddsCard {
         "method": "sddsClick",
         "name": "sddsClick",
         "bubbles": true,
-        "cancelable": true,
+        "cancelable": false,
         "composed": true,
         "docs": {
           "tags": [],
@@ -274,4 +274,3 @@ export class SddsCard {
   }
   static get elementRef() { return "hostElement"; }
 }
-//# sourceMappingURL=sdds-card.js.map

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

@@ -20,6 +20,8 @@
   height: 24px;
   position: relative;
   cursor: pointer;
+  flex-shrink: 0;
+  align-self: flex-start;
 }
 .sdds-checkbox-webcomponent input[type=checkbox] + label {
   color: var(--sdds-checkbox-color);
@@ -27,6 +29,8 @@
   padding-top: var(--sdds-spacing-element-4);
   padding-bottom: var(--sdds-spacing-element-4);
   cursor: pointer;
+  display: flex;
+  align-items: center;
 }
 .sdds-checkbox-webcomponent input[type=checkbox]::before, .sdds-checkbox-webcomponent input[type=checkbox]::after {
   content: "";

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

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