@govtechsg/sgds-web-component 3.15.1-rc.2 → 3.16.0

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

@@ -1,51 +0,0 @@
-import SgdsIcon from "../Icon/sgds-icon";
-import { SidebarElement } from "./sidebar-element";
-/**
- * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.
- * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.
- * Groups can be used to organize related sidebar items into expanding/collapsing sections.
- *
- * Behavior varies by nesting level:
- * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.
- * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.
- *
- * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children
- * @slot trailingIcon - Icon to display after the label text. A chevron is auto-appended.
- *
- */
-export declare class SgdsSidebarGroup extends SidebarElement {
-    static styles: import("lit").CSSResult[];
-    /** @internal */
-    static dependencies: {
-        "sgds-icon": typeof SgdsIcon;
-    };
-    /**
-     * Manages submenu visibility state for nested groups.
-     * When true, the submenu is displayed showing nested children.
-     * When false, the submenu is hidden.
-     * Only used for nested groups (level 2+). Root-level groups use drawer overlay instead.
-     * @internal
-     */
-    _showMenu: boolean;
-    /**
-     * Reports the visibility state of the submenu for nested groups.
-     * Returns true when the submenu is displayed showing child items, false when hidden.
-     * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.
-     * @readonly
-     * @type {boolean}
-     */
-    get showMenu(): boolean;
-    /** @internal */
-    protected _handleClick(): void;
-    /**
-     * Determines the appropriate chevron icon based on nesting level and menu visibility.
-     * Icon changes provide visual feedback on expandable/collapsible state:
-     * - Level 1: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)
-     * - Level 2+: chevron-down (submenu open) or chevron-up (submenu closed)
-     * @private
-     * @returns {string} The icon name to display (e.g., 'chevron-right', 'chevron-down')
-     */
-    private _getIcon;
-    render(): import("lit").TemplateResult<1>;
-}
-export default SgdsSidebarGroup;

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

