@govtechsg/sgds-web-component 3.19.0-rc.0 → 3.19.0-rc.1

package/components/Checkbox/sgds-checkbox-group.d.ts

@@ -1,4 +1,5 @@
 import { PropertyValueMap } from "lit";
+import SgdsIcon from "../Icon/sgds-icon";
 import FormControlElement from "../../base/form-control-element";
 declare const SgdsCheckboxGroup_base: (new (...args: any[]) => import("../../utils/validatorMixin").ToBeValidatedElementInterface) & typeof FormControlElement;
 /**
@@ -12,6 +13,10 @@ declare const SgdsCheckboxGroup_base: (new (...args: any[]) => import("../../uti
  */
 export declare class SgdsCheckboxGroup extends SgdsCheckboxGroup_base {
     static styles: import("lit").CSSResult[];
+    /**@internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+    };
     /** The checkbox group's label  */
     label: string;
     /**Feedback text for error state when validated */

package/components/Checkbox/sgds-checkbox-group.js

@@ -2,6 +2,7 @@ import { __decorate } from 'tslib';
 import { html, nothing } from 'lit';
 import { property, state, queryAssignedElements } from 'lit/decorators.js';
 import { live } from 'lit/directives/live.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 import FormControlElement from '../../base/form-control-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
 import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
@@ -188,12 +189,7 @@ class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
             ? html `
               <div class="invalid-feedback-container">
                 <slot name="invalidIcon">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                    <path
-                      d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
-                      fill="currentColor"
-                    />
-                  </svg>
+                  <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
                 </slot>
                 <div id="checkbox-group-feedback" class="invalid-feedback">
                   ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
@@ -206,6 +202,10 @@ class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {
     }
 }
 SgdsCheckboxGroup.styles = [...FormControlElement.styles, css_248z];
+/**@internal */
+SgdsCheckboxGroup.dependencies = {
+    "sgds-icon": SgdsIcon
+};
 __decorate([
     property({ reflect: true })
 ], SgdsCheckboxGroup.prototype, "label", void 0);

package/components/Checkbox/sgds-checkbox-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                    <path\n                      d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                      fill=\"currentColor\"\n                    />\n                  </svg>\n                </slot>\n                <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["checkboxGroupStyles"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox-group.js","sources":["../../../src/components/Checkbox/sgds-checkbox-group.ts"],"sourcesContent":["import { html, nothing, PropertyValueMap } from \"lit\";\nimport { property, queryAssignedElements, state } from \"lit/decorators.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport SgdsCheckbox from \"./sgds-checkbox\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxGroupStyles from \"./checkbox-group.css\";\n/**\n * @summary CheckboxGroup is a form component for multiselection of checkboxes.\n *\n * @event sgds-change - Emitted when the value of the CheckboxGroup changes. This happens when checkboxes are checked or unchecked.\n *\n * @slot default - Pass in `sgds-checkbox` into the default slot\n * @slot invalidIcon - The slot for invalid icon\n *\n */\nexport class SgdsCheckboxGroup extends SgdsFormValidatorMixin(FormControlElement) {\n  static styles = [...FormControlElement.styles, checkboxGroupStyles];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** The checkbox group's label  */\n  @property({ reflect: true }) label = \"\";\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"Please tick at least one box if you want to proceed\";\n\n  /** Allows invalidFeedback, invalid styles to be visible. When SgdsCheckboxGroup is used, it overrides the value of hasFeedback on SgdsCheckbox with its own value. */\n  @property({ type: Boolean, reflect: true }) hasFeedback = false;\n\n  /** The checkbox group's hint text */\n  @property({ reflect: true }) hintText = \"\";\n\n  /** Makes the checkbox group a required field. Only available for when multiselect is true */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Consolidates the values of its child checked checkboxes into a single string with semi-colon delimiter. Only available when required is true  */\n  @property({ reflect: true }) value = \"\";\n\n  @state() private _isTouched = false;\n\n  @defaultValue()\n  defaultValue = \"\";\n\n  @state()\n  private _blurredCheckboxes = new Set<SgdsCheckbox>();\n\n  @state()\n  private formEvent: FormEvent;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\"sgds-check\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      !this.value.includes(value) && this._addValue(value);\n    });\n    this.addEventListener(\"sgds-uncheck\", (e: CustomEvent) => {\n      const { value } = e.detail;\n      this._removeValue(value);\n    });\n    /** Blurring when all checkboxes are blurred */\n    this.addEventListener(\"sgds-blur\", e => {\n      const checkbox = e.target as SgdsCheckbox;\n      this._blurredCheckboxes.add(checkbox);\n      if (Array.from(this._blurredCheckboxes).length === this._checkboxes.length) {\n        this._isTouched = true;\n        this._blurredCheckboxes.clear();\n      }\n    });\n  }\n  firstUpdated(changedProperties: PropertyValueMap<this>) {\n    super.firstUpdated(changedProperties);\n    if (this.value) {\n      this._updateInputValue();\n    }\n\n    if (this.invalid) {\n      this._updateInvalid();\n    }\n  }\n\n  protected _renderHintText() {\n    const hintTextTemplate = html` <div class=\"form-text\" id=\"${this._controlId}Help\">${this.hintText}</div> `;\n    return this.hintText && hintTextTemplate;\n  }\n\n  @queryAssignedElements()\n  private _checkboxes!: Array<SgdsCheckbox>;\n\n  private _addValue(newValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    valueArray.push(newValue);\n    this.value = valueArray.join(\";\");\n  }\n  private _removeValue(oldValue: string) {\n    const valueArray = this.value ? this.value.split(\";\") : [];\n    const newValueArray = valueArray.filter(v => v !== oldValue);\n    this.value = newValueArray.join(\";\");\n  }\n\n  private _sanitizeSlot() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = checkbox.defaultChecked = this.value.includes(checkbox.value);\n\n      checkbox.hasFeedback = this.hasFeedback ? \"style\" : null;\n      if (checkbox.required) {\n        console.error(\"Checkboxes in a group cannot have required or hasFeedback prop set to true\");\n        checkbox.remove();\n      }\n    });\n    this._disabledChildCheckboxes();\n  }\n\n  private _disabledChildCheckboxes() {\n    if (this.disabled) {\n      const checkboxes = this._checkboxes;\n      checkboxes.forEach(checkbox => (checkbox.disabled = this.disabled));\n    }\n  }\n\n  @watch(\"value\", { waitUntilFirstUpdate: true })\n  _handleValueChange() {\n    if (this.formEvent === \"reset\" && this.value === this.defaultValue) {\n      this.formEvent = null;\n      return;\n    }\n\n    this.emit(\"sgds-change\");\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(checkbox => {\n      checkbox.checked = this.value.includes(checkbox.value);\n    });\n    this._updateInputValue();\n    this._updateInvalid();\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n      this._updateInvalid();\n    }\n  }\n  @watch(\"invalid\", { waitUntilFirstUpdate: true })\n  _updateInvalid() {\n    const checkboxes = this._checkboxes;\n    checkboxes.forEach(ch => (ch.invalid = this.invalid));\n  }\n\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n  /**\n   * checkbox requries a custom _mixinResetFormControl as the update of input value\n   * requires to fire a reset event manually\n   * */\n  private _mixinResetFormControl() {\n    this.value = this.input.value = this.defaultValue;\n    this._updateInputValue(\"reset\");\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * when input value is set programatically, need to manually dispatch a change event\n   * In order to prevent race conditions and ensure sequence of events, set input's value here instead of binding to value prop of input\n   */\n  private async _updateInputValue(eventName: FormEvent = \"change\") {\n    this.input.value = this.value;\n\n    this.input.dispatchEvent(new InputEvent(eventName));\n    this.formEvent = eventName;\n  }\n\n  render() {\n    return html`\n      <fieldset>\n        <div class=\"label-hint-container\">\n          <label class=\"form-label\">${this.label}</label>\n          ${this._renderHintText()}\n        </div>\n        <div class=\"checkbox-container\">\n          <slot @slotchange=${this._sanitizeSlot}></slot>\n        </div>\n        <input\n          type=\"text\"\n          class=\"checkbox-group-validation-input\"\n          ?required=${this.required}\n          tabindex=\"-1\"\n          @change=${(e: Event) => {\n            super._mixinHandleChange(e);\n          }}\n          .value=${live(this.value)}\n          aria-describedby=${this.invalid && this.hasFeedback ? \"checkbox-group-feedback\" : `${this._controlId}Help`}\n        />\n        ${this.invalid && this.hasFeedback\n          ? html`\n              <div class=\"invalid-feedback-container\">\n                <slot name=\"invalidIcon\">\n                  <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n                </slot>\n                <div id=\"checkbox-group-feedback\" class=\"invalid-feedback\">\n                  ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n                </div>\n              </div>\n            `\n          : nothing}\n      </fieldset>\n    `;\n  }\n}\n\nexport default SgdsCheckboxGroup;\n\ntype FormEvent = \"reset\" | \"change\" | null;\n"],"names":["checkboxGroupStyles"],"mappings":";;;;;;;;;;;AAUA;;;;;;;;AAQG;MACU,iBAAkB,SAAQ,sBAAsB,CAAC,kBAAkB,CAAC,CAAA;AAAjF,IAAA,WAAA,GAAA;;;QAS+B,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;;QAGG,IAAe,CAAA,eAAA,GAAG,qDAAqD,CAAC;;QAGvE,IAAW,CAAA,WAAA,GAAG,KAAK,CAAC;;QAGnC,IAAQ,CAAA,QAAA,GAAG,EAAE,CAAC;;QAGC,IAAQ,CAAA,QAAA,GAAG,KAAK,CAAC;;QAGhC,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;QAEvB,IAAU,CAAA,UAAA,GAAG,KAAK,CAAC;QAGpC,IAAY,CAAA,YAAA,GAAG,EAAE,CAAC;AAGV,QAAA,IAAA,CAAA,kBAAkB,GAAG,IAAI,GAAG,EAAgB,CAAC;KA2LtD;IAtLC,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,YAAY,EAAE,CAAC,CAAc,KAAI;AACrD,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;AAC3B,YAAA,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AACvD,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,gBAAgB,CAAC,cAAc,EAAE,CAAC,CAAc,KAAI;AACvD,YAAA,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;AAC3B,YAAA,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAC,CAAC,CAAC;;AAEH,QAAA,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,IAAG;AACrC,YAAA,MAAM,QAAQ,GAAG,CAAC,CAAC,MAAsB,CAAC;AAC1C,YAAA,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACtC,YAAA,IAAI,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,MAAM,KAAK,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE;AAC1E,gBAAA,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvB,gBAAA,IAAI,CAAC,kBAAkB,CAAC,KAAK,EAAE,CAAC;aACjC;AACH,SAAC,CAAC,CAAC;KACJ;AACD,IAAA,YAAY,CAAC,iBAAyC,EAAA;AACpD,QAAA,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;AACtC,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,iBAAiB,EAAE,CAAC;SAC1B;AAED,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAES,eAAe,GAAA;AACvB,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAA,CAA+B,4BAAA,EAAA,IAAI,CAAC,UAAU,CAAS,MAAA,EAAA,IAAI,CAAC,QAAQ,SAAS,CAAC;AAC3G,QAAA,OAAO,IAAI,CAAC,QAAQ,IAAI,gBAAgB,CAAC;KAC1C;AAKO,IAAA,SAAS,CAAC,QAAgB,EAAA;QAChC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAC3D,QAAA,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC1B,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACnC;AACO,IAAA,YAAY,CAAC,QAAgB,EAAA;QACnC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;AAC3D,QAAA,MAAM,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC,CAAC;QAC7D,IAAI,CAAC,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtC;IAEO,aAAa,GAAA;AACnB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,IAAG;AAC5B,YAAA,QAAQ,CAAC,OAAO,GAAG,QAAQ,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AAEjF,YAAA,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;AACzD,YAAA,IAAI,QAAQ,CAAC,QAAQ,EAAE;AACrB,gBAAA,OAAO,CAAC,KAAK,CAAC,4EAA4E,CAAC,CAAC;gBAC5F,QAAQ,CAAC,MAAM,EAAE,CAAC;aACnB;AACH,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,wBAAwB,EAAE,CAAC;KACjC;IAEO,wBAAwB,GAAA;AAC9B,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,YAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,KAAK,QAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;SACrE;KACF;IAGD,kBAAkB,GAAA;AAChB,QAAA,IAAI,IAAI,CAAC,SAAS,KAAK,OAAO,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,YAAY,EAAE;AAClE,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,OAAO;SACR;AAED,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;AACzB,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,CAAC,QAAQ,IAAG;AAC5B,YAAA,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;AACzD,SAAC,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAGD,gBAAgB,GAAA;AACd,QAAA,IAAI,IAAI,CAAC,UAAU,EAAE;YACnB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;YAC3C,IAAI,CAAC,cAAc,EAAE,CAAC;SACvB;KACF;IAED,cAAc,GAAA;AACZ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC;AACpC,QAAA,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;KACvD;AAED;;;AAGG;IACI,cAAc,GAAA;AACnB,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC;KACpC;AACD;;AAEG;IACI,aAAa,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,mBAAmB,EAAE,CAAC;KACnC;AAED;;AAEG;AACH,IAAA,IAAW,QAAQ,GAAA;AACjB,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;KACjC;AACD;;AAEG;AACH,IAAA,IAAW,iBAAiB,GAAA;AAC1B,QAAA,OAAO,IAAI,CAAC,0BAA0B,EAAE,CAAC;KAC1C;AACD;;;AAGK;IACG,sBAAsB,GAAA;AAC5B,QAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC;AAClD,QAAA,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;AAChC,QAAA,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACtC;AACD;;;AAGG;AACK,IAAA,MAAM,iBAAiB,CAAC,SAAA,GAAuB,QAAQ,EAAA;QAC7D,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAE9B,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC;AACpD,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,CAAC;KAC5B;IAED,MAAM,GAAA;AACJ,QAAA,OAAO,IAAI,CAAA,CAAA;;;AAGuB,oCAAA,EAAA,IAAI,CAAC,KAAK,CAAA;YACpC,IAAI,CAAC,eAAe,EAAE,CAAA;;;AAGJ,4BAAA,EAAA,IAAI,CAAC,aAAa,CAAA;;;;;AAK1B,oBAAA,EAAA,IAAI,CAAC,QAAQ,CAAA;;oBAEf,CAAC,CAAQ,KAAI;AACrB,YAAA,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC;SAC7B,CAAA;AACQ,iBAAA,EAAA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;AACN,2BAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW,GAAG,yBAAyB,GAAG,GAAG,IAAI,CAAC,UAAU,CAAM,IAAA,CAAA,CAAA;;AAE1G,QAAA,EAAA,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,WAAW;cAC9B,IAAI,CAAA,CAAA;;;;;;AAMI,kBAAA,EAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAA;;;AAGjF,YAAA,CAAA;AACH,cAAE,OAAO,CAAA;;KAEd,CAAC;KACH;;AAzNM,iBAAM,CAAA,MAAA,GAAG,CAAC,GAAG,kBAAkB,CAAC,MAAM,EAAEA,QAAmB,CAArD,CAAuD;AAEpE;AACO,iBAAA,CAAA,YAAY,GAAG;AACpB,IAAA,WAAW,EAAE,QAAQ;AACtB,CAFkB,CAEjB;AAG2B,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGG,UAAA,CAAA;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAyE,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,iBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGvE,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAqB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGnC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAe,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGC,UAAA,CAAA;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAkB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGhC,UAAA,CAAA;AAA5B,IAAA,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAAY,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,OAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAEvB,UAAA,CAAA;AAAhB,IAAA,KAAK,EAAE;AAA4B,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,YAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGpC,UAAA,CAAA;AADC,IAAA,YAAY,EAAE;AACG,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,cAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAGV,UAAA,CAAA;AADP,IAAA,KAAK,EAAE;AAC6C,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAG7C,UAAA,CAAA;AADP,IAAA,KAAK,EAAE;AACqB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,WAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAuCrB,UAAA,CAAA;AADP,IAAA,qBAAqB,EAAE;AACkB,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAmC1C,UAAA,CAAA;IADC,KAAK,CAAC,OAAO,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAc9C,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA,CAAA;AAGD,UAAA,CAAA;IADC,KAAK,CAAC,YAAY,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAMnD,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,kBAAA,EAAA,IAAA,CAAA,CAAA;AAED,UAAA,CAAA;IADC,KAAK,CAAC,SAAS,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;AAIhD,CAAA,EAAA,iBAAA,CAAA,SAAA,EAAA,gBAAA,EAAA,IAAA,CAAA;;;;"}

