@govtechsg/sgds-web-component 3.30.1-rc.7 → 3.30.1-rc.9

package/react/components/Mainnav/sgds-mainnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `profile` slot. */\n  @property({ type: Boolean }) hasProfileSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\", \"profile\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    if (!this.hasProfileSlot) this.hasProfileSlot = this.hasSlotController.test(\"profile\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this.hasProfileSlot = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"Main navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div\n            class=${classMap({\n              \"navbar-end\": true,\n              \"navbar-end--empty\": !this.hasNonCollapsibleSlot && !this.hasProfileSlot && !this.breakpointReached\n            })}\n          >\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot\n              name=\"profile\"\n              class=${classMap({ \"slot-empty\": !this.hasProfileSlot })}\n              @slotchange=${this._handleProfileSlotChange}\n            ></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-mainnav.js","names":["mainnavStyle"],"sources":["../../../../src/components/Mainnav/sgds-mainnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport NavElement from \"../../base/nav-element\";\nimport { sanitizeHref } from \"../../utils/safeUrl\";\nimport { HasSlotController } from \"../../utils/slot\";\nimport { MainnavBreakpointContext, MainnavExpandedContext } from \"./mainnav-context\";\nimport mainnavStyle from \"./mainnav.css\";\nimport SgdsMainnavDropdown from \"./sgds-mainnav-dropdown\";\nimport SgdsMainnavItem from \"./sgds-mainnav-item\";\n\nexport type MainnavExpandSize = \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\" | \"always\" | \"never\";\n\n/**\n * @summary This component is the primary means that your users will use to navigate through your portal. It includes horizontal navigation and branding to identify your site.\n *\n * @event sgds-show - Emitted on show. Only for collapsed menu.\n * @event sgds-after-show - Emitted on show after animation has completed. Only for collapsed menu.\n * @event sgds-hide - Emitted on hide. Only for collapsed menu.\n * @event sgds-after-hide - Emitted on hide after animation has completed. Only for collapsed menu.\n *\n * @slot default - Default slot of SgdsMainnav. Pass in SgdsMainnavItem elements here.\n * @slot end - Elements in this slot will be positioned to the right end of .navbar-nav. Elements in this slot will also be included in collapsed menu.\n * @slot brand - Brand slot of SgdsMainnav. Pass in brand logo img here\n * @slot profile - Profile slot positioned at the far right in desktop. In mobile, moves into the collapsed menu as the first item.\n * @slot non-collapsible - Elements in this slot will not be collapsed\n *\n */\nexport class SgdsMainnav extends NavElement {\n  static styles = [...NavElement.styles, mainnavStyle];\n\n  @provide({ context: MainnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: MainnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Used only for SSR to indicate the presence of the `non-collapsible` slot. */\n  @property({ type: Boolean }) hasNonCollapsibleSlot = false;\n\n  /** Used only for SSR to indicate the presence of the `profile` slot. */\n  @property({ type: Boolean }) hasProfileSlot = false;\n\n  /** When true, removes max-width constraint to allow content to stretch full screen width */\n  @property({ type: Boolean, reflect: true })\n  fluid = false;\n\n  @queryAssignedElements() private defaultNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  @queryAssignedElements({ slot: \"end\" }) private endNodes!: SgdsMainnavItem[] | SgdsMainnavDropdown[];\n\n  /** @internal */\n  get defaultSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.defaultNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  /** @internal */\n  get endSlotItems(): SgdsMainnavItem[] | SgdsMainnavDropdown[] {\n    return [...(this.endNodes || [])].filter((node: HTMLElement) => typeof node.tagName !== \"undefined\") as\n      | SgdsMainnavItem[]\n      | SgdsMainnavDropdown[];\n  }\n\n  private readonly hasSlotController = new HasSlotController(this, \"non-collapsible\", \"profile\");\n\n  updated() {\n    if (!this.hasNonCollapsibleSlot) this.hasNonCollapsibleSlot = this.hasSlotController.test(\"non-collapsible\");\n    if (!this.hasProfileSlot) this.hasProfileSlot = this.hasSlotController.test(\"profile\");\n    // Sync expanded state to context\n    this._expanded = this.expanded;\n  }\n\n  protected _onBreakpointReached(reached: boolean): void {\n    this._breakpointReached = reached;\n  }\n\n  protected _isBreakpointReached(): boolean {\n    return this._breakpointReached;\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    childElements.forEach(e => {\n      e.setAttribute(\"name\", e.tagName.toLowerCase());\n      e.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this.hasProfileSlot = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  render() {\n    this.breakpointReached =\n      window.innerWidth <\n      (this.expand === \"always\"\n        ? -1\n        : this.expand === \"never\"\n        ? Infinity\n        : { sm: 512, md: 768, lg: 1024, xl: 1280, xxl: 1440 }[this.expand]);\n\n    return html`\n      <nav aria-label=\"Main navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          ${this.brandHref\n            ? html`<a class=\"navbar-brand\" href=${sanitizeHref(this.brandHref) ?? \"\"}>\n                <slot name=\"brand\"></slot>\n              </a>`\n            : html`<div class=\"navbar-brand\">\n                <slot name=\"brand\" @slotchange=${this._handleBrandSlotChange}></slot>\n              </div>`}\n          <div class=\"navbar-body navbar-collapse\" id=${this.collapseId}>\n            <div class=\"navbar-nav navbar-nav-scroll\">\n              <slot @slotchange=${this._handleDefaultSlotChange}></slot>\n              <slot\n                name=\"end\"\n                class=${classMap({ \"slot-end\": !this.breakpointReached })}\n                @slotchange=${this._handleSlotChange}\n              ></slot>\n            </div>\n          </div>\n          <div\n            class=${classMap({\n              \"navbar-end\": true,\n              \"navbar-end--empty\": !this.hasNonCollapsibleSlot && !this.hasProfileSlot && !this.breakpointReached\n            })}\n          >\n            <slot name=\"non-collapsible\" class=${classMap({ \"slot-empty\": !this.hasNonCollapsibleSlot })}></slot>\n            <slot\n              name=\"profile\"\n              class=${classMap({ \"slot-empty\": !this.hasProfileSlot })}\n              @slotchange=${this._handleProfileSlotChange}\n            ></slot>\n            ${this._renderToggler()}\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsMainnav;\n"],"mappings":"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"}

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

@@ -179,7 +179,9 @@ var SgdsSidenavItem = class extends require_sgds_element.default {
         </div>
       </div>
     `;
-		const noMenuTemplate = lit.html` <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot> `;
+		const noMenuTemplate = lit.html`<div class="no-menu-wrapper">
+      <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot>
+    </div>`;
 		return lit.html`
       <div class="sidenav-item" aria-haspopup="${!this.isLink}">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.cjs.js","names":["SgdsElement","genId","sidenavItemStyle","SgdsIcon","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","classMap","ifDefined","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"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"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.cjs.js","names":["SgdsElement","genId","sidenavItemStyle","SgdsIcon","waitForEvent","stopAnimations","getAnimation","animateTo","shimKeyframesHeightAuto","classMap","ifDefined","query","property","state","watch","queryAssignedElements","setDefaultAnimation"],"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`<div class=\"no-menu-wrapper\">\n      <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n    </div>`;\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"],"mappings":"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"}

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

@@ -179,7 +179,9 @@ var SgdsSidenavItem = class extends SgdsElement {
         </div>
       </div>
     `;
-		const noMenuTemplate = html` <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot> `;
+		const noMenuTemplate = html`<div class="no-menu-wrapper">
+      <slot @slotchange=${this._handleSlotChange} class="no-menu-default"></slot>
+    </div>`;
 		return html`
       <div class="sidenav-item" aria-haspopup="${!this.isLink}">${this.isLink ? noMenuTemplate : withMenuTemplate}</div>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"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"],"mappings":"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"}
+{"version":3,"file":"sgds-sidenav-item.js","names":["genId","sidenavItemStyle"],"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`<div class=\"no-menu-wrapper\">\n      <slot @slotchange=${this._handleSlotChange} class=\"no-menu-default\"></slot>\n    </div>`;\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,kBAAb,cAAqC,YAAY;;;EActC,KAAA,SAAA;EAME,KAAA,WAAA;EAQe,KAAA,SAAA;EAMIA,KAAAA,cAAAA,mBAAM,WAAW,UAAU;EAK7BA,KAAAA,YAAAA,mBAAM,WAAW,QAAQ;EAElCA,KAAAA,WAAAA,mBAAM,WAAW,MAAM;EAClB,KAAA,gBAAA,iBAAiB,KAAK;EACrB,KAAA,iBAAA,kBAAkB,KAAK;EACxB,KAAA,gBAAA,iBAAiB,KAAK;EAG9B,KAAA,QAAA;;;EA9CA,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQC,QAAgB;;;EAElC,KAAA,eAAA,EACpB,aAAa,SACf;;CA4CA,YAAoB;EAClB,KAAK,KAAK,eAAe,EAAE,QAAQ,EAAE,OAAO,KAAK,MAAM,EAAE,CAAC;CAC5D;;CAGA,MAAa,OAAO;EAClB,IAAI,KAAK,QAAQ;EACjB,IAAI,KAAK,QACP;EAGF,KAAK,SAAS;EACd,OAAO,aAAa,MAAM,iBAAiB;CAC7C;;CAGA,MAAa,OAAO;EAClB,IAAI,KAAK,QAAQ;EACjB,IAAI,CAAC,KAAK,QACR;EAEF,KAAK,SAAS;EACd,OAAO,aAAa,MAAM,iBAAiB;CAC7C;CAEA,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,UAAU,IAAI,KAAK,aAAa;CACvC;CACA,aAAa,mBAA2C;EACtD,MAAM,aAAa,iBAAiB;EAEpC,IAAI,CAAC,KAAK,QAAQ;GAChB,KAAK,KAAK,SAAS,CAAC,KAAK;GACzB,KAAK,KAAK,MAAM,SAAS,KAAK,SAAS,SAAS;EAClD;EAEA,KAAK,gBAAgB;CACvB;;;;;;CAOA,kBAA0B;EACxB,IAAI,CAAC,KAAK,QACR,KAAK,SAAS,KAAK,OAAO,MAAM,MAAyC,EAAE,MAAM;CAErF;CACA,sBAA8B;EAC5B,IAAI,KAAK,QACP,KAAK,KAAK;OAEV,KAAK,KAAK;EAGZ,KAAK,UAAU;EACf,KAAK,OAAO,MAAM;CACpB;CACA,sBAA8B,OAAsB;EAClD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GAErB,IAAI,KAAK,QACP,KAAK,KAAK;QAEV,KAAK,KAAK;EAEd;EAEA,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,KAAK,KAAK;EACZ;EAEA,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,cAAc;GAC3D,MAAM,eAAe;GACrB,KAAK,KAAK;EACZ;CACF;CAEA,MACM,oBAAoB;EACxB,IAAI,KAAK,QAAQ;EACjB,IAAI,KAAK,QAAQ;GAGf,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,SAAS;IACd;GACF;GAEA,MAAM,eAAe,KAAK,IAAI;GAC9B,KAAK,KAAK,SAAS;GAEnB,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM,cAAc;GAChE,MAAM,UAAU,KAAK,MAAM,wBAAwB,WAAW,KAAK,KAAK,YAAY,GAAG,OAAO;GAC9F,KAAK,KAAK,MAAM,SAAS;GAEzB,KAAK,KAAK,iBAAiB;EAC7B,OAAO;GAGL,IADiB,KAAK,KAAK,aAAa,EAAE,YAAY,KAAK,CAChD,CAAC,CAAC,kBAAkB;IAC7B,KAAK,SAAS;IACd;GACF;GAEA,MAAM,eAAe,KAAK,IAAI;GAE9B,MAAM,EAAE,WAAW,YAAY,aAAa,MAAM,cAAc;GAChE,MAAM,UAAU,KAAK,MAAM,wBAAwB,WAAW,KAAK,KAAK,YAAY,GAAG,OAAO;GAC9F,KAAK,KAAK,SAAS;GACnB,KAAK,KAAK,MAAM,SAAS;GAEzB,KAAK,KAAK,iBAAiB;EAC7B;CACF;CAEA,kBAA0B,GAAU;EAClC,MAAM,cAAe,EAAE,OACpB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,SAAQ,KAAK,QAAQ,YAAY,MAAM,GAAG;EAEpD,IAAI,YAAY,SAAS,GACvB,OAAO,QAAQ,MAAM,wDAAwD;OACxE,IAAI,YAAY,WAAW,GAAG;GACnC,MAAM,SAAS,YAAY;GAC3B,KAAK,YAAY,OAAO,aAAa,YAAY,IAAI;GACrD,KAAK,UAAU,OAAO,aAAa,gBAAgB,MAAM;GACzD,OAAQ,KAAK,SAAS;EACxB;;EAOA,EALwB,OACrB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QAAO,SAAQ,KAAK,QAAQ,YAAY,MAAM,mBAGtC,CAAC,CAAC,SAAQ,MAAK;GACxB,MAAM,eAAe,MAAM,KAAK,EAAE,SAAS,CAAC,CAAC,QAAO,MAAK,EAAE,WAAW,aAAa,CAAC,CAAC,CAAC;GACtF,EAAE,UAAU,QAAQ,cAAc,KAAK,cAAc;EACvD,CAAC;;EAED,IAAI,MAAM,KAAK,KAAK,SAAS,CAAC,CAAC,MAAK,MAAK,EAAE,WAAW,cAAc,CAAC,GACnE,KAAK,OAAO,SAAS,MAAuB,EAAE,UAAU,IAAI,KAAK,aAAa,CAAC;EAGjF,KAAK,gBAAgB;CACvB;CAEA,SAAS;EACP,MAAM,mBAAmB,IAAI;;iBAEhB,KAAK,oBAAoB;mBACvB,KAAK,sBAAsB;6BACjB,SAAS;GAC5B,UAAU,KAAK;GACf,QAAQ,KAAK;EACf,CAAC,EAAE;wBACa,KAAK,OAAO;wBACZ,KAAK,YAAY;uBAClB,KAAK,OAAO;qBACd,UAAU,KAAK,SAAS,EAAE;aAClC,KAAK,UAAU;oBACR,KAAK,SAAS;wBACV,KAAK,WAAW,SAAS,QAAQ;;;;;;;;sCAQnB,KAAK,YAAY;qDACF,KAAK,UAAU;8CACtB,KAAK,kBAAkB;;;;EAKjE,MAAM,iBAAiB,IAAI;0BACL,KAAK,kBAAkB;;EAE7C,OAAO,IAAI;iDACkC,CAAC,KAAK,OAAO,IAAI,KAAK,SAAS,iBAAiB,iBAAiB;;CAEhH;AACF;AAtOG,WAAA,CAAA,MAAM,eAAe,CAAA,GAAA,gBAAA,WAAA,QAAA,KAAA,CAAA;AAErB,WAAA,CAAA,MAAM,cAAc,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIpB,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAMzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAMzC,WAAA,CAAA,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,gBAAA,WAAA,aAAA,KAAA,CAAA;AAGzB,WAAA,CAAA,MAAM,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAuGN,WAAA,CAAA,MAAM,UAAU,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,qBAAA,IAAA;AAqC9C,WAAA,CAAA,sBAAsB,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAsEzB,oBAAoB,gBAAgB;CAClC,WAAW,CACT;EAAE,QAAQ;EAAK,SAAS;CAAI,GAC5B;EAAE,QAAQ;EAAQ,SAAS;CAAI,CACjC;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAc;AAClD,CAAC;AAED,oBAAoB,gBAAgB;CAClC,WAAW,CACT;EAAE,QAAQ;EAAQ,SAAS;CAAI,GAC/B;EAAE,QAAQ;EAAK,SAAS;CAAI,CAC9B;CACA,SAAS;EAAE,UAAU;EAAK,QAAQ;CAAc;AAClD,CAAC"}

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

@@ -37,7 +37,7 @@ var SgdsSidenavLink = class extends require_sgds_element.default {
 		}
 	}
 	render() {
-		return lit.html` <slot @slotchange=${this._handleSlotChange}></slot> `;
+		return lit.html`<div class="sidenav-link"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 require_decorate.default([(0, lit_decorators_js.property)({

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-link.cjs.js","names":["SgdsElement","sidenavLinkStyle","property","queryAssignedElements","watch"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n */\nexport class SgdsSidenavLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavLinkStyle];\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private _anchor: Array<HTMLAnchorElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    if (!this.disabled) {\n      this._anchor[0].removeAttribute(\"tabindex\");\n    }\n  }\n\n  _handleSlotChange() {\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    /** If link is disabled, set tabindex of anchor to -1 */\n    if (this.disabled) {\n      this._anchor[0].setAttribute(\"tabindex\", \"-1\");\n      this._anchor[0].removeAttribute(\"href\");\n      this._anchor[0].setAttribute(\"role\", \"link\");\n    }\n  }\n  render() {\n    return html` <slot @slotchange=${this._handleSlotChange}></slot> `;\n  }\n}\n\nexport default SgdsSidenavLink;\n"],"mappings":";;;;;;;;;;;AASA,IAAa,kBAAb,cAAqCA,qBAAAA,QAAY;;;EAItC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EAPK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,qBAAAA,OAAgB;;CAYxD,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;EACrD,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;EAEhE,IAAI,CAAC,KAAK,UACR,KAAK,QAAQ,EAAE,CAAC,gBAAgB,UAAU;CAE9C;CAEA,oBAAoB;EAClB,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;;EAGhE,IAAI,KAAK,UAAU;GACjB,KAAK,QAAQ,EAAE,CAAC,aAAa,YAAY,IAAI;GAC7C,KAAK,QAAQ,EAAE,CAAC,gBAAgB,MAAM;GACtC,KAAK,QAAQ,EAAE,CAAC,aAAa,QAAQ,MAAM;EAC7C;CACF;CACA,SAAS;EACP,OAAO,IAAA,IAAI,sBAAsB,KAAK,kBAAkB;CAC1D;AACF;AAtCGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,sBAAAA,CAAsB,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAQvCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-sidenav-link.cjs.js","names":["SgdsElement","sidenavLinkStyle","property","queryAssignedElements","watch"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n */\nexport class SgdsSidenavLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavLinkStyle];\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private _anchor: Array<HTMLAnchorElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    if (!this.disabled) {\n      this._anchor[0].removeAttribute(\"tabindex\");\n    }\n  }\n\n  _handleSlotChange() {\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    /** If link is disabled, set tabindex of anchor to -1 */\n    if (this.disabled) {\n      this._anchor[0].setAttribute(\"tabindex\", \"-1\");\n      this._anchor[0].removeAttribute(\"href\");\n      this._anchor[0].setAttribute(\"role\", \"link\");\n    }\n  }\n  render() {\n    return html`<div class=\"sidenav-link\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsSidenavLink;\n"],"mappings":";;;;;;;;;;;AASA,IAAa,kBAAb,cAAqCA,qBAAAA,QAAY;;;EAItC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EAPK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,qBAAAA,OAAgB;;CAYxD,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;EACrD,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;EAEhE,IAAI,CAAC,KAAK,UACR,KAAK,QAAQ,EAAE,CAAC,gBAAgB,UAAU;CAE9C;CAEA,oBAAoB;EAClB,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;;EAGhE,IAAI,KAAK,UAAU;GACjB,KAAK,QAAQ,EAAE,CAAC,aAAa,YAAY,IAAI;GAC7C,KAAK,QAAQ,EAAE,CAAC,gBAAgB,MAAM;GACtC,KAAK,QAAQ,EAAE,CAAC,aAAa,QAAQ,MAAM;EAC7C;CACF;CACA,SAAS;EACP,OAAO,IAAA,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AAtCGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,sBAAAA,CAAsB,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAQvCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

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

@@ -37,7 +37,7 @@ var SgdsSidenavLink = class extends SgdsElement {
 		}
 	}
 	render() {
-		return html` <slot @slotchange=${this._handleSlotChange}></slot> `;
+		return html`<div class="sidenav-link"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 __decorate([property({

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

@@ -1 +1 @@
-{"version":3,"file":"sgds-sidenav-link.js","names":["sidenavLinkStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n */\nexport class SgdsSidenavLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavLinkStyle];\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private _anchor: Array<HTMLAnchorElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    if (!this.disabled) {\n      this._anchor[0].removeAttribute(\"tabindex\");\n    }\n  }\n\n  _handleSlotChange() {\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    /** If link is disabled, set tabindex of anchor to -1 */\n    if (this.disabled) {\n      this._anchor[0].setAttribute(\"tabindex\", \"-1\");\n      this._anchor[0].removeAttribute(\"href\");\n      this._anchor[0].setAttribute(\"role\", \"link\");\n    }\n  }\n  render() {\n    return html` <slot @slotchange=${this._handleSlotChange}></slot> `;\n  }\n}\n\nexport default SgdsSidenavLink;\n"],"mappings":";;;;;;;;;;;AASA,IAAa,kBAAb,cAAqC,YAAY;;;EAItC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EAPK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAYxD,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;EACrD,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;EAEhE,IAAI,CAAC,KAAK,UACR,KAAK,QAAQ,EAAE,CAAC,gBAAgB,UAAU;CAE9C;CAEA,oBAAoB;EAClB,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;;EAGhE,IAAI,KAAK,UAAU;GACjB,KAAK,QAAQ,EAAE,CAAC,aAAa,YAAY,IAAI;GAC7C,KAAK,QAAQ,EAAE,CAAC,gBAAgB,MAAM;GACtC,KAAK,QAAQ,EAAE,CAAC,aAAa,QAAQ,MAAM;EAC7C;CACF;CACA,SAAS;EACP,OAAO,IAAI,sBAAsB,KAAK,kBAAkB;CAC1D;AACF;AAtCG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAQvC,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-sidenav-link.js","names":["sidenavLinkStyle"],"sources":["../../../../src/components/Sidenav/sgds-sidenav-link.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport { watch } from \"../../utils/watch\";\nimport sidenavLinkStyle from \"./sidenav-link.css\";\n\n/**\n * @slot default - slot for label of anchor tag.\n */\nexport class SgdsSidenavLink extends SgdsElement {\n  static styles = [...SgdsElement.styles, sidenavLinkStyle];\n  /** when true, sets the active stylings of .nav-link */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsMainnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @queryAssignedElements({ flatten: true })\n  private _anchor: Array<HTMLAnchorElement>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    if (!this.disabled) {\n      this._anchor[0].removeAttribute(\"tabindex\");\n    }\n  }\n\n  _handleSlotChange() {\n    this._anchor[0].setAttribute(\"aria-disabled\", `${this.disabled}`);\n\n    /** If link is disabled, set tabindex of anchor to -1 */\n    if (this.disabled) {\n      this._anchor[0].setAttribute(\"tabindex\", \"-1\");\n      this._anchor[0].removeAttribute(\"href\");\n      this._anchor[0].setAttribute(\"role\", \"link\");\n    }\n  }\n  render() {\n    return html`<div class=\"sidenav-link\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsSidenavLink;\n"],"mappings":";;;;;;;;;;;AASA,IAAa,kBAAb,cAAqC,YAAY;;;EAItC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EAPK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAgB;;CAYxD,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;EACrD,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;EAEhE,IAAI,CAAC,KAAK,UACR,KAAK,QAAQ,EAAE,CAAC,gBAAgB,UAAU;CAE9C;CAEA,oBAAoB;EAClB,KAAK,QAAQ,EAAE,CAAC,aAAa,iBAAiB,GAAG,KAAK,UAAU;;EAGhE,IAAI,KAAK,UAAU;GACjB,KAAK,QAAQ,EAAE,CAAC,aAAa,YAAY,IAAI;GAC7C,KAAK,QAAQ,EAAE,CAAC,gBAAgB,MAAM;GACtC,KAAK,QAAQ,EAAE,CAAC,aAAa,QAAQ,MAAM;EAC7C;CACF;CACA,SAAS;EACP,OAAO,IAAI,+CAA+C,KAAK,kBAAkB;CACnF;AACF;AAtCG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,sBAAsB,EAAE,SAAS,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,WAAA,KAAA,CAAA;AAQvC,WAAA,CAAA,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,gBAAA,WAAA,mBAAA,IAAA"}

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

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Sidenav/sidenav-item.css
-var css_248z = require("lit").css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-interactive-border-radius);color:inherit!important;display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}.no-menu-default::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = require("lit").css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-wrapper{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs))}.no-menu-wrapper:hover{background-color:var(--sgds-bg-translucent-subtle)}.no-menu-wrapper:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-wrapper{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)}:host([class^=first-level][disabled]) .no-menu-wrapper{opacity:var(--sgds-opacity-40);pointer-events:none}.no-menu-default::slotted(a){color:inherit!important;font-weight:inherit!important;text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){outline:none}`;
 //#endregion
 exports.default = css_248z;
 

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.cjs.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  line-height: var(--sgds-line-height-xs) !important;\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold) !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.no-menu-default::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-default::slotted(a) {\n  color: var(--sgds-primary-color-emphasis) !important;\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-default::slotted(a) {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"sidenav-item.cjs.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* No-menu (link type) — wrapper styles (protected in shadow DOM) */\n\n.no-menu-wrapper {\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--sgds-font-weight-semibold);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n}\n\n.no-menu-wrapper:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.no-menu-wrapper:focus-within {\n  background-color: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-wrapper {\n  color: var(--sgds-primary-color-emphasis);\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-wrapper {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n/* No-menu (link type) — anchor-specific styles */\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-weight: inherit !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

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

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Sidenav/sidenav-item.css
-var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-default::slotted(a){background:0;border:0;border-radius:var(--sgds-interactive-border-radius);color:inherit!important;display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold)!important;gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}.no-menu-default::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-default::slotted(a){background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)!important}:host([class^=first-level][disabled]) .no-menu-default::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}`;
+var css_248z = css`:host([class^=second-level]) .sidenav-btn{font-weight:var(--sgds-font-weight-regular);padding-left:var(--sgds-padding-3-xl)}button{all:unset}.sidenav-btn{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));text-align:initial;width:100%;.caret-icon,slot[name=caret-icon]::slotted(*){margin-bottom:auto;margin-left:auto;transform:rotate(180deg);transition:all .3s ease-in-out}}.sidenav-btn:hover:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn.active{color:var(--sgds-color-default)}.sidenav-btn.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.sidenav-btn:not(.active){.caret-icon,slot[name=caret-icon]::slotted(*){transform:rotate(0deg)}}.sidenav-btn:focus-visible:not(.disabled){background-color:var(--sgds-bg-translucent-subtle)}.sidenav-btn:focus-visible:not(.disabled){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.no-menu-wrapper{background:0;border:0;border-radius:var(--sgds-interactive-border-radius);display:flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--sgds-font-weight-semibold);gap:var(--sgds-gap-xs);line-height:var(--sgds-line-height-xs);padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs))}.no-menu-wrapper:hover{background-color:var(--sgds-bg-translucent-subtle)}.no-menu-wrapper:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([class^=first-level][active]) .no-menu-wrapper{background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis)}:host([class^=first-level][disabled]) .no-menu-wrapper{opacity:var(--sgds-opacity-40);pointer-events:none}.no-menu-default::slotted(a){color:inherit!important;font-weight:inherit!important;text-decoration:none!important}.no-menu-default::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"sidenav-item.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  line-height: var(--sgds-line-height-xs) !important;\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold) !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.no-menu-default::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-default::slotted(a) {\n  color: var(--sgds-primary-color-emphasis) !important;\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-default::slotted(a) {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"sidenav-item.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-item.css"],"sourcesContent":[":host([class^=\"second-level\"]) .sidenav-btn {\n  padding-left: var(--sgds-padding-3-xl);\n  font-weight: var(--sgds-font-weight-regular);\n}\n\nbutton {\n  all: unset;\n}\n.sidenav-btn {\n  width: 100%;\n  text-align: initial;\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n  font-weight: var(--sgds-font-weight-semibold);\n\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    margin-left: auto;\n    margin-bottom: auto;\n    transition: all 0.3s ease-in-out;\n    transform: rotate(180deg);\n  }\n}\n.sidenav-btn:hover:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn.active {\n  color: var(--sgds-color-default);\n}\n.sidenav-btn.disabled {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n.sidenav-btn:not(.active) {\n  .caret-icon,\n  slot[name=\"caret-icon\"]::slotted(*) {\n    transform: rotate(0deg);\n  }\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n.sidenav-btn:focus-visible:not(.disabled) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n/* No-menu (link type) — wrapper styles (protected in shadow DOM) */\n\n.no-menu-wrapper {\n  line-height: var(--sgds-line-height-xs);\n  font-size: var(--sgds-font-size-label-md);\n  font-weight: var(--sgds-font-weight-semibold);\n  border: 0;\n  background: 0;\n  padding: var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm)\n    calc(var(--sgds-padding-sm) + var(--sgds-padding-2-xs));\n  border-radius: var(--sgds-interactive-border-radius);\n  display: flex;\n  gap: var(--sgds-gap-xs);\n}\n\n.no-menu-wrapper:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.no-menu-wrapper:focus-within {\n  background-color: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([class^=\"first-level\"][active]) .no-menu-wrapper {\n  color: var(--sgds-primary-color-emphasis);\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host([class^=\"first-level\"][disabled]) .no-menu-wrapper {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n/* No-menu (link type) — anchor-specific styles */\n\n.no-menu-default::slotted(a) {\n  text-decoration: none !important;\n  color: inherit !important;\n  font-weight: inherit !important;\n}\n\n.no-menu-default::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

package/react/components/Sidenav/sidenav-link.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Sidenav/sidenav-link.css
-var css_248z = require("lit").css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-interactive-border-radius);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}:host([disabled]) ::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
+var css_248z = require("lit").css`.sidenav-link{border-radius:var(--sgds-interactive-border-radius);display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl)}:host([class^=third-level]) .sidenav-link{padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}:host([active]) .sidenav-link{background-color:var(--sgds-primary-surface-translucent)}:host(:not([disabled]):not([active])) .sidenav-link:hover{background-color:var(--sgds-bg-translucent-subtle)}.sidenav-link:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([active]) .sidenav-link:focus-within{background-color:var(--sgds-primary-bg-translucent)}:host([disabled]) .sidenav-link{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-default));text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Sidenav/sidenav-link.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-link.cjs.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-link.css"],"sourcesContent":[":host([class^=\"third-level\"]) ::slotted(a) {\n  padding-left: calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl));\n}\n\n::slotted(a) {\n  display: block;\n  --sgds-link-color-default: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-default));\n  padding-top: var(--sgds-padding-sm);\n  padding-bottom: var(--sgds-padding-sm);\n  padding-left: var(--sgds-padding-3-xl);\n  padding-right: var(--sgds-padding-sm);\n  border-radius: var(--sgds-interactive-border-radius);\n  text-decoration: none !important;\n}\n\n:host([active]) ::slotted(a) {\n  --sgds-link-color-default: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-default));\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-emphasis));\n}\n\n:host([active]) ::slotted(a:hover),\n:host([active]) ::slotted(a:focus),\n:host([active]) ::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-emphasis));\n}\n\n:host([disabled]) ::slotted(a) {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n:host([disabled]) ::slotted(a:focus-visible) {\n  outline: 0;\n}\n\n::slotted(a:focus-visible) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([active]) ::slotted(a:focus-visible) {\n  background-color: var(--sgds-primary-bg-translucent);\n}\n"],"mappings":""}
+{"version":3,"file":"sidenav-link.cjs.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-link.css"],"sourcesContent":["/* ===== .sidenav-link (inner shadow DOM — protected from external CSS) ===== */\n\n.sidenav-link {\n  display: block;\n  padding-top: var(--sgds-padding-sm);\n  padding-bottom: var(--sgds-padding-sm);\n  padding-left: var(--sgds-padding-3-xl);\n  padding-right: var(--sgds-padding-sm);\n  border-radius: var(--sgds-interactive-border-radius);\n}\n\n:host([class^=\"third-level\"]) .sidenav-link {\n  padding-left: calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl));\n}\n\n:host([active]) .sidenav-link {\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host(:not([disabled]):not([active])) .sidenav-link:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.sidenav-link:focus-within {\n  background-color: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([active]) .sidenav-link:focus-within {\n  background-color: var(--sgds-primary-bg-translucent);\n}\n\n:host([disabled]) .sidenav-link {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n/* ===== ::slotted (light DOM — anchor-specific styles) ===== */\n\n::slotted(a) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-default));\n  text-decoration: none !important;\n}\n\n:host([active]) ::slotted(a) {\n  --sgds-link-color-default: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-default));\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-emphasis));\n}\n\n:host([active]) ::slotted(a:hover),\n:host([active]) ::slotted(a:focus),\n:host([active]) ::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-emphasis));\n}\n\n::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

package/react/components/Sidenav/sidenav-link.js

@@ -1,7 +1,7 @@
 "use client";
 import { css } from "lit";
 //#region src/components/Sidenav/sidenav-link.css
-var css_248z = css`:host([class^=third-level]) ::slotted(a){padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);border-radius:var(--sgds-interactive-border-radius);color:var(--sgds-color-default,var(--sgds-link-color-default));display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl);text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);background-color:var(--sgds-primary-surface-translucent);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}:host(:not([disabled]):not([active])) ::slotted(a:hover){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}:host([disabled]) ::slotted(a){opacity:var(--sgds-opacity-40);pointer-events:none}:host([disabled]) ::slotted(a:focus-visible){outline:0}::slotted(a:focus-visible){background-color:var(--sgds-bg-translucent-subtle)}::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([active]) ::slotted(a:focus-visible){background-color:var(--sgds-primary-bg-translucent)}`;
+var css_248z = css`.sidenav-link{border-radius:var(--sgds-interactive-border-radius);display:block;padding:var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-sm) var(--sgds-padding-3-xl)}:host([class^=third-level]) .sidenav-link{padding-left:calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl))}:host([active]) .sidenav-link{background-color:var(--sgds-primary-surface-translucent)}:host(:not([disabled]):not([active])) .sidenav-link:hover{background-color:var(--sgds-bg-translucent-subtle)}.sidenav-link:focus-within{background-color:var(--sgds-bg-translucent-subtle);outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([active]) .sidenav-link:focus-within{background-color:var(--sgds-primary-bg-translucent)}:host([disabled]) .sidenav-link{opacity:var(--sgds-opacity-40);pointer-events:none}::slotted(a){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-default));text-decoration:none!important}:host([active]) ::slotted(a){--sgds-link-color-default:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-default))}::slotted(a:focus),::slotted(a:focus-visible),::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-color-default,var(--sgds-link-color-emphasis))}:host([active]) ::slotted(a:focus),:host([active]) ::slotted(a:focus-visible),:host([active]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-emphasis);color:var(--sgds-primary-color-emphasis,var(--sgds-link-color-emphasis))}::slotted(a:focus-visible){outline:none}`;
 //#endregion
 export { css_248z as default };
 

package/react/components/Sidenav/sidenav-link.js.map

@@ -1 +1 @@
-{"version":3,"file":"sidenav-link.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-link.css"],"sourcesContent":[":host([class^=\"third-level\"]) ::slotted(a) {\n  padding-left: calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl));\n}\n\n::slotted(a) {\n  display: block;\n  --sgds-link-color-default: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-default));\n  padding-top: var(--sgds-padding-sm);\n  padding-bottom: var(--sgds-padding-sm);\n  padding-left: var(--sgds-padding-3-xl);\n  padding-right: var(--sgds-padding-sm);\n  border-radius: var(--sgds-interactive-border-radius);\n  text-decoration: none !important;\n}\n\n:host([active]) ::slotted(a) {\n  --sgds-link-color-default: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-default));\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host(:not([disabled]):not([active])) ::slotted(a:hover) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-emphasis));\n}\n\n:host([active]) ::slotted(a:hover),\n:host([active]) ::slotted(a:focus),\n:host([active]) ::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-emphasis));\n}\n\n:host([disabled]) ::slotted(a) {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n:host([disabled]) ::slotted(a:focus-visible) {\n  outline: 0;\n}\n\n::slotted(a:focus-visible) {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n::slotted(a:focus-visible) {\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([active]) ::slotted(a:focus-visible) {\n  background-color: var(--sgds-primary-bg-translucent);\n}\n"],"mappings":""}
+{"version":3,"file":"sidenav-link.js","names":[],"sources":["../../../../src/components/Sidenav/sidenav-link.css"],"sourcesContent":["/* ===== .sidenav-link (inner shadow DOM — protected from external CSS) ===== */\n\n.sidenav-link {\n  display: block;\n  padding-top: var(--sgds-padding-sm);\n  padding-bottom: var(--sgds-padding-sm);\n  padding-left: var(--sgds-padding-3-xl);\n  padding-right: var(--sgds-padding-sm);\n  border-radius: var(--sgds-interactive-border-radius);\n}\n\n:host([class^=\"third-level\"]) .sidenav-link {\n  padding-left: calc(var(--sgds-padding-xl) + var(--sgds-padding-3-xl));\n}\n\n:host([active]) .sidenav-link {\n  background-color: var(--sgds-primary-surface-translucent);\n}\n\n:host(:not([disabled]):not([active])) .sidenav-link:hover {\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n.sidenav-link:focus-within {\n  background-color: var(--sgds-bg-translucent-subtle);\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([active]) .sidenav-link:focus-within {\n  background-color: var(--sgds-primary-bg-translucent);\n}\n\n:host([disabled]) .sidenav-link {\n  opacity: var(--sgds-opacity-40);\n  pointer-events: none;\n}\n\n/* ===== ::slotted (light DOM — anchor-specific styles) ===== */\n\n::slotted(a) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-default));\n  text-decoration: none !important;\n}\n\n:host([active]) ::slotted(a) {\n  --sgds-link-color-default: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-default));\n}\n\n::slotted(a:hover),\n::slotted(a:focus),\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-color-default, var(--sgds-link-color-emphasis));\n}\n\n:host([active]) ::slotted(a:hover),\n:host([active]) ::slotted(a:focus),\n:host([active]) ::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-emphasis);\n  color: var(--sgds-primary-color-emphasis, var(--sgds-link-color-emphasis));\n}\n\n::slotted(a:focus-visible) {\n  outline: none;\n}\n"],"mappings":""}

