@govtechsg/sgds-web-component 3.25.0 → 3.25.1-rc.0

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

@@ -51,6 +51,7 @@ export declare class SgdsSidebarGroup extends SidebarElement {
      * @returns {string} Icon name to display
      */
     private _getIcon;
+    protected _handleSlotChange(): void;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsSidebarGroup;

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

@@ -80,6 +80,12 @@ class SgdsSidebarGroup extends SidebarElement {
             return this._showMenu ? "chevron-down" : "chevron-up";
         }
     }
+    _handleSlotChange() {
+        super._handleSlotChange();
+        this._childElements.forEach(v => {
+            v._hidden = !this._showMenu;
+        });
+    }
     render() {
         return html `
       <div
@@ -92,7 +98,7 @@ class SgdsSidebarGroup extends SidebarElement {
         @click=${() => this._handleClick()}
         aria-label=${this.title || this.name}
         aria-expanded=${this._showMenu}
-        tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}
+        tabindex=${this._hidden ? -1 : 0}
       >
         <div class="sidebar-item-label-wrapper">
           <div>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { 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\";\nimport { watch } from \"../../utils/watch\";\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 indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\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 (level 2+).\n   * When true, nested children are displayed. When false, they are hidden.\n   * Root-level groups use drawer overlay instead of submenu.\n   * @internal\n   */\n  @state() private _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  /**\n   * Reacts to the active item context changing. If the newly active item is a descendant\n   * of this group, expand the submenu without external callers touching internal state.\n   * @internal\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItemContext() {\n    if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n      this._showMenu = true;\n    }\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 submenu state.\n   * Provides visual feedback for expandable/collapsible state:\n   * - Level 1: chevron-right (drawer controlled by parent)\n   * - Level 2+: chevron-down (open), chevron-up (closed)\n   * @internal\n   * @returns {string} Icon name to display\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        role=\"button\"\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-label=${this.title || this.name}\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=\"icon\"></slot>\n            <span class=\"sidebar-item-label\">${this.title}</span>\n          </div>\n\n          <span class=\"sidebar-item-indicator\">\n            <slot name=\"indicator\"></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 == 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":"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"}
+{"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\";\nimport { watch } from \"../../utils/watch\";\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 indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\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 (level 2+).\n   * When true, nested children are displayed. When false, they are hidden.\n   * Root-level groups use drawer overlay instead of submenu.\n   * @internal\n   */\n  @state() private _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  /**\n   * Reacts to the active item context changing. If the newly active item is a descendant\n   * of this group, expand the submenu without external callers touching internal state.\n   * @internal\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItemContext() {\n    if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n      this._showMenu = true;\n    }\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 submenu state.\n   * Provides visual feedback for expandable/collapsible state:\n   * - Level 1: chevron-right (drawer controlled by parent)\n   * - Level 2+: chevron-down (open), chevron-up (closed)\n   * @internal\n   * @returns {string} Icon name to display\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  protected override _handleSlotChange() {\n    super._handleSlotChange();\n\n    this._childElements.forEach(v => {\n      v._hidden = !this._showMenu;\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        role=\"button\"\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-label=${this.title || this.name}\n        aria-expanded=${this._showMenu}\n        tabindex=${this._hidden ? -1 : 0}\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            <slot name=\"icon\"></slot>\n            <span class=\"sidebar-item-label\">${this.title}</span>\n          </div>\n\n          <span class=\"sidebar-item-indicator\">\n            <slot name=\"indicator\"></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 == 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":"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"}

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

@@ -57,6 +57,7 @@ export declare class SgdsSidebarSection extends SidebarElement {
      * @returns {void}
      */
     protected _handleClick(): void;
+    protected _handleSlotChange(): void;
     render(): import("lit").TemplateResult<1>;
 }
 export default SgdsSidebarSection;

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

@@ -73,8 +73,18 @@ class SgdsSidebarSection extends SidebarElement {
      * @returns {void}
      */
     _handleClick() {
-        if (this.collapsible)
+        if (this.collapsible) {
             this.collapsed = !this.collapsed;
+            this._childElements.forEach(v => {
+                v._hidden = this.collapsed;
+            });
+        }
+    }
+    _handleSlotChange() {
+        super._handleSlotChange();
+        this._childElements.forEach(v => {
+            v._hidden = this.collapsed;
+        });
     }
     render() {
         return html `
@@ -94,7 +104,7 @@ class SgdsSidebarSection extends SidebarElement {
               @click=${this._handleClick}
               aria-expanded=${!this.collapsed}
               aria-disabled=${!this.collapsible}
-              tabindex=${this.collapsible ? 0 : -1}
+              tabindex=${this.collapsible && !this._sidebarCollapsed ? 0 : -1}
             >
               <span>${this.title}</span>
               ${this.collapsible

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar-section.js","sources":["../../../src/components/Sidebar/sgds-sidebar-section.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } 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  /**\n   * When true, renders a divider below the section content to visually separate it from the next section.\n   * @attribute separator\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) separator = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"group\");\n    this._childLevel = -1;\n  }\n\n  updated() {\n    super.updated();\n    if (this.title) {\n      this.setAttribute(\"aria-label\", this.title);\n    } else {\n      this.removeAttribute(\"aria-label\");\n    }\n  }\n\n  /**\n   * Toggles the collapsed state when section is collapsible.\n   * Called when user clicks the section header. No-op if section is not collapsible.\n   * @internal\n   * @returns {void}\n   */\n  protected override _handleClick(): void {\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._isOverlay && this._sidebarCollapsed\n        })}\n      >\n        ${this.title !== \"\"\n          ? html`<div\n              class=${classMap({\n                \"sidebar-section-label\": true,\n                \"sidebar-section-label--collapsible\": this.collapsible\n              })}\n              role=\"button\"\n              @click=${this._handleClick}\n              aria-expanded=${!this.collapsed}\n              aria-disabled=${!this.collapsible}\n              tabindex=${this.collapsible ? 0 : -1}\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-separator\": this.separator\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n\n        ${this.separator ? html`<sgds-divider></sgds-divider>` : nothing}\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarSection;\n"],"names":["sidebarSectionStyle"],"mappings":"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"}
+{"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  /**\n   * When true, renders a divider below the section content to visually separate it from the next section.\n   * @attribute separator\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) separator = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"group\");\n    this._childLevel = -1;\n  }\n\n  updated() {\n    super.updated();\n    if (this.title) {\n      this.setAttribute(\"aria-label\", this.title);\n    } else {\n      this.removeAttribute(\"aria-label\");\n    }\n  }\n\n  /**\n   * Toggles the collapsed state when section is collapsible.\n   * Called when user clicks the section header. No-op if section is not collapsible.\n   * @internal\n   * @returns {void}\n   */\n  protected override _handleClick(): void {\n    if (this.collapsible) {\n      this.collapsed = !this.collapsed;\n      this._childElements.forEach(v => {\n        v._hidden = this.collapsed;\n      });\n    }\n  }\n\n  protected override _handleSlotChange(): void {\n    super._handleSlotChange();\n\n    this._childElements.forEach(v => {\n      v._hidden = this.collapsed;\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-section\": true,\n          \"sidebar-section--collapsed\": !this._isOverlay && this._sidebarCollapsed\n        })}\n      >\n        ${this.title !== \"\"\n          ? html`<div\n              class=${classMap({\n                \"sidebar-section-label\": true,\n                \"sidebar-section-label--collapsible\": this.collapsible\n              })}\n              role=\"button\"\n              @click=${this._handleClick}\n              aria-expanded=${!this.collapsed}\n              aria-disabled=${!this.collapsible}\n              tabindex=${this.collapsible && !this._sidebarCollapsed ? 0 : -1}\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-separator\": this.separator\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n\n        ${this.separator ? 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,5 +1,7 @@
 import SgdsElement from "../../base/sgds-element";
 import SgdsIconButton from "../IconButton/sgds-icon-button";
+import type { ISgdsSidebarSelectEventDetail } from "./types";
+export type { ISgdsSidebarSelectEventDetail };
 /**
  * @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.
@@ -13,17 +15,16 @@ import SgdsIconButton from "../IconButton/sgds-icon-button";
  * - Active item tracking and synchronized state management
  *
  * Keyboard Navigation:
- * - Arrow Up/Down: Navigate between sidebar items and groups
+ * - Tab/Shift+Tab: Navigate between visible 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 upper - Insert brand/logo content in sidebar header
  * @slot lower - 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
+ * @event sgds-select - Emitted when a sidebar item or group is selected.
+ * @eventDetail {ISgdsSidebarSelectEventDetail} sgds-select
  *
  */
 type SidebarVariant = "persistent" | "overlay" | "collapsible";

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar.js","sources":["../../../src/components/Sidebar/sgds-sidebar.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarStyle from \"./sidebar.css\";\n\nimport { provide } from \"@lit/context\";\nimport {\n  SidebarCollapsed,\n  SidebarActiveItem,\n  SidebarActiveGroup,\n  SidebarDrawerItems,\n  SidebarDrawerOpen,\n  SidebarDrawerOverlay\n} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"./sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { XL_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\n\n/**\n * @summary Sidebar is a collapsible navigation component that displays menu items and groups.\n * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.\n * The sidebar coordinates selection and navigation across nested items using context providers and custom events.\n *\n * Features:\n * - Collapsible state for space-saving layouts with icon-only mode\n * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups\n * - Keyboard navigation with full ARIA support for accessibility\n * - Programmatic link navigation support with anchor elements\n * - Active item tracking and synchronized state management\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between sidebar items and groups\n * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays\n * - Enter/Space: Activate focused item or toggle group\n * - Tab: Standard focus management to interactive elements\n *\n * @slot default - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements\n * @slot upper - Insert brand/logo content in sidebar header\n * @slot lower - Insert content in sidebar footer\n *\n * @fires sgds-select - Emitted when a sidebar item or group is selected.\n *   Event detail: { activeItem: string } - name of the selected item\n *\n */\n\ntype SidebarVariant = \"persistent\" | \"overlay\" | \"collapsible\";\nexport class SgdsSidebar extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidebarStyle];\n\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /**\n   * Controls whether the sidebar is collapsed or expanded to save screen space.\n   * When true, sidebar displays icon-only mode for root items. When false, full labels and content are shown.\n   * On mobile devices (width <= 576px), this is automatically toggled based on screen size.\n   * Collapsing propagates to child items, affecting label visibility and spacing.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The name of the currently active sidebar item or group for programmatic control.\n   * Setting this property programmatically selects the item with the matching `name` attribute.\n   * Automatically expands parent groups to reveal nested items and syncs the active state throughout the hierarchy.\n   * Clearing this property (setting to empty string) deselects all items.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /**\n   * Shows a scrim/overlay background behind the drawer or sidebar in overlay mode.\n   * When true, displays a semi-transparent dark overlay behind the drawer to focus user attention.\n   * Only visible when drawer is open or in overlay mode with sidebar not collapsed.\n   * @attribute scrim\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) scrim = false;\n\n  /**\n   * Controls the sidebar's collapse behaviour.\n   * - `\"collapsible\"` (default): shows a toggle button that collapses/expands the sidebar.\n   * - `\"persistent\"`: sidebar is always visible and cannot be collapsed.\n   * - `\"overlay\"`: sidebar slides over the content as a drawer on smaller viewports.\n   * @attribute variant\n   * @type {\"collapsible\" | \"persistent\" | \"overlay\"}\n   * @default \"collapsible\"\n   */\n  @property({ type: String, reflect: true }) variant: SidebarVariant = \"collapsible\";\n\n  /**\n   * Accessible label for the sidebar navigation landmark.\n   * Passed to the `<nav>` element's `aria-label` attribute so screen readers can distinguish\n   * this sidebar from other navigation regions on the page (e.g. a top mainnav).\n   * Override when your page uses a more specific term (e.g. `\"Dashboard navigation\"`).\n   * @attribute aria-label\n   * @type {string}\n   * @default \"Sidebar navigation\"\n   */\n  @property({ type: String }) ariaLabel = \"Sidebar navigation\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  private _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Syncs collapsed state to all descendants via context */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed = false;\n\n  /** @internal Syncs active item selection to all descendants via context */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides drawer items to descendants via context */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems: Element[] = [];\n\n  /** @internal Provides drawer open/closed state to descendants via context */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal Provides overlay mode state to descendants via context */\n  @provide({ context: SidebarDrawerOverlay })\n  @state()\n  private _isOverlay = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  /** @internal */\n  @state()\n  private _isNarrowViewport = false;\n\n  /** @internal Bound resize handler for proper event listener removal */\n  private _boundHandleResize = this._handleResize.bind(this);\n\n  /** @internal Bound i-sgds-click handler for proper event listener removal */\n  private _boundHandleItemClick = this._handleItemClick.bind(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      this._handleActive();\n    });\n\n    window?.addEventListener(\"resize\", this._boundHandleResize);\n    this._handleResize();\n    this.addEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document?.removeEventListener(\"click\", this._handleClickOutOfElement);\n    window?.removeEventListener(\"resize\", this._boundHandleResize);\n    this.removeEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n  }\n\n  firstUpdated() {\n    document?.addEventListener(\"click\", this._handleClickOutOfElement);\n    this._updateOverlayState();\n  }\n\n  updated() {\n    this._handleActive();\n  }\n\n  /**\n   * Syncs collapsed property changes to all child items through context provider.\n   * Updates internal state and triggers re-render with appropriate CSS classes.\n   * @internal\n   * @returns {void}\n   */\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    if (this.variant !== \"persistent\") {\n      this._sidebarCollapsed = this.collapsed;\n    }\n  }\n\n  /**\n   * Updates sidebar state when active item changes via context provider.\n   * Marks items as selected and handles drawer overlay visibility based on nesting level.\n   * Root-level items with children trigger drawer display. Nested selections expand parent groups.\n   * @internal\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem(oldItem?: unknown) {\n    if (!this._sidebarActiveItem) return;\n\n    const allItems = this._getAllItems();\n    allItems.forEach(item => (item._selected = false));\n    (this._drawerItems as SidebarElement[]).forEach(item => (item._selected = false));\n    if (oldItem) (oldItem as SidebarElement)._selected = false;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 1) {\n      // First level of navigation, check if need to open drawer or not.\n      if (this._sidebarActiveItem._childElements.length > 0) {\n        this._setNodesToDrawer(this._sidebarActiveItem as SgdsSidebarGroup);\n      } else {\n        this._revertNodesToParent();\n      }\n    } else {\n      // when nested, we will find the top level of parent\n      let parentEle = this._sidebarActiveItem.parentElement as SgdsSidebarGroup;\n\n      while (parentEle instanceof SgdsSidebarGroup && parentEle._childLevel >= 1) {\n        if (parentEle._childLevel === 1) {\n          // when active item not in drawer, set nodes into drawer.\n          if (!parentEle.classList.contains(\"sidebar-nested-overlay\")) {\n            this._setNodesToDrawer(parentEle);\n          }\n        }\n\n        parentEle._selected = true;\n\n        parentEle = parentEle.parentElement as SgdsSidebarGroup;\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\n\n  /**\n   * Finds and activates sidebar items matching the active property name.\n   * Recursively searches the hierarchy for the target item. Clears selection when active is empty.\n   * @internal\n   * @returns {void}\n   */\n  @watch(\"active\")\n  _handleActive() {\n    // Return early if active is empty\n    if (!this.active) {\n      this._sidebarActiveItem = null;\n      return;\n    }\n\n    this._sidebarActiveItem = this._getActiveChild();\n  }\n\n  /**\n   * Recursively searches all nesting levels for a sidebar element matching the active name.\n   * Traverses the complete hierarchy to support selection of deeply nested items.\n   * @internal\n   * @returns {SidebarElement | null} The matching element or null if not found\n   */\n  private _getActiveChild() {\n    const findByName = (elements: SidebarElement[]): SidebarElement | null => {\n      for (const element of elements) {\n        if (element.name === this.active) {\n          return element;\n        }\n        if (element._childElements?.length) {\n          const found = findByName(element._childElements);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    return findByName(this._defaultNodes) ?? findByName(this._drawerItems as SidebarElement[]);\n  }\n  /**\n   * Manages responsive behavior on window resize.\n   * Auto-collapses sidebar on narrow viewports (< XL_BREAKPOINT).\n   * Switches collapsible variant to overlay mode on screens below MD_BREAKPOINT.\n   * @internal\n   * @returns {void}\n   */\n  private _handleResize() {\n    const isNarrowViewport = window.innerWidth < XL_BREAKPOINT;\n\n    if (isNarrowViewport !== this._isNarrowViewport) {\n      this._isNarrowViewport = isNarrowViewport;\n      this.collapsed = this._isNarrowViewport;\n    }\n\n    this._updateOverlayState();\n  }\n\n  /**\n   * Updates overlay state based on variant and screen size.\n   * Collapsible variant switches to overlay mode on screens below MD_BREAKPOINT (768px).\n   * @internal\n   * @returns {void}\n   */\n  private _updateOverlayState() {\n    if (this.variant === \"overlay\") {\n      this._isOverlay = true;\n    } else if (this.variant === \"collapsible\") {\n      this._isOverlay = window.innerWidth < MD_BREAKPOINT;\n    } else {\n      this._isOverlay = false;\n    }\n  }\n\n  /**\n   * Populates drawer overlay with children of the specified parent group.\n   * Clears previous drawer content before adding new items. Reverts previous group's items to parent.\n   * @internal\n   * @param {SgdsSidebarGroup} element - The parent group whose children to display in drawer\n   * @returns {void}\n   */\n  private _setNodesToDrawer(element: SgdsSidebarGroup) {\n    if (!element) return;\n\n    // when there is element, we will revert the nodes of the previous active group before setting new value into the active group\n    if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {\n      this._revertNodesToParent();\n    }\n\n    this._sidebarActiveGroup = element;\n\n    // when there is an active group set, always set new menu items\n    this._drawerItems = [...this._sidebarActiveGroup._childElements];\n  }\n\n  /**\n   * Returns drawer items to their original parent element and clears the drawer.\n   * Called when closing the drawer or switching active groups.\n   * @internal\n   * @returns {void}\n   */\n  private _revertNodesToParent() {\n    if (this._sidebarActiveGroup) {\n      this._drawerItems.forEach(e => {\n        this._sidebarActiveGroup?.append(e);\n      });\n\n      this._drawerItems = [];\n    }\n\n    this._sidebarActiveGroup = null;\n  }\n\n  /**\n   * Recursively collects all descendant sidebar elements via slot assignments.\n   * Traverses _defaultNodes and their _childElements to build a flat list of all items and groups.\n   * @internal\n   * @returns {SidebarElement[]} All descendant sidebar elements\n   */\n  private _getAllItems(): SidebarElement[] {\n    const collect = (elements: SidebarElement[]): SidebarElement[] => {\n      const result: SidebarElement[] = [];\n      for (const el of elements) {\n        result.push(el);\n        if (el._childElements?.length) {\n          result.push(...collect(el._childElements));\n        }\n      }\n      return result;\n    };\n    return collect(this._defaultNodes ?? []);\n  }\n\n  /**\n   * Handles item click events via delegation on the sidebar root.\n   * Manages selection state, drawer visibility, anchor navigation, and sgds-select emission.\n   * @internal\n   * @param {Event} e - The bubbled i-sgds-click event\n   * @returns {void}\n   */\n  private _handleItemClick(e: Event) {\n    const element = (e as CustomEvent).detail.element as SidebarElement;\n\n    if (element === this._sidebarActiveGroup) {\n      // just toggle drawer\n      this._showDrawer = !this._showDrawer;\n    } else {\n      if (this.active !== element.name) {\n        const allItems = this._getAllItems();\n        this.active = element.name;\n        allItems.forEach(item => (item._selected = false));\n      }\n\n      if (element._childElements.length > 0) {\n        this._showDrawer = true;\n      } else {\n        this._showDrawer = false;\n\n        // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves\n        const anchorLink = element.querySelector(\":scope > a\") as HTMLAnchorElement;\n        if (anchorLink) anchorLink.click();\n      }\n\n      // Emit sgds-select event when an item is selected\n      this.emit(\"sgds-select\", { detail: { activeItem: element.name } });\n    }\n  }\n\n  /**\n   * Toggles the sidebar between collapsed and expanded display modes.\n   * Updates labels visibility and spacing accordingly. Called when user clicks collapse button.\n   * @public\n   * @returns {void}\n   */\n  public toggleCollapsed() {\n    if (this.variant !== \"persistent\") this.collapsed = !this.collapsed;\n  }\n\n  /**\n   * Closes drawer when user clicks outside the sidebar.\n   * Also collapses overlay sidebar when clicking outside (if in overlay mode).\n   * @internal\n   * @param {MouseEvent} e - The click event from document\n   * @returns {void}\n   */\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    const overlay = e.composedPath().find(e => (e as HTMLElement)?.classList?.contains(\"sidebar--overlay\"));\n    if (overlay || !e.composedPath().includes(this)) {\n      this._showDrawer = false;\n\n      if (this._isOverlay) {\n        const toggler = (e.target as HTMLElement).getAttribute(\"data-sidebar-toggler\");\n\n        if (!toggler) this.collapsed = true;\n      }\n    }\n  };\n\n  render() {\n    return html`\n      <nav\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--collapsed\": this._sidebarCollapsed,\n          overlay: this._isOverlay\n        })}\n        aria-label=${this.ariaLabel}\n      >\n        <div\n          class=${classMap({\n            \"sidebar--overlay\": this.scrim,\n            show: this.scrim && (this._showDrawer || (this._isOverlay && !this._sidebarCollapsed))\n          })}\n        ></div>\n\n        <div class=\"sidebar-main\">\n          <div class=\"sidebar-wrapper\">\n            <div class=\"sidebar-top\">\n              <div class=\"sidebar-brand-name\">\n                <slot name=\"upper\"></slot>\n              </div>\n\n              ${this.variant === \"collapsible\"\n                ? html`<sgds-icon-button\n                    name=${this._sidebarCollapsed ? \"sidebar-expand\" : \"sidebar-collapse\"}\n                    variant=\"ghost\"\n                    tone=\"neutral\"\n                    size=\"sm\"\n                    @click=${this.toggleCollapsed}\n                    .ariaLabel=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                  ></sgds-icon-button>`\n                : nothing}\n            </div>\n\n            <div class=\"sidebar-content\">\n              <slot></slot>\n            </div>\n\n            <slot name=\"lower\"></slot>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-nested-overlay\": true,\n            show: this._showDrawer\n          })}\n        >\n          ${this._isNarrowViewport\n            ? html`<sgds-icon-button\n                name=\"chevron-left\"\n                variant=\"ghost\"\n                tone=\"neutral\"\n                size=\"sm\"\n                @click=${() => (this._showDrawer = false)}\n                .ariaLabel=${\"Close drawer\"}\n              ></sgds-icon-button>`\n            : nothing}\n          ${this._drawerItems}\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidebar;\n"],"names":["sidebarStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-sidebar.js","sources":["../../../src/components/Sidebar/sgds-sidebar.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarStyle from \"./sidebar.css\";\n\nimport { provide } from \"@lit/context\";\nimport {\n  SidebarCollapsed,\n  SidebarActiveItem,\n  SidebarActiveGroup,\n  SidebarDrawerItems,\n  SidebarDrawerOpen,\n  SidebarDrawerOverlay\n} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"./sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { XL_BREAKPOINT, MD_BREAKPOINT } from \"../../utils/breakpoints\";\nimport type { ISgdsSidebarSelectEventDetail } from \"./types\";\nexport type { ISgdsSidebarSelectEventDetail };\n\n/**\n * @summary Sidebar is a collapsible navigation component that displays menu items and groups.\n * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.\n * The sidebar coordinates selection and navigation across nested items using context providers and custom events.\n *\n * Features:\n * - Collapsible state for space-saving layouts with icon-only mode\n * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups\n * - Keyboard navigation with full ARIA support for accessibility\n * - Programmatic link navigation support with anchor elements\n * - Active item tracking and synchronized state management\n *\n * Keyboard Navigation:\n * - Tab/Shift+Tab: Navigate between visible sidebar items and groups\n * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays\n * - Enter/Space: Activate focused item or toggle group\n *\n * @slot default - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements\n * @slot upper - Insert brand/logo content in sidebar header\n * @slot lower - Insert content in sidebar footer\n *\n * @event sgds-select - Emitted when a sidebar item or group is selected.\n * @eventDetail {ISgdsSidebarSelectEventDetail} sgds-select\n *\n */\n\ntype SidebarVariant = \"persistent\" | \"overlay\" | \"collapsible\";\nexport class SgdsSidebar extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidebarStyle];\n\n  static dependencies = {\n    \"sgds-icon-button\": SgdsIconButton\n  };\n  /**\n   * Controls whether the sidebar is collapsed or expanded to save screen space.\n   * When true, sidebar displays icon-only mode for root items. When false, full labels and content are shown.\n   * On mobile devices (width <= 576px), this is automatically toggled based on screen size.\n   * Collapsing propagates to child items, affecting label visibility and spacing.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * The name of the currently active sidebar item or group for programmatic control.\n   * Setting this property programmatically selects the item with the matching `name` attribute.\n   * Automatically expands parent groups to reveal nested items and syncs the active state throughout the hierarchy.\n   * Clearing this property (setting to empty string) deselects all items.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /**\n   * Shows a scrim/overlay background behind the drawer or sidebar in overlay mode.\n   * When true, displays a semi-transparent dark overlay behind the drawer to focus user attention.\n   * Only visible when drawer is open or in overlay mode with sidebar not collapsed.\n   * @attribute scrim\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) scrim = false;\n\n  /**\n   * Controls the sidebar's collapse behaviour.\n   * - `\"collapsible\"` (default): shows a toggle button that collapses/expands the sidebar.\n   * - `\"persistent\"`: sidebar is always visible and cannot be collapsed.\n   * - `\"overlay\"`: sidebar slides over the content as a drawer on smaller viewports.\n   * @attribute variant\n   * @type {\"collapsible\" | \"persistent\" | \"overlay\"}\n   * @default \"collapsible\"\n   */\n  @property({ type: String, reflect: true }) variant: SidebarVariant = \"collapsible\";\n\n  /**\n   * Accessible label for the sidebar navigation landmark.\n   * Passed to the `<nav>` element's `aria-label` attribute so screen readers can distinguish\n   * this sidebar from other navigation regions on the page (e.g. a top mainnav).\n   * Override when your page uses a more specific term (e.g. `\"Dashboard navigation\"`).\n   * @attribute aria-label\n   * @type {string}\n   * @default \"Sidebar navigation\"\n   */\n  @property({ type: String }) ariaLabel = \"Sidebar navigation\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  private _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Syncs collapsed state to all descendants via context */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed = false;\n\n  /** @internal Syncs active item selection to all descendants via context */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides drawer items to descendants via context */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems: Element[] = [];\n\n  /** @internal Provides drawer open/closed state to descendants via context */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal Provides overlay mode state to descendants via context */\n  @provide({ context: SidebarDrawerOverlay })\n  @state()\n  private _isOverlay = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  /** @internal */\n  @state()\n  private _isNarrowViewport = false;\n\n  /** @internal Bound resize handler for proper event listener removal */\n  private _boundHandleResize = this._handleResize.bind(this);\n\n  /** @internal Bound i-sgds-click handler for proper event listener removal */\n  private _boundHandleItemClick = this._handleItemClick.bind(this);\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateComplete.then(() => {\n      this._handleActive();\n    });\n\n    window?.addEventListener(\"resize\", this._boundHandleResize);\n    this._handleResize();\n    this.addEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document?.removeEventListener(\"click\", this._handleClickOutOfElement);\n    window?.removeEventListener(\"resize\", this._boundHandleResize);\n    this.removeEventListener(\"i-sgds-click\", this._boundHandleItemClick);\n  }\n\n  firstUpdated() {\n    document?.addEventListener(\"click\", this._handleClickOutOfElement);\n    this._updateOverlayState();\n  }\n\n  updated() {\n    this._handleActive();\n  }\n\n  /**\n   * Syncs collapsed property changes to all child items through context provider.\n   * Updates internal state and triggers re-render with appropriate CSS classes.\n   * @internal\n   * @returns {void}\n   */\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    if (this.variant !== \"persistent\") {\n      this._sidebarCollapsed = this.collapsed;\n    }\n  }\n\n  /**\n   * Updates sidebar state when active item changes via context provider.\n   * Marks items as selected and handles drawer overlay visibility based on nesting level.\n   * Root-level items with children trigger drawer display. Nested selections expand parent groups.\n   * @internal\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem(oldItem?: unknown) {\n    if (!this._sidebarActiveItem) return;\n\n    const allItems = this._getAllItems();\n    allItems.forEach(item => (item._selected = false));\n    (this._drawerItems as SidebarElement[]).forEach(item => (item._selected = false));\n    if (oldItem) (oldItem as SidebarElement)._selected = false;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 1) {\n      // First level of navigation, check if need to open drawer or not.\n      if (this._sidebarActiveItem._childElements.length > 0) {\n        this._setNodesToDrawer(this._sidebarActiveItem as SgdsSidebarGroup);\n      } else {\n        this._revertNodesToParent();\n      }\n    } else {\n      // when nested, we will find the top level of parent\n      let parentEle = this._sidebarActiveItem.parentElement as SgdsSidebarGroup;\n\n      while (parentEle instanceof SgdsSidebarGroup && parentEle._childLevel >= 1) {\n        if (parentEle._childLevel === 1) {\n          // when active item not in drawer, set nodes into drawer.\n          if (!parentEle.classList.contains(\"sidebar-nested-overlay\")) {\n            this._setNodesToDrawer(parentEle);\n          }\n        }\n\n        parentEle._selected = true;\n\n        parentEle = parentEle.parentElement as SgdsSidebarGroup;\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\n\n  /**\n   * Finds and activates sidebar items matching the active property name.\n   * Recursively searches the hierarchy for the target item. Clears selection when active is empty.\n   * @internal\n   * @returns {void}\n   */\n  @watch(\"active\")\n  _handleActive() {\n    // Return early if active is empty\n    if (!this.active) {\n      this._sidebarActiveItem = null;\n      return;\n    }\n\n    this._sidebarActiveItem = this._getActiveChild();\n  }\n\n  /**\n   * Recursively searches all nesting levels for a sidebar element matching the active name.\n   * Traverses the complete hierarchy to support selection of deeply nested items.\n   * @internal\n   * @returns {SidebarElement | null} The matching element or null if not found\n   */\n  private _getActiveChild() {\n    const findByName = (elements: SidebarElement[]): SidebarElement | null => {\n      for (const element of elements) {\n        if (element.name === this.active) {\n          return element;\n        }\n        if (element._childElements?.length) {\n          const found = findByName(element._childElements);\n          if (found) return found;\n        }\n      }\n      return null;\n    };\n\n    return findByName(this._defaultNodes) ?? findByName(this._drawerItems as SidebarElement[]);\n  }\n  /**\n   * Manages responsive behavior on window resize.\n   * Auto-collapses sidebar on narrow viewports (< XL_BREAKPOINT).\n   * Switches collapsible variant to overlay mode on screens below MD_BREAKPOINT.\n   * @internal\n   * @returns {void}\n   */\n  private _handleResize() {\n    const isNarrowViewport = window.innerWidth < XL_BREAKPOINT;\n\n    if (isNarrowViewport !== this._isNarrowViewport) {\n      this._isNarrowViewport = isNarrowViewport;\n      this.collapsed = this._isNarrowViewport;\n    }\n\n    this._updateOverlayState();\n  }\n\n  /**\n   * Updates overlay state based on variant and screen size.\n   * Collapsible variant switches to overlay mode on screens below MD_BREAKPOINT (768px).\n   * @internal\n   * @returns {void}\n   */\n  private _updateOverlayState() {\n    if (this.variant === \"overlay\") {\n      this._isOverlay = true;\n    } else if (this.variant === \"collapsible\") {\n      this._isOverlay = window.innerWidth < MD_BREAKPOINT;\n    } else {\n      this._isOverlay = false;\n    }\n  }\n\n  /**\n   * Populates drawer overlay with children of the specified parent group.\n   * Clears previous drawer content before adding new items. Reverts previous group's items to parent.\n   * @internal\n   * @param {SgdsSidebarGroup} element - The parent group whose children to display in drawer\n   * @returns {void}\n   */\n  private _setNodesToDrawer(element: SgdsSidebarGroup) {\n    if (!element) return;\n\n    // when there is element, we will revert the nodes of the previous active group before setting new value into the active group\n    if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {\n      this._revertNodesToParent();\n    }\n\n    this._sidebarActiveGroup = element;\n\n    // when there is an active group set, always set new menu items\n    this._drawerItems = [...this._sidebarActiveGroup._childElements];\n  }\n\n  /**\n   * Returns drawer items to their original parent element and clears the drawer.\n   * Called when closing the drawer or switching active groups.\n   * @internal\n   * @returns {void}\n   */\n  private _revertNodesToParent() {\n    if (this._sidebarActiveGroup) {\n      this._drawerItems.forEach(e => {\n        this._sidebarActiveGroup?.append(e);\n      });\n\n      this._drawerItems = [];\n    }\n\n    this._sidebarActiveGroup = null;\n  }\n\n  /**\n   * Recursively collects all descendant sidebar elements via slot assignments.\n   * Traverses _defaultNodes and their _childElements to build a flat list of all items and groups.\n   * @internal\n   * @returns {SidebarElement[]} All descendant sidebar elements\n   */\n  private _getAllItems(): SidebarElement[] {\n    const collect = (elements: SidebarElement[]): SidebarElement[] => {\n      const result: SidebarElement[] = [];\n      for (const el of elements) {\n        result.push(el);\n        if (el._childElements?.length) {\n          result.push(...collect(el._childElements));\n        }\n      }\n      return result;\n    };\n    return collect(this._defaultNodes ?? []);\n  }\n\n  /**\n   * Handles item click events via delegation on the sidebar root.\n   * Manages selection state, drawer visibility, anchor navigation, and sgds-select emission.\n   * @internal\n   * @param {Event} e - The bubbled i-sgds-click event\n   * @returns {void}\n   */\n  private _handleItemClick(e: Event) {\n    const element = (e as CustomEvent).detail.element as SidebarElement;\n\n    if (element === this._sidebarActiveGroup) {\n      // just toggle drawer\n      this._showDrawer = !this._showDrawer;\n    } else {\n      if (this.active !== element.name) {\n        const allItems = this._getAllItems();\n        this.active = element.name;\n        allItems.forEach(item => (item._selected = false));\n      }\n\n      if (element._childElements.length > 0) {\n        this._showDrawer = true;\n      } else {\n        this._showDrawer = false;\n\n        // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves\n        const anchorLink = element.querySelector(\":scope > a\") as HTMLAnchorElement;\n        if (anchorLink) anchorLink.click();\n      }\n\n      // Emit sgds-select event when an item is selected\n      this.emit<ISgdsSidebarSelectEventDetail>(\"sgds-select\", { detail: { activeItem: element.name } });\n    }\n  }\n\n  /**\n   * Toggles the sidebar between collapsed and expanded display modes.\n   * Updates labels visibility and spacing accordingly. Called when user clicks collapse button.\n   * @public\n   * @returns {void}\n   */\n  public toggleCollapsed() {\n    if (this.variant !== \"persistent\") this.collapsed = !this.collapsed;\n  }\n\n  /**\n   * Closes drawer when user clicks outside the sidebar.\n   * Also collapses overlay sidebar when clicking outside (if in overlay mode).\n   * @internal\n   * @param {MouseEvent} e - The click event from document\n   * @returns {void}\n   */\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    const overlay = e.composedPath().find(e => (e as HTMLElement)?.classList?.contains(\"sidebar--overlay\"));\n    if (overlay || !e.composedPath().includes(this)) {\n      this._showDrawer = false;\n\n      if (this._isOverlay) {\n        const toggler = (e.target as HTMLElement).getAttribute(\"data-sidebar-toggler\");\n\n        if (!toggler) this.collapsed = true;\n      }\n    }\n  };\n\n  render() {\n    return html`\n      <nav\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--collapsed\": this._sidebarCollapsed,\n          overlay: this._isOverlay\n        })}\n        aria-label=${this.ariaLabel}\n      >\n        <div\n          class=${classMap({\n            \"sidebar--overlay\": this.scrim,\n            show: this.scrim && (this._showDrawer || (this._isOverlay && !this._sidebarCollapsed))\n          })}\n        ></div>\n\n        <div class=\"sidebar-main\">\n          <div class=\"sidebar-wrapper\">\n            <div class=\"sidebar-top\">\n              <div class=\"sidebar-brand-name\">\n                <slot name=\"upper\"></slot>\n              </div>\n\n              ${this.variant === \"collapsible\"\n                ? html`<sgds-icon-button\n                    name=${this._sidebarCollapsed ? \"sidebar-expand\" : \"sidebar-collapse\"}\n                    variant=\"ghost\"\n                    tone=\"neutral\"\n                    size=\"sm\"\n                    @click=${this.toggleCollapsed}\n                    .ariaLabel=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                  ></sgds-icon-button>`\n                : nothing}\n            </div>\n\n            <div class=\"sidebar-content\">\n              <slot></slot>\n            </div>\n\n            <slot name=\"lower\"></slot>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-nested-overlay\": true,\n            show: this._showDrawer\n          })}\n        >\n          ${this._isNarrowViewport\n            ? html`<sgds-icon-button\n                name=\"chevron-left\"\n                variant=\"ghost\"\n                tone=\"neutral\"\n                size=\"sm\"\n                @click=${() => (this._showDrawer = false)}\n                .ariaLabel=${\"Close drawer\"}\n              ></sgds-icon-button>`\n            : nothing}\n          ${this._drawerItems}\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsSidebar;\n"],"names":["sidebarStyle"],"mappings":"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"}

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

@@ -15,9 +15,9 @@ import SgdsElement from "../../base/sgds-element";
  * - Automatic child element tracking and nesting level detection
  *
  * Keyboard Navigation:
- * - Arrow Up/Down: Navigate between siblings in the same level
+ * - Tab/Shift+Tab: Navigate between visible items in DOM order
  * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
- * - Enter: Activate focused item or toggle group
+ * - Enter/Space: Activate focused item or toggle group
  *
  * Context Management:
  * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems

package/components/Sidebar/sidebar-element.js

@@ -5,8 +5,6 @@ import SgdsElement from '../../base/sgds-element.js';
 import { consume } from '@lit/context';
 import { SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems, SidebarDrawerOpen, SidebarDrawerOverlay } from './sidebar-context.js';
 
-const ARROW_DOWN = "ArrowDown";
-const ARROW_UP = "ArrowUp";
 const ARROW_LEFT = "ArrowLeft";
 const ARROW_RIGHT = "ArrowRight";
 const ENTER = "Enter";
@@ -26,9 +24,9 @@ const SPACE = " ";
  * - Automatic child element tracking and nesting level detection
  *
  * Keyboard Navigation:
- * - Arrow Up/Down: Navigate between siblings in the same level
+ * - Tab/Shift+Tab: Navigate between visible items in DOM order
  * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)
