@synergy-design-system/components 2.30.1 → 2.30.3

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/input/input.component.ts", "../../src/internal/longpress.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* 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 { 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 *\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() autocorrect: 'off' | 'on';\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  // 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 || this.disabled) {\n      return false;\n    }\n\n    const min = typeof this.min === 'string' ? parseFloat(this.min) : this.min\n    return this.valueAsNumber <= 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    return this.valueAsNumber >= max;\n  }\n\n  private handleChange() {\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    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 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    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    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  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.step as number)}\n              .value=${live(this.value)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocomplete=${ifDefined(this.autocomplete)}\n              autocorrect=${ifDefined(this.autocorrect)}\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.GYSYAXFI.js → chunk.KSWTSMEX.js}

@@ -13,22 +13,22 @@ import {
 } from "./chunk.AERTEAG5.js";
 import {
   FormControlController
-} from "./chunk.AMIQC3O7.js";
+} from "./chunk.OLRA37R5.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   enableDefaultSettings
 } from "./chunk.NUIJATJY.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -256,7 +256,7 @@ var SynTextarea = class extends SynergyElement {
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             ></textarea>
-            <!-- This "adjuster" exists to prevent layout shifting. https://github.com/synergy-design-system/synergy/issues/2180 -->
+            <!-- This "adjuster" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->
             <div part="textarea-adjuster" class="textarea__size-adjuster" ?hidden=${this.resize !== "auto"}></div>
           </div>
         </div>
