@govtechsg/sgds-web-component 3.21.2-rc.5 → 3.23.0-rc.0

package/react/components/Sidenav/sgds-sidenav-item.cjs.js

@@ -7,6 +7,7 @@ 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 ifDefined_js = require('lit/directives/if-defined.js');
 var sgdsElement = require('../../base/sgds-element.cjs.js');
 var animate = require('../../utils/animate.cjs.js');
 var animationRegistry = require('../../utils/animation-registry.cjs.js');
@@ -203,6 +204,7 @@ class SgdsSidenavItem extends sgdsElement["default"] {
         aria-expanded=${this.active}
         aria-controls=${this._collapseId}
         aria-current=${this.active}
+        aria-label=${ifDefined_js.ifDefined(this.ariaLabel)}
         id=${this._buttonId}
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
@@ -242,6 +244,9 @@ tslib.__decorate([
 tslib.__decorate([
     decorators_js.property({ type: Boolean, reflect: true })
 ], SgdsSidenavItem.prototype, "disabled", void 0);
+tslib.__decorate([
+    decorators_js.property({ type: String })
+], SgdsSidenavItem.prototype, "ariaLabel", void 0);
 tslib.__decorate([
     decorators_js.state()
 ], SgdsSidenavItem.prototype, "isLink", void 0);

package/react/components/Sidenav/sgds-sidenav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.cjs.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["SgdsElement","genId","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","sidenavItemStyle","SgdsIcon","__decorate","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.cjs.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["SgdsElement","genId","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","html","classMap","ifDefined","sidenavItemStyle","SgdsIcon","__decorate","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"mappings":";;;;;;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;;;AAcG;AAEG,MAAO,eAAgB,SAAQA,sBAAW,CAAA;AAAhD,IAAA,WAAA,GAAA;;AAUE;;AAEG;QAEH,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;AAEf;;AAEG;QAEH,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;QAQA,IAAM,CAAA,MAAA,GAAG,KAAK,CAAC;AAEhC;;AAEG;AAEK,QAAA,IAAA,CAAA,WAAW,GAAWC,qBAAK,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC;AAE3D;;AAEG;AACK,QAAA,IAAA,CAAA,SAAS,GAAWA,qBAAK,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC;AAE/C,QAAA,IAAA,CAAA,QAAQ,GAAGA,qBAAK,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;AACpC,QAAA,IAAA,CAAA,aAAa,GAAG,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC;AAC/C,QAAA,IAAA,CAAA,cAAc,GAAG,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC;AACjD,QAAA,IAAA,CAAA,aAAa,GAAG,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC;;QAG/C,IAAK,CAAA,KAAA,GAAG,IAAI,CAAC;KA4LtB;IA1LS,SAAS,GAAA;AACf,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;KAC7D;;AAGM,IAAA,MAAM,IAAI,GAAA;QACf,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO;SACR;AAED,QAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;AACnB,QAAA,OAAOC,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;;AAGM,IAAA,MAAM,IAAI,GAAA;QACf,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;AACxB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,OAAO;SACR;AACD,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AACpB,QAAA,OAAOA,kBAAY,CAAC,IAAI,EAAE,iBAAiB,CAAC,CAAC;KAC9C;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACxC;AACD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AAEtC,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAChB,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,GAAG,CAAC;SACrD;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;AAED;;;;AAIG;IACK,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAoC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;SACpF;KACF;IACO,mBAAmB,GAAA;AACzB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;aAAM;YACL,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;QAED,IAAI,CAAC,SAAS,EAAE,CAAC;AACjB,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;KACrB;AACO,IAAA,qBAAqB,CAAC,KAAoB,EAAA;AAChD,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;YAC9C,KAAK,CAAC,cAAc,EAAE,CAAC;AAEvB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;iBAAM;gBACL,IAAI,CAAC,IAAI,EAAE,CAAC;aACb;SACF;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;YACxD,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;AAED,QAAA,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,EAAE;YAC3D,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,IAAI,EAAE,CAAC;SACb;KACF;IAGK,MAAA,iBAAiB,GAAA;QACrB,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;AACxB,QAAA,IAAI,IAAI,CAAC,MAAM,EAAE;;AAEf,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;gBACpB,OAAO;aACR;AAED,YAAA,MAAMC,sBAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;AAEzB,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAGC,8BAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,YAAA,MAAMC,iBAAS,CAAC,IAAI,CAAC,IAAI,EAAEC,+BAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;YAChG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;aAAM;;AAEL,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAAC;AAC9D,YAAA,IAAI,QAAQ,CAAC,gBAAgB,EAAE;AAC7B,gBAAA,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;gBACnB,OAAO;aACR;AAED,YAAA,MAAMH,sBAAc,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEhC,YAAA,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,GAAGC,8BAAY,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC;AAClE,YAAA,MAAMC,iBAAS,CAAC,IAAI,CAAC,IAAI,EAAEC,+BAAuB,CAAC,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,OAAO,CAAC,CAAC;AAChG,YAAA,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACxB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AAEhC,YAAA,IAAI,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;SAC9B;KACF;AAEO,IAAA,iBAAiB,CAAC,CAAQ,EAAA;AAChC,QAAA,MAAM,WAAW,GAAI,CAAC,CAAC,MAA0B;AAC9C,aAAA,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnC,aAAA,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,GAAG,CAAC,CAAC;AAEtD,QAAA,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;AAC1B,YAAA,OAAO,OAAO,CAAC,KAAK,CAAC,wDAAwD,CAAC,CAAC;SAChF;AAAM,aAAA,IAAI,WAAW,CAAC,MAAM,KAAK,CAAC,EAAE;AACnC,YAAA,MAAM,MAAM,GAAG,WAAW,CAAC,CAAC,CAAsB,CAAC;YACnD,IAAI,CAAC,QAAQ,IAAI,MAAM,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACvD,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;AAC3D,YAAA,QAAQ,IAAI,CAAC,MAAM,GAAG,IAAI,EAAE;SAC7B;AAED,QAAA,MAAM,YAAY,GAAI,CAAC,CAAC,MAA0B;AAC/C,aAAA,gBAAgB,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AACnC,aAAA,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,mBAAmB,CAAC,CAAC;;AAGtE,QAAA,YAAY,CAAC,OAAO,CAAC,CAAC,IAAG;YACvB,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;YACzF,CAAC,CAAC,SAAS,CAAC,OAAO,CAAC,YAAY,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;AACzD,SAAC,CAAC,CAAC;;QAEH,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC,EAAE;YACtE,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAkB,KAAK,CAAC,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;SAClF;QAED,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB;IAED,MAAM,GAAA;QACJ,MAAM,gBAAgB,GAAGC,QAAI,CAAA,CAAA;;AAEhB,eAAA,EAAA,IAAI,CAAC,mBAAmB,CAAA;AACtB,iBAAA,EAAA,IAAI,CAAC,qBAAqB,CAAA;AAChB,2BAAA,EAAAC,oBAAQ,CAAC;YAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,MAAM,EAAE,IAAI,CAAC,MAAM;SACpB,CAAC,CAAA;AACc,sBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACX,sBAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACjB,qBAAA,EAAA,IAAI,CAAC,MAAM,CAAA;AACb,mBAAA,EAAAC,sBAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;AACjC,WAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACP,kBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;wBACT,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;;;;;;;;AAQlB,oCAAA,EAAA,IAAI,CAAC,WAAW,CAAA;AACD,mDAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACrB,4CAAA,EAAA,IAAI,CAAC,iBAAiB,CAAA;;;KAG/D,CAAC;QAEF,MAAM,cAAc,GAAGF,QAAI,CAAA,sBAAsB,IAAI,CAAC,iBAAiB,CAAA,iCAAA,CAAmC,CAAC;AAC3G,QAAA,OAAOA,QAAI,CAAA,CAAA;AACkC,+CAAA,EAAA,CAAC,IAAI,CAAC,MAAM,CAAA,EAAA,EAAK,IAAI,CAAC,MAAM,GAAG,cAAc,GAAG,gBAAgB,CAAA;KAC5G,CAAC;KACH;;AAzOM,eAAM,CAAA,MAAA,GAAG,CAAC,GAAGP,sBAAW,CAAC,MAAM,EAAEU,sBAAgB,CAA3C,CAA6C;AAC1D;AACO,eAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAEC,iBAAQ;AACtB,CAFkB,CAEjB;AAEsBC,gBAAA,CAAA;IAAvBC,mBAAK,CAAC,eAAe,CAAC;AAAmB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEnBD,gBAAA,CAAA;IAAtBC,mBAAK,CAAC,cAAc,CAAC;AAAqB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAK3CD,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC5B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMfF,gBAAA,CAAA;IADCE,sBAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAC1B,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAMjBF,gBAAA,CAAA;AADC,IAAAE,sBAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AACT,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEDF,gBAAA,CAAA;AAAhB,IAAAG,mBAAK,EAAE;AAAwB,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAwG1BH,gBAAA,CAAA;IADLI,WAAK,CAAC,QAAQ,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAoC/C,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,mBAAA,EAAA,IAAA,CAAA,CAAA;AACgCJ,gBAAA,CAAA;AAAhC,IAAAK,mCAAqB,EAAE;AAAmC,CAAA,EAAA,eAAA,CAAA,SAAA,EAAA,QAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAoE7DC,qCAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC7B,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AACjC,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC,CAAC;AAEHA,qCAAmB,CAAC,cAAc,EAAE;AAClC,IAAA,SAAS,EAAE;AACT,QAAA,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE;AAChC,QAAA,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE;AAC9B,KAAA;IACD,OAAO,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,EAAE;AAClD,CAAA,CAAC;;;;;"}

package/react/components/Sidenav/sgds-sidenav-item.js

@@ -3,6 +3,7 @@ import { __decorate } from 'tslib';
 import { html } from 'lit';
 import { query, property, state, queryAssignedElements } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import SgdsElement from '../../base/sgds-element.js';
 import { stopAnimations, animateTo, shimKeyframesHeightAuto } from '../../utils/animate.js';
 import { setDefaultAnimation, getAnimation } from '../../utils/animation-registry.js';
@@ -199,6 +200,7 @@ class SgdsSidenavItem extends SgdsElement {
         aria-expanded=${this.active}
         aria-controls=${this._collapseId}
         aria-current=${this.active}
+        aria-label=${ifDefined(this.ariaLabel)}
         id=${this._buttonId}
         ?disabled=${this.disabled}
         aria-disabled=${this.disabled ? "true" : "false"}
@@ -238,6 +240,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SgdsSidenavItem.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], SgdsSidenavItem.prototype, "ariaLabel", void 0);
 __decorate([
     state()
 ], SgdsSidenavItem.prototype, "isLink", void 0);

package/react/components/Sidenav/sgds-sidenav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.js","sources":["../../../../src/components/Sidenav/sgds-sidenav-item.ts"],"sourcesContent":["import { html, PropertyValueMap } from \"lit\";\nimport { property, query, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { animateTo, shimKeyframesHeightAuto, stopAnimations } from \"../../utils/animate\";\nimport { getAnimation, setDefaultAnimation } from \"../../utils/animation-registry\";\nimport { waitForEvent } from \"../../utils/event\";\nimport genId from \"../../utils/generateId\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsSidenavLink from \"./sgds-sidenav-link\";\nimport sidenavItemStyle from \"./sidenav-item.css\";\n\n/**\n * @description SgdsSidenavItem can function as either a menu type or a link type. Its type is determined by the children slotted into the default slot.\n * A single anchor tag element passed into the default slot converts SgdsSidenavItem to a link type while passing in SgdsSidenavLink components into the default slots makes it a menu type.\n *\n * @event sgds-toggle - Emitted when the sidenav item's button is clicked. Only applicable to menu type.\n * @event sgds-show - Emitted on show. Only applicable to menu type.\n * @event sgds-after-show - Emitted on show after animation has completed. Only applicable to menu type.\n * @event sgds-hide - Emitted on hide. Only applicable to menu type.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only applicable to menu type.\n *\n * @slot default - default slot for SgdsSidenavLink and second level SgdsSidenavItem. For link type SgdsSidenavItem, pass in a single anchor tag to the default slot. For menu type, pass in SgdsSidenavLink to the default slot\n * @slot title - title slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot icon - icon slot for the content of SgdsSidenavItem's menu button element. Only applicable to menu type\n * @slot caret-icon - The slot for the caret arrow icon of SgdsSidenavItem. Only applicable to menu type.\n */\n\nexport class SgdsSidenavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavItemStyle];\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  @query(\".sidenav-body\") body: HTMLElement;\n  /** @internal */\n  @query(\".sidenav-btn\") header: HTMLElement;\n  /**\n   *  when true, toggles the sidenav-item to open on first load and set the active stylings.\n   */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /**\n   * Disables the SgdsSidenavItem\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.\n   */\n  @property({ type: String })\n  ariaLabel: string;\n\n  @state() private isLink = false;\n\n  /**\n   * @internal Forwards to id attribute of div.collapse and aria-controls attribute of button in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n\n  private _collapseId: string = genId(\"sidenav\", \"collapse\");\n\n  /**\n   * @internal Forwards to id attribute of button and aria-labelledby attribute of ul.sidenav-list in SgdsSidenavItem. By default, SgdsSidenavItem auto-generates a unique id. Override the default id by specifiying your own\n   */\n  private _buttonId: string = genId(\"sidenav\", \"button\");\n\n  private _levelId = genId(\"sidenav\", \"this\");\n  private _firstLevelId = \"first-level-\" + this._levelId;\n  private _secondLevelId = \"second-level-\" + this._levelId;\n  private _thirdLevelId = \"third-level-\" + this._levelId;\n\n  /** @internal */\n  private index = \"-1\";\n\n  private _onToggle() {\n    this.emit(\"sgds-toggle\", { detail: { index: this.index } });\n  }\n\n  /** Shows the sidenav item. Only applicable to sgds-sidenav-item that are of menu types */\n  public async show() {\n    if (this.isLink) return;\n    if (this.active) {\n      return;\n    }\n\n    this.active = true;\n    return waitForEvent(this, \"sgds-after-show\");\n  }\n\n  /** Hide the sidenav item.  Only applicable to sgds-sidenav-item that are of menu types */\n  public async hide() {\n    if (this.isLink) return;\n    if (!this.active) {\n      return;\n    }\n    this.active = false;\n    return waitForEvent(this, \"sgds-after-hide\");\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.classList.add(this._firstLevelId);\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n\n    if (!this.isLink) {\n      this.body.hidden = !this.active;\n      this.body.style.height = this.active ? \"auto\" : \"0\";\n    }\n\n    this._handleOpenMenu();\n  }\n\n  /**\n   * Sets active to true to open menu ,\n   * evaluating based on whether any of the child in any level is active\n   * If at least 1 child is active, parent item should be active\n   */\n  private _handleOpenMenu() {\n    if (!this.active) {\n      this.active = this._items.some((i: SgdsSidenavItem | SgdsSidenavLink) => i.active);\n    }\n  }\n  private _handleSummaryClick() {\n    if (this.active) {\n      this.hide();\n    } else {\n      this.show();\n    }\n\n    this._onToggle();\n    this.header.focus();\n  }\n  private _handleSummaryKeyDown(event: KeyboardEvent) {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n\n      if (this.active) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n\n    if (event.key === \"ArrowUp\" || event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      this.hide();\n    }\n\n    if (event.key === \"ArrowDown\" || event.key === \"ArrowRight\") {\n      event.preventDefault();\n      this.show();\n    }\n  }\n\n  @watch(\"active\", { waitUntilFirstUpdate: true })\n  async _handleOpenChange() {\n    if (this.isLink) return;\n    if (this.active) {\n      // Show\n      const sgdsShow = this.emit(\"sgds-show\", { cancelable: true });\n      if (sgdsShow.defaultPrevented) {\n        this.active = false;\n        return;\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.show\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-show\");\n    } else {\n      // Hide\n      const sgdsHide = this.emit(\"sgds-hide\", { cancelable: true });\n      if (sgdsHide.defaultPrevented) {\n        this.active = true;\n        return;\n      }\n\n      await stopAnimations(this.body);\n\n      const { keyframes, options } = getAnimation(this, \"sidenav.hide\");\n      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);\n      this.body.hidden = true;\n      this.body.style.height = \"auto\";\n\n      this.emit(\"sgds-after-hide\");\n    }\n  }\n  @queryAssignedElements() private _items: SgdsSidenavLink[];\n  private _handleSlotChange(e: Event) {\n    const anchorItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"a\");\n\n    if (anchorItems.length > 1) {\n      return console.error(\"More than one anchor tag is added to sgds-sidenav-item\");\n    } else if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n      this.disabled && anchor.setAttribute(\"tabindex\", \"-1\");\n      this.active && anchor.setAttribute(\"aria-current\", \"true\");\n      return (this.isLink = true);\n    }\n\n    const sideNavItems = (e.target as HTMLSlotElement)\n      .assignedElements({ flatten: true })\n      .filter(item => item.tagName.toLowerCase() === \"sgds-sidenav-item\");\n\n    /** All sgds-sidenav-item in this slot is a 2nd level item */\n    sideNavItems.forEach(i => {\n      const firstLevelId = Array.from(i.classList).filter(c => c.startsWith(\"first-level\"))[0];\n      i.classList.replace(firstLevelId, this._secondLevelId);\n    });\n    /** All second level sgds-sidenav-item should only have third level sgds-sidenav-links */\n    if (Array.from(this.classList).some(c => c.startsWith(\"second-level\"))) {\n      this._items.forEach((i: SgdsSidenavLink) => i.classList.add(this._thirdLevelId));\n    }\n\n    this._handleOpenMenu();\n  }\n\n  render() {\n    const withMenuTemplate = html`\n      <button\n        @click=${this._handleSummaryClick}\n        @keydown=${this._handleSummaryKeyDown}\n        class=\"sidenav-btn ${classMap({\n          disabled: this.disabled,\n          active: this.active\n        })}\"\n        aria-expanded=${this.active}\n        aria-controls=${this._collapseId}\n        aria-current=${this.active}\n        aria-label=${ifDefined(this.ariaLabel)}\n        id=${this._buttonId}\n        ?disabled=${this.disabled}\n        aria-disabled=${this.disabled ? \"true\" : \"false\"}\n      >\n        <slot name=\"icon\"></slot>\n        <slot name=\"title\"></slot>\n        <slot name=\"caret-icon\">\n          <sgds-icon name=\"chevron-down\" size=\"lg\" class=\"caret-icon\"></sgds-icon>\n        </slot>\n      </button>\n      <div class=\"sidenav-body\" id=\"${this._collapseId}\">\n        <div class=\"sidenav-list\" aria-labelledby=\"${this._buttonId}\">\n          <slot class=\"default\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n      </div>\n    `;\n\n    const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot> `;\n    return html`\n      <div class=\"sidenav-item\" aria-haspopup=\"${!this.isLink}\">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>\n    `;\n  }\n}\nsetDefaultAnimation(\"sidenav.show\", {\n  keyframes: [\n    { height: \"0\", opacity: \"0\" },\n    { height: \"auto\", opacity: \"1\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\n\nsetDefaultAnimation(\"sidenav.hide\", {\n  keyframes: [\n    { height: \"auto\", opacity: \"1\" },\n    { height: \"0\", opacity: \"0\" }\n  ],\n  options: { duration: 200, easing: \"ease-in-out\" }\n});\nexport default SgdsSidenavItem;\n"],"names":["sidenavItemStyle"],"mappings":"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"}

