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

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

@@ -0,0 +1,79 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var sidebarItem = require('./sidebar-item.cjs.js');
+var sidebarElement = require('../../base/sidebar-element.cjs.js');
+
+/**
+ * @summary Sidebar item is a selectable navigation item within the sidebar component.
+ * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).
+ * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.
+ *
+ * @slot default - Text content for the item label
+ * @slot trailingIcon - Icon to display after the label text
+ *
+ * See SgdsSidebar for parent component usage and selection events.
+ */
+class SgdsSidebarItem extends sidebarElement.SidebarElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The name of the icon to display before the item label.
+         * Icon name corresponds to sgds-icon component icons.
+         * When empty, no icon is displayed and spacing is adjusted.
+         * @attribute icon
+         * @type {string}
+         * @default ""
+         */
+        this.icon = "";
+    }
+    render() {
+        return lit.html `
+      <div
+        class=${classMap_js.classMap({
+            "sidebar-item": true,
+            "sidebar-item--collapsed": this._sidebarCollapsed && this._childLevel === 0,
+            active: this._selected
+        })}
+        @click=${() => this._handleClick()}
+        aria-level=${this._childLevel}
+        aria-label=${this.title || this.name}
+        name=${this.name}
+        tabindex=${this._hidden ? -1 : 0}
+        role="button"
+      >
+        <div class="sidebar-item-label-wrapper">
+          <div>
+            ${this._childLevel <= 1 ? lit.html `<slot name="leadingIcon"></slot>` : lit.nothing}
+            <span
+              class=${classMap_js.classMap({
+            "sidebar-item-label": true,
+            offset: this._childLevel > 1
+        })}
+              >${this.title}</span
+            >
+          </div>
+
+          <span class="sidebar-item-trailingIcon">
+            <slot name="trailingIcon"></slot>
+          </span>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSidebarItem.styles = [...sgdsElement["default"].styles, sidebarItem["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsSidebarItem.prototype, "icon", void 0);
+
+exports.SgdsSidebarItem = SgdsSidebarItem;
+exports["default"] = SgdsSidebarItem;
+//# sourceMappingURL=sgds-sidebar-item.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidebar-item.cjs.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\n\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar item is a selectable navigation item within the sidebar component.\n * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).\n * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.\n *\n * @slot default - Text content for the item label\n * @slot trailingIcon - Icon to display after the label text\n *\n * See SgdsSidebar for parent component usage and selection events.\n */\nexport class SgdsSidebarItem extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  /**\n   * The name of the icon to display before the item label.\n   * Icon name corresponds to sgds-icon component icons.\n   * When empty, no icon is displayed and spacing is adjusted.\n   * @attribute icon\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) icon = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": this._sidebarCollapsed && this._childLevel === 0,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-level=${this._childLevel}\n        aria-label=${this.title || this.name}\n        name=${this.name}\n        tabindex=${this._hidden ? -1 : 0}\n        role=\"button\"\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            ${this._childLevel <= 1 ? html`<slot name=\"leadingIcon\"></slot>` : nothing}\n            <span\n              class=${classMap({\n                \"sidebar-item-label\": true,\n                offset: this._childLevel > 1\n              })}\n              >${this.title}</span\n            >\n          </div>\n\n          <span class=\"sidebar-item-trailingIcon\">\n            <slot name=\"trailingIcon\"></slot>\n          </span>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarItem;\n"],"names":["SidebarElement","html","classMap","nothing","SgdsElement","sidebarOptionStyle","__decorate","property"],"mappings":";;;;;;;;;;;;;AAUA;;;;;;;;;AASG;AACG,MAAO,eAAgB,SAAQA,6BAAc,CAAA;AAAnD,IAAA,WAAA,GAAA;;AAGE;;;;;;;AAOG;QACwC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;KAoCtD;IAlCC,MAAM,GAAA;AACJ,QAAA,OAAOC,QAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,oBAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;YACpB,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC;YAC3E,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAA;AACO,eAAA,EAAA,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;AACrB,mBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AAChB,mBAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAA;AAC7B,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;mBACL,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;;;AAK1B,YAAA,EAAA,IAAI,CAAC,WAAW,IAAI,CAAC,GAAGD,QAAI,CAAA,CAAA,gCAAA,CAAkC,GAAGE,WAAO,CAAA;;AAEhE,oBAAA,EAAAD,oBAAQ,CAAC;AACf,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC;SAC7B,CAAC,CAAA;AACC,eAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;;;;;;;;KAStB,CAAC;KACH;;AA7CM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGE,sBAAW,CAAC,MAAM,EAAEC,sBAAkB,CAA7C,CAA+C;AAUjBC,gBAAA,CAAA;IAA1CC,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;;"}

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

