@govtechsg/sgds-web-component 1.1.0 → 1.2.0

package/components/Sidenav/sgds-sidenav.cjs.js

@@ -7,6 +7,7 @@ var lit = require('lit');
 var decorators_js = require('lit/decorators.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var sgdsSidenav = require('./sgds-sidenav.cjs2.js');
+var classMap_js = require('lit/directives/class-map.js');
 
 /**
  * @summary The side navigation is used to display a list of links to move between pages within a related category.
@@ -16,28 +17,47 @@ var sgdsSidenav = require('./sgds-sidenav.cjs2.js');
  * @slot default - Default slot for SgdsSidenavItem element.
  *
  * @cssproperty --sidenav-theme-color - overall sidenav theme color
+ * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem
  */
 class SgdsSidenav extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
         /** Allow sidenav items to stay open when another item is opened */
         this.alwaysOpen = false;
+        /** Apply position sticky to the sidenav */
+        this.sticky = false;
+    }
+    /** @internal */
+    get items() {
+        return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
+    }
+    async onToggle(event) {
+        const target = event.target;
+        const isSidenavLink = target.tagName === "SGDS-SIDENAV-LINK";
+        // Let the event pass through the DOM so that it can be
+        // prevented from the outside if a user so desires.
+        if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {
+            // No toggling when `alwaysOpen` or the user prevents it.
+            return;
+        }
+        const items = [...this.items];
+        if (items && !items.length) {
+            // no toggling when there aren't items.
+            return;
+        }
+        items.forEach(item => {
+            // Covers all elements within sidenav-item
+            if (!event.composedPath().includes(item)) {
+                // Close all the items that didn't dispatch the event.
+                item.active = false;
+            }
+        });
     }
     render() {
-        this.alwaysOpen
-            ? null
-            : this.addEventListener("sgds-toggle", (e) => {
-                const children = this.shadowRoot.querySelector("slot").assignedElements({ flatten: true });
-                for (let i = 0; i < children.length; i++) {
-                    if (e.detail.index != i) {
-                        children[i].closeItem();
-                    }
-                }
-            });
         return lit.html `
-      <nav class="sidenav">
+      <nav class=${classMap_js.classMap({ sticky: this.sticky })}>
         <ul>
-          <slot></slot>
+          <slot @click=${this.onToggle}></slot>
         </ul>
       </nav>
     `;
@@ -47,6 +67,12 @@ SgdsSidenav.styles = sgdsSidenav["default"];
 tslib.__decorate([
     decorators_js.property({ type: Boolean, attribute: true })
 ], SgdsSidenav.prototype, "alwaysOpen", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, attribute: true })
+], SgdsSidenav.prototype, "sticky", void 0);
+tslib.__decorate([
+    decorators_js.queryAssignedNodes()
+], SgdsSidenav.prototype, "defaultNodes", void 0);
 
 exports.SgdsSidenav = SgdsSidenav;
 exports["default"] = SgdsSidenav;