package/react/index.cjs.js

@@ -7,11 +7,11 @@ var index = require('./accordion-item/index.cjs.js');
 var index$1 = require('./accordion/index.cjs.js');
 var index$2 = require('./alert-link/index.cjs.js');
 var index$3 = require('./alert/index.cjs.js');
-var index$4 = require('./badge/index.cjs.js');
-var index$5 = require('./breadcrumb-item/index.cjs.js');
-var index$6 = require('./breadcrumb/index.cjs.js');
-var index$7 = require('./button/index.cjs.js');
-var index$8 = require('./card/index.cjs.js');
+var index$4 = require('./button/index.cjs.js');
+var index$5 = require('./badge/index.cjs.js');
+var index$6 = require('./card/index.cjs.js');
+var index$7 = require('./breadcrumb-item/index.cjs.js');
+var index$8 = require('./breadcrumb/index.cjs.js');
 var index$9 = require('./checkbox-group/index.cjs.js');
 var index$a = require('./checkbox/index.cjs.js');
 var index$b = require('./close-button/index.cjs.js');
@@ -83,11 +83,11 @@ exports.SgdsAccordionItem = index["default"];
 exports.SgdsAccordion = index$1["default"];
 exports.SgdsAlertLink = index$2["default"];
 exports.SgdsAlert = index$3["default"];
