@synergy-design-system/components 2.77.1 → 3.1.0

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/select/select.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 { animateTo, stopAnimations } from '../../internal/animate.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport { html } from 'lit';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport { scrollIntoView } from '../../internal/scroll.js';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.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 SynTag from '../tag/tag.component.js';\nimport styles from './select.styles.js';\nimport customStyles from './select.custom.styles.js';\nimport type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport type { SynRemoveEvent } from '../../events/syn-remove.js';\nimport type SynOption from '../option/option.component.js';\nimport { compareValues, isAllowedValue } from './utility.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Selects allow you to choose items from a menu of predefined options.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n * @dependency syn-popup\n * @dependency syn-tag\n *\n * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.\n * @slot label - The input's label. Alternatively, you can use the `label` attribute.\n * @slot prefix - Used to prepend a presentational icon or similar element to the 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. Rotates on open and close.\n * @slot help-text - Text that describes how to use the input. 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 select's menu opens.\n * @event syn-after-show - Emitted after the select's menu opens and all animations are complete.\n * @event syn-hide - Emitted when the select's menu closes.\n * @event syn-after-hide - Emitted after the select's menu closes and all animations are complete.\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 select's wrapper.\n * @csspart form-control-help-text - The help text's wrapper.\n * @csspart combobox - The container the wraps the prefix, suffix, 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, an `<input>` element.\n * @csspart listbox - The listbox container where options are slotted.\n * @csspart tags - The container that houses option tags when `multiselect` is used.\n * @csspart tag - The individual tags that represent each multiselect option.\n * @csspart tag__base - The tag's base part.\n * @csspart tag__content - The tag's content part.\n * @csspart tag__remove-button - The tag's remove button.\n * @csspart tag__remove-button__base - The tag's remove button base part.\n * @csspart clear-button - The clear button.\n * @csspart expand-icon - The container that wraps the expand icon.\n * @csspart popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.\n */\n@enableDefaultSettings('SynSelect')\nexport default class SynSelect extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = {\n    'syn-icon': SynIcon,\n    'syn-popup': SynPopup,\n    'syn-tag': SynTag\n  };\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 readonly localize = new LocalizeController(this);\n  private typeToSelectString = '';\n  private typeToSelectTimeout: number;\n  private closeWatcher: CloseWatcher | null;\n  private resizeObserver: ResizeObserver;\n  private isUserInput: boolean = false;\n\n  @query('.select') popup: SynPopup;\n  @query('.select__combobox') combobox: HTMLSlotElement;\n  @query('.select__display-input') displayInput: HTMLInputElement;\n  @query('.select__value-input') valueInput: HTMLInputElement;\n  @query('.select__listbox') listbox: HTMLSlotElement;\n  @query('.select__tags') tagContainer: HTMLDivElement;\n\n  @state() private hasFocus = false;\n  @state() displayLabel = '';\n  @state() currentOption: SynOption;\n  @state() selectedOptions: SynOption[] = [];\n  @state() private valueHasChanged: boolean = false;\n\n  /**\n   * The delimiter to use when setting the value when `multiple` is enabled.\n   * The default is a space, but you can set it to a comma or other character.\n   * @example <syn-select delimiter=\"|\" value=\"option-1|option-2\"></syn-select>\n   */\n  @property() delimiter = ' ';\n\n  /** The name of the select, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  private _value: string | number | Array<string | number> = '';\n\n  get value() {\n    return this._value;\n  }\n\n  /**\n   * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the\n   * value attribute will be a space-delimited list of values based on the options selected, and the value property will\n   * be an array. **For this reason, values must not contain spaces.**\n   */\n  @state()\n  set value(val: string | number | Array<string | number>) {\n    if (this.multiple) {\n      if (!Array.isArray(val)) {\n        val = typeof val === 'string' ? val.split(this.delimiter) : [val].filter(isAllowedValue);\n      }\n    } else {\n      val = Array.isArray(val) ? val.join(this.delimiter) : val;\n    }\n\n    if (compareValues(this._value, val)) {\n      return;\n    }\n\n    this.valueHasChanged = true;\n    this._value = val;\n  }\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @property({ attribute: 'value' }) defaultValue: string | number | Array<string | number> = '';\n\n  /** The select's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Placeholder text to show as a hint when the select is empty. */\n  @property() placeholder = '';\n\n  /** Allows more than one option to be selected. */\n  @property({ type: Boolean, reflect: true }) multiple = false;\n\n  /**\n   * The maximum number of selected options to show when `multiple` is true. After the maximum, \"+n\" will be shown to\n   * indicate the number of additional items that are selected. Set to 0 to remove the limit.\n   */\n  @property({ attribute: 'max-options-visible', type: Number }) maxOptionsVisible = 3;\n\n  /** Disables the select control. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Adds a clear button when the select is not empty. */\n  @property({ type: Boolean }) clearable = false;\n\n  /**\n   * Indicates whether or not the select is open. You can toggle this attribute to show and hide the menu, or you can\n   * use the `show()` and `hide()` methods and this attribute will reflect the select's open state.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /** The select's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /**\n   * The preferred placement of the select's menu. Note that the actual placement may vary as needed to keep the listbox\n   * inside of the viewport.\n   */\n  @property({ reflect: true }) placement: 'top' | 'bottom' = 'bottom';\n\n  /** The select'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. 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  /** The select's required attribute. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /**\n   * A function that customizes the tags to be rendered when multiple=true. The first argument is the option, the second\n   * is the current tag's index.  The function should return either a Lit TemplateResult or a string containing trusted HTML of the symbol to render at\n   * the specified value.\n   */\n  @property() getTag: (option: SynOption, index: number) => TemplateResult | string | HTMLElement = option => {\n    return html`\n      <syn-tag\n        part=\"tag\"\n        exportparts=\"\n              base:tag__base,\n              content:tag__content,\n              remove-button:tag__remove-button,\n              remove-button__base:tag__remove-button__base\n            \"\n        size=${this.size}\n        removable\n        @syn-remove=${(event: SynRemoveEvent) => this.handleTagRemove(event, option)}\n      >\n        ${option.getTextLabel()}\n      </syn-tag>\n    `;\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  \n  private enableResizeObserver() {\n    if (this.multiple) {\n      this.resizeObserver = new ResizeObserver(entries => {\n        const entry = entries.at(0)!;\n        this.tagContainer.style.setProperty('--syn-select-tag-max-width', `${entry.contentRect.width}px`);\n      });\n      this.resizeObserver.observe(this.tagContainer);\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    setTimeout(() => {\n      this.handleDefaultSlotChange();\n    });\n\n    // Because this is a form control, it shouldn't be opened initially\n    this.open = false;\n  }\n\n  \n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\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/shoelace-style/shoelace/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, 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          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.displayInput.setSelectionRange(0, 0);\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 select\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      this.hide();\n    }\n  };\n\n  private handleDocumentKeyDown = (event: KeyboardEvent) => {\n    const target = event.target as HTMLElement;\n    const isClearButton = target.closest('.select__clear') !== null;\n    const isIconButton = target.closest('syn-icon-button') !== null;\n\n    // Ignore presses when the target is an icon button (e.g. the remove button in <syn-tag>)\n    if (isClearButton || isIconButton) {\n      return;\n    }\n\n    // Close when pressing escape\n    if (event.key === 'Escape' && this.open && !this.closeWatcher) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.hide();\n      this.displayInput.focus({ preventScroll: true });\n    }\n\n    // Handle enter and space. When pressing space, we allow for type to select behaviors so if there's anything in the\n    // buffer we _don't_ close it.\n    if (event.key === 'Enter' || (event.key === ' ' && this.typeToSelectString === '')) {\n      event.preventDefault();\n      event.stopImmediatePropagation();\n\n      // If it's not open, open it\n      if (!this.open) {\n        this.show();\n        return;\n      }\n\n      // If it is open, update the value based on the current selection and close it\n      if (this.currentOption && !this.currentOption.disabled) {\n        this.valueHasChanged = true;\n        this.isUserInput = true;\n        if (this.multiple) {\n          this.toggleOptionSelection(this.currentOption);\n        } else {\n          this.setSelectedOptions(this.currentOption);\n        }\n\n        // Emit after updating\n        this.updateComplete.then(() => {\n          this.emit('syn-input');\n          this.emit('syn-change');\n        });\n\n        if (!this.multiple) {\n          this.hide();\n          this.displayInput.focus({ preventScroll: true });\n        }\n      }\n\n      return;\n    }\n\n    // Navigate options\n    if (['ArrowUp', 'ArrowDown', 'Home', 'End'].includes(event.key)) {\n      const allOptions = this.getAllOptions();\n      const currentIndex = allOptions.indexOf(this.currentOption);\n      let newIndex = Math.max(0, currentIndex);\n\n      // Prevent scrolling\n      event.preventDefault();\n\n      // Open it\n      if (!this.open) {\n        this.show();\n\n        // If an option is already selected, stop here because we want that one to remain highlighted when the listbox\n        // opens for the first time\n        if (this.currentOption) {\n          return;\n        }\n      }\n\n      if (event.key === 'ArrowDown') {\n        newIndex = currentIndex + 1;\n        if (newIndex > allOptions.length - 1) newIndex = 0;\n      } else if (event.key === 'ArrowUp') {\n        newIndex = currentIndex - 1;\n        if (newIndex < 0) newIndex = allOptions.length - 1;\n      } else if (event.key === 'Home') {\n        newIndex = 0;\n      } else if (event.key === 'End') {\n        newIndex = allOptions.length - 1;\n      }\n\n      this.setCurrentOption(allOptions[newIndex]);\n    }\n\n    // All other \"printable\" keys trigger type to select\n    if ((event.key && event.key.length === 1) || event.key === 'Backspace') {\n      const allOptions = this.getAllOptions();\n\n      // Don't block important key combos like CMD+R\n      if (event.metaKey || event.ctrlKey || event.altKey) {\n        return;\n      }\n\n      // Open, unless the key that triggered is backspace\n      if (!this.open) {\n        if (event.key === 'Backspace') {\n          return;\n        }\n\n        this.show();\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n\n      clearTimeout(this.typeToSelectTimeout);\n      this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);\n\n      if (event.key === 'Backspace') {\n        this.typeToSelectString = this.typeToSelectString.slice(0, -1);\n      } else {\n        this.typeToSelectString += event.key.toLowerCase();\n      }\n\n      for (const option of allOptions) {\n        const label = option.getTextLabel().toLowerCase();\n\n        if (label.startsWith(this.typeToSelectString)) {\n          this.setCurrentOption(option);\n          break;\n        }\n      }\n    }\n  };\n\n  private handleDocumentMouseDown = (event: MouseEvent) => {\n    // Close when clicking outside of the select\n    const path = event.composedPath();\n    if (this && !path.includes(this)) {\n      this.hide();\n    }\n  };\n\n  private handleLabelClick() {\n    this.displayInput.focus();\n  }\n\n  private handleComboboxMouseDown(event: MouseEvent) {\n    const path = event.composedPath();\n    const isIconButton = path.some(el => el instanceof Element && el.tagName.toLowerCase() === 'syn-icon-button');\n\n    // Ignore disabled controls and clicks on tags (remove buttons)\n    if (this.disabled || isIconButton) {\n      return;\n    }\n\n    event.preventDefault();\n    this.displayInput.focus({ preventScroll: true });\n    this.open = !this.open;\n  }\n\n  private handleComboboxKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Tab') {\n      return;\n    }\n\n    event.stopPropagation();\n    this.handleDocumentKeyDown(event);\n  }\n\n  private handleClearClick(event: MouseEvent) {\n    event.stopPropagation();\n\n    this.valueHasChanged = true;\n\n    if (this.value !== '') {\n      this.setSelectedOptions([]);\n      this.displayInput.focus({ preventScroll: true });\n\n      // Emit after update\n      this.updateComplete.then(() => {\n        this.emit('syn-clear');\n        this.emit('syn-input');\n        this.emit('syn-change');\n      });\n    }\n  }\n\n  private handleClearMouseDown(event: MouseEvent) {\n    // Don't lose focus or propagate events when clicking the clear button\n    event.stopPropagation();\n    event.preventDefault();\n  }\n\n  private handleOptionClick(event: MouseEvent) {\n    const target = event.target as HTMLElement;\n    const option = target.closest('syn-option');\n    const oldValue = this.value;\n\n    if (option && !option.disabled) {\n      this.valueHasChanged = true;\n      this.isUserInput = true;\n      if (this.multiple) {\n        this.toggleOptionSelection(option);\n      } else {\n        this.setSelectedOptions(option);\n      }\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      if (!this.multiple) {\n        this.hide();\n        this.displayInput.focus({ preventScroll: true });\n      }\n    }\n  }\n\n  /* @internal - used by options to update labels */\n  public handleDefaultSlotChange() {\n    if (!customElements.get('syn-option')) {\n      customElements.whenDefined('syn-option').then(() => this.handleDefaultSlotChange());\n    }\n\n    const allOptions = this.getAllOptions();\n    const val = this.valueHasChanged ? this.value : this.defaultValue;\n\n    this.handleDelimiterChange();\n    const value = Array.isArray(val) ? val :  typeof val === 'string' ? val.split(this.delimiter) : [val].filter(isAllowedValue);\n    const values: Array<string | number> = [];\n\n    // Check for duplicate values in menu items\n    allOptions.forEach(option => values.push(option.value));\n\n    // Select only the options that match the new value\n    const valueString = value.map(String);\n    const allSelectedOptions = allOptions.filter(\n      el => valueString.includes(String(el.value)),\n    );\n    this.setSelectedOptions(allSelectedOptions);\n      \n  }\n\n  private handleTagRemove(event: SynRemoveEvent, option: SynOption) {\n    event.stopPropagation();\n\n    this.valueHasChanged = true;\n\n    if (!this.disabled) {\n      this.toggleOptionSelection(option, false);\n\n      // Emit after updating\n      this.updateComplete.then(() => {\n        this.emit('syn-input');\n        this.emit('syn-change');\n      });\n    }\n  }\n\n  // Gets an array of all <syn-option> elements\n  private getAllOptions() {\n    return [...this.querySelectorAll<SynOption>('syn-option')];\n  }\n\n  // Gets the first <syn-option> element\n  private getFirstOption() {\n    return this.querySelector<SynOption>('syn-option');\n  }\n\n  // Sets the current option, which is the option the user is currently interacting with (e.g. via keyboard). Only one\n  // option may be \"current\" at a time.\n  private setCurrentOption(option: SynOption | null) {\n    const allOptions = this.getAllOptions();\n\n    // Clear selection\n    allOptions.forEach(el => {\n      el.current = false;\n      el.tabIndex = -1;\n    });\n\n    // Select the target option\n    if (option) {\n      this.currentOption = option;\n      option.current = true;\n      option.tabIndex = 0;\n      option.focus();\n    }\n  }\n\n  // Sets the selected option(s)\n  private setSelectedOptions(option: SynOption | SynOption[]) {\n    const allOptions = this.getAllOptions();\n    const newSelectedOptions = Array.isArray(option) ? option : [option];\n\n    // Clear existing selection\n    allOptions.forEach(el => (el.selected = false));\n\n    // Set the new selection\n    if (newSelectedOptions.length) {\n      newSelectedOptions.forEach(el => (el.selected = true));\n    }\n\n    // Update selection, value, and display label\n    this.selectionChanged();\n  }\n\n  // Toggles an option's selected state\n  private toggleOptionSelection(option: SynOption, force?: boolean) {\n    if (force === true || force === false) {\n      option.selected = force;\n    } else {\n      option.selected = !option.selected;\n    }\n\n    this.selectionChanged();\n  }\n\n  // This method must be called whenever the selection changes. It will update the selected options cache, the current\n  // value, and the display value\n  private selectionChanged() {\n    const options = this.getAllOptions();\n    // Update selected options cache\n    this.selectedOptions = options.filter(el => el.selected);\n\n    // Keep a reference to the previous `valueHasChanged`. Changes made here don't count has changing the value.\n    const cachedValueHasChanged = this.valueHasChanged;\n\n    // Update the value and display label\n    if (this.multiple) {\n      this.value = this.selectedOptions.map(el => el.value);\n\n      if (this.placeholder && this.value.length === 0) {\n        // When no items are selected, keep the value empty so the placeholder shows\n        this.displayLabel = '';\n      } else {\n        this.displayLabel = this.localize.term('numOptionsSelected', this.selectedOptions.length);\n      }\n    } else {\n      const selectedOption = this.selectedOptions[0];\n      this.value = selectedOption?.value ?? '';\n      this.displayLabel = selectedOption?.getTextLabel?.() ?? '';\n    }\n    this.valueHasChanged = cachedValueHasChanged;\n\n    // Update validity\n    this.updateComplete.then(() => {\n      this.isUserInput = false;\n      this.formControlController.updateValidity();\n    });\n  }\n\n  protected get tags() {\n    return this.selectedOptions.map((option, index) => {\n      if (index < this.maxOptionsVisible || this.maxOptionsVisible <= 0) {\n        const tag = this.getTag(option, index);\n        // Wrap so we can handle the remove\n        return html`<div @syn-remove=${(e: SynRemoveEvent) => this.handleTagRemove(e, option)}>\n          ${typeof tag === 'string' ? unsafeHTML(tag) : tag}\n        </div>`;\n      } else if (index === this.maxOptionsVisible) {\n        // Hit tag limit\n        return html`<syn-tag size=${this.size}>+${this.selectedOptions.length - index}</syn-tag>`;\n      }\n      return html``;\n    });\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  @watch('delimiter')\n  handleDelimiterChange() {\n    this.getAllOptions().forEach(option => {\n      option.delimiter = this.delimiter;\n    });\n  }\n\n  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Close the listbox when the control is disabled\n    if (this.disabled) {\n      this.open = false;\n      this.handleOpenChange();\n    }\n  }\n\n  \n  protected updated(changedProperties: PropertyValues<this>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('multiple')) {\n      if (!this.multiple) {\n        this.resizeObserver?.disconnect();\n      } else {\n        this.enableResizeObserver();\n      }\n    }\n  }\n      \n\nprotected override willUpdate(changedProperties: PropertyValues) {\n    super.willUpdate(changedProperties);\n\n    if(changedProperties.has('value') && !this.defaultValue && this.value  && !this.isUserInput) {\n      // Values set by property binding (e.g. Angular, especially with async bindings such as Observables/BehaviorSubjects)\n      // have led to some malfunctions (e.g. form reset not working, dynamic reloading of options, etc.). To fix this,\n      // the defaultValue must be set via property binding. However, this must NOT happen during user input,\n      // as otherwise user interaction will lead to a new defaultValue.\n      this.defaultValue = this.value\n      this.valueHasChanged = false;\n    }\n  }\n\n  attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null) {\n    super.attributeChangedCallback(name, oldVal, newVal);\n\n    /** This is a backwards compatibility call. In a new major version we should make a clean separation between \"value\" the attribute mapping to \"defaultValue\" property and \"value\" the property not reflecting. */\n    if (name === 'value') {\n      const cachedValueHasChanged = this.valueHasChanged;\n      this.value = this.defaultValue;\n\n      // Set it back to false since this isn't an interaction.\n      this.valueHasChanged = cachedValueHasChanged;\n    }\n  }\n\n  @watch(['defaultValue', 'value', 'delimiter'], { waitUntilFirstUpdate: true })\n  handleValueChange() {\n    if (!this.valueHasChanged) {\n      const cachedValueHasChanged = this.valueHasChanged;\n      this.value = this.defaultValue;\n\n      // Set it back to false since this isn't an interaction.\n      this.valueHasChanged = cachedValueHasChanged;\n    }\n\n    const allOptions = this.getAllOptions();\n    const value = Array.isArray(this.value) ? this.value : [this.value];\n\n    // Select only the options that match the new value\n    const valueString = value.map(String);\n    const allSelectedOptions = allOptions.filter(\n      el => valueString.includes(String(el.value)),\n    );\n    this.setSelectedOptions(allSelectedOptions);\n      \n  }\n\n  @watch('open', { waitUntilFirstUpdate: true })\n  async handleOpenChange() {\n    if (this.open && !this.disabled) {\n      // Reset the current option\n      this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());\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      // Select the appropriate option based on value after the listbox opens\n      requestAnimationFrame(() => {\n        this.setCurrentOption(this.currentOption);\n      });\n\n      const { keyframes, options } = getAnimation(this, 'select.show', { dir: this.localize.dir() });\n      await animateTo(this.popup.popup, keyframes, options);\n\n      // Make sure the current option is scrolled into view (required for Safari)\n      if (this.currentOption) {\n        scrollIntoView(this.currentOption, this.listbox, 'vertical', 'auto');\n      }\n\n      this.emit('syn-after-show');\n    } else {\n      // Hide\n      this.emit('syn-hide');\n      this.removeOpenListeners();\n\n      await stopAnimations(this);\n      const { keyframes, options } = getAnimation(this, 'select.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. */\n  async show() {\n    if (this.open || this.disabled) {\n      this.open = false;\n      return undefined;\n    }\n\n    this.open = true;\n    return waitForEvent(this, 'syn-after-show');\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  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */\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  render() {\n    const hasValue = isAllowedValue(this.value);\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 && hasValue;\n    const isPlaceholderVisible = this.placeholder && this.value && !hasValue;\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          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              select: true,\n              'select--standard': true,\n              'select--open': this.open,\n              'select--disabled': this.disabled,\n              'select--multiple': this.multiple,\n              'select--focused': this.hasFocus,\n              'select--placeholder-visible': isPlaceholderVisible,\n              'select--top': this.placement === 'top',\n              'select--bottom': this.placement === 'bottom',\n              'select--small': this.size === 'small',\n              'select--medium': this.size === 'medium',\n              'select--large': this.size === 'large'\n            })}\n            placement=${this.placement + '-start'}\n            flip\n            shift\n            sync=\"width\"\n            auto-size=\"vertical\"\n            auto-size-padding=\"10\"\n            exportparts=\"popup\"\n          >\n            <div\n              part=\"combobox\"\n              class=\"select__combobox\"\n              slot=\"anchor\"\n              @keydown=${this.handleComboboxKeyDown}\n              @mousedown=${this.handleComboboxMouseDown}\n            >\n              <slot part=\"prefix\" name=\"prefix\" class=\"select__prefix\"></slot>\n\n              <input\n                part=\"display-input\"\n                class=\"select__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                readonly\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\n              ${this.multiple ? html`<div part=\"tags\" class=\"select__tags\">${this.tags}</div>` : ''}\n\n              <input\n                class=\"select__value-input\"\n                type=\"text\"\n                ?disabled=${this.disabled}\n                ?required=${this.required}\n                .value=${Array.isArray(this.value) ? this.value.join(', ') : this.value?.toString()}\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=\"select__clear\"\n                      type=\"button\"\n                      aria-label=${this.localize.term('clearEntry')}\n                      @mousedown=${this.handleClearMouseDown}\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=\"select__suffix\"></slot>\n\n              <slot name=\"expand-icon\" part=\"expand-icon\" class=\"select__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-multiselectable=${this.multiple ? 'true' : 'false'}\n              aria-labelledby=\"label\"\n              part=\"listbox\"\n              class=\"select__listbox\"\n              tabindex=\"-1\"\n              @mouseup=${this.handleOptionClick}\n              @slotchange=${this.handleDefaultSlotChange}\n            >\n              <slot></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}\n\nsetDefaultAnimation('select.show', {\n  keyframes: [\n    { opacity: 0, scale: 0.9 },\n    { opacity: 1, scale: 1 }\n  ],\n  options: { duration: 100, easing: 'ease' }\n});\n\nsetDefaultAnimation('select.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": []
+}

package/dist/chunks/{chunk.K3RFNN2T.js → chunk.BIRYJHTO.js}

@@ -1,6 +1,6 @@
 import {
   SynRange
-} from "./chunk.KAKCOA6W.js";
+} from "./chunk.KY52MMTX.js";
 
 // src/components/range/range.ts
 var range_default = SynRange;
@@ -9,4 +9,4 @@ SynRange.define("syn-range");
 export {
   range_default
 };
-//# sourceMappingURL=chunk.K3RFNN2T.js.map
+//# sourceMappingURL=chunk.BIRYJHTO.js.map

package/dist/chunks/{chunk.NNAU5QBN.js → chunk.BIXA6XPE.js}

@@ -1,6 +1,6 @@
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 
 // src/components/validate/utility.ts
 var WhitelistedSynergyFormEventNames = [
@@ -44,4 +44,4 @@ export {
   getEventNameForElement,
   alertSizeForInput
 };
-//# sourceMappingURL=chunk.NNAU5QBN.js.map
+//# sourceMappingURL=chunk.BIXA6XPE.js.map

package/dist/chunks/{chunk.UW4IKEIE.js → chunk.BJIZS3FU.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -78,4 +78,4 @@ __decorateClass([
 export {
   SynResizeObserver
 };
-//# sourceMappingURL=chunk.UW4IKEIE.js.map
+//# sourceMappingURL=chunk.BJIZS3FU.js.map

package/dist/chunks/{chunk.S74CFZ4Z.js → chunk.BL5JW7YS.js}

@@ -36,18 +36,18 @@ var option_custom_styles_default = css`
   }
 
   .option:not(.option--current) {
-    color: var(--syn-option-color, var(--syn-typography-color-text));
+    color: var(--syn-option-color);
   }
 
   .option--current,
   .option--current.option--hover:not(.option--disabled) {
-    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-active);
+    color: var(--syn-option-color-active);
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   /** #429: Use token for opacity */
@@ -56,8 +56,8 @@ var option_custom_styles_default = css`
   }
 
   .option--current.option--disabled {
-    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));
-    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));
+    background-color: var(--syn-option-background-color-hover);
+    color: var(--syn-option-color-hover);
   }
 
   .option__label {
@@ -65,7 +65,7 @@ var option_custom_styles_default = css`
   }
 
   .option__check {
-    color: var(--syn-option-check-color, var(--syn-color-primary-600));
+    color: var(--syn-option-check-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
@@ -75,11 +75,11 @@ var option_custom_styles_default = css`
 
   /* Invert the check mark when keyboard navigation is used */
   .option--current .option__check {
-    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-active);
   }
 
   .option--hover:not(.option--current) .option__check {
-    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));
+    color: var(--syn-option-check-color-hover);
   }
 
   /* Use larger spacing between icons and content */
