@synergy-design-system/components 2.31.0-numeric.1 → 2.31.0-numeric.2

package/dist/chunks/{chunk.6ETN74WB.js → chunk.OMZMY7WY.js}

@@ -1,6 +1,6 @@
 import {
   SynBreadcrumbItem
-} from "./chunk.J75DWM6J.js";
+} from "./chunk.CGP72BVA.js";
 
 // src/components/breadcrumb-item/breadcrumb-item.ts
 var breadcrumb_item_default = SynBreadcrumbItem;
@@ -9,4 +9,4 @@ SynBreadcrumbItem.define("syn-breadcrumb-item");
 export {
   breadcrumb_item_default
 };
-//# sourceMappingURL=chunk.6ETN74WB.js.map
+//# sourceMappingURL=chunk.OMZMY7WY.js.map

package/dist/chunks/{chunk.KMAFFDJZ.js → chunk.OQVWVZ4P.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.O644HRW3.js";
 import {
   SynPopup
-} from "./chunk.S5LABDRE.js";
+} from "./chunk.WUSN4QJH.js";
 import {
   waitForEvent
 } from "./chunk.C2ENQBPM.js";
@@ -14,26 +14,26 @@ import {
   animateTo,
   parseDuration,
   stopAnimations
-} from "./chunk.A3OYJILJ.js";
+} from "./chunk.G6ITZTTW.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.HQ6QUSK7.js";
+} from "./chunk.7JGKUB4A.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
   watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.K3XDXZW2.js";
+} from "./chunk.NUQBPC6D.js";
 import {
   __decorateClass
-} from "./chunk.2GFK6XTO.js";
+} from "./chunk.Z4XV3SMG.js";
 
 // src/components/tooltip/tooltip.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -275,4 +275,4 @@ setDefaultAnimation("tooltip.hide", {
 export {
   SynTooltip
 };
-//# sourceMappingURL=chunk.KMAFFDJZ.js.map
+//# sourceMappingURL=chunk.OQVWVZ4P.js.map

package/dist/chunks/chunk.OQVWVZ4P.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  /**\n   * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with\n   * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,\n   * scenarios.\n   */\n  @property({ type: Boolean }) hoist = false;\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', 'hoist', '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        strategy=${this.hoist ? 'fixed' : 'absolute'}\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.KTCGXZQ4.js → chunk.OUISPKO2.js}

