@synergy-design-system/components 2.30.2 → 2.30.3

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.4ETD2DNL.js → chunk.KUQ6N3FH.js}

@@ -1,6 +1,6 @@
 import {
   SynRadioGroup
-} from "./chunk.WLWKLEXV.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.4ETD2DNL.js.map
+//# sourceMappingURL=chunk.KUQ6N3FH.js.map

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

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -76,4 +76,4 @@ __decorateClass([
 export {
   SynProgressRing
 };
-//# sourceMappingURL=chunk.BCHOA243.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.ZIJT7PED.js → chunk.KXDWM25J.js}

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

package/dist/chunks/{chunk.ZIJT7PED.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.BXLEPXUW.js → chunk.MVBAJTOF.js}

@@ -3,10 +3,10 @@ import {
 } from "./chunk.H3HTSQKK.js";
 import {
   SynDivider
-} from "./chunk.M5PBGVOF.js";
+} from "./chunk.ZHBRF2U3.js";
 import {
   SynDrawer
-} from "./chunk.ZSR45DPF.js";
+} from "./chunk.QCGPJAQF.js";
 import {
   unlockBodyScrolling
 } from "./chunk.5732DMBC.js";
@@ -35,7 +35,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -317,4 +317,4 @@ setDefaultAnimation("sideNav.overlay.hide", {
 export {
   SynSideNav
 };
-//# sourceMappingURL=chunk.BXLEPXUW.js.map
+//# sourceMappingURL=chunk.MVBAJTOF.js.map

package/dist/chunks/{chunk.HPFIPD65.js → chunk.NC57MFGC.js}

@@ -1,6 +1,6 @@
 import {
   SynInput
-} from "./chunk.XKQC62H5.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.HPFIPD65.js.map
+//# sourceMappingURL=chunk.NC57MFGC.js.map

package/dist/chunks/{chunk.G5DUCCER.js → chunk.NECBJEDG.js}

@@ -1,6 +1,6 @@
 import {
   SynBadge
-} from "./chunk.AAL3KZPB.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.G5DUCCER.js.map
+//# sourceMappingURL=chunk.NECBJEDG.js.map

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

@@ -1,6 +1,6 @@
 import {
   SynIcon
-} from "./chunk.QFNMNSWC.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.A6S64XOS.js.map
+//# sourceMappingURL=chunk.NFEMXBDN.js.map

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

@@ -1,6 +1,6 @@
 import {
   SynIconButton
-} from "./chunk.OW43BAXS.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.UKJI6GPV.js.map
+//# sourceMappingURL=chunk.NGIPAGC4.js.map

package/dist/chunks/{chunk.6RF44NIZ.js → chunk.NLYJFOZZ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk.5T3OGIGW.js";
 import {
   icon_default
-} from "./chunk.A6S64XOS.js";
+} from "./chunk.NFEMXBDN.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
@@ -18,7 +18,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -184,4 +184,4 @@ __decorateClass([
 export {
   SynHeader
 };
-//# sourceMappingURL=chunk.6RF44NIZ.js.map
+//# sourceMappingURL=chunk.NLYJFOZZ.js.map

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

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -89,4 +89,4 @@ function findButton(el) {
 export {
   SynButtonGroup
 };
-//# sourceMappingURL=chunk.J7BEYJP3.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": []
 }

package/dist/chunks/{chunk.Y7CXPPVU.js → chunk.OPSPWNFD.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -48,4 +48,4 @@ __decorateClass([
 export {
   SynRangeTick
 };
-//# sourceMappingURL=chunk.Y7CXPPVU.js.map
+//# sourceMappingURL=chunk.OPSPWNFD.js.map

package/dist/chunks/{chunk.Y7CXPPVU.js.map → chunk.OPSPWNFD.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/range-tick/range-tick.component.ts"],
-  "sourcesContent": ["import type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './range-tick.styles.js';\n\n/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */\nexport default class SynRangeTick extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  /**\n   * Whether the tick should be shown as a subdivision.\n   */\n  @property({ reflect: true, type: Boolean }) subdivision = false;\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          tick: true,\n          'tick--subdivision': this.subdivision,\n        })}\n        part=\"base\"\n      >\n        <div class=\"tick-line\" part=\"line\"></div>\n        <div class=\"tick-label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
+  "sourcesContent": ["import type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './range-tick.styles.js';\n\n/**\n * @summary Ticks visually improve positioning on range sliders.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs\n * @status stable\n *\n * @slot - The tick's label\n *\n * @csspart base - The component's base wrapper.\n * @csspart label - The component's label.\n * @csspart line - The component's tick line.\n *\n * @cssproperty --tick-height - The height of the tick marker.\n * @cssproperty --tick-label-top - The top offset of the tick label.\n */\nexport default class SynRangeTick extends SynergyElement {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    styles,\n  ];\n\n  /**\n   * Whether the tick should be shown as a subdivision.\n   */\n  @property({ reflect: true, type: Boolean }) subdivision = false;\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          tick: true,\n          'tick--subdivision': this.subdivision,\n        })}\n        part=\"base\"\n      >\n        <div class=\"tick-line\" part=\"line\"></div>\n        <div class=\"tick-label\" part=\"label\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],
   "mappings": ";;;;;;;;;;;;;;AACA,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,gBAAgB;AAmBzB,IAAqB,eAArB,cAA0C,eAAe;AAAA,EAAzD;AAAA;AAS8C,uBAAc;AAAA;AAAA,EAE1D,SAAS;AACP,WAAO;AAAA;AAAA,gBAEK,SAAS;AAAA,MACf,MAAM;AAAA,MACN,qBAAqB,KAAK;AAAA,IAC5B,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASR;AACF;AA3BqB,aACZ,SAAyB;AAAA,EAC9B;AAAA,EACA;AACF;AAK4C;AAAA,EAA3C,SAAS,EAAE,SAAS,MAAM,MAAM,QAAQ,CAAC;AAAA,GATvB,aASyB;",
   "names": []
 }

package/dist/chunks/{chunk.ENQBDTFB.js → chunk.OSJ3WQFD.js}

@@ -1,6 +1,6 @@
 import {
   SynButtonGroup
-} from "./chunk.J7BEYJP3.js";
+} from "./chunk.NTSN7KDQ.js";
 
 // src/components/button-group/button-group.ts
 var button_group_default = SynButtonGroup;
@@ -9,4 +9,4 @@ SynButtonGroup.define("syn-button-group");
 export {
   button_group_default
 };
-//# sourceMappingURL=chunk.ENQBDTFB.js.map
+//# sourceMappingURL=chunk.OSJ3WQFD.js.map

package/dist/chunks/{chunk.5NYIBZLL.js → chunk.PCHN7UNX.js}

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 
 // src/components/spinner/spinner.component.ts
 import { html } from "lit";
@@ -35,4 +35,4 @@ SynSpinner.styles = [component_styles_default, spinner_styles_default, spinner_c
 export {
   SynSpinner
 };
-//# sourceMappingURL=chunk.5NYIBZLL.js.map
+//# sourceMappingURL=chunk.PCHN7UNX.js.map

package/dist/chunks/{chunk.5NYIBZLL.js.map → chunk.PCHN7UNX.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/spinner/spinner.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 componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './spinner.styles.js';\nimport customStyles from './spinner.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy.style/components/spinner\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SynSpinner extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      <svg part=\"base\" class=\"spinner\" role=\"progressbar\" aria-label=${this.localize.term('loading')}>\n        <circle class=\"spinner__track\"></circle>\n        <circle class=\"spinner__indicator\"></circle>\n      </svg>\n    `;\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 { LocalizeController } from '../../utilities/localize.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport styles from './spinner.styles.js';\nimport customStyles from './spinner.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Spinners are used to show the progress of an indeterminate operation.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs\n * @status stable\n * @since 2.0\n *\n * @csspart base - The component's base wrapper.\n *\n * @cssproperty --track-width - The width of the track.\n * @cssproperty --indicator-color - The color of the spinner's indicator.\n * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.\n */\nexport default class SynSpinner extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles, customStyles];\n\n  private readonly localize = new LocalizeController(this);\n\n  render() {\n    return html`\n      <svg part=\"base\" class=\"spinner\" role=\"progressbar\" aria-label=${this.localize.term('loading')}>\n        <circle class=\"spinner__track\"></circle>\n        <circle class=\"spinner__indicator\"></circle>\n      </svg>\n    `;\n  }\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;AAQA,SAAS,YAAY;AAoBrB,IAAqB,aAArB,cAAwC,eAAe;AAAA,EAAvD;AAAA;AAGE,SAAiB,WAAW,IAAI,mBAAmB,IAAI;AAAA;AAAA,EAEvD,SAAS;AACP,WAAO;AAAA,uEAC4D,KAAK,SAAS,KAAK,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlG;AACF;AAbqB,WACZ,SAAyB,CAAC,0BAAiB,wBAAQ,6BAAY;",
   "names": []
 }

package/dist/chunks/{chunk.4V3CK3E5.js → chunk.PJF3RP7Q.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.PKYC7QF3.js";
 import {
   SynResizeObserver
-} from "./chunk.ZIJT7PED.js";
+} from "./chunk.KXDWM25J.js";
 import {
   scrollIntoView
 } from "./chunk.5732DMBC.js";
 import {
   SynIconButton
-} from "./chunk.OW43BAXS.js";
+} from "./chunk.A77V4OPP.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
@@ -24,7 +24,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.62XLN3FC.js";
+} from "./chunk.FA4T7QQM.js";
 import {
   __decorateClass,
   __spreadValues
@@ -515,4 +515,4 @@ __decorateClass([
 export {
   SynTabGroup
 };
-//# sourceMappingURL=chunk.4V3CK3E5.js.map
+//# sourceMappingURL=chunk.PJF3RP7Q.js.map