@@ -284,7 +284,7 @@ __decorateClass([
   state()
 ], SynTextarea.prototype, "hasFocus", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SynTextarea.prototype, "title", 2);
 __decorateClass([
   property()
@@ -375,4 +375,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.GYSYAXFI.js.map
+//# sourceMappingURL=chunk.KSWTSMEX.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/textarea/textarea.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* 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 { 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 styles from './textarea.styles.js';\nimport customStyles from './textarea.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs\n * @status stable\n * @since 2.0\n *\n * @slot label - The textarea's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.\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-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 *\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 textarea - The internal `<textarea>` control.\n */\n@enableDefaultSettings('SynTextarea')\nexport default class SynTextarea extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\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');\n  private resizeObserver: ResizeObserver;\n\n  @query('.textarea__control') input: HTMLTextAreaElement;\n  @query('.textarea__size-adjuster') sizeAdjuster: HTMLTextAreaElement;\n\n  @state() private hasFocus = false;\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The name of the textarea, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the textarea, submitted as a name/value pair with form data. */\n  @property() value = '';\n\n  /** The textarea's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The textarea's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /** The textarea's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Placeholder text to show as a hint when the input is empty. */\n  @property() placeholder = '';\n\n  /** The number of rows to display by default. */\n  @property({ type: Number }) rows = 4;\n\n  /** Controls how the textarea can be resized. */\n  @property() resize: 'none' | 'vertical' | 'auto' = 'vertical';\n\n  /** Disables the textarea. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the textarea readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = 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 textarea a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\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  /** 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() autocorrect: string;\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 textarea. */\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  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\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  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver(() => this.setTextareaHeight());\n\n    this.updateComplete.then(() => {\n      this.setTextareaHeight();\n      this.resizeObserver.observe(this.input);\n    });\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this.input) {\n      this.resizeObserver?.unobserve(this.input);\n    }\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleChange() {\n    this.value = this.input.value;\n    this.setTextareaHeight();\n    this.emit('syn-change');\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.emit('syn-input');\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private setTextareaHeight() {\n    if (this.resize === 'auto') {\n      // This prevents layout shifts. We use `clientHeight` instead of `scrollHeight` to account for if the `<textarea>` has a max-height set on it. In my tests, this has worked fine. Im not aware of any edge cases. [Konnor]\n      this.sizeAdjuster.style.height = `${this.input.clientHeight}px`;\n      this.input.style.height = 'auto';\n      this.input.style.height = `${this.input.scrollHeight}px`;\n    } else {\n      this.input.style.height = '';\n    }\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('rows', { waitUntilFirstUpdate: true })\n  handleRowsChange() {\n    this.setTextareaHeight();\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n    this.setTextareaHeight();\n  }\n\n  /** Sets focus on the textarea. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the textarea. */\n  blur() {\n    this.input.blur();\n  }\n\n  /** Selects all the text in the textarea. */\n  select() {\n    this.input.select();\n  }\n\n  /** Gets or sets the textarea's scroll position. */\n  scrollPosition(position?: { top?: number; left?: number }): { top: number; left: number } | undefined {\n    if (position) {\n      if (typeof position.top === 'number') this.input.scrollTop = position.top;\n      if (typeof position.left === 'number') this.input.scrollLeft = position.left;\n      return undefined;\n    }\n\n    return {\n      top: this.input.scrollTop,\n      left: this.input.scrollTop\n    };\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      this.setTextareaHeight();\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  render() {\n    const hasLabelSlot = this.hasSlotController.test('label');\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasLabel = this.label ? true : !!hasLabelSlot;\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\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        })}\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              textarea: true,\n              'textarea--small': this.size === 'small',\n              'textarea--medium': this.size === 'medium',\n              'textarea--large': this.size === 'large',\n              'textarea--standard': !this.readonly,\n              'textarea--readonly': this.readonly,\n              'textarea--disabled': this.disabled,\n              'textarea--focused': this.hasFocus,\n              'textarea--empty': !this.value,\n              'textarea--resize-none': this.resize === 'none',\n              'textarea--resize-vertical': this.resize === 'vertical',\n              'textarea--resize-auto': this.resize === 'auto'\n            })}\n          >\n            <textarea\n              part=\"textarea\"\n              id=\"input\"\n              class=\"textarea__control\"\n              title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n              name=${ifDefined(this.name)}\n              .value=${live(this.value)}\n              ?disabled=${this.disabled}\n              ?readonly=${this.readonly}\n              ?required=${this.required}\n              placeholder=${ifDefined(this.placeholder)}\n              rows=${ifDefined(this.rows)}\n              minlength=${ifDefined(this.minlength)}\n              maxlength=${ifDefined(this.maxlength)}\n              autocapitalize=${ifDefined(this.autocapitalize)}\n              autocorrect=${ifDefined(this.autocorrect)}\n              ?autofocus=${this.autofocus}\n              spellcheck=${ifDefined(this.spellcheck)}\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              @focus=${this.handleFocus}\n              @blur=${this.handleBlur}\n            ></textarea>\n            <!-- This \"adjuster\" exists to prevent layout shifting. https://github.com/shoelace-style/shoelace/issues/2180 -->\n            <div part=\"textarea-adjuster\" class=\"textarea__size-adjuster\" ?hidden=${this.resize !== 'auto'}></div>\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"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.A4FID4OH.js → chunk.KUQ6N3FH.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.D36G42T7.js";
+} from "./chunk.PZSENCZE.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SynRadioGroup;
@@ -9,4 +9,4 @@ SynRadioGroup.define("syn-radio-group");
 export {
   radio_group_default
 };
-//# sourceMappingURL=chunk.A4FID4OH.js.map
+//# sourceMappingURL=chunk.KUQ6N3FH.js.map

package/dist/chunks/{chunk.BRFSQ5UO.js → chunk.KWMZ63WC.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.BRFSQ5UO.js.map
+//# sourceMappingURL=chunk.KWMZ63WC.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/progress-ring/progress-ring.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './progress-ring.styles.js';\nimport customStyles from './progress-ring.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs\n * @status stable\n * @since 2.0\n *\n * @slot - A label to show inside the ring.\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The progress ring label.\n *\n * @cssproperty --size - The diameter of the progress ring (cannot be a percentage).\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --track-color - The color of the track.\n * @cssproperty --indicator-width - The width of the indicator. Defaults to the track width.\n * @cssproperty --indicator-color - The color of the indicator.\n * @cssproperty --indicator-transition-duration - The duration of the indicator's transition when the value changes.\n */\nexport default class SynProgressRing extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  @query('.progress-ring__indicator') indicator: SVGCircleElement;\n\n  @state() indicatorOffset: string;\n\n  /** The current progress as a percentage, 0 to 100. */\n  @property({ type: Number, reflect: true }) value = 0;\n\n  /** A custom label for assistive devices. */\n  @property() label = '';\n\n  updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    //\n    // This block is only required for Safari because it doesn't transition the circle when the custom properties\n    // change, possibly because of a mix of pixel + unit-less values in the calc() function. It seems like a Safari bug,\n    // but I couldn't pinpoint it so this works around the problem.\n    //\n    if (changedProps.has('value')) {\n      const radius = parseFloat(getComputedStyle(this.indicator).getPropertyValue('r'));\n      const circumference = 2 * Math.PI * radius;\n      const offset = circumference - (this.value / 100) * circumference;\n\n      this.indicatorOffset = `${offset}px`;\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        part=\"base\"\n        class=\"progress-ring\"\n        role=\"progressbar\"\n        aria-label=${this.label.length > 0 ? this.label : this.localize.term('progress')}\n        aria-describedby=\"label\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"${this.value}\"\n        style=\"--percentage: ${this.value / 100}\"\n      >\n        <svg class=\"progress-ring__image\">\n          <circle class=\"progress-ring__track\"></circle>\n          <circle class=\"progress-ring__indicator\" style=\"stroke-dashoffset: ${this.indicatorOffset}\"></circle>\n        </svg>\n\n        <slot id=\"label\" part=\"label\" class=\"progress-ring__label\"></slot>\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAQA,SAAS,YAAY;AAErB,SAAS,UAAU,OAAO,aAAa;AAyBvC,IAAqB,kBAArB,cAA6C,eAAe;AAAA,EAA5D;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAOZ,iBAAQ;AAGvC,iBAAQ;AAAA;AAAA,EAEpB,QAAQ,cAAoC;AAC1C,UAAM,QAAQ,YAAY;AAO1B,QAAI,aAAa,IAAI,OAAO,GAAG;AAC7B,YAAM,SAAS,WAAW,iBAAiB,KAAK,SAAS,EAAE,iBAAiB,GAAG,CAAC;AAChF,YAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,YAAM,SAAS,gBAAiB,KAAK,QAAQ,MAAO;AAEpD,WAAK,kBAAkB,GAAG,MAAM;AAAA,IAClC;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKU,KAAK,MAAM,SAAS,IAAI,KAAK,QAAQ,KAAK,SAAS,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,yBAI/D,KAAK,KAAK;AAAA,+BACJ,KAAK,QAAQ,GAAG;AAAA;AAAA;AAAA;AAAA,+EAIgC,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMjG;AACF;AAtDqB,gBACZ,SAAyB,CAAC,0BAAiB,8BAAQ,mCAAY;AAIlC;AAAA,EAAnC,MAAM,2BAA2B;AAAA,GALf,gBAKiB;AAE3B;AAAA,EAAR,MAAM;AAAA,GAPY,gBAOV;AAGkC;AAAA,EAA1C,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAVtB,gBAUwB;AAG/B;AAAA,EAAX,SAAS;AAAA,GAbS,gBAaP;",
+  "names": []
+}

package/dist/chunks/{chunk.T4IRZQY2.js → chunk.KXDWM25J.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.T4IRZQY2.js.map
+//# sourceMappingURL=chunk.KXDWM25J.js.map

package/dist/chunks/{chunk.T4IRZQY2.js.map → chunk.KXDWM25J.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/resize-observer/resize-observer.component.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { property } 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 './resize-observer.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://synergy.style/components/resize-observer\n * @status stable\n * @since 2.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} syn-resize - Emitted when the element is resized.\n */\nexport default class SynResizeObserver extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private resizeObserver: ResizeObserver;\n  private observedElements: HTMLElement[] = [];\n\n  /** Disables the observer. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      this.emit('syn-resize', { detail: { entries } });\n    });\n\n    if (!this.disabled) {\n      this.startObserver();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stopObserver();\n  }\n\n  private handleSlotChange() {\n    if (!this.disabled) {\n      this.startObserver();\n    }\n  }\n\n  private startObserver() {\n    const slot = this.shadowRoot!.querySelector('slot');\n\n    if (slot !== null) {\n      const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n      // Unwatch previous elements\n      this.observedElements.forEach(el => this.resizeObserver.unobserve(el));\n      this.observedElements = [];\n\n      // Watch new elements\n      elements.forEach(el => {\n        this.resizeObserver.observe(el);\n        this.observedElements.push(el);\n      });\n    }\n  }\n\n  private stopObserver() {\n    this.resizeObserver.disconnect();\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.disabled) {\n      this.stopObserver();\n    } else {\n      this.startObserver();\n    }\n  }\n\n  render() {\n    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-resize-observer': SynResizeObserver;\n  }\n}\n"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { property } 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 './resize-observer.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary The Resize Observer component offers a thin, declarative interface to the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-resize-observer--docs\n * @status stable\n * @since 2.0\n *\n * @slot - One or more elements to watch for resizing.\n *\n * @event {{ entries: ResizeObserverEntry[] }} syn-resize - Emitted when the element is resized.\n */\nexport default class SynResizeObserver extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  private resizeObserver: ResizeObserver;\n  private observedElements: HTMLElement[] = [];\n\n  /** Disables the observer. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      this.emit('syn-resize', { detail: { entries } });\n    });\n\n    if (!this.disabled) {\n      this.startObserver();\n    }\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.stopObserver();\n  }\n\n  private handleSlotChange() {\n    if (!this.disabled) {\n      this.startObserver();\n    }\n  }\n\n  private startObserver() {\n    const slot = this.shadowRoot!.querySelector('slot');\n\n    if (slot !== null) {\n      const elements = slot.assignedElements({ flatten: true }) as HTMLElement[];\n\n      // Unwatch previous elements\n      this.observedElements.forEach(el => this.resizeObserver.unobserve(el));\n      this.observedElements = [];\n\n      // Watch new elements\n      elements.forEach(el => {\n        this.resizeObserver.observe(el);\n        this.observedElements.push(el);\n      });\n    }\n  }\n\n  private stopObserver() {\n    this.resizeObserver.disconnect();\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    if (this.disabled) {\n      this.stopObserver();\n    } else {\n      this.startObserver();\n    }\n  }\n\n  render() {\n    return html` <slot @slotchange=${this.handleSlotChange}></slot> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-resize-observer': SynResizeObserver;\n  }\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;AAQA,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAiBzB,IAAqB,oBAArB,cAA+C,eAAe;AAAA,EAA9D;AAAA;AAIE,SAAQ,mBAAkC,CAAC;AAGC,oBAAW;AAAA;AAAA,EAEvD,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,iBAAiB,IAAI,eAAe,CAAC,YAAmC;AAC3E,WAAK,KAAK,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAAA,IACjD,CAAC;AAED,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,uBAAuB;AACrB,UAAM,qBAAqB;AAC3B,SAAK,aAAa;AAAA,EACpB;AAAA,EAEQ,mBAAmB;AACzB,QAAI,CAAC,KAAK,UAAU;AAClB,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEQ,gBAAgB;AACtB,UAAM,OAAO,KAAK,WAAY,cAAc,MAAM;AAElD,QAAI,SAAS,MAAM;AACjB,YAAM,WAAW,KAAK,iBAAiB,EAAE,SAAS,KAAK,CAAC;AAGxD,WAAK,iBAAiB,QAAQ,QAAM,KAAK,eAAe,UAAU,EAAE,CAAC;AACrE,WAAK,mBAAmB,CAAC;AAGzB,eAAS,QAAQ,QAAM;AACrB,aAAK,eAAe,QAAQ,EAAE;AAC9B,aAAK,iBAAiB,KAAK,EAAE;AAAA,MAC/B,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,eAAe;AACrB,SAAK,eAAe,WAAW;AAAA,EACjC;AAAA,EAGA,uBAAuB;AACrB,QAAI,KAAK,UAAU;AACjB,WAAK,aAAa;AAAA,IACpB,OAAO;AACL,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,SAAS;AACP,WAAO,0BAA0B,KAAK,gBAAgB;AAAA,EACxD;AACF;AAjEqB,kBACZ,SAAyB,CAAC,0BAAiB,8BAAM;AAMZ;AAAA,EAA3C,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAPvB,kBAOyB;AA+C5C;AAAA,EADC,MAAM,YAAY,EAAE,sBAAsB,KAAK,CAAC;AAAA,GArD9B,kBAsDnB;",
   "names": []
 }