@@ -94,18 +94,18 @@ var option_custom_styles_default = css`
   /* Set correct icon size when someone uses syn-icon in the slots */
   .option__prefix::slotted(syn-icon),
   .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color, var(--syn-typography-color-text));
+    color: var(--syn-option-icon-color);
     font-size: var(--option-icon-size, var(--syn-spacing-large));
   }
 
   .option--hover .option__prefix::slotted(syn-icon),
   .option--hover .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-hover);
   }
 
   .option--current .option__prefix::slotted(syn-icon),
   .option--current .option__suffix::slotted(syn-icon) {
-    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));
+    color: var(--syn-option-icon-color-active);
   }
 
   /* This is needed for the highlight styling of the options in syn-combobox */
@@ -119,4 +119,4 @@ var option_custom_styles_default = css`
 export {
   option_custom_styles_default
 };
-//# sourceMappingURL=chunk.S74CFZ4Z.js.map
+//# sourceMappingURL=chunk.BL5JW7YS.js.map

package/dist/chunks/{chunk.S74CFZ4Z.js.map → chunk.BL5JW7YS.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/components/option/option.custom.styles.ts"],
-  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color, var(--syn-typography-color-text));\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-active, var(--syn-typography-color-text-inverted));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover, var(--syn-color-neutral-1000));\n    color: var(--syn-option-color-hover, var(--syn-typography-color-text-inverted));\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color, var(--syn-color-primary-600));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active, var(--syn-color-neutral-0));\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover, var(--syn-color-neutral-0));\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color, var(--syn-typography-color-text));\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover, var(--syn-color-neutral-800));\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active, var(--syn-color-neutral-800));\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /**\n   * The syn-option is now able to adjust its height from a parent item\n   * This is done by exposing multiple css variables to the outside:\n   *\n   * --option-min-height (defaults to 48px) The minimal height of an element\n   * --option-padding (defaults to var(--syn-spacing-small) var(--syn-spacing-medium)) The padding to use\n   * --option-font-size (defaults to var(--syn-font-size-medium)) The font size to use\n   * --option-icon-size (defaults to var(--syn-spacing-large)) The size of the checkmark\n   * \n   * See below for usage of these variables\n   */\n  .option {\n    /*\n     * #988: Brand2025 defines a small gap between options\n     * and rounded corners. We achieve that using an border\n     * that simulates the gap using the menu background color.\n     */\n    border: solid var(--syn-panel-background-color);\n\n    /**\n     * Border Radius needs to be increased to cover the outline\n     * Note this also needs to take the following into account:\n     * - 2018 does not have a focus ring, so the border radius is as small as the border, essentially negating it to \"0\"\n     * - 2025 needs to adapt with another pixel to make it match the rounding of the focus ring\n     */\n    border-radius: calc(calc(var(--syn-focus-ring-border-radius) * 2) + var(--option-inset-border-vertical) - 1px);\n    border-width: var(--option-inset-border-horizontal) var(--option-inset-border-vertical);\n    font-size: var(--option-font-size, var(--syn-font-size-medium));\n\n    /* Height is dependent on line-height of .option__label, which does not fit completely to layout */\n    min-height: var(--option-min-height, var(--syn-input-height-medium));\n    padding: 0 calc(var(--option-padding) - var(--option-inset-border-vertical));\n  }\n\n  .option:not(.option--current) {\n    color: var(--syn-option-color);\n  }\n\n  .option--current,\n  .option--current.option--hover:not(.option--disabled) {\n    background-color: var(--syn-option-background-color-active);\n    color: var(--syn-option-color-active);\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  /** #429: Use token for opacity */\n  .option--disabled {\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  .option--current.option--disabled {\n    background-color: var(--syn-option-background-color-hover);\n    color: var(--syn-option-color-hover);\n  }\n\n  .option__label {\n    line-height: var(--syn-line-height-normal);\n  }\n\n  .option__check {\n    color: var(--syn-option-check-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option .option__check {\n    padding-inline-end: var(--syn-spacing-small);\n  }\n\n  /* Invert the check mark when keyboard navigation is used */\n  .option--current .option__check {\n    color: var(--syn-option-check-color-active);\n  }\n\n  .option--hover:not(.option--current) .option__check {\n    color: var(--syn-option-check-color-hover);\n  }\n\n  /* Use larger spacing between icons and content */\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--syn-spacing-small);\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  /* Set correct icon size when someone uses syn-icon in the slots */\n  .option__prefix::slotted(syn-icon),\n  .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color);\n    font-size: var(--option-icon-size, var(--syn-spacing-large));\n  }\n\n  .option--hover .option__prefix::slotted(syn-icon),\n  .option--hover .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-hover);\n  }\n\n  .option--current .option__prefix::slotted(syn-icon),\n  .option--current .option__suffix::slotted(syn-icon) {\n    color: var(--syn-option-icon-color-active);\n  }\n\n  /* This is needed for the highlight styling of the options in syn-combobox */\n  .option__label::slotted(.syn-highlight-style) {\n    background-color: transparent;\n    color: unset;\n    font: var(--syn-body-medium-bold);\n  }\n`;\n"],
   "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,+BAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.O5XZDHTS.js → chunk.BMHWOQRC.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.64KVEIIA.js";
+} from "./chunk.P3W7SDQW.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -30,7 +30,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -50,7 +50,6 @@ var SynTooltip = class extends SynergyElement {
     this.open = false;
     this.skidding = 0;
     this.trigger = "hover focus";
-    this.hoist = false;
     this.handleBlur = () => {
       if (this.hasTrigger("focus")) {
         this.hide();
@@ -196,7 +195,6 @@ var SynTooltip = class extends SynergyElement {
         placement=${this.placement}
         distance=${this.distance}
         skidding=${this.skidding}
-        strategy=${this.hoist ? "fixed" : "absolute"}
         flip
         shift
         arrow
@@ -245,14 +243,11 @@ __decorateClass([
 __decorateClass([
   property()
 ], SynTooltip.prototype, "trigger", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SynTooltip.prototype, "hoist", 2);
 __decorateClass([
   watch("open", { waitUntilFirstUpdate: true })
 ], SynTooltip.prototype, "handleOpenChange", 1);
 __decorateClass([
-  watch(["content", "distance", "hoist", "placement", "skidding"])
+  watch(["content", "distance", "placement", "skidding"])
 ], SynTooltip.prototype, "handleOptionsChange", 1);
 __decorateClass([
   watch("disabled")
@@ -275,4 +270,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.O5XZDHTS.js.map
+//# sourceMappingURL=chunk.BMHWOQRC.js.map

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

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

package/dist/chunks/{chunk.77CVXMWD.js → chunk.BVV2XKW3.js}

@@ -2,7 +2,7 @@
 import { css } from "lit";
 var breadcrumb_item_custom_styles_default = css`
   .breadcrumb-item {
-    color: var(--syn-breadcrumb-color, var(--syn-color-neutral-500));
+    color: var(--syn-breadcrumb-color);
     font-size: var(--syn-font-size-x-small);
     font-weight: var(--syn-font-weight-semibold);
   }
