npm - @synergy-design-system/components - Versions diffs - 2.14.1 → 2.14.3 - Mend

@synergy-design-system/components 2.14.1 → 2.14.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (313) hide show

package/dist/chunks/{chunk.QSP4W3ST.js.map → chunk.GLQI4HLD.js.map} RENAMED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/combobox.component.ts"],
-  "sourcesContent": ["import type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { waitForEvent } from '../../internal/event.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 SynPopup from '../popup/popup.component.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynOption from '../option/option.component.js';\nimport type SynOptGroup from '../optgroup/optgroup.js';\nimport styles from './combobox.styles.js';\nimport customStyles from './combobox.custom.styles.js';\nimport {\n  filterOnlyOptgroups, getAllOptions, getAssignedElementsForSlot, normalizeString,\n} from './utils.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { type OptionRenderer, defaultOptionRenderer } from './option-renderer.js';\n\n/**\n * @summary Comboboxes allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs\n * @status stable\n *\n * @dependency syn-icon\n * @dependency syn-popup\n *\n * @slot - The listbox options. Must be `<syn-option>` elements.\n *    You can use `<syn-optgroup>`'s to group items visually.\n * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the combobox's menu opens.\n * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the combobox's menu closes.\n * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event syn-error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */\nexport default class SynCombobox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    formControlStyles,\n    styles,\n    formControlCustomStyles,\n    customStyles,\n  ];\n\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input'],\n  });\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n  private readonly localize = new LocalizeController(this);\n\n  private closeWatcher: CloseWatcher | null;\n\n  /** The last value of a syn-option, that was selected by click or via keyboard navigation */\n  private lastOptionValue = '';\n\n  @query('.combobox') popup: SynPopup;\n\n  @query('.combobox__inputs') combobox: HTMLSlotElement;\n\n  @query('.combobox__display-input') displayInput: HTMLInputElement;\n\n  @query('.combobox__value-input') valueInput: HTMLInputElement;\n\n  @query('.combobox__listbox') listbox: HTMLSlotElement;\n\n  @query('.listbox__options') filteredWrapper: HTMLSlotElement;\n\n  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n  @state() private hasFocus = false;\n\n  @state() displayLabel = '';\n\n  @state() selectedOption: SynOption | undefined;\n\n  @state() filteredOptions: Array<SynOption | SynOptGroup> = [];\n\n  /** The name of the combobox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /**\n   * The current value of the combobox, submitted as a name/value pair with form data.\n   */\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 combobox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Placeholder text to show as a hint when the combobox is empty. */\n  @property() placeholder = '';\n\n  /** Disables the combobox control. */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Adds a clear button when the combobox is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /**\n   * Indicates whether or not the combobox is open.\n   * You can toggle this attribute to show and hide the listbox, or you can use the `show()`\n   * and `hide()` methods and this attribute will reflect the combobox's open state.\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * Enable this option to prevent the listbox from being clipped,\n   * when the component is placed inside a container with `overflow: auto|scroll`.\n   * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  /** The combobox's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /**\n   * The preferred placement of the combobox's menu.\n   * Note that the actual placement may vary as needed to keep the listbox inside of the viewport.\n   */\n  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';\n\n  /** The combobox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element.\n   * This attribute allows you to place the form control outside of a form and associate it\n   * with the form that has this `id`.\n   * The form must be in the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** The combobox's required attribute. */\n  @property({ reflect: true, type: Boolean }) required = false;\n\n  /**\n   * A function that customizes the rendered option. The first argument is the option, the second\n   * is the query string, which is typed into the combobox.\n   * The function should return either a Lit TemplateResult or a string containing trusted HTML\n   * to render in the shown list of filtered options.\n   * If the query string should be highlighted use the `highlightOptionRenderer` function.\n   */\n  @property() getOption: OptionRenderer = defaultOptionRenderer;\n\n  /**\n   * A function used to filter options in the combobox component.\n   * The default filter method is a case- and diacritic-insensitive string comparison.\n   *\n   * @param option - The option to be filtered.\n   * @param queryString - The query string used for filtering.\n   * @returns A boolean indicating whether the option should be included in the filtered results.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  @property() filter: (option: SynOption, queryString: string) => boolean = (option, queryStr) => {\n    const normalizedOption = normalizeString(option.getTextLabel());\n    const normalizedQuery = normalizeString(queryStr);\n    return normalizedOption.includes(normalizedQuery);\n  };\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.valueInput.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.valueInput.validationMessage;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Because this is a form control, it shouldn't be opened initially\n    this.open = false;\n  }\n\n  firstUpdated() {\n    // initially set the displayLabel if the value was set via property initially\n    this.displayLabel = this.value;\n    this.formControlController.updateValidity();\n  }\n\n  protected get options() {\n    const renderOption = (option: SynOption) => {\n      const queryString = this.displayInput.value;\n      const optionHtml = this.getOption(option, queryString);\n      return html`${typeof optionHtml === 'string' ? unsafeHTML(optionHtml) : optionHtml}`;\n    };\n\n    return this.filteredOptions.map((item: SynOption | SynOptGroup) => {\n      if (item.tagName.toLowerCase() === 'syn-optgroup') {\n        Array.from(item.children).forEach((option: HTMLElement) => {\n          if (option.tagName.toLowerCase() === 'syn-option') {\n            // @todo: What was the intention of this?\n            // renderOption does nothing with the group itself\n            renderOption(option as SynOption);\n          }\n        });\n\n        return item;\n      }\n      return renderOption(item as SynOption);\n    });\n  }\n\n  private addOpenListeners() {\n    //\n    // Listen on the root node instead of the document in case the elements are inside a shadow root\n    //\n    // https://github.com/synergy-design-system/synergy/issues/1763\n    //\n    document.addEventListener('focusin', this.handleDocumentFocusIn);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n    // If the component is rendered in a shadow root,\n    // we need to attach the focusin listener there too\n    if (this.getRootNode() !== document) {\n      this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn);\n    }\n\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        if (this.open) {\n          // eslint-disable-next-line @typescript-eslint/no-floating-promises\n          this.hide();\n          this.displayInput.focus({ preventScroll: true });\n        }\n      };\n    }\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('focusin', this.handleDocumentFocusIn);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n    if (this.getRootNode() !== document) {\n      this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn);\n    }\n\n    this.closeWatcher?.destroy();\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleDocumentFocusIn = (event: KeyboardEvent) => {\n    // Close when focusing out of the combobox\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.hide();\n    }\n  };\n\n  /* eslint-disable @typescript-eslint/no-floating-promises */\n  // eslint-disable-next-line complexity\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const isClearButton = target.closest('.combobox__clear') !== null;\n\n    if (isClearButton) {\n      return;\n    }\n\n    // Close when pressing escape and open / clear input if not open\n    if (event.key === 'Escape') {\n      if (this.open && !this.closeWatcher) {\n        event.preventDefault();\n        event.stopPropagation();\n        this.hide();\n        this.displayInput.focus({ preventScroll: true });\n      } else if (!this.open) {\n        this.clearCombobox();\n      }\n    }\n\n    // Handle enter.\n    if (event.key === 'Enter') {\n      const currentOption = this.getCurrentOption();\n\n      // Pressing enter when focused on an input should submit the form like a native input, but\n      // we wait a tick before submitting to allow users to cancel the keydown event if they need to\n      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n      if (!this.open && !hasModifier) {\n        setTimeout(() => {\n          if (!event.defaultPrevented) {\n            this.formControlController.submit();\n          }\n        });\n        return;\n      }\n\n      if (!this.open || (currentOption && currentOption.disabled)) {\n        return;\n      }\n\n      // Update the value based on the current selection and close it\n      if (currentOption) {\n        const oldValue = this.lastOptionValue;\n        this.setSelectedOption(currentOption);\n\n        if (this.value !== oldValue) {\n          // Emit after updating\n          this.updateComplete.then(() => {\n            this.emit('syn-input');\n            this.emit('syn-change');\n          });\n        }\n      }\n\n      this.hide();\n      this.displayInput.focus({ preventScroll: true });\n      return;\n    }\n\n    // Navigate options\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      // Prevent scrolling\n      event.preventDefault();\n      event.stopPropagation();\n      // Open it\n      if (!this.open) {\n        this.show();\n      }\n\n      this.selectNextOption(event.key === 'ArrowDown');\n    }\n\n    // Move cursor\n    if (['Home', 'End'].includes(event.key)) {\n      // Prevent scrolling\n      event.preventDefault();\n      event.stopPropagation();\n      if (event.key === 'Home') {\n        this.displayInput.setSelectionRange(0, 0);\n      } else if (event.key === 'End') {\n        this.displayInput.setSelectionRange(\n          this.displayInput.value.length,\n          this.displayInput.value.length,\n        );\n      }\n    }\n  };\n  /* eslint-enable @typescript-eslint/no-floating-promises */\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the combobox\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.hide();\n    }\n  };\n\n  private handleLabelClick() {\n    this.displayInput.focus();\n  }\n\n  private handleComboboxMouseDown() {\n    // Ignore disabled controls\n    if (this.disabled) {\n      return;\n    }\n\n    const toggleListboxOpen = () => (this.open ? this.hide() : this.show());\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    toggleListboxOpen().then(() => {\n      setTimeout(() => this.displayInput.focus({ preventScroll: true }));\n    });\n  }\n\n  private handleComboboxKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return;\n    }\n\n    this.handleDocumentKeyDown(event);\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.clearCombobox();\n  }\n\n  private clearCombobox() {\n    if (this.value !== '') {\n      this.value = '';\n      this.displayInput.value = '';\n      this.lastOptionValue = '';\n      this.setSelectedOption(undefined);\n      this.displayInput.focus({ preventScroll: true });\n\n      // Emit after update\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.updateComplete.then(() => {\n        this.emit('syn-clear');\n        this.emit('syn-input');\n        this.emit('syn-change');\n      });\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private preventLoosingFocus(event: MouseEvent) {\n    // Don't lose focus of the input or propagate events\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /* eslint-disable @typescript-eslint/no-floating-promises */\n  private handleOptionClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const option = target.closest('syn-option');\n    const oldValue = this.lastOptionValue;\n    if (option && !option.disabled) {\n      this.setSelectedOption(option);\n\n      // Set focus after updating so the value is announced by screen readers\n      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));\n\n      if (this.value !== oldValue) {\n        // Emit after updating\n        this.updateComplete.then(() => {\n          this.emit('syn-input');\n          this.emit('syn-change');\n        });\n      }\n\n      this.hide();\n      this.displayInput.focus({ preventScroll: true });\n    }\n  }\n  /* eslint-enable @typescript-eslint/no-floating-promises */\n\n  /**\n   * Selects the following or previous option.\n   *\n   * @param isNext - A boolean indicating whether to select the following option (true)\n   *                 or the previous option (false).\n   */\n  private selectNextOption(isNext: boolean) {\n    const filteredOptions = this.getAllFilteredOptions();\n\n    if (filteredOptions.length === 0) {\n      return;\n    }\n\n    const currentOption = this.getCurrentOption();\n    const currentIndex = filteredOptions.indexOf(currentOption!);\n    let newIndex = Math.max(0, currentIndex);\n\n    if (isNext) {\n      const nextIndex = currentIndex + 1;\n      newIndex = (nextIndex > filteredOptions.length - 1) ? 0 : nextIndex;\n    } else {\n      const previousIndex = currentIndex - 1;\n      newIndex = previousIndex < 0 ? filteredOptions.length - 1 : previousIndex;\n    }\n    this.setCurrentOption(filteredOptions[newIndex]);\n    scrollIntoView(this.getCurrentOption()!, this.listbox, 'vertical', 'auto');\n  }\n\n  private getAllFilteredOptions() {\n    return [...this.filteredWrapper.querySelectorAll<SynOption>('syn-option')];\n  }\n\n  private getCurrentOption() {\n    return this.getAllFilteredOptions().find(option => option.current);\n  }\n\n  // Sets the current option, which is the option the user is currently interacting with\n  // (e.g. via keyboard). Only one option may be \"current\" at a time.\n  private setCurrentOption(option: SynOption | null) {\n    const allOptions = this.getAllFilteredOptions();\n\n    // Clear selection\n    this.displayInput.removeAttribute('aria-activedescendant');\n\n    allOptions.forEach(el => {\n      // eslint-disable-next-line no-param-reassign\n      el.current = false;\n      el.setAttribute('aria-selected', 'false');\n    });\n\n    // Select the target option\n    if (option) {\n      // eslint-disable-next-line no-param-reassign\n      option.current = true;\n      option.setAttribute('aria-selected', 'true');\n      this.displayInput.setAttribute('aria-activedescendant', option.id);\n    }\n  }\n\n  /**\n   * Updates the selected options cache, the current value, and the display value\n   */\n  private setSelectedOption(option: SynOption | undefined) {\n    this.selectedOption = option;\n\n    // Check if the selected option has a value,\n    // if not take the text content of the option otherwise the input text\n    const optionValue = this.selectedOption?.value || this.selectedOption?.getTextLabel();\n\n    if (option) {\n      this.lastOptionValue = optionValue || '';\n    }\n\n    // Update the value\n    this.value = optionValue ?? this.displayInput.value;\n\n    // Update validity and display label\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    this.updateComplete.then(() => {\n      this.displayLabel = this.selectedOption?.getTextLabel() ?? this.displayInput.value;\n      this.formControlController.updateValidity();\n    });\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  @watch('filter', { waitUntilFirstUpdate: true })\n  handleFilterChange() {\n    this.createComboboxOptionsFromQuery(this.value);\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n\n    // Close the listbox when the control is disabled\n    if (this.disabled) {\n      this.open = false;\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.handleOpenChange();\n    }\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    // set the display label here in case of the value was set via property only\n    this.displayLabel = this.value;\n    this.createComboboxOptionsFromQuery(this.value);\n    this.setCurrentOption(null);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open && !this.disabled) {\n      if (this.filteredOptions.length === 0) {\n        // Don't open the listbox if there are no options\n        this.open = false;\n        this.emit('syn-error');\n        return;\n      }\n\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.listbox.hidden = false;\n      this.popup.active = true;\n\n      const { keyframes, options } = getAnimation(this, 'combobox.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.emit('syn-after-show');\n      return;\n    }\n\n    this.setCurrentOption(null);\n    this.displayInput.removeAttribute('aria-activedescendant');\n    // Hide\n    this.emit('syn-hide');\n    this.removeOpenListeners();\n\n    await stopAnimations(this);\n    const { keyframes, options } = getAnimation(this, 'combobox.hide', { dir: this.localize.dir() });\n    await animateTo(this.popup.popup, keyframes, options);\n    this.listbox.hidden = true;\n    this.popup.active = false;\n\n    this.emit('syn-after-hide');\n  }\n\n  /**\n   * Shows the listbox. If it is not possible to open the listbox, because there are no\n   * appropriate filtered options, a syn-error is emitted and the listbox stays closed.\n   */\n  async show() {\n    if (this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = true;\n    return Promise.race([waitForEvent(this, 'syn-after-show'), waitForEvent(this, 'syn-error')]);\n  }\n\n  /** Hides the listbox. */\n  async hide() {\n    if (!this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Checks for validity but does not show a validation message.\n   * Returns `true` when valid and `false` when invalid.\n   */\n  checkValidity() {\n    return this.valueInput.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.valueInput.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.valueInput.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the control. */\n  focus(options?: FocusOptions) {\n    this.displayInput.focus(options);\n  }\n\n  /** Removes focus from the control. */\n  blur() {\n    this.displayInput.blur();\n  }\n\n  private createComboboxOptionsFromQuery(queryString: string) {\n    const optgroups: SynOptGroup[] = [];\n\n    this.filteredOptions = this.getSlottedOptions()\n      .filter(option => this.filter(option, queryString) || queryString === '')\n      .map(option => {\n        const clonedOption = option.cloneNode(true) as SynOption;\n\n        // Check if the option has a syn-optgroup as parent\n        const hasOptgroup = option.parentElement?.tagName.toLowerCase() === 'syn-optgroup';\n        if (!hasOptgroup) {\n          return clonedOption;\n        }\n\n        const optgroup = option.parentElement as SynOptGroup;\n        const filteredOptgroup = optgroups.find((el) => el.id === optgroup.id);\n\n        // Check if the optgroup was already added to the filteredOptions.\n        // It should only be added once!\n        if (filteredOptgroup) {\n          filteredOptgroup?.appendChild(clonedOption);\n          return undefined;\n        }\n\n        const clonedOptgroup = optgroup.cloneNode() as SynOptGroup;\n        clonedOptgroup.appendChild(clonedOption);\n        optgroups.push(clonedOptgroup);\n        return clonedOptgroup;\n      })\n      // we need to remove the undefined values here\n      .filter(Boolean) as Array<SynOption | SynOptGroup>;\n  }\n\n  private async handleInput() {\n    const inputValue = this.displayInput.value;\n    this.value = inputValue;\n    await this.updateComplete;\n    this.open = this.filteredWrapper.children.length > 0;\n    this.setSelectedOption(undefined);\n\n    this.formControlController.updateValidity();\n    this.emit('syn-input');\n  }\n\n  private handleChange() {\n    // Only update the value and emit the event, if the change event occurred by\n    // the user typing something in and removing focus of the combobox\n    if (!this.selectedOption) {\n      this.value = this.displayInput.value;\n      // Update validity\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.updateComplete.then(() => {\n        this.formControlController.updateValidity();\n      });\n      this.emit('syn-change');\n    }\n  }\n\n  private getSlottedOptions() {\n    return getAllOptions(getAssignedElementsForSlot(this.defaultSlot)).flat();\n  }\n\n  private getSlottedOptGroups(): SynOptGroup[] {\n    return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));\n  }\n\n  /* eslint-disable no-param-reassign, @typescript-eslint/no-floating-promises */\n  private handleDefaultSlotChange() {\n    // Rerun this handler when <syn-option> is registered\n    if (!customElements.get('syn-option')) {\n      customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n      return;\n    }\n\n    const slottedOptions = this.getSlottedOptions();\n    const slottedOptgroups = this.getSlottedOptGroups();\n    slottedOptions.forEach((option, index) => {\n      option.id = option.id || `syn-combobox-option-${index}`;\n    });\n\n    slottedOptgroups.forEach((optgroup, index) => {\n      optgroup.id = optgroup.id || `syn-combobox-optgroup-${index}`;\n    });\n\n    this.createComboboxOptionsFromQuery(this.value);\n\n    if (this.hasFocus && this.value.length > 0 && !this.open) {\n      this.show();\n    }\n  }\n  /* eslint-enable no-param-reassign, @typescript-eslint/no-floating-promises */\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  // eslint-disable-next-line complexity\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    const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;\n    const isPlaceholderVisible = this.placeholder && this.value.length === 0;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-label': hasLabel,\n          'form-control--large': this.size === 'large',\n          'form-control--medium': this.size === 'medium',\n          'form-control--small': this.size === 'small',\n        })}\n      >\n        <label\n          id=\"label\"\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <syn-popup\n            class=${classMap({\n              combobox: true,\n              'combobox--bottom': this.placement === 'bottom',\n              'combobox--disabled': this.disabled,\n              'combobox--focused': this.hasFocus,\n              'combobox--large': this.size === 'large',\n              'combobox--medium': this.size === 'medium',\n              'combobox--open': this.open,\n              'combobox--placeholder-visible': isPlaceholderVisible,\n              'combobox--small': this.size === 'small',\n              'combobox--standard': true,\n              'combobox--top': this.placement === 'top',\n            })}\n            placement=${this.placement}\n            strategy=${this.hoist ? 'fixed' : 'absolute'}\n            flip\n            shift\n            sync=\"width\"\n            auto-size=\"vertical\"\n            auto-size-padding=\"10\"\n          >\n            <div\n              part=\"combobox\"\n              class=\"combobox__inputs\"\n              slot=\"anchor\"\n              @keydown=${this.handleComboboxKeyDown}\n              @mousedown=${this.handleComboboxMouseDown}\n            >\n              <slot part=\"prefix\" name=\"prefix\" class=\"combobox__prefix\"></slot>\n\n              <input\n                part=\"display-input\"\n                class=\"combobox__display-input\"\n                type=\"text\"\n                placeholder=${this.placeholder}\n                .disabled=${this.disabled}\n                .value=${this.displayLabel}\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                autocapitalize=\"off\"\n                aria-controls=\"listbox\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-haspopup=\"listbox\"\n                aria-labelledby=\"label\"\n                aria-disabled=${this.disabled ? 'true' : 'false'}\n                aria-describedby=\"help-text\"\n                role=\"combobox\"\n                tabindex=\"0\"\n                @focus=${this.handleFocus}\n                @blur=${this.handleBlur}\n\n                aria-autocomplete=\"list\"\n                aria-owns=\"listbox\"\n                @input=${this.handleInput}\n                @change=${this.handleChange}\n              />\n\n              <input\n                class=\"combobox__value-input\"\n                type=\"text\"\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                .value=${this.value}\n                tabindex=\"-1\"\n                aria-hidden=\"true\"\n                @focus=${() => this.focus()}\n                @invalid=${this.handleInvalid}\n              />\n       \n              ${hasClearIcon\n                ? html`\n                    <button\n                      part=\"clear-button\"\n                      class=\"combobox__clear\"\n                      type=\"button\"\n                      aria-label=${this.localize.term('clearEntry')}\n                      @mousedown=${this.preventLoosingFocus}\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\n                <slot name=\"suffix\" part=\"suffix\" class=\"combobox__suffix\"></slot>\n\n                <slot name=\"expand-icon\" part=\"expand-icon\" class=\"combobox__expand-icon\">\n                  <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n                </slot>\n            </div>\n\n            <div\n              id=\"listbox\"\n              role=\"listbox\"\n              aria-expanded=${this.open ? 'true' : 'false'}\n              aria-labelledby=\"label\"\n              part=\"listbox\"\n              class=\"combobox__listbox\"\n              tabindex=\"-1\"\n              @mousedown=${this.preventLoosingFocus}\n              @mouseup=${this.handleOptionClick}\n            >\n              <div class=\"listbox__options\" part=\"filtered-listbox\">\n                ${this.options}\n              </div>\n              <slot @slotchange=${this.handleDefaultSlotChange}></slot>      \n            </div>\n          </syn-popup>\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  /* eslint-enable @typescript-eslint/unbound-method */\n}\n\nsetDefaultAnimation('combobox.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('combobox.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { CSSResultGroup } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { waitForEvent } from '../../internal/event.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 SynPopup from '../popup/popup.component.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type SynOption from '../option/option.component.js';\nimport type SynOptGroup from '../optgroup/optgroup.js';\nimport styles from './combobox.styles.js';\nimport customStyles from './combobox.custom.styles.js';\nimport {\n  filterOnlyOptgroups, getAllOptions, getAssignedElementsForSlot, normalizeString,\n} from './utils.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { type OptionRenderer, defaultOptionRenderer } from './option-renderer.js';\n\n/**\n * @summary Comboboxes allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs\n * @status stable\n *\n * @dependency syn-icon\n * @dependency syn-popup\n *\n * @slot - The listbox options. Must be `<syn-option>` elements.\n *    You can use `<syn-optgroup>`'s to group items visually.\n * @slot label - The combobox's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.\n * @slot suffix - Used to append a presentational icon or similar element to the combobox.\n * @slot clear-icon - An icon to use in lieu of the default clear icon.\n * @slot expand-icon - The icon to show when the control is expanded and collapsed.\n *    Rotates on open and close.\n * @slot help-text - Text that describes how to use the combobox.\n *    Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-change - Emitted when the control's value changes.\n * @event syn-clear - Emitted when the control's value is cleared.\n * @event syn-input - Emitted when the control receives input.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-blur - Emitted when the control loses focus.\n * @event syn-show - Emitted when the combobox's menu opens.\n * @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the combobox's menu closes.\n * @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.\n * @event syn-invalid - Emitted when the form control has been checked for validity\n *    and its constraints aren't satisfied.\n * @event syn-error - Emitted when the combobox menu fails to open.\n *\n * @csspart form-control - The form control that wraps the label, combobox, and help text.\n * @csspart form-control-label - The label's wrapper.\n * @csspart form-control-input - The combobox's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.\n * @csspart prefix - The container that wraps the prefix slot.\n * @csspart suffix - The container that wraps the suffix slot.\n * @csspart display-input - The element that displays the selected option's label,\n *     an `<input>` element.\n * @csspart listbox - The listbox container where the options are slotted\n *   and the filtered options list exists.\n * @csspart filtered-listbox - The container that wraps the filtered options.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n *\n * @animation combobox.show - The animation to use when showing the combobox.\n * @animation combobox.hide - The animation to use when hiding the combobox.\n */\nexport default class SynCombobox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    formControlStyles,\n    styles,\n    formControlCustomStyles,\n    customStyles,\n  ];\n\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-blur', 'syn-input'],\n  });\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n  private readonly localize = new LocalizeController(this);\n\n  private closeWatcher: CloseWatcher | null;\n\n  /** The last value of a syn-option, that was selected by click or via keyboard navigation */\n  private lastOptionValue = '';\n\n  @query('.combobox') popup: SynPopup;\n\n  @query('.combobox__inputs') combobox: HTMLSlotElement;\n\n  @query('.combobox__display-input') displayInput: HTMLInputElement;\n\n  @query('.combobox__value-input') valueInput: HTMLInputElement;\n\n  @query('.combobox__listbox') listbox: HTMLSlotElement;\n\n  @query('.listbox__options') filteredWrapper: HTMLSlotElement;\n\n  @query('slot:not([name])') private defaultSlot: HTMLSlotElement;\n\n  @state() private hasFocus = false;\n\n  @state() displayLabel = '';\n\n  @state() selectedOption: SynOption | undefined;\n\n  @state() filteredOptions: Array<SynOption | SynOptGroup> = [];\n\n  /** The name of the combobox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /**\n   * The current value of the combobox, submitted as a name/value pair with form data.\n   */\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 combobox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Placeholder text to show as a hint when the combobox is empty. */\n  @property() placeholder = '';\n\n  /** Disables the combobox control. */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Adds a clear button when the combobox is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /**\n   * Indicates whether or not the combobox is open.\n   * You can toggle this attribute to show and hide the listbox, or you can use the `show()`\n   * and `hide()` methods and this attribute will reflect the combobox's open state.\n   */\n  @property({ reflect: true, type: Boolean }) open = false;\n\n  /**\n   * Enable this option to prevent the listbox from being clipped,\n   * when the component is placed inside a container with `overflow: auto|scroll`.\n   * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\n\n  /** The combobox's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /**\n   * The preferred placement of the combobox's menu.\n   * Note that the actual placement may vary as needed to keep the listbox inside of the viewport.\n   */\n  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';\n\n  /** The combobox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element.\n   * This attribute allows you to place the form control outside of a form and associate it\n   * with the form that has this `id`.\n   * The form must be in the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** The combobox's required attribute. */\n  @property({ reflect: true, type: Boolean }) required = false;\n\n  /**\n   * A function that customizes the rendered option. The first argument is the option, the second\n   * is the query string, which is typed into the combobox.\n   * The function should return either a Lit TemplateResult or a string containing trusted HTML\n   * to render in the shown list of filtered options.\n   * If the query string should be highlighted use the `highlightOptionRenderer` function.\n   */\n  @property() getOption: OptionRenderer = defaultOptionRenderer;\n\n  /**\n   * A function used to filter options in the combobox component.\n   * The default filter method is a case- and diacritic-insensitive string comparison.\n   *\n   * @param option - The option to be filtered.\n   * @param queryString - The query string used for filtering.\n   * @returns A boolean indicating whether the option should be included in the filtered results.\n   */\n  // eslint-disable-next-line class-methods-use-this\n  @property() filter: (option: SynOption, queryString: string) => boolean = (option, queryStr) => {\n    const normalizedOption = normalizeString(option.getTextLabel());\n    const normalizedQuery = normalizeString(queryStr);\n    return normalizedOption.includes(normalizedQuery);\n  };\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.valueInput.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.valueInput.validationMessage;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // Because this is a form control, it shouldn't be opened initially\n    this.open = false;\n  }\n\n  firstUpdated() {\n    // initially set the displayLabel if the value was set via property initially\n    this.displayLabel = this.value;\n    this.formControlController.updateValidity();\n  }\n\n  protected get options() {\n    const renderOption = (option: SynOption) => {\n      const queryString = this.displayInput.value;\n      const optionHtml = this.getOption(option, queryString);\n      return html`${typeof optionHtml === 'string' ? unsafeHTML(optionHtml) : optionHtml}`;\n    };\n\n    return this.filteredOptions.map((item: SynOption | SynOptGroup) => {\n      if (item.tagName.toLowerCase() === 'syn-optgroup') {\n        Array.from(item.children).forEach((option: HTMLElement) => {\n          if (option.tagName.toLowerCase() === 'syn-option') {\n            // @todo: What was the intention of this?\n            // renderOption does nothing with the group itself\n            renderOption(option as SynOption);\n          }\n        });\n\n        return item;\n      }\n      return renderOption(item as SynOption);\n    });\n  }\n\n  private addOpenListeners() {\n    //\n    // Listen on the root node instead of the document in case the elements are inside a shadow root\n    //\n    // https://github.com/synergy-design-system/synergy/issues/1763\n    //\n    document.addEventListener('focusin', this.handleDocumentFocusIn);\n    document.addEventListener('keydown', this.handleDocumentKeyDown);\n    document.addEventListener('mousedown', this.handleDocumentMouseDown);\n\n    // If the component is rendered in a shadow root,\n    // we need to attach the focusin listener there too\n    if (this.getRootNode() !== document) {\n      this.getRootNode().addEventListener('focusin', this.handleDocumentFocusIn);\n    }\n\n    if ('CloseWatcher' in window) {\n      this.closeWatcher?.destroy();\n      this.closeWatcher = new CloseWatcher();\n      this.closeWatcher.onclose = () => {\n        if (this.open) {\n          // eslint-disable-next-line @typescript-eslint/no-floating-promises\n          this.hide();\n          this.displayInput.focus({ preventScroll: true });\n        }\n      };\n    }\n  }\n\n  private removeOpenListeners() {\n    document.removeEventListener('focusin', this.handleDocumentFocusIn);\n    document.removeEventListener('keydown', this.handleDocumentKeyDown);\n    document.removeEventListener('mousedown', this.handleDocumentMouseDown);\n\n    if (this.getRootNode() !== document) {\n      this.getRootNode().removeEventListener('focusin', this.handleDocumentFocusIn);\n    }\n\n    this.closeWatcher?.destroy();\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleDocumentFocusIn = (event: KeyboardEvent) => {\n    // Close when focusing out of the combobox\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.hide();\n    }\n  };\n\n  /* eslint-disable @typescript-eslint/no-floating-promises */\n  // eslint-disable-next-line complexity\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const isClearButton = target.closest('.combobox__clear') !== null;\n\n    if (isClearButton) {\n      return;\n    }\n\n    // Close when pressing escape and open / clear input if not open\n    if (event.key === 'Escape') {\n      if (this.open && !this.closeWatcher) {\n        event.preventDefault();\n        event.stopPropagation();\n        this.hide();\n        this.displayInput.focus({ preventScroll: true });\n      } else if (!this.open) {\n        this.clearCombobox();\n      }\n    }\n\n    // Handle enter.\n    if (event.key === 'Enter') {\n      const currentOption = this.getCurrentOption();\n\n      // Pressing enter when focused on an input should submit the form like a native input, but\n      // we wait a tick before submitting to allow users to cancel the keydown event if they need to\n      const hasModifier = event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;\n      if (!this.open && !hasModifier) {\n        setTimeout(() => {\n          if (!event.defaultPrevented) {\n            this.formControlController.submit();\n          }\n        });\n        return;\n      }\n\n      if (!this.open || (currentOption && currentOption.disabled)) {\n        return;\n      }\n\n      // Update the value based on the current selection and close it\n      if (currentOption) {\n        const oldValue = this.lastOptionValue;\n        this.setSelectedOption(currentOption);\n\n        if (this.value !== oldValue) {\n          // Emit after updating\n          this.updateComplete.then(() => {\n            this.emit('syn-input');\n            this.emit('syn-change');\n          });\n        }\n      }\n\n      this.hide();\n      this.displayInput.focus({ preventScroll: true });\n      return;\n    }\n\n    // Navigate options\n    if (['ArrowUp', 'ArrowDown'].includes(event.key)) {\n      // Prevent scrolling\n      event.preventDefault();\n      event.stopPropagation();\n      // Open it\n      if (!this.open) {\n        this.show();\n      }\n\n      this.selectNextOption(event.key === 'ArrowDown');\n    }\n\n    // Move cursor\n    if (['Home', 'End'].includes(event.key)) {\n      // Prevent scrolling\n      event.preventDefault();\n      event.stopPropagation();\n      if (event.key === 'Home') {\n        this.displayInput.setSelectionRange(0, 0);\n      } else if (event.key === 'End') {\n        this.displayInput.setSelectionRange(\n          this.displayInput.value.length,\n          this.displayInput.value.length,\n        );\n      }\n    }\n  };\n  /* eslint-enable @typescript-eslint/no-floating-promises */\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the combobox\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.hide();\n    }\n  };\n\n  private handleLabelClick() {\n    this.displayInput.focus();\n  }\n\n  private handleComboboxMouseDown() {\n    // Ignore disabled controls\n    if (this.disabled) {\n      return;\n    }\n\n    const toggleListboxOpen = () => (this.open ? this.hide() : this.show());\n\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    toggleListboxOpen().then(() => {\n      setTimeout(() => this.displayInput.focus({ preventScroll: true }));\n    });\n  }\n\n  private handleComboboxKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return;\n    }\n\n    this.handleDocumentKeyDown(event);\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.clearCombobox();\n  }\n\n  private clearCombobox() {\n    if (this.value !== '') {\n      this.value = '';\n      this.displayInput.value = '';\n      this.lastOptionValue = '';\n      this.setSelectedOption(undefined);\n      this.displayInput.focus({ preventScroll: true });\n\n      // Emit after update\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.updateComplete.then(() => {\n        this.emit('syn-clear');\n        this.emit('syn-input');\n        this.emit('syn-change');\n      });\n    }\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  private preventLoosingFocus(event: MouseEvent) {\n    // Don't lose focus of the input or propagate events\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  /* eslint-disable @typescript-eslint/no-floating-promises */\n  private handleOptionClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const option = target.closest('syn-option');\n    const oldValue = this.lastOptionValue;\n    if (option && !option.disabled) {\n      this.setSelectedOption(option);\n\n      // Set focus after updating so the value is announced by screen readers\n      this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));\n\n      if (this.value !== oldValue) {\n        // Emit after updating\n        this.updateComplete.then(() => {\n          this.emit('syn-input');\n          this.emit('syn-change');\n        });\n      }\n\n      this.hide();\n      this.displayInput.focus({ preventScroll: true });\n    }\n  }\n  /* eslint-enable @typescript-eslint/no-floating-promises */\n\n  /**\n   * Selects the following or previous option.\n   *\n   * @param isNext - A boolean indicating whether to select the following option (true)\n   *                 or the previous option (false).\n   */\n  private selectNextOption(isNext: boolean) {\n    const filteredOptions = this.getAllFilteredOptions();\n\n    if (filteredOptions.length === 0) {\n      return;\n    }\n\n    const currentOption = this.getCurrentOption();\n    const currentIndex = filteredOptions.indexOf(currentOption!);\n    let newIndex = Math.max(0, currentIndex);\n\n    if (isNext) {\n      const nextIndex = currentIndex + 1;\n      newIndex = (nextIndex > filteredOptions.length - 1) ? 0 : nextIndex;\n    } else {\n      const previousIndex = currentIndex - 1;\n      newIndex = previousIndex < 0 ? filteredOptions.length - 1 : previousIndex;\n    }\n    this.setCurrentOption(filteredOptions[newIndex]);\n    scrollIntoView(this.getCurrentOption()!, this.listbox, 'vertical', 'auto');\n  }\n\n  private getAllFilteredOptions() {\n    return [...this.filteredWrapper.querySelectorAll<SynOption>('syn-option')];\n  }\n\n  private getCurrentOption() {\n    return this.getAllFilteredOptions().find(option => option.current);\n  }\n\n  // Sets the current option, which is the option the user is currently interacting with\n  // (e.g. via keyboard). Only one option may be \"current\" at a time.\n  private setCurrentOption(option: SynOption | null) {\n    const allOptions = this.getAllFilteredOptions();\n\n    // Clear selection\n    this.displayInput.removeAttribute('aria-activedescendant');\n\n    allOptions.forEach(el => {\n      // eslint-disable-next-line no-param-reassign\n      el.current = false;\n      el.setAttribute('aria-selected', 'false');\n    });\n\n    // Select the target option\n    if (option) {\n      // eslint-disable-next-line no-param-reassign\n      option.current = true;\n      option.setAttribute('aria-selected', 'true');\n      this.displayInput.setAttribute('aria-activedescendant', option.id);\n    }\n  }\n\n  /**\n   * Updates the selected options cache, the current value, and the display value\n   */\n  private setSelectedOption(option: SynOption | undefined) {\n    this.selectedOption = option;\n\n    // Check if the selected option has a value,\n    // if not take the text content of the option otherwise the input text\n    const optionValue = this.selectedOption?.value || this.selectedOption?.getTextLabel();\n\n    if (option) {\n      this.lastOptionValue = optionValue || '';\n    }\n\n    // Update the value\n    this.value = optionValue ?? this.displayInput.value;\n\n    // Update validity and display label\n    // eslint-disable-next-line @typescript-eslint/no-floating-promises\n    this.updateComplete.then(() => {\n      this.displayLabel = this.selectedOption?.getTextLabel() ?? this.displayInput.value;\n      this.formControlController.updateValidity();\n    });\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  @watch('filter', { waitUntilFirstUpdate: true })\n  handleFilterChange() {\n    this.createComboboxOptionsFromQuery(this.value);\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n\n    // Close the listbox when the control is disabled\n    if (this.disabled) {\n      this.open = false;\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.handleOpenChange();\n    }\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    // set the display label here in case of the value was set via property only\n    this.displayLabel = this.value;\n    this.createComboboxOptionsFromQuery(this.value);\n    this.setCurrentOption(null);\n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open && !this.disabled) {\n      if (this.filteredOptions.length === 0) {\n        // Don't open the listbox if there are no options\n        this.open = false;\n        this.emit('syn-error');\n        return;\n      }\n\n      // Show\n      this.emit('syn-show');\n      this.addOpenListeners();\n\n      await stopAnimations(this);\n      this.listbox.hidden = false;\n      this.popup.active = true;\n\n      const { keyframes, options } = getAnimation(this, 'combobox.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      this.emit('syn-after-show');\n      return;\n    }\n\n    this.setCurrentOption(null);\n    this.displayInput.removeAttribute('aria-activedescendant');\n    // Hide\n    this.emit('syn-hide');\n    this.removeOpenListeners();\n\n    await stopAnimations(this);\n    const { keyframes, options } = getAnimation(this, 'combobox.hide', { dir: this.localize.dir() });\n    await animateTo(this.popup.popup, keyframes, options);\n    this.listbox.hidden = true;\n    this.popup.active = false;\n\n    this.emit('syn-after-hide');\n  }\n\n  /**\n   * Shows the listbox. If it is not possible to open the listbox, because there are no\n   * appropriate filtered options, a syn-error is emitted and the listbox stays closed.\n   */\n  async show() {\n    if (this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = true;\n    return Promise.race([waitForEvent(this, 'syn-after-show'), waitForEvent(this, 'syn-error')]);\n  }\n\n  /** Hides the listbox. */\n  async hide() {\n    if (!this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = false;\n    return waitForEvent(this, 'syn-after-hide');\n  }\n\n  /**\n   * Checks for validity but does not show a validation message.\n   * Returns `true` when valid and `false` when invalid.\n   */\n  checkValidity() {\n    return this.valueInput.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.valueInput.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  setCustomValidity(message: string) {\n    this.valueInput.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the control. */\n  focus(options?: FocusOptions) {\n    this.displayInput.focus(options);\n  }\n\n  /** Removes focus from the control. */\n  blur() {\n    this.displayInput.blur();\n  }\n\n  private createComboboxOptionsFromQuery(queryString: string) {\n    const optgroups: SynOptGroup[] = [];\n\n    this.filteredOptions = this.getSlottedOptions()\n      .filter(option => this.filter(option, queryString) || queryString === '')\n      .map(option => {\n        const clonedOption = option.cloneNode(true) as SynOption;\n\n        // Check if the option has a syn-optgroup as parent\n        const hasOptgroup = option.parentElement?.tagName.toLowerCase() === 'syn-optgroup';\n        if (!hasOptgroup) {\n          return clonedOption;\n        }\n\n        const optgroup = option.parentElement as SynOptGroup;\n        const filteredOptgroup = optgroups.find((el) => el.id === optgroup.id);\n\n        // Check if the optgroup was already added to the filteredOptions.\n        // It should only be added once!\n        if (filteredOptgroup) {\n          filteredOptgroup?.appendChild(clonedOption);\n          return undefined;\n        }\n\n        const clonedOptgroup = optgroup.cloneNode() as SynOptGroup;\n        clonedOptgroup.appendChild(clonedOption);\n        optgroups.push(clonedOptgroup);\n        return clonedOptgroup;\n      })\n      // we need to remove the undefined values here\n      .filter(Boolean) as Array<SynOption | SynOptGroup>;\n  }\n\n  private async handleInput() {\n    const inputValue = this.displayInput.value;\n    this.value = inputValue;\n    await this.updateComplete;\n    this.open = this.filteredWrapper.children.length > 0;\n    this.setSelectedOption(undefined);\n\n    this.formControlController.updateValidity();\n    this.emit('syn-input');\n  }\n\n  private handleChange() {\n    // Only update the value and emit the event, if the change event occurred by\n    // the user typing something in and removing focus of the combobox\n    if (!this.selectedOption) {\n      this.value = this.displayInput.value;\n      // Update validity\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.updateComplete.then(() => {\n        this.formControlController.updateValidity();\n      });\n      this.emit('syn-change');\n    }\n  }\n\n  private getSlottedOptions() {\n    return getAllOptions(getAssignedElementsForSlot(this.defaultSlot)).flat();\n  }\n\n  private getSlottedOptGroups(): SynOptGroup[] {\n    return filterOnlyOptgroups(getAssignedElementsForSlot(this.defaultSlot));\n  }\n\n  /* eslint-disable no-param-reassign, @typescript-eslint/no-floating-promises */\n  /* @internal - used by options to update labels */\n  public handleDefaultSlotChange() {\n    // Rerun this handler when <syn-option> is registered\n    if (!customElements.get('syn-option')) {\n      customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n      return;\n    }\n\n    const slottedOptions = this.getSlottedOptions();\n    const slottedOptgroups = this.getSlottedOptGroups();\n    slottedOptions.forEach((option, index) => {\n      option.id = option.id || `syn-combobox-option-${index}`;\n    });\n\n    slottedOptgroups.forEach((optgroup, index) => {\n      optgroup.id = optgroup.id || `syn-combobox-optgroup-${index}`;\n    });\n\n    this.createComboboxOptionsFromQuery(this.value);\n\n    if (this.hasFocus && this.value.length > 0 && !this.open) {\n      this.show();\n    }\n  }\n  /* eslint-enable no-param-reassign, @typescript-eslint/no-floating-promises */\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  // eslint-disable-next-line complexity\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    const hasClearIcon = this.clearable && !this.disabled && this.value.length > 0;\n    const isPlaceholderVisible = this.placeholder && this.value.length === 0;\n\n    return html`\n      <div\n        part=\"form-control\"\n        class=${classMap({\n          'form-control': true,\n          'form-control--has-help-text': hasHelpText,\n          'form-control--has-label': hasLabel,\n          'form-control--large': this.size === 'large',\n          'form-control--medium': this.size === 'medium',\n          'form-control--small': this.size === 'small',\n        })}\n      >\n        <label\n          id=\"label\"\n          part=\"form-control-label\"\n          class=\"form-control__label\"\n          aria-hidden=${hasLabel ? 'false' : 'true'}\n          @click=${this.handleLabelClick}\n        >\n          <slot name=\"label\">${this.label}</slot>\n        </label>\n\n        <div part=\"form-control-input\" class=\"form-control-input\">\n          <syn-popup\n            class=${classMap({\n              combobox: true,\n              'combobox--bottom': this.placement === 'bottom',\n              'combobox--disabled': this.disabled,\n              'combobox--focused': this.hasFocus,\n              'combobox--large': this.size === 'large',\n              'combobox--medium': this.size === 'medium',\n              'combobox--open': this.open,\n              'combobox--placeholder-visible': isPlaceholderVisible,\n              'combobox--small': this.size === 'small',\n              'combobox--standard': true,\n              'combobox--top': this.placement === 'top',\n            })}\n            placement=${this.placement}\n            strategy=${this.hoist ? 'fixed' : 'absolute'}\n            flip\n            shift\n            sync=\"width\"\n            auto-size=\"vertical\"\n            auto-size-padding=\"10\"\n          >\n            <div\n              part=\"combobox\"\n              class=\"combobox__inputs\"\n              slot=\"anchor\"\n              @keydown=${this.handleComboboxKeyDown}\n              @mousedown=${this.handleComboboxMouseDown}\n            >\n              <slot part=\"prefix\" name=\"prefix\" class=\"combobox__prefix\"></slot>\n\n              <input\n                part=\"display-input\"\n                class=\"combobox__display-input\"\n                type=\"text\"\n                placeholder=${this.placeholder}\n                .disabled=${this.disabled}\n                .value=${this.displayLabel}\n                autocomplete=\"off\"\n                spellcheck=\"false\"\n                autocapitalize=\"off\"\n                aria-controls=\"listbox\"\n                aria-expanded=${this.open ? 'true' : 'false'}\n                aria-haspopup=\"listbox\"\n                aria-labelledby=\"label\"\n                aria-disabled=${this.disabled ? 'true' : 'false'}\n                aria-describedby=\"help-text\"\n                role=\"combobox\"\n                tabindex=\"0\"\n                @focus=${this.handleFocus}\n                @blur=${this.handleBlur}\n\n                aria-autocomplete=\"list\"\n                aria-owns=\"listbox\"\n                @input=${this.handleInput}\n                @change=${this.handleChange}\n              />\n\n              <input\n                class=\"combobox__value-input\"\n                type=\"text\"\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                .value=${this.value}\n                tabindex=\"-1\"\n                aria-hidden=\"true\"\n                @focus=${() => this.focus()}\n                @invalid=${this.handleInvalid}\n              />\n       \n              ${hasClearIcon\n                ? html`\n                    <button\n                      part=\"clear-button\"\n                      class=\"combobox__clear\"\n                      type=\"button\"\n                      aria-label=${this.localize.term('clearEntry')}\n                      @mousedown=${this.preventLoosingFocus}\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\n                <slot name=\"suffix\" part=\"suffix\" class=\"combobox__suffix\"></slot>\n\n                <slot name=\"expand-icon\" part=\"expand-icon\" class=\"combobox__expand-icon\">\n                  <syn-icon library=\"system\" name=\"chevron-down\"></syn-icon>\n                </slot>\n            </div>\n\n            <div\n              id=\"listbox\"\n              role=\"listbox\"\n              aria-expanded=${this.open ? 'true' : 'false'}\n              aria-labelledby=\"label\"\n              part=\"listbox\"\n              class=\"combobox__listbox\"\n              tabindex=\"-1\"\n              @mousedown=${this.preventLoosingFocus}\n              @mouseup=${this.handleOptionClick}\n            >\n              <div class=\"listbox__options\" part=\"filtered-listbox\">\n                ${this.options}\n              </div>\n              <slot @slotchange=${this.handleDefaultSlotChange}></slot>      \n            </div>\n          </syn-popup>\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  /* eslint-enable @typescript-eslint/unbound-method */\n}\n\nsetDefaultAnimation('combobox.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n\nsetDefaultAnimation('combobox.hide', {\n  keyframes: [\n    { opacity: 1, scale: 1 },\n    { opacity: 0, scale: 0.9 },\n  ],\n  options: { duration: 100, easing: 'ease' },\n});\n"],
+  "mappings": "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",
   "names": ["_a", "_b", "keyframes", "options"]
 }

