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

package/components/Sidenav/sgds-sidenav-item.d.ts

@@ -33,6 +33,10 @@ export declare class SgdsSidenavItem extends SgdsElement {
      * Disables the SgdsSidenavItem
      */
     disabled: boolean;
+    /**
+     * Accessible label for the sidenav item's menu button. Forwarded to the button's aria-label attribute.
+     */
+    ariaLabel: string;
     private isLink;
     /**
      * @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

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

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

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

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

package/components/Subnav/index.umd.min.js

@@ -2263,7 +2263,7 @@ const ke=1;class Ee{constructor(e){}get _$isConnected(){return this._$parent._$i
       clip-rule="evenodd"
     />
   </svg>
-`};var rt=c`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class dt extends Se{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=nt[e];if(t)return t;console.warn(`Icon not found: ${e}`)}updated(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("svg");t&&(this.ariaLabel?(t.removeAttribute("aria-hidden"),t.setAttribute("aria-label",this.ariaLabel)):(t.removeAttribute("aria-label"),t.setAttribute("aria-hidden","true")))}render(){const e=this._getIconByName(this.name);return e||le}}dt.styles=[...Se.styles,rt],e([_e({type:String,reflect:!0})],dt.prototype,"name",void 0),e([_e({type:String,reflect:!0})],dt.prototype,"size",void 0),e([_e({type:String})],dt.prototype,"ariaLabel",void 0);var ht=c`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`,vt=c`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:var(--sgds-dimension-840)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:var(--sgds-dimension-888)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:var(--sgds-dimension-1024)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}`;class gt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}const pt=["Enter"," "];class ut extends Se{constructor(){super(...arguments),this.hasActionsSlot=!1,this.isCollapsed=!1,this.isMenuOpen=!1,this.hasSlotController=new gt(this,"actions"),this._handleResize=async()=>{this.isCollapsed=window.innerWidth<1024,await this.updateComplete,this.isCollapsed||(this.isMenuOpen=!1),this._updateMobileLayout()},this._updateMobileLayout=()=>{if(this.nav&&this.headerContainer&&this.mobileActions&&this.mobileNav)if(this.isCollapsed){const{top:e}=this.nav.getBoundingClientRect(),t=this.headerContainer.clientHeight,l=this.mobileActions.clientHeight,a=window.innerWidth>=768&&window.innerWidth<1024?e+t:e+t+l;this.mobileNav.style.maxHeight=`calc(100dvh - ${a}px)`,this.style.minHeight=`${this.nav.clientHeight}px`,this.nav.style.position="absolute"}else this.mobileNav.style.maxHeight="none",this.style.minHeight="auto",this.nav.style.position="relative"},this._toggleMenu=()=>{var e;this.isMenuOpen?this.hide():(this._lockBodyScroll(),this.show()),null===(e=this.toggler)||void 0===e||e.focus()}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),window.addEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._handleResize),window.removeEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}firstUpdated(e){super.firstUpdated(e),this._handleResize()}updated(){this.hasActionsSlot||(this.hasActionsSlot=this.hasSlotController.test("actions"))}_handleClickOutOfElement(e,t){e.composedPath().includes(t)||e.composedPath().includes(this.toggler)||this.hide()}async _onKeyboardToggle(e){pt.includes(e.key)&&(e.preventDefault(),this._toggleMenu())}async show(){if(!this.isMenuOpen)return this.isMenuOpen=!0,Oe(this,"sgds-after-show")}async hide(){if(this.isMenuOpen)return this.isMenuOpen=!1,this._unlockBodyScroll(),Oe(this,"sgds-after-hide")}_lockBodyScroll(){if("undefined"==typeof window)return;const e=window.scrollY;document.body.style.position="fixed",document.body.style.top=`-${e}px`,document.body.style.width="100%"}_unlockBodyScroll(){if("undefined"==typeof window)return;const e=-1*parseInt(document.body.style.top||"0");document.body.style.position="",document.body.style.top="",document.body.style.width="",window.scrollTo(0,e)}async _animateToShow(){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!1);await De(this.mobileNav),this.isCollapsed&&(this.mobileNav.style.display="flex");const{keyframes:e,options:t}=je(this,"subnav.show");await ze(this.mobileNav,Re(e,this.mobileNav.scrollHeight),t),this.emit("sgds-after-show")}async _animateToHide(){if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!0);await De(this.mobileNav);const{keyframes:e,options:t}=je(this,"subnav.hide");await ze(this.mobileNav,Re(e,this.mobileNav.scrollHeight),t),this.isCollapsed&&(this.mobileNav.style.display="none"),this.emit("sgds-after-hide")}async handleOpenChange(){this.isMenuOpen?this._animateToShow():this._animateToHide()}async handleCollapsedChange(){await this.updateComplete,this.mobileNav.style.display=this.isCollapsed?"none":"flex"}render(){return Q`
+`};var rt=c`:host{color:inherit;display:inline-flex;vertical-align:bottom}:host(.icon-left){margin-right:.25rem}:host(.icon-right){margin-left:.25rem}:host([size=xs]) svg{height:var(--sgds-icon-size-xs);width:var(--sgds-icon-size-xs)}:host([size=sm]) svg{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}:host([size=md]) svg{height:var(--sgds-icon-size-md);width:var(--sgds-icon-size-md)}:host([size=xl]) svg{height:var(--sgds-icon-size-xl);width:var(--sgds-icon-size-xl)}:host([size="2-xl"]) svg{height:var(--sgds-icon-size-2-xl);width:var(--sgds-icon-size-2-xl)}:host([size="3-xl"]) svg{height:var(--sgds-icon-size-3-xl);width:var(--sgds-icon-size-3-xl)}svg{display:inline-block;height:var(--sgds-icon-size-lg);width:var(--sgds-icon-size-lg)}`;class dt extends Se{constructor(){super(...arguments),this.size="lg"}_getIconByName(e){if(!e)return;const t=nt[e];if(t)return t;console.warn(`Icon not found: ${e}`)}updated(){var e;const t=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector("svg");t&&(this.ariaLabel?(t.removeAttribute("aria-hidden"),t.setAttribute("aria-label",this.ariaLabel)):(t.removeAttribute("aria-label"),t.setAttribute("aria-hidden","true")))}render(){const e=this._getIconByName(this.name);return e||le}}dt.styles=[...Se.styles,rt],e([_e({type:String,reflect:!0})],dt.prototype,"name",void 0),e([_e({type:String,reflect:!0})],dt.prototype,"size",void 0),e([_e({type:String})],dt.prototype,"ariaLabel",void 0);var ht=c`:host{display:block;position:relative;z-index:var(--sgds-z-index-sticky)}nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:relative;width:100%}.subnav{flex-direction:column;flex-wrap:nowrap}.header-container,.subnav{align-items:flex-start;display:flex}.header-container{gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);width:100%}slot[name=header]::slotted(*){--sgds-margin-xs:var(--sgds-margin-none);flex:1 1 auto;margin-bottom:var(--sgds-margin-xs,--sgds-margin-none);padding-top:var(--sgds-padding-none)}.subnav-toggler{cursor:pointer;transition:transform .2s ease-in-out}.subnav-toggler:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.subnav:not(.collapsed) .subnav-toggler{transform:rotate(-180deg)}.subnav-nav-group{display:flex;flex:1 1 0}.subnav-nav,.subnav-nav-group{align-items:flex-start;flex-direction:column;width:100%}.subnav-nav{display:none;overflow-y:auto;transition:transform .2s ease-in-out}.subnav-nav ::slotted(*){width:100%}.subnav-actions{bottom:0;display:flex;flex-direction:column;gap:var(--sgds-gap-md);padding:var(--sgds-padding-md) var(--sgds-padding-lg);position:sticky;width:100%}.no-actions{display:none}slot[name=actions]::slotted(*){width:100%}@media screen and (max-width:1023px){.subnav.sgds-container{max-width:inherit}}@media screen and (min-width:512px){.subnav-actions{flex-direction:row}}@media screen and (min-width:768px){nav{border-bottom:var(--sgds-border-width-0)}.subnav{flex-direction:row}.subnav.collapsed{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}.header-container{padding:var(--sgds-padding-lg) var(--sgds-padding-2-xl)}.subnav-nav{background-color:var(--sgds-surface-raised);border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);left:0;position:absolute;top:100%}.subnav-actions{align-items:center;flex-direction:row;padding:var(--sgds-padding-sm) var(--sgds-padding-2-xl) var(--sgds-padding-sm) var(--sgds-padding-none);position:inherit}}@media screen and (min-width:1024px){nav{border-bottom:var(--sgds-border-width-1) solid var(--sgds-border-color-muted);position:inherit}.subnav{flex-wrap:wrap;gap:var(--sgds-gap-xl);row-gap:var(--sgds-gap-none)}.subnav.collapsed{border-bottom:var(--sgds-border-width-0)}.header-container{flex:1;padding:var(--sgds-padding-none);width:auto}slot[name=header]::slotted(*){padding-top:var(--sgds-padding-lg);white-space:nowrap}.subnav-nav-group{align-items:center;flex:inherit;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-xl);justify-content:space-between;row-gap:var(--sgds-gap-none);width:auto}.subnav-nav{align-items:center;background-color:inherit;border-bottom:var(--sgds-border-width-0);display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sgds-gap-lg);overflow-y:inherit;position:inherit;row-gap:0;transition:none;width:auto}.subnav-nav ::slotted(*){width:inherit}.subnav-toggler{display:none}.subnav-actions{padding:var(--sgds-padding-sm) var(--sgds-padding-none);width:auto}slot[name=actions]::slotted(*){width:inherit}}`,vt=c`.sgds-container,.sgds-container-sidebar{margin-left:auto;margin-right:auto;max-width:calc(100% - 40px);width:100%}.sgds-grid{display:grid;gap:var(--sgds-gap-md);grid-template-columns:repeat(4,1fr)}.sgds-col-1{grid-column:span 1}.sgds-col-2{grid-column:span 2}.sgds-col-3{grid-column:span 3}.sgds-col-4{grid-column:span 4}.sgds-col-center-2{grid-column:2/span 2}.sgds-col-none{display:none}@media (min-width:512px){.sgds-grid{grid-template-columns:repeat(8,1fr)}.sgds-container,.sgds-container-sidebar{max-width:calc(100% - 48px)}.sgds-col-sm-1{grid-column:span 1}.sgds-col-sm-2{grid-column:span 2}.sgds-col-sm-3{grid-column:span 3}.sgds-col-sm-4{grid-column:span 4}.sgds-col-sm-5{grid-column:span 5}.sgds-col-sm-6{grid-column:span 6}.sgds-col-sm-7{grid-column:span 7}.sgds-col-sm-8{grid-column:span 8}.sgds-col-sm-center-2{grid-column:4/span 2}.sgds-col-sm-center-4{grid-column:3/span 4}.sgds-col-sm-center-6{grid-column:2/span 6}.sgds-col-none{display:revert}.sgds-col-sm-none{display:none}}@media (min-width:768px){.sgds-container{max-width:calc(100% - 56px)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-grid{gap:var(--sgds-gap-xl)}.sgds-col-md-1{grid-column:span 1}.sgds-col-md-2{grid-column:span 2}.sgds-col-md-3{grid-column:span 3}.sgds-col-md-4{grid-column:span 4}.sgds-col-md-5{grid-column:span 5}.sgds-col-md-6{grid-column:span 6}.sgds-col-md-7{grid-column:span 7}.sgds-col-md-8{grid-column:span 8}.sgds-col-md-center-2{grid-column:4/span 2}.sgds-col-md-center-4{grid-column:3/span 4}.sgds-col-md-center-6{grid-column:2/span 6}.sgds-col-sm-none{display:revert}.sgds-col-md-none{display:none}}@media (min-width:1024px){.sgds-grid{grid-template-columns:repeat(12,1fr)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-container{max-width:var(--sgds-dimension-888)}.sgds-col-lg-1{grid-column:span 1}.sgds-col-lg-2{grid-column:span 2}.sgds-col-lg-3{grid-column:span 3}.sgds-col-lg-4{grid-column:span 4}.sgds-col-lg-5{grid-column:span 5}.sgds-col-lg-6{grid-column:span 6}.sgds-col-lg-7{grid-column:span 7}.sgds-col-lg-8{grid-column:span 8}.sgds-col-lg-9{grid-column:span 9}.sgds-col-lg-10{grid-column:span 10}.sgds-col-lg-11{grid-column:span 11}.sgds-col-lg-12{grid-column:span 12}.sgds-col-lg-center-2{grid-column:6/span 2}.sgds-col-lg-center-4{grid-column:5/span 4}.sgds-col-lg-center-6{grid-column:4/span 6}.sgds-col-lg-center-8{grid-column:3/span 8}.sgds-col-lg-center-10{grid-column:2/span 10}.sgds-col-md-none{display:revert}.sgds-col-lg-none{display:none}}@media (min-width:1280px){.sgds-grid{gap:var(--sgds-gap-2-xl)}.sgds-container{max-width:var(--sgds-dimension-1168)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-xl-1{grid-column:span 1}.sgds-col-xl-2{grid-column:span 2}.sgds-col-xl-3{grid-column:span 3}.sgds-col-xl-4{grid-column:span 4}.sgds-col-xl-5{grid-column:span 5}.sgds-col-xl-6{grid-column:span 6}.sgds-col-xl-7{grid-column:span 7}.sgds-col-xl-8{grid-column:span 8}.sgds-col-xl-9{grid-column:span 9}.sgds-col-xl-10{grid-column:span 10}.sgds-col-xl-11{grid-column:span 11}.sgds-col-xl-12{grid-column:span 12}.sgds-col-xl-center-2{grid-column:6/span 2}.sgds-col-xl-center-4{grid-column:5/span 4}.sgds-col-xl-center-6{grid-column:4/span 6}.sgds-col-xl-center-8{grid-column:3/span 8}.sgds-col-xl-center-10{grid-column:2/span 10}.sgds-col-lg-none{display:revert}.sgds-col-xl-none{display:none}}@media (min-width:1440px){.sgds-container{max-width:var(--sgds-dimension-1312)}.sgds-container-sidebar{max-width:calc(100% - 96px)}.sgds-col-2-xl-1{grid-column:span 1}.sgds-col-2-xl-2{grid-column:span 2}.sgds-col-2-xl-3{grid-column:span 3}.sgds-col-2-xl-4{grid-column:span 4}.sgds-col-2-xl-5{grid-column:span 5}.sgds-col-2-xl-6{grid-column:span 6}.sgds-col-2-xl-7{grid-column:span 7}.sgds-col-2-xl-8{grid-column:span 8}.sgds-col-2-xl-9{grid-column:span 9}.sgds-col-2-xl-10{grid-column:span 10}.sgds-col-2-xl-11{grid-column:span 11}.sgds-col-2-xl-12{grid-column:span 12}.sgds-col-2-xl-center-2{grid-column:6/span 2}.sgds-col-2-xl-center-4{grid-column:5/span 4}.sgds-col-2-xl-center-6{grid-column:4/span 6}.sgds-col-2-xl-center-8{grid-column:3/span 8}.sgds-col-2-xl-center-10{grid-column:2/span 10}.sgds-col-xl-none{display:revert}.sgds-col-2-xl-none{display:none}}@media (min-width:1600px){.sgds-container-sidebar{max-width:min(var(--sgds-dimension-1600),calc(100% - 96px))}.sgds-col-3-xl-1{grid-column:span 1}.sgds-col-3-xl-2{grid-column:span 2}.sgds-col-3-xl-3{grid-column:span 3}.sgds-col-3-xl-4{grid-column:span 4}.sgds-col-3-xl-5{grid-column:span 5}.sgds-col-3-xl-6{grid-column:span 6}.sgds-col-3-xl-7{grid-column:span 7}.sgds-col-3-xl-8{grid-column:span 8}.sgds-col-3-xl-9{grid-column:span 9}.sgds-col-3-xl-10{grid-column:span 10}.sgds-col-3-xl-11{grid-column:span 11}.sgds-col-3-xl-12{grid-column:span 12}.sgds-col-3-xl-center-2{grid-column:6/span 2}.sgds-col-3-xl-center-4{grid-column:5/span 4}.sgds-col-3-xl-center-6{grid-column:4/span 6}.sgds-col-3-xl-center-8{grid-column:3/span 8}.sgds-col-3-xl-center-10{grid-column:2/span 10}.sgds-col-2-xl-none{display:revert}.sgds-col-3-xl-none{display:none}}`;class gt{constructor(e,...t){this.slotNames=[],(this.host=e).addController(this),this.slotNames=t,this.handleSlotChange=this.handleSlotChange.bind(this)}hasDefaultSlot(){return[...this.host.childNodes].some(e=>{var t;if(e.nodeType===e.TEXT_NODE&&""!==(null===(t=e.textContent)||void 0===t?void 0:t.trim()))return!0;if(e.nodeType===e.ELEMENT_NODE){const t=e;if("sl-visually-hidden"===t.tagName.toLowerCase())return!1;if(!t.hasAttribute("slot"))return!0}return!1})}hasNamedSlot(e){return null!==this.host.querySelector(`:scope > [slot="${e}"]`)}test(e){return"[default]"===e?this.hasDefaultSlot():this.hasNamedSlot(e)}hostConnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.addEventListener("slotchange",this.handleSlotChange)}hostDisconnected(){var e;null===(e=this.host.shadowRoot)||void 0===e||e.removeEventListener("slotchange",this.handleSlotChange)}handleSlotChange(e){const t=e.target;(this.slotNames.includes("[default]")&&!t.name||t.name&&this.slotNames.includes(t.name))&&this.host.requestUpdate()}}const pt=["Enter"," "];class ut extends Se{constructor(){super(...arguments),this.hasActionsSlot=!1,this.isCollapsed=!1,this.isMenuOpen=!1,this.hasSlotController=new gt(this,"actions"),this._handleResize=async()=>{this.isCollapsed=window.innerWidth<1024,await this.updateComplete,this.isCollapsed||(this.isMenuOpen=!1),this._updateMobileLayout()},this._updateMobileLayout=()=>{if(this.nav&&this.headerContainer&&this.mobileActions&&this.mobileNav)if(this.isCollapsed){const{top:e}=this.nav.getBoundingClientRect(),t=this.headerContainer.clientHeight,l=this.mobileActions.clientHeight,a=window.innerWidth>=768&&window.innerWidth<1024?e+t:e+t+l;this.mobileNav.style.maxHeight=`calc(100dvh - ${a}px)`,this.style.minHeight=`${this.nav.clientHeight}px`,this.nav.style.position="absolute"}else this.mobileNav.style.maxHeight="none",this.style.minHeight="auto",this.nav.style.position="relative"},this._toggleMenu=()=>{var e;this.isMenuOpen?this.hide():(this._lockBodyScroll(),this.show()),null===(e=this.toggler)||void 0===e||e.focus()}}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._handleResize),window.addEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._handleResize),window.removeEventListener("click",e=>this._handleClickOutOfElement(e,this.navGroup))}firstUpdated(e){super.firstUpdated(e),this._handleResize()}updated(){this.hasActionsSlot||(this.hasActionsSlot=this.hasSlotController.test("actions"))}_handleClickOutOfElement(e,t){e.composedPath().includes(t)||e.composedPath().includes(this.toggler)||this.hide()}async _onKeyboardToggle(e){pt.includes(e.key)&&(e.preventDefault(),this._toggleMenu())}async show(){if(!this.isMenuOpen)return this.isMenuOpen=!0,Oe(this,"sgds-after-show")}async hide(){if(this.isMenuOpen)return this.isMenuOpen=!1,this._unlockBodyScroll(),Oe(this,"sgds-after-hide")}_lockBodyScroll(){if("undefined"==typeof window)return;const e=window.scrollY;document.body.style.position="fixed",document.body.style.top=`-${e}px`,document.body.style.width="100%"}_unlockBodyScroll(){if("undefined"==typeof window)return;const e=-1*parseInt(document.body.style.top||"0");document.body.style.position="",document.body.style.top="",document.body.style.width="",window.scrollTo(0,e)}async _animateToShow(){if(this.emit("sgds-show",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!1);await De(this.mobileNav),this.isCollapsed&&(this.mobileNav.style.display="flex");const{keyframes:e,options:t}=je(this,"subnav.show");await ze(this.mobileNav,Re(e,this.mobileNav.scrollHeight),t),this.emit("sgds-after-show")}async _animateToHide(){if(this.emit("sgds-hide",{cancelable:!0}).defaultPrevented)return void(this.isMenuOpen=!0);await De(this.mobileNav);const{keyframes:e,options:t}=je(this,"subnav.hide");await ze(this.mobileNav,Re(e,this.mobileNav.scrollHeight),t),this.isCollapsed&&(this.mobileNav.style.display="none"),this.emit("sgds-after-hide")}async handleOpenChange(){this.isMenuOpen?this._animateToShow():this._animateToHide()}async handleCollapsedChange(){await this.updateComplete,this.mobileNav.style.display=this.isCollapsed?"none":"flex"}render(){return Q`
       <nav aria-label="Sub navigation">
         <div
           class=${Pe({"sgds-container":!0,subnav:!0,collapsed:!this.isMenuOpen})}