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

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

@@ -8,7 +8,10 @@ import css_248z from './sidebar.js';
 import { provide } from '@lit/context';
 import { SidebarActiveGroup, SidebarCollapsed, SidebarActiveItem, SidebarDrawerItems, SidebarDrawerOpen } from './sidebar-context.js';
 import { watch } from '../../utils/watch.js';
+import { SgdsIconButton } from '../IconButton/sgds-icon-button.js';
+import { SM_BREAKPOINT } from '../../utils/breakpoints.js';
 
+const SGDS_SIDEBAR_GROUP = "sgds-sidebar-group";
 /**
  * @summary Sidebar is a collapsible navigation component that displays menu items and groups.
  * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.
@@ -27,14 +30,14 @@ import { watch } from '../../utils/watch.js';
  * - Enter/Space: Activate focused item or toggle group
  * - Tab: Standard focus management to interactive elements
  *
- * @slot - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements
- * @slot brandName - Insert brand/logo content in sidebar header
+ * @slot default - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements
+ * @slot top - Insert brand/logo content in sidebar header
+ * @slot bottom - Insert content in sidebar footer
  *
  * @fires sgds-select - Emitted when a sidebar item or group is selected.
  *   Event detail: { activeItem: string } - name of the selected item
  *
  */
-const SGDS_SIDEBAR_GROUP = "sgds-sidebar-group";
 class SgdsSidebar extends SgdsElement {
     constructor() {
         super(...arguments);
@@ -66,6 +69,16 @@ class SgdsSidebar extends SgdsElement {
         this._drawerItems = [];
         /** @internal Indicates whether a drawer overlay is currently open */
         this._showDrawer = false;
+        /** @internal */
+        this._isMobile = false;
+        /**
+         * Handles clicks outside the sidebar to close the drawer overlay.
+         * Closes the nested items drawer when user clicks outside the sidebar.
+         * Maintains drawer visibility when clicking within sidebar boundaries.
+         * @private
+         * @param {MouseEvent} e - The click event from the document
+         * @returns {void}
+         */
         this._handleClickOutOfElement = (e) => {
             if (!this._sidebarActiveGroup)
                 return;
@@ -83,11 +96,21 @@ class SgdsSidebar extends SgdsElement {
             this._handleActive();
             document.addEventListener("click", this._handleClickOutOfElement);
         });
+        window.addEventListener("resize", this._handleResize.bind(this));
+        this._handleResize();
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         document.removeEventListener("click", this._handleClickOutOfElement);
+        window.removeEventListener("resize", this._handleResize.bind(this));
     }
+    /**
+     * Watch handler for the collapsed property.
+     * Syncs the internal collapsed state with the property value.
+     * Triggers re-render and updates all child items' collapsed styling.
+     * @private
+     * @returns {void}
+     */
     _handleCollapsed() {
         this._sidebarCollapsed = this.collapsed;
     }
@@ -134,6 +157,13 @@ class SgdsSidebar extends SgdsElement {
             }
         }
     }
