@scania/tegel 0.0.51 → 0.0.61

package/dist/collection/components/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;;;mBAiBI,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAgBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,aACA,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;QAE1B,8DAA8D;QAC9D,yCAAyC;QACzC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE;UACb,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;YAClB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,KAAK,EAAE,IAAI,CAAC,KAAK;WACnB,CAAC,CAAA;QACJ,CAAC,GAAI;MACL,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,eAAa,CACP,CACF,CACT,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n  \n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n  \n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n  \n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: true,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input \n        class=\"sdds-form-input\" \n        type=\"radio\" \n        name={this.name}\n        id={this.radioId} \n        value={this.value}\n        checked={this.checked} \n        aria-checked={this.checked} \n\n        // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n        // aria-labelledby={this.ariaLabelledBy} \n        // aria-describedby={this.host.getAttribute('aria-describedby')}\n        required={this.required} \n        disabled={this.disabled}\n        onChange={() => {\n          this.sddsChange.emit({\n             radioId: this.radioId,\n             value: this.value,\n          })\n        }} />\n        <label htmlFor={this.radioId}>\n          <slot></slot>\n        </label>\n        </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,OAAO,EAAE,MAAM,eAAe,CAAC;AASjF,MAAM,OAAO,WAAW;;IAyCtB,iBAAY,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;QACnB,OAAO,EAAE,IAAI,CAAC,OAAO;QACrB,KAAK,EAAE,IAAI,CAAC,KAAK;OAClB,CAAC,CAAC;IACL,CAAC,CAAC;;;mBA9BwB,MAAM,CAAC,UAAU,EAAE;mBAGD,KAAK;oBAGrB,KAAK;oBAGL,KAAK;;EAuBjC,MAAM;IACJ,OAAO,CACL,WAAK,KAAK,EAAC,mBAAmB;MAC5B,aACE,KAAK,EAAC,iBAAiB,EACvB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,kBACP,IAAI,CAAC,OAAO;QAC1B,8DAA8D;QAC9D,wCAAwC;QACxC,gEAAgE;QAChE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,EAAE,GACnC;MACF,aAAO,OAAO,EAAE,IAAI,CAAC,OAAO;QAC1B,YAAM,IAAI,EAAC,OAAO,GAAQ,CACpB,CACJ,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { HostElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'sdds-radio-button',\n  styleUrl: 'radio-button-component.scss',\n  shadow: false,\n  scoped: true,\n})\nexport class RadioButton {\n  /** Name of radio button, used for reference. */\n  @Prop() name: string;\n\n  /** Value of input. */\n  @Prop() value: string;\n\n  /** REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMET HAS BEEN MADE! */\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaLabelledBy: string;\n\n  /** Label mainly used for accesibility tools. */\n  // @Prop() ariaDescribedBy: string;\n\n  /** Unique radio button identifier. */\n  @Prop() radioId: string = crypto.randomUUID();\n\n  /** Decides if the radio button is checked or not. */\n  @Prop({ reflect: true }) checked: boolean = false;\n\n  /** Decides if the radio button is required or not. */\n  @Prop() required: boolean = false;\n\n  /** Decides if the radio button is disabled or not. */\n  @Prop() disabled: boolean = false;\n\n  @Element() host: HostElement;\n\n  /** Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing. */\n  @Event({\n    eventName: 'sddsChange',\n    composed: true,\n    cancelable: false,\n    bubbles: true,\n  })\n  sddsChange: EventEmitter<{\n    radioId: string;\n    value: string;\n  }>;\n\n  handleChange = () => {\n    this.sddsChange.emit({\n      radioId: this.radioId,\n      value: this.value,\n    });\n  };\n\n  render() {\n    return (\n      <div class=\"sdds-radio-button\">\n        <input\n          class=\"sdds-form-input\"\n          type=\"radio\"\n          name={this.name}\n          id={this.radioId}\n          value={this.value}\n          checked={this.checked}\n          aria-checked={this.checked}\n          // REMEMBER TO ENABLE ARIA PROPS ONCE ALIGNMENT HAS BEEN MADE!\n          // aria-labelledby={this.ariaLabelledBy}\n          // aria-describedby={this.host.getAttribute('aria-describedby')}\n          required={this.required}\n          disabled={this.disabled}\n          onChange={() => this.handleChange()}\n        />\n        <label htmlFor={this.radioId}>\n          <slot name=\"label\"></slot>\n        </label>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -1,45 +1,45 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Radio Button',
-  parameters: {
-    layout: 'centered',
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    label: {
-      name: 'Label',
-      description: 'Sets the label for the radio button.',
-      control: {
-        type: 'text',
-      },
-    },
-    disabled: {
-      name: 'Disabled',
-      description: 'Disables the radio button.',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: { summary: 'false' },
-      },
-    },
-  },
-  args: {
-    label: 'Label text',
-    disabled: false,
-  },
-};
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Radio Button',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label text',
+      description: 'Sets the label for the radio button.',
+      control: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the radio button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+  },
+};
 const Template = ({ label, disabled }) => formatHtmlPreview(`
   <style>
     .demo-fieldset-reset { 
@@ -67,6 +67,6 @@ const Template = ({ label, disabled }) => formatHtmlPreview(`
       </div>
     </div>
   </fieldset>
-  `);
-export const Native = Template.bind({});
-//# sourceMappingURL=radio-button.stories.js.map
+  `);
+export const Native = Template.bind({});
+//# sourceMappingURL=radio-button.stories.js.map

