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

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

@@ -1,124 +0,0 @@
-'use client';
-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/react/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/react/components/Sidebar/sgds-sidebar-item.cjs.js

@@ -1,67 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var lit = require('lit');
-var classMap_js = require('lit/directives/class-map.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
-var sidebarItem = require('./sidebar-item.cjs.js');
-var sidebarElement = require('./sidebar-element.cjs.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.SidebarElement {
-    render() {
-        return lit.html `
-      <div
-        class=${classMap_js.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 ? lit.html `<slot name="leadingIcon"></slot>` : lit.nothing}
-            <span
-              class=${classMap_js.classMap({
-            "sidebar-item-label": true,
-            offset: this._childLevel > 2
-        })}
-              >${this.title}</span
-            >
-          </div>
-
-          <!-- For level 1 and 2 -->
-          ${this._childLevel <= 2
-            ? lit.html `<span class="sidebar-item-trailingIcon">
-                <slot name="trailingIcon"></slot>
-              </span>`
-            : lit.nothing}
-        </div>
-      </div>
-    `;
-    }
-}
-SgdsSidebarItem.styles = [...sgdsElement["default"].styles, sidebarItem["default"]];
-
-exports.SgdsSidebarItem = SgdsSidebarItem;
-exports["default"] = SgdsSidebarItem;
-//# sourceMappingURL=sgds-sidebar-item.cjs.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"sgds-sidebar-item.cjs.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":["SidebarElement","html","classMap","nothing","SgdsElement","sidebarOptionStyle"],"mappings":";;;;;;;;;;;AAQA;;;;;;;;;;AAUG;AACG,MAAO,eAAgB,SAAQA,6BAAc,CAAA;IAGjD,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,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,GAAGD,QAAI,CAAA,CAAA,gCAAA,CAAkC,GAAGE,WAAO,CAAA;;AAEhE,oBAAA,EAAAD,oBAAQ,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;cACnBD,QAAI,CAAA,CAAA;;AAEI,qBAAA,CAAA;AACV,cAAEE,WAAO,CAAA;;;KAGhB,CAAC;KACH;;AAvCM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGC,sBAAW,CAAC,MAAM,EAAEC,sBAAkB,CAAC;;;;;"}

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

@@ -1,62 +0,0 @@
-'use client';
-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/react/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/react/components/Sidebar/sgds-sidebar-section.cjs.js

@@ -1,131 +0,0 @@
-'use client';
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var tslib = require('tslib');
-var lit = require('lit');
-var decorators_js = require('lit/decorators.js');
-var classMap_js = require('lit/directives/class-map.js');
-var sgdsElement = require('../../base/sgds-element.cjs.js');
-var sidebarSection = require('./sidebar-section.cjs.js');
-var sidebarElement = require('./sidebar-element.cjs.js');
-var sgdsIcon = require('../Icon/sgds-icon.cjs.js');
-var sgdsDivider = require('../Divider/sgds-divider.cjs.js');
-
-/**
- * @summary Sidebar section is a container component that groups related sidebar items into organized sections.
- * 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.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 lit.html `
-      <div
-        class=${classMap_js.classMap({
-            "sidebar-section": true,
-            "sidebar-section--collapsed": this._sidebarCollapsed
-        })}
-      >
-        ${this.title !== ""
-            ? lit.html `<div
-              class="sidebar-section-label"
-              @click=${this._handleClick}
-              aria-expanded=${!this.collapsed}
-              aria-disabled=${!this.collapsible}
-              tabindex="0"
-            >
-              <span>${this.title}</span>
-              ${this.collapsible
-                ? lit.html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
-                : lit.nothing}
-            </div>`
-            : lit.nothing}
-
-        <div
-          class=${classMap_js.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 ? lit.html `<sgds-divider></sgds-divider>` : lit.nothing}
-      </div>
-    `;
-    }
-}
-SgdsSidebarSection.styles = [...sgdsElement["default"].styles, sidebarSection["default"]];
-/** @internal */
-SgdsSidebarSection.dependencies = {
-    "sgds-icon": sgdsIcon.SgdsIcon,
-    "sgds-divider": sgdsDivider.SgdsDivider
-};
-tslib.__decorate([
-    decorators_js.property({ type: String, reflect: true })
-], SgdsSidebarSection.prototype, "title", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsSidebarSection.prototype, "collapsed", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsSidebarSection.prototype, "collapsible", void 0);
-tslib.__decorate([
-    decorators_js.property({ type: Boolean, reflect: true })
-], SgdsSidebarSection.prototype, "seperator", void 0);
-
-exports.SgdsSidebarSection = SgdsSidebarSection;
-exports["default"] = SgdsSidebarSection;
-//# sourceMappingURL=sgds-sidebar-section.cjs.js.map

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

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

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

@@ -1,126 +0,0 @@
-'use client';
-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/react/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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"}