@@ -1,123 +0,0 @@
-import { __decorate } from 'tslib';
-import { html } from 'lit';
-import { state } from 'lit/decorators.js';
-import { classMap } from 'lit/directives/class-map.js';
-import SgdsElement from '../../base/sgds-element.js';
-import css_248z from './sidebar-item.js';
-import { SgdsIcon } from '../Icon/sgds-icon.js';
-import { SidebarElement } from './sidebar-element.js';
-
-/**
- * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.
- * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.
- * Groups can be used to organize related sidebar items into expanding/collapsing sections.
- *
- * Behavior varies by nesting level:
- * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.
- * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.
- *
- * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children
- * @slot trailingIcon - Icon to display after the label text. A chevron is auto-appended.
- *
- */
-class SgdsSidebarGroup extends SidebarElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * Manages submenu visibility state for nested groups.
-         * When true, the submenu is displayed showing nested children.
-         * When false, the submenu is hidden.
-         * Only used for nested groups (level 2+). Root-level groups use drawer overlay instead.
-         * @internal
-         */
-        this._showMenu = false;
-    }
-    /**
-     * Reports the visibility state of the submenu for nested groups.
-     * Returns true when the submenu is displayed showing child items, false when hidden.
-     * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.
-     * @readonly
-     * @type {boolean}
-     */
-    get showMenu() {
-        return this._showMenu;
-    }
-    /** @internal */
-    _handleClick() {
-        if (this._childLevel !== 1) {
-            this._showMenu = !this._showMenu;
-            this._childElements.forEach(v => {
-                v._hidden = !this._showMenu;
-            });
-        }
-        else {
-            super._handleClick();
-        }
-    }
-    /**
-     * Determines the appropriate chevron icon based on nesting level and menu visibility.
-     * Icon changes provide visual feedback on expandable/collapsible state:
-     * - Level 1: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)
-     * - Level 2+: chevron-down (submenu open) or chevron-up (submenu closed)
-     * @private
-     * @returns {string} The icon name to display (e.g., 'chevron-right', 'chevron-down')
-     */
-    _getIcon() {
-        if (this._childLevel === 1) {
-            return "chevron-right";
-        }
-        else {
-            return this._showMenu ? "chevron-down" : "chevron-up";
-        }
-    }
-    render() {
-        return html `
-      <div
-        class=${classMap({
-            "sidebar-item": true,
-            "sidebar-item--collapsed": this._sidebarCollapsed && this._childLevel === 1,
-            active: this._selected
-        })}
-        @click=${() => this._handleClick()}
-        aria-level=${this._childLevel}
-        .aria-expanded=${this._showMenu}
-        tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}
-      >
-        <div class="sidebar-item-label-wrapper">
-          <div>
-            <slot name="leadingIcon"></slot>
-            <span class="sidebar-item-label">${this.title}</span>
-          </div>
-
-          <span class="sidebar-item-trailingIcon">
-            <slot name="trailingIcon"></slot>
-            <sgds-icon aria-label=${this.title || this.name} name=${this._getIcon()} size="sm"></sgds-icon>
-          </span>
-        </div>
-      </div>
-
-      <div
-        class=${classMap({
-            "sidebar-submenu": true,
-            "sidebar-submenu--collapsed": this._sidebarCollapsed && this._childLevel == 1,
-            show: this._showMenu
-        })}
-      >
-        <div>
-          <slot @slotchange=${this._handleSlotChange}></slot>
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsSidebarGroup.styles = [...SgdsElement.styles, css_248z];
-/** @internal */
-SgdsSidebarGroup.dependencies = {
-    "sgds-icon": SgdsIcon
-};
-__decorate([
-    state()
-], SgdsSidebarGroup.prototype, "_showMenu", void 0);
-
-export { SgdsSidebarGroup, SgdsSidebarGroup as default };
-//# sourceMappingURL=sgds-sidebar-group.js.map

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

@@ -1 +0,0 @@
-{"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 \"./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 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (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 2+). 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 2+). 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  protected override _handleClick(): void {\n    if (this._childLevel !== 1) {\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 1: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)\n   * - Level 2+: 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 === 1) {\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 === 1,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-level=${this._childLevel}\n        .aria-expanded=${this._showMenu}\n        tabindex=${this._childLevel > 2 && !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 aria-label=${this.title || this.name} 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 == 1,\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;KA+E5B;AA7EC;;;;;;AAMG;AACH,IAAA,IAAI,QAAQ,GAAA;QACV,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;;IAGkB,YAAY,GAAA;AAC7B,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,QAAQ,GAAA;AACd,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;AACpB,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;;;;;oCAKrB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAS,MAAA,EAAA,IAAI,CAAC,QAAQ,EAAE,CAAA;;;;;;AAMnE,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;;AA5FM,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-item.d.ts

@@ -1,17 +0,0 @@
-import { SidebarElement } from "./sidebar-element";
-/**
- * @summary Sidebar item is a selectable navigation item within the sidebar component.
- * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).
- * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.
- *
- * @slot default - Text content for the item label
- * @slot leadingIcon - Icon to display before the label text (required for level 1 and level 2)
- * @slot trailingIcon - Icon to display after the label text (optional)
- *
- * See SgdsSidebar for parent component usage and selection events.
- */
-export declare class SgdsSidebarItem extends SidebarElement {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit").TemplateResult<1>;
-}
-export default SgdsSidebarItem;

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

@@ -1,61 +0,0 @@
-import { html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import SgdsElement from '../../base/sgds-element.js';
-import css_248z from './sidebar-item.js';
-import { SidebarElement } from './sidebar-element.js';
-
-/**
- * @summary Sidebar item is a selectable navigation item within the sidebar component.
- * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).
- * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.
- *
- * @slot default - Text content for the item label
- * @slot leadingIcon - Icon to display before the label text (required for level 1 and level 2)
- * @slot trailingIcon - Icon to display after the label text (optional)
- *
- * See SgdsSidebar for parent component usage and selection events.
- */
-class SgdsSidebarItem extends SidebarElement {
-    render() {
-        return html `
-      <div
-        class=${classMap({
-            "sidebar-item": true,
-            "sidebar-item--collapsed": this._sidebarCollapsed && this._childLevel === 1,
-            active: this._selected
-        })}
-        @click=${() => this._handleClick()}
-        aria-level=${this._childLevel}
-        aria-label=${this.title || this.name}
-        name=${this.name}
-        tabindex=${this._hidden ? -1 : 0}
-        role="button"
-      >
-        <div class="sidebar-item-label-wrapper">
-          <div>
-            <!-- For level 1 and 2 -->
-            ${this._childLevel <= 2 ? html `<slot name="leadingIcon"></slot>` : nothing}
-            <span
-              class=${classMap({
-            "sidebar-item-label": true,
-            offset: this._childLevel > 2
-        })}
-              >${this.title}</span
-            >
-          </div>
-
-          <!-- For level 1 and 2 -->
-          ${this._childLevel <= 2
-            ? html `<span class="sidebar-item-trailingIcon">
-                <slot name="trailingIcon"></slot>
-              </span>`
-            : nothing}
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsSidebarItem.styles = [...SgdsElement.styles, css_248z];
-
-export { SgdsSidebarItem, SgdsSidebarItem as default };
-//# sourceMappingURL=sgds-sidebar-item.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sgds-sidebar-item.js","sources":["../../../src/components/Sidebar/sgds-sidebar-item.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 sidebarOptionStyle from \"./sidebar-item.css\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar item is a selectable navigation item within the sidebar component.\n * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).\n * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.\n *\n * @slot default - Text content for the item label\n * @slot leadingIcon - Icon to display before the label text (required for level 1 and level 2)\n * @slot trailingIcon - Icon to display after the label text (optional)\n *\n * See SgdsSidebar for parent component usage and selection events.\n */\nexport class SgdsSidebarItem extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": this._sidebarCollapsed && this._childLevel === 1,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-level=${this._childLevel}\n        aria-label=${this.title || this.name}\n        name=${this.name}\n        tabindex=${this._hidden ? -1 : 0}\n        role=\"button\"\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            <!-- For level 1 and 2 -->\n            ${this._childLevel <= 2 ? html`<slot name=\"leadingIcon\"></slot>` : nothing}\n            <span\n              class=${classMap({\n                \"sidebar-item-label\": true,\n                offset: this._childLevel > 2\n              })}\n              >${this.title}</span\n            >\n          </div>\n\n          <!-- For level 1 and 2 -->\n          ${this._childLevel <= 2\n            ? html`<span class=\"sidebar-item-trailingIcon\">\n                <slot name=\"trailingIcon\"></slot>\n              </span>`\n            : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarItem;\n"],"names":["sidebarOptionStyle"],"mappings":";;;;;;AAQA;;;;;;;;;;AAUG;AACG,MAAO,eAAgB,SAAQ,cAAc,CAAA;IAGjD,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;AAChB,mBAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAA;AAC7B,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;mBACL,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;;;;AAM1B,YAAA,EAAA,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,gCAAA,CAAkC,GAAG,OAAO,CAAA;;AAEhE,oBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC;SAC7B,CAAC,CAAA;AACC,eAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;;;;YAKf,IAAI,CAAC,WAAW,IAAI,CAAC;cACnB,IAAI,CAAA,CAAA;;AAEI,qBAAA,CAAA;AACV,cAAE,OAAO,CAAA;;;KAGhB,CAAC;KACH;;AAvCM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAAC;;;;"}

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

@@ -1,56 +0,0 @@
-import { SidebarElement } from "./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
- * items hierarchically within the sidebar, providing visual separation between different areas of functionality.
- *
- * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section
- */
-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.
-     * @attribute title
-     * @type {string}
-     * @default ""
-     */
-    title: string;
-    /**
-     * Controls whether the section content is expanded or collapsed.
-     * When true, the section content is hidden but the section header remains visible.
-     * Only applicable when the section is collapsible.
-     * @attribute collapsed
-     * @type {boolean}
-     * @default false
-     */
-    collapsed: boolean;
-    /**
-     * Enables a collapsible section header with expand/collapse toggle functionality.
-     * When true, users can click the header to toggle section visibility.
-     * When false, the section header is display-only and not interactive.
-     * @attribute collapsible
-     * @type {boolean}
-     * @default false
-     */
-    collapsible: boolean;
-    seperator: boolean;
-    connectedCallback(): void;
-    /**
-     * Handles click events on the section label.
-     * Toggles the collapsed state to show/hide section content.
-     * Only called if the section is collapsible (collapsible prop is true).
-     * @private
-     * @returns {void}
-     */
-    _handleClick(): void;
-    render(): import("lit").TemplateResult<1>;
-}
-export default SgdsSidebarSection;

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