package/dist/chunks/{chunk.GOYGD46T.js → chunk.MVBAJTOF.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.H3HTSQKK.js";
 import {
   SynDivider
-} from "./chunk.OJFEU2LY.js";
+} from "./chunk.ZHBRF2U3.js";
 import {
   SynDrawer
-} from "./chunk.NDIBJ6JI.js";
+} from "./chunk.QCGPJAQF.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
@@ -24,18 +24,18 @@ import {
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -317,4 +317,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.GOYGD46T.js.map
+//# sourceMappingURL=chunk.MVBAJTOF.js.map

package/dist/chunks/{chunk.6ZCQFVOC.js → chunk.NC57MFGC.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.K36FG4W2.js";
+} from "./chunk.K4EBTKOS.js";
 
 // src/components/input/input.ts
 var input_default = SynInput;
@@ -9,4 +9,4 @@ SynInput.define("syn-input");
 export {
   input_default
 };
-//# sourceMappingURL=chunk.6ZCQFVOC.js.map
+//# sourceMappingURL=chunk.NC57MFGC.js.map

package/dist/chunks/{chunk.3ZXMZDAX.js → chunk.NECBJEDG.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.6OVQULWC.js";
+} from "./chunk.SFKDMJXY.js";
 
 // src/components/badge/badge.ts
 var badge_default = SynBadge;
@@ -9,4 +9,4 @@ SynBadge.define("syn-badge");
 export {
   badge_default
 };
-//# sourceMappingURL=chunk.3ZXMZDAX.js.map
+//# sourceMappingURL=chunk.NECBJEDG.js.map

package/dist/chunks/{chunk.E4QLMZHL.js → chunk.NFEMXBDN.js}

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.R3THZVHP.js";
+} from "./chunk.IC3XQ2EB.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -9,4 +9,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default
 };
