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

package/components/Sidebar/sgds-sidebar-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 0 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 1+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot trailingIcon - Icon to display after the label text. A chevron is auto-appended.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /**\n   * Manages submenu visibility state for nested groups.\n   * When true, the submenu is displayed showing nested children.\n   * When false, the submenu is hidden.\n   * Only used for nested groups (level 1+). Root-level groups use drawer overlay instead.\n   * @internal\n   */\n  @state() _showMenu = false;\n\n  /**\n   * Reports the visibility state of the submenu for nested groups.\n   * Returns true when the submenu is displayed showing child items, false when hidden.\n   * Only applicable for nested groups (level 1+). Root-level groups use drawer overlay instead.\n   * @readonly\n   * @type {boolean}\n   */\n  get showMenu(): boolean {\n    return this._showMenu;\n  }\n\n  /** @internal */\n  _handleClick(): void {\n    if (this._childLevel !== 0) {\n      this._showMenu = !this._showMenu;\n      this._childElements.forEach(v => {\n        v._hidden = !this._showMenu;\n      });\n    } else {\n      super._handleClick();\n    }\n  }\n  /**\n   * Determines the appropriate chevron icon based on nesting level and menu visibility.\n   * Icon changes provide visual feedback on expandable/collapsible state:\n   * - Level 0: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)\n   * - Level 1+: chevron-down (submenu open) or chevron-up (submenu closed)\n   * @private\n   * @returns {string} The icon name to display (e.g., 'chevron-right', 'chevron-down')\n   */\n  private getIcon() {\n    if (this._childLevel === 0) {\n      return \"chevron-right\";\n    } else {\n      return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": this._sidebarCollapsed && this._childLevel === 0,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-level=${this._childLevel}\n        .aria-expanded=${this._showMenu}\n        aria-label=${this.title || this.name}\n        tabindex=${this._childLevel > 1 && !this._showMenu ? -1 : 0}\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            <slot name=\"leadingIcon\"></slot>\n            <span class=\"sidebar-item-label\">${this.title}</span>\n          </div>\n\n          <span class=\"sidebar-item-trailingIcon\">\n            <slot name=\"trailingIcon\"></slot>\n            <sgds-icon name=${this.getIcon()} size=\"sm\"></sgds-icon>\n          </span>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          \"sidebar-submenu\": true,\n          \"sidebar-submenu--collapsed\": this._sidebarCollapsed && this._childLevel == 0,\n          show: this._showMenu\n        })}\n      >\n        <div>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarGroup;\n"],"names":["sidebarOptionStyle"],"mappings":";;;;;;;;;AASA;;;;;;;;;;;;AAYG;AACG,MAAO,gBAAiB,SAAQ,cAAc,CAAA;AAApD,IAAA,WAAA,GAAA;;AAQE;;;;;;AAMG;QACM,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAgF5B;AA9EC;;;;;;AAMG;AACH,IAAA,IAAI,QAAQ,GAAA;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;;IAGD,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;AACjC,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAG;AAC9B,gBAAA,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;AAC9B,aAAC,CAAC,CAAC;SACJ;aAAM;YACL,KAAK,CAAC,YAAY,EAAE,CAAC;SACtB;KACF;AACD;;;;;;;AAOG;IACK,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;AAC1B,YAAA,OAAO,eAAe,CAAC;SACxB;aAAM;YACL,OAAO,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;SACvD;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;YACpB,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC;YAC3E,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAA;AACO,eAAA,EAAA,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;AACrB,mBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACZ,uBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AAClB,mBAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAA;AACzB,iBAAA,EAAA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;;;AAKpB,6CAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;;;;8BAK3B,IAAI,CAAC,OAAO,EAAE,CAAA;;;;;;AAM5B,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,4BAA4B,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC;YAC7E,IAAI,EAAE,IAAI,CAAC,SAAS;SACrB,CAAC,CAAA;;;AAGoB,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG/C,CAAC;KACH;;AA7FM,gBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAE5D;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AASO,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAmB,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 0 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 1+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot trailingIcon - Icon to display after the label text. A chevron is auto-appended.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /**\n   * Manages submenu visibility state for nested groups.\n   * When true, the submenu is displayed showing nested children.\n   * When false, the submenu is hidden.\n   * Only used for nested groups (level 1+). Root-level groups use drawer overlay instead.\n   * @internal\n   */\n  @state() _showMenu = false;\n\n  /**\n   * Reports the visibility state of the submenu for nested groups.\n   * Returns true when the submenu is displayed showing child items, false when hidden.\n   * Only applicable for nested groups (level 1+). Root-level groups use drawer overlay instead.\n   * @readonly\n   * @type {boolean}\n   */\n  get showMenu(): boolean {\n    return this._showMenu;\n  }\n\n  /** @internal */\n  _handleClick(): void {\n    if (this._childLevel !== 0) {\n      this._showMenu = !this._showMenu;\n      this._childElements.forEach(v => {\n        v._hidden = !this._showMenu;\n      });\n    } else {\n      super._handleClick();\n    }\n  }\n  /**\n   * Determines the appropriate chevron icon based on nesting level and menu visibility.\n   * Icon changes provide visual feedback on expandable/collapsible state:\n   * - Level 0: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)\n   * - Level 1+: chevron-down (submenu open) or chevron-up (submenu closed)\n   * @private\n   * @returns {string} The icon name to display (e.g., 'chevron-right', 'chevron-down')\n   */\n  private getIcon() {\n    if (this._childLevel === 0) {\n      return \"chevron-right\";\n    } else {\n      return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": this._sidebarCollapsed && this._childLevel === 0,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-level=${this._childLevel}\n        .aria-expanded=${this._showMenu}\n        aria-label=${this.title || this.name}\n        tabindex=${this._childLevel > 1 && !this._showMenu ? -1 : 0}\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            <slot name=\"leadingIcon\"></slot>\n            <span class=\"sidebar-item-label\">${this.title}</span>\n          </div>\n\n          <span class=\"sidebar-item-trailingIcon\">\n            <slot name=\"trailingIcon\"></slot>\n            <sgds-icon name=${this.getIcon()} size=\"sm\"></sgds-icon>\n          </span>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          \"sidebar-submenu\": true,\n          \"sidebar-submenu--collapsed\": this._sidebarCollapsed && this._childLevel == 0,\n          show: this._showMenu\n        })}\n      >\n        <div>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarGroup;\n"],"names":["sidebarOptionStyle"],"mappings":";;;;;;;;;AASA;;;;;;;;;;;;AAYG;AACG,MAAO,gBAAiB,SAAQ,cAAc,CAAA;AAApD,IAAA,WAAA,GAAA;;AAQE;;;;;;AAMG;QACM,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;KAgF5B;AA9EC;;;;;;AAMG;AACH,IAAA,IAAI,QAAQ,GAAA;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;;IAGD,YAAY,GAAA;AACV,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;AACjC,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,IAAG;AAC9B,gBAAA,CAAC,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;AAC9B,aAAC,CAAC,CAAC;SACJ;aAAM;YACL,KAAK,CAAC,YAAY,EAAE,CAAC;SACtB;KACF;AACD;;;;;;;AAOG;IACK,OAAO,GAAA;AACb,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;AAC1B,YAAA,OAAO,eAAe,CAAC;SACxB;aAAM;YACL,OAAO,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,CAAC;SACvD;KACF;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;YACpB,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC;YAC3E,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAA;AACO,eAAA,EAAA,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;AACrB,mBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACZ,uBAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AAClB,mBAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAA;AACzB,iBAAA,EAAA,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;;;AAKpB,6CAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;;;;8BAK3B,IAAI,CAAC,OAAO,EAAE,CAAA;;;;;;AAM5B,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,4BAA4B,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC;YAC7E,IAAI,EAAE,IAAI,CAAC,SAAS;SACrB,CAAC,CAAA;;;AAGoB,4BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG/C,CAAC;KACH;;AA7FM,gBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAE5D;AACO,gBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AASO,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAmB,CAAA,EAAA,gBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