package/dist/chunks/{chunk.4M6OPEJO.js → chunk.GOFLVOUS.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynPrioNav
-} from "./chunk.GFXOZOKO.js";
+} from "./chunk.O7YNDGZN.js";
 // src/components/prio-nav/prio-nav.ts
 var prio_nav_default = SynPrioNav;
@@ -9,4 +9,4 @@ SynPrioNav.define("syn-prio-nav");
 export {
   prio_nav_default
 };
-//# sourceMappingURL=chunk.4M6OPEJO.js.map
+//# sourceMappingURL=chunk.GOFLVOUS.js.map

package/dist/chunks/{chunk.4WQGGNBW.js → chunk.GWRO6ZDZ.js} RENAMED Viewed

@@ -6,7 +6,7 @@ import {
 } from "./chunk.FQWBH6B3.js";
 import {
   defaultValue
-} from "./chunk.RBG37CD4.js";
+} from "./chunk.3NXKLKWH.js";
 import {
   form_control_custom_styles_default,
   form_control_styles_default
@@ -25,7 +25,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BTDXOSFP.js";
+} from "./chunk.EBE3CGKL.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -113,7 +113,7 @@ var SynTextarea = class extends SynergyElement {
       this.input.style.height = "auto";
       this.input.style.height = `${this.input.scrollHeight}px`;
     } else {
-      this.input.style.height = void 0;
+      this.input.style.height = "";
     }
   }
   handleDisabledChange() {
@@ -369,4 +369,4 @@ __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.4WQGGNBW.js.map
+//# sourceMappingURL=chunk.GWRO6ZDZ.js.map

package/dist/chunks/chunk.GWRO6ZDZ.js.map ADDED Viewed

@@ -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';\n\n/**\n * @summary Textareas collect data from the user and allow multiple lines of text.\n * @documentation https://synergy.style/components/textarea\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 */\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() 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/synergy-design-system/synergy/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.5SBPVPZO.js → chunk.HCJMC4IT.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynSwitch
-} from "./chunk.G5Y4T62U.js";
+} from "./chunk.6DCZLSTP.js";
 // src/components/switch/switch.ts
 var switch_default = SynSwitch;
