@scania/tegel 0.0.5 → 0.0.6

package/dist/collection/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.js

@@ -0,0 +1,61 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuUserLabel {
+  constructor() {
+    this.heading = undefined;
+    this.subheading = undefined;
+  }
+  render() {
+    return (h(Host, null, this.heading, this.subheading && h("div", { class: "subheading" }, this.subheading)));
+  }
+  static get is() { return "sdds-side-menu-user-label"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-user-label.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-user-label.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The heading text."
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "subheading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The subheading text."
+        },
+        "attribute": "subheading",
+        "reflect": false
+      }
+    };
+  }
+}
+//# sourceMappingURL=side-menu-user-label.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-user-label.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-user-label/side-menu-user-label.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;;;;EAO5B,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACF,IAAI,CAAC,OAAO;MACZ,IAAI,CAAC,UAAU,IAAI,WAAK,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,UAAU,CAAO,CAC9D,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'sdds-side-menu-user-label',\n  styleUrl: 'side-menu-user-label.scss',\n  shadow: true,\n})\nexport class SideMenuUserLabel {\n  /** The heading text. */\n  @Prop() heading!: string;\n\n  /** The subheading text. */\n  @Prop() subheading: string;\n\n  render() {\n    return (\n      <Host>\n        {this.heading}\n        {this.subheading && <div class=\"subheading\">{this.subheading}</div>}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu-webcomponent.stories.js

