@govtechsg/sgds-web-component 3.21.2-rc.2 → 3.21.2-rc.3

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

@@ -83,12 +83,14 @@ class SgdsSidebarGroup extends SidebarElement {
     render() {
         return html `
       <div
+        role="button"
         class=${classMap({
             "sidebar-item": true,
             "sidebar-item--collapsed": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,
             active: this._selected
         })}
         @click=${() => this._handleClick()}
+        aria-label=${this.title || this.name}
         aria-expanded=${this._showMenu}
         tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}
       >
@@ -100,7 +102,7 @@ class SgdsSidebarGroup extends SidebarElement {
 
           <span class="sidebar-item-indicator">
             <slot name="indicator"></slot>
-            <sgds-icon aria-label=${this.title || this.name} name=${this._getIcon()} size="sm"></sgds-icon>
+            <sgds-icon name=${this._getIcon()} size="sm"></sgds-icon>
           </span>
         </div>
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { watch } from \"../../utils/watch\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /**\n   * Manages submenu visibility state for nested groups (level 2+).\n   * When true, nested children are displayed. When false, they are hidden.\n   * Root-level groups use drawer overlay instead of submenu.\n   * @internal\n   */\n  @state() private _showMenu = false;\n\n  /**\n   * Reports the visibility state of the submenu for nested groups.\n   * Returns true when the submenu is displayed showing child items, false when hidden.\n   * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.\n   * @readonly\n   * @type {boolean}\n   */\n  get showMenu(): boolean {\n    return this._showMenu;\n  }\n\n  /**\n   * Reacts to the active item context changing. If the newly active item is a descendant\n   * of this group, expand the submenu without external callers touching internal state.\n   * @internal\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItemContext() {\n    if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n      this._showMenu = true;\n    }\n  }\n\n  /** @internal */\n  protected override _handleClick(): void {\n    if (this._childLevel !== 1) {\n      this._showMenu = !this._showMenu;\n      this._childElements.forEach(v => {\n        v._hidden = !this._showMenu;\n      });\n    } else {\n      super._handleClick();\n    }\n  }\n  /**\n   * Determines the appropriate chevron icon based on nesting level and submenu state.\n   * Provides visual feedback for expandable/collapsible state:\n   * - Level 1: chevron-right (drawer controlled by parent)\n   * - Level 2+: chevron-down (open), chevron-up (closed)\n   * @internal\n   * @returns {string} Icon name to display\n   */\n  private _getIcon() {\n    if (this._childLevel === 1) {\n      return \"chevron-right\";\n    } else {\n      return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-expanded=${this._showMenu}\n        tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            <slot name=\"icon\"></slot>\n            <span class=\"sidebar-item-label\">${this.title}</span>\n          </div>\n\n          <span class=\"sidebar-item-indicator\">\n            <slot name=\"indicator\"></slot>\n            <sgds-icon aria-label=${this.title || this.name} name=${this._getIcon()} size=\"sm\"></sgds-icon>\n          </span>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          \"sidebar-submenu\": true,\n          \"sidebar-submenu--collapsed\": this._sidebarCollapsed && this._childLevel == 1,\n          show: this._showMenu\n        })}\n      >\n        <div>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarGroup;\n"],"names":["sidebarOptionStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-sidebar-group.js","sources":["../../../src/components/Sidebar/sgds-sidebar-group.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport sidebarOptionStyle from \"./sidebar-item.css\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport { watch } from \"../../utils/watch\";\n\nimport { SidebarElement } from \"./sidebar-element\";\n\n/**\n * @summary Sidebar group represents a navigable parent item within the sidebar that can have nested children.\n * Groups support multiple levels of nesting and show nested items in a drawer overlay or submenu.\n * Groups can be used to organize related sidebar items into expanding/collapsing sections.\n *\n * Behavior varies by nesting level:\n * - Level 1 (root): Clicking opens drawer overlay showing all nested children. Keyboard: ArrowRight opens drawer.\n * - Level 2+ (nested): Clicking toggles submenu visibility. Keyboard: ArrowRight toggles submenu.\n *\n * @slot default - Insert sgds-sidebar-group or sgds-sidebar-item elements as nested children\n * @slot indicator - Display after the label text. A chevron is auto-appended. Typically used to show badges or other indicators for the group.\n *\n */\nexport class SgdsSidebarGroup extends SidebarElement {\n  static styles = [...SgdsElement.styles, sidebarOptionStyle];\n\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /**\n   * Manages submenu visibility state for nested groups (level 2+).\n   * When true, nested children are displayed. When false, they are hidden.\n   * Root-level groups use drawer overlay instead of submenu.\n   * @internal\n   */\n  @state() private _showMenu = false;\n\n  /**\n   * Reports the visibility state of the submenu for nested groups.\n   * Returns true when the submenu is displayed showing child items, false when hidden.\n   * Only applicable for nested groups (level 2+). Root-level groups use drawer overlay instead.\n   * @readonly\n   * @type {boolean}\n   */\n  get showMenu(): boolean {\n    return this._showMenu;\n  }\n\n  /**\n   * Reacts to the active item context changing. If the newly active item is a descendant\n   * of this group, expand the submenu without external callers touching internal state.\n   * @internal\n   */\n  @watch(\"_sidebarActiveItem\")\n  _handleActiveItemContext() {\n    if (this._childLevel > 1 && this._sidebarActiveItem && this.contains(this._sidebarActiveItem)) {\n      this._showMenu = true;\n    }\n  }\n\n  /** @internal */\n  protected override _handleClick(): void {\n    if (this._childLevel !== 1) {\n      this._showMenu = !this._showMenu;\n      this._childElements.forEach(v => {\n        v._hidden = !this._showMenu;\n      });\n    } else {\n      super._handleClick();\n    }\n  }\n  /**\n   * Determines the appropriate chevron icon based on nesting level and submenu state.\n   * Provides visual feedback for expandable/collapsible state:\n   * - Level 1: chevron-right (drawer controlled by parent)\n   * - Level 2+: chevron-down (open), chevron-up (closed)\n   * @internal\n   * @returns {string} Icon name to display\n   */\n  private _getIcon() {\n    if (this._childLevel === 1) {\n      return \"chevron-right\";\n    } else {\n      return this._showMenu ? \"chevron-down\" : \"chevron-up\";\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        role=\"button\"\n        class=${classMap({\n          \"sidebar-item\": true,\n          \"sidebar-item--collapsed\": !this._isOverlay && this._sidebarCollapsed && this._childLevel === 1,\n          active: this._selected\n        })}\n        @click=${() => this._handleClick()}\n        aria-label=${this.title || this.name}\n        aria-expanded=${this._showMenu}\n        tabindex=${this._childLevel > 2 && !this._showMenu ? -1 : 0}\n      >\n        <div class=\"sidebar-item-label-wrapper\">\n          <div>\n            <slot name=\"icon\"></slot>\n            <span class=\"sidebar-item-label\">${this.title}</span>\n          </div>\n\n          <span class=\"sidebar-item-indicator\">\n            <slot name=\"indicator\"></slot>\n            <sgds-icon name=${this._getIcon()} size=\"sm\"></sgds-icon>\n          </span>\n        </div>\n      </div>\n\n      <div\n        class=${classMap({\n          \"sidebar-submenu\": true,\n          \"sidebar-submenu--collapsed\": this._sidebarCollapsed && this._childLevel == 1,\n          show: this._showMenu\n        })}\n      >\n        <div>\n          <slot @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSidebarGroup;\n"],"names":["sidebarOptionStyle"],"mappings":"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"}

package/components/index.umd.min.js

@@ -3805,8 +3805,10 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
       </div>
     `}}od.styles=[...Ba.styles,Ea,id],od.childName="sgds-select-option",od.dependencies={"sgds-icon":Lt,"sgds-spinner":Ra,[od.childName]:ad},t([Te({flatten:!0,selector:"sgds-select-option"})],od.prototype,"options",void 0),t([nt("value",{waitUntilFirstUpdate:!0})],od.prototype,"_handleValueChange",null);var nd=r`.sidebar{display:flex;flex-direction:column;height:100%;position:relative;transition:width var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);width:var(--sgds-dimension-288);z-index:var(--sgds-z-index-sticky)}.sidebar:not(.overlay).sidebar--collapsed{width:var(--sgds-dimension-72)}.overlay{left:0;position:absolute;top:0}.overlay.sidebar--collapsed{width:var(--sgds-dimension-0)}.sidebar-top{align-items:center;display:flex;gap:var(--sgds-gap-md);justify-content:space-between;padding:0 var(--sgds-padding-xs)}:not(.overlay).sidebar--collapsed .sidebar-brand-name{display:none}:not(.overlay).sidebar--collapsed .sidebar-top{justify-content:center}.sidebar-main{background-color:var(--sgds-surface-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}.overlay .sidebar-main{left:0;transition:left var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard)}.overlay.sidebar--collapsed .sidebar-main{left:calc(var(--sgds-dimension-288)*-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);overflow-y:auto;padding:var(--sgds-padding-md) var(--sgds-padding-xs);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--overlay,.sidebar-nested-overlay{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;top:0}.sidebar--overlay{background-color:var(--sgds-bg-overlay);content:"";transition:all var(--sgds-motion-duration-standard) var(--sgds-motion-easing-standard);width:100vw}.sidebar--overlay.show{opacity:1;pointer-events:unset}.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}:not(.overlay).sidebar--collapsed .sidebar-nested-overlay.show{left:var(--sgds-dimension-72)}.sidebar-nested-overlay sgds-icon-button{display:none}.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 screen and (max-width:767px){.sidebar-nested-overlay sgds-icon-button{display:block}.sidebar,.sidebar-nested-overlay{width:var(--sgds-dimension-256)}.sidebar-nested-overlay,.sidebar-nested-overlay.show{left:var(--sgds-dimension-256)}}@media screen and (max-width:511px){.sidebar--overlay{display:none}.sidebar{position:absolute;width:100dvw}.sidebar-nested-overlay{left:-100dvw;width:100dvw;z-index:2}.sidebar-nested-overlay.show,:not(.overlay).sidebar--collapsed .sidebar-nested-overlay.show{left:0}.overlay.sidebar--collapsed .sidebar-main{left:calc(100dvw*-1)}}`;const rd="sidebar-active-group",ld="sidebar-active",dd="sidebar-collapsed",cd="sidebar-drawer-items",hd="sidebar-drawer-open",ud="sidebar-drawer-overlay";var pd=r`.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-indicator{align-items:center;display:flex;gap:var(--sgds-gap-2-xs)}.sidebar-item--collapsed .sidebar-item-indicator,.sidebar-item--collapsed .sidebar-item-label{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}`;class gd extends He{constructor(){super(...arguments),this.title="",this.name="",this._sidebarCollapsed=!1,this._sidebarActiveItem=null,this._sidebarActiveGroup=null,this._drawerItems=null,this._showDrawer=!1,this._isOverlay=!1,this._childLevel=1,this._selected=!1,this._hidden=!1,this._childElements=[],this._childActive=!1}connectedCallback(){super.connectedCallback(),this._getChildLevel(),this.addEventListener("keydown",this._handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this._handleKeyDown)}firstUpdated(e){super.firstUpdated(e),this._getChildLevel()}updated(){2===this._childLevel&&(this._hidden=!this.closest(".sidebar-nested-overlay"))}_handleSlotChange(){this._childElements=this._defaultNodes}_handleClick(){this.emit("i-sgds-click",{detail:{element:this,level:this._childLevel}})}_handleKeyDown(e){var t,s,i,a;const o=e.target;switch(e.key){case" ":case"Enter":return e.preventDefault(),e.stopPropagation(),void(e.target===this&&this._handleClick());case"ArrowDown":{e.preventDefault(),e.stopPropagation();const s=o._childElements[0],i=((null==s?void 0:s._hidden)?null:s)||o.nextElementSibling||(null===(t=o.parentElement)||void 0===t?void 0:t.nextElementSibling);if(null==i?void 0:i.shadowRoot){const e=i.shadowRoot.querySelector("[tabindex]");null==e||e.focus()}return}case"ArrowUp":{e.preventDefault(),e.stopPropagation();const t=null===(s=o.previousElementSibling)||void 0===s?void 0:s._childElements,i=t?t[(null==t?void 0:t.length)-1]:null,a=((null==i?void 0:i._hidden)?null:i)||o.previousElementSibling||o.parentElement;if(null==a?void 0:a.shadowRoot){const e=a.shadowRoot.querySelector("[tabindex]");null==e||e.focus()}return}case"ArrowLeft":if(e.preventDefault(),e.stopPropagation(),this._sidebarActiveGroup===this)this._showDrawer&&this._handleClick();else{if(o._childLevel>=2&&(null===(i=this._sidebarActiveGroup)||void 0===i?void 0:i.shadowRoot)){const e=this._sidebarActiveGroup.shadowRoot.querySelector("[tabindex]");null==e||e.focus()}}return;case"ArrowRight":if(e.preventDefault(),e.stopPropagation(),this._sidebarActiveGroup===this){if(null===(a=this._drawerItems)||void 0===a?void 0:a.length)if(this._showDrawer){const e=this._drawerItems[0];if(null==e?void 0:e.shadowRoot){const t=e.shadowRoot.querySelector("[tabindex]");null==t||t.focus()}}else this._handleClick()}else 1===this._childLevel&&this._childElements.length>0&&this._handleClick();return}}_getChildLevel(){let e=this.parentElement,t=1;for(;"sgds-sidebar-group"===(null==e?void 0:e.tagName.toLowerCase());)t+=1,e=e.parentElement;const s=null==e?void 0:e.classList.contains("sidebar-nested-overlay");this._childLevel=s?t+1:t}}gd.styles=Ni.styles,t([Ve({type:String,reflect:!0})],gd.prototype,"title",void 0),t([Ve({type:String,reflect:!0})],gd.prototype,"name",void 0),t([_l({context:dd,subscribe:!0}),Ee()],gd.prototype,"_sidebarCollapsed",void 0),t([_l({context:ld,subscribe:!0}),Ee()],gd.prototype,"_sidebarActiveItem",void 0),t([_l({context:rd,subscribe:!0}),Ee()],gd.prototype,"_sidebarActiveGroup",void 0),t([_l({context:cd,subscribe:!0}),Ee()],gd.prototype,"_drawerItems",void 0),t([_l({context:hd,subscribe:!0}),Ee()],gd.prototype,"_showDrawer",void 0),t([_l({context:ud,subscribe:!0}),Ee()],gd.prototype,"_isOverlay",void 0),t([Ee()],gd.prototype,"_childLevel",void 0),t([Ee()],gd.prototype,"_selected",void 0),t([Ee()],gd.prototype,"_hidden",void 0),t([Ee()],gd.prototype,"_childElements",void 0),t([Ee()],gd.prototype,"_childActive",void 0),t([Te({flatten:!0})],gd.prototype,"_defaultNodes",void 0);class vd extends gd{constructor(){super(...arguments),this._showMenu=!1}get showMenu(){return this._showMenu}_handleActiveItemContext(){this._childLevel>1&&this._sidebarActiveItem&&this.contains(this._sidebarActiveItem)&&(this._showMenu=!0)}_handleClick(){1!==this._childLevel?(this._showMenu=!this._showMenu,this._childElements.forEach(e=>{e._hidden=!this._showMenu})):super._handleClick()}_getIcon(){return 1===this._childLevel?"chevron-right":this._showMenu?"chevron-down":"chevron-up"}render(){return te`
       <div
+        role="button"
         class=${Ke({"sidebar-item":!0,"sidebar-item--collapsed":!this._isOverlay&&this._sidebarCollapsed&&1===this._childLevel,active:this._selected})}
         @click=${()=>this._handleClick()}
+        aria-label=${this.title||this.name}
         aria-expanded=${this._showMenu}
         tabindex=${this._childLevel>2&&!this._showMenu?-1:0}
       >
@@ -3818,7 +3820,7 @@ const Yl="important",jl=" !"+Yl;const Wl=je(class extends We{constructor(e){if(s
 
           <span class="sidebar-item-indicator">
             <slot name="indicator"></slot>
-            <sgds-icon aria-label=${this.title||this.name} name=${this._getIcon()} size="sm"></sgds-icon>
+            <sgds-icon name=${this._getIcon()} size="sm"></sgds-icon>
           </span>
         </div>
       </div>