@govtechsg/sgds-web-component 3.28.1-rc.0 → 3.29.0

package/components/Select/sgds-select.js

@@ -52,7 +52,7 @@ var SgdsSelect = class SgdsSelect extends SelectElement {
 	connectedCallback() {
 		super.connectedCallback();
 		this.addEventListener("sgds-hide", async () => {
-			(await this._input).focus();
+			(await this._input).focus({ preventScroll: true });
 		});
 	}
 	async firstUpdated(changedProperties) {

package/components/Select/sgds-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-select.js","names":["formTextControlStyles","selectStyle"],"sources":["../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus();\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    // If value was set before options slotted (e.g. React sets value prop\n    // before children mount), sync the display now that options are available.\n    if (this.value) {\n      this._updateDisplayValue();\n      this._setActiveToOption();\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialSelectedItem.length === 0) return;\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value?.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // Guard: if options haven't slotted yet, menuList is empty.\n    // _handleSlotChange will sync the display once options are available.\n    if (this.menuList.length === 0) return;\n\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"mappings":"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"}
+{"version":3,"file":"sgds-select.js","names":["formTextControlStyles","selectStyle"],"sources":["../../../src/components/Select/sgds-select.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { ref } from \"lit/directives/ref.js\";\nimport { SelectElement } from \"../../base/select-element\";\nimport formTextControlStyles from \"../../styles/form-text-control.css\";\nimport { watch } from \"../../utils/watch\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport selectStyle from \"./select.css\";\nimport SgdsSelectOption from \"./sgds-select-option\";\nimport SgdsSpinner from \"../Spinner/sgds-spinner\";\n/**\n * @summary Select is used to make one selection from a list through keyboard or mouse actions\n *\n * @event sgds-select - Emitted when an option is selected.\n * @event sgds-change - Emitted when the select value changes.\n * @event sgds-focus -  Emitted when user input is focused.\n * @event sgds-blur -  Emitted when user input is blurred.\n * @event sgds-invalid - Emitted when the select's invalid state is set to true.\n * @event sgds-valid - Emitted when the select's invalid state is set to false.\n *\n * @slot default - slot for sgds-select-option passed into select's menu\n */\nexport class SgdsSelect extends SelectElement {\n  static styles = [...SelectElement.styles, formTextControlStyles, selectStyle];\n  static childName = \"sgds-select-option\";\n  /** @internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon,\n    \"sgds-spinner\": SgdsSpinner,\n    [SgdsSelect.childName]: SgdsSelectOption\n  };\n  /** Disables native and sgds validation for the select. */\n  @property({ type: Boolean, reflect: true }) noValidate = false;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-hide\", async () => {\n      const sgdsInput = await this._input;\n      sgdsInput.focus({ preventScroll: true });\n    });\n  }\n  @queryAssignedElements({ flatten: true, selector: \"sgds-select-option\" })\n  protected options: SgdsSelectOption[];\n\n  async firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    this._updateDisplayValue();\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n    if (this.menuIsOpen) {\n      await this.updateFloatingPosition();\n    }\n  }\n\n  private async _handleSlotChange(e: Event) {\n    const assignedElements = (e.target as HTMLSlotElement).assignedElements({ flatten: true });\n\n    assignedElements.forEach(el =>\n      el.addEventListener(\"click\", (e: Event) => {\n        const option = e.target as SgdsSelectOption;\n        if (option.disabled) return;\n        this._handleItemSelected(e);\n      })\n    );\n    assignedElements.forEach(el =>\n      el.addEventListener(\"keydown\", (e: KeyboardEvent) => {\n        if (e.key === \"Enter\") {\n          this._handleItemSelected(e);\n        }\n      })\n    );\n    this.menuList = await this._getMenuListFromOptions(assignedElements);\n    // If value was set before options slotted (e.g. React sets value prop\n    // before children mount), sync the display now that options are available.\n    if (this.value) {\n      this._updateDisplayValue();\n      this._setActiveToOption();\n    }\n    this.input = await this._input;\n    this._mixinValidate(this.input);\n  }\n  private _updateDisplayValue() {\n    if (this.value && this.menuList.length > 0) {\n      const initialSelectedItem = this.menuList.filter(({ value }) => value === this.value);\n      if (initialSelectedItem.length === 0) return;\n      this.displayValue = initialSelectedItem[0].label;\n\n      this._setActiveToOption();\n    }\n  }\n  private _setActiveToOption() {\n    const activeIndex = this.menuList.findIndex(item => item.value?.toString() === this.value);\n    this.options.forEach((option, index) => {\n      option.active = index === activeIndex;\n    });\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  async _handleValueChange() {\n    // Guard: if options haven't slotted yet, menuList is empty.\n    // _handleSlotChange will sync the display once options are available.\n    if (this.menuList.length === 0) return;\n\n    this._setActiveToOption();\n\n    // when value change, always emit a change event\n    this.emit(\"sgds-change\");\n\n    if (this.value) {\n      this.emit(\"sgds-select\");\n    }\n    const sgdsInput = await this._input;\n    this._mixinSetFormValue();\n    this._mixinValidate(sgdsInput);\n\n    this._updateDisplayValue();\n    if (!this._isTouched && this.value === \"\") return;\n    if (this._mixinShouldSkipSgdsValidation()) return;\n\n    this.invalid = !this._mixinReportValidity();\n  }\n\n  protected async _handleItemSelected(e: Event) {\n    const itemEl = e.target as SgdsSelectOption;\n    const itemLabel = itemEl.textContent?.trim() ?? \"\";\n    const itemValueAttr = itemEl.getAttribute(\"value\") ?? itemLabel;\n    const foundItem = {\n      label: itemLabel,\n      value: itemValueAttr\n    };\n    this.value = foundItem.value.toString();\n    this.displayValue = foundItem.label;\n    this.hideMenu();\n  }\n\n  protected _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  protected async _handleInputBlur(e: Event) {\n    e.preventDefault();\n    this.emit(\"sgds-blur\");\n  }\n\n  /** For form reset  */\n  protected async _mixinResetFormControl() {\n    this.value = this.defaultValue;\n    const initialItem = this.menuList.filter(({ value }) => value === this.value);\n    if (initialItem.length <= 0) {\n      this.displayValue = \"\";\n    } else {\n      this.displayValue = initialItem[0].label;\n    }\n    this._mixinResetValidity(await this._input);\n  }\n  private _blockInputKeydown = (e: KeyboardEvent) => {\n    if (e.key !== \"Tab\") {\n      e.preventDefault();\n    }\n  };\n  /** Applicable for menuList prop only */\n  protected _renderMenu() {\n    const menu = this.menuList.map(item => {\n      const isActive = item.value === this.value;\n      return html`\n        <sgds-select-option\n          ?active=${isActive}\n          value=${item.value}\n          ?disabled=${item.disabled}\n          @click=${item.disabled ? null : this._handleItemSelected}\n          @keydown=${(e: KeyboardEvent) => {\n            if (e.key === \"Enter\") {\n              this._handleItemSelected(e);\n            }\n          }}\n        >\n          ${item.label}\n        </sgds-select-option>\n      `;\n    });\n    return this.menuList.length === 0 ? this._renderEmptyMenu() : menu;\n  }\n  protected _renderInput() {\n    const wantFeedbackStyle = this.hasFeedback;\n    return html`\n      <div\n        ${ref(this.myDropdown)}\n        class=\"form-control-group ${classMap({\n          disabled: this.disabled,\n          readonly: this.readonly,\n          \"is-invalid\": this.invalid && wantFeedbackStyle\n        })}\"\n        @click=${this._handleClick}\n      >\n        <input\n          class=\"form-control\"\n          type=\"text\"\n          id=${this._controlId}\n          name=${ifDefined(this.name)}\n          placeholder=${ifDefined(this.placeholder)}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          ?autofocus=${this.autofocus}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          .value=${this.displayValue}\n          @blur=${this._handleInputBlur}\n          @focus=${this._handleFocus}\n          aria-describedby=${ifDefined(this.invalid && this.hasFeedback ? `${this._controlId}-invalid` : undefined)}\n          aria-labelledby=\"${this._labelId} ${this._controlId}Help ${this.invalid && this.hasFeedback\n            ? `${this._controlId}-invalid`\n            : \"\"}\"\n          @keydown=${this._blockInputKeydown}\n        />\n        <sgds-icon name=\"chevron-down\" size=\"md\"></sgds-icon>\n      </div>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          disabled: this.disabled,\n          select: true,\n          \"form-control-container\": true,\n          \"m-width-160\": true\n        })}\n      >\n        ${this._renderLabel()}\n        <!-- The input -->\n        ${this._renderInput()} ${this._renderFeedback()}\n        <div\n          id=${this.dropdownMenuId}\n          class=\"dropdown-menu\"\n          tabindex=\"-1\"\n          role=\"menu\"\n          aria-label=${this.label || \"Options\"}\n          ${ref(this.menuRef)}\n        >\n          <slot id=\"default\" class=${classMap({ \"is-loading\": this.loading })} @slotchange=${this._handleSlotChange}\n            >${this._renderMenu()}</slot\n          >\n          ${this.loading ? this._renderLoadingMenu() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\nexport default SgdsSelect;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,IAAa,aAAb,MAAa,mBAAmB,cAAc;;;EAUa,KAAA,aAAA;EA2H3B,KAAA,sBAAA,MAAqB;GACjD,IAAI,EAAE,QAAQ,OACZ,EAAE,eAAe;EAErB;;;EAxIgB,KAAA,SAAA;GAAC,GAAG,cAAc;GAAQA;GAAuBC;EAAW;;;EACzD,KAAA,YAAA;;;EAEG,KAAA,eAAA;GACpB,aAAa;GACb,gBAAgB;IACf,WAAW,YAAY;EAC1B;;CAIA,oBAA0B;EACxB,MAAM,kBAAkB;EACxB,KAAK,iBAAiB,aAAa,YAAY;GAE7C,CAAA,MADwB,KAAK,OAAA,CACnB,MAAM,EAAE,eAAe,KAAK,CAAC;EACzC,CAAC;CACH;CAIA,MAAM,aAAa,mBAA2C;EAC5D,MAAM,aAAa,iBAAiB;EACpC,KAAK,oBAAoB;EACzB,KAAK,QAAQ,MAAM,KAAK;EACxB,KAAK,eAAe,KAAK,KAAK;EAC9B,IAAI,KAAK,YACP,MAAM,KAAK,uBAAuB;CAEtC;CAEA,MAAc,kBAAkB,GAAU;EACxC,MAAM,mBAAoB,EAAE,OAA2B,iBAAiB,EAAE,SAAS,KAAK,CAAC;EAEzF,iBAAiB,SAAQ,OACvB,GAAG,iBAAiB,UAAU,MAAa;GAEzC,IADe,EAAE,OACN,UAAU;GACrB,KAAK,oBAAoB,CAAC;EAC5B,CAAC,CACH;EACA,iBAAiB,SAAQ,OACvB,GAAG,iBAAiB,YAAY,MAAqB;GACnD,IAAI,EAAE,QAAQ,SACZ,KAAK,oBAAoB,CAAC;EAE9B,CAAC,CACH;EACA,KAAK,WAAW,MAAM,KAAK,wBAAwB,gBAAgB;EAGnE,IAAI,KAAK,OAAO;GACd,KAAK,oBAAoB;GACzB,KAAK,mBAAmB;EAC1B;EACA,KAAK,QAAQ,MAAM,KAAK;EACxB,KAAK,eAAe,KAAK,KAAK;CAChC;CACA,sBAA8B;EAC5B,IAAI,KAAK,SAAS,KAAK,SAAS,SAAS,GAAG;GAC1C,MAAM,sBAAsB,KAAK,SAAS,QAAQ,EAAE,YAAY,UAAU,KAAK,KAAK;GACpF,IAAI,oBAAoB,WAAW,GAAG;GACtC,KAAK,eAAe,oBAAoB,EAAE,CAAC;GAE3C,KAAK,mBAAmB;EAC1B;CACF;CACA,qBAA6B;EAC3B,MAAM,cAAc,KAAK,SAAS,WAAU,SAAQ,KAAK,OAAO,SAAS,MAAM,KAAK,KAAK;EACzF,KAAK,QAAQ,SAAS,QAAQ,UAAU;GACtC,OAAO,SAAS,UAAU;EAC5B,CAAC;CACH;CAEA,MACM,qBAAqB;EAGzB,IAAI,KAAK,SAAS,WAAW,GAAG;EAEhC,KAAK,mBAAmB;EAGxB,KAAK,KAAK,aAAa;EAEvB,IAAI,KAAK,OACP,KAAK,KAAK,aAAa;EAEzB,MAAM,YAAY,MAAM,KAAK;EAC7B,KAAK,mBAAmB;EACxB,KAAK,eAAe,SAAS;EAE7B,KAAK,oBAAoB;EACzB,IAAI,CAAC,KAAK,cAAc,KAAK,UAAU,IAAI;EAC3C,IAAI,KAAK,+BAA+B,GAAG;EAE3C,KAAK,UAAU,CAAC,KAAK,qBAAqB;CAC5C;CAEA,MAAgB,oBAAoB,GAAU;EAC5C,MAAM,SAAS,EAAE;EACjB,MAAM,YAAY,OAAO,aAAa,KAAK,KAAK;EAEhD,MAAM,YAAY;GAChB,OAAO;GACP,OAHoB,OAAO,aAAa,OAAO,KAAK;EAItD;EACA,KAAK,QAAQ,UAAU,MAAM,SAAS;EACtC,KAAK,eAAe,UAAU;EAC9B,KAAK,SAAS;CAChB;CAEA,eAAyB;EACvB,KAAK,KAAK,YAAY;CACxB;CAEA,MAAgB,iBAAiB,GAAU;EACzC,EAAE,eAAe;EACjB,KAAK,KAAK,WAAW;CACvB;;CAGA,MAAgB,yBAAyB;EACvC,KAAK,QAAQ,KAAK;EAClB,MAAM,cAAc,KAAK,SAAS,QAAQ,EAAE,YAAY,UAAU,KAAK,KAAK;EAC5E,IAAI,YAAY,UAAU,GACxB,KAAK,eAAe;OAEpB,KAAK,eAAe,YAAY,EAAE,CAAC;EAErC,KAAK,oBAAoB,MAAM,KAAK,MAAM;CAC5C;;CAOA,cAAwB;EACtB,MAAM,OAAO,KAAK,SAAS,KAAI,SAAQ;GACrC,MAAM,WAAW,KAAK,UAAU,KAAK;GACrC,OAAO,IAAI;;oBAEG,SAAS;kBACX,KAAK,MAAM;sBACP,KAAK,SAAS;mBACjB,KAAK,WAAW,OAAO,KAAK,oBAAoB;sBAC7C,MAAqB;IAC/B,IAAI,EAAE,QAAQ,SACZ,KAAK,oBAAoB,CAAC;GAE9B,EAAE;;YAEA,KAAK,MAAM;;;EAGnB,CAAC;EACD,OAAO,KAAK,SAAS,WAAW,IAAI,KAAK,iBAAiB,IAAI;CAChE;CACA,eAAyB;EACvB,MAAM,oBAAoB,KAAK;EAC/B,OAAO,IAAI;;UAEL,IAAI,KAAK,UAAU,EAAE;oCACK,SAAS;GACnC,UAAU,KAAK;GACf,UAAU,KAAK;GACf,cAAc,KAAK,WAAW;EAChC,CAAC,EAAE;iBACM,KAAK,aAAa;;;;;eAKpB,KAAK,WAAW;iBACd,UAAU,KAAK,IAAI,EAAE;wBACd,UAAU,KAAK,WAAW,EAAE;yBAC3B,KAAK,UAAU,SAAS,QAAQ;uBAClC,KAAK,UAAU;sBAChB,KAAK,SAAS;sBACd,KAAK,SAAS;sBACd,KAAK,SAAS;mBACjB,KAAK,aAAa;kBACnB,KAAK,iBAAiB;mBACrB,KAAK,aAAa;6BACR,UAAU,KAAK,WAAW,KAAK,cAAc,GAAG,KAAK,WAAW,YAAY,KAAA,CAAS,EAAE;6BACvF,KAAK,SAAS,GAAG,KAAK,WAAW,OAAO,KAAK,WAAW,KAAK,cAC5E,GAAG,KAAK,WAAW,YACnB,GAAG;qBACI,KAAK,mBAAmB;;;;;CAK3C;CAEA,SAAS;EACP,OAAO,IAAI;;gBAEC,SAAS;GACf,UAAU,KAAK;GACf,QAAQ;GACR,0BAA0B;GAC1B,eAAe;EACjB,CAAC,EAAE;;UAED,KAAK,aAAa,EAAE;;UAEpB,KAAK,aAAa,EAAE,GAAG,KAAK,gBAAgB,EAAE;;eAEzC,KAAK,eAAe;;;;uBAIZ,KAAK,SAAS,UAAU;YACnC,IAAI,KAAK,OAAO,EAAE;;qCAEO,SAAS,EAAE,cAAc,KAAK,QAAQ,CAAC,EAAE,eAAe,KAAK,kBAAkB;eACrG,KAAK,YAAY,EAAE;;YAEtB,KAAK,UAAU,KAAK,mBAAmB,IAAI,QAAQ;;;;CAI7D;AACF;AAxNG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,WAAA,WAAA,cAAA,KAAA,CAAA;AASzC,WAAA,CAAA,sBAAsB;CAAE,SAAS;CAAM,UAAU;AAAqB,CAAC,CAAA,GAAA,WAAA,WAAA,WAAA,KAAA,CAAA;AAwDvE,WAAA,CAAA,MAAM,SAAS,EAAE,sBAAsB,KAAK,CAAC,CAAA,GAAA,WAAA,WAAA,sBAAA,IAAA"}

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

@@ -2431,7 +2431,7 @@ let n=e._$AN;if(n===void 0)return!1;for(let e of n)e._$AO?.(t,!1),Rp(e,t);return
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
-let Rh=Symbol.for(``),zh=e=>{if(e?.r===Rh)return e?._$litStatic$},Bh=(e,...t)=>({_$litStatic$:t.reduce((t,n,r)=>t+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(n)+e[r+1],e[0]),r:Rh}),Vh=/* @__PURE__ */ new Map,Hh=(e=>(t,...n)=>{let r=n.length,i,a,o=[],s=[],c,l=0,u=!1;for(;l<r;){for(c=t[l];l<r&&(a=n[l],(i=zh(a))!==void 0);)c+=i+t[++l],u=!0;l!==r&&s.push(a),o.push(c),l++}if(l===r&&o.push(t[r]),u){let e=o.join(`$$lit$$`);(t=Vh.get(e))===void 0&&(o.raw=o,Vh.set(e,t=o)),n=s}return e(t,...n)})(D);M();var Uh=l`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`,Q=class extends L{constructor(...e){super(...e),this.variant=`primary`,this.tone=`brand`,this.size=`md`,this.active=!1,this.disabled=!1,this.target=`_self`}static{this.styles=[...L.styles,Uh]}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit(`sgds-blur`)}_handleFocus(){this.emit(`sgds-focus`)}_handleClick(e){if(this.disabled||this.loading){e.preventDefault(),e.stopPropagation();return}}_handleKeydown(e){if(e.key===`Enter`&&this.loading){e.preventDefault(),e.stopPropagation();return}}_assignSpinnerSize(e){if(e===`xs`||e===`sm`)return`xs`;if(e===`md`||e===`lg`)return`sm`}_assignSpinnerTone(e,t){return e===`fixed-light`&&t===`primary`?`fixed-dark`:e===`neutral`&&t===`primary`?`inverse`:e===`fixed-light`||t===`primary`?`fixed-light`:e===`neutral`&&(t===`outline`||t===`ghost`)?`neutral`:`brand`}};I([qe(`.btn`)],Q.prototype,`button`,void 0),I([N({reflect:!0})],Q.prototype,`variant`,void 0),I([N({reflect:!0})],Q.prototype,`tone`,void 0),I([N({reflect:!0})],Q.prototype,`size`,void 0),I([N({type:Boolean,reflect:!0})],Q.prototype,`active`,void 0),I([N({type:Boolean,reflect:!0})],Q.prototype,`disabled`,void 0),I([N({type:String,reflect:!0})],Q.prototype,`href`,void 0),I([N({type:String,reflect:!0})],Q.prototype,`target`,void 0),I([N({type:String,reflect:!0})],Q.prototype,`download`,void 0),I([N({type:String})],Q.prototype,`ariaLabel`,void 0),I([N({type:Boolean})],Q.prototype,`loading`,void 0);function Wh(e){if(!e)return e;let t=e.trim().toLowerCase();if(!(t.startsWith(`javascript:`)||t.startsWith(`data:`)||t.startsWith(`vbscript:`)))return e}M();var Gh=l`:host{--sgds-spinner-bg:var(--sgds-primary-surface-default);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-surface-default)}:host([tone=neutral]){--sgds-spinner-bg:var(--sgds-surface-inverse)}:host([tone=inverse]){--sgds-spinner-bg:var(--sgds-surface-default)}:host([tone=fixed-light]){--sgds-spinner-bg:var(--sgds-surface-fixed-light)}:host([tone=fixed-dark]){--sgds-spinner-bg:var(--sgds-surface-fixed-dark)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner-wrapper.horizontal{flex-direction:row}.spinner{--border-thickness:4px;animation:spinner .75s linear infinite;border:var(--border-thickness) solid var(--sgds-bg-translucent);border-radius:50%;border-right:var(--border-thickness) solid var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-xs{--border-thickness:2px;height:var(--sgds-dimension-16);width:var(--sgds-dimension-16)}.spinner-sm{--border-thickness:3px;height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{--border-thickness:6px;height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-xl{--border-thickness:8px;height:var(--sgds-dimension-64);width:var(--sgds-dimension-64)}.spinner-label{color:var(--sgds-neutral-color-default);font-size:var(--sgds-font-size-label-sm)}
+let Rh=Symbol.for(``),zh=e=>{if(e?.r===Rh)return e?._$litStatic$},Bh=(e,...t)=>({_$litStatic$:t.reduce((t,n,r)=>t+(e=>{if(e._$litStatic$!==void 0)return e._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${e}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(n)+e[r+1],e[0]),r:Rh}),Vh=/* @__PURE__ */ new Map,Hh=(e=>(t,...n)=>{let r=n.length,i,a,o=[],s=[],c,l=0,u=!1;for(;l<r;){for(c=t[l];l<r&&(a=n[l],(i=zh(a))!==void 0);)c+=i+t[++l],u=!0;l!==r&&s.push(a),o.push(c),l++}if(l===r&&o.push(t[r]),u){let e=o.join(`$$lit$$`);(t=Vh.get(e))===void 0&&(o.raw=o,Vh.set(e,t=o)),n=s}return e(t,...n)})(D);M();var Uh=l`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-color:var(--sgds-color-fixed-light);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md);--btn-opacity:var(--sgds-opacity-100,1)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=brand]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-border-width:var(--sgds-border-width-1)}:host([variant=outline][tone=brand]){--btn-border-color:var(--sgds-primary-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-color:var(--sgds-primary-color-default);--btn-hover-bg:var(--sgds-primary-bg-translucent)}:host([variant=ghost][tone=brand]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=primary][tone=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline][tone=danger]){--btn-border-color:var(--sgds-danger-border-color-default);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=ghost][tone=danger]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-danger-surface-translucent);--btn-color:var(--sgds-danger-color-default)}:host([variant=primary][tone=fixed-light]){--btn-bg:var(--sgds-surface-fixed-light);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 0%,var(--sgds-bg-translucent-fixed-dark,hsla(0,0%,5%,.2)) 100%),var(--sgds-surface-fixed-light,#fff);--btn-color:var(--sgds-color-fixed-dark)}:host([variant=outline][tone=fixed-light]){--btn-border-color:var(--sgds-border-color-fixed-light);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost][tone=fixed-light]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-fixed-dark) 0%,var(--sgds-bg-translucent-fixed-dark) 100%),var(--sgds-bg-transparent);--btn-color:var(--sgds-color-fixed-light)}:host([variant=primary][tone=neutral]){--btn-bg:var(--sgds-surface-inverse);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-surface-inverse);--btn-color:var(--sgds-color-inverse)}:host([variant=outline][tone=neutral]){--btn-border-color:var(--sgds-border-color-emphasis);--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:linear-gradient(0deg,var(--sgds-bg-translucent-inverse) 0%,var(--sgds-bg-translucent-inverse) 100%),var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost][tone=neutral]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-bg-translucent-subtle);--btn-color:var(--sgds-color-default)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-label-lg);height:var(--sgds-dimension-56);line-height:var(--sgds-line-height-md);min-width:var(--sgds-dimension-112);padding:var(--sgds-padding-none) var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-label-sm);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-2-xs);min-width:var(--sgds-dimension-80);padding:var(--sgds-padding-none) var(--sgds-padding-md)}:host([size=xs]) .btn{font-size:var(--sgds-font-size-label-xs);height:var(--sgds-dimension-32);line-height:var(--sgds-line-height-3-xs);min-width:var(--sgds-dimension-64);padding:var(--sgds-padding-none) var(--sgds-padding-sm)}.btn{align-items:center;background-color:var(--btn-bg);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-label-md);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-xs);min-width:var(--sgds-dimension-96);opacity:var(--btn-opacity);padding:var(--sgds-padding-none) var(--sgds-padding-lg);position:relative;text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}.btn.active,.btn:hover{background:var(--btn-hover-bg)}.btn:focus-visible{background:var(--btn-hover-bg);border-color:transparent;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}:host(:not([disabled])) .btn:active:after{background-color:var(--sgds-bg-translucent);border-radius:inherit;content:"";inset:0;position:absolute}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-40)}.btn.loading{cursor:default}.btn slot::slotted(*){color:var(--btn-color)}`,Q=class extends L{constructor(...e){super(...e),this.variant=`primary`,this.tone=`brand`,this.size=`md`,this.active=!1,this.disabled=!1,this.target=`_self`}static{this.styles=[...L.styles,Uh]}focus(e){this.button.focus(e)}click(){this.button.click()}blur(){this.button.blur()}_handleBlur(){this.emit(`sgds-blur`)}_handleFocus(){this.emit(`sgds-focus`)}_handleClick(e){if(this.disabled||this.loading){e.preventDefault(),e.stopPropagation();return}}_handleKeydown(e){if(e.key===`Enter`&&this.loading){e.preventDefault(),e.stopPropagation();return}}_assignSpinnerSize(e){if(e===`xs`||e===`sm`)return`xs`;if(e===`md`||e===`lg`)return`sm`}_assignSpinnerTone(e,t){return e===`fixed-light`&&t===`primary`?`fixed-dark`:e===`neutral`&&t===`primary`?`inverse`:e===`fixed-light`||t===`primary`?`fixed-light`:e===`neutral`&&(t===`outline`||t===`ghost`)?`neutral`:`brand`}};I([qe(`.btn`)],Q.prototype,`button`,void 0),I([N({reflect:!0})],Q.prototype,`variant`,void 0),I([N({reflect:!0})],Q.prototype,`tone`,void 0),I([N({reflect:!0})],Q.prototype,`size`,void 0),I([N({type:Boolean,reflect:!0})],Q.prototype,`active`,void 0),I([N({type:Boolean,reflect:!0})],Q.prototype,`disabled`,void 0),I([N({type:String,reflect:!0})],Q.prototype,`href`,void 0),I([N({type:String,reflect:!0})],Q.prototype,`target`,void 0),I([N({type:String,reflect:!0})],Q.prototype,`download`,void 0),I([N({type:String})],Q.prototype,`ariaLabel`,void 0),I([N({type:Boolean})],Q.prototype,`loading`,void 0);function Wh(e){if(!e)return e;let t=e.trim().toLowerCase();if(!(t.startsWith(`javascript:`)||t.startsWith(`data:`)||t.startsWith(`vbscript:`)))return e}M();var Gh=l`:host{--sgds-spinner-bg:var(--sgds-primary-surface-default);display:inline-flex}:host([variant=neutral]){--sgds-spinner-bg:var(--sgds-neutral-surface-default)}:host([tone=neutral]){--sgds-spinner-bg:var(--sgds-surface-inverse)}:host([tone=inverse]){--sgds-spinner-bg:var(--sgds-surface-default)}:host([tone=fixed-light]){--sgds-spinner-bg:var(--sgds-surface-fixed-light)}:host([tone=fixed-dark]){--sgds-spinner-bg:var(--sgds-surface-fixed-dark)}.spinner-wrapper{align-items:center;display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.spinner-wrapper.horizontal{flex-direction:row}.spinner{--border-thickness:4px;animation:spinner .75s linear infinite;border:var(--border-thickness) solid var(--sgds-bg-translucent);border-radius:50%;border-right:var(--border-thickness) solid var(--sgds-spinner-bg);color:var(--sgds-spinner-color);display:inline-flex;height:var(--sgds-dimension-32);width:var(--sgds-dimension-32)}.spinner-xs{--border-thickness:2px;height:var(--sgds-dimension-16);width:var(--sgds-dimension-16)}.spinner-sm{--border-thickness:3px;height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.spinner-lg{--border-thickness:6px;height:var(--sgds-dimension-48);width:var(--sgds-dimension-48)}.spinner-xl{--border-thickness:8px;height:var(--sgds-dimension-64);width:var(--sgds-dimension-64)}.spinner-label{color:var(--sgds-neutral-color-default);font-size:var(--sgds-font-size-label-sm)}
 
 
 /*! CSS Used keyframes */@keyframes spinner{to{transform:rotate(1turn)}}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;M();var Kh=l`.text-primary{color:var(--sgds-primary-rgb)!important}.text-secondary{color:var(--sgds-secondary-rgb)!important}.text-success{color:var(--sgds-success-rgb)!important}.text-info{color:var(--sgds-info-rgb)!important}.text-warning{color:var(--sgds-warning-rgb)!important}.text-danger{color:var(--sgds-danger-rgb)!important}.text-light{color:var(--sgds-light-rgb)!important}.text-dark{color:var(--sgds-dark-rgb)!important}.text-muted{color:var(--sgds-secondary-color)!important}`;M();var qh=class extends L{constructor(...e){super(...e),this.variant=`primary`,this.tone=`brand`,this.size=`md`,this.orientation=`vertical`}static{this.styles=[...L.styles,Kh,Gh]}render(){return Hh`