@govtechsg/sgds-web-component 3.13.2-rc.0 → 3.14.1-rc.0

package/react/components/Sidebar/sgds-sidebar-section.cjs.js

@@ -10,6 +10,8 @@ var classMap_js = require('lit/directives/class-map.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var sidebarSection = require('./sidebar-section.cjs.js');
 var sidebarElement = require('../../base/sidebar-element.cjs.js');
+var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
+var sgdsDivider = require('../Divider/sgds-divider.cjs.js');
 
 /**
  * @summary Sidebar section is a container component that groups related sidebar items into organized sections.
@@ -47,19 +49,11 @@ class SgdsSidebarSection extends sidebarElement.SidebarElement {
          * @default false
          */
         this.collapsible = false;
-        /**
-         * Tracks whether this section is the last child of its parent.
-         * Used to remove bottom border from the last section.
-         * @type {boolean}
-         * @internal
-         */
-        this._isLastChild = false;
+        this.seperator = false;
     }
     connectedCallback() {
-        var _a;
         super.connectedCallback();
         this.setAttribute("role", "region");
-        this._isLastChild = ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.lastElementChild) === this;
         this._childLevel = null;
     }
     /**
@@ -78,38 +72,47 @@ class SgdsSidebarSection extends sidebarElement.SidebarElement {
       <div
         class=${classMap_js.classMap({
             "sidebar-section": true,
-            "no-border": this._isLastChild,
             "sidebar-section--collapsed": this._sidebarCollapsed
         })}
       >
-        <div
-          class="sidebar-section-label"
-          @click=${this._handleClick}
-          aria-expanded=${!this.collapsed}
-          aria-disabled=${!this.collapsible}
-          tabindex="0"
-        >
-          <span>${this.title}</span>
-          ${this.collapsible
-            ? lit.html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
+        ${this.title !== ""
+            ? lit.html `<div
+              class="sidebar-section-label"
+              @click=${this._handleClick}
+              aria-expanded=${!this.collapsed}
+              aria-disabled=${!this.collapsible}
+              tabindex="0"
+            >
+              <span>${this.title}</span>
+              ${this.collapsible
+                ? lit.html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
+                : lit.nothing}
+            </div>`
             : lit.nothing}
-        </div>
 
         <div
           class=${classMap_js.classMap({
             "sidebar-section-content": true,
-            "sidebar-section-content--collapsed": this.collapsed && this.collapsible
+            "sidebar-section-content--collapsed": this.collapsed && this.collapsible,
+            "sidebar-section-seperator": this.seperator
         })}
         >
           <div>
             <slot @slotchange=${this._handleSlotChange}></slot>
           </div>
         </div>
+
+        ${this.seperator ? lit.html `<sgds-divider></sgds-divider>` : lit.nothing}
       </div>
     `;
     }
 }
 SgdsSidebarSection.styles = [...sgdsElement["default"].styles, sidebarSection["default"]];
+/** @internal */
+SgdsSidebarSection.dependencies = {
+    "sgds-icon": sgdsIcon.SgdsIcon,
+    "sgds-divider": sgdsDivider.SgdsDivider
+};
 tslib.__decorate([
     decorators_js.property({ type: String, reflect: true })
 ], SgdsSidebarSection.prototype, "title", void 0);
@@ -120,8 +123,8 @@ tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsSidebarSection.prototype, "collapsible", void 0);
 tslib.__decorate([
-    decorators_js.state()
-], SgdsSidebarSection.prototype, "_isLastChild", void 0);
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsSidebarSection.prototype, "seperator", void 0);
 
 exports.SgdsSidebarSection = SgdsSidebarSection;
 exports["default"] = SgdsSidebarSection;