package/dist/collection/components/radio-button/radio-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,OAAO;MACb,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAC,KAAK,EAAE,QAAQ,EAAC,EAAE,EAAE,CACrC,iBAAiB,CAAC;;;;;;;;;0CASsB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;YAKxD,KAAK;;;;;;;;YAQL,KAAK;;;;;GAKd,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Radio Button',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label',\n      description: 'Sets the label for the radio button.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({label, disabled}) =>\n  formatHtmlPreview(`\n  <style>\n    .demo-fieldset-reset { \n      border: 0;\n      margin: 0;\n      min-width: 0;\n      padding: 0; \n    }\n  </style>\n  <fieldset class=\"demo-fieldset-reset\" ${disabled ? 'disabled' : ''}>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-1\" checked>\n        <label class=\"sdds-form-label\" for=\"rb-option-1\">\n          ${label} 1\n        </label>\n      </div>\n    </div>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-2\">\n        <label class=\"sdds-form-label\" for=\"rb-option-2\">\n          ${label} 2\n        </label>\n      </div>\n    </div>\n  </fieldset>\n  `);\n\n  export const Native = Template.bind({});\n"]}
+{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,UAAU,EAAE;IACV,MAAM,EAAE,UAAU;IAClB,MAAM,EAAE;MACN;QACE,IAAI,EAAE,OAAO;QACb,IAAI,EAAE,OAAO;QACb,GAAG,EAAE,8GAA8G;OACpH;MACD;QACE,IAAI,EAAE,MAAM;QACZ,IAAI,EAAE,MAAM;QACZ,GAAG,EAAE,8GAA8G;OACpH;KACF;GACF;EACD,QAAQ,EAAE;IACR,KAAK,EAAE;MACL,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sCAAsC;MACnD,OAAO,EAAE;QACP,IAAI,EAAE,MAAM;OACb;KACF;IACD,QAAQ,EAAE;MACR,IAAI,EAAE,UAAU;MAChB,WAAW,EAAE,4BAA4B;MACzC,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,KAAK,EAAE;QACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;OACnC;KACF;GACF;EACD,IAAI,EAAE;IACJ,KAAK,EAAE,YAAY;IACnB,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,CACvC,iBAAiB,CAAC;;;;;;;;;0CASsB,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;;;;;YAKxD,KAAK;;;;;;;;YAQL,KAAK;;;;;GAKd,CAAC,CAAC;AAEL,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Radio Button',\n  parameters: {\n    layout: 'centered',\n    design: [\n      {\n        name: 'Figma',\n        type: 'figma',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    label: {\n      name: 'Label text',\n      description: 'Sets the label for the radio button.',\n      control: {\n        type: 'text',\n      },\n    },\n    disabled: {\n      name: 'Disabled',\n      description: 'Disables the radio button.',\n      control: {\n        type: 'boolean',\n      },\n      table: {\n        defaultValue: { summary: 'false' },\n      },\n    },\n  },\n  args: {\n    label: 'Label text',\n    disabled: false,\n  },\n};\n\nconst Template = ({ label, disabled }) =>\n  formatHtmlPreview(`\n  <style>\n    .demo-fieldset-reset { \n      border: 0;\n      margin: 0;\n      min-width: 0;\n      padding: 0; \n    }\n  </style>\n  <fieldset class=\"demo-fieldset-reset\" ${disabled ? 'disabled' : ''}>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-1\" checked>\n        <label class=\"sdds-form-label\" for=\"rb-option-1\">\n          ${label} 1\n        </label>\n      </div>\n    </div>\n    <div class=\"sdds-radio-button-group\">\n      <div class=\"sdds-radio-item\">\n        <input class=\"sdds-form-input\" type=\"radio\" name=\"rb-example\" id=\"rb-option-2\">\n        <label class=\"sdds-form-label\" for=\"rb-option-2\">\n          ${label} 2\n        </label>\n      </div>\n    </div>\n  </fieldset>\n  `);\n\nexport const Native = Template.bind({});\n"]}

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

@@ -1,50 +1,50 @@
-import { formatHtmlPreview } from '../../utils/utils';
-export default {
-  title: 'Components/Side Menu',
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      source: {
-        state: 'closed',
-      },
-    },
-    design: [
-      {
-        name: 'Figma',
-        type: 'figma',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
-      },
-      {
-        name: 'Link',
-        type: 'link',
-        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
-      },
-    ],
-  },
-  argTypes: {
-    collapsed: {
-      name: 'Collapsed',
-      description: 'Toggle the side menus collapsed state.',
-      control: {
-        type: 'boolean',
-      },
-    },
-    showIcons: {
-      name: 'Show icons',
-      description: 'Toggle if icons for side menu options are displayed.',
-      control: {
-        type: 'boolean',
-      },
-      if: { arg: 'collapsed', neq: true },
-    },
-  },
-  args: {
-    collapsed: false,
-    showIcons: false,
-  },
-};
-const Template = ({ showIcons, collapsed }) => {
-  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Side Menu',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    collapsed: {
+      name: 'Collapsed',
+      description: 'Toggle the side menus collapsed state.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    showIcons: {
+      name: 'Show icons',
+      description: 'Toggle if icons for side menu options are displayed.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'collapsed', neq: true },
+    },
+  },
+  args: {
+    collapsed: false,
+    showIcons: false,
+  },
+};
+const Template = ({ showIcons, collapsed }) => {
+  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
   return formatHtmlPreview(`
   <style>
   /* demo-wrapper is for demonstration purposes only*/
@@ -108,7 +108,7 @@ const Template = ({ showIcons, collapsed }) => {
           </li>
         </ul>
       </li>
-      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__item--selected sdds-sidebar-nav__extended">
       <button class="sdds-sidebar-nav__item-link">
       <div>
         <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
@@ -177,7 +177,7 @@ const Template = ({ showIcons, collapsed }) => {
     });
   }
 </script>
-  `);
-};
-export const Default = Template.bind({});
-//# sourceMappingURL=side-menu.stories.js.map
+  `);
+};
+export const Native = Template.bind({});
+//# sourceMappingURL=side-menu.stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"side-menu.stories.js","sourceRoot":"","sources":["../../../src/components/side-menu/side-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,UAAU,EAAE;IACV,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,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;KACpC;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;EAC5C,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;EAE1E,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;uCAyBY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;yDAMV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqG3D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Side Menu',\n  parameters: {\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=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    collapsed: {\n      name: 'Collapsed',\n      description: 'Toggle the side menus collapsed state.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    showIcons: {\n      name: 'Show icons',\n      description: 'Toggle if icons for side menu options are displayed.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'collapsed', neq: true },\n    },\n  },\n  args: {\n    collapsed: false,\n    showIcons: false,\n  },\n};\n\nconst Template = ({ showIcons, collapsed }) => {\n  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    align-items: stretch;\n    height: 100vh;\n  }\n  .sdds-container {\n    overflow-y: auto;\n    max-width: 10000px;\n  }\n</style>\n\n<nav class=\"sdds-nav\">\n  <div class=\"sdds-nav__left\">\n    <button class=\"sdds-nav__mob-menu-btn\">\n      <sdds-icon name=\"burger\" size=\"20px\"></sdds-icon>\n    </button>\n    <div class=\"sdds-nav__app-name\">My application</div>\n  </div>\n  <div class=\"sdds-nav__right\">\n    <a class=\"sdds-nav__item sdds-nav__app-logo\" href=\"#\"></a>\n  </div>\n</nav>\n<div class=\"sdds-push demo-wrapper\">\n  <div class=\"sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}\">\n    <div class=\"sdds-sidebar-mheader\">\n    <button class=\"sdds-sidebar-mheader__close\">\n      <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n    </button>\n    </div>\n    <ul class=\"sdds-sidebar-nav sdds-sidebar-nav--main ${icons}\">\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n        <button class=\"sdds-sidebar-nav__item-link\">\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n          </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n          </div>\n        </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n      <button class=\"sdds-sidebar-nav__item-link\">\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n      <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n      </div>\n      </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"sdds-container\" style=\"padding-top: 30px\">\n  </div>\n</div>\n\n\n<script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');\n  for (let i = 0; i < expandableListItems.length; i++) {\n    expandableListItems[i].addEventListener('click', () => {\n      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');\n    });\n  }\n</script>\n  `);\n};\n\nexport const Default = Template.bind({});\n"]}
+{"version":3,"file":"side-menu.stories.js","sourceRoot":"","sources":["../../../src/components/side-menu/side-menu.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtD,eAAe;EACb,KAAK,EAAE,sBAAsB;EAC7B,UAAU,EAAE;IACV,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,SAAS,EAAE;MACT,IAAI,EAAE,WAAW;MACjB,WAAW,EAAE,wCAAwC;MACrD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;KACF;IACD,SAAS,EAAE;MACT,IAAI,EAAE,YAAY;MAClB,WAAW,EAAE,sDAAsD;MACnE,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;OAChB;MACD,EAAE,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,IAAI,EAAE;KACpC;GACF;EACD,IAAI,EAAE;IACJ,SAAS,EAAE,KAAK;IAChB,SAAS,EAAE,KAAK;GACjB;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,EAAE;EAC5C,MAAM,KAAK,GAAG,SAAS,IAAI,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,gBAAgB,CAAC;EAE1E,OAAO,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;uCAyBY,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;;;;;;yDAMV,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqG3D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { formatHtmlPreview } from '../../utils/utils';\n\nexport default {\n  title: 'Components/Side Menu',\n  parameters: {\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=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n      {\n        name: 'Link',\n        type: 'link',\n        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',\n      },\n    ],\n  },\n  argTypes: {\n    collapsed: {\n      name: 'Collapsed',\n      description: 'Toggle the side menus collapsed state.',\n      control: {\n        type: 'boolean',\n      },\n    },\n    showIcons: {\n      name: 'Show icons',\n      description: 'Toggle if icons for side menu options are displayed.',\n      control: {\n        type: 'boolean',\n      },\n      if: { arg: 'collapsed', neq: true },\n    },\n  },\n  args: {\n    collapsed: false,\n    showIcons: false,\n  },\n};\n\nconst Template = ({ showIcons, collapsed }) => {\n  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';\n\n  return formatHtmlPreview(`\n  <style>\n  /* demo-wrapper is for demonstration purposes only*/\n  .demo-wrapper {\n    align-items: stretch;\n    height: 100vh;\n  }\n  .sdds-container {\n    overflow-y: auto;\n    max-width: 10000px;\n  }\n</style>\n\n<nav class=\"sdds-nav\">\n  <div class=\"sdds-nav__left\">\n    <button class=\"sdds-nav__mob-menu-btn\">\n      <sdds-icon name=\"burger\" size=\"20px\"></sdds-icon>\n    </button>\n    <div class=\"sdds-nav__app-name\">My application</div>\n  </div>\n  <div class=\"sdds-nav__right\">\n    <a class=\"sdds-nav__item sdds-nav__app-logo\" href=\"#\"></a>\n  </div>\n</nav>\n<div class=\"sdds-push demo-wrapper\">\n  <div class=\"sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}\">\n    <div class=\"sdds-sidebar-mheader\">\n    <button class=\"sdds-sidebar-mheader__close\">\n      <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n    </button>\n    </div>\n    <ul class=\"sdds-sidebar-nav sdds-sidebar-nav--main ${icons}\">\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__extended\">\n        <button class=\"sdds-sidebar-nav__item-link\">\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n          </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n          <div>\n            <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n          </div>\n        </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item sdds-sidebar-nav__item--selected sdds-sidebar-nav__extended\">\n      <button class=\"sdds-sidebar-nav__item-link\">\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n      <span class=\"sdds-sidebar-nav__item-text\">Sub-menu</span>\n      <div>\n        <sdds-icon class=\"sdds-sidebar-nav__chevron\" name=\"chevron_down\" size=\"16px\"></sdds-icon>\n      </div>\n      </button>\n        <ul class=\"sdds-sidebar-nav-subnav\">\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <span class=\"sdds-sidebar-nav__item-title\">Sub-menu</span>\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n          <li class=\"sdds-sidebar-nav-subnav__item\">\n            <a class=\"sdds-sidebar-nav__item-link\" href=\"#\"\n              ><span class=\"sdds-sidebar-nav__item-text\">Sub Page name</span></a\n            >\n          </li>\n        </ul>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n      <li class=\"sdds-sidebar-nav__item\">\n        <a class=\"sdds-sidebar-nav__item-link\" href=\"#\">\n        <div>\n        <sdds-icon class=\"sdds-sidebar-nav__icon\" name=\"truck\" size=\"20px\"></sdds-icon>\n      </div>\n          <span class=\"sdds-sidebar-nav__item-text\">Page link</span>\n        </a>\n      </li>\n    </ul>\n  </div>\n  <div class=\"sdds-container\" style=\"padding-top: 30px\">\n  </div>\n</div>\n\n\n<script>\n    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */\n  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {\n    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')\n  })\n  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');\n  for (let i = 0; i < expandableListItems.length; i++) {\n    expandableListItems[i].addEventListener('click', () => {\n      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');\n    });\n  }\n</script>\n  `);\n};\n\nexport const Native = Template.bind({});\n"]}

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