@@ -9,4 +9,4 @@ SynSwitch.define("syn-switch");
 export {
   switch_default
 };
-//# sourceMappingURL=chunk.5SBPVPZO.js.map
+//# sourceMappingURL=chunk.HCJMC4IT.js.map

package/dist/chunks/{chunk.TQB37PWT.js → chunk.HEFW5DOH.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynMenuLabel
-} from "./chunk.3INFZQUC.js";
+} from "./chunk.FAM3ZB47.js";
 // src/components/menu-label/menu-label.ts
 var menu_label_default = SynMenuLabel;
@@ -9,4 +9,4 @@ SynMenuLabel.define("syn-menu-label");
 export {
   menu_label_default
 };
-//# sourceMappingURL=chunk.TQB37PWT.js.map
+//# sourceMappingURL=chunk.HEFW5DOH.js.map

package/dist/chunks/{chunk.C4ONHCR2.js → chunk.I4STIUVP.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.XKG57QNE.js";
+} from "./chunk.3T4PKXLZ.js";
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.C4ONHCR2.js.map
+//# sourceMappingURL=chunk.I4STIUVP.js.map

package/dist/chunks/{chunk.RKYYDWN5.js → chunk.I5N5WFJU.js} RENAMED Viewed

@@ -1,15 +1,15 @@
-import {
-  watch
-} from "./chunk.74IOULXM.js";
 import {
   accordion_styles_default
 } from "./chunk.WNUZ6LH4.js";