package/react/components/Sidebar/sgds-sidebar-section.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar-section.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-section.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarSectionStyle from \"./sidebar-section.css\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar section is a container component that groups related sidebar items into organized sections.\n * It displays a section header/title and can optionally be collapsible. Sections help organize navigation\n * items hierarchically within the sidebar, providing visual separation between different areas of functionality.\n *\n * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section\n */\nexport class SgdsSidebarSection extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarSectionStyle];\n\n  /**\n   * The display title/label for the sidebar section header.\n   * Always visible in the sidebar, used to group related items.\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * Controls whether the section content is expanded or collapsed.\n   * When true, the section content is hidden but the section header remains visible.\n   * Only applicable when the section is collapsible.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * Enables a collapsible section header with expand/collapse toggle functionality.\n   * When true, users can click the header to toggle section visibility.\n   * When false, the section header is display-only and not interactive.\n   * @attribute collapsible\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n\n  /**\n   * Tracks whether this section is the last child of its parent.\n   * Used to remove bottom border from the last section.\n   * @type {boolean}\n   * @internal\n   */\n  @state() private _isLastChild = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"region\");\n    this._isLastChild = this.parentElement?.lastElementChild === this;\n    this._childLevel = null;\n  }\n\n  /**\n   * Handles click events on the section label.\n   * Toggles the collapsed state to show/hide section content.\n   * Only called if the section is collapsible (collapsible prop is true).\n   * @private\n   * @returns {void}\n   */\n  override _handleClick() {\n    if (this.collapsible) this.collapsed = !this.collapsed;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-section\": true,\n          \"no-border\": this._isLastChild,\n          \"sidebar-section--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div\n          class=\"sidebar-section-label\"\n          @click=${this._handleClick}\n          aria-expanded=${!this.collapsed}\n          aria-disabled=${!this.collapsible}\n          tabindex=\"0\"\n        >\n          <span>${this.title}</span>\n          ${this.collapsible\n            ? html`<sgds-icon name=${this.collapsed ? \"chevron-down\" : \"chevron-up\"} size=\"sm\"></sgds-icon>`\n            : nothing}\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-section-content\": true,\n            \"sidebar-section-content--collapsed\": this.collapsed && this.collapsible\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarSection;\n"],"names":["SidebarElement","html","classMap","nothing","SgdsElement","sidebarSectionStyle","__decorate","property","state"],"mappings":"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"}
+{"version":3,"file":"sgds-sidebar-section.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-section.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarSectionStyle from \"./sidebar-section.css\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsDivider from \"../Divider/sgds-divider\";\n\n/**\n * @summary Sidebar section is a container component that groups related sidebar items into organized sections.\n * It displays a section header/title and can optionally be collapsible. Sections help organize navigation\n * items hierarchically within the sidebar, providing visual separation between different areas of functionality.\n *\n * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section\n */\nexport class SgdsSidebarSection extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarSectionStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-divider\": SgdsDivider\n  };\n\n  /**\n   * The display title/label for the sidebar section header.\n   * Always visible in the sidebar, used to group related items.\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * Controls whether the section content is expanded or collapsed.\n   * When true, the section content is hidden but the section header remains visible.\n   * Only applicable when the section is collapsible.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * Enables a collapsible section header with expand/collapse toggle functionality.\n   * When true, users can click the header to toggle section visibility.\n   * When false, the section header is display-only and not interactive.\n   * @attribute collapsible\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) seperator = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"region\");\n    this._childLevel = null;\n  }\n\n  /**\n   * Handles click events on the section label.\n   * Toggles the collapsed state to show/hide section content.\n   * Only called if the section is collapsible (collapsible prop is true).\n   * @private\n   * @returns {void}\n   */\n  override _handleClick() {\n    if (this.collapsible) this.collapsed = !this.collapsed;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-section\": true,\n          \"sidebar-section--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        ${this.title !== \"\"\n          ? html`<div\n              class=\"sidebar-section-label\"\n              @click=${this._handleClick}\n              aria-expanded=${!this.collapsed}\n              aria-disabled=${!this.collapsible}\n              tabindex=\"0\"\n            >\n              <span>${this.title}</span>\n              ${this.collapsible\n                ? html`<sgds-icon name=${this.collapsed ? \"chevron-down\" : \"chevron-up\"} size=\"sm\"></sgds-icon>`\n                : nothing}\n            </div>`\n          : nothing}\n\n        <div\n          class=${classMap({\n            \"sidebar-section-content\": true,\n            \"sidebar-section-content--collapsed\": this.collapsed && this.collapsible,\n            \"sidebar-section-seperator\": this.seperator\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n\n        ${this.seperator ? html`<sgds-divider></sgds-divider>` : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarSection;\n"],"names":["SidebarElement","html","classMap","nothing","SgdsElement","sidebarSectionStyle","SgdsIcon","SgdsDivider","__decorate","property"],"mappings":"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"}

package/react/components/Sidebar/sgds-sidebar-section.js

@@ -1,11 +1,13 @@
 'use client';
 import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
-import { property, state } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import SgdsElement from '../../base/sgds-element.js';
 import css_248z from './sidebar-section.js';
 import { SidebarElement } from '../../base/sidebar-element.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
+import { SgdsDivider } from '../Divider/sgds-divider.js';
 
 /**
  * @summary Sidebar section is a container component that groups related sidebar items into organized sections.
@@ -43,19 +45,11 @@ class SgdsSidebarSection extends SidebarElement {
          * @default false
          */
         this.collapsible = false;
-        /**
-         * Tracks whether this section is the last child of its parent.
-         * Used to remove bottom border from the last section.
-         * @type {boolean}
-         * @internal
-         */
-        this._isLastChild = false;
+        this.seperator = false;
     }
     connectedCallback() {
-        var _a;
         super.connectedCallback();
         this.setAttribute("role", "region");
-        this._isLastChild = ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.lastElementChild) === this;
         this._childLevel = null;
     }
     /**
@@ -74,38 +68,47 @@ class SgdsSidebarSection extends SidebarElement {
       <div
         class=${classMap({
             "sidebar-section": true,
-            "no-border": this._isLastChild,
             "sidebar-section--collapsed": this._sidebarCollapsed
         })}
       >
-        <div
-          class="sidebar-section-label"
-          @click=${this._handleClick}
-          aria-expanded=${!this.collapsed}
-          aria-disabled=${!this.collapsible}
-          tabindex="0"
-        >
-          <span>${this.title}</span>
-          ${this.collapsible
-            ? html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
+        ${this.title !== ""
+            ? html `<div
+              class="sidebar-section-label"
+              @click=${this._handleClick}
+              aria-expanded=${!this.collapsed}
+              aria-disabled=${!this.collapsible}
+              tabindex="0"
+            >
+              <span>${this.title}</span>
+              ${this.collapsible
+                ? html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
+                : nothing}
+            </div>`
             : nothing}
-        </div>
 
         <div
           class=${classMap({
             "sidebar-section-content": true,
-            "sidebar-section-content--collapsed": this.collapsed && this.collapsible
+            "sidebar-section-content--collapsed": this.collapsed && this.collapsible,
+            "sidebar-section-seperator": this.seperator
         })}
         >
           <div>
             <slot @slotchange=${this._handleSlotChange}></slot>
           </div>
         </div>
+
+        ${this.seperator ? html `<sgds-divider></sgds-divider>` : nothing}
       </div>
     `;
     }
 }
 SgdsSidebarSection.styles = [...SgdsElement.styles, css_248z];
+/** @internal */
+SgdsSidebarSection.dependencies = {
+    "sgds-icon": SgdsIcon,
+    "sgds-divider": SgdsDivider
+};
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsSidebarSection.prototype, "title", void 0);
@@ -116,8 +119,8 @@ __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsSidebarSection.prototype, "collapsible", void 0);
 __decorate([
-    state()
-], SgdsSidebarSection.prototype, "_isLastChild", void 0);
+    property({ type: Boolean, reflect: true })
+], SgdsSidebarSection.prototype, "seperator", void 0);
 
 export { SgdsSidebarSection, SgdsSidebarSection as default };
 //# sourceMappingURL=sgds-sidebar-section.js.map