@@ -0,0 +1,74 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './sidebar-item.js';
+import { SidebarElement } from '../../base/sidebar-element.js';
+
+/**
+ * @summary Sidebar item is a selectable navigation item within the sidebar component.
+ * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).
+ * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.
+ *
+ * @slot default - Text content for the item label
+ * @slot trailingIcon - Icon to display after the label text
+ *
+ * See SgdsSidebar for parent component usage and selection events.
+ */
+class SgdsSidebarItem extends SidebarElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The name of the icon to display before the item label.
+         * Icon name corresponds to sgds-icon component icons.
+         * When empty, no icon is displayed and spacing is adjusted.
+         * @attribute icon
+         * @type {string}
+         * @default ""
+         */
+        this.icon = "";
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            "sidebar-item": true,
+            "sidebar-item--collapsed": this._sidebarCollapsed && this._childLevel === 0,
+            active: this._selected
+        })}
+        @click=${() => this._handleClick()}
+        aria-level=${this._childLevel}
+        aria-label=${this.title || this.name}
+        name=${this.name}
+        tabindex=${this._hidden ? -1 : 0}
+        role="button"
+      >
+        <div class="sidebar-item-label-wrapper">
+          <div>
+            ${this._childLevel <= 1 ? html `<slot name="leadingIcon"></slot>` : nothing}
+            <span
+              class=${classMap({
+            "sidebar-item-label": true,
+            offset: this._childLevel > 1
+        })}
+              >${this.title}</span
+            >
+          </div>
+
+          <span class="sidebar-item-trailingIcon">
+            <slot name="trailingIcon"></slot>
+          </span>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSidebarItem.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsSidebarItem.prototype, "icon", void 0);
+
+export { SgdsSidebarItem, SgdsSidebarItem as default };
+//# sourceMappingURL=sgds-sidebar-item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidebar-item.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-item.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\n\nimport SgdsIcon from \"../Icon/sgds-icon\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar item is a selectable navigation item within the sidebar component.\n * It can be used as a terminal leaf node in the navigation hierarchy (does not support nested children).\n * Items can optionally wrap anchor links for programmatic navigation to external URLs or routes.\n *\n * @slot default - Text content for the item label\n * @slot trailingIcon - Icon to display after the label text\n *\n * See SgdsSidebar for parent component usage and selection events.\n */\nexport class SgdsSidebarItem extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  /**\n   * The name of the icon to display before the item label.\n   * Icon name corresponds to sgds-icon component icons.\n   * When empty, no icon is displayed and spacing is adjusted.\n   * @attribute icon\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) icon = \"\";\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": this._sidebarCollapsed && this._childLevel === 0,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-level=${this._childLevel}\n        aria-label=${this.title || this.name}\n        name=${this.name}\n        tabindex=${this._hidden ? -1 : 0}\n        role=\"button\"\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            ${this._childLevel <= 1 ? html`<slot name=\"leadingIcon\"></slot>` : nothing}\n            <span\n              class=${classMap({\n                \"sidebar-item-label\": true,\n                offset: this._childLevel > 1\n              })}\n              >${this.title}</span\n            >\n          </div>\n\n          <span class=\"sidebar-item-trailingIcon\">\n            <slot name=\"trailingIcon\"></slot>\n          </span>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarItem;\n"],"names":["sidebarOptionStyle"],"mappings":";;;;;;;;;AAUA;;;;;;;;;AASG;AACG,MAAO,eAAgB,SAAQ,cAAc,CAAA;AAAnD,IAAA,WAAA,GAAA;;AAGE;;;;;;;AAOG;QACwC,IAAI,CAAA,IAAA,GAAG,EAAE,CAAC;KAoCtD;IAlCC,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,cAAc,EAAE,IAAI;YACpB,yBAAyB,EAAE,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,WAAW,KAAK,CAAC;YAC3E,MAAM,EAAE,IAAI,CAAC,SAAS;SACvB,CAAC,CAAA;AACO,eAAA,EAAA,MAAM,IAAI,CAAC,YAAY,EAAE,CAAA;AACrB,mBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AAChB,mBAAA,EAAA,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAA;AAC7B,aAAA,EAAA,IAAI,CAAC,IAAI,CAAA;mBACL,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,GAAG,CAAC,CAAA;;;;;AAK1B,YAAA,EAAA,IAAI,CAAC,WAAW,IAAI,CAAC,GAAG,IAAI,CAAA,CAAA,gCAAA,CAAkC,GAAG,OAAO,CAAA;;AAEhE,oBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,oBAAoB,EAAE,IAAI;AAC1B,YAAA,MAAM,EAAE,IAAI,CAAC,WAAW,GAAG,CAAC;SAC7B,CAAC,CAAA;AACC,eAAA,EAAA,IAAI,CAAC,KAAK,CAAA;;;;;;;;;KAStB,CAAC;KACH;;AA7CM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAkB,CAA7C,CAA+C;AAUjB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAW,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA;;;;"}

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

