@govtechsg/sgds-web-component 3.13.0-rc.0 → 3.13.1

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

@@ -1,51 +0,0 @@
-import SgdsIcon from "../Icon/sgds-icon";
-import { SidebarElement } from "../../base/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 0 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.
- * - Level 1+ (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 1+). 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 1+). Root-level groups use drawer overlay instead.
-     * @readonly
-     * @type {boolean}
-     */
-    get showMenu(): boolean;
-    /** @internal */
-    _handleClick(): void;
-    /**
-     * Determines the appropriate chevron icon based on nesting level and menu visibility.
-     * Icon changes provide visual feedback on expandable/collapsible state:
-     * - Level 0: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)
-     * - Level 1+: 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,124 +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 '../../base/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 0 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.
- * - Level 1+ (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 1+). 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 1+). Root-level groups use drawer overlay instead.
-     * @readonly
-     * @type {boolean}
-     */
-    get showMenu() {
-        return this._showMenu;
-    }
-    /** @internal */
-    _handleClick() {
-        if (this._childLevel !== 0) {
-            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 0: chevron-right (closed drawer) or chevron-right (no change - drawer controlled by parent)
-     * - Level 1+: 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 === 0) {
-            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 === 0,
-            active: this._selected
-        })}
-        @click=${() => this._handleClick()}
-        aria-level=${this._childLevel}
-        .aria-expanded=${this._showMenu}
-        aria-label=${this.title || this.name}
-        tabindex=${this._childLevel > 1 && !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 name=${this.getIcon()} size="sm"></sgds-icon>
-          </span>
-        </div>
-      </div>
-
-      <div
-        class=${classMap({
-            "sidebar-submenu": true,
-            "sidebar-submenu--collapsed": this._sidebarCollapsed && this._childLevel == 0,
-            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 { 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;;;;"}

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

@@ -1,25 +0,0 @@
-import { SidebarElement } from "../../base/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 trailingIcon - Icon to display after the label text
- *
- * See SgdsSidebar for parent component usage and selection events.
- */
-export declare class SgdsSidebarItem extends SidebarElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * The name of the icon to display before the item label.
-     * Icon name corresponds to sgds-icon component icons.
-     * When empty, no icon is displayed and spacing is adjusted.
-     * @attribute icon
-     * @type {string}
-     * @default ""
-     */
-    icon: string;
-    render(): import("lit").TemplateResult<1>;
-}
-export default SgdsSidebarItem;

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

@@ -1,73 +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-item.js';
-import { SidebarElement } from '../../base/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 trailingIcon - Icon to display after the label text
- *
- * See SgdsSidebar for parent component usage and selection events.
- */
-class SgdsSidebarItem extends SidebarElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The name of the icon to display before the item label.
-         * Icon name corresponds to sgds-icon component icons.
-         * When empty, no icon is displayed and spacing is adjusted.
-         * @attribute icon
-         * @type {string}
-         * @default ""
-         */
-        this.icon = "";
-    }
-    render() {
-        return html `
-      <div
-        class=${classMap({
-            "sidebar-item": true,
-            "sidebar-item--collapsed": this._sidebarCollapsed && this._childLevel === 0,
-            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>
-            ${this._childLevel <= 1 ? html `<slot name="leadingIcon"></slot>` : nothing}
-            <span
-              class=${classMap({
-            "sidebar-item-label": true,
-            offset: this._childLevel > 1
-        })}
-              >${this.title}</span
-            >
-          </div>
-
-          <span class="sidebar-item-trailingIcon">
-            <slot name="trailingIcon"></slot>
-          </span>
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsSidebarItem.styles = [...SgdsElement.styles, css_248z];
-__decorate([
-    property({ type: String, reflect: true })
-], SgdsSidebarItem.prototype, "icon", void 0);
-
-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 SgdsIcon from \"../Icon/sgds-icon\";\n\nimport { SidebarElement } from \"../../base/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 trailingIcon - Icon to display after the label text\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  /**\n   * The name of the icon to display before the item label.\n   * Icon name corresponds to sgds-icon component icons.\n   * When empty, no icon is displayed and spacing is adjusted.\n   * @attribute icon\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) icon = \"\";\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-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            ${this._childLevel <= 1 ? html`<slot name=\"leadingIcon\"></slot>` : nothing}\n            <span\n              class=${classMap({\n                \"sidebar-item-label\": true,\n                offset: this._childLevel > 1\n              })}\n              >${this.title}</span\n            >\n          </div>\n\n          <span class=\"sidebar-item-trailingIcon\">\n            <slot name=\"trailingIcon\"></slot>\n          </span>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarItem;\n"],"names":["sidebarOptionStyle"],"mappings":";;;;;;;;AAUA;;;;;;;;;AASG;AACG,MAAO,eAAgB,SAAQ,cAAc,CAAA;AAAnD,IAAA,WAAA,GAAA;;AAGE;;;;;;;AAOG;QACwC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;KAoCtD;IAlCC,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;;;;;AAK1B,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;;;;;;;;;KAStB,CAAC;KACH;;AA7CM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAUjB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

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

@@ -1,55 +0,0 @@
-import { SidebarElement } from "../../base/sidebar-element";
-/**
- * @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[];
-    /**
-     * 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;
-    /**
-     * 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;
-    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,122 +0,0 @@
-import { __decorate } from 'tslib';
-import { html, nothing } from 'lit';
-import { property, 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-section.js';
-import { SidebarElement } from '../../base/sidebar-element.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;
-        /**
-         * 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;
-    }
-    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;
-    }
-    /**
-     * 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,
-            "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>`
-            : nothing}
-        </div>
-
-        <div
-          class=${classMap({
-            "sidebar-section-content": true,
-            "sidebar-section-content--collapsed": this.collapsed && this.collapsible
-        })}
-        >
-          <div>
-            <slot @slotchange=${this._handleSlotChange}></slot>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsSidebarSection.styles = [...SgdsElement.styles, css_248z];
-__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([
-    state()
-], SgdsSidebarSection.prototype, "_isLastChild", 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, 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;;;;"}

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

@@ -1,88 +0,0 @@
-import SgdsElement from "../../base/sgds-element";
-import SgdsSidebarGroup from "./sgds-sidebar-group";
-export declare class SgdsSidebar extends SgdsElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * 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;
-    connectedCallback(): void;
-    disconnectedCallback(): 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;
-    _handleActive(): void;
-    private _getActiveChild;
-    /**
-     * 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 and emits sgds-sidebar-toggle event.
-     *
-     * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state
-     * @returns {void}
-     */
-    private toggleCollapsed;
-    private _handleClickOutOfElement;
-    render(): import("lit").TemplateResult<1>;
-}
-export default SgdsSidebar;