-exports.SgdsBadge = index$4["default"];
-exports.SgdsBreadcrumbItem = index$5["default"];
-exports.SgdsBreadcrumb = index$6["default"];
-exports.SgdsButton = index$7["default"];
-exports.SgdsCard = index$8["default"];
+exports.SgdsButton = index$4["default"];
+exports.SgdsBadge = index$5["default"];
+exports.SgdsCard = index$6["default"];
+exports.SgdsBreadcrumbItem = index$7["default"];
+exports.SgdsBreadcrumb = index$8["default"];
 exports.SgdsCheckboxGroup = index$9["default"];
 exports.SgdsCheckbox = index$a["default"];
 exports.SgdsCloseButton = index$b["default"];

package/react/index.d.ts

@@ -2,11 +2,11 @@ export { default as SgdsAccordionItem } from './accordion-item';
 export { default as SgdsAccordion } from './accordion';
 export { default as SgdsAlertLink } from './alert-link';
 export { default as SgdsAlert } from './alert';
+export { default as SgdsButton } from './button';
 export { default as SgdsBadge } from './badge';
+export { default as SgdsCard } from './card';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
 export { default as SgdsBreadcrumb } from './breadcrumb';
-export { default as SgdsButton } from './button';
-export { default as SgdsCard } from './card';
 export { default as SgdsCheckboxGroup } from './checkbox-group';
 export { default as SgdsCheckbox } from './checkbox';
 export { default as SgdsCloseButton } from './close-button';

