@govtechsg/sgds-web-component 3.30.1-rc.0 → 3.30.1-rc.10

package/components/Appnav/sgds-appnav.js

@@ -120,7 +120,9 @@ var SgdsAppnav = class extends NavElement {
           <slot name="start" class=${classMap({ "slot-empty": !this.hasStartSlot })}></slot>
           ${this.brandHref ? html`<a class="navbar-brand" href=${sanitizeHref(this.brandHref) ?? ""}>
                 <slot name="brand"></slot>
-              </a>` : html`<slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>`}
+              </a>` : html`<div class="navbar-brand">
+                <slot name="brand" @slotchange=${this._handleBrandSlotChange}></slot>
+              </div>`}
           <div class="navbar-body navbar-collapse" id=${this.collapseId}>
             <div class="navbar-nav navbar-nav-scroll">
               <slot

package/components/Appnav/sgds-appnav.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-appnav.js","names":["appnavStyle"],"sources":["../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, 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 { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\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 - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\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 _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\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=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\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\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-appnav.js","names":["appnavStyle"],"sources":["../../../src/components/Appnav/sgds-appnav.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { html, nothing } from \"lit\";\nimport { property, 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 { AppnavBreakpointContext, AppnavExpandedContext } from \"./appnav-context\";\nimport appnavStyle from \"./appnav.css\";\n\nexport type AppnavTone = \"brand\" | \"gradient-1\" | \"gradient-2\" | \"gradient-3\" | \"gradient-4\";\n\ninterface DefaultSlotItem {\n  label: string;\n  element: HTMLElement;\n}\n\n/**\n * @summary `SgdsAppnav` is a application navigation bar for operational apps. Accepts icon-buttons and profile in a fluid layout with collapse/expand behavior.\n *\n * @storyOrder 1\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 - Elements in this slot collapse into the mobile menu as text items. Accepts sgds-icon-button and other elements. Uses ariaLabel as menu item text.\n * @slot start - Elements in this slot will be positioned to the left of the brand.\n * @slot brand - Brand slot of SgdsAppnav. Pass in brand logo img here\n * @slot profile - Profile slot. sgds-appnav-profile goes here. Positioned to the right of the toggler.\n *\n */\nexport class SgdsAppnav extends NavElement {\n  static styles = [...NavElement.styles, appnavStyle];\n\n  @provide({ context: AppnavBreakpointContext })\n  @state()\n  private _breakpointReached = false;\n\n  @provide({ context: AppnavExpandedContext })\n  @state()\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  private _expanded = false;\n\n  /** Sets the visual tone of the navigation bar */\n  @property({ type: String, reflect: true })\n  tone: AppnavTone = \"brand\";\n\n  /** Used only for SSR to indicate the presence of the `start` slot. */\n  @property({ type: Boolean }) hasStartSlot = false;\n\n  private readonly hasSlotController = new HasSlotController(this, \"start\");\n\n  /** @internal Whether the default slot has assigned elements */\n  @state()\n  private _hasDefaultSlotItems = false;\n\n  /** @internal Whether the profile slot has assigned elements */\n  @state()\n  private _hasProfileSlotItems = false;\n\n  /** @internal Stored default slot items for mobile menu rendering */\n  @state()\n  private _defaultSlotItems: DefaultSlotItem[] = [];\n\n  updated() {\n    if (!this.hasStartSlot) this.hasStartSlot = this.hasSlotController.test(\"start\");\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 _handleTogglerKeydown(e: KeyboardEvent) {\n    if (e.key === \"Tab\" && !e.shiftKey && this.expanded) {\n      e.preventDefault();\n      const firstItem = this.shadowRoot?.querySelector(\".appnav-menu-item\") as HTMLElement | null;\n      firstItem?.focus();\n    }\n  }\n\n  private _handleMenuItemKeydown(e: KeyboardEvent, index: number) {\n    if (e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      this._handleMobileItemClick(this._defaultSlotItems[index]);\n    } else if (e.key === \"Tab\" && e.shiftKey && index === 0) {\n      e.preventDefault();\n      this.header?.focus();\n    }\n  }\n\n  private _handleDefaultSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true }) as HTMLElement[];\n    this._hasDefaultSlotItems = childElements.length > 0;\n    this._defaultSlotItems = childElements\n      .filter(el => typeof el.tagName !== \"undefined\")\n      .map(el => {\n        const label = el.getAttribute(\"ariaLabel\") || el.getAttribute(\"aria-label\") || el.textContent?.trim() || \"\";\n        if (!label) {\n          console.warn(\n            `[sgds-appnav] Slotted element <${el.tagName.toLowerCase()}> has no ariaLabel, aria-label, or textContent. It will render as a blank item in the mobile menu. Add an ariaLabel for accessibility and mobile display.`,\n            el\n          );\n        }\n        return { label, element: el };\n      });\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n    });\n  }\n\n  private _handleMobileItemClick(item: DefaultSlotItem) {\n    item.element.click();\n    this.hide();\n  }\n\n  private _renderAppnavToggler() {\n    return html`<sgds-icon-button\n      name=\"three-dots-vertical\"\n      variant=\"ghost\"\n      size=\"sm\"\n      tone=\"fixed-light\"\n      class=\"navbar-toggler\"\n      @click=${this._handleSummaryClick}\n      @keydown=${this._handleTogglerKeydown}\n      aria-controls=\"${this.collapseId}\"\n      aria-expanded=\"${this.expanded}\"\n      .ariaLabel=${\"Toggle navigation\"}\n    ></sgds-icon-button>`;\n  }\n\n  private _handleProfileSlotChange(e: Event) {\n    const childElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n    this._hasProfileSlotItems = childElements.length > 0;\n    childElements.forEach(el => {\n      el.setAttribute(\"expand\", this.expand);\n      el.setAttribute(\"tone\", this.tone);\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=\"App navigation\">\n        <div class=\"navbar ${this._expandClass()}\">\n          <slot name=\"start\" class=${classMap({ \"slot-empty\": !this.hasStartSlot })}></slot>\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\n                class=${classMap({ \"slot-desktop-only\": this.breakpointReached })}\n                @slotchange=${this._handleDefaultSlotChange}\n              ></slot>\n              ${this.breakpointReached\n                ? this._defaultSlotItems.map(\n                    (item, index) => html`<a\n                      class=\"appnav-menu-item\"\n                      role=\"button\"\n                      tabindex=\"0\"\n                      @click=${() => this._handleMobileItemClick(item)}\n                      @keydown=${(e: KeyboardEvent) => this._handleMenuItemKeydown(e, index)}\n                      >${item.label}</a\n                    >`\n                  )\n                : nothing}\n            </div>\n          </div>\n          <div\n            class=\"navbar-end ${this._hasProfileSlotItems || (this._hasDefaultSlotItems && this.breakpointReached)\n              ? \"\"\n              : \"slot-empty\"}\"\n          >\n            ${this._hasDefaultSlotItems && this.breakpointReached ? this._renderAppnavToggler() : nothing}\n            <slot name=\"profile\" @slotchange=${this._handleProfileSlotChange}></slot>\n          </div>\n        </div>\n      </nav>\n    `;\n  }\n}\n\nexport default SgdsAppnav;\n"],"mappings":"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"}

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