+import {
+  watch
+} from "./chunk.74IOULXM.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BTDXOSFP.js";
+} from "./chunk.EBE3CGKL.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -105,4 +105,4 @@ __decorateClass([
 export {
   SynAccordion
 };
-//# sourceMappingURL=chunk.RKYYDWN5.js.map
+//# sourceMappingURL=chunk.I5N5WFJU.js.map

package/dist/chunks/{chunk.TBGHJV63.js → chunk.ILCJZFQK.js} RENAMED Viewed

@@ -10,7 +10,7 @@ import {
 } from "./chunk.FKKJBKYL.js";
 import {
   SynButtonGroup
-} from "./chunk.WT2TGROO.js";
+} from "./chunk.XQPM6V3Y.js";
 import {
   FormControlController,
   customErrorValidityState,
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BTDXOSFP.js";
+} from "./chunk.EBE3CGKL.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -363,4 +363,4 @@ __decorateClass([
 export {
   SynRadioGroup
 };
-//# sourceMappingURL=chunk.TBGHJV63.js.map
+//# sourceMappingURL=chunk.ILCJZFQK.js.map

package/dist/chunks/{chunk.IZEADTY5.js → chunk.IZ72PTZ7.js} RENAMED Viewed

@@ -158,15 +158,6 @@ var combobox_styles_default = css`
     margin-inline-end: var(--syn-input-spacing-large);
   }
-  .combobox--large.combobox--multiple .combobox__prefix::slotted(*) {
-    margin-inline-start: var(--syn-input-spacing-large);
-  }
-  .combobox--large.combobox--multiple .combobox__inputs {
-    padding-inline-start: 0;
-    padding-block: 4px;
-  }
 /* Prefix and Suffix */
   .combobox__prefix,
   .combobox__suffix {
@@ -348,4 +339,4 @@ var combobox_styles_default = css`
 export {
   combobox_styles_default
 };