package/react/components/Sidebar/sgds-sidebar-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar-section.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-section.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarSectionStyle from \"./sidebar-section.css\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar section is a container component that groups related sidebar items into organized sections.\n * It displays a section header/title and can optionally be collapsible. Sections help organize navigation\n * items hierarchically within the sidebar, providing visual separation between different areas of functionality.\n *\n * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section\n */\nexport class SgdsSidebarSection extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarSectionStyle];\n\n  /**\n   * The display title/label for the sidebar section header.\n   * Always visible in the sidebar, used to group related items.\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * Controls whether the section content is expanded or collapsed.\n   * When true, the section content is hidden but the section header remains visible.\n   * Only applicable when the section is collapsible.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * Enables a collapsible section header with expand/collapse toggle functionality.\n   * When true, users can click the header to toggle section visibility.\n   * When false, the section header is display-only and not interactive.\n   * @attribute collapsible\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n\n  /**\n   * Tracks whether this section is the last child of its parent.\n   * Used to remove bottom border from the last section.\n   * @type {boolean}\n   * @internal\n   */\n  @state() private _isLastChild = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"region\");\n    this._isLastChild = this.parentElement?.lastElementChild === this;\n    this._childLevel = null;\n  }\n\n  /**\n   * Handles click events on the section label.\n   * Toggles the collapsed state to show/hide section content.\n   * Only called if the section is collapsible (collapsible prop is true).\n   * @private\n   * @returns {void}\n   */\n  override _handleClick() {\n    if (this.collapsible) this.collapsed = !this.collapsed;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-section\": true,\n          \"no-border\": this._isLastChild,\n          \"sidebar-section--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div\n          class=\"sidebar-section-label\"\n          @click=${this._handleClick}\n          aria-expanded=${!this.collapsed}\n          aria-disabled=${!this.collapsible}\n          tabindex=\"0\"\n        >\n          <span>${this.title}</span>\n          ${this.collapsible\n            ? html`<sgds-icon name=${this.collapsed ? \"chevron-down\" : \"chevron-up\"} size=\"sm\"></sgds-icon>`\n            : nothing}\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-section-content\": true,\n            \"sidebar-section-content--collapsed\": this.collapsed && this.collapsible\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarSection;\n"],"names":["sidebarSectionStyle"],"mappings":";;;;;;;;;AAQA;;;;;;AAMG;AACG,MAAO,kBAAmB,SAAQ,cAAc,CAAA;AAAtD,IAAA,WAAA,GAAA;;AAGE;;;;;;AAMG;QACwC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AAEtD;;;;;;;AAOG;QACyC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAE9D;;;;;;;AAOG;QACyC,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAEhE;;;;;AAKG;QACc,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;KAuDvC;IArDC,iBAAiB,GAAA;;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,MAAK,IAAI,CAAC;AAClE,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB;AAED;;;;;;AAMG;IACM,YAAY,GAAA;QACnB,IAAI,IAAI,CAAC,WAAW;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,WAAW,EAAE,IAAI,CAAC,YAAY;YAC9B,4BAA4B,EAAE,IAAI,CAAC,iBAAiB;SACrD,CAAC,CAAA;;;;AAIS,iBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;0BACV,CAAC,IAAI,CAAC,SAAS,CAAA;0BACf,CAAC,IAAI,CAAC,WAAW,CAAA;;;AAGzB,gBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AAChB,UAAA,EAAA,IAAI,CAAC,WAAW;AAChB,cAAE,IAAI,CAAA,CAAA,gBAAA,EAAmB,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,CAAyB,uBAAA,CAAA;AAChG,cAAE,OAAO,CAAA;;;;AAIH,gBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,yBAAyB,EAAE,IAAI;AAC/B,YAAA,oCAAoC,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW;SACzE,CAAC,CAAA;;;AAGoB,8BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;KAIjD,CAAC;KACH;;AA3FM,kBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAmB,CAA9C,CAAgD;AASlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUV,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUlB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/C,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA8B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-sidebar-section.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-section.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarSectionStyle from \"./sidebar-section.css\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsDivider from \"../Divider/sgds-divider\";\n\n/**\n * @summary Sidebar section is a container component that groups related sidebar items into organized sections.\n * It displays a section header/title and can optionally be collapsible. Sections help organize navigation\n * items hierarchically within the sidebar, providing visual separation between different areas of functionality.\n *\n * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section\n */\nexport class SgdsSidebarSection extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarSectionStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-divider\": SgdsDivider\n  };\n\n  /**\n   * The display title/label for the sidebar section header.\n   * Always visible in the sidebar, used to group related items.\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * Controls whether the section content is expanded or collapsed.\n   * When true, the section content is hidden but the section header remains visible.\n   * Only applicable when the section is collapsible.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * Enables a collapsible section header with expand/collapse toggle functionality.\n   * When true, users can click the header to toggle section visibility.\n   * When false, the section header is display-only and not interactive.\n   * @attribute collapsible\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n  @property({ type: Boolean, reflect: true }) seperator = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"region\");\n    this._childLevel = null;\n  }\n\n  /**\n   * Handles click events on the section label.\n   * Toggles the collapsed state to show/hide section content.\n   * Only called if the section is collapsible (collapsible prop is true).\n   * @private\n   * @returns {void}\n   */\n  override _handleClick() {\n    if (this.collapsible) this.collapsed = !this.collapsed;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-section\": true,\n          \"sidebar-section--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        ${this.title !== \"\"\n          ? html`<div\n              class=\"sidebar-section-label\"\n              @click=${this._handleClick}\n              aria-expanded=${!this.collapsed}\n              aria-disabled=${!this.collapsible}\n              tabindex=\"0\"\n            >\n              <span>${this.title}</span>\n              ${this.collapsible\n                ? html`<sgds-icon name=${this.collapsed ? \"chevron-down\" : \"chevron-up\"} size=\"sm\"></sgds-icon>`\n                : nothing}\n            </div>`\n          : nothing}\n\n        <div\n          class=${classMap({\n            \"sidebar-section-content\": true,\n            \"sidebar-section-content--collapsed\": this.collapsed && this.collapsible,\n            \"sidebar-section-seperator\": this.seperator\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n\n        ${this.seperator ? html`<sgds-divider></sgds-divider>` : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarSection;\n"],"names":["sidebarSectionStyle"],"mappings":"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"}

