@synergy-design-system/components 3.0.0 → 3.2.0

package/dist/chunks/chunk.J3GDDM6Q.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/internal/form.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport type { ReactiveController, ReactiveControllerHost } from 'lit';\nimport type { SynergyFormControl } from '../internal/synergy-element.js';\nimport type SynValidate from '../components/validate/validate.js';\nimport type SynButton from '../components/button/button.js';\n\n//\n// We store a WeakMap of forms + controls so we can keep references to all Synergy controls within a given form. As\n// elements connect and disconnect to/from the DOM, their containing form is used as the key and the form control is\n// added and removed from the form's set, respectively.\n//\nexport const formCollections: WeakMap<HTMLFormElement, Set<SynergyFormControl>> = new WeakMap();\n\n//\n// We store a WeakMap of reportValidity() overloads so we can override it when form controls connect to the DOM and\n// restore the original behavior when they disconnect.\n//\nconst reportValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\nconst checkValidityOverloads: WeakMap<HTMLFormElement, () => boolean> = new WeakMap();\n\n//\n// We store a Set of controls that users have interacted with. This allows us to determine the interaction state\n// without littering the DOM with additional data attributes.\n//\nconst userInteractedControls: WeakSet<SynergyFormControl> = new WeakSet();\n\n//\n// We store a WeakMap of interactions for each form control so we can track when all conditions are met for validation.\n//\nconst interactions = new WeakMap<SynergyFormControl, string[]>();\n\nexport interface FormControlControllerOptions {\n  /** A function that returns the form containing the form control. */\n  form: (input: SynergyFormControl) => HTMLFormElement | null;\n  /** A function that returns the form control's name, which will be submitted with the form data. */\n  name: (input: SynergyFormControl) => string;\n  /** A function that returns the form control's current value. */\n  value: (input: SynergyFormControl) => unknown | unknown[];\n  /** A function that returns the form control's default value. */\n  defaultValue: (input: SynergyFormControl) => unknown | unknown[];\n  /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */\n  disabled: (input: SynergyFormControl) => boolean;\n  /**\n   * A function that maps to the form control's reportValidity() function. When the control is invalid, this will\n   * prevent submission and trigger the browser's constraint violation warning.\n   */\n  reportValidity: (input: SynergyFormControl) => boolean;\n\n  /**\n   * A function that maps to the form control's `checkValidity()` function. When the control is invalid, this will return false.\n   *   this is helpful is you want to check validation without triggering the native browser constraint violation warning.\n   */\n  checkValidity: (input: SynergyFormControl) => boolean;\n  /** A function that sets the form control's value */\n  setValue: (input: SynergyFormControl, value: unknown) => void;\n  /**\n   * An array of event names to listen to. When all events in the list are emitted, the control will receive validity\n   * states such as user-valid and user-invalid.user interacted validity states. */\n  assumeInteractionOn: string[];\n}\n\n/** A reactive controller to allow form controls to participate in form submission, validation, etc. */\nexport class FormControlController implements ReactiveController {\n  host: SynergyFormControl & ReactiveControllerHost;\n  form?: HTMLFormElement | null;\n  options: FormControlControllerOptions;\n\n  constructor(host: ReactiveControllerHost & SynergyFormControl, options?: Partial<FormControlControllerOptions>) {\n    (this.host = host).addController(this);\n    this.options = {\n      form: input => {\n        // If there's a form attribute, use it to find the target form by id\n        // Controls may not always reflect the 'form' property. For example, `<syn-button>` doesn't reflect.\n        const formId = input.form;\n\n        if (formId) {\n          const root = input.getRootNode() as Document | ShadowRoot | HTMLElement;\n          const form = root.querySelector(`#${formId}`);\n\n          if (form) {\n            return form as HTMLFormElement;\n          }\n        }\n\n        return input.closest('form');\n      },\n      name: input => input.name,\n      value: input => input.value,\n      defaultValue: input => input.defaultValue,\n      disabled: input => input.disabled ?? false,\n      reportValidity: input => (typeof input.reportValidity === 'function' ? input.reportValidity() : true),\n      checkValidity: input => (typeof input.checkValidity === 'function' ? input.checkValidity() : true),\n      setValue: (input, value: string) => (input.value = value),\n      assumeInteractionOn: ['syn-input'],\n      ...options\n    };\n  }\n\n  hostConnected() {\n    const form = this.options.form(this.host);\n\n    if (form) {\n      this.attachForm(form);\n    }\n\n    // Listen for interactions\n    interactions.set(this.host, []);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.addEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostDisconnected() {\n    this.detachForm();\n\n    // Clean up interactions\n    interactions.delete(this.host);\n    this.options.assumeInteractionOn.forEach(event => {\n      this.host.removeEventListener(event, this.handleInteraction);\n    });\n  }\n\n  hostUpdated() {\n    const form = this.options.form(this.host);\n\n    // Detach if the form no longer exists\n    if (!form) {\n      this.detachForm();\n    }\n\n    // If the form has changed, reattach it\n    if (form && this.form !== form) {\n      this.detachForm();\n      this.attachForm(form);\n    }\n\n    if (this.host.hasUpdated) {\n      this.setValidity(this.host.validity.valid);\n    }\n  }\n\n  private attachForm(form?: HTMLFormElement) {\n    if (form) {\n      this.form = form;\n\n      // Add this element to the form's collection\n      if (formCollections.has(this.form)) {\n        formCollections.get(this.form)!.add(this.host);\n      } else {\n        formCollections.set(this.form, new Set<SynergyFormControl>([this.host]));\n      }\n\n      this.form.addEventListener('formdata', this.handleFormData);\n      this.form.addEventListener('submit', this.handleFormSubmit);\n      this.form.addEventListener('reset', this.handleFormReset);\n\n      // Overload the form's reportValidity() method so it looks at Synergy form controls\n      if (!reportValidityOverloads.has(this.form)) {\n        reportValidityOverloads.set(this.form, this.form.reportValidity);\n        this.form.reportValidity = () => this.reportFormValidity();\n      }\n\n      // Overload the form's checkValidity() method so it looks at Synergy form controls\n      if (!checkValidityOverloads.has(this.form)) {\n        checkValidityOverloads.set(this.form, this.form.checkValidity);\n        this.form.checkValidity = () => this.checkFormValidity();\n      }\n    } else {\n      this.form = undefined;\n    }\n  }\n\n  private detachForm() {\n    if (!this.form) return;\n\n    const formCollection = formCollections.get(this.form);\n\n    if (!formCollection) {\n      return;\n    }\n\n    // Remove this host from the form's collection\n    formCollection.delete(this.host);\n\n    // Check to make sure there's no other form controls in the collection. If we do this\n    // without checking if any other controls are still in the collection, then we will wipe out the\n    // validity checks for all other elements.\n    // see: https://github.com/shoelace-style/shoelace/issues/1703\n    if (formCollection.size <= 0) {\n      this.form.removeEventListener('formdata', this.handleFormData);\n      this.form.removeEventListener('submit', this.handleFormSubmit);\n      this.form.removeEventListener('reset', this.handleFormReset);\n\n      // Remove the overload and restore the original method\n      if (reportValidityOverloads.has(this.form)) {\n        this.form.reportValidity = reportValidityOverloads.get(this.form)!;\n        reportValidityOverloads.delete(this.form);\n      }\n\n      if (checkValidityOverloads.has(this.form)) {\n        this.form.checkValidity = checkValidityOverloads.get(this.form)!;\n        checkValidityOverloads.delete(this.form);\n      }\n\n      // So it looks weird here to not always set the form to undefined. But I _think_ if we unattach this.form here,\n      // we end up in this fun spot where future validity checks don't have a reference to the form validity handler.\n      // First form element in sets the validity handler. So we can't clean up `this.form` until there are no other form elements in the form.\n      this.form = undefined;\n    }\n  }\n\n  private handleFormData = (event: FormDataEvent) => {\n    const disabled = this.options.disabled(this.host);\n    const name = this.options.name(this.host);\n    const value = this.options.value(this.host);\n\n    // For buttons, we only submit the value if they were the submitter. This is currently done in doAction() by\n    // injecting the name/value on a temporary button, so we can just skip them here.\n    const isButton = this.host.tagName.toLowerCase() === 'syn-button';\n\n    if (\n      this.host.isConnected &&\n      !disabled &&\n      !isButton &&\n      typeof name === 'string' &&\n      name.length > 0 &&\n      typeof value !== 'undefined'\n    ) {\n      // Add support for file inputs\n      if (value instanceof FileList) {\n        const file = value as FileList;\n        for (const f of file) {\n          event.formData.append(name, f, f.name);\n        }\n        return;\n      }\n    \n      if (Array.isArray(value)) {\n        (value as unknown[]).forEach(val => {\n          event.formData.append(name, (val as string | number | boolean).toString());\n        });\n      } else {\n        event.formData.append(name, (value as string | number | boolean).toString());\n      }\n    }\n  };\n\n  private handleFormSubmit = (event: Event) => {\n    const disabled = this.options.disabled(this.host);\n    const reportValidity = this.options.reportValidity;\n\n    // Update the interacted state for all controls when the form is submitted\n    if (this.form && !this.form.noValidate) {\n      formCollections.get(this.form)?.forEach(control => {\n        this.setUserInteracted(control, true);\n      });\n    }\n\n    if (this.form && !this.form.noValidate && !disabled && !reportValidity(this.host)) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n    }\n  };\n\n  private handleFormReset = () => {\n    this.options.setValue(this.host, this.options.defaultValue(this.host));\n    this.setUserInteracted(this.host, false);\n    interactions.set(this.host, []);\n  };\n\n  private handleInteraction = (event: Event) => {\n    const emittedEvents = interactions.get(this.host)!;\n\n    if (!emittedEvents.includes(event.type)) {\n      emittedEvents.push(event.type);\n    }\n\n    // Mark it as user-interacted as soon as all associated events have been emitted\n    if (emittedEvents.length === this.options.assumeInteractionOn.length) {\n      this.setUserInteracted(this.host, true);\n    }\n  };\n\n  private checkFormValidity = () => {\n    //\n    // This is very similar to the `reportFormValidity` function, but it does not trigger native constraint validation\n    // Allow the user to simply check if the form is valid and handling validity in their own way.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Synergy inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll<HTMLInputElement>('*');\n\n      for (const element of elements) {\n        if (typeof element.checkValidity === 'function') {\n          if (!element.checkValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private reportFormValidity = () => {\n    //\n    // Synergy form controls work hard to act like regular form controls. They support the Constraint Validation API\n    // and its associated methods such as setCustomValidity() and reportValidity(). However, the HTMLFormElement also\n    // has a reportValidity() method that will trigger validation on all child controls. Since we're not yet using\n    // ElementInternals, we need to overload this method so it looks for any element with the reportValidity() method.\n    //\n    // We preserve the original method in a WeakMap, but we don't call it from the overload because that would trigger\n    // validations in an unexpected order. When the element disconnects, we revert to the original behavior. This won't\n    // be necessary once we can use ElementInternals.\n    //\n    // Note that we're also honoring the form's novalidate attribute.\n    //\n    if (this.form && !this.form.noValidate) {\n      // This seems sloppy, but checking all elements will cover native inputs, Synergy inputs, and other custom\n      // elements that support the constraint validation API.\n      const elements = this.form.querySelectorAll<HTMLInputElement>('*');\n\n      for (const element of elements) {\n        if (typeof element.reportValidity === 'function') {\n          if (!element.reportValidity()) {\n            return false;\n          }\n        }\n      }\n    }\n\n    return true;\n  };\n\n  private setUserInteracted(el: SynergyFormControl, hasInteracted: boolean) {\n    if (hasInteracted) {\n      userInteractedControls.add(el);\n    } else {\n      userInteractedControls.delete(el);\n    }\n\n    el.requestUpdate();\n  }\n\n  private doAction(type: 'submit' | 'reset', submitter?: HTMLInputElement | SynButton) {\n    if (this.form) {\n      const button = document.createElement('button');\n      button.type = type;\n      button.style.position = 'absolute';\n      button.style.width = '0';\n      button.style.height = '0';\n      button.style.clipPath = 'inset(50%)';\n      button.style.overflow = 'hidden';\n      button.style.whiteSpace = 'nowrap';\n\n      // Pass name, value, and form attributes through to the temporary button\n      if (submitter) {\n        button.name = submitter.name;\n        button.value = submitter.value;\n\n        ['formaction', 'formenctype', 'formmethod', 'formnovalidate', 'formtarget'].forEach(attr => {\n          if (submitter.hasAttribute(attr)) {\n            button.setAttribute(attr, submitter.getAttribute(attr)!);\n          }\n        });\n      }\n\n      this.form.append(button);\n      button.click();\n      button.remove();\n    }\n  }\n\n  /** Returns the associated `<form>` element, if one exists. */\n  getForm() {\n    return this.form ?? null;\n  }\n\n  /** Resets the form, restoring all the control to their default value */\n  reset(submitter?: HTMLInputElement | SynButton) {\n    this.doAction('reset', submitter);\n  }\n\n  /** Submits the form, triggering validation and form data injection. */\n  submit(submitter?: HTMLInputElement | SynButton) {\n    // Calling form.submit() bypasses the submit event and constraint validation. To prevent this, we can inject a\n    // native submit button into the form, \"click\" it, then remove it to simulate a standard form submission.\n    this.doAction('submit', submitter);\n  }\n\n  /**\n   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update\n   * the host element immediately, i.e. before Lit updates the component in the next update.\n   */\n  setValidity(isValid: boolean) {\n    const host = this.host;\n    const hasInteracted = Boolean(userInteractedControls.has(host));\n    const required = Boolean(host.required);\n\n    //\n    // We're mapping the following \"states\" to data attributes. In the future, we can use ElementInternals.states to\n    // create a similar mapping, but instead of [data-invalid] it will look like :--invalid.\n    //\n    // See this RFC for more details: https://github.com/shoelace-style/shoelace/issues/1011\n    //\n    host.toggleAttribute('data-required', required);\n    host.toggleAttribute('data-optional', !required);\n    host.toggleAttribute('data-invalid', !isValid);\n    host.toggleAttribute('data-valid', isValid);\n    const parent = host.parentElement;\n    if (parent && parent.tagName.toLocaleUpperCase() === 'SYN-VALIDATE') {\n      const isValidateValid = (parent as SynValidate).getValidity();\n      host.toggleAttribute('data-user-invalid', !isValid && !isValidateValid);\n    } else {\n      host.toggleAttribute('data-user-invalid', !isValid && hasInteracted);\n    }\n    host.toggleAttribute('data-user-valid', isValid && hasInteracted);\n  }\n\n  /**\n   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything\n   * that affects constraint validation changes so the component receives the correct validity states.\n   */\n  updateValidity() {\n    const host = this.host;\n    this.setValidity(host.validity.valid);\n  }\n\n  /**\n   * Dispatches a non-bubbling, cancelable custom event of type `syn-invalid`.\n   * If the `syn-invalid` event will be cancelled then the original `invalid`\n   * event (which may have been passed as argument) will also be cancelled.\n   * If no original `invalid` event has been passed then the `syn-invalid`\n   * event will be cancelled before being dispatched.\n   */\n  emitInvalidEvent(originalInvalidEvent?: Event) {\n    const slInvalidEvent = new CustomEvent<Record<PropertyKey, never>>('syn-invalid', {\n      bubbles: false,\n      composed: false,\n      cancelable: true,\n      detail: {}\n    });\n\n    if (!originalInvalidEvent) {\n      slInvalidEvent.preventDefault();\n    }\n\n    if (!this.host.dispatchEvent(slInvalidEvent)) {\n      originalInvalidEvent?.preventDefault();\n    }\n  }\n}\n\n/*\n * Predefined common validity states.\n * All of them are read-only.\n */\n\n// A validity state object that represents `valid`\nexport const validValidityState: ValidityState = Object.freeze({\n  badInput: false,\n  customError: false,\n  patternMismatch: false,\n  rangeOverflow: false,\n  rangeUnderflow: false,\n  stepMismatch: false,\n  tooLong: false,\n  tooShort: false,\n  typeMismatch: false,\n  valid: true,\n  valueMissing: false\n});\n\n// A validity state object that represents `value missing`\nexport const valueMissingValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  valueMissing: true\n});\n\n// A validity state object that represents a custom error\nexport const customErrorValidityState: ValidityState = Object.freeze({\n  ...validValidityState,\n  valid: false,\n  customError: true\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.43YNZAWL.js → chunk.JDYQ7EFG.js}