package/react/index.js

@@ -3,11 +3,11 @@ export { default as SgdsAccordionItem } from './accordion-item/index.js';
 export { default as SgdsAccordion } from './accordion/index.js';
 export { default as SgdsAlertLink } from './alert-link/index.js';
 export { default as SgdsAlert } from './alert/index.js';
+export { default as SgdsButton } from './button/index.js';
 export { default as SgdsBadge } from './badge/index.js';
+export { default as SgdsCard } from './card/index.js';
 export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
 export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
-export { default as SgdsButton } from './button/index.js';
-export { default as SgdsCard } from './card/index.js';
 export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
 export { default as SgdsCheckbox } from './checkbox/index.js';
 export { default as SgdsCloseButton } from './close-button/index.js';

package/types/react.d.ts

@@ -155,46 +155,6 @@ export interface SgdsAlertProps extends SgdsBaseProps {
   onSgdsHide?: SgdsEventHandler;
 }
 
-// ── Badge ─────────────────────────────────────────────────────────────
-
-export interface SgdsBadgeProps extends SgdsBaseProps {
-  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
-  show?: boolean;
-  /** One or more badge variant combinations.
-Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
-
-(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
-  variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
-  /** Manually set the outlined state to false */
-  outlined?: boolean;
-  /** Manually set the dismissible state of the button to `false` */
-  dismissible?: boolean;
-  /** Manually enable full width */
-  fullWidth?: boolean;
-  "onsgds-show"?: SgdsEventHandler;
-  onSgdsShow?: SgdsEventHandler;
-  "onsgds-hide"?: SgdsEventHandler;
-  onSgdsHide?: SgdsEventHandler;
-  "onsgds-after-show"?: SgdsEventHandler;
-  onSgdsAfterShow?: SgdsEventHandler;
-  "onsgds-after-hide"?: SgdsEventHandler;
-  onSgdsAfterHide?: SgdsEventHandler;
-}
-
-// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
-  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
-  active?: boolean;
-}
-
-// ── Breadcrumb ─────────────────────────────────────────────────────────────
-
-export interface SgdsBreadcrumbProps extends SgdsBaseProps {
-  /** The aria-label of nav element within breadcrumb component. */
-  ariaLabel?: string;
-}
-
 // ── Button ─────────────────────────────────────────────────────────────
 
 export interface SgdsButtonProps extends SgdsBaseProps {
@@ -251,6 +211,32 @@ value of this attribute must be an id of a form in the same document or shadow r
   onSgdsFocus?: SgdsEventHandler;
 }
 