package/react/components/Sidebar/sgds-sidebar.cjs.js

@@ -12,7 +12,10 @@ var sidebar = require('./sidebar.cjs.js');
 var context = require('@lit/context');
 var sidebarContext = require('./sidebar-context.cjs.js');
 var watch = require('../../utils/watch.cjs.js');
+var sgdsIconButton = require('../IconButton/sgds-icon-button.cjs.js');
+var breakpoints = require('../../utils/breakpoints.cjs.js');
 
+const SGDS_SIDEBAR_GROUP = "sgds-sidebar-group";
 /**
  * @summary Sidebar is a collapsible navigation component that displays menu items and groups.
  * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.
@@ -31,14 +34,14 @@ var watch = require('../../utils/watch.cjs.js');
  * - Enter/Space: Activate focused item or toggle group
  * - Tab: Standard focus management to interactive elements
  *
- * @slot - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements
- * @slot brandName - Insert brand/logo content in sidebar header
+ * @slot default - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements
+ * @slot top - Insert brand/logo content in sidebar header
+ * @slot bottom - Insert content in sidebar footer
  *
  * @fires sgds-select - Emitted when a sidebar item or group is selected.
  *   Event detail: { activeItem: string } - name of the selected item
  *
  */
-const SGDS_SIDEBAR_GROUP = "sgds-sidebar-group";
 class SgdsSidebar extends sgdsElement["default"] {
     constructor() {
         super(...arguments);
@@ -70,6 +73,16 @@ class SgdsSidebar extends sgdsElement["default"] {
         this._drawerItems = [];
         /** @internal Indicates whether a drawer overlay is currently open */
         this._showDrawer = false;
+        /** @internal */
+        this._isMobile = false;
+        /**
+         * Handles clicks outside the sidebar to close the drawer overlay.
+         * Closes the nested items drawer when user clicks outside the sidebar.
+         * Maintains drawer visibility when clicking within sidebar boundaries.
+         * @private
+         * @param {MouseEvent} e - The click event from the document
+         * @returns {void}
+         */
         this._handleClickOutOfElement = (e) => {
             if (!this._sidebarActiveGroup)
                 return;
@@ -87,11 +100,21 @@ class SgdsSidebar extends sgdsElement["default"] {
             this._handleActive();
             document.addEventListener("click", this._handleClickOutOfElement);
         });
+        window.addEventListener("resize", this._handleResize.bind(this));
+        this._handleResize();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener("click", this._handleClickOutOfElement);
+        window.removeEventListener("resize", this._handleResize.bind(this));
     }
+    /**
+     * Watch handler for the collapsed property.
+     * Syncs the internal collapsed state with the property value.
+     * Triggers re-render and updates all child items' collapsed styling.
+     * @private
+     * @returns {void}
+     */
     _handleCollapsed() {
         this._sidebarCollapsed = this.collapsed;
     }
@@ -138,6 +161,13 @@ class SgdsSidebar extends sgdsElement["default"] {
             }
         }
     }