@@ -71,4 +71,4 @@ var tab_styles_default = css`
 export {
   tab_styles_default
 };
-//# sourceMappingURL=chunk.43YNZAWL.js.map
+//# sourceMappingURL=chunk.JDYQ7EFG.js.map

package/dist/chunks/chunk.JDYQ7EFG.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tab/tab.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: inline-block;\n  }\n\n  .tab {\n    display: inline-flex;\n    align-items: center;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    border-radius: var(--syn-border-radius-medium);\n    color: var(--syn-color-neutral-600);\n    padding: var(--syn-spacing-medium) var(--syn-spacing-large);\n    white-space: nowrap;\n    user-select: none;\n    -webkit-user-select: none;\n    cursor: pointer;\n    transition:\n      var(--transition-speed) box-shadow,\n      var(--transition-speed) color;\n  }\n\n  .tab:hover:not(.tab--disabled) {\n    color: var(--syn-color-primary-600);\n  }\n\n  :host(:focus) {\n    outline: transparent;\n  }\n\n  :host(:focus-visible) {\n    color: var(--syn-color-primary-600);\n    outline: var(--syn-focus-ring);\n    outline-offset: calc(-1 * var(--syn-focus-ring-width) - var(--syn-focus-ring-offset));\n  }\n\n  .tab.tab--active:not(.tab--disabled) {\n    color: var(--syn-color-primary-600);\n  }\n\n  .tab.tab--closable {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  .tab.tab--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .tab__close-button {\n    font-size: var(--syn-font-size-small);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .tab__close-button::part(base) {\n    padding: var(--syn-spacing-3x-small);\n  }\n\n  @media (forced-colors: active) {\n    .tab.tab--active:not(.tab--disabled) {\n      outline: solid 1px transparent;\n      outline-offset: -3px;\n    }\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AAEpB,IAAO,qBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.3FT4KLCP.js → chunk.JFAN6AQH.js}

@@ -6,35 +6,35 @@ import {
 } from "./chunk.6P2XCD2Q.js";
 import {
   input_styles_default
-} from "./chunk.XAQKFEHH.js";
+} from "./chunk.PHFTXPIT.js";
 import {
   SynDivider
-} from "./chunk.F4TDCDGD.js";
+} from "./chunk.FBYEVEZ6.js";
 import {
   defaultValue
-} from "./chunk.3NXKLKWH.js";
+} from "./chunk.3JDUKQRN.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
-} from "./chunk.G4URZQCL.js";
+} from "./chunk.PTRCO527.js";
 import {
   FormControlController
-} from "./chunk.U5757NSE.js";
+} from "./chunk.J3GDDM6Q.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   SynIcon
-} from "./chunk.GJIDYO3Z.js";
+} from "./chunk.KHRQ5VI4.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.YACUYJZN.js";
 import {
   createNumericStrategy,
   modernNumericStrategy,
@@ -42,10 +42,10 @@ import {
 } from "./chunk.QDG5AJZX.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass,
   __privateAdd,
@@ -866,4 +866,4 @@ SynInput = __decorateClass([
 export {
   SynInput
 };
-//# sourceMappingURL=chunk.3FT4KLCP.js.map
+//# sourceMappingURL=chunk.JFAN6AQH.js.map

package/dist/chunks/chunk.JFAN6AQH.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/input/input.component.ts", "../../src/internal/longpress.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { classMap } from 'lit/directives/class-map.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\nimport formControlCustomStyles from '../../styles/form-control.custom.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIcon from '../icon/icon.component.js';\nimport SynDivider from '../divider/divider.component.js';\nimport { longPress } from '../../internal/longpress.js';\nimport styles from './input.styles.js';\nimport customStyles from './input.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport {\n  type NumericStrategy,\n  createNumericStrategy,\n  nativeNumericStrategy,\n  modernNumericStrategy,\n} from './strategies.js';\nimport { formatNumber } from './formatter.js';\nimport type { SynClampDetails } from '../../events/syn-clamp.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Inputs collect data from the user.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-divider\n *\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the input.\n * @slot suffix - Used to append a presentational icon or similar element to the input.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot show-password-icon - An icon to use in lieu of the default show password icon.\n * @slot hide-password-icon - An icon to use in lieu of the default hide password icon.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\n * @slot increment-number-stepper - An icon to use in lieu of the default increment number stepper icon.\n * @slot decrement-number-stepper - An icon to use in lieu of the default decrement number stepper icon.\n *\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-change - Emitted when an alteration to the control's value is committed by the user.\n * @event syn-clear - Emitted when the clear button is activated.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.\n *\n * @csspart form-control - The form control that wraps the label, input, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The input's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart base - The component's base wrapper.\n * @csspart input - The internal `<input>` control.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart clear-button - The clear button.\n * @csspart password-toggle-button - The password toggle button.\n * @csspart suffix - The container that wraps the suffix.\n * @csspart stepper - The container that wraps the number stepper.\n * @csspart decrement-number-stepper - The decrement number stepper button.\n * @csspart increment-number-stepper - The increment number stepper button.\n * @csspart divider - The divider between the increment and decrement number stepper buttons.\n *\n * @cssproperty --syn-input-autofill-shadow - The shadow to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-readonly-shadow - The shadow to apply when the input is readonly and autofilled.\n * @cssproperty --syn-input-autofill-text-fill-color - The text fill color to apply when the input is autofilled.\n * @cssproperty --syn-input-autofill-caret-color - The caret color to apply when the input is autofilled.\n */\n@enableDefaultSettings('SynInput')\nexport default class SynInput extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = {\n\t\t'syn-icon': SynIcon,\n\t\t'syn-divider': SynDivider\n\t};\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input']\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label', 'prefix', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  @query('.input__control') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  private __numberInput = Object.assign(document.createElement('input'), { type: 'number' });\n  private __dateInput = Object.assign(document.createElement('input'), { type: 'date' });\n\n  /**\n   * The type of input. Works the same as a native `<input>` element, but only a subset of types are supported. Defaults\n   * to `text`.\n   */\n  @property({ reflect: true }) type:\n    | 'date'\n    | 'datetime-local'\n    | 'email'\n    | 'number'\n    | 'password'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'time'\n    | 'url' = 'text';\n\n  /** The name of the input, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the input, submitted as a name/value pair with form data. */\n  @property() value = '';\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\n\n  /** The input's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The input's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Adds a clear button when the input is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Adds a button to toggle the password's visibility. Only applies to password types. */\n  @property({ attribute: 'password-toggle', type: Boolean }) passwordToggle = false;\n\n  /** Determines whether or not the password is currently visible. Only applies to password input types. */\n  @property({ attribute: 'password-visible', type: Boolean }) passwordVisible = false;\n\n  /** Hides the increment/decrement spin buttons for number inputs. */\n  @property({ attribute: 'no-spin-buttons', type: Boolean }) noSpinButtons = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the input a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** A regular expression pattern to validate input against. */\n  @property() pattern: string;\n\n  /** The minimum length of input that will be considered valid. */\n  @property({ type: Number }) minlength: number;\n\n  /** The maximum length of input that will be considered valid. */\n  @property({ type: Number }) maxlength: number;\n\n  /** The input's minimum value. Only applies to date and number input types. */\n  @property() min: number | string;\n\n  /** The input's maximum value. Only applies to date and number input types. */\n  @property() max: number | string;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to date and number input types.\n   */\n  @property() step: number | 'any';\n\n  /** Controls whether and how text input is automatically capitalized as it is entered by the user. */\n  @property() autocapitalize: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters';\n\n  /** Indicates whether the browser's autocorrect feature is on or off. */\n  @property({\n    attribute: 'autocorrect',\n    reflect: true,\n    converter: {\n      fromAttribute: (value: string) => value === '' || value === 'on',\n      toAttribute: (value: boolean) => (value ? 'on' : 'off')\n    },\n    type: Boolean,\n  }) autocorrect: boolean;\n\n  /**\n   * Specifies what permission the browser has to provide assistance in filling out form field values. Refer to\n   * [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.\n   */\n  @property() autocomplete: string;\n\n  /** Indicates that the input should receive focus on page load. */\n  @property({ type: Boolean }) autofocus: boolean;\n\n  /** Used to customize the label or icon of the Enter key on virtual keyboards. */\n  @property() enterkeyhint: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';\n\n  /** Enables spell checking on the input. */\n  @property({\n    type: Boolean,\n    converter: {\n      // Allow \"true|false\" attribute values but keep the property boolean\n      fromAttribute: value => (!value || value === 'false' ? false : true),\n      toAttribute: value => (value ? 'true' : 'false')\n    }\n  })\n  spellcheck = true;\n\n  /**\n   * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual\n   * keyboard on supportive devices.\n   */\n  @property() inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /**\n   * Optional options that should be passed to the `NumberFormatter` when formatting the value.\n   * This is used to format the number when the input type is `number`.\n   * Note this can only be set via `property`, not as an `attribute`!\n   */\n  @property({\n    attribute: false,\n    reflect: false,\n    type: Object,\n  }) numberFormatterOptions: Intl.NumberFormatOptions;\n\n  /**\n   * The minimal amount of fraction digits to use for numeric values.\n   * Used to format the number when the input type is `number`.\n   */\n  @property({\n    attribute: 'min-fraction-digits',\n    type: Number,\n  }) minFractionDigits: number;\n\n  /**\n   * The maximal amount of fraction digits to use for numeric values.\n   * Used to format the number when the input type is `number`.\n   */\n  @property({\n    attribute: 'max-fraction-digits',\n    type: Number,\n  }) maxFractionDigits: number;\n\n  #numericStrategy: NumericStrategy = modernNumericStrategy;\n\n  /**\n   * Defines the strategy for handling numbers in the numeric input.\n   * This is used to determine how the input behaves when the user interacts with it.\n   *\n   * Includes the following configuration options:\n   *\n   * - **autoClamp**: If true, the input will clamp the value to the min and max attributes.\n   * - **noStepAlign**: If true, the input will not align the value to the step attribute.\n   * - **noStepValidation**: If true, the input will not validate the value against the step attribute.\n   * \n   * You may provide this as one of the following values:\n   *\n   * - 'native': Uses the native browser implementation.\n   * - 'modern': Uses a more intuitive implementation:\n   *   - Values are clamped to the nearest min or max value.\n   *   - Stepping is inclusive to the provided min and max values.\n   *   - Provided stepping is no longer used in validation.\n   * - An object that matches the `NumericStrategy` type. Note this can only be set via `property`, not as an `attribute`!\n   */\n  @property({\n    attribute: 'numeric-strategy',\n    converter: {\n      fromAttribute: (value) => {\n        return value === 'modern'\n          ? modernNumericStrategy\n          : nativeNumericStrategy;\n      },\n    },\n    type: Object,\n  })\n  set numericStrategy(value: 'native' | 'modern' | Partial<NumericStrategy>) {\n    switch (typeof value) {\n      case 'string': this.#numericStrategy = value === 'modern' ? modernNumericStrategy : nativeNumericStrategy; break;\n      case 'object': this.#numericStrategy = createNumericStrategy(value); break;\n      default: this.#numericStrategy = nativeNumericStrategy;\n    }\n  }\n\n  /**\n   * @default modernNumericStrategy\n   */\n  get numericStrategy(): 'native' | 'modern' | Partial<NumericStrategy> {\n    return this.#numericStrategy;\n  }\n\n  //\n  // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties\n  // can be set before the component is rendered.\n  //\n\n  /**\n   * Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type=\"{{type}}\">` implementation and may result in an error.\n   */\n  get valueAsDate() {\n    this.__dateInput.type = this.type;\n    this.__dateInput.value = this.value;\n    return this.input?.valueAsDate || this.__dateInput.valueAsDate;\n  }\n\n  set valueAsDate(newValue: Date | null) {\n    this.__dateInput.type = this.type;\n    this.__dateInput.valueAsDate = newValue;\n    this.value = this.__dateInput.value;\n  }\n\n  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */\n  get valueAsNumber() {\n    this.__numberInput.value = this.value;\n    return this.input?.valueAsNumber || this.__numberInput.valueAsNumber;\n  }\n\n  set valueAsNumber(newValue: number) {\n    this.__numberInput.valueAsNumber = newValue;\n    this.value = this.__numberInput.value;\n  }\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleStep(){\n    this.handleInput();\n    this.input.focus();\n  }\n\n  private handleStepUp() {\n    this.stepUp();\n    this.handleStep();\n  }\n\n  private handleStepDown() {\n    this.stepDown();\n    this.handleStep();\n  }\n  \n  private isDecrementDisabled() {\n    if(this.disabled || this.readonly) {\n      return true;\n    }\n\n    if (this.min === undefined || this.min === null) {\n      return false;\n    }\n\n    const min = typeof this.min === 'string' ? parseFloat(this.min) : this.min;\n\n    // #872: Use value instead of valueAsNumber as valueAsNumber is drawn from the hidden input\n    // that is not yet updated in the current render cycle.\n    return parseFloat(this.value) <= min;\n  }\n\n  private isIncrementDisabled() {\n    if(this.disabled || this.readonly) {\n      return true;\n    }\n\n    if (this.max === undefined || this.max === null) {\n      return false;\n    }\n\n    const max = typeof this.max === 'string' ? parseFloat(this.max) : this.max;\n\n    // #872: Use value instead of valueAsNumber as valueAsNumber is drawn from the hidden input\n    // that is not yet updated in the current render cycle.\n    return parseFloat(this.value) >= max;\n  }\n\n  \n  private handleNumericStrategyAutoClamp() {\n    const {\n      valueAsNumber,\n      max: initialMax,\n      min: initialMin,\n    } = this;\n\n    // Exit early if there should be no clamping\n    if (!this.#numericStrategy.autoClamp) {\n      return {\n        eventObj: null,\n        shouldClamp: false,\n        nextValue: valueAsNumber,\n      }\n    }\n\n    const min = typeof initialMin === 'string' ? parseFloat(initialMin) : initialMin;\n    const max = typeof initialMax === 'string' ? parseFloat(initialMax) : initialMax;\n\n    let nextValue = valueAsNumber;\n    let clampEvent = '';\n    if (nextValue < min) {\n      nextValue = min;\n      clampEvent = 'min';\n    } else if (nextValue > max) {\n      nextValue = max;\n      clampEvent = 'max';\n    }\n\n    const eventObj = clampEvent ? {\n      detail: {\n        clampedTo: clampEvent as SynClampDetails['clampedTo'],\n        lastUserValue: valueAsNumber,\n      },\n    } : null;\n\n    return {\n      eventObj,\n      shouldClamp: !!eventObj,\n      nextValue,\n    };\n  }\n\n  private handleChange() {\n    if (this.type === 'number' && (this.#isNumberFormattingEnabled() || this.#numericStrategy.autoClamp)) {\n      const { eventObj, shouldClamp, nextValue } = this.handleNumericStrategyAutoClamp();\n      let initialNextValue = this.#numericStrategy.autoClamp ? nextValue : this.valueAsNumber;\n\n      // Make sure to flag non numeric values as invalid\n      if (isNaN(initialNextValue)) {\n        // Make sure to set the value to the min or max value if the input is empty\n        // If neither min nor max are set, we set the value to 0\n        const { max, min } = this;\n\n        if (max !== undefined && max !== null) {\n          initialNextValue = typeof max === 'string' ? parseFloat(max) : +max;\n        } else if (min !== undefined && min !== null) {\n          initialNextValue = typeof min === 'string' ? parseFloat(min) : +min;\n        } else {\n          initialNextValue = 0;\n        }\n      }\n\n      this.value = this.#isNumberFormattingEnabled()\n        ? this.#formatNumber(initialNextValue)\n        : initialNextValue.toString();\n\n      // Make sure to wait for the updateComplete to be done before updating the validity\n      // and firing events. This is needed because valueAsNumber is not updated yet when the event is fired\n      this.updateComplete.then(() => {\n\n        if (shouldClamp && eventObj) {\n          this.emit('syn-clamp', eventObj);\n        }\n\n        this.formControlController.updateValidity();\n        this.emit('syn-change');\n      });\n      return;\n    }\n    this.value = this.input.value;\n    this.emit('syn-change');\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.preventDefault();\n\n    if (this.value !== '') {\n      this.value = '';\n      this.emit('syn-clear');\n      this.emit('syn-input');\n      this.emit('syn-change');\n    }\n\n    this.input.focus();\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleInput() {\n    this.value = this.input.value;\n    this.formControlController.updateValidity();\n    this.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this.#numericStrategy.noStepAlign && this.type === 'number') {\n      const { key } = event;\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        event.preventDefault();\n        event.stopPropagation();\n\n        if (key === 'ArrowUp') {\n          this.handleStepUp();\n        } else if (key === 'ArrowDown') {\n          this.handleStepDown();\n        }\n        this.handleChange();\n        return;\n      }\n    }\n    const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n\n    // Pressing enter when focused on an input should submit the form like a native input, but we wait a tick before\n    // submitting to allow users to cancel the keydown event if they need to\n    if (event.key === 'Enter' && !hasModifier) {\n      setTimeout(() => {\n        //\n        // When using an Input Method Editor (IME), pressing enter will cause the form to submit unexpectedly. One way\n        // to check for this is to look at event.isComposing, which will be true when the IME is open.\n        //\n        // See https://github.com/shoelace-style/shoelace/pull/988\n        //\n        if (!event.defaultPrevented && !event.isComposing) {\n          this.formControlController.submit();\n        }\n      });\n    }\n  }\n\n  private handlePasswordToggle() {\n    this.passwordVisible = !this.passwordVisible;\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch('step', { waitUntilFirstUpdate: true })\n  handleStepChange() {\n    // If the numericStrategy has noStepValidation set, skip this as the inputs step will always set to \"any\".\n    if (this.#numericStrategy.noStepValidation) {\n      return;\n    }\n    // If step changes, the value may become invalid so we need to recheck after the update. We set the new step\n    // imperatively so we don't have to wait for the next render to report the updated validity.\n    this.input.step = String(this.step);\n    this.formControlController.updateValidity();\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the input. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the input. */\n  select() {\n    this.input.select();\n  }\n\n  /** Sets the start and end positions of the text selection (0-based). */\n  setSelectionRange(\n    selectionStart: number,\n    selectionEnd: number,\n    selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n  ) {\n    this.input.setSelectionRange(selectionStart, selectionEnd, selectionDirection);\n  }\n\n  /** Replaces a range of text with a new string. */\n  setRangeText(\n    replacement: string,\n    start?: number,\n    end?: number,\n    selectMode: 'select' | 'start' | 'end' | 'preserve' = 'preserve'\n  ) {\n    const selectionStart = start ?? this.input.selectionStart!;\n    const selectionEnd = end ?? this.input.selectionEnd!;\n\n    this.input.setRangeText(replacement, selectionStart, selectionEnd, selectMode);\n\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n    }\n  }\n\n  /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */\n  showPicker() {\n    if ('showPicker' in HTMLInputElement.prototype) {\n      this.input.showPicker();\n    }\n  }\n\n  /** Increments the value of a numeric input type by the value of the step attribute. */\n  stepUp() {\n    if (this.#numericStrategy.noStepAlign) {\n      const { max, step, valueAsNumber } = this;\n\n      // Needed because the input could be empty. In this case, valueAsNumber is NaN\n      const usedInitialValue = Number.isNaN(valueAsNumber) ? 0 : valueAsNumber;\n      const usedMin = typeof this.min === 'string' ? parseFloat(this.min) : this.min;\n      const usedMax = typeof max === 'string' ? parseFloat(max) : max;\n      const usedStep = (typeof step === 'undefined' || step === null || step === 'any') ? 1 : typeof step === 'number' ? step : parseFloat(step);\n\n      let wantedNextValue = usedInitialValue + usedStep;\n\n      if (typeof usedMax === 'number' && usedMax < wantedNextValue) {\n        wantedNextValue = usedMax;\n      } else if (typeof usedMin === 'number' && usedMin > wantedNextValue) {\n        wantedNextValue = usedMin;\n      }\n\n      const finalStringValue = this.#isNumberFormattingEnabled()\n        ? this.#formatNumber(wantedNextValue)\n        : wantedNextValue.toString();\n\n      this.input.value = finalStringValue;\n\n      if (this.value !== this.input.value) {\n        this.value = this.input.value;\n      }\n      return;\n    }\n    this.input.stepUp();\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n    }\n  }\n\n  /** Decrements the value of a numeric input type by the value of the step attribute. */\n  stepDown() {\n    if (this.#numericStrategy.noStepAlign) {\n      const { min, max, step, valueAsNumber } = this;\n\n      // Needed because the input could be empty. In this case, valueAsNumber is NaN\n      const usedInitialValue = Number.isNaN(valueAsNumber) ? 0 : valueAsNumber;\n      const usedMin = typeof min === 'string' ? parseFloat(min) : min;\n      const usedMax = typeof max === 'string' ? parseFloat(max) : max;\n      const usedStep = (typeof step === 'undefined' || step === null || step === 'any') ? 1 : typeof step === 'number' ? step : parseFloat(step);\n\n      let wantedNextValue = usedInitialValue - usedStep;\n      \n      if (typeof usedMin === 'number' && usedMin > wantedNextValue) {\n        wantedNextValue = usedMin;\n      } else if (typeof usedMax === 'number' && usedMax < wantedNextValue) {\n        wantedNextValue = usedMax;\n      }\n\n      const finalStringValue = this.#isNumberFormattingEnabled()\n        ? this.#formatNumber(wantedNextValue)\n        : wantedNextValue.toString();\n\n      this.input.value = finalStringValue;\n\n      if (this.value !== this.input.value) {\n        this.value = this.input.value;\n      }\n      return;\n    }\n    this.input.stepDown();\n    if (this.value !== this.input.value) {\n      this.value = this.input.value;\n    }\n  }\n\n  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\n  checkValidity() {\n    return this.input.checkValidity();\n  }\n\n  /** Gets the associated form, if one exists. */\n  getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  reportValidity() {\n    return this.input.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  #formatNumber(value: number) {\n    return formatNumber(value, this.step, {\n      maximumFractionDigits: this.maxFractionDigits,\n      minimumFractionDigits: this.minFractionDigits,\n      ...this.numberFormatterOptions,\n    });\n  }\n\n  #isNumberFormattingEnabled() {\n    const {\n      numberFormatterOptions,\n      maxFractionDigits,\n      minFractionDigits,\n      step,\n    } = this;\n\n    const hasMaxFractionDigits = typeof maxFractionDigits !== 'undefined' && !Number.isNaN(maxFractionDigits);\n    const hasMinFractionDigits = typeof minFractionDigits !== 'undefined' && !Number.isNaN(minFractionDigits);\n\n    // Easy checks first: If we have a min or max fraction digit, proceed\n    if (hasMaxFractionDigits || hasMinFractionDigits) {\n      return true;\n    }\n    \n    // Check if there are any options that where provided via formatter options\n    if (typeof numberFormatterOptions === 'object') {\n      return true;\n    }\n\n    // As a last fallback, see if the step has a decimal value\n    // If it has, we should format according to the steps amount of fraction digits\n    const stepToUse = step === 'any' || !step ? 1 : +step;\n    const stepFractionDigits = stepToUse.toString().split('.')[1]?.length || 0;\n\n    return stepFractionDigits > 0;\n  }\n\n  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasPrefixSlot = this.hasSlotController.test('prefix');\n    const hasSuffixSlot = this.hasSlotController.test('suffix');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n    const hasClearIcon = this.clearable && !this.disabled && !this.readonly;\n    const isClearIconVisible = hasClearIcon && (typeof this.value === 'number' || this.value.length > 0);\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--small': this.size === 'small',\n          'form-control--medium': this.size === 'medium',\n          'form-control--large': this.size === 'large',\n          'form-control--has-label': hasLabel,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-prefix': hasPrefixSlot,\n          'form-control--has-suffix': hasSuffixSlot\n        })}\n      >\n        <label\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          for=\"input\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <div\n            part=\"base\"\n            class=${classMap({\n              input: true,\n\n              // Sizes\n              'input--small': this.size === 'small',\n              'input--medium': this.size === 'medium',\n              'input--large': this.size === 'large',\n\n              // States\n              'input--standard': !this.readonly,\n              'input--readonly': this.readonly,\n              'input--disabled': this.disabled,\n              'input--focused': this.hasFocus,\n              'input--empty': !this.value,\n              'input--no-spin-buttons': this.noSpinButtons\n            })}\n          >\n            <span part=\"prefix\" class=\"input__prefix\">\n              <slot name=\"prefix\"></slot>\n            </span>\n\n            <input\n              part=\"input\"\n              id=\"input\"\n              class=\"input__control\"\n              type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}\n              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n              name=${ifDefined(this.name)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              ?required=${this.required}\n              placeholder=${ifDefined(this.placeholder)}\n              minlength=${ifDefined(this.minlength)}\n              maxlength=${ifDefined(this.maxlength)}\n              min=${ifDefined(this.min)}\n              max=${ifDefined(this.max)}\n              step=${ifDefined(!this.#numericStrategy.noStepValidation ? this.step as number : 'any')}\n              .value=${live(this.value)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocomplete=${ifDefined(this.autocomplete)}\n              autocorrect=${ifDefined(this.autocorrect ? undefined : 'off')}\n              ?autofocus=${this.autofocus}\n              spellcheck=${this.spellcheck}\n              pattern=${ifDefined(this.pattern)}\n              enterkeyhint=${ifDefined(this.enterkeyhint)}\n              inputmode=${ifDefined(this.inputmode)}\n              aria-describedby=\"help-text\"\n              @change=${this.handleChange}\n              @input=${this.handleInput}\n              @invalid=${this.handleInvalid}\n              @keydown=${this.handleKeyDown}\n              @focus=${this.handleFocus}\n              @blur=${this.handleBlur}\n            />\n\n            ${isClearIconVisible\n              ? html`\n                  <button\n                    part=\"clear-button\"\n                    class=\"input__clear\"\n                    type=\"button\"\n                    aria-label=${this.localize.term('clearEntry')}\n                    @click=${this.handleClearClick}\n                    tabindex=\"-1\"\n                  >\n                    <slot name=\"clear-icon\">\n                      <syn-icon name=\"x-circle-fill\" library=\"system\"></syn-icon>\n                    </slot>\n                  </button>\n                `\n              : ''}\n            ${this.passwordToggle && !this.disabled\n              ? html`\n                  <button\n                    part=\"password-toggle-button\"\n                    class=\"input__password-toggle\"\n                    type=\"button\"\n                    aria-label=${this.localize.term(this.passwordVisible ? 'hidePassword' : 'showPassword')}\n                    @click=${this.handlePasswordToggle}\n                    tabindex=\"-1\"\n                  >\n                    ${this.passwordVisible\n                      ? html`\n                          <slot name=\"show-password-icon\">\n                            <syn-icon name=\"eye-slash\" library=\"system\"></syn-icon>\n                          </slot>\n                        `\n                      : html`\n                          <slot name=\"hide-password-icon\">\n                            <syn-icon name=\"eye\" library=\"system\"></syn-icon>\n                          </slot>\n                        `}\n                  </button>\n                `\n              : ''}\n\n            <span part=\"suffix\" class=\"input__suffix\">\n              <slot name=\"suffix\"></slot>\n            </span>\n\n            ${this.type === 'number' && !this.noSpinButtons\n              ? html`\n              <div part=\"stepper\" class=\"input__number-stepper\">\n                <button\n                  part=\"decrement-number-stepper\"\n                  class=\"input__number-stepper-button\"\n                  type=\"button\"\n                  ?disabled=${this.isDecrementDisabled()}\n                  aria-hidden=\"true\"\n                  ${longPress({ start: () => this.handleStepDown(), end: () => this.handleChange()})}\n                  tabindex=\"-1\"\n                >\n                  <slot name=\"decrement-number-stepper\">\n                    <syn-icon name=\"indeterminate\" library=\"system\"></syn-icon>\n                  </slot>\n                </button>\n                <syn-divider class=\"input__number-divider\" part=\"divider\" vertical></syn-divider>\n                <button\n                  part=\"increment-number-stepper\"\n                  class=\"input__number-stepper-button\"\n                  type=\"button\"\n                  ?disabled=${this.isIncrementDisabled()}\n                  aria-hidden=\"true\"\n                  ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange()})}\n                  tabindex=\"-1\"\n                >\n                  <slot name=\"increment-number-stepper\">\n                    <syn-icon name=\"add\" library=\"system\"></syn-icon>\n                  </slot>\n                </button>\n              </div>\n                `\n            : ''}\n          </div>\n        </div>\n\n        <div\n          part=\"form-control-help-text\"\n          id=\"help-text\"\n          class=\"form-control__help-text\"\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n        >\n          <slot name=\"help-text\">${this.helpText}</slot>\n        </div>\n      </div>\n    `;\n  }\n}\n", "import { type ElementPart, noChange, nothing } from 'lit';\nimport {\n  AsyncDirective,\n  type DirectiveParameters,\n  type Part,\n  PartType,\n  directive,\n} from 'lit/async-directive.js';\n\ntype Callbacks = {\n  start: () => void;\n  end: () => void;\n};\n\n/**\n * A directive that determines,if a HTMLButtonElement is long pressed or only clicked.\n * Depending on the state it executes the callback once or repeating.\n *\n * Usage:\n *\n *  <button\n *    ${longPress({ start: () => this.handleStepUp(), end: () => this.handleChange()})}\n *  >\n *    my button\n *  </button>\n */\nclass LongPressDirective extends AsyncDirective {\n  host: HTMLButtonElement;\n\n  observer: MutationObserver;\n\n  callbacks: Callbacks;\n\n  interval: NodeJS.Timeout;\n\n  timeout: NodeJS.Timeout;\n\n  constructor(part: Part) {\n    super(part);\n    if (part.type !== PartType.ELEMENT || !(part.element instanceof HTMLButtonElement)) {\n      throw new Error('The `longPress` directive must be used on an HTMLButtonElement.');\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars, class-methods-use-this\n  render(_callback: Callbacks): typeof nothing {\n    return nothing;\n  }\n\n  update(part: ElementPart, [callbacks]: DirectiveParameters<this>): typeof noChange {\n    // initial call\n    if (this.callbacks === undefined && this.host === undefined) {\n      this.host = part.element as HTMLButtonElement;\n      this.callbacks = { ...callbacks };\n      this.host.addEventListener('pointerdown', this.handlePointerDown);\n    }\n\n    return noChange;\n  }\n\n  reconnected(): void {\n    this.host.addEventListener('pointerdown', this.handlePointerDown);\n  }\n\n  protected disconnected(): void {\n    this.stopSpinningAndCleanUp();\n    this.host.removeEventListener('pointerdown', this.handlePointerDown);\n    document.removeEventListener('pointerup', this.handlePointerUp);\n  }\n\n  private handlePointerDown = (event: PointerEvent) => {\n    // do nothing if the click was not done from the left mouse button or if the button is disabled\n    if (event.button !== 0 || this.host.disabled) {\n      return;\n    }\n    this.spinOnLongPressCallback(event);\n  };\n\n  /**\n   * Start spinning on long press clicks otherwise handle as single click event\n   */\n  private spinOnLongPressCallback(event: PointerEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n\n    // Start spinning only on long press\n    this.timeout = setTimeout(() => {\n      // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n      // @ts-ignore\n      this.timeout = undefined;\n      this.interval = setInterval(() => {\n        this.callbacks.start();\n      }, 50);\n    }, 500);\n\n    document.addEventListener('pointerup', this.handlePointerUp);\n\n    // when buttons becoming disabled during long-press\n    this.observer?.disconnect();\n    this.observer = new MutationObserver((mutations) => {\n      mutations.forEach((mutation) => {\n        if (mutation.attributeName === 'disabled') {\n          this.stopSpinningAndCleanUp();\n        }\n      });\n    });\n    this.observer.observe(this.host, { attributes: true });\n  }\n\n  private handlePointerUp = (pointerUp?: PointerEvent) => {\n    pointerUp?.preventDefault();\n    pointerUp?.stopPropagation();\n\n    // we did not start to spin\n    if (this.timeout) {\n      this.callbacks.start();\n    }\n\n    this.stopSpinningAndCleanUp();\n\n    this.callbacks.end();\n    document.removeEventListener('pointerup', this.handlePointerUp);\n  };\n\n  /**\n   * Stop the spinning and clean up all timer and observer\n   */\n  private stopSpinningAndCleanUp() {\n    // stop spinning\n    clearInterval(this.interval);\n\n    clearTimeout(this.timeout);\n    this.observer?.disconnect();\n  }\n}\n\nexport const longPress = directive(LongPressDirective);\n\nexport type { LongPressDirective };\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.RAOPZXJL.js → chunk.JILCM7FD.js}

@@ -23,4 +23,4 @@ var menu_label_styles_default = css`
 export {
   menu_label_styles_default
 };
-//# sourceMappingURL=chunk.RAOPZXJL.js.map
+//# sourceMappingURL=chunk.JILCM7FD.js.map

package/dist/chunks/chunk.JILCM7FD.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/menu-label/menu-label.styles.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { css } from 'lit';\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  .menu-label {\n    display: inline-block;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    line-height: var(--syn-line-height-normal);\n    letter-spacing: var(--syn-letter-spacing-normal);\n    color: var(--syn-color-neutral-500);\n    padding: var(--syn-spacing-2x-small) var(--syn-spacing-x-large);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n`;\n"],
+  "mappings": ";AACA,SAAS,WAAW;AACpB,IAAO,4BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/chunks/{chunk.6B7GMPMK.js → chunk.K2HZDQMS.js}

@@ -3,42 +3,42 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.K5VB7VKA.js";
+} from "./chunk.I5ABAZLK.js";
 import {
   waitForEvent
-} from "./chunk.C2ENQBPM.js";
+} from "./chunk.LQDIH4Z5.js";
 import {
   animateTo,
   stopAnimations
-} from "./chunk.6EKUFYET.js";
+} from "./chunk.Q6HZ4JXR.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.ADSEQZBF.js";
+} from "./chunk.RJUVM6NO.js";
 import {
   HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.CHFWLQN5.js";
 import {
   alert_custom_styles_default
 } from "./chunk.TSWB7UFK.js";
 import {
   alert_styles_default
-} from "./chunk.BXY667C7.js";
+} from "./chunk.CCY6IYFD.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   enableDefaultSettings
-} from "./chunk.KSWDM4HW.js";
+} from "./chunk.YACUYJZN.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -295,4 +295,4 @@ setDefaultAnimation("alert.hide", {
 export {
   SynAlert
 };