@@ -2371,7 +2371,7 @@ re(),P(),Ze(),Qe()}));F();var $e=l`:host{-webkit-text-size-adjust:100%;-webkit-t
       clip-rule="evenodd"
     />
   </svg>
-`}));let Oh={announcement:()=>Promise.resolve().then(()=>(pr(),dr)),archive:()=>Promise.resolve().then(()=>(gr(),mr)),"arrow-bar-down":()=>Promise.resolve().then(()=>(yr(),_r)),"arrow-bar-left":()=>Promise.resolve().then(()=>(Sr(),br)),"arrow-bar-right":()=>Promise.resolve().then(()=>(Tr(),Cr)),"arrow-bar-up":()=>Promise.resolve().then(()=>(Or(),Er)),"arrow-circle-down":()=>Promise.resolve().then(()=>(jr(),kr)),"arrow-circle-left":()=>Promise.resolve().then(()=>(Pr(),Mr)),"arrow-circle-right":()=>Promise.resolve().then(()=>(Lr(),Fr)),"arrow-circle-up":()=>Promise.resolve().then(()=>(Br(),Rr)),"arrow-clockwise":()=>Promise.resolve().then(()=>(Ur(),Vr)),"arrow-down":()=>Promise.resolve().then(()=>(Kr(),Wr)),"arrow-left":()=>Promise.resolve().then(()=>(Yr(),qr)),"arrow-repeat":()=>Promise.resolve().then(()=>(Qr(),Xr)),"arrow-right":()=>Promise.resolve().then(()=>(ti(),$r)),"arrow-square-down":()=>Promise.resolve().then(()=>(ii(),ni)),"arrow-square-left":()=>Promise.resolve().then(()=>(si(),ai)),"arrow-square-right":()=>Promise.resolve().then(()=>(ui(),ci)),"arrow-square-up":()=>Promise.resolve().then(()=>(pi(),di)),"arrow-up":()=>Promise.resolve().then(()=>(gi(),mi)),"bank-fill":()=>Promise.resolve().then(()=>(yi(),_i)),"bell-slash":()=>Promise.resolve().then(()=>(Si(),bi)),bell:()=>Promise.resolve().then(()=>(Ti(),Ci)),"bi-funnel":()=>Promise.resolve().then(()=>(Oi(),Ei)),"bookmark-fill":()=>Promise.resolve().then(()=>(ji(),ki)),bookmark:()=>Promise.resolve().then(()=>(Pi(),Mi)),"box-arrow-up-right":()=>Promise.resolve().then(()=>(Li(),Fi)),"box-seam":()=>Promise.resolve().then(()=>(Bi(),Ri)),building:()=>Promise.resolve().then(()=>(Ui(),Vi)),bus:()=>Promise.resolve().then(()=>(Ki(),Wi)),calculator:()=>Promise.resolve().then(()=>(Yi(),qi)),"calendar-check":()=>Promise.resolve().then(()=>(Qi(),Xi)),"calendar-heart":()=>Promise.resolve().then(()=>(ta(),$i)),"calendar-x":()=>Promise.resolve().then(()=>(ia(),na)),calendar:()=>Promise.resolve().then(()=>(sa(),aa)),camera:()=>Promise.resolve().then(()=>(ua(),ca)),car:()=>Promise.resolve().then(()=>(pa(),da)),"chat-dots":()=>Promise.resolve().then(()=>(ga(),ma)),"chat-left-text":()=>Promise.resolve().then(()=>(ya(),_a)),chat:()=>Promise.resolve().then(()=>(Sa(),ba)),"check-circle-fill":()=>Promise.resolve().then(()=>(Ta(),Ca)),"check-circle":()=>Promise.resolve().then(()=>(Oa(),Ea)),check:()=>Promise.resolve().then(()=>(ja(),ka)),"chevron-down":()=>Promise.resolve().then(()=>(Pa(),Ma)),"chevron-left":()=>Promise.resolve().then(()=>(La(),Fa)),"chevron-right":()=>Promise.resolve().then(()=>(Ba(),Ra)),"chevron-selector-vertical":()=>Promise.resolve().then(()=>(Ua(),Va)),"chevron-up":()=>Promise.resolve().then(()=>(Ka(),Wa)),clock:()=>Promise.resolve().then(()=>(Ya(),qa)),"cloud-check":()=>Promise.resolve().then(()=>(Qa(),Xa)),"cloud-download":()=>Promise.resolve().then(()=>(to(),$a)),"cloud-upload":()=>Promise.resolve().then(()=>(io(),no)),cloud:()=>Promise.resolve().then(()=>(so(),ao)),"code-square":()=>Promise.resolve().then(()=>(uo(),co)),"coins-hand":()=>Promise.resolve().then(()=>(mo(),fo)),compass:()=>Promise.resolve().then(()=>(_o(),ho)),copy:()=>Promise.resolve().then(()=>(bo(),vo)),"cpu-chip-ai":()=>Promise.resolve().then(()=>(Co(),xo)),cross:()=>Promise.resolve().then(()=>(Eo(),wo)),"cursor-fill":()=>Promise.resolve().then(()=>(ko(),Do)),cursor:()=>Promise.resolve().then(()=>(Mo(),Ao)),"dash-circle":()=>Promise.resolve().then(()=>(Fo(),No)),"dash-square":()=>Promise.resolve().then(()=>(Ro(),Io)),dash:()=>Promise.resolve().then(()=>(Vo(),zo)),database:()=>Promise.resolve().then(()=>(Wo(),Ho)),dataflow:()=>Promise.resolve().then(()=>(qo(),Go)),download:()=>Promise.resolve().then(()=>(Xo(),Jo)),edit:()=>Promise.resolve().then(()=>($o(),Zo)),"exclamation-circle-fill":()=>Promise.resolve().then(()=>(ns(),es)),"exclamation-circle":()=>Promise.resolve().then(()=>(as(),rs)),"exclamation-triangle-fill":()=>Promise.resolve().then(()=>(cs(),os)),"exclamation-triangle":()=>Promise.resolve().then(()=>(ds(),ls)),exclamation:()=>Promise.resolve().then(()=>(ms(),fs)),"eye-fill":()=>Promise.resolve().then(()=>(_s(),hs)),"eye-slash-fill":()=>Promise.resolve().then(()=>(bs(),vs)),"eye-slash":()=>Promise.resolve().then(()=>(Cs(),xs)),eye:()=>Promise.resolve().then(()=>(Es(),ws)),"face-smile-fill":()=>Promise.resolve().then(()=>(ks(),Ds)),"face-smile":()=>Promise.resolve().then(()=>(Ms(),As)),facebook:()=>Promise.resolve().then(()=>(Fs(),Ns)),"file-earmark-text":()=>Promise.resolve().then(()=>(Rs(),Is)),"file-pdf":()=>Promise.resolve().then(()=>(Vs(),zs)),"file-plus":()=>Promise.resolve().then(()=>(Ws(),Hs)),"file-text":()=>Promise.resolve().then(()=>(qs(),Gs)),file:()=>Promise.resolve().then(()=>(Xs(),Js)),files:()=>Promise.resolve().then(()=>($s(),Zs)),fingerprint:()=>Promise.resolve().then(()=>(nc(),ec)),flash:()=>Promise.resolve().then(()=>(ac(),rc)),"folder-check":()=>Promise.resolve().then(()=>(cc(),oc)),"folder-minus":()=>Promise.resolve().then(()=>(dc(),lc)),"folder-plus":()=>Promise.resolve().then(()=>(mc(),fc)),folder:()=>Promise.resolve().then(()=>(_c(),hc)),gear:()=>Promise.resolve().then(()=>(bc(),vc)),"geo-alt":()=>Promise.resolve().then(()=>(Cc(),xc)),"geo-fill":()=>Promise.resolve().then(()=>(Ec(),wc)),geo:()=>Promise.resolve().then(()=>(kc(),Dc)),"globe-alt":()=>Promise.resolve().then(()=>(Mc(),Ac)),globe:()=>Promise.resolve().then(()=>(Fc(),Nc)),google:()=>Promise.resolve().then(()=>(Rc(),Ic)),"grid-alt":()=>Promise.resolve().then(()=>(Vc(),zc)),"grid-fill":()=>Promise.resolve().then(()=>(Wc(),Hc)),"hand-thumbs-down":()=>Promise.resolve().then(()=>(qc(),Gc)),"hand-thumbs-up":()=>Promise.resolve().then(()=>(Xc(),Jc)),"hard-drive":()=>Promise.resolve().then(()=>($c(),Zc)),heart:()=>Promise.resolve().then(()=>(nl(),el)),"house-door":()=>Promise.resolve().then(()=>(al(),rl)),house:()=>Promise.resolve().then(()=>(cl(),ol)),image:()=>Promise.resolve().then(()=>(dl(),ll)),"in-box":()=>Promise.resolve().then(()=>(ml(),fl)),"info-circle-fill":()=>Promise.resolve().then(()=>(_l(),hl)),"info-circle":()=>Promise.resolve().then(()=>(bl(),vl)),instagram:()=>Promise.resolve().then(()=>(Cl(),xl)),key:()=>Promise.resolve().then(()=>(El(),wl)),"laptop-gear":()=>Promise.resolve().then(()=>(kl(),Dl)),laptop:()=>Promise.resolve().then(()=>(Ml(),Al)),layers:()=>Promise.resolve().then(()=>(Fl(),Nl)),"layout-text-window-reverse":()=>Promise.resolve().then(()=>(Rl(),Il)),"layout-text-window":()=>Promise.resolve().then(()=>(Vl(),zl)),layout:()=>Promise.resolve().then(()=>(Wl(),Hl)),"life-buoy":()=>Promise.resolve().then(()=>(ql(),Gl)),lightbulb:()=>Promise.resolve().then(()=>(Xl(),Jl)),link:()=>Promise.resolve().then(()=>($l(),Zl)),linkedin:()=>Promise.resolve().then(()=>(nu(),eu)),list:()=>Promise.resolve().then(()=>(au(),ru)),"lock-fill":()=>Promise.resolve().then(()=>(cu(),ou)),lock:()=>Promise.resolve().then(()=>(du(),lu)),login:()=>Promise.resolve().then(()=>(mu(),fu)),logout:()=>Promise.resolve().then(()=>(_u(),hu)),luggage:()=>Promise.resolve().then(()=>(bu(),vu)),"mail-open":()=>Promise.resolve().then(()=>(Cu(),xu)),mail:()=>Promise.resolve().then(()=>(Eu(),wu)),map:()=>Promise.resolve().then(()=>(ku(),Du)),meetup:()=>Promise.resolve().then(()=>(Mu(),Au)),menu:()=>Promise.resolve().then(()=>(Fu(),Nu)),microphone:()=>Promise.resolve().then(()=>(Ru(),Iu)),monitor:()=>Promise.resolve().then(()=>(Vu(),zu)),moon:()=>Promise.resolve().then(()=>(Wu(),Hu)),move:()=>Promise.resolve().then(()=>(qu(),Gu)),paperclip:()=>Promise.resolve().then(()=>(Xu(),Ju)),passcode:()=>Promise.resolve().then(()=>($u(),Zu)),passport:()=>Promise.resolve().then(()=>(nd(),ed)),pause:()=>Promise.resolve().then(()=>(ad(),rd)),pencil:()=>Promise.resolve().then(()=>(cd(),od)),"pending-circle":()=>Promise.resolve().then(()=>(dd(),ld)),"person-dash":()=>Promise.resolve().then(()=>(md(),fd)),"person-plus":()=>Promise.resolve().then(()=>(_d(),hd)),"person-x":()=>Promise.resolve().then(()=>(bd(),vd)),person:()=>Promise.resolve().then(()=>(Cd(),xd)),phone:()=>Promise.resolve().then(()=>(Ed(),wd)),"pin-map-fill":()=>Promise.resolve().then(()=>(kd(),Dd)),pin:()=>Promise.resolve().then(()=>(Md(),Ad)),placeholder:()=>Promise.resolve().then(()=>(Fd(),Nd)),plane:()=>Promise.resolve().then(()=>(Rd(),Id)),play:()=>Promise.resolve().then(()=>(Vd(),zd)),"plus-circle":()=>Promise.resolve().then(()=>(Wd(),Hd)),"plus-square":()=>Promise.resolve().then(()=>(qd(),Gd)),plus:()=>Promise.resolve().then(()=>(Xd(),Jd)),printer:()=>Promise.resolve().then(()=>($d(),Zd)),"question-circle":()=>Promise.resolve().then(()=>(nf(),ef)),rocket:()=>Promise.resolve().then(()=>(of(),rf)),save:()=>Promise.resolve().then(()=>(lf(),sf)),search:()=>Promise.resolve().then(()=>(ff(),uf)),send:()=>Promise.resolve().then(()=>(hf(),pf)),"sg-crest":()=>Promise.resolve().then(()=>(vf(),gf)),share:()=>Promise.resolve().then(()=>(xf(),yf)),"shield-tick":()=>Promise.resolve().then(()=>(wf(),Sf)),"sidebar-collapse":()=>Promise.resolve().then(()=>(Df(),Tf)),"sidebar-expand":()=>Promise.resolve().then(()=>(Af(),Of)),"slash-circle":()=>Promise.resolve().then(()=>(Nf(),jf)),"slash-divider":()=>Promise.resolve().then(()=>(If(),Pf)),sliders:()=>Promise.resolve().then(()=>(zf(),Lf)),"sort-ascending":()=>Promise.resolve().then(()=>(Hf(),Bf)),"sort-descending":()=>Promise.resolve().then(()=>(Gf(),Uf)),speedometer:()=>Promise.resolve().then(()=>(Jf(),Kf)),"star-ai":()=>Promise.resolve().then(()=>(Zf(),Yf)),"star-fill":()=>Promise.resolve().then(()=>(ep(),Qf)),star:()=>Promise.resolve().then(()=>(rp(),tp)),stoplights:()=>Promise.resolve().then(()=>(op(),ip)),sun:()=>Promise.resolve().then(()=>(lp(),sp)),"switch-horizontal":()=>Promise.resolve().then(()=>(fp(),up)),"switch-vertical":()=>Promise.resolve().then(()=>(hp(),pp)),tablet:()=>Promise.resolve().then(()=>(vp(),gp)),telegram:()=>Promise.resolve().then(()=>(xp(),yp)),telephone:()=>Promise.resolve().then(()=>(wp(),Sp)),"three-dots-vertical":()=>Promise.resolve().then(()=>(Dp(),Tp)),"three-dots":()=>Promise.resolve().then(()=>(Ap(),Op)),ticket:()=>Promise.resolve().then(()=>(Np(),jp)),"toggle-off":()=>Promise.resolve().then(()=>(Ip(),Pp)),"toggle-on":()=>Promise.resolve().then(()=>(zp(),Lp)),train:()=>Promise.resolve().then(()=>(Hp(),Bp)),translate:()=>Promise.resolve().then(()=>(Gp(),Up)),trash:()=>Promise.resolve().then(()=>(Jp(),Kp)),"trend-down":()=>Promise.resolve().then(()=>(Zp(),Yp)),"trend-up":()=>Promise.resolve().then(()=>(em(),Qp)),truck:()=>Promise.resolve().then(()=>(rm(),tm)),"twitter-x":()=>Promise.resolve().then(()=>(om(),im)),unlock:()=>Promise.resolve().then(()=>(lm(),sm)),upload:()=>Promise.resolve().then(()=>(fm(),um)),"user-check":()=>Promise.resolve().then(()=>(hm(),pm)),"user-circle":()=>Promise.resolve().then(()=>(vm(),gm)),"user-pause":()=>Promise.resolve().then(()=>(xm(),ym)),"user-square":()=>Promise.resolve().then(()=>(wm(),Sm)),users:()=>Promise.resolve().then(()=>(Dm(),Tm)),"video-recorder":()=>Promise.resolve().then(()=>(Am(),Om)),"volume-max":()=>Promise.resolve().then(()=>(Nm(),jm)),"volume-x":()=>Promise.resolve().then(()=>(Im(),Pm)),"window-dash":()=>Promise.resolve().then(()=>(zm(),Lm)),"window-desktop":()=>Promise.resolve().then(()=>(Hm(),Bm)),"window-dock":()=>Promise.resolve().then(()=>(Gm(),Um)),"window-fullscreen":()=>Promise.resolve().then(()=>(Jm(),Km)),"window-plus":()=>Promise.resolve().then(()=>(Zm(),Ym)),"window-sidebar":()=>Promise.resolve().then(()=>(eh(),Qm)),"window-split":()=>Promise.resolve().then(()=>(rh(),th)),"window-stack":()=>Promise.resolve().then(()=>(oh(),ih)),"window-x":()=>Promise.resolve().then(()=>(lh(),sh)),window:()=>Promise.resolve().then(()=>(fh(),uh)),"xcircle-fill":()=>Promise.resolve().then(()=>(hh(),ph)),xcircle:()=>Promise.resolve().then(()=>(vh(),gh)),youtube:()=>Promise.resolve().then(()=>(xh(),yh)),"zoom-in":()=>Promise.resolve().then(()=>(wh(),Sh)),"zoom-out":()=>Promise.resolve().then(()=>(Dh(),Th))};F();var kh=l`: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)}`;F();let Ah=/* @__PURE__ */ new Map;var Q=class extends L{constructor(...e){super(...e),this.size=`lg`}static{this.styles=[...L.styles,kh]}willUpdate(e){e.has(`name`)&&this._loadIcon(this.name)}async _loadIcon(e){if(!e){this._icon=void 0;return}if(Ah.has(e)){this._icon=Ah.get(e);return}let t=Oh[e];if(!t){console.warn(`Icon not found: ${e}`),this._icon=void 0;return}try{let n=await t();Ah.set(e,n.default),this._icon=n.default}catch{console.warn(`Failed to load icon: ${e}`),this._icon=void 0}}updated(){let e=this.shadowRoot?.querySelector(`svg`);e&&(this.ariaLabel?(e.removeAttribute(`aria-hidden`),e.setAttribute(`aria-label`,this.ariaLabel)):(e.removeAttribute(`aria-label`),e.setAttribute(`aria-hidden`,`true`)))}render(){return this._icon??M}};I([T({type:String,reflect:!0})],Q.prototype,`name`,void 0),I([T({type:String,reflect:!0})],Q.prototype,`size`,void 0),I([T({type:String})],Q.prototype,`ariaLabel`,void 0),I([oe()],Q.prototype,`_icon`,void 0),F();var jh=l`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-none)}.dropdown-item.mainnav-dropdown-link ::slotted(*){box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link ::slotted(*){padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;F();var $=class extends L{constructor(...e){super(...e),this.active=!1,this.disabled=!1,this.readonly=!1,this.ariaLabel=``}static{this.styles=[lr,jh]}static{this.dependencies={"sgds-icon":Q}}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&this.anchor.length>0&&this.anchor[0].click()}),this.setAttribute(`role`,`menuitem`),this.setAttribute(`aria-disabled`,`${this.disabled}`)}render(){return A`
+`}));let Oh={announcement:()=>Promise.resolve().then(()=>(pr(),dr)),archive:()=>Promise.resolve().then(()=>(gr(),mr)),"arrow-bar-down":()=>Promise.resolve().then(()=>(yr(),_r)),"arrow-bar-left":()=>Promise.resolve().then(()=>(Sr(),br)),"arrow-bar-right":()=>Promise.resolve().then(()=>(Tr(),Cr)),"arrow-bar-up":()=>Promise.resolve().then(()=>(Or(),Er)),"arrow-circle-down":()=>Promise.resolve().then(()=>(jr(),kr)),"arrow-circle-left":()=>Promise.resolve().then(()=>(Pr(),Mr)),"arrow-circle-right":()=>Promise.resolve().then(()=>(Lr(),Fr)),"arrow-circle-up":()=>Promise.resolve().then(()=>(Br(),Rr)),"arrow-clockwise":()=>Promise.resolve().then(()=>(Ur(),Vr)),"arrow-down":()=>Promise.resolve().then(()=>(Kr(),Wr)),"arrow-left":()=>Promise.resolve().then(()=>(Yr(),qr)),"arrow-repeat":()=>Promise.resolve().then(()=>(Qr(),Xr)),"arrow-right":()=>Promise.resolve().then(()=>(ti(),$r)),"arrow-square-down":()=>Promise.resolve().then(()=>(ii(),ni)),"arrow-square-left":()=>Promise.resolve().then(()=>(si(),ai)),"arrow-square-right":()=>Promise.resolve().then(()=>(ui(),ci)),"arrow-square-up":()=>Promise.resolve().then(()=>(pi(),di)),"arrow-up":()=>Promise.resolve().then(()=>(gi(),mi)),"bank-fill":()=>Promise.resolve().then(()=>(yi(),_i)),"bell-slash":()=>Promise.resolve().then(()=>(Si(),bi)),bell:()=>Promise.resolve().then(()=>(Ti(),Ci)),"bi-funnel":()=>Promise.resolve().then(()=>(Oi(),Ei)),"bookmark-fill":()=>Promise.resolve().then(()=>(ji(),ki)),bookmark:()=>Promise.resolve().then(()=>(Pi(),Mi)),"box-arrow-up-right":()=>Promise.resolve().then(()=>(Li(),Fi)),"box-seam":()=>Promise.resolve().then(()=>(Bi(),Ri)),building:()=>Promise.resolve().then(()=>(Ui(),Vi)),bus:()=>Promise.resolve().then(()=>(Ki(),Wi)),calculator:()=>Promise.resolve().then(()=>(Yi(),qi)),"calendar-check":()=>Promise.resolve().then(()=>(Qi(),Xi)),"calendar-heart":()=>Promise.resolve().then(()=>(ta(),$i)),"calendar-x":()=>Promise.resolve().then(()=>(ia(),na)),calendar:()=>Promise.resolve().then(()=>(sa(),aa)),camera:()=>Promise.resolve().then(()=>(ua(),ca)),car:()=>Promise.resolve().then(()=>(pa(),da)),"chat-dots":()=>Promise.resolve().then(()=>(ga(),ma)),"chat-left-text":()=>Promise.resolve().then(()=>(ya(),_a)),chat:()=>Promise.resolve().then(()=>(Sa(),ba)),"check-circle-fill":()=>Promise.resolve().then(()=>(Ta(),Ca)),"check-circle":()=>Promise.resolve().then(()=>(Oa(),Ea)),check:()=>Promise.resolve().then(()=>(ja(),ka)),"chevron-down":()=>Promise.resolve().then(()=>(Pa(),Ma)),"chevron-left":()=>Promise.resolve().then(()=>(La(),Fa)),"chevron-right":()=>Promise.resolve().then(()=>(Ba(),Ra)),"chevron-selector-vertical":()=>Promise.resolve().then(()=>(Ua(),Va)),"chevron-up":()=>Promise.resolve().then(()=>(Ka(),Wa)),clock:()=>Promise.resolve().then(()=>(Ya(),qa)),"cloud-check":()=>Promise.resolve().then(()=>(Qa(),Xa)),"cloud-download":()=>Promise.resolve().then(()=>(to(),$a)),"cloud-upload":()=>Promise.resolve().then(()=>(io(),no)),cloud:()=>Promise.resolve().then(()=>(so(),ao)),"code-square":()=>Promise.resolve().then(()=>(uo(),co)),"coins-hand":()=>Promise.resolve().then(()=>(mo(),fo)),compass:()=>Promise.resolve().then(()=>(_o(),ho)),copy:()=>Promise.resolve().then(()=>(bo(),vo)),"cpu-chip-ai":()=>Promise.resolve().then(()=>(Co(),xo)),cross:()=>Promise.resolve().then(()=>(Eo(),wo)),"cursor-fill":()=>Promise.resolve().then(()=>(ko(),Do)),cursor:()=>Promise.resolve().then(()=>(Mo(),Ao)),"dash-circle":()=>Promise.resolve().then(()=>(Fo(),No)),"dash-square":()=>Promise.resolve().then(()=>(Ro(),Io)),dash:()=>Promise.resolve().then(()=>(Vo(),zo)),database:()=>Promise.resolve().then(()=>(Wo(),Ho)),dataflow:()=>Promise.resolve().then(()=>(qo(),Go)),download:()=>Promise.resolve().then(()=>(Xo(),Jo)),edit:()=>Promise.resolve().then(()=>($o(),Zo)),"exclamation-circle-fill":()=>Promise.resolve().then(()=>(ns(),es)),"exclamation-circle":()=>Promise.resolve().then(()=>(as(),rs)),"exclamation-triangle-fill":()=>Promise.resolve().then(()=>(cs(),os)),"exclamation-triangle":()=>Promise.resolve().then(()=>(ds(),ls)),exclamation:()=>Promise.resolve().then(()=>(ms(),fs)),"eye-fill":()=>Promise.resolve().then(()=>(_s(),hs)),"eye-slash-fill":()=>Promise.resolve().then(()=>(bs(),vs)),"eye-slash":()=>Promise.resolve().then(()=>(Cs(),xs)),eye:()=>Promise.resolve().then(()=>(Es(),ws)),"face-smile-fill":()=>Promise.resolve().then(()=>(ks(),Ds)),"face-smile":()=>Promise.resolve().then(()=>(Ms(),As)),facebook:()=>Promise.resolve().then(()=>(Fs(),Ns)),"file-earmark-text":()=>Promise.resolve().then(()=>(Rs(),Is)),"file-pdf":()=>Promise.resolve().then(()=>(Vs(),zs)),"file-plus":()=>Promise.resolve().then(()=>(Ws(),Hs)),"file-text":()=>Promise.resolve().then(()=>(qs(),Gs)),file:()=>Promise.resolve().then(()=>(Xs(),Js)),files:()=>Promise.resolve().then(()=>($s(),Zs)),fingerprint:()=>Promise.resolve().then(()=>(nc(),ec)),flash:()=>Promise.resolve().then(()=>(ac(),rc)),"folder-check":()=>Promise.resolve().then(()=>(cc(),oc)),"folder-minus":()=>Promise.resolve().then(()=>(dc(),lc)),"folder-plus":()=>Promise.resolve().then(()=>(mc(),fc)),folder:()=>Promise.resolve().then(()=>(_c(),hc)),gear:()=>Promise.resolve().then(()=>(bc(),vc)),"geo-alt":()=>Promise.resolve().then(()=>(Cc(),xc)),"geo-fill":()=>Promise.resolve().then(()=>(Ec(),wc)),geo:()=>Promise.resolve().then(()=>(kc(),Dc)),"globe-alt":()=>Promise.resolve().then(()=>(Mc(),Ac)),globe:()=>Promise.resolve().then(()=>(Fc(),Nc)),google:()=>Promise.resolve().then(()=>(Rc(),Ic)),"grid-alt":()=>Promise.resolve().then(()=>(Vc(),zc)),"grid-fill":()=>Promise.resolve().then(()=>(Wc(),Hc)),"hand-thumbs-down":()=>Promise.resolve().then(()=>(qc(),Gc)),"hand-thumbs-up":()=>Promise.resolve().then(()=>(Xc(),Jc)),"hard-drive":()=>Promise.resolve().then(()=>($c(),Zc)),heart:()=>Promise.resolve().then(()=>(nl(),el)),"house-door":()=>Promise.resolve().then(()=>(al(),rl)),house:()=>Promise.resolve().then(()=>(cl(),ol)),image:()=>Promise.resolve().then(()=>(dl(),ll)),"in-box":()=>Promise.resolve().then(()=>(ml(),fl)),"info-circle-fill":()=>Promise.resolve().then(()=>(_l(),hl)),"info-circle":()=>Promise.resolve().then(()=>(bl(),vl)),instagram:()=>Promise.resolve().then(()=>(Cl(),xl)),key:()=>Promise.resolve().then(()=>(El(),wl)),"laptop-gear":()=>Promise.resolve().then(()=>(kl(),Dl)),laptop:()=>Promise.resolve().then(()=>(Ml(),Al)),layers:()=>Promise.resolve().then(()=>(Fl(),Nl)),"layout-text-window-reverse":()=>Promise.resolve().then(()=>(Rl(),Il)),"layout-text-window":()=>Promise.resolve().then(()=>(Vl(),zl)),layout:()=>Promise.resolve().then(()=>(Wl(),Hl)),"life-buoy":()=>Promise.resolve().then(()=>(ql(),Gl)),lightbulb:()=>Promise.resolve().then(()=>(Xl(),Jl)),link:()=>Promise.resolve().then(()=>($l(),Zl)),linkedin:()=>Promise.resolve().then(()=>(nu(),eu)),list:()=>Promise.resolve().then(()=>(au(),ru)),"lock-fill":()=>Promise.resolve().then(()=>(cu(),ou)),lock:()=>Promise.resolve().then(()=>(du(),lu)),login:()=>Promise.resolve().then(()=>(mu(),fu)),logout:()=>Promise.resolve().then(()=>(_u(),hu)),luggage:()=>Promise.resolve().then(()=>(bu(),vu)),"mail-open":()=>Promise.resolve().then(()=>(Cu(),xu)),mail:()=>Promise.resolve().then(()=>(Eu(),wu)),map:()=>Promise.resolve().then(()=>(ku(),Du)),meetup:()=>Promise.resolve().then(()=>(Mu(),Au)),menu:()=>Promise.resolve().then(()=>(Fu(),Nu)),microphone:()=>Promise.resolve().then(()=>(Ru(),Iu)),monitor:()=>Promise.resolve().then(()=>(Vu(),zu)),moon:()=>Promise.resolve().then(()=>(Wu(),Hu)),move:()=>Promise.resolve().then(()=>(qu(),Gu)),paperclip:()=>Promise.resolve().then(()=>(Xu(),Ju)),passcode:()=>Promise.resolve().then(()=>($u(),Zu)),passport:()=>Promise.resolve().then(()=>(nd(),ed)),pause:()=>Promise.resolve().then(()=>(ad(),rd)),pencil:()=>Promise.resolve().then(()=>(cd(),od)),"pending-circle":()=>Promise.resolve().then(()=>(dd(),ld)),"person-dash":()=>Promise.resolve().then(()=>(md(),fd)),"person-plus":()=>Promise.resolve().then(()=>(_d(),hd)),"person-x":()=>Promise.resolve().then(()=>(bd(),vd)),person:()=>Promise.resolve().then(()=>(Cd(),xd)),phone:()=>Promise.resolve().then(()=>(Ed(),wd)),"pin-map-fill":()=>Promise.resolve().then(()=>(kd(),Dd)),pin:()=>Promise.resolve().then(()=>(Md(),Ad)),placeholder:()=>Promise.resolve().then(()=>(Fd(),Nd)),plane:()=>Promise.resolve().then(()=>(Rd(),Id)),play:()=>Promise.resolve().then(()=>(Vd(),zd)),"plus-circle":()=>Promise.resolve().then(()=>(Wd(),Hd)),"plus-square":()=>Promise.resolve().then(()=>(qd(),Gd)),plus:()=>Promise.resolve().then(()=>(Xd(),Jd)),printer:()=>Promise.resolve().then(()=>($d(),Zd)),"question-circle":()=>Promise.resolve().then(()=>(nf(),ef)),rocket:()=>Promise.resolve().then(()=>(of(),rf)),save:()=>Promise.resolve().then(()=>(lf(),sf)),search:()=>Promise.resolve().then(()=>(ff(),uf)),send:()=>Promise.resolve().then(()=>(hf(),pf)),"sg-crest":()=>Promise.resolve().then(()=>(vf(),gf)),share:()=>Promise.resolve().then(()=>(xf(),yf)),"shield-tick":()=>Promise.resolve().then(()=>(wf(),Sf)),"sidebar-collapse":()=>Promise.resolve().then(()=>(Df(),Tf)),"sidebar-expand":()=>Promise.resolve().then(()=>(Af(),Of)),"slash-circle":()=>Promise.resolve().then(()=>(Nf(),jf)),"slash-divider":()=>Promise.resolve().then(()=>(If(),Pf)),sliders:()=>Promise.resolve().then(()=>(zf(),Lf)),"sort-ascending":()=>Promise.resolve().then(()=>(Hf(),Bf)),"sort-descending":()=>Promise.resolve().then(()=>(Gf(),Uf)),speedometer:()=>Promise.resolve().then(()=>(Jf(),Kf)),"star-ai":()=>Promise.resolve().then(()=>(Zf(),Yf)),"star-fill":()=>Promise.resolve().then(()=>(ep(),Qf)),star:()=>Promise.resolve().then(()=>(rp(),tp)),stoplights:()=>Promise.resolve().then(()=>(op(),ip)),sun:()=>Promise.resolve().then(()=>(lp(),sp)),"switch-horizontal":()=>Promise.resolve().then(()=>(fp(),up)),"switch-vertical":()=>Promise.resolve().then(()=>(hp(),pp)),tablet:()=>Promise.resolve().then(()=>(vp(),gp)),telegram:()=>Promise.resolve().then(()=>(xp(),yp)),telephone:()=>Promise.resolve().then(()=>(wp(),Sp)),"three-dots-vertical":()=>Promise.resolve().then(()=>(Dp(),Tp)),"three-dots":()=>Promise.resolve().then(()=>(Ap(),Op)),ticket:()=>Promise.resolve().then(()=>(Np(),jp)),"toggle-off":()=>Promise.resolve().then(()=>(Ip(),Pp)),"toggle-on":()=>Promise.resolve().then(()=>(zp(),Lp)),train:()=>Promise.resolve().then(()=>(Hp(),Bp)),translate:()=>Promise.resolve().then(()=>(Gp(),Up)),trash:()=>Promise.resolve().then(()=>(Jp(),Kp)),"trend-down":()=>Promise.resolve().then(()=>(Zp(),Yp)),"trend-up":()=>Promise.resolve().then(()=>(em(),Qp)),truck:()=>Promise.resolve().then(()=>(rm(),tm)),"twitter-x":()=>Promise.resolve().then(()=>(om(),im)),unlock:()=>Promise.resolve().then(()=>(lm(),sm)),upload:()=>Promise.resolve().then(()=>(fm(),um)),"user-check":()=>Promise.resolve().then(()=>(hm(),pm)),"user-circle":()=>Promise.resolve().then(()=>(vm(),gm)),"user-pause":()=>Promise.resolve().then(()=>(xm(),ym)),"user-square":()=>Promise.resolve().then(()=>(wm(),Sm)),users:()=>Promise.resolve().then(()=>(Dm(),Tm)),"video-recorder":()=>Promise.resolve().then(()=>(Am(),Om)),"volume-max":()=>Promise.resolve().then(()=>(Nm(),jm)),"volume-x":()=>Promise.resolve().then(()=>(Im(),Pm)),"window-dash":()=>Promise.resolve().then(()=>(zm(),Lm)),"window-desktop":()=>Promise.resolve().then(()=>(Hm(),Bm)),"window-dock":()=>Promise.resolve().then(()=>(Gm(),Um)),"window-fullscreen":()=>Promise.resolve().then(()=>(Jm(),Km)),"window-plus":()=>Promise.resolve().then(()=>(Zm(),Ym)),"window-sidebar":()=>Promise.resolve().then(()=>(eh(),Qm)),"window-split":()=>Promise.resolve().then(()=>(rh(),th)),"window-stack":()=>Promise.resolve().then(()=>(oh(),ih)),"window-x":()=>Promise.resolve().then(()=>(lh(),sh)),window:()=>Promise.resolve().then(()=>(fh(),uh)),"xcircle-fill":()=>Promise.resolve().then(()=>(hh(),ph)),xcircle:()=>Promise.resolve().then(()=>(vh(),gh)),youtube:()=>Promise.resolve().then(()=>(xh(),yh)),"zoom-in":()=>Promise.resolve().then(()=>(wh(),Sh)),"zoom-out":()=>Promise.resolve().then(()=>(Dh(),Th))};F();var kh=l`: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)}`;F();let Ah=/* @__PURE__ */ new Map;var Q=class extends L{constructor(...e){super(...e),this.size=`lg`}static{this.styles=[...L.styles,kh]}willUpdate(e){e.has(`name`)&&this._loadIcon(this.name)}async _loadIcon(e){if(!e){this._icon=void 0;return}if(Ah.has(e)){this._icon=Ah.get(e);return}let t=Oh[e];if(!t){console.warn(`Icon not found: ${e}`),this._icon=void 0;return}try{let n=await t();Ah.set(e,n.default),this._icon=n.default}catch{console.warn(`Failed to load icon: ${e}`),this._icon=void 0}}updated(){let e=this.shadowRoot?.querySelector(`svg`);e&&(this.ariaLabel?(e.removeAttribute(`aria-hidden`),e.setAttribute(`aria-label`,this.ariaLabel)):(e.removeAttribute(`aria-label`),e.setAttribute(`aria-hidden`,`true`)))}render(){return this._icon??M}};I([T({type:String,reflect:!0})],Q.prototype,`name`,void 0),I([T({type:String,reflect:!0})],Q.prototype,`size`,void 0),I([T({type:String})],Q.prototype,`ariaLabel`,void 0),I([oe()],Q.prototype,`_icon`,void 0),F();var jh=l`:host([disabled]){cursor:not-allowed}.dropdown-item{align-items:center;background-color:var(--sgds-bg-transparent);clear:both;color:var(--sgds-color-default);cursor:pointer;display:flex;font-size:var(--sgds-font-size-label-sm);gap:var(--sgds-gap-sm);padding:var(--sgds-padding-sm) var(--sgds-padding-lg);text-align:inherit}.dropdown-item:hover{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus,.dropdown-item:focus-visible{background-color:var(--sgds-bg-translucent-subtle)}.dropdown-item:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.dropdown-item.active{background-color:var(--sgds-bg-translucent-subtle);color:var(--sgds-primary-color-default);text-decoration:none}.dropdown-item.disabled,.dropdown-item:disabled{opacity:var(--sgds-opacity-40);pointer-events:none}.dropdown-item.readonly{cursor:default}.dropdown-item.readonly:focus,.dropdown-item.readonly:focus-visible,.dropdown-item.readonly:hover{background-color:var(--sgds-bg-transparent);outline:none}::slotted(*){color:inherit!important;display:flex;gap:var(--sgds-gap-sm);text-decoration:none!important}::slotted(a),::slotted(sgds-checkbox){flex:1;margin:calc(var(--sgds-padding-sm)*-1) calc(var(--sgds-padding-lg)*-1);padding:var(--sgds-padding-sm) var(--sgds-padding-lg)}.dropdown-item.mainnav-dropdown-link{box-sizing:border-box;margin:auto;max-width:var(--sgds-mainnav-max-width,1440px);padding:var(--sgds-padding-sm) var(--sgds-mainnav-mobile-padding-x)}@media screen and (min-width:1024px){.dropdown-item.mainnav-dropdown-link{padding:var(--sgds-padding-sm) var(--sgds-mainnav-padding-x)}}`;F();var $=class extends L{constructor(...e){super(...e),this.active=!1,this.disabled=!1,this.readonly=!1,this.ariaLabel=``}static{this.styles=[lr,jh]}static{this.dependencies={"sgds-icon":Q}}connectedCallback(){super.connectedCallback(),this.addEventListener(`keydown`,e=>{e.key===`Enter`&&this.anchor.length>0&&this.anchor[0].click()}),this.setAttribute(`role`,`menuitem`),this.setAttribute(`aria-disabled`,`${this.disabled}`)}render(){return A`
       <div
         class="dropdown-item ${ur({disabled:this.disabled,active:this.active,readonly:this.readonly})}"
         tabindex=${this.disabled||this.readonly?`-1`:`0`}