-//# sourceMappingURL=chunk.E4QLMZHL.js.map
+//# sourceMappingURL=chunk.NFEMXBDN.js.map

package/dist/chunks/{chunk.YU2PZ5EK.js → chunk.NGIPAGC4.js}

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.FHND52A3.js";
+} from "./chunk.A77V4OPP.js";
 
 // src/components/icon-button/icon-button.ts
 var icon_button_default = SynIconButton;
@@ -9,4 +9,4 @@ SynIconButton.define("syn-icon-button");
 export {
   icon_button_default
 };
-//# sourceMappingURL=chunk.YU2PZ5EK.js.map
+//# sourceMappingURL=chunk.NGIPAGC4.js.map

package/dist/chunks/{chunk.UKUUCUD7.js → chunk.NLYJFOZZ.js}

@@ -3,22 +3,22 @@ import {
 } from "./chunk.5T3OGIGW.js";
 import {
   icon_default
-} from "./chunk.E4QLMZHL.js";
+} from "./chunk.NFEMXBDN.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -184,4 +184,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.UKUUCUD7.js.map
+//# sourceMappingURL=chunk.NLYJFOZZ.js.map

package/dist/chunks/{chunk.RYQHOPIY.js → chunk.NTSN7KDQ.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.FITEZWTQ.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.RYQHOPIY.js.map
+//# sourceMappingURL=chunk.NTSN7KDQ.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/button-group/button-group.component.ts"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* eslint-disable */\nimport { html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './button-group.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Button groups can be used to group related buttons into sections.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs\n * @status stable\n * @since 2.0\n *\n * @slot - One or more `<syn-button>` elements to display in the button group.\n *\n * @csspart base - The component's base wrapper.\n */\nexport default class SynButtonGroup extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  @query('slot') defaultSlot: HTMLSlotElement;\n\n  @state() disableRole = false;\n\n  /**\n   * A label to use for the button group. This won't be displayed on the screen, but it will be announced by assistive\n   * devices when interacting with the control and is strongly recommended.\n   */\n  @property() label = '';\n\n  private handleFocus(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--focus', true);\n  }\n\n  private handleBlur(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--focus', false);\n  }\n\n  private handleMouseOver(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--hover', true);\n  }\n\n  private handleMouseOut(event: Event) {\n    const button = findButton(event.target as HTMLElement);\n    button?.toggleAttribute('data-syn-button-group__button--hover', false);\n  }\n\n  private handleSlotChange() {\n    const slottedElements = [...this.defaultSlot.assignedElements({ flatten: true })] as HTMLElement[];\n\n    slottedElements.forEach(el => {\n      const index = slottedElements.indexOf(el);\n      const button = findButton(el);\n\n      if (button) {\n        button.toggleAttribute('data-syn-button-group__button', true);\n        button.toggleAttribute('data-syn-button-group__button--first', index === 0);\n        button.toggleAttribute('data-syn-button-group__button--inner', index > 0 && index < slottedElements.length - 1);\n        button.toggleAttribute('data-syn-button-group__button--last', index === slottedElements.length - 1);\n        button.toggleAttribute(\n          'data-syn-button-group__button--radio',\n          button.tagName.toLowerCase() === 'syn-radio-button'\n        );\n      }\n    });\n  }\n\n  render() {\n    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n    return html`\n      <div\n        part=\"base\"\n        class=\"button-group\"\n        role=\"${this.disableRole ? 'presentation' : 'group'}\"\n        aria-label=${this.label}\n        @focusout=${this.handleBlur}\n        @focusin=${this.handleFocus}\n        @mouseover=${this.handleMouseOver}\n        @mouseout=${this.handleMouseOut}\n      >\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\nfunction findButton(el: HTMLElement) {\n  const selector = 'syn-button, syn-radio-button';\n\n  // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor)\n  return el.closest(selector) ?? el.querySelector(selector);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;AAQA,SAAS,YAAY;AACrB,SAAS,UAAU,OAAO,aAAa;AAgBvC,IAAqB,iBAArB,cAA4C,eAAe;AAAA,EAA3D;AAAA;AAKW,uBAAc;AAMX,iBAAQ;AAAA;AAAA,EAEZ,YAAY,OAAc;AAChC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,WAAW,OAAc;AAC/B,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,gBAAgB,OAAc;AACpC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,eAAe,OAAc;AACnC,UAAM,SAAS,WAAW,MAAM,MAAqB;AACrD,qCAAQ,gBAAgB,wCAAwC;AAAA,EAClE;AAAA,EAEQ,mBAAmB;AACzB,UAAM,kBAAkB,CAAC,GAAG,KAAK,YAAY,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC;AAEhF,oBAAgB,QAAQ,QAAM;AAC5B,YAAM,QAAQ,gBAAgB,QAAQ,EAAE;AACxC,YAAM,SAAS,WAAW,EAAE;AAE5B,UAAI,QAAQ;AACV,eAAO,gBAAgB,iCAAiC,IAAI;AAC5D,eAAO,gBAAgB,wCAAwC,UAAU,CAAC;AAC1E,eAAO,gBAAgB,wCAAwC,QAAQ,KAAK,QAAQ,gBAAgB,SAAS,CAAC;AAC9G,eAAO,gBAAgB,uCAAuC,UAAU,gBAAgB,SAAS,CAAC;AAClG,eAAO;AAAA,UACL;AAAA,UACA,OAAO,QAAQ,YAAY,MAAM;AAAA,QACnC;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AAEP,WAAO;AAAA;AAAA;AAAA;AAAA,gBAIK,KAAK,cAAc,iBAAiB,OAAO;AAAA,qBACtC,KAAK,KAAK;AAAA,oBACX,KAAK,UAAU;AAAA,mBAChB,KAAK,WAAW;AAAA,qBACd,KAAK,eAAe;AAAA,oBACrB,KAAK,cAAc;AAAA;AAAA,4BAEX,KAAK,gBAAgB;AAAA;AAAA;AAAA,EAG/C;AACF;AAtEqB,eACZ,SAAyB,CAAC,0BAAiB,2BAAM;AAEzC;AAAA,EAAd,MAAM,MAAM;AAAA,GAHM,eAGJ;AAEN;AAAA,EAAR,MAAM;AAAA,GALY,eAKV;AAMG;AAAA,EAAX,SAAS;AAAA,GAXS,eAWP;AA6Dd,SAAS,WAAW,IAAiB;AAjGrC;AAkGE,QAAM,WAAW;AAGjB,UAAO,QAAG,QAAQ,QAAQ,MAAnB,YAAwB,GAAG,cAAc,QAAQ;AAC1D;",
+  "names": []
+}

package/dist/chunks/{chunk.AMIQC3O7.js → chunk.OLRA37R5.js}

@@ -313,4 +313,4 @@ export {
   valueMissingValidityState,
   customErrorValidityState
 };
-//# sourceMappingURL=chunk.AMIQC3O7.js.map
+//# sourceMappingURL=chunk.OLRA37R5.js.map

package/dist/chunks/{chunk.AMIQC3O7.js.map → chunk.OLRA37R5.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/internal/form.ts"],
-  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* 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/synergy-design-system/synergy/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/synergy-design-system/synergy/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"],
+  "sourcesContent": ["/**\n * ---------------------------------------------------------------------\n * \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n * Removing this comment will prevent it from being managed by it.\n * ---------------------------------------------------------------------\n */\n\n/* 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": []
 }