-//# sourceMappingURL=chunk.6B7GMPMK.js.map
+//# sourceMappingURL=chunk.K2HZDQMS.js.map

package/dist/chunks/chunk.K2HZDQMS.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/alert/alert.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { blurActiveElement } from '../../internal/closeActiveElement.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynIconButton from '../icon-button/icon-button.component.js';\nimport styles from './alert.styles.js';\nimport customStyles from './alert.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Alerts are used to display important messages inline or as toast notifications.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon-button\n *\n * @slot - The alert's main content.\n * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.\n *\n * @event syn-show - Emitted when the alert opens.\n * @event syn-after-show - Emitted after the alert opens and all animations are complete.\n * @event syn-hide - Emitted when the alert closes.\n * @event syn-after-hide - Emitted after the alert closes and all animations are complete.\n *\n * @csspart base - The component's base wrapper.\n * @csspart icon - The container that wraps the optional icon.\n * @csspart message - The container that wraps the alert's main content.\n * @csspart close-button - The close button, an `<syn-icon-button>`.\n * @csspart close-button__base - The close button's exported `base` part.\n *\n * @animation alert.show - The animation to use when showing the alert.\n * @animation alert.hide - The animation to use when hiding the alert.\n */\n@enableDefaultSettings('SynAlert')\nexport default class SynAlert extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-icon-button': SynIconButton };\n\n  private autoHideTimeout: number;\n  private remainingTimeInterval: number;\n  private countdownAnimation?: Animation;\n  private readonly hasSlotController = new HasSlotController(this, 'icon', 'suffix');\n  private readonly localize = new LocalizeController(this);\n\n  private static currentToastStack: HTMLDivElement;\n\n  private static get toastStack() {\n    if (!this.currentToastStack) {\n      this.currentToastStack = Object.assign(document.createElement('div'), {\n        className: 'syn-toast-stack'\n      });\n    }\n    return this.currentToastStack;\n  }\n\n  @query('[part~=\"base\"]') base: HTMLElement;\n\n  @query('.alert__countdown-elapsed') countdownElement: HTMLElement;\n\n  /**\n   * Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** Enables a close button that allows the user to dismiss the alert. */\n  @property({ type: Boolean, reflect: true }) closable = false;\n\n  /** The alert's theme variant. */\n  @property({ reflect: true }) variant: 'primary' | 'success' | 'neutral' | 'warning' | 'danger' = 'primary';\n\n  /**\n   * The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with\n   * the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to `Infinity`, meaning\n   * the alert will not close on its own.\n   */\n  @property({ type: Number }) duration = Infinity;\n\n  /** The alert's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Enables a countdown that indicates the remaining time the alert will be displayed.\n   * Typically used to indicate the remaining time before a whole app refresh.\n   */\n  private countdown? : 'rtl' | 'ltr';\n\n  @state() private remainingTime = this.duration;\n\n  firstUpdated() {\n    this.base.hidden = !this.open;\n  }\n\n  private restartAutoHide() {\n    this.handleCountdownChange();\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n    if (this.open && this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.duration);\n      this.remainingTime = this.duration;\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n    }\n  }\n\n  private pauseAutoHide() {\n    this.countdownAnimation?.pause();\n    clearTimeout(this.autoHideTimeout);\n    clearInterval(this.remainingTimeInterval);\n  }\n\n  private resumeAutoHide() {\n    if (this.duration < Infinity) {\n      this.autoHideTimeout = window.setTimeout(() => this.hide(), this.remainingTime);\n      this.remainingTimeInterval = window.setInterval(() => {\n        this.remainingTime -= 100;\n      }, 100);\n      this.countdownAnimation?.play();\n    }\n  }\n\n  private handleCountdownChange() {\n    if (this.open && this.duration < Infinity && this.countdown) {\n      const { countdownElement } = this;\n      const start = '100%';\n      const end = '0';\n      this.countdownAnimation = countdownElement.animate([{ width: start }, { width: end }], {\n        duration: this.duration,\n        easing: 'linear'\n      });\n    }\n  }\n\n  private handleCloseClick() {\n    this.hide();\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      // Show\n      this.emit('syn-show');\n\n      if (this.duration < Infinity) {\n        this.restartAutoHide();\n      }\n\n      await stopAnimations(this.base);\n      this.base.hidden = false;\n      const { keyframes, options } = getAnimation(this, 'alert.show', { dir: this.localize.dir() });\n      await animateTo(this.base, keyframes, options);\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      blurActiveElement(this);\n      this.emit('syn-hide');\n\n      clearTimeout(this.autoHideTimeout);\n      clearInterval(this.remainingTimeInterval);\n\n      await stopAnimations(this.base);\n      const { keyframes, options } = getAnimation(this, 'alert.hide', { dir: this.localize.dir() });\n      await animateTo(this.base, keyframes, options);\n      this.base.hidden = true;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  @watch('duration')\n  handleDurationChange() {\n    this.restartAutoHide();\n  }\n\n  /** Shows the alert. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the alert */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when\n   * dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by\n   * calling this method again. The returned promise will resolve after the alert is hidden.\n   */\n  async toast() {\n    return new Promise<void>(resolve => {\n      this.handleCountdownChange();\n      if (SynAlert.toastStack.parentElement === null) {\n        document.body.append(SynAlert.toastStack);\n      }\n\n      SynAlert.toastStack.appendChild(this);\n\n      // Wait for the toast stack to render\n      requestAnimationFrame(() => {\n        // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- force a reflow for the initial transition\n        this.clientWidth;\n        this.show();\n      });\n\n      this.addEventListener(\n        'syn-after-hide',\n        () => {\n          SynAlert.toastStack.removeChild(this);\n          resolve();\n\n          // Remove the toast stack from the DOM when there are no more alerts\n          if (SynAlert.toastStack.querySelector('syn-alert') === null) {\n            SynAlert.toastStack.remove();\n          }\n        },\n        { once: true }\n      );\n    });\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=${classMap({\n          alert: true,\n          'alert--open': this.open,\n          'alert--small': this.size === 'small',\n          'alert--medium': this.size === 'medium',\n          'alert--large': this.size === 'large',\n          'alert--closable': this.closable,\n          'alert--has-icon': this.hasSlotController.test('icon'),\n          'alert--primary': this.variant === 'primary',\n          'alert--success': this.variant === 'success',\n          'alert--neutral': this.variant === 'neutral',\n          'alert--warning': this.variant === 'warning',\n          'alert--danger': this.variant === 'danger'\n        })}\n        role=\"alert\"\n        aria-hidden=${this.open ? 'false' : 'true'}\n        @mouseenter=${this.pauseAutoHide}\n        @mouseleave=${this.resumeAutoHide}\n      >\n        <div part=\"icon\" class=\"alert__icon\">\n          <slot name=\"icon\"></slot>\n        </div>\n\n        <div part=\"message\" class=\"alert__message\" aria-live=\"polite\">\n          <slot></slot>\n        </div>\n\n        ${this.closable\n          ? html`\n              <syn-icon-button\n                part=\"close-button\"\n                exportparts=\"base:close-button__base\"\n                class=\"alert__close-button\"\n                name=\"x-lg\"\n                library=\"system\"\n                label=${this.localize.term('close')}\n                @click=${this.handleCloseClick}\n              ></syn-icon-button>\n            `\n          : ''}\n\n        <div role=\"timer\" class=\"alert__timer\">${this.remainingTime}</div>\n\n        ${this.countdown\n          ? html`\n              <div\n                class=${classMap({\n                  alert__countdown: true,\n                  'alert__countdown--ltr': this.countdown === 'ltr'\n                })}\n              >\n                <div class=\"alert__countdown-elapsed\"></div>\n              </div>\n            `\n          : ''}\n      </div>\n    `;\n  }\n}\n\nsetDefaultAnimation('alert.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n\nsetDefaultAnimation('alert.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 250, easing: 'ease' }\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.GJIDYO3Z.js → chunk.KHRQ5VI4.js}

@@ -2,22 +2,22 @@ import {
   getIconLibrary,
   unwatchIcon,
   watchIcon
-} from "./chunk.34V3QOIQ.js";
+} from "./chunk.NMWM3BP7.js";
 import {
   icon_custom_styles_default
 } from "./chunk.PJO6TM3T.js";
 import {
   icon_styles_default
-} from "./chunk.ZBW4ZSZ7.js";
+} from "./chunk.4XZTYPIY.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -191,4 +191,4 @@ __decorateClass([
 export {
   SynIcon
 };