package/components/Sidenav/sgds-sidenav.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav.cjs.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport styles from \"./sgds-sidenav.scss\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = styles;\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  render() {\n    this.alwaysOpen\n      ? null\n      : this.addEventListener(\"sgds-toggle\", (e: CustomEvent) => {\n          const children = this.shadowRoot.querySelector(\"slot\").assignedElements({ flatten: true });\n          for (let i = 0; i < children.length; i++) {\n            if (e.detail.index != i) {\n              (children[i] as SgdsSidenavItem).closeItem();\n            }\n          }\n        });\n\n    return html`\n      <nav class=\"sidenav\">\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["SgdsElement","html","styles","__decorate","property"],"mappings":";;;;;;;;;;AAMA;;;;;;;;AAQG;AACG,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KAsBpB;IApBC,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,UAAU;AACb,cAAE,IAAI;cACJ,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAc,KAAI;AACtD,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC3F,gBAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACxC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,EAAE;AACtB,wBAAA,QAAQ,CAAC,CAAC,CAAqB,CAAC,SAAS,EAAE,CAAC;qBAC9C;iBACF;AACH,aAAC,CAAC,CAAC;AAEP,QAAA,OAAOC,QAAI,CAAA,CAAA;;;;;;KAMV,CAAC;KACH;;AAzBM,WAAM,CAAA,MAAA,GAAGC,sBAAH,CAAU;AAIvBC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}
+{"version":3,"file":"sgds-sidenav.cjs.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport styles from \"./sgds-sidenav.scss\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = styles;\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsSidenavItem>;\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n      // No toggling when `alwaysOpen` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within sidenav-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.active = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <ul>\n          <slot @click=${this.onToggle}></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["SgdsElement","html","classMap","styles","__decorate","property","queryAssignedNodes"],"mappings":";;;;;;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQA,sBAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;mBACIC,oBAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAGC,sBAAH,CAAU;AAIvBC,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInBD,gBAAA,CAAA;IADCC,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIPD,gBAAA,CAAA;AADP,IAAAE,gCAAkB,EAAE;AAC8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

package/components/Sidenav/sgds-sidenav.cjs2.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`:host{--sidenav-theme-color:#5925dc}ul{display:flex;flex-direction:column;gap:1rem;list-style:none;padding-left:0}`;
+var css_248z = lit.css`:host{--sidenav-theme-color:#5925dc;--sidenav-sticky-top:0rem}ul{display:flex;flex-direction:column;gap:1rem;list-style:none;padding-left:0}.sticky{height:calc(100vh - var(--sidenav-sticky-top, 0rem));overflow-y:auto;position:sticky;top:var(--sidenav-sticky-top,0)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sgds-sidenav.cjs2.js.map

package/components/Sidenav/sgds-sidenav.d.ts

@@ -1,4 +1,5 @@
 import SgdsElement from "../../base/sgds-element";
+import SgdsSidenavItem from "./sgds-sidenav-item";
 /**
  * @summary The side navigation is used to display a list of links to move between pages within a related category.
  * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.
@@ -7,11 +8,19 @@ import SgdsElement from "../../base/sgds-element";
  * @slot default - Default slot for SgdsSidenavItem element.
  *
  * @cssproperty --sidenav-theme-color - overall sidenav theme color
+ * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem
  */
 export declare class SgdsSidenav extends SgdsElement {
     static styles: import("lit").CSSResultGroup;
     /** Allow sidenav items to stay open when another item is opened */
     alwaysOpen: boolean;
+    /** Apply position sticky to the sidenav */
+    sticky: boolean;
+    /** @internal */
+    private defaultNodes;
+    /** @internal */
+    get items(): SgdsSidenavItem[];
+    onToggle(event: Event): Promise<void>;
     render(): import("lit-html").TemplateResult<1>;
 }
 export default SgdsSidenav;

package/components/Sidenav/sgds-sidenav.js

@@ -1,8 +1,9 @@
 import { __decorate } from 'tslib';
 import { html } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, queryAssignedNodes } from 'lit/decorators.js';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './sgds-sidenav2.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 /**
  * @summary The side navigation is used to display a list of links to move between pages within a related category.
@@ -12,28 +13,47 @@ import css_248z from './sgds-sidenav2.js';
  * @slot default - Default slot for SgdsSidenavItem element.
  *
  * @cssproperty --sidenav-theme-color - overall sidenav theme color
+ * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem
  */
 class SgdsSidenav extends SgdsElement {
     constructor() {
         super(...arguments);
         /** Allow sidenav items to stay open when another item is opened */
         this.alwaysOpen = false;
+        /** Apply position sticky to the sidenav */
+        this.sticky = false;
+    }
+    /** @internal */
+    get items() {
+        return [...(this.defaultNodes || [])].filter((node) => typeof node.tagName !== "undefined");
+    }
+    async onToggle(event) {
+        const target = event.target;
+        const isSidenavLink = target.tagName === "SGDS-SIDENAV-LINK";
+        // Let the event pass through the DOM so that it can be
+        // prevented from the outside if a user so desires.
+        if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {
+            // No toggling when `alwaysOpen` or the user prevents it.
+            return;
+        }
+        const items = [...this.items];
+        if (items && !items.length) {
+            // no toggling when there aren't items.
+            return;
+        }
+        items.forEach(item => {
+            // Covers all elements within sidenav-item
+            if (!event.composedPath().includes(item)) {
+                // Close all the items that didn't dispatch the event.
+                item.active = false;
+            }
+        });
     }
     render() {
-        this.alwaysOpen
-            ? null
-            : this.addEventListener("sgds-toggle", (e) => {
-                const children = this.shadowRoot.querySelector("slot").assignedElements({ flatten: true });
-                for (let i = 0; i < children.length; i++) {
-                    if (e.detail.index != i) {
-                        children[i].closeItem();
-                    }
-                }
-            });
         return html `
-      <nav class="sidenav">
+      <nav class=${classMap({ sticky: this.sticky })}>
         <ul>
-          <slot></slot>
+          <slot @click=${this.onToggle}></slot>
         </ul>
       </nav>
     `;
@@ -43,6 +63,12 @@ SgdsSidenav.styles = css_248z;
 __decorate([
     property({ type: Boolean, attribute: true })
 ], SgdsSidenav.prototype, "alwaysOpen", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], SgdsSidenav.prototype, "sticky", void 0);
+__decorate([
+    queryAssignedNodes()
+], SgdsSidenav.prototype, "defaultNodes", void 0);
 
 export { SgdsSidenav, SgdsSidenav as default };
 //# sourceMappingURL=sgds-sidenav.js.map

package/components/Sidenav/sgds-sidenav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport styles from \"./sgds-sidenav.scss\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = styles;\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  render() {\n    this.alwaysOpen\n      ? null\n      : this.addEventListener(\"sgds-toggle\", (e: CustomEvent) => {\n          const children = this.shadowRoot.querySelector(\"slot\").assignedElements({ flatten: true });\n          for (let i = 0; i < children.length; i++) {\n            if (e.detail.index != i) {\n              (children[i] as SgdsSidenavItem).closeItem();\n            }\n          }\n        });\n\n    return html`\n      <nav class=\"sidenav\">\n        <ul>\n          <slot></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["styles"],"mappings":";;;;;;AAMA;;;;;;;;AAQG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;KAsBpB;IApBC,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,UAAU;AACb,cAAE,IAAI;cACJ,IAAI,CAAC,gBAAgB,CAAC,aAAa,EAAE,CAAC,CAAc,KAAI;AACtD,gBAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;AAC3F,gBAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;oBACxC,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,EAAE;AACtB,wBAAA,QAAQ,CAAC,CAAC,CAAqB,CAAC,SAAS,EAAE,CAAC;qBAC9C;iBACF;AACH,aAAC,CAAC,CAAC;AAEP,QAAA,OAAO,IAAI,CAAA,CAAA;;;;;;KAMV,CAAC;KACH;;AAzBM,WAAM,CAAA,MAAA,GAAGA,QAAH,CAAU;AAIvB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-sidenav.js","sources":["../../../src/components/Sidenav/sgds-sidenav.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedNodes } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport SgdsSidenavItem from \"./sgds-sidenav-item\";\nimport styles from \"./sgds-sidenav.scss\";\nimport { classMap } from \"lit/directives/class-map.js\";\n\n/**\n * @summary The side navigation is used to display a list of links to move between pages within a related category.\n * It is used as a secondary form of navigation where the primary navigation is located hierachically above the page frame.\n * Maximum two levels of navigations are allowed.\n *\n * @slot default - Default slot for SgdsSidenavItem element.\n *\n * @cssproperty --sidenav-theme-color - overall sidenav theme color\n * @cssproperty --sidenav-sticky-top - set the top value of the sticky sidenav. Defaults to 0rem\n */\nexport class SgdsSidenav extends SgdsElement {\n  static styles = styles;\n\n  /** Allow sidenav items to stay open when another item is opened */\n  @property({ type: Boolean, attribute: true })\n  alwaysOpen = false;\n\n  /** Apply position sticky to the sidenav */\n  @property({ type: Boolean, attribute: true })\n  sticky = false;\n\n  /** @internal */\n  @queryAssignedNodes()\n  private defaultNodes!: NodeListOf<SgdsSidenavItem>;\n\n  /** @internal */\n  get items(): SgdsSidenavItem[] {\n    return [...(this.defaultNodes || [])].filter(\n      (node: HTMLElement) => typeof node.tagName !== \"undefined\"\n    ) as SgdsSidenavItem[];\n  }\n\n  async onToggle(event: Event): Promise<void> {\n    const target = event.target as SgdsSidenavItem;\n    const isSidenavLink = target.tagName === \"SGDS-SIDENAV-LINK\";\n    // Let the event pass through the DOM so that it can be\n    // prevented from the outside if a user so desires.\n    if (this.alwaysOpen || event.defaultPrevented || isSidenavLink) {\n      // No toggling when `alwaysOpen` or the user prevents it.\n      return;\n    }\n    const items = [...this.items] as SgdsSidenavItem[];\n\n    if (items && !items.length) {\n      // no toggling when there aren't items.\n      return;\n    }\n    items.forEach(item => {\n      // Covers all elements within sidenav-item\n      if (!event.composedPath().includes(item)) {\n        // Close all the items that didn't dispatch the event.\n        item.active = false;\n      }\n    });\n  }\n\n  render() {\n    return html`\n      <nav class=${classMap({ sticky: this.sticky })}>\n        <ul>\n          <slot @click=${this.onToggle}></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidenav;\n"],"names":["styles"],"mappings":";;;;;;;AAOA;;;;;;;;;AASG;AACG,MAAO,WAAY,SAAQ,WAAW,CAAA;AAA5C,IAAA,WAAA,GAAA;;;QAKE,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAInB,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;KA8ChB;;AAvCC,IAAA,IAAI,KAAK,GAAA;QACP,OAAO,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,EAAE,CAAC,CAAC,CAAC,MAAM,CAC1C,CAAC,IAAiB,KAAK,OAAO,IAAI,CAAC,OAAO,KAAK,WAAW,CACtC,CAAC;KACxB;IAED,MAAM,QAAQ,CAAC,KAAY,EAAA;AACzB,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAyB,CAAC;AAC/C,QAAA,MAAM,aAAa,GAAG,MAAM,CAAC,OAAO,KAAK,mBAAmB,CAAC;;;QAG7D,IAAI,IAAI,CAAC,UAAU,IAAI,KAAK,CAAC,gBAAgB,IAAI,aAAa,EAAE;;YAE9D,OAAO;SACR;QACD,MAAM,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAsB,CAAC;AAEnD,QAAA,IAAI,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;;YAE1B,OAAO;SACR;AACD,QAAA,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;;YAEnB,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;;AAExC,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;aACrB;AACH,SAAC,CAAC,CAAC;KACJ;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;mBACI,QAAQ,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAA;;AAE3B,uBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;;KAGjC,CAAC;KACH;;AArDM,WAAM,CAAA,MAAA,GAAGA,QAAH,CAAU;AAIvB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAInB,UAAA,CAAA;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC9B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAIP,UAAA,CAAA;AADP,IAAA,kBAAkB,EAAE;AAC8B,CAAA,EAAA,WAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Sidenav/sgds-sidenav2.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--sidenav-theme-color:#5925dc}ul{display:flex;flex-direction:column;gap:1rem;list-style:none;padding-left:0}`;
+var css_248z = css`:host{--sidenav-theme-color:#5925dc;--sidenav-sticky-top:0rem}ul{display:flex;flex-direction:column;gap:1rem;list-style:none;padding-left:0}.sticky{height:calc(100vh - var(--sidenav-sticky-top, 0rem));overflow-y:auto;position:sticky;top:var(--sidenav-sticky-top,0)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sgds-sidenav2.js.map