@@ -0,0 +1,26 @@
+:host {
+  opacity: 0;
+  transition: opacity 0.15s ease;
+}
+:host button {
+  height: 64px;
+  width: 100%;
+  text-align: left;
+  padding: 0 24px;
+  border: none;
+  background-color: var(--sdds-sidebar-side-menu-background-cover);
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host button:hover {
+  cursor: pointer;
+  background-color: var(--sdds-sidebar-item-state-hover);
+}
+:host button:focus-visible {
+  cursor: pointer;
+  border: 1px solid var(--sdds-sidebar-side-menu-single-subitem-selected-border-color);
+}

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

@@ -0,0 +1,22 @@
+import { h, Host } from '@stencil/core';
+import { inheritAriaAttributes } from '../../../../utils/utils';
+export class SideMenuCloseButton {
+  render() {
+    const buttonProps = Object.assign({ 'aria-label': 'Close' }, inheritAriaAttributes(this.host));
+    return (h(Host, null, h("button", Object.assign({}, buttonProps), h("sdds-icon", { name: "cross", size: "20px" }))));
+  }
+  static get is() { return "sdds-side-menu-close-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-close-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-close-button.css"]
+    };
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=side-menu-close-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-close-button.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-close-button/side-menu-close-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAOhE,MAAM,OAAO,mBAAmB;EAG9B,MAAM;IACJ,MAAM,WAAW,mBACf,YAAY,EAAE,OAAO,IAClB,qBAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,CACpC,CAAC;IACF,OAAO,CACL,EAAC,IAAI;MACH,8BAAY,WAAW;QACrB,iBAAW,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,MAAM,GAAa,CACzC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host } from '@stencil/core';\nimport { inheritAriaAttributes } from '../../../../utils/utils';\n\n@Component({\n  tag: 'sdds-side-menu-close-button',\n  styleUrl: 'side-menu-close-button.scss',\n  shadow: true,\n})\nexport class SideMenuCloseButton {\n  @Element() host: HTMLElement;\n\n  render() {\n    const buttonProps = {\n      'aria-label': 'Close',\n      ...inheritAriaAttributes(this.host),\n    };\n    return (\n      <Host>\n        <button {...buttonProps}>\n          <sdds-icon name=\"cross\" size=\"20px\"></sdds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,30 @@
+/*
+  Contains spacing variables for the layout
+*/
+/** The breakpoint at which the layout changes from fixed size to full-width. */
+:host {
+  position: sticky;
+  bottom: 0;
+  display: none;
+  height: 68px;
+  border-top: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+}
+:host .icon {
+  transform: rotateZ(90deg);
+  transition: all 0.2s ease-in-out;
+  width: 20px;
+  height: 20px;
+}
+:host .state-collapsed .icon {
+  transform: translateX(-50%) rotateZ(90deg) rotateX(180deg);
+  color: var(--sdds-sidebar-side-menu-single-item-color);
+  margin-left: 0;
+  position: absolute;
+  left: 50%;
+}
+
+@media (min-width: 992px) {
+  :host {
+    display: block;
+  }
+}

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

@@ -0,0 +1,49 @@
+import { h, Host } from '@stencil/core';
+export class SideMenuCollapseButton {
+  constructor() {
+    this.collapsed = false;
+  }
+  collapsedSideMenuEventHandler(event) {
+    this.collapsed = event.detail.collapsed;
+  }
+  connectedCallback() {
+    this.sideMenuEl = this.host.closest('sdds-side-menu');
+    this.collapsed = this.sideMenuEl.collapsed;
+  }
+  render() {
+    return (h(Host, { role: "button", tabindex: "0" }, h("div", { class: {
+        'wrapper': true,
+        'state-collapsed': this.collapsed,
+      } }, h("sdds-side-menu-item", { class: {
+        button: true,
+      } }, h("a", null, h("svg", { class: "icon", slot: "icon", fill: "none", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z", fill: "currentColor" })), "Collapse")))));
+  }
+  static get is() { return "sdds-side-menu-collapse-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["side-menu-collapse-button.css"]
+    };
+  }
+  static get states() {
+    return {
+      "collapsed": {}
+    };
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "sddsSideMenuCollapsed",
+        "method": "collapsedSideMenuEventHandler",
+        "target": "body",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=side-menu-collapse-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"side-menu-collapse-button.js","sourceRoot":"","sources":["../../../../../src/components/side-menu/webcomponent/side-menu-collapse-button/side-menu-collapse-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ3E,MAAM,OAAO,sBAAsB;;qBAGH,KAAK;;EAKnC,6BAA6B,CAAC,KAAkC;IAC9D,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;EAC1C,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACtD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC;EAC7C,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAC,GAAG;MAC9B,WACE,KAAK,EAAE;UACL,SAAS,EAAE,IAAI;UACf,iBAAiB,EAAE,IAAI,CAAC,SAAS;SAClC;QAED,2BACE,KAAK,EAAE;YACL,MAAM,EAAE,IAAI;WACb;UAED;YACE,WACE,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW;cAEnB,yBACY,SAAS,eACT,SAAS,EACnB,CAAC,EAAC,2NAA2N,EAC7N,IAAI,EAAC,cAAc,GACnB,CACE;uBAEJ,CACgB,CAClB,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Listen, State } from '@stencil/core';\nimport { CollapsedEvent } from '../side-menu';\n\n@Component({\n  tag: 'sdds-side-menu-collapse-button',\n  styleUrl: 'side-menu-collapse-button.scss',\n  shadow: true,\n})\nexport class SideMenuCollapseButton {\n  @Element() host: HTMLElement;\n\n  @State() collapsed: boolean = false;\n\n  private sideMenuEl: HTMLSddsSideMenuElement;\n\n  @Listen('sddsSideMenuCollapsed', { target: 'body' })\n  collapsedSideMenuEventHandler(event: CustomEvent<CollapsedEvent>) {\n    this.collapsed = event.detail.collapsed;\n  }\n\n  connectedCallback() {\n    this.sideMenuEl = this.host.closest('sdds-side-menu');\n    this.collapsed = this.sideMenuEl.collapsed;\n  }\n\n  render() {\n    return (\n      <Host role=\"button\" tabindex=\"0\">\n        <div\n          class={{\n            'wrapper': true,\n            'state-collapsed': this.collapsed,\n          }}\n        >\n          <sdds-side-menu-item\n            class={{\n              button: true,\n            }}\n          >\n            <a>\n              <svg\n                class=\"icon\"\n                slot=\"icon\"\n                fill=\"none\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n                viewBox=\"0 0 32 32\"\n              >\n                <path\n                  fill-rule=\"evenodd\"\n                  clip-rule=\"evenodd\"\n                  d=\"M16 1.975a1 1 0 0 1 1 1v20.3l9.311-9.312a1 1 0 0 1 1.415 1.414l-9.887 9.887a2.6 2.6 0 0 1-3.677 0l-9.887-9.887a1 1 0 1 1 1.414-1.414L15 23.274V2.975a1 1 0 0 1 1-1ZM5.188 28.001a1 1 0 0 0 0 2h21.62a1 1 0 1 0 0-2H5.188Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n              Collapse\n            </a>\n          </sdds-side-menu-item>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,42 @@
+:host {
+  display: block;
+}
+:host .wrapper {
+  display: flex;
+  flex-direction: column;
+}
+:host .dropdown-icon {
+  margin-left: auto;
+  transition: all 0.2s ease-in-out;
+}
+:host .state-open .dropdown-icon {
+  transform: rotateZ(180deg);
+}
+:host .state-open .menu {
+  display: block;
+}
+:host .state-collapsed .menu {
+  --side-menu-width: 68px;
+  position: absolute;
+  left: var(--side-menu-width);
+  box-shadow: var(--sdds-nav-dropdown-menu-box);
+  background-color: var(--sdds-header-app-launcher-menu-background);
+}
+:host .state-collapsed .menu .heading-collapsed {
+  all: unset;
+  box-sizing: border-box;
+  padding: 16px 24px 15px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--sdds-sidebar-side-menu-bottom-menu-border-top);
+  font: var(--sdds-headline-07);
+  letter-spacing: var(--sdds-headline-07-ls);
+}
+:host :not(.state-collapsed) .menu ::slotted(sdds-side-menu-dropdown-list) {
+  width: 100%;
+}
+:host .menu {
+  display: none;
+  flex-direction: column;
+}