-//# sourceMappingURL=chunk.GJIDYO3Z.js.map
+//# sourceMappingURL=chunk.KHRQ5VI4.js.map

package/dist/chunks/chunk.KHRQ5VI4.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/icon/icon.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { getIconLibrary, type IconLibrary, unwatchIcon, watchIcon } from './library.js';\nimport { html } from 'lit';\nimport { isTemplateResult } from 'lit/directive-helpers.js';\nimport { property, state } from 'lit/decorators.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './icon.styles.js';\nimport customStyles from './icon.custom.styles.js';\nimport type { CSSResultGroup, HTMLTemplateResult } from 'lit';\n\nconst CACHEABLE_ERROR = Symbol();\nconst RETRYABLE_ERROR = Symbol();\ntype SVGResult = HTMLTemplateResult | SVGSVGElement | typeof RETRYABLE_ERROR | typeof CACHEABLE_ERROR;\n\nlet parser: DOMParser;\nconst iconCache = new Map<string, Promise<SVGResult>>();\n\ninterface IconSource {\n  url?: string;\n  fromLibrary: boolean;\n}\n\n/**\n * @summary Icons are symbols that can be used to represent various options within an application.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs\n * @status stable\n * @since 2.0\n *\n * @event syn-load - Emitted when the icon has loaded. When using `spriteSheet: true` this will not emit.\n * @event syn-error - Emitted when the icon fails to load due to an error. When using `spriteSheet: true` this will not emit.\n *\n * @csspart svg - The internal SVG element.\n * @csspart use - The <use> element generated when using `spriteSheet: true`\n */\nexport default class SynIcon extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private initialRender = false;\n\n  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */\n  private async resolveIcon(url: string, library?: IconLibrary): Promise<SVGResult> {\n    let fileData: Response;\n\n    if (library?.spriteSheet) {\n      this.svg = html`<svg part=\"svg\">\n        <use part=\"use\" href=\"${url}\" width=\"100%\" height=\"100%\"></use>\n      </svg>`;\n\n      return this.svg;\n    }\n\n    // #806: Make sure to not fetch system icons\n    // as they are part of the bundle anyways.\n    // This speeds up the loading of the icon.\n    if (this.library === 'system') {\n      // Skip the icon if the URL is empty\n      if (!url) {\n        return CACHEABLE_ERROR;\n      }\n\n      // If the URL is a system icon, we can just return it\n      fileData = new Response(url, {\n        status: 200,\n      });\n    } else {\n      try {\n        fileData = await fetch(url, { mode: 'cors' });\n        if (!fileData.ok) return fileData.status === 410 ? CACHEABLE_ERROR : RETRYABLE_ERROR;\n      } catch {\n        return RETRYABLE_ERROR;\n      }\n    }\n\n    try {\n      const div = document.createElement('div');\n      div.innerHTML = await fileData.text();\n\n      const svg = div.firstElementChild;\n      if (svg?.tagName?.toLowerCase() !== 'svg') return CACHEABLE_ERROR;\n\n      if (!parser) parser = new DOMParser();\n      const doc = parser.parseFromString(svg.outerHTML, 'text/html');\n\n      const svgEl = doc.body.querySelector('svg');\n      if (!svgEl) return CACHEABLE_ERROR;\n\n      svgEl.part.add('svg');\n      return document.adoptNode(svgEl);\n    } catch {\n      return CACHEABLE_ERROR;\n    }\n  }\n\n  @state() private svg: SVGElement | HTMLTemplateResult | null = null;\n\n  /** The name of the icon to draw. Available names depend on the icon library being used. */\n  @property({ reflect: true }) name?: string;\n\n  /**\n   * An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and\n   * can result in XSS attacks.\n   */\n  @property() src?: string;\n\n  /**\n   * An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and\n   * ignored by assistive devices.\n   */\n  @property() label = '';\n\n  /** The name of a registered custom icon library. */\n  @property({ reflect: true }) library = 'default';\n\n  connectedCallback() {\n    super.connectedCallback();\n    watchIcon(this);\n  }\n\n  firstUpdated() {\n    this.initialRender = true;\n    this.setIcon();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    unwatchIcon(this);\n  }\n\n  private getIconSource(): IconSource {\n    const library = getIconLibrary(this.library);\n    if (this.name && library) {\n      return {\n        url: library.resolver(this.name),\n        fromLibrary: true\n      };\n    }\n\n    return {\n      url: this.src,\n      fromLibrary: false\n    };\n  }\n\n  @watch('label')\n  handleLabelChange() {\n    const hasLabel = typeof this.label === 'string' && this.label.length > 0;\n\n    if (hasLabel) {\n      this.setAttribute('role', 'img');\n      this.setAttribute('aria-label', this.label);\n      this.removeAttribute('aria-hidden');\n    } else {\n      this.removeAttribute('role');\n      this.removeAttribute('aria-label');\n      this.setAttribute('aria-hidden', 'true');\n    }\n  }\n\n  @watch(['name', 'src', 'library'])\n  async setIcon() {\n    const { url, fromLibrary } = this.getIconSource();\n    const library = fromLibrary ? getIconLibrary(this.library) : undefined;\n\n    if (!url) {\n      this.svg = null;\n      return;\n    }\n\n    let iconResolver = iconCache.get(url);\n    if (!iconResolver) {\n      iconResolver = this.resolveIcon(url, library);\n      iconCache.set(url, iconResolver);\n    }\n\n    // If we haven't rendered yet, exit early. This avoids unnecessary work due to watching multiple props.\n    if (!this.initialRender) {\n      return;\n    }\n\n    const svg = await iconResolver;\n\n    if (svg === RETRYABLE_ERROR) {\n      iconCache.delete(url);\n    }\n\n    if (url !== this.getIconSource().url) {\n      // If the url has changed while fetching the icon, ignore this request\n      return;\n    }\n\n    if (isTemplateResult(svg)) {\n      this.svg = svg;\n\n      if (library) {\n        // Using a templateResult requires the SVG to be written to the DOM first before we can grab the SVGElement\n        // to be passed to the library's mutator function.\n        await this.updateComplete;\n\n        const shadowSVG = this.shadowRoot!.querySelector(\"[part='svg']\")!;\n\n        if (typeof library.mutator === 'function' && shadowSVG) {\n          library.mutator(shadowSVG as SVGElement);\n        }\n      }\n\n      return;\n    }\n\n    switch (svg) {\n      case RETRYABLE_ERROR:\n      case CACHEABLE_ERROR:\n        this.svg = null;\n        this.emit('syn-error');\n        break;\n      default:\n        this.svg = svg.cloneNode(true) as SVGElement;\n        library?.mutator?.(this.svg);\n        this.emit('syn-load');\n    }\n  }\n\n  render() {\n    return this.svg;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.LJGUOWPM.js → chunk.KIVJSZWU.js}

@@ -3,34 +3,34 @@ import {
 } from "./chunk.E7LBPRDC.js";
 import {
   tooltip_styles_default
-} from "./chunk.O644HRW3.js";
+} from "./chunk.YOFWLXEH.js";
 import {
   SynPopup
-} from "./chunk.5QGW4QZT.js";
+} from "./chunk.GFD645IU.js";
 import {
   waitForEvent
-} from "./chunk.C2ENQBPM.js";
+} from "./chunk.LQDIH4Z5.js";
 import {
   animateTo,
   parseDuration,
   stopAnimations
-} from "./chunk.6EKUFYET.js";
+} from "./chunk.Q6HZ4JXR.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.ADSEQZBF.js";
+} from "./chunk.RJUVM6NO.js";
 import {
   watch
-} from "./chunk.JE5Y2YD7.js";
+} from "./chunk.SMIMHADA.js";
 import {
   LocalizeController
-} from "./chunk.OAQRCZOO.js";
+} from "./chunk.QLETXF4A.js";
 import {
   component_styles_default
-} from "./chunk.NLYVOJGK.js";
+} from "./chunk.FXJLG622.js";
 import {
   SynergyElement
-} from "./chunk.JG7YXWHG.js";
+} from "./chunk.ECNXEYTN.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -270,4 +270,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.LJGUOWPM.js.map
+//# sourceMappingURL=chunk.KIVJSZWU.js.map

