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

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

@@ -0,0 +1,339 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html } from 'lit';
+import { property, state, queryAssignedElements } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+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';
+
+/**
+ * @summary Sidebar is a collapsible navigation component that displays menu items and groups.
+ * Users can expand and collapse the sidebar to save screen space while navigating through organized menu items.
+ * The sidebar coordinates selection and navigation across nested items using context providers and custom events.
+ *
+ * Features:
+ * - Collapsible state for space-saving layouts with icon-only mode
+ * - Multi-level nesting (up to 3 levels) with drawer overlay for root-level groups
+ * - Keyboard navigation with full ARIA support for accessibility
+ * - Programmatic link navigation support with anchor elements
+ * - Active item tracking and synchronized state management
+ *
+ * Keyboard Navigation:
+ * - Arrow Up/Down: Navigate between sidebar items and groups
+ * - Arrow Left/Right: Collapse/expand groups or navigate drawer overlays
+ * - Enter/Space: Activate focused item or toggle group
+ * - Tab: Standard focus management to interactive elements
+ *
+ * @slot - Insert sgds-sidebar-item, sgds-sidebar-group, and sgds-sidebar-section elements
+ * @slot brandName - Insert brand/logo content in sidebar header
+ *
+ * @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);
+        /**
+         * Controls whether the sidebar is collapsed or expanded.
+         * When true, the sidebar is in collapsed state showing only icons.
+         * When false, the sidebar is expanded displaying full labels and content.
+         * Affects all child items by toggling visibility of labels and adjusting spacing.
+         * @attribute collapsed
+         * @type {boolean}
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * The name of the currently active sidebar item or group.
+         * Reflects the selected item and allows external control of sidebar selection.
+         * Used to synchronize sidebar state with external navigation state or programmatic selection.
+         * When set, the corresponding item with matching `name` attribute will be highlighted as active.
+         * @attribute active
+         * @type {string}
+         * @default ""
+         */
+        this.active = "";
+        /** @internal Tracks the currently active group and provides it via context to all child elements */
+        this._sidebarActiveGroup = null;
+        /** @internal Tracks the currently active item and provides it via context to all child elements */
+        this._sidebarActiveItem = null;
+        /** @internal Provides the list of items shown in the drawer overlay */
+        this._drawerItems = [];
+        /** @internal Indicates whether a drawer overlay is currently open */
+        this._showDrawer = false;
+        this._handleClickOutOfElement = (e) => {
+            if (!this._sidebarActiveGroup)
+                return;
+            if (!e.composedPath().includes(this)) {
+                this._showDrawer = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute("role", "navigation");
+        this.setAttribute("aria-label", "Main navigation");
+        this.updateComplete.then(() => {
+            this.addItemListeners();
+            this._handleActive();
+            document.addEventListener("click", this._handleClickOutOfElement);
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("click", this._handleClickOutOfElement);
+    }
+    _handleCollapsed() {
+        this._sidebarCollapsed = this.collapsed;
+    }
+    /**
+     * Handles changes to the active item selection.
+     * Updates selection state and manages drawer overlay visibility based on the active item's nesting level.
+     * For root-level items with children, opens the drawer overlay.
+     * For nested items, expands parent groups and opens the appropriate drawer if needed.
+     * @private
+     * @returns {void}
+     */
+    _handleActiveItem() {
+        if (!this._sidebarActiveItem)
+            return;
+        const childLevel = this._sidebarActiveItem._childLevel;
+        this._sidebarActiveItem._selected = true;
+        if (childLevel === 0) {
+            // First level of navigation, check if need to open drawer or not.
+            if (this._sidebarActiveItem._childElements.length > 0) {
+                this._setNodesToDrawer(this._sidebarActiveItem);
+            }
+            else {
+                this._revertNodesToParent();
+            }
+        }
+        else {
+            // when nested, we will find the top level of parent
+            let parentEle = this._sidebarActiveItem.parentElement;
+            while (parentEle._childLevel >= 0 && parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {
+                if (parentEle.tagName.toLowerCase() === SGDS_SIDEBAR_GROUP) {
+                    if (parentEle._childLevel === 0) {
+                        // when active item not in drawer, set nodes into drawer.
+                        if (!parentEle.classList.contains("sidebar-nested-overlay")) {
+                            this._setNodesToDrawer(parentEle);
+                        }
+                    }
+                    parentEle._selected = true;
+                    parentEle._showMenu = parentEle._childLevel > 0; //setting this to true as the child is active
+                    parentEle = parentEle.parentElement;
+                }
+            }
+            if (this._sidebarActiveGroup) {
+                this._sidebarActiveGroup._selected = true;
+            }
+        }
+    }
+    _handleActive() {
+        // Return early if active is empty
+        if (!this.active) {
+            this._sidebarActiveItem = null;
+            return;
+        }
+        this._sidebarActiveItem = this._getActiveChild();
+    }
+    _getActiveChild() {
+        const findByName = (elements) => {
+            var _a;
+            for (const element of elements) {
+                if (element.name === this.active) {
+                    return element;
+                }
+                if ((_a = element._childElements) === null || _a === void 0 ? void 0 : _a.length) {
+                    const found = findByName(element._childElements);
+                    if (found)
+                        return found;
+                }
+            }
+            return null;
+        };
+        return findByName(this._defaultNodes);
+    }
+    /**
+     * Manages the drawer overlay content based on the selected parent item.
+     * If element is provided: Opens drawer for that element's children.
+     * If element is undefined: Closes drawer and reverts items to their parent.
+     * @private
+     * @param {SgdsSidebarGroup} [element] - The parent item to display in drawer. Undefined closes drawer.
+     * @returns {void}
+     */
+    _setNodesToDrawer(element) {
+        if (!element)
+            return;
+        // when there is element, we will revert the nodes of the previous active group before setting new value into the active group
+        if (this._sidebarActiveGroup && element !== this._sidebarActiveGroup) {
+            this._revertNodesToParent();
+        }
+        this._sidebarActiveGroup = element;
+        // when there is an active group set, always set new menu items
+        this._drawerItems = []; // always set to empty to prevent duplicate
+        const menuItems = this._sidebarActiveGroup.querySelectorAll(":scope > sgds-sidebar-group, :scope > sgds-sidebar-item");
+        menuItems.forEach(e => {
+            this._drawerItems.push(e);
+        });
+    }
+    /**
+     * Reverts nested items back to their original parent element.
+     * Clears the drawer overlay content and updates selected attributes.
+     * Called when closing the drawer or switching to a different parent item.
+     * @private
+     * @param {SgdsSidebarItem} element - The parent item to return nodes to
+     * @returns {void}
+     */
+    _revertNodesToParent() {
+        if (this._sidebarActiveGroup) {
+            this._drawerItems.forEach(e => {
+                this._sidebarActiveGroup.append(e);
+            });
+            this._drawerItems = [];
+        }
+        this._sidebarActiveGroup = null;
+    }
+    /**
+     * Attaches event listeners to all direct child sidebar items.
+     * Handles item selection events and drawer overlay state management.
+     * Manages emitting sgds-select custom events for external components.
+     * @private
+     * @returns {void}
+     */
+    addItemListeners() {
+        const items = this.querySelectorAll("sgds-sidebar-item");
+        const groups = this.querySelectorAll(SGDS_SIDEBAR_GROUP);
+        const allItems = [...items, ...groups];
+        allItems.forEach(item => {
+            item.addEventListener("i-sgds-click", (e) => {
+                const element = e.detail.element;
+                if (element === this._sidebarActiveGroup) {
+                    // just toggle drawer
+                    this._showDrawer = !this._showDrawer;
+                }
+                else {
+                    if (this.active !== element.name) {
+                        this.active = element.name;
+                        allItems.forEach(item => (item._selected = false));
+                    }
+                    if (element._childElements.length > 0) {
+                        this._showDrawer = true;
+                    }
+                    else {
+                        this._showDrawer = false;
+                        // when there is anchorLink we will trigger click to redirect and allow user to handle the navigation themselves
+                        const anchorLink = item.querySelector(":scope > a");
+                        if (anchorLink)
+                            anchorLink.click();
+                    }
+                    // Emit sgds-select event when an item is selected
+                    this.emit("sgds-select", { detail: { activeItem: element.name } });
+                }
+            });
+        });
+    }
+    /**
+     * Toggles the sidebar between collapsed and expanded states.
+     * Updates the collapsed property and emits sgds-sidebar-toggle event.
+     *
+     * @emits sgds-sidebar-toggle Emitted with detail.collapsed indicating new state
+     * @returns {void}
+     */
+    toggleCollapsed() {
+        this.collapsed = !this.collapsed;
+    }
+    render() {
+        var _a, _b;
+        return html `
+      <div
+        class=${classMap({
+            sidebar: true,
+            "sidebar--expanded": !this._sidebarCollapsed,
+            "sidebar--collapsed": this._sidebarCollapsed
+        })}
+      >
+        <div class="sidebar-wrapper">
+          <div class="sidebar-header">
+            <div class="sidebar-brand-name">
+              <slot name="brandName"></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>
+
+          <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>
+        </div>
+
+          <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>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSidebar.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSidebar.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsSidebar.prototype, "active", void 0);
+__decorate([
+    provide({ context: SidebarActiveGroup }),
+    state()
+], SgdsSidebar.prototype, "_sidebarActiveGroup", void 0);
+__decorate([
+    provide({ context: SidebarCollapsed }),
+    state()
+], SgdsSidebar.prototype, "_sidebarCollapsed", void 0);
+__decorate([
+    provide({ context: SidebarActiveItem }),
+    state()
+], SgdsSidebar.prototype, "_sidebarActiveItem", void 0);
+__decorate([
+    provide({ context: SidebarDrawerItems }),
+    state()
+], SgdsSidebar.prototype, "_drawerItems", void 0);
+__decorate([
+    provide({ context: SidebarDrawerOpen }),
+    state()
+], SgdsSidebar.prototype, "_showDrawer", void 0);
+__decorate([
+    queryAssignedElements()
+], SgdsSidebar.prototype, "_defaultNodes", void 0);
+__decorate([
+    watch("collapsed")
+], SgdsSidebar.prototype, "_handleCollapsed", null);
+__decorate([
+    watch("_sidebarActiveItem")
+], SgdsSidebar.prototype, "_handleActiveItem", null);
+__decorate([
+    watch("active")
+], SgdsSidebar.prototype, "_handleActive", null);
+
+export { SgdsSidebar, SgdsSidebar as default };
+//# sourceMappingURL=sgds-sidebar.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,54 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var context = require('@lit/context');
+
+/**
+ * Context providing the currently active sidebar group (parent with nested children).
+ * Stores the SidebarElement instance of the group whose drawer overlay is currently open.
+ * Used to manage drawer visibility and determine which nested items to display.
+ * Value is null when no group drawer is open.
+ * @type {SidebarElement | null}
+ */
+const SidebarActiveGroup = context.createContext("sidebar-active-group");
+/**
+ * Context providing the currently selected/active sidebar item element.
+ * Stores the SidebarElement instance that is currently marked as active/selected.
+ * Used to highlight and visually emphasize the selected navigation item.
+ * Value is null when no item is selected.
+ * @type {SidebarElement | null}
+ */
+const SidebarActiveItem = context.createContext("sidebar-active");
+/**
+ * Context indicating whether the sidebar is in collapsed (icon-only) state.
+ * When true, sidebar displays only icons and uses tooltips for labels.
+ * When false, sidebar displays full labels alongside icons.
+ * Consumed by all sidebar child elements to adjust their layout and styling accordingly.
+ * @type {boolean}
+ */
+const SidebarCollapsed = context.createContext("sidebar-collapsed");
+/**
+ * Context providing the array of drawer items currently displayed in the sidebar overlay.
+ * Contains the child elements of the active group that are rendered in the drawer.
+ * Updated when group drawers open/close to show/hide nested children.
+ * Empty array when no drawer is open.
+ * @type {SidebarElement[]}
+ */
+const SidebarDrawerItems = context.createContext("sidebar-drawer-items");
+/**
+ * Context indicating whether a drawer overlay is currently open for displaying nested items.
+ * When true, a group drawer is open showing child elements.
+ * When false, no drawer is currently displayed.
+ * Used to manage the visibility state of the overlay across the component hierarchy.
+ * @type {boolean}
+ */
+const SidebarDrawerOpen = context.createContext("sidebar-drawer-open");
+
+exports.SidebarActiveGroup = SidebarActiveGroup;
+exports.SidebarActiveItem = SidebarActiveItem;
+exports.SidebarCollapsed = SidebarCollapsed;
+exports.SidebarDrawerItems = SidebarDrawerItems;
+exports.SidebarDrawerOpen = SidebarDrawerOpen;
+//# sourceMappingURL=sidebar-context.cjs.js.map

package/react/components/Sidebar/sidebar-context.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-context.cjs.js","sources":["../../../../src/components/Sidebar/sidebar-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * Context providing the currently active sidebar group (parent with nested children).\n * Stores the SidebarElement instance of the group whose drawer overlay is currently open.\n * Used to manage drawer visibility and determine which nested items to display.\n * Value is null when no group drawer is open.\n * @type {SidebarElement | null}\n */\nexport const SidebarActiveGroup = createContext<SidebarElement | null>(\"sidebar-active-group\");\n\n/**\n * Context providing the currently selected/active sidebar item element.\n * Stores the SidebarElement instance that is currently marked as active/selected.\n * Used to highlight and visually emphasize the selected navigation item.\n * Value is null when no item is selected.\n * @type {SidebarElement | null}\n */\nexport const SidebarActiveItem = createContext<SidebarElement | null>(\"sidebar-active\");\n\n/**\n * Context indicating whether the sidebar is in collapsed (icon-only) state.\n * When true, sidebar displays only icons and uses tooltips for labels.\n * When false, sidebar displays full labels alongside icons.\n * Consumed by all sidebar child elements to adjust their layout and styling accordingly.\n * @type {boolean}\n */\nexport const SidebarCollapsed = createContext<boolean>(\"sidebar-collapsed\");\n\n/**\n * Context providing the array of drawer items currently displayed in the sidebar overlay.\n * Contains the child elements of the active group that are rendered in the drawer.\n * Updated when group drawers open/close to show/hide nested children.\n * Empty array when no drawer is open.\n * @type {SidebarElement[]}\n */\nexport const SidebarDrawerItems = createContext<SidebarElement[]>(\"sidebar-drawer-items\");\n\n/**\n * Context indicating whether a drawer overlay is currently open for displaying nested items.\n * When true, a group drawer is open showing child elements.\n * When false, no drawer is currently displayed.\n * Used to manage the visibility state of the overlay across the component hierarchy.\n * @type {boolean}\n */\nexport const SidebarDrawerOpen = createContext<boolean>(\"sidebar-drawer-open\");\n"],"names":["createContext"],"mappings":";;;;;;;AAGA;;;;;;AAMG;MACU,kBAAkB,GAAGA,qBAAa,CAAwB,sBAAsB,EAAE;AAE/F;;;;;;AAMG;MACU,iBAAiB,GAAGA,qBAAa,CAAwB,gBAAgB,EAAE;AAExF;;;;;;AAMG;MACU,gBAAgB,GAAGA,qBAAa,CAAU,mBAAmB,EAAE;AAE5E;;;;;;AAMG;MACU,kBAAkB,GAAGA,qBAAa,CAAmB,sBAAsB,EAAE;AAE1F;;;;;;AAMG;MACU,iBAAiB,GAAGA,qBAAa,CAAU,qBAAqB;;;;;;;;"}

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

@@ -0,0 +1,46 @@
+'use client';
+import { createContext } from '@lit/context';
+
+/**
+ * Context providing the currently active sidebar group (parent with nested children).
+ * Stores the SidebarElement instance of the group whose drawer overlay is currently open.
+ * Used to manage drawer visibility and determine which nested items to display.
+ * Value is null when no group drawer is open.
+ * @type {SidebarElement | null}
+ */
+const SidebarActiveGroup = createContext("sidebar-active-group");
+/**
+ * Context providing the currently selected/active sidebar item element.
+ * Stores the SidebarElement instance that is currently marked as active/selected.
+ * Used to highlight and visually emphasize the selected navigation item.
+ * Value is null when no item is selected.
+ * @type {SidebarElement | null}
+ */
+const SidebarActiveItem = createContext("sidebar-active");
+/**
+ * Context indicating whether the sidebar is in collapsed (icon-only) state.
+ * When true, sidebar displays only icons and uses tooltips for labels.
+ * When false, sidebar displays full labels alongside icons.
+ * Consumed by all sidebar child elements to adjust their layout and styling accordingly.
+ * @type {boolean}
+ */
+const SidebarCollapsed = createContext("sidebar-collapsed");
+/**
+ * Context providing the array of drawer items currently displayed in the sidebar overlay.
+ * Contains the child elements of the active group that are rendered in the drawer.
+ * Updated when group drawers open/close to show/hide nested children.
+ * Empty array when no drawer is open.
+ * @type {SidebarElement[]}
+ */
+const SidebarDrawerItems = createContext("sidebar-drawer-items");
+/**
+ * Context indicating whether a drawer overlay is currently open for displaying nested items.
+ * When true, a group drawer is open showing child elements.
+ * When false, no drawer is currently displayed.
+ * Used to manage the visibility state of the overlay across the component hierarchy.
+ * @type {boolean}
+ */
+const SidebarDrawerOpen = createContext("sidebar-drawer-open");
+
+export { SidebarActiveGroup, SidebarActiveItem, SidebarCollapsed, SidebarDrawerItems, SidebarDrawerOpen };
+//# sourceMappingURL=sidebar-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-context.js","sources":["../../../../src/components/Sidebar/sidebar-context.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * Context providing the currently active sidebar group (parent with nested children).\n * Stores the SidebarElement instance of the group whose drawer overlay is currently open.\n * Used to manage drawer visibility and determine which nested items to display.\n * Value is null when no group drawer is open.\n * @type {SidebarElement | null}\n */\nexport const SidebarActiveGroup = createContext<SidebarElement | null>(\"sidebar-active-group\");\n\n/**\n * Context providing the currently selected/active sidebar item element.\n * Stores the SidebarElement instance that is currently marked as active/selected.\n * Used to highlight and visually emphasize the selected navigation item.\n * Value is null when no item is selected.\n * @type {SidebarElement | null}\n */\nexport const SidebarActiveItem = createContext<SidebarElement | null>(\"sidebar-active\");\n\n/**\n * Context indicating whether the sidebar is in collapsed (icon-only) state.\n * When true, sidebar displays only icons and uses tooltips for labels.\n * When false, sidebar displays full labels alongside icons.\n * Consumed by all sidebar child elements to adjust their layout and styling accordingly.\n * @type {boolean}\n */\nexport const SidebarCollapsed = createContext<boolean>(\"sidebar-collapsed\");\n\n/**\n * Context providing the array of drawer items currently displayed in the sidebar overlay.\n * Contains the child elements of the active group that are rendered in the drawer.\n * Updated when group drawers open/close to show/hide nested children.\n * Empty array when no drawer is open.\n * @type {SidebarElement[]}\n */\nexport const SidebarDrawerItems = createContext<SidebarElement[]>(\"sidebar-drawer-items\");\n\n/**\n * Context indicating whether a drawer overlay is currently open for displaying nested items.\n * When true, a group drawer is open showing child elements.\n * When false, no drawer is currently displayed.\n * Used to manage the visibility state of the overlay across the component hierarchy.\n * @type {boolean}\n */\nexport const SidebarDrawerOpen = createContext<boolean>(\"sidebar-drawer-open\");\n"],"names":[],"mappings":";;;AAGA;;;;;;AAMG;MACU,kBAAkB,GAAG,aAAa,CAAwB,sBAAsB,EAAE;AAE/F;;;;;;AAMG;MACU,iBAAiB,GAAG,aAAa,CAAwB,gBAAgB,EAAE;AAExF;;;;;;AAMG;MACU,gBAAgB,GAAG,aAAa,CAAU,mBAAmB,EAAE;AAE5E;;;;;;AAMG;MACU,kBAAkB,GAAG,aAAa,CAAmB,sBAAsB,EAAE;AAE1F;;;;;;AAMG;MACU,iBAAiB,GAAG,aAAa,CAAU,qBAAqB;;;;"}

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

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+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}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=sidebar-item.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

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

@@ -0,0 +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}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sidebar-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-item.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+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}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=sidebar-section.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

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

@@ -0,0 +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}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sidebar-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar-section.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

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

@@ -0,0 +1,11 @@
+'use client';
+'use strict';
+
+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)}`;
+
+exports["default"] = css_248z;
+//# sourceMappingURL=sidebar.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/react/components/Sidebar/sidebar.js

@@ -0,0 +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)}`;
+
+export { css_248z as default };
+//# sourceMappingURL=sidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}