package/react/components/Subnav/sgds-subnav-item.cjs.js

@@ -46,7 +46,7 @@ var SgdsSubnavItem = class extends require_sgds_element.default {
 		}
 	}
 	render() {
-		return lit.html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return lit.html`<div class="subnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 require_decorate.default([(0, lit_decorators_js.property)({

package/react/components/Subnav/sgds-subnav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-subnav-item.cjs.js","names":["SgdsElement","subnavItemStyle","property","watch"],"sources":["../../../../src/components/Subnav/sgds-subnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport subnavItemStyle from \"./subnav-item.css\";\n\n/**\n * @slot default - slot for SgdsSubnavItem element.\n *\n *  */\nexport class SgdsSubnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, subnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsSubnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-subnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsSubnavItem;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,iBAAb,cAAoCA,qBAAAA,QAAY;;;EAKrC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,oBAAAA,OAAe;;CAUvD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,uDAAuD;GACrE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;GACtC;EACF;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI,qBAAqB,KAAK,kBAAkB;CACzD;AACF;AApDGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,UAAU,CAAA,GAAA,eAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-subnav-item.cjs.js","names":["SgdsElement","subnavItemStyle","property","watch"],"sources":["../../../../src/components/Subnav/sgds-subnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport subnavItemStyle from \"./subnav-item.css\";\n\n/**\n * @slot default - slot for SgdsSubnavItem element.\n *\n *  */\nexport class SgdsSubnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, subnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsSubnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-subnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  }\n\n  render() {\n    return html`<div class=\"subnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsSubnavItem;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,iBAAb,cAAoCA,qBAAAA,QAAY;;;EAKrC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAGA,qBAAAA,QAAY,QAAQC,oBAAAA,OAAe;;CAUvD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,uDAAuD;GACrE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;GACtC;EACF;CACF;CAEA,SAAS;EACP,OAAO,IAAA,IAAI,8CAA8C,KAAK,kBAAkB;CAClF;AACF;AApDGC,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIzCA,iBAAAA,QAAAA,EAAAA,GAAAA,kBAAAA,SAAAA,CAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzCC,iBAAAA,QAAAA,CAAAA,cAAAA,MAAM,UAAU,CAAA,GAAA,eAAA,WAAA,mBAAA,IAAA"}