@@ -80,4 +80,4 @@ var breadcrumb_item_custom_styles_default = css`
 export {
   breadcrumb_item_custom_styles_default
 };
-//# sourceMappingURL=chunk.77CVXMWD.js.map
+//# sourceMappingURL=chunk.BVV2XKW3.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/breadcrumb-item/breadcrumb-item.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  .breadcrumb-item {\n    color: var(--syn-breadcrumb-color);\n    font-size: var(--syn-font-size-x-small);\n    font-weight: var(--syn-font-weight-semibold);\n  }\n\n  /**\n   * Make sure to remove the border radius.\n   * Without this, focus will be rounded\n   */\n  .breadcrumb-item__label {\n    border-radius: var(--syn-border-radius-none);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item {\n    font-weight: var(--syn-font-weight-normal);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label {\n    color: var(--syn-typography-color-text);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label:hover {\n    color: var(--syn-color-primary-600);\n  }\n\n  :host(:not(:last-of-type)) .breadcrumb-item__label:active {\n    color: var(--syn-color-primary-950);\n  }\n\n  .breadcrumb-item--has-prefix .breadcrumb-item__prefix {\n    margin-inline-end: var(--syn-spacing-2x-small);\n  }\n\n  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    margin-inline-start: var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Adjust color and font size to match Synergy's typography.\n   */\n  .breadcrumb-item--has-prefix .breadcrumb-item__prefix,\n  .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    color: var(--syn-typography-color-text);\n    font-size: var(--syn-spacing-medium);\n  }\n\n  /**\n   * Make sure the color of the last item's prefix and suffix matches the text.\n   */\n  :host(:last-of-type) .breadcrumb-item--has-prefix .breadcrumb-item__prefix,\n  :host(:last-of-type) .breadcrumb-item--has-suffix .breadcrumb-item__suffix {\n    color: inherit;\n  }\n\n  .breadcrumb-item__separator {\n    font-size: var(--syn-spacing-medium);\n    margin: 0 var(--syn-spacing-x-small) 0 var(--syn-spacing-2x-small);\n  }\n\n  /**\n   * Make sure the direction of the chevron matches the direction of the text.\n   */\n  .breadcrumb-item__separator ::slotted(syn-icon.ltr) {\n    rotate: -90deg;\n  }\n\n  .breadcrumb-item__separator ::slotted(syn-icon.rtl) {\n    rotate: 90deg;\n  }\n\n  .breadcrumb-item__label--drop-down {\n    display: flex;\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,wCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.PYW5SSBY.js → chunk.CBQRADQA.js}

@@ -1,6 +1,6 @@
 import {
   SynDetails
-} from "./chunk.F7V5LHZA.js";
+} from "./chunk.YR4NKYMG.js";
 
 // src/components/details/details.ts
 var details_default = SynDetails;
@@ -9,4 +9,4 @@ SynDetails.define("syn-details");
 export {
   details_default
 };
-//# sourceMappingURL=chunk.PYW5SSBY.js.map
+//# sourceMappingURL=chunk.CBQRADQA.js.map

package/dist/chunks/{chunk.5C3IFF3A.js → chunk.CDOWFAH2.js}

@@ -77,13 +77,13 @@ var file_styles_default = css`
    */
   .form-control--user-dragging:not([disabled]) .button::part(base) {
     background: none;
-    border-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
-    color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    border-color: var(--syn-interactive-emphasis-color-hover);
+    color: var(--syn-interactive-emphasis-color-hover);
   }
 
   /* Drop Area */
   .droparea {
-    --highlight-color: var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    --highlight-color: var(--syn-interactive-emphasis-color);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color);
     border-radius: var(--syn-input-border-radius-medium);