package/dist/chunks/chunk.KIVJSZWU.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/tooltip/tooltip.component.ts"],
+  "sourcesContent": ["/* eslint-disable */\nimport { animateTo, parseDuration, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query } from 'lit/decorators.js';\nimport { waitForEvent } from '../../internal/event.js';\nimport { watch } from '../../internal/watch.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport SynPopup from '../popup/popup.component.js';\nimport styles from './tooltip.styles.js';\nimport customStyles from './tooltip.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Tooltips display additional information based on a specific action.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-popup\n *\n * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.\n * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.\n *\n * @event syn-show - Emitted when the tooltip begins to show.\n * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.\n * @event syn-hide - Emitted when the tooltip begins to hide.\n * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.\n *\n * @csspart base - The component's base wrapper, an `<syn-popup>` element.\n * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.\n * @csspart body - The tooltip's body where its content is rendered.\n *\n * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.\n * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.\n * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.\n *\n * @animation tooltip.show - The animation to use when showing the tooltip.\n * @animation tooltip.hide - The animation to use when hiding the tooltip.\n */\nexport default class SynTooltip extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n  static dependencies = { 'syn-popup': SynPopup };\n\n  private hoverTimeout: number;\n  private readonly localize = new LocalizeController(this);\n  private closeWatcher: CloseWatcher | null;\n\n  @query('slot:not([name])') defaultSlot: HTMLSlotElement;\n  @query('.tooltip__body') body: HTMLElement;\n  @query('syn-popup') popup: SynPopup;\n\n  /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */\n  @property() content = '';\n\n  /**\n   * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\n   * inside of the viewport.\n   */\n  @property() placement:\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end' = 'top';\n\n  /** Disables the tooltip so it won't show when triggered. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** The distance in pixels from which to offset the tooltip away from its target. */\n  @property({ type: Number }) distance = 13;\n\n  /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The distance in pixels from which to offset the tooltip along its target. */\n  @property({ type: Number }) skidding = 0;\n\n  /**\n   * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple\n   * options can be passed by separating them with a space. When manual is used, the tooltip must be activated\n   * programmatically.\n   */\n  @property() trigger = 'hover focus';\n\n  constructor() {\n    super();\n    this.addEventListener('blur', this.handleBlur, true);\n    this.addEventListener('focus', this.handleFocus, true);\n    this.addEventListener('click', this.handleClick);\n    this.addEventListener('mouseover', this.handleMouseOver);\n    this.addEventListener('mouseout', this.handleMouseOut);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // Cleanup this event in case the tooltip is removed while open\n    this.closeWatcher?.destroy();\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n  }\n\n  firstUpdated() {\n    this.body.hidden = !this.open;\n\n    // If the tooltip is visible on init, update its position\n    if (this.open) {\n      this.popup.active = true;\n      this.popup.reposition();\n    }\n  }\n\n  private handleBlur = () => {\n    if (this.hasTrigger('focus')) {\n      this.hide();\n    }\n  };\n\n  private handleClick = () => {\n    if (this.hasTrigger('click')) {\n      if (this.open) {\n        this.hide();\n      } else {\n        this.show();\n      }\n    }\n  };\n\n  private handleFocus = () => {\n    if (this.hasTrigger('focus')) {\n      this.show();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    // Pressing escape when a tooltip is open should dismiss it\n    if (event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  };\n\n  private handleMouseOver = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--show-delay'));\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.show(), delay);\n    }\n  };\n\n  private handleMouseOut = () => {\n    if (this.hasTrigger('hover')) {\n      const delay = parseDuration(getComputedStyle(this).getPropertyValue('--hide-delay'));\n      clearTimeout(this.hoverTimeout);\n      this.hoverTimeout = window.setTimeout(() => this.hide(), delay);\n    }\n  };\n\n  private hasTrigger(triggerType: string) {\n    const triggers = this.trigger.split(' ');\n    return triggers.includes(triggerType);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open) {\n      if (this.disabled) {\n        return;\n      }\n\n      // Show\n      this.emit('syn-show');\n      if ('CloseWatcher' in window) {\n        this.closeWatcher?.destroy();\n        this.closeWatcher = new CloseWatcher();\n        this.closeWatcher.onclose = () => {\n          this.hide();\n        };\n      } else {\n        document.addEventListener('keydown', this.handleDocumentKeyDown);\n      }\n\n      await stopAnimations(this.body);\n      this.body.hidden = false;\n      this.popup.active = true;\n      const { keyframes, options } = getAnimation(this, 'tooltip.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.reposition();\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.closeWatcher?.destroy();\n      document.removeEventListener('keydown', this.handleDocumentKeyDown);\n\n      await stopAnimations(this.body);\n      const { keyframes, options } = getAnimation(this, 'tooltip.hide', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n      this.popup.active = false;\n      this.body.hidden = true;\n\n      this.emit('syn-after-hide');\n    }\n  }\n\n  @watch(['content', 'distance','placement', 'skidding'])\n  async handleOptionsChange() {\n    if (this.hasUpdated) {\n      await this.updateComplete;\n      this.popup.reposition();\n    }\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    if (this.disabled && this.open) {\n      this.hide();\n    }\n  }\n\n  /** Shows the tooltip. */\n  async show() {\n    if (this.open) {\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\n  }\n\n  /** Hides the tooltip */\n  async hide() {\n    if (!this.open) {\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  //\n  // NOTE: Tooltip is a bit unique in that we're using aria-live instead of aria-labelledby to trick screen readers into\n  // announcing the content. It works really well, but it violates an accessibility rule. We're also adding the\n  // aria-describedby attribute to a slot, which is required by <syn-popup> to correctly locate the first assigned\n  // element, otherwise positioning is incorrect.\n  //\n  render() {\n    return html`\n      <syn-popup\n        part=\"base\"\n        exportparts=\"\n          popup:base__popup,\n          arrow:base__arrow\n        \"\n        class=${classMap({\n          tooltip: true,\n          'tooltip--open': this.open\n        })}\n        placement=${this.placement}\n        distance=${this.distance}\n        skidding=${this.skidding}\n        flip\n        shift\n        arrow\n        hover-bridge\n      >\n        ${'' /* eslint-disable-next-line lit-a11y/no-aria-slot */}\n        <slot slot=\"anchor\" aria-describedby=\"tooltip\"></slot>\n\n        ${'' /* eslint-disable-next-line lit-a11y/accessible-name */}\n        <div part=\"body\" id=\"tooltip\" class=\"tooltip__body\" role=\"tooltip\" aria-live=${this.open ? 'polite' : 'off'}>\n          <slot name=\"content\">${this.content}</slot>\n        </div>\n      </syn-popup>\n    `;\n  }\n}\n\nsetDefaultAnimation('tooltip.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.8 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n\nsetDefaultAnimation('tooltip.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.8 }\n  ],\n  options: { duration: 150, easing: 'ease' }\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.IAS6MLT6.js → chunk.KLL2SVR7.js}

@@ -7,6 +7,7 @@ var highlightOptionRenderer = (option, query) => {
   }
   const clonedOption = option.cloneNode(true);
   const optionLabel = clonedOption.getTextLabel();
+  clonedOption.selected = option.selected;
   const queryIndex = optionLabel.toLowerCase().indexOf(query.toLowerCase());
   const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);
   const mark = document.createElement("mark");