package/react/components/Subnav/sgds-subnav-item.js

@@ -46,7 +46,7 @@ var SgdsSubnavItem = class extends SgdsElement {
 		}
 	}
 	render() {
-		return html`<slot @slotchange=${this._handleSlotChange}></slot>`;
+		return html`<div class="subnav-item"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
 	}
 };
 __decorate([property({

package/react/components/Subnav/sgds-subnav-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-subnav-item.js","names":["subnavItemStyle"],"sources":["../../../../src/components/Subnav/sgds-subnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport subnavItemStyle from \"./subnav-item.css\";\n\n/**\n * @slot default - slot for SgdsSubnavItem element.\n *\n *  */\nexport class SgdsSubnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, subnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsSubnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-subnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  }\n\n  render() {\n    return html`<slot @slotchange=${this._handleSlotChange}></slot>`;\n  }\n}\n\nexport default SgdsSubnavItem;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,iBAAb,cAAoC,YAAY;;;EAKrC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;CAUvD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,uDAAuD;GACrE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;GACtC;EACF;CACF;CAEA,SAAS;EACP,OAAO,IAAI,qBAAqB,KAAK,kBAAkB;CACzD;AACF;AApDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,eAAA,WAAA,mBAAA,IAAA"}
+{"version":3,"file":"sgds-subnav-item.js","names":["subnavItemStyle"],"sources":["../../../../src/components/Subnav/sgds-subnav-item.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsElement from \"../../base/sgds-element\";\nimport subnavItemStyle from \"./subnav-item.css\";\n\n/**\n * @slot default - slot for SgdsSubnavItem element.\n *\n *  */\nexport class SgdsSubnavItem extends SgdsElement {\n  static styles = [...SgdsElement.styles, subnavItemStyle];\n\n  /** when true, sets the active stylings of the navigation item */\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  /** Disables the SgdsSubnavItem */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @watch(\"disabled\")\n  _handleDisabled() {\n    this.setAttribute(\"aria-disabled\", `${this.disabled}`);\n  }\n\n  private _handleSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    const assignedElements = slot.assignedElements({ flatten: true });\n    const anchorItems = assignedElements.filter(\n      item => item.tagName.toLowerCase() === \"a\" || item.tagName.toLowerCase() === \"sgds-link\"\n    );\n\n    if (anchorItems.length > 1) {\n      console.error(\"More than one anchor tag is added to sgds-subnav-item\");\n      return;\n    }\n\n    if (anchorItems.length === 0) {\n      const nodes = slot.assignedNodes({ flatten: true });\n      nodes.forEach(node => {\n        if (node.nodeType === Node.TEXT_NODE) {\n          const hyperlink = document.createElement(\"a\");\n          hyperlink.textContent = node.textContent;\n          node.parentNode.replaceChild(hyperlink, node);\n        }\n      });\n    }\n\n    if (anchorItems.length === 1) {\n      const anchor = anchorItems[0] as HTMLAnchorElement;\n\n      if (this.active) {\n        anchor.setAttribute(\"aria-current\", \"true\");\n      }\n\n      if (this.disabled) {\n        anchor.setAttribute(\"href\", \"javascript:void(0)\");\n        anchor.setAttribute(\"tabindex\", \"-1\");\n      }\n    }\n  }\n\n  render() {\n    return html`<div class=\"subnav-item\"><slot @slotchange=${this._handleSlotChange}></slot></div>`;\n  }\n}\n\nexport default SgdsSubnavItem;\n"],"mappings":";;;;;;;;;;;;AAUA,IAAa,iBAAb,cAAoC,YAAY;;;EAKrC,KAAA,SAAA;EAIE,KAAA,WAAA;;;EARK,KAAA,SAAA,CAAC,GAAG,YAAY,QAAQA,QAAe;;CAUvD,kBACkB;EAChB,KAAK,aAAa,iBAAiB,GAAG,KAAK,UAAU;CACvD;CAEA,kBAA0B,GAAU;EAClC,MAAM,OAAO,EAAE;EAEf,MAAM,cADmB,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAC5B,CAAC,CAAC,QACnC,SAAQ,KAAK,QAAQ,YAAY,MAAM,OAAO,KAAK,QAAQ,YAAY,MAAM,WAC/E;EAEA,IAAI,YAAY,SAAS,GAAG;GAC1B,QAAQ,MAAM,uDAAuD;GACrE;EACF;EAEA,IAAI,YAAY,WAAW,GAEzB,KADmB,cAAc,EAAE,SAAS,KAAK,CAC7C,CAAC,CAAC,SAAQ,SAAQ;GACpB,IAAI,KAAK,aAAa,KAAK,WAAW;IACpC,MAAM,YAAY,SAAS,cAAc,GAAG;IAC5C,UAAU,cAAc,KAAK;IAC7B,KAAK,WAAW,aAAa,WAAW,IAAI;GAC9C;EACF,CAAC;EAGH,IAAI,YAAY,WAAW,GAAG;GAC5B,MAAM,SAAS,YAAY;GAE3B,IAAI,KAAK,QACP,OAAO,aAAa,gBAAgB,MAAM;GAG5C,IAAI,KAAK,UAAU;IACjB,OAAO,aAAa,QAAQ,oBAAoB;IAChD,OAAO,aAAa,YAAY,IAAI;GACtC;EACF;CACF;CAEA,SAAS;EACP,OAAO,IAAI,8CAA8C,KAAK,kBAAkB;CAClF;AACF;AApDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,UAAA,KAAA,CAAA;AAIzC,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,eAAA,WAAA,YAAA,KAAA,CAAA;AAGzC,WAAA,CAAA,MAAM,UAAU,CAAA,GAAA,eAAA,WAAA,mBAAA,IAAA"}