@@ -93,7 +93,7 @@ var file_styles_default = css`
   }
 
   .droparea:focus-visible {
-    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
@@ -161,12 +161,12 @@ var file_styles_default = css`
 
   :host(:not([disabled])) .form-control--user-dragging .droparea {
     background: var(--syn-color-primary-50);
-    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color, var(--syn-color-primary-600));
+    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);
     cursor: pointer;
   }
 
   :host(:not([disabled])) .droparea:not(:focus-visible):hover {
-    --highlight-color: var(--syn-interactive-emphasis-color-hover, var(--syn-color-primary-900));
+    --highlight-color: var(--syn-interactive-emphasis-color-hover);
 
     border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);
     cursor: pointer;
@@ -182,4 +182,4 @@ var file_styles_default = css`
 export {
   file_styles_default
 };
-//# sourceMappingURL=chunk.5C3IFF3A.js.map
+//# sourceMappingURL=chunk.CDOWFAH2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/file/file.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  .input__control {\n    /**\n     * Visually hide the input type=file without display:none\n     * This is necessary for accessibility reasons and so the native html input validation popup \n     * is shown.\n     */\n    border: 0;\n    clip-path: inset(50%);\n    height: 1px;\n    margin: 0;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n  }\n\n  .form-control--droparea .input__control {\n    /* move the input into the center, so the native validation popup is centered to the droparea */\n    left: 50%;\n  }\n\n  .form-control-input {\n    /* needed, so the native validation popup is centered correctly */\n    position: relative;\n  }\n\n  /* Regular Input with button only */\n  .button__wrapper {\n    align-items: center;\n    display: flex;\n    gap: var(--syn-input-spacing-medium);\n  }\n\n  .form-control--small .button__wrapper {\n    gap: var(--syn-input-spacing-small);\n  }\n\n  :host([size=\"large\"]) .button__wrapper {\n    gap: var(--syn-input-spacing-large);\n  }\n\n  /**\n   * The value of the chosen file(s) or the placeholder text\n   */\n  .input__value {\n    color: var(--syn-input-color);\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .input__value.input__value--hidden {\n    display: none;\n  }\n\n  .input__value--placeholder {\n    color: var(--syn-input-help-text-color);\n  }\n\n  .form-control--small .input__value {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--large .input__value {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  /**\n   * Special case for regular inputs:\n   * When the user uses drag and drop, highlight the button with the primary color\n   */\n  .form-control--user-dragging:not([disabled]) .button::part(base) {\n    background: none;\n    border-color: var(--syn-interactive-emphasis-color-hover);\n    color: var(--syn-interactive-emphasis-color-hover);\n  }\n\n  /* Drop Area */\n  .droparea {\n    --highlight-color: var(--syn-interactive-emphasis-color);\n\n    border: var(--syn-input-border-width) dashed var(--syn-input-border-color);\n    border-radius: var(--syn-input-border-radius-medium);\n    font: var(--syn-body-medium-regular);\n    padding: var(--syn-spacing-x-large) var(--syn-spacing-large);\n    transition: var(--syn-transition-medium) background;\n  }\n\n  .droparea:focus-visible {\n    border: var(--syn-input-border-width) dashed var(--syn-interactive-emphasis-color);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  /* Adjust the highlight to match an inactive item */\n  :host([disabled]) .droparea {\n    --highlight-color: var(--syn-color-neutral-600);\n  }\n\n  :host([disabled]) .input__value {\n    display: none;\n  }\n\n  .droparea__background {\n    align-items: center;\n    display: flex;\n    gap: var(--syn-spacing-x-small);\n    padding: var(--syn-spacing-x-small) var(--syn-spacing-medium);\n  }\n\n  .droparea__icon {\n    align-items: center;\n    color: var(--highlight-color);\n    display: flex;\n    font-size: var(--syn-spacing-3x-large);\n  }\n\n  .droparea__text {\n    display: flex;\n    flex-direction: column;\n    gap: var(--syn-spacing-3x-small);\n    margin: 0;\n  }\n\n  .droparea__text strong {\n    color: var(--highlight-color);\n    font-weight: var(--syn-font-weight-bold);\n  }\n\n  /* Sizes */\n  /* stylelint-disable-next-line no-descending-specificity */\n  .form-control--small .droparea {\n    font: var(--syn-body-small-regular);\n  }\n\n  .form-control--small .droparea__icon {\n    font-size: var(--syn-spacing-2x-large)\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  .form-control--large .droparea {\n    font: var(--syn-body-large-regular);\n  }\n\n  .form-control--large .droparea__icon {\n    font-size: var(--syn-spacing-4x-large)\n  }\n\n  /* Disabled Styles */\n  :host([disabled]) .droparea,\n  :host([disabled]) .input__value {\n    cursor: not-allowed;\n    opacity: var(--syn-input-disabled-opacity);\n  }\n\n  :host(:not([disabled])) .form-control--user-dragging .droparea {\n    background: var(--syn-color-primary-50);\n    border: var(--syn-input-border-width) solid var(--syn-interactive-emphasis-color);\n    cursor: pointer;\n  }\n\n  :host(:not([disabled])) .droparea:not(:focus-visible):hover {\n    --highlight-color: var(--syn-interactive-emphasis-color-hover);\n\n    border: var(--syn-input-border-width) dashed var(--syn-input-border-color-hover);\n    cursor: pointer;\n  }\n\n  /* Validation */\n  /* stylelint-disable-next-line no-descending-specificity */\n  :host([data-user-invalid]:not([disabled])) .droparea {\n    border: var(--syn-input-border-width) dashed var(--syn-input-focus-ring-error);\n  }\n`;\n"],
+  "mappings": ";AAAA,SAAS,WAAW;AAEpB,IAAO,sBAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.YNQZY5WT.js → chunk.CUJDP53J.js}