@@ -23,4 +24,4 @@ export {
   defaultOptionRenderer,
   highlightOptionRenderer
 };
-//# sourceMappingURL=chunk.IAS6MLT6.js.map
+//# sourceMappingURL=chunk.KLL2SVR7.js.map

package/dist/chunks/chunk.KLL2SVR7.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/combobox/option-renderer.ts"],
+  "sourcesContent": ["import { type TemplateResult } from 'lit';\nimport type SynOption from '../option/option.component.js';\n\n/**\n * A type definition for a function that renders an option.\n *\n * @param option - The option to be rendered.\n * @param query - The current query string used for filtering options.\n * @returns - The changed option to render\n */\nexport type OptionRenderer = (\n  option: SynOption,\n  query?: string,\n) => TemplateResult | string | HTMLElement;\n\n/**\n * The default option renderer, which does not change the option.\n */\nexport const defaultOptionRenderer: OptionRenderer = (option: SynOption) => option;\n\n/**\n * A function that highlights the query string with a mark element in the option.\n */\nexport const highlightOptionRenderer: OptionRenderer = (option: SynOption, query: string) => {\n  if (!query) {\n    return option;\n  }\n\n  const clonedOption = option.cloneNode(true) as SynOption;\n  const optionLabel = clonedOption.getTextLabel();\n  // copy the \"selected\" property value, as it is not copied by cloneNode\n  clonedOption.selected = option.selected;\n\n  const queryIndex = optionLabel.toLowerCase().indexOf(query.toLowerCase());\n  const indexLabel = clonedOption.innerHTML.indexOf(optionLabel);\n\n  const mark = document.createElement('mark');\n  mark.textContent = optionLabel.slice(queryIndex, queryIndex + query.length);\n  mark.classList.add('syn-highlight-style');\n\n  const exchangedText = optionLabel.replace(new RegExp(query, 'i'), mark.outerHTML);\n  const previousContent = clonedOption.innerHTML.slice(0, indexLabel);\n  const followingContent = clonedOption.innerHTML.slice(indexLabel + optionLabel.length);\n\n  clonedOption.innerHTML = previousContent.concat(exchangedText, followingContent);\n  return clonedOption;\n};\n"],
+  "mappings": ";AAAA,OAAoC;AAkB7B,IAAM,wBAAwC,CAAC,WAAsB;AAKrE,IAAM,0BAA0C,CAAC,QAAmB,UAAkB;AAC3F,MAAI,CAAC,OAAO;AACV,WAAO;AAAA,EACT;AAEA,QAAM,eAAe,OAAO,UAAU,IAAI;AAC1C,QAAM,cAAc,aAAa,aAAa;AAE9C,eAAa,WAAW,OAAO;AAE/B,QAAM,aAAa,YAAY,YAAY,EAAE,QAAQ,MAAM,YAAY,CAAC;AACxE,QAAM,aAAa,aAAa,UAAU,QAAQ,WAAW;AAE7D,QAAM,OAAO,SAAS,cAAc,MAAM;AAC1C,OAAK,cAAc,YAAY,MAAM,YAAY,aAAa,MAAM,MAAM;AAC1E,OAAK,UAAU,IAAI,qBAAqB;AAExC,QAAM,gBAAgB,YAAY,QAAQ,IAAI,OAAO,OAAO,GAAG,GAAG,KAAK,SAAS;AAChF,QAAM,kBAAkB,aAAa,UAAU,MAAM,GAAG,UAAU;AAClE,QAAM,mBAAmB,aAAa,UAAU,MAAM,aAAa,YAAY,MAAM;AAErF,eAAa,YAAY,gBAAgB,OAAO,eAAe,gBAAgB;AAC/E,SAAO;AACT;",
+  "names": []
+}