@@ -0,0 +1,128 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var lit = require('lit');
+var decorators_js = require('lit/decorators.js');
+var classMap_js = require('lit/directives/class-map.js');
+var sgdsElement = require('../../base/sgds-element.cjs.js');
+var sidebarSection = require('./sidebar-section.cjs.js');
+var sidebarElement = require('../../base/sidebar-element.cjs.js');
+
+/**
+ * @summary Sidebar section is a container component that groups related sidebar items into organized sections.
+ * It displays a section header/title and can optionally be collapsible. Sections help organize navigation
+ * items hierarchically within the sidebar, providing visual separation between different areas of functionality.
+ *
+ * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section
+ */
+class SgdsSidebarSection extends sidebarElement.SidebarElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The display title/label for the sidebar section header.
+         * Always visible in the sidebar, used to group related items.
+         * @attribute title
+         * @type {string}
+         * @default ""
+         */
+        this.title = "";
+        /**
+         * Controls whether the section content is expanded or collapsed.
+         * When true, the section content is hidden but the section header remains visible.
+         * Only applicable when the section is collapsible.
+         * @attribute collapsed
+         * @type {boolean}
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * Enables a collapsible section header with expand/collapse toggle functionality.
+         * When true, users can click the header to toggle section visibility.
+         * When false, the section header is display-only and not interactive.
+         * @attribute collapsible
+         * @type {boolean}
+         * @default false
+         */
+        this.collapsible = false;
+        /**
+         * Tracks whether this section is the last child of its parent.
+         * Used to remove bottom border from the last section.
+         * @type {boolean}
+         * @internal
+         */
+        this._isLastChild = false;
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.setAttribute("role", "region");
+        this._isLastChild = ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.lastElementChild) === this;
+        this._childLevel = null;
+    }
+    /**
+     * Handles click events on the section label.
+     * Toggles the collapsed state to show/hide section content.
+     * Only called if the section is collapsible (collapsible prop is true).
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        if (this.collapsible)
+            this.collapsed = !this.collapsed;
+    }
+    render() {
+        return lit.html `
+      <div
+        class=${classMap_js.classMap({
+            "sidebar-section": true,
+            "no-border": this._isLastChild,
+            "sidebar-section--collapsed": this._sidebarCollapsed
+        })}
+      >
+        <div
+          class="sidebar-section-label"
+          @click=${this._handleClick}
+          aria-expanded=${!this.collapsed}
+          aria-disabled=${!this.collapsible}
+          tabindex="0"
+        >
+          <span>${this.title}</span>
+          ${this.collapsible
+            ? lit.html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
+            : lit.nothing}
+        </div>
+
+        <div
+          class=${classMap_js.classMap({
+            "sidebar-section-content": true,
+            "sidebar-section-content--collapsed": this.collapsed && this.collapsible
+        })}
+        >
+          <div>
+            <slot @slotchange=${this._handleSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSidebarSection.styles = [...sgdsElement["default"].styles, sidebarSection["default"]];
+tslib.__decorate([
+    decorators_js.property({ type: String, reflect: true })
+], SgdsSidebarSection.prototype, "title", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsSidebarSection.prototype, "collapsed", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: Boolean, reflect: true })
+], SgdsSidebarSection.prototype, "collapsible", void 0);
+tslib.__decorate([
+    decorators_js.state()
+], SgdsSidebarSection.prototype, "_isLastChild", void 0);
+
+exports.SgdsSidebarSection = SgdsSidebarSection;
+exports["default"] = SgdsSidebarSection;
+//# sourceMappingURL=sgds-sidebar-section.cjs.js.map

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

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

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

@@ -0,0 +1,123 @@
+'use client';
+import { __decorate } from 'tslib';
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import SgdsElement from '../../base/sgds-element.js';
+import css_248z from './sidebar-section.js';
+import { SidebarElement } from '../../base/sidebar-element.js';
+
+/**
+ * @summary Sidebar section is a container component that groups related sidebar items into organized sections.
+ * It displays a section header/title and can optionally be collapsible. Sections help organize navigation
+ * items hierarchically within the sidebar, providing visual separation between different areas of functionality.
+ *
+ * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section
+ */
+class SgdsSidebarSection extends SidebarElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The display title/label for the sidebar section header.
+         * Always visible in the sidebar, used to group related items.
+         * @attribute title
+         * @type {string}
+         * @default ""
+         */
+        this.title = "";
+        /**
+         * Controls whether the section content is expanded or collapsed.
+         * When true, the section content is hidden but the section header remains visible.
+         * Only applicable when the section is collapsible.
+         * @attribute collapsed
+         * @type {boolean}
+         * @default false
+         */
+        this.collapsed = false;
+        /**
+         * Enables a collapsible section header with expand/collapse toggle functionality.
+         * When true, users can click the header to toggle section visibility.
+         * When false, the section header is display-only and not interactive.
+         * @attribute collapsible
+         * @type {boolean}
+         * @default false
+         */
+        this.collapsible = false;
+        /**
+         * Tracks whether this section is the last child of its parent.
+         * Used to remove bottom border from the last section.
+         * @type {boolean}
+         * @internal
+         */
+        this._isLastChild = false;
+    }
+    connectedCallback() {
+        var _a;
+        super.connectedCallback();
+        this.setAttribute("role", "region");
+        this._isLastChild = ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.lastElementChild) === this;
+        this._childLevel = null;
+    }
+    /**
+     * Handles click events on the section label.
+     * Toggles the collapsed state to show/hide section content.
+     * Only called if the section is collapsible (collapsible prop is true).
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        if (this.collapsible)
+            this.collapsed = !this.collapsed;
+    }
+    render() {
+        return html `
+      <div
+        class=${classMap({
+            "sidebar-section": true,
+            "no-border": this._isLastChild,
+            "sidebar-section--collapsed": this._sidebarCollapsed
+        })}
+      >
+        <div
+          class="sidebar-section-label"
+          @click=${this._handleClick}
+          aria-expanded=${!this.collapsed}
+          aria-disabled=${!this.collapsible}
+          tabindex="0"
+        >
+          <span>${this.title}</span>
+          ${this.collapsible
+            ? html `<sgds-icon name=${this.collapsed ? "chevron-down" : "chevron-up"} size="sm"></sgds-icon>`
+            : nothing}
+        </div>
+
+        <div
+          class=${classMap({
+            "sidebar-section-content": true,
+            "sidebar-section-content--collapsed": this.collapsed && this.collapsible
+        })}
+        >
+          <div>
+            <slot @slotchange=${this._handleSlotChange}></slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+}
+SgdsSidebarSection.styles = [...SgdsElement.styles, css_248z];
+__decorate([
+    property({ type: String, reflect: true })
+], SgdsSidebarSection.prototype, "title", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSidebarSection.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SgdsSidebarSection.prototype, "collapsible", void 0);
+__decorate([
+    state()
+], SgdsSidebarSection.prototype, "_isLastChild", void 0);
+
+export { SgdsSidebarSection, SgdsSidebarSection as default };
+//# sourceMappingURL=sgds-sidebar-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sgds-sidebar-section.js","sources":["../../../../src/components/Sidebar/sgds-sidebar-section.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarSectionStyle from \"./sidebar-section.css\";\n\nimport { SidebarElement } from \"../../base/sidebar-element\";\n\n/**\n * @summary Sidebar section is a container component that groups related sidebar items into organized sections.\n * It displays a section header/title and can optionally be collapsible. Sections help organize navigation\n * items hierarchically within the sidebar, providing visual separation between different areas of functionality.\n *\n * @slot - Insert sgds-sidebar-item and sgds-sidebar-group elements to be grouped within this section\n */\nexport class SgdsSidebarSection extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarSectionStyle];\n\n  /**\n   * The display title/label for the sidebar section header.\n   * Always visible in the sidebar, used to group related items.\n   * @attribute title\n   * @type {string}\n   * @default \"\"\n   */\n  @property({ type: String, reflect: true }) title = \"\";\n\n  /**\n   * Controls whether the section content is expanded or collapsed.\n   * When true, the section content is hidden but the section header remains visible.\n   * Only applicable when the section is collapsible.\n   * @attribute collapsed\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  /**\n   * Enables a collapsible section header with expand/collapse toggle functionality.\n   * When true, users can click the header to toggle section visibility.\n   * When false, the section header is display-only and not interactive.\n   * @attribute collapsible\n   * @type {boolean}\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true }) collapsible = false;\n\n  /**\n   * Tracks whether this section is the last child of its parent.\n   * Used to remove bottom border from the last section.\n   * @type {boolean}\n   * @internal\n   */\n  @state() private _isLastChild = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute(\"role\", \"region\");\n    this._isLastChild = this.parentElement?.lastElementChild === this;\n    this._childLevel = null;\n  }\n\n  /**\n   * Handles click events on the section label.\n   * Toggles the collapsed state to show/hide section content.\n   * Only called if the section is collapsible (collapsible prop is true).\n   * @private\n   * @returns {void}\n   */\n  override _handleClick() {\n    if (this.collapsible) this.collapsed = !this.collapsed;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-section\": true,\n          \"no-border\": this._isLastChild,\n          \"sidebar-section--collapsed\": this._sidebarCollapsed\n        })}\n      >\n        <div\n          class=\"sidebar-section-label\"\n          @click=${this._handleClick}\n          aria-expanded=${!this.collapsed}\n          aria-disabled=${!this.collapsible}\n          tabindex=\"0\"\n        >\n          <span>${this.title}</span>\n          ${this.collapsible\n            ? html`<sgds-icon name=${this.collapsed ? \"chevron-down\" : \"chevron-up\"} size=\"sm\"></sgds-icon>`\n            : nothing}\n        </div>\n\n        <div\n          class=${classMap({\n            \"sidebar-section-content\": true,\n            \"sidebar-section-content--collapsed\": this.collapsed && this.collapsible\n          })}\n        >\n          <div>\n            <slot @slotchange=${this._handleSlotChange}></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarSection;\n"],"names":["sidebarSectionStyle"],"mappings":";;;;;;;;;AAQA;;;;;;AAMG;AACG,MAAO,kBAAmB,SAAQ,cAAc,CAAA;AAAtD,IAAA,WAAA,GAAA;;AAGE;;;;;;AAMG;QACwC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AAEtD;;;;;;;AAOG;QACyC,IAAS,CAAA,SAAA,GAAG,KAAK,CAAC;AAE9D;;;;;;;AAOG;QACyC,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;AAEhE;;;;;AAKG;QACc,IAAY,CAAA,YAAA,GAAG,KAAK,CAAC;KAuDvC;IArDC,iBAAiB,GAAA;;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;AAC1B,QAAA,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;AACpC,QAAA,IAAI,CAAC,YAAY,GAAG,CAAA,CAAA,EAAA,GAAA,IAAI,CAAC,aAAa,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAgB,MAAK,IAAI,CAAC;AAClE,QAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;KACzB;AAED;;;;;;AAMG;IACM,YAAY,GAAA;QACnB,IAAI,IAAI,CAAC,WAAW;AAAE,YAAA,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;KACxD;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;AAEC,cAAA,EAAA,QAAQ,CAAC;AACf,YAAA,iBAAiB,EAAE,IAAI;YACvB,WAAW,EAAE,IAAI,CAAC,YAAY;YAC9B,4BAA4B,EAAE,IAAI,CAAC,iBAAiB;SACrD,CAAC,CAAA;;;;AAIS,iBAAA,EAAA,IAAI,CAAC,YAAY,CAAA;0BACV,CAAC,IAAI,CAAC,SAAS,CAAA;0BACf,CAAC,IAAI,CAAC,WAAW,CAAA;;;AAGzB,gBAAA,EAAA,IAAI,CAAC,KAAK,CAAA;AAChB,UAAA,EAAA,IAAI,CAAC,WAAW;AAChB,cAAE,IAAI,CAAA,CAAA,gBAAA,EAAmB,IAAI,CAAC,SAAS,GAAG,cAAc,GAAG,YAAY,CAAyB,uBAAA,CAAA;AAChG,cAAE,OAAO,CAAA;;;;AAIH,gBAAA,EAAA,QAAQ,CAAC;AACf,YAAA,yBAAyB,EAAE,IAAI;AAC/B,YAAA,oCAAoC,EAAE,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,WAAW;SACzE,CAAC,CAAA;;;AAGoB,8BAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;;KAIjD,CAAC;KACH;;AA3FM,kBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,WAAW,CAAC,MAAM,EAAEA,QAAmB,CAA9C,CAAgD;AASlB,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUV,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAmB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAUlB,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAQ/C,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA8B,CAAA,EAAA,kBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA;;;;"}