@@ -1,125 +0,0 @@
-import { __decorate } from 'tslib';
-import { html, nothing } from 'lit';
-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 './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.
- * It displays a section header/title and can optionally be collapsible. Sections help organize navigation
- * items hierarchically within the sidebar, providing visual separation between different areas of functionality.
- *
- * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section
- */
-class SgdsSidebarSection extends SidebarElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The display title/label for the sidebar section header.
-         * Always visible in the sidebar, used to group related items.
-         * @attribute title
-         * @type {string}
-         * @default ""
-         */
-        this.title = "";
-        /**
-         * Controls whether the section content is expanded or collapsed.
-         * When true, the section content is hidden but the section header remains visible.
-         * Only applicable when the section is collapsible.
-         * @attribute collapsed
-         * @type {boolean}
-         * @default false
-         */
-        this.collapsed = false;
-        /**
-         * Enables a collapsible section header with expand/collapse toggle functionality.
-         * When true, users can click the header to toggle section visibility.
-         * When false, the section header is display-only and not interactive.
-         * @attribute collapsible
-         * @type {boolean}
-         * @default false
-         */
-        this.collapsible = false;
-        this.seperator = false;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.setAttribute("role", "region");
-        this._childLevel = null;
-    }
-    /**
-     * Handles click events on the section label.
-     * Toggles the collapsed state to show/hide section content.
-     * Only called if the section is collapsible (collapsible prop is true).
-     * @private
-     * @returns {void}
-     */
-    _handleClick() {
-        if (this.collapsible)
-            this.collapsed = !this.collapsed;
-    }
-    render() {
-        return html `
-      <div
-        class=${classMap({
-            "sidebar-section": true,
-            "sidebar-section--collapsed": this._sidebarCollapsed
-        })}
-      >
-        ${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
-          class=${classMap({
-            "sidebar-section-content": true,
-            "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);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsSidebarSection.prototype, "collapsed", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SgdsSidebarSection.prototype, "collapsible", void 0);
-__decorate([
-    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 +0,0 @@
-{"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 \"./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,161 +0,0 @@
-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.
-     * When false, the sidebar is expanded displaying full labels and content.
-     * Affects all child items by toggling visibility of labels and adjusting spacing.
-     * @attribute collapsed
-     * @type {boolean}
-     * @default false
-     */
-    collapsed: boolean;
-    /**
-     * The name of the currently active sidebar item or group.
-     * Reflects the selected item and allows external control of sidebar selection.
-     * Used to synchronize sidebar state with external navigation state or programmatic selection.
-     * When set, the corresponding item with matching `name` attribute will be highlighted as active.
-     * @attribute active
-     * @type {string}
-     * @default ""
-     */
-    active: string;
-    /** @internal Tracks the currently active group and provides it via context to all child elements */
-    _sidebarActiveGroup: SgdsSidebarGroup | null;
-    /** @internal Tracks the collapsed state and provides it via context to all child elements */
-    private _sidebarCollapsed;
-    /** @internal Tracks the currently active item and provides it via context to all child elements */
-    private _sidebarActiveItem;
-    /** @internal Provides the list of items shown in the drawer overlay */
-    private _drawerItems;
-    /** @internal Indicates whether a drawer overlay is currently open */
-    private _showDrawer;
-    /** @internal */
-    private _defaultNodes;
-    /** @internal */
-    private _isMobile;
-    /** @internal Bound resize handler for proper event listener removal */
-    private _boundHandleResize;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    firstUpdated(): void;
-    updated(): void;
-    private _handleSlotChange;
-    /**
-     * 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.
-     * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.
-     * For root-level items with children, opens the drawer overlay.
-     * For nested items, expands parent groups and opens the appropriate drawer if needed.
-     * @private
-     * @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.
-     * If element is undefined: Closes drawer and reverts items to their parent.
-     * @private
-     * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes drawer.
-     * @returns {void}
-     */
-    private _setNodesToDrawer;
-    /**
-     * Reverts nested items back to their original parent element.
-     * Clears the drawer overlay content and updates selected attributes.
-     * Called when closing the drawer or switching to a different parent item.
-     * @private
-     * @param {SgdsSidebarItem} element - The parent item to return nodes to
-     * @returns {void}
-     */
-    private _revertNodesToParent;
-    /**
-     * Attaches event listeners to all direct child sidebar items.
-     * Handles item selection events and drawer overlay state management.
-     * Manages emitting sgds-select custom events for external components.
-     * @private
-     * @returns {void}
-     */
-    private addItemListeners;
-    /**
-     * Toggles the sidebar between collapsed and expanded states.
-     * 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>;
-}
-export default SgdsSidebar;