@@ -13,28 +13,28 @@ import {
 } from "./chunk.AERTEAG5.js";
 import {
   FormControlController
-} from "./chunk.AMIQC3O7.js";
+} from "./chunk.HP2LEQRU.js";
+import {
+  SynIcon
+} from "./chunk.4WTEYK2Y.js";
 import {
   HasSlotController
 } from "./chunk.WVVQK5TE.js";
 import {
-  SynIcon
-} from "./chunk.U3WTJD4D.js";
+  enableDefaultSettings
+} from "./chunk.V4H475OR.js";
 import {
   watch
-} from "./chunk.74IOULXM.js";
-import {
-  enableDefaultSettings
-} from "./chunk.33EV4VCU.js";
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.K3XDXZW2.js";
+} from "./chunk.NUQBPC6D.js";
 import {
   __decorateClass
-} from "./chunk.2GFK6XTO.js";
+} from "./chunk.Z4XV3SMG.js";
 
 // src/components/checkbox/checkbox.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -222,7 +222,7 @@ __decorateClass([
   state()
 ], SynCheckbox.prototype, "hasFocus", 2);
 __decorateClass([
-  property()
+  property({ reflect: true })
 ], SynCheckbox.prototype, "title", 2);
 __decorateClass([
   property()
@@ -267,4 +267,4 @@ SynCheckbox = __decorateClass([
 export {
   SynCheckbox
 };
-//# sourceMappingURL=chunk.KTCGXZQ4.js.map
+//# sourceMappingURL=chunk.OUISPKO2.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/checkbox/checkbox.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 SynIcon from '../icon/icon.component.js';\nimport styles from './checkbox.styles.js';\nimport customStyles from './checkbox.custom.styles.js';\nimport type { CSSResultGroup } from 'lit';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs\n * @status stable\n * @since 2.0\n *\n * @dependency syn-icon\n *\n * @slot - The checkbox's label.\n * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.\n *\n * @event syn-blur - Emitted when the checkbox loses focus.\n * @event syn-change - Emitted when the checked state changes.\n * @event syn-focus - Emitted when the checkbox gains focus.\n * @event syn-input - Emitted when the checkbox 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 base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<syn-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n * @csspart form-control-help-text - The help text's wrapper.\n */\n@enableDefaultSettings('SynCheckbox')\nexport default class SynCheckbox extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [componentStyles, formControlStyles, styles, formControlCustomStyles, customStyles];\n  static dependencies = { 'syn-icon': SynIcon };\n\n  private readonly formControlController = new FormControlController(this, {\n    value: (control: SynCheckbox) => (control.checked ? control.value || 'on' : undefined),\n    defaultValue: (control: SynCheckbox) => control.defaultChecked,\n    setValue: (control: SynCheckbox, checked: boolean) => (control.checked = checked)\n  });\n  private readonly hasSlotController = new HasSlotController(this, 'help-text');\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property({ reflect: true }) title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: string;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = 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 checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** The checkbox's help text. If you need to display HTML, use the `help-text` slot instead. */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Gets the validity state object */\n  get validity() {\n    return this.input.validity;\n  }\n\n  /** Gets the validation message */\n  get validationMessage() {\n    return this.input.validationMessage;\n  }\n\n  firstUpdated() {\n    this.formControlController.updateValidity();\n  }\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.emit('syn-change');\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('syn-blur');\n  }\n\n  private handleInput() {\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 handleFocus() {\n    this.hasFocus = true;\n    this.emit('syn-focus');\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(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n    this.formControlController.updateValidity();\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\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  /**\n   * Sets a custom validation message. The value provided will be shown to the user when the form is submitted. To clear\n   * the custom validation message, call this method with an empty string.\n   */\n  setCustomValidity(message: string) {\n    this.input.setCustomValidity(message);\n    this.formControlController.updateValidity();\n  }\n\n  render() {\n    const hasHelpTextSlot = this.hasSlotController.test('help-text');\n    const hasHelpText = this.helpText ? true : !!hasHelpTextSlot;\n\n    //\n    // NOTE: we use a <div> around the label slot because of this Chrome bug.\n    //\n    // https://bugs.chromium.org/p/chromium/issues/detail?id=1413733\n    //\n    return html`\n      <div\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-help-text': hasHelpText\n        })}\n      >\n        <label\n          part=\"base\"\n          class=${classMap({\n            checkbox: true,\n            'checkbox--checked': this.checked,\n            'checkbox--disabled': this.disabled,\n            'checkbox--focused': this.hasFocus,\n            'checkbox--indeterminate': this.indeterminate,\n            'checkbox--small': this.size === 'small',\n            'checkbox--medium': this.size === 'medium',\n            'checkbox--large': this.size === 'large'\n          })}\n        >\n          <input\n            class=\"checkbox__input\"\n            type=\"checkbox\"\n            title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}\n            name=${this.name}\n            value=${ifDefined(this.value)}\n            .indeterminate=${live(this.indeterminate)}\n            .checked=${live(this.checked)}\n            .disabled=${this.disabled}\n            .required=${this.required}\n            aria-checked=${this.checked ? 'true' : 'false'}\n            aria-describedby=\"help-text\"\n            @click=${this.handleClick}\n            @input=${this.handleInput}\n            @invalid=${this.handleInvalid}\n            @blur=${this.handleBlur}\n            @focus=${this.handleFocus}\n          />\n\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this.indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            ${this.checked\n              ? html`\n                  <syn-icon part=\"checked-icon\" class=\"checkbox__checked-icon\" library=\"system\" name=\"check\"></syn-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <syn-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    name=\"indeterminate\"\n                  ></syn-icon>\n                `\n              : ''}\n          </span>\n\n          <div part=\"label\" class=\"checkbox__label\">\n            <slot></slot>\n          </div>\n        </label>\n\n        <div\n          aria-hidden=${hasHelpText ? 'false' : 'true'}\n          class=\"form-control__help-text\"\n          id=\"help-text\"\n          part=\"form-control-help-text\"\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.UZFE4ZK6.js → chunk.PE3G4I5L.js}

@@ -1,6 +1,6 @@
 import {
   SynMenuItem
-} from "./chunk.WIVZPX4Q.js";
+} from "./chunk.HCOKZQTP.js";
 
 // src/components/menu-item/menu-item.ts
 var menu_item_default = SynMenuItem;
@@ -9,4 +9,4 @@ SynMenuItem.define("syn-menu-item");
 export {
   menu_item_default
 };
-//# sourceMappingURL=chunk.UZFE4ZK6.js.map
+//# sourceMappingURL=chunk.PE3G4I5L.js.map

package/dist/chunks/{chunk.JJ3OBG7Q.js → chunk.PKPTTKQA.js}

@@ -1,6 +1,6 @@
 import {
   SynDrawer
-} from "./chunk.LW362SOH.js";
+} from "./chunk.MAIIRSXZ.js";
 
 // src/components/drawer/drawer.ts
 var drawer_default = SynDrawer;
@@ -9,4 +9,4 @@ SynDrawer.define("syn-drawer");
 export {
   drawer_default
 };
-//# sourceMappingURL=chunk.JJ3OBG7Q.js.map
+//# sourceMappingURL=chunk.PKPTTKQA.js.map

package/dist/chunks/{chunk.HIF4ZQ35.js → chunk.PMYJ4WQL.js}

@@ -10,41 +10,41 @@ import {
 } from "./chunk.AERTEAG5.js";
 import {
   SynButton
-} from "./chunk.32CPGKWW.js";
+} from "./chunk.LPZXZR3T.js";
 import {
   FormControlController
-} from "./chunk.AMIQC3O7.js";
+} from "./chunk.HP2LEQRU.js";
 import {
   animateTo
-} from "./chunk.A3OYJILJ.js";
+} from "./chunk.G6ITZTTW.js";
 import {
   getAnimation,
   setDefaultAnimation
-} from "./chunk.HQ6QUSK7.js";
-import {
-  HasSlotController
-} from "./chunk.WVVQK5TE.js";
+} from "./chunk.7JGKUB4A.js";
 import {
   SynIcon
-} from "./chunk.U3WTJD4D.js";
+} from "./chunk.4WTEYK2Y.js";
 import {
   LocalizeController
 } from "./chunk.GIU3H3J3.js";
 import {
-  watch
-} from "./chunk.74IOULXM.js";
+  HasSlotController
+} from "./chunk.WVVQK5TE.js";
 import {
   enableDefaultSettings
-} from "./chunk.33EV4VCU.js";
+} from "./chunk.V4H475OR.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.K3XDXZW2.js";
+} from "./chunk.NUQBPC6D.js";
 import {
   __decorateClass
-} from "./chunk.2GFK6XTO.js";
+} from "./chunk.Z4XV3SMG.js";
 
 // src/components/file/file.component.ts
 import { classMap } from "lit/directives/class-map.js";