+    /**
+     * Watch handler for the active property.
+     * Finds and sets the active item by name from the sidebar hierarchy.
+     * Clears active state when active property is empty.
+     * @private
+     * @returns {void}
+     */
     _handleActive() {
         // Return early if active is empty
         if (!this.active) {
@@ -142,6 +172,13 @@ class SgdsSidebar extends SgdsElement {
         }
         this._sidebarActiveItem = this._getActiveChild();
     }
+    /**
+     * Recursively searches the sidebar hierarchy for an item matching the active name.
+     * Traverses through all nested levels to find the target element.
+     * Used to support programmatic selection of deeply nested items.
+     * @private
+     * @returns {SidebarElement | null} The matching sidebar element or null if not found
+     */
     _getActiveChild() {
         const findByName = (elements) => {
             var _a;
@@ -159,6 +196,19 @@ class SgdsSidebar extends SgdsElement {
         };
         return findByName(this._defaultNodes);
     }
+    /**
+     * Handles window resize events to manage responsive behavior.
+     * Automatically collapses sidebar on mobile devices (width <= SM_BREAKPOINT).
+     * Expands sidebar on larger screens.
+     * @private
+     * @returns {void}
+     */ _handleResize() {
+        const isMobile = window.innerWidth <= SM_BREAKPOINT;
+        if (isMobile !== this._isMobile) {
+            this._isMobile = isMobile;
+            this.collapsed = this._isMobile;
+        }
+    }
     /**
      * Manages the drawer overlay content based on the selected parent item.
      * If element is provided: Opens drawer for that element's children.
@@ -240,9 +290,9 @@ class SgdsSidebar extends SgdsElement {
     }
     /**
      * Toggles the sidebar between collapsed and expanded states.
-     * Updates the collapsed property and emits sgds-sidebar-toggle event.
-     *
-     * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state
+     * Updates the collapsed property to show/hide labels and adjust item spacing.
+     * Called when user clicks the collapse/expand button in the sidebar header.
+     * @private
      * @returns {void}
      */
     toggleCollapsed() {
@@ -258,44 +308,65 @@ class SgdsSidebar extends SgdsElement {
             "sidebar--collapsed": this._sidebarCollapsed
         })}
       >
-        <div class="sidebar-wrapper">
-          <div class="sidebar-header">
-            <div class="sidebar-brand-name">
-              <slot name="brandName"></slot>
+        <div class="sidebar-main">
+          <div class="sidebar-wrapper">
+            <div class="sidebar-top">
+              <div class="sidebar-brand-name">
+                <slot name="top"></slot>
+              </div>
+
+              <sgds-icon-button
+                name=${this._sidebarCollapsed ? "sidebar-expand" : "sidebar-collapse"}
+                variant="ghost"
+                tone="neutral"
+                size="sm"
+                @click=${this.toggleCollapsed}
+                aria-label=${this._sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
+                aria-expanded=${!this._sidebarCollapsed}
+              ></sgds-icon-button>
             </div>
 
-            <sgds-icon-button
-              name=${this._sidebarCollapsed ? "sidebar-expand" : "sidebar-collapse"}
-              variant="ghost"
-              tone="neutral"
-              size="sm"
-              @click=${this.toggleCollapsed}
-              aria-label=${this._sidebarCollapsed ? "Expand sidebar" : "Collapse sidebar"}
-              aria-expanded=${!this._sidebarCollapsed}
-            ></sgds-icon-button>
-          </div>
+            <nav
+              class="sidebar-content"
+              role="navigation"
+              aria-label="Main navigation"
+              aria-activedescendant=${((_a = this._sidebarActiveItem) === null || _a === void 0 ? void 0 : _a.name) || ""}
+            >
+              <slot></slot>
+            </nav>
 
-          <nav class="sidebar-content" role="navigation" aria-label="Main navigation" aria-activedescendant=${((_a = this._sidebarActiveItem) === null || _a === void 0 ? void 0 : _a.name) || ""}>
-            <slot></slot>
-          </nav>
+            <slot name="bottom"></slot>
+          </div>
         </div>
 
-          <div
-            class=${classMap({
+        <div
+          class=${classMap({
             "sidebar-nested-overlay": true,
             show: this._showDrawer
         })}
-            role="dialog"
-            aria-label=${((_b = this._sidebarActiveGroup) === null || _b === void 0 ? void 0 : _b.title) ? `Nested items for ${this._sidebarActiveGroup.title}` : ""}
-          >
-            ${this._drawerItems}
-          </div>
+          role="dialog"
+          aria-label=${((_b = this._sidebarActiveGroup) === null || _b === void 0 ? void 0 : _b.title) ? `Nested items for ${this._sidebarActiveGroup.title}` : ""}
+        >
+          <sgds-icon-button
+            name="chevron-left"
+            variant="ghost"
+            tone="neutral"
+            size="sm"
+            @click=${() => (this._showDrawer = false)}
+            aria-label=${"Close drawer"}
+            aria-expanded=${this._showDrawer}
+          ></sgds-icon-button>
+
+          ${this._drawerItems}
         </div>
       </div>
     `;
     }
 }
 SgdsSidebar.styles = [...SgdsElement.styles, css_248z];
+SgdsSidebar.dependencies = {
+    "sgds-icon-button": SgdsIconButton
+};
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsSidebar.prototype, "collapsed", void 0);
@@ -325,6 +396,9 @@ __decorate([
 __decorate([
     queryAssignedElements()
 ], SgdsSidebar.prototype, "_defaultNodes", void 0);
+__decorate([
+    state()
+], SgdsSidebar.prototype, "_isMobile", void 0);
 __decorate([
     watch("collapsed")
 ], SgdsSidebar.prototype, "_handleCollapsed", null);

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar.js","sources":["../../../../src/components/Sidebar/sgds-sidebar.ts"],"sourcesContent":["import { html, PropertyValues } 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} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\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 - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements\n * @slot brandName - Insert brand/logo content in sidebar header\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\nconst SGDS_SIDEBAR_GROUP = \"sgds-sidebar-group\";\nexport class SgdsSidebar extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidebarStyle];\n\n  /**\n   * Controls whether the sidebar is collapsed or expanded.\n   * When true, the sidebar is in collapsed state showing only icons.\n   * When false, the sidebar is expanded displaying full labels and content.\n   * Affects all child items by toggling visibility of labels and adjusting 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.\n   * Reflects the selected item and allows external control of sidebar selection.\n   * Used to synchronize sidebar state with external navigation state or programmatic selection.\n   * When set, the corresponding item with matching `name` attribute will be highlighted as active.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Tracks the collapsed state and provides it via context to all child elements */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed: boolean;\n\n  /** @internal Tracks the currently active item and provides it via context to all child elements */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides the list of items shown in the drawer overlay */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems = [];\n\n  /** @internal Indicates whether a drawer overlay is currently open */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"navigation\");\n    this.setAttribute(\"aria-label\", \"Main navigation\");\n\n    this.updateComplete.then(() => {\n      this.addItemListeners();\n      this._handleActive();\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n  }\n\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    this._sidebarCollapsed = this.collapsed;\n  }\n\n  /**\n   * Handles changes to the active item selection.\n   * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.\n   * For root-level items with children, opens the drawer overlay.\n   * For nested items, expands parent groups and opens the appropriate drawer if needed.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem() {\n    if (!this._sidebarActiveItem) return;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 0) {\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._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n        if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n          if (parentEle._childLevel === 0) {\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._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active\n          parentEle = parentEle.parentElement as SgdsSidebarGroup;\n        }\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\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  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);\n  }\n\n  /**\n   * Manages the drawer overlay content based on the selected parent item.\n   * If element is provided: Opens drawer for that element's children.\n   * If element is undefined: Closes drawer and reverts items to their parent.\n   * @private\n   * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes 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 = []; // always set to empty to prevent duplicate\n    const menuItems = this._sidebarActiveGroup.querySelectorAll(\n      \":scope > sgds-sidebar-group, :scope > sgds-sidebar-item\"\n    );\n    menuItems.forEach(e => {\n      this._drawerItems.push(e);\n    });\n  }\n\n  /**\n   * Reverts nested items back to their original parent element.\n   * Clears the drawer overlay content and updates selected attributes.\n   * Called when closing the drawer or switching to a different parent item.\n   * @private\n   * @param {SgdsSidebarItem} element - The parent item to return nodes to\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   * Attaches event listeners to all direct child sidebar items.\n   * Handles item selection events and drawer overlay state management.\n   * Manages emitting sgds-select custom events for external components.\n   * @private\n   * @returns {void}\n   */\n  private addItemListeners() {\n    const items = this.querySelectorAll(\"sgds-sidebar-item\");\n    const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);\n    const allItems = [...items, ...groups] as SidebarElement[];\n\n    allItems.forEach(item => {\n      item.addEventListener(\"i-sgds-click\", (e: CustomEvent) => {\n        const element = e.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            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 = item.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\n  /**\n   * Toggles the sidebar between collapsed and expanded states.\n   * Updates the collapsed property and emits sgds-sidebar-toggle event.\n   *\n   * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state\n   * @returns {void}\n   */\n  private toggleCollapsed() {\n    this.collapsed = !this.collapsed;\n  }\n\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this._sidebarActiveGroup) return;\n\n    if (!e.composedPath().includes(this)) {\n      this._showDrawer = false;\n    }\n  };\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--expanded\": !this._sidebarCollapsed,\n          \"sidebar--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div class=\"sidebar-wrapper\">\n          <div class=\"sidebar-header\">\n            <div class=\"sidebar-brand-name\">\n              <slot name=\"brandName\"></slot>\n            </div>\n\n            <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              aria-label=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n              aria-expanded=${!this._sidebarCollapsed}\n            ></sgds-icon-button>\n          </div>\n\n          <nav class=\"sidebar-content\" role=\"navigation\" aria-label=\"Main navigation\" aria-activedescendant=${\n            this._sidebarActiveItem?.name || \"\"\n          }>\n            <slot></slot>\n          </nav>\n        </div>\n\n          <div\n            class=${classMap({\n              \"sidebar-nested-overlay\": true,\n              show: this._showDrawer\n            })}\n            role=\"dialog\"\n            aria-label=${this._sidebarActiveGroup?.title ? `Nested items for ${this._sidebarActiveGroup.title}` : \"\"}\n          >\n            ${this._drawerItems}\n          </div>\n        </div>\n      </div>\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 } 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} from \"./sidebar-context\";\nimport { watch } from \"../../utils/watch\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\nimport SgdsSidebarGroup from \"./sgds-sidebar-group\";\nimport SgdsIconButton from \"../IconButton/sgds-icon-button\";\nimport { SM_BREAKPOINT } from \"../../utils/breakpoints\";\n\nconst SGDS_SIDEBAR_GROUP = \"sgds-sidebar-group\";\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 top - Insert brand/logo content in sidebar header\n * @slot bottom - 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\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.\n   * When true, the sidebar is in collapsed state showing only icons.\n   * When false, the sidebar is expanded displaying full labels and content.\n   * Affects all child items by toggling visibility of labels and adjusting 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.\n   * Reflects the selected item and allows external control of sidebar selection.\n   * Used to synchronize sidebar state with external navigation state or programmatic selection.\n   * When set, the corresponding item with matching `name` attribute will be highlighted as active.\n   * @attribute active\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) active = \"\";\n\n  /** @internal Tracks the currently active group and provides it via context to all child elements */\n  @provide({ context: SidebarActiveGroup })\n  @state()\n  _sidebarActiveGroup: SgdsSidebarGroup | null = null;\n\n  /** @internal Tracks the collapsed state and provides it via context to all child elements */\n  @provide({ context: SidebarCollapsed })\n  @state()\n  private _sidebarCollapsed: boolean;\n\n  /** @internal Tracks the currently active item and provides it via context to all child elements */\n  @provide({ context: SidebarActiveItem })\n  @state()\n  private _sidebarActiveItem: SidebarElement | null = null;\n\n  /** @internal Provides the list of items shown in the drawer overlay */\n  @provide({ context: SidebarDrawerItems })\n  @state()\n  private _drawerItems = [];\n\n  /** @internal Indicates whether a drawer overlay is currently open */\n  @provide({ context: SidebarDrawerOpen })\n  @state()\n  private _showDrawer = false;\n\n  /** @internal */\n  @queryAssignedElements()\n  private _defaultNodes!: SidebarElement[];\n\n  /** @internal */\n  @state()\n  private _isMobile = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"navigation\");\n    this.setAttribute(\"aria-label\", \"Main navigation\");\n\n    this.updateComplete.then(() => {\n      this.addItemListeners();\n      this._handleActive();\n      document.addEventListener(\"click\", this._handleClickOutOfElement);\n    });\n\n    window.addEventListener(\"resize\", this._handleResize.bind(this));\n    this._handleResize();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener(\"click\", this._handleClickOutOfElement);\n    window.removeEventListener(\"resize\", this._handleResize.bind(this));\n  }\n\n  /**\n   * Watch handler for the collapsed property.\n   * Syncs the internal collapsed state with the property value.\n   * Triggers re-render and updates all child items' collapsed styling.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"collapsed\")\n  _handleCollapsed() {\n    this._sidebarCollapsed = this.collapsed;\n  }\n\n  /**\n   * Handles changes to the active item selection.\n   * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.\n   * For root-level items with children, opens the drawer overlay.\n   * For nested items, expands parent groups and opens the appropriate drawer if needed.\n   * @private\n   * @returns {void}\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItem() {\n    if (!this._sidebarActiveItem) return;\n\n    const childLevel = this._sidebarActiveItem._childLevel;\n    this._sidebarActiveItem._selected = true;\n\n    if (childLevel === 0) {\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._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n        if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {\n          if (parentEle._childLevel === 0) {\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._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active\n          parentEle = parentEle.parentElement as SgdsSidebarGroup;\n        }\n      }\n\n      if (this._sidebarActiveGroup) {\n        this._sidebarActiveGroup._selected = true;\n      }\n    }\n  }\n\n  /**\n   * Watch handler for the active property.\n   * Finds and sets the active item by name from the sidebar hierarchy.\n   * Clears active state when active property is empty.\n   * @private\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 the sidebar hierarchy for an item matching the active name.\n   * Traverses through all nested levels to find the target element.\n   * Used to support programmatic selection of deeply nested items.\n   * @private\n   * @returns {SidebarElement | null} The matching sidebar 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);\n  }\n  /**\n   * Handles window resize events to manage responsive behavior.\n   * Automatically collapses sidebar on mobile devices (width <= SM_BREAKPOINT).\n   * Expands sidebar on larger screens.\n   * @private\n   * @returns {void}\n   */ private _handleResize() {\n    const isMobile = window.innerWidth <= SM_BREAKPOINT;\n\n    if (isMobile !== this._isMobile) {\n      this._isMobile = isMobile;\n      this.collapsed = this._isMobile;\n    }\n  }\n\n  /**\n   * Manages the drawer overlay content based on the selected parent item.\n   * If element is provided: Opens drawer for that element's children.\n   * If element is undefined: Closes drawer and reverts items to their parent.\n   * @private\n   * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes 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 = []; // always set to empty to prevent duplicate\n    const menuItems = this._sidebarActiveGroup.querySelectorAll(\n      \":scope > sgds-sidebar-group, :scope > sgds-sidebar-item\"\n    );\n    menuItems.forEach(e => {\n      this._drawerItems.push(e);\n    });\n  }\n\n  /**\n   * Reverts nested items back to their original parent element.\n   * Clears the drawer overlay content and updates selected attributes.\n   * Called when closing the drawer or switching to a different parent item.\n   * @private\n   * @param {SgdsSidebarItem} element - The parent item to return nodes to\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   * Attaches event listeners to all direct child sidebar items.\n   * Handles item selection events and drawer overlay state management.\n   * Manages emitting sgds-select custom events for external components.\n   * @private\n   * @returns {void}\n   */\n  private addItemListeners() {\n    const items = this.querySelectorAll(\"sgds-sidebar-item\");\n    const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);\n    const allItems = [...items, ...groups] as SidebarElement[];\n\n    allItems.forEach(item => {\n      item.addEventListener(\"i-sgds-click\", (e: CustomEvent) => {\n        const element = e.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            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 = item.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\n  /**\n   * Toggles the sidebar between collapsed and expanded states.\n   * Updates the collapsed property to show/hide labels and adjust item spacing.\n   * Called when user clicks the collapse/expand button in the sidebar header.\n   * @private\n   * @returns {void}\n   */\n  private toggleCollapsed() {\n    this.collapsed = !this.collapsed;\n  }\n\n  /**\n   * Handles clicks outside the sidebar to close the drawer overlay.\n   * Closes the nested items drawer when user clicks outside the sidebar.\n   * Maintains drawer visibility when clicking within sidebar boundaries.\n   * @private\n   * @param {MouseEvent} e - The click event from the document\n   * @returns {void}\n   */\n  private _handleClickOutOfElement = (e: MouseEvent) => {\n    if (!this._sidebarActiveGroup) return;\n\n    if (!e.composedPath().includes(this)) {\n      this._showDrawer = false;\n    }\n  };\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          sidebar: true,\n          \"sidebar--expanded\": !this._sidebarCollapsed,\n          \"sidebar--collapsed\": this._sidebarCollapsed\n        })}\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=\"top\"></slot>\n              </div>\n\n              <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                aria-label=${this._sidebarCollapsed ? \"Expand sidebar\" : \"Collapse sidebar\"}\n                aria-expanded=${!this._sidebarCollapsed}\n              ></sgds-icon-button>\n            </div>\n\n            <nav\n              class=\"sidebar-content\"\n              role=\"navigation\"\n              aria-label=\"Main navigation\"\n              aria-activedescendant=${this._sidebarActiveItem?.name || \"\"}\n            >\n              <slot></slot>\n            </nav>\n\n            <slot name=\"bottom\"></slot>\n          </div>\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-nested-overlay\": true,\n            show: this._showDrawer\n          })}\n          role=\"dialog\"\n          aria-label=${this._sidebarActiveGroup?.title ? `Nested items for ${this._sidebarActiveGroup.title}` : \"\"}\n        >\n          <sgds-icon-button\n            name=\"chevron-left\"\n            variant=\"ghost\"\n            tone=\"neutral\"\n            size=\"sm\"\n            @click=${() => (this._showDrawer = false)}\n            aria-label=${\"Close drawer\"}\n            aria-expanded=${this._showDrawer}\n          ></sgds-icon-button>\n\n          ${this._drawerItems}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebar;\n"],"names":["sidebarStyle"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.sidebar-item{border-radius:var(--sgds-border-radius-md);cursor:pointer;padding:var(--sgds-padding-xs);transition:background-color .15s ease-in-out,color .15s ease-in-out}.sidebar-item.active,.sidebar-item:hover{background-color:var(--sgds-surface-raised)}.sidebar-item:focus,.sidebar-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-item-label-wrapper,.sidebar-item-label-wrapper>div{align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sidebar-item-label-wrapper{justify-content:space-between}.sidebar-item-label{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;display:-webkit-box;font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-20);max-height:calc(var(--sgds-line-height-20, 20px)*2);overflow:hidden}.sidebar-item-label.offset{margin-left:var(--sgds-margin-2-xl)}.sidebar-item-label-wrapper .sidebar-item.active{background-color:var(--sgds-surface-raised);color:var(--sgds-primary-color-default)}.sidebar-item-label-wrapper .sidebar-item-trailingIcon{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}.sidebar-item--collapsed .sidebar-item-label,.sidebar-item--collapsed .sidebar-item-trailingIcon{display:none}.sidebar-item--collapsed .sidebar-item-label-wrapper{justify-content:center}.sidebar-submenu{overflow:hidden}.sidebar-submenu>div{margin-top:-100%;opacity:0;pointer-events:none;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.sidebar-submenu.show>div{margin-top:0;opacity:1;pointer-events:auto}.sidebar-submenu--collapsed{display:none}`;
+var css_248z = lit.css`.sidebar-item{border-radius:var(--sgds-border-radius-md);cursor:pointer;padding:var(--sgds-padding-xs);transition:background-color .15s ease-in-out,color .15s ease-in-out}.sidebar-item.active,.sidebar-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.sidebar-item:focus,.sidebar-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-item-label-wrapper,.sidebar-item-label-wrapper>div{align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sidebar-item-label-wrapper{justify-content:space-between}.sidebar-item-label{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;display:-webkit-box;font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-20);max-height:calc(var(--sgds-line-height-20, 20px)*2);overflow:hidden}.sidebar-item-label.offset{margin-left:var(--sgds-margin-2-xl)}.sidebar-item-label-wrapper .sidebar-item.active{background-color:var(--sgds-surface-raised);color:var(--sgds-primary-color-default)}.sidebar-item-label-wrapper .sidebar-item-trailingIcon{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}.sidebar-item--collapsed .sidebar-item-label,.sidebar-item--collapsed .sidebar-item-trailingIcon{display:none}.sidebar-item--collapsed .sidebar-item-label-wrapper{justify-content:center}.sidebar-submenu{overflow:hidden}.sidebar-submenu>div{margin-top:-100%;opacity:0;pointer-events:none;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.sidebar-submenu.show>div{margin-top:0;opacity:1;pointer-events:auto}.sidebar-submenu--collapsed{display:none}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sidebar-item.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.sidebar-item{border-radius:var(--sgds-border-radius-md);cursor:pointer;padding:var(--sgds-padding-xs);transition:background-color .15s ease-in-out,color .15s ease-in-out}.sidebar-item.active,.sidebar-item:hover{background-color:var(--sgds-surface-raised)}.sidebar-item:focus,.sidebar-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-item-label-wrapper,.sidebar-item-label-wrapper>div{align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sidebar-item-label-wrapper{justify-content:space-between}.sidebar-item-label{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;display:-webkit-box;font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-20);max-height:calc(var(--sgds-line-height-20, 20px)*2);overflow:hidden}.sidebar-item-label.offset{margin-left:var(--sgds-margin-2-xl)}.sidebar-item-label-wrapper .sidebar-item.active{background-color:var(--sgds-surface-raised);color:var(--sgds-primary-color-default)}.sidebar-item-label-wrapper .sidebar-item-trailingIcon{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}.sidebar-item--collapsed .sidebar-item-label,.sidebar-item--collapsed .sidebar-item-trailingIcon{display:none}.sidebar-item--collapsed .sidebar-item-label-wrapper{justify-content:center}.sidebar-submenu{overflow:hidden}.sidebar-submenu>div{margin-top:-100%;opacity:0;pointer-events:none;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.sidebar-submenu.show>div{margin-top:0;opacity:1;pointer-events:auto}.sidebar-submenu--collapsed{display:none}`;
+var css_248z = css`.sidebar-item{border-radius:var(--sgds-border-radius-md);cursor:pointer;padding:var(--sgds-padding-xs);transition:background-color .15s ease-in-out,color .15s ease-in-out}.sidebar-item.active,.sidebar-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.sidebar-item:focus,.sidebar-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-item-label-wrapper,.sidebar-item-label-wrapper>div{align-items:center;display:flex;gap:var(--sgds-gap-xs)}.sidebar-item-label-wrapper{justify-content:space-between}.sidebar-item-label{-webkit-line-clamp:2;-webkit-box-orient:vertical;line-clamp:2;display:-webkit-box;font-size:var(--sgds-font-size-1);line-height:var(--sgds-line-height-20);max-height:calc(var(--sgds-line-height-20, 20px)*2);overflow:hidden}.sidebar-item-label.offset{margin-left:var(--sgds-margin-2-xl)}.sidebar-item-label-wrapper .sidebar-item.active{background-color:var(--sgds-surface-raised);color:var(--sgds-primary-color-default)}.sidebar-item-label-wrapper .sidebar-item-trailingIcon{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}.sidebar-item--collapsed .sidebar-item-label,.sidebar-item--collapsed .sidebar-item-trailingIcon{display:none}.sidebar-item--collapsed .sidebar-item-label-wrapper{justify-content:center}.sidebar-submenu{overflow:hidden}.sidebar-submenu>div{margin-top:-100%;opacity:0;pointer-events:none;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.sidebar-submenu.show>div{margin-top:0;opacity:1;pointer-events:auto}.sidebar-submenu--collapsed{display:none}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sidebar-item.js.map

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.sidebar-section{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;padding:var(--sgds-padding-sm) 0}.sidebar-section.no-border{border-bottom:none}.sidebar-section-label{align-items:center;border-radius:var(--sgds-border-radius-md);color:var(--sgds-label-color-subtle);cursor:pointer;display:flex;font-size:var(--sgds-font-size-0);gap:var(--sgds-gap-2-xs);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-xs)}.sidebar-section-label:hover{color:var(--sgds-label-color-default)}.sidebar-section-label:focus,.sidebar-section-label:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-section--collapsed .sidebar-section-label{height:0;margin:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.sidebar-section-content{overflow:hidden}.sidebar-section-content>div{margin-top:0;pointer-events:auto;transition:all var(--sgds-motion-duration-slow) var(--sgds-motion-easing-standard)}.sidebar-section-content.sidebar-section-content--collapsed>div{margin-top:-100%;pointer-events:none}.sidebar-section--collapsed .sidebar-section-content--collapsed>div{margin-top:0}`;
+var css_248z = lit.css`.sidebar-section{display:flex;flex-direction:column}.sidebar-section-label{align-items:center;border-radius:var(--sgds-border-radius-md);color:var(--sgds-label-color-subtle);cursor:pointer;display:flex;font-size:var(--sgds-font-size-0);gap:var(--sgds-gap-2-xs);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}.sidebar-section-label:hover{color:var(--sgds-label-color-default)}.sidebar-section-label:focus,.sidebar-section-label:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-section--collapsed .sidebar-section-label{height:0;margin:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.sidebar-section-content{overflow:hidden;padding:0 var(--sgds-padding-xs)}.sidebar-section-content>div{margin-top:0;pointer-events:auto;transition:all var(--sgds-motion-duration-slow) var(--sgds-motion-easing-standard)}.sidebar-section-content.sidebar-section-content--collapsed>div{margin-top:-100%;pointer-events:none}.sidebar-section--collapsed .sidebar-section-content--collapsed>div{margin-top:0}.sidebar-section-seperator{margin-bottom:var(--sgds-margin-md)}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sidebar-section.cjs.js.map

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

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.sidebar-section{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);display:flex;flex-direction:column;padding:var(--sgds-padding-sm) 0}.sidebar-section.no-border{border-bottom:none}.sidebar-section-label{align-items:center;border-radius:var(--sgds-border-radius-md);color:var(--sgds-label-color-subtle);cursor:pointer;display:flex;font-size:var(--sgds-font-size-0);gap:var(--sgds-gap-2-xs);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-xs)}.sidebar-section-label:hover{color:var(--sgds-label-color-default)}.sidebar-section-label:focus,.sidebar-section-label:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-section--collapsed .sidebar-section-label{height:0;margin:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.sidebar-section-content{overflow:hidden}.sidebar-section-content>div{margin-top:0;pointer-events:auto;transition:all var(--sgds-motion-duration-slow) var(--sgds-motion-easing-standard)}.sidebar-section-content.sidebar-section-content--collapsed>div{margin-top:-100%;pointer-events:none}.sidebar-section--collapsed .sidebar-section-content--collapsed>div{margin-top:0}`;
+var css_248z = css`.sidebar-section{display:flex;flex-direction:column}.sidebar-section-label{align-items:center;border-radius:var(--sgds-border-radius-md);color:var(--sgds-label-color-subtle);cursor:pointer;display:flex;font-size:var(--sgds-font-size-0);gap:var(--sgds-gap-2-xs);line-height:var(--sgds-line-height-20);padding:var(--sgds-padding-xs) var(--sgds-padding-sm)}.sidebar-section-label:hover{color:var(--sgds-label-color-default)}.sidebar-section-label:focus,.sidebar-section-label:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.sidebar-section--collapsed .sidebar-section-label{height:0;margin:0;opacity:0;overflow:hidden;padding:0;pointer-events:none;width:0}.sidebar-section-content{overflow:hidden;padding:0 var(--sgds-padding-xs)}.sidebar-section-content>div{margin-top:0;pointer-events:auto;transition:all var(--sgds-motion-duration-slow) var(--sgds-motion-easing-standard)}.sidebar-section-content.sidebar-section-content--collapsed>div{margin-top:-100%;pointer-events:none}.sidebar-section--collapsed .sidebar-section-content--collapsed>div{margin-top:0}.sidebar-section-seperator{margin-bottom:var(--sgds-margin-md)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sidebar-section.js.map

package/react/components/Sidebar/sidebar.cjs.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var lit = require('lit');
 
-var css_248z = lit.css`.sidebar{display:flex;flex-direction:column;height:100%;position:relative;transition:width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);z-index:1100}.sidebar--expanded{width:var(--sgds-dimension-288)}.sidebar--collapsed{width:var(--sgds-dimension-72)}.sidebar-header{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-xs)}.sidebar .sidebar-brand-name{padding-left:var(--sgds-padding-xs)}.sidebar--collapsed .sidebar-brand-name{display:none}.sidebar--collapsed .sidebar-header{justify-content:center}.sidebar-wrapper{background-color:var(--sgds-bg-default);border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);height:100%;overflow-x:hidden;overflow-y:auto;position:relative;z-index:2}.sidebar-content{flex:1;overflow-y:auto;padding:0 var(--sgds-padding-xs)}.sidebar-nested-overlay{background-color:var(--sgds-bg-default);bottom:0;left:0;opacity:0;overflow-y:scroll;padding:var(--sgds-padding-md) var(--sgds-padding-xs);pointer-events:none;position:absolute;top:0;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);transition-property:opacity left;width:var(--sgds-dimension-288);z-index:0}.sidebar-nested-overlay.show{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:var(--sgds-dimension-288);opacity:1;pointer-events:auto}.sidebar--collapsed .sidebar-nested-overlay.show{left:var(--sgds-dimension-72)}.sidebar::-webkit-scrollbar{width:var(--sgds-dimension-2)}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-xs)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgds-color-subtle)}`;
+var css_248z = lit.css`.sidebar{display:flex;flex-direction:column;height:100%;position:relative;transition:width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);z-index:1100}.sidebar--expanded{width:var(--sgds-dimension-288)}.sidebar--collapsed{width:var(--sgds-dimension-72)}.sidebar-top{align-items:center;display:flex;gap:var(--sgds-gap-md);justify-content:space-between;padding:0 var(--sgds-padding-xs)}.sidebar--collapsed .sidebar-brand-name{display:none}.sidebar--collapsed .sidebar-top{justify-content:center}.sidebar-main{background-color:var(--sgds-bg-default);border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);height:100%;overflow-x:hidden;overflow-y:auto;padding:var(--sgds-padding-lg) 0;position:relative;z-index:1}.sidebar-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.sidebar-content{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-md);overflow-y:auto}.sidebar-nested-overlay{background-color:var(--sgds-surface-raised);bottom:0;left:0;opacity:0;overflow-y:scroll;padding:var(--sgds-padding-md) var(--sgds-padding-xs);pointer-events:none;position:absolute;top:0;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);transition-property:opacity left;width:var(--sgds-dimension-288);z-index:0}.sidebar-nested-overlay.show{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:var(--sgds-dimension-288);opacity:1;pointer-events:auto}.sidebar--collapsed .sidebar-nested-overlay.show{left:var(--sgds-dimension-72)}.sidebar::-webkit-scrollbar{width:var(--sgds-dimension-2)}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-xs)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgds-color-subtle)}@media only screen and (max-width:511px){.sidebar--expanded{position:absolute;width:100dvw}.sidebar-nested-overlay{left:-100dvw;width:100dvw;z-index:2}.sidebar--collapsed .sidebar-nested-overlay.show,.sidebar-nested-overlay.show{left:0}}@media only screen and (max-width:767px){.sidebar--expanded,.sidebar-nested-overlay{width:var(--sgds-dimension-256)}.sidebar-nested-overlay,.sidebar-nested-overlay.show{left:var(--sgds-dimension-256)}}`;
 
 exports["default"] = css_248z;
 //# sourceMappingURL=sidebar.cjs.js.map

package/react/components/Sidebar/sidebar.js

@@ -1,7 +1,7 @@
 'use client';
 import { css } from 'lit';
 
-var css_248z = css`.sidebar{display:flex;flex-direction:column;height:100%;position:relative;transition:width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);z-index:1100}.sidebar--expanded{width:var(--sgds-dimension-288)}.sidebar--collapsed{width:var(--sgds-dimension-72)}.sidebar-header{align-items:center;display:flex;justify-content:space-between;padding:var(--sgds-padding-xs)}.sidebar .sidebar-brand-name{padding-left:var(--sgds-padding-xs)}.sidebar--collapsed .sidebar-brand-name{display:none}.sidebar--collapsed .sidebar-header{justify-content:center}.sidebar-wrapper{background-color:var(--sgds-bg-default);border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);height:100%;overflow-x:hidden;overflow-y:auto;position:relative;z-index:2}.sidebar-content{flex:1;overflow-y:auto;padding:0 var(--sgds-padding-xs)}.sidebar-nested-overlay{background-color:var(--sgds-bg-default);bottom:0;left:0;opacity:0;overflow-y:scroll;padding:var(--sgds-padding-md) var(--sgds-padding-xs);pointer-events:none;position:absolute;top:0;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);transition-property:opacity left;width:var(--sgds-dimension-288);z-index:0}.sidebar-nested-overlay.show{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:var(--sgds-dimension-288);opacity:1;pointer-events:auto}.sidebar--collapsed .sidebar-nested-overlay.show{left:var(--sgds-dimension-72)}.sidebar::-webkit-scrollbar{width:var(--sgds-dimension-2)}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-xs)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgds-color-subtle)}`;
+var css_248z = css`.sidebar{display:flex;flex-direction:column;height:100%;position:relative;transition:width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);z-index:1100}.sidebar--expanded{width:var(--sgds-dimension-288)}.sidebar--collapsed{width:var(--sgds-dimension-72)}.sidebar-top{align-items:center;display:flex;gap:var(--sgds-gap-md);justify-content:space-between;padding:0 var(--sgds-padding-xs)}.sidebar--collapsed .sidebar-brand-name{display:none}.sidebar--collapsed .sidebar-top{justify-content:center}.sidebar-main{background-color:var(--sgds-bg-default);border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);height:100%;overflow-x:hidden;overflow-y:auto;padding:var(--sgds-padding-lg) 0;position:relative;z-index:1}.sidebar-wrapper{display:flex;flex-direction:column;height:100%;justify-content:space-between}.sidebar-content{display:flex;flex:1;flex-direction:column;gap:var(--sgds-gap-md);overflow-y:auto}.sidebar-nested-overlay{background-color:var(--sgds-surface-raised);bottom:0;left:0;opacity:0;overflow-y:scroll;padding:var(--sgds-padding-md) var(--sgds-padding-xs);pointer-events:none;position:absolute;top:0;transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);transition-property:opacity left;width:var(--sgds-dimension-288);z-index:0}.sidebar-nested-overlay.show{border-right:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:var(--sgds-dimension-288);opacity:1;pointer-events:auto}.sidebar--collapsed .sidebar-nested-overlay.show{left:var(--sgds-dimension-72)}.sidebar::-webkit-scrollbar{width:var(--sgds-dimension-2)}.sidebar::-webkit-scrollbar-track{background:transparent}.sidebar::-webkit-scrollbar-thumb{background:var(--sgds-border-color-muted);border-radius:var(--sgds-border-radius-xs)}.sidebar::-webkit-scrollbar-thumb:hover{background:var(--sgds-color-subtle)}@media only screen and (max-width:511px){.sidebar--expanded{position:absolute;width:100dvw}.sidebar-nested-overlay{left:-100dvw;width:100dvw;z-index:2}.sidebar--collapsed .sidebar-nested-overlay.show,.sidebar-nested-overlay.show{left:0}}@media only screen and (max-width:767px){.sidebar--expanded,.sidebar-nested-overlay{width:var(--sgds-dimension-256)}.sidebar-nested-overlay,.sidebar-nested-overlay.show{left:var(--sgds-dimension-256)}}`;
 
 export { css_248z as default };
 //# sourceMappingURL=sidebar.js.map

package/react/index.cjs.js

@@ -10,10 +10,10 @@ var index$3 = require('./alert/index.cjs.js');
 var index$4 = require('./badge/index.cjs.js');
 var index$5 = require('./breadcrumb-item/index.cjs.js');
 var index$6 = require('./breadcrumb/index.cjs.js');
-var index$7 = require('./card/index.cjs.js');
-var index$8 = require('./checkbox-group/index.cjs.js');
-var index$9 = require('./checkbox/index.cjs.js');
-var index$a = require('./button/index.cjs.js');
+var index$7 = require('./button/index.cjs.js');
+var index$8 = require('./card/index.cjs.js');
+var index$9 = require('./checkbox-group/index.cjs.js');
+var index$a = require('./checkbox/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
 var index$c = require('./combo-box-option/index.cjs.js');
 var index$d = require('./combo-box/index.cjs.js');
@@ -85,10 +85,10 @@ exports.SgdsAlert = index$3["default"];
 exports.SgdsBadge = index$4["default"];
 exports.SgdsBreadcrumbItem = index$5["default"];
 exports.SgdsBreadcrumb = index$6["default"];
-exports.SgdsCard = index$7["default"];
-exports.SgdsCheckboxGroup = index$8["default"];
-exports.SgdsCheckbox = index$9["default"];
-exports.SgdsButton = index$a["default"];
+exports.SgdsButton = index$7["default"];
+exports.SgdsCard = index$8["default"];
+exports.SgdsCheckboxGroup = index$9["default"];
+exports.SgdsCheckbox = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];
 exports.SgdsComboBoxOption = index$c["default"];
 exports.SgdsComboBox = index$d["default"];

package/react/index.d.ts

@@ -5,10 +5,10 @@ export { default as SgdsAlert } from './alert';
 export { default as SgdsBadge } from './badge';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
+export { default as SgdsButton } from './button';
 export { default as SgdsCard } from './card';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
-export { default as SgdsButton } from './button';
 export { default as SgdsCloseButton } from './close-button';
 export { default as SgdsComboBoxOption } from './combo-box-option';
 export { default as SgdsComboBox } from './combo-box';

package/react/index.js

@@ -6,10 +6,10 @@ export { default as SgdsAlert } from './alert/index.js';
 export { default as SgdsBadge } from './badge/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
+export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
-export { default as SgdsButton } from './button/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';
 export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
 export { default as SgdsComboBox } from './combo-box/index.js';

package/react/sidebar/index.cjs.js

@@ -33,7 +33,9 @@ var index = react.createComponent({
     react: React__namespace,
     tagName: "sgds-sidebar",
     elementClass: sgdsSidebar.SgdsSidebar,
-    events: {}
+    events: {
+        onSgdsSelect: "sgds-select"
+    }
 });
 
 exports["default"] = index;

package/react/sidebar/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/react/sidebar/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,cAAc,EAAEC,uBAAS,CAAC,CAAC;AAEpC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAEF,uBAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/react/sidebar/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\"\n  }\n});\n"],"names":["register","Component","createComponent","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKAA,mBAAQ,CAAC,cAAc,EAAEC,uBAAS,CAAC,CAAC;AAEpC,YAAeC,qBAAe,CAAC;AAC7B,IAAA,KAAK,EAAEC,gBAAK;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAEF,uBAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}

package/react/sidebar/index.js

@@ -9,7 +9,9 @@ var index = createComponent({
     react: React,
     tagName: "sgds-sidebar",
     elementClass: SgdsSidebar,
-    events: {}
+    events: {
+        onSgdsSelect: "sgds-select"
+    }
 });
 
 export { index as default };

package/react/sidebar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/react/sidebar/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar\",\n  elementClass: Component,\n  events: {}\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,cAAc,EAAEA,WAAS,CAAC,CAAC;AAEpC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAEA,WAAS;AACvB,IAAA,MAAM,EAAE,EAAE;AACX,CAAA,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/react/sidebar/index.ts"],"sourcesContent":["import * as React from \"react\";\nimport { createComponent } from \"@lit/react\";\nimport Component from \"../../components/Sidebar/sgds-sidebar\";\nimport { register } from \"../../utils/ce-registry\";\n\nregister(\"sgds-sidebar\", Component);\n\nexport default createComponent({\n  react: React,\n  tagName: \"sgds-sidebar\",\n  elementClass: Component,\n  events: {\n    onSgdsSelect: \"sgds-select\"\n  }\n});\n"],"names":["Component"],"mappings":";;;;;;AAKA,QAAQ,CAAC,cAAc,EAAEA,WAAS,CAAC,CAAC;AAEpC,YAAe,eAAe,CAAC;AAC7B,IAAA,KAAK,EAAE,KAAK;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,YAAY,EAAEA,WAAS;AACvB,IAAA,MAAM,EAAE;AACN,QAAA,YAAY,EAAE,aAAa;AAC5B,KAAA;AACF,CAAA,CAAC;;;;"}