-//# sourceMappingURL=chunk.IZEADTY5.js.map
+//# sourceMappingURL=chunk.IZ72PTZ7.js.map

package/dist/chunks/{chunk.IZEADTY5.js.map → chunk.IZ72PTZ7.js.map} RENAMED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/combobox/combobox.styles.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 { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .combobox {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .combobox[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .combobox__inputs {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .combobox__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--syn-input-color);\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .combobox__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox:not(.combobox--disabled):hover .combobox__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .combobox__display-input:focus {\n    outline: none;\n  }\n\n  .combobox__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  /* Standard combobox */\n  .combobox--standard .combobox__inputs {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .combobox--standard.combobox--disabled .combobox__inputs {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    color: var(--syn-input-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n  }\n\n/* Sizes */\n  .combobox--small .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n    min-height: var(--syn-input-height-small);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n    min-height: var(--syn-input-height-medium);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n    min-height: var(--syn-input-height-large);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large.combobox--multiple .combobox__prefix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large.combobox--multiple .combobox__inputs {\n    padding-inline-start: 0;\n    padding-block: 4px;\n  }\n\n/* Prefix and Suffix */\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--syn-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--syn-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .combobox__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--syn-transition-medium) rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .combobox__listbox {\n    display: block;\n    position: relative;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    box-shadow: var(--syn-shadow-large);\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n    padding-block: var(--syn-spacing-x-small);\n    padding-inline: 0;\n    overflow: auto;\n    overscroll-behavior: none;\n\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n  }\n\n  .combobox__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .combobox__listbox ::slotted(small) {\n    display: block;\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    color: var(--syn-color-neutral-500);\n    padding-block: var(--syn-spacing-2x-small);\n    padding-inline: var(--syn-spacing-x-large);\n  }\n\n\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--small .combobox__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--large .combobox__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change combobox border on hover */\n  .combobox:not(.combobox--disabled):hover .combobox__inputs {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox__prefix,\n  .combobox__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n\n\n  /* Listbox */\n  .combobox__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
-  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "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 { css } from 'lit';\n\nexport default css`\n\t/* stylelint-disable */\n  :host {\n    display: block;\n  }\n\n  /** The popup */\n  .combobox {\n    flex: 1 1 auto;\n    display: inline-flex;\n    width: 100%;\n    position: relative;\n    vertical-align: middle;\n  }\n\n  .combobox::part(popup) {\n    z-index: var(--syn-z-index-dropdown);\n  }\n\n  .combobox[data-current-placement^='top']::part(popup) {\n    transform-origin: bottom;\n  }\n\n  .combobox[data-current-placement^='bottom']::part(popup) {\n    transform-origin: top;\n  }\n\n  /* Combobox */\n  .combobox__inputs {\n    flex: 1;\n    display: flex;\n    width: 100%;\n    min-width: 0;\n    position: relative;\n    align-items: center;\n    justify-content: start;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: pointer;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n  }\n\n  .combobox__display-input {\n    position: relative;\n    width: 100%;\n    font: inherit;\n    border: none;\n    background: none;\n    color: var(--syn-input-color);\n    cursor: inherit;\n    overflow: hidden;\n    padding: 0;\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  .combobox__display-input::placeholder {\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox:not(.combobox--disabled):hover .combobox__display-input {\n    color: var(--syn-input-color-hover);\n  }\n\n  .combobox__display-input:focus {\n    outline: none;\n  }\n\n  .combobox__value-input {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    padding: 0;\n    margin: 0;\n    opacity: 0;\n    z-index: -1;\n  }\n\n  /* Standard combobox */\n  .combobox--standard .combobox__inputs {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .combobox--standard.combobox--disabled .combobox__inputs {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    color: var(--syn-input-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n    outline: none;\n  }\n\n  .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n  }\n\n/* Sizes */\n  .combobox--small .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n    min-height: var(--syn-input-height-small);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n    min-height: var(--syn-input-height-medium);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__inputs {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n    min-height: var(--syn-input-height-large);\n    padding-block: 0;\n    padding-inline: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__clear {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n/* Prefix and Suffix */\n  .combobox__prefix,\n  .combobox__suffix {\n    flex: 0;\n    display: inline-flex;\n    align-items: center;\n    color: var(--syn-input-placeholder-color);\n  }\n\n  .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--syn-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--syn-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .combobox__clear:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .combobox__clear:focus {\n    outline: none;\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: var(--syn-transition-medium) rotate ease;\n    rotate: 0;\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--open .combobox__expand-icon {\n    rotate: -180deg;\n  }\n\n  /* Listbox */\n  .combobox__listbox {\n    display: block;\n    position: relative;\n    font-family: var(--syn-font-sans);\n    font-size: var(--syn-font-size-medium);\n    font-weight: var(--syn-font-weight-normal);\n    box-shadow: var(--syn-shadow-large);\n    background: var(--syn-panel-background-color);\n    border: solid var(--syn-panel-border-width) var(--syn-panel-border-color);\n    border-radius: var(--syn-border-radius-medium);\n    padding-block: var(--syn-spacing-x-small);\n    padding-inline: 0;\n    overflow: auto;\n    overscroll-behavior: none;\n\n    /* Make sure it adheres to the popup's auto size */\n    max-width: var(--auto-size-available-width);\n    max-height: var(--auto-size-available-height);\n  }\n\n  .combobox__listbox ::slotted(syn-divider) {\n    --spacing: var(--syn-spacing-x-small);\n  }\n\n  .combobox__listbox ::slotted(small) {\n    display: block;\n    font-size: var(--syn-font-size-small);\n    font-weight: var(--syn-font-weight-semibold);\n    color: var(--syn-color-neutral-500);\n    padding-block: var(--syn-spacing-2x-small);\n    padding-inline: var(--syn-spacing-x-large);\n  }\n\n\n  /**\n   * Invalid user data\n   */\n  :host([data-user-invalid]) .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n  }\n\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--open .combobox__inputs,\n  :host([data-user-invalid]) .combobox--standard:not(.combobox--disabled).combobox--focused .combobox__inputs {\n    border-color: var(--syn-input-border-color-focus-error);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-error);\n  }\n\n  /* Clear button */\n  .combobox__clear {\n    color: var(--syn-input-icon-icon-clearable-color);\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--small .combobox__clear {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--large .combobox__clear {\n    font-size: var(--syn-spacing-x-large);\n  }\n\n  .combobox--medium .combobox__clear {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Expand icon */\n  .combobox__expand-icon {\n    color: var(--syn-color-neutral-950);\n    font-size: var(--syn-spacing-large);\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Change combobox border on hover */\n  .combobox:not(.combobox--disabled):hover .combobox__inputs {\n    border-color: var(--syn-input-color-hover);\n  }\n\n  /* Prefix and Suffix */\n\n  /* Small */\n  .combobox--small .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-x-small);\n  }\n\n  .combobox--small .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-x-small);\n  }\n\n  .combobox--medium .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .combobox--medium .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .combobox--large .combobox__prefix::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .combobox--large .combobox__suffix::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .combobox__prefix,\n  .combobox__suffix {\n    color: var(--syn-input-help-text-color);\n  }\n\n\n\n  /* Listbox */\n  .combobox__listbox {\n    /* @todo: Should be --syn-border-radius-medium, which should be set to 0 */\n    border-radius: var(--syn-border-radius-none);\n    box-shadow: var(--syn-shadow-medium);\n  }\n\n  /**\n   * Make sure to hide the syn-divider for the first syn-optgroup\n   * Note! ::slotted does currently not work with ::part, so we\n   * opted for using a css variable here.\n   */\n  .combobox__listbox ::slotted(syn-optgroup:first-of-type) {\n    --display-divider: none;\n  }\n`;\n"],
+  "mappings": ";AAQA,SAAS,WAAW;AAEpB,IAAO,0BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/chunks/{chunk.PKX7DBI4.js → chunk.K5BSQPSN.js} RENAMED Viewed

@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BTDXOSFP.js";
+} from "./chunk.EBE3CGKL.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -55,4 +55,4 @@ __decorateClass([
 export {
   SynCard
 };
-//# sourceMappingURL=chunk.PKX7DBI4.js.map
+//# sourceMappingURL=chunk.K5BSQPSN.js.map

package/dist/chunks/{chunk.6BMVIJL3.js → chunk.K5PXELDD.js} RENAMED Viewed

@@ -6,13 +6,13 @@ import {
 } from "./chunk.DZ7YIR5N.js";
 import {
   SynIcon
-} from "./chunk.O6GNDOJS.js";
+} from "./chunk.UAK6WG4U.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.BTDXOSFP.js";
+} from "./chunk.EBE3CGKL.js";
 import {
   __decorateClass
 } from "./chunk.2GFK6XTO.js";
@@ -138,4 +138,4 @@ __decorateClass([
 export {
   SynIconButton
 };
-//# sourceMappingURL=chunk.6BMVIJL3.js.map
+//# sourceMappingURL=chunk.K5PXELDD.js.map

package/dist/chunks/{chunk.XZFMTDSR.js → chunk.KX3ATDPK.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynNavItem
-} from "./chunk.UOCB6QQW.js";
+} from "./chunk.NCQXRLJC.js";
 // src/components/nav-item/nav-item.ts
 var nav_item_default = SynNavItem;
@@ -9,4 +9,4 @@ SynNavItem.define("syn-nav-item");
 export {
   nav_item_default
 };
-//# sourceMappingURL=chunk.XZFMTDSR.js.map
+//# sourceMappingURL=chunk.KX3ATDPK.js.map

package/dist/chunks/{chunk.RTEU272Y.js → chunk.LNBMB3DI.js} RENAMED Viewed

@@ -1,6 +1,6 @@
 import {
   SynSideNav
-} from "./chunk.XFDPUTFZ.js";
+} from "./chunk.PFCFF54R.js";
 // src/components/side-nav/side-nav.ts
 var side_nav_default = SynSideNav;
@@ -9,4 +9,4 @@ SynSideNav.define("syn-side-nav");
 export {
   side_nav_default
 };
-//# sourceMappingURL=chunk.RTEU272Y.js.map
+//# sourceMappingURL=chunk.LNBMB3DI.js.map