package/react/components/Subnav/subnav-item.cjs.js

@@ -1,6 +1,6 @@
 "use client";
 //#region src/components/Subnav/subnav-item.css
-var css_248z = require("lit").css`:host(:not([disabled])[active]:not([active=false])) ::slotted(*){background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);box-sizing:border-box;color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;display:inline-block;font-size:var(--sgds-font-size-label-sm)!important;padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-decoration:none!important;white-space:nowrap;width:100%}::slotted(*):after{height:var(--sgds-icon-size-md)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-md)!important}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed;opacity:var(--sgds-opacity-40)}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}::slotted(*){border-bottom:var(--sgds-border-width-2) solid transparent;padding:var(--sgds-padding-lg) var(--sgds-padding-none)}}`;
+var css_248z = require("lit").css`.subnav-item{box-sizing:border-box;display:inline-block;font-size:var(--sgds-font-size-label-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);white-space:nowrap;width:100%}:host(:not([disabled])[active]:not([active=false])) .subnav-item{background-color:var(--sgds-bg-translucent-subtle);border-bottom:none}:host([disabled]) .subnav-item{opacity:var(--sgds-opacity-40)}@media screen and (min-width:1024px){.subnav-item{border-bottom:var(--sgds-border-width-2) solid transparent;padding:var(--sgds-padding-lg) var(--sgds-padding-none)}:host(:not([disabled])[active]:not([active=false])) .subnav-item{background-color:inherit;border-bottom:var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default)}}::slotted(*){--sgds-link-color-default:var(--sgds-color-default);color:var(--sgds-link-color-default,var(--sgds-color-default));cursor:pointer;text-decoration:none!important}::slotted(*):after{height:var(--sgds-icon-size-md)!important;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%230e0e0e' fill-rule='evenodd' d='M8.145 3.667h.021a.5.5 0 1 1 0 1c-.708 0-1.209 0-1.6.032-.387.032-.622.091-.807.186a2 2 0 0 0-.875.874c-.094.185-.154.42-.185.806-.032.392-.032.893-.032 1.602v3.666c0 .709 0 1.21.032 1.602.031.386.091.621.185.806a2 2 0 0 0 .875.874c.185.095.42.154.806.186.392.032.893.032 1.601.032h3.667c.708 0 1.21 0 1.601-.032.386-.032.622-.091.807-.186a2 2 0 0 0 .874-.874c.095-.185.154-.42.186-.806.032-.392.032-.893.032-1.602a.5.5 0 1 1 1 0v.022c0 .682 0 1.224-.036 1.661-.036.448-.113.83-.29 1.18a3 3 0 0 1-1.312 1.31c-.35.178-.731.255-1.18.292-.436.035-.978.035-1.66.035h-3.71c-.682 0-1.224 0-1.661-.035-.448-.037-.83-.113-1.18-.292a3 3 0 0 1-1.31-1.31c-.179-.35-.255-.732-.292-1.18-.035-.437-.035-.98-.035-1.66V8.144c0-.682 0-1.224.035-1.661.037-.448.113-.83.291-1.18a3 3 0 0 1 1.312-1.31c.35-.178.731-.255 1.179-.292.437-.035.98-.035 1.66-.035m2.188.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v5a.5.5 0 0 1-1 0V5.374l-4.98 4.98a.5.5 0 0 1-.707-.708l4.98-4.98h-3.793a.5.5 0 0 1-.5-.5' clip-rule='evenodd'/%3E%3C/svg%3E")!important;width:var(--sgds-icon-size-md)!important}:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}:host([disabled]) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-color-default))}:host(:not([disabled])) ::slotted(a:hover){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default))}::slotted(a:focus-visible){--sgds-link-color-emphasis:var(--sgds-primary-color-default);color:var(--sgds-link-color-emphasis,var(--sgds-primary-color-default));outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host([disabled]) ::slotted(*){cursor:not-allowed}@media screen and (min-width:1024px){:host(:not([disabled])[active]:not([active=false])) ::slotted(*){--sgds-link-color-default:var(--sgds-primary-color-default);color:var(--sgds-link-color-default,var(--sgds-primary-color-default))}}`;
 //#endregion
 exports.default = css_248z;
 