- * - Enter: Activate focused item or toggle group
+ * - Enter/Space: Activate focused item or toggle group
  *
  * Context Management:
  * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems
@@ -104,9 +102,16 @@ class SidebarElement extends SgdsElement {
         this._getChildLevel();
     }
     updated() {
+        var _a;
         if (this._childLevel === 2) {
             this._hidden = !this.closest(".sidebar-nested-overlay");
         }
+        else if (this._childLevel >= 3) {
+            const inOverlay = !!this.closest(".sidebar-nested-overlay");
+            const parentGroup = this.parentElement;
+            const parentExpanded = (_a = parentGroup === null || parentGroup === void 0 ? void 0 : parentGroup.showMenu) !== null && _a !== void 0 ? _a : false;
+            this._hidden = !inOverlay || !parentExpanded;
+        }
     }
     /**
      * Updates child elements from slot content when DOM changes.
@@ -135,7 +140,7 @@ class SidebarElement extends SgdsElement {
      * @returns {void}
      */
     _handleKeyDown(event) {
-        var _a, _b, _c, _d;
+        var _a, _b;
         const target = event.target;
         switch (event.key) {
             case SPACE:
@@ -146,33 +151,6 @@ class SidebarElement extends SgdsElement {
                     this._handleClick();
                 return;
             }
-            case ARROW_DOWN: {
-                event.preventDefault();
-                event.stopPropagation();
-                const child = target._childElements[0];
-                const isChildHidden = child === null || child === void 0 ? void 0 : child._hidden;
-                const childElement = !isChildHidden ? child : null;
-                const nextElement = childElement || target.nextElementSibling || ((_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.nextElementSibling);
-                if (nextElement === null || nextElement === void 0 ? void 0 : nextElement.shadowRoot) {
-                    const focusTarget = nextElement.shadowRoot.querySelector("[tabindex]");
-                    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
-                }
-                return;
-            }
-            case ARROW_UP: {
-                event.preventDefault();
-                event.stopPropagation();
-                const prevSiblingChildren = (_b = target.previousElementSibling) === null || _b === void 0 ? void 0 : _b._childElements;
-                const lastChild = prevSiblingChildren ? prevSiblingChildren[(prevSiblingChildren === null || prevSiblingChildren === void 0 ? void 0 : prevSiblingChildren.length) - 1] : null;
-                const isChildHidden = lastChild === null || lastChild === void 0 ? void 0 : lastChild._hidden;
-                const childElement = !isChildHidden ? lastChild : null;
-                const prevElement = childElement || target.previousElementSibling || target.parentElement;
-                if (prevElement === null || prevElement === void 0 ? void 0 : prevElement.shadowRoot) {
-                    const focusTarget = prevElement.shadowRoot.querySelector("[tabindex]");
-                    focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
-                }
-                return;
-            }
             case ARROW_LEFT: {
                 event.preventDefault();
                 event.stopPropagation();
@@ -184,7 +162,7 @@ class SidebarElement extends SgdsElement {
                 else {
                     // check if we are on the drawer, if so move back to parent
                     const childLevel = target._childLevel;
-                    if (childLevel >= 2 && ((_c = this._sidebarActiveGroup) === null || _c === void 0 ? void 0 : _c.shadowRoot)) {
+                    if (childLevel >= 2 && ((_a = this._sidebarActiveGroup) === null || _a === void 0 ? void 0 : _a.shadowRoot)) {
                         const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector("[tabindex]");
                         focusTarget === null || focusTarget === void 0 ? void 0 : focusTarget.focus();
                     }
@@ -195,7 +173,7 @@ class SidebarElement extends SgdsElement {
                 event.preventDefault();
                 event.stopPropagation();
                 if (this._sidebarActiveGroup === this) {
-                    if ((_d = this._drawerItems) === null || _d === void 0 ? void 0 : _d.length) {
+                    if ((_b = this._drawerItems) === null || _b === void 0 ? void 0 : _b.length) {
                         if (this._showDrawer) {
                             const drawerItem = this._drawerItems[0];
                             if (drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.shadowRoot) {

package/components/Sidebar/sidebar-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-element.js","sources":["../../../src/components/Sidebar/sidebar-element.ts"],"sourcesContent":["import { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { PropertyValueMap } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { consume } from \"@lit/context\";\nimport {\n  SidebarActiveGroup,\n  SidebarActiveItem,\n  SidebarCollapsed,\n  SidebarDrawerItems,\n  SidebarDrawerOpen,\n  SidebarDrawerOverlay\n} from \"./sidebar-context\";\n\nconst ARROW_DOWN = \"ArrowDown\";\nconst ARROW_UP = \"ArrowUp\";\nconst ARROW_LEFT = \"ArrowLeft\";\nconst ARROW_RIGHT = \"ArrowRight\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @summary Base class for sidebar navigation components.\n * Provides core functionality for sidebar items and groups including keyboard navigation,\n * selection state management, and nesting support. This class manages hierarchical navigation,\n * active state tracking, and drawer overlay coordination through context providers.\n *\n * Features:\n * - Multi-level keyboard navigation (Arrow keys, Enter)\n * - Active state management via Lit context subscription\n * - Support for nested hierarchies up to 3 levels deep\n * - Focus management and full ARIA attribute support\n * - Event emission for sidebar coordination (i-sgds-click)\n * - Automatic child element tracking and nesting level detection\n *\n * Keyboard Navigation:\n * - Arrow Up/Down: Navigate between siblings in the same level\n * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)\n * - Enter: Activate focused item or toggle group\n *\n * Context Management:\n * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems\n * - Updates state based on context changes for responsive UI updates\n *\n * @internal\n */\nexport class SidebarElement extends SgdsElement {\n  static styles = DropdownElement.styles;\n\n  /**\n   * The display title/label for the sidebar element.\n   * Shown in the UI and used for accessibility labels (aria-label).\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * The unique name identifier for the sidebar element.\n   * Used to identify selections in sgds-select events and manage active states.\n   * Should be unique among siblings in the same navigation level.\n   * @attribute name\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** @internal */\n  @consume({ context: SidebarCollapsed, subscribe: true })\n  @state()\n  _sidebarCollapsed = false;\n\n  /** @internal */\n  @consume({ context: SidebarActiveItem, subscribe: true })\n  @state()\n  _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarActiveGroup, subscribe: true })\n  @state()\n  _sidebarActiveGroup: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarDrawerItems, subscribe: true })\n  @state()\n  _drawerItems: SidebarElement[] | null = null;\n\n  /** @internal Tracks whether a drawer overlay is currently open */\n  @consume({ context: SidebarDrawerOpen, subscribe: true })\n  @state()\n  _showDrawer = false;\n\n  /** @internal Tracks whether sidebar is overlay or not */\n  @consume({ context: SidebarDrawerOverlay, subscribe: true })\n  @state()\n  _isOverlay = false;\n\n  /** @internal */\n  @state() _childLevel = 1;\n\n  /**\n   * Indicates whether this element is currently selected/active in the sidebar.\n   * @internal\n   */\n  @state() _selected = false;\n\n  /**\n   * Indicates whether this element should be hidden based on parent drawer visibility.\n   * Used to hide level 2 items until their parent's drawer is opened.\n   * @internal\n   */\n  @state() _hidden = false;\n\n  /**\n   * List of direct child sidebar elements (items or groups).\n   * Updated when slot content changes.\n   * @internal\n   */\n  @state()\n  _childElements: SidebarElement[] = [];\n\n  /** @internal */\n  @state() _childActive = false;\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true })\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._getChildLevel();\n    this.addEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._getChildLevel();\n  }\n\n  updated() {\n    if (this._childLevel === 2) {\n      this._hidden = !this.closest(\".sidebar-nested-overlay\");\n    }\n  }\n\n  /**\n   * Updates child elements from slot content when DOM changes.\n   * Called automatically when slot content changes.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleSlotChange() {\n    this._childElements = this._defaultNodes;\n  }\n\n  /**\n   * Handles click/activation of this element, emitting internal event for parent sidebar.\n   * Parent sidebar processes this event to manage selection and drawer state.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleClick() {\n    this.emit(\"i-sgds-click\", { detail: { element: this, level: this._childLevel } });\n  }\n\n  /**\n   * Manages keyboard navigation for the sidebar hierarchy.\n   * Handles arrow keys for navigation, Enter to activate, and manages drawer/submenu expansion.\n   * Prevents default browser behavior and stops event propagation.\n   * @internal\n   * @param {KeyboardEvent} event - The keyboard event\n   * @returns {void}\n   */\n  private _handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n\n    switch (event.key) {\n      case SPACE:\n      case ENTER: {\n        event.preventDefault();\n        event.stopPropagation();\n        if (event.target === this) this._handleClick();\n        return;\n      }\n      case ARROW_DOWN: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const child = (target as SidebarElement)._childElements[0];\n\n        const isChildHidden = child?._hidden;\n        const childElement = !isChildHidden ? child : null;\n        const nextElement = childElement || target.nextElementSibling || target.parentElement?.nextElementSibling;\n\n        if (nextElement?.shadowRoot) {\n          const focusTarget = nextElement.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n          focusTarget?.focus();\n        }\n\n        return;\n      }\n      case ARROW_UP: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const prevSiblingChildren = (target.previousElementSibling as SidebarElement)?._childElements;\n        const lastChild = prevSiblingChildren ? prevSiblingChildren[prevSiblingChildren?.length - 1] : null;\n        const isChildHidden = lastChild?._hidden;\n\n        const childElement = !isChildHidden ? lastChild : null;\n        const prevElement = childElement || target.previousElementSibling || target.parentElement;\n\n        if (prevElement?.shadowRoot) {\n          const focusTarget = prevElement.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n          focusTarget?.focus();\n        }\n        return;\n      }\n      case ARROW_LEFT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          // when drawer is open, close it\n          if (this._showDrawer) this._handleClick();\n        } else {\n          // check if we are on the drawer, if so move back to parent\n          const childLevel = (target as SidebarElement)._childLevel;\n          if (childLevel >= 2 && this._sidebarActiveGroup?.shadowRoot) {\n            const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n            focusTarget?.focus();\n          }\n        }\n\n        return;\n      }\n      case ARROW_RIGHT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          if (this._drawerItems?.length) {\n            if (this._showDrawer) {\n              const drawerItem = this._drawerItems[0];\n              if (drawerItem?.shadowRoot) {\n                const focusTarget = drawerItem.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n                focusTarget?.focus();\n              }\n            } else {\n              this._handleClick();\n            }\n          }\n        } else {\n          if (this._childLevel === 1 && this._childElements.length > 0) {\n            // when there is nested, we trigger click to show drawer\n            this._handleClick();\n          }\n        }\n\n        return;\n      }\n    }\n  }\n\n  /**\n   * Calculates the nesting depth by counting sgds-sidebar-group ancestors.\n   * Level 1 = root items, Level 2+ = nested within groups.\n   * Accounts for items positioned in drawer overlays.\n   * @internal\n   * @returns {void}\n   */\n  private _getChildLevel() {\n    let currentEle = this.parentElement;\n    let level = 1;\n\n    while (currentEle?.tagName.toLowerCase() === \"sgds-sidebar-group\") {\n      level += 1;\n      currentEle = currentEle.parentElement;\n    }\n\n    const isInDrawer = currentEle?.classList.contains(\"sidebar-nested-overlay\");\n    this._childLevel = isInDrawer ? level + 1 : level;\n  }\n}\n"],"names":[],"mappings":";;;;;;;AAcA,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B,MAAM,UAAU,GAAG,WAAW,CAAC;AAC/B,MAAM,WAAW,GAAG,YAAY,CAAC;AACjC,MAAM,KAAK,GAAG,OAAO,CAAC;AACtB,MAAM,KAAK,GAAG,GAAG,CAAC;AAElB;;;;;;;;;;;;;;;;;;;;;;;;AAwBG;AACG,MAAO,cAAe,SAAQ,WAAW,CAAA;AAA/C,IAAA,WAAA,GAAA;;AAGE;;;;;;AAMG;QACwC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AAEtD;;;;;;;AAOG;QACwC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;;QAKrD,IAAiB,CAAA,iBAAA,GAAG,KAAK,CAAC;;QAK1B,IAAkB,CAAA,kBAAA,GAA0B,IAAI,CAAC;;QAKjD,IAAmB,CAAA,mBAAA,GAA0B,IAAI,CAAC;;QAKlD,IAAY,CAAA,YAAA,GAA4B,IAAI,CAAC;;QAK7C,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAKpB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;;QAGV,IAAW,CAAA,WAAA,GAAG,CAAC,CAAC;AAEzB;;;AAGG;QACM,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAE3B;;;;AAIG;QACM,IAAO,CAAA,OAAA,GAAG,KAAK,CAAC;AAEzB;;;;AAIG;QAEH,IAAc,CAAA,cAAA,GAAqB,EAAE,CAAC;;QAG7B,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;KAsK/B;IAhKC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,EAAE,CAAC;QACtB,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KACvD;IAED,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;KAC1D;AAED,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QACtC,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,OAAO,GAAA;AACL,QAAA,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,EAAE;YAC1B,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,CAAC;SACzD;KACF;AAED;;;;;AAKG;IACO,iBAAiB,GAAA;AACzB,QAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,aAAa,CAAC;KAC1C;AAED;;;;;AAKG;IACO,YAAY,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;KACnF;AAED;;;;;;;AAOG;AACK,IAAA,cAAc,CAAC,KAAoB,EAAA;;AACzC,QAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAAqB,CAAC;AAE3C,QAAA,QAAQ,KAAK,CAAC,GAAG;AACf,YAAA,KAAK,KAAK,CAAC;YACX,KAAK,KAAK,EAAE;gBACV,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AACxB,gBAAA,IAAI,KAAK,CAAC,MAAM,KAAK,IAAI;oBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC/C,OAAO;aACR;YACD,KAAK,UAAU,EAAE;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBAExB,MAAM,KAAK,GAAI,MAAyB,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;gBAE3D,MAAM,aAAa,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,OAAO,CAAC;AACrC,gBAAA,MAAM,YAAY,GAAG,CAAC,aAAa,GAAG,KAAK,GAAG,IAAI,CAAC;AACnD,gBAAA,MAAM,WAAW,GAAG,YAAY,IAAI,MAAM,CAAC,kBAAkB,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,kBAAkB,CAAA,CAAC;gBAE1G,IAAI,WAAW,aAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,UAAU,EAAE;oBAC3B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAC;AAC7F,oBAAA,WAAW,aAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,KAAK,EAAE,CAAC;iBACtB;gBAED,OAAO;aACR;YACD,KAAK,QAAQ,EAAE;gBACb,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;gBAExB,MAAM,mBAAmB,GAAG,CAAC,EAAA,GAAA,MAAM,CAAC,sBAAyC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,cAAc,CAAC;gBAC9F,MAAM,SAAS,GAAG,mBAAmB,GAAG,mBAAmB,CAAC,CAAA,mBAAmB,KAAA,IAAA,IAAnB,mBAAmB,KAAnB,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,mBAAmB,CAAE,MAAM,IAAG,CAAC,CAAC,GAAG,IAAI,CAAC;gBACpG,MAAM,aAAa,GAAG,SAAS,KAAA,IAAA,IAAT,SAAS,KAAT,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,SAAS,CAAE,OAAO,CAAC;AAEzC,gBAAA,MAAM,YAAY,GAAG,CAAC,aAAa,GAAG,SAAS,GAAG,IAAI,CAAC;gBACvD,MAAM,WAAW,GAAG,YAAY,IAAI,MAAM,CAAC,sBAAsB,IAAI,MAAM,CAAC,aAAa,CAAC;gBAE1F,IAAI,WAAW,aAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,UAAU,EAAE;oBAC3B,MAAM,WAAW,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAC;AAC7F,oBAAA,WAAW,aAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,KAAK,EAAE,CAAC;iBACtB;gBACD,OAAO;aACR;YACD,KAAK,UAAU,EAAE;gBACf,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AAExB,gBAAA,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;;oBAErC,IAAI,IAAI,CAAC,WAAW;wBAAE,IAAI,CAAC,YAAY,EAAE,CAAC;iBAC3C;qBAAM;;AAEL,oBAAA,MAAM,UAAU,GAAI,MAAyB,CAAC,WAAW,CAAC;AAC1D,oBAAA,IAAI,UAAU,IAAI,CAAC,KAAI,CAAA,EAAA,GAAA,IAAI,CAAC,mBAAmB,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,UAAU,CAAA,EAAE;AAC3D,wBAAA,MAAM,WAAW,GAAG,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAC;AAC1G,wBAAA,WAAW,aAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,KAAK,EAAE,CAAC;qBACtB;iBACF;gBAED,OAAO;aACR;YACD,KAAK,WAAW,EAAE;gBAChB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,KAAK,CAAC,eAAe,EAAE,CAAC;AAExB,gBAAA,IAAI,IAAI,CAAC,mBAAmB,KAAK,IAAI,EAAE;AACrC,oBAAA,IAAI,MAAA,IAAI,CAAC,YAAY,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,MAAM,EAAE;AAC7B,wBAAA,IAAI,IAAI,CAAC,WAAW,EAAE;4BACpB,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;4BACxC,IAAI,UAAU,aAAV,UAAU,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAV,UAAU,CAAE,UAAU,EAAE;gCAC1B,MAAM,WAAW,GAAG,UAAU,CAAC,UAAU,CAAC,aAAa,CAAC,YAAY,CAAuB,CAAC;AAC5F,gCAAA,WAAW,aAAX,WAAW,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAX,WAAW,CAAE,KAAK,EAAE,CAAC;6BACtB;yBACF;6BAAM;4BACL,IAAI,CAAC,YAAY,EAAE,CAAC;yBACrB;qBACF;iBACF;qBAAM;AACL,oBAAA,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;;wBAE5D,IAAI,CAAC,YAAY,EAAE,CAAC;qBACrB;iBACF;gBAED,OAAO;aACR;SACF;KACF;AAED;;;;;;AAMG;IACK,cAAc,GAAA;AACpB,QAAA,IAAI,UAAU,GAAG,IAAI,CAAC,aAAa,CAAC;QACpC,IAAI,KAAK,GAAG,CAAC,CAAC;AAEd,QAAA,OAAO,CAAA,UAAU,KAAV,IAAA,IAAA,UAAU,uBAAV,UAAU,CAAE,OAAO,CAAC,WAAW,EAAE,MAAK,oBAAoB,EAAE;YACjE,KAAK,IAAI,CAAC,CAAC;AACX,YAAA,UAAU,GAAG,UAAU,CAAC,aAAa,CAAC;SACvC;AAED,QAAA,MAAM,UAAU,GAAG,UAAU,KAAA,IAAA,IAAV,UAAU,KAAV,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,UAAU,CAAE,SAAS,CAAC,QAAQ,CAAC,wBAAwB,CAAC,CAAC;AAC5E,QAAA,IAAI,CAAC,WAAW,GAAG,UAAU,GAAG,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC;KACnD;;AAjPM,cAAA,CAAA,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;AASI,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUX,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKrD,UAAA,CAAA;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACvD,IAAA,KAAK,EAAE;AACkB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK1B,UAAA,CAAA;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACxD,IAAA,KAAK,EAAE;AACyC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKjD,UAAA,CAAA;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACzD,IAAA,KAAK,EAAE;AAC0C,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,qBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKlD,UAAA,CAAA;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,kBAAkB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACzD,IAAA,KAAK,EAAE;AACqC,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK7C,UAAA,CAAA;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACxD,IAAA,KAAK,EAAE;AACY,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAKpB,UAAA,CAAA;IAFC,OAAO,CAAC,EAAE,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AAC3D,IAAA,KAAK,EAAE;AACW,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGV,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMhB,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAOlB,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,SAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQzB,UAAA,CAAA;AADC,IAAA,KAAK,EAAE;AAC8B,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7B,UAAA,CAAA;AAAR,IAAA,KAAK,EAAE;AAAsB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAItB,UAAA,CAAA;AADP,IAAA,qBAAqB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACA,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,eAAA,EAAA,KAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"sidebar-element.js","sources":["../../../src/components/Sidebar/sidebar-element.ts"],"sourcesContent":["import { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { DropdownElement } from \"../../base/dropdown-element\";\nimport { PropertyValueMap } from \"lit\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { consume } from \"@lit/context\";\nimport {\n  SidebarActiveGroup,\n  SidebarActiveItem,\n  SidebarCollapsed,\n  SidebarDrawerItems,\n  SidebarDrawerOpen,\n  SidebarDrawerOverlay\n} from \"./sidebar-context\";\n\nconst ARROW_LEFT = \"ArrowLeft\";\nconst ARROW_RIGHT = \"ArrowRight\";\nconst ENTER = \"Enter\";\nconst SPACE = \" \";\n\n/**\n * @summary Base class for sidebar navigation components.\n * Provides core functionality for sidebar items and groups including keyboard navigation,\n * selection state management, and nesting support. This class manages hierarchical navigation,\n * active state tracking, and drawer overlay coordination through context providers.\n *\n * Features:\n * - Multi-level keyboard navigation (Arrow keys, Enter)\n * - Active state management via Lit context subscription\n * - Support for nested hierarchies up to 3 levels deep\n * - Focus management and full ARIA attribute support\n * - Event emission for sidebar coordination (i-sgds-click)\n * - Automatic child element tracking and nesting level detection\n *\n * Keyboard Navigation:\n * - Tab/Shift+Tab: Navigate between visible items in DOM order\n * - Arrow Left/Right: Navigate hierarchically (collapse/expand or move in drawer)\n * - Enter/Space: Activate focused item or toggle group\n *\n * Context Management:\n * - Consumes: SidebarCollapsed, SidebarActiveItem, SidebarActiveGroup, SidebarDrawerItems\n * - Updates state based on context changes for responsive UI updates\n *\n * @internal\n */\nexport class SidebarElement extends SgdsElement {\n  static styles = DropdownElement.styles;\n\n  /**\n   * The display title/label for the sidebar element.\n   * Shown in the UI and used for accessibility labels (aria-label).\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * The unique name identifier for the sidebar element.\n   * Used to identify selections in sgds-select events and manage active states.\n   * Should be unique among siblings in the same navigation level.\n   * @attribute name\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) name = \"\";\n\n  /** @internal */\n  @consume({ context: SidebarCollapsed, subscribe: true })\n  @state()\n  _sidebarCollapsed = false;\n\n  /** @internal */\n  @consume({ context: SidebarActiveItem, subscribe: true })\n  @state()\n  _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarActiveGroup, subscribe: true })\n  @state()\n  _sidebarActiveGroup: SidebarElement | null = null;\n\n  /** @internal */\n  @consume({ context: SidebarDrawerItems, subscribe: true })\n  @state()\n  _drawerItems: SidebarElement[] | null = null;\n\n  /** @internal Tracks whether a drawer overlay is currently open */\n  @consume({ context: SidebarDrawerOpen, subscribe: true })\n  @state()\n  _showDrawer = false;\n\n  /** @internal Tracks whether sidebar is overlay or not */\n  @consume({ context: SidebarDrawerOverlay, subscribe: true })\n  @state()\n  _isOverlay = false;\n\n  /** @internal */\n  @state() _childLevel = 1;\n\n  /**\n   * Indicates whether this element is currently selected/active in the sidebar.\n   * @internal\n   */\n  @state() _selected = false;\n\n  /**\n   * Indicates whether this element should be hidden based on parent drawer visibility.\n   * Used to hide level 2 items until their parent's drawer is opened.\n   * @internal\n   */\n  @state() _hidden = false;\n\n  /**\n   * List of direct child sidebar elements (items or groups).\n   * Updated when slot content changes.\n   * @internal\n   */\n  @state()\n  _childElements: SidebarElement[] = [];\n\n  /** @internal */\n  @state() _childActive = false;\n\n  /** @internal */\n  @queryAssignedElements({ flatten: true })\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this._getChildLevel();\n    this.addEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\"keydown\", this._handleKeyDown);\n  }\n\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._getChildLevel();\n  }\n\n  updated() {\n    if (this._childLevel === 2) {\n      this._hidden = !this.closest(\".sidebar-nested-overlay\");\n    } else if (this._childLevel >= 3) {\n      const inOverlay = !!this.closest(\".sidebar-nested-overlay\");\n      const parentGroup = this.parentElement as SidebarElement & { showMenu?: boolean };\n      const parentExpanded = parentGroup?.showMenu ?? false;\n      this._hidden = !inOverlay || !parentExpanded;\n    }\n  }\n\n  /**\n   * Updates child elements from slot content when DOM changes.\n   * Called automatically when slot content changes.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleSlotChange() {\n    this._childElements = this._defaultNodes;\n  }\n\n  /**\n   * Handles click/activation of this element, emitting internal event for parent sidebar.\n   * Parent sidebar processes this event to manage selection and drawer state.\n   * @internal\n   * @returns {void}\n   */\n  protected _handleClick() {\n    this.emit(\"i-sgds-click\", { detail: { element: this, level: this._childLevel } });\n  }\n\n  /**\n   * Manages keyboard navigation for the sidebar hierarchy.\n   * Handles arrow keys for navigation, Enter to activate, and manages drawer/submenu expansion.\n   * Prevents default browser behavior and stops event propagation.\n   * @internal\n   * @param {KeyboardEvent} event - The keyboard event\n   * @returns {void}\n   */\n  private _handleKeyDown(event: KeyboardEvent) {\n    const target = event.target as HTMLElement;\n\n    switch (event.key) {\n      case SPACE:\n      case ENTER: {\n        event.preventDefault();\n        event.stopPropagation();\n        if (event.target === this) this._handleClick();\n        return;\n      }\n      case ARROW_LEFT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          // when drawer is open, close it\n          if (this._showDrawer) this._handleClick();\n        } else {\n          // check if we are on the drawer, if so move back to parent\n          const childLevel = (target as SidebarElement)._childLevel;\n          if (childLevel >= 2 && this._sidebarActiveGroup?.shadowRoot) {\n            const focusTarget = this._sidebarActiveGroup.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n            focusTarget?.focus();\n          }\n        }\n\n        return;\n      }\n      case ARROW_RIGHT: {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (this._sidebarActiveGroup === this) {\n          if (this._drawerItems?.length) {\n            if (this._showDrawer) {\n              const drawerItem = this._drawerItems[0];\n              if (drawerItem?.shadowRoot) {\n                const focusTarget = drawerItem.shadowRoot.querySelector(\"[tabindex]\") as HTMLElement | null;\n                focusTarget?.focus();\n              }\n            } else {\n              this._handleClick();\n            }\n          }\n        } else {\n          if (this._childLevel === 1 && this._childElements.length > 0) {\n            // when there is nested, we trigger click to show drawer\n            this._handleClick();\n          }\n        }\n\n        return;\n      }\n    }\n  }\n\n  /**\n   * Calculates the nesting depth by counting sgds-sidebar-group ancestors.\n   * Level 1 = root items, Level 2+ = nested within groups.\n   * Accounts for items positioned in drawer overlays.\n   * @internal\n   * @returns {void}\n   */\n  private _getChildLevel() {\n    let currentEle = this.parentElement;\n    let level = 1;\n\n    while (currentEle?.tagName.toLowerCase() === \"sgds-sidebar-group\") {\n      level += 1;\n      currentEle = currentEle.parentElement;\n    }\n\n    const isInDrawer = currentEle?.classList.contains(\"sidebar-nested-overlay\");\n    this._childLevel = isInDrawer ? level + 1 : level;\n  }\n}\n"],"names":[],"mappings":"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"}

package/components/Sidebar/types.d.ts

@@ -0,0 +1,3 @@
+export interface ISgdsSidebarSelectEventDetail {
+    activeItem: string;
+}