package/components/Sidebar/sgds-sidebar-section.d.ts

@@ -1,4 +1,6 @@
 import { SidebarElement } from "../../base/sidebar-element";
+import SgdsIcon from "../Icon/sgds-icon";
+import SgdsDivider from "../Divider/sgds-divider";
 /**
  * @summary Sidebar section is a container component that groups related sidebar items into organized sections.
  * It displays a section header/title and can optionally be collapsible. Sections help organize navigation
@@ -8,6 +10,11 @@ import { SidebarElement } from "../../base/sidebar-element";
  */
 export declare class SgdsSidebarSection extends SidebarElement {
     static styles: import("lit").CSSResult[];
+    /** @internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+        "sgds-divider": typeof SgdsDivider;
+    };
     /**
      * The display title/label for the sidebar section header.
      * Always visible in the sidebar, used to group related items.
@@ -34,13 +41,7 @@ export declare class SgdsSidebarSection extends SidebarElement {
      * @default false
      */
     collapsible: boolean;
-    /**
-     * Tracks whether this section is the last child of its parent.
-     * Used to remove bottom border from the last section.
-     * @type {boolean}
-     * @internal
-     */
-    private _isLastChild;
+    seperator: boolean;
     connectedCallback(): void;
     /**
      * Handles click events on the section label.

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

@@ -1,10 +1,12 @@
 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.
@@ -42,19 +44,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;
     }
     /**
@@ -73,38 +67,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);
@@ -115,8 +118,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/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/components/Sidebar/sgds-sidebar.d.ts

@@ -1,7 +1,37 @@
 import SgdsElement from "../../base/sgds-element";
 import SgdsSidebarGroup from "./sgds-sidebar-group";
+import SgdsIconButton from "../IconButton/sgds-icon-button";
+/**
+ * @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.
+ * The sidebar coordinates selection and navigation across nested items using context providers and custom events.
+ *
+ * Features:
+ * - Collapsible state for space-saving layouts with icon-only mode
+ * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups
+ * - Keyboard navigation with full ARIA support for accessibility
+ * - Programmatic link navigation support with anchor elements
+ * - Active item tracking and synchronized state management
+ *
+ * Keyboard Navigation:
+ * - Arrow Up/Down: Navigate between sidebar items and groups
+ * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays
+ * - Enter/Space: Activate focused item or toggle group
+ * - Tab: Standard focus management to interactive elements
+ *
+ * @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
+ *
+ */
 export declare class SgdsSidebar extends SgdsElement {
     static styles: import("lit").CSSResult[];
+    static dependencies: {
+        "sgds-icon-button": typeof SgdsIconButton;
+    };
     /**
      * Controls whether the sidebar is collapsed or expanded.
      * When true, the sidebar is in collapsed state showing only icons.
@@ -34,8 +64,17 @@ export declare class SgdsSidebar extends SgdsElement {
     private _showDrawer;
     /** @internal */
     private _defaultNodes;
+    /** @internal */
+    private _isMobile;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    /**
+     * 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(): void;
     /**
      * Handles changes to the active item selection.
@@ -46,8 +85,29 @@ export declare class SgdsSidebar extends SgdsElement {
      * @returns {void}
      */
     _handleActiveItem(): void;
+    /**
+     * 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(): void;
+    /**
+     * 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
+     */
     private _getActiveChild;
+    /**
+     * 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}
+     */ private _handleResize;
     /**
      * Manages the drawer overlay content based on the selected parent item.
      * If element is provided: Opens drawer for that element's children.
@@ -76,12 +136,20 @@ export declare class SgdsSidebar extends SgdsElement {
     private addItemListeners;
     /**
      * 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}
      */
     private toggleCollapsed;
+    /**
+     * 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}
+     */
     private _handleClickOutOfElement;
     render(): import("lit").TemplateResult<1>;
 }

package/components/Sidebar/sgds-sidebar.js

@@ -7,7 +7,10 @@ import css_248z from './sidebar.js';
 import { provide } from '@lit/context';
 import { SidebarActiveGroup, SidebarCollapsed, SidebarActiveItem, SidebarDrawerItems, SidebarDrawerOpen } from './sidebar-context.js';
 import { watch } from '../../utils/watch.js';
+import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
+import { SM_BREAKPOINT } from '../../utils/breakpoints.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.
@@ -26,14 +29,14 @@ import { watch } from '../../utils/watch.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 {
     constructor() {
         super(...arguments);
@@ -65,6 +68,16 @@ class SgdsSidebar extends SgdsElement {
         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;
@@ -82,11 +95,21 @@ class SgdsSidebar extends SgdsElement {
             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;
     }
@@ -133,6 +156,13 @@ class SgdsSidebar extends SgdsElement {
             }
         }
     }
+    /**
+     * 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) {
@@ -141,6 +171,13 @@ class SgdsSidebar extends SgdsElement {
         }
         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;
@@ -158,6 +195,19 @@ class SgdsSidebar extends SgdsElement {
         };
         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 <= 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.
@@ -239,9 +289,9 @@ class SgdsSidebar extends SgdsElement {
     }
     /**
      * 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() {
@@ -257,44 +307,65 @@ class SgdsSidebar extends SgdsElement {
             "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({
+        <div
+          class=${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.styles, css_248z];
+SgdsSidebar.dependencies = {
+    "sgds-icon-button": SgdsIconButton
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsSidebar.prototype, "collapsed", void 0);
@@ -324,6 +395,9 @@ __decorate([
 __decorate([
     queryAssignedElements()
 ], SgdsSidebar.prototype, "_defaultNodes", void 0);
+__decorate([
+    state()
+], SgdsSidebar.prototype, "_isMobile", void 0);
 __decorate([
     watch("collapsed")
 ], SgdsSidebar.prototype, "_handleCollapsed", null);