@@ -0,0 +1,196 @@
+import readme from './readme.md';
+import { formatHtmlPreview } from '../../../utils/utils';
+import readmeSideMenuCloseButton from './side-menu-close-button/readme.md';
+import readmeSideMenuOverlay from './side-menu-overlay/readme.md';
+import readmeSideMenuUser from './side-menu-user/readme.md';
+import readmeSideMenuCollapseButton from './side-menu-collapse-button/readme.md';
+import readmeSideMenuDropdown from './side-menu-dropdown/readme.md';
+export default {
+  title: 'Components/Side Menu',
+  parameters: {
+    notes: {
+      'Side Menu': readme,
+      'Side Menu Close Button': readmeSideMenuCloseButton,
+      'Side Menu Overlay': readmeSideMenuOverlay,
+      'Side Menu User': readmeSideMenuUser,
+      'Side Menu Collapse Button': readmeSideMenuCollapseButton,
+      'Side Menu Dropdown': readmeSideMenuDropdown,
+    },
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    persistent: {
+      name: 'Persistent',
+      description: 'Set the side menu to always show. This should be used if there are more navigation items to show than can always fit in the header, more than three header items is a good rule of thumb.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    collapsible: {
+      name: 'Collapsible',
+      description: 'Make the side menu collapsible',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'persistent', truthy: true },
+    },
+  },
+  args: {
+    persistent: true,
+    collapsible: false,
+  },
+};
+const Template = ({ persistent, collapsible }) => formatHtmlPreview(`
+    <script>
+    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */
+    window.demoSideMenu = document.querySelector('#demo-side-menu');
+  </script>
+  <style>
+    :root {
+      --app-bar-height: 64px;
+    }
+
+    /* Note: to make the layout fill the entire viewport height you'll need to set the */
+    /* height of the parent element and all of its ancestors to 100%. */
+    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */
+    .demo-layout {
+      min-height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+    .demo-header {
+      position: sticky;
+      top: 0;
+    }
+    .demo-wrap-side-menu-and-main {
+      display: flex;
+      flex-grow: 1;
+    }
+    ${persistent
+  ? `
+        /* the lg breakpoint is used here to match the breakpoint used in the header */
+    @media (min-width: 992px) {
+      #demo-side-menu {
+        /* We suggest you attach the persistent side menu to your layout like this: */
+        height: calc(100vh - var(--app-bar-height));
+        position: sticky;
+        top: var(--app-bar-height);
+        left: 0px;
+      }
+    }`
+  : ''}
+    /* If an extra button in the header is required except on */
+    /* very narrow screens, you can use classes like these: */
+    .demo-hide {
+      display: none;
+    }
+
+    // https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints
+    @media (min-width: 375px) {
+      .demo-xs-hide {
+        display: none;
+      }
+      .demo-xs-show {
+        display: block;
+      }
+    }
+  </style>
+
+  <div class="demo-layout">
+    <sdds-header class="demo-header">
+      <sdds-header-hamburger onclick="demoSideMenu.open = true;" aria-expanded="false" aria-label="Open application drawer" aria-haspopup="true"></sdds-header-hamburger>
+
+      <sdds-header-title>
+        My Application
+      </sdds-header-title>
+
+      <i style="color:white">Header items omitted for brevity. See patterns/navigation</i>
+
+      <sdds-header-brand-symbol slot="end" link-href="https://scania.com" aria-label="Scania - red gryphon on blue shield">
+      </sdds-header-brand-symbol>
+    </sdds-header>
+
+    <div class="demo-wrap-side-menu-and-main">
+      <!-- Note: the "persistent" property keeps the menu open on desktop -->
+      <sdds-side-menu aria-label="Side menu" id="demo-side-menu" ${persistent ? 'persistent' : ''}>
+        <sdds-side-menu-overlay slot="overlay" onclick="demoSideMenu.open = false;"></sdds-side-menu-overlay>
+
+        <sdds-side-menu-close-button slot="close-button" aria-label="Close drawer menu" onclick="demoSideMenu.open = false;"></sdds-side-menu-close-button>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="timer" size="24"></sdds-icon>
+            About us
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="truck" size="24"></sdds-icon>
+            Trucks
+          </button>
+        </sdds-side-menu-item>
+
+        <sdds-side-menu-dropdown default-open selected>
+          <sdds-icon slot="button-icon" name="profile" size="24"></sdds-icon>
+          <span slot="button-label">
+            Wheel types
+          </span>
+          <sdds-side-menu-dropdown-list>
+            <sdds-side-menu-dropdown-list-item>
+              <a href="https://www.scania.com">
+                Hub-centric wheel
+              </a>
+            </sdds-side-menu-dropdown-list-item>
+            <sdds-side-menu-dropdown-list-item selected>
+              <a href="https://www.scania.com" aria-current="page">
+                Rim wheel
+              </a>
+            </sdds-side-menu-dropdown-list-item>
+          </sdds-side-menu-dropdown-list>
+        </sdds-side-menu-dropdown>
+
+        <sdds-side-menu-item>
+          <button>
+            <sdds-icon name="star" size="24"></sdds-icon>
+            Values
+          </button>
+        </sdds-side-menu-item>
+
+        ${collapsible
+  ? `<sdds-side-menu-collapse-button slot="sticky-end" onclick="demoSideMenu.collapsed = !demoSideMenu.collapsed;"></sdds-side-menu-collapse-button>`
+  : ''}
+
+      </sdds-side-menu>
+
+      <main class="sdds-u-h-100 sdds-u-p3" style="box-sizing: border-box;">
+        <p>If there are more than a few buttons and/or links in the header, they might not fit on medium size screens. 
+        <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>
+
+        <p><i>Note: The side menu is sticky, and should not scroll with the main content of the page.</i></p>
+
+        <p><i>Note: The collapse button is optional.</i></p>
+        
+      </main>
+    </div>
+  </div>
+  `);
+export const WebComponent = Template.bind({});
+//# sourceMappingURL=side-menu-webcomponent.stories.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu-webcomponent.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-webcomponent.stories.js","sourceRoot":"","sources":["../../../../src/components/side-menu/webcomponent/side-menu-webcomponent.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,aAAa,CAAC;AACjC,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,yBAAyB,MAAM,oCAAoC,CAAC;AAC3E,OAAO,qBAAqB,MAAM,+BAA+B,CAAC;AAClE,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAC5D,OAAO,4BAA4B,MAAM,uCAAuC,CAAC;AACjF,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAEpE,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,UAAU,EAAE;IACV,KAAK,EAAE;MACL,WAAW,EAAE,MAAM;MACnB,wBAAwB,EAAE,yBAAyB;MACnD,mBAAmB,EAAE,qBAAqB;MAC1C,gBAAgB,EAAE,kBAAkB;MACpC,2BAA2B,EAAE,4BAA4B;MACzD,oBAAoB,EAAE,sBAAsB;KAC7C;IACD,MAAM,EAAE,YAAY;IACpB,IAAI,EAAE;MACJ,MAAM,EAAE;QACN,KAAK,EAAE,QAAQ;OAChB;KACF;IACD,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,UAAU,EAAE;MACV,IAAI,EAAE,YAAY;MAClB,WAAW,EACT,2LAA2L;MAC7L,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,WAAW,EAAE;MACX,IAAI,EAAE,aAAa;MACnB,WAAW,EAAE,gCAAgC;MAC7C,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,EAAE,IAAI,EAAE;KACxC;GACF;EACD,IAAI,EAAE;IACJ,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,KAAK;GACnB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,EAAE,CAC/C,iBAAiB,CACf;;;;;;;;;;;;;;;;;;;;;;;;;;MA2BE,UAAU;EACR,CAAC,CAAC;;;;;;;;;;MAUJ;EACE,CAAC,CAAC,EACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mEAkC+D,UAAU,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA8CvF,WAAW;EACT,CAAC,CAAC,iJAAiJ;EACnJ,CAAC,CAAC,EACN;;;;;;;;;;;;;;;GAeL,CACA,CAAC;AAEJ,MAAM,CAAC,MAAM,YAAY,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import readme from './readme.md';\nimport { formatHtmlPreview } from '../../../utils/utils';\nimport readmeSideMenuCloseButton from './side-menu-close-button/readme.md';\nimport readmeSideMenuOverlay from './side-menu-overlay/readme.md';\nimport readmeSideMenuUser from './side-menu-user/readme.md';\nimport readmeSideMenuCollapseButton from './side-menu-collapse-button/readme.md';\nimport readmeSideMenuDropdown from './side-menu-dropdown/readme.md';\n\nexport default {\n  title: 'Components/Side Menu',\n  parameters: {\n    notes: {\n      'Side Menu': readme,\n      'Side Menu Close Button': readmeSideMenuCloseButton,\n      'Side Menu Overlay': readmeSideMenuOverlay,\n      'Side Menu User': readmeSideMenuUser,\n      'Side Menu Collapse Button': readmeSideMenuCollapseButton,\n      'Side Menu Dropdown': readmeSideMenuDropdown,\n    },\n    layout: 'fullscreen',\n    docs: {\n      source: {\n        state: 'closed',\n      },\n    },\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    persistent: {\n      name: 'Persistent',\n      description:\n        'Set the side menu to always show. This should be used if there are more navigation items to show than can always fit in the header, more than three header items is a good rule of thumb.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    collapsible: {\n      name: 'Collapsible',\n      description: 'Make the side menu collapsible',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'persistent', truthy: true },\n    },\n  },\n  args: {\n    persistent: true,\n    collapsible: false,\n  },\n};\n\nconst Template = ({ persistent, collapsible }) =>\n  formatHtmlPreview(\n    `\n    <script>\n    /* For demonstration purposes only. Do this in the preferred way of your framework instead. */\n    window.demoSideMenu = document.querySelector('#demo-side-menu');\n  </script>\n  <style>\n    :root {\n      --app-bar-height: 64px;\n    }\n\n    /* Note: to make the layout fill the entire viewport height you'll need to set the */\n    /* height of the parent element and all of its ancestors to 100%. */\n    /* Please note that using 'vh' for this can cause issues on some mobile browsers. */\n    .demo-layout {\n      min-height: 100%;\n      display: flex;\n      flex-direction: column;\n    }\n    .demo-header {\n      position: sticky;\n      top: 0;\n    }\n    .demo-wrap-side-menu-and-main {\n      display: flex;\n      flex-grow: 1;\n    }\n    ${\n      persistent\n        ? `\n        /* the lg breakpoint is used here to match the breakpoint used in the header */\n    @media (min-width: 992px) {\n      #demo-side-menu {\n        /* We suggest you attach the persistent side menu to your layout like this: */\n        height: calc(100vh - var(--app-bar-height));\n        position: sticky;\n        top: var(--app-bar-height);\n        left: 0px;\n      }\n    }`\n        : ''\n    }\n    /* If an extra button in the header is required except on */\n    /* very narrow screens, you can use classes like these: */\n    .demo-hide {\n      display: none;\n    }\n\n    // https://tegel.scania.com/components/header#:~:text=breakpoints%20larger%20than-,%24small%2D375.,-On%20smaller%20breakpoints\n    @media (min-width: 375px) {\n      .demo-xs-hide {\n        display: none;\n      }\n      .demo-xs-show {\n        display: block;\n      }\n    }\n  </style>\n\n  <div class=\"demo-layout\">\n    <sdds-header class=\"demo-header\">\n      <sdds-header-hamburger onclick=\"demoSideMenu.open = true;\" aria-expanded=\"false\" aria-label=\"Open application drawer\" aria-haspopup=\"true\"></sdds-header-hamburger>\n\n      <sdds-header-title>\n        My Application\n      </sdds-header-title>\n\n      <i style=\"color:white\">Header items omitted for brevity. See patterns/navigation</i>\n\n      <sdds-header-brand-symbol slot=\"end\" link-href=\"https://scania.com\" aria-label=\"Scania - red gryphon on blue shield\">\n      </sdds-header-brand-symbol>\n    </sdds-header>\n\n    <div class=\"demo-wrap-side-menu-and-main\">\n      <!-- Note: the \"persistent\" property keeps the menu open on desktop -->\n      <sdds-side-menu aria-label=\"Side menu\" id=\"demo-side-menu\" ${persistent ? 'persistent' : ''}>\n        <sdds-side-menu-overlay slot=\"overlay\" onclick=\"demoSideMenu.open = false;\"></sdds-side-menu-overlay>\n\n        <sdds-side-menu-close-button slot=\"close-button\" aria-label=\"Close drawer menu\" onclick=\"demoSideMenu.open = false;\"></sdds-side-menu-close-button>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"timer\" size=\"24\"></sdds-icon>\n            About us\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"truck\" size=\"24\"></sdds-icon>\n            Trucks\n          </button>\n        </sdds-side-menu-item>\n\n        <sdds-side-menu-dropdown default-open selected>\n          <sdds-icon slot=\"button-icon\" name=\"profile\" size=\"24\"></sdds-icon>\n          <span slot=\"button-label\">\n            Wheel types\n          </span>\n          <sdds-side-menu-dropdown-list>\n            <sdds-side-menu-dropdown-list-item>\n              <a href=\"https://www.scania.com\">\n                Hub-centric wheel\n              </a>\n            </sdds-side-menu-dropdown-list-item>\n            <sdds-side-menu-dropdown-list-item selected>\n              <a href=\"https://www.scania.com\" aria-current=\"page\">\n                Rim wheel\n              </a>\n            </sdds-side-menu-dropdown-list-item>\n          </sdds-side-menu-dropdown-list>\n        </sdds-side-menu-dropdown>\n\n        <sdds-side-menu-item>\n          <button>\n            <sdds-icon name=\"star\" size=\"24\"></sdds-icon>\n            Values\n          </button>\n        </sdds-side-menu-item>\n\n        ${\n          collapsible\n            ? `<sdds-side-menu-collapse-button slot=\"sticky-end\" onclick=\"demoSideMenu.collapsed = !demoSideMenu.collapsed;\"></sdds-side-menu-collapse-button>`\n            : ''\n        }\n\n      </sdds-side-menu>\n\n      <main class=\"sdds-u-h-100 sdds-u-p3\" style=\"box-sizing: border-box;\">\n        <p>If there are more than a few buttons and/or links in the header, they might not fit on medium size screens. \n        <br/>In that case they should be placed in a persistent side menu — which is always visible on large screens.</p>\n\n        <p><i>Note: The side menu is sticky, and should not scroll with the main content of the page.</i></p>\n\n        <p><i>Note: The collapse button is optional.</i></p>\n        \n      </main>\n    </div>\n  </div>\n  `,\n  );\n\nexport const WebComponent = Template.bind({});\n"]}