@@ -534,4 +534,4 @@ setDefaultAnimation("file.text.appear", {
 export {
   SynFile
 };
-//# sourceMappingURL=chunk.HIF4ZQ35.js.map
+//# sourceMappingURL=chunk.PMYJ4WQL.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/file/file.component.ts"],
+  "sourcesContent": ["import { classMap } from 'lit/directives/class-map.js';\nimport { property, query, state } from 'lit/decorators.js';\nimport type { CSSResultGroup } from 'lit';\nimport { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { defaultValue } from '../../internal/default-value.js';\nimport { watch } from '../../internal/watch.js';\nimport type { SynergyFormControl } from '../../internal/synergy-element.js';\nimport { LocalizeController } from '../../utilities/localize.js';\nimport { FormControlController } from '../../internal/form.js';\nimport { HasSlotController } from '../../internal/slot.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 SynButton from '../button/button.component.js';\nimport SynIcon from '../icon/icon.component.js';\nimport styles from './file.styles.js';\nimport { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry.js';\nimport { animateTo } from '../../internal/animate.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary File controls allow selecting an arbitrary number of files for uploading.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs\n * @status stable\n *\n * @dependency syn-button\n * @dependency syn-icon\n *\n * @slot label - The file control's label. Alternatively, you can use the `label` attribute.\n * @slot help-text - Text that describes how to use the file control.\n *    Alternatively, you can use the `help-text` attribute.\n * @slot droparea-icon - Optional droparea icon to use instead of the default.\n *    Works best with `<syn-icon>`.\n * @slot trigger - Optional content to be used as trigger instead of the default content.\n *    Opening the file dialog on click and as well as drag and drop will work for this content.\n *    Following attributes will no longer work: *label*, *droparea*, *help-text*, *size*,\n *    *hide-value*. Also if using the disabled attribute, the disabled styling will not be\n *    applied and must be taken care of yourself.\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-error - Emitted when multiple files are selected via drag and drop, without\n * the `multiple` property being set.\n * @event syn-focus - Emitted when the control gains focus.\n * @event syn-input - Emitted when the control receives input.\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 button-wrapper - The wrapper around the button and text value.\n * @csspart button - The syn-button acting as a file input.\n * @csspart button__base - The syn-button's exported `base` part.\n * @csspart value - The chosen files or placeholder text for the file input.\n * @csspart droparea - The element wrapping the drop zone.\n * @csspart droparea-background - The background of the drop zone.\n * @csspart droparea-icon - The container that wraps the icon for the drop zone.\n * @csspart droparea-value - The text for the drop zone.\n * @csspart trigger - The container that wraps the trigger.\n *\n * @animation file.iconDrop - The animation to use for the file icon\n * when a file is dropped\n * @animation file.text.disappear - The disappear animation to use for the file placeholder text\n * when a file is dropped\n * @animation file.text.appear - The appear animation to use for the file placeholder text\n * when a file is dropped\n */\n@enableDefaultSettings('SynFile')\nexport default class SynFile extends SynergyElement implements SynergyFormControl {\n  static styles: CSSResultGroup = [\n    componentStyles,\n    formControlStyles,\n    formControlCustomStyles,\n    styles,\n  ];\n\n  static dependencies = {\n    'syn-button': SynButton,\n    'syn-icon': SynIcon,\n  };\n\n  private readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['syn-change'],\n    // This makes sure the value sent in formdata events is always the files object\n    // @see internals/form.ts #handleFormData for more information\n    value: (el: SynFile) => el.files,\n  });\n\n  private readonly hasSlotController = new HasSlotController(this, 'help-text', 'label');\n\n  private readonly localize = new LocalizeController(this);\n\n  @state() private userIsDragging = false;\n\n  /**\n   * The selected files as a FileList object containing a list of File objects.\n   * The FileList behaves like an array, so you can get the number of selected files\n   * via its length property.\n   * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files)\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#getting_information_on_selected_files\n   */\n  @property({ type: Object })\n  set files(v: FileList | null) {\n    if (this.input) {\n      this.input.files = v;\n    }\n  }\n\n  get files() {\n    return this.input?.files;\n  }\n\n  /** The name of the file control, submitted as a name/value pair with form data. */\n  @property({ type: String }) name = '';\n\n  /**\n   * The current value of the input, submitted as a name/value pair with form data.\n   * Beware that the only valid value when setting a file input is an empty string!\n   */\n\n  /**\n   * The value of the file control contains a string that represents the path of the selected file.\n   * If multiple files are selected, the value represents the first file in the list.\n   * If no file is selected, the value is an empty string.\n   * Beware that the only valid value when setting a file control is an empty string!\n   * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value)\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#value\n   */\n  @property({ type: String })\n  set value(v: string) {\n    if (this.input) {\n      this.input.value = v;\n    }\n  }\n\n  get value() {\n    return this.input?.value;\n  }\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue() defaultValue = '';\n\n  /** The file control's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** The file control's label. If you need to display HTML, use the `label` slot instead. */\n  @property() label = '';\n\n  /**\n   * The file control's help text.\n   * If you need to display HTML, use the `help-text` slot instead.\n   */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Disables the file control. */\n  @property({ reflect: true, type: Boolean }) disabled = false;\n\n  /** Draw the file control as a drop area */\n  @property({ type: Boolean }) droparea = false;\n\n  /**\n   * Comma separated list of supported file types\n   * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept)\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept\n   * @example <syn-file accept=\".jpg,.jpeg,.png,.gif,text/plain,image/*\"></syn-file>\n   */\n  @property({ type: String }) accept = '';\n\n  /**\n   * Specifies the types of files that the server accepts.\n   * Can be set either to user or environment.\n   * Works only when not using a droparea!\n   * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture)\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture\n   */\n  @property({ type: String }) capture: 'user' | 'environment';\n\n  /**\n   * Indicates whether the user can select more than one file.\n   * Has no effect if webkitdirectory is set.\n   * [see MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple\n   */\n  @property({ reflect: true, type: Boolean }) multiple = false;\n\n  /**\n   * Indicates that the file control should let the user select directories instead of files.\n   * When a directory is selected, the directory and its entire hierarchy of contents are included\n   * in the set of selected items.\n   * Note: This is a non-standard attribute but is supported in the major browsers.\n   * [see MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory\n   */\n  @property({ reflect: true, type: Boolean }) webkitdirectory = false;\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`. The form must be in the same document\n   * or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the input a required field. */\n  @property({ reflect: true, type: Boolean }) required = false;\n\n  /** Suppress the value from being displayed in the file control */\n  @property({ attribute: 'hide-value', type: Boolean }) hideValue = false;\n\n  @query('.input__control') input: HTMLInputElement;\n\n  @query('.button') button: SynButton;\n\n  @query('.droparea') dropareaWrapper: HTMLDivElement;\n\n  @query('.droparea__icon') dropareaIcon: HTMLSpanElement;\n\n  @query('.input__value') inputChosen: HTMLSpanElement;\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  /**\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.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  @watch('disabled', { waitUntilFirstUpdate: true })\n  handleDisabledChange() {\n    // Disabled form controls are always valid\n    this.formControlController.setValidity(this.disabled);\n  }\n\n  @watch('value', { waitUntilFirstUpdate: true })\n  async handleValueChange() {\n    await this.updateComplete;\n    this.formControlController.updateValidity();\n  }\n\n  /** Sets focus on the button or droparea. */\n  focus(options?: FocusOptions) {\n    if (this.droparea) {\n      this.dropareaWrapper?.focus(options);\n      return;\n    }\n\n    this.button?.focus(options);\n  }\n\n  /** Removes focus from the button or droparea. */\n  blur() {\n    if (this.droparea) {\n      this.dropareaWrapper?.blur();\n      return;\n    }\n\n    this.button?.blur();\n  }\n\n  private handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  private handleFiles(files: FileList | null) {\n    if (!files) {\n      this.value = '';\n      return;\n    }\n    this.files = files;\n  }\n\n  private async handleTransferItems(items: DataTransferItemList | null): Promise<FileList> {\n    if (!items) {\n      this.value = '';\n      return new Promise((_resolve, reject) => { reject(new Error('No proper items found')); });\n    }\n\n    const entries = Array\n      .from(items)\n      .map(item => item.webkitGetAsEntry());\n\n    const filesPromises = entries.map(entry => this.getFilesFromEntry(entry));\n    const filesArray = await Promise.all(filesPromises);\n    const files = filesArray.flat();\n\n    const dataTransfer = new DataTransfer();\n    Array.from(files).forEach(f => dataTransfer.items.add(f));\n    return dataTransfer.files;\n  }\n\n  private async getFilesFromEntry(entry: FileSystemEntry | null): Promise<File[]> {\n    if (!entry) {\n      return [];\n    }\n    if (entry.isFile) {\n      return new Promise<File[]>((resolve, reject) => {\n        (entry as FileSystemFileEntry).file(file => resolve([file]), reject);\n      });\n    }\n    if (entry.isDirectory) {\n      return new Promise<File[]>((resolve, reject) => {\n        const dirReader = (entry as FileSystemDirectoryEntry).createReader();\n        dirReader.readEntries((entries) => {\n          Promise.all(entries.map(e => this.getFilesFromEntry(e)))\n            .then((files) => { resolve(files.flat()); })\n            .catch(reject);\n        });\n      });\n    }\n    return [];\n  }\n\n  private handleClick(e: Event) {\n    e.preventDefault();\n    this.input.click();\n  }\n\n  /** Handles the change event of the native input */\n  private handleChange(e: Event) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    this.emit('syn-input');\n    this.emit('syn-change');\n  }\n\n  private handleDragOver(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.userIsDragging = true;\n  }\n\n  private handleDragLeave(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n    this.userIsDragging = false;\n  }\n\n  // eslint-disable-next-line complexity\n  private async handleDrop(e: DragEvent) {\n    e.preventDefault();\n    e.stopPropagation();\n\n    if (!e.dataTransfer) {\n      return;\n    }\n\n    const files = await this.handleTransferItems(e.dataTransfer?.items);\n\n    this.userIsDragging = false;\n\n    if (!files) {\n      return;\n    }\n\n    // webkitdirectory also allows multiple files\n    if (!this.multiple && !this.webkitdirectory && files.length > 1) {\n      this.emit('syn-error');\n      return;\n    }\n\n    // Use the transferred file list from the drag drop interface\n    const hasTrigger = this.hasSlotController.test('trigger');\n    if (!hasTrigger) {\n      const disappearAnimation = getAnimation(this.inputChosen, 'file.text.disappear', { dir: this.localize.dir() });\n      const appearAnimation = getAnimation(this.inputChosen, 'file.text.appear', { dir: this.localize.dir() });\n\n      if (this.droparea) {\n        const dropIconAnimation = getAnimation(this.dropareaIcon, 'file.iconDrop', { dir: this.localize.dir() });\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        animateTo(this.dropareaIcon, dropIconAnimation.keyframes, dropIconAnimation.options);\n      }\n      // eslint-disable-next-line max-len\n      await animateTo(this.inputChosen, disappearAnimation.keyframes, disappearAnimation.options);\n      this.handleFiles(files);\n      await animateTo(this.inputChosen, appearAnimation.keyframes, appearAnimation.options);\n    } else {\n      this.handleFiles(files);\n    }\n\n    this.input.dispatchEvent(new Event('change'));\n  }\n\n  /**\n   * Handle the focus of the droparea and emit focus event\n   */\n  private handleFocus() {\n    this.emit('syn-focus');\n  }\n\n  /**\n   * Handle the blur of the droparea and emit blur event\n   */\n  private handleBlur() {\n    this.emit('syn-blur');\n  }\n\n  private renderValue() {\n    let hasFiles = false;\n    let fileChosenLabel = this.localize.term('numFilesSelected', 0, this.webkitdirectory);\n\n    if (this.files && this.files?.length > 0) {\n      hasFiles = true;\n      fileChosenLabel = this.files.length === 1\n        ? this.files[0].name\n        : this.localize.term('numFilesSelected', this.files.length, this.webkitdirectory);\n    }\n\n    return html`\n      <span\n        class=${classMap({\n          input__value: true,\n          'input__value--hidden': this.hideValue,\n          'input__value--placeholder': !hasFiles,\n        })}\n        part=\"value\"\n      >\n        ${fileChosenLabel}\n      </span>\n    `;\n  }\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  private renderDroparea() {\n    return html`\n      <div\n        class=\"droparea\"\n        @click=${this.handleClick}\n        @keypress=${this.handleClick}\n        @focus=${this.handleFocus}\n        @blur=${this.handleBlur}\n        tabindex=${this.disabled ? -1 : 0}\n        part=\"droparea\"\n      >\n        <div\n          class=\"droparea__background\"\n          part=\"droparea-background\"\n        >\n          <span part=\"droparea-icon\" class=\"droparea__icon\">\n            <slot name=\"droparea-icon\">\n              <syn-icon name=\"upload-file\" library=\"system\" ></syn-icon>\n            </slot>\n          </span>\n          <p\n            class=\"droparea__text\"\n            part=\"droparea-value\"\n          >\n            <strong>${this.localize.term(this.webkitdirectory ? 'folderDragDrop' : 'fileDragDrop')}</strong>\n            ${this.renderValue()}\n          </p>\n        </div>\n      </div>\n    `;\n  }\n  /* eslint-enable @typescript-eslint/unbound-method */\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  private renderButton() {\n    let buttonText = this.localize.term('fileButtonText');\n    if (this.multiple) {\n      buttonText = this.localize.term('fileButtonTextMultiple');\n    }\n    if (this.webkitdirectory) {\n      buttonText = this.localize.term('folderButtonText');\n    }\n\n    return html`\n      <div\n        class=\"button__wrapper\"\n        part=\"button-wrapper\"\n      >\n        <syn-button\n          class=\"button\"\n          @click=${this.handleClick}\n          ?disabled=${this.disabled}\n          exportparts=\"base:button__base\"\n          part=\"button\"\n          size=${this.size}\n          variant=\"outline\"\n        >\n          ${buttonText}\n        </syn-button>\n        ${this.renderValue()}\n      </div>\n    `;\n  }\n  /* eslint-enable @typescript-eslint/unbound-method */\n\n  /* eslint-disable @typescript-eslint/unbound-method */\n  // eslint-disable-next-line complexity\n  render() {\n    const hasLabel = this.label || !!this.hasSlotController.test('label');\n    const hasHelpText = this.helpText ? true : !!this.hasSlotController.test('help-text');\n    const hasTrigger = !!this.hasSlotController.test('trigger');\n\n    return html`\n      <div\n        class=${classMap({\n          'form-control': true,\n          'form-control--droparea': this.droparea,\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          'form-control--user-dragging': this.userIsDragging,\n        })}\n        @dragenter=${this.handleDragOver}\n        @dragleave=${this.handleDragLeave}\n        @dragover=${this.handleDragOver}\n        @drop=${this.handleDrop}\n        part=\"form-control\"\n      >\n      ${\n        hasTrigger\n          ? html`\n                <slot \n                  @click=${this.handleClick}\n                  @keypress=${this.handleClick}\n                  name=\"trigger\"\n                  part=\"trigger\"\n                ></slot>\n            `\n          : html`\n              <label\n                aria-hidden=${hasLabel ? 'false' : 'true'}\n                class=\"form-control__label\"\n                for=\"input\"\n                part=\"form-control-label\"\n              >\n                <slot name=\"label\">${this.label}</slot>\n              </label>\n\n              <div\n                class=\"form-control-input\"\n                part=\"form-control-input\"\n              >\n\n                ${this.droparea ? this.renderDroparea() : this.renderButton()}\n              </div>\n\n              <div\n                aria-hidden=${hasHelpText ? 'false' : 'true'}\n                class=\"form-control__help-text\"\n                id=\"help-text\"\n                part=\"form-control-help-text\"\n              >\n                <slot name=\"help-text\">${this.helpText}</slot>\n              </div>\n            `\n        }\n        <input\n          accept=${this.accept}\n          aria-describedby=\"help-text\"\n          @change=${this.handleChange}\n          class=\"input__control\"\n          ?disabled=${this.disabled}\n          id=\"input\"\n          @invalid=${this.handleInvalid}\n          ?multiple=${this.multiple}\n          name=${ifDefined(this.name)}\n          ?required=${this.required}\n          type=\"file\"\n          tabindex=\"-1\"\n          ?webkitdirectory=${this.webkitdirectory}\n        >\n    </div>\n    `;\n  }\n  /* eslint-enable @typescript-eslint/unbound-method */\n}\n\nsetDefaultAnimation('file.iconDrop', {\n  keyframes: [\n    { scale: 1 },\n    { scale: 0.7 },\n    { scale: 1 },\n  ],\n  options: { duration: 600, easing: 'ease-out' },\n});\n\nsetDefaultAnimation('file.text.disappear', {\n  keyframes: [\n    { opacity: 1 },\n    { opacity: 0, transform: 'translateY(-40%)' },\n  ],\n  options: { duration: 300, easing: 'cubic-bezier(0.45, 1.45, 0.8, 1)' },\n});\n\nsetDefaultAnimation('file.text.appear', {\n  keyframes: [\n    { opacity: 0, transform: 'translateY(40%)' },\n    { opacity: 1 },\n  ],\n  options: { duration: 300, easing: 'cubic-bezier(0.45, 1.45, 0.8, 1)' },\n});\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.6EJPCDSL.js → chunk.PR66KI74.js}

@@ -3,28 +3,28 @@ import {
   isBlurEvent,
   isInvalidEvent,
   normalizeEventAttribute
-} from "./chunk.Q7BW6KKX.js";
+} from "./chunk.HX7JLYDF.js";
 import {
   validate_styles_default
 } from "./chunk.MVM3NN6Y.js";
 import {
   SynAlert
-} from "./chunk.5NGEDTDD.js";
-import {
-  watch
-} from "./chunk.74IOULXM.js";
+} from "./chunk.EK2I2ETM.js";
 import {
   enableDefaultSettings
-} from "./chunk.33EV4VCU.js";
+} from "./chunk.V4H475OR.js";
+import {
+  watch
+} from "./chunk.BVZQ6QSY.js";
 import {
   component_styles_default
 } from "./chunk.NLYVOJGK.js";
 import {
   SynergyElement
-} from "./chunk.K3XDXZW2.js";
+} from "./chunk.NUQBPC6D.js";
 import {
   __decorateClass
-} from "./chunk.2GFK6XTO.js";
+} from "./chunk.Z4XV3SMG.js";
 
 // src/components/validate/validate.component.ts
 import { html } from "lit";