@@ -1,9 +1,9 @@
-import {
-  textarea_custom_styles_default
-} from "./chunk.SHIPVO7H.js";
 import {
   textarea_styles_default
 } from "./chunk.FQWBH6B3.js";
+import {
+  textarea_custom_styles_default
+} from "./chunk.SHIPVO7H.js";
 import {
   defaultValue
 } from "./chunk.3NXKLKWH.js";
@@ -19,7 +19,7 @@ import {
 } from "./chunk.WVVQK5TE.js";
 import {
   enableDefaultSettings
-} from "./chunk.ZNNZXEP4.js";
+} from "./chunk.MLILJGXQ.js";
 import {
   watch
 } from "./chunk.JE5Y2YD7.js";
@@ -28,7 +28,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -383,4 +383,4 @@ SynTextarea = __decorateClass([
 export {
   SynTextarea
 };
-//# sourceMappingURL=chunk.YNQZY5WT.js.map
+//# sourceMappingURL=chunk.CUJDP53J.js.map

package/dist/chunks/{chunk.NQAIJI6C.js → chunk.DGU5AZZG.js}

@@ -1,12 +1,12 @@
+import {
+  dialog_custom_styles_default
+} from "./chunk.EHZBQTCT.js";
 import {
   dialog_styles_default
 } from "./chunk.MU43DZ7W.js";
 import {
   Modal
 } from "./chunk.JKSFECFA.js";
-import {
-  dialog_custom_styles_default
-} from "./chunk.UCLYCASW.js";
 import {
   lockBodyScrolling,
   unlockBodyScrolling
@@ -16,7 +16,7 @@ import {
 } from "./chunk.WXVOTRW5.js";
 import {
   SynIconButton
-} from "./chunk.3R55CWLN.js";
+} from "./chunk.QU47WZOK.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -42,7 +42,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -292,4 +292,4 @@ setDefaultAnimation("dialog.overlay.hide", {
 export {
   SynDialog
 };
-//# sourceMappingURL=chunk.NQAIJI6C.js.map
+//# sourceMappingURL=chunk.DGU5AZZG.js.map

package/dist/chunks/{chunk.VZGIDWPA.js → chunk.DU3L7OGA.js}

@@ -1,6 +1,6 @@
 import {
   progress_bar_custom_styles_default
-} from "./chunk.A7LOAARY.js";
+} from "./chunk.3WVPUEAN.js";
 import {
   progress_bar_styles_default
 } from "./chunk.QUM76UHV.js";
@@ -12,7 +12,7 @@ import {
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 import {
   __decorateClass
 } from "./chunk.MO2GTRUM.js";
@@ -68,4 +68,4 @@ __decorateClass([
 export {
   SynProgressBar
 };
-//# sourceMappingURL=chunk.VZGIDWPA.js.map
+//# sourceMappingURL=chunk.DU3L7OGA.js.map

package/dist/chunks/{chunk.VOC5DYU5.js → chunk.DY7AWH4R.js}

@@ -6,13 +6,13 @@ import {
 } from "./chunk.RAOPZXJL.js";
 import {
   SynDivider
-} from "./chunk.I42ZMXUL.js";
+} from "./chunk.M7VZBJK4.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.QF6ODD6S.js";
+} from "./chunk.FBQ7NUNW.js";
 
 // src/components/menu-label/menu-label.component.ts
 import { html } from "lit";
@@ -34,4 +34,4 @@ SynMenuLabel.dependencies = {
 export {
   SynMenuLabel
 };
-//# sourceMappingURL=chunk.VOC5DYU5.js.map
+//# sourceMappingURL=chunk.DY7AWH4R.js.map