package/components/Checkbox/sgds-checkbox.d.ts

@@ -1,3 +1,4 @@
+import SgdsIcon from "../Icon/sgds-icon";
 import FormControlElement from "../../base/form-control-element";
 import { SgdsFormControl } from "../../utils/formSubmitController";
 declare const SgdsCheckbox_base: (new (...args: any[]) => import("../../utils/validatorMixin").ToBeValidatedElementInterface) & typeof FormControlElement;
@@ -14,6 +15,10 @@ declare const SgdsCheckbox_base: (new (...args: any[]) => import("../../utils/va
  */
 export declare class SgdsCheckbox extends SgdsCheckbox_base implements SgdsFormControl {
     static styles: import("lit").CSSResult[];
+    /**@internal */
+    static dependencies: {
+        "sgds-icon": typeof SgdsIcon;
+    };
     /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */
     value: string;
     /** Draws the checkbox in a checked state. */

package/components/Checkbox/sgds-checkbox.js

@@ -4,6 +4,7 @@ import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
+import { SgdsIcon } from '../Icon/sgds-icon.js';
 import FormControlElement from '../../base/form-control-element.js';
 import { defaultValue } from '../../utils/defaultvalue.js';
 import { SgdsFormValidatorMixin } from '../../utils/validatorMixin.js';
@@ -172,12 +173,7 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
             ? html `
             <div class="invalid-feedback-container">
               <slot name="invalidIcon">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <path
-                    d="M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z"
-                    fill="currentColor"
-                  />
-                </svg>
+                <sgds-icon name="exclamation-circle-fill" size="md"></sgds-icon>
               </slot>
               <div id="checkbox-feedback" tabindex="0" class="invalid-feedback">
                 ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}
@@ -189,6 +185,10 @@ class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) {
     }
 }
 SgdsCheckbox.styles = [...FormControlElement.styles, css_248z, css_248z$1];
+/**@internal */
+SgdsCheckbox.dependencies = {
+    "sgds-icon": SgdsIcon
+};
 __decorate([
     property({ type: String, reflect: true })
 ], SgdsCheckbox.prototype, "value", void 0);

package/components/Checkbox/sgds-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"sgds-checkbox.js","sources":["../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n                  <path\n                    d=\"M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10ZM10 6.25C9.49805 6.25 9.10584 6.68339 9.15578 7.18285L9.48461 10.4711C9.51109 10.7359 9.7339 10.9375 10 10.9375C10.2661 10.9375 10.4889 10.7359 10.5154 10.4711L10.8442 7.18285C10.8942 6.68339 10.5019 6.25 10 6.25ZM10.0014 11.875C9.48368 11.875 9.06394 12.2947 9.06394 12.8125C9.06394 13.3303 9.48368 13.75 10.0014 13.75C10.5192 13.75 10.9389 13.3303 10.9389 12.8125C10.9389 12.2947 10.5192 11.875 10.0014 11.875Z\"\n                    fill=\"currentColor\"\n                  />\n                </svg>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["formCheckStyles","checkboxStyle"],"mappings":"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"}
+{"version":3,"file":"sgds-checkbox.js","sources":["../../../src/components/Checkbox/sgds-checkbox.ts"],"sourcesContent":["import { html, nothing } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { live } from \"lit/directives/live.js\";\nimport SgdsIcon from \"../Icon/sgds-icon\";\nimport FormControlElement from \"../../base/form-control-element\";\nimport { defaultValue } from \"../../utils/defaultvalue\";\nimport { SgdsFormControl } from \"../../utils/formSubmitController\";\nimport { SgdsFormValidatorMixin } from \"../../utils/validatorMixin\";\nimport { watch } from \"../../utils/watch\";\nimport checkboxStyle from \"./checkbox.css\";\nimport formCheckStyles from \"../../styles/form-check.css\";\n\n/**\n * @summary Checkbox component is used when you require users to select multiple items from a list.\n *\n * @slot default - The label of checkbox.\n *\n * @event sgds-change - Emitted when the checked state changes.\n * @event sgds-blur - Emitted when input is not in focus.\n * @event sgds-focus - Emitted when input is in focus.\n * @event sgds-check - Emitted when checkbox is checked\n * @event sgds-uncheck - Emitted when checkbox is unchecked\n */\nexport class SgdsCheckbox extends SgdsFormValidatorMixin(FormControlElement) implements SgdsFormControl {\n  static styles = [...FormControlElement.styles, formCheckStyles, checkboxStyle];\n\n  /**@internal */\n  static dependencies = {\n    \"sgds-icon\": SgdsIcon\n  };\n\n  /** Value of the HTML form control. Primarily used to differentiate a list of related checkboxes that have the same name. */\n  @property({ type: String, reflect: true }) value: string;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Allows invalidFeedback, invalid and valid styles to be visible with the input */\n  @property({ type: String, reflect: true }) hasFeedback: \"style\" | \"text\" | \"both\";\n\n  /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */\n  @defaultValue(\"checked\")\n  defaultChecked = false;\n\n  /** Marks the checkbox input as indeterminate , with indeterminate logo  */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**Feedback text for error state when validated */\n  @property({ type: String, reflect: true }) invalidFeedback = \"\";\n\n  @state() private _isTouched = false;\n\n  /** Simulates a click on the checkbox. */\n  public click() {\n    this.input.click();\n  }\n  /** Sets focus on the checkbox. */\n  public focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  public blur() {\n    this.input.blur();\n  }\n\n  private _handleChange(e: Event) {\n    if (this.indeterminate) {\n      this.indeterminate = !this.indeterminate;\n    }\n\n    this.checked = !this.checked;\n    super._mixinHandleChange(e);\n    this.emit(\"sgds-change\", { detail: { checked: this.checked, value: this.value } });\n\n    this.checked\n      ? this.emit(\"sgds-check\", { detail: { value: this.value } })\n      : this.emit(\"sgds-uncheck\", { detail: { value: this.value } });\n  }\n\n  private _handleKeyDown(event: KeyboardEvent) {\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n    if (event.key === \"Enter\" && !hasModifier) {\n      this.click();\n    }\n  }\n\n  private _handleBlur() {\n    this._isTouched = true;\n    this.emit(\"sgds-blur\");\n  }\n\n  private _handleFocus() {\n    this.emit(\"sgds-focus\");\n  }\n\n  private _handleInvalid(e: Event) {\n    e.preventDefault();\n    this.invalid = true;\n  }\n\n  /** @internal */\n  @watch(\"disabled\", { waitUntilFirstUpdate: true })\n  _handleDisabledChange() {\n    // Disabled form controls are always valid, so we need to recheck validity when the state changes\n    this.setInvalid(false);\n  }\n\n  @watch(\"_isTouched\", { waitUntilFirstUpdate: true })\n  _handleIsTouched() {\n    if (this._isTouched) {\n      this.invalid = !this.input.checkValidity();\n    }\n  }\n\n  private _mixinResetFormControl() {\n    this._isTouched = false;\n    this.checked = this.input.checked = this.defaultChecked;\n    this.input.dispatchEvent(new InputEvent(\"reset\"));\n    this._mixinResetValidity(this.input);\n  }\n  /**\n   * Checks for validity. Under the hood, HTMLFormElement's reportValidity method calls this method to check for component's validity state\n   * Note that the native error popup is prevented for SGDS form components by default. Instead the validation message shows up in the feedback container of SgdsInput\n   */\n  public reportValidity(): boolean {\n    return this._mixinReportValidity();\n  }\n  /**\n   * Checks for validity without any native error popup message\n   */\n  public checkValidity(): boolean {\n    return this._mixinCheckValidity();\n  }\n  /**\n   * Returns the ValidityState object\n   */\n  public get validity(): ValidityState {\n    return this._mixinGetValidity();\n  }\n  /**\n   * Returns the validation message based on the ValidityState\n   */\n  public get validationMessage() {\n    return this._mixinGetValidationMessage();\n  }\n\n  firstUpdated(_changedProperties) {\n    super.firstUpdated(_changedProperties);\n    this.checked && this.emit(\"sgds-check\", { detail: { value: this.value } });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"click\", this._handleHostClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"click\", this._handleHostClick);\n  }\n\n  // Delegates host-targeted clicks to the internal input so that clicking anywhere\n  // on the sgds-checkbox element (e.g. expanded padding inside sgds-dropdown-item) toggles\n  // the checkbox. Clicks already originating from inside the shadow DOM are left alone.\n  private _handleHostClick = (e: Event) => {\n    if (e.composedPath()[0] === this) {\n      e.stopPropagation();\n      this.input.click();\n    }\n  };\n  render() {\n    const displayFeedbackStyle = this.hasFeedback === \"both\" || this.hasFeedback === \"style\";\n    const displayFeedbackText = this.hasFeedback === \"both\" || this.hasFeedback === \"text\";\n\n    return html`\n      <div class=\"form-check\">\n        <input\n          class=${classMap({\n            \"form-check-input\": true,\n            \"is-invalid\": displayFeedbackStyle && this.invalid\n          })}\n          type=\"checkbox\"\n          id=${this._controlId}\n          aria-invalid=${this.invalid ? \"true\" : \"false\"}\n          name=${ifDefined(this.name)}\n          ?indeterminate=${this.indeterminate}\n          ?required=${this.required}\n          aria-disabled=${this.disabled ? \"true\" : \"false\"}\n          aria-checked=${this.checked ? \"true\" : \"false\"}\n          @change=${(e: Event) => this._handleChange(e)}\n          @keydown=${this._handleKeyDown}\n          @invalid=${(e: Event) => this._handleInvalid(e)}\n          ?checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          @blur=${this._handleBlur}\n          @focus=${this._handleFocus}\n        />\n        <label for=\"${this._controlId}\" class=\"form-check-label\" id=\"${this._labelId}\"><slot></slot></label>\n      </div>\n      ${displayFeedbackText && this.invalid\n        ? html`\n            <div class=\"invalid-feedback-container\">\n              <slot name=\"invalidIcon\">\n                <sgds-icon name=\"exclamation-circle-fill\" size=\"md\"></sgds-icon>\n              </slot>\n              <div id=\"checkbox-feedback\" tabindex=\"0\" class=\"invalid-feedback\">\n                ${this.invalidFeedback ? this.invalidFeedback : this.input.validationMessage}\n              </div>\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\nexport default SgdsCheckbox;\n"],"names":["formCheckStyles","checkboxStyle"],"mappings":"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"}

package/components/CloseButton/close-button.js

@@ -1,6 +1,6 @@
 import { css } from 'lit';
 
-var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;
+var css_248z = css`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
 
 export { css_248z as default };
 //# sourceMappingURL=close-button.js.map

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

@@ -4,32 +4,32 @@
    * Copyright 2019 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class r{constructor(e,t,s){if(this._$cssResult$=!0,s!==i)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this._strings=t}get styleSheet(){let e=this._styleSheet;const t=this._strings;if(s&&void 0===e){const s=void 0!==t&&1===t.length;s&&(e=n.get(t)),void 0===e&&((this._styleSheet=e=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(t,e))}return e}toString(){return this.cssText}}const o=(e,...t)=>{const s=1===e.length?e[0]:t.reduce((t,s,i)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(s)+e[i+1],e[0]);return new r(s,e,i)},a=e=>{let t="";for(const s of e.cssRules)t+=s.cssText;return new r("string"==typeof(s=t)?s:String(s),void 0,i);var s},l=s?e=>e:e=>e instanceof CSSStyleSheet?a(e):e,{is:d,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:p,getOwnPropertySymbols:u,getPrototypeOf:m}=Object,g=globalThis;let f;const _=g.trustedTypes,v=_?_.emptyScript:"",b=g.reactiveElementPolyfillSupportDevMode;g.litIssuedWarnings??=new Set,f=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,g.litIssuedWarnings.has(t)||g.litIssuedWarnings.has(e)||(console.warn(t),g.litIssuedWarnings.add(t))},queueMicrotask(()=>{f("dev-mode","Lit is in dev mode. Not recommended for production!"),g.ShadyDOM?.inUse&&void 0===b&&f("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const y=(e,t)=>e,w={toAttribute(e,t){switch(t){case Boolean:e=e?v:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let s=e;switch(t){case Boolean:s=null!==e;break;case Number:s=null===e?null:Number(e);break;case Object:case Array:try{s=JSON.parse(e)}catch(e){s=null}}return s}},$=(e,t)=>!d(e,t),S={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;class P extends HTMLElement{static addInitializer(e){this.__prepare(),(this._initializers??=[]).push(e)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(e,t=S){if(t.state&&(t.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const s=Symbol.for(`${String(e)} (@property() cache)`),i=this.getPropertyDescriptor(e,s,t);void 0!==i&&c(this.prototype,e,i)}}static getPropertyDescriptor(e,t,s){const{get:i,set:n}=h(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};if(null==i){if("value"in(h(this.prototype,e)??{}))throw new Error(`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);f("reactive-property-without-getter",`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:i,set(t){const r=i?.call(this);n?.call(this,t),this.requestUpdate(e,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??S}static __prepare(){if(this.hasOwnProperty(y("elementProperties")))return;const e=m(this);e.finalize(),void 0!==e._initializers&&(this._initializers=[...e._initializers]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(y("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(y("properties"))){const e=this.properties,t=[...p(e),...u(e)];for(const s of t)this.createProperty(s,e[s])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,s]of t)this.elementProperties.set(e,s)}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const s=this.__attributeNameForProperty(e,t);void 0!==s&&this.__attributeToPropertyMap.set(s,e)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&f("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&f("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const s=new Set(e.flat(1/0).reverse());for(const e of s)t.unshift(l(e))}else void 0!==e&&t.push(l(e));return t}static __attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise(e=>this.enableUpdating=e),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach(e=>e(this))}addController(e){(this.__controllers??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers?.delete(e)}__saveInstanceProperties(){const e=new Map,t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this.__instanceProperties=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,i)=>{if(s)e.adoptedStyleSheets=i.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const s of i){const i=document.createElement("style"),n=t.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=s.cssText,e.appendChild(i)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this.__controllers?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,s){this._$attributeToProperty(e,s)}__propertyToAttribute(e,t){const s=this.constructor.elementProperties.get(e),i=this.constructor.__attributeNameForProperty(e,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:w).toAttribute(t,s.type);this.constructor.enabledWarnings.includes("migration")&&void 0===n&&f("undefined-attribute-value",`The attribute value for the ${e} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=e,null==n?this.removeAttribute(i):this.setAttribute(i,n),this.__reflectingProperty=null}}_$attributeToProperty(e,t){const s=this.constructor,i=s.__attributeToPropertyMap.get(e);if(void 0!==i&&this.__reflectingProperty!==i){const e=s.getPropertyOptions(i),n="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:w;this.__reflectingProperty=i;const r=n.fromAttribute(t,e.type);this[i]=r??this.__defaultValues?.get(i)??r,this.__reflectingProperty=null}}requestUpdate(e,t,s,i=!1,n){if(void 0!==e){e instanceof Event&&f("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const r=this.constructor;!1===i&&(n=this[e]),s??=r.getPropertyOptions(e);if(!((s.hasChanged??$)(n,t)||s.useDefault&&s.reflect&&n===this.__defaultValues?.get(e)&&!this.hasAttribute(r.__attributeNameForProperty(e,s))))return;this._$changeProperty(e,t,s)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(e,t,{useDefault:s,reflect:i,wrapped:n},r){s&&!(this.__defaultValues??=new Map).has(e)&&(this.__defaultValues.set(e,r??t??this[e]),!0!==n||void 0!==r)||(this._$changedProperties.has(e)||(this.hasUpdated||s||(t=void 0),this._$changedProperties.set(e,t)),!0===i&&this.__reflectingProperty!==e&&(this.__reflectingProperties??=new Set).add(e))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){const e=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof e?.then&&f("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),e}performUpdate(){if(!this.isUpdatePending)return;var e;if(e={kind:"update"},g.emitLitDebugLogEvents&&g.dispatchEvent(new CustomEvent("lit-debug",{detail:e})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const e=[...this.constructor.elementProperties.keys()].filter(e=>this.hasOwnProperty(e)&&e in m(this));if(e.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${e.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[e,t]of this.__instanceProperties)this[e]=t;this.__instanceProperties=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,s]of e){const{wrapped:e}=s,i=this[t];!0!==e||this._$changedProperties.has(t)||void 0===i||this._$changeProperty(t,void 0,s,i)}}let t=!1;const s=this._$changedProperties;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.__controllers?.forEach(e=>e.hostUpdate?.()),this.update(s)):this.__markUpdated()}catch(e){throw t=!1,this.__markUpdated(),e}t&&this._$didUpdate(s)}willUpdate(e){}_$didUpdate(e){this.__controllers?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&f("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(e){return!0}update(e){this.__reflectingProperties&&=this.__reflectingProperties.forEach(e=>this.__propertyToAttribute(e,this[e])),this.__markUpdated()}updated(e){}firstUpdated(e){}}P.elementStyles=[],P.shadowRootOptions={mode:"open"},P[y("elementProperties")]=new Map,P[y("finalized")]=new Map,b?.({ReactiveElement:P});{P.enabledWarnings=["change-in-update","async-perform-update"];const e=function(e){e.hasOwnProperty(y("enabledWarnings"))||(e.enabledWarnings=e.enabledWarnings.slice())};P.enableWarning=function(t){e(this),this.enabledWarnings.includes(t)||this.enabledWarnings.push(t)},P.disableWarning=function(t){e(this);const s=this.enabledWarnings.indexOf(t);s>=0&&this.enabledWarnings.splice(s,1)}}(g.reactiveElementVersions??=[]).push("2.1.2"),g.reactiveElementVersions.length>1&&queueMicrotask(()=>{f("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});
+const t=globalThis,s=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,i=Symbol(),n=new WeakMap;class r{constructor(e,t,s){if(this._$cssResult$=!0,s!==i)throw new Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=e,this._strings=t}get styleSheet(){let e=this._styleSheet;const t=this._strings;if(s&&void 0===e){const s=void 0!==t&&1===t.length;s&&(e=n.get(t)),void 0===e&&((this._styleSheet=e=new CSSStyleSheet).replaceSync(this.cssText),s&&n.set(t,e))}return e}toString(){return this.cssText}}const o=(e,...t)=>{const s=1===e.length?e[0]:t.reduce((t,s,i)=>t+(e=>{if(!0===e._$cssResult$)return e.cssText;if("number"==typeof e)return e;throw new Error(`Value passed to 'css' function must be a 'css' function result: ${e}. Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.`)})(s)+e[i+1],e[0]);return new r(s,e,i)},a=e=>{let t="";for(const s of e.cssRules)t+=s.cssText;return new r("string"==typeof(s=t)?s:String(s),void 0,i);var s},l=s?e=>e:e=>e instanceof CSSStyleSheet?a(e):e,{is:d,defineProperty:c,getOwnPropertyDescriptor:h,getOwnPropertyNames:p,getOwnPropertySymbols:u,getPrototypeOf:m}=Object,g=globalThis;let f;const _=g.trustedTypes,v=_?_.emptyScript:"",y=g.reactiveElementPolyfillSupportDevMode;g.litIssuedWarnings??=new Set,f=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,g.litIssuedWarnings.has(t)||g.litIssuedWarnings.has(e)||(console.warn(t),g.litIssuedWarnings.add(t))},queueMicrotask(()=>{f("dev-mode","Lit is in dev mode. Not recommended for production!"),g.ShadyDOM?.inUse&&void 0===y&&f("polyfill-support-missing","Shadow DOM is being polyfilled via `ShadyDOM` but the `polyfill-support` module has not been loaded.")});const b=(e,t)=>e,w={toAttribute(e,t){switch(t){case Boolean:e=e?v:null;break;case Object:case Array:e=null==e?e:JSON.stringify(e)}return e},fromAttribute(e,t){let s=e;switch(t){case Boolean:s=null!==e;break;case Number:s=null===e?null:Number(e);break;case Object:case Array:try{s=JSON.parse(e)}catch(e){s=null}}return s}},$=(e,t)=>!d(e,t),S={attribute:!0,type:String,converter:w,reflect:!1,useDefault:!1,hasChanged:$};Symbol.metadata??=Symbol("metadata"),g.litPropertyMetadata??=new WeakMap;class P extends HTMLElement{static addInitializer(e){this.__prepare(),(this._initializers??=[]).push(e)}static get observedAttributes(){return this.finalize(),this.__attributeToPropertyMap&&[...this.__attributeToPropertyMap.keys()]}static createProperty(e,t=S){if(t.state&&(t.attribute=!1),this.__prepare(),this.prototype.hasOwnProperty(e)&&((t=Object.create(t)).wrapped=!0),this.elementProperties.set(e,t),!t.noAccessor){const s=Symbol.for(`${String(e)} (@property() cache)`),i=this.getPropertyDescriptor(e,s,t);void 0!==i&&c(this.prototype,e,i)}}static getPropertyDescriptor(e,t,s){const{get:i,set:n}=h(this.prototype,e)??{get(){return this[t]},set(e){this[t]=e}};if(null==i){if("value"in(h(this.prototype,e)??{}))throw new Error(`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it's actually declared as a value on the prototype. Usually this is due to using @property or @state on a method.`);f("reactive-property-without-getter",`Field ${JSON.stringify(String(e))} on ${this.name} was declared as a reactive property but it does not have a getter. This will be an error in a future version of Lit.`)}return{get:i,set(t){const r=i?.call(this);n?.call(this,t),this.requestUpdate(e,r,s)},configurable:!0,enumerable:!0}}static getPropertyOptions(e){return this.elementProperties.get(e)??S}static __prepare(){if(this.hasOwnProperty(b("elementProperties")))return;const e=m(this);e.finalize(),void 0!==e._initializers&&(this._initializers=[...e._initializers]),this.elementProperties=new Map(e.elementProperties)}static finalize(){if(this.hasOwnProperty(b("finalized")))return;if(this.finalized=!0,this.__prepare(),this.hasOwnProperty(b("properties"))){const e=this.properties,t=[...p(e),...u(e)];for(const s of t)this.createProperty(s,e[s])}const e=this[Symbol.metadata];if(null!==e){const t=litPropertyMetadata.get(e);if(void 0!==t)for(const[e,s]of t)this.elementProperties.set(e,s)}this.__attributeToPropertyMap=new Map;for(const[e,t]of this.elementProperties){const s=this.__attributeNameForProperty(e,t);void 0!==s&&this.__attributeToPropertyMap.set(s,e)}this.elementStyles=this.finalizeStyles(this.styles),this.hasOwnProperty("createProperty")&&f("no-override-create-property","Overriding ReactiveElement.createProperty() is deprecated. The override will not be called with standard decorators"),this.hasOwnProperty("getPropertyDescriptor")&&f("no-override-get-property-descriptor","Overriding ReactiveElement.getPropertyDescriptor() is deprecated. The override will not be called with standard decorators")}static finalizeStyles(e){const t=[];if(Array.isArray(e)){const s=new Set(e.flat(1/0).reverse());for(const e of s)t.unshift(l(e))}else void 0!==e&&t.push(l(e));return t}static __attributeNameForProperty(e,t){const s=t.attribute;return!1===s?void 0:"string"==typeof s?s:"string"==typeof e?e.toLowerCase():void 0}constructor(){super(),this.__instanceProperties=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,this.__reflectingProperty=null,this.__initialize()}__initialize(){this.__updatePromise=new Promise(e=>this.enableUpdating=e),this._$changedProperties=new Map,this.__saveInstanceProperties(),this.requestUpdate(),this.constructor._initializers?.forEach(e=>e(this))}addController(e){(this.__controllers??=new Set).add(e),void 0!==this.renderRoot&&this.isConnected&&e.hostConnected?.()}removeController(e){this.__controllers?.delete(e)}__saveInstanceProperties(){const e=new Map,t=this.constructor.elementProperties;for(const s of t.keys())this.hasOwnProperty(s)&&(e.set(s,this[s]),delete this[s]);e.size>0&&(this.__instanceProperties=e)}createRenderRoot(){const e=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return((e,i)=>{if(s)e.adoptedStyleSheets=i.map(e=>e instanceof CSSStyleSheet?e:e.styleSheet);else for(const s of i){const i=document.createElement("style"),n=t.litNonce;void 0!==n&&i.setAttribute("nonce",n),i.textContent=s.cssText,e.appendChild(i)}})(e,this.constructor.elementStyles),e}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(!0),this.__controllers?.forEach(e=>e.hostConnected?.())}enableUpdating(e){}disconnectedCallback(){this.__controllers?.forEach(e=>e.hostDisconnected?.())}attributeChangedCallback(e,t,s){this._$attributeToProperty(e,s)}__propertyToAttribute(e,t){const s=this.constructor.elementProperties.get(e),i=this.constructor.__attributeNameForProperty(e,s);if(void 0!==i&&!0===s.reflect){const n=(void 0!==s.converter?.toAttribute?s.converter:w).toAttribute(t,s.type);this.constructor.enabledWarnings.includes("migration")&&void 0===n&&f("undefined-attribute-value",`The attribute value for the ${e} property is undefined on element ${this.localName}. The attribute will be removed, but in the previous version of \`ReactiveElement\`, the attribute would not have changed.`),this.__reflectingProperty=e,null==n?this.removeAttribute(i):this.setAttribute(i,n),this.__reflectingProperty=null}}_$attributeToProperty(e,t){const s=this.constructor,i=s.__attributeToPropertyMap.get(e);if(void 0!==i&&this.__reflectingProperty!==i){const e=s.getPropertyOptions(i),n="function"==typeof e.converter?{fromAttribute:e.converter}:void 0!==e.converter?.fromAttribute?e.converter:w;this.__reflectingProperty=i;const r=n.fromAttribute(t,e.type);this[i]=r??this.__defaultValues?.get(i)??r,this.__reflectingProperty=null}}requestUpdate(e,t,s,i=!1,n){if(void 0!==e){e instanceof Event&&f("","The requestUpdate() method was called with an Event as the property name. This is probably a mistake caused by binding this.requestUpdate as an event listener. Instead bind a function that will call it with no arguments: () => this.requestUpdate()");const r=this.constructor;!1===i&&(n=this[e]),s??=r.getPropertyOptions(e);if(!((s.hasChanged??$)(n,t)||s.useDefault&&s.reflect&&n===this.__defaultValues?.get(e)&&!this.hasAttribute(r.__attributeNameForProperty(e,s))))return;this._$changeProperty(e,t,s)}!1===this.isUpdatePending&&(this.__updatePromise=this.__enqueueUpdate())}_$changeProperty(e,t,{useDefault:s,reflect:i,wrapped:n},r){s&&!(this.__defaultValues??=new Map).has(e)&&(this.__defaultValues.set(e,r??t??this[e]),!0!==n||void 0!==r)||(this._$changedProperties.has(e)||(this.hasUpdated||s||(t=void 0),this._$changedProperties.set(e,t)),!0===i&&this.__reflectingProperty!==e&&(this.__reflectingProperties??=new Set).add(e))}async __enqueueUpdate(){this.isUpdatePending=!0;try{await this.__updatePromise}catch(e){Promise.reject(e)}const e=this.scheduleUpdate();return null!=e&&await e,!this.isUpdatePending}scheduleUpdate(){const e=this.performUpdate();return this.constructor.enabledWarnings.includes("async-perform-update")&&"function"==typeof e?.then&&f("async-perform-update",`Element ${this.localName} returned a Promise from performUpdate(). This behavior is deprecated and will be removed in a future version of ReactiveElement.`),e}performUpdate(){if(!this.isUpdatePending)return;var e;if(e={kind:"update"},g.emitLitDebugLogEvents&&g.dispatchEvent(new CustomEvent("lit-debug",{detail:e})),!this.hasUpdated){this.renderRoot??=this.createRenderRoot();{const e=[...this.constructor.elementProperties.keys()].filter(e=>this.hasOwnProperty(e)&&e in m(this));if(e.length)throw new Error(`The following properties on element ${this.localName} will not trigger updates as expected because they are set using class fields: ${e.join(", ")}. Native class fields and some compiled output will overwrite accessors used for detecting changes. See https://lit.dev/msg/class-field-shadowing for more information.`)}if(this.__instanceProperties){for(const[e,t]of this.__instanceProperties)this[e]=t;this.__instanceProperties=void 0}const e=this.constructor.elementProperties;if(e.size>0)for(const[t,s]of e){const{wrapped:e}=s,i=this[t];!0!==e||this._$changedProperties.has(t)||void 0===i||this._$changeProperty(t,void 0,s,i)}}let t=!1;const s=this._$changedProperties;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this.__controllers?.forEach(e=>e.hostUpdate?.()),this.update(s)):this.__markUpdated()}catch(e){throw t=!1,this.__markUpdated(),e}t&&this._$didUpdate(s)}willUpdate(e){}_$didUpdate(e){this.__controllers?.forEach(e=>e.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(e)),this.updated(e),this.isUpdatePending&&this.constructor.enabledWarnings.includes("change-in-update")&&f("change-in-update",`Element ${this.localName} scheduled an update (generally because a property was set) after an update completed, causing a new update to be scheduled. This is inefficient and should be avoided unless the next update can only be scheduled as a side effect of the previous update.`)}__markUpdated(){this._$changedProperties=new Map,this.isUpdatePending=!1}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this.__updatePromise}shouldUpdate(e){return!0}update(e){this.__reflectingProperties&&=this.__reflectingProperties.forEach(e=>this.__propertyToAttribute(e,this[e])),this.__markUpdated()}updated(e){}firstUpdated(e){}}P.elementStyles=[],P.shadowRootOptions={mode:"open"},P[b("elementProperties")]=new Map,P[b("finalized")]=new Map,y?.({ReactiveElement:P});{P.enabledWarnings=["change-in-update","async-perform-update"];const e=function(e){e.hasOwnProperty(b("enabledWarnings"))||(e.enabledWarnings=e.enabledWarnings.slice())};P.enableWarning=function(t){e(this),this.enabledWarnings.includes(t)||this.enabledWarnings.push(t)},P.disableWarning=function(t){e(this);const s=this.enabledWarnings.indexOf(t);s>=0&&this.enabledWarnings.splice(s,1)}}(g.reactiveElementVersions??=[]).push("2.1.2"),g.reactiveElementVersions.length>1&&queueMicrotask(()=>{f("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});
 /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-const x=globalThis,k=e=>{x.emitLitDebugLogEvents&&x.dispatchEvent(new CustomEvent("lit-debug",{detail:e}))};let E,C=0;x.litIssuedWarnings??=new Set,E=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",x.litIssuedWarnings.has(t)||x.litIssuedWarnings.has(e)||(console.warn(t),x.litIssuedWarnings.add(t))},queueMicrotask(()=>{E("dev-mode","Lit is in dev mode. Not recommended for production!")});const T=x.ShadyDOM?.inUse&&!0===x.ShadyDOM?.noPatch?x.ShadyDOM.wrap:e=>e,N=x.trustedTypes,U=N?N.createPolicy("lit-html",{createHTML:e=>e}):void 0,V=e=>e,O=(e,t,s)=>V,z=e=>{if(re!==O)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");re=e},M=()=>{re=O},R=(e,t,s)=>re(e,t,s),A="$lit$",W=`lit$${Math.random().toFixed(9).slice(2)}$`,L="?"+W,I=`<${L}>`,D=document,j=()=>D.createComment(""),H=e=>null===e||"object"!=typeof e&&"function"!=typeof e,q=Array.isArray,B="[ \t\n\f\r]",F=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,Y=new RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),X=/'/g,G=/"/g,K=/^(?:script|style|textarea|title)$/i,Q=(ee=1,(e,...t)=>(e.some(e=>void 0===e)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),t.some(e=>e?._$litStatic$)&&E("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:ee,strings:e,values:t}));var ee;const te=Symbol.for("lit-noChange"),se=Symbol.for("lit-nothing"),ie=new WeakMap,ne=D.createTreeWalker(D,129);let re=O;function oe(e,t){if(!q(e)||!e.hasOwnProperty("raw")){let e="invalid template strings array";throw e="\n          Internal Error: expected template strings to be an array\n          with a 'raw' field. Faking a template strings array by\n          calling html or svg like an ordinary function is effectively\n          the same as calling unsafeHtml and can lead to major security\n          issues, e.g. opening your code up to XSS attacks.\n          If you're using the html or svg tagged template functions normally\n          and still seeing this error, please file a bug at\n          https://github.com/lit/lit/issues/new?template=bug_report.md\n          and include information about your build tooling, if any.\n        ".trim().replace(/\n */g,"\n"),new Error(e)}return void 0!==U?U.createHTML(t):t}class ae{constructor({strings:e,_$litType$:t},s){let i;this.parts=[];let n=0,r=0;const o=e.length-1,a=this.parts,[l,d]=((e,t)=>{const s=e.length-1,i=[];let n,r=2===t?"<svg>":3===t?"<math>":"",o=F;for(let t=0;t<s;t++){const s=e[t];let a,l,d=-1,c=0;for(;c<s.length&&(o.lastIndex=c,l=o.exec(s),null!==l);)if(c=o.lastIndex,o===F){if("!--"===l[1])o=Z;else if(void 0!==l[1])o=J;else if(void 0!==l[2])K.test(l[2])&&(n=new RegExp(`</${l[2]}`,"g")),o=Y;else if(void 0!==l[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else o===Y?">"===l[0]?(o=n??F,d=-1):void 0===l[1]?d=-2:(d=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?Y:'"'===l[3]?G:X):o===G||o===X?o=Y:o===Z||o===J?o=F:(o=Y,n=void 0);console.assert(-1===d||o===Y||o===X||o===G,"unexpected parse state B");const h=o===Y&&e[t+1].startsWith("/>")?" ":"";r+=o===F?s+I:d>=0?(i.push(a),s.slice(0,d)+A+s.slice(d)+W+h):s+W+(-2===d?t:h)}return[oe(e,r+(e[s]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),i]})(e,t);if(this.el=ae.createElement(l,s),ne.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(i=ne.nextNode())&&a.length<o;){if(1===i.nodeType){{const e=i.localName;if(/^(?:textarea|template)$/i.test(e)&&i.innerHTML.includes(W)){const t=`Expressions are not supported inside \`${e}\` elements. See https://lit.dev/msg/expression-in-${e} for more information.`;if("template"===e)throw new Error(t);E("",t)}}if(i.hasAttributes())for(const e of i.getAttributeNames())if(e.endsWith(A)){const t=d[r++],s=i.getAttribute(e).split(W),o=/([.?@])?(.*)/.exec(t);a.push({type:1,index:n,name:o[2],strings:s,ctor:"."===o[1]?pe:"?"===o[1]?ue:"@"===o[1]?me:he}),i.removeAttribute(e)}else e.startsWith(W)&&(a.push({type:6,index:n}),i.removeAttribute(e));if(K.test(i.tagName)){const e=i.textContent.split(W),t=e.length-1;if(t>0){i.textContent=N?N.emptyScript:"";for(let s=0;s<t;s++)i.append(e[s],j()),ne.nextNode(),a.push({type:2,index:++n});i.append(e[t],j())}}}else if(8===i.nodeType){if(i.data===L)a.push({type:2,index:n});else{let e=-1;for(;-1!==(e=i.data.indexOf(W,e+1));)a.push({type:7,index:n}),e+=W.length-1}}n++}if(d.length!==r)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+e.join("${...}")+"`");k&&k({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:e})}static createElement(e,t){const s=D.createElement("template");return s.innerHTML=e,s}}function le(e,t,s=e,i){if(t===te)return t;let n=void 0!==i?s.__directives?.[i]:s.__directive;const r=H(t)?void 0:t._$litDirective$;return n?.constructor!==r&&(n?._$notifyDirectiveConnectionChanged?.(!1),void 0===r?n=void 0:(n=new r(e),n._$initialize(e,s,i)),void 0!==i?(s.__directives??=[])[i]=n:s.__directive=n),void 0!==n&&(t=le(e,n._$resolve(e,t.values),n,i)),t}class de{constructor(e,t){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=e,this._$parent=t}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(e){const{el:{content:t},parts:s}=this._$template,i=(e?.creationScope??D).importNode(t,!0);ne.currentNode=i;let n=ne.nextNode(),r=0,o=0,a=s[0];for(;void 0!==a;){if(r===a.index){let t;2===a.type?t=new ce(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new ge(n,this,e)),this._$parts.push(t),a=s[++o]}r!==a?.index&&(n=ne.nextNode(),r++)}return ne.currentNode=D,i}_update(e){let t=0;for(const s of this._$parts)void 0!==s&&(k&&k({kind:"set part",part:s,value:e[t],valueIndex:t,values:e,templateInstance:this}),void 0!==s.strings?(s._$setValue(e,s,t),t+=s.strings.length-2):s._$setValue(e[t])),t++}}class ce{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(e,t,s,i){this.type=2,this._$committedValue=se,this._$disconnectableChildren=void 0,this._$startNode=e,this._$endNode=t,this._$parent=s,this.options=i,this.__isConnected=i?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let e=T(this._$startNode).parentNode;const t=this._$parent;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(e,t=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(e=le(this,e,t),H(e))e===se||null==e||""===e?(this._$committedValue!==se&&(k&&k({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=se):e!==this._$committedValue&&e!==te&&this._commitText(e);else if(void 0!==e._$litType$)this._commitTemplateResult(e);else if(void 0!==e.nodeType){if(this.options?.host===e)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",e,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(e)}else(e=>q(e)||"function"==typeof e?.[Symbol.iterator])(e)?this._commitIterable(e):this._commitText(e)}_insert(e){return T(T(this._$startNode).parentNode).insertBefore(e,this._$endNode)}_commitNode(e){if(this._$committedValue!==e){if(this._$clear(),re!==O){const e=this._$startNode.parentNode?.nodeName;if("STYLE"===e||"SCRIPT"===e){let t="Forbidden";throw t="STYLE"===e?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(t)}}k&&k({kind:"commit node",start:this._$startNode,parent:this._$parent,value:e,options:this.options}),this._$committedValue=this._insert(e)}}_commitText(e){if(this._$committedValue!==se&&H(this._$committedValue)){const t=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=R(t,"data","property")),e=this._textSanitizer(e),k&&k({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}else{const t=D.createTextNode("");this._commitNode(t),void 0===this._textSanitizer&&(this._textSanitizer=R(t,"data","property")),e=this._textSanitizer(e),k&&k({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}this._$committedValue=e}_commitTemplateResult(e){const{values:t,_$litType$:s}=e,i="number"==typeof s?this._$getTemplate(e):(void 0===s.el&&(s.el=ae.createElement(oe(s.h,s.h[0]),this.options)),s);if(this._$committedValue?._$template===i)k&&k({kind:"template updating",template:i,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:t}),this._$committedValue._update(t);else{const e=new de(i,this),s=e._clone(this.options);k&&k({kind:"template instantiated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),e._update(t),k&&k({kind:"template instantiated and updated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),this._commitNode(s),this._$committedValue=e}}_$getTemplate(e){let t=ie.get(e.strings);return void 0===t&&ie.set(e.strings,t=new ae(e)),t}_commitIterable(e){q(this._$committedValue)||(this._$committedValue=[],this._$clear());const t=this._$committedValue;let s,i=0;for(const n of e)i===t.length?t.push(s=new ce(this._insert(j()),this._insert(j()),this,this.options)):s=t[i],s._$setValue(n),i++;i<t.length&&(this._$clear(s&&T(s._$endNode).nextSibling,i),t.length=i)}_$clear(e=T(this._$startNode).nextSibling,t){for(this._$notifyConnectionChanged?.(!1,!0,t);e!==this._$endNode;){const t=T(e).nextSibling;T(e).remove(),e=t}}setConnected(e){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=e,this._$notifyConnectionChanged?.(e)}}class he{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(e,t,s,i,n){this.type=1,this._$committedValue=se,this._$disconnectableChildren=void 0,this.element=e,this.name=t,this._$parent=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$committedValue=new Array(s.length-1).fill(new String),this.strings=s):this._$committedValue=se,this._sanitizer=void 0}_$setValue(e,t=this,s,i){const n=this.strings;let r=!1;if(void 0===n)e=le(this,e,t,0),r=!H(e)||e!==this._$committedValue&&e!==te,r&&(this._$committedValue=e);else{const i=e;let o,a;for(e=n[0],o=0;o<n.length-1;o++)a=le(this,i[s+o],t,o),a===te&&(a=this._$committedValue[o]),r||=!H(a)||a!==this._$committedValue[o],a===se?e=se:e!==se&&(e+=(a??"")+n[o+1]),this._$committedValue[o]=a}r&&!i&&this._commitValue(e)}_commitValue(e){e===se?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=re(this.element,this.name,"attribute")),e=this._sanitizer(e??""),k&&k({kind:"commit attribute",element:this.element,name:this.name,value:e,options:this.options}),T(this.element).setAttribute(this.name,e??""))}}class pe extends he{constructor(){super(...arguments),this.type=3}_commitValue(e){void 0===this._sanitizer&&(this._sanitizer=re(this.element,this.name,"property")),e=this._sanitizer(e),k&&k({kind:"commit property",element:this.element,name:this.name,value:e,options:this.options}),this.element[this.name]=e===se?void 0:e}}class ue extends he{constructor(){super(...arguments),this.type=4}_commitValue(e){k&&k({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!e||e===se),options:this.options}),T(this.element).toggleAttribute(this.name,!!e&&e!==se)}}class me extends he{constructor(e,t,s,i,n){if(super(e,t,s,i,n),this.type=5,void 0!==this.strings)throw new Error(`A \`<${e.localName}>\` has a \`@${t}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(e,t=this){if((e=le(this,e,t,0)??se)===te)return;const s=this._$committedValue,i=e===se&&s!==se||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,n=e!==se&&(s===se||i);k&&k({kind:"commit event listener",element:this.element,name:this.name,value:e,options:this.options,removeListener:i,addListener:n,oldListener:s}),i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,e),this._$committedValue=e}handleEvent(e){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,e):this._$committedValue.handleEvent(e)}}class ge{constructor(e,t,s){this.element=e,this.type=6,this._$disconnectableChildren=void 0,this._$parent=t,this.options=s}get _$isConnected(){return this._$parent._$isConnected}_$setValue(e){k&&k({kind:"commit to element binding",element:this.element,value:e,options:this.options}),le(this,e)}}const fe=x.litHtmlPolyfillSupportDevMode;fe?.(ae,ce),(x.litHtmlVersions??=[]).push("3.3.2"),x.litHtmlVersions.length>1&&queueMicrotask(()=>{E("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const _e=(e,t,s)=>{if(null==t)throw new TypeError(`The container to render into may not be ${t}`);const i=C++,n=s?.renderBefore??t;let r=n._$litPart$;if(k&&k({kind:"begin render",id:i,value:e,container:t,options:s,part:r}),void 0===r){const e=s?.renderBefore??null;n._$litPart$=r=new ce(t.insertBefore(j(),e),e,void 0,s??{})}return r._$setValue(e),k&&k({kind:"end render",id:i,value:e,container:t,options:s,part:r}),r};_e.setSanitizer=z,_e.createSanitizer=R,_e._testOnlyClearSanitizerFactoryDoNotCallOrElse=M;
+const x=globalThis,k=e=>{x.emitLitDebugLogEvents&&x.dispatchEvent(new CustomEvent("lit-debug",{detail:e}))};let E,C=0;x.litIssuedWarnings??=new Set,E=(e,t)=>{t+=e?` See https://lit.dev/msg/${e} for more information.`:"",x.litIssuedWarnings.has(t)||x.litIssuedWarnings.has(e)||(console.warn(t),x.litIssuedWarnings.add(t))},queueMicrotask(()=>{E("dev-mode","Lit is in dev mode. Not recommended for production!")});const T=x.ShadyDOM?.inUse&&!0===x.ShadyDOM?.noPatch?x.ShadyDOM.wrap:e=>e,N=x.trustedTypes,U=N?N.createPolicy("lit-html",{createHTML:e=>e}):void 0,V=e=>e,O=(e,t,s)=>V,M=e=>{if(re!==O)throw new Error("Attempted to overwrite existing lit-html security policy. setSanitizeDOMValueFactory should be called at most once.");re=e},z=()=>{re=O},R=(e,t,s)=>re(e,t,s),A="$lit$",W=`lit$${Math.random().toFixed(9).slice(2)}$`,L="?"+W,I=`<${L}>`,D=document,j=()=>D.createComment(""),H=e=>null===e||"object"!=typeof e&&"function"!=typeof e,q=Array.isArray,B="[ \t\n\f\r]",F=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,Z=/-->/g,J=/>/g,Y=new RegExp(`>|${B}(?:([^\\s"'>=/]+)(${B}*=${B}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),X=/'/g,G=/"/g,K=/^(?:script|style|textarea|title)$/i,Q=(ee=1,(e,...t)=>(e.some(e=>void 0===e)&&console.warn("Some template strings are undefined.\nThis is probably caused by illegal octal escape sequences."),t.some(e=>e?._$litStatic$)&&E("","Static values 'literal' or 'unsafeStatic' cannot be used as values to non-static templates.\nPlease use the static 'html' tag function. See https://lit.dev/docs/templates/expressions/#static-expressions"),{_$litType$:ee,strings:e,values:t}));var ee;const te=Symbol.for("lit-noChange"),se=Symbol.for("lit-nothing"),ie=new WeakMap,ne=D.createTreeWalker(D,129);let re=O;function oe(e,t){if(!q(e)||!e.hasOwnProperty("raw")){let e="invalid template strings array";throw e="\n          Internal Error: expected template strings to be an array\n          with a 'raw' field. Faking a template strings array by\n          calling html or svg like an ordinary function is effectively\n          the same as calling unsafeHtml and can lead to major security\n          issues, e.g. opening your code up to XSS attacks.\n          If you're using the html or svg tagged template functions normally\n          and still seeing this error, please file a bug at\n          https://github.com/lit/lit/issues/new?template=bug_report.md\n          and include information about your build tooling, if any.\n        ".trim().replace(/\n */g,"\n"),new Error(e)}return void 0!==U?U.createHTML(t):t}class ae{constructor({strings:e,_$litType$:t},s){let i;this.parts=[];let n=0,r=0;const o=e.length-1,a=this.parts,[l,d]=((e,t)=>{const s=e.length-1,i=[];let n,r=2===t?"<svg>":3===t?"<math>":"",o=F;for(let t=0;t<s;t++){const s=e[t];let a,l,d=-1,c=0;for(;c<s.length&&(o.lastIndex=c,l=o.exec(s),null!==l);)if(c=o.lastIndex,o===F){if("!--"===l[1])o=Z;else if(void 0!==l[1])o=J;else if(void 0!==l[2])K.test(l[2])&&(n=new RegExp(`</${l[2]}`,"g")),o=Y;else if(void 0!==l[3])throw new Error("Bindings in tag names are not supported. Please use static templates instead. See https://lit.dev/docs/templates/expressions/#static-expressions")}else o===Y?">"===l[0]?(o=n??F,d=-1):void 0===l[1]?d=-2:(d=o.lastIndex-l[2].length,a=l[1],o=void 0===l[3]?Y:'"'===l[3]?G:X):o===G||o===X?o=Y:o===Z||o===J?o=F:(o=Y,n=void 0);console.assert(-1===d||o===Y||o===X||o===G,"unexpected parse state B");const h=o===Y&&e[t+1].startsWith("/>")?" ":"";r+=o===F?s+I:d>=0?(i.push(a),s.slice(0,d)+A+s.slice(d)+W+h):s+W+(-2===d?t:h)}return[oe(e,r+(e[s]||"<?>")+(2===t?"</svg>":3===t?"</math>":"")),i]})(e,t);if(this.el=ae.createElement(l,s),ne.currentNode=this.el.content,2===t||3===t){const e=this.el.content.firstChild;e.replaceWith(...e.childNodes)}for(;null!==(i=ne.nextNode())&&a.length<o;){if(1===i.nodeType){{const e=i.localName;if(/^(?:textarea|template)$/i.test(e)&&i.innerHTML.includes(W)){const t=`Expressions are not supported inside \`${e}\` elements. See https://lit.dev/msg/expression-in-${e} for more information.`;if("template"===e)throw new Error(t);E("",t)}}if(i.hasAttributes())for(const e of i.getAttributeNames())if(e.endsWith(A)){const t=d[r++],s=i.getAttribute(e).split(W),o=/([.?@])?(.*)/.exec(t);a.push({type:1,index:n,name:o[2],strings:s,ctor:"."===o[1]?pe:"?"===o[1]?ue:"@"===o[1]?me:he}),i.removeAttribute(e)}else e.startsWith(W)&&(a.push({type:6,index:n}),i.removeAttribute(e));if(K.test(i.tagName)){const e=i.textContent.split(W),t=e.length-1;if(t>0){i.textContent=N?N.emptyScript:"";for(let s=0;s<t;s++)i.append(e[s],j()),ne.nextNode(),a.push({type:2,index:++n});i.append(e[t],j())}}}else if(8===i.nodeType){if(i.data===L)a.push({type:2,index:n});else{let e=-1;for(;-1!==(e=i.data.indexOf(W,e+1));)a.push({type:7,index:n}),e+=W.length-1}}n++}if(d.length!==r)throw new Error('Detected duplicate attribute bindings. This occurs if your template has duplicate attributes on an element tag. For example "<input ?disabled=${true} ?disabled=${false}>" contains a duplicate "disabled" attribute. The error was detected in the following template: \n`'+e.join("${...}")+"`");k&&k({kind:"template prep",template:this,clonableTemplate:this.el,parts:this.parts,strings:e})}static createElement(e,t){const s=D.createElement("template");return s.innerHTML=e,s}}function le(e,t,s=e,i){if(t===te)return t;let n=void 0!==i?s.__directives?.[i]:s.__directive;const r=H(t)?void 0:t._$litDirective$;return n?.constructor!==r&&(n?._$notifyDirectiveConnectionChanged?.(!1),void 0===r?n=void 0:(n=new r(e),n._$initialize(e,s,i)),void 0!==i?(s.__directives??=[])[i]=n:s.__directive=n),void 0!==n&&(t=le(e,n._$resolve(e,t.values),n,i)),t}class de{constructor(e,t){this._$parts=[],this._$disconnectableChildren=void 0,this._$template=e,this._$parent=t}get parentNode(){return this._$parent.parentNode}get _$isConnected(){return this._$parent._$isConnected}_clone(e){const{el:{content:t},parts:s}=this._$template,i=(e?.creationScope??D).importNode(t,!0);ne.currentNode=i;let n=ne.nextNode(),r=0,o=0,a=s[0];for(;void 0!==a;){if(r===a.index){let t;2===a.type?t=new ce(n,n.nextSibling,this,e):1===a.type?t=new a.ctor(n,a.name,a.strings,this,e):6===a.type&&(t=new ge(n,this,e)),this._$parts.push(t),a=s[++o]}r!==a?.index&&(n=ne.nextNode(),r++)}return ne.currentNode=D,i}_update(e){let t=0;for(const s of this._$parts)void 0!==s&&(k&&k({kind:"set part",part:s,value:e[t],valueIndex:t,values:e,templateInstance:this}),void 0!==s.strings?(s._$setValue(e,s,t),t+=s.strings.length-2):s._$setValue(e[t])),t++}}class ce{get _$isConnected(){return this._$parent?._$isConnected??this.__isConnected}constructor(e,t,s,i){this.type=2,this._$committedValue=se,this._$disconnectableChildren=void 0,this._$startNode=e,this._$endNode=t,this._$parent=s,this.options=i,this.__isConnected=i?.isConnected??!0,this._textSanitizer=void 0}get parentNode(){let e=T(this._$startNode).parentNode;const t=this._$parent;return void 0!==t&&11===e?.nodeType&&(e=t.parentNode),e}get startNode(){return this._$startNode}get endNode(){return this._$endNode}_$setValue(e,t=this){if(null===this.parentNode)throw new Error("This `ChildPart` has no `parentNode` and therefore cannot accept a value. This likely means the element containing the part was manipulated in an unsupported way outside of Lit's control such that the part's marker nodes were ejected from DOM. For example, setting the element's `innerHTML` or `textContent` can do this.");if(e=le(this,e,t),H(e))e===se||null==e||""===e?(this._$committedValue!==se&&(k&&k({kind:"commit nothing to child",start:this._$startNode,end:this._$endNode,parent:this._$parent,options:this.options}),this._$clear()),this._$committedValue=se):e!==this._$committedValue&&e!==te&&this._commitText(e);else if(void 0!==e._$litType$)this._commitTemplateResult(e);else if(void 0!==e.nodeType){if(this.options?.host===e)return this._commitText("[probable mistake: rendered a template's host in itself (commonly caused by writing ${this} in a template]"),void console.warn("Attempted to render the template host",e,"inside itself. This is almost always a mistake, and in dev mode ","we render some warning text. In production however, we'll ","render it, which will usually result in an error, and sometimes ","in the element disappearing from the DOM.");this._commitNode(e)}else(e=>q(e)||"function"==typeof e?.[Symbol.iterator])(e)?this._commitIterable(e):this._commitText(e)}_insert(e){return T(T(this._$startNode).parentNode).insertBefore(e,this._$endNode)}_commitNode(e){if(this._$committedValue!==e){if(this._$clear(),re!==O){const e=this._$startNode.parentNode?.nodeName;if("STYLE"===e||"SCRIPT"===e){let t="Forbidden";throw t="STYLE"===e?"Lit does not support binding inside style nodes. This is a security risk, as style injection attacks can exfiltrate data and spoof UIs. Consider instead using css`...` literals to compose styles, and do dynamic styling with css custom properties, ::parts, <slot>s, and by mutating the DOM rather than stylesheets.":"Lit does not support binding inside script nodes. This is a security risk, as it could allow arbitrary code execution.",new Error(t)}}k&&k({kind:"commit node",start:this._$startNode,parent:this._$parent,value:e,options:this.options}),this._$committedValue=this._insert(e)}}_commitText(e){if(this._$committedValue!==se&&H(this._$committedValue)){const t=T(this._$startNode).nextSibling;void 0===this._textSanitizer&&(this._textSanitizer=R(t,"data","property")),e=this._textSanitizer(e),k&&k({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}else{const t=D.createTextNode("");this._commitNode(t),void 0===this._textSanitizer&&(this._textSanitizer=R(t,"data","property")),e=this._textSanitizer(e),k&&k({kind:"commit text",node:t,value:e,options:this.options}),t.data=e}this._$committedValue=e}_commitTemplateResult(e){const{values:t,_$litType$:s}=e,i="number"==typeof s?this._$getTemplate(e):(void 0===s.el&&(s.el=ae.createElement(oe(s.h,s.h[0]),this.options)),s);if(this._$committedValue?._$template===i)k&&k({kind:"template updating",template:i,instance:this._$committedValue,parts:this._$committedValue._$parts,options:this.options,values:t}),this._$committedValue._update(t);else{const e=new de(i,this),s=e._clone(this.options);k&&k({kind:"template instantiated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),e._update(t),k&&k({kind:"template instantiated and updated",template:i,instance:e,parts:e._$parts,options:this.options,fragment:s,values:t}),this._commitNode(s),this._$committedValue=e}}_$getTemplate(e){let t=ie.get(e.strings);return void 0===t&&ie.set(e.strings,t=new ae(e)),t}_commitIterable(e){q(this._$committedValue)||(this._$committedValue=[],this._$clear());const t=this._$committedValue;let s,i=0;for(const n of e)i===t.length?t.push(s=new ce(this._insert(j()),this._insert(j()),this,this.options)):s=t[i],s._$setValue(n),i++;i<t.length&&(this._$clear(s&&T(s._$endNode).nextSibling,i),t.length=i)}_$clear(e=T(this._$startNode).nextSibling,t){for(this._$notifyConnectionChanged?.(!1,!0,t);e!==this._$endNode;){const t=T(e).nextSibling;T(e).remove(),e=t}}setConnected(e){if(void 0!==this._$parent)throw new Error("part.setConnected() may only be called on a RootPart returned from render().");this.__isConnected=e,this._$notifyConnectionChanged?.(e)}}class he{get tagName(){return this.element.tagName}get _$isConnected(){return this._$parent._$isConnected}constructor(e,t,s,i,n){this.type=1,this._$committedValue=se,this._$disconnectableChildren=void 0,this.element=e,this.name=t,this._$parent=i,this.options=n,s.length>2||""!==s[0]||""!==s[1]?(this._$committedValue=new Array(s.length-1).fill(new String),this.strings=s):this._$committedValue=se,this._sanitizer=void 0}_$setValue(e,t=this,s,i){const n=this.strings;let r=!1;if(void 0===n)e=le(this,e,t,0),r=!H(e)||e!==this._$committedValue&&e!==te,r&&(this._$committedValue=e);else{const i=e;let o,a;for(e=n[0],o=0;o<n.length-1;o++)a=le(this,i[s+o],t,o),a===te&&(a=this._$committedValue[o]),r||=!H(a)||a!==this._$committedValue[o],a===se?e=se:e!==se&&(e+=(a??"")+n[o+1]),this._$committedValue[o]=a}r&&!i&&this._commitValue(e)}_commitValue(e){e===se?T(this.element).removeAttribute(this.name):(void 0===this._sanitizer&&(this._sanitizer=re(this.element,this.name,"attribute")),e=this._sanitizer(e??""),k&&k({kind:"commit attribute",element:this.element,name:this.name,value:e,options:this.options}),T(this.element).setAttribute(this.name,e??""))}}class pe extends he{constructor(){super(...arguments),this.type=3}_commitValue(e){void 0===this._sanitizer&&(this._sanitizer=re(this.element,this.name,"property")),e=this._sanitizer(e),k&&k({kind:"commit property",element:this.element,name:this.name,value:e,options:this.options}),this.element[this.name]=e===se?void 0:e}}class ue extends he{constructor(){super(...arguments),this.type=4}_commitValue(e){k&&k({kind:"commit boolean attribute",element:this.element,name:this.name,value:!(!e||e===se),options:this.options}),T(this.element).toggleAttribute(this.name,!!e&&e!==se)}}class me extends he{constructor(e,t,s,i,n){if(super(e,t,s,i,n),this.type=5,void 0!==this.strings)throw new Error(`A \`<${e.localName}>\` has a \`@${t}=...\` listener with invalid content. Event listeners in templates must have exactly one expression and no surrounding text.`)}_$setValue(e,t=this){if((e=le(this,e,t,0)??se)===te)return;const s=this._$committedValue,i=e===se&&s!==se||e.capture!==s.capture||e.once!==s.once||e.passive!==s.passive,n=e!==se&&(s===se||i);k&&k({kind:"commit event listener",element:this.element,name:this.name,value:e,options:this.options,removeListener:i,addListener:n,oldListener:s}),i&&this.element.removeEventListener(this.name,this,s),n&&this.element.addEventListener(this.name,this,e),this._$committedValue=e}handleEvent(e){"function"==typeof this._$committedValue?this._$committedValue.call(this.options?.host??this.element,e):this._$committedValue.handleEvent(e)}}class ge{constructor(e,t,s){this.element=e,this.type=6,this._$disconnectableChildren=void 0,this._$parent=t,this.options=s}get _$isConnected(){return this._$parent._$isConnected}_$setValue(e){k&&k({kind:"commit to element binding",element:this.element,value:e,options:this.options}),le(this,e)}}const fe=x.litHtmlPolyfillSupportDevMode;fe?.(ae,ce),(x.litHtmlVersions??=[]).push("3.3.2"),x.litHtmlVersions.length>1&&queueMicrotask(()=>{E("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")});const _e=(e,t,s)=>{if(null==t)throw new TypeError(`The container to render into may not be ${t}`);const i=C++,n=s?.renderBefore??t;let r=n._$litPart$;if(k&&k({kind:"begin render",id:i,value:e,container:t,options:s,part:r}),void 0===r){const e=s?.renderBefore??null;n._$litPart$=r=new ce(t.insertBefore(j(),e),e,void 0,s??{})}return r._$setValue(e),k&&k({kind:"end render",id:i,value:e,container:t,options:s,part:r}),r};_e.setSanitizer=M,_e.createSanitizer=R,_e._testOnlyClearSanitizerFactoryDoNotCallOrElse=z;
 /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-const ve=globalThis;let be;ve.litIssuedWarnings??=new Set,be=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,ve.litIssuedWarnings.has(t)||ve.litIssuedWarnings.has(e)||(console.warn(t),ve.litIssuedWarnings.add(t))};class ye extends P{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.__childPart=_e(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.__childPart?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.__childPart?.setConnected(!1)}render(){return te}}var we;ye._$litElement$=!0,ye[(we="finalized",we)]=!0,ve.litElementHydrateSupport?.({LitElement:ye});const $e=ve.litElementPolyfillSupportDevMode;
+const ve=globalThis;let ye;ve.litIssuedWarnings??=new Set,ye=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,ve.litIssuedWarnings.has(t)||ve.litIssuedWarnings.has(e)||(console.warn(t),ve.litIssuedWarnings.add(t))};class be extends P{constructor(){super(...arguments),this.renderOptions={host:this},this.__childPart=void 0}createRenderRoot(){const e=super.createRenderRoot();return this.renderOptions.renderBefore??=e.firstChild,e}update(e){const t=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(e),this.__childPart=_e(t,this.renderRoot,this.renderOptions)}connectedCallback(){super.connectedCallback(),this.__childPart?.setConnected(!0)}disconnectedCallback(){super.disconnectedCallback(),this.__childPart?.setConnected(!1)}render(){return te}}var we;be._$litElement$=!0,be[(we="finalized",we)]=!0,ve.litElementHydrateSupport?.({LitElement:be});const $e=ve.litElementPolyfillSupportDevMode;
 /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
    */
-let Se;$e?.({LitElement:ye}),(ve.litElementVersions??=[]).push("4.2.2"),ve.litElementVersions.length>1&&queueMicrotask(()=>{be("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,Se=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,globalThis.litIssuedWarnings.has(t)||globalThis.litIssuedWarnings.has(e)||(console.warn(t),globalThis.litIssuedWarnings.add(t))};const Pe={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},xe=(e=Pe,t,s)=>{const{kind:i,metadata:n}=s;null==n&&Se("missing-class-metadata",`The class ${t} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let r=globalThis.litPropertyMetadata.get(n);if(void 0===r&&globalThis.litPropertyMetadata.set(n,r=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),r.set(s.name,e),"accessor"===i){const{name:i}=s;return{set(s){const n=t.get.call(this);t.set.call(this,s),this.requestUpdate(i,n,e,!0,s)},init(t){return void 0!==t&&this._$changeProperty(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=s;return function(s){const n=this[i];t.call(this,s),this.requestUpdate(i,n,e,!0,s)}}throw new Error(`Unsupported decorator location: ${i}`)};function ke(e){return(t,s)=>"object"==typeof s?xe(e,t,s):((e,t,s)=>{const i=t.hasOwnProperty(s);return t.constructor.createProperty(s,e),i?Object.getOwnPropertyDescriptor(t,s):void 0})(e,t,s)}
+let Se;$e?.({LitElement:be}),(ve.litElementVersions??=[]).push("4.2.2"),ve.litElementVersions.length>1&&queueMicrotask(()=>{ye("multiple-versions","Multiple versions of Lit loaded. Loading multiple versions is not recommended.")}),globalThis.litIssuedWarnings??=new Set,Se=(e,t)=>{t+=` See https://lit.dev/msg/${e} for more information.`,globalThis.litIssuedWarnings.has(t)||globalThis.litIssuedWarnings.has(e)||(console.warn(t),globalThis.litIssuedWarnings.add(t))};const Pe={attribute:!0,type:String,converter:w,reflect:!1,hasChanged:$},xe=(e=Pe,t,s)=>{const{kind:i,metadata:n}=s;null==n&&Se("missing-class-metadata",`The class ${t} is missing decorator metadata. This could mean that you're using a compiler that supports decorators but doesn't support decorator metadata, such as TypeScript 5.1. Please update your compiler.`);let r=globalThis.litPropertyMetadata.get(n);if(void 0===r&&globalThis.litPropertyMetadata.set(n,r=new Map),"setter"===i&&((e=Object.create(e)).wrapped=!0),r.set(s.name,e),"accessor"===i){const{name:i}=s;return{set(s){const n=t.get.call(this);t.set.call(this,s),this.requestUpdate(i,n,e,!0,s)},init(t){return void 0!==t&&this._$changeProperty(i,void 0,e,t),t}}}if("setter"===i){const{name:i}=s;return function(s){const n=this[i];t.call(this,s),this.requestUpdate(i,n,e,!0,s)}}throw new Error(`Unsupported decorator location: ${i}`)};function ke(e){return(t,s)=>"object"==typeof s?xe(e,t,s):((e,t,s)=>{const i=t.hasOwnProperty(s);return t.constructor.createProperty(s,e),i?Object.getOwnPropertyDescriptor(t,s):void 0})(e,t,s)}
 /**
    * @license
    * Copyright 2017 Google LLC
    * SPDX-License-Identifier: BSD-3-Clause
-   */globalThis.litIssuedWarnings??=new Set;var Ee=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ce extends ye{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(i){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Ce.styles=[Ee],Ce.dependencies={},e([ke({type:Boolean,reflect:!0})],Ce.prototype,"ssr",void 0);var Te,Ne,Ue=o`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.btn-close-sm{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}.btn-close.btn-close-sm{height:var(--sgds-icon-size-sm);width:var(--sgds-icon-size-sm)}`;function Ve(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class Oe extends Ce{constructor(){super(...arguments),this.size="md",this.tone="default",this._clickHandler=()=>{}}_handleClick(){this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),Ve("sgds-icon")}render(){return Q`
+   */globalThis.litIssuedWarnings??=new Set;var Ee=o`:host{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;color:var(--sgds-body-color-default,#1a1a1a);display:block;font-family:var(--sgds-font-family-brand,"Inter",system-ui,sans-serif);font-size:var(--sgds-font-size-body-md,1rem);font-weight:var(--sgds-font-weight-regular,400);line-height:var(--sgds-line-height-xs,24px);margin:0;*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}:disabled{cursor:not-allowed}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}::slotted(a[target=_blank]):after,a[target=_blank]:after{background-color:currentColor;content:"/";display:inline-block;height:1em;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.774 4.4H9.8a.6.6 0 1 1 0 1.2c-.85 0-1.451 0-1.922.039-.463.038-.745.11-.968.223A2.4 2.4 0 0 0 5.861 6.91c-.113.223-.184.505-.222.968-.039.47-.04 1.072-.04 1.922v4.4c0 .85.001 1.451.04 1.922.038.463.11.745.222.968a2.4 2.4 0 0 0 1.05 1.048c.222.114.504.185.967.223.47.038 1.072.039 1.922.039h4.4c.85 0 1.451 0 1.921-.039.464-.038.746-.11.969-.223a2.4 2.4 0 0 0 1.048-1.048c.113-.223.185-.505.223-.968.038-.47.039-1.072.039-1.922a.6.6 0 1 1 1.2 0v.026c0 .818 0 1.468-.043 1.993-.044.538-.136.996-.35 1.415a3.6 3.6 0 0 1-1.573 1.574c-.42.213-.878.305-1.415.35-.525.042-1.175.042-1.993.042H9.774c-.818 0-1.469 0-1.993-.043-.538-.044-.996-.136-1.415-.35a3.6 3.6 0 0 1-1.574-1.573c-.213-.42-.305-.877-.35-1.415-.042-.525-.042-1.175-.042-1.993V9.774c0-.818 0-1.468.043-1.993.044-.538.136-.996.35-1.415a3.6 3.6 0 0 1 1.573-1.574c.42-.213.877-.305 1.415-.35C8.305 4.4 8.956 4.4 9.774 4.4ZM12.4 5a.6.6 0 0 1 .6-.6h6a.6.6 0 0 1 .6.6v6a.6.6 0 1 1-1.2 0V6.449l-5.976 5.975a.6.6 0 0 1-.848-.848L17.55 5.6H13a.6.6 0 0 1-.6-.6Z' fill='%230E0E0E'/%3E%3C/svg%3E");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;vertical-align:top;width:1em}::slotted(svg){vertical-align:middle}}`;class Ce extends be{emit(e,t){const s=new CustomEvent(e,Object.assign({bubbles:!0,cancelable:!1,composed:!0,detail:{}},t));return this.dispatchEvent(s),s}static define(e,t=this,s={}){if(customElements.get(e));else try{customElements.define(e,t,s)}catch(i){customElements.define(e,class extends t{},s)}}constructor(){super(),this.ssr=Boolean(this.shadowRoot),Object.entries(this.constructor.dependencies).forEach(([e,t])=>{this.constructor.define(e,t)})}firstUpdated(e){var t;super.firstUpdated(e),this.ssr&&(null===(t=this.shadowRoot)||void 0===t||t.querySelectorAll("slot").forEach(e=>{e.dispatchEvent(new Event("slotchange",{bubbles:!0,composed:!1,cancelable:!1}))}))}}Ce.styles=[Ee],Ce.dependencies={},e([ke({type:Boolean,reflect:!0})],Ce.prototype,"ssr",void 0);var Te,Ne,Ue=o`:host{--sgds-close-btn-border-radius:var(--sgds-border-radius-sm);display:inline-flex}:host([size=sm]) .btn-close{height:var(--sgds-dimension-24);width:var(--sgds-dimension-24)}:host([tone=fixed-light]) .btn-close{color:var(--sgds-color-fixed-light)}:host([tone=fixed-dark]) .btn-close{color:var(--sgds-color-fixed-dark)}.btn-close{align-items:center;background-color:var(--sgds-bg-transparent);border:0;border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-close-btn-border-radius);cursor:pointer;display:flex;height:var(--sgds-dimension-32);justify-content:center;padding:0;position:relative;width:var(--sgds-dimension-32)}.btn-close:focus,.btn-close:focus-visible,.btn-close:hover{background-color:var(--sgds-bg-translucent)}:host([tone=fixed-light]) .btn-close:focus,:host([tone=fixed-light]) .btn-close:focus-visible,:host([tone=fixed-light]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-light)}:host([tone=fixed-dark]) .btn-close:focus,:host([tone=fixed-dark]) .btn-close:focus-visible,:host([tone=fixed-dark]) .btn-close:hover{background-color:var(--sgds-bg-translucent-fixed-dark)}.btn-close:focus-visible{outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;function Ve(e){return!!function(e){return!!customElements.get(e)}(e)||(console.error(`Custom element of name : ${e} is not registered. Remember to import the component file for custom element registration`),!1)}class Oe extends Ce{constructor(){super(...arguments),this.size="md",this.tone="default",this._clickHandler=()=>{}}_handleClick(){this.removeEventListener("click",this._clickHandler),this.addEventListener("click",this._clickHandler)}firstUpdated(e){super.firstUpdated(e),Ve("sgds-icon")}render(){return Q`
       <button class="btn-close" aria-label="Close button" @click=${this._handleClick}>
-        <sgds-icon name="cross" size=${this.size}></sgds-icon>
+        <sgds-icon name="cross" size="sm"></sgds-icon>
       </button>
     `}}Oe.styles=[...Ce.styles,Ue],e([ke({type:String,reflect:!0})],Oe.prototype,"size",void 0),e([ke({type:String,reflect:!0})],Oe.prototype,"tone",void 0),Te="sgds-close-button",Ne=Oe,customElements.get(Te)||customElements.define(Te,Ne)});
 //# sourceMappingURL=index.umd.min.js.map