package/dist/collection/components/side-menu/webcomponent/side-menu.css

@@ -0,0 +1,129 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host([open]) {
+  pointer-events: auto;
+  z-index: 301;
+}
+
+:host {
+  pointer-events: none;
+  display: block;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+:host .wrapper {
+  height: inherit;
+  /* default slot */
+  /* 'end' slot */
+}
+:host .wrapper slot:not([name])::slotted(*) {
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .wrapper ::slotted([slot=end]) {
+  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .wrapper .sdds-side-menu-list-end {
+  margin-top: 68px;
+}
+:host .state-closed {
+  display: none;
+}
+:host .state-open slot[name=overlay]::slotted(sdds-side-menu-overlay) {
+  opacity: 0.4;
+}
+:host .state-open slot[name=close-button]::slotted(sdds-side-menu-close-button) {
+  opacity: 1;
+}
+:host .state-open .sdds-side-menu-wrapper {
+  transform: scaleY(1);
+}
+:host .state-upper-slot-empty .sdds-side-menu-list-upper {
+  display: none;
+}
+:host .state-upper-slot-empty .sdds-side-menu-list-end {
+  margin-top: 0;
+}
+:host .state-upper-slot-empty ::slotted([slot=end]) {
+  border-top: none;
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+
+@media (min-width: 992px) {
+  :host([persistent]) {
+    pointer-events: auto;
+    position: static;
+    width: 272px;
+    height: auto;
+    border-right: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+  }
+  :host([persistent]) .wrapper slot[name=overlay]::slotted(sdds-side-menu-overlay) {
+    display: none;
+  }
+  :host([persistent]) .wrapper slot[name=close-button]::slotted(sdds-side-menu-close-button) {
+    display: none;
+  }
+  :host([persistent]) .wrapper .sdds-side-menu-wrapper {
+    transform: none;
+  }
+  :host([persistent]) .menu {
+    width: 272px;
+  }
+  :host([persistent]) .state-closed {
+    display: block;
+  }
+  :host([persistent]):host([collapsed]) {
+    width: 69px;
+  }
+  :host([persistent]):host([collapsed]) .menu {
+    width: 68px;
+  }
+  :host([persistent]) slot[name=end]::slotted(*) {
+    display: none;
+  }
+}
+.menu {
+  width: 80%;
+  height: inherit;
+  position: relative;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.menu * {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+@media (max-width: 384px) {
+  .menu {
+    width: 100%;
+  }
+}
+aside .sdds-side-menu-wrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  flex-grow: 1;
+  background-color: var(--sdds-sidebar-side-menu-background-cover);
+  transition: transform 250ms ease;
+  transform-origin: top;
+  transform: scaleY(0);
+  overflow-y: auto;
+}
+aside .sdds-side-menu-wrapper::-webkit-scrollbar {
+  width: 4px;
+  background-color: inherit;
+}
+aside .sdds-side-menu-wrapper::-webkit-scrollbar-thumb {
+  background-color: var(--sdds-grey-300);
+}
+aside .sdds-side-menu-wrapper ::-webkit-scrollbar-button {
+  height: 0;
+  width: 0;
+}

package/dist/collection/components/side-menu/webcomponent/side-menu.js

@@ -0,0 +1,206 @@
+import { h, Host, } from '@stencil/core';
+import { dfs, isFocusable } from '../../../utils/utils';
+const GRID_LG_BREAKPOINT = '992px';
+const OPENING_ANIMATION_DURATION = 400;
+const INITIALIZE_ANIMATION_DELAY = 500;
+export class SddsSideMenu {
+  constructor() {
+    this.handleMatchesLgBreakpointChange = (e) => {
+      const isBelowLg = !e.matches;
+      if (isBelowLg) {
+        this.collapsed = false;
+      }
+    };
+    this.open = false;
+    this.persistent = false;
+    this.collapsed = false;
+    this.isUpperSlotEmpty = false;
+    this.isClosed = true;
+    this.isOpen = false;
+    this.isClosing = false;
+    this.isOpening = false;
+  }
+  connectedCallback() {
+    this.collapsedEventEmitter.emit({
+      collapsed: this.collapsed,
+    });
+    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);
+    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  componentDidLoad() {
+    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);
+    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])');
+    const upperSlotElements = upperSlot.assignedElements();
+    const hasUpperSlotElements = (upperSlotElements === null || upperSlotElements === void 0 ? void 0 : upperSlotElements.length) > 0;
+    if (!hasUpperSlotElements) {
+      this.isUpperSlotEmpty = true;
+    }
+  }
+  disconnectedCallback() {
+    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);
+  }
+  onOpenChange(newVal, oldVal) {
+    if (newVal && !oldVal) {
+      this.setOpening();
+    }
+    if (!newVal && oldVal) {
+      this.setClosing();
+    }
+  }
+  onCollapsedChange(newVal) {
+    this.collapsedEventEmitter.emit({
+      collapsed: newVal,
+    });
+  }
+  onIsOpenChange(newVal) {
+    if (newVal) {
+      const firstFocusableElement = dfs(this.host, isFocusable, true);
+      firstFocusableElement.focus();
+    }
+  }
+  async setOpening() {
+    this.isClosed = false;
+    await new Promise((resolve) => {
+      setTimeout(resolve, 0);
+    });
+    this.isOpening = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isOpening = false;
+    this.isOpen = true;
+  }
+  async setClosing() {
+    this.isOpen = false;
+    this.isClosing = true;
+    await new Promise((resolve) => {
+      setTimeout(resolve, OPENING_ANIMATION_DURATION);
+    });
+    this.isClosing = false;
+    this.isClosed = true;
+  }
+  render() {
+    return (h(Host, { role: "navigation" }, h("div", { class: {
+        'wrapper': true,
+        'state-upper-slot-empty': this.isUpperSlotEmpty,
+        'state-open': this.isOpen || this.isOpening,
+        'state-closed': this.isClosed,
+      } }, h("slot", { name: "overlay" }), h("aside", { class: `menu` }, h("slot", { name: "close-button" }), h("div", { class: "sdds-side-menu-wrapper" }, h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-upper` }, h("slot", null)), h("ul", { class: `sdds-side-menu-list sdds-side-menu-list-end` }, h("slot", { name: "end" }))), h("slot", { name: "sticky-end" })))));
+  }
+  static get is() { return "sdds-side-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu is open or not."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "persistent": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu should always be shown on desktop screens to the side."
+        },
+        "attribute": "persistent",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "collapsed": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If the side menu is collapsed. Only a persistent desktop menu can be collapsed."
+        },
+        "attribute": "collapsed",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isUpperSlotEmpty": {},
+      "isClosed": {},
+      "isOpen": {},
+      "isClosing": {},
+      "isOpening": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "collapsedEventEmitter",
+        "name": "sddsSideMenuCollapsed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Broadcasts collapsed state to child components."
+        },
+        "complexType": {
+          "original": "CollapsedEvent",
+          "resolved": "CollapsedEvent",
+          "references": {
+            "CollapsedEvent": {
+              "location": "local",
+              "path": "/Users/johnny/dev/scania/sdds/tegel/src/components/side-menu/webcomponent/side-menu.tsx"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "onOpenChange"
+      }, {
+        "propName": "collapsed",
+        "methodName": "onCollapsedChange"
+      }, {
+        "propName": "isOpening",
+        "methodName": "onIsOpenChange"
+      }];
+  }
+}
+//# sourceMappingURL=side-menu.js.map

package/dist/collection/components/side-menu/webcomponent/side-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu.js","sourceRoot":"","sources":["../../../../src/components/side-menu/webcomponent/side-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { dfs, isFocusable } from '../../../utils/utils';\n\nexport interface CollapsedEvent {\n  collapsed: boolean;\n}\n\nconst GRID_LG_BREAKPOINT = '992px';\nconst OPENING_ANIMATION_DURATION = 400;\nconst INITIALIZE_ANIMATION_DELAY = 500;\n\n@Component({\n  tag: 'sdds-side-menu',\n  styleUrl: 'side-menu.scss',\n  shadow: true,\n})\nexport class SddsSideMenu {\n  @Element() host: HTMLSddsSideMenuElement;\n\n  /** Broadcasts collapsed state to child components. */\n  @Event({\n    eventName: 'sddsSideMenuCollapsed',\n    bubbles: true,\n    composed: true,\n    cancelable: true,\n  })\n  collapsedEventEmitter: EventEmitter<CollapsedEvent>;\n\n  /** If the side menu is open or not. */\n  @Prop({ reflect: true }) open: boolean = false;\n\n  /** If the side menu should always be shown on desktop screens to the side. */\n  @Prop({ reflect: true }) persistent: boolean = false;\n\n  /** If the side menu is collapsed. Only a persistent desktop menu can be collapsed. */\n  @Prop({ reflect: true }) collapsed: boolean = false;\n\n  @State() isUpperSlotEmpty: boolean = false;\n\n  @State() isClosed: boolean = true;\n\n  @State() isOpen: boolean = false;\n\n  @State() isClosing: boolean = false;\n\n  @State() isOpening: boolean = false;\n\n  private matchesLgBreakpointMq: MediaQueryList;\n\n  handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void = (e) => {\n    const isBelowLg = !e.matches;\n    if (isBelowLg) {\n      this.collapsed = false;\n    }\n  };\n\n  connectedCallback() {\n    this.collapsedEventEmitter.emit({\n      collapsed: this.collapsed,\n    });\n\n    this.matchesLgBreakpointMq = window.matchMedia(`(min-width: ${GRID_LG_BREAKPOINT})`);\n    this.matchesLgBreakpointMq.addEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  componentDidLoad() {\n    setTimeout(() => this.onOpenChange(this.open), INITIALIZE_ANIMATION_DELAY);\n\n    const upperSlot = this.host.shadowRoot.querySelector('slot:not([name])') as HTMLSlotElement;\n    const upperSlotElements = upperSlot.assignedElements();\n    const hasUpperSlotElements = upperSlotElements?.length > 0;\n\n    if (!hasUpperSlotElements) {\n      this.isUpperSlotEmpty = true;\n    }\n  }\n\n  disconnectedCallback() {\n    this.matchesLgBreakpointMq.removeEventListener('change', this.handleMatchesLgBreakpointChange);\n  }\n\n  @Watch('open')\n  onOpenChange(newVal: boolean, oldVal?: boolean) {\n    if (newVal && !oldVal) {\n      this.setOpening();\n    }\n    if (!newVal && oldVal) {\n      this.setClosing();\n    }\n  }\n\n  @Watch('collapsed')\n  onCollapsedChange(newVal: boolean) {\n    this.collapsedEventEmitter.emit({\n      collapsed: newVal,\n    });\n  }\n\n  @Watch('isOpening')\n  onIsOpenChange(newVal: boolean) {\n    if (newVal) {\n      const firstFocusableElement = dfs(this.host, isFocusable, true);\n      firstFocusableElement.focus();\n    }\n  }\n\n  async setOpening() {\n    this.isClosed = false;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, 0);\n    });\n    this.isOpening = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isOpening = false;\n    this.isOpen = true;\n  }\n\n  async setClosing() {\n    this.isOpen = false;\n    this.isClosing = true;\n\n    await new Promise((resolve) => {\n      setTimeout(resolve, OPENING_ANIMATION_DURATION);\n    });\n    this.isClosing = false;\n    this.isClosed = true;\n  }\n\n  render() {\n    return (\n      <Host role=\"navigation\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-upper-slot-empty': this.isUpperSlotEmpty,\n            'state-open': this.isOpen || this.isOpening,\n            'state-closed': this.isClosed,\n          }}\n        >\n          <slot name=\"overlay\"></slot>\n          <aside class={`menu`}>\n            <slot name=\"close-button\"></slot>\n            <div class=\"sdds-side-menu-wrapper\">\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-upper`}>\n                <slot></slot>\n              </ul>\n              <ul class={`sdds-side-menu-list sdds-side-menu-list-end`}>\n                <slot name=\"end\"></slot>\n              </ul>\n            </div>\n            <slot name=\"sticky-end\"></slot>\n          </aside>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}