+    /**
+     * Watch handler for the active property.
+     * Finds and sets the active item by name from the sidebar hierarchy.
+     * Clears active state when active property is empty.
+     * @private
+     * @returns {void}
+     */
     _handleActive() {
         // Return early if active is empty
         if (!this.active) {
@@ -146,6 +176,13 @@ class SgdsSidebar extends sgdsElement["default"] {
         }
         this._sidebarActiveItem = this._getActiveChild();
     }
+    /**
+     * Recursively searches the sidebar hierarchy for an item matching the active name.
+     * Traverses through all nested levels to find the target element.
+     * Used to support programmatic selection of deeply nested items.
+     * @private
+     * @returns {SidebarElement | null} The matching sidebar element or null if not found
+     */
     _getActiveChild() {
         const findByName = (elements) => {
             var _a;
@@ -163,6 +200,19 @@ class SgdsSidebar extends sgdsElement["default"] {
         };
         return findByName(this._defaultNodes);
     }
+    /**
+     * Handles window resize events to manage responsive behavior.
+     * Automatically collapses sidebar on mobile devices (width <= SM_BREAKPOINT).
+     * Expands sidebar on larger screens.
+     * @private
+     * @returns {void}
+     */ _handleResize() {
+        const isMobile = window.innerWidth <= breakpoints.SM_BREAKPOINT;
+        if (isMobile !== this._isMobile) {
+            this._isMobile = isMobile;
+            this.collapsed = this._isMobile;
+        }
+    }
     /**
      * Manages the drawer overlay content based on the selected parent item.
      * If element is provided: Opens drawer for that element's children.
@@ -244,9 +294,9 @@ class SgdsSidebar extends sgdsElement["default"] {
     }
     /**
      * Toggles the sidebar between collapsed and expanded states.
-     * Updates the collapsed property and emits sgds-sidebar-toggle event.
-     *
-     * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state
+     * Updates the collapsed property to show/hide labels and adjust item spacing.
+     * Called when user clicks the collapse/expand button in the sidebar header.
+     * @private
      * @returns {void}
      */
     toggleCollapsed() {
@@ -262,44 +312,65 @@ class SgdsSidebar extends sgdsElement["default"] {
             "sidebar--collapsed": this._sidebarCollapsed
         })}
       >
-        <div class="sidebar-wrapper">
-          <div class="sidebar-header">
-            <div class="sidebar-brand-name">
-              <slot name="brandName"></slot>
+        <div class="sidebar-main">
+          <div class="sidebar-wrapper">
+            <div class="sidebar-top">
+              <div class="sidebar-brand-name">
+                <slot name="top"></slot>
+              </div>
+
+              <sgds-icon-button
+                name=${this._sidebarCollapsed ? "sidebar-expand" : "sidebar-collapse"}
+                variant="ghost"
+                tone="neutral"
+                size="sm"
+                @click=${this.toggleCollapsed}
+                aria-label=${this._sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+                aria-expanded=${!this._sidebarCollapsed}
+              ></sgds-icon-button>
             </div>
 
-            <sgds-icon-button
-              name=${this._sidebarCollapsed ? "sidebar-expand" : "sidebar-collapse"}
-              variant="ghost"
-              tone="neutral"
-              size="sm"
-              @click=${this.toggleCollapsed}
-              aria-label=${this._sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-              aria-expanded=${!this._sidebarCollapsed}
-            ></sgds-icon-button>
-          </div>
+            <nav
+              class="sidebar-content"
+              role="navigation"
+              aria-label="Main navigation"
+              aria-activedescendant=${((_a = this._sidebarActiveItem) === null || _a === void 0 ? void 0 : _a.name) || ""}
+            >
+              <slot></slot>
+            </nav>
 
-          <nav class="sidebar-content" role="navigation" aria-label="Main navigation" aria-activedescendant=${((_a = this._sidebarActiveItem) === null || _a === void 0 ? void 0 : _a.name) || ""}>
-            <slot></slot>
-          </nav>
+            <slot name="bottom"></slot>
+          </div>
         </div>
 
-          <div
-            class=${classMap_js.classMap({
+        <div
+          class=${classMap_js.classMap({
             "sidebar-nested-overlay": true,
             show: this._showDrawer
         })}
-            role="dialog"
-            aria-label=${((_b = this._sidebarActiveGroup) === null || _b === void 0 ? void 0 : _b.title) ? `Nested items for ${this._sidebarActiveGroup.title}` : ""}
-          >
-            ${this._drawerItems}
-          </div>
+          role="dialog"
+          aria-label=${((_b = this._sidebarActiveGroup) === null || _b === void 0 ? void 0 : _b.title) ? `Nested items for ${this._sidebarActiveGroup.title}` : ""}
+        >
+          <sgds-icon-button
+            name="chevron-left"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            @click=${() => (this._showDrawer = false)}
+            aria-label=${"Close drawer"}
+            aria-expanded=${this._showDrawer}
+          ></sgds-icon-button>
+
+          ${this._drawerItems}
         </div>
       </div>
     `;
     }
 }
 SgdsSidebar.styles = [...sgdsElement["default"].styles, sidebar["default"]];
+SgdsSidebar.dependencies = {
+    "sgds-icon-button": sgdsIconButton.SgdsIconButton
+};
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsSidebar.prototype, "collapsed", void 0);
@@ -329,6 +400,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.queryAssignedElements()
 ], SgdsSidebar.prototype, "_defaultNodes", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsSidebar.prototype, "_isMobile", void 0);
 tslib.__decorate([
     watch.watch("collapsed")
 ], SgdsSidebar.prototype, "_handleCollapsed", null);

package/react/components/Sidebar/sgds-sidebar.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar.ts"],"sourcesContent":["import { html, PropertyValues } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarStyle from \"./sidebar.css\";\n\nimport { provide } from \"@lit/context\";\nimport {\n  SidebarCollapsed,\n  SidebarActiveItem,\n  SidebarActiveGroup,\n  SidebarDrawerItems,\n  SidebarDrawerOpen\n} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\n\n/**\n * @summary Sidebar is a collapsible navigation component that displays menu items and groups.\n * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.\n * The sidebar coordinates selection and navigation across nested items using context providers and custom events.\n *\n * Features:\n * - Collapsible state for space-saving layouts with icon-only mode\n * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups\n * - Keyboard navigation with full ARIA support for accessibility\n * - Programmatic link navigation support with anchor elements\n * - Active item tracking and synchronized state management\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between sidebar items and groups\n * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays\n * - Enter/Space: Activate focused item or toggle group\n * - Tab: Standard focus management to interactive elements\n *\n * @slot - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements\n * @slot brandName - Insert brand/logo content in sidebar header\n *\n * @fires sgds-select - Emitted when a sidebar item or group is selected.\n *   Event detail: { activeItem: string } - name of the selected item\n *\n */\n\nconst SGDS_SIDEBAR_GROUP = \"sgds-sidebar-group\";\nexport class SgdsSidebar extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidebarStyle];\n\n  /**\n   * Controls whether the sidebar is collapsed or expanded.\n   * When true, the sidebar is in collapsed state showing only icons.\n   * When false, the sidebar is expanded displaying full labels and content.\n   * Affects all child items by toggling visibility of labels and adjusting spacing.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The name of the currently active sidebar item or group.\n   * Reflects the selected item and allows external control of sidebar selection.\n   * Used to synchronize sidebar state with external navigation state or programmatic selection.\n   * When set, the corresponding item with matching `name` attribute will be highlighted as active.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Tracks the collapsed state and provides it via context to all child elements */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed: boolean;\n\n  /** @internal Tracks the currently active item and provides it via context to all child elements */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides the list of items shown in the drawer overlay */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems = [];\n\n  /** @internal Indicates whether a drawer overlay is currently open */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"navigation\");\n    this.setAttribute(\"aria-label\", \"Main navigation\");\n\n    this.updateComplete.then(() => {\n      this.addItemListeners();\n      this._handleActive();\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n  }\n\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    this._sidebarCollapsed = this.collapsed;\n  }\n\n  /**\n   * Handles changes to the active item selection.\n   * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.\n   * For root-level items with children, opens the drawer overlay.\n   * For nested items, expands parent groups and opens the appropriate drawer if needed.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem() {\n    if (!this._sidebarActiveItem) return;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 0) {\n      // First level of navigation, check if need to open drawer or not.\n      if (this._sidebarActiveItem._childElements.length > 0) {\n        this._setNodesToDrawer(this._sidebarActiveItem as SgdsSidebarGroup);\n      } else {\n        this._revertNodesToParent();\n      }\n    } else {\n      // when nested, we will find the top level of parent\n      let parentEle = this._sidebarActiveItem.parentElement as SgdsSidebarGroup;\n\n      while (parentEle._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n        if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n          if (parentEle._childLevel === 0) {\n            // when active item not in drawer, set nodes into drawer.\n            if (!parentEle.classList.contains(\"sidebar-nested-overlay\")) {\n              this._setNodesToDrawer(parentEle);\n            }\n          }\n\n          parentEle._selected = true;\n\n          parentEle._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active\n          parentEle = parentEle.parentElement as SgdsSidebarGroup;\n        }\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\n\n  @watch(\"active\")\n  _handleActive() {\n    // Return early if active is empty\n    if (!this.active) {\n      this._sidebarActiveItem = null;\n      return;\n    }\n\n    this._sidebarActiveItem = this._getActiveChild();\n  }\n\n  private _getActiveChild() {\n    const findByName = (elements: SidebarElement[]): SidebarElement | null => {\n      for (const element of elements) {\n        if (element.name === this.active) {\n          return element;\n        }\n        if (element._childElements?.length) {\n          const found = findByName(element._childElements);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    return findByName(this._defaultNodes);\n  }\n\n  /**\n   * Manages the drawer overlay content based on the selected parent item.\n   * If element is provided: Opens drawer for that element's children.\n   * If element is undefined: Closes drawer and reverts items to their parent.\n   * @private\n   * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes drawer.\n   * @returns {void}\n   */\n  private _setNodesToDrawer(element: SgdsSidebarGroup) {\n    if (!element) return;\n\n    // when there is element, we will revert the nodes of the previous active group before setting new value into the active group\n    if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {\n      this._revertNodesToParent();\n    }\n\n    this._sidebarActiveGroup = element;\n\n    // when there is an active group set, always set new menu items\n    this._drawerItems = []; // always set to empty to prevent duplicate\n    const menuItems = this._sidebarActiveGroup.querySelectorAll(\n      \":scope > sgds-sidebar-group, :scope > sgds-sidebar-item\"\n    );\n    menuItems.forEach(e => {\n      this._drawerItems.push(e);\n    });\n  }\n\n  /**\n   * Reverts nested items back to their original parent element.\n   * Clears the drawer overlay content and updates selected attributes.\n   * Called when closing the drawer or switching to a different parent item.\n   * @private\n   * @param {SgdsSidebarItem} element - The parent item to return nodes to\n   * @returns {void}\n   */\n  private _revertNodesToParent() {\n    if (this._sidebarActiveGroup) {\n      this._drawerItems.forEach(e => {\n        this._sidebarActiveGroup.append(e);\n      });\n\n      this._drawerItems = [];\n    }\n\n    this._sidebarActiveGroup = null;\n  }\n\n  /**\n   * Attaches event listeners to all direct child sidebar items.\n   * Handles item selection events and drawer overlay state management.\n   * Manages emitting sgds-select custom events for external components.\n   * @private\n   * @returns {void}\n   */\n  private addItemListeners() {\n    const items = this.querySelectorAll(\"sgds-sidebar-item\");\n    const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);\n    const allItems = [...items, ...groups] as SidebarElement[];\n\n    allItems.forEach(item => {\n      item.addEventListener(\"i-sgds-click\", (e: CustomEvent) => {\n        const element = e.detail.element as SidebarElement;\n\n        if (element === this._sidebarActiveGroup) {\n          // just toggle drawer\n          this._showDrawer = !this._showDrawer;\n        } else {\n          if (this.active !== element.name) {\n            this.active = element.name;\n            allItems.forEach(item => (item._selected = false));\n          }\n\n          if (element._childElements.length > 0) {\n            this._showDrawer = true;\n          } else {\n            this._showDrawer = false;\n\n            // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves\n            const anchorLink = item.querySelector(\":scope > a\") as HTMLAnchorElement;\n            if (anchorLink) anchorLink.click();\n          }\n\n          // Emit sgds-select event when an item is selected\n          this.emit(\"sgds-select\", { detail: { activeItem: element.name } });\n        }\n      });\n    });\n  }\n\n  /**\n   * Toggles the sidebar between collapsed and expanded states.\n   * Updates the collapsed property and emits sgds-sidebar-toggle event.\n   *\n   * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state\n   * @returns {void}\n   */\n  private toggleCollapsed() {\n    this.collapsed = !this.collapsed;\n  }\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this._sidebarActiveGroup) return;\n\n    if (!e.composedPath().includes(this)) {\n      this._showDrawer = false;\n    }\n  };\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--expanded\": !this._sidebarCollapsed,\n          \"sidebar--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div class=\"sidebar-wrapper\">\n          <div class=\"sidebar-header\">\n            <div class=\"sidebar-brand-name\">\n              <slot name=\"brandName\"></slot>\n            </div>\n\n            <sgds-icon-button\n              name=${this._sidebarCollapsed ? \"sidebar-expand\" : \"sidebar-collapse\"}\n              variant=\"ghost\"\n              tone=\"neutral\"\n              size=\"sm\"\n              @click=${this.toggleCollapsed}\n              aria-label=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n              aria-expanded=${!this._sidebarCollapsed}\n            ></sgds-icon-button>\n          </div>\n\n          <nav class=\"sidebar-content\" role=\"navigation\" aria-label=\"Main navigation\" aria-activedescendant=${\n            this._sidebarActiveItem?.name || \"\"\n          }>\n            <slot></slot>\n          </nav>\n        </div>\n\n          <div\n            class=${classMap({\n              \"sidebar-nested-overlay\": true,\n              show: this._showDrawer\n            })}\n            role=\"dialog\"\n            aria-label=${this._sidebarActiveGroup?.title ? `Nested items for ${this._sidebarActiveGroup.title}` : \"\"}\n          >\n            ${this._drawerItems}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebar;\n"],"names":["SgdsElement","html","classMap","sidebarStyle","__decorate","property","provide","SidebarActiveGroup","state","SidebarCollapsed","SidebarActiveItem","SidebarDrawerItems","SidebarDrawerOpen","queryAssignedElements","watch"],"mappings":"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"}
+{"version":3,"file":"sgds-sidebar.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarStyle from \"./sidebar.css\";\n\nimport { provide } from \"@lit/context\";\nimport {\n  SidebarCollapsed,\n  SidebarActiveItem,\n  SidebarActiveGroup,\n  SidebarDrawerItems,\n  SidebarDrawerOpen\n} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SM_BREAKPOINT } from \"../../utils/breakpoints\";\n\nconst SGDS_SIDEBAR_GROUP = \"sgds-sidebar-group\";\n\n/**\n * @summary Sidebar is a collapsible navigation component that displays menu items and groups.\n * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.\n * The sidebar coordinates selection and navigation across nested items using context providers and custom events.\n *\n * Features:\n * - Collapsible state for space-saving layouts with icon-only mode\n * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups\n * - Keyboard navigation with full ARIA support for accessibility\n * - Programmatic link navigation support with anchor elements\n * - Active item tracking and synchronized state management\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between sidebar items and groups\n * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays\n * - Enter/Space: Activate focused item or toggle group\n * - Tab: Standard focus management to interactive elements\n *\n * @slot default - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements\n * @slot top - Insert brand/logo content in sidebar header\n * @slot bottom - Insert content in sidebar footer\n *\n * @fires sgds-select - Emitted when a sidebar item or group is selected.\n *   Event detail: { activeItem: string } - name of the selected item\n *\n */\n\nexport class SgdsSidebar extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidebarStyle];\n\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /**\n   * Controls whether the sidebar is collapsed or expanded.\n   * When true, the sidebar is in collapsed state showing only icons.\n   * When false, the sidebar is expanded displaying full labels and content.\n   * Affects all child items by toggling visibility of labels and adjusting spacing.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The name of the currently active sidebar item or group.\n   * Reflects the selected item and allows external control of sidebar selection.\n   * Used to synchronize sidebar state with external navigation state or programmatic selection.\n   * When set, the corresponding item with matching `name` attribute will be highlighted as active.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Tracks the collapsed state and provides it via context to all child elements */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed: boolean;\n\n  /** @internal Tracks the currently active item and provides it via context to all child elements */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides the list of items shown in the drawer overlay */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems = [];\n\n  /** @internal Indicates whether a drawer overlay is currently open */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  /** @internal */\n  @state()\n  private _isMobile = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"navigation\");\n    this.setAttribute(\"aria-label\", \"Main navigation\");\n\n    this.updateComplete.then(() => {\n      this.addItemListeners();\n      this._handleActive();\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    });\n\n    window.addEventListener(\"resize\", this._handleResize.bind(this));\n    this._handleResize();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n    window.removeEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  /**\n   * Watch handler for the collapsed property.\n   * Syncs the internal collapsed state with the property value.\n   * Triggers re-render and updates all child items' collapsed styling.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    this._sidebarCollapsed = this.collapsed;\n  }\n\n  /**\n   * Handles changes to the active item selection.\n   * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.\n   * For root-level items with children, opens the drawer overlay.\n   * For nested items, expands parent groups and opens the appropriate drawer if needed.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem() {\n    if (!this._sidebarActiveItem) return;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 0) {\n      // First level of navigation, check if need to open drawer or not.\n      if (this._sidebarActiveItem._childElements.length > 0) {\n        this._setNodesToDrawer(this._sidebarActiveItem as SgdsSidebarGroup);\n      } else {\n        this._revertNodesToParent();\n      }\n    } else {\n      // when nested, we will find the top level of parent\n      let parentEle = this._sidebarActiveItem.parentElement as SgdsSidebarGroup;\n\n      while (parentEle._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n        if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n          if (parentEle._childLevel === 0) {\n            // when active item not in drawer, set nodes into drawer.\n            if (!parentEle.classList.contains(\"sidebar-nested-overlay\")) {\n              this._setNodesToDrawer(parentEle);\n            }\n          }\n\n          parentEle._selected = true;\n\n          parentEle._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active\n          parentEle = parentEle.parentElement as SgdsSidebarGroup;\n        }\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\n\n  /**\n   * Watch handler for the active property.\n   * Finds and sets the active item by name from the sidebar hierarchy.\n   * Clears active state when active property is empty.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"active\")\n  _handleActive() {\n    // Return early if active is empty\n    if (!this.active) {\n      this._sidebarActiveItem = null;\n      return;\n    }\n\n    this._sidebarActiveItem = this._getActiveChild();\n  }\n\n  /**\n   * Recursively searches the sidebar hierarchy for an item matching the active name.\n   * Traverses through all nested levels to find the target element.\n   * Used to support programmatic selection of deeply nested items.\n   * @private\n   * @returns {SidebarElement | null} The matching sidebar element or null if not found\n   */\n  private _getActiveChild() {\n    const findByName = (elements: SidebarElement[]): SidebarElement | null => {\n      for (const element of elements) {\n        if (element.name === this.active) {\n          return element;\n        }\n        if (element._childElements?.length) {\n          const found = findByName(element._childElements);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    return findByName(this._defaultNodes);\n  }\n  /**\n   * Handles window resize events to manage responsive behavior.\n   * Automatically collapses sidebar on mobile devices (width <= SM_BREAKPOINT).\n   * Expands sidebar on larger screens.\n   * @private\n   * @returns {void}\n   */ private _handleResize() {\n    const isMobile = window.innerWidth <= SM_BREAKPOINT;\n\n    if (isMobile !== this._isMobile) {\n      this._isMobile = isMobile;\n      this.collapsed = this._isMobile;\n    }\n  }\n\n  /**\n   * Manages the drawer overlay content based on the selected parent item.\n   * If element is provided: Opens drawer for that element's children.\n   * If element is undefined: Closes drawer and reverts items to their parent.\n   * @private\n   * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes drawer.\n   * @returns {void}\n   */\n  private _setNodesToDrawer(element: SgdsSidebarGroup) {\n    if (!element) return;\n\n    // when there is element, we will revert the nodes of the previous active group before setting new value into the active group\n    if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {\n      this._revertNodesToParent();\n    }\n\n    this._sidebarActiveGroup = element;\n\n    // when there is an active group set, always set new menu items\n    this._drawerItems = []; // always set to empty to prevent duplicate\n    const menuItems = this._sidebarActiveGroup.querySelectorAll(\n      \":scope > sgds-sidebar-group, :scope > sgds-sidebar-item\"\n    );\n    menuItems.forEach(e => {\n      this._drawerItems.push(e);\n    });\n  }\n\n  /**\n   * Reverts nested items back to their original parent element.\n   * Clears the drawer overlay content and updates selected attributes.\n   * Called when closing the drawer or switching to a different parent item.\n   * @private\n   * @param {SgdsSidebarItem} element - The parent item to return nodes to\n   * @returns {void}\n   */\n  private _revertNodesToParent() {\n    if (this._sidebarActiveGroup) {\n      this._drawerItems.forEach(e => {\n        this._sidebarActiveGroup.append(e);\n      });\n\n      this._drawerItems = [];\n    }\n\n    this._sidebarActiveGroup = null;\n  }\n\n  /**\n   * Attaches event listeners to all direct child sidebar items.\n   * Handles item selection events and drawer overlay state management.\n   * Manages emitting sgds-select custom events for external components.\n   * @private\n   * @returns {void}\n   */\n  private addItemListeners() {\n    const items = this.querySelectorAll(\"sgds-sidebar-item\");\n    const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);\n    const allItems = [...items, ...groups] as SidebarElement[];\n\n    allItems.forEach(item => {\n      item.addEventListener(\"i-sgds-click\", (e: CustomEvent) => {\n        const element = e.detail.element as SidebarElement;\n\n        if (element === this._sidebarActiveGroup) {\n          // just toggle drawer\n          this._showDrawer = !this._showDrawer;\n        } else {\n          if (this.active !== element.name) {\n            this.active = element.name;\n            allItems.forEach(item => (item._selected = false));\n          }\n\n          if (element._childElements.length > 0) {\n            this._showDrawer = true;\n          } else {\n            this._showDrawer = false;\n\n            // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves\n            const anchorLink = item.querySelector(\":scope > a\") as HTMLAnchorElement;\n            if (anchorLink) anchorLink.click();\n          }\n\n          // Emit sgds-select event when an item is selected\n          this.emit(\"sgds-select\", { detail: { activeItem: element.name } });\n        }\n      });\n    });\n  }\n\n  /**\n   * Toggles the sidebar between collapsed and expanded states.\n   * Updates the collapsed property to show/hide labels and adjust item spacing.\n   * Called when user clicks the collapse/expand button in the sidebar header.\n   * @private\n   * @returns {void}\n   */\n  private toggleCollapsed() {\n    this.collapsed = !this.collapsed;\n  }\n\n  /**\n   * Handles clicks outside the sidebar to close the drawer overlay.\n   * Closes the nested items drawer when user clicks outside the sidebar.\n   * Maintains drawer visibility when clicking within sidebar boundaries.\n   * @private\n   * @param {MouseEvent} e - The click event from the document\n   * @returns {void}\n   */\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this._sidebarActiveGroup) return;\n\n    if (!e.composedPath().includes(this)) {\n      this._showDrawer = false;\n    }\n  };\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--expanded\": !this._sidebarCollapsed,\n          \"sidebar--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div class=\"sidebar-main\">\n          <div class=\"sidebar-wrapper\">\n            <div class=\"sidebar-top\">\n              <div class=\"sidebar-brand-name\">\n                <slot name=\"top\"></slot>\n              </div>\n\n              <sgds-icon-button\n                name=${this._sidebarCollapsed ? \"sidebar-expand\" : \"sidebar-collapse\"}\n                variant=\"ghost\"\n                tone=\"neutral\"\n                size=\"sm\"\n                @click=${this.toggleCollapsed}\n                aria-label=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                aria-expanded=${!this._sidebarCollapsed}\n              ></sgds-icon-button>\n            </div>\n\n            <nav\n              class=\"sidebar-content\"\n              role=\"navigation\"\n              aria-label=\"Main navigation\"\n              aria-activedescendant=${this._sidebarActiveItem?.name || \"\"}\n            >\n              <slot></slot>\n            </nav>\n\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-nested-overlay\": true,\n            show: this._showDrawer\n          })}\n          role=\"dialog\"\n          aria-label=${this._sidebarActiveGroup?.title ? `Nested items for ${this._sidebarActiveGroup.title}` : \"\"}\n        >\n          <sgds-icon-button\n            name=\"chevron-left\"\n            variant=\"ghost\"\n            tone=\"neutral\"\n            size=\"sm\"\n            @click=${() => (this._showDrawer = false)}\n            aria-label=${\"Close drawer\"}\n            aria-expanded=${this._showDrawer}\n          ></sgds-icon-button>\n\n          ${this._drawerItems}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebar;\n"],"names":["SgdsElement","SM_BREAKPOINT","html","classMap","sidebarStyle","SgdsIconButton","__decorate","property","provide","SidebarActiveGroup","state","SidebarCollapsed","SidebarActiveItem","SidebarDrawerItems","SidebarDrawerOpen","queryAssignedElements","watch"],"mappings":"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"}