+// ── Badge ─────────────────────────────────────────────────────────────
+
+export interface SgdsBadgeProps extends SgdsBaseProps {
+  /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true */
+  show?: boolean;
+  /** One or more badge variant combinations.
+Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
+
+(@deprecated) The `info` variant is deprecated. Use `primary` instead. */
+  variant?: "primary" | "accent" | "success" | "danger" | "warning" | "cyan" | "purple" | "neutral" | "white" | "info";
+  /** Manually set the outlined state to false */
+  outlined?: boolean;
+  /** Manually set the dismissible state of the button to `false` */
+  dismissible?: boolean;
+  /** Manually enable full width */
+  fullWidth?: boolean;
+  "onsgds-show"?: SgdsEventHandler;
+  onSgdsShow?: SgdsEventHandler;
+  "onsgds-hide"?: SgdsEventHandler;
+  onSgdsHide?: SgdsEventHandler;
+  "onsgds-after-show"?: SgdsEventHandler;
+  onSgdsAfterShow?: SgdsEventHandler;
+  "onsgds-after-hide"?: SgdsEventHandler;
+  onSgdsAfterHide?: SgdsEventHandler;
+}
+
 // ── Card ─────────────────────────────────────────────────────────────
 
 export interface SgdsCardProps extends SgdsBaseProps {
@@ -276,6 +262,20 @@ export interface SgdsCardProps extends SgdsBaseProps {
   orientation?: CardOrientation;
 }
 
+// ── BreadcrumbItem ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbItemProps extends SgdsBaseProps {
+  /** Indicates the link matches the current location of the page. Programmatically handled by SgdsBreadcrumb to set this prop to true for the last breadcrumb item */
+  active?: boolean;
+}
+
+// ── Breadcrumb ─────────────────────────────────────────────────────────────
+
+export interface SgdsBreadcrumbProps extends SgdsBaseProps {
+  /** The aria-label of nav element within breadcrumb component. */
+  ariaLabel?: string;
+}
+
 // ── CheckboxGroup ─────────────────────────────────────────────────────────────
 
 export interface SgdsCheckboxGroupProps extends SgdsBaseProps {
@@ -413,6 +413,8 @@ We still expose `.value` externally, but this is now the underlying ID or data
   invalidFeedback?: string;
   /** Marks the component as invalid. Replace the pseudo :invalid selector. */
   invalid?: boolean;
+  /** Controlling of autocomplete behaviour */
+  autocomplete?: string;
   /** The list of items to display in the dropdown.
 `interface SgdsComboBoxItemData {
 label: string;
@@ -830,6 +832,8 @@ export interface SgdsInputProps extends SgdsBaseProps {
   autofocus?: boolean;
   /** Makes the input readonly. */
   readonly?: boolean;
+  /** Controlling of autocomplete behaviour */
+  autocomplete?: string;
   /** Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
 implied, allowing any numeric value. Only applies to number input types. */
   step?: number | "any";
@@ -1139,6 +1143,8 @@ We still expose `.value` externally, but this is now the underlying ID or data
   invalidFeedback?: string;
   /** Marks the component as invalid. Replace the pseudo :invalid selector. */
   invalid?: boolean;
+  /** Controlling of autocomplete behaviour */
+  autocomplete?: string;
   /** The list of items to display in the dropdown.
 `interface SgdsComboBoxItemData {
 label: string;
@@ -1261,6 +1267,8 @@ export interface SgdsSidenavItemProps extends SgdsBaseProps {
   active?: boolean;
   /** Disables the SgdsSidenavItem */
   disabled?: boolean;
+  /** Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute. */
+  ariaLabel?: string;
   "onsgds-toggle"?: SgdsEventHandler;
   onSgdsToggle?: SgdsEventHandler;
   "onsgds-show"?: SgdsEventHandler;
@@ -1678,11 +1686,11 @@ declare module "react" {
       "sgds-accordion": React.DetailedHTMLProps<SgdsAccordionProps, HTMLElement>;
       "sgds-alert-link": React.DetailedHTMLProps<SgdsAlertLinkProps, HTMLElement>;
       "sgds-alert": React.DetailedHTMLProps<SgdsAlertProps, HTMLElement>;
+      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
       "sgds-badge": React.DetailedHTMLProps<SgdsBadgeProps, HTMLElement>;
+      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-breadcrumb-item": React.DetailedHTMLProps<SgdsBreadcrumbItemProps, HTMLElement>;
       "sgds-breadcrumb": React.DetailedHTMLProps<SgdsBreadcrumbProps, HTMLElement>;
-      "sgds-button": React.DetailedHTMLProps<SgdsButtonProps, HTMLElement>;
-      "sgds-card": React.DetailedHTMLProps<SgdsCardProps, HTMLElement>;
       "sgds-checkbox-group": React.DetailedHTMLProps<SgdsCheckboxGroupProps, HTMLElement>;
       "sgds-checkbox": React.DetailedHTMLProps<SgdsCheckboxProps, HTMLElement>;
       "sgds-close-button": React.DetailedHTMLProps<SgdsCloseButtonProps, HTMLElement>;
@@ -1761,11 +1769,11 @@ declare global {
     "sgds-accordion": HTMLElement;
     "sgds-alert-link": HTMLElement;
     "sgds-alert": HTMLElement;
+    "sgds-button": HTMLElement;
     "sgds-badge": HTMLElement;
+    "sgds-card": HTMLElement;
     "sgds-breadcrumb-item": HTMLElement;
     "sgds-breadcrumb": HTMLElement;
-    "sgds-button": HTMLElement;
-    "sgds-card": HTMLElement;
     "sgds-checkbox-group": HTMLElement;
     "sgds-checkbox": HTMLElement;
     "sgds-close-button": HTMLElement;