@@ -330,4 +330,4 @@ SynValidate = __decorateClass([
 export {
   SynValidate
 };
-//# sourceMappingURL=chunk.6EJPCDSL.js.map
+//# sourceMappingURL=chunk.PR66KI74.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/validate/validate.component.ts"],
+  "sourcesContent": ["import type { CSSResultGroup, PropertyValues } from 'lit';\nimport { html } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport SynergyElement from '../../internal/synergy-element.js';\nimport { watch } from '../../internal/watch.js';\nimport SynAlert from '../alert/alert.component.js';\nimport {\n  getEventNameForElement,\n  isBlurEvent,\n  isInvalidEvent,\n  normalizeEventAttribute,\n} from './utility.js';\nimport styles from './validate.styles.js';\nimport { enableDefaultSettings } from '../../utilities/defaultSettings/decorator.js';\n\n/**\n * @summary Validate provides form field validation messages in a unified way.\n * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n * and showing the validation message in a consistent, user defined way.\n * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs\n * @dependency syn-alert\n *\n * @slot - The form field that should be validated.\n * Avoid slotting in more than one element, as subsequent ones will be ignored.\n *\n * @csspart base - The component's base wrapper.\n * @csspart input-wrapper - The container that wraps the form field.\n * @csspart alert - The syn-alert that is shown when the variant is set to \"inline\".\n * @csspart alert__base - The container that wraps the alert.\n * @csspart alert__message - The container that wraps the alert message.\n * @csspart alert__icon - The container that wraps the alert icon.\n */\n@enableDefaultSettings('SynValidate')\nexport default class SynValidate extends SynergyElement {\n  static styles: CSSResultGroup = [componentStyles, styles];\n\n  static dependencies = {\n    'syn-alert': SynAlert,\n  };\n\n  controller = new AbortController();\n\n  observer: MutationObserver;\n\n  @queryAssignedElements() private slottedChildren: HTMLElement[];\n\n  @state() validationMessage = '';\n\n  @state() eagerFirstMount = true;\n\n  @state() isInternalTriggeredInvalid = false;\n\n  @state() isValid = true;\n\n  /**\n   * The variant that should be used to show validation alerts.\n   *\n   * The following variants are supported:\n   * - **native** (default): Uses the native browser validation, usually a browser tooltip.\n   * - **inline**: Show the validation message underneath the element, using a `<syn-alert>`\n   */\n  @property({ reflect: true }) variant: 'native' | 'inline' = 'native';\n\n  /** Do not show the error icon when using the inline variant validation */\n  @property({ attribute: 'hide-icon', reflect: true, type: Boolean }) hideIcon = false;\n\n  /**\n   * Defines the events that trigger the validation.\n   * `invalid` will always automatically be included.\n   * You may also use the `live` keyword to validate on every input change.\n   * `live` will make sure to listen to the `invalid`, `input` and `blur` events.\n   *\n   * Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)\n   * and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.\n   *\n   * @example ```html\n   * <!-- Validate on invalid and change events (invalid, change) -->\n   * <syn-validate on=\"invalid change\"></syn-validate>\n   *\n   * <!-- Validate on live events (invalid, blur, input)-->\n   * <syn-validate on=\"live\"></syn-validate>\n   *\n   * <!-- Validate on live and custom events (invalid, blur, input, focus, change) -->\n   * <syn-validate on=\"live focus change\"></syn-validate>\n   * ```\n   */\n  @property({ reflect: true }) on: string = '';\n\n  /**\n   * Custom validation message to be displayed when the input is invalid.\n   * Will override the default browser validation message.\n   * Set to an empty string to reset the validation message.\n   */\n  @property({ attribute: 'custom-validation-message', type: String }) customValidationMessage = '';\n\n  /**\n   * Set this to true to validate the input immediately when it is rendered.\n   * Best used with a `variant` of `inline`.\n   * When setting eager, the input will not be focused automatically.\n   *\n   * When using a `variant` of `native` the browser will focus\n   * the last eager field as it is using a tooltip.\n   * In this case it is better to just provide one eager field.\n   */\n  @property({ type: Boolean }) eager = false;\n\n  // Automatically refresh all event listeners when the on property changes.\n  @watch('on', { waitUntilFirstUpdate: true })\n  handleListenerChange() {\n    this.updateEvents();\n  }\n\n  @watch('eager', { waitUntilFirstUpdate: false })\n  async handleEagerChange() {\n    if (this.eager) {\n      const input = this.getInput();\n      await this.updateComplete;\n      input?.reportValidity();\n      this.eagerFirstMount = true;\n    } else {\n      this.eagerFirstMount = false;\n    }\n  }\n\n  // Synchronize the validation message on the wrapped input with the custom message\n  @watch('customValidationMessage', { waitUntilFirstUpdate: true })\n  handleCustomValidationMessageChange() {\n    const input = this.getInput();\n    if (input) {\n      this.setCustomValidationMessage(input);\n      this.setValidationMessage(input);\n    }\n  }\n\n  /**\n   * Returns the validity state of the input component.\n   * `true` for valid and `false` for invalid.\n   */\n  getValidity() {\n    return this.isValid;\n  }\n\n  /**\n   * Get the input element to validate. Defined as the first slotted element\n   * @returns The input element or undefined if not found\n   */\n  private getInput() {\n    const input = this.slottedChildren[0];\n    return input ? input as HTMLInputElement : undefined;\n  }\n\n  /**\n   * Get the event names to listen for.\n   * If the input is a synergy element, will use syn- prefixes.\n   * @returns The event names to listen for\n   */\n  // eslint-disable-next-line complexity\n  private getUsedEventNames() {\n    const input = this.getInput();\n\n    // If there is no input, skip before doing any harm\n    if (!input) {\n      return [];\n    }\n\n    // Make sure to always use an array of events\n    // This is needed because on may be a special value like \"live\"\n    const on = normalizeEventAttribute(this.on);\n\n    // Filter makes sure to remove empty values, e.g.\n    // <syn-validate on=\"\"></syn-validate>\n    const [...events] = on.filter(Boolean);\n\n    // Make sure to always have an invalid event\n    if (!events.includes('invalid')) {\n      events.push('invalid');\n    }\n\n    // Special handling for the live keyword:\n    // live always means on input and blur\n    if (events.includes('live')) {\n      events.push('input');\n      events.push('blur');\n    }\n\n    // Make sure to remove duplicated events and the live property\n    // and map the events to the correct event names\n    return Array.from(new Set(\n      events\n        .filter(e => e !== 'live')\n        .map(e => getEventNameForElement(input, e)),\n    ));\n  }\n\n  /**\n   * Update the events on the input element.\n   */\n  private updateEvents() {\n    this.controller.abort();\n    this.controller = new AbortController();\n    const input = this.getInput();\n\n    if (!input) {\n      return;\n    }\n\n    const events = this.getUsedEventNames();\n    events.forEach(eventName => {\n      input.addEventListener(eventName, this.validate, {\n        capture: isInvalidEvent(eventName),\n        signal: this.controller.signal,\n      });\n    });\n\n    // If the change event is not included,\n    // make sure to attach a custom listener that resets the validation message\n    // This is needed as the custom message may be set on change\n    const usedChangeEvent = getEventNameForElement(input, 'change');\n    if (!events.includes(usedChangeEvent)) {\n      input.addEventListener(usedChangeEvent, this.internalRevalidate, {\n        signal: this.controller.signal,\n      });\n    }\n  }\n\n  private setValidationMessage(input: HTMLInputElement) {\n    const { customValidationMessage } = this;\n    const validationMessage = customValidationMessage || input.validationMessage;\n    this.validationMessage = validationMessage;\n  }\n\n  /**\n   * Set the custom validation message to the input. This will make sure to either:\n   * - use the custom message if one is set or\n   * - use the default message if the custom message is empty\n   */\n  private setCustomValidationMessage(input: HTMLInputElement) {\n    // Set the custom validation message on the input only once, when the customValidationMessage\n    // is changed. Otherwise there could be problems with `variant=\"native\"` and `on=\"live\"` or\n    //  `on=\"blur\"`, because the browser popup will never disappear even if clicking somewhere else.\n    input.setCustomValidity(this.customValidationMessage);\n  }\n\n  /**\n   * Set the validation message from the input element\n   * @param e The event that was received\n   */\n  private internalRevalidate = (e: Event) => {\n    const input = e.currentTarget as HTMLInputElement;\n    if (input.validity?.valid) {\n      this.validationMessage = '';\n    }\n  };\n\n  /**\n   * Handle the blur event during validation\n   */\n  // eslint-disable-next-line class-methods-use-this\n  private handleFocus(input: HTMLInputElement) {\n    const activeElement = document.activeElement! as HTMLInputElement;\n    const activeElementIsWrapped = activeElement.closest('syn-validate');\n\n    if (!activeElement.validity?.valid && activeElementIsWrapped) {\n      // The active element is invalid do not scroll\n      return;\n    }\n\n    input.scrollIntoView({ block: 'nearest' });\n    input.focus();\n  }\n\n  /**\n   * Triggers a validation run, showing the validation message if needed.\n   */\n  // eslint-disable-next-line complexity\n  private validate = (e: Event) => {\n    // Make sure to stop the validate component from going into an endless cycle of triggering\n    if (isInvalidEvent(e.type) && this.variant === 'native' && this.isInternalTriggeredInvalid === true) {\n      this.isInternalTriggeredInvalid = false;\n      return;\n    }\n\n    // Make sure to always prevent the invalid event when not using native validation\n    if (isInvalidEvent(e.type) && this.variant !== 'native') {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n\n    const input = e.currentTarget as HTMLInputElement;\n    this.isValid = input.validity?.valid;\n\n    // When we are using eager, make sure to skip focus on the first mount\n    if (this.eager && this.eagerFirstMount) {\n      this.eagerFirstMount = false;\n      this.setValidationMessage(input);\n      return;\n    }\n\n    // If the active element that has focus is placed in a validate component,\n    // make sure to not loose focus.\n    if (!this.isValid && !isBlurEvent(e.type)) {\n      this.handleFocus(input);\n    }\n\n    this.setValidationMessage(input);\n\n    // Trigger reportValidity when using native validation, so the browser popup is also shown\n    // for other events than `invalid`. All events except the blur event, should trigger this.\n    if (!isBlurEvent(e.type) && this.variant === 'native') {\n      // eslint-disable-next-line @typescript-eslint/no-floating-promises\n      this.updateComplete.then(() => {\n        this.isInternalTriggeredInvalid = true;\n        input.reportValidity();\n      });\n    }\n  };\n\n  async firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.updateEvents();\n\n    // #713: Make sure to set the custom validation message on mount\n    // When we have a custom element, we need to wait for it to be ready!\n    const input = this.getInput();\n\n    if (this.customValidationMessage) {\n      if (input instanceof SynergyElement) {\n        await input.updateComplete;\n      }\n      input?.setCustomValidity(this.customValidationMessage);\n    }\n\n    // Make sure to run validation on mount if eager is set\n    if (this.eager) {\n      await this.updateComplete;\n      this.isValid = input?.validity?.valid ?? false;\n      input?.reportValidity();\n    }\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    // #717: Make sure to remove to rerun validation when\n    // disabled or readonly properties change on the input\n    this.observer = new MutationObserver(entries => {\n      const input = this.getInput();\n\n      if (!input) {\n        return;\n      }\n\n      const hasDisabledOrReadonly = entries\n        // Only check for changes on the input element\n        .filter(({ target }) => target === input)\n        // Check if the input is disabled or readonly\n        .every(entry => {\n          const target = entry.target as HTMLInputElement;\n          return target.hasAttribute('disabled') || target.hasAttribute('readonly');\n        });\n\n      if (hasDisabledOrReadonly) {\n        this.isValid = true;\n        this.validationMessage = '';\n      } else {\n        // When using a synergy element, we need to check the validity after the element is updated,\n        // as we cannot rely on the validity state of the element itself.\n        // Unfortunately, this depends on used browser :(.\n        const waitForPromise = input instanceof SynergyElement\n          ? input.updateComplete\n          : Promise.resolve();\n\n        // eslint-disable-next-line @typescript-eslint/no-floating-promises\n        waitForPromise.then(() => {\n          this.isValid = input?.validity?.valid ?? false;\n          this.validationMessage = input?.validationMessage ?? '';\n        });\n      }\n    });\n\n    this.observer.observe(this, {\n      attributeFilter: ['disabled', 'readonly'],\n      attributes: true,\n      subtree: true,\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.controller.abort();\n    this?.observer?.disconnect();\n  }\n\n  private renderInlineValidation() {\n    if (this.variant !== 'inline' || !this.validationMessage) {\n      return '';\n    }\n\n    return html`\n      <syn-alert\n        open\n        exportparts=\"base:alert__base,message:alert__message,icon:alert__icon\"\n        part=\"alert\"\n        variant=\"danger\"\n      >\n        ${!this.hideIcon\n          ? html`<syn-icon slot=\"icon\" name=\"error\" library=\"system\"></syn-icon>`\n          : ''\n        }\n        ${this.validationMessage}\n      </syn-alert>\n    `;\n  }\n\n  render() {\n    return html`\n      <div\n        class=\"validate\"\n        part=\"base\"\n      >\n        <slot\n          class=\"validate__input-wrapper\"\n          part=\"input-wrapper\"\n        ></slot>\n        \n        ${this.renderInlineValidation()}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/chunks/{chunk.V4SIKF4X.js → chunk.PY4VOF4Y.js}

@@ -363,9 +363,36 @@ var combobox_styles_default = css`
   .combobox__listbox ::slotted(syn-optgroup:first-of-type) {
     --display-divider: none;
   }
+
+  /**
+   * #850: Allow to measure the size of the combobox.
+   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.
+   * Scoped to multiple to not break the single combobox per accident.
+   */
+  :host([multiple]) .combobox__tags {
+    min-width: 100px;
+    overflow: hidden;
+  }
+
+  :host([multiple]) .combobox__tags > div {
+    display: contents;
+  }
+
+  :host([multiple]) .combobox__tags > div > syn-tag {
+    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);
+
+    max-width: var(--syn-combobox-tag-max-width);
+  }
+
+  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {
+    display: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 `;
 
 export {
   combobox_styles_default
 };
-//# sourceMappingURL=chunk.V4SIKF4X.js.map
+//# sourceMappingURL=chunk.PY4VOF4Y.js.map

package/dist/chunks/{chunk.V4SIKF4X.js.map → chunk.PY4VOF4Y.js.map}

@@ -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/* 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    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--small .combobox__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--medium .combobox__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--large .combobox__expand-icon {\n    font-size: var(--syn-spacing-x-large);\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--small .combobox__suffix::slotted(syn-icon),\n  .combobox--small .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\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--medium .combobox__suffix::slotted(syn-icon),\n  .combobox--medium .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\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--large .combobox__suffix::slotted(syn-icon),\n  .combobox--large .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\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;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    margin-inline-start: var(--syn-spacing-small);\n  }\n\n  .combobox--small .combobox__expand-icon {\n    font-size: var(--syn-spacing-medium);\n  }\n\n  .combobox--medium .combobox__expand-icon {\n    font-size: var(--syn-spacing-large);\n  }\n\n  .combobox--large .combobox__expand-icon {\n    font-size: var(--syn-spacing-x-large);\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--small .combobox__suffix::slotted(syn-icon),\n  .combobox--small .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-medium);\n  }\n\n  /* Medium */\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--medium .combobox__suffix::slotted(syn-icon),\n  .combobox--medium .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-x-large);\n  }\n\n  /* Large */\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--large .combobox__suffix::slotted(syn-icon),\n  .combobox--large .combobox__prefix::slotted(syn-icon) {\n    font-size: var(--syn-font-size-2x-large);\n  }\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  /**\n   * #850: Allow to measure the size of the combobox.\n   * This is needed so we can automatically size and truncate the tags in the <syn-combobox multiple> component.\n   * Scoped to multiple to not break the single combobox per accident.\n   */\n  :host([multiple]) .combobox__tags {\n    min-width: 100px;\n    overflow: hidden;\n  }\n\n  :host([multiple]) .combobox__tags > div {\n    display: contents;\n  }\n\n  :host([multiple]) .combobox__tags > div > syn-tag {\n    --syn-tag-position-adjustment: var(--syn-spacing-3x-small);\n\n    max-width: var(--syn-combobox-tag-max-width);\n  }\n\n  :host([multiple]) .combobox__tags > div > syn-tag::part(content) {\n    display: initial;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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.DSW34EOY.js → chunk.QAQINAAG.js}

@@ -1,7 +1,7 @@
 import {
   INITIAL_DEFAULT_SETTINGS,
   defaultSettings
-} from "./chunk.IJ7VHZFK.js";
+} from "./chunk.CEQYPACD.js";
 
 // src/utilities/defaultSettings/functions.ts
 var SYNERGY_EXPERIMENTAL_SETTING_EMIT_EVENTS = false;
@@ -144,4 +144,4 @@ export {
   setGlobalDefaultSettings,
   resetGlobalDefaultSettings
 };
-//# sourceMappingURL=chunk.DSW34EOY.js.map
+//# sourceMappingURL=chunk.QAQINAAG.js.map

package/dist/chunks/{chunk.UBAW2LID.js → chunk.RDYAIG65.js}

@@ -1,15 +1,17 @@
 import {
   __spreadValues
-} from "./chunk.2GFK6XTO.js";
+} from "./chunk.Z4XV3SMG.js";
 
 // src/components/input/strategies.ts
 var nativeNumericStrategy = {
   autoClamp: false,
+  enableNumberFormat: false,
   noStepAlign: false,
   noStepValidation: false
 };
 var modernNumericStrategy = {
   autoClamp: true,
+  enableNumberFormat: true,
   noStepAlign: true,
   noStepValidation: true
 };
@@ -20,4 +22,4 @@ export {
   modernNumericStrategy,
   createNumericStrategy
 };
-//# sourceMappingURL=chunk.UBAW2LID.js.map
+//# sourceMappingURL=chunk.RDYAIG65.js.map