package/react/components/Subnav/subnav-item.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"subnav-item.cjs.js","names":[],"sources":["../../../../src/components/Subnav/subnav-item.css"],"sourcesContent":[":host(:not([disabled])[active]:not([active=\"false\"])) ::slotted(*) {\n  border-bottom: none;\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  display: inline-block;\n  width: 100%;\n  text-decoration: none !important;\n  font-size: var(--sgds-font-size-label-sm) !important;\n  color: var(--sgds-link-color-default, var(--sgds-color-default));\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n  cursor: pointer;\n  box-sizing: border-box;\n  white-space: nowrap;\n}\n\n::slotted(*)::after {\n  width: var(--sgds-icon-size-md) !important;\n  height: var(--sgds-icon-size-md) !important;\n  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n  mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n}\n\n:host(:not([disabled])[active]:not([active=\"false\"])) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n}\n\n:host([disabled]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-link-color-emphasis, var(--sgds-color-default));\n}\n\n:host(:not([disabled])) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n}\n\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted(*) {\n  opacity: var(--sgds-opacity-40);\n  cursor: not-allowed;\n}\n\n@media screen and (min-width: 1024px) {\n  :host(:not([disabled])[active]:not([active=\"false\"])) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-primary-color-default);\n    color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n    border-bottom: var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);\n    background-color: inherit;\n  }\n\n  ::slotted(*) {\n    padding: var(--sgds-padding-lg) var(--sgds-padding-none);\n    border-bottom: var(--sgds-border-width-2) solid transparent;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"subnav-item.cjs.js","names":[],"sources":["../../../../src/components/Subnav/subnav-item.css"],"sourcesContent":["/* ===== .subnav-item (inner shadow DOM — protected from external CSS) ===== */\n\n.subnav-item {\n  display: inline-block;\n  width: 100%;\n  font-size: var(--sgds-font-size-label-sm);\n  padding: var(--sgds-padding-sm) var(--sgds-padding-lg);\n  box-sizing: border-box;\n  white-space: nowrap;\n}\n\n:host(:not([disabled])[active]:not([active=\"false\"])) .subnav-item {\n  border-bottom: none;\n  background-color: var(--sgds-bg-translucent-subtle);\n}\n\n:host([disabled]) .subnav-item {\n  opacity: var(--sgds-opacity-40);\n}\n\n@media screen and (min-width: 1024px) {\n  .subnav-item {\n    padding: var(--sgds-padding-lg) var(--sgds-padding-none);\n    border-bottom: var(--sgds-border-width-2) solid transparent;\n  }\n\n  :host(:not([disabled])[active]:not([active=\"false\"])) .subnav-item {\n    border-bottom: var(--sgds-border-width-2) solid var(--sgds-primary-border-color-default);\n    background-color: inherit;\n  }\n}\n\n/* ===== ::slotted (light DOM — anchor-specific styles) ===== */\n\n::slotted(*) {\n  --sgds-link-color-default: var(--sgds-color-default);\n  text-decoration: none !important;\n  color: var(--sgds-link-color-default, var(--sgds-color-default));\n  cursor: pointer;\n}\n\n::slotted(*)::after {\n  width: var(--sgds-icon-size-md) !important;\n  height: var(--sgds-icon-size-md) !important;\n  -webkit-mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n  mask-image: url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.14462 3.66667L8.1665 3.66667C8.44265 3.66667 8.6665 3.89053 8.6665 4.16667C8.6665 4.44281 8.44265 4.66667 8.1665 4.66667C7.45819 4.66667 6.95702 4.66706 6.56522 4.69907C6.17927 4.73061 5.94368 4.79032 5.75852 4.88466C5.3822 5.07641 5.07624 5.38237 4.88449 5.75869C4.79015 5.94385 4.73044 6.17943 4.6989 6.56539C4.66689 6.95719 4.6665 7.45836 4.6665 8.16667V11.8333C4.6665 12.5417 4.66689 13.0428 4.6989 13.4346C4.73044 13.8206 4.79015 14.0562 4.88449 14.2413C5.07624 14.6176 5.3822 14.9236 5.75852 15.1154C5.94368 15.2097 6.17927 15.2694 6.56522 15.3009C6.95702 15.333 7.45819 15.3333 8.1665 15.3333H11.8332C12.5415 15.3333 13.0427 15.333 13.4345 15.3009C13.8204 15.2694 14.056 15.2097 14.2412 15.1154C14.6175 14.9236 14.9234 14.6176 15.1152 14.2413C15.2095 14.0562 15.2692 13.8206 15.3008 13.4346C15.3328 13.0428 15.3332 12.5417 15.3332 11.8333C15.3332 11.5572 15.557 11.3333 15.8332 11.3333C16.1093 11.3333 16.3332 11.5572 16.3332 11.8333V11.8552C16.3332 12.5367 16.3332 13.0788 16.2974 13.5161C16.2609 13.9639 16.1843 14.3457 16.0062 14.6953C15.7186 15.2598 15.2596 15.7187 14.6951 16.0064C14.3455 16.1845 13.9637 16.261 13.5159 16.2976C13.0786 16.3333 12.5366 16.3333 11.855 16.3333H8.14464C7.46311 16.3333 6.92109 16.3333 6.48379 16.2976C6.03599 16.261 5.65416 16.1845 5.30453 16.0064C4.74005 15.7187 4.2811 15.2598 3.99348 14.6953C3.81534 14.3457 3.73881 13.9639 3.70223 13.5161C3.6665 13.0788 3.6665 12.5367 3.6665 11.8552V8.14479C3.6665 7.46327 3.6665 6.92125 3.70223 6.48396C3.73881 6.03616 3.81534 5.65432 3.99348 5.3047C4.2811 4.74021 4.74005 4.28127 5.30453 3.99365C5.65416 3.81551 6.03599 3.73898 6.48379 3.70239C6.92109 3.66666 7.4631 3.66667 8.14462 3.66667ZM10.3332 4.16668C10.3332 3.89054 10.557 3.66668 10.8332 3.66668H15.8332C16.1093 3.66668 16.3331 3.89054 16.3332 4.16668L16.3332 9.16668C16.3332 9.44282 16.1093 9.66668 15.8332 9.66668C15.557 9.66668 15.3332 9.44282 15.3332 9.16668L15.3332 5.37379L10.3534 10.3536C10.1581 10.5488 9.84155 10.5488 9.64628 10.3536C9.45102 10.1583 9.45102 9.84172 9.64628 9.64645L14.626 4.66668H10.8332C10.557 4.66668 10.3332 4.44282 10.3332 4.16668Z\" fill=\"%230E0E0E\"/></svg>') !important;\n}\n\n:host(:not([disabled])[active]:not([active=\"false\"])) ::slotted(*) {\n  --sgds-link-color-default: var(--sgds-primary-color-default);\n  color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n}\n\n:host([disabled]) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-color-default);\n  color: var(--sgds-link-color-emphasis, var(--sgds-color-default));\n}\n\n:host(:not([disabled])) ::slotted(a:hover) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n}\n\n::slotted(a:focus-visible) {\n  --sgds-link-color-emphasis: var(--sgds-primary-color-default);\n  color: var(--sgds-link-color-emphasis, var(--sgds-primary-color-default));\n  outline: var(--sgds-outline-focus);\n  outline-offset: var(--sgds-outline-offset-focus);\n}\n\n:host([disabled]) ::slotted(*) {\n  cursor: not-allowed;\n}\n\n@media screen and (min-width: 1024px) {\n  :host(:not([disabled])[active]:not([active=\"false\"])) ::slotted(*) {\n    --sgds-link-color-default: var(--sgds-primary-color-default);\n    color: var(--sgds-link-color-default, var(--sgds-primary-color-default));\n  }\n}\n"],"mappings":""}